refactor(web): update view scripts

- AuditView.js: update audit view logic
- EmployeeManagementView.js: update employee management logic
- RequestsView.js: update requests view logic
- TravelRequestDetailView.js: update travel detail view logic

web/src/views/scripts/AuditView.js

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
+import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { useSystemState } from '../../composables/useSystemState.js'
 import { useToast } from '../../composables/useToast.js'
 import {
@@ -849,7 +850,8 @@ function buildReviewNote(status) {
 export default {
   name: 'AuditView',
   components: {
-    ConfirmDialog
+    ConfirmDialog,
+    TableEmptyState
   },
   emits: ['detail-open-change'],
   setup(_, { emit }) {
@@ -946,6 +948,39 @@ export default {
 
       return tokens
     })
+    const auditEmptyState = computed(() => {
+      const hasFilters = activeFilterTokens.value.length > 0
+
+      if (!currentAssets.value.length) {
+        return {
+          eyebrow: `${activeTabLabel.value}资产`,
+          title: `${activeTabLabel.value}列表暂时还是空的`,
+          desc: `当前环境里还没有可展示的${activeTabLabel.value}资产。完成接入或同步后，会统一展示在这里。`,
+          icon: 'mdi mdi-database-search-outline',
+          actionLabel: '重新加载',
+          actionIcon: 'mdi mdi-refresh',
+          tone: 'amber',
+          artLabel: 'ASSET',
+          tips: ['切换页签可查看其他资产类型', '支持按业务域、负责人和状态做过滤']
+        }
+      }
+
+      return {
+        eyebrow: '筛选结果为空',
+        title: `没有找到匹配的${activeTabLabel.value}`,
+        desc: hasFilters
+          ? '试试清空业务域、负责人、状态或关键词筛选，再重新查看。'
+          : `当前列表中还没有满足展示条件的${activeTabLabel.value}资产。`,
+        icon: hasFilters ? 'mdi mdi-tune-variant' : 'mdi mdi-view-grid-outline',
+        actionLabel: hasFilters ? '清空筛选' : '重新加载',
+        actionIcon: hasFilters ? 'mdi mdi-filter-remove-outline' : 'mdi mdi-refresh',
+        tone: hasFilters ? 'emerald' : 'slate',
+        artLabel: hasFilters ? 'FILTER' : 'QUEUE',
+        tips: hasFilters
+          ? ['业务域、负责人、状态与关键词会叠加过滤', '可以换个编码、名称或负责人关键词继续搜索']
+          : ['列表展示来自真实资产 API', '切换资产类型后会自动重新拉取数据']
+      }
+    })
     const canActivateSelected = computed(() => {
       if (!selectedSkillIsRule.value || !canManageSelected.value || detailBusy.value) {
         return false
@@ -1010,6 +1045,15 @@ export default {
       activeFilterPopover.value = ''
     }
 
+    function handleAuditEmptyAction() {
+      if (!currentAssets.value.length || !activeFilterTokens.value.length) {
+        loadAssets({ force: true }).catch(() => {})
+        return
+      }
+
+      resetFilters()
+    }
+
     function toggleFilterPopover(name) {
       activeFilterPopover.value = activeFilterPopover.value === name ? '' : name
     }
@@ -1261,6 +1305,7 @@ export default {
       tableColumns,
       showMetricColumn,
       visibleSkills,
+      auditEmptyState,
       loading,
       errorMessage,
       detailLoading,
@@ -1287,6 +1332,7 @@ export default {
       openAssetDetail,
       closeDetail,
       resetFilters,
+      handleAuditEmptyAction,
       toggleFilterPopover,
       selectFilter,
       closeFilterPopover,

web/src/views/scripts/EmployeeManagementView.js

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
+import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { useToast } from '../../composables/useToast.js'
 import { disableEmployee, fetchEmployeeMeta, fetchEmployees, updateEmployee } from '../../services/employees.js'
 
@@ -201,7 +202,8 @@ function buildEmployeeSummary(employees) {
 export default {
   name: 'EmployeeManagementView',
   components: {
-    ConfirmDialog
+    ConfirmDialog,
+    TableEmptyState
   },
   emits: ['overview-change'],
   setup(_, { emit }) {
@@ -311,6 +313,40 @@ export default {
     })
 
     const hasActiveFilters = computed(() => activeFilterTokens.value.length > 0)
+    const hasEmployeeFilters = computed(() => {
+      return activeTab.value !== DEFAULT_STATUS_TABS[0] || hasActiveFilters.value
+    })
+    const employeeEmptyState = computed(() => {
+      if (!employees.value.length) {
+        return {
+          eyebrow: '员工台账',
+          title: '员工目录暂时还是空的',
+          desc: '当前环境还没有同步任何员工档案。完成目录接入后，这里会展示员工基础信息、角色和状态。',
+          icon: 'mdi mdi-account-group-outline',
+          actionLabel: '重新加载',
+          actionIcon: 'mdi mdi-refresh',
+          tone: 'sky',
+          artLabel: 'PEOPLE',
+          tips: ['支持按部门、职级和角色统一维护', '点击列表行即可进入档案和权限详情']
+        }
+      }
+
+      return {
+        eyebrow: hasEmployeeFilters.value ? '筛选结果为空' : '员工状态为空',
+        title: hasEmployeeFilters.value ? '当前条件下没有匹配员工' : `“${activeTab.value}”里暂时没有员工`,
+        desc: hasEmployeeFilters.value
+          ? '可以切回“全部员工”，或者清空关键词、部门、职级和角色条件后再试。'
+          : '这个状态标签下目前还没有记录，你可以切换到其他状态继续查看。',
+        icon: hasEmployeeFilters.value ? 'mdi mdi-account-search-outline' : 'mdi mdi-badge-account-horizontal-outline',
+        actionLabel: hasEmployeeFilters.value ? '清空筛选' : '查看全部员工',
+        actionIcon: hasEmployeeFilters.value ? 'mdi mdi-filter-remove-outline' : 'mdi mdi-format-list-bulleted',
+        tone: hasEmployeeFilters.value ? 'emerald' : 'slate',
+        artLabel: hasEmployeeFilters.value ? 'FILTER' : 'STATUS',
+        tips: hasEmployeeFilters.value
+          ? ['关键词、部门、职级和角色条件会叠加生效', '也可以直接搜索姓名、工号或岗位']
+          : ['员工状态统计会按真实目录数据自动更新', '停用员工仍会保留在台账中便于追溯']
+      }
+    })
 
     watch(
       employeeSummary,
@@ -343,6 +379,15 @@ export default {
       pageSizeOpen.value = false
     }
 
+    function handleEmployeeEmptyAction() {
+      if (!employees.value.length) {
+        loadEmployees().catch(() => {})
+        return
+      }
+
+      resetFilters()
+    }
+
     function changePageSize(size) {
       pageSize.value = size
       pageSizeOpen.value = false
@@ -641,6 +686,7 @@ export default {
       roleOptions,
       employees,
       visibleEmployees,
+      employeeEmptyState,
       searchKeyword,
       selectedDepartment,
       selectedGrade,
@@ -655,9 +701,11 @@ export default {
       roleFilterOptions,
       activeFilterTokens,
       hasActiveFilters,
+      hasEmployeeFilters,
       totalCount,
       totalPages,
       resetFilters,
+      handleEmployeeEmptyAction,
       openEmployeeDetail,
       closeEmployeeDetail,
       closeDisableDialog,

web/src/views/scripts/RequestsView.js

@@ -1,5 +1,6 @@
 import { computed, ref, watch } from 'vue'
 
+import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { normalizeRequestForUi } from '../../utils/requestViewModel.js'
 
 function extractRowDate(value) {
@@ -9,6 +10,9 @@ function extractRowDate(value) {
 
 export default {
   name: 'RequestsView',
+  components: {
+    TableEmptyState
+  },
   props: {
     filteredRequests: { type: Array, required: true },
     hasData: { type: Boolean, default: false },
@@ -108,20 +112,67 @@ export default {
     })
     const showTable = computed(() => !props.loading && !props.error && visibleRows.value.length > 0)
     const showEmpty = computed(() => !props.loading && !props.error && visibleRows.value.length === 0)
+    const hasListFilters = computed(() => {
+      return Boolean(
+        activeTab.value !== '全部'
+        || listKeyword.value.trim()
+        || appliedStart.value
+        || appliedEnd.value
+      )
+    })
     const emptyState = computed(() => {
       if (!props.hasData) {
         return {
-          title: '暂无真实报销单据',
+          eyebrow: '个人报销',
-          desc: '数据库里还没有可见的个人报销数据。保存草稿或提交报销后，会显示在这里。'
+          title: '还没有任何报销单据',
+          desc: '首张草稿或已提交的报销单会自动出现在这里，后续可以继续补充、提交和跟踪进度。',
+          icon: 'mdi mdi-receipt-text-plus-outline',
+          actionLabel: '发起报销',
+          actionIcon: 'mdi mdi-plus-circle-outline',
+          tone: 'emerald',
+          artLabel: 'CLAIM',
+          tips: ['保存草稿后会自动回到这里', '支持草稿、待提交、审批中和已完成全流程管理']
         }
       }
 
       return {
-        title: '没有匹配结果',
+        eyebrow: hasListFilters.value ? '筛选结果为空' : '状态列表为空',
-        desc: '当前筛选条件下没有可展示的报销单据。'
+        title: hasListFilters.value ? '当前条件下没有匹配单据' : `“${activeTab.value}”里暂时没有单据`,
+        desc: hasListFilters.value
+          ? '可以清空关键词、时间段或状态筛选后再看看。'
+          : '当前状态下还没有可展示的报销记录，可以先发起一笔报销或切换到其他状态。',
+        icon: hasListFilters.value ? 'mdi mdi-magnify-scan' : 'mdi mdi-clipboard-text-clock-outline',
+        actionLabel: hasListFilters.value ? '清空筛选' : '',
+        actionIcon: hasListFilters.value ? 'mdi mdi-filter-remove-outline' : '',
+        tone: hasListFilters.value ? 'sky' : 'slate',
+        artLabel: hasListFilters.value ? 'FILTER' : 'QUEUE',
+        tips: hasListFilters.value
+          ? ['关键词、时间段和状态会叠加生效', '可尝试搜索单号、事由或报销类型']
+          : ['已完成单据会保留在列表中便于追踪', '草稿、审批中和待补充会按真实状态实时归类']
       }
     })
 
+    function resetFilters() {
+      activeTab.value = '全部'
+      listKeyword.value = ''
+      datePopover.value = false
+      rangeStart.value = ''
+      rangeEnd.value = ''
+      appliedStart.value = ''
+      appliedEnd.value = ''
+      pageSizeOpen.value = false
+      currentPage.value = 1
+    }
+
+    function handleEmptyAction() {
+      if (!props.hasData) {
+        emit('create-request')
+        return
+      }
+
+      resetFilters()
+    }
+
     watch([activeTab, rows, listKeyword, appliedStart, appliedEnd], () => {
       currentPage.value = 1
     })
@@ -151,7 +202,9 @@ export default {
       visibleRows,
       showTable,
       showEmpty,
-      emptyState
+      emptyState,
+      resetFilters,
+      handleEmptyAction
     }
   }
 }

web/src/views/scripts/TravelRequestDetailView.js

@@ -1,8 +1,18 @@
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
 
 import { useToast } from '../../composables/useToast.js'
 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
-import { deleteExpenseClaim, submitExpenseClaim, updateExpenseClaimItem } from '../../services/reimbursements.js'
+import {
+  createExpenseClaimItem,
+  deleteExpenseClaimItem,
+  deleteExpenseClaimItemAttachment,
+  deleteExpenseClaim,
+  fetchExpenseClaimItemAttachment,
+  fetchExpenseClaimItemAttachmentMeta,
+  submitExpenseClaim,
+  uploadExpenseClaimItemAttachment,
+  updateExpenseClaimItem
+} from '../../services/reimbursements.js'
 import { normalizeRequestForUi } from '../../utils/requestViewModel.js'
 
 const EXPENSE_TYPE_OPTIONS = [
@@ -17,6 +27,15 @@ const EXPENSE_TYPE_OPTIONS = [
   { value: 'other', label: '其他费用' }
 ]
 
+const LOCATION_REQUIRED_EXPENSE_TYPES = new Set([
+  'travel',
+  'hotel',
+  'transport',
+  'meal',
+  'meeting',
+  'entertainment'
+])
+
 function parseCurrency(value) {
   return Number.parseFloat(String(value).replace(/[^\d.]/g, '')) || 0
 }
@@ -30,6 +49,34 @@ function formatCurrency(value) {
   }).format(value)
 }
 
+function normalizeExpenseType(value) {
+  return String(value || '').trim() || 'other'
+}
+
+function resolveExpenseTypeLabel(value) {
+  return EXPENSE_TYPE_OPTIONS.find((option) => option.value === normalizeExpenseType(value))?.label || '其他费用'
+}
+
+function isLocationRequiredExpenseType(value) {
+  return LOCATION_REQUIRED_EXPENSE_TYPES.has(normalizeExpenseType(value))
+}
+
+function resolveLocationInputPlaceholder(value) {
+  return isLocationRequiredExpenseType(value) ? '输入业务地点' : '输入采购/收货地点（可选）'
+}
+
+function resolveLocationSummaryLabel(value) {
+  return isLocationRequiredExpenseType(value) ? '业务地点' : '采购/收货地点'
+}
+
+function resolveLocationDisplay(value, expenseType) {
+  if (!isLocationRequiredExpenseType(expenseType) && isPlaceholderValue(value)) {
+    return '非必填'
+  }
+
+  return isPlaceholderValue(value) ? '待补充' : value
+}
+
 function buildFallbackProgressSteps() {
   return [
     { index: 1, label: '保存草稿', time: '已完成', done: true, active: true },
@@ -43,7 +90,7 @@ function buildFallbackProgressSteps() {
 
 function buildFallbackExpenseItems(request) {
   return [
-    {
+    buildExpenseItemViewModel({
       id: 'fallback-1',
       itemDate: '',
       itemType: request.typeCode || 'other',
@@ -56,7 +103,7 @@ function buildFallbackExpenseItems(request) {
       name: request.typeLabel,
       category: request.typeLabel,
       desc: request.reason,
-      detail: request.sceneTarget,
+      detail: resolveLocationDisplay(request.sceneTarget, request.typeCode),
       amount: request.amountDisplay,
       status: '待补充',
       tone: 'bad',
@@ -67,7 +114,7 @@ function buildFallbackExpenseItems(request) {
       riskLabel: '待补材料',
       riskText: request.riskSummary,
       riskTone: 'medium'
-    }
+    }, 0, request)
   ]
 }
 
@@ -81,16 +128,110 @@ function isPlaceholderValue(value) {
 }
 
 function isValidIsoDate(value) {
-  if (!/^\d{4}-\d{2}-\d{2}$/.test(String(value || '').trim())) {
+  const normalized = String(value || '').trim()
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(normalized)) {
     return false
   }
 
-  const nextDate = new Date(`${value}T00:00:00`)
+  const [yearText, monthText, dayText] = normalized.split('-')
-  return !Number.isNaN(nextDate.getTime()) && nextDate.toISOString().slice(0, 10) === value
+  const year = Number(yearText)
+  const month = Number(monthText)
+  const day = Number(dayText)
+
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+    return false
+  }
+
+  const candidate = new Date(Date.UTC(year, month - 1, day))
+  return (
+    candidate.getUTCFullYear() === year &&
+    candidate.getUTCMonth() === month - 1 &&
+    candidate.getUTCDate() === day
+  )
+}
+
+function normalizeIsoDateValue(value) {
+  const normalized = String(value || '').trim()
+  if (isValidIsoDate(normalized)) {
+    return normalized
+  }
+
+  const match = normalized.match(/^(\d{4}-\d{2}-\d{2})/)
+  if (match && isValidIsoDate(match[1])) {
+    return match[1]
+  }
+
+  const candidate = value instanceof Date ? value : new Date(normalized)
+  if (Number.isNaN(candidate.getTime())) {
+    return ''
+  }
+
+  const year = candidate.getFullYear()
+  const month = String(candidate.getMonth() + 1).padStart(2, '0')
+  const day = String(candidate.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function resolveExpenseUploadHint(value) {
+  const normalized = String(value || '').trim()
+  return normalized || '支持上传 JPG、PNG、PDF，未上传也可先保存草稿'
+}
+
+function extractAttachmentDisplayName(value) {
+  const normalized = String(value || '').trim()
+  if (!normalized) {
+    return ''
+  }
+
+  return normalized.split('/').filter(Boolean).pop() || normalized
+}
+
+function buildExpenseItemViewModel(source, index, requestModel) {
+  const itemType = normalizeExpenseType(source?.itemType || source?.item_type || requestModel?.typeCode || 'other')
+  const itemReason = String(source?.itemReason ?? source?.item_reason ?? '').trim()
+  const itemLocation = String(source?.itemLocation ?? source?.item_location ?? '').trim()
+  const itemDate = normalizeIsoDateValue(source?.itemDate ?? source?.item_date)
+  const itemAmount = parseCurrency(source?.itemAmount ?? source?.item_amount)
+  const invoiceId = String(source?.invoiceId ?? source?.invoice_id ?? '').trim()
+  const attachmentName = String(source?.attachmentName || source?.attachment_name || extractAttachmentDisplayName(invoiceId)).trim()
+  const attachments = invoiceId ? [attachmentName || invoiceId] : []
+  const amountDisplay = itemAmount > 0 ? formatCurrency(itemAmount) : '待补充'
+  const riskText = String(source?.riskText || '').trim()
+
+  return {
+    id: String(source?.id || `${requestModel?.claimId || requestModel?.id || 'claim'}-item-${index}`),
+    itemDate,
+    itemType,
+    itemReason,
+    itemLocation,
+    itemAmount,
+    invoiceId,
+    time: itemDate || '待补充',
+    dayLabel: requestModel?.detailVariant === 'travel' ? `第 ${index + 1} 项` : '业务发生项',
+    name: resolveExpenseTypeLabel(itemType),
+    category: resolveExpenseTypeLabel(itemType),
+    desc: itemReason || '待补充',
+    detail: resolveLocationDisplay(itemLocation, itemType),
+    amount: amountDisplay,
+    status: attachments.length ? '已识别' : '待补充',
+    tone: attachments.length ? 'ok' : 'bad',
+    attachmentStatus: attachments.length ? `${attachments.length} 份附件` : '未上传',
+    attachmentHint: attachments.length ? attachmentName || attachments[0] : resolveExpenseUploadHint(),
+    attachmentTone: attachments.length ? 'ok' : 'missing',
+    attachments,
+    riskLabel: String(source?.riskLabel || '').trim() || '无',
+    riskText,
+    riskTone: String(source?.riskTone || '').trim() || 'low'
+  }
+}
+
+function rebuildExpenseItems(items, requestModel) {
+  return items.map((item, index) => buildExpenseItemViewModel(item, index, requestModel))
 }
 
 function buildExpenseDraftIssues(item) {
   const issues = []
+  const locationRequired = isLocationRequiredExpenseType(item.itemType)
 
   if (!isValidIsoDate(item.itemDate)) {
     issues.push('缺少日期')
@@ -101,7 +242,7 @@ function buildExpenseDraftIssues(item) {
   if (isPlaceholderValue(item.itemReason)) {
     issues.push('缺少说明')
   }
-  if (isPlaceholderValue(item.itemLocation)) {
+  if (locationRequired && isPlaceholderValue(item.itemLocation)) {
     issues.push('缺少地点')
   }
   if (!Number.isFinite(Number(item.itemAmount)) || Number(item.itemAmount) <= 0) {
@@ -116,6 +257,7 @@ function buildExpenseDraftIssues(item) {
 
 function buildDraftBlockingIssues(request, expenseItems) {
   const issues = []
+  const locationRequired = isLocationRequiredExpenseType(request.typeCode)
 
   if (isPlaceholderValue(request.profileName)) {
     issues.push('申请人未完善')
@@ -129,7 +271,7 @@ function buildDraftBlockingIssues(request, expenseItems) {
   if (isPlaceholderValue(request.reason)) {
     issues.push('报销事由未完善')
   }
-  if (isPlaceholderValue(request.location)) {
+  if (locationRequired && isPlaceholderValue(request.location)) {
     issues.push('业务地点未完善')
   }
   if (isPlaceholderValue(request.occurredDisplay)) {
@@ -151,6 +293,66 @@ function buildDraftBlockingIssues(request, expenseItems) {
   return [...new Set(issues)]
 }
 
+function mapIssueToAdvice(issue) {
+  const text = String(issue || '').trim()
+  if (!text) {
+    return ''
+  }
+
+  if (text === '费用明细不能为空') {
+    return '先新增至少 1 条费用明细，再补充金额、用途和附件。'
+  }
+  if (text === '申请人未完善') {
+    return '补充申请人信息，确保审批单据归属明确。'
+  }
+  if (text === '所属部门未完善') {
+    return '补充所属部门，便于财务和审批人识别成本归属。'
+  }
+  if (text === '报销类型未完善') {
+    return '选择报销类型，明确本次费用归类。'
+  }
+  if (text === '报销事由未完善') {
+    return '补充报销事由，说明本次费用用途。'
+  }
+  if (text === '业务地点未完善') {
+    return '补充业务地点，方便审核业务发生场景。'
+  }
+  if (text === '发生时间未完善') {
+    return '补充费用发生时间，确保单据时间完整。'
+  }
+  if (text === '报销金额未完善') {
+    return '补充报销金额，并与费用明细金额保持一致。'
+  }
+
+  const itemMatch = text.match(/^费用明细第\s*(\d+)\s*条(.+)$/)
+  if (!itemMatch) {
+    return text
+  }
+
+  const [, indexText, fieldText] = itemMatch
+  const labelPrefix = `完善第 ${indexText} 条费用明细`
+  if (fieldText === '缺少日期') {
+    return `${labelPrefix}的发生日期。`
+  }
+  if (fieldText === '缺少费用项目') {
+    return `${labelPrefix}的费用项目。`
+  }
+  if (fieldText === '缺少说明') {
+    return `${labelPrefix}的用途说明。`
+  }
+  if (fieldText === '缺少地点') {
+    return `${labelPrefix}的业务地点。`
+  }
+  if (fieldText === '缺少金额') {
+    return `${labelPrefix}的金额。`
+  }
+  if (fieldText === '缺少票据标识') {
+    return `为第 ${indexText} 条费用明细上传或关联票据附件。`
+  }
+
+  return `${labelPrefix}。`
+}
+
 export default {
   name: 'TravelRequestDetailView',
   components: {
@@ -165,12 +367,24 @@ export default {
   emits: ['backToRequests', 'openAssistant', 'request-updated', 'request-deleted'],
   setup(props, { emit }) {
     const { toast } = useToast()
-    const expandedExpenseId = ref(null)
     const editingExpenseId = ref('')
     const savingExpenseId = ref('')
+    const creatingExpense = ref(false)
+    const uploadingExpenseId = ref('')
+    const deletingAttachmentId = ref('')
+    const deletingExpenseId = ref('')
+    const pendingUploadExpenseId = ref('')
     const submitBusy = ref(false)
     const deleteBusy = ref(false)
     const deleteDialogOpen = ref(false)
+    const expenseUploadInput = ref(null)
+    const expenseAttachmentMeta = reactive({})
+    const attachmentPreviewOpen = ref(false)
+    const attachmentPreviewLoading = ref(false)
+    const attachmentPreviewError = ref('')
+    const attachmentPreviewUrl = ref('')
+    const attachmentPreviewName = ref('')
+    const attachmentPreviewMediaType = ref('')
     const expenseEditor = reactive({
       itemDate: '',
       itemType: 'other',
@@ -217,7 +431,15 @@ export default {
 
     const isTravelRequest = computed(() => request.value.detailVariant === 'travel')
     const isDraftRequest = computed(() => request.value.approvalKey === 'draft')
-    const actionBusy = computed(() => Boolean(savingExpenseId.value) || submitBusy.value || deleteBusy.value)
+    const actionBusy = computed(() =>
+      Boolean(savingExpenseId.value)
+      || submitBusy.value
+      || deleteBusy.value
+      || creatingExpense.value
+      || Boolean(uploadingExpenseId.value)
+      || Boolean(deletingAttachmentId.value)
+      || Boolean(deletingExpenseId.value)
+    )
 
     const profile = computed(() => ({
       name: request.value.profileName,
@@ -229,22 +451,32 @@ export default {
 
     watch(
       request,
-      (nextRequest) => {
+      (nextRequest, previousRequest) => {
         expenseItems.value =
-          Array.isArray(nextRequest.expenseItems) && nextRequest.expenseItems.length
+          Array.isArray(nextRequest.expenseItems)
-            ? nextRequest.expenseItems
+            ? rebuildExpenseItems(nextRequest.expenseItems, nextRequest)
             : buildFallbackExpenseItems(nextRequest)
-        expandedExpenseId.value = null
+        if (nextRequest.claimId !== previousRequest?.claimId) {
+          Object.keys(expenseAttachmentMeta).forEach((key) => {
+            delete expenseAttachmentMeta[key]
+          })
+          closeAttachmentPreview()
+        }
+        pendingUploadExpenseId.value = ''
+        uploadingExpenseId.value = ''
+        deletingExpenseId.value = ''
         editingExpenseId.value = ''
+        void syncExpenseAttachmentMeta()
       },
       { immediate: true }
     )
 
     const heroStats = computed(() => [
       {
-        label: '金额',
+        label: '报销金额',
         value: request.value.amountDisplay,
-        kind: 'text'
+        kind: 'text',
+        emphasis: true
       },
       {
         label: '当前节点',
@@ -259,40 +491,15 @@ export default {
         kind: 'pill',
         className: 'approval-pill',
         tone: request.value.approvalTone
-      },
-      {
-        label: request.value.secondaryStatusLabel,
-        value: request.value.secondaryStatusValue,
-        kind: 'pill',
-        className: 'risk-pill',
-        tone: request.value.secondaryStatusTone
       }
     ])
 
     const heroSummaryItems = computed(() => {
-      const commonItems = [
-        { label: '单号', value: request.value.id, icon: 'mdi mdi-pound-box-outline' },
-        { label: '报销类型', value: request.value.typeLabel, icon: 'mdi mdi-tag-multiple' }
-      ]
-
-      if (isTravelRequest.value) {
-        return [
-          ...commonItems,
-          { label: '出行路线', value: request.value.sceneTarget, icon: 'mdi mdi-map-marker-path' },
-          { label: '出差区间', value: request.value.occurredDisplay, icon: 'mdi mdi-clock-outline' },
-          { label: '关联客户', value: request.value.relatedCustomer, icon: 'mdi mdi-domain' },
-          { label: '票据关联', value: request.value.attachmentSummary, icon: 'mdi mdi-file-document-multiple-outline' },
-          { label: '出差事由', value: request.value.reason, icon: 'mdi mdi-briefcase-outline' }
-        ]
-      }
-
       return [
-        ...commonItems,
+        { label: '单号', value: request.value.id, icon: 'mdi mdi-pound-box-outline' },
-        { label: '业务地点', value: request.value.sceneTarget, icon: 'mdi mdi-map-marker-outline' },
         { label: '发生时间', value: request.value.occurredDisplay, icon: 'mdi mdi-calendar-month-outline' },
-        { label: '关联客户', value: request.value.relatedCustomer, icon: 'mdi mdi-domain' },
+        { label: '费用明细', value: `${expenseItems.value.length} 条`, icon: 'mdi mdi-format-list-bulleted-square' },
-        { label: '票据关联', value: request.value.attachmentSummary, icon: 'mdi mdi-paperclip' },
+        { label: '申请时间', value: request.value.applyTime, icon: 'mdi mdi-timer-sand' }
-        { label: '风险提示', value: request.value.riskSummary, icon: 'mdi mdi-shield-alert-outline' }
       ]
     })
 
@@ -327,39 +534,198 @@ export default {
     })
 
     const uploadedExpenseCount = computed(() => expenseItems.value.filter((item) => item.attachments.length).length)
+    const hasExpenseRiskColumn = computed(() => expenseItems.value.some((item) => item.attachments.length))
+    const expenseTableColumnCount = computed(
+      () => 5 + (hasExpenseRiskColumn.value ? 1 : 0) + (isDraftRequest.value ? 1 : 0)
+    )
     const expenseSummaryText = computed(
       () => request.value.expenseTableSummary || '请继续补充票据、说明和系统校验结果。'
     )
     const detailNote = computed(
       () =>
         request.value.note
-        || (isTravelRequest.value
+        || '暂无附加说明。可在这里补充特殊背景、例外原因、补件计划或其他需要财务和审批人重点关注的信息。'
-          ? '该差旅报销单尚未补充完整说明，请继续完善后再提交审批。'
-          : '该报销单尚未补充完整说明，请继续完善后再提交审批。')
     )
     const draftBlockingIssues = computed(() =>
       isDraftRequest.value ? buildDraftBlockingIssues(request.value, expenseItems.value) : []
     )
     const canSubmit = computed(() => isDraftRequest.value && draftBlockingIssues.value.length === 0 && !actionBusy.value)
-    const validationTone = computed(() => (canSubmit.value ? 'ready' : 'pending'))
+    const locationInputPlaceholder = computed(() => resolveLocationInputPlaceholder(expenseEditor.itemType))
-    const validationSummary = computed(() =>
-      canSubmit.value
-        ? '当前草稿信息完整，可以提交审批。'
-        : '当前草稿仍有未完善字段，提交按钮会保持禁用。'
-    )
 
-    function toggleExpenseAttachments(id) {
+    function applyLocalExpenseItemPatch(itemId, patch) {
-      expandedExpenseId.value = expandedExpenseId.value === id ? null : id
+      expenseItems.value = rebuildExpenseItems(
+        expenseItems.value.map((item) => (item.id === itemId ? { ...item, ...patch } : item)),
+        request.value
+      )
+    }
+
+    function resolveAttachmentMeta(item) {
+      return expenseAttachmentMeta[item.id] || null
+    }
+
+    function resolveAttachmentDisplayName(item) {
+      const metadata = resolveAttachmentMeta(item)
+      return String(metadata?.file_name || item.attachmentHint || '').trim()
+    }
+
+    function buildAttachmentRiskNotice(attachment) {
+      const analysis = attachment?.analysis
+      const severity = String(analysis?.severity || '').trim()
+
+      if (!analysis || severity === 'pass') {
+        return ''
+      }
+
+      const label =
+        String(analysis?.label || '').trim()
+        || (severity === 'high' ? '高风险' : severity === 'medium' ? '中风险' : '低风险')
+      const summary = String(analysis?.summary || analysis?.headline || '').trim() || '附件存在待核对风险。'
+      return `${label}：${summary}`
+    }
+
+    async function refreshExpenseAttachmentMeta(itemId) {
+      if (!request.value.claimId || !itemId) {
+        return null
+      }
+
+      const payload = await fetchExpenseClaimItemAttachmentMeta(request.value.claimId, itemId)
+      expenseAttachmentMeta[itemId] = payload
+      return payload
+    }
+
+    function canPreviewAttachment(item) {
+      const metadata = resolveAttachmentMeta(item)
+      return Boolean(item.invoiceId && metadata?.previewable)
+    }
+
+    function revokeAttachmentPreviewUrl() {
+      if (attachmentPreviewUrl.value && attachmentPreviewUrl.value.startsWith('blob:')) {
+        URL.revokeObjectURL(attachmentPreviewUrl.value)
+      }
+      attachmentPreviewUrl.value = ''
+    }
+
+    function closeAttachmentPreview() {
+      attachmentPreviewOpen.value = false
+      attachmentPreviewLoading.value = false
+      attachmentPreviewError.value = ''
+      attachmentPreviewName.value = ''
+      attachmentPreviewMediaType.value = ''
+      revokeAttachmentPreviewUrl()
+    }
+
+    async function syncExpenseAttachmentMeta() {
+      if (!request.value.claimId) {
+        return
+      }
+
+      const tasks = expenseItems.value
+        .filter((item) => item.invoiceId)
+        .map(async (item) => {
+          try {
+            const payload = await fetchExpenseClaimItemAttachmentMeta(request.value.claimId, item.id)
+            expenseAttachmentMeta[item.id] = payload
+          } catch {
+            delete expenseAttachmentMeta[item.id]
+          }
+        })
+
+      Object.keys(expenseAttachmentMeta).forEach((itemId) => {
+        if (!expenseItems.value.some((item) => item.id === itemId && item.invoiceId)) {
+          delete expenseAttachmentMeta[itemId]
+        }
+      })
+
+      await Promise.allSettled(tasks)
     }
 
     function resolveExpenseIssues(item) {
       return buildExpenseDraftIssues(item)
     }
 
-    function showExpenseRisk(item) {
+    function resolveExpenseRiskState(item) {
-      return Boolean(resolveExpenseIssues(item).length || item.riskText)
+      if (!item.invoiceId) {
+        return null
+      }
+
+      if (uploadingExpenseId.value === item.id) {
+        return {
+          label: 'AI识别中',
+          tone: 'medium',
+          headline: 'AI提示：正在分析附件内容',
+          summary: '附件已上传，系统正在识别票据内容与风险点，请稍候。',
+          points: [],
+          suggestion: ''
+        }
+      }
+
+      const metadata = resolveAttachmentMeta(item)
+      const analysis = metadata?.analysis
+      if (analysis) {
+        return {
+          label: analysis.label || '已上传',
+          tone: analysis.severity === 'pass' ? 'pass' : analysis.severity || 'low',
+          headline: analysis.headline || 'AI提示',
+          summary: analysis.summary || '',
+          points: Array.isArray(analysis.points) ? analysis.points : [],
+          suggestion: analysis.suggestion || ''
+        }
+      }
+
+      return {
+        label: '已上传',
+        tone: 'low',
+        headline: 'AI提示：附件已上传',
+        summary: '附件已成功保存，当前可继续查看原图并人工核对票据内容。',
+        points: [],
+        suggestion: ''
+      }
     }
 
+    function showExpenseRisk(item) {
+      return Boolean(resolveExpenseRiskState(item))
+    }
+
+    const aiAdvice = computed(() => {
+      const completionItems = draftBlockingIssues.value.map(mapIssueToAdvice).filter(Boolean)
+      const riskItems = expenseItems.value
+        .map((item, index) => {
+          const state = resolveExpenseRiskState(item)
+          if (!state || !['medium', 'high'].includes(state.tone)) {
+            return ''
+          }
+
+          const adviceText = String(state.suggestion || state.summary || '').trim()
+          const prefix = state.tone === 'high' ? '优先整改' : '继续核对'
+          return `第 ${index + 1} 条附件需${prefix}：${adviceText || '请根据系统提示补充或更换附件。'}`
+        })
+        .filter(Boolean)
+
+      if (!completionItems.length && !riskItems.length) {
+        return {
+          tone: 'ready',
+          badge: '可直接提交',
+          summary: 'AI判断当前草稿已具备提交条件，可以直接发起审批。',
+          items: [
+            '点击右下角“提交审批”进入流程。',
+            '提交前再核对一次合计金额与各条费用明细金额是否一致。',
+            '如有特殊业务背景或例外情况，可在下方附加说明中补充。'
+          ]
+        }
+      }
+
+      const hasHighRisk = expenseItems.value.some((item) => resolveExpenseRiskState(item)?.tone === 'high')
+
+      return {
+        tone: hasHighRisk ? 'warning' : 'pending',
+        badge: hasHighRisk ? '优先整改' : '待补信息',
+        summary: completionItems.length
+          ? '建议先补齐必填信息，再处理附件核验项，完成后即可提交审批。'
+          : '草稿信息已基本齐全，建议先处理附件风险后再提交审批。',
+        items: [...completionItems, ...riskItems]
+      }
+    })
+
     function startExpenseEdit(item) {
       if (!isDraftRequest.value || actionBusy.value) {
         return
@@ -369,10 +735,10 @@ export default {
       expenseEditor.itemDate = item.itemDate || ''
       expenseEditor.itemType = item.itemType || 'other'
       expenseEditor.itemReason = item.itemReason || (item.desc === '待补充' ? '' : item.desc)
-      expenseEditor.itemLocation = item.itemLocation || (item.detail === '待补充' ? '' : item.detail)
+      expenseEditor.itemLocation =
+        item.itemLocation || (['待补充', '非必填'].includes(item.detail) ? '' : item.detail)
       expenseEditor.itemAmount = item.itemAmount ? String(item.itemAmount) : ''
       expenseEditor.invoiceId = item.invoiceId || ''
-      expandedExpenseId.value = null
     }
 
     function cancelExpenseEdit() {
@@ -389,7 +755,10 @@ export default {
       if (isPlaceholderValue(expenseEditor.itemReason)) {
         return '请输入费用说明。'
       }
-      if (isPlaceholderValue(expenseEditor.itemLocation)) {
+      if (
+        isLocationRequiredExpenseType(expenseEditor.itemType)
+        && isPlaceholderValue(expenseEditor.itemLocation)
+      ) {
         return '请输入业务地点。'
       }
 
@@ -397,11 +766,197 @@ export default {
       if (!Number.isFinite(amount) || amount <= 0) {
         return '请输入大于 0 的费用金额。'
       }
-      if (isPlaceholderValue(expenseEditor.invoiceId)) {
+      return ''
-        return '请输入票据标识或附件名称。'
+    }
+
+    async function handleAddExpenseItem() {
+      if (!isDraftRequest.value || actionBusy.value) {
+        return
       }
 
-      return ''
+      if (!request.value.claimId) {
+        toast('当前草稿缺少 claimId，暂时无法新增费用明细。')
+        return
+      }
+
+      creatingExpense.value = true
+      try {
+        const existingIds = new Set(expenseItems.value.map((item) => item.id))
+        const claim = await createExpenseClaimItem(request.value.claimId, {})
+        const createdItem = Array.isArray(claim?.items)
+          ? claim.items.find((entry) => !existingIds.has(String(entry?.id || '')))
+          : null
+
+        if (!createdItem) {
+          throw new Error('新增费用明细失败，请稍后重试。')
+        }
+
+        const nextItem = buildExpenseItemViewModel(createdItem, expenseItems.value.length, request.value)
+        expenseItems.value = rebuildExpenseItems([...expenseItems.value, nextItem], request.value)
+        creatingExpense.value = false
+        startExpenseEdit(nextItem)
+        toast('已新增一条费用明细，请继续填写。')
+      } catch (error) {
+        toast(error?.message || '新增费用明细失败，请稍后重试。')
+      } finally {
+        creatingExpense.value = false
+      }
+    }
+
+    function triggerExpenseUpload(item) {
+      if (!isDraftRequest.value || actionBusy.value) {
+        return
+      }
+
+      if (!request.value.claimId) {
+        toast('当前草稿缺少 claimId，暂时无法上传附件。')
+        return
+      }
+
+      pendingUploadExpenseId.value = item.id
+      if (expenseUploadInput.value) {
+        expenseUploadInput.value.value = ''
+        expenseUploadInput.value.click()
+      }
+    }
+
+    async function openAttachmentPreview(item) {
+      if (!request.value.claimId || !canPreviewAttachment(item)) {
+        return
+      }
+
+      closeAttachmentPreview()
+      attachmentPreviewOpen.value = true
+      attachmentPreviewLoading.value = true
+      attachmentPreviewName.value = resolveAttachmentDisplayName(item)
+      attachmentPreviewMediaType.value = String(resolveAttachmentMeta(item)?.media_type || '').trim()
+
+      try {
+        const blob = await fetchExpenseClaimItemAttachment(request.value.claimId, item.id)
+        revokeAttachmentPreviewUrl()
+        attachmentPreviewUrl.value = URL.createObjectURL(blob)
+        attachmentPreviewMediaType.value = blob.type || attachmentPreviewMediaType.value
+      } catch (error) {
+        attachmentPreviewError.value = error?.message || '附件预览失败，请稍后重试。'
+      } finally {
+        attachmentPreviewLoading.value = false
+      }
+    }
+
+    async function uploadExpenseFile(item, file) {
+      if (!item || !file) {
+        return
+      }
+
+      uploadingExpenseId.value = item.id
+
+      try {
+        const payload = await uploadExpenseClaimItemAttachment(request.value.claimId, item.id, file)
+        expenseAttachmentMeta[item.id] = payload?.attachment || null
+        applyLocalExpenseItemPatch(item.id, {
+          invoiceId: String(payload?.invoice_id || '').trim(),
+          attachmentHint: String(payload?.attachment?.file_name || file.name || '').trim()
+        })
+        if (editingExpenseId.value === item.id) {
+          expenseEditor.invoiceId = String(payload?.invoice_id || '').trim()
+        }
+
+        emit('request-updated', { claimId: request.value.claimId })
+        const riskNotice = buildAttachmentRiskNotice(payload?.attachment)
+        toast(riskNotice || payload?.message || `${file.name} 已关联到当前费用明细。`)
+      } catch (error) {
+        toast(error?.message || '附件上传失败，请稍后重试。')
+      } finally {
+        uploadingExpenseId.value = ''
+      }
+    }
+
+    async function removeExpenseAttachment(item) {
+      if (!request.value.claimId || !item?.invoiceId || actionBusy.value) {
+        return
+      }
+
+      deletingAttachmentId.value = item.id
+      try {
+        const payload = await deleteExpenseClaimItemAttachment(request.value.claimId, item.id)
+        delete expenseAttachmentMeta[item.id]
+        applyLocalExpenseItemPatch(item.id, {
+          invoiceId: '',
+          attachmentHint: resolveExpenseUploadHint()
+        })
+        if (editingExpenseId.value === item.id) {
+          expenseEditor.invoiceId = ''
+        }
+        if (attachmentPreviewOpen.value) {
+          closeAttachmentPreview()
+        }
+        emit('request-updated', { claimId: request.value.claimId })
+        toast(payload?.message || '附件已删除。')
+      } catch (error) {
+        toast(error?.message || '附件删除失败，请稍后重试。')
+      } finally {
+        deletingAttachmentId.value = ''
+      }
+    }
+
+    async function handleExpenseFileChange(event) {
+      const target = event?.target
+      const file = target?.files?.[0]
+      const itemId = pendingUploadExpenseId.value
+      pendingUploadExpenseId.value = ''
+
+      if (target) {
+        target.value = ''
+      }
+
+      if (!file || !itemId) {
+        return
+      }
+
+      const item = expenseItems.value.find((entry) => entry.id === itemId)
+      if (!item) {
+        toast('未找到对应的费用明细，请刷新后重试。')
+        return
+      }
+
+      await uploadExpenseFile(item, file)
+    }
+
+    async function removeExpenseItem(item) {
+      if (!request.value.claimId || !item?.id || actionBusy.value) {
+        return
+      }
+
+      deletingExpenseId.value = item.id
+      try {
+        const payload = await deleteExpenseClaimItem(request.value.claimId, item.id)
+        delete expenseAttachmentMeta[item.id]
+        expenseItems.value = rebuildExpenseItems(
+          expenseItems.value.filter((entry) => entry.id !== item.id),
+          request.value
+        )
+        if (editingExpenseId.value === item.id) {
+          editingExpenseId.value = ''
+          expenseEditor.itemDate = ''
+          expenseEditor.itemType = 'other'
+          expenseEditor.itemReason = ''
+          expenseEditor.itemLocation = ''
+          expenseEditor.itemAmount = ''
+          expenseEditor.invoiceId = ''
+        }
+        if (pendingUploadExpenseId.value === item.id) {
+          pendingUploadExpenseId.value = ''
+        }
+        if (attachmentPreviewOpen.value) {
+          closeAttachmentPreview()
+        }
+        emit('request-updated', { claimId: request.value.claimId })
+        toast(payload?.message || '费用明细已删除。')
+      } catch (error) {
+        toast(error?.message || '费用明细删除失败，请稍后重试。')
+      } finally {
+        deletingExpenseId.value = ''
+      }
     }
 
     async function saveExpenseEdit(item) {
@@ -418,16 +973,36 @@ export default {
 
       savingExpenseId.value = item.id
       try {
+        const nextInvoiceId = expenseEditor.invoiceId.trim()
         await updateExpenseClaimItem(request.value.claimId, item.id, {
           item_date: expenseEditor.itemDate,
           item_type: expenseEditor.itemType,
           item_reason: expenseEditor.itemReason.trim(),
           item_location: expenseEditor.itemLocation.trim(),
           item_amount: Number(expenseEditor.itemAmount),
-          invoice_id: expenseEditor.invoiceId.trim()
+          invoice_id: nextInvoiceId
         })
+        applyLocalExpenseItemPatch(item.id, {
+          itemDate: expenseEditor.itemDate,
+          itemType: expenseEditor.itemType,
+          itemReason: expenseEditor.itemReason.trim(),
+          itemLocation: expenseEditor.itemLocation.trim(),
+          itemAmount: Number(expenseEditor.itemAmount),
+          invoiceId: nextInvoiceId
+        })
+        let riskNotice = ''
+        if (nextInvoiceId) {
+          try {
+            const attachment = await refreshExpenseAttachmentMeta(item.id)
+            riskNotice = buildAttachmentRiskNotice(attachment)
+          } catch {
+            delete expenseAttachmentMeta[item.id]
+          }
+        } else {
+          delete expenseAttachmentMeta[item.id]
+        }
         editingExpenseId.value = ''
-        toast('费用明细已保存。')
+        toast(riskNotice || '费用明细已保存。')
         emit('request-updated', { claimId: request.value.claimId })
       } catch (error) {
         toast(error?.message || '费用明细保存失败，请稍后重试。')
@@ -503,43 +1078,68 @@ export default {
       })
     }
 
+    onBeforeUnmount(() => {
+      closeAttachmentPreview()
+    })
+
     return {
       emit,
       actionBusy,
+      aiAdvice,
+      attachmentPreviewError,
+      attachmentPreviewLoading,
+      attachmentPreviewMediaType,
+      attachmentPreviewName,
+      attachmentPreviewOpen,
+      attachmentPreviewUrl,
       canSubmit,
+      canPreviewAttachment,
       closeDeleteDialog,
+      closeAttachmentPreview,
       confirmDeleteDraft,
       currentProgressRingMotion,
       deleteBusy,
       deleteDialogOpen,
+      deletingAttachmentId,
+      deletingExpenseId,
       detailNote,
       draftBlockingIssues,
       editingExpenseId,
+      creatingExpense,
       expenseEditor,
       expenseItems,
       expenseSummaryText,
+      expenseTableColumnCount,
       expenseTotal,
-      expandedExpenseId,
+      expenseUploadInput,
       expenseTypeOptions: EXPENSE_TYPE_OPTIONS,
+      handleAddExpenseItem,
       handleDeleteDraft,
+      handleExpenseFileChange,
       handleSubmit,
+      hasExpenseRiskColumn,
       heroStats,
       heroSummaryItems,
       isDraftRequest,
       isTravelRequest,
+      locationInputPlaceholder,
       openAiEntry,
+      openAttachmentPreview,
       profile,
       progressSteps,
+      removeExpenseItem,
       request,
+      removeExpenseAttachment,
+      resolveAttachmentDisplayName,
+      resolveExpenseRiskState,
       resolveExpenseIssues,
       savingExpenseId,
       showExpenseRisk,
       startExpenseEdit,
       submitBusy,
-      toggleExpenseAttachments,
+      triggerExpenseUpload,
       uploadedExpenseCount,
-      validationSummary,
+      uploadingExpenseId,
-      validationTone,
       cancelExpenseEdit,
       saveExpenseEdit
     }