Polish absence analysis demo experience

frontend/src/App.vue

@@ -2,10 +2,9 @@
   <div class="shell" :class="{ 'shell-collapsed': isSidebarCollapsed }">
     <aside class="shell-sidebar">
       <div class="brand-block">
-        <div class="brand-mark">HR</div>
+        <div class="brand-mark"></div>
         <div v-if="!isSidebarCollapsed">
           <div class="brand-title">企业缺勤分析台</div>
-          <div class="brand-subtitle">Human Resource Insight Console</div>
         </div>
       </div>
 
@@ -30,14 +29,14 @@
           </el-menu-item>
           <el-menu-item index="/jdr-analysis">
             <el-icon class="nav-icon"><Reading /></el-icon>
-            <span class="nav-label">JD-R分析</span>
+            <span class="nav-label">理论分析</span>
           </el-menu-item>
         </el-menu>
       </div>
 
       <div v-if="!isSidebarCollapsed" class="sidebar-note">
         <div class="sidebar-label">系统摘要</div>
-        <p>面向企业管理场景的缺勤趋势、风险预测与群体画像展示。</p>
+        <p>缺勤趋势、风险预测与群体画像。</p>
       </div>
     </aside>
 
@@ -56,8 +55,6 @@
           <el-button class="theme-toggle" @click="toggleTheme">
             {{ isDarkMode ? '浅色模式' : '深色模式' }}
           </el-button>
-          <span class="topbar-badge">企业健康运营分析</span>
-          <span class="topbar-badge topbar-badge-accent">可视化决策界面</span>
         </div>
       </header>
 
@@ -81,23 +78,23 @@ const isDarkMode = ref(false)
 const metaMap = {
   '/dashboard': {
     title: '数据概览',
-    subtitle: '从企业缺勤事件的总量、时序与结构分布切入，建立整体认知。'
+    subtitle: '缺勤事件总量、趋势与结构分布'
   },
   '/analysis': {
     title: '影响因素',
-    subtitle: '观察模型最关注的驱动因素，辅助解释缺勤风险的来源。'
+    subtitle: '关键驱动因素与群体差异'
   },
   '/prediction': {
     title: '缺勤预测',
-    subtitle: '围绕最核心的业务信号输入，快速获得缺勤时长与风险等级。'
+    subtitle: '缺勤时长、风险等级与模型对比'
   },
   '/clustering': {
     title: '员工画像',
-    subtitle: '通过聚类划分典型群体，为答辩演示提供更直观的人群视角。'
+    subtitle: '典型群体划分与画像分析'
   },
   '/jdr-analysis': {
-    title: 'JD-R理论分析',
-    subtitle: '基于工作要求-资源理论的可解释分析，揭示缺勤的心理学驱动因素。'
+    title: '理论分析',
+    subtitle: '工作要求、资源支持与缺勤风险'
   }
 }
 
@@ -164,8 +161,28 @@ watch(isDarkMode, value => {
   border-radius: 16px;
   background: linear-gradient(135deg, #fef3c7, #fdba74);
   color: #7c2d12;
-  font-weight: 800;
-  letter-spacing: 0.08em;
+  position: relative;
+}
+
+.brand-mark::before,
+.brand-mark::after {
+  content: '';
+  position: absolute;
+  border-radius: 999px;
+  background: rgba(124, 45, 18, 0.9);
+}
+
+.brand-mark::before {
+  width: 20px;
+  height: 20px;
+}
+
+.brand-mark::after {
+  width: 8px;
+  height: 8px;
+  right: 11px;
+  bottom: 11px;
+  background: rgba(255, 255, 255, 0.72);
 }
 
 .brand-title {
@@ -174,12 +191,6 @@ watch(isDarkMode, value => {
   color: var(--sidebar-text);
 }
 
-.brand-subtitle {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--sidebar-text-subtle);
-}
-
 .sidebar-panel,
 .sidebar-note {
   padding: 18px;
@@ -296,19 +307,6 @@ watch(isDarkMode, value => {
   color: var(--text-main);
 }
 
-.topbar-badge {
-  padding: 9px 14px;
-  border: 1px solid var(--line-soft);
-  border-radius: 999px;
-  background: var(--surface);
-  font-size: 12px;
-  color: var(--brand-strong);
-}
-
-.topbar-badge-accent {
-  color: var(--accent);
-}
-
 .main-content {
   min-width: 0;
 }