feat: 引入 ECharts 统一图表并完善员工画像标签分页

后端优化员工行为画像服务和辅助函数，完善系统设置模型和
配置持久化，前端引入 ECharts 替换所有图表组件实现统一
渲染，新增员工画像标签分页器和数字员工工作记录组件，优
化工作台响应式布局和登录页过渡动画，完善预算中心和数字
员工页面样式细节。

web/src/components/business/ExpenseProfileDetailModal.vue

@@ -17,15 +17,15 @@
     <template #header>
       <header class="profile-dialog-header">
         <div class="profile-dialog-title-block">
-          <span class="profile-dialog-eyebrow">Expense Behavior Profile</span>
-          <h2 id="expense-profile-modal-title">{{ userName }}的费用画像详情</h2>
-          <p>基于近 30 天费用操作、AI 协作、提单效率和预审质量形成。</p>
+          <span class="profile-dialog-eyebrow">User Behavior Profile</span>
+          <h2 id="expense-profile-modal-title">{{ userName }}的用户画像详情</h2>
+          <p>基于真实费用操作、AI 协作、流程质量和审核行为形成。</p>
         </div>
 
         <ElButton
           class="profile-dialog-close"
           text
-          aria-label="关闭费用画像详情"
+          aria-label="关闭用户画像详情"
           @click="emitClose"
         >
           <i class="mdi mdi-close"></i>
@@ -33,8 +33,13 @@
       </header>
     </template>
 
-    <section class="profile-dialog-content" aria-label="费用画像分析">
-      <section class="profile-summary-grid" aria-label="画像核心指标">
+    <section class="profile-dialog-content" aria-label="用户画像分析">
+      <div v-if="profileStatusText" :class="['profile-dialog-alert', profileStatusTone]">
+        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-information-outline'"></i>
+        <span>{{ profileStatusText }}</span>
+      </div>
+
+      <section v-if="metrics.length" class="profile-summary-grid" aria-label="画像核心指标">
         <article v-for="metric in metrics" :key="metric.key" class="profile-summary-item">
           <span>{{ metric.label }}</span>
           <strong>{{ metric.value }}<small>{{ metric.unit }}</small></strong>
@@ -51,48 +56,43 @@
             </div>
           </div>
 
-          <div class="profile-tag-list">
-            <article
-              v-for="tag in tags"
-              :key="tag.code"
-              :class="['profile-tag-item', `profile-tag-item--${tag.tone}`]"
-            >
-              <div class="profile-tag-copy">
-                <strong>{{ tag.displayLabel || tag.label }}</strong>
-                <span>{{ tag.reason }}</span>
-              </div>
-              <ElTag
-                class="profile-score-tag"
-                :type="resolveProfileTagType(tag.tone)"
-                effect="light"
-              >
-                {{ tag.score }}
-              </ElTag>
-            </article>
-          </div>
+          <ExpenseProfileTagPager v-if="tags.length" :tags="tags" :visible="visible" />
+          <p v-else class="profile-panel-empty">暂无可展示的画像标签。</p>
         </section>
 
         <section class="profile-panel profile-radar-panel" aria-label="行为雷达图">
           <div class="profile-section-title">
             <div>
               <span>行为雷达</span>
-              <small>使用项目图表组件组织，分数越高特征越明显</small>
+              <small>分数越高，行为特征越明显</small>
             </div>
           </div>
 
-          <div class="profile-radar-layout">
+          <div v-if="radarDimensions.length" class="profile-radar-layout">
             <RadarChart
+              :key="radarRenderKey"
               class="profile-radar-chart"
               :items="radarDimensions"
-              label="费用画像评分"
+              label="用户画像评分"
             />
+          </div>
+          <p v-else class="profile-panel-empty profile-radar-empty">暂无可展示的雷达维度。</p>
 
-            <ul class="profile-radar-list">
-              <li v-for="dimension in radarDimensions" :key="dimension.code">
-                <span>{{ dimension.label }}</span>
-                <strong>{{ dimension.score }}</strong>
-              </li>
-            </ul>
+          <div v-if="tags.length" class="profile-behavior-tags" aria-label="行为标签">
+            <span class="profile-behavior-tags-title">行为标签：</span>
+            <div class="profile-behavior-tag-list">
+              <span
+                v-for="tag in tags"
+                :key="`behavior-${tag.code}`"
+                :class="[
+                  'profile-behavior-tag',
+                  `profile-behavior-tag--${tag.tone}`,
+                  `profile-behavior-tag--accent-${tag.colorIndex || 0}`
+                ]"
+              >
+                {{ tag.label || tag.displayLabel }}
+              </span>
+            </div>
           </div>
         </section>
       </div>
@@ -105,7 +105,7 @@
           </div>
         </div>
 
-        <div class="profile-operation-list">
+        <div v-if="operations.length" class="profile-operation-list">
           <article v-for="operation in operations" :key="operation.id" class="profile-operation-row">
             <time>{{ operation.time }}</time>
             <div class="profile-operation-copy">
@@ -121,24 +121,23 @@
             </ElTag>
           </article>
         </div>
+        <p v-else class="profile-panel-empty">暂无最近操作记录。</p>
       </section>
     </section>
 
     <template #footer>
       <footer class="profile-dialog-footer">
         <span>画像仅用于辅助分析，不作为自动审批或处罚依据。</span>
-        <ElButton class="profile-dialog-explain" type="primary" @click="emitExplain">
-          <i class="mdi mdi-robot-outline"></i>
-          <span>让 AI 解读画像</span>
-        </ElButton>
       </footer>
     </template>
   </ElDialog>
 </template>
 
 <script setup>
+import { computed, nextTick, ref, watch } from 'vue'
 import { ElButton, ElDialog, ElTag } from 'element-plus'
 
+import ExpenseProfileTagPager from './ExpenseProfileTagPager.vue'
 import RadarChart from '../charts/RadarChart.vue'
 
 const props = defineProps({
@@ -147,36 +146,47 @@ const props = defineProps({
   metrics: { type: Array, default: () => [] },
   tags: { type: Array, default: () => [] },
   radarDimensions: { type: Array, default: () => [] },
-  operations: { type: Array, default: () => [] }
+  operations: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+  errorMessage: { type: String, default: '' },
+  emptyReason: { type: String, default: '' }
 })
 
-const emit = defineEmits(['close', 'explain'])
+const emit = defineEmits(['close'])
+const radarRenderKey = ref(0)
 
 function emitClose() {
   emit('close')
 }
 
-function emitExplain() {
-  emit('explain')
-}
-
 function handleVisibleChange(value) {
   if (!value) {
     emitClose()
   }
 }
 
-function resolveProfileTagType(tone) {
-  const normalized = String(tone || '').trim()
+const profileStatusText = computed(() => {
+  if (props.loading) {
+    return '正在读取真实用户画像数据...'
+  }
+  if (props.errorMessage) {
+    return props.errorMessage
+  }
+  if (props.emptyReason) {
+    return props.emptyReason
+  }
+  return ''
+})
 
-  if (['warning', 'risk', 'amber'].includes(normalized)) {
-    return 'warning'
+const profileStatusTone = computed(() => {
+  if (props.errorMessage) {
+    return 'is-error'
   }
-  if (['danger', 'high'].includes(normalized)) {
-    return 'danger'
+  if (props.emptyReason) {
+    return 'is-empty'
   }
-  return 'primary'
-}
+  return 'is-loading'
+})
 
 function resolveOperationStatusType(tone) {
   const normalized = String(tone || '').trim()
@@ -192,6 +202,27 @@ function resolveOperationStatusType(tone) {
   }
   return 'info'
 }
+
+function scheduleRadarFrame(callback) {
+  if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(callback)
+    return
+  }
+  callback()
+}
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (!visible) {
+      return
+    }
+    await nextTick()
+    scheduleRadarFrame(() => {
+      radarRenderKey.value += 1
+    })
+  }
+)
 </script>
 
 <style scoped>
@@ -255,6 +286,7 @@ function resolveOperationStatusType(tone) {
 }
 
 .profile-dialog-footer {
+  justify-content: flex-start;
   border-top: 1px solid #e2e8f0;
 }
 
@@ -313,6 +345,31 @@ function resolveOperationStatusType(tone) {
   background: #f8fafc;
 }
 
+.profile-dialog-alert {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 11px;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 4px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.profile-dialog-alert.is-error {
+  border-color: rgba(220, 38, 38, 0.24);
+  background: #fff7f7;
+  color: #b91c1c;
+}
+
+.profile-dialog-alert.is-empty {
+  border-color: rgba(245, 158, 11, 0.28);
+  background: #fffaf0;
+  color: #92400e;
+}
+
 .profile-summary-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -320,8 +377,7 @@ function resolveOperationStatusType(tone) {
 }
 
 .profile-summary-item,
-.profile-panel,
-.profile-tag-item {
+.profile-panel {
   border: 1px solid #e2e8f0;
   border-radius: 4px;
   background: #ffffff;
@@ -380,6 +436,18 @@ function resolveOperationStatusType(tone) {
   padding: 12px;
 }
 
+.profile-tags-panel {
+  grid-template-rows: auto minmax(0, 1fr);
+  align-content: start;
+  min-height: 352px;
+}
+
+.profile-radar-panel {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  align-content: start;
+  min-height: 352px;
+}
+
 .profile-section-title {
   display: flex;
   align-items: center;
@@ -399,35 +467,30 @@ function resolveOperationStatusType(tone) {
   font-weight: 850;
 }
 
-.profile-tag-list,
 .profile-operation-list {
   display: grid;
   gap: 8px;
 }
 
-.profile-tag-item {
+.profile-panel-empty {
+  margin: 0;
+  padding: 18px 12px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 4px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 700;
+  text-align: center;
+}
+
+.profile-radar-empty {
+  min-height: 308px;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 10px;
-  transition:
-    border-color 180ms var(--ease),
-    background-color 180ms var(--ease);
+  place-items: center;
 }
 
-.profile-tag-item:hover {
-  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
-  background: #fbfdff;
-}
-
-.profile-tag-copy {
-  min-width: 0;
-  display: grid;
-  gap: 3px;
-}
-
-.profile-tag-copy strong,
 .profile-operation-copy strong {
   overflow: hidden;
   color: #0f172a;
@@ -437,16 +500,6 @@ function resolveOperationStatusType(tone) {
   white-space: nowrap;
 }
 
-.profile-tag-copy span {
-  overflow: hidden;
-  color: #64748b;
-  font-size: 11.5px;
-  line-height: 1.4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.profile-score-tag,
 .profile-operation-status {
   border-radius: 4px;
   font-weight: 800;
@@ -454,39 +507,105 @@ function resolveOperationStatusType(tone) {
 
 .profile-radar-layout {
   display: grid;
-  grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.72fr);
+  grid-template-columns: minmax(0, 1fr);
   align-items: center;
-  gap: 14px;
+  justify-items: stretch;
+  min-height: 360px;
+  animation: profileRadarEnter 360ms cubic-bezier(0.2, 0, 0, 1) both;
 }
 
 .profile-radar-chart {
-  height: 260px;
+  width: 100%;
+  height: 360px;
 }
 
-.profile-radar-list {
+.profile-behavior-tags {
   display: grid;
-  gap: 7px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid #e8eef5;
 }
 
-.profile-radar-list li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.profile-radar-list strong {
+.profile-behavior-tags-title {
   color: #0f172a;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 850;
 }
 
+.profile-behavior-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.profile-behavior-tag {
+  --behavior-tag-rgb: 58, 124, 165;
+  --behavior-tag-text: #235d7e;
+  max-width: 132px;
+  overflow: hidden;
+  padding: 4px 9px;
+  border: 1px solid rgba(var(--behavior-tag-rgb), 0.24);
+  border-radius: 999px;
+  background: rgba(var(--behavior-tag-rgb), 0.08);
+  color: var(--behavior-tag-text);
+  font-size: 11.5px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  animation: profileBehaviorTagIn 260ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.profile-behavior-tag--risk {
+  --behavior-tag-rgb: 245, 158, 11;
+  --behavior-tag-text: #92400e;
+}
+
+.profile-behavior-tag--positive {
+  --behavior-tag-rgb: 16, 185, 129;
+  --behavior-tag-text: #047857;
+}
+
+.profile-behavior-tag--accent-0 {
+  --behavior-tag-rgb: 58, 124, 165;
+  --behavior-tag-text: #235d7e;
+}
+
+.profile-behavior-tag--accent-1 {
+  --behavior-tag-rgb: 15, 159, 143;
+  --behavior-tag-text: #0f766e;
+}
+
+.profile-behavior-tag--accent-2 {
+  --behavior-tag-rgb: 245, 158, 11;
+  --behavior-tag-text: #92400e;
+}
+
+.profile-behavior-tag--accent-3 {
+  --behavior-tag-rgb: 124, 58, 237;
+  --behavior-tag-text: #5b21b6;
+}
+
+.profile-behavior-tag--accent-4 {
+  --behavior-tag-rgb: 220, 38, 38;
+  --behavior-tag-text: #991b1b;
+}
+
+.profile-behavior-tag--accent-5 {
+  --behavior-tag-rgb: 37, 99, 235;
+  --behavior-tag-text: #1d4ed8;
+}
+
+.profile-behavior-tag--accent-6 {
+  --behavior-tag-rgb: 22, 163, 74;
+  --behavior-tag-text: #15803d;
+}
+
+.profile-behavior-tag--accent-7 {
+  --behavior-tag-rgb: 219, 39, 119;
+  --behavior-tag-text: #be185d;
+}
+
 .profile-operation-row {
   display: grid;
   grid-template-columns: 88px minmax(0, 1fr) auto;
@@ -511,16 +630,6 @@ function resolveOperationStatusType(tone) {
   justify-self: end;
 }
 
-.profile-dialog-explain {
-  min-height: 32px;
-  border-radius: 4px;
-  font-weight: 800;
-}
-
-.profile-dialog-explain i {
-  margin-right: 6px;
-}
-
 @keyframes expenseProfileDialogIn {
   0% {
     opacity: 0;
@@ -533,6 +642,30 @@ function resolveOperationStatusType(tone) {
   }
 }
 
+@keyframes profileRadarEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes profileBehaviorTagIn {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes expenseProfileDialogOut {
   0% {
     opacity: 1;
@@ -583,7 +716,9 @@ function resolveOperationStatusType(tone) {
 
 @media (prefers-reduced-motion: reduce) {
   :global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog),
-  :global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
+  :global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog),
+  .profile-radar-layout,
+  .profile-behavior-tag {
     animation-duration: 1ms !important;
   }
 }