Refine travel reimbursement steward flow

Align planner, runtime rules, and policy assets so travel guidance matches the updated reimbursement workflow.
2026-06-15 22:55:18 +08:00
parent 792741709a
commit 9f7b8b46a3
85 changed files with 9496 additions and 2555 deletions
--- a/web/src/assets/styles/components/travel-reimbursement-message-item.css
+++ b/web/src/assets/styles/components/travel-reimbursement-message-item.css
@@ -532,11 +532,10 @@

 .message-answer-markdown :deep(table) {
  width: 100%;
-  min-width: 560px;
+  min-width: 460px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
-  table-layout: fixed;
  background: #ffffff;
  font-size: inherit;
 }
@@ -548,25 +547,6 @@
  text-align: left;
  vertical-align: top;
  white-space: normal;
-  word-break: normal;
-  overflow-wrap: break-word;
-}
-
-.message-answer-markdown :deep(th:first-child),
-.message-answer-markdown :deep(td:first-child) {
-  width: 88px;
-  white-space: nowrap;
-  word-break: keep-all;
-  overflow-wrap: normal;
-}
-
-.message-answer-markdown :deep(th:last-child),
-.message-answer-markdown :deep(td:last-child) {
-  width: 112px;
-  text-align: right;
-  white-space: nowrap;
-  word-break: keep-all;
-  overflow-wrap: normal;
 }

 .message-answer-markdown :deep(th) {
@@ -806,6 +786,30 @@
  border-top: 1px solid #e6edf5;
 }

+.structured-card-reveal-enter-active .application-preview-row {
+  animation: structured-card-item-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.structured-card-reveal-enter-active .application-preview-row:nth-child(2) {
+  animation-delay: 35ms;
+}
+
+.structured-card-reveal-enter-active .application-preview-row:nth-child(3) {
+  animation-delay: 70ms;
+}
+
+.structured-card-reveal-enter-active .application-preview-row:nth-child(4) {
+  animation-delay: 105ms;
+}
+
+.structured-card-reveal-enter-active .application-preview-row:nth-child(5) {
+  animation-delay: 140ms;
+}
+
+.structured-card-reveal-enter-active .application-preview-row:nth-child(n + 6) {
+  animation-delay: 165ms;
+}
+
 .application-preview-row.editable {
  cursor: pointer;
 }
--- a/web/src/assets/styles/views/travel-request-detail-view.css
+++ b/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;
@@ -861,6 +861,9 @@
 }

 .detail-expense-table {
+  --expense-editor-control-height: 34px;
+  --expense-editor-control-line-height: 16px;
+  --expense-editor-control-padding-y: calc((var(--expense-editor-control-height) - var(--expense-editor-control-line-height) - 2px) / 2);
  min-width: 0;
  overflow-x: auto;
 }
@@ -940,10 +943,10 @@

 .detail-expense-table .col-time { width: 10%; }
 .detail-expense-table .col-filled-at { width: 13%; }
-.detail-expense-table .col-type { width: 11%; }
+.detail-expense-table .col-type { width: 14%; }
 .detail-expense-table .col-desc { width: 15%; }
 .detail-expense-table .col-amount { width: 9%; }
-.detail-expense-table .col-attachment { width: 18%; }
+.detail-expense-table .col-attachment { width: 15%; }
 .detail-expense-table .col-risk-note { width: 15%; }
 .detail-expense-table .col-action { width: 9%; }

@@ -1000,61 +1003,162 @@
  grid-template-columns: minmax(0, 1fr);
 }

-.editor-input,
-.editor-select,
-.editor-textarea {
+.editor-control,
+.editor-select {
  width: 100%;
-  min-height: 34px;
-  padding: 0 10px;
-  border: 1px solid #d7e0ea;
-  border-radius: 4px;
-  background: #fff;
+  min-width: 0;
+  --el-component-size: var(--expense-editor-control-height) !important;
+  --el-component-size-small: var(--expense-editor-control-height) !important;
+  --el-input-height: var(--expense-editor-control-height) !important;
+  box-sizing: border-box !important;
+}
+
+
+
+.editor-select {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.editor-date-picker.el-date-editor {
+  --el-date-editor-width: 100%;
+}
+
+.editor-date-picker.editor-control :deep(.el-input__wrapper) {
+  gap: 4px;
+  padding: 0 7px !important;
+}
+
+.editor-date-picker.editor-control :deep(.el-input__prefix) {
+  flex: 0 0 14px;
+  width: 14px;
+  min-width: 14px;
+  margin: 0;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.editor-date-picker.editor-control :deep(.el-input__prefix-inner) {
+  width: 14px;
+  font-size: 13px;
+}
+
+.editor-date-picker.editor-control :deep(.el-input__suffix) {
+  display: none !important;
+}
+
+.editor-control :deep(.el-input__wrapper),
+.editor-control :deep(.el-select__wrapper),
+.editor-select :deep(.el-select__wrapper),
+.editor-date-picker :deep(.el-input__wrapper) {
+  box-sizing: border-box !important;
+  padding: 0 10px !important;
+  border-radius: 4px !important;
+  background: #fff !important;
+  box-shadow: 0 0 0 1px #d7e0ea inset !important;
+  display: flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+}
+
+.editor-control:focus-within :deep(.el-input__wrapper),
+.editor-control:focus-within :deep(.el-select__wrapper),
+.editor-select:focus-within :deep(.el-select__wrapper),
+.editor-date-picker:focus-within :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--theme-primary) inset, 0 0 0 3px var(--theme-focus-ring);
+}
+
+.editor-control :deep(.el-input__inner),
+.editor-select :deep(.el-select__selected-item),
+.editor-select :deep(.el-select__placeholder),
+.editor-date-picker :deep(.el-input__inner) {
+  height: var(--expense-editor-control-line-height) !important;
  color: #0f172a;
  font-size: 12px;
+  line-height: var(--expense-editor-control-line-height) !important;
 }

-.editor-textarea {
-  min-height: 68px;
-  padding: 8px 10px;
-  resize: vertical;
-  line-height: 1.45;
-}
-
-.risk-note-editor-textarea {
-  min-height: 34px;
-  max-height: 78px;
-  overflow-y: auto;
-  resize: none;
-}
-
-.currency-editor {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
+.editor-control :deep(.el-input__prefix),
+.editor-control :deep(.el-input__suffix),
+.editor-date-picker :deep(.el-input__prefix),
+.editor-date-picker :deep(.el-input__suffix) {
+  display: inline-flex;
  align-items: center;
-  gap: 8px;
 }

-.currency-editor span {
-  min-height: 34px;
-  display: grid;
-  place-items: center;
-  border: 1px solid #d7e0ea;
-  border-radius: 4px;
-  background: #f8fafc;
+.editor-select :deep(.el-select__wrapper) {
+  min-height: var(--expense-editor-control-height);
+  height: var(--expense-editor-control-height);
+}
+
+.editor-amount-input :deep(.el-input__prefix) {
+  min-height: var(--expense-editor-control-height);
+  height: var(--expense-editor-control-height);
  color: #334155;
+  display: inline-flex;
+  align-items: center;
  font-size: 12px;
  font-weight: 800;
 }

-.editor-input:focus,
-.editor-select:focus,
-.editor-textarea:focus {
-  border-color: var(--theme-primary);
-  box-shadow: 0 0 0 3px var(--theme-focus-ring);
-  outline: none;
+.editor-amount-input :deep(.el-input__prefix-inner) {
+  display: inline-flex;
+  align-items: center;
+  height: var(--expense-editor-control-line-height);
+  line-height: var(--expense-editor-control-line-height);
 }

-.cell-editor span {
+.editor-amount-input.editor-control {
+  display: flex;
+  align-items: center;
+}
+
+.risk-note-editor-input.editor-control {
+  min-height: var(--expense-editor-control-height);
+  height: var(--expense-editor-control-height);
+}
+
+.risk-note-editor-input.el-textarea {
+  min-height: var(--expense-editor-control-height);
+  height: var(--expense-editor-control-height);
+}
+
+.risk-note-editor-input :deep(.el-textarea__inner) {
+  display: block !important;
+  box-sizing: border-box !important;
+  min-height: var(--expense-editor-control-height) !important;
+  height: var(--expense-editor-control-height);
+  line-height: var(--expense-editor-control-line-height) !important;
+  max-height: calc(var(--expense-editor-control-height) + var(--expense-editor-control-line-height) * 2) !important;
+  padding: var(--expense-editor-control-padding-y) 10px !important;
+  border-radius: 4px !important;
+  color: #0f172a !important;
+  font-size: 12px !important;
+  resize: none !important;
+  overflow-y: hidden !important;
+  box-shadow: 0 0 0 1px #d7e0ea inset !important;
+  vertical-align: middle !important;
+  margin: 0 !important;
+}
+
+.risk-note-editor-input :deep(.el-textarea__inner:focus) {
+  box-shadow: 0 0 0 1px var(--theme-primary) inset, 0 0 0 3px var(--theme-focus-ring);
+}
+
+/* 隐藏金额输入框的原生微调箭头 */
+.editor-amount-input :deep(input::-webkit-outer-spin-button),
+.editor-amount-input :deep(input::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.editor-amount-input :deep(input[type=number]) {
+  -moz-appearance: textfield;
+}
+
+.cell-editor > span {
+  display: block;
+  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
@@ -1432,6 +1536,16 @@
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
+  align-items: center;
+}
+
+.detail-expense-table .row-action-group .inline-action {
+  min-height: var(--expense-editor-control-height);
+  height: var(--expense-editor-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 }

 .risk-inline-tag {