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

45
web/src/assets/styles/app.css
View File

@@ -15,9 +15,9 @@
}
.app {
--sidebar-expanded-width: 220px;
--sidebar-expanded-width: 184px;
--sidebar-collapsed-width: 64px;
--sidebar-motion: 320ms cubic-bezier(0.22, 1, 0.36, 1);
--sidebar-motion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
height: var(--desktop-stage-height, 100dvh);
min-height: var(--desktop-stage-height, 100dvh);
@@ -27,18 +27,23 @@
}
.app-sidebar {
flex: 0 0 auto;
flex: 0 0 var(--sidebar-expanded-width);
width: var(--sidebar-expanded-width);
min-width: 0;
overflow: hidden;
will-change: width;
transition: width var(--sidebar-motion);
position: relative;
overflow: visible;
z-index: 200;
will-change: width, flex-basis;
transition:
width var(--sidebar-motion),
flex-basis var(--sidebar-motion),
box-shadow 160ms var(--ease);
}
.app.sidebar-collapsed .app-sidebar {
flex-basis: var(--sidebar-collapsed-width);
width: var(--sidebar-collapsed-width);
overflow: visible;
position: relative;
z-index: 200;
}
@@ -58,7 +63,7 @@
place-items: center;
padding: 24px;
background:
radial-gradient(circle at top left, rgba(16, 185, 129, 0.16), transparent 24rem),
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), transparent 24rem),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.14), transparent 28rem),
#f8fafc;
}
@@ -89,9 +94,9 @@
min-height: 28px;
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.12);
color: #059669;
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
@@ -173,18 +178,30 @@
}
@media (max-width: 760px) {
.app {
display: block;
display: flex;
width: 100vw;
overflow: hidden;
}
.app-sidebar {
width: 100%;
width: var(--sidebar-collapsed-width);
flex: 0 0 var(--sidebar-collapsed-width);
transition: none;
}
.app > .main {
flex: 1 1 auto;
width: calc(100vw - var(--sidebar-collapsed-width));
}
.workarea { padding: 18px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) {
.app-sidebar {
transition: none;
transition:
width 120ms ease-out !important,
flex-basis 120ms ease-out !important;
transition-duration: 120ms, 120ms !important;
}
}