admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: opt page style

Browse Source
This commit is contained in:
engigu
2026-01-22 20:03:58 +08:00
parent 05f582bd28
commit f40e43c1a9
2 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/layouts/MainLayout.vue
+9 -2
View File
@@ -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>
web/src/views/dashboard/Dashboard.vue
+16 -5
View File
@@ -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
@@ -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>