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

后端优化员工行为画像服务和辅助函数，完善系统设置模型和配置持久化，前端引入 ECharts 替换所有图表组件实现统一渲染，新增员工画像标签分页器和数字员工工作记录组件，优化工作台响应式布局和登录页过渡动画，完善预算中心和数字员工页面样式细节。
2026-05-28 16:24:59 +08:00
parent 8a4a777be7
commit e384318046
53 changed files with 4698 additions and 2468 deletions
--- a/web/src/components/audit/DigitalEmployeeWorkRecords.vue
+++ b/web/src/components/audit/DigitalEmployeeWorkRecords.vue
@@ -0,0 +1,332 @@
+<template>
+  <section class="digital-work-records">
+    <header class="work-records-head">
+      <div>
+        <h3>工作记录</h3>
+        <p>查看数字员工近期执行记录、状态和结果摘要。</p>
+      </div>
+
+      <div class="work-records-kpis" aria-label="工作记录统计">
+        <article class="work-record-kpi">
+          <span>日志总数</span>
+          <strong>{{ totalCount }}</strong>
+        </article>
+        <article class="work-record-kpi success">
+          <span>成功数量</span>
+          <strong>{{ successCount }}</strong>
+        </article>
+        <article class="work-record-kpi danger">
+          <span>失败数量</span>
+          <strong>{{ failedCount }}</strong>
+        </article>
+      </div>
+    </header>
+
+    <div class="work-records-toolbar">
+      <span>{{ loading ? '正在同步工作记录' : `当前展示 ${visibleRuns.length} 条记录` }}</span>
+      <button type="button" :disabled="loading" @click="loadWorkRecords(true)">
+        <i class="mdi mdi-refresh"></i>
+        <span>{{ loading ? '刷新中...' : '刷新' }}</span>
+      </button>
+    </div>
+
+    <div class="table-wrap work-records-table-wrap" :class="{ 'is-empty': !loading && !runs.length }">
+      <div v-if="loading && !runs.length" class="table-state">
+        <TableLoadingState
+          variant="panel"
+          title="工作记录同步中"
+          message="正在读取数字员工近期执行记录"
+          icon="mdi mdi-clipboard-text-clock-outline"
+        />
+      </div>
+
+      <div v-else-if="errorMessage" class="table-state error">
+        <i class="mdi mdi-alert-circle-outline"></i>
+        <strong>工作记录加载失败</strong>
+        <p>{{ errorMessage }}</p>
+      </div>
+
+      <table v-else-if="runs.length" class="digital-work-records-table">
+        <colgroup>
+          <col class="col-time">
+          <col class="col-module">
+          <col class="col-source">
+          <col class="col-status">
+          <col class="col-summary">
+          <col class="col-trace">
+        </colgroup>
+        <thead>
+          <tr>
+            <th>执行时间</th>
+            <th>工作模块</th>
+            <th>触发来源</th>
+            <th>状态</th>
+            <th>摘要</th>
+            <th>Run ID</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="run in visibleRuns"
+            :key="run.run_id"
+            class="work-record-row"
+            tabindex="0"
+            role="button"
+            @click="openWorkRecordDetail(run)"
+            @keydown.enter.prevent="openWorkRecordDetail(run)"
+          >
+            <td>{{ formatWorkRecordDateTime(run.started_at) }}</td>
+            <td>{{ resolveWorkRecordModuleLabel(run) }}</td>
+            <td>{{ resolveWorkRecordSourceLabel(run.source) }}</td>
+            <td>
+              <div class="work-record-status-stack">
+                <span class="status-pill" :class="resolveWorkRecordStatusTone(run)">
+                  {{ resolveWorkRecordStatusLabel(run) }}
+                </span>
+                <span>{{ resolveWorkRecordStatusNote(run) }}</span>
+              </div>
+            </td>
+            <td class="work-record-summary-cell">
+              <strong>{{ resolveWorkRecordTitle(run) }}</strong>
+              <span>{{ formatWorkRecordSummary(run.result_summary) }}</span>
+              <em>{{ resolveWorkRecordSummaryMeta(run) }}</em>
+            </td>
+            <td class="work-record-trace-cell">{{ run.run_id }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div v-else class="work-records-empty">
+        当前还没有数字员工工作记录。
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="work-record-detail">
+        <div
+          v-if="detailOpen"
+          class="work-record-detail-mask"
+          role="dialog"
+          aria-modal="true"
+          aria-label="工作记录详情"
+          @click.self="closeWorkRecordDetail"
+        >
+          <aside class="work-record-detail-panel">
+            <header class="work-record-detail-head">
+              <div>
+                <span>工作记录详情</span>
+                <h3>{{ selectedRunDetail ? resolveWorkRecordTitle(selectedRunDetail) : '工作记录' }}</h3>
+              </div>
+              <button type="button" aria-label="关闭工作记录详情" @click="closeWorkRecordDetail">
+                <i class="mdi mdi-close"></i>
+              </button>
+            </header>
+
+            <div v-if="detailLoading" class="work-record-detail-state">
+              <TableLoadingState
+                variant="panel"
+                title="详情加载中"
+                message="正在读取该次工作记录的完整执行信息"
+                icon="mdi mdi-clipboard-text-search-outline"
+              />
+            </div>
+
+            <div v-else-if="detailError" class="work-record-detail-state error">
+              <i class="mdi mdi-alert-circle-outline"></i>
+              <strong>工作记录详情加载失败</strong>
+              <p>{{ detailError }}</p>
+              <button type="button" @click="reloadSelectedDetail">重新加载</button>
+            </div>
+
+            <div v-else-if="selectedRunDetail" class="work-record-detail-body">
+              <section class="work-record-detail-section">
+                <div class="work-record-section-head">
+                  <h4>基本信息</h4>
+                  <span class="status-pill" :class="resolveWorkRecordStatusTone(selectedRunDetail)">
+                    {{ resolveWorkRecordStatusLabel(selectedRunDetail) }}
+                  </span>
+                </div>
+                <div class="work-record-info-grid">
+                  <div><span>Run ID</span><strong>{{ selectedRunDetail.run_id }}</strong></div>
+                  <div><span>工作模块</span><strong>{{ resolveWorkRecordModuleLabel(selectedRunDetail) }}</strong></div>
+                  <div><span>触发来源</span><strong>{{ resolveWorkRecordSourceLabel(selectedRunDetail.source) }}</strong></div>
+                  <div><span>开始时间</span><strong>{{ formatWorkRecordDateTime(selectedRunDetail.started_at) }}</strong></div>
+                  <div><span>结束时间</span><strong>{{ formatWorkRecordDateTime(selectedRunDetail.finished_at) }}</strong></div>
+                  <div><span>状态说明</span><strong>{{ resolveWorkRecordStatusNote(selectedRunDetail) }}</strong></div>
+                </div>
+              </section>
+
+              <section class="work-record-detail-section">
+                <div class="work-record-section-head">
+                  <h4>执行摘要</h4>
+                  <span>{{ resolveWorkRecordSummaryMeta(selectedRunDetail) }}</span>
+                </div>
+                <p class="work-record-result-text">
+                  {{ selectedRunDetail.result_summary || '暂无执行摘要。' }}
+                </p>
+                <p v-if="selectedRunDetail.error_message" class="work-record-error-text">
+                  {{ selectedRunDetail.error_message }}
+                </p>
+              </section>
+
+              <section class="work-record-detail-section">
+                <div class="work-record-section-head">
+                  <h4>工具调用</h4>
+                  <span>{{ (selectedRunDetail.tool_calls || []).length }} 条</span>
+                </div>
+                <div v-if="(selectedRunDetail.tool_calls || []).length" class="work-record-tool-list">
+                  <article v-for="toolCall in selectedRunDetail.tool_calls" :key="toolCall.id">
+                    <strong>{{ toolCall.tool_name }}</strong>
+                    <span>{{ toolCall.tool_type || 'tool' }} · {{ toolCall.status || 'unknown' }}</span>
+                  </article>
+                </div>
+                <div v-else class="work-record-inline-empty">当前暂无工具调用明细。</div>
+              </section>
+
+              <section class="work-record-detail-section">
+                <div class="work-record-section-head">
+                  <h4>执行上下文</h4>
+                  <span>JSON</span>
+                </div>
+                <pre class="work-record-code-block">{{ formatJson(selectedRunDetail.route_json) }}</pre>
+              </section>
+            </div>
+          </aside>
+        </div>
+      </Transition>
+    </Teleport>
+  </section>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import TableLoadingState from '../shared/TableLoadingState.vue'
+import { fetchAgentRunDetail, fetchAgentRuns } from '../../services/agentAssets.js'
+import { useToast } from '../../composables/useToast.js'
+import { AGENT_RUN_POLL_INTERVAL_MS } from '../../utils/agentRunMonitor.js'
+import {
+  formatWorkRecordDateTime,
+  formatWorkRecordSummary,
+  resolveWorkRecordModuleLabel,
+  resolveWorkRecordSourceLabel,
+  resolveWorkRecordStatusLabel,
+  resolveWorkRecordStatusNote,
+  resolveWorkRecordStatusTone,
+  resolveWorkRecordSummaryMeta,
+  resolveWorkRecordTitle
+} from '../../views/scripts/digitalEmployeeWorkRecordsModel.js'
+
+defineOptions({
+  name: 'DigitalEmployeeWorkRecords'
+})
+
+const emit = defineEmits(['summary-change'])
+
+const { toast } = useToast()
+const runs = ref([])
+const loading = ref(false)
+const errorMessage = ref('')
+const detailOpen = ref(false)
+const detailLoading = ref(false)
+const detailError = ref('')
+const selectedRunId = ref('')
+const selectedRunDetail = ref(null)
+let pollTimer = 0
+
+const totalCount = computed(() => runs.value.length)
+const successCount = computed(() => runs.value.filter((run) => run.status === 'succeeded').length)
+const failedCount = computed(() => runs.value.filter((run) => run.status === 'failed').length)
+const visibleRuns = computed(() => runs.value.slice(0, 100))
+
+async function loadWorkRecords(showToast = false) {
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const payload = await fetchAgentRuns({ agent: 'hermes', limit: 100 })
+    runs.value = Array.isArray(payload) ? payload : []
+    emit('summary-change', {
+      total: totalCount.value,
+      succeeded: successCount.value,
+      failed: failedCount.value
+    })
+  } catch (error) {
+    errorMessage.value = error?.message || '工作记录加载失败，请稍后重试。'
+    if (showToast) {
+      toast(errorMessage.value)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatJson(value) {
+  try {
+    return JSON.stringify(value || {}, null, 2)
+  } catch {
+    return String(value || '')
+  }
+}
+
+async function loadWorkRecordDetail(runId) {
+  detailLoading.value = true
+  detailError.value = ''
+  try {
+    selectedRunDetail.value = await fetchAgentRunDetail(runId)
+  } catch (error) {
+    detailError.value = error?.message || '工作记录详情加载失败，请稍后重试。'
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function openWorkRecordDetail(run) {
+  const runId = String(run?.run_id || '').trim()
+  if (!runId) {
+    return
+  }
+
+  selectedRunId.value = runId
+  selectedRunDetail.value = run
+  detailOpen.value = true
+  void loadWorkRecordDetail(runId)
+}
+
+function reloadSelectedDetail() {
+  if (!selectedRunId.value) {
+    return
+  }
+  void loadWorkRecordDetail(selectedRunId.value)
+}
+
+function closeWorkRecordDetail() {
+  detailOpen.value = false
+  detailError.value = ''
+}
+
+function startPolling() {
+  stopPolling()
+  pollTimer = window.setInterval(() => {
+    loadWorkRecords(false)
+  }, AGENT_RUN_POLL_INTERVAL_MS)
+}
+
+function stopPolling() {
+  if (pollTimer) {
+    window.clearInterval(pollTimer)
+    pollTimer = 0
+  }
+}
+
+onMounted(() => {
+  loadWorkRecords(false).catch(() => {})
+  startPolling()
+})
+
+onBeforeUnmount(() => {
+  stopPolling()
+})
+</script>
+
+<style scoped src="../../assets/styles/components/digital-employee-work-records.css"></style>
--- a/web/src/components/business/ExpenseProfileDetailModal.vue
+++ b/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;
  }
 }
--- a/web/src/components/business/ExpenseProfileTagPager.vue
+++ b/web/src/components/business/ExpenseProfileTagPager.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="profile-tag-pager">
+    <div :key="activePageIndex" class="profile-tag-list">
+      <article
+        v-for="(tag, index) in visibleTags"
+        :key="tag.code"
+        :class="[
+          'profile-tag-item',
+          `profile-tag-item--${tag.tone}`,
+          `profile-tag-item--accent-${resolveTagAccentIndex(tag, index)}`
+        ]"
+      >
+        <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>
+
+      <article
+        v-for="item in placeholderCount"
+        :key="`placeholder-${activePageIndex}-${item}`"
+        class="profile-tag-item profile-tag-item--placeholder"
+        aria-hidden="true"
+      ></article>
+    </div>
+
+    <div v-if="pageCount > 1" class="profile-tag-pagination" aria-label="画像标签分页">
+      <ElButton
+        class="profile-tag-page-btn"
+        text
+        :disabled="activePageIndex === 0"
+        aria-label="上一页画像标签"
+        @click="goPreviousPage"
+      >
+        <i class="mdi mdi-chevron-left"></i>
+      </ElButton>
+
+      <div class="profile-tag-page-dots">
+        <button
+          v-for="page in tagPages"
+          :key="page"
+          type="button"
+          :class="['profile-tag-page-dot', { 'is-active': page === activePageIndex }]"
+          :aria-label="`切换到第 ${page + 1} 页画像标签`"
+          :aria-current="page === activePageIndex ? 'page' : undefined"
+          @click="goToPage(page)"
+        ></button>
+      </div>
+
+      <ElButton
+        class="profile-tag-page-btn"
+        text
+        :disabled="activePageIndex >= pageCount - 1"
+        aria-label="下一页画像标签"
+        @click="goNextPage"
+      >
+        <i class="mdi mdi-chevron-right"></i>
+      </ElButton>
+    </div>
+
+    <div v-else class="profile-tag-pagination profile-tag-pagination--single" aria-hidden="true">
+      <span></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElButton, ElTag } from 'element-plus'
+
+const TAG_PAGE_SIZE = 5
+
+const props = defineProps({
+  tags: { type: Array, default: () => [] },
+  visible: { type: Boolean, default: false }
+})
+
+const pageIndex = ref(0)
+
+const pageCount = computed(() => Math.max(1, Math.ceil(props.tags.length / TAG_PAGE_SIZE)))
+const activePageIndex = computed(() => Math.min(pageIndex.value, pageCount.value - 1))
+const tagPages = computed(() => Array.from({ length: pageCount.value }, (_, index) => index))
+const visibleTags = computed(() => {
+  const start = activePageIndex.value * TAG_PAGE_SIZE
+  return props.tags.slice(start, start + TAG_PAGE_SIZE)
+})
+const placeholderCount = computed(() => Math.max(0, TAG_PAGE_SIZE - visibleTags.value.length))
+const tagIdentity = computed(() => props.tags.map((tag) => tag.code || tag.label).join('|'))
+
+function resolveProfileTagType(tone) {
+  const normalized = String(tone || '').trim()
+
+  if (['warning', 'risk', 'amber'].includes(normalized)) {
+    return 'warning'
+  }
+  if (['danger', 'high'].includes(normalized)) {
+    return 'danger'
+  }
+  return 'primary'
+}
+
+function goToPage(nextPage) {
+  pageIndex.value = Math.min(Math.max(Number(nextPage) || 0, 0), pageCount.value - 1)
+}
+
+function goPreviousPage() {
+  goToPage(activePageIndex.value - 1)
+}
+
+function goNextPage() {
+  goToPage(activePageIndex.value + 1)
+}
+
+function resolveTagAccentIndex(tag, index) {
+  const explicitIndex = Number(tag?.colorIndex ?? tag?.color_index)
+  if (Number.isFinite(explicitIndex)) {
+    return Math.max(0, Math.round(explicitIndex)) % 8
+  }
+  return (activePageIndex.value * TAG_PAGE_SIZE + index) % 8
+}
+
+watch(pageCount, () => {
+  goToPage(activePageIndex.value)
+})
+
+watch([() => props.visible, tagIdentity], ([visible]) => {
+  if (visible) {
+    goToPage(0)
+  }
+})
+</script>
+
+<style scoped>
+.profile-tag-pager {
+  min-height: 308px;
+  display: grid;
+  grid-template-rows: 272px 26px;
+  gap: 10px;
+}
+
+.profile-tag-list {
+  display: grid;
+  grid-template-rows: repeat(5, 48px);
+  align-content: start;
+  gap: 8px;
+  min-height: 272px;
+  animation: profileTagPageIn 180ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.profile-tag-item {
+  --tag-accent-rgb: 58, 124, 165;
+  --tag-accent-text: #235d7e;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 7px 10px;
+  border: 1px solid rgba(var(--tag-accent-rgb), 0.2);
+  border-left: 3px solid rgb(var(--tag-accent-rgb));
+  border-radius: 4px;
+  background: rgba(var(--tag-accent-rgb), 0.045);
+  transition:
+    border-color 180ms var(--ease),
+    background-color 180ms var(--ease);
+}
+
+.profile-tag-item:hover {
+  border-color: rgba(var(--tag-accent-rgb), 0.34);
+  background: rgba(var(--tag-accent-rgb), 0.075);
+}
+
+.profile-tag-item--placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.profile-tag-copy {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.profile-tag-copy strong {
+  overflow: hidden;
+  color: var(--tag-accent-text);
+  font-size: 13px;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-tag-copy span {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 11.5px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-score-tag {
+  border-color: rgba(var(--tag-accent-rgb), 0.28);
+  background-color: rgba(var(--tag-accent-rgb), 0.1);
+  color: var(--tag-accent-text);
+  border-radius: 4px;
+  font-weight: 800;
+}
+
+.profile-tag-item--accent-0 {
+  --tag-accent-rgb: 58, 124, 165;
+  --tag-accent-text: #235d7e;
+}
+
+.profile-tag-item--accent-1 {
+  --tag-accent-rgb: 15, 159, 143;
+  --tag-accent-text: #0f766e;
+}
+
+.profile-tag-item--accent-2 {
+  --tag-accent-rgb: 245, 158, 11;
+  --tag-accent-text: #92400e;
+}
+
+.profile-tag-item--accent-3 {
+  --tag-accent-rgb: 124, 58, 237;
+  --tag-accent-text: #5b21b6;
+}
+
+.profile-tag-item--accent-4 {
+  --tag-accent-rgb: 220, 38, 38;
+  --tag-accent-text: #991b1b;
+}
+
+.profile-tag-item--accent-5 {
+  --tag-accent-rgb: 37, 99, 235;
+  --tag-accent-text: #1d4ed8;
+}
+
+.profile-tag-item--accent-6 {
+  --tag-accent-rgb: 22, 163, 74;
+  --tag-accent-text: #15803d;
+}
+
+.profile-tag-item--accent-7 {
+  --tag-accent-rgb: 219, 39, 119;
+  --tag-accent-text: #be185d;
+}
+
+.profile-tag-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 26px;
+}
+
+.profile-tag-pagination--single {
+  pointer-events: none;
+}
+
+.profile-tag-page-btn {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0;
+  border-radius: 4px;
+  color: #475569;
+}
+
+.profile-tag-page-btn :deep(i) {
+  font-size: 16px;
+}
+
+.profile-tag-page-dots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.profile-tag-page-dot {
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #cbd5e1;
+  cursor: pointer;
+  transition:
+    width 180ms var(--ease),
+    background-color 180ms var(--ease);
+}
+
+.profile-tag-page-dot.is-active {
+  width: 18px;
+  background: #3a7ca5;
+}
+
+@keyframes profileTagPageIn {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .profile-tag-list,
+  .profile-tag-page-dot {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}
+</style>
--- a/web/src/components/business/PersonalWorkbench.vue
+++ b/web/src/components/business/PersonalWorkbench.vue
@@ -221,7 +221,7 @@

        <article class="panel workbench-card side-panel usage-profile-panel">
          <div class="section-head side-card-head">
-            <h2>费用画像</h2>
+            <h2>用户画像</h2>
            <button
              type="button"
              class="detail-action"
@@ -230,11 +230,11 @@
              @click="openExpenseProfileModal"
            >
              <span>查看详情</span>
-              <i class="mdi mdi-chevron-right"></i>
+              <i :class="employeeProfileLoading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-chevron-right'"></i>
            </button>
          </div>

-          <div class="insight-profile-list" aria-label="费用画像">
+          <div class="insight-profile-list" aria-label="用户画像">
            <div
              v-for="metric in visibleUsageProfileMetrics"
              :key="metric.key"
@@ -264,8 +264,10 @@
      :tags="expenseProfileTags"
      :radar-dimensions="expenseProfileRadarDimensions"
      :operations="expenseProfileOperations"
+      :loading="employeeProfileLoading"
+      :error-message="employeeProfileError"
+      :empty-reason="expenseProfileEmptyReason"
      @close="closeExpenseProfileModal"
-      @explain="explainExpenseProfile"
    />
  </section>
 </template>
@@ -281,20 +283,26 @@ import { useToast } from '../../composables/useToast.js'
 import {
  assistantCapabilities,
  buildExpenseStatItems,
-  expenseProfileOperations,
-  expenseProfileRadarDimensions,
-  expenseProfileTags,
  progressItems,
  progressSteps,
  quickPromptItems,
  todoItems,
-  usageProfileMetrics
 } from '../../data/personalWorkbench.js'
+import { fetchAgentRuns } from '../../services/agentAssets.js'
 import { clearUserConversations, fetchLatestConversation } from '../../services/orchestrator.js'
+import { fetchCurrentEmployeeLatestProfile } from '../../services/reimbursements.js'
 import {
  ASSISTANT_SESSION_SNAPSHOT_EVENT,
  hasAssistantSessionSnapshot
 } from '../../utils/assistantSessionSnapshot.js'
+import {
+  buildProfileOperationsFromAgentRuns,
+  buildUserProfileMetricCards,
+  buildUserProfileSummaryMetrics,
+  normalizeUserProfileRadarDimensions,
+  normalizeUserProfileTags,
+  resolveCurrentUserProfileError
+} from '../../utils/employeeProfileViewModel.js'

 const props = defineProps({
  showHeader: { type: Boolean, default: true },
@@ -313,6 +321,11 @@ const pendingAction = ref('')
 const latestExpenseConversation = ref(null)
 const hasLocalExpenseSnapshot = ref(false)
 const expenseProfileModalOpen = ref(false)
+const employeeProfile = ref(null)
+const employeeProfileRuns = ref([])
+const employeeProfileLoading = ref(false)
+const employeeProfileError = ref('')
+let employeeProfileLoadSeq = 0
 const MAX_ATTACHMENTS = 10
 const SESSION_TYPE_EXPENSE = 'expense'
 const SESSION_TYPE_KNOWLEDGE = 'knowledge'
@@ -359,16 +372,34 @@ const visibleExpenseStatItems = computed(() => {
    .filter(Boolean)
 })
 const visibleUsageProfileMetrics = computed(() => {
-  const preferredKeys = ['ai-usage', 'submit-efficiency', 'auto-pass-rate', 'audit-duration']
-  return preferredKeys
-    .map((key) => usageProfileMetrics.find((item) => item.key === key))
-    .filter(Boolean)
+  return buildUserProfileMetricCards(
+    employeeProfile.value,
+    employeeProfileRuns.value,
+    currentUser.value
+  ).slice(0, 4)
 })
 const expenseProfileModalMetrics = computed(() => {
-  const preferredKeys = ['stay-duration', 'ai-usage', 'auto-pass-rate', 'audit-duration']
-  return preferredKeys
-    .map((key) => usageProfileMetrics.find((item) => item.key === key))
-    .filter(Boolean)
+  return buildUserProfileSummaryMetrics(
+    employeeProfile.value,
+    employeeProfileRuns.value,
+    currentUser.value
+  )
+})
+const expenseProfileTags = computed(() => normalizeUserProfileTags(employeeProfile.value))
+const expenseProfileRadarDimensions = computed(() => normalizeUserProfileRadarDimensions(employeeProfile.value))
+const expenseProfileOperations = computed(() =>
+  buildProfileOperationsFromAgentRuns(employeeProfileRuns.value, currentUser.value)
+)
+const expenseProfileEmptyReason = computed(() => String(employeeProfile.value?.empty_reason || '').trim())
+const currentUserProfileKey = computed(() => {
+  const user = currentUser.value || {}
+  return [
+    user.username,
+    user.email,
+    user.name,
+    user.employeeNo,
+    user.employee_no
+  ].map((item) => String(item || '').trim()).filter(Boolean).join('|')
 })
 const visibleTodoItems = computed(() => todoItems.slice(0, 5))
 const visibleProgressItems = computed(() => progressItems.slice(0, 5))
@@ -469,19 +500,46 @@ function openPromptAssistant(prompt) {
  })
 }

+async function loadCurrentEmployeeProfile() {
+  const sequence = ++employeeProfileLoadSeq
+  employeeProfileLoading.value = true
+  employeeProfileError.value = ''
+
+  const [profileResult, runsResult] = await Promise.allSettled([
+    fetchCurrentEmployeeLatestProfile({
+      scene: 'operations',
+      window_days: 90,
+      expense_type_scope: 'overall'
+    }),
+    fetchAgentRuns({ limit: 100 })
+  ])
+
+  if (sequence !== employeeProfileLoadSeq) {
+    return
+  }
+
+  if (profileResult.status === 'fulfilled') {
+    employeeProfile.value = profileResult.value || null
+  } else {
+    employeeProfile.value = null
+    employeeProfileError.value = resolveCurrentUserProfileError(profileResult.reason)
+  }
+
+  employeeProfileRuns.value = runsResult.status === 'fulfilled' ? runsResult.value || [] : []
+  employeeProfileLoading.value = false
+}
+
 function openExpenseProfileModal() {
  expenseProfileModalOpen.value = true
+  if (!employeeProfile.value && !employeeProfileLoading.value) {
+    void loadCurrentEmployeeProfile()
+  }
 }

 function closeExpenseProfileModal() {
  expenseProfileModalOpen.value = false
 }

-function explainExpenseProfile() {
-  closeExpenseProfileModal()
-  openPromptAssistant('请根据我的费用画像标签、行为雷达和最近 5 次操作，解释我的费用使用特点和可以优化的地方。')
-}
-
 function handleWorkbenchEnter(event) {
  if (event.isComposing) {
    return
@@ -570,6 +628,7 @@ async function handleExpenseConversationAction() {
 onMounted(() => {
  refreshLocalExpenseSnapshot()
  refreshLatestExpenseConversation()
+  loadCurrentEmployeeProfile()
  window.addEventListener(ASSISTANT_SESSION_SNAPSHOT_EVENT, handleAssistantSessionSnapshotChange)
 })

@@ -585,6 +644,12 @@ watch(
    }
  }
 )
+
+watch(currentUserProfileKey, (nextKey, previousKey) => {
+  if (nextKey && nextKey !== previousKey) {
+    loadCurrentEmployeeProfile()
+  }
+})
 </script>

 <style scoped src="../../assets/styles/components/personal-workbench.css"></style>
--- a/web/src/components/charts/BarChart.vue
+++ b/web/src/components/charts/BarChart.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="bar-chart">
    <div class="rank-labels">
-      <div v-for="(item, idx) in items" :key="item.name" class="rank-label">
+      <div v-for="(item, idx) in resolvedItems" :key="item.name" class="rank-label">
        <span class="rank-badge" :class="medalClass(idx)">
          <svg v-if="idx < 3" width="18" height="18" viewBox="0 0 18 18">
            <circle cx="9" cy="9" r="8" :fill="medalFill(idx)" />
@@ -12,39 +12,138 @@
        <span class="rank-name">{{ item.name || item.shortName }}</span>
      </div>
    </div>
-    <div class="chart-area">
-      <Bar :data="chartData" :options="chartOptions" />
-    </div>
+    <div ref="chartElement" class="chart-area" role="img" :aria-label="ariaLabel"></div>
  </div>
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Bar } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Tooltip
-} from 'chart.js'
+import { computed, shallowRef } from 'vue'
+import { BarChart as EChartsBarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
+import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+import { useEcharts } from '../../composables/useEcharts.js'
 import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
+use([GridComponent, TooltipComponent, EChartsBarChart, CanvasRenderer])

 const props = defineProps({
  items: { type: Array, required: true }
 })
+
+const chartElement = shallowRef(null)
+const progress = useAnimationProgress([() => props.items], 980)
 const themeColors = useThemeColors()
 const resolvedItems = computed(() => {
  const fallback = themeColors.value.chartPrimary

  return props.items.map((item) => ({
    ...item,
+    value: Number(item.value || item.amount || 0),
    resolvedColor: resolveCssColor(item.color, fallback)
  }))
 })

+const ariaLabel = computed(() =>
+  resolvedItems.value.map((item, index) => (
+    `第${index + 1}名${item.name || item.shortName}${formatValue(item.value)}`
+  )).join('，')
+)
+
+const chartMaxValue = computed(() => Math.max(...resolvedItems.value.map((item) => item.value), 1))
+const chartAxisMax = computed(() => Math.ceil((chartMaxValue.value * 1.1) / 10000) * 10000)
+const animatedItems = computed(() =>
+  resolvedItems.value.map((item) => ({
+    ...item,
+    animatedValue: progress.value >= 0.999
+      ? item.value
+      : Number((item.value * progress.value).toFixed(0))
+  }))
+)
+
+const chartOptions = computed(() => ({
+  backgroundColor: 'transparent',
+  animation: false,
+  grid: {
+    top: 8,
+    right: 62,
+    bottom: 8,
+    left: 4,
+    containLabel: false
+  },
+  tooltip: {
+    trigger: 'item',
+    confine: true,
+    appendToBody: true,
+    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+    borderColor: 'rgba(148, 163, 184, 0.24)',
+    borderWidth: 1,
+    padding: [9, 10],
+    textStyle: {
+      color: '#334155',
+      fontSize: 12,
+      fontWeight: 700
+    },
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
+    formatter: (params) => `${params.marker}${params.name}: ${formatValue(params.value)}`
+  },
+  xAxis: {
+    type: 'value',
+    min: 0,
+    max: chartAxisMax.value,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: {
+      lineStyle: { color: 'rgba(226, 232, 240, 0.72)' }
+    },
+    axisLabel: {
+      color: '#94a3b8',
+      fontSize: 11,
+      fontWeight: 700,
+      formatter: (value) => formatValue(value)
+    }
+  },
+  yAxis: {
+    type: 'category',
+    data: resolvedItems.value.map((item) => item.name || item.shortName),
+    inverse: true,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: { show: false }
+  },
+  series: [
+    {
+      type: 'bar',
+      data: animatedItems.value.map((item) => ({
+        name: item.name || item.shortName,
+        value: item.animatedValue,
+        itemStyle: { color: item.resolvedColor }
+      })),
+      barWidth: 14,
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(226, 232, 240, 0.42)',
+        borderRadius: 6
+      },
+      itemStyle: {
+        borderRadius: [0, 6, 6, 0]
+      },
+      label: {
+        show: true,
+        position: 'right',
+        color: '#64748b',
+        fontSize: 11,
+        fontWeight: 800,
+        formatter: ({ value }) => formatValue(value)
+      }
+    }
+  ]
+}))
+
+useEcharts(chartElement, chartOptions)
+
 const medalClass = (idx) => {
  if (idx === 0) return 'gold'
  if (idx === 1) return 'silver'
@@ -60,68 +159,10 @@ const medalFill = (idx) => {
 }

 const formatValue = (value) => {
-  if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
-  if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
-  return `¥${value}`
-}
-
-const chartData = computed(() => ({
-  labels: resolvedItems.value.map((i) => i.name || i.shortName),
-  datasets: [{
-    data: resolvedItems.value.map((i) => i.value || i.amount),
-    backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
-    borderRadius: 6,
-    borderSkipped: false,
-    barPercentage: 0.7,
-    categoryPercentage: 0.85
-  }]
-}))
-
-const chartOptions = {
-  indexAxis: 'y',
-  responsive: true,
-  maintainAspectRatio: false,
-  layout: {
-    padding: { left: 0, right: 12 }
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      backgroundColor: 'rgba(255,255,255,0.96)',
-      titleColor: '#1e293b',
-      bodyColor: '#64748b',
-      borderColor: '#e2e8f0',
-      borderWidth: 1,
-      padding: 10,
-      boxPadding: 4,
-      cornerRadius: 6,
-      callbacks: {
-        title: () => '',
-        label: (ctx) => ` ${formatValue(ctx.parsed.x)}`
-      }
-    }
-  },
-  scales: {
-    x: {
-      beginAtZero: true,
-      grid: {
-        color: '#f1f5f9',
-        drawTicks: false
-      },
-      ticks: {
-        color: '#94a3b8',
-        font: { size: 11 },
-        padding: 4,
-        callback: (value) => formatValue(value)
-      },
-      border: { display: false }
-    },
-    y: {
-      grid: { display: false },
-      border: { display: false },
-      ticks: { display: false }
-    }
-  }
+  const number = Number(value || 0)
+  if (number >= 1_000_000) return `¥${(number / 1_000_000).toFixed(1)}M`
+  if (number >= 1_000) return `¥${(number / 1_000).toFixed(1)}K`
+  return `¥${number}`
 }
 </script>

--- a/web/src/components/charts/BudgetTrendChart.vue
+++ b/web/src/components/charts/BudgetTrendChart.vue
@@ -36,6 +36,8 @@ const progress = useAnimationProgress([
  () => props.available
 ], 1000)
 const themeColors = useThemeColors()
+const prefersReducedMotion = () =>
+  typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches

 const currency = (value) =>
  Number(value || 0).toLocaleString('zh-CN', {
@@ -80,7 +82,7 @@ const chartData = computed(() => ({
      label: '已使用',
      data: scaleSeries(usedPercent.value),
      backgroundColor: themeColors.value.chartPrimary,
-      borderRadius: 5,
+      borderRadius: 4,
      borderSkipped: false,
      stack: 'budgetUsage',
      amounts: props.used
@@ -89,7 +91,7 @@ const chartData = computed(() => ({
      label: '已占用',
      data: scaleSeries(occupiedPercent.value),
      backgroundColor: themeColors.value.warning,
-      borderRadius: 5,
+      borderRadius: 4,
      borderSkipped: false,
      stack: 'budgetUsage',
      amounts: props.occupied
@@ -98,7 +100,7 @@ const chartData = computed(() => ({
      label: '剩余可用',
      data: scaleSeries(availablePercent.value),
      backgroundColor: '#e5edf3',
-      borderRadius: 5,
+      borderRadius: 4,
      borderSkipped: false,
      stack: 'budgetUsage',
      amounts: props.available
@@ -114,7 +116,7 @@ const chartOptions = computed(() => ({
    intersect: false
  },
  animation: {
-    duration: 760,
+    duration: prefersReducedMotion() ? 0 : 760,
    easing: 'easeOutQuart'
  },
  plugins: {
@@ -127,6 +129,7 @@ const chartOptions = computed(() => ({
      borderWidth: 1,
      bodyColor: '#475569',
      titleColor: '#0f172a',
+      cornerRadius: 4,
      padding: 12,
      displayColors: true,
      callbacks: {
--- a/web/src/components/charts/DonutChart.vue
+++ b/web/src/components/charts/DonutChart.vue
@@ -1,14 +1,14 @@
 <template>
  <div class="donut-chart">
    <div class="donut-body">
-      <Doughnut :data="chartData" :options="chartOptions" />
+      <div ref="chartElement" class="donut-canvas" role="img" :aria-label="ariaLabel"></div>
      <div class="donut-center">
        <strong>{{ centerValue }}</strong>
        <span>{{ centerLabel }}</span>
      </div>
    </div>
    <div class="donut-legend">
-      <div v-for="item in items" :key="item.name" class="legend-row">
+      <div v-for="item in resolvedItems" :key="item.name" class="legend-row">
        <i :style="{ background: item.resolvedColor }"></i>
        <span class="legend-name">{{ item.name }}</span>
        <span class="legend-val">{{ item.display }}</span>
@@ -18,18 +18,17 @@
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Doughnut } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend
-} from 'chart.js'
+import { computed, shallowRef } from 'vue'
+import { PieChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
 import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+import { useEcharts } from '../../composables/useEcharts.js'
 import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

-ChartJS.register(ArcElement, Tooltip, Legend)
+use([TooltipComponent, PieChart, CanvasRenderer])

 const props = defineProps({
  items: { type: Array, required: true },
@@ -37,67 +36,73 @@ const props = defineProps({
  centerLabel: { type: String, required: true }
 })

-const progress = useAnimationProgress([() => props.items], 1150)
+const chartElement = shallowRef(null)
+const progress = useAnimationProgress([() => props.items], 980)
 const themeColors = useThemeColors()
 const resolvedItems = computed(() => {
  const fallback = themeColors.value.chartPrimary

  return props.items.map((item) => ({
    ...item,
+    value: Math.max(Number(item.value || 0), 0),
    resolvedColor: resolveCssColor(item.color, fallback)
  }))
 })

-const chartData = computed(() => ({
-  labels: resolvedItems.value.map((i) => i.name),
-  datasets: [{
-    data: resolvedItems.value.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
-    backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
-    borderWidth: 0,
-    cutout: '68%',
-    spacing: 3,
-    borderRadius: 4
-  }]
+const ariaLabel = computed(() =>
+  `${props.centerLabel}${props.centerValue}，${resolvedItems.value.map((item) => `${item.name}${item.display}`).join('，')}`
+)
+
+const chartOptions = computed(() => ({
+  backgroundColor: 'transparent',
+  animation: false,
+  tooltip: {
+    trigger: 'item',
+    confine: true,
+    appendToBody: true,
+    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+    borderColor: 'rgba(148, 163, 184, 0.24)',
+    borderWidth: 1,
+    padding: [9, 10],
+    textStyle: {
+      color: '#334155',
+      fontSize: 12,
+      fontWeight: 700
+    },
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
+    formatter: (params) => `${params.marker}${params.name}: ${params.percent}%`
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['60%', '88%'],
+      center: ['50%', '50%'],
+      startAngle: 90,
+      endAngle: 90 - Math.max(progress.value, 0.0001) * 360,
+      avoidLabelOverlap: true,
+      padAngle: 1.5,
+      minAngle: 2,
+      label: { show: false },
+      labelLine: { show: false },
+      itemStyle: {
+        borderColor: '#ffffff',
+        borderWidth: 3,
+        borderRadius: 4
+      },
+      emphasis: {
+        scale: true,
+        scaleSize: 3
+      },
+      data: resolvedItems.value.map((item) => ({
+        name: item.name,
+        value: item.value,
+        itemStyle: { color: item.resolvedColor }
+      }))
+    }
+  ]
 }))

-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  animation: {
-    animateRotate: true,
-    animateScale: true,
-    duration: 900,
-    easing: 'easeOutQuart'
-  },
-  transitions: {
-    active: {
-      animation: {
-        duration: 180
-      }
-    }
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      backgroundColor: 'rgba(255,255,255,0.96)',
-      titleColor: '#1e293b',
-      bodyColor: '#64748b',
-      borderColor: '#e2e8f0',
-      borderWidth: 1,
-      padding: 10,
-      boxPadding: 4,
-      cornerRadius: 6,
-      usePointStyle: true,
-      callbacks: {
-        label: (ctx) => {
-          const total = ctx.dataset.data.reduce((a, b) => a + b, 0) || 1
-          const pct = ((ctx.parsed / total) * 100).toFixed(1)
-          return ` ${ctx.label}: ${pct}%`
-        }
-      }
-    }
-  }
-}
+useEcharts(chartElement, chartOptions)
 </script>

 <style scoped>
@@ -106,14 +111,20 @@ const chartOptions = {
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
+  gap: 10px;
 }

 .donut-body {
  position: relative;
  width: 100%;
-  height: 150px;
+  height: 166px;
  margin: 0 auto;
-  margin-top: 16px;
+  margin-top: 4px;
+}
+
+.donut-canvas {
+  width: 100%;
+  height: 100%;
 }

 .donut-center {
@@ -130,8 +141,8 @@ const chartOptions = {

 .donut-center strong {
  color: #1e293b;
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 17px;
+  font-weight: 850;
  line-height: 1;
 }

--- a/web/src/components/charts/GaugeChart.vue
+++ b/web/src/components/charts/GaugeChart.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="gauge-chart">
    <div class="gauge-body">
-      <Doughnut :data="chartData" :options="chartOptions" />
+      <div ref="chartElement" class="gauge-canvas" role="img" :aria-label="ariaLabel"></div>
      <div class="gauge-center">
        <strong>{{ animatedRatio }}%</strong>
        <span>已执行</span>
@@ -25,17 +25,16 @@
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Doughnut } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip
-} from 'chart.js'
+import { computed, shallowRef } from 'vue'
+import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
 import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+import { useEcharts } from '../../composables/useEcharts.js'
 import { useThemeColors } from '../../composables/useThemeColors.js'

-ChartJS.register(ArcElement, Tooltip)
+use([EChartsGaugeChart, CanvasRenderer])

 const props = defineProps({
  ratio: { type: [Number, String], required: true },
@@ -44,36 +43,61 @@ const props = defineProps({
  left: { type: String, required: true }
 })

-const ratioValue = computed(() => Number(props.ratio))
-const progress = useAnimationProgress([() => props.ratio], 1150)
-const animatedRatio = computed(() => Number((ratioValue.value * progress.value).toFixed(0)))
+const chartElement = shallowRef(null)
+const progress = useAnimationProgress([() => props.ratio], 980)
 const themeColors = useThemeColors()
-
-const chartData = computed(() => ({
-  labels: ['已执行', '剩余'],
-  datasets: [{
-    data: [animatedRatio.value, 100 - animatedRatio.value],
-    backgroundColor: [themeColors.value.chartPrimary, '#e2e8f0'],
-    borderWidth: 0
-  }]
-}))
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  rotation: -90,
-  circumference: 180,
-  cutout: '65%',
-  animation: {
-    animateRotate: true,
-    duration: 900,
-    easing: 'easeOutQuart'
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: { enabled: false }
+const normalizedRatio = computed(() => Math.max(0, Math.min(100, Math.round(Number(props.ratio) || 0))))
+const animatedRatio = computed(() => {
+  if (progress.value >= 0.999) {
+    return normalizedRatio.value
  }
-}
+  return Math.round(normalizedRatio.value * progress.value)
+})
+const ariaLabel = computed(() => `预算执行率${normalizedRatio.value}%，预算总额${props.total}，已执行${props.used}，剩余${props.left}`)
+
+const chartOptions = computed(() => {
+  const primary = themeColors.value.chartPrimary
+
+  return {
+    backgroundColor: 'transparent',
+    animation: false,
+    series: [
+      {
+        type: 'gauge',
+        startAngle: 205,
+        endAngle: -25,
+        min: 0,
+        max: 100,
+        radius: '104%',
+        center: ['50%', '66%'],
+        pointer: { show: false },
+        progress: {
+          show: true,
+          roundCap: true,
+          width: 14,
+          itemStyle: {
+            color: primary
+          }
+        },
+        axisLine: {
+          roundCap: true,
+          lineStyle: {
+            width: 14,
+            color: [[1, '#e2e8f0']]
+          }
+        },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        anchor: { show: false },
+        detail: { show: false },
+        data: [{ value: animatedRatio.value }]
+      }
+    ]
+  }
+})
+
+useEcharts(chartElement, chartOptions)
 </script>

 <style scoped>
@@ -81,19 +105,24 @@ const chartOptions = {
  flex: 1;
  display: flex;
  flex-direction: column;
-  gap: 12px;
+  gap: 10px;
  justify-content: center;
 }

 .gauge-body {
  position: relative;
-  height: 100px;
+  height: 128px;
  width: 100%;
 }

+.gauge-canvas {
+  width: 100%;
+  height: 100%;
+}
+
 .gauge-center {
  position: absolute;
-  bottom: 0;
+  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
--- a/web/src/components/charts/RadarChart.vue
+++ b/web/src/components/charts/RadarChart.vue
@@ -1,25 +1,28 @@
 <template>
-  <div class="radar-chart">
-    <Radar :data="chartData" :options="chartOptions" />
-  </div>
+  <div ref="chartElement" class="radar-chart" role="img" :aria-label="ariaLabel"></div>
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Radar } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LineElement,
-  PointElement,
-  RadialLinearScale,
-  Tooltip
-} from 'chart.js'
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import { RadarChart as EChartsRadarChart } from 'echarts/charts'
+import { RadarComponent, TooltipComponent } from 'echarts/components'
+import { init, use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'

 import { useThemeColors } from '../../composables/useThemeColors.js'

-ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend)
+use([RadarComponent, EChartsRadarChart, TooltipComponent, CanvasRenderer])
+
+const DEFAULT_DIMENSION_COLORS = [
+  '#3a7ca5',
+  '#0f9f8f',
+  '#f59e0b',
+  '#7c3aed',
+  '#dc2626',
+  '#2563eb',
+  '#16a34a',
+  '#db2777'
+]

 const props = defineProps({
  items: { type: Array, required: true },
@@ -28,89 +31,205 @@ const props = defineProps({
 })

 const themeColors = useThemeColors()
+const chartElement = shallowRef(null)
+let chartInstance = null
+let resizeObserver = null

 const normalizedItems = computed(() =>
-  props.items.map((item) => ({
+  props.items.map((item, index) => ({
    code: String(item.code || item.label || '').trim(),
    label: String(item.label || item.code || '').trim(),
-    score: clampScore(item.score)
+    score: clampScore(item.score),
+    color: normalizeColor(item.color, index)
  }))
 )

-const chartData = computed(() => {
-  const primary = themeColors.value.chartPrimary
+const ariaLabel = computed(() => {
+  const summary = normalizedItems.value
+    .map((item) => `${item.label}${item.score}分`)
+    .join('，')
+  return `${props.label}：${summary}`
+})
+
+const chartOptions = computed(() => {
+  const primary = themeColors.value.chartPrimary || DEFAULT_DIMENSION_COLORS[0]
+  const indicators = normalizedItems.value.map((item) => ({
+    name: `${item.label}\n${item.score}`,
+    min: 0,
+    max: props.max,
+    color: item.color
+  }))

  return {
-    labels: normalizedItems.value.map((item) => item.label),
-    datasets: [
+    backgroundColor: 'transparent',
+    animationDuration: 760,
+    animationEasing: 'cubicOut',
+    color: [primary],
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      appendToBody: true,
+      backgroundColor: 'rgba(255, 255, 255, 0.98)',
+      borderColor: 'rgba(148, 163, 184, 0.24)',
+      borderWidth: 1,
+      padding: [9, 10],
+      textStyle: {
+        color: '#334155',
+        fontSize: 12,
+        fontWeight: 700
+      },
+      extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
+      formatter: formatTooltip
+    },
+    radar: {
+      center: ['50%', '52%'],
+      radius: '67%',
+      shape: 'polygon',
+      splitNumber: 4,
+      startAngle: 90,
+      axisNameGap: 18,
+      indicator: indicators,
+      axisName: {
+        color: '#475569',
+        fontSize: 12,
+        fontWeight: 800,
+        lineHeight: 16
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(100, 116, 139, 0.18)'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: [
+            'rgba(148, 163, 184, 0.14)',
+            'rgba(148, 163, 184, 0.18)',
+            'rgba(148, 163, 184, 0.22)',
+            'rgba(148, 163, 184, 0.28)'
+          ]
+        }
+      },
+      splitArea: {
+        areaStyle: {
+          color: [
+            'rgba(248, 250, 252, 0.58)',
+            'rgba(241, 245, 249, 0.34)'
+          ]
+        }
+      }
+    },
+    series: [
      {
-        label: props.label,
-        data: normalizedItems.value.map((item) => item.score),
-        borderColor: primary,
-        backgroundColor: toRgba(primary, 0.16),
-        pointBackgroundColor: '#ffffff',
-        pointBorderColor: primary,
-        pointBorderWidth: 2,
-        pointRadius: 3,
-        pointHoverRadius: 4,
-        borderWidth: 2,
-        fill: true,
-        tension: 0.18
+        name: props.label,
+        type: 'radar',
+        symbol: 'circle',
+        symbolSize: 7,
+        data: [
+          {
+            value: normalizedItems.value.map((item) => item.score),
+            name: props.label,
+            lineStyle: {
+              width: 2.5,
+              color: primary,
+              shadowColor: toRgba(primary, 0.22),
+              shadowBlur: 7
+            },
+            areaStyle: {
+              color: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.7,
+                colorStops: [
+                  { offset: 0, color: toRgba(primary, 0.28) },
+                  { offset: 1, color: toRgba(primary, 0.08) }
+                ]
+              }
+            },
+            itemStyle: {
+              color: '#ffffff',
+              borderColor: primary,
+              borderWidth: 2.5,
+              shadowColor: toRgba(primary, 0.2),
+              shadowBlur: 5
+            },
+            emphasis: {
+              lineStyle: {
+                width: 3
+              },
+              itemStyle: {
+                borderWidth: 3
+              }
+            }
+          }
+        ]
      }
    ]
  }
 })

-const chartOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  animation: {
-    duration: 760,
-    easing: 'easeOutQuart'
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      backgroundColor: 'rgba(255, 255, 255, 0.98)',
-      titleColor: '#0f172a',
-      bodyColor: '#475569',
-      borderColor: 'rgba(148, 163, 184, 0.28)',
-      borderWidth: 1,
-      cornerRadius: 4,
-      padding: 10,
-      displayColors: false,
-      callbacks: {
-        label: (context) => `${context.dataset.label}: ${context.parsed.r}`
-      }
-    }
-  },
-  scales: {
-    r: {
-      min: 0,
-      max: props.max,
-      beginAtZero: true,
-      ticks: {
-        display: false,
-        stepSize: 25
-      },
-      grid: {
-        color: 'rgba(148, 163, 184, 0.22)',
-        circular: false
-      },
-      angleLines: {
-        color: 'rgba(148, 163, 184, 0.18)'
-      },
-      pointLabels: {
-        color: '#475569',
-        padding: 8,
-        font: {
-          size: 11,
-          weight: '700'
-        }
-      }
-    }
+onMounted(() => {
+  renderChart()
+  bindResize()
+})
+
+onBeforeUnmount(() => {
+  unbindResize()
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
  }
-}))
+})
+
+watch(chartOptions, () => {
+  nextTick(renderChart)
+}, { deep: true })
+
+function renderChart() {
+  if (!chartElement.value) {
+    return
+  }
+  if (!chartInstance) {
+    chartInstance = init(chartElement.value, null, { renderer: 'canvas' })
+  }
+  chartInstance.setOption(chartOptions.value, true)
+  chartInstance.resize()
+}
+
+function bindResize() {
+  if (!chartElement.value) {
+    return
+  }
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      chartInstance?.resize()
+    })
+    resizeObserver.observe(chartElement.value)
+  }
+  window.addEventListener('resize', handleResize)
+}
+
+function unbindResize() {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  window.removeEventListener('resize', handleResize)
+}
+
+function handleResize() {
+  chartInstance?.resize()
+}
+
+function formatTooltip() {
+  const rows = normalizedItems.value.map((item) => (
+    `<div class="profile-radar-tooltip-row">`
+    + `<span style="background:${escapeHtml(item.color)}"></span>`
+    + `<em>${escapeHtml(item.label)}</em>`
+    + `<strong>${item.score}</strong>`
+    + `</div>`
+  ))
+  return `<div class="profile-radar-tooltip"><b>${escapeHtml(props.label)}</b>${rows.join('')}</div>`
+}

 function clampScore(value) {
  const score = Number(value || 0)
@@ -120,6 +239,14 @@ function clampScore(value) {
  return Math.max(0, Math.min(props.max, score))
 }

+function normalizeColor(value, index) {
+  const color = String(value || '').trim()
+  if (color) {
+    return color
+  }
+  return DEFAULT_DIMENSION_COLORS[index % DEFAULT_DIMENSION_COLORS.length]
+}
+
 function toRgba(color, alpha) {
  const normalized = String(color || '').trim()
  const hex = normalized.replace('#', '')
@@ -142,6 +269,16 @@ function toRgba(color, alpha) {

  return `rgba(58, 124, 165, ${alpha})`
 }
+
+function escapeHtml(value) {
+  return String(value || '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  })[char])
+}
 </script>

 <style scoped>
@@ -149,6 +286,49 @@ function toRgba(color, alpha) {
  position: relative;
  width: 100%;
  min-width: 0;
-  height: 260px;
+  height: 100%;
+}
+</style>
+
+<style>
+.profile-radar-tooltip {
+  display: grid;
+  gap: 7px;
+  min-width: 150px;
+}
+
+.profile-radar-tooltip b {
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.profile-radar-tooltip-row {
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+}
+
+.profile-radar-tooltip-row span {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.profile-radar-tooltip-row em {
+  overflow: hidden;
+  color: #475569;
+  font-size: 11.5px;
+  font-style: normal;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-radar-tooltip-row strong {
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 850;
 }
 </style>
--- a/web/src/components/charts/TrendChart.vue
+++ b/web/src/components/charts/TrendChart.vue
@@ -5,30 +5,22 @@
      <span><i :style="{ background: chartColors.blue }"></i>审批完成量（单）</span>
      <span><i :style="{ background: chartColors.purple }"></i>平均审批时长（小时）</span>
    </div>
-    <div class="chart-body">
-      <Bar :data="chartData" :options="chartOptions" />
-    </div>
+    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
  </div>
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Bar } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  PointElement,
-  LineElement,
-  Filler,
-  Tooltip,
-  Legend
-} from 'chart.js'
+import { computed, shallowRef } from 'vue'
+import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
 import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+import { useEcharts } from '../../composables/useEcharts.js'
 import { useThemeColors } from '../../composables/useThemeColors.js'

-ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler, Tooltip, Legend)
+use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])

 const props = defineProps({
  labels: { type: Array, required: true },
@@ -37,12 +29,13 @@ const props = defineProps({
  avgHours: { type: Array, required: true }
 })

+const chartElement = shallowRef(null)
 const progress = useAnimationProgress([
  () => props.labels,
  () => props.applications,
  () => props.approved,
  () => props.avgHours
-], 1200)
+], 1100)
 const themeColors = useThemeColors()
 const chartColors = computed(() => ({
  primary: themeColors.value.chartPrimary,
@@ -50,144 +43,152 @@ const chartColors = computed(() => ({
  purple: themeColors.value.chartPurple
 }))

-const scaleSeries = (series, decimals = 0) =>
-  series.map((value) => Number((Number(value) * progress.value).toFixed(decimals)))
+const ariaLabel = computed(() =>
+  props.labels.map((label, index) => (
+    `${label}申请${props.applications[index] || 0}单，审批${props.approved[index] || 0}单，平均${props.avgHours[index] || 0}小时`
+  )).join('；')
+)

-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: [
+const scaleSeries = (series, decimals = 0) =>
+  series.map((value) => {
+    const number = Number(value || 0)
+    if (progress.value >= 0.999) {
+      return number
+    }
+    return Number((number * progress.value).toFixed(decimals))
+  })
+
+const chartOptions = computed(() => ({
+  backgroundColor: 'transparent',
+  animation: false,
+  grid: {
+    top: 18,
+    right: 38,
+    bottom: 22,
+    left: 36,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: true,
+    appendToBody: true,
+    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+    borderColor: 'rgba(148, 163, 184, 0.24)',
+    borderWidth: 1,
+    padding: [9, 10],
+    textStyle: {
+      color: '#334155',
+      fontSize: 12,
+      fontWeight: 700
+    },
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);'
+  },
+  xAxis: {
+    type: 'category',
+    data: props.labels,
+    boundaryGap: true,
+    axisTick: { show: false },
+    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 11,
+      fontWeight: 700
+    }
+  },
+  yAxis: [
    {
-      label: '申请量（单）',
+      type: 'value',
+      min: 0,
+      max: 250,
+      splitNumber: 5,
+      axisLabel: {
+        color: '#64748b',
+        fontSize: 11,
+        fontWeight: 700
+      },
+      splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.75)' } }
+    },
+    {
+      type: 'value',
+      min: 0,
+      max: 15,
+      splitNumber: 5,
+      axisLabel: {
+        color: '#64748b',
+        fontSize: 11,
+        fontWeight: 700
+      },
+      splitLine: { show: false }
+    }
+  ],
+  series: [
+    {
+      name: '申请量（单）',
+      type: 'bar',
      data: scaleSeries(props.applications),
-      backgroundColor: chartColors.value.primary,
-      borderRadius: 4,
-      barPercentage: 0.6,
-      categoryPercentage: 0.5,
-      order: 2
+      barWidth: 12,
+      barGap: '28%',
+      itemStyle: {
+        color: chartColors.value.primary,
+        borderRadius: [4, 4, 0, 0]
+      }
    },
    {
-      label: '审批完成量（单）',
+      name: '审批完成量（单）',
+      type: 'bar',
      data: scaleSeries(props.approved),
-      backgroundColor: chartColors.value.blue,
-      borderRadius: 4,
-      barPercentage: 0.6,
-      categoryPercentage: 0.5,
-      order: 2
+      barWidth: 12,
+      itemStyle: {
+        color: chartColors.value.blue,
+        borderRadius: [4, 4, 0, 0]
+      }
    },
    {
-      label: '平均审批时长（小时）',
-      data: scaleSeries(props.avgHours, 1),
-      borderColor: chartColors.value.purple,
-      backgroundColor: 'transparent',
-      borderWidth: 2,
-      pointBackgroundColor: '#ffffff',
-      pointBorderColor: chartColors.value.purple,
-      pointBorderWidth: 2,
-      pointRadius: 3,
-      pointHoverRadius: 5,
+      name: '平均审批时长（小时）',
      type: 'line',
-      yAxisID: 'y1',
-      order: 1
+      yAxisIndex: 1,
+      data: scaleSeries(props.avgHours, 1),
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 7,
+      lineStyle: {
+        width: 2.5,
+        color: chartColors.value.purple
+      },
+      itemStyle: {
+        color: '#ffffff',
+        borderColor: chartColors.value.purple,
+        borderWidth: 2.5
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: toRgba(chartColors.value.purple, 0.14) },
+            { offset: 1, color: toRgba(chartColors.value.purple, 0.02) }
+          ]
+        }
+      }
    }
  ]
 }))

-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  animation: {
-    duration: 900,
-    easing: 'easeOutQuart'
-  },
-  interaction: {
-    mode: 'index',
-    intersect: false
-  },
-  events: ['click', 'mousemove', 'mouseout'],
-  plugins: {
-    legend: {
-      display: false
-    },
-    tooltip: {
-      enabled: false,
-      external: externalTooltip
-    }
-  },
-  scales: {
-    x: {
-      grid: { display: false },
-      ticks: {
-        color: '#64748b',
-        font: { size: 11 }
-      }
-    },
-    y: {
-      beginAtZero: true,
-      max: 250,
-      grid: { color: '#f1f5f9' },
-      ticks: {
-        color: '#64748b',
-        font: { size: 11 },
-        stepSize: 50
-      }
-    },
-    y1: {
-      position: 'right',
-      beginAtZero: true,
-      max: 15,
-      grid: { display: false },
-      ticks: {
-        color: '#64748b',
-        font: { size: 11 },
-        stepSize: 3
-      }
-    }
+useEcharts(chartElement, chartOptions)
+
+function toRgba(color, alpha) {
+  const normalized = String(color || '').trim()
+  const hex = normalized.replace('#', '')
+  if (/^[\da-f]{6}$/i.test(hex)) {
+    const r = parseInt(hex.slice(0, 2), 16)
+    const g = parseInt(hex.slice(2, 4), 16)
+    const b = parseInt(hex.slice(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
-}
-
-function externalTooltip(context) {
-  const { chart, tooltip } = context
-
-  let el = chart.canvas.parentNode.querySelector('.chart-tooltip')
-  if (!el) {
-    el = document.createElement('div')
-    el.classList.add('chart-tooltip')
-    el.style.cssText =
-      'position:absolute;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;pointer-events:none;transition:opacity .15s,transform .15s;font-family:Inter,system-ui,sans-serif;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.08);z-index:10;opacity:0;transform:translateY(4px)'
-    chart.canvas.parentNode.appendChild(el)
-  }
-
-  if (tooltip.opacity === 0) {
-    el.style.opacity = '0'
-    return
-  }
-
-  if (tooltip.body) {
-    const titleLines = tooltip.title || []
-    const bodyLines = tooltip.body.map((b) => b.lines)
-
-    const colors = tooltip.labelColors
-    const dot = (color, text) =>
-      `<div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0"></span><span style="color:#64748b">${text}</span></div>`
-
-    el.innerHTML =
-      `<div style="font-weight:600;color:#1e293b;margin-bottom:4px">${titleLines.join('')}</div>` +
-      bodyLines
-        .map((lines, i) =>
-          lines.map((line) => dot(colors[i]?.backgroundColor || colors[i]?.borderColor || '#999', line))
-        )
-        .join('')
-  }
-
-  const { offsetLeft, offsetTop } = chart.canvas
-  const left = offsetLeft + tooltip.caretX
-  const top = offsetTop + tooltip.caretY
-
-  el.style.opacity = '1'
-  el.style.transform = 'translateY(0)'
-  el.style.left = `${left}px`
-  el.style.top = `${top - el.offsetHeight - 12}px`
-  el.style.transform = `translate(-50%, 0)`
+  return `rgba(58, 124, 165, ${alpha})`
 }
 </script>

--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -159,7 +159,7 @@ const sidebarMeta = {
  policies: { label: '知识管理' },
  audit: { label: '规则中心' },
  digitalEmployees: { label: '数字员工' },
-  logs: { label: '日志管理' },
+  logs: { label: '系统日志' },
  employees: { label: '员工管理' },
  settings: { label: '系统设置' }
 }
--- a/web/src/components/layout/TopBar.vue
+++ b/web/src/components/layout/TopBar.vue
@@ -290,20 +290,20 @@ const documentKpis = computed(() => {
  ]
 })

-const logsKpis = computed(() => {
-  const summary = props.logsSummary ?? {}
-  const total = Number(summary.total ?? 0)
-  const running = Number(summary.running ?? 0)
-  const completed = Number(summary.completed ?? 0)
-  const failed = Number(summary.failed ?? 0)
-
-  return [
-    { label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: 'var(--theme-primary)' },
-    { label: '运行中', value: running, unit: '条', meta: running > 0 ? '实时执行' : '暂无执行', trend: running > 0 ? 'up' : 'down', color: '#3b82f6' },
-    { label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: 'var(--success)' },
-    { label: '失败数', value: failed, unit: '条', meta: failed > 0 ? '需要关注' : '运行正常', trend: failed > 0 ? 'down' : 'up', color: '#ef4444' }
-  ]
-})
+const logsKpis = computed(() => {
+  const summary = props.logsSummary ?? {}
+  const total = Number(summary.total ?? 0)
+  const errors = Number(summary.errors ?? 0)
+  const warnings = Number(summary.warnings ?? 0)
+  const info = Number(summary.info ?? 0)
+
+  return [
+    { label: '系统日志', value: total, unit: '条', meta: '当前', trend: 'up', color: 'var(--theme-primary)' },
+    { label: '错误数量', value: errors, unit: '条', meta: errors > 0 ? '需要关注' : '运行正常', trend: errors > 0 ? 'down' : 'up', color: '#ef4444' },
+    { label: '告警数量', value: warnings, unit: '条', meta: warnings > 0 ? '建议排查' : '暂无告警', trend: warnings > 0 ? 'down' : 'up', color: '#f59e0b' },
+    { label: '正常数量', value: info, unit: '条', meta: total ? `占比 ${Math.round((info / total) * 100)}%` : '等待数据', trend: 'up', color: 'var(--success)' }
+  ]
+})

 const chatKpis = [
  { label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: 'var(--theme-primary)' },
--- a/web/src/components/travel/BudgetAssistantReport.vue
+++ b/web/src/components/travel/BudgetAssistantReport.vue
@@ -113,19 +113,19 @@ const summaryCards = computed(() => [
    label: '上季度开销',
    value: props.report.summary?.totalSpend || '—',
    hint: '按四类预算口径汇总',
-    color: 'var(--chart-blue)'
+    color: 'var(--theme-secondary)'
  },
  {
    label: '预算使用率',
    value: props.report.summary?.usageRate || '—',
    hint: '未触达风险线',
-    color: 'var(--chart-amber)'
+    color: 'var(--warning)'
  },
  {
    label: '建议编制额',
    value: props.report.summary?.recommendedTotal || '—',
    hint: '含业务增长预留',
-    color: 'var(--chart-purple)'
+    color: 'var(--info)'
  }
 ])
 </script>
@@ -145,9 +145,9 @@ const summaryCards = computed(() => [
 .budget-report-action-panel,
 .budget-report-summary-card {
  border: 1px solid #dbe4ee;
-  border-radius: 8px;
+  border-radius: 4px;
  background: #fff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
 }

 .budget-report-head {
@@ -187,7 +187,7 @@ const summaryCards = computed(() => [
  align-items: center;
  gap: 5px;
  padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 4px;
  background: var(--theme-primary-soft);
  color: var(--theme-primary-active);
  font-size: 12px;
@@ -291,7 +291,7 @@ const summaryCards = computed(() => [
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--accent);
-  border-radius: 8px;
+  border-radius: 4px;
  background: #fbfdff;
  animation: budgetReportItemIn 460ms var(--ease, ease) both;
  animation-delay: var(--delay, 0ms);
@@ -326,7 +326,7 @@ const summaryCards = computed(() => [
 .budget-report-expense-card header em {
  margin-left: auto;
  padding: 1px 7px;
-  border-radius: 999px;
+  border-radius: 4px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
@@ -357,7 +357,7 @@ const summaryCards = computed(() => [
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
-  border-radius: 6px;
+  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
@@ -389,7 +389,7 @@ const summaryCards = computed(() => [

 .budget-report-expense-card li {
  padding: 2px 7px;
-  border-radius: 999px;
+  border-radius: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
 }