TeamoCode App · 概念界面高保真稿（第一屏锚点）

TeamoCode FileEditViewEngineWindowHelp Mon Jun 9 9:41 AM

帮我做一个身材管理的 App

✶ 思考中已完成用时 18.4s 2 / 3

规划功能与页面结构
设计体重 / 卡路里数据模型
生成首页与记录组件并补测试

新建 App.tsx +42

写入 store.ts

运行测试 ✓ 8 passed

由 Claude Code · Opus 4.7 完成：从零搭好「身材管理 App」雏形——体重记录 + 目标进度 + 趋势图，新建 App.tsx +42 与 store.ts，8 项测试全部通过。

建议的下一步

App.tsx ×

store.ts

1+import { useState } from "react"
2+import { useStore } from "./store"
3+import { TrendChart } from "./TrendChart"
4
5+export default function App() {
6+  const { logs, addLog } = useStore()
7+  const latest = logs.at(-1)
8+  const goal = 65
9
10+  return (
11+    <main className="app">
12+      <h1>身材管理</h1>
13+      <section className="stat">
14+        <b>{latest?.weight ?? "—"}</b> kg
15+        <small>距目标 {goal}kg</small>
16+      </section>
17+      <TrendChart data={logs} />
18+      <button onClick={() => addLog()}>
19+        记录今日体重
20+      </button>
21+    </main>
22+  )
23+}