Sfoglia il codice sorgente

fix(rencai-dashboard): 修复首页样式与原型的差异

- 上班/下班图标使用Heroicons箭头图标
- 功能入口改为4列布局,添加flex flex-col居中
- 通知图标尺寸改为w-8 h-8
- 下班未打卡状态文字颜色改为text-gray-400
- 通知卡片移除"查看全部"和边框样式

🤖 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 settimane fa
parent
commit
91dd839188

+ 41 - 52
mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx

@@ -239,23 +239,23 @@ const Dashboard: React.FC = () => {
             </Text>
 
             {/* 上班/下班卡片 */}
-            <View className="grid grid-cols-2 gap-4 mb-4">
+            <View className="flex justify-between mb-4">
               {/* 上班打卡 */}
-              <View className="flex flex-col items-center">
-                <View className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
-                  <Text className="text-xl">→</Text>
+              <View className="flex-1 text-center">
+                <View className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
+                  <View className="i-heroicons-arrow-right-on-rectangle-20-solid text-blue-500 text-xl" />
                 </View>
                 <Text className="text-xs text-gray-600">上班打卡</Text>
                 <Text className="text-sm font-semibold text-gray-800">{clockInData.clockInTime}</Text>
               </View>
 
               {/* 下班打卡 */}
-              <View className="flex flex-col items-center">
-                <View className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-2">
-                  <Text className="text-xl">←</Text>
+              <View className="flex-1 text-center">
+                <View className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-2">
+                  <View className="i-heroicons-arrow-left-on-rectangle-20-solid text-gray-400 text-xl" />
                 </View>
                 <Text className="text-xs text-gray-600">下班打卡</Text>
-                <Text className="text-sm font-semibold text-gray-800">{clockInData.clockOutTime}</Text>
+                <Text className="text-sm font-semibold text-gray-400">{clockInData.clockOutTime}</Text>
               </View>
             </View>
 
@@ -270,54 +270,43 @@ const Dashboard: React.FC = () => {
           </View>
 
           {/* 快捷功能入口网格 */}
-          <View className="bg-white rounded-2xl p-5 mb-4 shadow-sm">
-            <Text className="text-lg font-semibold text-gray-800 block mb-4">快捷功能</Text>
-            <View className="grid grid-cols-2 gap-4">
-              <View
-                className="flex flex-col items-center justify-center p-4 bg-blue-50 rounded-xl"
-                onClick={() => handleQuickAction('personal-info')}
-              >
-                <View className="i-heroicons-user-20-solid text-blue-500 text-2xl mb-2" />
-                <Text className="text-gray-700 text-sm">个人信息</Text>
-              </View>
+          <View className="grid grid-cols-4 gap-3 mb-4">
+            <View
+              className="bg-blue-50 rounded-xl p-3 flex flex-col items-center justify-center"
+              onClick={() => handleQuickAction('personal-info')}
+            >
+              <View className="i-heroicons-user-20-solid text-blue-500 text-lg mb-1" />
+              <Text className="text-xs text-gray-700">个人信息</Text>
+            </View>
 
-              <View
-                className="flex flex-col items-center justify-center p-4 bg-green-50 rounded-xl"
-                onClick={() => handleQuickAction('attendance')}
-              >
-                <View className="i-heroicons-calendar-days-20-solid text-green-500 text-2xl mb-2" />
-                <Text className="text-gray-700 text-sm">考勤记录</Text>
-              </View>
+            <View
+              className="bg-green-50 rounded-xl p-3 flex flex-col items-center justify-center"
+              onClick={() => handleQuickAction('attendance')}
+            >
+              <View className="i-heroicons-calendar-check-20-solid text-green-500 text-lg mb-1" />
+              <Text className="text-xs text-gray-700">考勤记录</Text>
+            </View>
 
-              <View
-                className="flex flex-col items-center justify-center p-4 bg-purple-50 rounded-xl"
-                onClick={() => handleQuickAction('employment')}
-              >
-                <View className="i-heroicons-banknote-20-solid text-purple-500 text-2xl mb-2" />
-                <Text className="text-gray-700 text-sm">薪资查询</Text>
-              </View>
+            <View
+              className="bg-purple-50 rounded-xl p-3 flex flex-col items-center justify-center"
+              onClick={() => handleQuickAction('employment')}
+            >
+              <View className="i-heroicons-banknote-20-solid text-purple-500 text-lg mb-1" />
+              <Text className="text-xs text-gray-700">薪资查询</Text>
+            </View>
 
-              <View
-                className="flex flex-col items-center justify-center p-4 bg-yellow-50 rounded-xl"
-                onClick={() => handleQuickAction('company')}
-              >
-                <View className="i-heroicons-building-office-2-20-solid text-yellow-600 text-2xl mb-2" />
-                <Text className="text-gray-700 text-sm">企业信息</Text>
-              </View>
+            <View
+              className="bg-yellow-50 rounded-xl p-3 flex flex-col items-center justify-center"
+              onClick={() => handleQuickAction('company')}
+            >
+              <View className="i-heroicons-building-office-2-20-solid text-yellow-600 text-lg mb-1" />
+              <Text className="text-xs text-gray-700">企业信息</Text>
             </View>
           </View>
 
           {/* 最新通知列表 */}
-          <View className="bg-white rounded-2xl p-5 shadow-sm">
-            <View className="flex items-center justify-between mb-4">
-              <Text className="text-lg font-semibold text-gray-800">最新通知</Text>
-              <Text
-                className="text-blue-500 text-sm"
-                onClick={() => Taro.showToast({ title: '通知列表功能开发中', icon: 'none' })}
-              >
-                查看全部
-              </Text>
-            </View>
+          <View className="bg-white rounded-2xl p-4 shadow-sm">
+            <Text className="font-semibold text-gray-700 block mb-3">最新通知</Text>
 
             <View className="space-y-3">
               {notifications.map((notification) => {
@@ -338,10 +327,10 @@ const Dashboard: React.FC = () => {
                 return (
                   <View
                     key={notification.id}
-                    className="flex items-start py-3 border-b border-gray-100 last:border-0"
+                    className="flex items-start"
                   >
-                    <View className={`w-10 h-10 rounded-full ${iconBgClass} flex items-center justify-center mr-3 mt-1 flex-shrink-0`}>
-                      <View className={`${notification.iconClass} ${iconColorClass} text-lg`} />
+                    <View className={`w-8 h-8 rounded-full ${iconBgClass} flex items-center justify-center mr-3 mt-1 flex-shrink-0`}>
+                      <View className={`${notification.iconClass} ${iconColorClass} text-sm`} />
                     </View>
                     <View className="flex-1">
                       <Text className="text-gray-800 text-sm font-medium block mb-1">{notification.title}</Text>