feat: 引入 ECharts 统一图表并完善员工画像标签分页

后端优化员工行为画像服务和辅助函数,完善系统设置模型和
配置持久化,前端引入 ECharts 替换所有图表组件实现统一
渲染,新增员工画像标签分页器和数字员工工作记录组件,优
化工作台响应式布局和登录页过渡动画,完善预算中心和数字
员工页面样式细节。
This commit is contained in:
caoxiaozhu
2026-05-28 16:24:59 +08:00
parent 8a4a777be7
commit e384318046
53 changed files with 4698 additions and 2468 deletions

View File

@@ -24,6 +24,7 @@
display: flex;
align-items: stretch;
background: var(--bg);
position: relative;
}
.app-sidebar {
@@ -57,6 +58,100 @@
min-width: 0;
}
.login-entry-veil {
position: absolute;
inset: 0;
z-index: 380;
display: grid;
place-items: center;
background: rgba(248, 250, 252, 0.9);
backdrop-filter: blur(3px);
pointer-events: none;
}
.login-entry-card {
width: min(360px, calc(100% - 48px));
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px 14px;
align-items: center;
padding: 22px 24px 20px;
border: 1px solid rgba(148, 163, 184, 0.26);
border-radius: 4px;
background: #fff;
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
animation: loginEntryCardIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-entry-mark {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.2);
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 22px;
}
.login-entry-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.login-entry-copy strong {
color: var(--ink);
font-size: 16px;
line-height: 1.35;
font-weight: 750;
}
.login-entry-copy span {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.login-entry-progress {
grid-column: 1 / -1;
height: 3px;
overflow: hidden;
background: #edf2f7;
}
.login-entry-progress::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: var(--theme-primary);
transform-origin: left center;
animation: loginEntryProgress 840ms cubic-bezier(0.2, 0, 0, 1) both;
}
.login-entry-veil-enter-active {
transition: opacity 180ms var(--ease);
}
.login-entry-veil-leave-active {
transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.login-entry-veil-enter-from,
.login-entry-veil-leave-to {
opacity: 0;
}
.app.login-entry-active .app-sidebar {
animation: loginEntrySidebarIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.app.login-entry-active > .main {
animation: loginEntryMainIn 620ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.boot-state {
min-height: var(--desktop-stage-height, 100dvh);
display: grid;
@@ -168,13 +263,59 @@
.workarea.workbench-workarea {
overflow-x: hidden;
overflow-y: auto;
padding: 12px 14px 14px;
padding: 20px 24px;
}
.workarea.settings-workarea {
padding: 0;
background: #fff;
}
@keyframes loginEntryCardIn {
from {
opacity: 0;
transform: scale3d(0.92, 0.92, 1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes loginEntryProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes loginEntrySidebarIn {
from {
opacity: 0;
transform: translateX(-18px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes loginEntryMainIn {
from {
opacity: 0;
transform: scale3d(0.985, 0.985, 1) translateY(10px);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translateY(0);
}
}
@media (max-width: 1180px) {
.app-sidebar {
width: var(--sidebar-expanded-width);
@@ -207,13 +348,17 @@
transform: translateX(0);
}
.app.login-entry-active .app-sidebar {
animation: none;
}
.app > .main {
flex: 1 1 100%;
width: 100vw;
}
.workarea { padding: 18px 16px 28px; }
.workarea.workbench-workarea { overflow: auto; padding: 14px; }
.workarea { padding: 16px; }
.workarea.workbench-workarea { overflow: auto; padding: 16px; }
.mobile-overlay {
position: fixed;
@@ -258,4 +403,16 @@
flex-basis 120ms ease-out !important;
transition-duration: 120ms, 120ms !important;
}
.login-entry-card,
.login-entry-progress::after,
.app.login-entry-active .app-sidebar,
.app.login-entry-active > .main {
animation: none !important;
}
.login-entry-veil-enter-active,
.login-entry-veil-leave-active {
transition: opacity 120ms ease-out !important;
}
}