feat: 报销审批流重构与管家计划全链路贯通
- 重构报销状态注册表、审批流路由与平台风险标记 - 完善管家意图规划器与模型计划构建器全链路 - 新增 OCR Worker 脚本、数据库会话管理与通知状态 - 优化文档中心、日志视图、预算中心与员工管理交互 - 增强工作台摘要、图标资源与全局主题样式 - 补充审批路由、状态注册、OCR 服务与管家规划器测试覆盖
BIN
web/src/assets/images/cap-analysis.png
Normal file
|
After Width: | Height: | Size: 678 KiB |
BIN
web/src/assets/images/cap-approval.png
Normal file
|
After Width: | Height: | Size: 668 KiB |
BIN
web/src/assets/images/cap-budget.png
Normal file
|
After Width: | Height: | Size: 984 KiB |
BIN
web/src/assets/images/cap-expense.png
Normal file
|
After Width: | Height: | Size: 542 KiB |
BIN
web/src/assets/images/cap-policy.png
Normal file
|
After Width: | Height: | Size: 1022 KiB |
BIN
web/src/assets/images/cap-reimb.png
Normal file
|
After Width: | Height: | Size: 804 KiB |
BIN
web/src/assets/images/exp-cart.png
Normal file
|
After Width: | Height: | Size: 834 KiB |
BIN
web/src/assets/images/exp-dining.png
Normal file
|
After Width: | Height: | Size: 984 KiB |
BIN
web/src/assets/images/exp-flight.png
Normal file
|
After Width: | Height: | Size: 578 KiB |
BIN
web/src/assets/images/exp-meeting.png
Normal file
|
After Width: | Height: | Size: 964 KiB |
BIN
web/src/assets/images/exp-megaphone.png
Normal file
|
After Width: | Height: | Size: 671 KiB |
@@ -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 |
BIN
web/src/assets/images/workbench-hero-right-bg.png
Normal file
|
After Width: | Height: | Size: 625 KiB |
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |