feat: 优化差旅报销预审流程与个人工作台 UI 体系

- 完善 user_agent_application 申请差旅报销预审槽位与消息组装 - 增强预算助理报告与风险建议卡片交互 - 重构登录页视觉样式与移动端响应式适配 - 优化个人工作台、文档中心、政策中心、员工管理等页面布局 - 拆分 travelRequestDetailPreReviewModel 为 advice/submit 模型 - 补充报销草稿、风险复核、Item Sync 与模板执行器测试覆盖
2026-06-02 14:01:51 +08:00
parent 92444e7eae
commit ca691f3ee0
107 changed files with 5663 additions and 1542 deletions
--- a/web/src/assets/styles/components/personal-workbench-glass.css
+++ b/web/src/assets/styles/components/personal-workbench-glass.css
@@ -0,0 +1,162 @@
+.workbench {
+  --workbench-capability-bg-image: url("../../personal-workbench-card-glass-capability.webp");
+  --workbench-panel-bg-image: url("../../personal-workbench-card-glass-panel.webp");
+  --workbench-capability-tile-size: 384px 384px;
+  --workbench-panel-tile-size: 512px 512px;
+  --workbench-glass-base:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.62) 54%, rgba(255, 255, 255, 0.7) 100%);
+  --workbench-glass-theme-tint:
+    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.075) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.022) 58%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.052) 100%);
+  --workbench-glass-highlight:
+    linear-gradient(120deg, rgba(255, 255, 255, 0.5) 0%, transparent 16%, transparent 82%, rgba(255, 255, 255, 0.22) 100%);
+  --workbench-glass-noise-opacity: 0.012;
+  --workbench-glass-blur: blur(18px) saturate(1.28);
+}
+
+.capability-card {
+  isolation: isolate;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
+  border-left: 3px solid color-mix(in srgb, var(--capability-color) 42%, rgba(255, 255, 255, 0.72));
+  background:
+    var(--workbench-glass-base),
+    linear-gradient(135deg, color-mix(in srgb, var(--capability-soft) 46%, transparent) 0%, transparent 52%, color-mix(in srgb, var(--capability-color) 11%, transparent) 100%),
+    var(--workbench-glass-theme-tint);
+  background-color: rgba(255, 255, 255, 0.64);
+  box-shadow:
+    0 10px 28px rgba(15, 23, 42, 0.055),
+    inset 0 1px 0 rgba(255, 255, 255, 0.84),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
+  backdrop-filter: var(--workbench-glass-blur);
+  -webkit-backdrop-filter: var(--workbench-glass-blur);
+}
+
+.capability-card::before,
+.capability-card::after,
+.workbench-card::before,
+.workbench-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  pointer-events: none;
+}
+
+.capability-card::before {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
+    var(--workbench-capability-bg-image) 0 0 / var(--workbench-capability-tile-size) repeat;
+  mix-blend-mode: soft-light;
+  opacity: var(--workbench-glass-noise-opacity);
+}
+
+.capability-card::after {
+  border: 1px solid rgba(255, 255, 255, 0.38);
+  border-left: 0;
+  border-radius: inherit;
+  background: var(--workbench-glass-highlight);
+  opacity: 0.58;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.58),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
+  transition: opacity 180ms var(--ease);
+}
+
+.capability-icon,
+.capability-copy,
+.capability-arrow {
+  position: relative;
+  z-index: 1;
+}
+
+.capability-icon {
+  border: 1px solid color-mix(in srgb, var(--capability-color) 18%, rgba(255, 255, 255, 0.68));
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)),
+    color-mix(in srgb, var(--capability-soft) 72%, transparent);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
+}
+
+.workbench-card {
+  position: relative;
+  isolation: isolate;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.64) 55%, rgba(255, 255, 255, 0.72)),
+    var(--workbench-glass-theme-tint);
+  background-color: rgba(255, 255, 255, 0.66);
+  box-shadow:
+    0 12px 30px rgba(15, 23, 42, 0.052),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.07);
+  backdrop-filter: var(--workbench-glass-blur);
+  -webkit-backdrop-filter: var(--workbench-glass-blur);
+}
+
+.workbench-card::before,
+.workbench-card::after {
+  border-radius: inherit;
+}
+
+.workbench-card::before {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%),
+    var(--workbench-panel-bg-image) 0 0 / var(--workbench-panel-tile-size) repeat;
+  mix-blend-mode: soft-light;
+  opacity: calc(var(--workbench-glass-noise-opacity) * 0.8);
+}
+
+.workbench-card::after {
+  border: 1px solid rgba(255, 255, 255, 0.36);
+  background: var(--workbench-glass-highlight);
+  opacity: 0.56;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.58),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.055);
+  transition: opacity 180ms var(--ease);
+}
+
+.workbench-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.todo-row,
+.progress-row {
+  position: relative;
+  border-top: 0;
+  background: transparent;
+  box-shadow: inset 0 1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
+}
+
+.todo-row:first-child,
+.progress-row:first-child {
+  box-shadow: none;
+}
+
+.todo-row:hover,
+.progress-row:hover {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.18)),
+    rgba(var(--theme-primary-rgb, 58, 124, 165), 0.035);
+  box-shadow: inset 0 1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
+}
+
+.capability-card:hover,
+.workbench-card:hover {
+  box-shadow:
+    0 16px 36px rgba(15, 23, 42, 0.075),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
+}
+
+.capability-card:hover::after,
+.workbench-card:hover::after {
+  opacity: 0.88;
+}
+
+.capability-card:hover {
+  transform: translateY(-1px);
+}