[阶段10] 前端以 Framework7 重建，采用 iOS 原生形态

按要求废弃手写外壳，改用 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>

client/src/components/charts/BandBar.css

@@ -0,0 +1,57 @@
+.bandbar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  border-radius: 999px;
+  overflow: visible;
+}
+
+.bandbar.vertical {
+  flex-direction: column-reverse;
+  height: 100%;
+  width: 6px;
+}
+
+.bandbar-seg:first-child { border-radius: 999px 0 0 999px; }
+.bandbar-seg:last-child { border-radius: 0 999px 999px 0; }
+.bandbar.vertical .bandbar-seg:first-child { border-radius: 0 0 999px 999px; }
+.bandbar.vertical .bandbar-seg:last-child { border-radius: 999px 999px 0 0; }
+
+.bandbar-seg {
+  height: 100%;
+  /* Bands are muted so the marker, not the track, is what the eye lands on. */
+  opacity: 0.42;
+}
+
+.bandbar.vertical .bandbar-seg {
+  width: 100%;
+  height: auto;
+}
+
+.tone-good { background: var(--status-good); }
+.tone-warning { background: var(--status-warning); }
+.tone-serious { background: var(--status-serious); }
+.tone-critical { background: var(--status-critical); }
+
+/* A 2px surface ring keeps the marker legible wherever it lands. */
+.bandbar-marker {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-primary);
+  border: 2px solid var(--surface-1);
+  transform: translate(-50%, -50%);
+  transition: left 0.9s var(--ease), bottom 0.9s var(--ease);
+}
+
+.bandbar.vertical .bandbar-marker {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bandbar-marker { transition: none; }
+}