feat: 引入 ECharts 统一图表并完善员工画像标签分页
后端优化员工行为画像服务和辅助函数,完善系统设置模型和 配置持久化,前端引入 ECharts 替换所有图表组件实现统一 渲染,新增员工画像标签分页器和数字员工工作记录组件,优 化工作台响应式布局和登录页过渡动画,完善预算中心和数字 员工页面样式细节。
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user