.cursorrules

# 周历项目开发规范

## 项目功能
### 核心功能
- 以周为单位显示全年时间线
- 区分过去、当前和未来的周
- 当前周显示渐变过渡效果
- 悬停显示周数和日期范围

### 特殊处理
- 跨年周只显示当年部分日期
- 第一行提示框向下显示，避免超出视口
- 自适应布局，确保在不同屏幕尺寸下正常显示

## 代码结构
### 组件
- `src/app/components/WeeklyCalendar.tsx`
  - 主要组件，负责周历的渲染和交互
  - 包含日期计算、状态管理和样式处理
  - 使用 CSS Grid 实现自适应布局

### 页面
- `src/app/page.tsx`
  - 应用入口页面
  - 集成 WeeklyCalendar 组件
  - 提供页面级容器和样式

### 类型定义
- `WeeklyCalendarProps`
  - year?: number - 可选的年份参数，默认使用当前年份

## 日期处理
- 使用 date-fns 库处理所有日期相关操作
- 使用 zhCN locale 确保中文日期格式
- 使用 startOfDay 处理日期比较，忽略时间部分
- 年初和年末的周要特殊处理，只显示当年部分

## 样式规范
### 颜色定义
- 已过去的周：bg-blue-200 (hover: bg-blue-300)
- 未来的周：bg-gray-100 (hover: bg-gray-200)
- 当前周渐变：
  - 蓝色部分：#bfdbfe
  - 过渡色：rgb(246 246 246)
  - 灰色部分：#f3f4f6

### 渐变效果
- 使用 linear-gradient 实现
- 渐变位置：
  ```css
  #bfdbfe 0%,
  #bfdbfe 10%,
  rgb(246 246 246) 50%,
  #f3f4f6 90%,
  #f3f4f6 100%
  ```

### 布局
- 使用 grid 布局，每行 4 个方块
- 方块使用 rounded-lg 圆角
- 最小高度：min-h-[40px]
- 最大宽度：max-w-[800px]
- 间距：gap-2

## 交互规范
### 悬浮效果
- 方块 hover 时显示提示框
- 提示框包含周数和日期范围
- 第一行提示框显示在下方，其他行显示在上方
- 提示框使用深色背景（bg-gray-800）

### 状态判断
- 使用 isWithinInterval 判断当前周
- 使用 isBefore 判断过去的周
- 计算天数使用 differenceInDays

## 性能考虑
- 使用 useEffect 处理周数据初始化
- 使用 startOfDay 缓存今天的日期
- 避免在渲染循环中重复创建日期对象

## 开发建议
### 新功能开发
- 保持组件的单一职责
- 确保日期计算的准确性
- 维护现有的视觉风格

### 代码维护
- 遵循 TypeScript 类型定义
- 保持渐变效果的一致性
- 注意性能优化，避免不必要的重渲染