7ab150537d
按要求废弃手写外壳，改用 Framework7 React（theme=ios）。参照 PeakWatch 的信息架构与卡片语言。 保留（这些是资产，不该重来）: - 数据层 services/api.ts、聚合 lib/aggregate.ts、参考区间 lib/ranges.ts - 图表组件 Chart / Ring / Sparkline / BandBar / MetricCard / MetricStrip - 经校验的配色令牌（色盲安全 + 对比度，浅深两档） 替换: - 路由与外壳交给 F7：五个 Tab 各自独立导航栈，推入详情页不影响其他 Tab - 页面转场、橡皮筋滚动、大标题折叠、半透明栏 —— 这些正是换框架的理由， 手写做不像 - 底部标签栏改用 F7 Toolbar，触控目标与安全区由框架处理 配色接入: - 新增 f7theme.css 把我们的令牌映射到 F7 的 CSS 变量，让它的导航栏/ 列表/面板与我们的图表同属一套设计，而不是两种视觉打架 - F7 的深色靠 .dark 类，我们的靠 data-theme，两者在 App 里同步切换 fix: 图标显示为原始名称（squ/hea/cale…） - iconIos/iconMd 引用的是 framework7-icons 字体，没装就只会渲染出名字 其他: - tsconfig moduleResolution 改为 bundler —— F7 用 exports 映射， node 解析方式找不到它的类型 - 登录页不套 Tab 外壳，未登录时不该出现导航 桌面与手机都要好看：内容在宽屏收进 1100px 居中列并加密卡片列数， 窄屏走底部标签栏；两档都已实机核对。 bundle 190KB -> 399KB，是换取原生手感的代价。 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
106 lines
3.1 KiB
CSS
106 lines
3.1 KiB
CSS
/*
|
|
* Framework7 theming.
|
|
*
|
|
* F7 ships its own colour system; rather than fight it, our validated tokens
|
|
* are mapped onto its CSS variables so its chrome (navbars, toolbars, lists,
|
|
* sheets) and our own charts stay one design. The series colours themselves
|
|
* are untouched — they were validated against these exact surfaces.
|
|
*/
|
|
|
|
:root {
|
|
--f7-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
|
|
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
|
|
|
|
--f7-theme-color: var(--accent);
|
|
--f7-theme-color-rgb: 42, 120, 214;
|
|
--f7-theme-color-shade: var(--accent-solid);
|
|
--f7-theme-color-tint: var(--accent);
|
|
|
|
--f7-page-bg-color: var(--surface-0);
|
|
--f7-bars-bg-color: color-mix(in srgb, var(--surface-0) 84%, transparent);
|
|
--f7-bars-border-color: var(--border);
|
|
--f7-bars-text-color: var(--text-primary);
|
|
--f7-bars-link-color: var(--accent);
|
|
|
|
--f7-text-color: var(--text-primary);
|
|
--f7-block-title-text-color: var(--text-muted);
|
|
--f7-block-strong-bg-color: var(--surface-1);
|
|
|
|
--f7-list-bg-color: var(--surface-1);
|
|
--f7-list-border-color: var(--border);
|
|
--f7-list-item-border-color: var(--border);
|
|
--f7-list-item-title-text-color: var(--text-primary);
|
|
--f7-list-item-after-text-color: var(--text-secondary);
|
|
--f7-list-item-footer-text-color: var(--text-muted);
|
|
--f7-list-chevron-icon-color: var(--text-muted);
|
|
|
|
--f7-sheet-bg-color: var(--surface-1);
|
|
--f7-sheet-border-color: var(--border);
|
|
--f7-popup-bg-color: var(--surface-0);
|
|
|
|
--f7-toolbar-bg-color: color-mix(in srgb, var(--surface-2) 86%, transparent);
|
|
--f7-toolbar-border-color: var(--border);
|
|
--f7-tabbar-link-inactive-color: var(--text-muted);
|
|
--f7-tabbar-link-active-color: var(--accent);
|
|
|
|
--f7-navbar-title-font-weight: 660;
|
|
--f7-navbar-height: 48px;
|
|
--f7-safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
/* F7 switches its own dark styles on a .dark class; ours keys off
|
|
data-theme / prefers-color-scheme, so the class is applied in tandem. */
|
|
.dark {
|
|
--f7-theme-color-rgb: 57, 135, 229;
|
|
}
|
|
|
|
/* Chrome ------------------------------------------------------------------- */
|
|
.navbar,
|
|
.toolbar {
|
|
backdrop-filter: saturate(180%) blur(18px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(18px);
|
|
}
|
|
|
|
.navbar-bg::after,
|
|
.toolbar::before,
|
|
.toolbar::after {
|
|
background-color: var(--border);
|
|
}
|
|
|
|
.page-content {
|
|
background: var(--surface-0);
|
|
}
|
|
|
|
/* Our content sits in a centred column on wide screens so a desktop browser
|
|
does not stretch phone-shaped cards across 2000px. */
|
|
.page-content > .page-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 1rem 1rem calc(2rem + var(--f7-safe-area-bottom));
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 861px) {
|
|
.page-content > .page-inner {
|
|
padding: 1.5rem 1.75rem 3rem;
|
|
}
|
|
}
|
|
|
|
/* Large title, the way iOS does it. */
|
|
.title-large-text {
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Sheets/dialogs pick up the app's radius rather than F7's default. */
|
|
.sheet-modal,
|
|
.dialog {
|
|
border-radius: 18px 18px 0 0;
|
|
}
|
|
|
|
.dialog {
|
|
border-radius: 16px;
|
|
background: var(--surface-1);
|
|
}
|