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>
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
import Layout from './components/Layout';
|
|
import ProtectedRoute from './components/ProtectedRoute';
|
|
import Login from './pages/Login';
|
|
import Dashboard from './pages/Dashboard';
|
|
import DataSync from './pages/DataSync';
|
|
import Trends from './pages/Trends';
|
|
import Recommendations from './pages/Recommendations';
|
|
import Settings from './pages/Settings';
|
|
import Sleep from './pages/Sleep';
|
|
import Achievements from './pages/Achievements';
|
|
import Daily from './pages/Daily';
|
|
import Health from './pages/Health';
|
|
import { FEATURES } from './features';
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
|
|
<Route
|
|
path="*"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Layout>
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/sync" element={<DataSync />} />
|
|
<Route path="/health" element={<Health />} />
|
|
<Route path="/daily" element={<Daily />} />
|
|
<Route path="/trends" element={<Trends />} />
|
|
<Route path="/sleep" element={<Sleep />} />
|
|
<Route path="/achievements" element={<Achievements />} />
|
|
{FEATURES.ai && (
|
|
<Route path="/recommendations" element={<Recommendations />} />
|
|
)}
|
|
<Route path="/settings" element={<Settings />} />
|
|
</Routes>
|
|
</Layout>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
</Routes>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|