Răsfoiți Sursa

💄 style(statistics): 为统计卡片和图表项添加弹性布局样式

- 为所有统计卡片添加 `flex flex-col` 类名以启用弹性列布局
- 为部门分布、职位状态分布和薪资分布中的图表项添加 `flex flex-col` 类名
- 为职位状态分布图例容器添加 `flex flex-col` 类名
yourname 3 săptămâni în urmă
părinte
comite
583561a675

+ 7 - 7
mini-ui-packages/yongren-statistics-ui/src/pages/Statistics/Statistics.tsx

@@ -168,22 +168,22 @@ const Statistics: React.FC<StatisticsProps> = () => {
 
         {/* 统计卡片 */}
         <View className="grid grid-cols-2 gap-3 mb-4">
-          <View className="stat-card bg-white rounded-lg p-3 shadow-sm">
+          <View className="stat-card bg-white rounded-lg p-3 shadow-sm flex flex-col">
             <Text className="text-sm text-gray-600 mb-2">在职人数</Text>
             <Text className="text-2xl font-bold text-gray-800">24</Text>
             <Text className="text-xs text-green-500 mt-1">↑ 比上月增加2人</Text>
           </View>
-          <View className="stat-card bg-white rounded-lg p-3 shadow-sm">
+          <View className="stat-card bg-white rounded-lg p-3 shadow-sm flex flex-col">
             <Text className="text-sm text-gray-600 mb-2">平均薪资</Text>
             <Text className="text-2xl font-bold text-gray-800">¥4,650</Text>
             <Text className="text-xs text-green-500 mt-1">↑ 比上月增加¥150</Text>
           </View>
-          <View className="stat-card bg-white rounded-lg p-3 shadow-sm">
+          <View className="stat-card bg-white rounded-lg p-3 shadow-sm flex flex-col">
             <Text className="text-sm text-gray-600 mb-2">在职率</Text>
             <Text className="text-2xl font-bold text-gray-800">92%</Text>
             <Text className="text-xs text-green-500 mt-1">↑ 比上月提升3%</Text>
           </View>
-          <View className="stat-card bg-white rounded-lg p-3 shadow-sm">
+          <View className="stat-card bg-white rounded-lg p-3 shadow-sm flex flex-col">
             <Text className="text-sm text-gray-600 mb-2">新增人数</Text>
             <Text className="text-2xl font-bold text-gray-800">3</Text>
             <Text className="text-xs text-red-500 mt-1">↓ 比上月减少1人</Text>
@@ -330,7 +330,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
                       const colors = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#ec4899']
                       const color = colors[index % colors.length]
                       return (
-                        <View key={item.key}>
+                        <View key={item.key} className="flex flex-col">
                           <View className="flex justify-between text-sm mb-1">
                             <Text className="text-gray-700">{item.key}</Text>
                             <Text className="text-gray-500">{item.value}人</Text>
@@ -364,7 +364,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
                   <View className="flex items-center justify-center">
                     {/* 环形图占位 */}
                     <View className="w-32 h-32 rounded-full border-8 border-blue-500 border-t-transparent transform -rotate-45" />
-                    <View className="ml-6">
+                    <View className="ml-6 flex flex-col">
                       {stats.map((item: JobStatusDistributionResponse['stats'][0], index: number) => {
                         const colors = ['#3b82f6', '#f59e0b', '#ef4444', '#10b981']
                         const color = colors[index % colors.length]
@@ -405,7 +405,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
                       const colors = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444']
                       const color = colors[index % colors.length]
                       return (
-                        <View key={item.key}>
+                        <View key={item.key} className="flex flex-col">
                           <View className="flex justify-between text-sm mb-1">
                             <Text className="text-gray-700">{item.key}</Text>
                             <Text className="text-gray-500">{item.value}人</Text>