fix: opt page style
This commit is contained in:
engigu
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { RouterLink, RouterView, useRoute } from 'vue-router'
|
||||
import { resetAuthCache } from '@/router'
|
||||
import { LayoutDashboard, ListTodo, FileCode, Settings, LogOut, ScrollText, Terminal, Variable, KeyRound, Package, Menu, X, Server } from 'lucide-vue-next'
|
||||
@@ -46,6 +46,10 @@ const cachedSentence = loadSentenceFromCache()
|
||||
const sentence = ref(cachedSentence || '欢迎使用白虎面板')
|
||||
const { siteSettings, loadSettings } = useSiteSettings()
|
||||
const mobileMenuOpen = ref(false)
|
||||
const sentenceContent = computed(() => {
|
||||
const match = sentence.value.match(/^"(.+)"—— /)
|
||||
return match ? match[1] : sentence.value
|
||||
})
|
||||
|
||||
const navItems = [
|
||||
{ to: '/', icon: LayoutDashboard, label: '数据仪表', exact: true },
|
||||
@@ -140,7 +144,10 @@ onMounted(() => {
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden" @click="mobileMenuOpen = true">
|
||||
<Menu class="h-5 w-5" />
|
||||
</Button>
|
||||
<span class="text-[10px] sm:text-sm text-muted-foreground truncate flex-1 min-w-0 mr-4" :title="sentence">{{ sentence }}</span>
|
||||
<span class="text-sm text-muted-foreground truncate flex-1 min-w-0 mr-4" :title="sentence">
|
||||
<span class="hidden sm:inline">{{ sentence }}</span>
|
||||
<span class="sm:hidden">{{ sentenceContent }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,10 @@ const taskStats = ref<TaskStatsItem[]>([])
|
||||
const chartsLoaded = ref(false)
|
||||
const sentence = ref('')
|
||||
const isMobile = ref(window.innerWidth < 768)
|
||||
const sentenceContent = computed(() => {
|
||||
const match = sentence.value.match(/^"(.+)"—— /)
|
||||
return match ? match[1] : sentence.value
|
||||
})
|
||||
const chartDays = computed(() => isMobile.value ? 15 : 30)
|
||||
|
||||
let lineChart: ApexCharts | null = null
|
||||
@@ -38,23 +42,23 @@ function animateNumber(key: keyof Stats, target: number) {
|
||||
const start = displayStats.value[key]
|
||||
const duration = 800 // 动画持续时间
|
||||
const startTime = performance.now()
|
||||
|
||||
|
||||
function update(currentTime: number) {
|
||||
const elapsed = currentTime - startTime
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
|
||||
|
||||
// 使用 easeOutCubic 缓动函数
|
||||
const easeProgress = 1 - Math.pow(1 - progress, 3)
|
||||
|
||||
|
||||
displayStats.value[key] = Math.round(start + (target - start) * easeProgress)
|
||||
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update)
|
||||
} else {
|
||||
displayStats.value[key] = target
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
requestAnimationFrame(update)
|
||||
}
|
||||
|
||||
@@ -80,7 +84,7 @@ function getGridColor() {
|
||||
function handleThemeChange() {
|
||||
// 初始化期间忽略主题变化
|
||||
if (isInitializing) return
|
||||
|
||||
|
||||
const newIsDark = document.documentElement.classList.contains('dark')
|
||||
if (newIsDark !== isDark.value) {
|
||||
isDark.value = newIsDark
|
||||
@@ -128,11 +132,11 @@ async function reloadCharts() {
|
||||
// 等待 Vue 更新 DOM
|
||||
await nextTick()
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
|
||||
|
||||
// 检查容器是否存在再渲染
|
||||
const statsChart = document.querySelector("#stats-chart")
|
||||
const pieChartEl = document.querySelector("#pie-chart")
|
||||
|
||||
|
||||
if (statsChart && pieChartEl && statsChart.parentElement && pieChartEl.parentElement) {
|
||||
renderLineChart()
|
||||
renderPieChart()
|
||||
@@ -144,15 +148,15 @@ async function reloadCharts() {
|
||||
const renderLineChart = () => {
|
||||
const container = document.querySelector("#stats-chart")
|
||||
if (!container || !container.parentElement) return
|
||||
|
||||
|
||||
if (lineChart) {
|
||||
lineChart.destroy()
|
||||
lineChart = null
|
||||
}
|
||||
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = ''
|
||||
|
||||
|
||||
const textColor = getTextColor()
|
||||
const gridColor = getGridColor()
|
||||
const options = {
|
||||
@@ -283,18 +287,18 @@ const renderLineChart = () => {
|
||||
|
||||
const renderPieChart = () => {
|
||||
if (taskStats.value.length === 0) return
|
||||
|
||||
|
||||
const container = document.querySelector("#pie-chart")
|
||||
if (!container || !container.parentElement) return
|
||||
|
||||
|
||||
if (pieChart) {
|
||||
pieChart.destroy()
|
||||
pieChart = null
|
||||
}
|
||||
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = ''
|
||||
|
||||
|
||||
const totalCount = taskStats.value.reduce((sum, item) => sum + item.count, 0)
|
||||
const textColor = getTextColor()
|
||||
const options = {
|
||||
@@ -367,13 +371,13 @@ const renderPieChart = () => {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: number) => val.toFixed(1) + '%',
|
||||
style: {
|
||||
fontSize: '11px',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
fontWeight: 'bold',
|
||||
style: {
|
||||
fontSize: '11px',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
fontWeight: 'bold',
|
||||
colors: ['#ffffff']
|
||||
},
|
||||
dropShadow: {
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 1,
|
||||
left: 1,
|
||||
@@ -396,7 +400,7 @@ const renderPieChart = () => {
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
|
||||
|
||||
try {
|
||||
const [statsData, sendStatsData, taskStatsData, sentenceData] = await Promise.all([
|
||||
api.dashboard.stats(),
|
||||
@@ -408,13 +412,13 @@ onMounted(async () => {
|
||||
sendStats.value = sendStatsData
|
||||
taskStats.value = taskStatsData
|
||||
sentence.value = sentenceData.sentence
|
||||
|
||||
|
||||
// 渲染图表
|
||||
setTimeout(() => {
|
||||
renderLineChart()
|
||||
renderPieChart()
|
||||
chartsLoaded.value = true
|
||||
|
||||
|
||||
// 图表渲染完成后，延迟启动主题监听，避免初始化时的闪烁
|
||||
setTimeout(() => {
|
||||
isInitializing = false
|
||||
@@ -425,7 +429,7 @@ onMounted(async () => {
|
||||
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
|
||||
}, 500)
|
||||
}, 100)
|
||||
} catch {}
|
||||
} catch { }
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -447,11 +451,15 @@ onUnmounted(() => {
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
|
||||
<p class="text-muted-foreground">{{ sentence || '查看系统运行状态和统计数据' }}</p>
|
||||
<p class="text-muted-foreground truncate" :title="sentence">
|
||||
<span class="hidden sm:inline">{{ sentence || '查看系统运行状态和统计数据' }}</span>
|
||||
<span class="sm:hidden">{{ sentenceContent || '查看系统运行状态和统计数据' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors" @click="navigateTo(item.route)">
|
||||
<Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
@click="navigateTo(item.route)">
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-xs sm:text-sm font-medium">{{ item.label }}</CardTitle>
|
||||
<component :is="item.icon" class="h-4 w-4 text-muted-foreground" />
|
||||
@@ -470,7 +478,8 @@ onUnmounted(() => {
|
||||
</CardHeader>
|
||||
<CardContent class="relative h-[300px]">
|
||||
<div id="stats-chart" class="w-full h-full"></div>
|
||||
<div v-if="!chartsLoaded" class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
<div v-if="!chartsLoaded"
|
||||
class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
加载中...
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -483,10 +492,12 @@ onUnmounted(() => {
|
||||
</CardHeader>
|
||||
<CardContent class="relative h-[300px]">
|
||||
<div id="pie-chart" class="w-full h-full"></div>
|
||||
<div v-if="!chartsLoaded" class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
<div v-if="!chartsLoaded"
|
||||
class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
加载中...
|
||||
</div>
|
||||
<div v-else-if="taskStats.length === 0" class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
<div v-else-if="taskStats.length === 0"
|
||||
class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
|
||||
暂无数据
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user