From f9f91380ada0776c832bd2e3a63807080c48296b Mon Sep 17 00:00:00 2001 From: caoxiaozhu Date: Thu, 14 May 2026 09:33:03 +0000 Subject: [PATCH] =?UTF-8?q?style(web):=20=E6=9B=B4=E6=96=B0=E5=AE=A1?= =?UTF-8?q?=E6=89=B9=E4=B8=AD=E5=BF=83=E3=80=81=E5=AE=A1=E8=AE=A1=E3=80=81?= =?UTF-8?q?=E5=91=98=E5=B7=A5=E7=AE=A1=E7=90=86=E3=80=81=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E3=80=81=E5=B7=AE=E6=97=85=E6=8A=A5=E9=94=80?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E3=80=81=E5=B7=AE=E6=97=85=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=AD=89=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/views/approval-center-view.css | 6 + web/src/assets/styles/views/audit-view.css | 8 + .../styles/views/employee-management-view.css | 8 + web/src/assets/styles/views/requests-view.css | 14 ++ .../travel-reimbursement-create-view.css | 181 +++++++++++------- .../views/travel-request-detail-view.css | 62 ++++++ 6 files changed, 208 insertions(+), 71 deletions(-) diff --git a/web/src/assets/styles/views/approval-center-view.css b/web/src/assets/styles/views/approval-center-view.css index b9adb7f..f4dd5a2 100644 --- a/web/src/assets/styles/views/approval-center-view.css +++ b/web/src/assets/styles/views/approval-center-view.css @@ -85,10 +85,16 @@ border-radius: 10px; background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%); display: flex; + flex-direction: column; align-items: center; justify-content: center; } +.table-wrap table { + width: 100%; + align-self: flex-start; +} + table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; } th, td { diff --git a/web/src/assets/styles/views/audit-view.css b/web/src/assets/styles/views/audit-view.css index 3dc1ccd..8ec34a8 100644 --- a/web/src/assets/styles/views/audit-view.css +++ b/web/src/assets/styles/views/audit-view.css @@ -318,12 +318,19 @@ border-radius: 12px; background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%); display: flex; + flex-direction: column; align-items: center; justify-content: center; } +.table-wrap table { + width: 100%; + align-self: flex-start; +} + .table-state, .detail-inline-state { + width: 100%; min-height: 220px; display: grid; place-items: center; @@ -331,6 +338,7 @@ padding: 28px 24px; text-align: center; color: #64748b; + align-self: center; } .detail-inline-state { diff --git a/web/src/assets/styles/views/employee-management-view.css b/web/src/assets/styles/views/employee-management-view.css index ab35c63..8c4be1a 100644 --- a/web/src/assets/styles/views/employee-management-view.css +++ b/web/src/assets/styles/views/employee-management-view.css @@ -332,10 +332,16 @@ border-radius: 12px; background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%); display: flex; + flex-direction: column; align-items: center; justify-content: center; } +.table-wrap table { + width: 100%; + align-self: flex-start; +} + .list-foot { display: grid; grid-template-columns: 1fr auto 1fr; @@ -455,6 +461,7 @@ } .table-state { + width: 100%; min-height: 220px; display: grid; place-items: center; @@ -462,6 +469,7 @@ padding: 28px 20px; color: #64748b; text-align: center; + align-self: center; } .table-state i { diff --git a/web/src/assets/styles/views/requests-view.css b/web/src/assets/styles/views/requests-view.css index 834f0f6..fbfb3e7 100644 --- a/web/src/assets/styles/views/requests-view.css +++ b/web/src/assets/styles/views/requests-view.css @@ -291,11 +291,24 @@ border-radius: 10px; background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%); display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; +} + +.table-wrap.is-empty { align-items: center; justify-content: center; } +/* 让表格在flex容器中正常显示 */ +.table-wrap table { + width: 100%; + align-self: flex-start; +} + .table-state { + width: 100%; min-height: 260px; display: grid; place-items: center; @@ -304,6 +317,7 @@ text-align: center; color: #64748b; background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%); + align-self: center; } .table-state .mdi { 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 134f655..ff558bf 100644 --- a/web/src/assets/styles/views/travel-reimbursement-create-view.css +++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css @@ -1062,7 +1062,7 @@ } .insight-head.review-mode { - justify-content: flex-start; + justify-content: space-between; } .insight-head-eyebrow { @@ -1092,6 +1092,74 @@ flex-wrap: wrap; } +.review-insight-title-copy { + min-width: 0; +} + +.review-insight-title-copy h3 { + margin: 0; +} + +.review-insight-tools { + display: inline-flex; + align-items: center; + gap: 8px; + flex: 0 0 auto; + align-self: center; +} + +.review-insight-switch-icon-btn { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + border: 1px solid rgba(203, 213, 225, 0.92); + background: rgba(248, 250, 252, 0.96); + color: #94a3b8; + font-size: 14px; + flex: 0 0 auto; + transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease; +} + +.review-insight-switch-icon-btn.available { + border-color: rgba(245, 158, 11, 0.28); + background: rgba(255, 247, 237, 0.94); + color: #d97706; +} + +.review-insight-switch-icon-btn.active { + border-color: rgba(217, 119, 6, 0.42); + background: rgba(254, 243, 199, 0.98); + color: #b45309; + box-shadow: 0 6px 14px rgba(245, 158, 11, 0.16); +} + +.review-insight-switch-icon-btn.risk.available { + border-color: rgba(239, 68, 68, 0.28); + background: rgba(254, 242, 242, 0.96); + color: #dc2626; +} + +.review-insight-switch-icon-btn.risk.active { + border-color: rgba(220, 38, 38, 0.42); + background: rgba(254, 226, 226, 0.98); + color: #b91c1c; + box-shadow: 0 6px 14px rgba(239, 68, 68, 0.16); +} + +.review-insight-switch-icon-btn:hover:not(:disabled) { + transform: translateY(-1px); +} + +.review-insight-switch-icon-btn:disabled { + cursor: not-allowed; + opacity: 1; + color: #cbd5e1; + background: rgba(248, 250, 252, 0.9); +} + .intent-pill { min-height: 30px; display: inline-flex; @@ -1583,6 +1651,10 @@ gap: 14px; } +.review-ticket-drawer { + min-height: 0; +} + .review-document-switch-head { align-items: flex-start; } @@ -1700,6 +1772,18 @@ background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); } +.review-document-preview-card.clickable { + cursor: zoom-in; +} + +.review-document-preview-card.clickable img { + transition: transform 0.18s ease; +} + +.review-document-preview-card.clickable:hover img { + transform: scale(1.02); +} + .review-document-preview-card.image img { display: block; width: 100%; @@ -2261,81 +2345,16 @@ background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(251, 248, 243, 0.82) 100%); } -.review-alert-chip-row { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.review-alert-chip-row.subtle { - gap: 6px; -} - -.review-alert-chip { - min-height: 28px; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 0 10px; - border-radius: 10px; - font-size: 11px; - font-weight: 800; - border: 1px solid transparent; -} - -.review-alert-chip.warning { - background: rgba(255, 247, 237, 0.94); - border-color: #fdba74; - color: #c2410c; -} - -.review-alert-chip.danger { - background: rgba(255, 241, 242, 0.96); - border-color: #fda4af; - color: #e11d48; -} - -.review-alert-chip.success { - background: rgba(240, 253, 244, 0.96); - border-color: #86efac; - color: #047857; -} +/* 已删除：review-alert-chip-row 相关样式（冗余气泡） */ +/* 已删除：主对话框中的风险提示（与右侧边栏重复，已移除） */ +/* 风险提示样式已统一到 review-pending-item */ .review-risk-brief-list { - display: grid; - gap: 8px; + display: none; /* 隐藏原有的独立风险提示列表 */ } .review-risk-brief { - display: grid; - gap: 4px; - padding: 10px 12px; - border-radius: 14px; - border: 1px solid rgba(226, 232, 240, 0.9); - background: rgba(255, 255, 255, 0.84); -} - -.review-risk-brief strong { - color: #0f172a; - font-size: 12px; - font-weight: 850; -} - -.review-risk-brief p { - margin: 0; - color: #475569; - font-size: 11px; - line-height: 1.6; -} - -.review-risk-brief.warning { - border-color: rgba(251, 146, 60, 0.22); - background: rgba(255, 247, 237, 0.88); -} - -.review-risk-brief.high { - border-color: rgba(248, 113, 113, 0.26); - background: rgba(254, 242, 242, 0.92); + display: none; /* 隐藏原有的独立风险提示项 */ } .review-pending-list { @@ -2386,10 +2405,29 @@ font-size: 16px; } +/* 风险级别的图标样式（已删除主对话框中的风险提示，保留样式备用） */ +.review-pending-icon.high { + background: rgba(254, 226, 226, 0.95); + color: #dc2626; +} + +.review-pending-icon.warning { + background: rgba(255, 237, 213, 0.95); + color: #ea580c; +} + .review-pending-list.plain .review-pending-icon { background: rgba(236, 253, 245, 0.62); } +.review-pending-list.plain .review-pending-icon.high { + background: rgba(254, 226, 226, 0.62); +} + +.review-pending-list.plain .review-pending-icon.warning { + background: rgba(255, 237, 213, 0.62); +} + .review-pending-copy { display: grid; gap: 4px; @@ -3385,6 +3423,7 @@ } .composer-files-head, + .review-insight-title-row, .review-document-stage-head, .review-document-switch-head { align-items: flex-start; 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 3a5fff1..17fa001 100644 --- a/web/src/assets/styles/views/travel-request-detail-view.css +++ b/web/src/assets/styles/views/travel-request-detail-view.css @@ -650,6 +650,68 @@ white-space: nowrap; } +.attachment-recognition { + margin-top: 8px; + text-align: left; +} + +.attachment-recognition-pills { + display: flex; + flex-wrap: wrap; + gap: 6px; + justify-content: center; +} + +.attachment-recognition-pill { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 4px 10px; + border-radius: 999px; + font-size: 11px; + font-weight: 700; + line-height: 1.2; + background: #eff6ff; + color: #1d4ed8; +} + +.attachment-recognition-pill.type { + background: #f8fafc; + color: #334155; +} + +.attachment-recognition-pill.pass { + background: #ecfdf5; + color: #047857; +} + +.attachment-recognition-pill.medium { + background: #fff7ed; + color: #c2410c; +} + +.attachment-recognition-pill.high { + background: #fef2f2; + color: #b91c1c; +} + +.attachment-recognition-message { + margin: 8px 0 0; + color: #475569; + font-size: 11px; + line-height: 1.5; + text-align: left; +} + +.attachment-recognition-fields { + margin: 8px 0 0; + padding-left: 16px; + color: #475569; + font-size: 11px; + line-height: 1.5; + text-align: left; +} + .icon-action, .risk-inline-tag { display: inline-flex;