# app — React 前端

> 人生目标 App 的前端代码，目标是 PWA（Phase 2）后续打包为 Capacitor 原生 App（Phase 3）。

## 当前状态

📋 **待初始化** — 代码目前以 Claude Artifact 形式存在（`life-goals.jsx`），Phase 2 时迁移至此目录并引入 Vite 构建工具。

## 技术栈（规划）

| 项目 | 技术 |
|------|------|
| 框架 | React + Vite |
| 样式 | Inline CSS + CSS Variables |
| 存储 | localStorage（PWA）/ SQLite（Capacitor） |
| AI 接口 | Anthropic API（Phase 4 前直连，之后走 server 代理） |
| 打包 | Capacitor（Phase 3） |

## 启动方式（初始化后）

```bash
cd app
npm install
npm run dev
```

## 目录结构（初始化后规划）

```
app/
├── public/
│   ├── manifest.json     — PWA 配置
│   └── icons/
├── src/
│   ├── components/       — GoalNode / ScoreRing / CheckIn 等
│   ├── pages/
│   ├── services/         — callAI() / storage 封装
│   └── main.jsx
└── package.json
```

> 详见 [架构设计文档](../docs/03-架构设计/技术选型与数据结构.md)