feat: 新增预算中心本体与风险规则评分回填
后端新增预算本体解析模块和风险规则评分回填服务，优化规则 生成本体对齐和提示词构建，增强费用类型关键词和本体验证， 完善报销查询和审计接口，前端预算中心页面增加对话框和本 体工具函数，重构审计页面元数据和视图模型，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -5,138 +5,245 @@
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.budget-local-head {
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.budget-local-head h2 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.budget-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
border: 1px solid #e5eaf1;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.budget-summary-card {
|
||||
min-height: 118px;
|
||||
padding: 22px 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
border-right: 1px solid #edf1f6;
|
||||
--accent: #10b981;
|
||||
position: relative;
|
||||
min-height: 112px;
|
||||
padding: 12px 14px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
animation: dashboardItemIn 520ms var(--ease) both;
|
||||
animation-delay: var(--delay, 0ms);
|
||||
transition: box-shadow 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
.budget-summary-card:last-child {
|
||||
border-right: 0;
|
||||
.budget-summary-card:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.budget-summary-card.green {
|
||||
--accent: #10b981;
|
||||
}
|
||||
|
||||
.budget-summary-card.blue {
|
||||
--accent: #3b82f6;
|
||||
}
|
||||
|
||||
.budget-summary-card.orange {
|
||||
--accent: #f59e0b;
|
||||
}
|
||||
|
||||
.budget-summary-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.summary-icon.green {
|
||||
background: #e8f7ef;
|
||||
color: #07965f;
|
||||
}
|
||||
|
||||
.summary-icon.blue {
|
||||
background: #edf4ff;
|
||||
color: #2f7fd7;
|
||||
}
|
||||
|
||||
.summary-icon.orange {
|
||||
background: #fff4e5;
|
||||
color: #df9300;
|
||||
}
|
||||
|
||||
.budget-summary-card span:not(.summary-icon) {
|
||||
display: block;
|
||||
color: #1f2937;
|
||||
background: color-mix(in srgb, var(--accent) 10%, white);
|
||||
color: var(--accent);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex: 0 0 auto;
|
||||
animation: iconPop 560ms var(--ease) both;
|
||||
animation-delay: calc(var(--delay, 0ms) + 100ms);
|
||||
}
|
||||
|
||||
.budget-summary-card strong {
|
||||
.budget-summary-card .summary-label {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #111827;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
min-width: 0;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
display: block;
|
||||
min-height: 22px;
|
||||
margin-bottom: 6px;
|
||||
color: #0f172a;
|
||||
font-size: clamp(16px, 1.2vw, 20px);
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.summary-comparison-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comparison-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.budget-summary-card em {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
.comparison-pill b {
|
||||
color: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comparison-pill em {
|
||||
font-style: normal;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.comparison-pill i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.comparison-pill.up {
|
||||
background: rgba(22, 163, 74, .08);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.comparison-pill.down {
|
||||
background: rgba(239, 68, 68, .08);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.budget-filter-bar {
|
||||
min-height: 62px;
|
||||
border: 1px solid #e5eaf1;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px 18px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.budget-filter-set,
|
||||
.budget-action-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.budget-filter-bar label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
gap: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.budget-filter-bar select,
|
||||
.budget-table-foot select {
|
||||
height: 34px;
|
||||
min-width: 150px;
|
||||
border: 1px solid #dbe2ec;
|
||||
border-radius: 5px;
|
||||
.budget-filter-bar select {
|
||||
min-height: 38px;
|
||||
min-width: 128px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #1f2937;
|
||||
padding: 0 34px 0 12px;
|
||||
color: #334155;
|
||||
padding: 0 34px 0 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.budget-filter-bar select:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.budget-filter-bar select:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.budget-primary-btn {
|
||||
margin-left: auto;
|
||||
height: 36px;
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background: #0aa66f;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
padding: 0 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 24px rgba(5, 150, 105, .2);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.budget-primary-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 28px rgba(5, 150, 105, .24);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
.budget-ghost-btn {
|
||||
min-height: 38px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
padding: 0 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.budget-ghost-btn:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.budget-work-grid {
|
||||
@@ -240,7 +347,7 @@
|
||||
border-right: 1px solid #edf1f6;
|
||||
color: #273142;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -259,6 +366,7 @@
|
||||
width: 96px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.budget-rate span {
|
||||
@@ -304,6 +412,7 @@
|
||||
.budget-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@@ -324,24 +433,84 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.budget-table-foot button {
|
||||
.budget-page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.budget-pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.budget-pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dbe2ec;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.budget-table-foot button.active {
|
||||
border-color: #10a873;
|
||||
color: #10a873;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.budget-table-foot span {
|
||||
color: #4b5563;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.budget-pager button:hover:not(.active):not(:disabled) {
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.budget-pager button.active {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
|
||||
}
|
||||
|
||||
.budget-pager button:disabled {
|
||||
color: #94a3b8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.budget-page-size {
|
||||
min-height: 38px;
|
||||
min-width: 112px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.budget-page-size:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.budget-page-size select {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.budget-bottom-grid {
|
||||
@@ -448,6 +617,32 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes dashboardItemIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.82);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.budget-summary-grid,
|
||||
.budget-bottom-grid {
|
||||
@@ -480,7 +675,24 @@
|
||||
|
||||
.budget-filter-bar label,
|
||||
.budget-filter-bar select,
|
||||
.budget-primary-btn {
|
||||
.budget-filter-set,
|
||||
.budget-action-set,
|
||||
.budget-primary-btn,
|
||||
.budget-ghost-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.budget-filter-bar label {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.budget-table-foot {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.budget-pager,
|
||||
.budget-page-size {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user