From f53c343cd37820108bb4c9ea978f99966ba06cb7 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Thu, 14 May 2026 03:15:22 +0000
Subject: [PATCH] feat(web): update views

- AppShellRouteView.vue: update app shell route view
- PoliciesView.vue: update policies view
- TravelReimbursementCreateView.vue: update travel reimbursement create view
---
 web/src/views/AppShellRouteView.vue           | 279 ++----------------
 web/src/views/PoliciesView.vue                |  37 +--
 .../views/TravelReimbursementCreateView.vue   |   2 +-
 3 files changed, 37 insertions(+), 281 deletions(-)

diff --git a/web/src/views/AppShellRouteView.vue b/web/src/views/AppShellRouteView.vue
index 0c657ad..9a8cd27 100644
--- a/web/src/views/AppShellRouteView.vue
+++ b/web/src/views/AppShellRouteView.vue
@@ -1,50 +1,14 @@
 <template>
   <div class="app">
-    <header class="shell-header">
-      <div class="shell-brand">
-        <span class="shell-brand-mark" aria-hidden="true">
-          <svg viewBox="0 0 36 36">
-            <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
-            <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
-          </svg>
-        </span>
-        <div class="shell-brand-copy">
-          <strong>{{ companyProfile.name || 'X-Financial' }}</strong>
-          <span>费用与报销运营平台</span>
-        </div>
-      </div>
-
-      <div class="shell-user-actions">
-        <div class="shell-user" aria-label="当前登录用户">
-          <span class="shell-user-avatar">{{ currentUser.avatar || '用' }}</span>
-          <span class="shell-user-copy">
-            <strong>{{ currentUser.name || '当前用户' }}</strong>
-            <span>{{ currentUser.role || '系统角色' }}</span>
-          </span>
-        </div>
-
-        <button class="shell-logout" type="button" @click="handleLogout">
-          <i class="mdi mdi-logout-variant"></i>
-          <span>退出登录</span>
-        </button>
-      </div>
-    </header>
-
-    <nav class="shell-nav" aria-label="主导航">
-      <div class="shell-nav-scroll">
-        <button
-          v-for="item in filteredNavItems"
-          :key="item.id"
-          class="shell-nav-btn"
-          :class="{ active: activeView === item.id }"
-          type="button"
-          @click="handleNavigate(item.id)"
-        >
-          <span class="shell-nav-icon" v-html="item.icon"></span>
-          <span>{{ item.label }}</span>
-        </button>
-      </div>
-    </nav>
+    <SidebarRail
+      :nav-items="filteredNavItems"
+      :active-view="activeView"
+      :company-name="companyProfile.name"
+      :current-user="currentUser"
+      @navigate="handleNavigate"
+      @open-chat="openSmartEntry"
+      @logout="handleLogout"
+    />
 
     <main
       class="main"
@@ -158,6 +122,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 
+import SidebarRail from '../components/layout/SidebarRail.vue'
 import TopBar from '../components/layout/TopBar.vue'
 import FilterBar from '../components/layout/FilterBar.vue'
 import OverviewView from './OverviewView.vue'
@@ -179,17 +144,13 @@ const employeeSummary = ref(null)
 const knowledgeSummary = ref(null)
 const auditDetailOpen = ref(false)
 
-const {
-  activeCase,
-  activeRange,
-  activeView,
-  closeRequestDetail,
-  closeSmartEntry,
-  customRange,
-  detailMode,
-  docSearch,
-  draft,
-  filteredDocuments,
+const {
+  activeRange,
+  activeView,
+  closeRequestDetail,
+  closeSmartEntry,
+  customRange,
+  detailMode,
   filteredRequests,
   filters,
   handleApprove,
@@ -224,209 +185,3 @@ function handleLogout() {
   logout('manual')
 }
 </script>
-
-<style scoped>
-.shell-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 18px 24px 14px;
-  border-bottom: 1px solid #e2e8f0;
-  background:
-    linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.98)),
-    #fff;
-}
-
-.shell-brand {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-}
-
-.shell-brand-mark {
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border-radius: 12px;
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
-  flex: 0 0 auto;
-}
-
-.shell-brand-mark svg {
-  width: 24px;
-  height: 24px;
-  fill: currentColor;
-}
-
-.shell-brand-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.shell-brand-copy strong {
-  color: #0f172a;
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.1;
-}
-
-.shell-brand-copy span {
-  color: #64748b;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.shell-user-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.shell-user {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 48px;
-  padding: 0 14px;
-  border: 1px solid #dbe4ee;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.88);
-}
-
-.shell-user-avatar {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #0f9f78, #34d399);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.shell-user-copy {
-  display: grid;
-  gap: 1px;
-}
-
-.shell-user-copy strong {
-  color: #0f172a;
-  font-size: 13px;
-  font-weight: 750;
-}
-
-.shell-user-copy span {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.shell-logout {
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 14px;
-  border: 1px solid #dbe4ee;
-  border-radius: 12px;
-  background: #fff;
-  color: #334155;
-  font-size: 13px;
-  font-weight: 700;
-  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
-}
-
-.shell-logout:hover {
-  border-color: rgba(239, 68, 68, 0.2);
-  background: rgba(254, 242, 242, 0.9);
-  color: #dc2626;
-}
-
-.shell-nav {
-  padding: 12px 24px 0;
-  background: #fff;
-}
-
-.shell-nav-scroll {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  overflow-x: auto;
-  padding-bottom: 12px;
-  scrollbar-width: thin;
-}
-
-.shell-nav-btn {
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 16px;
-  border: 1px solid #dbe4ee;
-  border-radius: 999px;
-  background: #fff;
-  color: #475569;
-  font-size: 13px;
-  font-weight: 700;
-  white-space: nowrap;
-  transition:
-    border-color 180ms ease,
-    background 180ms ease,
-    color 180ms ease,
-    box-shadow 180ms ease;
-}
-
-.shell-nav-btn:hover {
-  border-color: rgba(16, 185, 129, 0.25);
-  background: rgba(240, 253, 250, 0.96);
-  color: #059669;
-}
-
-.shell-nav-btn.active {
-  border-color: rgba(16, 185, 129, 0.2);
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.06));
-  color: #047857;
-  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.12);
-}
-
-.shell-nav-icon {
-  width: 18px;
-  height: 18px;
-  display: inline-grid;
-  place-items: center;
-  color: currentColor;
-}
-
-.shell-nav-btn :deep(svg) {
-  width: 18px;
-  height: 18px;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-@media (max-width: 760px) {
-  .shell-header {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 16px 16px 12px;
-  }
-
-  .shell-user-actions {
-    justify-content: space-between;
-  }
-
-  .shell-nav {
-    padding: 10px 16px 0;
-  }
-}
-</style>
diff --git a/web/src/views/PoliciesView.vue b/web/src/views/PoliciesView.vue
index 290b462..3a4d8c8 100644
--- a/web/src/views/PoliciesView.vue
+++ b/web/src/views/PoliciesView.vue
@@ -36,27 +36,28 @@
               </button>
             </aside>
 
-            <section class="document-area">
-              <div
-                class="upload-zone"
-                :class="{ disabled: !isAdmin, busy: uploading }"
-                @click="triggerUpload"
-                @dragover.prevent
-                @drop.prevent="handleDrop"
-              >
-                <input
-                  ref="uploadInput"
-                  class="upload-input"
+            <section class="document-area" :class="{ 'read-only': !isAdmin }">
+              <div
+                v-if="isAdmin"
+                class="upload-zone"
+                :class="{ busy: uploading }"
+                @click="triggerUpload"
+                @dragover.prevent
+                @drop.prevent="handleDrop"
+              >
+                <input
+                  ref="uploadInput"
+                  class="upload-input"
                   type="file"
                   multiple
                   @change="handleFileInput"
-                />
-                <i class="mdi mdi-cloud-upload"></i>
-                <strong>{{ isAdmin ? (uploading ? '正在上传文件...' : '拖拽文档到此处，或点击上传') : '知识文件只读查阅' }}</strong>
-                <span>{{ uploadHint }}</span>
-              </div>
-
-              <div class="doc-table-wrap">
+                />
+                <i class="mdi mdi-cloud-upload"></i>
+                <strong>{{ uploading ? '正在上传文件...' : '拖拽文档到此处，或点击上传' }}</strong>
+                <span>{{ uploadHint }}</span>
+              </div>
+
+              <div class="doc-table-wrap">
                 <table>
                   <thead>
                     <tr>
diff --git a/web/src/views/TravelReimbursementCreateView.vue b/web/src/views/TravelReimbursementCreateView.vue
index 22da968..88b20c4 100644
--- a/web/src/views/TravelReimbursementCreateView.vue
+++ b/web/src/views/TravelReimbursementCreateView.vue
@@ -48,7 +48,7 @@
 
             <div class="assistant-layout" :class="{ 'can-show-insight': hasInsightPanelContent, 'has-insight': showInsightPanel }">
               <section class="dialog-panel">
-                <div class="dialog-toolbar">
+                <div v-if="shortcuts.length" class="dialog-toolbar">
                   <button
                     v-for="shortcut in shortcuts"
                     :key="shortcut.label"