docs: 创建分模块需求文档（每个模块独立说明）

docs/CALENDAR.md

@@ -0,0 +1,86 @@
+# 日历组件需求说明
+
+_位置：`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
+```
+
+---
+
+_此文档必须与代码一起维护，修改日历组件时先阅读_