From eec4efe20738f5f516e6a7fd1a183c35c7928308 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 13:12:28 +0000
Subject: [PATCH] feat(web): update components

- PersonalWorkbench.vue: update personal workbench component
- SidebarRail.vue: update sidebar rail component
- TopBar.vue: update top bar component
- ConfirmDialog.vue: update confirm dialog component
---
 .../components/business/PersonalWorkbench.vue | 194 +++++++++---------
 web/src/components/layout/SidebarRail.vue     |   2 +-
 web/src/components/layout/TopBar.vue          |  62 +++---
 web/src/components/shared/ConfirmDialog.vue   |   6 +-
 4 files changed, 129 insertions(+), 135 deletions(-)

diff --git a/web/src/components/business/PersonalWorkbench.vue b/web/src/components/business/PersonalWorkbench.vue
index 73cf57e..487b886 100644
--- a/web/src/components/business/PersonalWorkbench.vue
+++ b/web/src/components/business/PersonalWorkbench.vue
@@ -42,27 +42,18 @@
         </div>
 
         <div class="assistant-tools">
-          <button type="button" class="ghost-action" :disabled="Boolean(pendingAction) || confirmDialogBusy" @click="triggerFileUpload">
+          <button type="button" class="ghost-action" :disabled="Boolean(pendingAction)" @click="triggerFileUpload">
             <i class="mdi mdi-upload-outline"></i>
             <span>上传票据</span>
           </button>
-          <button
-            type="button"
-            class="secondary-action"
-            :disabled="Boolean(pendingAction) || confirmDialogBusy"
-            @click="handleContinueConversation"
-          >
-            <i :class="pendingAction === 'continue' ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-history'"></i>
-            <span>{{ pendingAction === 'continue' ? '恢复中...' : '继续会话' }}</span>
-          </button>
           <button
             type="button"
             class="hero-action"
-            :disabled="Boolean(pendingAction) || confirmDialogBusy"
-            @click="handleNewConversation"
+            :disabled="Boolean(pendingAction)"
+            @click="handleExpenseConversationAction"
           >
-            <i :class="pendingAction === 'new' ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-magnify-scan'"></i>
-            <span>{{ pendingAction === 'new' ? '处理中...' : '新建会话' }}</span>
+            <i :class="pendingAction === 'expense' ? 'mdi mdi-loading mdi-spin' : expenseActionIcon"></i>
+            <span>{{ pendingAction === 'expense' ? '处理中...' : expenseActionLabel }}</span>
           </button>
         </div>
       </div>
@@ -146,34 +137,19 @@
     </article>
   </section>
 
-  <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 { computed, onMounted, ref, watch } 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({
-  showHeader: { type: Boolean, default: true }
+const props = defineProps({
+  showHeader: { type: Boolean, default: true },
+  assistantModalOpen: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['openAssistant'])
@@ -183,9 +159,48 @@ const assistantDraft = ref('')
 const fileInputRef = ref(null)
 const selectedFiles = ref([])
 const pendingAction = ref('')
-const confirmDialogOpen = ref(false)
-const confirmDialogBusy = ref(false)
-const pendingAssistantPayload = ref(null)
+const latestExpenseConversation = ref(null)
+const MAX_ATTACHMENTS = 10
+const SESSION_TYPE_EXPENSE = 'expense'
+const SESSION_TYPE_KNOWLEDGE = 'knowledge'
+
+const hasExpenseConversation = computed(() => Boolean(latestExpenseConversation.value?.conversation_id || latestExpenseConversation.value?.conversationId))
+const expenseActionLabel = computed(() => (hasExpenseConversation.value ? '继续报销' : '新建报销'))
+const expenseActionIcon = computed(() => (hasExpenseConversation.value ? 'mdi mdi-history' : 'mdi mdi-magnify-scan'))
+
+function buildSelectedFileKey(file) {
+  return [file?.name, file?.size, file?.lastModified, file?.type].join('__')
+}
+
+function mergeSelectedFiles(existingFiles, incomingFiles) {
+  const nextFiles = []
+  const seen = new Set()
+
+  for (const file of existingFiles) {
+    const key = buildSelectedFileKey(file)
+    if (seen.has(key)) continue
+    seen.add(key)
+    nextFiles.push(file)
+  }
+
+  let overflowCount = 0
+
+  for (const file of incomingFiles) {
+    const key = buildSelectedFileKey(file)
+    if (seen.has(key)) continue
+    if (nextFiles.length >= MAX_ATTACHMENTS) {
+      overflowCount += 1
+      continue
+    }
+    seen.add(key)
+    nextFiles.push(file)
+  }
+
+  return {
+    files: nextFiles,
+    overflowCount
+  }
+}
 
 function resolveCurrentUserId() {
   const user = currentUser.value || {}
@@ -218,7 +233,7 @@ function emitAssistant(payload) {
 }
 
 async function loadLatestConversation() {
-  const payload = await fetchLatestConversation(resolveCurrentUserId())
+  const payload = await fetchLatestConversation(resolveCurrentUserId(), SESSION_TYPE_EXPENSE)
   return payload?.found ? payload.conversation || null : null
 }
 
@@ -227,7 +242,7 @@ function handleWorkbenchEnter(event) {
     return
   }
 
-  handleContinueConversation()
+  handleExpenseConversationAction()
 }
 
 function triggerFileUpload() {
@@ -235,87 +250,53 @@ function triggerFileUpload() {
 }
 
 function handleWorkbenchFilesChange(event) {
-  selectedFiles.value = Array.from(event.target.files ?? [])
+  const mergeResult = mergeSelectedFiles(selectedFiles.value, Array.from(event.target.files ?? []))
+  selectedFiles.value = mergeResult.files
+  if (mergeResult.overflowCount > 0) {
+    toast(`一次最多上传 ${MAX_ATTACHMENTS} 份附件，已保留前 ${MAX_ATTACHMENTS} 份。`)
+  }
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
 }
 
-async function handleContinueConversation() {
-  if (pendingAction.value || confirmDialogBusy.value) {
+async function refreshLatestExpenseConversation() {
+  try {
+    latestExpenseConversation.value = await loadLatestConversation()
+  } catch (error) {
+    console.warn('Failed to refresh latest expense conversation:', error)
+    latestExpenseConversation.value = null
+  }
+}
+
+async function clearKnowledgeHistoryBeforeExpense() {
+  await clearUserConversations(resolveCurrentUserId(), SESSION_TYPE_KNOWLEDGE)
+}
+
+async function handleExpenseConversationAction() {
+  if (pendingAction.value) {
     return
   }
 
-  pendingAction.value = 'continue'
+  pendingAction.value = 'expense'
   const nextPayload = buildAssistantPayload()
 
   try {
+    await clearKnowledgeHistoryBeforeExpense()
     const conversation = await loadLatestConversation()
+    latestExpenseConversation.value = conversation
     emitAssistant({
       ...nextPayload,
       conversation
     })
   } catch (error) {
-    console.warn('Failed to load latest conversation:', error)
-    emitAssistant(nextPayload)
+    console.warn('Failed to open expense conversation:', error)
+    toast(error?.message || '打开报销会话失败，请稍后重试。')
   } finally {
     pendingAction.value = ''
   }
 }
 
-async function handleNewConversation() {
-  if (pendingAction.value || confirmDialogBusy.value) {
-    return
-  }
-
-  pendingAction.value = 'new'
-  const nextPayload = buildAssistantPayload()
-
-  try {
-    const conversation = await loadLatestConversation()
-    if (!conversation) {
-      emitAssistant(nextPayload)
-      pendingAction.value = ''
-      return
-    }
-
-    pendingAssistantPayload.value = nextPayload
-    confirmDialogOpen.value = true
-  } catch (error) {
-    console.warn('Failed to inspect latest conversation before reset:', error)
-    emitAssistant(nextPayload)
-    pendingAction.value = ''
-  }
-}
-
-function closeConfirmDialog() {
-  if (confirmDialogBusy.value) {
-    return
-  }
-
-  confirmDialogOpen.value = false
-  pendingAssistantPayload.value = null
-  pendingAction.value = ''
-}
-
-async function confirmStartNewConversation() {
-  if (confirmDialogBusy.value) {
-    return
-  }
-
-  confirmDialogBusy.value = true
-
-  try {
-    await clearUserConversations(resolveCurrentUserId())
-    const nextPayload = pendingAssistantPayload.value || buildAssistantPayload()
-    confirmDialogOpen.value = false
-    pendingAssistantPayload.value = null
-    pendingAction.value = ''
-    emitAssistant(nextPayload)
-  } catch (error) {
-    toast(error?.message || '清空历史会话失败，请稍后重试。')
-  } finally {
-    confirmDialogBusy.value = false
-  }
-}
-
 const todoItems = [
   {
     title: '业务招待报销建议补参与人员',
@@ -402,6 +383,19 @@ const policyItems = [
     date: '2026-04-25'
   }
 ]
+
+onMounted(() => {
+  refreshLatestExpenseConversation()
+})
+
+watch(
+  () => props.assistantModalOpen,
+  (open, previous) => {
+    if (previous && !open) {
+      refreshLatestExpenseConversation()
+    }
+  }
+)
 </script>
 
 <style scoped>
diff --git a/web/src/components/layout/SidebarRail.vue b/web/src/components/layout/SidebarRail.vue
index 3ccb7a8..2442bc6 100644
--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -75,7 +75,7 @@ const sidebarMeta = {
   workbench: { label: '个人工作台' },
   requests: { label: '个人报销' },
   approval: { label: '审批中心', badge: '12' },
-  chat: { label: 'AI 助手' },
+  chat: { label: '财务知识问答' },
   policies: { label: '知识管理' },
   audit: { label: '任务规则中心' },
   employees: { label: '员工管理' },
diff --git a/web/src/components/layout/TopBar.vue b/web/src/components/layout/TopBar.vue
index 4f2b7b6..eaf71ef 100644
--- a/web/src/components/layout/TopBar.vue
+++ b/web/src/components/layout/TopBar.vue
@@ -7,17 +7,17 @@
     </div>
 
     <div class="top-actions">
-      <template v-if="isChat">
-        <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-if="isOverview">
+      <template v-if="isChat">
+        <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-if="isOverview">
         <div class="range-combo" aria-label="首页时间范围">
           <div class="range-shell">
             <span class="range-meta">
@@ -158,17 +158,17 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits([
-  'update:search',
-  'update:activeRange',
-  'update:customRange',
-  'batchApprove',
-  'openChat',
-  'newApplication'
-])
-
-const isChat = computed(() => props.activeView === 'chat')
-const isOverview = computed(() => props.activeView === 'overview')
+const emit = defineEmits([
+  'update:search',
+  'update:activeRange',
+  'update:customRange',
+  'batchApprove',
+  'openChat',
+  'newApplication'
+])
+
+const isChat = computed(() => props.activeView === 'chat')
+const isOverview = computed(() => props.activeView === 'overview')
 const isRequests = computed(() => props.activeView === 'requests')
 const isApproval = computed(() => props.activeView === 'approval')
 const isPolicies = computed(() => props.activeView === 'policies')
@@ -614,10 +614,10 @@ function formatRangeLabel(start, end) {
   min-width: 0;
 }
 
-.create-top-btn {
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
+.create-top-btn {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
   padding: 0 18px;
   border: 0;
@@ -630,11 +630,11 @@ function formatRangeLabel(start, end) {
   white-space: nowrap;
 }
 
-.create-top-btn:hover {
-  background: #047857;
-}
-
-@media (max-width: 1120px) {
+.create-top-btn:hover {
+  background: #047857;
+}
+
+@media (max-width: 1120px) {
   .range-combo {
     width: 100%;
     justify-content: flex-end;
diff --git a/web/src/components/shared/ConfirmDialog.vue b/web/src/components/shared/ConfirmDialog.vue
index 897a646..1e07c1f 100644
--- a/web/src/components/shared/ConfirmDialog.vue
+++ b/web/src/components/shared/ConfirmDialog.vue
@@ -95,7 +95,7 @@ function handleCancel() {
 .shared-confirm-mask {
   position: fixed;
   inset: 0;
-  z-index: 1200;
+  z-index: 10020;
   display: grid;
   place-items: center;
   padding: 24px;
@@ -201,8 +201,8 @@ function handleCancel() {
 }
 
 .shared-confirm-btn.confirm.danger {
-  background: linear-gradient(135deg, #f97316, #ea580c);
-  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.22);
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
 }
 
 .shared-confirm-btn.cancel:hover:not(:disabled) {