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）
|
|||
|
|
- [ ] 暗黑模式
|