feat: 新增员工行为画像算法与费用风险标签体系
后端新增员工行为画像算法模块，支持标签规则引擎和评分计算， 完善员工模型、银行信息、序列化和导入逻辑，优化报销审批流 和工作流常量，增强 Hermes 同步和知识同步能力，前端新增费 用画像详情弹窗、雷达图和风险卡片组件，完善登录页和工作台 样式，优化文档中心和归档中心交互，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -166,7 +166,8 @@
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.workarea.workbench-workarea {
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
.workarea.settings-workarea {
|
||||
@@ -191,18 +192,63 @@
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
width: var(--sidebar-collapsed-width);
|
||||
flex: 0 0 var(--sidebar-collapsed-width);
|
||||
transition: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: min(320px, 80vw);
|
||||
max-width: none;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.app.mobile-sidebar-open .app-sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app > .main {
|
||||
flex: 1 1 auto;
|
||||
width: calc(100vw - var(--sidebar-collapsed-width));
|
||||
flex: 1 1 100%;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.workarea { padding: 18px 16px 28px; }
|
||||
.workarea.workbench-workarea { overflow: auto; padding: 14px; }
|
||||
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.app.mobile-sidebar-open .mobile-overlay {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mobile-hamburger-btn {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
z-index: 90;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-primary);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
padding: 10px 12px;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.side-panel .section-head {
|
||||
@@ -29,17 +29,24 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-height: 26px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--workbench-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease),
|
||||
color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.detail-action:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
background: var(--workbench-primary-soft);
|
||||
color: var(--workbench-primary-active);
|
||||
}
|
||||
|
||||
@@ -58,6 +65,7 @@
|
||||
.insight-profile-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -69,13 +77,20 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
padding: 6px 0;
|
||||
border-top: 1px solid var(--workbench-line-soft);
|
||||
padding: 7px 9px;
|
||||
border: 1px solid var(--workbench-line-soft);
|
||||
border-left: 2px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.insight-metric-row:first-child,
|
||||
.insight-profile-card:first-child {
|
||||
border-top: 0;
|
||||
.insight-metric-row:hover,
|
||||
.insight-profile-card:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.insight-metric-label,
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
/* 1080p / 小高度屏：进一步压缩 AI 助手卡片高度 */
|
||||
@media (max-height: 980px) {
|
||||
/* 1080p / 小高度屏：进一步压缩 AI 助手卡片高度 (排除手机端) */
|
||||
@media (max-height: 980px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 20px;
|
||||
--hero-padding-bottom: 12px;
|
||||
--hero-title-size: 28px;
|
||||
--hero-copy-gap: 5px;
|
||||
--hero-title-bottom-gap: 14px;
|
||||
--composer-min-height: 108px;
|
||||
--composer-textarea-height: 48px;
|
||||
--composer-padding-block: 10px;
|
||||
@@ -71,6 +72,14 @@
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
padding: 17px 12px 17px 22px;
|
||||
}
|
||||
@@ -95,6 +104,13 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-art-width: min(540px, 50vw);
|
||||
--assistant-art-x: 36px;
|
||||
@@ -108,10 +124,14 @@
|
||||
width: min(820px, 92%);
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.workbench-content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -169,6 +189,8 @@
|
||||
}
|
||||
|
||||
.capability-grid,
|
||||
.capability-grid--privileged,
|
||||
.capability-grid--standard,
|
||||
.side-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -196,3 +218,225 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 针对低高度视口（如低于 840px，包含大部分笔记本 768px 高度），解除 height: 100% 限制，让内容流式高度，防止纵向元素被过度压扁 (排除手机端) */
|
||||
@media (max-height: 840px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto var(--capability-row-height) auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (560px 以下) */
|
||||
@media (max-width: 560px) {
|
||||
/* 常用提问横向滑动展示，避免折行过多撑爆高度 */
|
||||
.quick-prompts {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.quick-prompts span {
|
||||
display: none; /* 隐藏“常用提问：”前缀，以最大化利用横向空间 */
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
min-height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 隐藏常用提问横滑条的原生滚动条，保持精致视觉 */
|
||||
.quick-prompts::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-art-width: min(280px, 70vw);
|
||||
padding: 20px 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (480px 以下) */
|
||||
@media (max-width: 480px) {
|
||||
/* 输入框更小巧 */
|
||||
.assistant-composer {
|
||||
padding: 10px 12px;
|
||||
min-height: 94px;
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
font-size: 14px;
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-related-button,
|
||||
.composer-send-button {
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.composer-related-button {
|
||||
padding: 0 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
/* 限制上传的附件文件芯片的最大宽度，防止溢出 */
|
||||
.assistant-file-chip {
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
/* AI 财务助手卡片尺寸更精致 */
|
||||
.capability-card {
|
||||
padding: 12px 10px 12px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
padding-left: 6px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.capability-copy strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.capability-copy small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 我的待办列表项更精致 */
|
||||
.todo-row {
|
||||
padding: 5px 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.todo-copy strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.todo-copy small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.todo-status {
|
||||
font-size: 11px;
|
||||
min-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.todo-meta small {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
/* 重点优化：费用进度行的网格区域（Grid Area）双行重构 */
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"identity result"
|
||||
"steps steps";
|
||||
gap: 8px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-identity {
|
||||
grid-area: identity;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-identity strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.progress-identity small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.progress-result {
|
||||
grid-area: result;
|
||||
width: 100%;
|
||||
justify-items: end; /* 金额和状态右对齐 */
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.progress-result strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
font-size: 11px;
|
||||
min-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
grid-area: steps;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 缩小步骤图图标与连线 */
|
||||
.progress-step i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.progress-step small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.progress-step::before {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
/* 侧边分析栏优化 */
|
||||
.side-panel {
|
||||
padding: 8px 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.insight-metric-row,
|
||||
.insight-profile-card {
|
||||
padding: 6px 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.insight-metric-label,
|
||||
.insight-profile-label {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.insight-metric-value,
|
||||
.insight-profile-value {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
--hero-padding-bottom: 14px;
|
||||
--hero-title-size: 30px;
|
||||
--hero-copy-gap: 6px;
|
||||
--hero-title-bottom-gap: 18px;
|
||||
--composer-min-height: 122px;
|
||||
--composer-textarea-height: 54px;
|
||||
--composer-padding-block: 12px;
|
||||
@@ -61,11 +62,11 @@
|
||||
overflow: visible;
|
||||
padding: var(--hero-padding-top) 20px var(--hero-padding-bottom) 52px;
|
||||
border: 1px solid color-mix(in srgb, var(--workbench-primary) 14%, var(--workbench-line));
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 44%, rgba(255, 255, 255, 0.16) 66%, rgba(255, 255, 255, 0.02) 100%),
|
||||
linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--workbench-primary-soft) 56%, #ffffff) 62%, color-mix(in srgb, var(--workbench-secondary) 8%, #ffffff) 100%);
|
||||
box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@@ -87,8 +88,7 @@
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 58%),
|
||||
radial-gradient(circle at 84% 62%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 36%);
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 58%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
margin: 0;
|
||||
margin: 0 0 var(--hero-title-bottom-gap);
|
||||
color: var(--workbench-ink);
|
||||
font-size: var(--hero-title-size);
|
||||
line-height: 1.18;
|
||||
@@ -130,11 +130,9 @@
|
||||
min-height: var(--composer-min-height);
|
||||
padding: var(--composer-padding-block) 18px 10px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
|
||||
border-radius: 9px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow:
|
||||
0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@@ -173,7 +171,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
border-radius: 7px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -204,10 +202,10 @@
|
||||
|
||||
.composer-send-button {
|
||||
width: 56px;
|
||||
background: var(--theme-gradient-primary);
|
||||
background: var(--workbench-primary-active);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 10px 20px var(--theme-primary-shadow);
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
|
||||
}
|
||||
|
||||
.assistant-file-strip {
|
||||
@@ -224,7 +222,7 @@
|
||||
max-width: 220px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
@@ -265,7 +263,7 @@
|
||||
min-height: 28px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: var(--workbench-text);
|
||||
font-size: 13px;
|
||||
@@ -286,11 +284,18 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
@@ -302,12 +307,11 @@
|
||||
padding: 17px 12px 17px 26px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid color-mix(in srgb, var(--capability-color) 54%, var(--workbench-line));
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-surface);
|
||||
text-align: left;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.98) inset,
|
||||
0 6px 16px rgba(15, 23, 42, 0.035);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
|
||||
}
|
||||
|
||||
.capability-card::after {
|
||||
@@ -319,12 +323,12 @@
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--capability-color) 20%, #ffffff);
|
||||
background: var(--capability-soft);
|
||||
color: var(--capability-color);
|
||||
font-size: 24px;
|
||||
box-shadow: 0 6px 14px color-mix(in srgb, var(--capability-color) 10%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
@@ -364,23 +368,23 @@
|
||||
}
|
||||
|
||||
.capability-card--blue {
|
||||
--capability-color: var(--workbench-chart-blue);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-chart-blue) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--emerald {
|
||||
--capability-color: var(--success);
|
||||
--capability-soft: var(--success-soft);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--violet {
|
||||
--capability-color: var(--workbench-chart-purple);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-chart-purple) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--cyan {
|
||||
--capability-color: var(--workbench-secondary);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-secondary) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--amber {
|
||||
@@ -403,9 +407,9 @@
|
||||
overflow: hidden;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-surface);
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
|
||||
}
|
||||
|
||||
.todo-panel,
|
||||
@@ -446,7 +450,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-primary-soft);
|
||||
color: var(--workbench-primary-active);
|
||||
font-size: 13px;
|
||||
@@ -498,7 +502,7 @@
|
||||
}
|
||||
|
||||
.todo-row :deep(.workbench-list-icon__panel) {
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.todo-row :deep(.workbench-list-icon__art),
|
||||
|
||||
@@ -555,13 +555,41 @@
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@media (max-width: 980px) and (min-width: 761px) {
|
||||
.rail {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.rail {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.rail-collapse-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rail *,
|
||||
.rail *::before,
|
||||
|
||||
@@ -288,6 +288,98 @@
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
font-size: 23px;
|
||||
line-height: 1;
|
||||
transition:
|
||||
color 160ms var(--ease),
|
||||
background 160ms var(--ease);
|
||||
}
|
||||
|
||||
.topbar-icon-btn:hover {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 1px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 8px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
box-shadow: 0 5px 10px rgba(239, 68, 68, .22);
|
||||
}
|
||||
|
||||
.company-switcher {
|
||||
max-width: min(220px, 28vw);
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 14px 0 16px;
|
||||
border: 1px solid #edf1f5;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #111827;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(15, 23, 42, .04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, .92);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
border-color 160ms var(--ease),
|
||||
box-shadow 160ms var(--ease),
|
||||
color 160ms var(--ease);
|
||||
}
|
||||
|
||||
.company-switcher:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), .26);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
|
||||
}
|
||||
|
||||
.company-switcher span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.company-switcher .mdi {
|
||||
flex: 0 0 auto;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
@@ -370,6 +462,7 @@
|
||||
.top-actions,
|
||||
.search-wrap,
|
||||
.search-wrap.wide,
|
||||
.topbar-toolset,
|
||||
.detail-alert-strip,
|
||||
.month-chip,
|
||||
.qa-filter,
|
||||
@@ -381,6 +474,10 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -400,6 +497,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.title-group {
|
||||
padding-right: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar {
|
||||
gap: 14px;
|
||||
@@ -427,6 +530,16 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.company-switcher {
|
||||
flex: 1 1 auto;
|
||||
max-width: none;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
||||
@@ -433,7 +433,8 @@
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.field input {
|
||||
.field input,
|
||||
.field select {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 50px 0 48px;
|
||||
@@ -445,17 +446,35 @@
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.field select {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.field input:focus {
|
||||
.field input:focus,
|
||||
.field select:focus {
|
||||
border-color: var(--theme-primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(58, 124, 165, .14));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-select-chevron {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
color: #64748b;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.field-icon-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
|
||||
Reference in New Issue
Block a user