Mai
124 lines
2.9 KiB
Markdown
124 lines
2.9 KiB
Markdown
# 花信 🌸
|
||
|
||
给老婆用的月经管理应用。简洁大方，内置多种可视化模型。
|
||
|
||
**线上地址：** 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）
|
||
- [ ] 暗黑模式
|