# IE-plus 项目

## 项目简介
这是一个基于 uni-app 的学习应用项目，使用 Vite 作为构建工具。

## 最近修改

### 日历组件全面升级 - 新增多项功能
**修改时间**: 2024年
**修改内容**: 为 uni-calendar 组件新增了多项实用功能，提升组件的灵活性和可定制性

#### 新增功能

##### 1. 周日位置控制
- **参数**: `sundayFirst` (Boolean, 默认: false)
- **功能**: 控制周日显示在第一列还是最后一列
- **用法**: 
  ```vue
  <uni-calendar :sunday-first="true" />  <!-- 周日在前 -->
  <uni-calendar :sunday-first="false" /> <!-- 周日在后 -->
  ```

##### 2. 显示模式控制
- **参数**: `displayMode` (String, 默认: 'month')
- **可选值**: 'month' | 'week'
- **功能**: 控制按月显示还是按周显示
- **特点**: 按周显示时，其他周的日期会显示但置灰，只有指定周正常显示
- **方法**: 
  - `preWeek()`: 切换到上一周
  - `nextWeek()`: 切换到下一周
  - `setWeekNumber(weekNumber)`: 设置指定周数
- **事件**: `change-week`: 周数变化时触发
- **用法**:
  ```vue
  <uni-calendar 
    ref="calendar"
    display-mode="week" 
    :week-number="currentWeek"
    @change-week="onWeekChange" />
  
  <!-- 在父组件中调用切换方法 -->
  <button @click="$refs.calendar.preWeek()">上一周</button>
  <button @click="$refs.calendar.nextWeek()">下一周</button>
  <button @click="$refs.calendar.setWeekNumber(3)">第3周</button>
  ```

##### 3. 今天高亮控制
- **参数**: `highlightToday` (Boolean, 默认: true)
- **功能**: 控制是否高亮今天，影响"回到今日"按钮显示和今天日期样式
- **用法**:
  ```vue
  <uni-calendar :highlight-today="false" />  <!-- 不高亮今天 -->
  ```

##### 4. 工具栏显示控制
- **参数**: `showToolbar` (Boolean, 默认: true)
- **功能**: 控制是否显示顶部的月份切换工具栏
- **用法**:
  ```vue
  <uni-calendar :show-toolbar="false" />  <!-- 隐藏工具栏 -->
  ```

##### 5. 自定义日期样式插槽
- **插槽**: `calendar-item`
- **功能**: 允许外部自定义每个日期项的显示样式
- **特点**: 可以完全自定义整个日期项，包含更多参数
- **用法**:
  ```vue
  <!-- 自定义整个日期项 -->
  <uni-calendar>
    <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
      <view class="enhanced-calendar-item" :class="{ 'not-current-month': !weeks.isCurrentMonth }">
        <text class="date-number">{{ weeks.date }}</text>
        <view class="date-indicators">
          <view v-if="weeks.extraInfo" class="indicator-dot"></view>
          <view v-if="weeks.isDay" class="today-badge">今</view>
          <view v-if="!weeks.isCurrentMonth" class="month-badge">非本月</view>
        </view>
      </view>
  </template>
</uni-calendar>
```

#### 数据属性说明
每个日期项（weeks）包含以下属性：
- `fullDate`: 完整日期字符串 (如: "2024-01-15")
- `year`: 年份
- `month`: 月份
- `date`: 日期数字
- `isDay`: 是否为今天
- `disable`: 是否禁用
- `isCurrentMonth`: **是否为当前月份** (true: 本月, false: 上月/下月)
- `isWeekModeDisabled`: 按周模式下的置灰标识
- `beforeMultiple`: 多选开始标识
- `afterMultiple`: 多选结束标识
- `multiple`: 多选中间标识
- `lunar`: 农历信息
- `extraInfo`: 额外信息（打点数据）

#### 修改文件
1. `src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue`
   - 新增5个props参数
   - 添加计算属性 `filteredWeeks` 处理按周显示
   - 修改模板支持条件渲染和插槽
   - 优化星期标题显示逻辑

2. `src/uni_modules/uni-calendar/components/uni-calendar/util.js`
   - 新增 `sundayFirst` 参数支持
   - 修改 `_getWeek` 方法支持周日位置控制
   - 优化日期计算逻辑

3. `src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue`
   - 新增 `highlightToday` 参数支持
   - 添加插槽支持自定义日期样式
   - 优化今天高亮显示逻辑

#### 完整参数列表
```vue
<uni-calendar
  :sunday-first="false"           <!-- 周日位置控制 -->
  display-mode="month"            <!-- 显示模式 -->
  :week-number="1"                <!-- 按周显示时的周数 -->
  :highlight-today="true"         <!-- 是否高亮今天 -->
  :show-toolbar="true"            <!-- 是否显示工具栏 -->
  :insert="true"                  <!-- 插入模式 -->
  :lunar="false"                  <!-- 显示农历 -->
  :range="false"                  <!-- 范围选择 -->
  :selected="[]"                  <!-- 打点信息 -->
  :start-date=""                  <!-- 开始日期 -->
  :end-date=""                    <!-- 结束日期 -->
  :show-month="true"              <!-- 显示月份背景 -->
  :clear-date="true"              <!-- 清空日期 -->
  :readonly="false"               <!-- 只读模式 -->
>
  <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
    <!-- 自定义整个日期项 -->
  </template>
</uni-calendar>
```

#### 日期范围API
Calendar 工具类提供两个实用的日期范围获取方法：

##### 1. 获取本月日期范围
```javascript
import Calendar from './util.js'

const calendar = new Calendar()
const monthRange = calendar.getCurrentMonthRange('2024-10-15')
// 返回: {startDate: '2024-10-01', endDate: '2024-10-31', totalDays: 31, totalWeeks: 5}
```

##### 2. 获取指定周日期范围
```javascript
// 获取当前日期所在的周
const currentWeek = calendar.getCurrentWeekRange('2024-10-15')
// 返回: {startDate: '2024-10-13', endDate: '2024-10-19', totalDays: 7, currentWeek: 3, totalWeeks: 5}

// 获取指定周数
const week2 = calendar.getCurrentWeekRange('2024-10-15', 2)
// 返回: {startDate: '2024-10-06', endDate: '2024-10-12', totalDays: 7, currentWeek: 2, totalWeeks: 5}
```

**参数说明：**
- `date`: 日期字符串，可选，默认为当前日期
- `weekNumber`: 周数，从1开始，可选，不传时自动计算指定日期所在的周

**返回值说明：**
- `startDate`: 开始日期
- `endDate`: 结束日期  
- `totalDays`: 总天数
- `totalWeeks`: 总周数（实际包含本月日期的周数）
- `currentWeek`: 当前周数（仅周范围方法）

#### 技术细节
- 使用 Vue 3 的 Composition API 和插槽系统
- 通过计算属性实现按周显示的数据过滤
- 使用条件渲染控制工具栏和今天高亮显示
- 支持完全自定义的日期样式渲染
- 提供完整的周切换API，支持跨月份切换
- 智能处理边界情况（第一周/最后一周的跨月切换）
- 提供实用的日期范围获取API，支持外部调用

#### 影响范围
- 所有使用 uni-calendar 组件的页面都可以使用新功能
- 向后兼容，现有代码无需修改
- 新功能为可选参数，默认行为保持不变

## 项目结构
```
src/
├── uni_modules/          # uni-app 模块
│   └── uni-calendar/     # 日历组件
├── pagesStudy/           # 学习相关页面
├── components/           # 公共组件
└── ...
```

## 开发说明
- 使用 Vue 3 + TypeScript
- 构建工具：Vite
- UI框架：uni-app
- 样式：SCSS + Tailwind CSS

## 注意事项
- 修改日历组件后，请确保所有使用该组件的页面都能正常显示
- 如果需要在其他项目中复用此修改，请同时复制两个文件的修改内容