# 花信 🌸

给老婆用的月经管理应用。简洁大方，内置多种可视化模型。

**线上地址：** https://47.102.213.175/huaxin/

---

## 技术栈

- **框架：** Vue 3 + Vue Router 4
- **构建：** Vite 5
- **图表：** Canvas 2D 原生绘制
- **部署：** Nginx 静态托管

## 项目结构

```
huaxin-uniapp/
├── src/
│   ├── App.vue                # 根组件 + Tab 导航栏
│   ├── main.js                # 入口 + 路由配置
│   ├── pages/
│   │   ├── Home.vue           # 首页：周期状态/预测/快捷记录/迷你趋势图
│   │   ├── Calendar.vue       # 日历：月视图 + 经期标记
│   │   ├── Record.vue         # 记录：流量/症状/情绪/备注
│   │   └── Analytics.vue      # 分析：6种可视化模型
│   ├── components/
│   │   ├── StatusCard.vue     # 状态卡片
│   │   ├── CycleBar.vue       # 周期进度条
│   │   └── QuickActions.vue   # 快捷按钮
│   └── utils/
│       ├── util.js            # 工具函数
│       └── mock.js            # 模拟数据
├── deploy.sh                  # 🚀 自动部署脚本
├── vite.config.js
├── index.html
└── package.json
```

## 6种可视化模型

| 模型 | 文件 | 说明 |
|------|------|------|
| 📈 折线图 | `drawLineChart()` | 周期长度趋势 + 28天基准线 |
| 📊 柱状图 | `drawBarChart()` | 每次经期天数对比 |
| 🎯 雷达图 | `drawRadarChart()` | 症状频率分析 |
| 🌊 热力图 | `generateHeatmap()` | 12月×31天年度热力分布 |
| 🔵 气泡图 | `drawBubbleChart()` | 情绪变化趋势 |
| 📋 箱线图 | `drawBoxChart()` | 流量分布统计 |

---

## 🌿 日常开发流程

### 1. 本地开发

```bash
# 启动开发服务器（浏览器 http://localhost:3000）
npm run dev
```

修改代码后热更新即时生效。

### 2. 提交代码

```bash
# 查看改了什么
git status
git diff

# 提交
git add -A
git commit -m "feat: 添加了xxx功能"
# 或
git commit -m "fix: 修复了xxx问题"
# 或
git commit -m "refactor: 重构了xxx"
```

### 3. 发布新版本

```bash
# 打标签（版本号自增）
git tag v1.1.0      # 新功能
git tag v1.0.1      # 小修复

# 推送到远程（如果有）
git push origin master --tags
```

### 4. 🚀 部署

**一行命令搞定：**

```bash
./deploy.sh
```

脚本会自动执行：
1. 检查 git 工作区是否干净
2. 读取当前版本号（git tag）
3. 安装依赖 + 构建 (`npm run build`)
4. 上传到服务器 `/var/www/huaxin/`
5. 重载 Nginx
6. 验证返回 HTTP 200

---

## 视觉设计

- **主色：** `#E893A7` 玫瑰粉
- **辅助色：** `#C4A0D9` 薰衣草紫
- **圆角：** 12px 卡片风格
- **字体：** -apple-system / PingFang SC

## TODO

- [ ] 接入真实数据（替换 mock.js）
- [ ] 微信服务通知提醒
- [ ] 云端同步
- [ ] 数据导出（CSV）
- [ ] 暗黑模式