feat: improve TopBar layout with refined styling and navigation state

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/components/layout/TopBar.vue

@@ -1,39 +1,24 @@
 <template>
   <header class="topbar" :class="{ 'chat-mode': isChat }">
     <div class="title-group">
-      <div class="eyebrow">Smart Expense Operations</div>
+      <div class="eyebrow">{{ isChat ? 'Smart Finance Q&A' : 'Smart Expense Operations' }}</div>
       <h1>{{ currentView.title }}</h1>
       <p>{{ currentView.desc }}</p>
     </div>
 
     <div class="top-actions">
-      <span v-if="isChat" class="search-wrap" :class="{ wide: isChat }">
-        <i class="mdi mdi-magnify search-icon"></i>
-        <input
-          :value="search"
-          type="search"
-          :placeholder="isChat ? '搜索报销单、发票、单号、部门...' : '搜索申请人、单号、费用类型...'"
-          @input="emit('update:search', $event.target.value)"
-        />
-      </span>
-
       <template v-if="isChat">
-        <button class="icon-btn notification" type="button" aria-label="查看通知">
-          <i class="mdi mdi-bell-outline"></i>
-          <span>1</span>
-        </button>
-        <button class="profile-btn" type="button" aria-label="打开用户菜单">
-          <span class="profile-avatar">张</span>
-          <span class="profile-copy">
-            <strong>张晓明</strong>
-            <small>财务管理员</small>
-          </span>
-          <i class="mdi mdi-chevron-down"></i>
-        </button>
+        <div class="kpi-chips">
+          <div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
       </template>
 
-      <template v-else>
-        <div v-if="isOverview" class="range-combo" aria-label="首页时间范围">
+      <template v-else-if="isOverview">
+        <div class="range-combo" aria-label="首页时间范围">
           <div class="range-shell">
             <span class="range-meta">
               <i class="mdi mdi-calendar"></i>
@@ -96,31 +81,46 @@
             </div>
           </div>
         </div>
+      </template>
 
-        <template v-if="isPolicies || isRequests"></template>
-
-        <template v-else-if="isApproval">
-          <button class="month-chip" type="button" aria-label="筛选审批日期">
-            <i class="mdi mdi-calendar"></i>
-            <span>筛选 / 日期</span>
-            <i class="mdi mdi-chevron-down"></i>
-          </button>
-          <button class="icon-btn notification" type="button" aria-label="查看通知">
-            <i class="mdi mdi-bell-outline"></i>
-            <span>9</span>
-          </button>
-          <button class="profile-btn" type="button" aria-label="打开用户菜单">
-            <span class="profile-avatar">张</span>
-            <span class="profile-copy">
-              <strong>张晓明</strong>
-              <small>财务管理部</small>
-            </span>
-            <i class="mdi mdi-chevron-down"></i>
+      <template v-else-if="isRequests">
+        <div class="kpi-chips">
+          <div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>单</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
+          </div>
+        </div>
+        <div class="topbar-spacer"></div>
+        <button class="create-top-btn" type="button">
+          <i class="mdi mdi-plus"></i>
+          <span>发起报销</span>
         </button>
       </template>
 
-        <template v-else-if="isRequests"></template>
+      <template v-else-if="isApproval">
+        <div class="kpi-chips">
+          <div v-for="kpi in approvalKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
+        <div class="topbar-spacer"></div>
+        <button class="create-top-btn" type="button">
+          <i class="mdi mdi-check-circle"></i>
+          <span>批量通过</span>
+        </button>
+      </template>
 
+      <template v-else-if="isPolicies">
+        <div class="kpi-chips">
+          <div v-for="kpi in knowledgeKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}</span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
       </template>
     </div>
   </header>
@@ -155,6 +155,34 @@ const isOverview = computed(() => props.activeView === 'overview')
 const isRequests = computed(() => props.activeView === 'requests')
 const isApproval = computed(() => props.activeView === 'approval')
 const isPolicies = computed(() => props.activeView === 'policies')
+
+const requestKpis = [
+  { label: '全部单据', value: 30, delta: '+8', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' },
+  { label: '待提交', value: 5, delta: '-1', trend: 'down', arrow: 'mdi mdi-arrow-down', color: '#f59e0b' },
+  { label: '审批中', value: 8, delta: '+2', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#3b82f6' },
+  { label: '已完成', value: 17, delta: '+7', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' }
+]
+
+const chatKpis = [
+  { label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },
+  { label: '已解决问题', value: 72, unit: '条', meta: '解决率 83.7%', trend: 'up', color: '#3b82f6' },
+  { label: '知识命中率', value: '92.3', unit: '%', meta: '较昨日 +2.6%', trend: 'up', color: '#8b5cf6' },
+  { label: '平均响应时长', value: 2.1, unit: 's', meta: '较昨日 -0.3s', trend: 'down', color: '#f59e0b' }
+]
+
+const approvalKpis = [
+  { label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: '#059669' },
+  { label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', trend: 'up', color: '#ef4444' },
+  { label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', trend: 'down', color: '#f59e0b' },
+  { label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: '#10b981' }
+]
+
+const knowledgeKpis = [
+  { label: '文档总数', value: '1,248', meta: '较上周 +68', trend: 'up', icon: 'mdi mdi-file-document-outline', color: '#10b981' },
+  { label: '文件夹总数', value: '36', meta: '较上周 +2', trend: 'up', icon: 'mdi mdi-folder-outline', color: '#3b82f6' },
+  { label: '问答总量', value: '8,562', meta: '较上周 +321', trend: 'up', icon: 'mdi mdi-comment-text-multiple-outline', color: '#8b5cf6' },
+  { label: '知识命中率', value: '87.3%', meta: '较上周 +1.2%', trend: 'up', icon: 'mdi mdi-bullseye-arrow', color: '#f59e0b' }
+]
 const calendarOpen = ref(false)
 const draftStart = ref(props.customRange.start)
 const draftEnd = ref(props.customRange.end)
@@ -178,7 +206,6 @@ const activeOption = computed(() =>
 )
 
 const isCustomRange = computed(() => props.activeRange === 'custom')
-
 const activeDateLabel = computed(() => {
   if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
   return dateLabels[activeOption.value?.label] ?? '2024-07-06 ~ 2024-07-12'
@@ -202,11 +229,6 @@ function setRange(range) {
   calendarOpen.value = false
 }
 
-function applyDraft(start, end) {
-  draftStart.value = start
-  draftEnd.value = end
-}
-
 function applyCustomRange() {
   if (!canApplyCustomRange.value) return
   emit('update:customRange', { start: draftStart.value, end: draftEnd.value })
@@ -277,46 +299,6 @@ function formatRangeLabel(start, end) {
   flex-wrap: wrap;
 }
 
-.search-wrap {
-  position: relative;
-  width: 256px;
-}
-
-.search-wrap.wide {
-  width: min(340px, 28vw);
-}
-
-.search-icon {
-  position: absolute;
-  left: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #64748b;
-  font-size: 15px;
-}
-
-.search-wrap input {
-  width: 100%;
-  height: 42px;
-  padding: 0 14px 0 40px;
-  border: 1px solid #d7e0ea;
-  border-radius: 8px;
-  background: #fff;
-  color: #0f172a;
-  font-size: 14px;
-  transition: border-color 160ms ease, box-shadow 160ms ease;
-}
-
-.search-wrap input::placeholder {
-  color: #8da0b4;
-}
-
-.search-wrap input:focus {
-  border-color: #10b981;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
-  outline: none;
-}
-
 .range-combo {
   position: relative;
   display: inline-flex;
@@ -401,7 +383,6 @@ function formatRangeLabel(start, end) {
   font-size: 13px;
   font-weight: 750;
   white-space: nowrap;
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
 
 .custom-range-btn:hover,
@@ -411,10 +392,6 @@ function formatRangeLabel(start, end) {
   color: #0f9f78;
 }
 
-.custom-range-btn.active {
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, .10);
-}
-
 .calendar-popover {
   position: absolute;
   top: calc(100% + 10px);
@@ -430,19 +407,6 @@ function formatRangeLabel(start, end) {
   box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
 }
 
-.calendar-popover::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  right: 30px;
-  width: 12px;
-  height: 12px;
-  border-top: 1px solid #d7e0ea;
-  border-left: 1px solid #d7e0ea;
-  background: #fff;
-  transform: rotate(45deg);
-}
-
 .calendar-popover header,
 .calendar-popover footer {
   display: flex;
@@ -467,11 +431,6 @@ function formatRangeLabel(start, end) {
   color: #64748b;
 }
 
-.calendar-popover header button:hover {
-  background: #f1f5f9;
-  color: #0f172a;
-}
-
 .date-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -499,12 +458,6 @@ function formatRangeLabel(start, end) {
   font-size: 13px;
 }
 
-.date-fields input:focus {
-  border-color: #10b981;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
-  outline: none;
-}
-
 .ghost-btn,
 .apply-btn {
   height: 36px;
@@ -531,111 +484,75 @@ function formatRangeLabel(start, end) {
   background: #cbd5e1;
 }
 
-.month-chip {
-  height: 42px;
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  padding: 0 14px;
-  border: 1px solid #d7e0ea;
-  border-radius: 8px;
-  background: #fff;
-  color: #334155;
-  font-size: 14px;
-  font-weight: 750;
+.kpi-chips {
+  display: flex;
+  gap: 10px;
 }
 
-.month-chip .mdi:first-child {
-  color: #64748b;
-}
-
-.month-chip:hover {
-  border-color: rgba(16, 185, 129, .32);
-  color: #0f9f78;
-}
-
-.icon-btn,
-.profile-btn {
-  border: 0;
-  background: transparent;
-}
-
-.icon-btn {
-  position: relative;
-  width: 42px;
-  height: 42px;
+.kpi-chip {
   display: grid;
-  place-items: center;
-  border-radius: 999px;
-  color: #334155;
-  font-size: 20px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  gap: 2px 10px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 8%, #fff), color-mix(in srgb, var(--chip-color) 3%, #f8fafc));
+  border: 1px solid color-mix(in srgb, var(--chip-color) 18%, #e2e8f0);
 }
 
-.icon-btn:hover,
-.profile-btn:hover {
-  background: #f3f7fa;
-}
-
-.notification span {
-  position: absolute;
-  top: 4px;
-  right: 5px;
-  min-width: 18px;
-  height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #fff;
-  border-radius: 999px;
-  background: #ff3b45;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 800;
+.chip-value {
+  grid-row: 1 / 3;
+  align-self: center;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 850;
   line-height: 1;
 }
 
-.profile-btn {
-  min-height: 46px;
-  display: inline-grid;
-  grid-template-columns: 38px minmax(0, 1fr) 18px;
-  align-items: center;
-  gap: 10px;
-  padding: 4px 6px;
-  border-radius: 10px;
-  color: #334155;
-  text-align: left;
+.chip-value small {
+  font-size: 13px;
+  font-weight: 700;
+  margin-left: 2px;
 }
 
-.profile-avatar {
-  width: 38px;
-  height: 38px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #203047, #60758a);
-  color: #fff;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.profile-copy {
-  display: grid;
-  gap: 2px;
-}
-
-.profile-copy strong {
-  color: #172033;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.profile-copy small {
+.chip-label {
   color: #64748b;
   font-size: 12px;
+  font-weight: 700;
 }
 
-.profile-btn .mdi {
-  color: #64748b;
+.chip-delta {
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.chip-delta.up { color: #059669; }
+.chip-delta.down { color: #f59e0b; }
+
+.topbar-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.create-top-btn {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: 8px;
+  background: #059669;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 750;
+  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
+  white-space: nowrap;
+}
+
+.create-top-btn:hover {
+  background: #047857;
 }
 
 @media (max-width: 1120px) {
@@ -654,9 +571,9 @@ function formatRangeLabel(start, end) {
   .top-actions,
   .search-wrap,
   .search-wrap.wide,
-  .date-chip,
   .month-chip,
-  .top-btn {
+  .qa-filter,
+  .new-question-btn {
     width: 100%;
   }
 
@@ -681,10 +598,6 @@ function formatRangeLabel(start, end) {
     right: auto;
     left: 0;
   }
-
-  .profile-btn {
-    justify-content: start;
-  }
 }
 
 @media (max-width: 640px) {

src/composables/useNavigation.js

@@ -29,18 +29,18 @@ export const navItems = [
   {
     id: 'chat',
     label: 'AI助手',
-    navHint: '指标、趋势与行动建议',
+    navHint: '财务知识问答与制度解释',
     icon: icons.message,
-    title: 'AI 财务助手',
-    desc: '问指标、看趋势、拿建议，辅助你处理当前报销运营工作'
+    title: '财务AI助手',
+    desc: '面向员工与财务场景的智能问答助手，提供制度解读、报销指引与常见问题解答'
   },
   {
     id: 'policies',
     label: '知识管理',
-    navHint: '制度、文档与知识图谱',
+    navHint: '制度、文档与知识库',
     icon: icons.file,
     title: '财务知识管理中心',
-    desc: '上传制度文档、沉淀财务知识、构建知识图谱，面向员工问答与知识管理'
+    desc: '上传制度文档、沉淀财务知识、构建面向员工问答与知识管理的统一知识库'
   },
   {
     id: 'audit',
@@ -48,7 +48,7 @@ export const navItems = [
     navHint: '关键动作与日志',
     icon: icons.audit,
     title: '审计追踪',
-    desc: '查看关键审批动作、AI 建议和制度命中记录。'
+    desc: '查看关键审批动作、AI 建议和制度命中记录'
   }
 ]