feat: 报销审批流重构与管家计划全链路贯通

- 重构报销状态注册表、审批流路由与平台风险标记 - 完善管家意图规划器与模型计划构建器全链路 - 新增 OCR Worker 脚本、数据库会话管理与通知状态 - 优化文档中心、日志视图、预算中心与员工管理交互 - 增强工作台摘要、图标资源与全局主题样式 - 补充审批路由、状态注册、OCR 服务与管家规划器测试覆盖
2026-06-06 17:19:07 +08:00
parent f60cebadb8
commit e124e4bbcb
162 changed files with 9161 additions and 1941 deletions
--- a/web/src/assets/styles/components/personal-workbench.css
+++ b/web/src/assets/styles/components/personal-workbench.css
@@ -57,31 +57,48 @@
 .workbench :where(button:disabled) { cursor: not-allowed; opacity: 0.7; }

 .assistant-hero {
+  --assistant-bg-position: right center;
+  --assistant-decor-width: clamp(860px, 62vw, 1180px);
+  --assistant-decor-opacity: 0.92;
+  --assistant-readability-mask:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 100%);
+  --assistant-theme-tint:
+    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.025) 54%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.075));
  position: relative;
  z-index: 2;
  min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: visible;
  padding: var(--hero-padding-top) 20px var(--hero-padding-bottom) 52px;
-  border: 1px solid rgba(255, 255, 255, 0.9);
-  border-radius: 16px;
-  background: 
-    linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
-  background-color: transparent;
-  backdrop-filter: blur(40px) saturate(200%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%);
-  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.04), inset 0 2px 4px rgba(255, 255, 255, 1);
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.54)),
+    var(--assistant-theme-tint);
+  background-color: rgba(247, 252, 255, 0.72);
+  backdrop-filter: blur(14px) saturate(1.18);
+  -webkit-backdrop-filter: blur(14px) saturate(1.18);
+  box-shadow:
+    0 12px 28px rgba(15, 23, 42, 0.045),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.07);
  isolation: isolate;
+  animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+  animation-delay: 0ms;
 }

 .assistant-hero::after {
  content: "";
  position: absolute;
  top: 0;
-  right: 100px;
+  right: 0;
  bottom: 0;
-  width: 50%;
-  min-width: 400px;
-  background: url("../../images/hero-financial-decor.svg") right center / auto 100% no-repeat;
+  width: 82%;
+  min-width: 760px;
+  background: url("../../images/workbench-hero-right-bg.png") var(--assistant-bg-position) / var(--assistant-decor-width) auto no-repeat;
+  opacity: var(--assistant-decor-opacity);
  pointer-events: none;
  z-index: 0;
 }
@@ -92,8 +109,9 @@
  inset: 0;
  border-radius: inherit;
  background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
-    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
+    var(--assistant-readability-mask),
+    linear-gradient(120deg, rgba(255, 255, 255, 0.36), transparent 22%, transparent 72%, rgba(255, 255, 255, 0.18)),
+    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.05), transparent 58%);
  pointer-events: none;
  z-index: 1;
 }
@@ -114,8 +132,23 @@
  font-weight: 850;
 }

-.assistant-copy h1 span {
+.assistant-copy h1 span:not(.typing-cursor) {
  color: var(--workbench-primary-active);
+  display: inline-block;
+  animation: workbenchItemIn 400ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+}
+
+.typing-cursor {
+  display: inline-block;
+  color: var(--workbench-primary-active);
+  font-weight: 400;
+  margin-left: 2px;
+  animation: cursorBlink 0.9s step-end infinite;
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }

 .assistant-copy p {
@@ -127,29 +160,70 @@
  font-weight: 600;
 }

+.assistant-copy > * {
+  animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+}
+
+.assistant-copy > h1 { animation-delay: 80ms; }
+.assistant-copy > p { animation-delay: 160ms; }
+.assistant-copy > .assistant-composer { animation-delay: 240ms; }
+.assistant-copy > .assistant-file-strip { animation-delay: 320ms; }
+.assistant-copy > .quick-prompts { animation-delay: 320ms; }
+
 .assistant-file-input { display: none; }

 .assistant-composer {
  position: relative;
-  z-index: 5;
+  z-index: 20;
  display: grid;
  gap: 6px;
  max-width: 920px;
  min-height: var(--composer-min-height);
  padding: var(--composer-padding-block) 18px 10px;
-  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
-  backdrop-filter: blur(4px);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
+    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.045), rgba(255, 255, 255, 0.18));
+  box-shadow:
+    0 10px 24px rgba(15, 23, 42, 0.045),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
+  backdrop-filter: blur(10px) saturate(1.14);
+  -webkit-backdrop-filter: blur(10px) saturate(1.14);
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    box-shadow 180ms var(--ease);
+}
+
+.assistant-composer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(110deg, rgba(255, 255, 255, 0.32), transparent 32%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
+  pointer-events: none;
+}
+
+.assistant-composer > * {
+  position: relative;
+  z-index: 1;
 }

 .assistant-composer:focus-within {
-  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.85);
+  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.58);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
+    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06), rgba(255, 255, 255, 0.22));
  box-shadow: 
-    0 0 0 4px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14),
-    0 16px 36px rgba(15, 23, 42, 0.06),
-    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+    0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11),
+    0 14px 30px rgba(15, 23, 42, 0.055),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
 }

 .assistant-composer textarea {
@@ -331,24 +405,28 @@
  position: relative;
  isolation: isolate;
  display: grid;
-  grid-template-columns: 40px minmax(0, 1fr) 10px;
+  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 0;
-  padding: 17px 12px 17px 26px;
+  padding: 16px 18px 16px 22px;
  overflow: visible;
+  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 3px solid color-mix(in srgb, var(--capability-color) 80%, rgba(255, 255, 255, 0.9));
-  border-radius: 12px;
-  background: 
-    linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
-  background-color: transparent;
-  backdrop-filter: blur(40px) saturate(200%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%);
-  text-align: left;
+  min-width: 0;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.15);
+  border-radius: 4px;
  box-shadow: 
-    0 16px 32px rgba(0, 0, 0, 0.04),
-    inset 0 2px 4px rgba(255, 255, 255, 1);
+    0 8px 24px rgba(15, 23, 42, 0.03),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+  color: var(--workbench-ink);
+  text-decoration: none;
+  animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+  animation-delay: var(--delay, 100ms);
  transition:
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease),
@@ -356,16 +434,12 @@
    transform 180ms var(--ease);
 }

-.capability-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
-    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
-  pointer-events: none;
-  z-index: 0;
+.capability-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.4);
+  box-shadow: 
+    0 16px 32px rgba(15, 23, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
 }

 .capability-card > * {
@@ -373,13 +447,9 @@
  z-index: 1;
 }

-.capability-card::after {
-  display: none;
-}
-
 .capability-icon {
  --workbench-list-icon-size: 40px;
-  --workbench-list-icon-art-size: 23px;
+  --workbench-list-icon-art-size: 24px;
  width: 40px;
  height: 40px;
  color: var(--capability-color);
@@ -388,8 +458,9 @@
 .capability-copy {
  min-width: 0;
  display: grid;
+  justify-items: start;
  gap: 4px;
-  padding-left: 18px;
+  text-align: left;
 }

 .capability-copy strong {
@@ -400,6 +471,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  text-align: left;
 }

 .capability-copy small {
@@ -409,11 +481,19 @@
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
+  text-align: left;
 }

 .capability-arrow {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  min-width: 18px;
  color: color-mix(in srgb, var(--workbench-muted) 68%, #ffffff);
  font-size: 18px;
+  line-height: 1;
 }

 .capability-card--green {
@@ -461,28 +541,16 @@
  min-height: 0;
  height: 100%;
  padding: 12px 14px;
-  background: 
-    linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
-  background-color: transparent;
-  backdrop-filter: blur(40px) saturate(200%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%);
-  border: 1px solid rgba(255, 255, 255, 0.9);
-  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.15);
+  border-radius: 4px;
  box-shadow: 
-    0 16px 32px rgba(0, 0, 0, 0.04),
-    inset 0 2px 4px rgba(255, 255, 255, 1);
-}
-
-.workbench-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
-    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
-  pointer-events: none;
-  z-index: 1;
+    0 12px 28px rgba(15, 23, 42, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+  animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+  animation-delay: var(--delay, 200ms);
 }

 .workbench-card > * {
@@ -534,6 +602,18 @@
  font-weight: 850;
 }

+.insight-metric-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--insight-color) 4%, transparent);
+  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
+  animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+  animation-delay: calc(400ms + var(--item-index, 0) * 80ms);
+}
+
 .link-action {
  display: inline-flex;
  align-items: center;
@@ -560,6 +640,11 @@
  border-top: 0;
 }

+.progress-row {
+  animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
+  animation-delay: calc(300ms + var(--item-index, 0) * 80ms);
+}
+
 .progress-identity,
 .progress-result {
  gap: 12px;
@@ -716,40 +801,66 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  font-size: 20px;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  font-size: 22px;
  flex-shrink: 0;
+  position: relative;
+  box-shadow: 
+    0 4px 10px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+}
+
+.expense-type-icon::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  border-radius: inherit;
+  z-index: 0;
+}
+
+.expense-type-icon i {
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
 }

 .expense-type-icon--blue {
-  background: color-mix(in srgb, var(--workbench-primary, #3a7ca5) 12%, #ffffff);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--workbench-primary, #3a7ca5) 12%, #ffffff) 0%, color-mix(in srgb, var(--workbench-primary, #3a7ca5) 3%, #ffffff) 100%);
+  border: 1px solid color-mix(in srgb, var(--workbench-primary, #3a7ca5) 20%, #ffffff);
  color: var(--workbench-primary, #3a7ca5);
 }

 .expense-type-icon--amber {
-  background: color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 12%, #ffffff);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 12%, #ffffff) 0%, color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 3%, #ffffff) 100%);
+  border: 1px solid color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 20%, #ffffff);
  color: var(--workbench-chart-amber, #b58b4c);
 }

 .expense-type-icon--emerald {
-  background: color-mix(in srgb, #10b981 12%, #ffffff);
-  color: #10b981;
+  background: linear-gradient(135deg, color-mix(in srgb, #0f8f68 12%, #ffffff) 0%, color-mix(in srgb, #0f8f68 3%, #ffffff) 100%);
+  border: 1px solid color-mix(in srgb, #0f8f68 20%, #ffffff);
+  color: #0f8f68;
 }

 .expense-type-icon--violet {
-  background: color-mix(in srgb, #8b5cf6 12%, #ffffff);
-  color: #8b5cf6;
+  background: linear-gradient(135deg, color-mix(in srgb, #6d5bd0 12%, #ffffff) 0%, color-mix(in srgb, #6d5bd0 3%, #ffffff) 100%);
+  border: 1px solid color-mix(in srgb, #6d5bd0 20%, #ffffff);
+  color: #6d5bd0;
 }

 .expense-type-icon--cyan {
-  background: color-mix(in srgb, #06b6d4 12%, #ffffff);
-  color: #06b6d4;
+  background: linear-gradient(135deg, color-mix(in srgb, #0788a2 12%, #ffffff) 0%, color-mix(in srgb, #0788a2 3%, #ffffff) 100%);
+  border: 1px solid color-mix(in srgb, #0788a2 20%, #ffffff);
+  color: #0788a2;
 }

 .expense-type-icon--muted {
-  background: var(--info-soft, #f1f5f9);
+  background: linear-gradient(135deg, var(--info-soft, #f1f5f9) 0%, #ffffff 100%);
+  border: 1px solid var(--workbench-line);
  color: var(--workbench-muted, #64748b);
 }

@@ -877,3 +988,22 @@
  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
  color: var(--workbench-primary-active);
 }
+
+@keyframes workbenchItemIn {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .assistant-hero,
+  .capability-card,
+  .workbench-card {
+    animation: none !important;
+  }
+}