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

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

server/src/app/api/v1/endpoints/employee_profiles.py

@@ -3,9 +3,11 @@ from __future__ import annotations
 from typing import Annotated
 
 from fastapi import APIRouter, Depends, Query
+from sqlalchemy import func, or_, select
 from sqlalchemy.orm import Session
 
 from app.api.deps import CurrentUserContext, get_current_user, get_db
+from app.models.employee import Employee
 from app.schemas.employee_profile import EmployeeProfileLatestRead
 from app.services.employee_behavior_profile_service import EmployeeBehaviorProfileService
 
@@ -14,6 +16,53 @@ DbSession = Annotated[Session, Depends(get_db)]
 CurrentUser = Annotated[CurrentUserContext, Depends(get_current_user)]
 
 
+@router.get(
+    "/me/latest",
+    response_model=EmployeeProfileLatestRead,
+    summary="读取当前登录人的最新用户画像",
+    description="按当前登录用户的邮箱或姓名匹配员工目录，返回个人工作台使用的综合用户画像。",
+)
+def get_current_employee_latest_profile(
+    db: DbSession,
+    current_user: CurrentUser,
+    scene: Annotated[str, Query(max_length=50)] = "operations",
+    window_days: Annotated[int, Query(ge=1, le=365)] = 90,
+    expense_type_scope: Annotated[str, Query(max_length=50)] = "overall",
+) -> EmployeeProfileLatestRead:
+    employee = _resolve_current_employee(db, current_user)
+    if employee is None:
+        return EmployeeProfileLatestRead(
+            employee_id=current_user.username,
+            employee_name=current_user.name,
+            scene=scene,
+            window_days=window_days,
+            expense_type_scope=expense_type_scope,
+            empty_reason="当前登录用户未匹配到员工目录，暂无法形成用户画像。",
+        )
+
+    service = EmployeeBehaviorProfileService(db)
+    latest = service.get_latest_profile(
+        employee_id=employee.id,
+        scene=scene,
+        window_days=window_days,
+        expense_type_scope=expense_type_scope,
+    )
+    if latest.empty_reason:
+        service.refresh_employee_profiles(
+            employee_id=employee.id,
+            window_days=(window_days,),
+            expense_type_scope=expense_type_scope,
+            source_task_type="workbench_on_demand",
+        )
+        latest = service.get_latest_profile(
+            employee_id=employee.id,
+            scene=scene,
+            window_days=window_days,
+            expense_type_scope=expense_type_scope,
+        )
+    return latest
+
+
 @router.get(
     "/{employee_id}/latest",
     response_model=EmployeeProfileLatestRead,
@@ -37,3 +86,32 @@ def get_employee_latest_profile(
         window_days=window_days,
         expense_type_scope=expense_type_scope,
     )
+
+
+def _resolve_current_employee(
+    db: Session,
+    current_user: CurrentUserContext,
+) -> Employee | None:
+    identities = [
+        str(current_user.username or "").strip(),
+        str(current_user.name or "").strip(),
+    ]
+    normalized = [item for item in dict.fromkeys(identities) if item]
+    if not normalized:
+        return None
+
+    email_values = [item.lower() for item in normalized if "@" in item]
+    exact_values = [item for item in normalized if "@" not in item]
+    conditions = []
+
+    if email_values:
+        conditions.append(func.lower(Employee.email).in_(email_values))
+    if exact_values:
+        conditions.append(Employee.name.in_(exact_values))
+        conditions.append(Employee.employee_no.in_(exact_values))
+
+    if not conditions:
+        return None
+
+    stmt = select(Employee).where(or_(*conditions)).order_by(Employee.created_at.asc()).limit(1)
+    return db.scalars(stmt).first()

server/src/app/models/system_setting.py

@@ -18,6 +18,7 @@ class SystemSetting(Base):
     company_code: Mapped[str] = mapped_column(String(64), default="XF-001")
     record_number: Mapped[str] = mapped_column(String(120), default="")
     copyright_text: Mapped[str] = mapped_column(String(255), default="")
+    theme_skin: Mapped[str] = mapped_column(String(64), default="sky")
 
     admin_account: Mapped[str] = mapped_column(String(120), default="superadmin")
     admin_email: Mapped[str] = mapped_column(String(255), default="")

server/src/app/schemas/settings.py

@@ -21,6 +21,17 @@ class SettingsCompanyForm(BaseModel):
         return value.strip()
 
 
+class SettingsAppearanceForm(BaseModel):
+    themeSkin: str = Field(default="sky", max_length=64)
+
+    @field_validator("themeSkin", mode="before")
+    @classmethod
+    def strip_string(cls, value: str | None) -> str | None:
+        if value is None:
+            return None
+        return value.strip()
+
+
 class SettingsAdminForm(BaseModel):
     adminAccount: str = Field(min_length=1, max_length=120)
     adminEmail: str = Field(default="", max_length=255)
@@ -162,6 +173,7 @@ class SettingsMailForm(BaseModel):
 
 class SettingsRead(BaseModel):
     companyForm: SettingsCompanyForm
+    appearanceForm: SettingsAppearanceForm = Field(default_factory=SettingsAppearanceForm)
     adminForm: SettingsAdminForm
     sessionForm: SettingsSessionForm
     hermesForm: dict
@@ -173,6 +185,7 @@ class SettingsRead(BaseModel):
 
 class SettingsWrite(BaseModel):
     companyForm: SettingsCompanyForm
+    appearanceForm: SettingsAppearanceForm = Field(default_factory=SettingsAppearanceForm)
     adminForm: SettingsAdminForm
     sessionForm: SettingsSessionForm
     hermesForm: dict

server/src/app/services/employee_behavior_profile_helpers.py

@@ -5,6 +5,7 @@ from collections import defaultdict
 from decimal import Decimal
 from typing import Any
 
+from app.algorithem.employee_behavior_profile import ALGORITHM_VERSION
 from app.models.agent_run import AgentRun
 from app.models.employee import Employee
 from app.models.financial_record import ExpenseClaim
@@ -122,6 +123,33 @@ class EmployeeBehaviorProfileMetricHelpers:
                     return max(1, int(digits))
         return 0
 
+    def _resolve_scope_from_claim(self, claim_id: str | None, expense_type_scope: str) -> str:
+        normalized = str(expense_type_scope or "overall").strip() or "overall"
+        if normalized != "overall" or not claim_id:
+            return normalized
+        claim = self.db.get(ExpenseClaim, claim_id)
+        return str(claim.expense_type or "overall").strip() if claim is not None else normalized
+
+    def _is_claim_in_scope(self, claim: ExpenseClaim, expense_type_scope: str) -> bool:
+        scope = str(expense_type_scope or "overall").strip()
+        if scope == "overall":
+            return True
+        if scope == "entertainment":
+            return claim.expense_type in ENTERTAINMENT_EXPENSE_TYPES
+        if scope == "travel":
+            return claim.expense_type in TRAVEL_EXPENSE_TYPES
+        return claim.expense_type == scope
+
+    def _common_metrics(self, context: dict[str, Any]) -> dict[str, Any]:
+        return {
+            "window_days": context["window_days"],
+            "expense_type_scope": context["expense_type_scope"],
+            "peer_group_key": context["peer_group_key"],
+            "peer_group_fallback_level": context["peer_group_fallback_level"],
+            "peer_sample_size": context["peer_sample_size"],
+            "algorithm_version": ALGORITHM_VERSION,
+        }
+
     def _estimate_tokens(self, runs: list[AgentRun]) -> int:
         total = 0
         for run in runs:

server/src/app/services/employee_behavior_profile_service.py

@@ -33,8 +33,6 @@ from app.schemas.employee_profile import (
     EmployeeProfileRead,
 )
 from app.services.employee_behavior_profile_helpers import (
-    ENTERTAINMENT_EXPENSE_TYPES,
-    TRAVEL_EXPENSE_TYPES,
     EmployeeBehaviorProfileMetricHelpers,
 )
 from app.services.employee_behavior_profile_response import (
@@ -787,30 +785,3 @@ class EmployeeBehaviorProfileService(EmployeeBehaviorProfileMetricHelpers):
         if len({self._claim_employee_key(claim) for claim in department_claims}) >= 3:
             return department_claims, 0
         return claims, 3
-
-    def _resolve_scope_from_claim(self, claim_id: str | None, expense_type_scope: str) -> str:
-        normalized = str(expense_type_scope or "overall").strip() or "overall"
-        if normalized != "overall" or not claim_id:
-            return normalized
-        claim = self.db.get(ExpenseClaim, claim_id)
-        return str(claim.expense_type or "overall").strip() if claim is not None else normalized
-
-    def _is_claim_in_scope(self, claim: ExpenseClaim, expense_type_scope: str) -> bool:
-        scope = str(expense_type_scope or "overall").strip()
-        if scope == "overall":
-            return True
-        if scope == "entertainment":
-            return claim.expense_type in ENTERTAINMENT_EXPENSE_TYPES
-        if scope == "travel":
-            return claim.expense_type in TRAVEL_EXPENSE_TYPES
-        return claim.expense_type == scope
-
-    def _common_metrics(self, context: dict[str, Any]) -> dict[str, Any]:
-        return {
-            "window_days": context["window_days"],
-            "expense_type_scope": context["expense_type_scope"],
-            "peer_group_key": context["peer_group_key"],
-            "peer_group_fallback_level": context["peer_group_fallback_level"],
-            "peer_sample_size": context["peer_sample_size"],
-            "algorithm_version": ALGORITHM_VERSION,
-        }

server/src/app/services/settings.py

@@ -220,6 +220,7 @@ class SettingsService:
         settings_row.company_code = payload.companyForm.companyCode
         settings_row.record_number = payload.companyForm.recordNumber
         settings_row.copyright_text = payload.companyForm.copyright
+        settings_row.theme_skin = payload.appearanceForm.themeSkin
 
         settings_row.admin_account = payload.adminForm.adminAccount
         settings_row.admin_email = payload.adminForm.adminEmail
@@ -462,6 +463,7 @@ class SettingsService:
             company_code=company_code,
             record_number="",
             copyright_text=f"Copyright © 2024-{current_year} {company_name}. All Rights Reserved.",
+            theme_skin="sky",
             admin_account=admin_account,
             admin_email=admin_email,
             session_timeout=30,
@@ -561,6 +563,10 @@ class SettingsService:
                 migration_statements.append(
                     "ALTER TABLE system_settings ADD COLUMN conversation_retention_days INTEGER DEFAULT 3"
                 )
+            if "theme_skin" not in settings_columns:
+                migration_statements.append(
+                    "ALTER TABLE system_settings ADD COLUMN theme_skin VARCHAR(64) DEFAULT 'sky'"
+                )
             if "onlyoffice_enabled" not in settings_columns:
                 migration_statements.append(
                     "ALTER TABLE system_settings ADD COLUMN onlyoffice_enabled BOOLEAN DEFAULT FALSE"
@@ -735,6 +741,9 @@ class SettingsService:
                 "recordNumber": settings_row.record_number,
                 "copyright": settings_row.copyright_text,
             },
+            appearanceForm={
+                "themeSkin": settings_row.theme_skin or "sky",
+            },
             adminForm={
                 "adminAccount": settings_row.admin_account,
                 "adminEmail": settings_row.admin_email,

server/tests/test_employee_behavior_profile_service.py

@@ -234,6 +234,40 @@ def test_latest_profile_endpoint_returns_approval_payload() -> None:
     }
 
 
+def test_current_employee_profile_endpoint_resolves_login_user() -> None:
+    session_factory = build_session_factory()
+    with session_factory() as db:
+        seed_profile_data(db)
+
+    app = create_app()
+
+    def override_db() -> Generator[Session, None, None]:
+        db = session_factory()
+        try:
+            yield db
+        finally:
+            db.close()
+
+    app.dependency_overrides[get_db] = override_db
+    client = TestClient(app)
+    response = client.get(
+        "/api/v1/employee-profiles/me/latest",
+        params={
+            "scene": "operations",
+            "window_days": 90,
+            "expense_type_scope": "overall",
+        },
+        headers={"x-auth-username": "zhangsan@example.com"},
+    )
+
+    assert response.status_code == 200
+    payload = response.json()
+    assert payload["employee_id"] == "emp-main"
+    assert {item["profile_type"] for item in payload["profiles"]} >= {"expense", "ai_usage"}
+    assert payload["profile_tags"]
+    assert payload["radar"]["dimensions"]
+
+
 def test_hermes_scheduler_parses_weekly_profile_cron() -> None:
     scheduler = HermesScheduler()
 

web/package-lock.json

@@ -13,6 +13,7 @@
         "@vitejs/plugin-vue": "^5.2.4",
         "@vueuse/motion": "^3.0.3",
         "chart.js": "^4.5.1",
+        "echarts": "^6.1.0",
         "element-plus": "^2.14.0",
         "markdown-it": "^14.1.1",
         "pg": "^8.13.1",
@@ -2029,6 +2030,22 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.1.0.tgz",
+      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.1.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/element-plus": {
       "version": "2.14.0",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.14.0.tgz",
@@ -3122,6 +3139,21 @@
       "engines": {
         "node": ">=0.4"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.1.0.tgz",
+      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

web/package.json

@@ -15,6 +15,7 @@
     "@vitejs/plugin-vue": "^5.2.4",
     "@vueuse/motion": "^3.0.3",
     "chart.js": "^4.5.1",
+    "echarts": "^6.1.0",
     "element-plus": "^2.14.0",
     "markdown-it": "^14.1.1",
     "pg": "^8.13.1",

web/src/assets/styles/app.css

@@ -24,6 +24,7 @@
   display: flex;
   align-items: stretch;
   background: var(--bg);
+  position: relative;
 }
 
 .app-sidebar {
@@ -57,6 +58,100 @@
   min-width: 0;
 }
 
+.login-entry-veil {
+  position: absolute;
+  inset: 0;
+  z-index: 380;
+  display: grid;
+  place-items: center;
+  background: rgba(248, 250, 252, 0.9);
+  backdrop-filter: blur(3px);
+  pointer-events: none;
+}
+
+.login-entry-card {
+  width: min(360px, calc(100% - 48px));
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 12px 14px;
+  align-items: center;
+  padding: 22px 24px 20px;
+  border: 1px solid rgba(148, 163, 184, 0.26);
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
+  animation: loginEntryCardIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.login-entry-mark {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.2);
+  border-radius: 4px;
+  background: var(--theme-primary-soft);
+  color: var(--theme-primary-active);
+  font-size: 22px;
+}
+
+.login-entry-copy {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.login-entry-copy strong {
+  color: var(--ink);
+  font-size: 16px;
+  line-height: 1.35;
+  font-weight: 750;
+}
+
+.login-entry-copy span {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.login-entry-progress {
+  grid-column: 1 / -1;
+  height: 3px;
+  overflow: hidden;
+  background: #edf2f7;
+}
+
+.login-entry-progress::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--theme-primary);
+  transform-origin: left center;
+  animation: loginEntryProgress 840ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.login-entry-veil-enter-active {
+  transition: opacity 180ms var(--ease);
+}
+
+.login-entry-veil-leave-active {
+  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.login-entry-veil-enter-from,
+.login-entry-veil-leave-to {
+  opacity: 0;
+}
+
+.app.login-entry-active .app-sidebar {
+  animation: loginEntrySidebarIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.app.login-entry-active > .main {
+  animation: loginEntryMainIn 620ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 .boot-state {
   min-height: var(--desktop-stage-height, 100dvh);
   display: grid;
@@ -168,13 +263,59 @@
 .workarea.workbench-workarea {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 12px 14px 14px;
+  padding: 20px 24px;
 }
 .workarea.settings-workarea {
   padding: 0;
   background: #fff;
 }
 
+@keyframes loginEntryCardIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.92, 0.92, 1);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes loginEntryProgress {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes loginEntrySidebarIn {
+  from {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes loginEntryMainIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.985, 0.985, 1) translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1) translateY(0);
+  }
+}
+
 @media (max-width: 1180px) {
   .app-sidebar {
     width: var(--sidebar-expanded-width);
@@ -207,13 +348,17 @@
     transform: translateX(0);
   }
 
+  .app.login-entry-active .app-sidebar {
+    animation: none;
+  }
+
   .app > .main {
     flex: 1 1 100%;
     width: 100vw;
   }
 
-  .workarea { padding: 18px 16px 28px; }
-  .workarea.workbench-workarea { overflow: auto; padding: 14px; }
+  .workarea { padding: 16px; }
+  .workarea.workbench-workarea { overflow: auto; padding: 16px; }
 
   .mobile-overlay {
     position: fixed;
@@ -258,4 +403,16 @@
       flex-basis 120ms ease-out !important;
     transition-duration: 120ms, 120ms !important;
   }
+
+  .login-entry-card,
+  .login-entry-progress::after,
+  .app.login-entry-active .app-sidebar,
+  .app.login-entry-active > .main {
+    animation: none !important;
+  }
+
+  .login-entry-veil-enter-active,
+  .login-entry-veil-leave-active {
+    transition: opacity 120ms ease-out !important;
+  }
 }

web/src/assets/styles/components/digital-employee-work-records.css

@@ -0,0 +1,548 @@
+.digital-work-records {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
+}
+
+.work-records-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
+  align-items: start;
+  gap: 16px;
+}
+
+.work-records-head h3 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 16px;
+}
+
+.work-records-head p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.work-records-kpis {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  justify-self: end;
+  width: min(100%, 480px);
+}
+
+.work-record-kpi {
+  min-height: 58px;
+  padding: 10px 12px;
+  border: 1px solid #dfe7ef;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.work-record-kpi span {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.work-record-kpi strong {
+  display: block;
+  margin-top: 6px;
+  color: #0f172a;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.work-record-kpi.success strong {
+  color: var(--success-active);
+}
+
+.work-record-kpi.danger strong {
+  color: #dc2626;
+}
+
+.work-records-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.work-records-toolbar button {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  border: 1px solid #d8e1eb;
+  border-radius: 4px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.work-records-toolbar button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.work-records-table-wrap {
+  min-height: 400px;
+  overflow: auto;
+  border: 1px solid #edf2f7;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
+}
+
+.work-records-table-wrap.is-empty {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+}
+
+.digital-work-records-table {
+  width: 100%;
+  min-width: 1180px;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.digital-work-records-table .col-time { width: 14%; }
+
+.digital-work-records-table .col-module { width: 12%; }
+
+.digital-work-records-table .col-source { width: 10%; }
+
+.digital-work-records-table .col-status { width: 17%; }
+
+.digital-work-records-table .col-summary { width: 31%; }
+
+.digital-work-records-table .col-trace { width: 16%; }
+
+.digital-work-records-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 13px 12px;
+  border-bottom: 1px solid #edf2f7;
+  background: #f7fafc;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.35;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.digital-work-records-table tbody td {
+  padding: 13px 12px;
+  border-bottom: 1px solid #edf2f7;
+  color: #24324a;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.digital-work-records-table tbody tr {
+  cursor: pointer;
+  outline: none;
+}
+
+.digital-work-records-table tbody tr:hover,
+.digital-work-records-table tbody tr:focus-visible {
+  background: linear-gradient(90deg, rgba(58, 124, 165, .08), rgba(58, 124, 165, .03));
+}
+
+.digital-work-records-table tbody tr:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(58, 124, 165, .28);
+}
+
+.digital-work-records-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.work-record-status-stack {
+  display: grid;
+  gap: 5px;
+  justify-items: center;
+}
+
+.work-record-status-stack > span:last-child {
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.work-record-summary-cell {
+  text-align: left !important;
+}
+
+.work-record-summary-cell strong,
+.work-record-summary-cell span,
+.work-record-summary-cell em {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.work-record-summary-cell strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.work-record-summary-cell span {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.work-record-summary-cell em {
+  margin-top: 6px;
+  color: #94a3b8;
+  font-size: 12px;
+  font-style: normal;
+  white-space: nowrap;
+}
+
+.work-record-trace-cell {
+  color: #2563eb !important;
+  word-break: break-all;
+}
+
+.status-pill {
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.status-pill.success {
+  border-color: var(--success-line);
+  background: var(--success-soft);
+  color: var(--success-active);
+}
+
+.status-pill.warning {
+  border-color: #fed7aa;
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.status-pill.danger {
+  border-color: #fecaca;
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.status-pill.info {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.status-pill.muted {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.table-state,
+.work-records-empty {
+  width: 100%;
+  min-height: 260px;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 28px 20px;
+  color: #64748b;
+  font-size: 13px;
+  text-align: center;
+}
+
+.table-state.error {
+  background: linear-gradient(180deg, #fffdfd 0%, #fff6f6 100%);
+}
+
+.table-state.error .mdi {
+  color: #ef4444;
+  font-size: 28px;
+}
+
+.table-state.error strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.table-state.error p {
+  margin: 0;
+}
+
+.work-record-detail-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 2800;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(15, 23, 42, .28);
+}
+
+.work-record-detail-panel {
+  width: min(720px, calc(100vw - 32px));
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  border-left: 1px solid #dfe7ef;
+  background: #fff;
+  box-shadow: -18px 0 42px rgba(15, 23, 42, .18);
+}
+
+.work-record-detail-head {
+  min-height: 76px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 16px 18px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.work-record-detail-head span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.work-record-detail-head h3 {
+  margin: 5px 0 0;
+  color: #0f172a;
+  font-size: 17px;
+  line-height: 1.35;
+}
+
+.work-record-detail-head button {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid #d8e1eb;
+  border-radius: 4px;
+  background: #fff;
+  color: #64748b;
+}
+
+.work-record-detail-head button:hover {
+  color: var(--theme-primary-active);
+}
+
+.work-record-detail-body {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 16px 18px 22px;
+  overflow-y: auto;
+  background: #f8fafc;
+}
+
+.work-record-detail-section,
+.work-record-detail-state {
+  border: 1px solid #e5edf5;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.work-record-detail-section {
+  padding: 14px;
+}
+
+.work-record-detail-state {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 30px 18px;
+  color: #64748b;
+  text-align: center;
+}
+
+.work-record-detail-state.error .mdi {
+  color: #dc2626;
+  font-size: 30px;
+}
+
+.work-record-detail-state.error strong {
+  color: #0f172a;
+}
+
+.work-record-detail-state.error p {
+  margin: 0;
+}
+
+.work-record-detail-state.error button {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  background: #fff;
+  color: #dc2626;
+  font-weight: 750;
+}
+
+.work-record-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.work-record-section-head h4 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.work-record-section-head > span:not(.status-pill) {
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.work-record-info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.work-record-info-grid div {
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid #edf2f7;
+  border-radius: 4px;
+  background: #f8fafc;
+}
+
+.work-record-info-grid span {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.work-record-info-grid strong {
+  display: block;
+  margin-top: 5px;
+  overflow-wrap: anywhere;
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.work-record-result-text,
+.work-record-error-text,
+.work-record-inline-empty {
+  margin: 0;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.work-record-error-text {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.work-record-tool-list {
+  display: grid;
+  gap: 8px;
+}
+
+.work-record-tool-list article {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid #edf2f7;
+  border-radius: 4px;
+  background: #f8fafc;
+}
+
+.work-record-tool-list strong {
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.work-record-tool-list span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.work-record-code-block {
+  max-height: 320px;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.work-record-detail-enter-active,
+.work-record-detail-leave-active {
+  transition: opacity 180ms ease;
+}
+
+.work-record-detail-enter-active .work-record-detail-panel,
+.work-record-detail-leave-active .work-record-detail-panel {
+  transition: transform 220ms ease;
+}
+
+.work-record-detail-enter-from,
+.work-record-detail-leave-to {
+  opacity: 0;
+}
+
+.work-record-detail-enter-from .work-record-detail-panel,
+.work-record-detail-leave-to .work-record-detail-panel {
+  transform: translateX(24px);
+}
+
+@media (max-width: 980px) {
+  .work-records-head {
+    grid-template-columns: 1fr;
+  }
+
+  .work-records-kpis {
+    justify-self: stretch;
+    width: 100%;
+  }
+
+  .work-record-info-grid {
+    grid-template-columns: 1fr;
+  }
+}

web/src/assets/styles/components/personal-workbench-responsive.css

@@ -2,7 +2,7 @@
 @media (max-height: 980px) and (min-width: 761px) {
   .workbench {
     --hero-padding-top: 20px;
-    --hero-padding-bottom: 12px;
+    --hero-padding-bottom: 20px;
     --hero-title-size: 28px;
     --hero-copy-gap: 5px;
     --hero-title-bottom-gap: 14px;
@@ -44,6 +44,7 @@
 @media (min-width: 1920px) and (max-height: 1100px) {
   .workbench {
     --hero-padding-top: 22px;
+    --hero-padding-bottom: 22px;
     --hero-title-size: 29px;
     --composer-min-height: 114px;
     --composer-textarea-height: 50px;
@@ -116,8 +117,10 @@
     --assistant-art-x: 36px;
     --assistant-art-y: -8px;
     background:
-      linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 56%, rgba(255, 255, 255, 0.22) 100%),
-      linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--workbench-primary-soft) 48%, #ffffff) 58%, color-mix(in srgb, var(--workbench-secondary) 8%, #ffffff) 100%);
+      linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 56%, rgba(255, 255, 255, 0.22) 100%),
+      linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, color-mix(in srgb, var(--workbench-primary-soft) 40%, rgba(255, 255, 255, 0.5)) 58%, color-mix(in srgb, var(--workbench-secondary) 15%, rgba(255, 255, 255, 0.1)) 100%);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
   }
 
   .assistant-copy {
@@ -154,10 +157,12 @@
     --assistant-art-width: min(380px, 78vw);
     --assistant-art-x: 12px;
     --assistant-art-y: -6px;
-    padding: 24px 18px 20px;
+    padding: 24px 18px 24px;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.94) 100%),
-      color-mix(in srgb, var(--workbench-primary-soft) 22%, #ffffff);
+      linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 100%),
+      color-mix(in srgb, var(--workbench-primary-soft) 22%, rgba(255, 255, 255, 0.5));
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
   }
 
   .assistant-copy {
@@ -259,7 +264,7 @@
 
   .assistant-hero {
     --assistant-art-width: min(280px, 70vw);
-    padding: 20px 14px 16px;
+    padding: 20px 14px 20px;
   }
 }
 

web/src/assets/styles/components/personal-workbench.css

@@ -1,6 +1,6 @@
 .workbench {
   --hero-padding-top: 26px;
-  --hero-padding-bottom: 14px;
+  --hero-padding-bottom: 26px;
   --hero-title-size: 30px;
   --hero-copy-gap: 6px;
   --hero-title-bottom-gap: 18px;
@@ -64,9 +64,11 @@
   border: 1px solid color-mix(in srgb, var(--workbench-primary) 14%, var(--workbench-line));
   border-radius: 4px;
   background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 44%, rgba(255, 255, 255, 0.16) 66%, rgba(255, 255, 255, 0.02) 100%),
-    linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--workbench-primary-soft) 56%, #ffffff) 62%, color-mix(in srgb, var(--workbench-secondary) 8%, #ffffff) 100%);
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 44%, rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0.05) 100%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, color-mix(in srgb, var(--workbench-primary-soft) 40%, rgba(255, 255, 255, 0.5)) 62%, color-mix(in srgb, var(--workbench-secondary) 15%, rgba(255, 255, 255, 0.1)) 100%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
   isolation: isolate;
 }
 

web/src/assets/styles/global.css

@@ -182,3 +182,22 @@ h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; fon
     transform: rotate(360deg);
   }
 }
+
+/* Global Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

web/src/assets/styles/views/budget-center-dialog.css

@@ -20,9 +20,9 @@
   max-height: calc(100vh - 56px);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
-  box-shadow: 0 24px 72px rgba(15, 23, 42, .28);
+  box-shadow: 0 18px 54px rgba(15, 23, 42, .2);
   overflow: hidden;
 }
 
@@ -47,7 +47,7 @@
   display: grid;
   place-items: center;
   border: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: transparent;
   color: #64748b;
   font-size: 20px;
@@ -118,7 +118,7 @@
 .budget-edit-table input {
   width: 100%;
   border: 1px solid #dbe4ee;
-  border-radius: 6px;
+  border-radius: 4px;
   background: #fff;
   color: #111827;
   font-size: 14px;
@@ -161,7 +161,7 @@
 
 .budget-edit-table-wrap {
   border: 1px solid #edf1f6;
-  border-radius: 8px;
+  border-radius: 4px;
   overflow-x: auto;
   overflow-y: auto;
   flex: 1;
@@ -229,7 +229,7 @@
   display: inline-grid;
   place-items: center;
   border: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: transparent;
   color: #64748b;
   font-size: 18px;
@@ -249,7 +249,7 @@
   align-items: center;
   gap: 5px;
   border: 1px solid rgba(var(--theme-primary-rgb), .42);
-  border-radius: 6px;
+  border-radius: 4px;
   background: #fff;
   color: var(--theme-primary-active);
   font-size: 13px;
@@ -267,7 +267,7 @@
   gap: 12px;
   align-items: center;
   border: 1px solid #edf1f6;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fbfcfe;
   flex-shrink: 0;
 }
@@ -297,7 +297,7 @@
 .budget-edit-foot button {
   height: 36px;
   min-width: 96px;
-  border-radius: 8px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 800;
   cursor: pointer;
@@ -317,9 +317,9 @@
 
 .budget-edit-publish {
   border: 0;
-  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
+  background: var(--theme-primary-active);
   color: #fff;
-  box-shadow: 0 10px 24px var(--theme-primary-shadow);
+  box-shadow: none;
 }
 
 .budget-dialog-fade-enter-active,
@@ -329,7 +329,7 @@
 
 .budget-dialog-fade-enter-active .budget-edit-dialog,
 .budget-dialog-fade-leave-active .budget-edit-dialog {
-  transition: transform 200ms ease, opacity 180ms ease;
+  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
 }
 
 .budget-dialog-fade-enter-from,
@@ -340,7 +340,7 @@
 .budget-dialog-fade-enter-from .budget-edit-dialog,
 .budget-dialog-fade-leave-to .budget-edit-dialog {
   opacity: 0;
-  transform: translateY(12px);
+  transform: scale3d(.96, .96, 1);
 }
 
 @media (max-width: 860px) {

web/src/assets/styles/views/budget-center-view.css

@@ -22,7 +22,7 @@
   flex-direction: column;
   border: 1px solid #dbe4ee;
   border-left: 3px solid var(--accent);
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
   animation: dashboardItemIn 520ms var(--ease) both;
@@ -31,7 +31,7 @@
 }
 
 .budget-summary-card:hover {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, .055);
   transform: translateY(-1px);
 }
 
@@ -58,7 +58,7 @@
 .summary-icon {
   width: 26px;
   height: 26px;
-  border-radius: 7px;
+  border-radius: 4px;
   display: grid;
   place-items: center;
   background: color-mix(in srgb, var(--accent) 10%, white);
@@ -145,7 +145,7 @@
 
 .budget-filter-bar {
   border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
   padding: 14px 16px;
   display: flex;
@@ -180,8 +180,8 @@
 .budget-primary-btn {
   min-height: 40px;
   border: 0;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
+  border-radius: 4px;
+  background: var(--theme-primary-active);
   color: #fff;
   padding: 0 18px;
   display: inline-flex;
@@ -192,20 +192,19 @@
   font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
-  box-shadow: 0 10px 24px var(--theme-primary-shadow);
-  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
+  box-shadow: none;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
 }
 
 .budget-primary-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), .24);
-  filter: saturate(1.02);
+  background: var(--theme-primary-hover);
+  box-shadow: none;
 }
 
 .budget-ghost-btn {
   min-height: 38px;
   border: 1px solid #d7e0ea;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
   color: #334155;
   padding: 0 14px;
@@ -217,13 +216,13 @@
   font-weight: 750;
   white-space: nowrap;
   cursor: pointer;
-  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
+  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
 }
 
 .budget-ghost-btn:hover {
   border-color: rgba(var(--theme-primary-rgb), .32);
+  background: var(--theme-primary-soft);
   color: var(--theme-primary-active);
-  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
 }
 
 .budget-work-grid {
@@ -241,7 +240,7 @@
 .budget-chart-panel,
 .budget-alert-panel {
   border: 1px solid #e5eaf1;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
   overflow: hidden;
 }
@@ -266,66 +265,25 @@
 }
 
 .budget-table-search {
-  position: relative;
   width: min(260px, 42%);
   min-width: 190px;
-  display: flex;
-  align-items: center;
 }
 
-.budget-table-search i {
-  position: absolute;
-  left: 11px;
-  color: #94a3b8;
-  font-size: 15px;
-  pointer-events: none;
-}
-
-.budget-table-search input {
-  width: 100%;
-  height: 32px;
-  border: 1px solid #dbe4ee;
-  border-radius: 6px;
-  padding: 0 11px 0 32px;
-  background: #fff;
-  color: #1f2937;
-  font-size: 13px;
-  font-weight: 650;
-  outline: none;
-  transition: border-color 160ms ease, box-shadow 160ms ease;
-}
-
-.budget-table-search input::placeholder {
-  color: #94a3b8;
-  font-weight: 500;
-}
-
-.budget-table-search input:focus {
-  border-color: rgba(var(--theme-primary-rgb), .48);
-  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .1);
-}
-
-.department-search {
-  position: relative;
+.department-search-input {
+  width: calc(100% - 28px);
   margin: 12px 14px 8px;
 }
 
-.department-search i {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #9aa5b5;
+.budget-table-search :deep(.el-input__wrapper),
+.department-search-input :deep(.el-input__wrapper) {
+  min-height: 34px;
+  border-radius: 4px;
+  background: #fff;
 }
 
-.department-search input {
-  width: 100%;
-  height: 36px;
-  border: 1px solid #e2e8f0;
-  border-radius: 5px;
-  padding: 0 12px 0 34px;
-  background: #fff;
-  color: #1f2937;
+.budget-table-search :deep(.el-input__prefix),
+.department-search-input :deep(.el-input__prefix) {
+  color: #94a3b8;
 }
 
 .department-list {
@@ -334,73 +292,107 @@
   padding: 8px 12px 16px;
 }
 
-.department-list button {
+.department-switch-btn {
+  width: 100%;
   height: 38px;
   border: 0;
-  border-radius: 5px;
+  border-radius: 4px;
   background: transparent;
   color: #4b5563;
   padding: 0 12px;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 10px;
   font-size: 14px;
   font-weight: 700;
   text-align: left;
+  margin-left: 0;
+  transition:
+    background 160ms ease,
+    color 160ms ease;
 }
 
-.department-list button.active {
+.department-switch-btn.active {
   background: var(--theme-primary-soft);
   color: var(--theme-primary-active);
 }
 
+.department-switch-btn + .department-switch-btn {
+  margin-left: 0;
+}
+
 .budget-table-wrap {
-  overflow-x: auto;
-}
-
-.budget-table-panel table {
   width: 100%;
-  min-width: 1460px;
-  border-collapse: collapse;
+  overflow-x: auto;
+  padding-bottom: 8px;
 }
 
-.budget-table-panel th,
-.budget-table-panel td {
-  padding: 13px 18px;
-  border-bottom: 1px solid #edf1f6;
-  border-right: 1px solid #edf1f6;
+.budget-data-table {
+  width: 100%;
+  min-width: 1540px;
+}
+
+.budget-table-wrap :deep(.el-table) {
+  --el-table-border-color: #edf1f6;
+  --el-table-header-bg-color: #f8fafc;
+  --el-table-row-hover-bg-color: var(--theme-primary-soft);
+  --el-table-current-row-bg-color: var(--theme-primary-soft);
   color: #273142;
   font-size: 14px;
-  text-align: center;
-  white-space: nowrap;
 }
 
-.budget-table-panel th:last-child,
-.budget-table-panel td:last-child {
-  border-right: 0;
+.budget-table-wrap :deep(.el-table .el-scrollbar__bar.is-horizontal) {
+  display: none !important;
 }
 
-.budget-table-panel th {
-  background: #fafbfd;
+.budget-table-wrap :deep(.el-table__inner-wrapper::before),
+.budget-table-wrap :deep(.el-table__border-left-patch) {
+  display: none;
+}
+
+.budget-table-wrap :deep(.el-table th.el-table__cell) {
+  background: #f8fafc;
   color: #1f2937;
   font-weight: 800;
 }
 
+.budget-table-wrap :deep(.el-table td.el-table__cell) {
+  color: #273142;
+}
+
+.budget-table-wrap :deep(.el-table .cell) {
+  padding: 0 12px;
+  white-space: nowrap;
+}
+
+.budget-table-wrap :deep(.el-table--border .el-table__cell) {
+  border-right-color: #edf1f6;
+}
+
 .budget-rate {
-  width: 96px;
-  display: grid;
-  gap: 6px;
+  width: 100%;
+  max-width: 110px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin: 0 auto;
 }
 
 .budget-rate span {
+  flex: 0 0 auto;
   color: #273142;
   font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  min-width: 32px;
 }
 
 .budget-rate div {
+  flex: 1;
+  min-width: 0;
   height: 6px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #e9edf3;
   overflow: hidden;
 }
@@ -423,26 +415,21 @@
   background: var(--danger);
 }
 
-.budget-threshold-cell {
-  padding-left: 12px !important;
-  padding-right: 12px !important;
-}
-
 .budget-threshold-badge {
   min-width: 58px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 4px 9px;
-  border-radius: 999px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 800;
   line-height: 1.2;
 }
 
 .budget-threshold-badge.reminder {
-  background: rgba(37, 99, 235, .1);
-  color: #2563eb;
+  background: var(--theme-primary-soft);
+  color: var(--theme-primary-active);
 }
 
 .budget-threshold-badge.alert {
@@ -476,35 +463,37 @@
   gap: 6px;
   padding: 4px;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: 4px;
   background: #f8fafc;
 }
 
-.budget-pager button {
-  width: 32px;
+.budget-pager :deep(.btn-prev),
+.budget-pager :deep(.btn-next),
+.budget-pager :deep(.el-pager li) {
+  min-width: 32px;
   height: 32px;
-  border: 0;
-  border-radius: 9px;
+  border-radius: 4px;
   background: transparent;
   color: #334155;
   font-size: 14px;
   font-weight: 800;
-  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
+  transition: background 160ms ease, color 160ms ease;
 }
 
-.budget-pager button:hover:not(.active):not(:disabled) {
+.budget-pager :deep(.btn-prev:hover:not(:disabled)),
+.budget-pager :deep(.btn-next:hover:not(:disabled)),
+.budget-pager :deep(.el-pager li:hover:not(.is-active)) {
   background: #fff;
   color: var(--theme-primary-active);
-  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
 }
 
-.budget-pager button.active {
+.budget-pager :deep(.el-pager li.is-active) {
   background: var(--theme-primary-active);
   color: #fff;
-  box-shadow: 0 8px 16px var(--theme-primary-shadow);
 }
 
-.budget-pager button:disabled {
+.budget-pager :deep(.btn-prev:disabled),
+.budget-pager :deep(.btn-next:disabled) {
   color: #94a3b8;
   cursor: not-allowed;
 }
@@ -518,7 +507,7 @@
   gap: 9px;
   padding: 0 14px;
   border: 1px solid #d7e0ea;
-  border-radius: 10px;
+  border-radius: 4px;
   background: #fff;
   color: #334155;
   font-size: 14px;
@@ -539,14 +528,20 @@
   gap: 10px;
 }
 
-.budget-card-head button {
-  border: 0;
-  background: transparent;
+.budget-link-btn {
+  height: 30px;
+  padding: 0 8px;
+  border-radius: 4px;
   color: var(--theme-primary-active);
   font-size: 14px;
   font-weight: 800;
 }
 
+.budget-link-btn:hover {
+  background: var(--theme-primary-soft);
+  color: var(--theme-primary-active);
+}
+
 .budget-chart-legend {
   display: flex;
   align-items: center;
@@ -603,7 +598,7 @@
 .budget-alert-empty-icon {
   width: 44px;
   height: 44px;
-  border-radius: 8px;
+  border-radius: 4px;
   display: grid;
   place-items: center;
   background: var(--theme-primary-soft);
@@ -641,7 +636,7 @@
 .budget-alert-row i {
   width: 8px;
   height: 8px;
-  border-radius: 999px;
+  border-radius: 2px;
 }
 
 .budget-alert-row i.danger {

web/src/assets/styles/views/digital-employees-view.css

@@ -7,6 +7,10 @@
   height: 100%;
 }
 
+.digital-employees-list > .status-tabs {
+  flex: 0 0 auto;
+}
+
 .digital-employees-list .table-wrap {
   min-height: 0;
 }
@@ -73,6 +77,10 @@
   color: #ea580c;
 }
 
+.digital-work-records-section {
+  min-height: 0;
+}
+
 @media (max-width: 980px) {
   .digital-employees-table {
     min-width: 1040px;

web/src/assets/styles/views/employee-management-view.css

@@ -604,7 +604,7 @@ tbody tr:last-child td {
   height: 38px;
   display: grid;
   place-items: center;
-  border-radius: 11px;
+  border-radius: 999px;
   background: var(--theme-gradient-primary);
   color: #fff;
   font-size: 13px;
@@ -714,7 +714,7 @@ tbody tr:last-child td {
   height: 64px;
   display: grid;
   place-items: center;
-  border-radius: var(--employee-detail-radius);
+  border-radius: 999px;
   background: var(--theme-gradient-primary);
   color: #fff;
   font-size: 24px;

web/src/assets/styles/views/travel-request-detail-view-part2.css

@@ -1,4 +1,4 @@
-.validation-pill.pending {
+.validation-pill.pending {
   background: #fff7ed;
   border-color: #fed7aa;
   color: #c2410c;
@@ -50,7 +50,7 @@
   content: '';
   width: 6px;
   height: 6px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: var(--success);
   box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.12);
 }
@@ -96,7 +96,7 @@
   display: inline-flex;
   align-items: center;
   padding: 0 8px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fef2f2;
   color: #b91c1c;
   font-size: 10px;
@@ -140,7 +140,7 @@
   display: grid;
   gap: 4px;
   padding: 8px 9px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #f8fafc;
 }
 
@@ -172,7 +172,7 @@
   display: inline-flex;
   align-items: center;
   padding: 0 9px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fee2e2;
   color: #b91c1c;
   font-size: 11px;
@@ -221,7 +221,7 @@
   display: grid;
   gap: 6px;
   padding: 10px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: rgba(255, 255, 255, .72);
 }
 
@@ -267,7 +267,7 @@
   max-height: 960px;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
-  border-radius: 28px;
+  border-radius: 4px;
   background: #f8fafc;
   box-shadow:
     0 0 0 1px rgba(15, 23, 42, .08),
@@ -286,7 +286,7 @@
   justify-content: space-between;
   gap: 20px;
   padding: 24px 28px;
-  background: linear-gradient(135deg, #fff 0%, #f9fbff 100%);
+  background: #fff;
   border-bottom: 1px solid #e8eef6;
 }
 
@@ -298,7 +298,7 @@
 
 .req-badge {
   padding: 6px 14px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #eff6ff;
   border: 1px solid rgba(29, 78, 216, .16);
   color: #1d4ed8;
@@ -332,7 +332,7 @@
   display: grid;
   place-items: center;
   border: 1px solid #e2e8f0;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fff;
   color: #64748b;
   font-size: 18px;
@@ -363,7 +363,7 @@
 .ai-chat-card,
 .ai-preview-card {
   min-height: 0;
-  border-radius: 22px;
+  border-radius: 4px;
   background: #fff;
   border: 1px solid #edf2f7;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
@@ -382,9 +382,7 @@
   gap: 12px;
   padding: 18px;
   overflow: auto;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--theme-primary-soft) 55%, transparent) 0%, rgba(255, 255, 255, 0) 140px),
-    #fff;
+  background: #fff;
 }
 
 .ai-chat-bubble {
@@ -423,7 +421,7 @@
 .ai-chat-content {
   max-width: min(100%, 640px);
   padding: 12px 14px;
-  border-radius: 18px;
+  border-radius: 4px;
   background: #f8fafc;
   border: 1px solid #edf2f7;
 }
@@ -449,7 +447,7 @@
   gap: 12px;
   padding: 14px 16px 16px;
   border-top: 1px solid #edf2f7;
-  background: linear-gradient(180deg, #fff, #fbfdff);
+  background: #fff;
 }
 
 .ai-file-input {
@@ -464,8 +462,8 @@
   gap: 12px;
   padding: 8px 8px 8px 14px;
   border: 1px solid #cbd8e5;
-  border-radius: 22px;
-  background: linear-gradient(180deg, #fff, #fbfdff);
+  border-radius: 4px;
+  background: #fff;
   box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
@@ -514,7 +512,7 @@
   gap: 6px;
   min-height: 32px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #eef6ff;
   border: 1px solid #d7e8fb;
   color: #334155;
@@ -533,7 +531,7 @@
   display: grid;
   place-items: center;
   padding: 0;
-  border-radius: 12px;
+  border-radius: 4px;
   font-size: 20px;
   transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
 }
@@ -602,7 +600,7 @@
 
 .preview-field {
   padding: 12px 14px;
-  border-radius: 18px;
+  border-radius: 4px;
   background: #f8fafc;
   border: 1px solid #edf2f7;
 }
@@ -643,7 +641,7 @@
   gap: 10px;
   padding: 24px;
   border: 1px dashed #cbd5e1;
-  border-radius: 20px;
+  border-radius: 4px;
   color: #94a3b8;
   text-align: center;
 }
@@ -667,7 +665,7 @@
   justify-content: center;
   gap: 7px;
   padding: 0 20px;
-  border-radius: 999px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 800;
   transition: all 180ms ease;
@@ -893,7 +891,7 @@
     width: min(calc(100vw - 28px), 920px);
     max-height: calc(100vh - 28px);
     padding: 18px;
-    border-radius: 20px;
+    border-radius: 4px;
   }
 
   .attachment-preview-head {
@@ -950,7 +948,7 @@
   display: inline-flex;
   align-items: center;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 4px;
   border: 1px solid transparent;
   font-size: 11px;
   font-weight: 800;

web/src/assets/styles/views/travel-request-detail-view.css

@@ -1,4 +1,4 @@
-.approval-page {
+.approval-page {
   width: 100%;
   height: 100%;
   min-height: 0;
@@ -35,17 +35,14 @@
   gap: 10px;
   padding: 18px 24px 18px;
   border: 1px solid #edf2f7;
-  background:
-    radial-gradient(circle at 100% 100%, rgba(45, 212, 191, .18), transparent 18%),
-    radial-gradient(circle at 92% 92%, rgba(125, 211, 252, .14), transparent 24%),
-    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  background: #fff;
   overflow: visible;
 }
 
 .progress-card {
   padding: 18px 22px 20px;
   border: 1px solid #edf2f7;
-  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  background: #fff;
 }
 
 .hero-banner {
@@ -75,7 +72,7 @@
   overflow: hidden;
   border: 1px solid #e2e8f0;
   border-radius: 999px;
-  background: linear-gradient(180deg, #eff6ff 0%, #ecfeff 100%);
+  background: #f8fafc;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
 }
 
@@ -111,7 +108,7 @@
   align-items: center;
   min-height: 24px;
   padding: 0 9px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: var(--theme-primary-soft);
   border: 1px solid rgba(var(--theme-primary-rgb), .16);
   color: var(--theme-primary-active);
@@ -156,7 +153,7 @@
 }
 
 .applicant-profile-meta__role .applicant-meta-item + .applicant-meta-item::before {
-  content: "•";
+  content: "/";
   position: absolute;
   left: -10px;
   color: #cbd5e1;
@@ -401,7 +398,7 @@
   justify-content: center;
   padding: 0 9px;
   border: 1px solid #e2e8f0;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #f8fafc;
   color: #64748b;
   font-size: 11px;
@@ -525,7 +522,7 @@
   gap: 6px;
   padding: 0 14px;
   border: 1px solid #dbe4ee;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #f8fafc;
   color: #0f172a;
   font-size: 13px;
@@ -552,7 +549,7 @@
   min-width: 102px;
   min-height: 34px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: var(--theme-primary-soft);
   color: var(--theme-primary-active);
   font-size: 14px;
@@ -564,7 +561,7 @@
   min-height: 84px;
   resize: none;
   border: 1px solid #d7e0ea;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 12px;
   font-size: 13px;
   line-height: 1.5;
@@ -574,8 +571,8 @@
   min-height: 84px;
   padding: 12px 14px;
   border: 1px solid #d7e0ea;
-  border-radius: 8px;
-  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
+  border-radius: 4px;
+  background: #f8fafc;
   color: #334155;
   font-size: 13px;
   line-height: 1.7;
@@ -598,7 +595,7 @@
   margin-top: 4px;
   overflow: hidden;
   border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
 }
 
@@ -751,7 +748,7 @@
   gap: 8px;
   padding: 12px 14px;
   border: 1px solid #dbe4ee;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #ffffff;
 }
 
@@ -920,7 +917,7 @@
   min-height: 34px;
   padding: 0 10px;
   border: 1px solid #d7e0ea;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #fff;
   color: #0f172a;
   font-size: 12px;
@@ -938,7 +935,7 @@
   display: grid;
   place-items: center;
   border: 1px solid #d7e0ea;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #f8fafc;
   color: #334155;
   font-size: 12px;
@@ -1008,7 +1005,7 @@
   align-items: center;
   margin-top: 6px;
   padding: 2px 8px;
-  border-radius: 999px;
+  border-radius: 4px;
   font-size: 11px;
   font-weight: 800;
   white-space: nowrap;
@@ -1032,7 +1029,7 @@
   margin-top: 12px;
   padding: 12px 14px;
   border: 1px solid rgba(var(--theme-primary-rgb), .22);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--theme-primary-soft);
   color: var(--theme-primary-active);
 }
@@ -1090,7 +1087,7 @@
   align-items: center;
   justify-content: center;
   padding: 4px 10px;
-  border-radius: 999px;
+  border-radius: 4px;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.2;
@@ -1142,7 +1139,7 @@
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 999px;
+  border-radius: 4px;
   font-size: 14px;
   font-weight: 800;
 }
@@ -1179,7 +1176,7 @@
   min-height: 28px;
   padding: 0 10px;
   border: 1px solid #dbe4ee;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fff;
   color: #334155;
   font-size: 11px;
@@ -1232,7 +1229,7 @@
   gap: 5px;
   min-height: 28px;
   padding: 0 9px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--success-soft);
   color: var(--success-hover);
   font-size: 11px;
@@ -1247,7 +1244,7 @@
   gap: 5px;
   min-height: 28px;
   padding: 0 9px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--success-soft);
   color: var(--success-hover);
   font-size: 11px;
@@ -1339,10 +1336,8 @@
   gap: 14px;
   padding: 22px;
   border: 1px solid rgba(var(--theme-primary-rgb), .14);
-  border-radius: 24px;
-  background:
-    radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), .12), transparent 36%),
-    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 252, .98));
+  border-radius: 4px;
+  background: #fff;
   box-shadow: 0 28px 56px rgba(15, 23, 42, .2);
 }
 
@@ -1368,7 +1363,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid #d7e0ea;
-  border-radius: 999px;
+  border-radius: 4px;
   background: rgba(255, 255, 255, .9);
   color: #475569;
 }
@@ -1391,7 +1386,7 @@
   align-items: center;
   min-height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: var(--theme-primary-soft);
   color: var(--theme-primary-active);
   font-size: 12px;
@@ -1420,9 +1415,9 @@
 .attachment-insight-pane {
   min-height: 0;
   border: 1px solid #e2e8f0;
-  border-radius: 20px;
+  border-radius: 4px;
   overflow: hidden;
-  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+  background: #f8fafc;
 }
 
 .attachment-source-pane {
@@ -1485,7 +1480,7 @@
   display: grid;
   gap: 8px;
   padding: 12px;
-  border-radius: 14px;
+  border-radius: 4px;
   background: #f8fafc;
 }
 
@@ -1504,7 +1499,7 @@
   gap: 6px;
   padding: 10px;
   border: 1px solid #fee2e2;
-  border-radius: 12px;
+  border-radius: 4px;
   background: #fff7f7;
 }
 
@@ -1572,7 +1567,7 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  border-radius: 8px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 760;
 }
@@ -1632,7 +1627,7 @@
   gap: 8px;
   padding: 12px 14px;
   border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: #f8fafc;
 }
 
@@ -1681,7 +1676,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid #e2e8f0;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fff;
   color: #475569;
 }
@@ -1696,7 +1691,7 @@
   gap: 10px;
   padding: 12px;
   border: 1px solid #fecaca;
-  border-radius: 10px;
+  border-radius: 4px;
   background: #fffafa;
 }
 
@@ -1713,7 +1708,7 @@
   display: inline-flex;
   align-items: center;
   padding: 0 8px;
-  border-radius: 999px;
+  border-radius: 4px;
   background: #fef2f2;
   color: #dc2626;
   font-size: 11px;
@@ -1759,7 +1754,7 @@
   gap: 8px;
   padding: 12px 12px 11px;
   border: 1px solid #e5e7eb;
-  border-radius: 10px;
+  border-radius: 4px;
   background: #ffffff;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }

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>

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'
-  }
-  return 'primary'
+  if (props.emptyReason) {
+    return 'is-empty'
   }
+  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;
   }
 }

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>

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>

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>
 

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: {

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,
+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;
 }
 

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 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 chartData = computed(() => ({
-  labels: ['已执行', '剩余'],
-  datasets: [{
-    data: [animatedRatio.value, 100 - animatedRatio.value],
-    backgroundColor: [themeColors.value.chartPrimary, '#e2e8f0'],
-    borderWidth: 0
-  }]
-}))
+const chartOptions = computed(() => {
+  const primary = themeColors.value.chartPrimary
 
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  rotation: -90,
-  circumference: 180,
-  cutout: '65%',
-  animation: {
-    animateRotate: true,
-    duration: 900,
-    easing: 'easeOutQuart'
+  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
+          }
         },
-  plugins: {
-    legend: { display: false },
-    tooltip: { enabled: false }
+        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;

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),
+        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,
-        backgroundColor: toRgba(primary, 0.16),
-        pointBackgroundColor: '#ffffff',
-        pointBorderColor: primary,
-        pointBorderWidth: 2,
-        pointRadius: 3,
-        pointHoverRadius: 4,
-        borderWidth: 2,
-        fill: true,
-        tension: 0.18
+              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}`
+onMounted(() => {
+  renderChart()
+  bindResize()
+})
+
+onBeforeUnmount(() => {
+  unbindResize()
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
   }
+})
+
+watch(chartOptions, () => {
+  nextTick(renderChart)
+}, { deep: true })
+
+function renderChart() {
+  if (!chartElement.value) {
+    return
   }
-  },
-  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'
+  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>

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: [
-    {
-      label: '申请量（单）',
-      data: scaleSeries(props.applications),
-      backgroundColor: chartColors.value.primary,
-      borderRadius: 4,
-      barPercentage: 0.6,
-      categoryPercentage: 0.5,
-      order: 2
-    },
-    {
-      label: '审批完成量（单）',
-      data: scaleSeries(props.approved),
-      backgroundColor: chartColors.value.blue,
-      borderRadius: 4,
-      barPercentage: 0.6,
-      categoryPercentage: 0.5,
-      order: 2
-    },
-    {
-      label: '平均审批时长（小时）',
-      data: scaleSeries(props.avgHours, 1),
-      borderColor: chartColors.value.purple,
+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',
-      borderWidth: 2,
-      pointBackgroundColor: '#ffffff',
-      pointBorderColor: chartColors.value.purple,
-      pointBorderWidth: 2,
-      pointRadius: 3,
-      pointHoverRadius: 5,
+  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: [
+    {
+      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),
+      barWidth: 12,
+      barGap: '28%',
+      itemStyle: {
+        color: chartColors.value.primary,
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    {
+      name: '审批完成量（单）',
+      type: 'bar',
+      data: scaleSeries(props.approved),
+      barWidth: 12,
+      itemStyle: {
+        color: chartColors.value.blue,
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    {
+      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 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)
+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})`
   }
-
-  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>
 

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: '系统设置' }
 }

web/src/components/layout/TopBar.vue

@@ -293,15 +293,15 @@ 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)
+  const errors = Number(summary.errors ?? 0)
+  const warnings = Number(summary.warnings ?? 0)
+  const info = Number(summary.info ?? 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' }
+    { 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)' }
   ]
 })
 

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;
 }

web/src/composables/useEcharts.js

@@ -0,0 +1,79 @@
+import { nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
+import { init } from 'echarts/core'
+
+export function useEcharts(chartElement, chartOptions) {
+  let chartInstance = null
+  let resizeObserver = null
+  let renderFrame = 0
+
+  function renderChart() {
+    if (!chartElement.value) {
+      return
+    }
+    if (!chartInstance) {
+      chartInstance = init(chartElement.value, null, { renderer: 'canvas' })
+      chartInstance.resize()
+    }
+    chartInstance.setOption(chartOptions.value, true)
+  }
+
+  function handleResize() {
+    chartInstance?.resize()
+  }
+
+  function scheduleRender() {
+    if (typeof window === 'undefined') {
+      renderChart()
+      return
+    }
+    if (renderFrame) {
+      window.cancelAnimationFrame(renderFrame)
+    }
+    renderFrame = window.requestAnimationFrame(() => {
+      renderFrame = 0
+      renderChart()
+    })
+  }
+
+  function bindResize() {
+    if (!chartElement.value) {
+      return
+    }
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(handleResize)
+      resizeObserver.observe(chartElement.value)
+    }
+    window.addEventListener('resize', handleResize)
+  }
+
+  function unbindResize() {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+    window.removeEventListener('resize', handleResize)
+  }
+
+  onMounted(() => {
+    renderChart()
+    bindResize()
+  })
+
+  onBeforeUnmount(() => {
+    unbindResize()
+    if (renderFrame && typeof window !== 'undefined') {
+      window.cancelAnimationFrame(renderFrame)
+      renderFrame = 0
+    }
+    if (chartInstance) {
+      chartInstance.dispose()
+      chartInstance = null
+    }
+  })
+
+  watch(chartOptions, () => {
+    nextTick(scheduleRender)
+  }, { deep: true })
+
+  return {
+    renderChart
+  }
+}

web/src/composables/useNavigation.js

@@ -83,11 +83,11 @@ export const navItems = [
   },
   {
     id: 'logs',
-    label: '日志管理',
-    navHint: '查看 Hermes 调用与系统运行日志',
+    label: '系统日志',
+    navHint: '查看系统运行日志',
     icon: icons.logs,
-    title: '日志管理',
-    desc: '集中查看 Hermes 归纳任务进度、调用明细与系统运行日志。'
+    title: '系统日志',
+    desc: '集中查看系统运行日志、结构化事件和请求追踪信息。'
   },
   {
     id: 'settings',

web/src/composables/useSettings.js

@@ -107,6 +107,10 @@ export function useSettings() {
     pageState.value = maskConfiguredRenderSecret(maskConfiguredModelSecrets(nextState))
     persistSettings(pageState.value)
     updateBrandPreviewFromState(pageState.value)
+
+    if (nextState.appearanceForm?.themeSkin) {
+      setThemeSkin(nextState.appearanceForm.themeSkin)
+    }
   }
 
   async function loadSettingsSnapshot() {
@@ -123,6 +127,7 @@ export function useSettings() {
   function buildSettingsPayload() {
     return {
       companyForm: { ...pageState.value.companyForm },
+      appearanceForm: { ...pageState.value.appearanceForm },
       adminForm: { ...pageState.value.adminForm },
       sessionForm: { ...pageState.value.sessionForm },
       llmForm: buildLlmPayload(pageState.value.llmForm),
@@ -307,10 +312,16 @@ export function useSettings() {
 
   function selectThemeSkin(skinId) {
     setThemeSkin(skinId)
+    pageState.value.appearanceForm.themeSkin = skinId
   }
 
-  function saveAppearanceSection() {
-    toast('界面皮肤已应用到当前浏览器。')
+  async function saveAppearanceSection() {
+    await persistRemoteSettings('界面皮肤已保存并应用到企业配置。', {
+      preserveModelApiKeys: true,
+      preserveAdminPasswords: true,
+      preserveRenderSecret: true,
+      preserveMailPassword: true
+    })
   }
 
   async function saveLlmSection() {

web/src/composables/useSystemState.js

@@ -13,6 +13,8 @@ import { setRuntimeApiBaseUrl } from '../services/api.js'
 import { checkBackendHealth } from './useBackendHealth.js'
 import { resolveDefaultAuthorizedRoute } from '../utils/accessControl.js'
 import { useToast } from './useToast.js'
+import { fetchSettings } from '../services/settings.js'
+import { setThemeSkin } from './useThemeSkin.js'
 
 const AUTH_STORAGE_KEY = 'x-financial-authenticated'
 const AUTH_USERNAME_KEY = 'x-financial-auth-username'
@@ -359,6 +361,15 @@ export function installSessionNavigation(router) {
     .then((state) => {
       applyBootstrapState(state)
       setRuntimeApiBaseUrl(resolveBrowserApiBaseUrl(state))
+      fetchSettings()
+        .then((snapshot) => {
+          if (snapshot?.appearanceForm?.themeSkin) {
+            setThemeSkin(snapshot.appearanceForm.themeSkin)
+          }
+        })
+        .catch((error) => {
+          console.warn('Failed to load remote theme settings:', error)
+        })
       router.isReady().then(() => reconcileEntryRoute(router))
     })
     .catch(() => {

web/src/data/personalWorkbench.js

@@ -207,7 +207,7 @@ export function buildExpenseStatItems(summary = {}) {
   ]
 }
 
-/** 费用画像：待后端接入后替换为真实用户行为统计 */
+/** 用户画像历史示例数据：首页已切换为后端真实画像，仅保留给旧演示入口兜底。 */
 export const usageProfileMetrics = [
   {
     key: 'stay-duration',

web/src/services/reimbursements.js

@@ -32,6 +32,18 @@ export function fetchEmployeeLatestProfile(employeeId, params = {}) {
   return apiRequest(`/employee-profiles/${encodeURIComponent(String(employeeId || '').trim())}/latest${suffix}`)
 }
 
+export function fetchCurrentEmployeeLatestProfile(params = {}) {
+  const query = new URLSearchParams()
+  Object.entries(params || {}).forEach(([key, value]) => {
+    const normalized = String(value ?? '').trim()
+    if (normalized) {
+      query.set(key, normalized)
+    }
+  })
+  const suffix = query.toString() ? `?${query.toString()}` : ''
+  return apiRequest(`/employee-profiles/me/latest${suffix}`)
+}
+
 export function updateExpenseClaim(claimId, payload = {}) {
   return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}`, {
     method: 'PATCH',

web/src/utils/employeeProfileViewModel.js

@@ -0,0 +1,445 @@
+const PROFILE_TYPE_LABELS = {
+  expense: '费用申请',
+  process_quality: '流程质量',
+  ai_usage: 'AI 协作',
+  approval: '审核行为'
+}
+
+const STATUS_LABELS = {
+  succeeded: '已完成',
+  success: '已完成',
+  running: '进行中',
+  blocked: '待确认',
+  failed: '失败'
+}
+
+const STATUS_TONES = {
+  succeeded: 'success',
+  success: 'success',
+  running: 'warning',
+  blocked: 'warning',
+  failed: 'danger'
+}
+
+const AGENT_LABELS = {
+  hermes: 'Hermes 数字员工',
+  user_agent: '智能问答助手',
+  orchestrator: '智能编排服务',
+  system: '系统服务'
+}
+
+const AGENT_SHORT_LABELS = {
+  hermes: 'Hermes',
+  user_agent: '问答助手',
+  orchestrator: '编排服务',
+  system: '系统服务'
+}
+
+const RADAR_COLORS = [
+  '#3a7ca5',
+  '#0f9f8f',
+  '#f59e0b',
+  '#7c3aed',
+  '#dc2626',
+  '#2563eb',
+  '#16a34a',
+  '#db2777'
+]
+
+const TAG_ACCENT_COUNT = 8
+
+const SOURCE_LABELS = {
+  user_message: '用户对话',
+  schedule: '定时任务',
+  system_event: '系统事件',
+  workbench: '个人工作台',
+  detail: '单据详情',
+  documents_application: '单据中心'
+}
+
+const SCENARIO_LABELS = {
+  knowledge: '知识库问答',
+  expense: '费用报销',
+  reimbursement: '费用报销',
+  expense_application: '费用申请',
+  application: '费用申请',
+  budget: '预算查询',
+  audit: '风险审核',
+  approval: '审批处理',
+  policy: '制度问答',
+  travel: '差旅费用',
+  entertainment: '业务招待',
+  accounts_receivable: '应收查询',
+  accounts_payable: '应付查询'
+}
+
+const INTENT_LABELS = {
+  query: '查询',
+  explain: '解释',
+  compare: '对比',
+  risk_check: '风险检查',
+  draft: '草稿生成',
+  operate: '操作办理',
+  review: '审核',
+  submit: '提交'
+}
+
+const JOB_TYPE_LABELS = {
+  knowledge_index_sync: '知识库索引同步',
+  llm_wiki_sync: '知识库归纳同步',
+  employee_behavior_profile_scan: '用户画像测算',
+  workbench_on_demand: '工作台画像测算',
+  global_risk_scan: '全局风险巡检',
+  weekly_expense_report: '周费用报告'
+}
+
+export function buildUserProfileMetricCards(profile, runs = [], currentUser = {}) {
+  const index = indexProfiles(profile)
+  const aiMetrics = metricsOf(index.ai_usage)
+  const userRuns = filterRunsByCurrentUser(runs, currentUser)
+  const durationDisplay = formatDurationMetric(sumRunDurationMs(userRuns))
+  const commonAgent = resolveCommonAgent(userRuns)
+  const tokenCount = resolveNumber(aiMetrics.exact_token_count) || resolveNumber(aiMetrics.estimated_token_count)
+  const tokenDisplay = formatTokenCount(tokenCount)
+  const aiRunCount = resolveNumber(aiMetrics.ai_run_count) || userRuns.length
+
+  return [
+    {
+      key: 'usage-duration',
+      label: '使用时长',
+      value: durationDisplay.value,
+      unit: durationDisplay.unit,
+      hint: `近${resolveWindowDays(profile)}天智能体运行累计`,
+      icon: 'mdi mdi-timer-sand',
+      tone: 'primary'
+    },
+    {
+      key: 'common-agent',
+      label: '常用智能体',
+      value: commonAgent.label,
+      unit: '',
+      hint: commonAgent.count ? `${commonAgent.count} 次调用，占比 ${commonAgent.share}` : '暂无智能体调用记录',
+      icon: 'mdi mdi-account-tie-voice-outline',
+      tone: 'cyan'
+    },
+    {
+      key: 'ai-usage',
+      label: 'AI 使用次数',
+      value: formatNumber(aiRunCount),
+      unit: '次',
+      hint: `近${resolveWindowDays(profile)}天智能协作记录`,
+      icon: 'mdi mdi-robot-outline',
+      tone: 'violet'
+    },
+    {
+      key: 'token-usage',
+      label: 'Token 消耗',
+      value: tokenDisplay.value,
+      unit: tokenDisplay.unit,
+      hint: resolveTokenHint(aiMetrics),
+      icon: 'mdi mdi-lightning-bolt-outline',
+      tone: 'amber'
+    }
+  ]
+}
+
+export function buildUserProfileSummaryMetrics(profile, runs = [], currentUser = {}) {
+  return buildUserProfileMetricCards(profile, runs, currentUser).slice(0, 4)
+}
+
+export function normalizeUserProfileTags(profile, limit = 8) {
+  return (Array.isArray(profile?.profile_tags) ? profile.profile_tags : [])
+    .map((tag) => ({
+      code: normalizeText(tag.code || tag.label),
+      label: normalizeText(tag.label),
+      displayLabel: normalizeText(tag.display_label || tag.displayLabel || tag.label),
+      tone: resolveTagTone(tag),
+      score: clampScore(tag.score),
+      reason: normalizeText(tag.reason) || '画像算法已识别该行为特征。',
+      confidence: resolveNumber(tag.confidence)
+    }))
+    .filter((tag) => tag.code && tag.displayLabel)
+    .sort((left, right) => right.score - left.score)
+    .slice(0, limit)
+    .map((tag, index) => ({
+      ...tag,
+      colorIndex: index % TAG_ACCENT_COUNT
+    }))
+}
+
+export function normalizeUserProfileRadarDimensions(profile) {
+  const dimensions = Array.isArray(profile?.radar?.dimensions) ? profile.radar.dimensions : []
+  if (dimensions.length) {
+    return withRadarColors(
+      dimensions.map((item) => ({
+        code: normalizeText(item.code || item.label),
+        label: normalizeText(item.label || item.code),
+        score: clampScore(item.score)
+      }))
+    )
+  }
+
+  return withRadarColors(
+    (Array.isArray(profile?.profiles) ? profile.profiles : [])
+      .map((item) => ({
+        code: normalizeText(item.profile_type),
+        label: PROFILE_TYPE_LABELS[item.profile_type] || normalizeText(item.profile_label || item.profile_type),
+        score: clampScore(item.score)
+      }))
+      .filter((item) => item.code && item.label)
+  )
+}
+
+export function buildProfileOperationsFromAgentRuns(runs, currentUser, limit = 5) {
+  const identities = resolveCurrentUserIdentities(currentUser)
+  return (Array.isArray(runs) ? runs : [])
+    .filter((run) => belongsToCurrentUser(run, identities))
+    .sort((left, right) => Date.parse(right.started_at || 0) - Date.parse(left.started_at || 0))
+    .slice(0, limit)
+    .map((run, index) => ({
+      id: normalizeText(run.run_id || run.id) || `operation-${index + 1}`,
+      time: formatOperationTime(run.started_at),
+      action: resolveOperationAction(run),
+      target: resolveOperationTarget(run),
+      channel: resolveOperationChannel(run),
+      status: STATUS_LABELS[normalizeCode(run.status)] || normalizeText(run.status) || '未知',
+      tone: STATUS_TONES[normalizeCode(run.status)] || 'info'
+    }))
+}
+
+export function resolveCurrentUserProfileError(error) {
+  return normalizeText(error?.message) || '用户画像读取失败，请稍后重试。'
+}
+
+function indexProfiles(profile) {
+  return Object.fromEntries(
+    (Array.isArray(profile?.profiles) ? profile.profiles : [])
+      .map((item) => [normalizeText(item.profile_type), item])
+      .filter(([key]) => key)
+  )
+}
+
+function metricsOf(profile) {
+  return profile?.metrics && typeof profile.metrics === 'object' ? profile.metrics : {}
+}
+
+function filterRunsByCurrentUser(runs, currentUser) {
+  const identities = resolveCurrentUserIdentities(currentUser)
+  return (Array.isArray(runs) ? runs : []).filter((run) => belongsToCurrentUser(run, identities))
+}
+
+function belongsToCurrentUser(run, identities) {
+  if (!identities.size) {
+    return false
+  }
+  const userId = normalizeText(run?.user_id).toLowerCase()
+  return Boolean(userId && identities.has(userId))
+}
+
+function resolveCurrentUserIdentities(user = {}) {
+  return new Set(
+    [
+      user.username,
+      user.email,
+      user.name,
+      user.employeeNo,
+      user.employee_no
+    ]
+      .map((item) => normalizeText(item).toLowerCase())
+      .filter(Boolean)
+  )
+}
+
+function resolveCommonAgent(runs) {
+  const counts = new Map()
+  for (const run of runs) {
+    const code = normalizeCode(run?.agent || run?.route_json?.selected_agent || 'system') || 'system'
+    counts.set(code, (counts.get(code) || 0) + 1)
+  }
+
+  const [code = '', count = 0] = Array.from(counts.entries())
+    .sort((left, right) => right[1] - left[1])[0] || []
+
+  if (!code || !count) {
+    return { label: '暂无', count: 0, share: '0%' }
+  }
+
+  return {
+    label: AGENT_SHORT_LABELS[code] || translateKnownValue(code, AGENT_LABELS, '智能体') || '智能体',
+    count,
+    share: formatPercent(count / Math.max(1, runs.length))
+  }
+}
+
+function sumRunDurationMs(runs) {
+  return runs.reduce((total, run) => total + resolveRunDurationMs(run), 0)
+}
+
+function resolveRunDurationMs(run) {
+  const startedAt = Date.parse(run?.started_at || '')
+  const finishedAt = Date.parse(run?.finished_at || '')
+  if (Number.isFinite(startedAt) && Number.isFinite(finishedAt) && finishedAt > startedAt) {
+    return Math.min(finishedAt - startedAt, 24 * 60 * 60 * 1000)
+  }
+
+  return (Array.isArray(run?.tool_calls) ? run.tool_calls : []).reduce(
+    (total, tool) => total + Math.max(0, resolveNumber(tool?.duration_ms)),
+    0
+  )
+}
+
+function resolveOperationAction(run) {
+  const semanticText = normalizeText(run?.semantic_parse?.raw_query)
+  if (semanticText) {
+    return `${resolveOperationBusinessLabel(run)}：${semanticText}`
+  }
+  return translateKnownValue(run?.result_summary, JOB_TYPE_LABELS, '')
+    || translateKnownValue(run?.route_json?.job_type, JOB_TYPE_LABELS, '执行系统任务')
+    || '执行智能财务任务'
+}
+
+function resolveOperationTarget(run) {
+  return translateKnownValue(run?.route_json?.task_title, JOB_TYPE_LABELS, '')
+    || translateKnownValue(run?.route_json?.asset_name, JOB_TYPE_LABELS, '')
+    || translateKnownValue(run?.semantic_parse?.scenario, SCENARIO_LABELS, '业务操作')
+    || translateKnownValue(run?.task_id, JOB_TYPE_LABELS, '系统任务')
+    || '个人工作台'
+}
+
+function resolveOperationChannel(run) {
+  const agent = translateKnownValue(run?.agent, AGENT_LABELS, '智能服务') || 'Hermes 数字员工'
+  const source = translateKnownValue(run?.source, SOURCE_LABELS, '系统入口')
+  return source ? `${agent} · ${source}` : agent
+}
+
+function resolveOperationBusinessLabel(run) {
+  const scenario = translateKnownValue(run?.semantic_parse?.scenario, SCENARIO_LABELS, '业务操作')
+  const intent = translateKnownValue(run?.semantic_parse?.intent, INTENT_LABELS, '')
+  if (scenario && intent) {
+    return `${scenario}${intent}`
+  }
+  return scenario || intent || '发起'
+}
+
+function resolveTagTone(tag) {
+  const polarity = normalizeText(tag?.polarity || tag?.tone).toLowerCase()
+  if (['risk', 'danger', 'negative'].includes(polarity)) {
+    return 'risk'
+  }
+  if (['positive', 'success'].includes(polarity)) {
+    return 'positive'
+  }
+  return 'behavior'
+}
+
+function resolveWindowDays(profile) {
+  const days = Number(profile?.window_days || 90)
+  return Number.isFinite(days) && days > 0 ? Math.round(days) : 90
+}
+
+function resolveTokenHint(metrics) {
+  const mode = normalizeText(metrics.token_count_mode)
+  return mode === 'estimated_token_count' ? '按运行载荷估算' : '模型调用累计'
+}
+
+function formatTokenCount(value) {
+  const count = resolveNumber(value)
+  if (count >= 10000) {
+    return { value: trimNumber(count / 10000, 2), unit: '万' }
+  }
+  return { value: formatNumber(count), unit: 'tokens' }
+}
+
+function formatDurationMetric(totalMs) {
+  const seconds = Math.round(Math.max(0, resolveNumber(totalMs)) / 1000)
+  if (seconds < 60) {
+    return { value: formatNumber(seconds), unit: '秒' }
+  }
+  const minutes = seconds / 60
+  if (minutes < 60) {
+    return { value: trimNumber(minutes, minutes >= 10 ? 0 : 1), unit: '分钟' }
+  }
+  const hours = minutes / 60
+  return { value: trimNumber(hours, hours >= 10 ? 0 : 1), unit: '小时' }
+}
+
+function withRadarColors(items) {
+  return items.map((item, index) => ({
+    ...item,
+    color: item.color || RADAR_COLORS[index % RADAR_COLORS.length]
+  }))
+}
+
+function formatOperationTime(value) {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '时间未知'
+  }
+  const now = new Date()
+  const sameDay = date.toDateString() === now.toDateString()
+  const yesterday = new Date(now)
+  yesterday.setDate(now.getDate() - 1)
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}`
+  if (sameDay) {
+    return `今天 ${time}`
+  }
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `昨天 ${time}`
+  }
+  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${time}`
+}
+
+function formatNumber(value) {
+  return String(Math.round(resolveNumber(value)))
+}
+
+function formatPercent(value) {
+  return `${Math.round(resolveNumber(value) * 100)}%`
+}
+
+function formatMoney(value) {
+  return `¥${trimNumber(resolveNumber(value), 2)}`
+}
+
+function trimNumber(value, digits = 0) {
+  const number = Number(value || 0)
+  return number.toFixed(digits).replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1')
+}
+
+function clampScore(value) {
+  const score = Math.round(resolveNumber(value))
+  return Math.max(0, Math.min(100, score))
+}
+
+function resolveNumber(value) {
+  const number = Number(value || 0)
+  return Number.isFinite(number) ? number : 0
+}
+
+function normalizeText(value) {
+  return String(value || '').trim()
+}
+
+function normalizeCode(value) {
+  return normalizeText(value).toLowerCase()
+}
+
+function translateKnownValue(value, labels, internalFallback = '') {
+  const raw = normalizeText(value)
+  if (!raw) {
+    return ''
+  }
+  const mapped = labels[normalizeCode(raw)]
+  if (mapped) {
+    return mapped
+  }
+  return isInternalCode(raw) ? internalFallback : raw
+}
+
+function isInternalCode(value) {
+  return /^[a-z][a-z0-9_:-]*$/i.test(normalizeText(value))
+}
+
+function pad(value) {
+  return String(value).padStart(2, '0')
+}

web/src/utils/loginEntryTransition.js

@@ -0,0 +1,35 @@
+const LOGIN_ENTRY_TRANSITION_KEY = 'x-financial-login-entry-transition'
+const LOGIN_ENTRY_TRANSITION_MAX_AGE_MS = 5000
+
+function canUseSessionStorage() {
+  return typeof window !== 'undefined' && typeof window.sessionStorage !== 'undefined'
+}
+
+export function markLoginEntryTransition() {
+  if (!canUseSessionStorage()) {
+    return
+  }
+
+  window.sessionStorage.setItem(LOGIN_ENTRY_TRANSITION_KEY, String(Date.now()))
+}
+
+export function consumeLoginEntryTransition() {
+  if (!canUseSessionStorage()) {
+    return false
+  }
+
+  const rawTimestamp = window.sessionStorage.getItem(LOGIN_ENTRY_TRANSITION_KEY)
+  window.sessionStorage.removeItem(LOGIN_ENTRY_TRANSITION_KEY)
+
+  if (!rawTimestamp) {
+    return false
+  }
+
+  const timestamp = Number(rawTimestamp)
+
+  if (!Number.isFinite(timestamp)) {
+    return true
+  }
+
+  return Date.now() - timestamp <= LOGIN_ENTRY_TRANSITION_MAX_AGE_MS
+}

web/src/utils/settingsModelHelper.js

@@ -206,6 +206,9 @@ export function buildDefaultState(companyProfile, currentUser) {
       recordNumber: '',
       copyright: `Copyright © 2024-${CURRENT_YEAR} ${companyName}. All Rights Reserved.`
     },
+    appearanceForm: {
+      themeSkin: 'sky'
+    },
     adminForm: {
       adminAccount,
       adminEmail,
@@ -310,6 +313,7 @@ export function mergeState(baseState, overrideState) {
 
   return {
     companyForm: { ...baseState.companyForm, ...(overrideState?.companyForm || {}) },
+    appearanceForm: { ...baseState.appearanceForm, ...(overrideState?.appearanceForm || {}) },
     adminForm: { ...baseState.adminForm, ...(overrideState?.adminForm || {}) },
     sessionForm: { ...baseState.sessionForm, ...(overrideState?.sessionForm || {}) },
     hermesForm: mergeHermesEmployeeForm({
@@ -326,6 +330,7 @@ export function mergeState(baseState, overrideState) {
 export function sanitizeForStorage(state) {
   return {
     companyForm: { ...state.companyForm },
+    appearanceForm: { ...state.appearanceForm },
     adminForm: {
       ...state.adminForm,
       newPassword: '',

web/src/views/AppShellRouteView.vue

@@ -1,6 +1,27 @@
 <template>
-  <div class="app" :class="{ 'sidebar-collapsed': sidebarCollapsed, 'mobile-sidebar-open': mobileSidebarOpen }">
+  <div
+    class="app"
+    :class="{
+      'sidebar-collapsed': sidebarCollapsed,
+      'mobile-sidebar-open': mobileSidebarOpen,
+      'login-entry-active': loginEntryAnimating
+    }"
+  >
     <div class="mobile-overlay" aria-hidden="true" @click="mobileSidebarOpen = false"></div>
+    <Transition name="login-entry-veil">
+      <div v-if="loginEntryAnimating" class="login-entry-veil" aria-live="polite" aria-label="登录成功，正在进入工作台">
+        <div class="login-entry-card">
+          <span class="login-entry-mark" aria-hidden="true">
+            <i class="mdi mdi-shield-check-outline"></i>
+          </span>
+          <div class="login-entry-copy">
+            <strong>登录成功</strong>
+            <span>正在进入工作台</span>
+          </div>
+          <span class="login-entry-progress" aria-hidden="true"></span>
+        </div>
+      </div>
+    </Transition>
     <div class="app-sidebar">
       <SidebarRail
         :nav-items="filteredNavItems"
@@ -148,7 +169,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import SidebarRail from '../components/layout/SidebarRail.vue'
 import TopBar from '../components/layout/TopBar.vue'
@@ -170,14 +191,35 @@ import SettingsView from './SettingsView.vue'
 import { useAppShell } from '../composables/useAppShell.js'
 import { useSystemState } from '../composables/useSystemState.js'
 import { filterNavItemsByAccess } from '../utils/accessControl.js'
+import { consumeLoginEntryTransition } from '../utils/loginEntryTransition.js'
 
 const employeeSummary = ref(null)
 const knowledgeSummary = ref(null)
 const logsSummary = ref(null)
 const documentSummary = ref(null)
 const auditDetailOpen = ref(false)
+const loginEntryAnimating = ref(false)
 const sidebarCollapsed = ref(false)
 const mobileSidebarOpen = ref(false)
+let loginEntryTimer = null
+
+function stopLoginEntryAnimation() {
+  if (loginEntryTimer) {
+    window.clearTimeout(loginEntryTimer)
+    loginEntryTimer = null
+  }
+
+  loginEntryAnimating.value = false
+}
+
+function playLoginEntryAnimation() {
+  if (!consumeLoginEntryTransition()) {
+    return
+  }
+
+  loginEntryAnimating.value = true
+  loginEntryTimer = window.setTimeout(stopLoginEntryAnimation, 920)
+}
 
 function toggleSidebarCollapsed() {
   sidebarCollapsed.value = !sidebarCollapsed.value
@@ -236,4 +278,12 @@ const filteredNavItems = computed(() => filterNavItemsByAccess(navItems, current
 function handleLogout() {
   logout('manual')
 }
+
+onMounted(() => {
+  playLoginEntryAnimation()
+})
+
+onBeforeUnmount(() => {
+  stopLoginEntryAnimation()
+})
 </script>

web/src/views/BudgetCenterView.vue

@@ -51,14 +51,14 @@
         </label>
       </div>
       <div class="budget-action-set">
-        <button v-if="canEditBudget" class="budget-primary-btn" type="button" @click="openBudgetAssistant">
+        <ElButton v-if="canEditBudget" class="budget-primary-btn" type="primary" @click="openBudgetAssistant">
           <i class="mdi mdi-pencil-outline"></i>
           <span>编辑预算</span>
-        </button>
-        <button class="budget-ghost-btn" type="button">
+        </ElButton>
+        <ElButton class="budget-ghost-btn">
           <i class="mdi mdi-text-box-outline"></i>
           <span>预算详情</span>
-        </button>
+        </ElButton>
       </div>
     </section>
 
@@ -67,112 +67,97 @@
         <header>
           <strong>部门切换</strong>
         </header>
-        <div class="department-search">
+        <ElInput
+          v-model="departmentKeyword"
+          class="department-search-input"
+          clearable
+          placeholder="搜索部门"
+        >
+          <template #prefix>
             <i class="mdi mdi-magnify"></i>
-          <input v-model="departmentKeyword" type="search" placeholder="搜索部门" />
-        </div>
+          </template>
+        </ElInput>
         <nav class="department-list" aria-label="预算部门">
-          <button
+          <ElButton
             v-for="department in visibleDepartments"
             :key="department.code"
-            type="button"
+            class="department-switch-btn"
+            text
             :class="{ active: department.code === activeDepartmentCode }"
             @click="activeDepartmentCode = department.code"
           >
             <i :class="department.icon"></i>
             <span>{{ department.name }}</span>
-          </button>
+          </ElButton>
         </nav>
       </aside>
 
       <article class="budget-table-panel">
         <header>
           <strong>当前部门：{{ activeDepartmentName }}</strong>
-          <label class="budget-table-search">
-            <i class="mdi mdi-magnify"></i>
-            <input
+          <ElInput
             v-model="budgetTableKeyword"
-              type="search"
+            class="budget-table-search"
+            clearable
             placeholder="筛选预算明细"
             aria-label="筛选预算明细"
-            />
-          </label>
+          >
+            <template #prefix>
+              <i class="mdi mdi-magnify"></i>
+            </template>
+          </ElInput>
         </header>
         <div class="budget-table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>编制时间</th>
-                <th>编制人</th>
-                <th>审核人</th>
-                <th>费用类型</th>
-                <th>预算金额（元）</th>
-                <th>已发生（元）</th>
-                <th>已占用（元）</th>
-                <th>剩余可用（元）</th>
-                <th>使用率</th>
-                <th>提醒阈值</th>
-                <th>告警阈值</th>
-                <th>风险阈值</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="row in visibleBudgetRows" :key="row.expenseType">
-                <td>{{ row.compiledAt }}</td>
-                <td>{{ row.compiler }}</td>
-                <td>{{ row.reviewer }}</td>
-                <td>{{ row.expenseType }}</td>
-                <td>{{ row.total }}</td>
-                <td>{{ row.used }}</td>
-                <td>{{ row.occupied }}</td>
-                <td>{{ row.left }}</td>
-                <td>
+          <ElTable
+            :data="visibleBudgetRows"
+            class="budget-data-table"
+            border
+            stripe
+          >
+            <ElTableColumn prop="compiledAt" label="编制时间" min-width="150" align="center" />
+            <ElTableColumn prop="compiler" label="编制人" min-width="120" align="center" />
+            <ElTableColumn prop="reviewer" label="审核人" min-width="120" align="center" />
+            <ElTableColumn prop="expenseType" label="费用类型" min-width="140" align="center" />
+            <ElTableColumn prop="total" label="预算金额（元）" min-width="140" align="right" />
+            <ElTableColumn prop="used" label="已发生（元）" min-width="130" align="right" />
+            <ElTableColumn prop="occupied" label="已占用（元）" min-width="130" align="right" />
+            <ElTableColumn prop="left" label="剩余可用（元）" min-width="140" align="right" />
+            <ElTableColumn label="使用率" min-width="128" align="center">
+              <template #default="{ row }">
                 <div class="budget-rate">
-                    <span>{{ row.rate }}%</span>
                   <div><em :class="row.rateTone" :style="{ width: `${Math.min(row.rate, 100)}%` }"></em></div>
+                  <span>{{ row.rate }}%</span>
                 </div>
-                </td>
-                <td class="budget-threshold-cell">
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="提醒阈值" min-width="112" align="center">
+              <template #default="{ row }">
                 <span class="budget-threshold-badge reminder">{{ row.reminderLine }}</span>
-                </td>
-                <td class="budget-threshold-cell">
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="告警阈值" min-width="112" align="center">
+              <template #default="{ row }">
                 <span class="budget-threshold-badge alert">{{ row.alertLine }}</span>
-                </td>
-                <td class="budget-threshold-cell">
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="风险阈值" min-width="112" align="center">
+              <template #default="{ row }">
                 <span class="budget-threshold-badge risk">{{ row.riskLine }}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+              </template>
+            </ElTableColumn>
+          </ElTable>
         </div>
         <footer class="budget-table-foot">
-          <div class="budget-pager" aria-label="预算分页">
-            <button
-              class="page-nav"
-              type="button"
-              :disabled="budgetPage <= 1"
-              @click="changeBudgetPage(-1)"
-            >
-              <i class="mdi mdi-chevron-left"></i>
-            </button>
-            <button
-              v-for="page in budgetPageNumbers"
-              :key="page"
-              type="button"
-              :class="{ active: page === budgetPage }"
-              @click="goToBudgetPage(page)"
-            >
-              {{ page }}
-            </button>
-            <button
-              class="page-nav"
-              type="button"
-              :disabled="budgetPage >= totalBudgetPages"
-              @click="changeBudgetPage(1)"
-            >
-              <i class="mdi mdi-chevron-right"></i>
-            </button>
-          </div>
+          <ElPagination
+            class="budget-pager"
+            background
+            layout="prev, pager, next"
+            :pager-count="5"
+            :current-page="budgetPage"
+            :page-size="budgetPageSize"
+            :total="totalBudgetRows"
+            @current-change="goToBudgetPage"
+          />
           <EnterpriseSelect
             v-model="budgetPageSize"
             class="budget-page-size-select"
@@ -209,7 +194,7 @@
       <article class="budget-alert-panel">
         <header class="budget-card-head">
           <strong>预算预警</strong>
-          <button v-if="warnings.length" type="button">查看全部</button>
+          <ElButton v-if="warnings.length" class="budget-link-btn" text>查看全部</ElButton>
         </header>
         <div v-if="warnings.length" class="budget-alert-list">
           <div v-for="alert in warnings" :key="alert.id" class="budget-alert-row">

web/src/views/DigitalEmployeesView.vue

@@ -75,10 +75,24 @@
       </article>
 
       <article v-else key="list" class="skill-list panel digital-employees-list">
-        <nav class="status-tabs" aria-label="数字员工类型">
-          <button class="active" type="button">数字员工</button>
+        <nav class="status-tabs" aria-label="数字员工页签">
+          <button
+            type="button"
+            :class="{ active: activeSection === 'skills' }"
+            @click="activeSection = 'skills'"
+          >
+            数字员工
+          </button>
+          <button
+            type="button"
+            :class="{ active: activeSection === 'workRecords' }"
+            @click="activeSection = 'workRecords'"
+          >
+            工作记录
+          </button>
         </nav>
 
+        <template v-if="activeSection === 'skills'">
         <div class="list-toolbar">
           <div class="filter-set">
             <label class="search-filter">
@@ -241,6 +255,12 @@
         <footer v-if="!loading && !errorMessage && visibleEmployees.length" class="list-foot">
           <span class="page-summary">当前展示 {{ visibleEmployees.length }} 条数字员工</span>
         </footer>
+        </template>
+
+        <DigitalEmployeeWorkRecords
+          v-else
+          class="digital-work-records-section"
+        />
       </article>
     </Transition>
 
@@ -264,6 +284,7 @@ import { computed, onMounted, ref } from 'vue'
 import AuditDigitalEmployeeDetail from '../components/audit/AuditDigitalEmployeeDetail.vue'
 import AuditPickerFilter from '../components/audit/AuditPickerFilter.vue'
 import DigitalEmployeeScheduleDialog from '../components/audit/DigitalEmployeeScheduleDialog.vue'
+import DigitalEmployeeWorkRecords from '../components/audit/DigitalEmployeeWorkRecords.vue'
 import TableEmptyState from '../components/shared/TableEmptyState.vue'
 import TableLoadingState from '../components/shared/TableLoadingState.vue'
 import { useSystemState } from '../composables/useSystemState.js'
@@ -305,6 +326,7 @@ const { toast } = useToast()
 const employees = ref([])
 const selectedEmployee = ref(null)
 const selectedEmployeeId = ref('')
+const activeSection = ref('skills')
 const keyword = ref('')
 const selectedStatus = ref('')
 const selectedEnabledState = ref('')

web/src/views/LoginRouteView.vue

@@ -13,6 +13,7 @@
 import { useRoute, useRouter } from 'vue-router'
 
 import { useSystemState } from '../composables/useSystemState.js'
+import { markLoginEntryTransition } from '../utils/loginEntryTransition.js'
 import LoginView from './LoginView.vue'
 
 const route = useRoute()
@@ -26,6 +27,14 @@ const {
   resolveEntryRoute
 } = useSystemState()
 
+const LOGIN_ENTRY_ROUTE_DELAY_MS = 140
+
+function waitForLoginEntryReady() {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, LOGIN_ENTRY_ROUTE_DELAY_MS)
+  })
+}
+
 const LOGIN_BRAND_NAME = '易财费控'
 
 async function submitLogin(credentials) {
@@ -35,6 +44,9 @@ async function submitLogin(credentials) {
     return
   }
 
+  markLoginEntryTransition()
+  await waitForLoginEntryReady()
+
   const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : ''
 
   if (redirect.startsWith('/app/')) {

web/src/views/LogsView.vue

@@ -1,146 +1,126 @@
 <template>
   <section class="logs-view">
     <div v-if="!isAdmin" class="logs-empty panel">
-      <h2>日志管理仅管理员可用</h2>
-      <p>当前账号没有查看 Hermes 调用日志和系统运行日志的权限。</p>
+      <h2>系统日志仅管理员可用</h2>
+      <p>当前账号没有查看系统运行日志的权限。</p>
     </div>
 
     <template v-else>
-      <article class="panel logs-console" :class="{ 'without-toolbar': activeTab === 'hermes' }">
-        <div class="console-tabs" role="tablist" aria-label="日志类型切换">
-          <button type="button" :class="{ active: activeTab === 'hermes' }" @click="activeTab = 'hermes'">
-            数字员工日志
-          </button>
-          <button type="button" :class="{ active: activeTab === 'system' }" @click="activeTab = 'system'">
-            系统日志
-          </button>
+      <article class="system-logs-list panel">
+        <div class="document-toolbar">
+          <div class="filter-set">
+            <div class="list-search">
+              <i class="mdi mdi-magnify"></i>
+              <input
+                v-model.trim="systemSearchKeyword"
+                type="search"
+                placeholder="搜索摘要、模块、请求路径或 Request ID"
+              />
             </div>
 
-        <div v-if="activeTab === 'system'" class="console-toolbar">
-          <label class="filter-field search-field">
-            <span>关键词检索</span>
-            <div class="field-input">
-              <i class="pi pi-search"></i>
-              <input v-model.trim="systemSearchKeyword" type="search" placeholder="摘要 / 模块 / 请求路径 / Request ID" />
+            <div class="document-filter status-dropdown-filter" :class="{ open: openFilterKey === 'level' }">
+              <button
+                class="filter-btn status-filter-trigger"
+                type="button"
+                :aria-expanded="openFilterKey === 'level'"
+                @click="toggleFilter('level')"
+              >
+                <i class="mdi mdi-filter-variant"></i>
+                <span>{{ systemLevelFilterLabel }}</span>
+                <i class="mdi mdi-chevron-down"></i>
+              </button>
+              <div
+                v-if="openFilterKey === 'level'"
+                class="document-filter-menu status-filter-menu"
+                role="listbox"
+                aria-label="日志级别"
+              >
+                <button
+                  v-for="option in systemLevelFilterOptions"
+                  :key="option.value"
+                  type="button"
+                  role="option"
+                  :aria-selected="systemLevelFilter === option.value"
+                  :class="{ active: systemLevelFilter === option.value }"
+                  @click="selectLevelFilter(option.value)"
+                >
+                  {{ option.label }}
+                </button>
+              </div>
             </div>
-          </label>
 
-          <label class="filter-field">
-            <span>日志级别</span>
-            <EnterpriseSelect
-              v-model="systemLevelFilter"
-              :options="systemLevelFilterOptions"
-              placeholder="全部"
-            />
-          </label>
-
-          <label class="filter-field">
-            <span>事件类型</span>
-            <EnterpriseSelect
-              v-model="systemEventTypeFilter"
-              :options="systemEventTypeFilterOptions"
-              placeholder="全部"
-            />
-          </label>
+            <div class="document-filter" :class="{ open: openFilterKey === 'eventType' }">
+              <button
+                class="filter-btn"
+                type="button"
+                :aria-expanded="openFilterKey === 'eventType'"
+                @click="toggleFilter('eventType')"
+              >
+                <span>{{ systemEventTypeFilterLabel }}</span>
+                <i class="mdi mdi-chevron-down"></i>
+              </button>
+              <div
+                v-if="openFilterKey === 'eventType'"
+                class="document-filter-menu"
+                role="listbox"
+                aria-label="事件类型"
+              >
+                <button
+                  v-for="option in systemEventTypeFilterOptions"
+                  :key="option.value"
+                  type="button"
+                  role="option"
+                  :aria-selected="systemEventTypeFilter === option.value"
+                  :class="{ active: systemEventTypeFilter === option.value }"
+                  @click="selectEventTypeFilter(option.value)"
+                >
+                  {{ option.label }}
+                </button>
+              </div>
+            </div>
+          </div>
 
+          <div class="document-actions">
+            <button v-if="hasActiveFilters" class="create-request-btn secondary" type="button" @click="resetFilters">
+              <i class="mdi mdi-filter-remove-outline"></i>
+              <span>清空筛选</span>
+            </button>
             <button
               type="button"
-            class="toolbar-btn primary"
+              class="create-request-btn"
               :disabled="systemLogLoading"
               @click="loadSystemLogs(true)"
             >
-            {{ systemLogLoading ? '刷新中...' : '刷新日志' }}
+              <i class="mdi mdi-refresh"></i>
+              <span>{{ systemLogLoading ? '刷新中...' : '刷新日志' }}</span>
             </button>
           </div>
+        </div>
 
         <p class="hint">
           <i class="mdi mdi-information-outline"></i>
-          点击任意行可查看日志详情
+          点击任意行可查看系统日志详情
         </p>
 
-        <div class="console-layout">
-          <section class="list-panel">
-            <div class="panel-heading">
-              <div>
-                <h3>{{ activeTab === 'hermes' ? '日志列表' : '系统日志列表' }}</h3>
-                <p>
-                  {{ activeTab === 'hermes'
-                    ? '每条运行记录按独立列展示，便于快速定位时间、模块、级别与状态。'
-                    : '按单条日志记录展示解析结果，点击任意一行可查看完整结构化详情。'
-                  }}
-                </p>
-              </div>
-              <button
-                v-if="activeTab === 'hermes'"
-                type="button"
-                class="toolbar-btn primary panel-refresh"
-                :disabled="hermesLoading"
-                @click="loadHermesRuns(true)"
-              >
-                {{ hermesLoading ? '刷新中...' : '刷新日志' }}
-              </button>
-            </div>
-
-            <div v-if="activeTab === 'hermes'" class="table-shell">
-              <table class="log-table">
-                <thead>
-                  <tr>
-                    <th>时间</th>
-                    <th>模块</th>
-                    <th>级别</th>
-                    <th>状态</th>
-                    <th>摘要</th>
-                    <th>Trace ID</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="run in visibleHermesRuns"
-                    :key="run.run_id"
-                    @click="selectRun(run.run_id)"
-                  >
-                    <td>{{ formatDateTime(run.started_at) }}</td>
-                    <td>{{ resolveRunModuleLabel(run) }}</td>
-                    <td>
-                      <span class="level-pill" :class="resolveLevelTone(resolveRunLevel(run))">
-                        {{ resolveRunLevel(run) }}
-                      </span>
-                    </td>
-                    <td>
-                      <div class="status-stack">
-                        <span class="status-pill" :class="resolveStatusTone(run)">
-                          {{ resolveStatusLabel(run) }}
-                        </span>
-                        <span class="status-note">{{ resolveRunStatusNote(run) }}</span>
-                      </div>
-                    </td>
-                    <td class="summary-cell">
-                      <strong>{{ resolveRunTitle(run) }}</strong>
-                      <span>{{ formatSummary(run.result_summary) }}</span>
-                      <em class="summary-meta">{{ resolveRunSummaryMeta(run) }}</em>
-                    </td>
-                    <td class="trace-cell">{{ run.run_id }}</td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <div
-                v-if="!filteredHermesRuns.length"
-                class="inline-empty"
-                :class="{ 'is-loading': hermesLoading }"
-              >
+        <div class="table-wrap" :class="{ 'is-empty': !systemLogLoading && !filteredSystemLogEntries.length }">
+          <div v-if="systemLogLoading && !visibleSystemLogEntries.length" class="table-state">
             <TableLoadingState
-                  v-if="hermesLoading"
-                  title="Hermes 日志同步中"
-                  message="正在加载运行日志记录"
+              title="系统日志同步中"
+              message="正在加载系统运行日志记录"
               icon="mdi mdi-text-box-search-outline"
             />
-                <span v-else>当前筛选条件下没有 Hermes 记录。</span>
-              </div>
           </div>
 
-            <div v-else class="table-shell">
-              <table class="log-table system-table">
+          <table v-else-if="visibleSystemLogEntries.length" class="system-log-table">
+            <colgroup>
+              <col class="col-time">
+              <col class="col-level">
+              <col class="col-event">
+              <col class="col-module">
+              <col class="col-outcome">
+              <col class="col-summary">
+              <col class="col-request">
+            </colgroup>
             <thead>
               <tr>
                 <th>时间</th>
@@ -180,24 +160,13 @@
             </tbody>
           </table>
 
-              <div
-                v-if="!filteredSystemLogEntries.length"
-                class="inline-empty"
-                :class="{ 'is-loading': systemLogLoading }"
-              >
-                <TableLoadingState
-                  v-if="systemLogLoading"
-                  title="系统日志同步中"
-                  message="正在加载系统日志记录"
-                  icon="mdi mdi-text-box-search-outline"
-                />
-                <span v-else>当前筛选条件下没有系统日志记录。</span>
+          <div v-else class="inline-empty">
+            当前筛选条件下没有系统日志记录。
           </div>
         </div>
 
-            <div class="table-foot">
-              <span v-if="activeTab === 'hermes'">共 {{ totalCount }} 条 Hermes 日志，目前第 {{ currentPage }} 页</span>
-              <span v-else>共 {{ totalCount }} 条系统日志，目前第 {{ currentPage }} 页</span>
+        <footer v-if="!systemLogLoading && filteredSystemLogEntries.length" class="list-foot">
+          <span class="page-summary">共 {{ totalCount }} 条系统日志，目前第 {{ currentPage }} 页</span>
           <div class="pager" aria-label="分页">
             <button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--">
               <i class="mdi mdi-chevron-left"></i>
@@ -226,39 +195,7 @@
             size="small"
             @change="changePageSize"
           />
-            </div>
-          </section>
-
-          <div v-if="activeTab === 'hermes'" class="analytics-row">
-            <section class="analytics-card trend-card">
-              <div class="analytics-head">
-                <div>
-                  <h3>日志趋势</h3>
-                  <p>近 8 个小时的 Hermes 启动量与失败量，不代表实时心跳</p>
-                </div>
-              </div>
-              <LogTrendChart
-                :labels="trendSeries.labels"
-                :totals="trendSeries.totals"
-                :failures="trendSeries.failures"
-              />
-            </section>
-
-            <section class="analytics-card distribution-card">
-              <div class="analytics-head">
-                <div>
-                  <h3>级别分布</h3>
-                  <p>当前 Hermes 记录</p>
-                </div>
-              </div>
-              <DonutChart
-                :items="levelDistribution.items"
-                :center-value="`${levelDistribution.total}`"
-                center-label="日志总数"
-              />
-            </section>
-          </div>
-        </div>
+        </footer>
       </article>
     </template>
   </section>

web/src/views/TravelRequestDetailView.vue

@@ -38,7 +38,6 @@
                   </div>
                 </div>
               </div>
-
               <div class="hero-fact-grid">
                 <div v-for="item in heroFactItems" :key="item.key" class="hero-fact">
                   <div class="hero-fact-label">
@@ -51,7 +50,6 @@
             </div>
           </div>
         </article>
-
         <article class="progress-card panel">
           <div class="progress-block">
             <div class="progress-head">
@@ -85,7 +83,6 @@
             </div>
           </div>
         </article>
-
         <div class="detail-grid">
           <section class="detail-left">
             <article v-if="!isApplicationDocument" class="detail-card panel">
@@ -129,7 +126,6 @@
                 <p>{{ detailNote }}</p>
               </div>
             </article>
-
             <article class="detail-card panel">
               <div class="detail-card-head">
                 <div>
@@ -164,7 +160,6 @@
                   </button>
                 </div>
               </div>
-
               <div v-if="isApplicationDocument" class="application-detail-facts">
                 <div
                   v-for="item in applicationDetailFactItems"
@@ -176,12 +171,10 @@
                   <strong>{{ item.value }}</strong>
                 </div>
               </div>
-
               <TravelRequestBudgetAnalysis
                 v-if="showBudgetAnalysis"
                 :claim-id="request.claimId"
               />
-
               <div v-if="showApplicationLeaderOpinion" class="application-leader-opinion">
                 <div class="application-leader-opinion-head">
                   <span><i class="mdi mdi-account-tie-outline"></i>领导意见</span>
@@ -209,7 +202,6 @@
                   </article>
                 </div>
               </div>
-
               <div v-if="!isApplicationDocument" class="detail-expense-table">
                 <table>
                   <thead>
@@ -436,7 +428,6 @@
                 <strong>{{ expenseTotal }}</strong>
               </div>
             </article>
-
             <article v-if="showAiAdvicePanel" class="detail-card panel validation-card">
               <div class="validation-head">
                 <div>
@@ -484,18 +475,15 @@
                 </section>
               </div>
             </article>
-
             <EmployeeProfileRiskCard
               v-if="showEmployeeRiskProfile"
               :profile="employeeRiskProfile"
               :loading="employeeRiskProfileLoading"
               :error="employeeRiskProfileError"
             />
-
           </section>
         </div>
       </div>
-
       <footer class="detail-actions">
         <button class="back-action" type="button" @click="emit('backToRequests')">
           <i class="mdi mdi-arrow-left"></i>
@@ -558,7 +546,6 @@
         </p>
       </footer>
     </div>
-
     <input
       ref="expenseUploadInput"
       class="expense-upload-input"
@@ -566,7 +553,6 @@
       accept="image/*,.pdf"
       @change="handleExpenseFileChange"
     />
-
     <Transition name="shared-confirm">
       <div
         v-if="attachmentPreviewOpen"
@@ -607,7 +593,6 @@
               <i class="mdi mdi-close"></i>
             </button>
           </div>
-
           <div class="attachment-preview-body">
             <div class="attachment-source-pane">
               <div v-if="attachmentPreviewLoading" class="attachment-preview-state">
@@ -635,7 +620,6 @@
                 <span>当前附件暂不支持直接预览。</span>
               </div>
             </div>
-
             <aside class="attachment-insight-pane">
               <div class="attachment-insight-head">
                 <span>识别信息</span>
@@ -683,7 +667,6 @@
         </section>
       </div>
     </Transition>
-
     <ConfirmDialog
       :open="submitConfirmDialogOpen"
       badge="提交确认"
@@ -718,7 +701,6 @@
         </div>
       </div>
     </ConfirmDialog>
-
     <ConfirmDialog
       :open="riskOverrideDialogOpen"
       badge="重大风险"
@@ -771,9 +753,7 @@
         </article>
       </div>
     </ConfirmDialog>
-
     <TravelRequestDeleteDialog :open="deleteDialogOpen" :badge="deleteActionLabel" :title="deleteDialogTitle" :description="deleteDialogDescription" :busy="deleteBusy" @close="closeDeleteDialog" @confirm="confirmDeleteRequest" />
-
     <TravelRequestApprovalDialog
       :open="approveConfirmDialogOpen"
       :badge="approvalConfirmBadge"
@@ -790,7 +770,6 @@
       @close="closeApproveConfirmDialog"
       @confirm="confirmApproveRequest"
     />
-
     <ConfirmDialog
       :open="payConfirmDialogOpen"
       badge="付款确认"
@@ -806,20 +785,9 @@
       @close="closePayConfirmDialog"
       @confirm="confirmPayRequest"
     />
-
-    <TravelRequestReturnDialog
-      :open="returnDialogOpen"
-      :title="`确认退回 ${request.id} 吗？`"
-      :description="returnDialogDescription"
-      :busy="returnBusy"
-      :application="isApplicationDocument"
-      @close="closeReturnDialog"
-      @confirm="confirmReturnRequest"
-    />
+    <TravelRequestReturnDialog :open="returnDialogOpen" :title="`确认退回 ${request.id} 吗？`" :description="returnDialogDescription" :busy="returnBusy" :application="isApplicationDocument" @close="closeReturnDialog" @confirm="confirmReturnRequest" />
   </section>
 </template>
-
 <script src="./scripts/TravelRequestDetailView.js"></script>
-
 <style scoped src="../assets/styles/views/travel-request-detail-view.css"></style>
 <style scoped src="../assets/styles/views/travel-request-detail-view-part2.css"></style>

web/src/views/scripts/BudgetCenterView.js

@@ -1,4 +1,5 @@
 import { computed, onMounted, ref, watch } from 'vue'
+import { ElButton, ElInput, ElPagination, ElTable, ElTableColumn } from 'element-plus'
 
 import BudgetTrendChart from '../../components/charts/BudgetTrendChart.vue'
 import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
@@ -215,7 +216,12 @@ export default {
   emits: ['openAssistant'],
   components: {
     BudgetTrendChart,
-    EnterpriseSelect
+    EnterpriseSelect,
+    ElButton,
+    ElInput,
+    ElPagination,
+    ElTable,
+    ElTableColumn
   },
   setup(props, { emit }) {
     const departments = ref(FALLBACK_DEPARTMENTS)

web/src/views/scripts/LogsView.js

@@ -1,29 +1,14 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import LogTrendChart from '../../components/charts/LogTrendChart.vue'
-import DonutChart from '../../components/charts/DonutChart.vue'
 import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
 import TableLoadingState from '../../components/shared/TableLoadingState.vue'
-import { fetchAgentRuns } from '../../services/agentAssets.js'
-import { fetchSystemLogEntries } from '../../services/systemLogs.js'
 import { useSystemState } from '../../composables/useSystemState.js'
 import { useToast } from '../../composables/useToast.js'
-import {
-  AGENT_RUN_POLL_INTERVAL_MS,
-  formatAgentRunElapsed,
-  formatAgentRunProgress,
-  resolveAgentRunHeartbeat,
-  resolveAgentRunStatus
-} from '../../utils/agentRunMonitor.js'
+import { fetchSystemLogEntries } from '../../services/systemLogs.js'
+import { AGENT_RUN_POLL_INTERVAL_MS } from '../../utils/agentRunMonitor.js'
 import { isManagerUser } from '../../utils/accessControl.js'
 
-const SOURCE_LABELS = {
-  schedule: '定时任务',
-  system_event: '系统事件',
-  user_message: '用户触发'
-}
-
 function formatDateTime(value) {
   if (!value) {
     return '未结束'
@@ -37,71 +22,6 @@ function formatDateTime(value) {
   return date.toLocaleString('zh-CN', { hour12: false })
 }
 
-function resolveStatusLabel(run) {
-  return resolveAgentRunStatus(run).label
-}
-
-function resolveStatusTone(run) {
-  return resolveAgentRunStatus(run).tone
-}
-
-function resolveRunSourceLabel(source) {
-  return SOURCE_LABELS[source] || source || '未标记'
-}
-
-function resolveRunModuleLabel(run) {
-  const routeJson = run?.route_json || {}
-  if (routeJson.job_type === 'knowledge_index_sync' || routeJson.job_type === 'llm_wiki_sync') {
-    return '\u77e5\u8bc6\u5f52\u7eb3'
-  }
-  if (routeJson.selected_agent) {
-    return String(routeJson.selected_agent)
-  }
-  if (routeJson.folder) {
-    return String(routeJson.folder)
-  }
-  return resolveRunSourceLabel(run?.source)
-}
-
-function resolveRunTitle(run) {
-  const routeJson = run?.route_json || {}
-  if (routeJson.job_type === 'knowledge_index_sync' || routeJson.job_type === 'llm_wiki_sync') {
-    return `\u77e5\u8bc6\u5f52\u7eb3 \u00b7 ${routeJson.folder || '\u672a\u6307\u5b9a\u76ee\u5f55'}`
-  }
-  return `Hermes 调用 · ${resolveRunModuleLabel(run)}`
-}
-
-function resolveRunLevel(run) {
-  const progress = run?.route_json?.progress || {}
-  const statusInfo = resolveAgentRunStatus(run)
-  if (run?.status === 'failed' || run?.error_message) {
-    return 'ERROR'
-  }
-  if (statusInfo.isSuspicious) {
-    return 'WARN'
-  }
-  if (run?.status === 'blocked' || Number(progress.failed_documents || 0) > 0) {
-    return 'WARN'
-  }
-  if (run?.status === 'running') {
-    return 'INFO'
-  }
-  return 'INFO'
-}
-
-function resolveLevelTone(level) {
-  if (level === 'ERROR') {
-    return 'danger'
-  }
-  if (level === 'WARN') {
-    return 'warning'
-  }
-  if (level === 'INFO') {
-    return 'info'
-  }
-  return 'muted'
-}
-
 function formatSummary(summary) {
   const text = String(summary || '').trim()
   if (!text) {
@@ -113,37 +33,6 @@ function formatSummary(summary) {
   return `${text.slice(0, 64)}...`
 }
 
-function resolveRunSummaryMeta(run) {
-  const statusInfo = resolveAgentRunStatus(run)
-  const progressText = formatAgentRunProgress(run)
-  const elapsedLabel = run?.status === 'running' ? '已运行' : '耗时'
-  const elapsedText = formatAgentRunElapsed(run)
-  const parts = [`阶段 ${statusInfo.phaseLabel}`]
-
-  if (progressText) {
-    parts.push(progressText)
-  }
-  if (elapsedText !== '—') {
-    parts.push(`${elapsedLabel} ${elapsedText}`)
-  }
-
-  return parts.join(' · ')
-}
-
-function resolveRunStatusNote(run) {
-  const statusInfo = resolveAgentRunStatus(run)
-  if (statusInfo.note) {
-    return statusInfo.note
-  }
-
-  const heartbeat = resolveAgentRunHeartbeat(run)
-  if (heartbeat.at !== null) {
-    return `最后心跳 ${formatDateTime(heartbeat.at)}`
-  }
-
-  return '暂无额外状态'
-}
-
 function resolveSystemLevelTone(level) {
   if (level === 'ERROR' || level === 'CRITICAL') {
     return 'danger'
@@ -170,58 +59,9 @@ function resolveSystemOutcomeTone(outcome) {
   return 'muted'
 }
 
-function formatHourBucketLabel(date) {
-  return `${String(date.getHours()).padStart(2, '0')}:00`
-}
-
-function buildTrendSeries(runs) {
-  const parsedTimes = runs
-    .map((run) => new Date(run?.started_at))
-    .filter((date) => !Number.isNaN(date.getTime()))
-  const latest = parsedTimes.length ? new Date(Math.max(...parsedTimes.map((date) => date.getTime()))) : new Date()
-  latest.setMinutes(0, 0, 0)
-
-  const buckets = Array.from({ length: 8 }, (_, index) => {
-    const date = new Date(latest)
-    date.setHours(latest.getHours() - (7 - index))
-    return {
-      key: date.toISOString(),
-      label: formatHourBucketLabel(date),
-      total: 0,
-      failed: 0
-    }
-  })
-  const bucketMap = new Map(buckets.map((bucket) => [bucket.key, bucket]))
-
-  for (const run of runs) {
-    const date = new Date(run?.started_at)
-    if (Number.isNaN(date.getTime())) {
-      continue
-    }
-    date.setMinutes(0, 0, 0)
-    const bucket = bucketMap.get(date.toISOString())
-    if (!bucket) {
-      continue
-    }
-    bucket.total += 1
-    if (run.status === 'failed') {
-      bucket.failed += 1
-    }
-  }
-
-  return {
-    buckets,
-    labels: buckets.map((bucket) => bucket.label),
-    totals: buckets.map((bucket) => bucket.total),
-    failures: buckets.map((bucket) => bucket.failed)
-  }
-}
-
 export default {
   name: 'LogsView',
   components: {
-    LogTrendChart,
-    DonutChart,
     EnterpriseSelect,
     TableLoadingState
   },
@@ -231,14 +71,12 @@ export default {
     const { currentUser } = useSystemState()
     const { toast } = useToast()
 
-    const activeTab = ref('hermes')
-    const hermesLoading = ref(false)
     const systemLogLoading = ref(false)
-    const hermesRuns = ref([])
     const systemSearchKeyword = ref('')
     const systemLevelFilter = ref('')
     const systemEventTypeFilter = ref('')
     const systemLogEntries = ref([])
+    const openFilterKey = ref('')
     const currentPage = ref(1)
     const pageSize = ref(10)
     const pageSizes = [10, 20, 50]
@@ -246,7 +84,6 @@ export default {
     let pollTimer = 0
 
     const isAdmin = computed(() => isManagerUser(currentUser.value))
-    const filteredHermesRuns = computed(() => hermesRuns.value)
     const systemLevelOptions = computed(() =>
       Array.from(new Set(systemLogEntries.value.map((entry) => entry.level).filter(Boolean)))
     )
@@ -254,13 +91,22 @@ export default {
       Array.from(new Set(systemLogEntries.value.map((entry) => entry.event_type).filter(Boolean)))
     )
     const systemLevelFilterOptions = computed(() => [
-      { label: '全部', value: '' },
-      ...systemLevelOptions.value
+      { label: '全部级别', value: '' },
+      ...systemLevelOptions.value.map((level) => ({ label: level, value: level }))
     ])
     const systemEventTypeFilterOptions = computed(() => [
-      { label: '全部', value: '' },
-      ...systemEventTypeOptions.value
+      { label: '全部类型', value: '' },
+      ...systemEventTypeOptions.value.map((eventType) => ({ label: eventType, value: eventType }))
     ])
+    const systemLevelFilterLabel = computed(() =>
+      systemLevelFilterOptions.value.find((item) => item.value === systemLevelFilter.value)?.label || '全部级别'
+    )
+    const systemEventTypeFilterLabel = computed(() =>
+      systemEventTypeFilterOptions.value.find((item) => item.value === systemEventTypeFilter.value)?.label || '全部类型'
+    )
+    const hasActiveFilters = computed(() =>
+      Boolean(systemSearchKeyword.value.trim() || systemLevelFilter.value || systemEventTypeFilter.value)
+    )
     const filteredSystemLogEntries = computed(() => {
       const keyword = systemSearchKeyword.value.trim().toLowerCase()
       return systemLogEntries.value.filter((entry) => {
@@ -290,40 +136,16 @@ export default {
         return haystack.includes(keyword)
       })
     })
-    const hermesRunCount = computed(() => hermesRuns.value.length)
-    const runningRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'running').length)
-    const completedRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'succeeded').length)
-    const failedRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'failed').length)
-    const trendSeries = computed(() => buildTrendSeries(filteredHermesRuns.value))
-    const levelDistribution = computed(() => {
-      const items = [
-        { level: 'INFO', count: 0, color: '#3b82f6' },
-        { level: 'WARN', count: 0, color: '#f59e0b' },
-        { level: 'ERROR', count: 0, color: '#ef4444' }
-      ]
-
-      for (const run of filteredHermesRuns.value) {
-        const item = items.find((candidate) => candidate.level === resolveRunLevel(run))
-        if (item) {
-          item.count += 1
-        }
-      }
-
-      const total = items.reduce((sum, item) => sum + item.count, 0)
-      return {
-        items: items.map((item) => ({
-          name: item.level,
-          value: item.count,
-          color: item.color,
-          display: total ? `${item.count} (${Math.round((item.count / total) * 100)}%)` : '0'
-        })),
-        total
-      }
-    })
-    const activeRows = computed(() =>
-      activeTab.value === 'hermes' ? filteredHermesRuns.value : filteredSystemLogEntries.value
+    const totalCount = computed(() => filteredSystemLogEntries.value.length)
+    const errorCount = computed(() =>
+      filteredSystemLogEntries.value.filter((entry) => ['ERROR', 'CRITICAL'].includes(entry.level)).length
+    )
+    const warningCount = computed(() =>
+      filteredSystemLogEntries.value.filter((entry) => ['WARNING', 'WARN'].includes(entry.level)).length
+    )
+    const infoCount = computed(() =>
+      filteredSystemLogEntries.value.filter((entry) => entry.level === 'INFO').length
     )
-    const totalCount = computed(() => activeRows.value.length)
     const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
     const visiblePageItems = computed(() => {
       if (totalPages.value <= 6) {
@@ -331,10 +153,6 @@ export default {
       }
       return [1, 2, 3, 4, 5, 'ellipsis', totalPages.value]
     })
-    const visibleHermesRuns = computed(() => {
-      const start = (currentPage.value - 1) * pageSize.value
-      return filteredHermesRuns.value.slice(start, start + pageSize.value)
-    })
     const visibleSystemLogEntries = computed(() => {
       const start = (currentPage.value - 1) * pageSize.value
       return filteredSystemLogEntries.value.slice(start, start + pageSize.value)
@@ -345,30 +163,28 @@ export default {
       currentPage.value = 1
     }
 
-    async function loadHermesRuns() {
-      if (!isAdmin.value) {
-        return
+    function toggleFilter(key) {
+      openFilterKey.value = openFilterKey.value === key ? '' : key
     }
 
-      hermesLoading.value = true
-      try {
-        const payload = await fetchAgentRuns({ agent: 'hermes', limit: 100 })
-        hermesRuns.value = Array.isArray(payload) ? payload : []
-      } catch (error) {
-        toast(error.message || 'Hermes 日志加载失败。')
-      } finally {
-        hermesLoading.value = false
-      }
+    function selectLevelFilter(value) {
+      systemLevelFilter.value = value
+      openFilterKey.value = ''
     }
 
-    function selectRun(runId) {
-      router.push({
-        name: 'app-log-detail',
-        params: { logKind: 'hermes', logId: runId }
-      })
+    function selectEventTypeFilter(value) {
+      systemEventTypeFilter.value = value
+      openFilterKey.value = ''
     }
 
-    async function loadSystemLogs() {
+    function resetFilters() {
+      systemSearchKeyword.value = ''
+      systemLevelFilter.value = ''
+      systemEventTypeFilter.value = ''
+      openFilterKey.value = ''
+    }
+
+    async function loadSystemLogs(showToast = false) {
       if (!isAdmin.value) {
         return
       }
@@ -378,7 +194,9 @@ export default {
         const payload = await fetchSystemLogEntries(300)
         systemLogEntries.value = Array.isArray(payload) ? payload : []
       } catch (error) {
+        if (showToast) {
           toast(error.message || '系统日志加载失败。')
+        }
       } finally {
         systemLogLoading.value = false
       }
@@ -394,8 +212,7 @@ export default {
     function startPolling() {
       stopPolling()
       pollTimer = window.setInterval(() => {
-        loadHermesRuns()
-        loadSystemLogs()
+        loadSystemLogs(false)
       }, AGENT_RUN_POLL_INTERVAL_MS)
     }
 
@@ -407,12 +224,7 @@ export default {
     }
 
     watch(
-      [
-        activeTab,
-        systemSearchKeyword,
-        systemLevelFilter,
-        systemEventTypeFilter
-      ],
+      [systemSearchKeyword, systemLevelFilter, systemEventTypeFilter],
       () => {
         currentPage.value = 1
       }
@@ -425,21 +237,15 @@ export default {
     })
 
     watch(
-      () => [
-        hermesRunCount.value,
-        runningRunCount.value,
-        completedRunCount.value,
-        failedRunCount.value
-      ],
-      ([total, running, completed, failed]) => {
-        emit('summary-change', { total, running, completed, failed })
+      () => [totalCount.value, errorCount.value, warningCount.value, infoCount.value],
+      ([total, errors, warnings, info]) => {
+        emit('summary-change', { total, errors, warnings, info })
       },
       { immediate: true }
     )
 
     onMounted(async () => {
-      await loadHermesRuns()
-      await loadSystemLogs()
+      await loadSystemLogs(false)
       startPolling()
     })
 
@@ -448,43 +254,30 @@ export default {
     })
 
     return {
-      activeTab,
       changePageSize,
-      completedRunCount,
-      failedRunCount,
-      filteredHermesRuns,
+      currentPage,
       filteredSystemLogEntries,
       formatDateTime,
       formatSummary,
-      hermesLoading,
-      hermesRunCount,
-      hermesRuns,
+      hasActiveFilters,
       isAdmin,
-      levelDistribution,
-      loadHermesRuns,
       loadSystemLogs,
-      currentPage,
+      openFilterKey,
       pageSize,
-      pageSizes,
       pageSizeOptions,
-      resolveLevelTone,
-      resolveRunLevel,
-      resolveRunModuleLabel,
-      resolveRunSourceLabel,
-      resolveRunStatusNote,
-      resolveRunSummaryMeta,
-      resolveRunTitle,
-      resolveStatusLabel,
-      resolveStatusTone,
+      resetFilters,
       resolveSystemLevelTone,
       resolveSystemOutcomeTone,
-      runningRunCount,
-      selectRun,
+      selectEventTypeFilter,
+      selectLevelFilter,
       selectSystemLog,
+      toggleFilter,
       systemEventTypeFilter,
+      systemEventTypeFilterLabel,
       systemEventTypeFilterOptions,
       systemEventTypeOptions,
       systemLevelFilter,
+      systemLevelFilterLabel,
       systemLevelFilterOptions,
       systemLevelOptions,
       systemLogEntries,
@@ -492,9 +285,7 @@ export default {
       systemSearchKeyword,
       totalCount,
       totalPages,
-      trendSeries,
       visiblePageItems,
-      visibleHermesRuns,
       visibleSystemLogEntries
     }
   }

web/src/views/scripts/budgetAssistantReportModel.js

@@ -14,9 +14,9 @@ const CHINESE_QUARTER_MAP = {
 
 const BUDGET_REPORT_COLORS = {
   travel: 'var(--theme-primary)',
-  meal: 'var(--chart-amber)',
-  office: 'var(--chart-blue)',
-  communication: 'var(--chart-purple)'
+  meal: 'var(--theme-secondary)',
+  office: 'var(--warning)',
+  communication: 'var(--info)'
 }
 
 const PREVIOUS_QUARTER_SPEND = [

web/src/views/scripts/digitalEmployeeWorkRecordsModel.js

@@ -0,0 +1,107 @@
+import {
+  formatAgentRunElapsed,
+  formatAgentRunProgress,
+  resolveAgentRunHeartbeat,
+  resolveAgentRunStatus
+} from '../../utils/agentRunMonitor.js'
+
+const SOURCE_LABELS = {
+  schedule: '定时任务',
+  system_event: '系统事件',
+  user_message: '用户触发'
+}
+
+const KNOWLEDGE_JOB_TYPES = new Set([
+  'knowledge_index_sync',
+  'llm_wiki_sync',
+  'finance_policy_knowledge_organize'
+])
+
+export function formatWorkRecordDateTime(value) {
+  if (!value) {
+    return '未结束'
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value)
+  }
+
+  return date.toLocaleString('zh-CN', { hour12: false })
+}
+
+export function formatWorkRecordSummary(summary) {
+  const text = String(summary || '').trim()
+  if (!text) {
+    return '暂无摘要。'
+  }
+  if (text.length <= 64) {
+    return text
+  }
+  return `${text.slice(0, 64)}...`
+}
+
+export function resolveWorkRecordSourceLabel(source) {
+  return SOURCE_LABELS[source] || source || '未标记'
+}
+
+export function resolveWorkRecordModuleLabel(run) {
+  const routeJson = run?.route_json || {}
+  if (KNOWLEDGE_JOB_TYPES.has(routeJson.job_type)) {
+    return '知识制度整理'
+  }
+  if (routeJson.selected_agent) {
+    return '数字员工'
+  }
+  if (routeJson.folder) {
+    return String(routeJson.folder)
+  }
+  return resolveWorkRecordSourceLabel(run?.source)
+}
+
+export function resolveWorkRecordTitle(run) {
+  const routeJson = run?.route_json || {}
+  if (KNOWLEDGE_JOB_TYPES.has(routeJson.job_type)) {
+    return `知识制度整理 · ${routeJson.folder || '未指定目录'}`
+  }
+  return `数字员工调用 · ${resolveWorkRecordModuleLabel(run)}`
+}
+
+export function resolveWorkRecordStatusLabel(run) {
+  return resolveAgentRunStatus(run).label
+}
+
+export function resolveWorkRecordStatusTone(run) {
+  return resolveAgentRunStatus(run).tone
+}
+
+export function resolveWorkRecordStatusNote(run) {
+  const statusInfo = resolveAgentRunStatus(run)
+  if (statusInfo.note) {
+    return statusInfo.note
+  }
+
+  const heartbeat = resolveAgentRunHeartbeat(run)
+  if (heartbeat.at !== null) {
+    return `最后心跳 ${formatWorkRecordDateTime(heartbeat.at)}`
+  }
+
+  return '暂无额外状态'
+}
+
+export function resolveWorkRecordSummaryMeta(run) {
+  const statusInfo = resolveAgentRunStatus(run)
+  const progressText = formatAgentRunProgress(run)
+  const elapsedLabel = run?.status === 'running' ? '已运行' : '耗时'
+  const elapsedText = formatAgentRunElapsed(run)
+  const parts = [`阶段 ${statusInfo.phaseLabel}`]
+
+  if (progressText) {
+    parts.push(progressText)
+  }
+  if (elapsedText !== '—') {
+    parts.push(`${elapsedLabel} ${elapsedText}`)
+  }
+
+  return parts.join(' · ')
+}