feat: 报销审批流重构与管家计划全链路贯通
- 重构报销状态注册表、审批流路由与平台风险标记 - 完善管家意图规划器与模型计划构建器全链路 - 新增 OCR Worker 脚本、数据库会话管理与通知状态 - 优化文档中心、日志视图、预算中心与员工管理交互 - 增强工作台摘要、图标资源与全局主题样式 - 补充审批路由、状态注册、OCR 服务与管家规划器测试覆盖
This commit is contained in:
caoxiaozhu
@@ -0,0 +1,271 @@
|
||||
/* Current DigitalEmployeeWorkRecords scoped styles. Kept last to override retired rules above. */
|
||||
.digital-work-records {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel,
|
||||
.digital-work-records-list-stage {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.digital-work-records-table {
|
||||
min-width: 1180px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.digital-work-records-table .col-time { width: 14%; }
|
||||
.digital-work-records-table .col-module { width: 13%; }
|
||||
.digital-work-records-table .col-source { width: 10%; }
|
||||
.digital-work-records-table .col-status { width: 16%; }
|
||||
.digital-work-records-table .col-summary { width: 31%; }
|
||||
.digital-work-records-table .col-trace { width: 16%; }
|
||||
|
||||
.work-record-row {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.work-record-row:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px rgba(58, 124, 165, 0.28);
|
||||
}
|
||||
|
||||
.work-record-summary-cell {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.work-record-summary-cell strong,
|
||||
.work-record-summary-cell span,
|
||||
.work-record-summary-cell em {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.work-record-summary-cell strong {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.work-record-summary-cell span {
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.work-record-summary-cell em {
|
||||
margin-top: 6px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.work-record-trace-cell {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page) {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
padding: 16px 18px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .detail-scroll) {
|
||||
min-height: 0;
|
||||
display: block;
|
||||
padding-right: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .detail-scroll) > * + * {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .detail-grid) {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
width: min(100%, 1160px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .detail-main),
|
||||
:deep(.work-record-detail-page .detail-side) {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .detail-actions) {
|
||||
margin-top: 10px;
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .enterprise-detail-card) {
|
||||
min-height: 0;
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .enterprise-detail-card .card-head) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .enterprise-detail-card .card-head h3) {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .enterprise-detail-card .card-head p) {
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .edit-badge) {
|
||||
min-height: 26px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
|
||||
border-radius: 4px;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
:deep(.work-record-summary-card .json-risk-meta-grid) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.work-record-detail-page .json-risk-meta-item),
|
||||
:deep(.work-record-detail-page .json-risk-description-text) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.work-record-summary-text {
|
||||
margin: 0;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.work-record-error-text {
|
||||
margin: 12px 0 0;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 4px;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.work-record-tool-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.work-record-tool-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
transition: border-color 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.work-record-tool-item:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.26);
|
||||
background: #f9fbff;
|
||||
}
|
||||
|
||||
.work-record-tool-item strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.work-record-tool-item span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.work-record-inline-empty {
|
||||
min-height: 92px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 14px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-record-code-block {
|
||||
max-height: 360px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 4px;
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.digital-work-records :deep(.toolbar-actions .picker-filter),
|
||||
.digital-work-records :deep(.toolbar-actions .picker-trigger) {
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
.digital-refresh-now {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.digital-refresh-now .mdi {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.work-record-tool-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -137,6 +137,171 @@
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.document-filter,
|
||||
.date-range-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.document-filter-menu,
|
||||
.date-range-popover {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document-filter-menu {
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
min-width: 150px;
|
||||
max-height: 280px;
|
||||
padding: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.document-filter-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.document-filter-menu button:hover,
|
||||
.document-filter-menu button.active {
|
||||
background: rgba(58, 124, 165, 0.1);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.date-range-trigger {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.date-range-label {
|
||||
max-width: 104px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-range-popover {
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 320px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.date-range-popover header,
|
||||
.date-range-popover footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-range-popover header strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-range-popover header button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.date-range-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-range-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-range-fields span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-range-fields input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.apply-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
border: 0;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.document-status-filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.status-dropdown-filter,
|
||||
.status-filter-trigger,
|
||||
.status-filter-menu {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.status-filter-trigger > .mdi:first-child {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.clear-filter-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.create-request-btn {
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 18px;
|
||||
z-index: 60;
|
||||
z-index: 120;
|
||||
width: min(320px, calc(100% - 36px));
|
||||
max-width: calc(100vw - 32px);
|
||||
display: grid;
|
||||
|
||||
@@ -14,38 +14,22 @@
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
|
||||
border-left: 3px solid color-mix(in srgb, var(--capability-color) 42%, rgba(255, 255, 255, 0.72));
|
||||
background:
|
||||
var(--workbench-glass-base),
|
||||
linear-gradient(135deg, color-mix(in srgb, var(--capability-soft) 46%, transparent) 0%, transparent 52%, color-mix(in srgb, var(--capability-color) 11%, transparent) 100%),
|
||||
var(--workbench-glass-theme-tint);
|
||||
background-color: rgba(255, 255, 255, 0.64);
|
||||
box-shadow:
|
||||
0 10px 28px rgba(15, 23, 42, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.84),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
backdrop-filter: var(--workbench-glass-blur);
|
||||
-webkit-backdrop-filter: var(--workbench-glass-blur);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(12px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
|
||||
border-left: 3px solid color-mix(in srgb, var(--capability-color) 60%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.8));
|
||||
box-shadow:
|
||||
0 12px 28px rgba(15, 23, 42, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.capability-card::before,
|
||||
.capability-card::after,
|
||||
.workbench-card::before,
|
||||
.workbench-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.capability-card::before {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
|
||||
var(--workbench-capability-bg-image) 0 0 / var(--workbench-capability-tile-size) repeat;
|
||||
mix-blend-mode: soft-light;
|
||||
opacity: var(--workbench-glass-noise-opacity);
|
||||
}
|
||||
@@ -77,40 +61,18 @@
|
||||
.workbench-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.64) 55%, rgba(255, 255, 255, 0.72)),
|
||||
var(--workbench-glass-theme-tint);
|
||||
background-color: rgba(255, 255, 255, 0.66);
|
||||
box-shadow:
|
||||
0 12px 30px rgba(15, 23, 42, 0.052),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.07);
|
||||
backdrop-filter: var(--workbench-glass-blur);
|
||||
-webkit-backdrop-filter: var(--workbench-glass-blur);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(12px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(15, 23, 42, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.workbench-card::before,
|
||||
.workbench-card::after {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.workbench-card::before {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%),
|
||||
var(--workbench-panel-bg-image) 0 0 / var(--workbench-panel-tile-size) repeat;
|
||||
mix-blend-mode: soft-light;
|
||||
opacity: calc(var(--workbench-glass-noise-opacity) * 0.8);
|
||||
}
|
||||
|
||||
.workbench-card::after {
|
||||
border: 1px solid rgba(255, 255, 255, 0.36);
|
||||
background: var(--workbench-glass-highlight);
|
||||
opacity: 0.56;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.58),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.055);
|
||||
transition: opacity 180ms var(--ease);
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.workbench-card > * {
|
||||
@@ -138,15 +100,10 @@
|
||||
|
||||
.capability-card:hover,
|
||||
.workbench-card:hover {
|
||||
box-shadow:
|
||||
0 16px 36px rgba(15, 23, 42, 0.075),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
|
||||
}
|
||||
|
||||
.capability-card:hover::after,
|
||||
.workbench-card:hover::after {
|
||||
opacity: 0.88;
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.4);
|
||||
box-shadow:
|
||||
0 16px 36px rgba(15, 23, 42, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.capability-card:hover {
|
||||
|
||||
@@ -66,10 +66,12 @@
|
||||
.insight-metric-list,
|
||||
.insight-profile-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.insight-metric-row,
|
||||
@@ -94,6 +96,15 @@
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease);
|
||||
animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
}
|
||||
|
||||
.insight-metric-row {
|
||||
animation-delay: calc(400ms + var(--item-index, 0) * 80ms);
|
||||
}
|
||||
|
||||
.insight-profile-card {
|
||||
animation-delay: calc(500ms + var(--item-index, 0) * 80ms);
|
||||
}
|
||||
|
||||
.insight-metric-row:hover,
|
||||
@@ -104,22 +115,6 @@
|
||||
rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04);
|
||||
}
|
||||
|
||||
/* 局部改造：让费用统计内层的小卡片也变为低透明度透镜，形成双层液态玻璃（Double Glassmorphism）的极品手感 */
|
||||
.expense-stats-panel .insight-metric-row {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
border-left-color: rgba(255, 255, 255, 0.6) !important;
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.03),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.expense-stats-panel .insight-metric-row:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
.insight-metric-icon,
|
||||
.insight-profile-icon {
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
--hero-padding-top: 20px;
|
||||
--hero-padding-bottom: 20px;
|
||||
--hero-title-size: 28px;
|
||||
--hero-copy-gap: 5px;
|
||||
--hero-title-bottom-gap: 14px;
|
||||
--hero-copy-gap: 16px;
|
||||
--hero-title-bottom-gap: 10px;
|
||||
--composer-min-height: 108px;
|
||||
--composer-textarea-height: 48px;
|
||||
--composer-padding-block: 10px;
|
||||
@@ -15,7 +15,9 @@
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: 56% center;
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(760px, 66vw, 980px);
|
||||
--assistant-decor-opacity: 0.86;
|
||||
padding: var(--hero-padding-top) 18px var(--hero-padding-bottom) 44px;
|
||||
}
|
||||
|
||||
@@ -58,7 +60,9 @@
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: 58% center;
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(760px, 66vw, 980px);
|
||||
--assistant-decor-opacity: 0.9;
|
||||
padding: var(--hero-padding-top) 18px var(--hero-padding-bottom) 44px;
|
||||
}
|
||||
|
||||
@@ -83,7 +87,7 @@
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
padding-left: 14px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.workbench-content-grid {
|
||||
@@ -110,13 +114,15 @@
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: 62% center;
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(620px, 74vw, 860px);
|
||||
--assistant-decor-opacity: 0.62;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 58%, rgba(255, 255, 255, 0.44) 100%);
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.5) 58%, rgba(255, 255, 255, 0.06) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06) 58%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04) 58%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.09) 100%);
|
||||
backdrop-filter: blur(10px) saturate(1.12);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.12);
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
@@ -140,6 +146,125 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 961px) and (max-width: 1440px),
|
||||
(min-width: 961px) and (max-height: 820px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 14px;
|
||||
--hero-padding-bottom: 14px;
|
||||
--hero-title-size: 24px;
|
||||
--hero-copy-gap: 14px;
|
||||
--hero-title-bottom-gap: 8px;
|
||||
--composer-min-height: 92px;
|
||||
--composer-textarea-height: 38px;
|
||||
--composer-padding-block: 8px;
|
||||
--quick-prompts-gap-top: 5px;
|
||||
--capability-row-height: 82px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-decor-width: clamp(680px, 60vw, 880px);
|
||||
--assistant-decor-opacity: 0.72;
|
||||
padding: var(--hero-padding-top) 16px var(--hero-padding-bottom) 34px;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
width: min(900px, 92%);
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
margin-bottom: var(--hero-title-bottom-gap);
|
||||
font-size: var(--hero-title-size);
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.assistant-composer {
|
||||
min-height: var(--composer-min-height);
|
||||
gap: 4px;
|
||||
padding: var(--composer-padding-block) 14px 8px;
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
height: var(--composer-textarea-height);
|
||||
min-height: var(--composer-textarea-height);
|
||||
max-height: var(--composer-textarea-height);
|
||||
font-size: 14px;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 30px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 46px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.composer-count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-prompts {
|
||||
gap: 8px;
|
||||
margin-top: var(--quick-prompts-gap-top);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
grid-template-columns: 34px minmax(0, 1fr) 14px;
|
||||
gap: 10px;
|
||||
padding: 12px 12px 12px 16px;
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
--workbench-list-icon-size: 34px;
|
||||
--workbench-list-icon-art-size: 20px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.capability-copy strong {
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.capability-copy small {
|
||||
font-size: 11px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.capability-arrow {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
@@ -156,15 +281,17 @@
|
||||
|
||||
.assistant-hero {
|
||||
min-height: auto;
|
||||
--assistant-bg-position: 68% center;
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: min(620px, 118vw);
|
||||
--assistant-decor-opacity: 0.36;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 100%),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 100%);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.76) 100%),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.52) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.2) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08) 100%);
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04) 100%);
|
||||
padding: 24px 18px 24px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(9px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(9px) saturate(1.1);
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
@@ -311,7 +438,7 @@
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
padding-left: 6px;
|
||||
padding-left: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,31 +57,48 @@
|
||||
.workbench :where(button:disabled) { cursor: not-allowed; opacity: 0.7; }
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(860px, 62vw, 1180px);
|
||||
--assistant-decor-opacity: 0.92;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.025) 54%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.075));
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
padding: var(--hero-padding-top) 20px var(--hero-padding-bottom) 52px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(40px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.04), inset 0 2px 4px rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.54)),
|
||||
var(--assistant-theme-tint);
|
||||
background-color: rgba(247, 252, 255, 0.72);
|
||||
backdrop-filter: blur(14px) saturate(1.18);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.18);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(15, 23, 42, 0.045),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.07);
|
||||
isolation: isolate;
|
||||
animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
|
||||
.assistant-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 100px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
min-width: 400px;
|
||||
background: url("../../images/hero-financial-decor.svg") right center / auto 100% no-repeat;
|
||||
width: 82%;
|
||||
min-width: 760px;
|
||||
background: url("../../images/workbench-hero-right-bg.png") var(--assistant-bg-position) / var(--assistant-decor-width) auto no-repeat;
|
||||
opacity: var(--assistant-decor-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -92,8 +109,9 @@
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
|
||||
var(--assistant-readability-mask),
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.36), transparent 22%, transparent 72%, rgba(255, 255, 255, 0.18)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.05), transparent 58%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -114,8 +132,23 @@
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.assistant-copy h1 span {
|
||||
.assistant-copy h1 span:not(.typing-cursor) {
|
||||
color: var(--workbench-primary-active);
|
||||
display: inline-block;
|
||||
animation: workbenchItemIn 400ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
}
|
||||
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
color: var(--workbench-primary-active);
|
||||
font-weight: 400;
|
||||
margin-left: 2px;
|
||||
animation: cursorBlink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.assistant-copy p {
|
||||
@@ -127,29 +160,70 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.assistant-copy > * {
|
||||
animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
}
|
||||
|
||||
.assistant-copy > h1 { animation-delay: 80ms; }
|
||||
.assistant-copy > p { animation-delay: 160ms; }
|
||||
.assistant-copy > .assistant-composer { animation-delay: 240ms; }
|
||||
.assistant-copy > .assistant-file-strip { animation-delay: 320ms; }
|
||||
.assistant-copy > .quick-prompts { animation-delay: 320ms; }
|
||||
|
||||
.assistant-file-input { display: none; }
|
||||
|
||||
.assistant-composer {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-width: 920px;
|
||||
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: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(4px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.045), rgba(255, 255, 255, 0.18));
|
||||
box-shadow:
|
||||
0 10px 24px rgba(15, 23, 42, 0.045),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
|
||||
backdrop-filter: blur(10px) saturate(1.14);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.14);
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.assistant-composer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(110deg, rgba(255, 255, 255, 0.32), transparent 32%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-composer > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.assistant-composer:focus-within {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.85);
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.58);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06), rgba(255, 255, 255, 0.22));
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14),
|
||||
0 16px 36px rgba(15, 23, 42, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11),
|
||||
0 14px 30px rgba(15, 23, 42, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.94),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
@@ -331,24 +405,28 @@
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: 40px minmax(0, 1fr) 10px;
|
||||
grid-template-columns: 40px minmax(0, 1fr) 18px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 0;
|
||||
padding: 17px 12px 17px 26px;
|
||||
padding: 16px 18px 16px 22px;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-left: 3px solid color-mix(in srgb, var(--capability-color) 80%, rgba(255, 255, 255, 0.9));
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(40px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%);
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.15);
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 16px 32px rgba(0, 0, 0, 0.04),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 1);
|
||||
0 8px 24px rgba(15, 23, 42, 0.03),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
color: var(--workbench-ink);
|
||||
text-decoration: none;
|
||||
animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: var(--delay, 100ms);
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease),
|
||||
@@ -356,16 +434,12 @@
|
||||
transform 180ms var(--ease);
|
||||
}
|
||||
|
||||
.capability-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
.capability-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.4);
|
||||
box-shadow:
|
||||
0 16px 32px rgba(15, 23, 42, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.capability-card > * {
|
||||
@@ -373,13 +447,9 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.capability-card::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
--workbench-list-icon-size: 40px;
|
||||
--workbench-list-icon-art-size: 23px;
|
||||
--workbench-list-icon-art-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--capability-color);
|
||||
@@ -388,8 +458,9 @@
|
||||
.capability-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 4px;
|
||||
padding-left: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.capability-copy strong {
|
||||
@@ -400,6 +471,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.capability-copy small {
|
||||
@@ -409,11 +481,19 @@
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.capability-arrow {
|
||||
justify-self: end;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
color: color-mix(in srgb, var(--workbench-muted) 68%, #ffffff);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.capability-card--green {
|
||||
@@ -461,28 +541,16 @@
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
padding: 12px 14px;
|
||||
background:
|
||||
linear-gradient(125deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 100%);
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(40px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.15);
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 16px 32px rgba(0, 0, 0, 0.04),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.workbench-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 60%),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 56%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
0 12px 28px rgba(15, 23, 42, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: var(--delay, 200ms);
|
||||
}
|
||||
|
||||
.workbench-card > * {
|
||||
@@ -534,6 +602,18 @@
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.insight-metric-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--insight-color) 4%, transparent);
|
||||
transition: transform 180ms var(--ease), background-color 180ms var(--ease);
|
||||
animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: calc(400ms + var(--item-index, 0) * 80ms);
|
||||
}
|
||||
|
||||
.link-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -560,6 +640,11 @@
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: calc(300ms + var(--item-index, 0) * 80ms);
|
||||
}
|
||||
|
||||
.progress-identity,
|
||||
.progress-result {
|
||||
gap: 12px;
|
||||
@@ -716,40 +801,66 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 4px 10px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.expense-type-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border-radius: inherit;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.expense-type-icon i {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
.expense-type-icon--blue {
|
||||
background: color-mix(in srgb, var(--workbench-primary, #3a7ca5) 12%, #ffffff);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--workbench-primary, #3a7ca5) 12%, #ffffff) 0%, color-mix(in srgb, var(--workbench-primary, #3a7ca5) 3%, #ffffff) 100%);
|
||||
border: 1px solid color-mix(in srgb, var(--workbench-primary, #3a7ca5) 20%, #ffffff);
|
||||
color: var(--workbench-primary, #3a7ca5);
|
||||
}
|
||||
|
||||
.expense-type-icon--amber {
|
||||
background: color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 12%, #ffffff);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 12%, #ffffff) 0%, color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 3%, #ffffff) 100%);
|
||||
border: 1px solid color-mix(in srgb, var(--workbench-chart-amber, #b58b4c) 20%, #ffffff);
|
||||
color: var(--workbench-chart-amber, #b58b4c);
|
||||
}
|
||||
|
||||
.expense-type-icon--emerald {
|
||||
background: color-mix(in srgb, #10b981 12%, #ffffff);
|
||||
color: #10b981;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, #0f8f68 12%, #ffffff) 0%, color-mix(in srgb, #0f8f68 3%, #ffffff) 100%);
|
||||
border: 1px solid color-mix(in srgb, #0f8f68 20%, #ffffff);
|
||||
color: #0f8f68;
|
||||
}
|
||||
|
||||
.expense-type-icon--violet {
|
||||
background: color-mix(in srgb, #8b5cf6 12%, #ffffff);
|
||||
color: #8b5cf6;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, #6d5bd0 12%, #ffffff) 0%, color-mix(in srgb, #6d5bd0 3%, #ffffff) 100%);
|
||||
border: 1px solid color-mix(in srgb, #6d5bd0 20%, #ffffff);
|
||||
color: #6d5bd0;
|
||||
}
|
||||
|
||||
.expense-type-icon--cyan {
|
||||
background: color-mix(in srgb, #06b6d4 12%, #ffffff);
|
||||
color: #06b6d4;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, #0788a2 12%, #ffffff) 0%, color-mix(in srgb, #0788a2 3%, #ffffff) 100%);
|
||||
border: 1px solid color-mix(in srgb, #0788a2 20%, #ffffff);
|
||||
color: #0788a2;
|
||||
}
|
||||
|
||||
.expense-type-icon--muted {
|
||||
background: var(--info-soft, #f1f5f9);
|
||||
background: linear-gradient(135deg, var(--info-soft, #f1f5f9) 0%, #ffffff 100%);
|
||||
border: 1px solid var(--workbench-line);
|
||||
color: var(--workbench-muted, #64748b);
|
||||
}
|
||||
|
||||
@@ -877,3 +988,22 @@
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
|
||||
color: var(--workbench-primary-active);
|
||||
}
|
||||
|
||||
@keyframes workbenchItemIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.assistant-hero,
|
||||
.capability-card,
|
||||
.workbench-card {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1179,6 +1179,136 @@
|
||||
background: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
@media (min-width: 961px) and (max-width: 1440px),
|
||||
(min-width: 961px) and (max-height: 820px) {
|
||||
.topbar {
|
||||
gap: 16px;
|
||||
padding: 12px 20px 14px;
|
||||
}
|
||||
|
||||
.topbar.chat-mode {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 5px;
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 22px;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.topbar p {
|
||||
display: -webkit-box;
|
||||
max-width: 640px;
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: #64748b;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.35;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
height: 30px;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.range-tabs button {
|
||||
height: 30px;
|
||||
min-width: 48px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.custom-range-btn {
|
||||
height: 36px;
|
||||
gap: 6px;
|
||||
padding: 0 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dashboard-switch-wrap {
|
||||
width: 176px;
|
||||
flex-basis: 176px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.dashboard-switch-select :deep(.el-select__wrapper) {
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.company-switcher {
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.kpi-chips {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
gap: 1px 8px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.chip-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.chip-value small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chip-delta {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.detail-alert-pill {
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.create-top-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.range-combo {
|
||||
width: 100%;
|
||||
|
||||
@@ -99,6 +99,13 @@
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.reimbursement-draft-pending-detail {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
color: #94a3b8;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.application-draft-preview .application-draft-head {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr) auto;
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
max-width: min(100%, 760px);
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d8e4f0;
|
||||
border-radius: 14px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
color: #24324a;
|
||||
font-size: var(--wb-fs-bubble, 13px);
|
||||
@@ -182,11 +182,54 @@
|
||||
max-width: min(100%, 1080px);
|
||||
}
|
||||
|
||||
.message-feedback-bubble {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
max-width: min(100%, 420px);
|
||||
.message-action-toolbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: -2px;
|
||||
color: #728197;
|
||||
}
|
||||
|
||||
.message-action-btn {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
background 160ms ease,
|
||||
border-color 160ms ease;
|
||||
}
|
||||
|
||||
.message-action-btn i {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.message-action-btn:hover,
|
||||
.message-action-btn:focus-visible {
|
||||
color: #245f90;
|
||||
background: #eef6fb;
|
||||
border-color: #c9ddea;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.message-action-btn.active {
|
||||
color: #1d6f9f;
|
||||
background: #e8f4fb;
|
||||
border-color: #bcd8e8;
|
||||
}
|
||||
|
||||
.message-action-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #b7c2cf;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-low,
|
||||
@@ -482,7 +525,7 @@
|
||||
margin: 10px 0 12px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 10px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
@@ -566,7 +609,7 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: var(--wb-fs-chip, 12px);
|
||||
font-weight: 750;
|
||||
}
|
||||
@@ -606,6 +649,44 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active {
|
||||
transition:
|
||||
opacity 220ms cubic-bezier(0.2, 0, 0, 1),
|
||||
transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transform-origin: top left;
|
||||
will-change: opacity, transform, clip-path;
|
||||
}
|
||||
|
||||
.structured-card-reveal-leave-active {
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 140ms ease;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.985);
|
||||
clip-path: inset(0 0 14px 0);
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
.structured-card-reveal-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.structured-card-reveal-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.message-suggested-action-btn {
|
||||
height: 100%;
|
||||
min-height: 54px;
|
||||
@@ -614,16 +695,32 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .message-suggested-action-btn {
|
||||
animation: structured-card-item-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .message-suggested-action-btn:nth-child(2) {
|
||||
animation-delay: 45ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .message-suggested-action-btn:nth-child(3) {
|
||||
animation-delay: 90ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .message-suggested-action-btn:nth-child(n + 4) {
|
||||
animation-delay: 120ms;
|
||||
}
|
||||
|
||||
.message-suggested-action-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: #eff6ff;
|
||||
color: var(--theme-primary, #3a7ca5);
|
||||
}
|
||||
@@ -651,7 +748,7 @@
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
@@ -670,12 +767,17 @@
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d7e4f2;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
font-size: var(--wb-fs-bubble, 13px);
|
||||
}
|
||||
|
||||
.application-preview-shell {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.application-preview-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@@ -684,6 +786,30 @@
|
||||
border-top: 1px solid #e6edf5;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row {
|
||||
animation: structured-card-item-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row:nth-child(2) {
|
||||
animation-delay: 35ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row:nth-child(3) {
|
||||
animation-delay: 70ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row:nth-child(4) {
|
||||
animation-delay: 105ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row:nth-child(5) {
|
||||
animation-delay: 140ms;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row:nth-child(n + 6) {
|
||||
animation-delay: 165ms;
|
||||
}
|
||||
|
||||
.application-preview-row.editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -786,7 +912,7 @@
|
||||
height: 30px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.48);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
@@ -809,7 +935,7 @@
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--theme-primary-soft, #eaf4fa);
|
||||
color: var(--theme-primary-active, #255b7d);
|
||||
cursor: pointer;
|
||||
@@ -903,7 +1029,7 @@
|
||||
min-height: 22px;
|
||||
padding: 0 7px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
|
||||
color: var(--theme-primary-active, #255b7d);
|
||||
font-weight: 880;
|
||||
@@ -914,6 +1040,17 @@
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
@keyframes structured-card-item-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.expense-query-record-list,
|
||||
.message-citation-list {
|
||||
display: grid;
|
||||
@@ -926,7 +1063,7 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -1054,7 +1191,7 @@
|
||||
|
||||
.message-bubble {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.steward-task-missing-list li {
|
||||
@@ -1062,3 +1199,15 @@
|
||||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.structured-card-reveal-enter-active,
|
||||
.structured-card-reveal-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active .application-preview-row,
|
||||
.structured-card-reveal-enter-active .message-suggested-action-btn {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,3 +208,22 @@
|
||||
) {
|
||||
border-radius: var(--enterprise-detail-radius);
|
||||
}
|
||||
|
||||
.digital-work-records.digital-work-records .work-record-detail-page :is(
|
||||
.detail-inline-state,
|
||||
.detail-loading-state,
|
||||
.detail-hero,
|
||||
.enterprise-detail-card,
|
||||
.json-risk-meta-item,
|
||||
.json-risk-description-text,
|
||||
.work-record-error-text,
|
||||
.work-record-tool-item,
|
||||
.work-record-inline-empty,
|
||||
.work-record-code-block,
|
||||
.edit-badge,
|
||||
.back-action,
|
||||
.minor-action,
|
||||
.major-action
|
||||
) {
|
||||
border-radius: var(--enterprise-detail-radius);
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
--el-text-color-primary: var(--ink);
|
||||
--el-text-color-regular: var(--text);
|
||||
--el-text-color-secondary: var(--muted);
|
||||
--el-font-family: Inter, "SF Pro Text", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
--el-font-family: var(--font-sans);
|
||||
--el-font-size-base: 14px;
|
||||
--el-box-shadow-light: 0 8px 22px rgba(15, 23, 42, 0.08);
|
||||
--el-box-shadow-lighter: 0 4px 14px rgba(15, 23, 42, 0.06);
|
||||
|
||||
@@ -72,7 +72,8 @@
|
||||
--desktop-stage-height: 100dvh;
|
||||
--desktop-viewport-width: 1440;
|
||||
--desktop-viewport-height: 900;
|
||||
font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
@@ -41,20 +41,6 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.budget-select-filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.budget-select-filter .enterprise-select {
|
||||
min-width: 118px;
|
||||
}
|
||||
|
||||
.budget-primary-btn,
|
||||
.budget-ghost-btn {
|
||||
min-height: 38px;
|
||||
@@ -464,17 +450,11 @@
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.budget-select-filter,
|
||||
.budget-select-filter .enterprise-select,
|
||||
.budget-primary-btn,
|
||||
.budget-ghost-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.budget-select-filter {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.budget-scope-tabs {
|
||||
gap: 18px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
@@ -15,173 +15,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document-filter,
|
||||
.date-range-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.document-filter-menu,
|
||||
.date-range-popover {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document-filter-menu {
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
min-width: 150px;
|
||||
max-height: 280px;
|
||||
padding: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.document-filter-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.document-filter-menu button:hover,
|
||||
.document-filter-menu button.active {
|
||||
background: rgba(58, 124, 165, 0.1);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.date-range-trigger {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.date-range-label {
|
||||
max-width: 104px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-range-popover {
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 320px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.date-range-popover header,
|
||||
.date-range-popover footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-range-popover header strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-range-popover header button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.date-range-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-range-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-range-fields span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-range-fields input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.apply-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
border: 0;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.document-status-filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.status-dropdown-filter {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.status-filter-trigger {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.status-filter-trigger > .mdi:first-child {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.status-filter-menu {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.col-id { width: 11%; }
|
||||
.col-created { width: 10%; }
|
||||
.col-stay { width: 9%; }
|
||||
|
||||
@@ -40,10 +40,6 @@
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.system-logs-list .document-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.system-logs-list .status-dropdown-filter,
|
||||
.system-logs-list .status-filter-trigger,
|
||||
.system-logs-list .status-filter-menu {
|
||||
@@ -74,42 +70,6 @@
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.system-logs-list .document-filter-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
min-width: 150px;
|
||||
max-height: 280px;
|
||||
padding: 6px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.system-logs-list .document-filter-menu button {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.system-logs-list .document-filter-menu button:hover,
|
||||
.system-logs-list .document-filter-menu button.active {
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.system-logs-list .system-log-table {
|
||||
min-width: 1260px;
|
||||
}
|
||||
|
||||
@@ -114,44 +114,46 @@
|
||||
border-right: 1px solid #edf2f7;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.folder-tree {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.folder-tree button {
|
||||
min-height: 34px;
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.folder-tree {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.folder-tree button {
|
||||
min-height: 34px;
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
animation: listRowIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
animation-delay: var(--delay, 0ms);
|
||||
}
|
||||
|
||||
.folder-tree button.active {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
|
||||
.folder-tree b {
|
||||
min-width: 24px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -189,7 +191,7 @@
|
||||
color: #64748b;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.document-area {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
@@ -201,51 +203,51 @@
|
||||
.document-area.read-only {
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.upload-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
min-height: 112px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
border: 1px dashed #93c5fd;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
color: #334155;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.upload-zone:hover {
|
||||
border-color: #60a5fa;
|
||||
background: #f3f8ff;
|
||||
}
|
||||
|
||||
.upload-zone.disabled {
|
||||
cursor: default;
|
||||
border-color: #cbd5e1;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.upload-zone.busy {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.upload-zone i {
|
||||
color: #2563eb;
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.upload-zone strong {
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
|
||||
.upload-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
min-height: 112px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
border: 1px dashed #93c5fd;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
color: #334155;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.upload-zone:hover {
|
||||
border-color: #60a5fa;
|
||||
background: #f3f8ff;
|
||||
}
|
||||
|
||||
.upload-zone.disabled {
|
||||
cursor: default;
|
||||
border-color: #cbd5e1;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.upload-zone.busy {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.upload-zone i {
|
||||
color: #2563eb;
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.upload-zone strong {
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.upload-zone span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
@@ -255,24 +257,24 @@
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 780px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
@@ -289,59 +291,61 @@ th {
|
||||
.knowledge-document-table td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.doc-row {
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.doc-row:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
|
||||
.doc-row {
|
||||
cursor: pointer;
|
||||
animation: listRowIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
animation-delay: var(--delay, 0ms);
|
||||
transition: background 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.doc-row:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.doc-row.selected {
|
||||
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.08), rgba(59, 130, 246, 0.04));
|
||||
box-shadow: inset 3px 0 0 var(--theme-primary);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-name .pdf,
|
||||
.viewer-filetype.pdf { color: #ef4444; }
|
||||
.file-name .word,
|
||||
.viewer-filetype.word { color: #2563eb; }
|
||||
|
||||
.file-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-name .pdf,
|
||||
.viewer-filetype.pdf { color: #ef4444; }
|
||||
.file-name .word,
|
||||
.viewer-filetype.word { color: #2563eb; }
|
||||
.file-name .excel,
|
||||
.viewer-filetype.excel { color: var(--success); }
|
||||
|
||||
.doc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 7px;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.state-tag {
|
||||
min-height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.doc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 7px;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.state-tag {
|
||||
min-height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.state-tag.success {
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
@@ -351,7 +355,7 @@ th {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
|
||||
.state-tag.warning {
|
||||
background: #ffedd5;
|
||||
color: #f97316;
|
||||
@@ -373,14 +377,14 @@ th {
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.more-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
}
|
||||
@@ -417,43 +421,43 @@ th {
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.empty-row {
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.pager button:hover:not(.active) {
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
@@ -465,101 +469,101 @@ th {
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.list-foot .page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
|
||||
.list-foot .page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.page-size-select {
|
||||
width: 112px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
|
||||
.preview-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
padding: 20px 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.preview-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mini-action,
|
||||
.icon-action,
|
||||
.viewer-toolbar-actions button {
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.mini-action {
|
||||
min-height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.icon-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.preview-summary-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.preview-secondary-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
padding: 20px 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.preview-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mini-action,
|
||||
.icon-action,
|
||||
.viewer-toolbar-actions button {
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.mini-action {
|
||||
min-height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.icon-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.preview-summary-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.preview-secondary-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
min-height: 0;
|
||||
margin-top: 18px;
|
||||
@@ -585,6 +589,7 @@ th {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
||||
.preview-modal-panel {
|
||||
height: 100%;
|
||||
border-radius: 24px;
|
||||
@@ -1401,3 +1406,22 @@ th {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes listRowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.folder-tree button,
|
||||
.doc-row,
|
||||
.page-sheet {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -365,8 +365,10 @@
|
||||
}
|
||||
|
||||
.dialog-panel {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 0;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.insight-panel-shell {
|
||||
|
||||
@@ -619,10 +619,13 @@
|
||||
.assistant-layout {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
padding: clamp(12px, 1.5vw, 16px);
|
||||
align-items: stretch;
|
||||
gap: clamp(12px, 1.5vw, 16px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-panel,
|
||||
@@ -641,8 +644,11 @@
|
||||
|
||||
.dialog-panel {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
transition:
|
||||
@@ -671,6 +677,7 @@
|
||||
}
|
||||
|
||||
.dialog-toolbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@@ -766,12 +773,15 @@
|
||||
}
|
||||
|
||||
.message-list {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.message-row.user .message-avatar {
|
||||
@@ -1918,6 +1928,13 @@
|
||||
padding: 0 18px 18px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
flex: 0 0 auto;
|
||||
flex-shrink: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -10px 22px rgba(248, 250, 252, 0.92);
|
||||
}
|
||||
|
||||
.hidden-file-input {
|
||||
@@ -1994,3 +2011,37 @@
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.message-row-reveal-enter-active {
|
||||
transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.message-row-reveal-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.98);
|
||||
}
|
||||
|
||||
.message-row-reveal-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.message-row-reveal-leave-active {
|
||||
transition: opacity 200ms ease, transform 200ms ease;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-row-reveal-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.message-row-reveal-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
|
||||
.message-row-reveal-move {
|
||||
transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user