feat: 报销审批流重构与管家计划全链路贯通

- 重构报销状态注册表、审批流路由与平台风险标记
- 完善管家意图规划器与模型计划构建器全链路
- 新增 OCR Worker 脚本、数据库会话管理与通知状态
- 优化文档中心、日志视图、预算中心与员工管理交互
- 增强工作台摘要、图标资源与全局主题样式
- 补充审批路由、状态注册、OCR 服务与管家规划器测试覆盖
This commit is contained in:
caoxiaozhu
2026-06-06 17:19:07 +08:00
parent f60cebadb8
commit e124e4bbcb
162 changed files with 9161 additions and 1941 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1022 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 804 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 834 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 578 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 KiB

View File

@@ -1,107 +1,142 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" width="100%" height="100%">
<defs>
<!-- Soft, large shadow for the main cards -->
<filter id="shadow-lg" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="24" stdDeviation="32" flood-color="#0f172a" flood-opacity="0.08"/>
<!-- Background glowing orbs -->
<filter id="blur-huge" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="60"/>
</filter>
<!-- Tighter shadow for floating chips -->
<filter id="shadow-sm" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#3a7ca5" flood-opacity="0.12"/>
<!-- Premium drop shadows -->
<filter id="glass-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="24" stdDeviation="32" flood-color="#020617" flood-opacity="0.12"/>
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#020617" flood-opacity="0.08"/>
</filter>
<!-- Glowing effect for spheres -->
<filter id="glow">
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
<linearGradient id="glass-base" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#f8fafc" stop-opacity="0.65"/>
<!-- Apple Liquid Glass Gradients -->
<linearGradient id="glass-bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="40%" stop-color="#ffffff" stop-opacity="0.45"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.25"/>
</linearGradient>
<linearGradient id="blue-primary" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3a7ca5" stop-opacity="1"/>
<stop offset="100%" stop-color="#255b7d" stop-opacity="1"/>
<linearGradient id="glass-border" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="amber-accent" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#b58b4c" stop-opacity="1"/>
<stop offset="100%" stop-color="#d4a359" stop-opacity="1"/>
<!-- Vibrant Data Gradients -->
<linearGradient id="grad-blue" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0ea5e9" stop-opacity="1"/>
<stop offset="100%" stop-color="#2563eb" stop-opacity="1"/>
</linearGradient>
<linearGradient id="grad-amber" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f59e0b" stop-opacity="1"/>
<stop offset="100%" stop-color="#ea580c" stop-opacity="1"/>
</linearGradient>
<linearGradient id="grad-emerald" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981" stop-opacity="1"/>
<stop offset="100%" stop-color="#059669" stop-opacity="1"/>
</linearGradient>
<linearGradient id="area-blue" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0ea5e9" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#2563eb" stop-opacity="0.0"/>
</linearGradient>
</defs>
<!-- Ambient Glowing Orbs Background removed as per user request -->
<g transform="translate(40, 20)">
<!-- Background Document (Left) -->
<g transform="translate(20, 60) rotate(-12)" filter="url(#shadow-lg)">
<rect width="260" height="340" rx="16" fill="url(#glass-base)" stroke="#ffffff" stroke-width="2"/>
<!-- UI Skeleton Lines -->
<text x="30" y="50" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" font-weight="bold" fill="#64748b">支出分析</text>
<rect x="30" y="70" width="200" height="8" rx="4" fill="#e2e8f0" opacity="0.7"/>
<rect x="30" y="90" width="160" height="8" rx="4" fill="#e2e8f0" opacity="0.7"/>
<!-- ========================================== -->
<!-- 1. Expense Analysis Document (Left, Back) -->
<!-- ========================================== -->
<g transform="translate(60, 30) rotate(-10)" filter="url(#glass-shadow)">
<!-- Liquid Glass Base -->
<rect width="280" height="340" rx="24" fill="url(#glass-bg)" stroke="url(#glass-border)" stroke-width="1.5"/>
<rect width="280" height="340" rx="24" fill="none" stroke="#ffffff" stroke-width="4" stroke-opacity="0.4" style="mix-blend-mode: overlay;"/>
<!-- Bar Chart Component -->
<rect x="30" y="140" width="24" height="80" rx="6" fill="#e2e8f0" opacity="0.8"/>
<rect x="70" y="100" width="24" height="120" rx="6" fill="#e2e8f0" opacity="0.8"/>
<rect x="110" y="160" width="24" height="60" rx="6" fill="#e2e8f0" opacity="0.8"/>
<rect x="150" y="80" width="24" height="140" rx="6" fill="url(#blue-primary)"/>
<rect x="190" y="120" width="24" height="100" rx="6" fill="#e2e8f0" opacity="0.8"/>
<!-- Header -->
<circle cx="40" cy="46" r="12" fill="url(#grad-blue)"/>
<text x="66" y="52" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" font-weight="900" fill="#1e293b" letter-spacing="1">支出分析</text>
<!-- Floating Glass Donut Chart -->
<g transform="translate(140, 150)">
<circle cx="0" cy="0" r="50" fill="none" stroke="#e2e8f0" stroke-width="16" opacity="0.6"/>
<circle cx="0" cy="0" r="50" fill="none" stroke="url(#grad-blue)" stroke-width="16" stroke-dasharray="200 314" stroke-linecap="round" filter="url(#glow-cyan)"/>
<circle cx="0" cy="0" r="50" fill="none" stroke="url(#grad-amber)" stroke-width="16" stroke-dasharray="60 314" stroke-dashoffset="-220" stroke-linecap="round"/>
<text x="0" y="8" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="22" font-weight="900" fill="#1e293b" text-anchor="middle">72%</text>
</g>
<!-- Data Bars -->
<rect x="30" y="240" width="220" height="40" rx="12" fill="#ffffff" opacity="0.6"/>
<rect x="42" y="256" width="120" height="8" rx="4" fill="url(#grad-blue)"/>
<rect x="180" y="256" width="50" height="8" rx="4" fill="#94a3b8"/>
<rect x="30" y="290" width="220" height="40" rx="12" fill="#ffffff" opacity="0.6"/>
<rect x="42" y="306" width="80" height="8" rx="4" fill="url(#grad-amber)"/>
<rect x="140" y="306" width="90" height="8" rx="4" fill="#94a3b8"/>
</g>
<!-- Floating Element 1 (Left) -->
<g transform="translate(40, 20) rotate(12)" filter="url(#glass-shadow)">
<rect width="80" height="80" rx="20" fill="url(#glass-bg)" stroke="url(#glass-border)" stroke-width="1.5"/>
<path d="M 25 40 L 35 50 L 55 30" fill="none" stroke="url(#grad-emerald)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- Center Floating Sphere -->
<circle cx="280" cy="90" r="30" fill="url(#amber-accent)" opacity="0.85" filter="url(#glow)"/>
<circle cx="340" cy="110" r="30" fill="url(#grad-amber)" opacity="0.9" filter="url(#glass-shadow)"/>
<!-- Main Foreground Document (Right Focus) -->
<g transform="translate(320, 10) rotate(6)" filter="url(#shadow-lg)">
<!-- Main Card Body -->
<rect width="320" height="400" rx="20" fill="url(#glass-base)" stroke="#ffffff" stroke-width="3"/>
<!-- ========================================== -->
<!-- 2. Cost Trend Document (Right, Front) -->
<!-- ========================================== -->
<g transform="translate(320, 10) rotate(5)" filter="url(#glass-shadow)">
<!-- Liquid Glass Base -->
<rect width="320" height="380" rx="24" fill="url(#glass-bg)" stroke="url(#glass-border)" stroke-width="1.5"/>
<rect width="320" height="380" rx="24" fill="none" stroke="#ffffff" stroke-width="4" stroke-opacity="0.5" style="mix-blend-mode: overlay;"/>
<!-- Header Section -->
<circle cx="44" cy="50" r="18" fill="url(#blue-primary)"/>
<text x="76" y="58" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="22" font-weight="800" fill="#3a7ca5">费用趋势</text>
<circle cx="44" cy="50" r="14" fill="url(#grad-blue)"/>
<text x="74" y="57" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="22" font-weight="900" fill="#1e293b" letter-spacing="1">费用趋势</text>
<!-- Area Chart Widget -->
<rect x="30" y="100" width="260" height="130" rx="12" fill="#f1f5f9" opacity="0.5"/>
<path d="M 30 200 L 40 180 Q 90 120 140 150 T 260 90 L 290 90 L 290 230 L 30 230 Z" fill="#3a7ca5" opacity="0.1"/>
<path d="M 40 180 Q 90 120 140 150 T 260 90" fill="none" stroke="#3a7ca5" stroke-width="4" stroke-linecap="round"/>
<!-- Chart Nodes -->
<circle cx="140" cy="150" r="6" fill="#ffffff" stroke="#3a7ca5" stroke-width="3"/>
<circle cx="260" cy="90" r="6" fill="#ffffff" stroke="#3a7ca5" stroke-width="3"/>
<!-- Data List Rows -->
<g transform="translate(30, 250)" filter="url(#shadow-sm)">
<rect width="260" height="40" rx="10" fill="#ffffff" opacity="0.95"/>
<rect x="16" y="16" width="60" height="8" rx="4" fill="#94a3b8"/>
<rect x="200" y="16" width="44" height="8" rx="4" fill="url(#blue-primary)"/>
</g>
<g transform="translate(30, 306)" filter="url(#shadow-sm)">
<rect width="260" height="40" rx="10" fill="#ffffff" opacity="0.95"/>
<rect x="16" y="16" width="80" height="8" rx="4" fill="#cbd5e1"/>
<rect x="210" y="16" width="34" height="8" rx="4" fill="url(#blue-primary)"/>
<!-- Beautiful Smooth Area Chart -->
<g transform="translate(30, 100)">
<rect width="260" height="140" rx="16" fill="#ffffff" opacity="0.5"/>
<!-- Grid lines -->
<line x1="20" y1="35" x2="240" y2="35" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="4 4"/>
<line x1="20" y1="70" x2="240" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="4 4"/>
<line x1="20" y1="105" x2="240" y2="105" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="4 4"/>
<!-- Smooth Area -->
<path d="M 20 120 C 60 120, 80 40, 130 60 C 180 80, 200 20, 240 30 L 240 140 L 20 140 Z" fill="url(#area-blue)"/>
<!-- Smooth Line -->
<path d="M 20 120 C 60 120, 80 40, 130 60 C 180 80, 200 20, 240 30" fill="none" stroke="url(#grad-blue)" stroke-width="4" stroke-linecap="round"/>
<!-- Glowing Data Point -->
<circle cx="240" cy="30" r="6" fill="#ffffff" stroke="url(#grad-blue)" stroke-width="3" filter="url(#glow-cyan)"/>
<!-- Value Tooltip -->
<rect x="190" y="-10" width="60" height="24" rx="12" fill="#1e293b"/>
<text x="220" y="6" font-family="sans-serif" font-size="12" font-weight="bold" fill="#ffffff" text-anchor="middle">+14%</text>
</g>
<!-- List Items -->
<rect x="30" y="260" width="260" height="44" rx="12" fill="#ffffff" opacity="0.8"/>
<circle cx="50" cy="282" r="8" fill="url(#grad-emerald)"/>
<rect x="74" y="278" width="100" height="8" rx="4" fill="#64748b"/>
<rect x="230" y="278" width="40" height="8" rx="4" fill="url(#grad-blue)"/>
<rect x="30" y="316" width="260" height="44" rx="12" fill="#ffffff" opacity="0.8"/>
<circle cx="50" cy="338" r="8" fill="url(#grad-amber)"/>
<rect x="74" y="334" width="80" height="8" rx="4" fill="#64748b"/>
<rect x="240" y="334" width="30" height="8" rx="4" fill="url(#grad-amber)"/>
</g>
<!-- Floating UI Chip 1 (Top Left) -->
<g transform="translate(140, 0) rotate(-6)" filter="url(#shadow-sm)">
<rect width="150" height="48" rx="24" fill="#ffffff" stroke="#f1f5f9" stroke-width="2"/>
<circle cx="24" cy="24" r="10" fill="#10b981"/>
<rect x="44" y="20" width="80" height="8" rx="4" fill="#334155"/>
</g>
<!-- Floating UI Chip 2 (Bottom Right) -->
<g transform="translate(580, 280) rotate(14)" filter="url(#shadow-sm)">
<rect width="130" height="52" rx="14" fill="url(#blue-primary)"/>
<rect x="20" y="22" width="90" height="8" rx="4" fill="#ffffff" opacity="0.9"/>
</g>
<!-- Decorative small spheres -->
<circle cx="120" cy="350" r="8" fill="#3a7ca5" opacity="0.4" filter="url(#glow)"/>
<circle cx="680" cy="120" r="12" fill="#b58b4c" opacity="0.3" filter="url(#glow)"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 625 KiB

View File

@@ -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;
}
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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%;

View File

@@ -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;

View File

@@ -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;
}
}

View File

@@ -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);
}

View File

@@ -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);

View File

@@ -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; }

View File

@@ -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;

View File

@@ -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%; }

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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 {

View File

@@ -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);
}

View File

@@ -1,5 +1,7 @@
# Workbench Icons
Icons in this folder are sourced from [Heroicons](https://heroicons.com) (MIT License).
Icons in this folder are SVG assets used by the Personal Workbench todo,
progress, and assistant capability entries.
Used on the Personal Workbench todo and progress lists.
The assistant capability icons are custom line icons designed for the
X-Financial workbench visual system.

View File

@@ -1,6 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M8.5 4.5h7A1.5 1.5 0 0 1 17 6v13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 5 19V6a1.5 1.5 0 0 1 1.5-1.5h2"/>
<path d="M8.5 4.5A2 2 0 0 1 10.5 3h2A2 2 0 0 1 14.5 4.5v1h-6Z"/>
<path d="M8.5 12.8 11 15.2l5-5.2"/>
<path d="M8 18h7"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M7.1 4.7h8.4c.9 0 1.6.7 1.6 1.6v12.3c0 .9-.7 1.6-1.6 1.6H7.1c-.9 0-1.6-.7-1.6-1.6V6.3c0-.9.7-1.6 1.6-1.6Z"/>
<path d="M8.5 4.7H7.1c-.9 0-1.6.7-1.6 1.6v12.3c0 .9.7 1.6 1.6 1.6h8.4c.9 0 1.6-.7 1.6-1.6V6.3c0-.9-.7-1.6-1.6-1.6h-1.3"/>
<path class="icon-accent" d="M8.5 4.7c.2-.9 1-1.6 2-1.6h1.8c1 0 1.8.7 2 1.6v1.2H8.5Z"/>
<path d="m8.7 12.6 2.3 2.2 4.9-5.1"/>
<path class="icon-muted" d="M8.2 18h6.6"/>
</svg>

Before

Width:  |  Height:  |  Size: 431 B

After

Width:  |  Height:  |  Size: 625 B

View File

@@ -1,5 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 4.5v7h7A7 7 0 1 1 12 4.5Z"/>
<path d="M14.5 3.8A7.2 7.2 0 0 1 20.2 9h-5.7Z"/>
<path d="M7.5 16.5h4M7.5 13.5H10"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M11.6 4.2a7.5 7.5 0 1 0 7.5 7.5h-7.5Z"/>
<path d="M11.6 4.2a7.5 7.5 0 1 0 7.5 7.5h-7.5Z"/>
<path class="icon-accent" d="M14.3 3.9a7.3 7.3 0 0 1 5.8 5.7h-5.8Z"/>
<path d="M7.5 15.7h4.5"/>
<path class="icon-muted" d="M7.5 18h3.1"/>
<path d="M16.8 14.6v2.9M19.2 13.2v4.3"/>
</svg>

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 498 B

View File

@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M7 3.5h7l3 3v13a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5v-15A1.5 1.5 0 0 1 7.5 3.5Z"/>
<path d="M14 3.5V7h3.5"/>
<path d="M9 11h6M9 14h3"/>
<path d="M15.5 13.5v4M13.5 15.5h4"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M7.5 3.7h7.1l3.2 3.2v11.7c0 .9-.7 1.6-1.6 1.6H7.5c-.9 0-1.6-.7-1.6-1.6V5.3c0-.9.7-1.6 1.6-1.6Z"/>
<path d="M7.5 3.7h7.1l3.2 3.2v11.7c0 .9-.7 1.6-1.6 1.6H7.5c-.9 0-1.6-.7-1.6-1.6V5.3c0-.9.7-1.6 1.6-1.6Z"/>
<path class="icon-accent" d="M14.5 3.8v3.3h3.3"/>
<path d="M8.8 10.4h6.4M8.8 13h4.2"/>
<path class="icon-muted" d="M8.8 15.7h2.6"/>
<path d="M16.4 13.9v4.1M14.4 16h4.1"/>
</svg>

Before

Width:  |  Height:  |  Size: 386 B

After

Width:  |  Height:  |  Size: 603 B

View File

@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4.5 19.5h15"/>
<path d="M6 16.5V8.8M10 16.5V5.5M14 16.5v-6M18 16.5V7"/>
<path d="M6 12.5c2.2-3.2 4-1.2 6.2-4.1 1.5-2 3-1.3 5.3-3.4"/>
<path d="m17.6 5 .4 3.2-3.1-.5"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M5.2 5.5h14v13.2h-14Z"/>
<path d="M4.8 19h14.8"/>
<path class="icon-muted" d="M6.5 16.2V9.8M10.3 16.2V7.2M14.1 16.2v-5.7M17.9 16.2V8.6"/>
<path d="M6.4 13c2.2-3.1 4.1-1.4 6-4 1.5-2 3.2-1.1 5.4-3.2"/>
<path class="icon-accent" d="m17.9 5.8.2 3-2.8-.5"/>
<circle cx="12.4" cy="9" r="1" class="icon-fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 531 B

View File

@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5.5 5.5A2.5 2.5 0 0 1 8 3h12v16.5H8A2.5 2.5 0 0 0 5.5 22Z"/>
<path d="M5.5 5.5v16"/>
<path d="M9 7.5h7M9 10.5h6M9 14.5h4"/>
<path d="M17 3v16.5"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M5.5 5.7A2.4 2.4 0 0 1 7.9 3.3h11.2v16.2H7.9a2.4 2.4 0 0 0-2.4 2.2Z"/>
<path d="M5.5 5.7A2.4 2.4 0 0 1 7.9 3.3h11.2v16.2H7.9a2.4 2.4 0 0 0-2.4 2.2Z"/>
<path class="icon-muted" d="M5.5 5.7v16"/>
<path d="M9 7.4h5.6M9 10.2h4.8M9 13h3.7"/>
<path class="icon-accent" d="M16 3.3v5.2l1.4-1 1.4 1V3.3"/>
<path d="M14.8 15.2h2.8"/>
</svg>

Before

Width:  |  Height:  |  Size: 352 B

After

Width:  |  Height:  |  Size: 551 B

View File

@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M6.5 4.5h9.8A1.7 1.7 0 0 1 18 6.2v13.3l-2.2-1.2-2.2 1.2-2.2-1.2-2.2 1.2-2.2-1.2-2.2 1.2V6.2a1.7 1.7 0 0 1 1.7-1.7Z"/>
<path d="M8 9h8M8 12h6"/>
<path d="M9 15.5h2.7c1.8 0 3.3-1.4 3.3-3.2v-.8"/>
<path d="m13.3 10 1.7 1.7 1.7-1.7"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path class="icon-fill" d="M5.2 6.3h11.5c1 0 1.8.8 1.8 1.8v8.1c0 1-.8 1.8-1.8 1.8H5.2c-1 0-1.8-.8-1.8-1.8V8.1c0-1 .8-1.8 1.8-1.8Z"/>
<path d="M5.2 6.3h11.5c1 0 1.8.8 1.8 1.8v8.1c0 1-.8 1.8-1.8 1.8H5.2c-1 0-1.8-.8-1.8-1.8V8.1c0-1 .8-1.8 1.8-1.8Z"/>
<path class="icon-accent" d="M6.8 6.3V4.9c0-.7.5-1.2 1.2-1.2h8.9c.7 0 1.2.5 1.2 1.2v2.2"/>
<path d="M7 10.2h5.8M7 13.3h4.1"/>
<path d="m13.2 14.1 1.7 1.6 3.1-3.6"/>
<path class="icon-muted" d="M18.5 9.7h1.7v4.6h-1.7"/>
</svg>

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 667 B