docs: 添加详细需求说明和前端检查清单（防止丢失功能的强制机制）
This commit is contained in:
maoshen
111
FRONTEND_CHECKLIST.md
Normal file
111
FRONTEND_CHECKLIST.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# 前端修改检查清单
|
||||
|
||||
_⚠️ **每次修改前端代码前必须阅读，修改后必须逐项验证**_
|
||||
|
||||
---
|
||||
|
||||
## 📋 修改前准备
|
||||
|
||||
- [ ] 已查看 `FEATURES.md` 了解所有已实现功能
|
||||
- [ ] 已查看当前 `index.html` 的完整代码
|
||||
- [ ] 已创建 git 备份分支：`git branch backup-$(date +%Y%m%d-%H%M)`
|
||||
- [ ] 已在功能分支开发：`git checkout -b feature/xxx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 修改后验证清单
|
||||
|
||||
### 核心功能（P0 - 必须全部通过）
|
||||
|
||||
#### 1. 日历组件 ⭐⭐⭐ **最重要**
|
||||
- [ ] 日历正常显示当前月份
|
||||
- [ ] 星期标题显示（日一二三四五六）
|
||||
- [ ] 今天的日期高亮显示
|
||||
- [ ] 有日记的日期显示 📝 图标
|
||||
- [ ] **点击日期能显示当天日记**（最关键！）
|
||||
- [ ] 无日记的日期显示友好提示
|
||||
- [ ] 上月按钮正常工作
|
||||
- [ ] 下月按钮正常工作
|
||||
- [ ] 非当月日期灰色显示
|
||||
|
||||
**测试方法**：
|
||||
```bash
|
||||
# 1. 打开页面 http://cssc.datalibstar.com:8001/
|
||||
# 2. 检查日历是否正常显示
|
||||
# 3. 点击今天的日期，查看日记详情
|
||||
# 4. 点击有日记的其他日期
|
||||
# 5. 点击没有日记的日期
|
||||
# 6. 切换上月/下月
|
||||
```
|
||||
|
||||
#### 2. 统计面板
|
||||
- [ ] 总日记数显示正确
|
||||
- [ ] 总任务数显示正确
|
||||
- [ ] 进行中任务数显示正确
|
||||
- [ ] 已完成任务数显示正确
|
||||
- [ ] 完成率显示正确
|
||||
- [ ] 经验总结数显示正确
|
||||
|
||||
**测试方法**：
|
||||
```bash
|
||||
curl http://cssc.datalibstar.com:8001/api/entries/stats/
|
||||
curl http://cssc.datalibstar.com:8001/api/experiences/recent/
|
||||
```
|
||||
|
||||
#### 3. Tab 切换
|
||||
- [ ] 工作任务 Tab 正常切换
|
||||
- [ ] 日记 Tab 正常切换
|
||||
- [ ] 经验总结 Tab 正常切换
|
||||
- [ ] 切换后内容正确显示
|
||||
|
||||
**测试方法**：
|
||||
```bash
|
||||
# 1. 打开页面
|
||||
# 2. 依次点击每个 Tab
|
||||
# 3. 检查内容是否正确切换
|
||||
```
|
||||
|
||||
#### 4. 日记列表
|
||||
- [ ] 日记列表正常显示
|
||||
- [ ] 每条日记显示日期
|
||||
- [ ] 日记内容完整显示（完成任务、学到的东西等）
|
||||
|
||||
#### 5. 经验总结列表
|
||||
- [ ] 经验总结正常显示
|
||||
- [ ] 分类标签显示正确
|
||||
- [ ] 问题/解决方案格式正确
|
||||
- [ ] 经验教训高亮显示
|
||||
|
||||
---
|
||||
|
||||
## 🚨 禁止操作
|
||||
|
||||
- [ ] ❌ 直接覆盖 `index.html` 而不查看原有内容
|
||||
- [ ] ❌ 删除任何 `<script>` 中的函数而不确认是否使用
|
||||
- [ ] ❌ 修改 API 调用 URL 而不检查后端是否存在
|
||||
- [ ] ❌ 删除 CSS 样式而不确认是否影响布局
|
||||
- [ ] ❌ 修改后不验证就部署
|
||||
|
||||
---
|
||||
|
||||
## 📝 验证记录
|
||||
|
||||
**修改日期**: ___________
|
||||
**修改人**: ___________
|
||||
**修改内容**: ___________
|
||||
|
||||
**验证结果**:
|
||||
- [ ] 日历组件验证通过
|
||||
- [ ] 统计面板验证通过
|
||||
- [ ] Tab 切换验证通过
|
||||
- [ ] 日记列表验证通过
|
||||
- [ ] 经验总结验证通过
|
||||
|
||||
**发现问题**: ___________
|
||||
**修复情况**: ___________
|
||||
|
||||
**验证人签字**: ___________
|
||||
|
||||
---
|
||||
|
||||
_此清单必须打印出来，每次修改前端时逐项勾选并签字确认_
|
||||
@@ -43,15 +43,32 @@ _文档状态：**进行中**
|
||||
|
||||
### 2.1 日记管理 ✅
|
||||
|
||||
| ID | 需求 | 优先级 | 状态 |
|
||||
|----|------|--------|------|
|
||||
| F-001 | 创建日记条目 | P0 | ✅ 已实现 |
|
||||
| F-002 | 编辑日记内容 | P0 | ✅ 已实现 |
|
||||
| F-003 | 删除日记 | P1 | ⏳ 待实现 |
|
||||
| F-004 | 查看今日日记 | P0 | ✅ 已实现 |
|
||||
| F-005 | 查看历史日记 | P0 | ✅ 已实现 |
|
||||
| F-006 | 日历视图展示 | P0 | ✅ 已实现 |
|
||||
| F-007 | 日记内容包含：完成任务、学到的东西、问题、反思、进步、计划 | P0 | ✅ 已实现 |
|
||||
| ID | 需求 | 优先级 | 状态 | 验收标准 |
|
||||
|----|------|--------|------|----------|
|
||||
| F-001 | 创建日记条目 | P0 | ✅ 已实现 | 能创建包含日期和内容的日记 |
|
||||
| F-002 | 编辑日记内容 | P0 | ✅ 已实现 | 能修改已有日记 |
|
||||
| F-003 | 删除日记 | P1 | ⏳ 待实现 | - |
|
||||
| F-004 | 查看今日日记 | P0 | ✅ 已实现 | API `/api/entries/today/` 返回今天日记 |
|
||||
| F-005 | 查看历史日记 | P0 | ✅ 已实现 | API `/api/entries/recent/` 返回最近 7 天 |
|
||||
| F-006 | **日历视图展示** | P0 | ✅ 已实现 | **详见 2.1.1 日历组件详细需求** |
|
||||
| F-007 | 日记内容字段 | P0 | ✅ 已实现 | 包含完成任务、学到的东西、问题、反思、进步、计划 |
|
||||
|
||||
#### 2.1.1 日历组件详细需求 ⭐ **核心功能，必须测试**
|
||||
|
||||
| ID | 功能点 | 详细描述 | 验收方法 |
|
||||
|----|--------|----------|----------|
|
||||
| F-006-01 | 月历视图 | 显示完整的月历，包含上月/下月的部分日期 | 页面加载后显示当前月份的日历 |
|
||||
| F-006-02 | 星期标题 | 日历顶部显示 日、一、二、三、四、五、六 | 第一行显示 7 个星期标题 |
|
||||
| F-006-03 | 日期高亮 - 今天 | 今天的日期用特殊样式高亮（背景色） | 今天的格子有 `.today` 类 |
|
||||
| F-006-04 | 日期标记 - 有日记 | 有日记的日期显示 📝 图标 | 调用 API 获取所有日记日期，有日记的格子有 `.has-diary` 类 |
|
||||
| F-006-05 | 点击日期 | 点击任意日期，下方显示当天的日记详情 | 点击后触发 `selectDate()` 函数，显示日记内容 |
|
||||
| F-006-06 | 日记详情展示 | 显示选中日期的所有字段（完成任务、学到的东西等） | 详情区域显示完整的日记内容 |
|
||||
| F-006-07 | 无日记提示 | 点击没有日记的日期，显示"这一天还没有日记" | 显示友好的空状态提示 |
|
||||
| F-006-08 | 上月切换 | 点击"上月"按钮，显示上个月的日历 | 调用 `prevMonth()`，日历刷新 |
|
||||
| F-006-09 | 下月切换 | 点击"下月"按钮，显示下个月的日历 | 调用 `nextMonth()`，日历刷新 |
|
||||
| F-006-10 | 非当月日期 | 上月/下月的日期用灰色显示，不可点击 | 有 `.other-month` 类，样式灰色 |
|
||||
|
||||
**⚠️ 此组件为日记系统的核心功能，任何前端修改后必须手动验证以上 10 个功能点！**
|
||||
|
||||
### 2.2 经验总结 ✅
|
||||
|
||||
|
||||
104
test_frontend.py
Normal file
104
test_frontend.py
Normal file
@@ -0,0 +1,104 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
日记系统前端功能自动化测试
|
||||
每次修改前端后必须运行此测试
|
||||
"""
|
||||
import requests
|
||||
import sys
|
||||
|
||||
BASE_URL = 'http://127.0.0.1:8001'
|
||||
API_BASE = f'{BASE_URL}/api'
|
||||
|
||||
def test_api_endpoints():
|
||||
"""测试 API 接口"""
|
||||
print("📡 测试 API 接口...")
|
||||
|
||||
tests = [
|
||||
('日记统计', f'{API_BASE}/entries/stats/', 200),
|
||||
('日记列表', f'{API_BASE}/entries/', 200),
|
||||
('今日日记', f'{API_BASE}/entries/today/', 200),
|
||||
('最近日记', f'{API_BASE}/entries/recent/', 200),
|
||||
('经验总结', f'{API_BASE}/experiences/recent/', 200),
|
||||
]
|
||||
|
||||
passed = 0
|
||||
failed = 0
|
||||
|
||||
for name, url, expected_status in tests:
|
||||
try:
|
||||
resp = requests.get(url, timeout=5)
|
||||
if resp.status_code == expected_status:
|
||||
print(f" ✅ {name}: {resp.status_code}")
|
||||
passed += 1
|
||||
else:
|
||||
print(f" ❌ {name}: 期望 {expected_status}, 实际 {resp.status_code}")
|
||||
failed += 1
|
||||
except Exception as e:
|
||||
print(f" ❌ {name}: {str(e)}")
|
||||
failed += 1
|
||||
|
||||
return passed, failed
|
||||
|
||||
def test_frontend_page():
|
||||
"""测试前端页面"""
|
||||
print("\n🌐 测试前端页面...")
|
||||
|
||||
try:
|
||||
resp = requests.get(BASE_URL, timeout=5)
|
||||
if resp.status_code == 200:
|
||||
content = resp.text
|
||||
|
||||
# 检查关键功能是否存在
|
||||
checks = [
|
||||
('日历组件', 'calendar'),
|
||||
('统计面板', 'stat-'),
|
||||
('Tab 切换', 'tab-'),
|
||||
('日记列表', 'diary'),
|
||||
('经验总结', 'experience'),
|
||||
('选择日期函数', 'selectDate'),
|
||||
('渲染日历函数', 'renderCalendar'),
|
||||
]
|
||||
|
||||
passed = 0
|
||||
failed = 0
|
||||
|
||||
for name, keyword in checks:
|
||||
if keyword in content:
|
||||
print(f" ✅ {name}: 存在")
|
||||
passed += 1
|
||||
else:
|
||||
print(f" ❌ {name}: 缺失 (关键词：{keyword})")
|
||||
failed += 1
|
||||
|
||||
return passed, failed
|
||||
else:
|
||||
print(f" ❌ 页面访问失败：{resp.status_code}")
|
||||
return 0, 1
|
||||
except Exception as e:
|
||||
print(f" ❌ 页面访问错误：{str(e)}")
|
||||
return 0, 1
|
||||
|
||||
def main():
|
||||
print("=" * 60)
|
||||
print("🧪 日记系统前端功能测试")
|
||||
print("=" * 60)
|
||||
|
||||
api_passed, api_failed = test_api_endpoints()
|
||||
page_passed, page_failed = test_frontend_page()
|
||||
|
||||
total_passed = api_passed + page_passed
|
||||
total_failed = api_failed + page_failed
|
||||
|
||||
print("\n" + "=" * 60)
|
||||
print(f"📊 测试结果：{total_passed} 通过，{total_failed} 失败")
|
||||
print("=" * 60)
|
||||
|
||||
if total_failed > 0:
|
||||
print("\n⚠️ 有功能测试失败，请检查后再部署！")
|
||||
sys.exit(1)
|
||||
else:
|
||||
print("\n✅ 所有测试通过，可以部署！")
|
||||
sys.exit(0)
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
Reference in New Issue
Block a user