feat: 新增预算助手报告组件并优化报销交互细节
新增预算助手报告视图模型和组件，优化报销洞察面板和消息项 样式细节，完善预算中心页面布局和文档中心视图，增强报销创 建会话管理和提交编排器，调整 Vite 构建配置，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -43,6 +43,21 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.el-fade-in-linear-enter-active,
|
||||
.el-fade-in-linear-leave-active {
|
||||
transition: opacity 200ms linear;
|
||||
}
|
||||
|
||||
.el-fade-in-linear-enter-from,
|
||||
.el-fade-in-linear-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-fade-in-linear-enter-to,
|
||||
.el-fade-in-linear-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.insight-head {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -401,11 +416,6 @@
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.flow-step-item.completed .flow-step-status.completed {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.flow-step-item.running .flow-step-rail span {
|
||||
border-color: #2563eb;
|
||||
background: #2563eb;
|
||||
@@ -429,32 +439,6 @@
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.flow-step-reveal-enter-active,
|
||||
.flow-step-reveal-leave-active {
|
||||
transition:
|
||||
opacity 0.24s ease,
|
||||
transform 0.28s ease,
|
||||
filter 0.28s ease;
|
||||
}
|
||||
|
||||
.flow-step-reveal-enter-from,
|
||||
.flow-step-reveal-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(2px);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.flow-step-reveal-enter-to,
|
||||
.flow-step-reveal-leave-from {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.flow-step-reveal-move {
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
|
||||
.flow-empty-state,
|
||||
.review-side-empty,
|
||||
.review-document-preview-placeholder {
|
||||
|
||||
@@ -54,6 +54,10 @@
|
||||
max-width: min(100%, 980px);
|
||||
}
|
||||
|
||||
.message-bubble-budget-report {
|
||||
max-width: min(100%, 1080px);
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-low,
|
||||
.message-bubble-review-risk-medium,
|
||||
.message-bubble-review-risk-high {
|
||||
@@ -487,6 +491,38 @@
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.application-preview-footer {
|
||||
margin-top: 48px;
|
||||
color: #334155;
|
||||
font-size: var(--wb-fs-bubble, 13px);
|
||||
font-weight: 760;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.application-preview-footer.message-answer-markdown :deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(a) {
|
||||
color: var(--theme-primary-active, #255b7d);
|
||||
font-weight: 850;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1.5px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(a:hover) {
|
||||
color: var(--theme-primary, #3a7ca5);
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(.markdown-action-link) {
|
||||
color: var(--theme-primary-active, #255b7d);
|
||||
font-weight: 880;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1.6px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.application-preview-footer-missing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -265,6 +265,46 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.budget-table-search {
|
||||
position: relative;
|
||||
width: min(260px, 42%);
|
||||
min-width: 190px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.budget-table-search i {
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
color: #94a3b8;
|
||||
font-size: 15px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.budget-table-search input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 6px;
|
||||
padding: 0 11px 0 32px;
|
||||
background: #fff;
|
||||
color: #1f2937;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.budget-table-search input::placeholder {
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.budget-table-search input:focus {
|
||||
border-color: rgba(var(--theme-primary-rgb), .48);
|
||||
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .1);
|
||||
}
|
||||
|
||||
.department-search {
|
||||
position: relative;
|
||||
margin: 12px 14px 8px;
|
||||
@@ -320,7 +360,7 @@
|
||||
|
||||
.budget-table-panel table {
|
||||
width: 100%;
|
||||
min-width: 1040px;
|
||||
min-width: 1460px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
@@ -383,29 +423,36 @@
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.budget-warning-red {
|
||||
color: var(--danger) !important;
|
||||
font-weight: 800;
|
||||
.budget-threshold-cell {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.budget-warning-yellow {
|
||||
color: var(--warning-active) !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.budget-row-actions {
|
||||
display: flex;
|
||||
.budget-threshold-badge {
|
||||
min-width: 58px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.budget-row-actions button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
.budget-threshold-badge.reminder {
|
||||
background: rgba(37, 99, 235, .1);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.budget-threshold-badge.alert {
|
||||
background: rgba(245, 158, 11, .14);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.budget-threshold-badge.risk {
|
||||
background: rgba(127, 29, 29, .1);
|
||||
color: #7f1d1d;
|
||||
}
|
||||
|
||||
.budget-table-foot {
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
}
|
||||
|
||||
.employee-detail {
|
||||
--employee-detail-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
@@ -699,6 +700,7 @@ tbody tr:last-child td {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 18px 20px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
}
|
||||
|
||||
.hero-profile {
|
||||
@@ -712,7 +714,7 @@ tbody tr:last-child td {
|
||||
height: 64px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: var(--theme-gradient-primary);
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
@@ -724,7 +726,7 @@ tbody tr:last-child td {
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
@@ -753,7 +755,7 @@ tbody tr:last-child td {
|
||||
|
||||
.hero-stat {
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
@@ -791,6 +793,7 @@ tbody tr:last-child td {
|
||||
.detail-card,
|
||||
.side-card {
|
||||
padding: 18px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
}
|
||||
|
||||
.card-head {
|
||||
@@ -819,7 +822,7 @@ tbody tr:last-child td {
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: #ecfeff;
|
||||
color: #0891b2;
|
||||
font-size: 12px;
|
||||
@@ -847,7 +850,7 @@ tbody tr:last-child td {
|
||||
.field input {
|
||||
width: 100%;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
@@ -985,7 +988,7 @@ tbody tr:last-child td {
|
||||
align-items: start;
|
||||
padding: 14px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 14px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
@@ -1018,6 +1021,19 @@ tbody tr:last-child td {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag-list span {
|
||||
display: inline-flex;
|
||||
min-height: 26px;
|
||||
align-items: center;
|
||||
padding: 0 9px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb), 0.18);
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.bullet-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
@@ -1108,7 +1124,7 @@ td.cell-updated {
|
||||
gap: 12px;
|
||||
min-height: 42px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
@@ -1142,7 +1158,7 @@ td.cell-updated {
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--employee-detail-radius);
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user