feat: 新增预算费控模型与报销审批流引擎

后端新增预算费控服务和报销单审批流模块，引入申请人费用画像算法，优化知识库 RAG 运行时和同步逻辑，完善报销单工作流常量和明细同步，更新差旅报销规则电子表格，前端新增预算分析组件和数字员工模型，完善审批对话框和洞察面板交互，优化侧边栏和顶栏样式，补充单元测试。
2026-05-27 17:31:27 +08:00
parent cbb98f4469
commit d4d5d40569
75 changed files with 5393 additions and 686 deletions
--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -9,33 +9,52 @@
        </svg>
      </div>
      <strong class="brand-name">{{ displayCompanyName }}</strong>
-      <button
-        class="rail-collapse-btn"
-        type="button"
-        :aria-label="collapsed ? '展开侧边栏' : '折叠侧边栏'"
-        :title="collapsed ? '展开侧边栏' : '折叠侧边栏'"
-        :aria-expanded="!collapsed"
-        @click="emit('toggle-collapse')"
+      <ElTooltip
+        :content="collapseTooltipContent"
+        placement="right"
+        effect="light"
+        :show-after="180"
+        :hide-after="0"
+        :offset="12"
+        popper-class="rail-tooltip-popper"
      >
-        <i :class="collapsed ? 'mdi mdi-chevron-right' : 'mdi mdi-chevron-left'"></i>
-      </button>
+        <button
+          class="rail-collapse-btn"
+          type="button"
+          :aria-label="collapseTooltipContent"
+          :aria-expanded="!collapsed"
+          @click="emit('toggle-collapse')"
+        >
+          <i :class="collapsed ? 'mdi mdi-chevron-right' : 'mdi mdi-chevron-left'"></i>
+        </button>
+      </ElTooltip>
    </div>

    <nav class="rail-nav" aria-label="功能导航">
-      <button
+      <ElTooltip
        v-for="item in decoratedNavItems"
        :key="item.id"
-        class="nav-btn"
-        :class="{ active: activeView === item.id }"
-        type="button"
-        :title="collapsed ? item.displayLabel : undefined"
-        @click="emit('navigate', item.id)"
+        :content="item.displayLabel"
+        placement="right"
+        effect="light"
+        :disabled="!collapsed"
+        :show-after="180"
+        :hide-after="0"
+        :offset="12"
+        popper-class="rail-tooltip-popper"
      >
-        <span class="nav-icon" v-html="item.icon"></span>
-        <span class="nav-label">{{ item.displayLabel }}</span>
-        <span v-if="item.hasNewMessage" class="nav-unread-dot" aria-hidden="true"></span>
-        <span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
-      </button>
+        <button
+          class="nav-btn"
+          :class="{ active: activeView === item.id }"
+          type="button"
+          @click="emit('navigate', item.id)"
+        >
+          <span class="nav-icon" v-html="item.icon"></span>
+          <span class="nav-label">{{ item.displayLabel }}</span>
+          <span v-if="item.hasNewMessage" class="nav-unread-dot" aria-hidden="true"></span>
+          <span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
+        </button>
+      </ElTooltip>
    </nav>

    <div
@@ -69,19 +88,31 @@
        </div>
      </Teleport>

-      <div class="user-summary" tabindex="0" aria-label="用户信息" :title="collapsed ? displayUser.name : undefined">
-        <span class="user-avatar">{{ displayUser.avatar }}</span>
-        <span class="user-copy">
-          <strong>{{ displayUser.name }}</strong>
-          <span>{{ displayUser.role }}</span>
-        </span>
-        <i class="mdi mdi-chevron-up"></i>
-      </div>
+      <ElTooltip
+        :content="userTooltipContent"
+        placement="top"
+        effect="light"
+        :disabled="!collapsed"
+        :show-after="180"
+        :hide-after="0"
+        :offset="10"
+        popper-class="rail-tooltip-popper"
+      >
+        <div class="user-summary" tabindex="0" :aria-label="userTooltipContent">
+          <span class="user-avatar">{{ displayUser.avatar }}</span>
+          <span class="user-copy">
+            <strong>{{ displayUser.name }}</strong>
+            <span>{{ displayUser.role }}</span>
+          </span>
+          <i class="mdi mdi-chevron-up"></i>
+        </div>
+      </ElTooltip>
    </div>
  </aside>
 </template>

 <script setup>
+import { ElTooltip } from 'element-plus'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'

 import { useDocumentCenterInbox } from '../../composables/useDocumentCenterInbox.js'
@@ -154,6 +185,8 @@ const displayUser = computed(() => ({
 }))

 const displayCompanyName = computed(() => props.companyName || 'X-Financial')
+const collapseTooltipContent = computed(() => (props.collapsed ? '展开侧边栏' : '折叠侧边栏'))
+const userTooltipContent = computed(() => [displayUser.value.name, displayUser.value.role].filter(Boolean).join(' · '))

 const userMenuOpen = ref(false)
 let userMenuCloseTimer = null
--- a/web/src/components/layout/TopBar.vue
+++ b/web/src/components/layout/TopBar.vue
@@ -91,7 +91,7 @@
            class="detail-alert-pill"
            :class="alert.tone"
          >
-            <i class="mdi mdi-alert-circle-outline"></i>
+            <i :class="alert.icon || 'mdi mdi-alert-circle-outline'"></i>
            <span>{{ alert.label }}</span>
          </span>
        </div>
--- a/web/src/components/shared/ReturnReasonDialog.vue
+++ b/web/src/components/shared/ReturnReasonDialog.vue
@@ -22,14 +22,15 @@
          <label
            v-for="option in options"
            :key="option.code"
-            :class="['return-reason-option', { active: selectedCodes.includes(option.code) }]"
+            :class="['return-reason-option', { active: isOptionActive(option.code) }]"
          >
            <input
-              v-model="selectedCodes"
-              type="checkbox"
+              :type="application ? 'radio' : 'checkbox'"
+              :name="application ? 'application-return-reason' : undefined"
+              :checked="isOptionActive(option.code)"
              :value="option.code"
              :disabled="busy"
-              @change="handleOptionChange"
+              @change="handleOptionChange(option)"
            />
            <i :class="option.icon"></i>
            <strong>{{ option.label }}</strong>
@@ -99,6 +100,12 @@ const APPLICATION_RETURN_REASON_OPTIONS = [
    label: '前置材料需补充',
    icon: 'mdi mdi-file-document-plus-outline',
    defaultReason: '请补充会议通知、客户邀约、项目安排或其他能支撑申请必要性的材料。'
+  },
+  {
+    code: 'application_other',
+    label: '其他',
+    icon: 'mdi mdi-pencil-box-outline',
+    defaultReason: ''
  }
 ]

@@ -117,12 +124,18 @@ const props = defineProps({
 const emit = defineEmits(['close', 'confirm'])

 const selectedCodes = ref([])
+const selectedApplicationCode = ref('')
 const reasonText = ref('')
 const touched = ref(false)
 const selectionTouched = ref(false)
 const lastAutoReason = ref('')

 const options = computed(() => (props.application ? APPLICATION_RETURN_REASON_OPTIONS : CLAIM_RETURN_REASON_OPTIONS))
+const selectedReasonCodes = computed(() => (
+  props.application
+    ? (selectedApplicationCode.value ? [selectedApplicationCode.value] : [])
+    : selectedCodes.value
+))
 const dialogBadge = computed(() => (props.application ? '退回申请' : '退回单据'))
 const optionsTitle = computed(() => (props.application ? '退单选项' : '默认风险点'))
 const optionsAriaLabel = computed(() => (props.application ? '申请退单选项' : '默认退回风险点'))
@@ -133,10 +146,10 @@ const reasonPlaceholder = computed(() => (
 ))
 const trimmedReason = computed(() => reasonText.value.trim())
 const selectionError = computed(() => {
-  if (!props.application || !selectionTouched.value || selectedCodes.value.length > 0) {
+  if (!props.application || !selectionTouched.value || selectedReasonCodes.value.length > 0) {
    return ''
  }
-  return '请选择至少一个退单选项，便于后续看板统计。'
+  return '请选择一个退单选项，便于后续看板统计。'
 })
 const reasonError = computed(() => {
  if (!touched.value || trimmedReason.value.length >= 6) {
@@ -159,6 +172,7 @@ watch(
  (open) => {
    if (open) {
      selectedCodes.value = []
+      selectedApplicationCode.value = ''
      reasonText.value = ''
      touched.value = false
      selectionTouched.value = false
@@ -167,25 +181,35 @@ watch(
  }
 )

-watch(selectedCodes, () => {
-  if (!props.application) {
-    return
-  }
-
-  const defaultReason = selectedCodes.value
-    .map((code) => options.value.find((option) => option.code === code)?.defaultReason || '')
-    .filter(Boolean)
-    .join('\n')
-
+function syncApplicationDefaultReason(option) {
+  const defaultReason = String(option?.defaultReason || '').trim()
  const canAutoFill = !touched.value || !reasonText.value.trim() || reasonText.value === lastAutoReason.value
  if (canAutoFill) {
    reasonText.value = defaultReason
  }
  lastAutoReason.value = defaultReason
-})
+}

-function handleOptionChange() {
+function isOptionActive(code) {
+  return props.application ? selectedApplicationCode.value === code : selectedCodes.value.includes(code)
+}
+
+function handleOptionChange(option) {
  selectionTouched.value = true
+
+  if (props.application) {
+    selectedApplicationCode.value = option.code
+    syncApplicationDefaultReason(option)
+    return
+  }
+
+  const selected = new Set(selectedCodes.value)
+  if (selected.has(option.code)) {
+    selected.delete(option.code)
+  } else {
+    selected.add(option.code)
+  }
+  selectedCodes.value = Array.from(selected)
 }

 function handleClose() {
@@ -197,13 +221,13 @@ function handleClose() {
 function handleConfirm() {
  touched.value = true
  selectionTouched.value = true
-  if ((props.application && selectedCodes.value.length === 0) || trimmedReason.value.length < 6 || props.busy) {
+  if ((props.application && selectedReasonCodes.value.length === 0) || trimmedReason.value.length < 6 || props.busy) {
    return
  }

  emit('confirm', {
    reason: trimmedReason.value,
-    reason_codes: [...selectedCodes.value]
+    reason_codes: [...selectedReasonCodes.value]
  })
 }
 </script>
--- a/web/src/components/travel/TravelReimbursementInsightPanel.vue
+++ b/web/src/components/travel/TravelReimbursementInsightPanel.vue
@@ -16,6 +16,7 @@
        </div>
        <div v-else class="review-insight-title-row">
          <div class="review-insight-title-copy">
+            <i v-if="!ui.activeReviewPayload && ui.isReviewFlowDrawer" :class="ui.reviewFlowDrawerIcon" class="title-icon"></i>
            <h3>{{ ui.reviewDrawerTitle }}</h3>
          </div>
        </div>
@@ -23,7 +24,7 @@
        <p v-if="!ui.activeReviewPayload && !ui.isReviewFlowDrawer">{{ ui.currentInsight.summary }}</p>
      </div>

-      <div v-if="ui.activeReviewPayload || ui.isReviewFlowDrawer" class="review-insight-tools">
+      <div v-if="ui.activeReviewPayload" class="review-insight-tools">
        <button
          v-if="ui.activeReviewPayload && ui.reviewOverviewDrawerAvailable"
          type="button"
--- a/web/src/components/travel/TravelRequestApprovalDialog.vue
+++ b/web/src/components/travel/TravelRequestApprovalDialog.vue
@@ -14,21 +14,6 @@
    @close="emit('close')"
    @confirm="emit('confirm')"
  >
-    <div class="submit-confirm-summary" aria-label="领导审批通过摘要">
-      <div class="submit-confirm-row">
-        <span>单据编号</span>
-        <strong>{{ documentNo }}</strong>
-      </div>
-      <div class="submit-confirm-row">
-        <span>当前节点</span>
-        <strong>{{ node }}</strong>
-      </div>
-      <div class="submit-confirm-row">
-        <span>{{ summaryLabel }}</span>
-        <strong>{{ nextStage }}</strong>
-      </div>
-    </div>
-
    <label class="approval-opinion-field">
      <span>
        {{ opinionTitle }}
@@ -64,10 +49,6 @@ const props = defineProps({
  confirmText: { type: String, required: true },
  busyText: { type: String, required: true },
  busy: { type: Boolean, required: true },
-  documentNo: { type: [String, Number], required: true },
-  node: { type: String, default: '' },
-  summaryLabel: { type: String, required: true },
-  nextStage: { type: String, required: true },
  opinionTitle: { type: String, required: true },
  opinion: { type: String, default: '' },
  opinionPlaceholder: { type: String, default: '' },
--- a/web/src/components/travel/TravelRequestBudgetAnalysis.vue
+++ b/web/src/components/travel/TravelRequestBudgetAnalysis.vue
@@ -0,0 +1,293 @@
+<template>
+  <section class="application-budget-analysis" aria-label="预算分析">
+    <div class="application-budget-analysis__head">
+      <span><i class="mdi mdi-chart-donut"></i>预算分析</span>
+      <strong v-if="analysis && !loading">{{ scoreLabel }}</strong>
+    </div>
+
+    <div v-if="loading" class="application-budget-analysis__state">正在读取预算管控模型...</div>
+    <div v-else-if="error" class="application-budget-analysis__state danger">{{ error }}</div>
+    <div v-else-if="analysis" class="application-budget-analysis__body">
+      <div class="application-budget-analysis__metrics">
+        <article v-for="metric in metrics" :key="metric.key">
+          <span>{{ metric.label }}</span>
+          <strong>{{ metric.value }}</strong>
+        </article>
+      </div>
+
+      <div class="application-budget-analysis__summary">
+        <div :class="['application-budget-score', analysis.risk_level || 'low']">
+          <span>{{ analysis.score }}</span>
+          <em>综合评分</em>
+        </div>
+        <p>{{ analysis.summary }}</p>
+      </div>
+
+      <div class="application-budget-analysis__lists">
+        <div>
+          <span>规则依据</span>
+          <ul>
+            <li v-for="item in analysis.basis" :key="item">{{ item }}</li>
+          </ul>
+        </div>
+        <div>
+          <span>模型建议</span>
+          <ul>
+            <li v-for="item in analysis.suggestions" :key="item">{{ item }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+import { fetchExpenseClaimBudgetAnalysis } from '../../services/reimbursements.js'
+
+const props = defineProps({
+  claimId: { type: String, default: '' }
+})
+
+const analysis = ref(null)
+const loading = ref(false)
+const error = ref('')
+
+const scoreLabel = computed(() => {
+  const labels = {
+    recommended: '建议通过',
+    caution: '谨慎通过',
+    review: '需要复核',
+    block: '不建议直接通过',
+    reference: '参考口径'
+  }
+  return labels[String(analysis.value?.rating || '').trim()] || '模型建议'
+})
+
+const metrics = computed(() => {
+  const metric = analysis.value?.metrics || {}
+  return [
+    { key: 'total', label: '当前预算额度', value: formatMoney(metric.total_amount) },
+    { key: 'ratio', label: '此次费用占预算', value: formatPercent(metric.claim_amount_ratio) },
+    { key: 'after', label: '审批后使用率', value: formatPercent(metric.after_usage_rate) },
+    { key: 'available', label: '当前可用预算', value: formatMoney(metric.available_amount) }
+  ]
+})
+
+watch(
+  () => props.claimId,
+  (claimId) => {
+    loadAnalysis(claimId)
+  },
+  { immediate: true }
+)
+
+async function loadAnalysis(claimId) {
+  const normalizedClaimId = String(claimId || '').trim()
+  analysis.value = null
+  error.value = ''
+  if (!normalizedClaimId) {
+    return
+  }
+
+  loading.value = true
+  try {
+    analysis.value = await fetchExpenseClaimBudgetAnalysis(normalizedClaimId)
+  } catch (err) {
+    error.value = err?.message || '预算分析加载失败，请稍后重试。'
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatMoney(value) {
+  const amount = Number(value)
+  if (!Number.isFinite(amount)) {
+    return '待匹配'
+  }
+  return `${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} 元`
+}
+
+function formatPercent(value) {
+  const amount = Number(value)
+  if (!Number.isFinite(amount)) {
+    return '0.00%'
+  }
+  return `${amount.toFixed(2)}%`
+}
+</script>
+
+<style scoped>
+.application-budget-analysis {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.application-budget-analysis__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.application-budget-analysis__head span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.application-budget-analysis__head i {
+  color: var(--theme-primary-active);
+  font-size: 18px;
+}
+
+.application-budget-analysis__head strong {
+  border-radius: 999px;
+  padding: 4px 10px;
+  background: rgba(var(--theme-primary-rgb), .1);
+  color: var(--theme-primary-active);
+  font-size: 12px;
+}
+
+.application-budget-analysis__state {
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.application-budget-analysis__state.danger {
+  background: #fff1f2;
+  color: #be123c;
+}
+
+.application-budget-analysis__body {
+  display: grid;
+  gap: 14px;
+}
+
+.application-budget-analysis__metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.application-budget-analysis__metrics article {
+  min-width: 0;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.application-budget-analysis__metrics span,
+.application-budget-analysis__lists span {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.application-budget-analysis__metrics strong {
+  display: block;
+  margin-top: 5px;
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.application-budget-analysis__summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  border-radius: 8px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+}
+
+.application-budget-analysis__summary p {
+  margin: 0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.application-budget-score {
+  display: grid;
+  place-items: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: #eef6ff;
+  color: #2563eb;
+}
+
+.application-budget-score.medium {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.application-budget-score.high {
+  background: #fff1f2;
+  color: #be123c;
+}
+
+.application-budget-score span {
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.application-budget-score em {
+  font-style: normal;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.application-budget-analysis__lists {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.application-budget-analysis__lists > div {
+  border-radius: 8px;
+  padding: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.application-budget-analysis__lists ul {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  color: #334155;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+@media (max-width: 900px) {
+  .application-budget-analysis__metrics,
+  .application-budget-analysis__lists {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .application-budget-analysis__metrics,
+  .application-budget-analysis__lists,
+  .application-budget-analysis__summary {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
+