Browse Source

fix(attendance): 修复考勤记录组件Taro垂直布局问题

修复以下组件的View容器缺少flex flex-col导致的布局问题:
- AttendanceStats: 考勤统计卡片根容器
- AttendanceCalendar: 考勤日历根容器
- AttendanceDetails: 打卡明细列表根容器
- AttendanceRecordItem: 日期和时间信息容器

根据Mini UI包开发规范,Taro的View组件默认横向布局,
需要显式添加flex flex-col实现垂直堆叠布局。

🤖 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>
yourname 3 weeks ago
parent
commit
f179b632de

+ 1 - 1
mini-ui-packages/rencai-attendance-ui/src/components/AttendanceCalendar.tsx

@@ -63,7 +63,7 @@ export const AttendanceCalendar: React.FC<AttendanceCalendarProps> = ({
   const dates = getCalendarDates(year, month)
 
   return (
-    <View className="bg-white rounded-lg p-4 mb-4 mx-4">
+    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
       <Text className="font-semibold text-gray-700 mb-3 text-base">考勤日历</Text>
 
       {/* 星期标题 */}

+ 1 - 1
mini-ui-packages/rencai-attendance-ui/src/components/AttendanceDetails.tsx

@@ -9,7 +9,7 @@ import { AttendanceRecordItem } from './AttendanceRecordItem'
 
 export const AttendanceDetails: React.FC<AttendanceDetailsProps> = ({ records }) => {
   return (
-    <View className="bg-white rounded-lg p-4 mb-4 mx-4">
+    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
       <Text className="font-semibold text-gray-700 mb-3 text-base">打卡明细</Text>
 
       {/* 列表容器 - 垂直布局 */}

+ 1 - 1
mini-ui-packages/rencai-attendance-ui/src/components/AttendanceRecordItem.tsx

@@ -52,7 +52,7 @@ export const AttendanceRecordItem: React.FC<AttendanceRecordItemProps> = ({ reco
   return (
     <View className="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
       {/* 左侧:日期和时间 */}
-      <View>
+      <View className="flex flex-col">
         <Text className="text-sm font-medium text-gray-800">{dateDisplay} {record.weekday}</Text>
         <View className="flex text-xs text-gray-500 mt-1">
           <Text className="mr-3">上班: {record.checkInTime}</Text>

+ 1 - 1
mini-ui-packages/rencai-attendance-ui/src/components/AttendanceStats.tsx

@@ -8,7 +8,7 @@ import { AttendanceStatsProps } from '../types/attendance'
 
 export const AttendanceStats: React.FC<AttendanceStatsProps> = ({ stats }) => {
   return (
-    <View className="bg-white rounded-lg p-4 mb-4 mx-4">
+    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
       {/* 两列统计布局 */}
       <View className="flex justify-between items-center mb-4">
         <View>