From 478c2a0e09790a57a065f78a4a7787fa629b1fef Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 03:27:30 +0000
Subject: [PATCH] feat(web): update layout and business components

- PersonalWorkbench.vue: update personal workbench component
- SidebarRail.vue: update sidebar rail component
- TopBar.vue: update top bar component
---
 .../components/business/PersonalWorkbench.vue | 127 +++---------------
 web/src/components/layout/SidebarRail.vue     |   2 +-
 web/src/components/layout/TopBar.vue          |  24 +++-
 3 files changed, 38 insertions(+), 115 deletions(-)

diff --git a/web/src/components/business/PersonalWorkbench.vue b/web/src/components/business/PersonalWorkbench.vue
index 110e0a9..73cf57e 100644
--- a/web/src/components/business/PersonalWorkbench.vue
+++ b/web/src/components/business/PersonalWorkbench.vue
@@ -146,34 +146,30 @@
     </article>
   </section>
 
-  <Teleport to="body">
-    <Transition name="session-confirm">
-      <div v-if="confirmDialogOpen" class="session-confirm-mask" @click.self="closeConfirmDialog">
-        <section class="session-confirm-card">
-          <span class="session-confirm-badge">新建会话</span>
-          <h4>开始新会话会清空当前历史对话</h4>
-          <p>检测到你还有未清除的会话记录。确认后会删除当前用户的全部历史对话，再开启新的智能体会话。</p>
-
-          <div class="session-confirm-actions">
-            <button type="button" class="ghost-action confirm-cancel" :disabled="confirmDialogBusy" @click="closeConfirmDialog">
-              <span>取消</span>
-            </button>
-            <button type="button" class="hero-action confirm-submit" :disabled="confirmDialogBusy" @click="confirmStartNewConversation">
-              <i :class="confirmDialogBusy ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-delete-sweep-outline'"></i>
-              <span>{{ confirmDialogBusy ? '清空中...' : '确认删除并新建' }}</span>
-            </button>
-          </div>
-        </section>
-      </div>
-    </Transition>
-  </Teleport>
+  <ConfirmDialog
+    :open="confirmDialogOpen"
+    badge="新建会话"
+    badge-tone="info"
+    title="开始新会话会清空当前历史对话"
+    description="检测到你还有未清除的会话记录。确认后会删除当前用户的全部历史对话，再开启新的智能体会话。"
+    cancel-text="取消"
+    confirm-text="确认删除并新建"
+    busy-text="清空中..."
+    confirm-tone="primary"
+    confirm-icon="mdi mdi-delete-sweep-outline"
+    :busy="confirmDialogBusy"
+    @close="closeConfirmDialog"
+    @confirm="confirmStartNewConversation"
+  />
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import PanelHead from '../shared/PanelHead.vue'
+import ConfirmDialog from '../shared/ConfirmDialog.vue'
 import robotAssistant from '../../assets/robot-helper.png'
 import { useSystemState } from '../../composables/useSystemState.js'
+import { useToast } from '../../composables/useToast.js'
 import { clearUserConversations, fetchLatestConversation } from '../../services/orchestrator.js'
 
 defineProps({
@@ -182,6 +178,7 @@ defineProps({
 
 const emit = defineEmits(['openAssistant'])
 const { currentUser } = useSystemState()
+const { toast } = useToast()
 const assistantDraft = ref('')
 const fileInputRef = ref(null)
 const selectedFiles = ref([])
@@ -313,7 +310,7 @@ async function confirmStartNewConversation() {
     pendingAction.value = ''
     emitAssistant(nextPayload)
   } catch (error) {
-    window.alert(error?.message || '清空历史会话失败，请稍后重试。')
+    toast(error?.message || '清空历史会话失败，请稍后重试。')
   } finally {
     confirmDialogBusy.value = false
   }
@@ -728,83 +725,6 @@ const policyItems = [
   box-shadow: none;
 }
 
-.session-confirm-mask {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: rgba(15, 23, 42, 0.32);
-  backdrop-filter: blur(10px);
-}
-
-.session-confirm-card {
-  width: min(480px, 100%);
-  display: grid;
-  gap: 14px;
-  padding: 24px;
-  border: 1px solid rgba(16, 185, 129, 0.14);
-  border-radius: 24px;
-  background:
-    radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 36%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
-  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
-}
-
-.session-confirm-badge {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(59, 130, 246, 0.12);
-  color: #1d4ed8;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.session-confirm-card h4 {
-  color: #0f172a;
-  font-size: 22px;
-  line-height: 1.35;
-  font-weight: 800;
-}
-
-.session-confirm-card p {
-  color: #5b6b83;
-  font-size: 14px;
-  line-height: 1.7;
-}
-
-.session-confirm-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.confirm-cancel,
-.confirm-submit {
-  min-width: 140px;
-}
-
-.session-confirm-enter-active,
-.session-confirm-leave-active {
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-
-.session-confirm-enter-from,
-.session-confirm-leave-to {
-  opacity: 0;
-}
-
-.session-confirm-enter-from .session-confirm-card,
-.session-confirm-leave-to .session-confirm-card {
-  transform: translateY(8px) scale(0.98);
-}
-
 .workbench-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1176,15 +1096,6 @@ const policyItems = [
     max-width: 100%;
   }
 
-  .session-confirm-actions {
-    justify-content: stretch;
-  }
-
-  .confirm-cancel,
-  .confirm-submit {
-    width: 100%;
-  }
-
   .todo-row,
   .progress-row {
     grid-template-columns: 48px minmax(0, 1fr);
diff --git a/web/src/components/layout/SidebarRail.vue b/web/src/components/layout/SidebarRail.vue
index 4046ea1..3ccb7a8 100644
--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -73,7 +73,7 @@ const emit = defineEmits(['navigate', 'openChat', 'logout'])
 const sidebarMeta = {
   overview: { label: '总览' },
   workbench: { label: '个人工作台' },
-  requests: { label: '差旅申请/报销' },
+  requests: { label: '个人报销' },
   approval: { label: '审批中心', badge: '12' },
   chat: { label: 'AI 助手' },
   policies: { label: '知识管理' },
diff --git a/web/src/components/layout/TopBar.vue b/web/src/components/layout/TopBar.vue
index b3cbbb1..4f2b7b6 100644
--- a/web/src/components/layout/TopBar.vue
+++ b/web/src/components/layout/TopBar.vue
@@ -148,6 +148,10 @@ const props = defineProps({
     type: Object,
     default: () => null
   },
+  requestSummary: {
+    type: Object,
+    default: () => null
+  },
   customRange: {
     type: Object,
     default: () => ({ start: '2024-07-06', end: '2024-07-12' })
@@ -170,12 +174,20 @@ const isApproval = computed(() => props.activeView === 'approval')
 const isPolicies = computed(() => props.activeView === 'policies')
 const isEmployees = computed(() => props.activeView === 'employees')
 
-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 requestKpis = computed(() => {
+  const summary = props.requestSummary ?? {}
+  const total = Number(summary.total ?? 0)
+  const draft = Number(summary.draft ?? 0)
+  const inProgress = Number(summary.inProgress ?? 0)
+  const completed = Number(summary.completed ?? 0)
+
+  return [
+    { label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: '#10b981' },
+    { label: '草稿', value: draft, delta: '待提交', trend: draft > 0 ? 'down' : 'up', arrow: draft > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
+    { label: '审批中', value: inProgress, delta: '处理中', trend: inProgress > 0 ? 'up' : 'down', arrow: inProgress > 0 ? 'mdi mdi-arrow-up' : 'mdi mdi-minus', color: '#3b82f6' },
+    { label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: '#10b981' }
+  ]
+})
 
 const chatKpis = [
   { label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },