YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局 UI 主题皮肤重构与样式模块化

Browse Source 
引入 Element Plus 主题定制和主题皮肤 composable，将全局
样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等），
统一色彩变量和间距规范，重构所有视图和组件样式以适配新
主题系统，优化图表和知识图谱组件视觉表现，提取审计和差
旅报销相关子组件。
This commit is contained in:
caoxiaozhu
2026-05-27 09:17:57 +08:00
parent df49103f23
commit 2dcc72102d
112 changed files with 10983 additions and 8996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
web/src/assets/styles/views/requests-view.css
View File

@@ -47,8 +47,8 @@
}
.list-search input:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -70,7 +70,7 @@
}
.status-tabs button.active {
color: #059669;
color: var(--theme-primary-active);
}
.status-tabs button.active::after {
@@ -81,7 +81,7 @@
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: #10b981;
background: var(--theme-primary);
}
.list-toolbar {
@@ -108,23 +108,22 @@
padding: 0 18px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #10b981, #059669);
background: var(--theme-gradient-primary);
color: #fff;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(5, 150, 105, 0.2);
box-shadow: 0 10px 24px var(--theme-primary-shadow);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.create-request-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(5, 150, 105, 0.24);
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), 0.24);
filter: saturate(1.02);
}
.filter-btn,
.page-size {
.filter-btn {
min-height: 38px;
display: inline-flex;
align-items: center;
@@ -232,8 +231,8 @@
}
.date-range-fields input:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -254,7 +253,7 @@
.apply-btn {
border: 0;
background: #10b981;
background: var(--theme-primary);
color: #fff;
}
@@ -263,10 +262,9 @@
background: #cbd5e1;
}
.filter-btn:hover,
.page-size:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
.filter-btn:hover {
border-color: rgba(var(--theme-primary-rgb), .32);
color: var(--theme-primary-active);
}
.hint {
@@ -289,7 +287,7 @@
overflow-y: auto;
border: 1px solid #edf2f7;
border-radius: 10px;
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
background: linear-gradient(180deg, #fcfefd 0%, var(--theme-primary-light-9) 100%);
display: flex;
flex-direction: column;
align-items: stretch;
@@ -316,13 +314,13 @@
padding: 28px 20px;
text-align: center;
color: #64748b;
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
background: linear-gradient(180deg, #fcfffd 0%, var(--theme-primary-light-9) 100%);
align-self: center;
}
.table-state .mdi {
font-size: 28px;
color: #10b981;
color: var(--theme-primary);
}
.table-state strong {
@@ -399,7 +397,7 @@ tbody tr {
}
tbody tr:hover {
background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), .08), rgba(var(--theme-primary-rgb), .03));
}
tbody tr:last-child td {
@@ -407,7 +405,7 @@ tbody tr:last-child td {
}
.doc-id {
color: #059669;
color: var(--theme-primary-active);
font-weight: 800;
}
@@ -424,8 +422,8 @@ tbody tr:last-child td {
}
.type-tag.travel {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.type-tag.entertainment {
@@ -435,8 +433,8 @@ tbody tr:last-child td {
.type-tag.hotel,
.type-tag.transport {
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.type-tag.meal {
@@ -479,9 +477,9 @@ tbody tr:last-child td {
}
.status-tag.success {
border-color: #bbf7d0;
background: #ecfdf5;
color: #059669;
border-color: var(--success-line);
background: var(--success-soft);
color: var(--success-hover);
}
.status-tag.warning {
@@ -546,69 +544,23 @@ tbody tr:last-child td {
.pager button:hover:not(.active) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.pager button.active {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.page-nav {
color: #64748b;
}
.page-size {
.page-size-select {
width: 112px;
justify-self: end;
min-width: 112px;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.page-size-wrap {
position: relative;
justify-self: end;
}
.page-size-dropdown {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 40;
display: grid;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
overflow: hidden;
}
.page-size-dropdown button {
height: 36px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
padding: 0 20px;
transition: background 120ms ease, color 120ms ease;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
@media (max-width: 1200px) {
@@ -629,7 +581,7 @@ tbody tr:last-child td {
}
.filter-btn,
.page-size {
.page-size-select {
width: 100%;
}
@@ -643,7 +595,7 @@ tbody tr:last-child td {
}
.pager,
.page-size {
.page-size-select {
justify-self: stretch;
}
}