From e54ebd072ab29d6b939ae276719d22cd48a31fa0 Mon Sep 17 00:00:00 2001
From: "WIN-JHFT4D3SIVT\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Wed, 29 Apr 2026 23:35:56 +0800
Subject: [PATCH] feat: enhance layout components, data layer and global styles

- SidebarRail, TopBar, FilterBar: improved navigation and filtering UX

- metrics.js, requests.js: expanded data with multi-range trend series

- composables: enhanced useChat, useNavigation, useRequests

- global.css: refined design tokens and utility classes

- Add DocFilterBar component and LoginView page

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/App.vue                              |  62 +++++--
 src/assets/styles/global.css             |  45 ++---
 src/components/business/RequestTable.vue |   2 +-
 src/components/layout/DocFilterBar.vue   |  54 ++++++
 src/components/layout/FilterBar.vue      | 132 ++++++++++++---
 src/components/layout/SidebarRail.vue    | 200 ++++++++++++++++++++---
 src/components/layout/TopBar.vue         | 169 +++++++++++++++----
 src/composables/useChat.js               |  28 +++-
 src/composables/useNavigation.js         |  45 ++++-
 src/composables/useRequests.js           |  38 ++++-
 src/data/icons.js                        |   3 +-
 src/data/metrics.js                      | 142 ++++++++++++++--
 src/data/requests.js                     |  35 +++-
 src/main.js                              |  18 +-
 start.sh                                 |  71 ++++----
 15 files changed, 845 insertions(+), 199 deletions(-)
 create mode 100644 src/components/layout/DocFilterBar.vue

diff --git a/src/App.vue b/src/App.vue
index ce03541..08109f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="app">
+  <!-- Login Page -->
+  <LoginView v-if="!loggedIn" @login="handleLogin" />
+
+  <!-- Main App -->
+  <div v-else class="app">
     <SidebarRail
       :nav-items="navItems"
       :active-view="activeView"
@@ -11,19 +15,30 @@
       <TopBar
         :current-view="currentView"
         :search="search"
+        :active-view="activeView"
         @update:search="search = $event"
         @batch-approve="toast('已筛出 23 个低风险单据，可进入批量通过确认。')"
         @open-chat="openChat"
+        @new-application="openNewChat"
       />
 
       <FilterBar
         v-if="activeView !== 'chat'"
+        :compact="activeView === 'overview'"
         :filters="filters"
         :ranges="ranges"
         :active-range="activeRange"
         @update:active-range="activeRange = $event"
       />
 
+      <DocFilterBar
+        v-if="activeView === 'chat'"
+        :doc-filters="docFilters"
+        :doc-months="docMonths"
+        :doc-types="docTypes"
+        :doc-statuses="docStatuses"
+      />
+
       <section class="workarea">
         <OverviewView
           v-if="activeView === 'overview'"
@@ -35,16 +50,18 @@
 
         <ChatView
           v-else-if="activeView === 'chat'"
-          ref="chatViewRef"
+          :documents="filteredDocuments"
+          :doc-search="docSearch"
           :messages="messages"
           :uploaded-files="uploadedFiles"
           :active-case="activeCase"
-          :quick-prompts="prompts"
+          :quick-prompts="travelPrompts"
           :draft="draft"
           :message-list="messageList"
           @send="sendMessage"
           @upload="handleUpload"
           @draft="draft = $event"
+          @select-case="openChat"
           @approve-case="toast(`${activeCase?.id} 已生成通过意见。`)"
           @reject-case="toast(`${activeCase?.id} 已转人工复核。`)"
         />
@@ -73,23 +90,49 @@ import './assets/styles/global.css'
 import SidebarRail from './components/layout/SidebarRail.vue'
 import TopBar from './components/layout/TopBar.vue'
 import FilterBar from './components/layout/FilterBar.vue'
+import DocFilterBar from './components/layout/DocFilterBar.vue'
 import ToastNotification from './components/shared/ToastNotification.vue'
+import LoginView from './views/LoginView.vue'
 import OverviewView from './views/OverviewView.vue'
 import ChatView from './views/ChatView.vue'
 import RequestsView from './views/RequestsView.vue'
 import PoliciesView from './views/PoliciesView.vue'
 import AuditView from './views/AuditView.vue'
 
+import { ref, computed, reactive } from 'vue'
 import { useNavigation, navItems } from './composables/useNavigation.js'
 import { useRequests } from './composables/useRequests.js'
 import { useChat } from './composables/useChat.js'
 import { useToast } from './composables/useToast.js'
+import { documents, docTypes, docStatuses, docMonths } from './data/requests.js'
+
+const loggedIn = ref(false)
+
+function handleLogin() {
+  loggedIn.value = true
+}
 
 const { activeView, currentView, setView } = useNavigation()
 const { requests, search, filters, ranges, activeRange, filteredRequests, approveRequest, rejectRequest } = useRequests()
-const { messages, draft, uploadedFiles, messageList, activeCase, prompts, sendMessage, handleUpload, openChat } = useChat(activeView)
+const { messages, draft, uploadedFiles, messageList, activeCase, prompts, sendMessage, handleUpload, openChat, openNewChat } = useChat(activeView)
 const { toastText, toast } = useToast()
 
+/* ── Document management state ── */
+const docSearch = ref('')
+const docFilters = reactive({ month: '2026-04', type: '全部类型', status: '全部状态' })
+const travelPrompts = ['帮我提交出差申请', '预订机票', '预订酒店', '预订火车票', '查询差旅政策']
+
+const filteredDocuments = computed(() => {
+  const key = docSearch.value.trim().toLowerCase()
+  return documents.filter((doc) => {
+    const matchesSearch = !key || `${doc.id}${doc.applicant}${doc.destination}${doc.type}`.toLowerCase().includes(key)
+    const matchesType = docFilters.type === '全部类型' || doc.type === docFilters.type
+    const matchesStatus = docFilters.status === '全部状态' || doc.status === docFilters.status
+    const matchesMonth = doc.date.startsWith(docFilters.month)
+    return matchesSearch && matchesType && matchesStatus && matchesMonth
+  })
+})
+
 function handleApprove(request) {
   const msg = approveRequest(request)
   toast(msg)
@@ -105,18 +148,17 @@ function handleReject(request) {
 .app {
   min-height: 100dvh;
   display: grid;
-  grid-template-columns: 76px minmax(0, 1fr);
-  background:
-    radial-gradient(circle at 22% -12%, rgba(51,92,255,.10), transparent 34%),
-    linear-gradient(180deg, #fff 0, var(--bg) 260px);
+  grid-template-columns: 256px minmax(0, 1fr);
+  background: var(--bg);
 }
 .main { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
-.workarea { overflow: auto; padding: 22px 28px 34px; }
+.workarea { overflow: auto; padding: 24px; }
 
 @media (max-width: 1180px) {
-  .app { grid-template-columns: 72px minmax(0, 1fr); }
+  .app { grid-template-columns: 236px minmax(0, 1fr); }
 }
 @media (max-width: 760px) {
   .app { display: block; }
+  .workarea { padding: 18px 16px 28px; }
 }
 </style>
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index 85a8b31..f60d834 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -1,20 +1,24 @@
 :root {
-  --bg: #f6f8fb;
+  --bg: #f8fafc;
   --surface: #fff;
   --surface-soft: #f9fbff;
-  --ink: #101828;
-  --text: #344054;
-  --muted: #667085;
-  --line: #e4e7ec;
-  --line-strong: #d0d5dd;
-  --primary: #335cff;
-  --primary-soft: #eef3ff;
-  --success: #0e9384;
-  --success-soft: #e7f8f5;
-  --warning: #b54708;
-  --warning-soft: #fff4e5;
-  --danger: #b42318;
-  --danger-soft: #ffebe9;
+  --ink: #1e293b;
+  --text: #334155;
+  --muted: #64748b;
+  --line: #e2e8f0;
+  --line-strong: #cbd5e1;
+  --primary: #10b981;
+  --primary-soft: #ecfdf5;
+  --secondary: #3b82f6;
+  --purple: #8b5cf6;
+  --orange: #f59e0b;
+  --red: #ef4444;
+  --success: #10b981;
+  --success-soft: #ecfdf5;
+  --warning: #f59e0b;
+  --warning-soft: #fffbeb;
+  --danger: #ef4444;
+  --danger-soft: #fef2f2;
   --nav: #0b1220;
   --nav-muted: #7d89a5;
   --radius: 8px;
@@ -26,11 +30,11 @@
 body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
 button, input, select, textarea { font: inherit; }
 button { cursor: pointer; }
-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(51,92,255,.24); outline-offset: 2px; }
+button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(16,185,129,.20); outline-offset: 2px; }
 
-.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+.eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
 h1, h2, h3, p { margin: 0; }
-h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
+h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; font-weight: 700; }
 
 .btn {
   min-height: 42px;
@@ -59,13 +63,12 @@ h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line
 .badge.danger { background: var(--danger-soft); color: var(--danger); }
 
 .panel {
-  border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--surface);
-  box-shadow: 0 1px 2px rgba(16,24,40,.04);
-  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
+  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
+  transition: box-shadow 160ms var(--ease);
 }
-.panel:hover { transform: translateY(-2px); border-color: rgba(51,92,255,.22); box-shadow: 0 16px 42px rgba(16,24,40,.08); }
+.panel:hover { box-shadow: 0 4px 10px rgba(15,23,42,.08); }
 
 .mini-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 12px; font-weight: 750; }
 
diff --git a/src/components/business/RequestTable.vue b/src/components/business/RequestTable.vue
index ade67e9..9645cdd 100644
--- a/src/components/business/RequestTable.vue
+++ b/src/components/business/RequestTable.vue
@@ -22,7 +22,7 @@
               <span class="badge" :class="request.status">{{ request.verdict }}</span>
             </td>
             <td>
-              <span class="badge" :class="request.sla.includes('51') ? 'danger' : ''">{{ request.sla }}</span>
+              <span class="badge" :class="request.slaStatus">{{ request.sla }}</span>
             </td>
             <td>{{ request.risk }}</td>
             <td>
diff --git a/src/components/layout/DocFilterBar.vue b/src/components/layout/DocFilterBar.vue
new file mode 100644
index 0000000..d3700ad
--- /dev/null
+++ b/src/components/layout/DocFilterBar.vue
@@ -0,0 +1,54 @@
+<template>
+  <section class="doc-filters" aria-label="单据筛选">
+    <div class="filter-item">
+      <span class="filter-label">申请月份</span>
+      <Dropdown v-model="docFilters.month" :options="docMonths" placeholder="选择月份" appendTo="body" class="filter-dropdown">
+        <template #option="{ option }">
+          {{ formatMonth(option) }}
+        </template>
+        <template #value="{ value }">
+          {{ formatMonth(value) }}
+        </template>
+      </Dropdown>
+    </div>
+    <div class="filter-item">
+      <span class="filter-label">申请类型</span>
+      <Dropdown v-model="docFilters.type" :options="docTypes" placeholder="选择类型" appendTo="body" class="filter-dropdown" />
+    </div>
+    <div class="filter-item">
+      <span class="filter-label">单据状态</span>
+      <Dropdown v-model="docFilters.status" :options="docStatuses" placeholder="选择状态" appendTo="body" class="filter-dropdown" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import Dropdown from 'primevue/dropdown'
+
+defineProps({
+  docFilters: { type: Object, required: true },
+  docMonths: { type: Array, required: true },
+  docTypes: { type: Array, required: true },
+  docStatuses: { type: Array, required: true }
+})
+
+function formatMonth(m) {
+  if (!m) return ''
+  const [y, mm] = m.split('-')
+  return `${y}年${parseInt(mm)}月`
+}
+</script>
+
+<style scoped>
+.doc-filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 14px;
+  padding: 16px 28px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+.filter-item { display: grid; gap: 6px; }
+.filter-label { color: var(--muted); font-size: 12px; font-weight: 700; }
+.filter-dropdown { width: 100%; }
+</style>
diff --git a/src/components/layout/FilterBar.vue b/src/components/layout/FilterBar.vue
index 3c0492d..214704d 100644
--- a/src/components/layout/FilterBar.vue
+++ b/src/components/layout/FilterBar.vue
@@ -1,6 +1,7 @@
 <template>
-  <section class="filters" aria-label="筛选条件">
-    <label>
+  <section class="filters" :class="{ compact }" aria-label="筛选条件">
+    <template v-if="!compact">
+      <label>
       <span>法人主体</span>
       <select v-model="filters.entity">
         <option>全部主体</option>
@@ -13,10 +14,10 @@
       <span>费用类型</span>
       <select v-model="filters.category">
         <option>全部费用</option>
-        <option>差旅交通</option>
-        <option>住宿</option>
-        <option>业务招待</option>
-        <option>办公采购</option>
+        <option>机票</option>
+        <option>酒店</option>
+        <option>火车/用车</option>
+        <option>餐补及杂费</option>
       </select>
     </label>
     <label>
@@ -27,17 +28,21 @@
         <option>需解释</option>
         <option>低风险</option>
       </select>
-    </label>
-    <div class="segmented" role="tablist" aria-label="处理视图">
-      <button
-        v-for="range in ranges"
-        :key="range"
-        :class="{ active: activeRange === range }"
-        type="button"
-        @click="emit('update:activeRange', range)"
-      >
-        {{ range }}
-      </button>
+      </label>
+    </template>
+    <div class="segmented-wrap" :class="{ compact }">
+      <span v-if="!compact">时间范围</span>
+      <div class="segmented" role="tablist" aria-label="处理视图">
+        <button
+          v-for="range in ranges"
+          :key="range"
+          :class="{ active: activeRange === range }"
+          type="button"
+          @click="emit('update:activeRange', range)"
+        >
+          {{ range }}
+        </button>
+      </div>
     </div>
   </section>
 </template>
@@ -46,7 +51,8 @@
 defineProps({
   filters: { type: Object, required: true },
   ranges: { type: Array, required: true },
-  activeRange: { type: String, required: true }
+  activeRange: { type: String, required: true },
+  compact: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['update:activeRange'])
@@ -55,15 +61,89 @@ const emit = defineEmits(['update:activeRange'])
 <style scoped>
 .filters {
   display: grid;
-  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
+  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
   gap: 14px;
-  padding: 16px 28px;
+  padding: 0 16px 12px;
   border-bottom: 1px solid var(--line);
-  background: var(--surface);
+  background: #fff;
+}
+
+.filters.compact {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 16px 12px;
+}
+
+.filters label,
+.segmented-wrap {
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.filters select {
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ink);
+}
+
+.segmented-wrap {
+  justify-self: end;
+}
+
+.segmented {
+  align-self: end;
+  display: inline-grid;
+  grid-auto-flow: column;
+  gap: 8px;
+  min-height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.segmented button {
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #fff;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.segmented button.active {
+  background: #f1f5f9;
+  color: #1e293b;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+@media (max-width: 980px) {
+  .filters {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .segmented-wrap {
+    justify-self: start;
+  }
+}
+
+@media (max-width: 760px) {
+  .filters {
+    grid-template-columns: 1fr;
+    padding: 0 16px 16px;
+  }
+
+  .segmented {
+    width: 100%;
+  }
 }
-.filters label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
-.filters select { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
-.segmented { align-self: end; display: inline-grid; grid-auto-flow: column; gap: 4px; min-height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
-.segmented button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; }
-.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
 </style>
diff --git a/src/components/layout/SidebarRail.vue b/src/components/layout/SidebarRail.vue
index f865eaf..22f20ab 100644
--- a/src/components/layout/SidebarRail.vue
+++ b/src/components/layout/SidebarRail.vue
@@ -1,6 +1,15 @@
 <template>
   <aside class="rail" aria-label="主导航">
-    <div class="mark">RO</div>
+    <div class="rail-brand">
+      <div class="brand-mark">星</div>
+      <div class="brand-copy">
+        <strong>星海科技</strong>
+      </div>
+      <button class="brand-toggle" type="button" aria-label="打开合规对话" @click="emit('openChat')">
+        <i class="pi pi-angle-left"></i>
+      </button>
+    </div>
+
     <nav class="rail-nav">
       <button
         v-for="item in navItems"
@@ -8,30 +17,33 @@
         class="nav-btn"
         :class="{ active: activeView === item.id }"
         type="button"
-        :aria-label="item.label"
-        :title="item.label"
         @click="emit('navigate', item.id)"
       >
-        <span v-html="item.icon"></span>
+        <span class="nav-icon" v-html="item.icon"></span>
+        <span class="nav-copy">
+          <strong>{{ item.label }}</strong>
+        </span>
       </button>
     </nav>
-    <button class="nav-btn muted" type="button" aria-label="打开合规对话" title="打开合规对话" @click="emit('openChat')">
-      <span v-html="messageIcon"></span>
-    </button>
+
+    <div class="rail-user">
+      <div class="user-avatar">张</div>
+      <div class="user-copy">
+        <strong>张晓明</strong>
+        <span>财务管理员</span>
+      </div>
+      <i class="pi pi-angle-down"></i>
+    </div>
   </aside>
 </template>
 
 <script setup>
-import { icons } from '../../data/icons.js'
-
 defineProps({
   navItems: { type: Array, required: true },
   activeView: { type: String, required: true }
 })
 
 const emit = defineEmits(['navigate', 'openChat'])
-
-const messageIcon = icons.message
 </script>
 
 <style scoped>
@@ -41,30 +53,164 @@ const messageIcon = icons.message
   height: 100dvh;
   display: grid;
   grid-template-rows: auto 1fr auto;
-  gap: 18px;
-  padding: 18px 12px;
-  background: var(--nav);
-  color: #fff;
+  gap: 0;
+  padding: 0;
+  background: #fff;
+  border-right: 1px solid var(--line);
   z-index: 20;
 }
-.mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,#fff,#9db2ff); color: #10215c; font-weight: 850; }
-.rail-nav { display: grid; gap: 10px; align-content: start; }
-.nav-btn {
-  width: 48px;
-  min-height: 48px;
+
+.rail-brand,
+.rail-user {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.rail-brand {
+  padding: 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.brand-mark,
+.user-avatar {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  background: var(--primary);
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: #e2f6ef;
+  color: #047857;
+}
+
+.brand-copy,
+.user-copy,
+.nav-copy {
+  min-width: 0;
+  display: grid;
+}
+
+.brand-copy strong,
+.user-copy strong,
+.nav-copy strong {
+  color: var(--ink);
+  font-size: 14px;
+}
+
+.user-copy span,
+.nav-copy small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.brand-toggle {
+  width: 28px;
+  min-height: 28px;
   display: grid;
   place-items: center;
   border: 0;
-  border-radius: 14px;
+  border-radius: 6px;
   background: transparent;
-  color: var(--nav-muted);
-  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
+  color: #94a3b8;
+}
+
+.rail-nav {
+  display: grid;
+  gap: 4px;
+  align-content: start;
+  padding: 16px 12px;
+  overflow-y: auto;
+}
+
+.nav-btn {
+  width: 100%;
+  min-height: 42px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #475569;
+  text-align: left;
+  transition: background 160ms var(--ease), color 160ms var(--ease);
+}
+
+.nav-btn:hover,
+.nav-btn.active {
+  background: rgba(16,185,129,.10);
+  color: var(--primary);
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+}
+
+.nav-btn :deep(svg) {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.rail-user {
+  padding: 16px;
+  border-top: 1px solid var(--line);
+  background: #fff;
+}
+
+.rail-user .pi {
+  color: var(--muted);
+}
+
+@media (max-width: 980px) {
+  .rail {
+    position: relative;
+    height: auto;
+    gap: 14px;
+  }
+
+  .rail-nav {
+    grid-auto-flow: row;
+  }
 }
-.nav-btn:hover, .nav-btn.active { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
-.nav-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
 
 @media (max-width: 760px) {
-  .rail { position: sticky; height: auto; grid-template-columns: auto 1fr auto; grid-template-rows: none; padding: 10px 12px; }
-  .rail-nav { display: flex; overflow-x: auto; }
+  .rail {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 14px;
+  }
+
+  .rail-nav {
+    display: flex;
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+
+  .nav-btn {
+    min-width: 190px;
+  }
 }
 </style>
diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
index ee11548..dbb9ef4 100644
--- a/src/components/layout/TopBar.vue
+++ b/src/components/layout/TopBar.vue
@@ -1,56 +1,163 @@
 <template>
   <header class="topbar">
-    <div>
-      <div class="eyebrow">Global finance operations</div>
+    <div class="title-group">
+      <div class="eyebrow">Smart Expense Operations</div>
       <h1>{{ currentView.title }}</h1>
       <p>{{ currentView.desc }}</p>
     </div>
+
     <div class="top-actions">
-      <label class="search">
-        <span v-html="searchIcon"></span>
-        <input :value="search" type="search" placeholder="搜索申请人、单号、费用类型" @input="emit('update:search', $event.target.value)" />
-      </label>
-      <button class="btn" type="button" @click="emit('batchApprove')">
-        <span v-html="checkIcon"></span>
-        批量通过
-      </button>
-      <button class="btn primary" type="button" @click="emit('openChat')">
-        <span v-html="messageIcon"></span>
-        合规对话
-      </button>
+      <span class="search-wrap">
+        <i class="pi pi-search search-icon"></i>
+        <input :value="search" type="search" :placeholder="isChat ? '搜索单号、申请人、目的地' : '搜索申请人、单号、费用类型'" @input="emit('update:search', $event.target.value)" />
+      </span>
+
+      <div v-if="!isChat" class="date-chip">
+        <i class="pi pi-calendar"></i>
+        <span>2024-07-06 ~ 2024-07-12</span>
+      </div>
+
+      <template v-if="isChat">
+        <button class="top-btn primary" type="button" @click="emit('newApplication')">
+          <i class="pi pi-plus"></i>
+          <span>新建出差申请</span>
+        </button>
+      </template>
+      <template v-else>
+        <button class="top-btn primary" type="button" @click="emit('openChat')">
+          <i class="pi pi-sparkles"></i>
+          <span>AI 助手</span>
+        </button>
+      </template>
     </div>
   </header>
 </template>
 
 <script setup>
-import { icons } from '../../data/icons.js'
+import { computed } from 'vue'
 
-defineProps({
+const props = defineProps({
   currentView: { type: Object, required: true },
-  search: { type: String, default: '' }
+  search: { type: String, default: '' },
+  activeView: { type: String, default: '' }
 })
 
-const emit = defineEmits(['update:search', 'batchApprove', 'openChat'])
+const emit = defineEmits(['update:search', 'batchApprove', 'openChat', 'newApplication'])
 
-const searchIcon = icons.search
-const checkIcon = icons.check
-const messageIcon = icons.message
+const isChat = computed(() => props.activeView === 'chat')
 </script>
 
 <style scoped>
 .topbar {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
-  padding: 22px 28px;
-  border-bottom: 1px solid var(--line);
-  background: rgba(255,255,255,.9);
-  backdrop-filter: blur(14px);
+  padding: 16px;
+  background: #fff;
+}
+
+.title-group {
+  min-width: 0;
+}
+
+.topbar p {
+  margin-top: 4px;
+  max-width: 720px;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.search-wrap {
+  position: relative;
+  width: 256px;
+}
+
+.search-icon {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.search-wrap input {
+  width: 100%;
+  height: 40px;
+  padding: 0 14px 0 38px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.search-wrap input:focus {
+  border-color: #10b981;
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.16);
+  outline: none;
+}
+
+.date-chip {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 32px 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #fff;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.date-chip .pi {
+  color: #94a3b8;
+}
+
+.top-btn {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 160ms ease;
+}
+
+.top-btn.primary {
+  background: var(--primary);
+  color: #fff;
+}
+
+.top-btn.primary:hover {
+  background: #0ea672;
+}
+
+@media (max-width: 760px) {
+  .topbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 18px 16px;
+  }
+
+  .top-actions,
+  .search-wrap,
+  .date-chip {
+    width: 100%;
+  }
 }
-.topbar p { margin-top: 6px; color: var(--muted); font-size: 13px; }
-.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
-.search { position: relative; min-width: 300px; }
-.search span { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
-.search span svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
-.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--radius); }
 </style>
diff --git a/src/composables/useChat.js b/src/composables/useChat.js
index f4328eb..07c62d8 100644
--- a/src/composables/useChat.js
+++ b/src/composables/useChat.js
@@ -10,12 +10,21 @@ export function useChat(activeView) {
 
   function agentReply(text) {
     const c = activeCase.value
-    if (!c) return '建议先核对政策阈值和附件完整性，再决定通过、退回补件或转人工复核。'
-    if (text.includes('审批')) return `${c.id} 建议审批意见：发票验真通过，费用归属与预算中心匹配；${c.risk} 已触发规则提示，建议保留业务说明后通过。`
-    if (text.includes('补件')) return '补件优先级：业务目的说明、行程或客户名单、直属经理确认记录。'
-    if (text.includes('拦截')) return `拦截原因是 ${c.risk}，该风险需要财务复核并留下制度依据。`
-    if (text.includes('审计')) return `审计摘要：${c.person} 提交 ${c.amount} 报销，命中 ${c.risk}，系统已保留 AI 判断。`
-    return '建议先核对政策阈值和附件完整性，再决定通过、退回补件或转人工复核。'
+    if (text.includes('出差申请') || text.includes('出差'))
+      return '好的，我来帮您处理出差申请。请提供以下信息：\n1. 出发城市和目的地\n2. 出差日期和天数\n3. 出差事由\n4. 预计费用预算'
+    if (text.includes('机票') || text.includes('飞机'))
+      return '我来帮您查询机票信息。请告诉我：\n1. 出发城市 → 目的城市\n2. 出发日期\n3. 偏好的时间段（上午/下午/晚间）\n4. 舱位要求（经济舱/商务舱）'
+    if (text.includes('酒店') || text.includes('住宿'))
+      return '好的，帮您查找合适的酒店。请提供：\n1. 入住城市和区域偏好\n2. 入住和退房日期\n3. 星级/价位要求\n4. 是否需要含早餐'
+    if (text.includes('火车票') || text.includes('高铁'))
+      return '帮您查询火车票。请告诉我：\n1. 出发站 → 到达站\n2. 出行日期\n3. 座位偏好（二等座/一等座/商务座）\n4. 偏好的出发时间段'
+    if (text.includes('审批意见'))
+      return c ? `${c.id} 建议审批意见：费用归属与预算中心匹配，建议保留业务说明后通过。` : '请先选择一份单据再生成审批意见。'
+    if (text.includes('补件'))
+      return '补件优先级：业务目的说明、行程或客户名单、直属经理确认记录。'
+    if (text.includes('差旅政策') || text.includes('政策'))
+      return '当前差旅政策要点：\n• 住宿标准：一线城市 600 元/晚，二线城市 400 元/晚\n• 机票：优先经济舱，3 小时以上可申请商务舱\n• 高铁：优先二等座，4 小时以上可申请一等座\n• 每日餐饮补贴：120 元'
+    return '好的，我已记录您的需求。请问还需要什么帮助？我还可以帮您查询差旅政策、预订机票酒店火车票等。'
   }
 
   function scrollToBottom() {
@@ -56,8 +65,13 @@ export function useChat(activeView) {
     nextTick(() => messageList.value?.scrollTo({ top: messageList.value.scrollHeight }))
   }
 
+  function openNewChat() {
+    activeCase.value = null
+    activeView.value = 'chat'
+  }
+
   return {
     messages, draft, uploadedFiles, messageList, activeCase, prompts,
-    sendMessage, handleUpload, openChat, scrollToBottom
+    sendMessage, handleUpload, openChat, openNewChat, scrollToBottom
   }
 }
diff --git a/src/composables/useNavigation.js b/src/composables/useNavigation.js
index 5ffdb75..1d6148b 100644
--- a/src/composables/useNavigation.js
+++ b/src/composables/useNavigation.js
@@ -2,11 +2,46 @@ import { computed, ref } from 'vue'
 import { icons } from '../data/icons.js'
 
 export const navItems = [
-  { id: 'overview', label: '运营总览', icon: icons.dashboard, title: '企业报销智能运营台', desc: '面向财务共享中心的审批、风控、SLA 与智能体协同工作台。' },
-  { id: 'chat', label: '合规对话', icon: icons.message, title: 'AI 合规对话', desc: '上传单据、追问制度依据，并生成可留痕的审核建议。' },
-  { id: 'requests', label: '报销队列', icon: icons.list, title: '报销申请队列', desc: '按风险、补件状态和 AI 建议处理待审单据。' },
-  { id: 'policies', label: '政策规则', icon: icons.file, title: '政策规则中心', desc: '维护差旅、招待、采购和发票校验规则。' },
-  { id: 'audit', label: '审计追踪', icon: icons.audit, title: '审计追踪', desc: '查看关键审批动作、AI 建议和制度命中记录。' }
+  {
+    id: 'overview',
+    label: '总览',
+    navHint: '运营指标与趋势',
+    icon: icons.dashboard,
+    title: '企业报销智能运营台',
+    desc: '面向财务共享中心的审批、风控、SLA与自动化运营看板'
+  },
+  {
+    id: 'chat',
+    label: '审批中心',
+    navHint: 'AI 助手与单据处理',
+    icon: icons.message,
+    title: '单据管理中心',
+    desc: '管理出差申请、报销单据，AI 辅助发起申请与智能审核。'
+  },
+  {
+    id: 'requests',
+    label: '报销单',
+    navHint: '待审队列与风险处理',
+    icon: icons.list,
+    title: '报销申请队列',
+    desc: '按风险、补件状态和 AI 建议处理待审单据。'
+  },
+  {
+    id: 'policies',
+    label: '政策规则',
+    navHint: '制度与校验规则',
+    icon: icons.file,
+    title: '政策规则中心',
+    desc: '维护差旅、招待、采购和发票校验规则。'
+  },
+  {
+    id: 'audit',
+    label: '审计追踪',
+    navHint: '关键动作与日志',
+    icon: icons.audit,
+    title: '审计追踪',
+    desc: '查看关键审批动作、AI 建议和制度命中记录。'
+  }
 ]
 
 export function useNavigation() {
diff --git a/src/composables/useRequests.js b/src/composables/useRequests.js
index 3d583cf..7219069 100644
--- a/src/composables/useRequests.js
+++ b/src/composables/useRequests.js
@@ -3,30 +3,52 @@ import { initialRequests } from '../data/requests.js'
 
 export function useRequests() {
   const requests = ref(initialRequests)
+  const entityMap = {
+    'Northstar China Ltd.': 'Northstar China Ltd.',
+    'Northstar Singapore Pte.': 'Northstar Singapore Pte.',
+    'Northstar US Inc.': 'Northstar US Inc.'
+  }
   const search = ref('')
   const filters = reactive({ entity: '全部主体', category: '全部费用', risk: '全部风险' })
   const ranges = ['今日', '本周', '本月']
-  const activeRange = ref('今日')
+  const activeRange = ref('本周')
 
   const filteredRequests = computed(() => {
     const key = search.value.trim().toLowerCase()
     return requests.value.filter((item) => {
       const matchesSearch = !key || `${item.id}${item.person}${item.category}${item.risk}`.toLowerCase().includes(key)
-      const matchesCategory = filters.category === '全部费用' || item.category.includes(filters.category.replace('交通', ''))
-      const matchesRisk = filters.risk === '全部风险' || (filters.risk === '高风险' ? item.status === 'danger' : item.verdict.includes(filters.risk.replace('低风险', '通过')))
-      return matchesSearch && matchesCategory && matchesRisk
+      const matchesEntity = filters.entity === '全部主体' || item.entity === entityMap[filters.entity]
+      const matchesCategory = filters.category === '全部费用' || item.category === filters.category
+      const matchesRisk = filters.risk === '全部风险'
+        || (filters.risk === '高风险' && item.status === 'danger')
+        || (filters.risk === '需解释' && item.status === 'warning')
+        || (filters.risk === '低风险' && item.status === 'success')
+      const matchesRange = activeRange.value === '本月'
+        || (activeRange.value === '本周' && item.range !== '本月')
+        || (activeRange.value === '今日' && item.range === '今日')
+      return matchesSearch && matchesEntity && matchesCategory && matchesRisk && matchesRange
     })
   })
 
+  function updateRequest(requestId, updates) {
+    requests.value = requests.value.map((item) => (item.id === requestId ? { ...item, ...updates } : item))
+  }
+
   function approveRequest(request) {
-    request.verdict = '已通过'
-    request.status = 'success'
+    updateRequest(request.id, {
+      verdict: '已通过',
+      status: 'success',
+      risk: '已完成人工确认'
+    })
     return `${request.id} 已标记为通过，审计日志已更新。`
   }
 
   function rejectRequest(request) {
-    request.verdict = '已退回补件'
-    request.status = 'danger'
+    updateRequest(request.id, {
+      verdict: '已退回补件',
+      status: 'danger',
+      risk: '待申请人补充差旅行程与票据'
+    })
     return `${request.id} 已退回，系统将通知申请人补充材料。`
   }
 
diff --git a/src/data/icons.js b/src/data/icons.js
index 2cad30b..d316dbb 100644
--- a/src/data/icons.js
+++ b/src/data/icons.js
@@ -7,5 +7,6 @@ export const icons = {
   audit: iconPath('<path d="M12 8v4l3 3"/><path d="M3.05 11a9 9 0 1 1 .5 4"/><path d="M3 4v7h7"/>'),
   search: iconPath('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
   check: iconPath('<path d="M20 6 9 17l-5-5"/>'),
-  message: iconPath('<path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/>')
+  message: iconPath('<path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/>'),
+  plus: iconPath('<path d="M12 5v14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>')
 }
diff --git a/src/data/metrics.js b/src/data/metrics.js
index 64d0cc8..2813e97 100644
--- a/src/data/metrics.js
+++ b/src/data/metrics.js
@@ -1,20 +1,134 @@
-export const metrics = [
-  { label: '本月报销额', value: '¥1,286,400', delta: '+8.4%', note: '待审批 ¥361,600', color: '#335cff', tone: '' },
-  { label: '平均处理周期', value: '18.6h', delta: '-2.1h', note: '业务补件等待下降', color: '#0e9384', tone: '' },
-  { label: '超 SLA 单据', value: '37', delta: '需处理', note: '12 单超过 48 小时', color: '#f79009', tone: 'warn' },
-  { label: '高风险拦截', value: '16', delta: '+5', note: '重复发票、异常供应商', color: '#d92d20', tone: 'bad' }
+export const metricBlueprints = [
+  {
+    key: 'pendingCount',
+    label: '待审批单据',
+    unit: '单',
+    accent: '#10b981',
+    icon: 'pi pi-file',
+    trend: 'down',
+    change: '12.5%',
+    delta: '较昨日 -18 单'
+  },
+  {
+    key: 'pendingAmount',
+    label: '待处理金额',
+    accent: '#3b82f6',
+    icon: 'pi pi-wallet',
+    trend: 'up',
+    change: '8.3%',
+    delta: '较昨日 +¥27,400'
+  },
+  {
+    key: 'avgSla',
+    label: '平均审批时长',
+    unit: 'h',
+    accent: '#8b5cf6',
+    icon: 'pi pi-clock',
+    trend: 'down',
+    change: '14.8%',
+    delta: '较昨日 -1.2h'
+  },
+  {
+    key: 'autoPassRate',
+    label: '自动审单通过率',
+    unit: '%',
+    accent: '#16a34a',
+    icon: 'pi pi-shield',
+    trend: 'up',
+    change: '6.2%',
+    delta: '较昨日 +4.6%'
+  },
+  {
+    key: 'riskCount',
+    label: '异常预警单',
+    unit: '单',
+    accent: '#ef4444',
+    icon: 'pi pi-exclamation-triangle',
+    trend: 'up',
+    change: '16.7%',
+    delta: '较昨日 +2 单'
+  },
+  {
+    key: 'slaRate',
+    label: 'SLA 达成率',
+    unit: '%',
+    accent: '#10b981',
+    icon: 'pi pi-check-circle',
+    trend: 'up',
+    change: '3.1%',
+    delta: '较昨日 +2.9%'
+  }
 ]
 
+export const trendRanges = ['近12天', '近7天', '近30天']
+
+export const trendSeries = {
+  '近12天': {
+    labels: ['07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-12'],
+    applications: [140, 105, 175, 195, 155, 70, 65, 60, 185, 200, 220],
+    approved: [110, 85, 130, 125, 110, 60, 55, 50, 145, 150, 170],
+    avgHours: [10, 8, 9, 7, 7, 6.8, 6, 6.5, 7, 8, 7.5]
+  },
+  '近7天': {
+    labels: ['04-23', '04-24', '04-25', '04-26', '04-27', '04-28', '04-29'],
+    applications: [72, 68, 109, 121, 134, 142, 128],
+    approved: [58, 54, 92, 101, 116, 121, 110],
+    avgHours: [6.9, 6.5, 6.8, 7.1, 7.4, 7.0, 6.8]
+  },
+  '近30天': {
+    labels: ['03-31', '04-03', '04-06', '04-09', '04-12', '04-15', '04-18', '04-21', '04-24', '04-27'],
+    applications: [82, 90, 96, 114, 120, 111, 126, 132, 119, 138],
+    approved: [68, 76, 80, 95, 100, 93, 102, 110, 101, 117],
+    avgHours: [9.2, 8.8, 8.4, 8.0, 7.7, 7.4, 7.2, 6.9, 6.8, 6.7]
+  }
+}
+
 export const spendByCategory = [
-  { name: '差旅交通', value: '¥390k', width: '92%', color: 'linear-gradient(90deg,#335cff,#6f8cff)' },
-  { name: '住宿', value: '¥310k', width: '73%', color: 'linear-gradient(90deg,#0e9384,#56b8aa)' },
-  { name: '业务招待', value: '¥240k', width: '57%', color: 'linear-gradient(90deg,#f79009,#ffb64d)' },
-  { name: '办公采购', value: '¥180k', width: '42%', color: 'linear-gradient(90deg,#6941c6,#8d68de)' }
+  { name: '机票', value: 182000, color: '#16a34a' },
+  { name: '酒店', value: 146000, color: '#3b82f6' },
+  { name: '火车/用车', value: 78600, color: '#f59e0b' },
+  { name: '餐补及杂费', value: 55000, color: '#8b5cf6' }
 ]
 
-export const auditMix = [
-  { name: '建议通过', value: '42%', color: '#335cff' },
-  { name: '自动通过', value: '26%', color: '#0e9384' },
-  { name: '需补件', value: '18%', color: '#f79009' },
-  { name: '高风险', value: '14%', color: '#d92d20' }
+export const exceptionMix = [
+  { name: '住宿超标', value: 5, color: '#ef4444' },
+  { name: '重复报销', value: 3, color: '#f59e0b' },
+  { name: '行程缺失', value: 3, color: '#8b5cf6' },
+  { name: '发票异常', value: 3, color: '#3b82f6' }
 ]
+
+export const departmentRangeOptions = ['本周', '本月', '本季度']
+
+export const bottlenecks = [
+  {
+    name: '李文静',
+    role: '财务经理',
+    duration: '12.4 h',
+    status: '较慢',
+    tone: 'danger',
+    avatar: '李'
+  },
+  {
+    name: '王志强',
+    role: '财务专员',
+    duration: '8.7 h',
+    status: '偏慢',
+    tone: 'warning',
+    avatar: '王'
+  },
+  {
+    name: '刘思雨',
+    role: '费用审核员',
+    duration: '5.2 h',
+    status: '正常',
+    tone: 'success',
+    avatar: '刘'
+  }
+]
+
+export const budgetSummary = {
+  ratio: 76,
+  total: '¥2,800,000',
+  used: '¥2,128,000',
+  left: '¥672,000'
+}
diff --git a/src/data/requests.js b/src/data/requests.js
index d2e38d8..16ab128 100644
--- a/src/data/requests.js
+++ b/src/data/requests.js
@@ -1,14 +1,37 @@
 export const initialRequests = [
-  { id: 'REQ-2026-0418', person: '刘倩', dept: '销售 · 华东区域', category: '差旅报销', amount: '¥8,460', verdict: '可通过但需备注', status: 'warning', sla: '51h', risk: '住宿超标 17.4%' },
-  { id: 'REQ-2026-0422', person: '韩阳', dept: '解决方案 · 北区', category: '业务招待', amount: '¥1,980', verdict: '等待补件', status: 'warning', sla: '22h', risk: '缺少客户拜访纪要' },
-  { id: 'REQ-2026-0431', person: '王鑫', dept: '运营管理 · 总部', category: '通勤交通', amount: '¥1,224', verdict: '规则全通过', status: 'success', sla: '4h', risk: '无明显风险' },
-  { id: 'REQ-2026-0436', person: '陈嘉', dept: '市场 · 品牌活动', category: '活动采购', amount: '¥12,680', verdict: '建议人工复核', status: 'danger', sla: '36h', risk: '供应商与历史黑名单相似' }
+  { id: 'REQ-2026-0418', person: '刘倩', dept: '销售 · 华东区域', entity: 'Northstar China Ltd.', range: '今日', category: '机票', amount: '¥8,460', verdict: '可通过但需备注', status: 'warning', sla: '19h', slaStatus: 'warning', risk: '改签说明缺失，公务舱价格高于差标 12%' },
+  { id: 'REQ-2026-0422', person: '韩阳', dept: '解决方案 · 北区', entity: 'Northstar China Ltd.', range: '本周', category: '酒店', amount: '¥3,280', verdict: '等待补件', status: 'warning', sla: '27h', slaStatus: 'warning', risk: '缺少出差行程单，酒店单晚超标 8%' },
+  { id: 'REQ-2026-0431', person: '王鑫', dept: '运营管理 · 总部', entity: 'Northstar Singapore Pte.', range: '本周', category: '火车/用车', amount: '¥1,224', verdict: '规则全通过', status: 'success', sla: '4h', slaStatus: 'success', risk: '无明显风险' },
+  { id: 'REQ-2026-0436', person: '陈嘉', dept: '市场 · 品牌活动', entity: 'Northstar US Inc.', range: '本月', category: '餐补及杂费', amount: '¥2,680', verdict: '建议人工复核', status: 'danger', sla: '51h', slaStatus: 'danger', risk: '发票号码重复，疑似重复报销' },
+  { id: 'REQ-2026-0441', person: '赵敏', dept: '研发 · 后端组', entity: 'Northstar China Ltd.', range: '今日', category: '酒店', amount: '¥2,940', verdict: '规则全通过', status: 'success', sla: '6h', slaStatus: 'success', risk: '无明显风险' },
+  { id: 'REQ-2026-0443', person: '周晨', dept: '销售 · 华南区域', entity: 'Northstar China Ltd.', range: '本周', category: '机票', amount: '¥6,520', verdict: '建议人工复核', status: 'danger', sla: '33h', slaStatus: 'danger', risk: '航班时间与出差申请不一致' },
+  { id: 'REQ-2026-0448', person: '李娜', dept: '客户成功 · 华北', entity: 'Northstar Singapore Pte.', range: '本周', category: '火车/用车', amount: '¥1,860', verdict: '规则全通过', status: 'success', sla: '5h', slaStatus: 'success', risk: '无明显风险' },
+  { id: 'REQ-2026-0452', person: '孙博', dept: '采购中心', entity: 'Northstar US Inc.', range: '本月', category: '酒店', amount: '¥4,780', verdict: '等待补件', status: 'warning', sla: '29h', slaStatus: 'warning', risk: '缺少住宿发票原件' },
+  { id: 'REQ-2026-0455', person: '马骁', dept: '市场 · 品牌活动', entity: 'Northstar US Inc.', range: '本月', category: '机票', amount: '¥7,340', verdict: '规则全通过', status: 'success', sla: '8h', slaStatus: 'success', risk: '无明显风险' },
+  { id: 'REQ-2026-0458', person: '高宁', dept: '运营管理 · 总部', entity: 'Northstar Singapore Pte.', range: '今日', category: '餐补及杂费', amount: '¥980', verdict: '可通过但需备注', status: 'warning', sla: '11h', slaStatus: 'warning', risk: '餐补天数与行程存在 1 天偏差' },
+  { id: 'REQ-2026-0462', person: '何川', dept: '解决方案 · 北区', entity: 'Northstar China Ltd.', range: '本月', category: '机票', amount: '¥5,460', verdict: '规则全通过', status: 'success', sla: '7h', slaStatus: 'success', risk: '无明显风险' },
+  { id: 'REQ-2026-0466', person: '宋雨', dept: '研发 · 后端组', entity: 'Northstar China Ltd.', range: '本周', category: '酒店', amount: '¥3,660', verdict: '已退回补件', status: 'danger', sla: '41h', slaStatus: 'danger', risk: '入住城市与项目地点不一致' }
 ]
 
+export const documents = [
+  { id: 'DOC-2026-0401', type: '出差申请', typeTag: 'travel', applicant: '刘倩', dept: '销售 · 华东区域', date: '2026-04-18', amount: '¥8,460', status: '审批中', statusClass: 'warning', conclusion: '待审核', destination: '上海→杭州', days: 3 },
+  { id: 'DOC-2026-0402', type: '酒店预订', typeTag: 'hotel', applicant: '韩阳', dept: '解决方案 · 北区', date: '2026-04-22', amount: '¥1,280', status: '已通过', statusClass: 'success', conclusion: '规则全通过', destination: '北京·望京凯悦', days: 2 },
+  { id: 'DOC-2026-0403', type: '机票预订', typeTag: 'flight', applicant: '王鑫', dept: '运营管理 · 总部', date: '2026-04-25', amount: '¥2,340', status: '已完成', statusClass: 'success', conclusion: '合规无风险', destination: '北京→深圳', days: 1 },
+  { id: 'DOC-2026-0404', type: '出差申请', typeTag: 'travel', applicant: '陈嘉', dept: '市场 · 品牌活动', date: '2026-04-26', amount: '¥12,680', status: '待补件', statusClass: 'danger', conclusion: '需补充行程说明', destination: '上海→成都', days: 4 },
+  { id: 'DOC-2026-0405', type: '火车票预订', typeTag: 'train', applicant: '赵敏', dept: '研发 · 后端组', date: '2026-04-27', amount: '¥553', status: '审批中', statusClass: 'warning', conclusion: '待审核', destination: '杭州→南京', days: 1 },
+  { id: 'DOC-2026-0406', type: '酒店预订', typeTag: 'hotel', applicant: '刘倩', dept: '销售 · 华东区域', date: '2026-04-28', amount: '¥2,100', status: '已退回', statusClass: 'danger', conclusion: '住宿超标 23%', destination: '杭州·西湖国宾馆', days: 2 },
+  { id: 'DOC-2026-0407', type: '机票预订', typeTag: 'flight', applicant: '韩阳', dept: '解决方案 · 北区', date: '2026-04-28', amount: '¥3,800', status: '已通过', statusClass: 'success', conclusion: '规则全通过', destination: '北京→广州', days: 1 },
+  { id: 'DOC-2026-0408', type: '出差申请', typeTag: 'travel', applicant: '王鑫', dept: '运营管理 · 总部', date: '2026-04-29', amount: '¥4,200', status: '审批中', statusClass: 'warning', conclusion: '预算校验中', destination: '深圳→厦门', days: 2 }
+]
+
+export const docTypes = ['全部类型', '出差申请', '机票预订', '酒店预订', '火车票预订']
+export const docStatuses = ['全部状态', '审批中', '已通过', '已完成', '待补件', '已退回']
+export const docMonths = ['2026-04', '2026-03', '2026-02', '2026-01']
+
 export const prompts = ['生成审批意见', '列出补件清单', '解释为什么拦截', '生成审计摘要']
 
 export const initialMessages = [
-  { id: 1, role: 'agent', text: '我已读取单据、发票、行程和公司差旅制度。当前建议：可通过，但需要保留会议说明。' },
+  { id: 1, role: 'agent', text: '我已读取单据、发票、行程和公司差旅制度。当前建议：可通过，但需要补充改签说明。' },
   { id: 2, role: 'user', text: '请列出这张单据的主要风险。' },
-  { id: 3, role: 'agent', text: '主要风险：住宿单晚均价超标准 17.4%，并且需要人工确认会议附件。' }
+  { id: 3, role: 'agent', text: '主要风险：缺少改签说明，且舱位价格高于差旅标准 12%。' }
 ]
diff --git a/src/main.js b/src/main.js
index 5e536f4..f3b8022 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,21 @@
 import { createApp } from 'vue'
 import { MotionPlugin } from '@vueuse/motion'
+import PrimeVue from 'primevue/config'
+import Aura from '@primevue/themes/aura'
+import 'primeicons/primeicons.css'
 import App from './App.vue'
 
-createApp(App).use(MotionPlugin).mount('#app')
+const app = createApp(App)
+
+app.use(MotionPlugin)
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      darkModeSelector: '.dark',
+      cssLayer: false
+    }
+  }
+})
+
+app.mount('#app')
diff --git a/start.sh b/start.sh
index bf20d1f..7d6b797 100644
--- a/start.sh
+++ b/start.sh
@@ -32,59 +32,48 @@ fi
 info "Node.js $(node -v) | npm $(npm -v)"
 
 # ----------------------------------------------------------
-# Detect WSL + Windows node_modules platform mismatch
+# WSL on a Windows-mounted repo should reuse Windows Node
 # ----------------------------------------------------------
 is_wsl() {
     grep -qi microsoft /proc/version 2>/dev/null
 }
 
-check_platform_mismatch() {
-    local rollup_dir="node_modules/@rollup"
-    if [ ! -d "$rollup_dir" ]; then
-        return 1
-    fi
-    # List installed rollup platform packages
-    local platforms
-    platforms="$(ls -1 "$rollup_dir" 2>/dev/null | grep -E '^rollup-(win|linux)')"
-    if [ -z "$platforms" ]; then
-        return 1
-    fi
-    # Running on WSL/Linux but has Windows rollup bindings
-    if echo "$platforms" | grep -q "win32"; then
-        return 0
-    fi
-    return 1
+is_windows_mount() {
+    case "$SCRIPT_DIR" in
+        /mnt/*) return 0 ;;
+        *) return 1 ;;
+    esac
 }
 
-# ----------------------------------------------------------
-# Install dependencies if node_modules is missing or mismatched
-# ----------------------------------------------------------
-NEED_INSTALL=false
-
-if [ ! -d "node_modules" ]; then
-    warn "node_modules not found"
-    NEED_INSTALL=true
-elif is_wsl && check_platform_mismatch; then
-    warn "Detected WSL with Windows node_modules (rollup platform mismatch)"
-    warn "Removing node_modules to reinstall with correct platform bindings..."
-    # WSL can't delete locked Windows .exe/.node files, use PowerShell instead
+if is_wsl && is_windows_mount && command -v powershell.exe &>/dev/null && command -v wslpath &>/dev/null; then
     WIN_PATH="$(wslpath -w "$SCRIPT_DIR")"
-    if command -v powershell.exe &>/dev/null; then
-        powershell.exe -NoProfile -Command "Remove-Item -Recurse -Force '${WIN_PATH}\\node_modules','${WIN_PATH}\\package-lock.json'" 2>/dev/null || true
-    elif command -v cmd.exe &>/dev/null; then
-        cmd.exe /c "rd /s /q \"${WIN_PATH}\\node_modules\"" 2>/dev/null || true
-        cmd.exe /c "del /f /q \"${WIN_PATH}\\package-lock.json\"" 2>/dev/null || true
-    else
-        rm -rf node_modules package-lock.json 2>/dev/null || true
-    fi
-    # Fallback: clean up anything remaining via WSL
-    rm -rf node_modules package-lock.json 2>/dev/null || true
-    NEED_INSTALL=true
+    WIN_PATH_PS="${WIN_PATH//\'/\'\'}"
+    info "Detected WSL on a Windows-mounted project"
+    info "Using Windows npm to avoid cross-platform node_modules installs"
+    info "Access: http://127.0.0.1:5173"
+    echo ""
+    exec powershell.exe -NoProfile -ExecutionPolicy Bypass -Command "Set-Location -LiteralPath '$WIN_PATH_PS'; npm start"
 fi
 
-if [ "$NEED_INSTALL" = true ]; then
+# ----------------------------------------------------------
+# Install dependencies only when they are missing or unusable
+# ----------------------------------------------------------
+dependencies_ready() {
+    [ -d "node_modules" ] || return 1
+    [ -f "node_modules/vite/bin/vite.js" ] || return 1
+    [ -e "node_modules/.bin/vite" ] || [ -e "node_modules/.bin/vite.cmd" ] || return 1
+
+    node -e "require('rollup')" >/dev/null 2>&1
+}
+
+if ! dependencies_ready; then
+    warn "Dependencies are missing or incomplete"
     info "Running npm install..."
     npm install
+
+    if ! dependencies_ready; then
+        error "Dependencies are still incomplete after npm install. Try deleting node_modules and running npm install manually."
+    fi
 fi
 
 # ----------------------------------------------------------