87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# 日历组件需求说明
|
||
|
||
_位置：`frontend/index.html`
|
||
核心功能 ⭐ - 修改前必须阅读_
|
||
|
||
---
|
||
|
||
## 📋 功能列表
|
||
|
||
| ID | 功能 | 描述 | 代码位置 |
|
||
|----|------|------|----------|
|
||
| C-01 | 月历视图 | 显示完整月历 | `renderCalendar()` |
|
||
| C-02 | 星期标题 | 日一二三四五六 | `.calendar-day-header` |
|
||
| C-03 | 今天高亮 | 当前日期特殊样式 | `.today` 类 |
|
||
| C-04 | 日记标记 | 有日记的日期显示 📝 | `.has-diary` 类 |
|
||
| C-05 | 点击日期 | 显示当天日记详情 | `selectDate()` |
|
||
| C-06 | 日记详情 | 显示完整日记内容 | `#selected-diary` |
|
||
| C-07 | 上月切换 | 显示上个月 | `prevMonth()` |
|
||
| C-08 | 下月切换 | 显示下个月 | `nextMonth()` |
|
||
| C-09 | 非当月日期 | 灰色显示 | `.other-month` 类 |
|
||
|
||
---
|
||
|
||
## 🎨 UI 结构
|
||
|
||
```html
|
||
<div class="calendar-container">
|
||
<div class="calendar-header">
|
||
<button onclick="prevMonth()">上月</button>
|
||
<h2 id="calendar-title">2026 年 4 月</h2>
|
||
<button onclick="nextMonth()">下月</button>
|
||
</div>
|
||
<div class="calendar-grid" id="calendar-grid">
|
||
<!-- 7 个星期标题 -->
|
||
<div class="calendar-day-header">日</div>
|
||
...
|
||
<!-- 日期格子 -->
|
||
<div class="calendar-day today has-diary">15</div>
|
||
...
|
||
</div>
|
||
</div>
|
||
<div id="selected-diary">点击日期后显示详情</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 修改指南
|
||
|
||
### 可以修改的
|
||
- ✅ 样式（颜色、大小、间距）
|
||
- ✅ 按钮文字
|
||
- ✅ 日期格式
|
||
- ✅ 图标样式
|
||
|
||
### 不能删除的
|
||
- ❌ `renderCalendar()` 函数
|
||
- ❌ `selectDate()` 函数
|
||
- ❌ `prevMonth()` / `nextMonth()` 函数
|
||
- ❌ `.calendar-day` 相关样式
|
||
- ❌ `#calendar-grid` 元素
|
||
- ❌ `#selected-diary` 元素
|
||
|
||
### 添加新功能时
|
||
1. 先查看现有函数
|
||
2. 不要删除现有 DOM 元素
|
||
3. 可以在现有结构上扩展
|
||
4. 修改后运行 `test_frontend.py diary`
|
||
|
||
---
|
||
|
||
## 🧪 测试清单
|
||
|
||
修改后必须验证：
|
||
- [ ] 日历正常显示
|
||
- [ ] 今天高亮
|
||
- [ ] 有日记的日期有 📝 标记
|
||
- [ ] 点击日期显示详情
|
||
- [ ] 上月/下月切换正常
|
||
|
||
```bash
|
||
python3 test_frontend.py diary
|
||
```
|
||
|
||
---
|
||
|
||
_此文档必须与代码一起维护，修改日历组件时先阅读_
|