feat(attendance): 使用小程序Picker组件实现月份选择

- 将月份选择器改为使用Taro的Picker组件（mode="multiSelector"）
- 支持同时选择年份和月份（最近3年）
- 保留左右箭头按钮用于快捷切换上/下个月
- 添加onMonthChange回调处理Picker选择变化
- 更新AttendancePage组件集成Picker功能

用户现在可以通过点击月份文字打开Picker选择器，
或者使用左右箭头快捷切换月份。

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

mini-ui-packages/rencai-attendance-ui/src/components/MonthSelector.tsx

@@ -1,29 +1,77 @@
 /**
  * 月份选择器组件
- * 支持切换上个月/下个月
+ * 使用小程序 Picker 组件选择年月
  */
 import React from 'react'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Picker } from '@tarojs/components'
 import { MonthSelectorProps } from '../types/attendance'
 
 export const MonthSelector: React.FC<MonthSelectorProps> = ({
   currentMonth,
   onPreviousMonth,
-  onNextMonth
+  onNextMonth,
+  onMonthChange
 }) => {
+  // 生成最近3年的月份选项
+  const currentYear = new Date().getFullYear()
+  const yearOptions = Array.from({ length: 3 }, (_, i) => currentYear - 1 + i)
+  const monthOptions = Array.from({ length: 12 }, (_, i) => i + 1)
+
+  const yearRange = [
+    yearOptions.map((y) => `${y}年`),
+    monthOptions.map((m) => `${m}月`)
+  ]
+
+  // 解析当前年月
+  const parseCurrentMonth = () => {
+    const match = currentMonth.match(/(\d+)年(\d+)月/)
+    if (match) {
+      return { year: parseInt(match[1]), month: parseInt(match[2]) }
+    }
+    return { year: currentYear, month: new Date().getMonth() + 1 }
+  }
+
+  const { year: selectedYear, month: selectedMonth } = parseCurrentMonth()
+
+  // 计算默认选中的索引
+  const defaultValue = [
+    yearOptions.indexOf(selectedYear),
+    selectedMonth - 1
+  ]
+
+  // 处理 Picker 选择变化
+  const handlePickerChange = (e: any) => {
+    if (!onMonthChange) return
+
+    const [yearIndex, monthIndex] = e.detail.value
+    const newYear = yearOptions[yearIndex]
+    const newMonth = monthOptions[monthIndex]
+    onMonthChange(newYear, newMonth)
+  }
+
   return (
     <View className="flex justify-between items-center mb-4 px-4">
       <Text className="font-semibold text-gray-700 text-base">考勤记录</Text>
-      <View className="flex items-center bg-gray-100 rounded-lg px-3 py-1">
+      <View className="flex items-center bg-gray-100 rounded-lg">
         {/* 左箭头图标 */}
         <View
-          className="i-heroicons-chevron-left-20-solid w-5 h-5 text-gray-500 mr-2"
+          className="i-heroicons-chevron-left-20-solid w-5 h-5 text-gray-500 mx-2"
           onClick={onPreviousMonth}
         />
-        <Text className="text-sm text-gray-700 mr-2">{currentMonth}</Text>
+        {/* 月份选择器 */}
+        <Picker
+          mode="multiSelector"
+          range={yearRange}
+          value={defaultValue}
+          onChange={handlePickerChange}
+        >
+          <View className="px-2 py-1">
+            <Text className="text-sm text-gray-700">{currentMonth}</Text>
+          </View>
+        </Picker>
         {/* 右箭头图标 */}
         <View
-          className="i-heroicons-chevron-right-20-solid w-5 h-5 text-gray-500"
+          className="i-heroicons-chevron-right-20-solid w-5 h-5 text-gray-500 mx-2"
           onClick={onNextMonth}
         />
       </View>

mini-ui-packages/rencai-attendance-ui/src/pages/AttendancePage/AttendancePage.tsx

@@ -66,6 +66,13 @@ const AttendancePage: React.FC = () => {
     loadAttendanceData(nextYear, nextMonth)
   }
 
+  // 处理 Picker 选择变化
+  const handleMonthChange = (year: number, month: number) => {
+    setCurrentYear(year)
+    setCurrentMonth(month)
+    loadAttendanceData(year, month)
+  }
+
   // 初始化加载当前月份数据
   React.useEffect(() => {
     loadAttendanceData(currentYear, currentMonth)
@@ -95,6 +102,7 @@ const AttendancePage: React.FC = () => {
             currentMonth={currentMonthDisplay}
             onPreviousMonth={handlePreviousMonth}
             onNextMonth={handleNextMonth}
+            onMonthChange={handleMonthChange}
           />
 
           {/* 考勤统计卡片 */}

mini-ui-packages/rencai-attendance-ui/src/types/attendance.ts

@@ -42,6 +42,7 @@ export interface MonthSelectorProps {
   currentMonth: string      // 当前年月显示（如：2023年11月）
   onPreviousMonth: () => void
   onNextMonth: () => void
+  onMonthChange?: (year: number, month: number) => void  // Picker选择变化回调
 }
 
 /**