重新设计日历视图:以用户本地时区为主视角

- CalendarView 组件重写:添加实时用户时钟头部(HH:MM:SS + 完整日期)
- 卡片重新设计:用户本地时间为主要展示,城市窗口时间为次要
- 新增 urgency badge(进行中/即将/稍后/已过)视觉标识
- 优化卡片布局:顶部城市+徽标 → 用户时间 → 倒计时 → 原因 → 底部 DEB+阶段
- CSS 全面重写:用户时钟头部、卡片分层、计时器颜色编码
- 浅色主题同步更新所有新 class 名称
This commit is contained in:
2569718930@qq.com
2026-05-10 15:34:46 +08:00
parent 0e529358c9
commit 5ff9fade5f
3 changed files with 402 additions and 171 deletions
@@ -30,7 +30,7 @@
.root :global(.scan-terminal.light .scan-detail-volume-big),
.root :global(.scan-terminal.light .scan-kv strong),
.root :global(.scan-terminal.light .scan-time-main),
.root :global(.scan-terminal.light .scan-calendar-date),
.root :global(.scan-terminal.light .scan-calendar-group-label),
.root :global(.scan-terminal.light .scan-summary-value),
.root :global(.scan-terminal.light .scan-distribution-card strong),
.root :global(.scan-terminal.light .scan-table-header),
@@ -170,24 +170,18 @@
color: #475569;
}
.root :global(.scan-terminal.light .scan-calendar-subtitle),
.root :global(.scan-terminal.light .scan-calendar-action span),
.root :global(.scan-terminal.light .scan-calendar-countdown small) {
.root :global(.scan-terminal.light .scan-calendar-group-sub),
.root :global(.scan-terminal.light .scan-calendar-deb span),
.root :global(.scan-terminal.light .scan-calendar-city-time) {
color: #647a98;
}
.root :global(.scan-terminal.light .scan-calendar-action b) {
.root :global(.scan-terminal.light .scan-calendar-deb b) {
color: #122033;
}
.root :global(.scan-terminal.light .scan-calendar-reason) {
color: #243b5a;
}
.root :global(.scan-terminal.light .scan-calendar-countdown) {
border-color: rgba(10, 160, 100, 0.18);
background: rgba(220, 252, 239, 0.68);
color: #087b55;
color: #334155;
}
.root :global(.scan-terminal.light .scan-calendar-card.peak-active) {
@@ -195,6 +189,47 @@
background: linear-gradient(180deg, rgba(220, 252, 239, 0.84), rgba(255, 255, 255, 0.86));
}
.root :global(.scan-terminal.light .scan-calendar-header) {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(16, 185, 129, 0.03));
border-color: rgba(37, 99, 235, 0.14);
}
.root :global(.scan-terminal.light .scan-calendar-clock-time) {
color: #0F172A;
}
.root :global(.scan-terminal.light .scan-calendar-clock-date) {
color: #475569;
}
.root :global(.scan-terminal.light .scan-calendar-clock-meta) {
color: #64748B;
}
.root :global(.scan-terminal.light .scan-calendar-user-time) {
background: rgba(37, 99, 235, 0.04);
}
.root :global(.scan-terminal.light .scan-calendar-user-label),
.root :global(.scan-terminal.light .scan-calendar-phase),
.root :global(.scan-terminal.light .scan-calendar-group-sub),
.root :global(.scan-terminal.light .scan-calendar-city-time) {
color: #64748B;
}
.root :global(.scan-terminal.light .scan-calendar-group-count) {
background: rgba(37, 99, 235, 0.1);
color: #2563EB;
}
.root :global(.scan-terminal.light .scan-calendar-empty-title) {
color: #0F172A;
}
.root :global(.scan-terminal.light .scan-calendar-empty-sub) {
color: #475569;
}
.root :global(.scan-terminal.light .scan-mode-tab.active .scan-mode-icon) {
background: rgba(16, 185, 129, 0.16);
color: #069668;
@@ -660,9 +695,9 @@
.root :global(.scan-terminal.light .panel-weather-chip),
.root :global(.scan-terminal.light .scan-distribution-card),
.root :global(.scan-terminal.light .scan-chart-legend),
.root :global(.scan-terminal.light .scan-calendar-subtitle),
.root :global(.scan-terminal.light .scan-calendar-action span),
.root :global(.scan-terminal.light .scan-calendar-countdown small),
.root :global(.scan-terminal.light .scan-calendar-group-sub),
.root :global(.scan-terminal.light .scan-calendar-deb span),
.root :global(.scan-terminal.light .scan-calendar-city-time),
.root :global(.scan-terminal.light .scan-opportunity-ai small),
.root :global(.scan-terminal.light .scan-ai-log-head span),
.root :global(.scan-terminal.light .scan-ai-log-time),