# vibecoding

**Repository Path**: fiele/vibecoding

## Basic Information

- **Project Name**: vibecoding
- **Description**: 希望通过qoder自动将代码推送到远程仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-13
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 成长笔记 - 孩子身高记录 APP

一款专为家长设计的 **PWA（渐进式 Web 应用）**，用于记录孩子的身高成长轨迹，支持成长曲线可视化和标准生长曲线对比。

## 功能特性

- **多孩子管理** - 支持添加多个孩子，独立记录身高数据
- **身高记录** - 记录每次测量的身高、体重、日期和备注
- **成长曲线** - 基于 recharts 绘制身高趋势图，叠加中国 0-18 岁标准生长曲线（P3/P50/P97）
- **PWA 支持** - 可安装到手机主屏幕，像原生 APP 一样使用，支持离线访问
- **数据本地存储** - 所有数据保存在浏览器 localStorage 中，无需服务器，隐私安全

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| React | 19.x | UI 框架 |
| TypeScript | 6.x | 类型安全 |
| Vite | 8.x | 构建工具 |
| react-router-dom | 7.x | 路由管理 |
| recharts | 3.x | 图表可视化 |
| dayjs | 1.x | 日期处理 |
| vite-plugin-pwa | 1.x | PWA 支持 |
| oxlint | 1.x | 代码检查 |

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 项目结构

```
src/
├── components/          # 可复用组件
│   ├── ChildCard.tsx    # 孩子卡片
│   ├── ChildForm.tsx    # 孩子信息表单
│   ├── GrowthChart.tsx  # 成长曲线图表
│   ├── HeightRecordList.tsx  # 身高记录列表
│   ├── Layout.tsx       # 页面布局
│   └── RecordForm.tsx   # 身高记录表单
├── data/
│   └── growthStandard.ts  # 中国儿童身高标准数据
├── pages/               # 页面组件
│   ├── Home.tsx         # 首页（孩子列表）
│   ├── AddChild.tsx     # 添加孩子
│   ├── ChildDetail.tsx  # 孩子详情
│   ├── EditChild.tsx    # 编辑孩子
│   ├── AddRecord.tsx    # 添加身高记录
│   └── EditRecord.tsx   # 编辑身高记录
├── types/
│   └── index.ts         # 类型定义
├── utils/
│   ├── helpers.ts       # 工具函数
│   └── storage.ts       # localStorage 封装
├── App.tsx              # 路由配置
├── main.tsx             # 入口文件
└── index.css            # 全局样式
```

## 安装到手机

### Android

1. 确保手机和电脑在同一 Wi-Fi 网络
2. 在手机 Chrome 浏览器中访问开发服务器地址（如 `http://192.168.x.x:5173`）
3. 点击浏览器菜单 → "添加到主屏幕"

### iOS

1. 在 Safari 中访问应用地址
2. 点击底部"分享"按钮
3. 选择"添加到主屏幕"

> 生产环境部署后需要 HTTPS 才能使用 PWA 安装功能。

## License

MIT
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the Oxlint configuration

If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:

```json
{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "typescript", "oxc"],
  "options": {
    "typeAware": true
  },
  "rules": {
    "react/rules-of-hooks": "error",
    "react/only-export-components": ["warn", { "allowConstantExport": true }]
  }
}
```

See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.