From 99231f30f1c5e69858a7f70ce24f9797b59a7980 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 03:24:49 +0000
Subject: [PATCH] style(web): update view styles

- audit-view.css: update audit view styles
- requests-view.css: update requests view styles
- travel-reimbursement-create-view.css: update travel form styles
- travel-request-detail-view.css: update travel detail view styles
---
 web/src/assets/styles/views/audit-view.css    |  27 +--
 web/src/assets/styles/views/requests-view.css | 114 +++++++++-
 .../travel-reimbursement-create-view.css      |  71 ++++++-
 .../views/travel-request-detail-view.css      | 194 ++++++++++++++++--
 4 files changed, 357 insertions(+), 49 deletions(-)

diff --git a/web/src/assets/styles/views/audit-view.css b/web/src/assets/styles/views/audit-view.css
index 989567c..aecf90d 100644
--- a/web/src/assets/styles/views/audit-view.css
+++ b/web/src/assets/styles/views/audit-view.css
@@ -979,23 +979,6 @@ tbody tr.spotlight {
   color: #94a3b8;
 }
 
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: rgba(15, 23, 42, 0.34);
-}
-
-.version-modal {
-  width: min(480px, 100%);
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
-}
-
 .version-modal-summary {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
@@ -1041,13 +1024,6 @@ tbody tr.spotlight {
   background: #fff;
 }
 
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-}
-
 .prompt-stack {
   display: grid;
   gap: 14px;
@@ -1414,8 +1390,7 @@ tbody tr.spotlight {
     grid-template-columns: 1fr;
   }
 
-  .review-action-strip,
-  .modal-actions {
+  .review-action-strip {
     flex-direction: column;
   }
 
diff --git a/web/src/assets/styles/views/requests-view.css b/web/src/assets/styles/views/requests-view.css
index e523faa..5c8269d 100644
--- a/web/src/assets/styles/views/requests-view.css
+++ b/web/src/assets/styles/views/requests-view.css
@@ -283,6 +283,7 @@
 }
 
 .table-wrap {
+  min-height: 0;
   margin-top: 10px;
   overflow-x: auto;
   overflow-y: auto;
@@ -290,10 +291,56 @@
   border-radius: 10px;
 }
 
+.table-state {
+  min-height: 260px;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 28px 20px;
+  text-align: center;
+  color: #64748b;
+  background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
+}
+
+.table-state .mdi {
+  font-size: 28px;
+  color: #10b981;
+}
+
+.table-state strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.table-state p {
+  max-width: 420px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.table-state.error {
+  background: linear-gradient(180deg, #fffdfd 0%, #fff6f6 100%);
+}
+
+.table-state.error .mdi {
+  color: #ef4444;
+}
+
+.retry-btn {
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #f1c5c5;
+  border-radius: 8px;
+  background: #fff;
+  color: #b91c1c;
+  font-size: 13px;
+  font-weight: 750;
+}
+
 table {
-  height: 100%;
   width: 100%;
-  min-width: 1140px;
+  min-width: 1080px;
   border-collapse: collapse;
   table-layout: fixed;
 }
@@ -346,6 +393,55 @@ tbody tr:last-child td {
   font-weight: 800;
 }
 
+.type-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.type-tag.travel {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.type-tag.entertainment {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.type-tag.hotel,
+.type-tag.transport {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.type-tag.meal {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.type-tag.office {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.type-tag.meeting,
+.type-tag.training {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.type-tag.other {
+  background: #f8fafc;
+  color: #475569;
+}
+
 .status-tag {
   min-height: 24px;
   display: inline-flex;
@@ -376,6 +472,18 @@ tbody tr:last-child td {
   color: #f97316;
 }
 
+.status-tag.draft {
+  border-color: #fde68a;
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.status-tag.danger {
+  border-color: #fecaca;
+  background: #fef2f2;
+  color: #dc2626;
+}
+
 .status-tag.neutral {
   border-color: #cbd5e1;
   background: #f8fafc;
@@ -387,7 +495,7 @@ tbody tr:last-child td {
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
-  margin-top: 24px;
+  margin-top: 12px;
 }
 
 .page-summary {
diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view.css b/web/src/assets/styles/views/travel-reimbursement-create-view.css
index ec23d75..296fc7c 100644
--- a/web/src/assets/styles/views/travel-reimbursement-create-view.css
+++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css
@@ -763,7 +763,7 @@
   display: grid;
   grid-template-columns: 32px minmax(0, 1fr);
   gap: 8px;
-  align-items: center;
+  align-items: start;
   padding: 12px;
   border-radius: 14px;
   border: 1px solid rgba(206, 216, 226, 0.88);
@@ -773,6 +773,11 @@
   transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
 }
 
+.review-side-metric-card.invalid {
+  border-color: rgba(239, 68, 68, 0.34);
+  background: rgba(254, 242, 242, 0.72);
+}
+
 .review-side-metric-card.editable:hover,
 .review-side-metric-card.editing {
   border-color: rgba(16, 185, 129, 0.34);
@@ -807,6 +812,7 @@
   font-size: 13px;
   font-weight: 850;
   line-height: 1.35;
+  word-break: break-word;
 }
 
 .review-inline-input {
@@ -821,6 +827,12 @@
   font-weight: 700;
 }
 
+.review-inline-input.invalid {
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #b91c1c;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
+}
+
 .review-inline-input:focus {
   outline: none;
   border-color: rgba(16, 185, 129, 0.42);
@@ -853,6 +865,13 @@
   color: #047857;
 }
 
+.review-inline-error {
+  color: #dc2626;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
 .review-side-edit-hint {
   position: absolute;
   top: 8px;
@@ -901,16 +920,17 @@
 
 .review-side-category-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
 
 .review-side-category-card {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
   padding: 12px;
+  min-height: 66px;
   border-radius: 14px;
   border: 1px solid rgba(226, 232, 240, 0.94);
   background: rgba(255, 255, 255, 0.68);
@@ -927,18 +947,21 @@
 .review-side-category-copy {
   display: grid;
   gap: 4px;
+  min-width: 0;
 }
 
 .review-side-category-copy strong {
   color: #0f172a;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 850;
+  line-height: 1.35;
+  white-space: nowrap;
 }
 
 .review-side-category-copy p {
   margin: 0;
   color: #64748b;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1.4;
 }
 
@@ -984,6 +1007,10 @@
   font-weight: 900;
 }
 
+.review-side-risk-score.empty {
+  color: #94a3b8;
+}
+
 .review-side-risk-summary {
   margin: 0;
   color: #334155;
@@ -1018,6 +1045,40 @@
   opacity: 0.5;
 }
 
+.review-side-empty {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  padding: 14px;
+  border: 1px dashed rgba(203, 213, 225, 0.92);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.review-side-empty-icon {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: rgba(240, 244, 248, 0.96);
+  color: #94a3b8;
+  font-size: 18px;
+}
+
+.review-side-empty strong {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.review-side-empty p {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 .review-side-save-pill {
   position: sticky;
   bottom: 0;
diff --git a/web/src/assets/styles/views/travel-request-detail-view.css b/web/src/assets/styles/views/travel-request-detail-view.css
index dcf2a71..3e60341 100644
--- a/web/src/assets/styles/views/travel-request-detail-view.css
+++ b/web/src/assets/styles/views/travel-request-detail-view.css
@@ -101,7 +101,8 @@
 }
 
 .risk-pill,
-.state-pill {
+.state-pill,
+.approval-pill {
   width: max-content;
   padding: 5px 10px;
   border-radius: 6px;
@@ -109,10 +110,47 @@
   font-weight: 850;
 }
 
-.risk-pill.high { background: #fee2e2; color: #ef4444; }
-.risk-pill.medium { background: #ffedd5; color: #f97316; }
-.risk-pill.low { background: #dcfce7; color: #059669; }
-.state-pill { background: #dbeafe; color: #2563eb; }
+.state-pill.info,
+.approval-pill.info,
+.risk-pill.info {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.state-pill.success,
+.approval-pill.success,
+.risk-pill.success,
+.risk-pill.low {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.state-pill.warning,
+.approval-pill.warning,
+.risk-pill.warning,
+.risk-pill.medium {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.state-pill.danger,
+.approval-pill.danger,
+.risk-pill.danger,
+.risk-pill.high {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.state-pill.draft,
+.approval-pill.draft {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.risk-pill.neutral {
+  background: #f1f5f9;
+  color: #475569;
+}
 
 .countdown {
   display: inline-flex;
@@ -195,7 +233,7 @@
 .progress-line {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(var(--progress-columns, 5), minmax(0, 1fr));
 }
 
 .progress-step {
@@ -369,6 +407,18 @@
   line-height: 1.5;
 }
 
+.detail-note {
+  min-height: 84px;
+  padding: 12px 14px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
 .detail-expense-table {
   min-width: 0;
   overflow-x: auto;
@@ -407,13 +457,49 @@
 .detail-expense-table th:nth-child(2),
 .detail-expense-table td:nth-child(2) { width: 12%; }
 .detail-expense-table th:nth-child(3),
-.detail-expense-table td:nth-child(3) { width: 23%; }
+.detail-expense-table td:nth-child(3) { width: 21%; }
 .detail-expense-table th:nth-child(4),
 .detail-expense-table td:nth-child(4) { width: 10%; }
 .detail-expense-table th:nth-child(5),
-.detail-expense-table td:nth-child(5) { width: 18%; }
+.detail-expense-table td:nth-child(5) { width: 16%; }
 .detail-expense-table th:nth-child(6),
-.detail-expense-table td:nth-child(6) { width: 25%; }
+.detail-expense-table td:nth-child(6) { width: 21%; }
+.detail-expense-table th:nth-child(7),
+.detail-expense-table td:nth-child(7) { width: 8%; }
+
+.cell-editor {
+  display: grid;
+  gap: 6px;
+}
+
+.editor-stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.editor-input,
+.editor-select {
+  width: 100%;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 12px;
+}
+
+.editor-input:focus,
+.editor-select:focus {
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
+  outline: none;
+}
+
+.cell-editor span {
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.45;
+}
 
 .expense-time strong,
 .expense-type strong,
@@ -498,11 +584,33 @@
   font-weight: 800;
 }
 
+.inline-action.primary {
+  border-color: #10b981;
+  background: #10b981;
+  color: #fff;
+}
+
 .inline-action:hover {
   border-color: rgba(16, 185, 129, .36);
   color: #047857;
 }
 
+.inline-action.primary:hover {
+  border-color: #059669;
+  background: #059669;
+  color: #fff;
+}
+
+.expense-action-cell {
+  min-width: 84px;
+}
+
+.row-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
 .risk-inline-tag.low { background: #ecfdf5; color: #059669; }
 .risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
 .risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
@@ -574,6 +682,13 @@
   font-weight: 760;
 }
 
+.detail-actions button:disabled,
+.inline-action:disabled {
+  cursor: not-allowed;
+  opacity: .58;
+  box-shadow: none;
+}
+
 .back-action {
   min-width: 104px;
   border: 1px solid #d7e0ea;
@@ -597,17 +712,66 @@
 }
 
 .reject-action {
-  min-width: 86px;
+  min-width: 98px;
   border: 1px solid #fecaca;
   background: #fff;
   color: #ef4444;
 }
 
-.supplement-action {
-  min-width: 86px;
-  border: 1px solid #fed7aa;
-  background: #fff;
-  color: #ea580c;
+.detail-action-hint {
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.validation-card {
+  border: 1px solid #e6f0eb;
+  background: linear-gradient(180deg, #fcfffd 0%, #f7fbf9 100%);
+}
+
+.validation-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.validation-pill {
+  min-height: 26px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.validation-pill.ready {
+  background: #dcfce7;
+  color: #047857;
+}
+
+.validation-pill.pending {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.validation-summary {
+  margin: 0;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.validation-list {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+  padding-left: 18px;
+  color: #b45309;
+  font-size: 13px;
+  line-height: 1.55;
 }
 
 .detail-overlay {