fix: opt page style

web/src/layouts/MainLayout.vue

@@ -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

@@ -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
@@ -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>