From 8b72f4e9622f8d48e56c470517f79056de33e03d Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 03:33:11 +0000
Subject: [PATCH] feat(web): update views

- AppShellRouteView.vue: update app shell route view
- AuditView.vue: update audit view
- EmployeeManagementView.vue: update employee management view
- PoliciesView.vue: update policies view
- RequestsView.vue: update requests view
- TravelReimbursementCreateView.vue: update travel form view
- TravelRequestDetailView.vue: update travel detail view
---
 web/src/views/AppShellRouteView.vue           |  80 +--
 web/src/views/AuditView.vue                   |  63 +--
 web/src/views/EmployeeManagementView.vue      |  16 +
 web/src/views/PoliciesView.vue                |  16 +
 web/src/views/RequestsView.vue                |  52 +-
 .../views/TravelReimbursementCreateView.vue   | 107 ++--
 web/src/views/TravelRequestDetailView.vue     | 520 ++++++++----------
 7 files changed, 456 insertions(+), 398 deletions(-)

diff --git a/web/src/views/AppShellRouteView.vue b/web/src/views/AppShellRouteView.vue
index 125c98b..63572ff 100644
--- a/web/src/views/AppShellRouteView.vue
+++ b/web/src/views/AppShellRouteView.vue
@@ -31,12 +31,13 @@
         :search="search"
         :active-view="activeView"
         :ranges="ranges"
-        :active-range="activeRange"
-        :employee-summary="employeeSummary"
-        :knowledge-summary="knowledgeSummary"
-        :custom-range="customRange"
-        @update:search="search = $event"
-        @update:active-range="activeRange = $event"
+        :active-range="activeRange"
+        :employee-summary="employeeSummary"
+        :knowledge-summary="knowledgeSummary"
+        :request-summary="requestSummary"
+        :custom-range="customRange"
+        @update:search="search = $event"
+        @update:active-range="activeRange = $event"
         @update:custom-range="customRange = $event"
         @batch-approve="toast('已批量通过 23 条审批任务。')"
         @open-chat="handleOpenChat"
@@ -96,21 +97,27 @@
           @reject-case="toast(`${activeCase?.id || '当前单据'} 已标记为驳回。`)"
         />
 
-        <TravelRequestDetailView
-          v-else-if="activeView === 'requests' && detailMode && selectedTravelRequest"
-          :request="selectedTravelRequest"
-          @back-to-requests="closeRequestDetail"
-          @open-assistant="openSmartEntry"
-        />
+        <TravelRequestDetailView
+          v-else-if="activeView === 'requests' && detailMode && selectedRequest"
+          :request="selectedRequest"
+          @back-to-requests="closeRequestDetail"
+          @open-assistant="openSmartEntry"
+          @request-updated="handleRequestUpdated"
+          @request-deleted="handleRequestDeleted"
+        />
 
-        <RequestsView
-          v-else-if="activeView === 'requests'"
-          :filtered-requests="filteredRequests"
-          @ask="openRequestDetail"
-          @approve="handleApprove"
-          @reject="handleReject"
-          @create-request="openTravelCreate"
-        />
+        <RequestsView
+          v-else-if="activeView === 'requests'"
+          :filtered-requests="filteredRequests"
+          :has-data="requests.length > 0"
+          :loading="requestsLoading"
+          :error="requestsError"
+          @ask="openRequestDetail"
+          @approve="handleApprove"
+          @reject="handleReject"
+          @reload="reloadRequests"
+          @create-request="openTravelCreate"
+        />
 
         <ApprovalCenterView v-else-if="activeView === 'approval'" />
         <PoliciesView v-else-if="activeView === 'policies'" @summary-change="knowledgeSummary = $event" />
@@ -129,9 +136,10 @@
       :entry-source="smartEntryContext.source"
       :request-context="smartEntryContext.request"
       @close="closeSmartEntry"
+      @draft-saved="handleDraftSaved"
     />
-  </div>
-</template>
+  </div>
+</template>
 
 <script setup>
 import { computed, ref } from 'vue'
@@ -170,22 +178,30 @@ const {
   docSearch,
   draft,
   filteredDocuments,
-  filteredRequests,
-  filters,
-  handleApprove,
-  handleNavigate,
-  handleOpenChat,
-  handleReject,
-  handleUpload,
+  filteredRequests,
+  filters,
+  handleApprove,
+  handleDraftSaved,
+  handleNavigate,
+  handleOpenChat,
+  handleReject,
+  handleRequestDeleted,
+  handleRequestUpdated,
+  handleUpload,
   messageList,
   messages,
   navItems,
   openRequestDetail,
   openSmartEntry,
-  openTravelCreate,
-  ranges,
+  openTravelCreate,
+  ranges,
+  requestSummary,
+  requestsError,
+  requestsLoading,
+  reloadRequests,
+  requests,
   search,
-  selectedTravelRequest,
+  selectedRequest,
   sendMessage,
   sending,
   smartEntryContext,
diff --git a/web/src/views/AuditView.vue b/web/src/views/AuditView.vue
index c91bdfe..4316f61 100644
--- a/web/src/views/AuditView.vue
+++ b/web/src/views/AuditView.vue
@@ -605,40 +605,37 @@
       </article>
     </Transition>
 
-    <Teleport to="body">
-      <div v-if="versionSwitchTarget" class="modal-backdrop" @click.self="cancelVersionSwitch">
-        <section class="version-modal panel" role="dialog" aria-modal="true" aria-labelledby="version-switch-title">
-          <div class="card-head">
-            <div>
-              <h3 id="version-switch-title">切换规则版本</h3>
-              <p>切换后编辑器只会替换当前展示内容，不会直接回滚后端当前版本。</p>
-            </div>
-          </div>
-
-          <div class="version-modal-summary">
-            <div>
-              <span>当前展示版本</span>
-              <strong>{{ selectedSkill?.displayVersion }}</strong>
-            </div>
-            <i class="mdi mdi-arrow-right"></i>
-            <div>
-              <span>目标版本</span>
-              <strong>{{ versionSwitchTarget.version }}</strong>
-            </div>
-          </div>
-
-          <div class="version-modal-note">
-            <strong>{{ versionSwitchTarget.note }}</strong>
-            <span>{{ versionSwitchTarget.time }}</span>
-          </div>
-
-          <footer class="modal-actions">
-            <button class="minor-action" type="button" @click="cancelVersionSwitch">取消</button>
-            <button class="major-action" type="button" @click="confirmVersionSwitch">确认切换</button>
-          </footer>
-        </section>
+    <ConfirmDialog
+      :open="Boolean(versionSwitchTarget)"
+      badge="切换版本"
+      badge-tone="info"
+      title="切换规则版本"
+      description="切换后编辑器只会替换当前展示内容，不会直接回滚后端当前版本。"
+      cancel-text="取消"
+      confirm-text="确认切换"
+      busy-text="切换中..."
+      confirm-tone="primary"
+      confirm-icon="mdi mdi-swap-horizontal"
+      @close="cancelVersionSwitch"
+      @confirm="confirmVersionSwitch"
+    >
+      <div class="version-modal-summary">
+        <div>
+          <span>当前展示版本</span>
+          <strong>{{ selectedSkill?.displayVersion }}</strong>
+        </div>
+        <i class="mdi mdi-arrow-right"></i>
+        <div>
+          <span>目标版本</span>
+          <strong>{{ versionSwitchTarget?.version }}</strong>
+        </div>
       </div>
-    </Teleport>
+
+      <div v-if="versionSwitchTarget" class="version-modal-note">
+        <strong>{{ versionSwitchTarget.note }}</strong>
+        <span>{{ versionSwitchTarget.time }}</span>
+      </div>
+    </ConfirmDialog>
   </section>
 </template>
 
diff --git a/web/src/views/EmployeeManagementView.vue b/web/src/views/EmployeeManagementView.vue
index 045328f..ba81f82 100644
--- a/web/src/views/EmployeeManagementView.vue
+++ b/web/src/views/EmployeeManagementView.vue
@@ -547,6 +547,22 @@
         </footer>
       </article>
     </Transition>
+
+    <ConfirmDialog
+      :open="disableDialogOpen"
+      badge="停用账号"
+      badge-tone="warning"
+      :title="`确认停用 ${selectedEmployee?.name || '该员工'} 的账号吗？`"
+      description="停用后该员工将无法继续登录系统，相关个人操作入口也会立即失效。"
+      cancel-text="取消"
+      confirm-text="确认停用"
+      busy-text="停用中..."
+      confirm-tone="danger"
+      confirm-icon="mdi mdi-account-cancel-outline"
+      :busy="actionState === 'disable'"
+      @close="closeDisableDialog"
+      @confirm="confirmDisableEmployeeAccount"
+    />
   </section>
 </template>
 
diff --git a/web/src/views/PoliciesView.vue b/web/src/views/PoliciesView.vue
index 7ba952e..290b462 100644
--- a/web/src/views/PoliciesView.vue
+++ b/web/src/views/PoliciesView.vue
@@ -277,6 +277,22 @@
         </Transition>
       </Teleport>
     </div>
+
+    <ConfirmDialog
+      :open="deleteDialogOpen"
+      badge="删除文件"
+      badge-tone="danger"
+      :title="`确认删除文件“${deleteTargetDocument?.name || ''}”吗？`"
+      description="删除后该知识库文件及其当前版本记录将不可恢复，请确认本次操作。"
+      cancel-text="取消"
+      confirm-text="确认删除"
+      busy-text="删除中..."
+      confirm-tone="danger"
+      confirm-icon="mdi mdi-delete-outline"
+      :busy="Boolean(deletingId)"
+      @close="closeDeleteDialog"
+      @confirm="confirmDeleteDocument"
+    />
   </section>
 </template>
 
diff --git a/web/src/views/RequestsView.vue b/web/src/views/RequestsView.vue
index 69cf016..e9c3a75 100644
--- a/web/src/views/RequestsView.vue
+++ b/web/src/views/RequestsView.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="travel-page">
     <article class="travel-list panel">
-      <nav class="status-tabs" aria-label="差旅报销状态">
+      <nav class="status-tabs" aria-label="个人报销状态">
         <button
           v-for="tab in tabs"
           :key="tab"
@@ -17,7 +17,7 @@
         <div class="filter-set">
           <div class="list-search">
             <i class="mdi mdi-magnify"></i>
-            <input type="search" placeholder="搜索申请人、单号、费用类型..." />
+            <input v-model="listKeyword" type="search" placeholder="搜索单号、事由、报销类型..." />
           </div>
 
           <div class="date-range-filter" :class="{ open: datePopover }">
@@ -61,48 +61,64 @@
       <p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意行可查看单据详情</p>
 
       <div class="table-wrap">
-        <table>
+        <div v-if="loading" class="table-state">
+          <i class="mdi mdi-loading mdi-spin"></i>
+          <strong>正在加载真实报销数据</strong>
+          <p>列表将直接展示后端返回的个人报销单据。</p>
+        </div>
+
+        <div v-else-if="error" class="table-state error">
+          <i class="mdi mdi-alert-circle-outline"></i>
+          <strong>报销列表加载失败</strong>
+          <p>{{ error }}</p>
+          <button class="retry-btn" type="button" @click="emit('reload')">重新加载</button>
+        </div>
+
+        <div v-else-if="showEmpty" class="table-state empty">
+          <i class="mdi mdi-inbox-arrow-down-outline"></i>
+          <strong>{{ emptyState.title }}</strong>
+          <p>{{ emptyState.desc }}</p>
+        </div>
+
+        <table v-else>
           <colgroup>
             <col class="col-id">
-            <col class="col-reason">
-            <col class="col-city">
-            <col class="col-period">
+            <col class="col-type">
+            <col class="col-title">
+            <col class="col-occurred">
             <col class="col-apply">
             <col class="col-amount">
             <col class="col-node">
             <col class="col-approval">
-            <col class="col-travel">
           </colgroup>
           <thead>
             <tr>
               <th>单号</th>
-              <th>出差事由</th>
-              <th>出差城市</th>
-              <th>出差时间</th>
+              <th>报销类型</th>
+              <th>报销事由</th>
+              <th>发生时间</th>
               <th>申请时间</th>
-              <th>申请金额</th>
+              <th>金额</th>
               <th>当前节点</th>
               <th>审批状态</th>
-              <th>商旅状态</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="row in visibleRows" :key="row.id" @click="emit('ask', row)">
-              <td><strong class="doc-id">{{ row.id }}</strong></td>
+              <td><strong class="doc-id">{{ row.documentNo || row.id }}</strong></td>
+              <td><span class="type-tag" :class="row.typeTone">{{ row.typeLabel }}</span></td>
               <td>{{ row.reason }}</td>
-              <td>{{ row.city }}</td>
-              <td>{{ row.period }}</td>
+              <td>{{ row.occurredDisplay }}</td>
               <td>{{ row.applyTime }}</td>
-              <td>{{ row.amount }}</td>
+              <td>{{ row.amountDisplay }}</td>
               <td>{{ row.node }}</td>
               <td><span class="status-tag" :class="row.approvalTone">{{ row.approval }}</span></td>
-              <td><span class="status-tag" :class="row.travelTone">{{ row.travel }}</span></td>
             </tr>
           </tbody>
         </table>
       </div>
 
-      <footer class="list-foot">
+      <footer v-if="showTable" class="list-foot">
         <span class="page-summary">共 {{ totalCount }} 条，目前第 {{ currentPage }} 页</span>
         <div class="pager" aria-label="分页">
           <button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--"><i class="mdi mdi-chevron-left"></i></button>
diff --git a/web/src/views/TravelReimbursementCreateView.vue b/web/src/views/TravelReimbursementCreateView.vue
index c7d3c99..5432820 100644
--- a/web/src/views/TravelReimbursementCreateView.vue
+++ b/web/src/views/TravelReimbursementCreateView.vue
@@ -281,7 +281,11 @@
                               v-for="item in reviewFactCards"
                               :key="item.key"
                               class="review-side-metric-card"
-                              :class="{ editable: item.editor, editing: reviewInlineEditorKey === item.key }"
+                              :class="{
+                                editable: item.editor,
+                                editing: reviewInlineEditorKey === item.key,
+                                invalid: Boolean(reviewInlineErrors[item.key])
+                              }"
                               @click="openInlineReviewEditor(item.key)"
                             >
                               <span class="review-side-metric-icon">
@@ -289,39 +293,46 @@
                               </span>
                               <div class="review-side-metric-copy">
                                 <small>{{ item.label }}</small>
-                                <template v-if="reviewInlineEditorKey === item.key && item.key === 'occurred_date'">
+                                <template v-if="reviewInlineEditorKey === item.key && item.editor === 'date'">
                                   <input
-                                    v-model="reviewInlineForm.occurred_date"
-                                    class="review-inline-input"
-                                    type="date"
-                                    @click.stop
-                                    @change="commitInlineReviewEditor"
-                                    @keydown.enter.prevent="commitInlineReviewEditor"
-                                  />
-                                </template>
-                                <template v-else-if="reviewInlineEditorKey === item.key && item.key === 'amount'">
-                                  <input
-                                    v-model="reviewInlineForm.amount"
+                                    v-model="reviewInlineForm[item.modelKey]"
                                     class="review-inline-input"
+                                    :class="{ invalid: Boolean(reviewInlineErrors[item.key]) }"
                                     type="text"
-                                    placeholder="例如 200.00元"
+                                    :placeholder="`仅支持 ${DATE_INPUT_FORMAT}`"
                                     @click.stop
+                                    @input="clearInlineReviewFieldError(item.key)"
                                     @blur="commitInlineReviewEditor"
                                     @keydown.enter.prevent="commitInlineReviewEditor"
                                   />
                                 </template>
-                                <template v-else-if="reviewInlineEditorKey === item.key && item.key === 'customer_name'">
+                                <template v-else-if="reviewInlineEditorKey === item.key && item.editor === 'amount'">
                                   <input
-                                    v-model="reviewInlineForm.customer_name"
+                                    v-model="reviewInlineForm[item.modelKey]"
                                     class="review-inline-input"
+                                    :class="{ invalid: Boolean(reviewInlineErrors[item.key]) }"
                                     type="text"
-                                    placeholder="请输入客户名称"
+                                    :placeholder="item.placeholder"
                                     @click.stop
+                                    @input="clearInlineReviewFieldError(item.key)"
                                     @blur="commitInlineReviewEditor"
                                     @keydown.enter.prevent="commitInlineReviewEditor"
                                   />
                                 </template>
-                                <template v-else-if="reviewInlineEditorKey === item.key && item.key === 'scene'">
+                                <template v-else-if="reviewInlineEditorKey === item.key && item.editor === 'text'">
+                                  <input
+                                    v-model="reviewInlineForm[item.modelKey]"
+                                    class="review-inline-input"
+                                    :class="{ invalid: Boolean(reviewInlineErrors[item.key]) }"
+                                    type="text"
+                                    :placeholder="item.placeholder"
+                                    @click.stop
+                                    @input="clearInlineReviewFieldError(item.key)"
+                                    @blur="commitInlineReviewEditor"
+                                    @keydown.enter.prevent="commitInlineReviewEditor"
+                                  />
+                                </template>
+                                <template v-else-if="reviewInlineEditorKey === item.key && item.editor === 'select'">
                                   <div class="review-inline-select-list" @click.stop>
                                     <button
                                       v-for="scene in REVIEW_SCENE_OPTIONS"
@@ -335,7 +346,10 @@
                                     </button>
                                   </div>
                                 </template>
-                                <strong v-else>{{ item.value }}</strong>
+                                <strong v-else :title="item.value">{{ item.value }}</strong>
+                                <span v-if="reviewInlineErrors[item.key]" class="review-inline-error">
+                                  {{ reviewInlineErrors[item.key] }}
+                                </span>
                               </div>
                               <span v-if="item.key !== 'attachments'" class="review-side-edit-hint">修改</span>
                               <span v-else class="review-side-edit-hint upload">{{ reviewInlinePendingFiles.length ? '已选择' : '上传' }}</span>
@@ -366,14 +380,14 @@
                           </div>
                           <div v-if="reviewOtherCategoryOpen" class="review-other-category-popover">
                             <button
-                              v-for="item in REVIEW_OTHER_CATEGORY_OPTIONS"
+                              v-for="item in reviewOtherCategoryOptions"
                               :key="item.key"
                               type="button"
                               class="review-other-category-option"
                               :class="{ active: reviewSelectedOtherCategory === item.label }"
                               @click="selectReviewOtherCategory(item)"
                             >
-                              {{ item.label }}
+                              {{ item.label }} · {{ item.confidenceLabel }}
                             </button>
                           </div>
                         </section>
@@ -381,13 +395,28 @@
                         <section class="review-side-card review-side-risk-card">
                           <div class="review-side-head">
                             <strong>合规提醒 / 风险评分</strong>
-                            <span class="review-side-risk-score">{{ reviewRiskScore }}/100</span>
+                            <span class="review-side-risk-score" :class="{ empty: reviewRiskScore === null }">
+                              {{ reviewRiskScore === null ? '无' : `${reviewRiskScore}/100` }}
+                            </span>
                           </div>
                           <p class="review-side-risk-summary">{{ reviewRiskSummary }}</p>
-                          <ul class="review-side-risk-list">
+                          <ul v-if="reviewRiskItems.length" class="review-side-risk-list">
                             <li v-for="item in reviewRiskItems" :key="item">{{ item }}</li>
                           </ul>
-                          <button type="button" class="review-side-link" :disabled="submitting || reviewActionBusy" @click="explainCurrentReviewRisk">
+                          <div v-else-if="reviewRiskEmpty" class="review-side-empty">
+                            <span class="review-side-empty-icon">
+                              <i class="mdi mdi-shield-check-outline"></i>
+                            </span>
+                            <strong>暂无风险评分</strong>
+                            <p>当前版本还没有返回结构化风险评分结果，这里先不展示虚拟分数。</p>
+                          </div>
+                          <button
+                            v-if="reviewRiskActionAvailable"
+                            type="button"
+                            class="review-side-link"
+                            :disabled="submitting || reviewActionBusy"
+                            @click="explainCurrentReviewRisk"
+                          >
                             查看全部风险项
                             <i class="mdi mdi-chevron-right"></i>
                           </button>
@@ -451,21 +480,21 @@
       </div>
     </Transition>
 
-    <Transition name="assistant-modal">
-      <div v-if="reviewCancelDialogOpen" class="assistant-overlay review-overlay">
-        <section class="review-confirm-modal">
-          <header>
-            <span class="assistant-badge warning">取消核对</span>
-            <h3>确认放弃本次识别结果？</h3>
-            <p>关闭后将退出当前核对窗口，本次尚未确认的修改不会继续保留。</p>
-          </header>
-          <div class="review-confirm-actions">
-            <button type="button" class="secondary-dialog-btn" :disabled="reviewActionBusy" @click="closeCancelReviewDialog">返回继续核对</button>
-            <button type="button" class="danger-dialog-btn" :disabled="reviewActionBusy" @click="confirmCancelReview">确认取消</button>
-          </div>
-        </section>
-      </div>
-    </Transition>
+    <ConfirmDialog
+      :open="reviewCancelDialogOpen"
+      badge="取消核对"
+      badge-tone="warning"
+      title="确认放弃本次识别结果？"
+      description="关闭后将退出当前核对窗口，本次尚未确认的修改不会继续保留。"
+      cancel-text="返回继续核对"
+      confirm-text="确认取消"
+      busy-text="处理中..."
+      confirm-tone="danger"
+      confirm-icon="mdi mdi-close-circle-outline"
+      :busy="reviewActionBusy"
+      @close="closeCancelReviewDialog"
+      @confirm="confirmCancelReview"
+    />
 
     <Transition name="assistant-modal">
       <div v-if="reviewEditDialogOpen" class="assistant-overlay review-overlay">
diff --git a/web/src/views/TravelRequestDetailView.vue b/web/src/views/TravelRequestDetailView.vue
index d3ff258..be23c5f 100644
--- a/web/src/views/TravelRequestDetailView.vue
+++ b/web/src/views/TravelRequestDetailView.vue
@@ -1,206 +1,61 @@
 <template>
   <section class="approval-page">
-    <Teleport to="body">
-      <Transition name="detail-modal">
-        <div v-if="aiEntryOpen" class="detail-overlay" @click.self="closeAiEntry">
-          <div class="detail-modal ai-entry-modal">
-            <header class="modal-header">
-              <div class="header-left">
-                <div class="req-badge">AI</div>
-                <div class="header-title-group">
-                  <h2>智能录入费用明细</h2>
-                  <p>描述票据、行程或费用场景，AI 会整理成可追加的费用条目。</p>
-                </div>
-              </div>
-              <div class="header-right">
-                <button class="close-btn" type="button" aria-label="关闭" @click="closeAiEntry">
-                  <i class="mdi mdi-close"></i>
-                </button>
-              </div>
-            </header>
-
-            <div class="modal-body ai-entry-body">
-              <div class="ai-entry-grid">
-                <section class="ai-chat-card">
-                  <input
-                    ref="aiFileInput"
-                    class="ai-file-input"
-                    type="file"
-                    multiple
-                    accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx"
-                    @change="handleAiFilesChange"
-                  />
-                  <div class="ai-chat-scroll">
-                    <article
-                      v-for="message in aiMessages"
-                      :key="message.id"
-                      class="ai-chat-bubble"
-                      :class="message.role"
-                    >
-                      <span class="ai-chat-avatar">
-                        <i :class="message.role === 'assistant' ? 'mdi mdi-robot-outline' : 'mdi mdi-account-circle-outline'"></i>
-                      </span>
-                      <div class="ai-chat-content">
-                        <header>
-                          <strong>{{ message.role === 'assistant' ? 'AI 录入助手' : '我' }}</strong>
-                        </header>
-                        <p>{{ message.text }}</p>
-                      </div>
-                    </article>
-                  </div>
-
-                  <div class="ai-composer">
-                    <div class="ai-composer-surface">
-                      <textarea
-                        v-model="aiDraft"
-                        rows="3"
-                        placeholder="例如：7月12日从上海虹桥到杭州东高铁二等座236元，已上传车票和行程单。"
-                      />
-                      <div class="ai-composer-actions">
-                        <button class="ai-upload-btn" type="button" aria-label="上传单据" @click="triggerAiUpload">
-                          <i class="mdi mdi-paperclip"></i>
-                        </button>
-                        <button class="ai-send-btn" type="button" aria-label="发送给 AI" :disabled="!canSendAiEntry" @click="sendAiEntry">
-                          <i class="mdi mdi-send"></i>
-                        </button>
-                      </div>
-                    </div>
-                    <div v-if="uploadedAiFiles.length" class="ai-upload-list">
-                      <span v-for="file in uploadedAiFiles" :key="file.name" class="ai-upload-chip">
-                        <i class="mdi mdi-paperclip"></i>
-                        {{ file.name }}
-                      </span>
-                    </div>
-                  </div>
-                </section>
-
-                <aside class="ai-preview-card">
-                  <div class="ai-preview-head">
-                    <div>
-                      <h3>识别结果</h3>
-                      <p>确认后会直接追加到费用明细表。</p>
-                    </div>
-                    <span v-if="pendingAiExpense" class="attachment-pill neutral">待确认</span>
-                  </div>
-
-                  <div v-if="pendingAiExpense" class="ai-preview-fields">
-                    <div class="preview-field">
-                      <span>日期</span>
-                      <strong>{{ pendingAiExpense.time }} {{ pendingAiExpense.dayLabel }}</strong>
-                    </div>
-                    <div class="preview-field">
-                      <span>费用项目</span>
-                      <strong>{{ pendingAiExpense.name }}</strong>
-                    </div>
-                    <div class="preview-field">
-                      <span>分类</span>
-                      <strong>{{ pendingAiExpense.category }}</strong>
-                    </div>
-                    <div class="preview-field">
-                      <span>金额</span>
-                      <strong>{{ pendingAiExpense.amount }}</strong>
-                    </div>
-                    <div class="preview-field full">
-                      <span>说明</span>
-                      <strong>{{ pendingAiExpense.desc }}</strong>
-                      <p>{{ pendingAiExpense.detail }}</p>
-                    </div>
-                    <div class="preview-field full">
-                      <span>附件</span>
-                      <strong>{{ pendingAiExpense.attachmentStatus }}</strong>
-                      <p>{{ pendingAiExpense.attachmentHint }}</p>
-                    </div>
-                    <div class="ai-preview-actions">
-                      <button class="ai-preview-secondary" type="button" @click="regenerateAiEntry">
-                        <i class="mdi mdi-refresh"></i>
-                        重新生成
-                      </button>
-                      <button class="ai-preview-primary" type="button" @click="applyAiExpense">
-                        <i class="mdi mdi-plus-circle-outline"></i>
-                        加入费用明细
-                      </button>
-                    </div>
-                  </div>
-
-                  <div v-else class="ai-preview-empty">
-                    <i class="mdi mdi-robot-outline"></i>
-                    <p>发送一段费用描述后，这里会生成结构化结果。</p>
-                  </div>
-                </aside>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
     <div class="approval-detail">
       <div class="detail-scroll">
-      <article class="detail-hero panel">
-        <div class="applicant-card">
-          <div class="portrait">{{ profile.avatar }}</div>
-          <div>
-            <h2>{{ profile.name }} <span>{{ profile.department }}</span></h2>
-            <p>申请时间 <strong>{{ request.applyTime }}</strong></p>
-          </div>
-        </div>
-
-        <div class="hero-stat">
-          <span>金额</span>
-          <strong>{{ expenseTotal }}</strong>
-        </div>
-        <div class="hero-stat">
-          <span>审批状态</span>
-          <b class="state-pill">{{ request.node }}</b>
-        </div>
-        <div class="hero-stat">
-          <span>商旅状态</span>
-          <b :class="['risk-pill', request.travelTone]">{{ request.travel }}</b>
-        </div>
-        <div class="hero-stat">
-          <span>申请状态</span>
-          <strong class="countdown"><i class="mdi mdi-clock-outline"></i> {{ request.approval }}</strong>
-        </div>
-
-        <div class="hero-summary-panel">
-          <div v-for="item in heroSummaryItems" :key="item.label" class="hero-summary-item">
-            <div class="hero-summary-label">
-              <span class="hero-summary-icon"><i :class="item.icon"></i></span>
-              <span>{{ item.label }}</span>
-            </div>
-            <strong>{{ item.value }}</strong>
-          </div>
-        </div>
-
-        <div class="progress-block">
-          <div class="progress-head">
-            <h3>当前进度</h3>
-          </div>
-          <div class="progress-line">
-            <div
-              v-for="step in progressSteps"
-              :key="step.label"
-              class="progress-step"
-              :class="{ active: step.active, current: step.current }"
-            >
-              <span>
-                <i
-                  v-if="step.current"
-                  v-motion
-                  class="current-progress-ring"
-                  :initial="currentProgressRingMotion.initial"
-                  :enter="currentProgressRingMotion.enter"
-                  aria-hidden="true"
-                ></i>
-                <i v-if="step.done" class="mdi mdi-check"></i>
-                <template v-else>{{ step.index }}</template>
-              </span>
-              <strong>{{ step.label }}</strong>
-              <small>{{ step.time }}</small>
+        <article class="detail-hero panel">
+          <div class="applicant-card">
+            <div class="portrait">{{ profile.avatar }}</div>
+            <div>
+              <h2>{{ profile.name }} <span>{{ request.typeLabel }}</span></h2>
+              <p>{{ profile.department }} <strong>申请时间 {{ request.applyTime }}</strong></p>
             </div>
           </div>
-        </div>
-      </article>
+
+          <div v-for="stat in heroStats" :key="stat.label" class="hero-stat">
+            <span>{{ stat.label }}</span>
+            <strong v-if="stat.kind === 'text'">{{ stat.value }}</strong>
+            <b v-else :class="[stat.className, stat.tone]">{{ stat.value }}</b>
+          </div>
+
+          <div class="hero-summary-panel">
+            <div v-for="item in heroSummaryItems" :key="item.label" class="hero-summary-item">
+              <div class="hero-summary-label">
+                <span class="hero-summary-icon"><i :class="item.icon"></i></span>
+                <span>{{ item.label }}</span>
+              </div>
+              <strong>{{ item.value }}</strong>
+            </div>
+          </div>
+
+          <div class="progress-block">
+            <div class="progress-head">
+              <h3>{{ isTravelRequest ? '差旅进度' : '报销进度' }}</h3>
+            </div>
+            <div class="progress-line" :style="{ '--progress-columns': progressSteps.length }">
+              <div
+                v-for="step in progressSteps"
+                :key="step.label"
+                class="progress-step"
+                :class="{ active: step.active, current: step.current }"
+              >
+                <span>
+                  <i
+                    v-if="step.current"
+                    v-motion
+                    class="current-progress-ring"
+                    :initial="currentProgressRingMotion.initial"
+                    :enter="currentProgressRingMotion.enter"
+                    aria-hidden="true"
+                  ></i>
+                  <i v-if="step.done" class="mdi mdi-check"></i>
+                  <template v-else>{{ step.index }}</template>
+                </span>
+                <strong>{{ step.label }}</strong>
+                <small>{{ step.time }}</small>
+              </div>
+            </div>
+          </div>
+        </article>
 
         <div class="detail-grid">
           <section class="detail-left">
@@ -208,107 +63,220 @@
               <div class="detail-card-head">
                 <div>
                   <h3>费用明细</h3>
-                  <p>按发生时间逐笔展示，附件与系统校验直接在表内完成核对。</p>
+                  <p>
+                    {{ isTravelRequest ? '按出行时间逐笔核对票据与差旅规则。' : '按业务发生时间逐笔核对票据、用途说明与系统校验。' }}
+                  </p>
                 </div>
                 <button class="smart-entry-btn" type="button" @click="openAiEntry">
                   <i class="mdi mdi-robot-outline"></i>
                   <span>智能录入</span>
                 </button>
               </div>
+
               <div class="detail-expense-table">
-              <table>
-                <thead>
-                  <tr>
-                    <th>时间</th>
-                    <th>费用项目</th>
-                    <th>说明</th>
-                    <th>金额</th>
-                    <th>附件材料</th>
-                    <th>系统校验</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <template v-for="item in expenseItems" :key="item.id">
+                <table>
+                  <thead>
                     <tr>
-                      <td class="expense-time">
-                        <strong>{{ item.time }}</strong>
-                        <span>{{ item.dayLabel }}</span>
-                      </td>
-                      <td class="expense-type">
-                        <strong>{{ item.name }}</strong>
-                        <span>{{ item.category }}</span>
-                      </td>
-                      <td class="expense-desc">
-                        <strong>{{ item.desc }}</strong>
-                        <span>{{ item.detail }}</span>
-                      </td>
-                      <td class="expense-amount">
-                        <strong>{{ item.amount }}</strong>
-                        <span v-if="item.tone !== 'ok'" :class="['over-tag', item.tone]">{{ item.status }}</span>
-                      </td>
-                      <td class="expense-attachment">
-                        <div class="expense-attachment-main">
-                          <span :class="['attachment-pill', item.attachmentTone]">{{ item.attachmentStatus }}</span>
+                      <th>时间</th>
+                      <th>费用项目</th>
+                      <th>说明</th>
+                      <th>金额</th>
+                      <th>附件材料</th>
+                      <th>系统校验</th>
+                      <th v-if="isDraftRequest">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <template v-for="item in expenseItems" :key="item.id">
+                      <tr>
+                        <td class="expense-time">
+                          <template v-if="editingExpenseId === item.id">
+                            <div class="cell-editor">
+                              <input v-model="expenseEditor.itemDate" class="editor-input" type="date" />
+                              <span>{{ item.dayLabel }}</span>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <strong>{{ item.time }}</strong>
+                            <span>{{ item.dayLabel }}</span>
+                          </template>
+                        </td>
+                        <td class="expense-type">
+                          <template v-if="editingExpenseId === item.id">
+                            <div class="cell-editor">
+                              <select v-model="expenseEditor.itemType" class="editor-select">
+                                <option v-for="option in expenseTypeOptions" :key="option.value" :value="option.value">
+                                  {{ option.label }}
+                                </option>
+                              </select>
+                              <span>编辑费用项目</span>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <strong>{{ item.name }}</strong>
+                            <span>{{ item.category }}</span>
+                          </template>
+                        </td>
+                        <td class="expense-desc">
+                          <template v-if="editingExpenseId === item.id">
+                            <div class="cell-editor editor-stack">
+                              <input v-model="expenseEditor.itemReason" class="editor-input" type="text" placeholder="输入费用说明" />
+                              <input v-model="expenseEditor.itemLocation" class="editor-input" type="text" placeholder="输入业务地点" />
+                            </div>
+                          </template>
+                          <template v-else>
+                            <strong>{{ item.desc }}</strong>
+                            <span>{{ item.detail }}</span>
+                          </template>
+                        </td>
+                        <td class="expense-amount">
+                          <template v-if="editingExpenseId === item.id">
+                            <div class="cell-editor">
+                              <input v-model="expenseEditor.itemAmount" class="editor-input" type="number" min="0" step="0.01" placeholder="输入金额" />
+                              <span>保存后自动格式化为人民币</span>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <strong>{{ item.amount }}</strong>
+                            <span v-if="item.tone !== 'ok'" :class="['over-tag', item.tone]">{{ item.status }}</span>
+                          </template>
+                        </td>
+                        <td class="expense-attachment">
+                          <template v-if="editingExpenseId === item.id">
+                            <div class="cell-editor editor-stack">
+                              <input v-model="expenseEditor.invoiceId" class="editor-input" type="text" placeholder="输入票据标识或附件名称" />
+                              <span>示例：invoice-2026-0513.jpg</span>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <div class="expense-attachment-main">
+                              <span :class="['attachment-pill', item.attachmentTone]">{{ item.attachmentStatus }}</span>
+                              <button
+                                v-if="item.attachments.length"
+                                class="inline-action"
+                                type="button"
+                                @click="toggleExpenseAttachments(item.id)"
+                              >
+                                {{ expandedExpenseId === item.id ? '收起附件' : '查看附件' }}
+                              </button>
+                            </div>
+                            <span class="attachment-hint">{{ item.attachmentHint }}</span>
+                          </template>
+                        </td>
+                        <td class="expense-risk">
+                          <template v-if="showExpenseRisk(item)">
+                            <span :class="['risk-inline-tag', resolveExpenseIssues(item).length ? 'medium' : item.riskTone]">
+                              {{ resolveExpenseIssues(item).length ? '待补充' : item.riskLabel }}
+                            </span>
+                            <p>{{ resolveExpenseIssues(item).length ? resolveExpenseIssues(item).join('，') : item.riskText }}</p>
+                          </template>
+                        </td>
+                        <td v-if="isDraftRequest" class="expense-action-cell">
+                          <div v-if="editingExpenseId === item.id" class="row-action-group">
+                            <button
+                              class="inline-action primary"
+                              type="button"
+                              :disabled="savingExpenseId === item.id || submitBusy || deleteBusy"
+                              @click="saveExpenseEdit(item)"
+                            >
+                              {{ savingExpenseId === item.id ? '保存中' : '保存' }}
+                            </button>
+                            <button
+                              class="inline-action"
+                              type="button"
+                              :disabled="savingExpenseId === item.id || submitBusy || deleteBusy"
+                              @click="cancelExpenseEdit"
+                            >
+                              取消
+                            </button>
+                          </div>
                           <button
-                            v-if="item.attachments.length"
+                            v-else
                             class="inline-action"
                             type="button"
-                            @click="toggleExpenseAttachments(item.id)"
+                            :disabled="actionBusy"
+                            @click="startExpenseEdit(item)"
                           >
-                            {{ expandedExpenseId === item.id ? '收起附件' : '查看附件' }}
+                            编辑
                           </button>
-                        </div>
-                        <span class="attachment-hint">{{ item.attachmentHint }}</span>
-                      </td>
-                      <td class="expense-risk">
-                        <template v-if="showExpenseRisk(item)">
-                          <span :class="['risk-inline-tag', item.riskTone]">{{ item.riskLabel }}</span>
-                          <p>{{ item.riskText }}</p>
-                        </template>
-                      </td>
+                        </td>
+                      </tr>
+                      <tr v-if="expandedExpenseId === item.id" class="expense-expand-row">
+                        <td :colspan="isDraftRequest ? 7 : 6">
+                          <div class="expense-files">
+                            <span v-for="file in item.attachments" :key="file" class="expense-file-chip">
+                              <i class="mdi mdi-paperclip"></i>
+                              {{ file }}
+                            </span>
+                          </div>
+                        </td>
+                      </tr>
+                    </template>
+                    <tr class="total-row">
+                      <td :colspan="isDraftRequest ? 4 : 3">合计</td>
+                      <td>{{ expenseTotal }}</td>
+                      <td>{{ uploadedExpenseCount }} 项已关联票据</td>
+                      <td>{{ expenseSummaryText }}</td>
+                      <td v-if="isDraftRequest">-</td>
                     </tr>
-                    <tr v-if="expandedExpenseId === item.id" class="expense-expand-row">
-                      <td colspan="6">
-                        <div class="expense-files">
-                          <span v-for="file in item.attachments" :key="file" class="expense-file-chip">
-                            <i class="mdi mdi-paperclip"></i>
-                            {{ file }}
-                          </span>
-                        </div>
-                      </td>
-                    </tr>
-                  </template>
-                  <tr class="total-row">
-                    <td colspan="3">合计</td>
-                    <td>{{ expenseTotal }}</td>
-                    <td>{{ uploadedExpenseCount }} 项已上传票据</td>
-                    <td>1 项待补材料，1 项需补充超标说明</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </article>
+                  </tbody>
+                </table>
+              </div>
+            </article>
 
-          <article class="detail-card panel">
-            <h3>申请说明</h3>
-            <textarea rows="3" :value="detailNote" placeholder="输入申请说明..." />
-          </article>
+            <article v-if="isDraftRequest" class="detail-card panel validation-card">
+              <div class="validation-head">
+                <h3>提交校验</h3>
+                <span :class="['validation-pill', validationTone]">{{ canSubmit ? '可提交' : '待完善' }}</span>
+              </div>
+              <p class="validation-summary">{{ validationSummary }}</p>
+              <ul v-if="draftBlockingIssues.length" class="validation-list">
+                <li v-for="issue in draftBlockingIssues" :key="issue">{{ issue }}</li>
+              </ul>
+            </article>
+
+            <article class="detail-card panel">
+              <h3>申请说明</h3>
+              <div class="detail-note">{{ detailNote }}</div>
+            </article>
           </section>
         </div>
       </div>
 
       <footer class="detail-actions">
-      <button class="back-action" type="button" @click="emit('backToRequests')">
-        <i class="mdi mdi-arrow-left"></i>
-        <span>退回列表</span>
-      </button>
-      <div class="approval-action-group" aria-label="申请操作">
-        <button class="approve-action" type="button"><i class="mdi mdi-send-circle-outline"></i> 提交审批</button>
-        <button class="reject-action" type="button"><i class="mdi mdi-close-circle-outline"></i> 撤回申请</button>
-        <button class="supplement-action" type="button"><i class="mdi mdi-pencil-outline"></i> 编辑申请</button>
-      </div>
+        <button class="back-action" type="button" @click="emit('backToRequests')">
+          <i class="mdi mdi-arrow-left"></i>
+          <span>返回报销列表</span>
+        </button>
+        <div v-if="isDraftRequest" class="approval-action-group" aria-label="申请操作">
+          <button class="reject-action" type="button" :disabled="actionBusy" @click="handleDeleteDraft">
+            <i class="mdi mdi-trash-can-outline"></i>
+            {{ deleteBusy ? '删除中' : '删除草稿' }}
+          </button>
+          <button class="approve-action" type="button" :disabled="!canSubmit" @click="handleSubmit">
+            <i class="mdi mdi-send-circle-outline"></i>
+            {{ submitBusy ? '提交中' : '提交审批' }}
+          </button>
+        </div>
+        <p v-else class="detail-action-hint">当前单据已进入流程，详情页仅展示状态与费用明细。</p>
       </footer>
     </div>
+
+    <ConfirmDialog
+      :open="deleteDialogOpen"
+      badge="删除草稿"
+      badge-tone="danger"
+      :title="`确认删除草稿 ${request.id} 吗？`"
+      description="删除后该草稿及其当前费用明细将不可恢复，请确认本次操作。"
+      cancel-text="取消"
+      confirm-text="确认删除"
+      busy-text="删除中..."
+      confirm-tone="danger"
+      confirm-icon="mdi mdi-trash-can-outline"
+      :busy="deleteBusy"
+      @close="closeDeleteDialog"
+      @confirm="confirmDeleteDraft"
+    />
   </section>
 </template>