style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable，将全局 样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等）， 统一色彩变量和间距规范，重构所有视图和组件样式以适配新 主题系统，优化图表和知识图谱组件视觉表现，提取审计和差 旅报销相关子组件。
This commit is contained in:
caoxiaozhu
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.budget-summary-card {
|
||||
--accent: #10b981;
|
||||
--accent: var(--theme-primary);
|
||||
position: relative;
|
||||
min-height: 112px;
|
||||
padding: 12px 14px 10px;
|
||||
@@ -35,16 +35,16 @@
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.budget-summary-card.green {
|
||||
--accent: #10b981;
|
||||
.budget-summary-card.primary {
|
||||
--accent: var(--theme-primary);
|
||||
}
|
||||
|
||||
.budget-summary-card.blue {
|
||||
--accent: #3b82f6;
|
||||
.budget-summary-card.info {
|
||||
--accent: var(--theme-secondary);
|
||||
}
|
||||
|
||||
.budget-summary-card.orange {
|
||||
--accent: #f59e0b;
|
||||
.budget-summary-card.warning {
|
||||
--accent: var(--warning);
|
||||
}
|
||||
|
||||
.budget-summary-head {
|
||||
@@ -134,13 +134,13 @@
|
||||
}
|
||||
|
||||
.comparison-pill.up {
|
||||
background: rgba(22, 163, 74, .08);
|
||||
color: #16a34a;
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.comparison-pill.down {
|
||||
background: rgba(239, 68, 68, .08);
|
||||
color: #dc2626;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger-hover);
|
||||
}
|
||||
|
||||
.budget-filter-bar {
|
||||
@@ -173,35 +173,15 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.budget-filter-bar select {
|
||||
min-height: 38px;
|
||||
.budget-filter-bar .enterprise-select {
|
||||
min-width: 128px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
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 {
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
color: #fff;
|
||||
padding: 0 18px;
|
||||
display: inline-flex;
|
||||
@@ -212,13 +192,13 @@
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 24px rgba(5, 150, 105, .2);
|
||||
box-shadow: 0 10px 24px var(--theme-primary-shadow);
|
||||
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);
|
||||
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), .24);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
@@ -241,8 +221,8 @@
|
||||
}
|
||||
|
||||
.budget-ghost-btn:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
border-color: rgba(var(--theme-primary-rgb), .32);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
@@ -330,8 +310,8 @@
|
||||
}
|
||||
|
||||
.department-list button.active {
|
||||
background: #e9f7f1;
|
||||
color: #07965f;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.budget-table-wrap {
|
||||
@@ -392,24 +372,24 @@
|
||||
}
|
||||
|
||||
.budget-rate em.ok {
|
||||
background: #13a66b;
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.budget-rate em.warn {
|
||||
background: #f2a51a;
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.budget-rate em.danger {
|
||||
background: #ef4444;
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.budget-warning-red {
|
||||
color: #e24b4b !important;
|
||||
color: var(--danger) !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.budget-warning-yellow {
|
||||
color: #e3a008 !important;
|
||||
color: var(--warning-active) !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -423,7 +403,7 @@
|
||||
.budget-row-actions button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #1c7ed6;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -467,14 +447,14 @@
|
||||
|
||||
.budget-pager button:hover:not(.active):not(:disabled) {
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.budget-pager button.active {
|
||||
background: #059669;
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.budget-pager button:disabled {
|
||||
@@ -502,19 +482,8 @@
|
||||
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-page-size-select {
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.budget-bottom-grid {
|
||||
@@ -526,7 +495,7 @@
|
||||
.budget-card-head button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #1c7ed6;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -549,11 +518,11 @@
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
background: #13a66b;
|
||||
background: var(--theme-primary);
|
||||
}
|
||||
|
||||
.legend-line.occupied {
|
||||
background: #f59e0b;
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.legend-line.available {
|
||||
@@ -587,11 +556,11 @@
|
||||
.budget-alert-empty-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #e9f7f1;
|
||||
color: #059669;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -629,15 +598,15 @@
|
||||
}
|
||||
|
||||
.budget-alert-row i.danger {
|
||||
background: #ef4444;
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.budget-alert-row i.warn {
|
||||
background: #f59e0b;
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.budget-alert-row i.ok {
|
||||
background: #13a66b;
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.budget-alert-row strong {
|
||||
@@ -718,7 +687,7 @@
|
||||
}
|
||||
|
||||
.budget-filter-bar label,
|
||||
.budget-filter-bar select,
|
||||
.budget-filter-bar .enterprise-select,
|
||||
.budget-filter-set,
|
||||
.budget-action-set,
|
||||
.budget-primary-btn,
|
||||
|
||||
Reference in New Issue
Block a user