Explorar el Código

fix(ui): 为所有卡片组件添加flex flex-col以确保垂直布局

- DocumentPhotos: 添加flex flex-col到根容器
- BankCardInfo: 添加flex flex-col到根容器
- PersonalBasicInfo: 添加flex flex-col到根容器
- 确保标题和内容垂直排列
- 所有28个测试通过

🤖 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 hace 3 semanas
padre
commit
74fe169837

+ 3 - 3
mini-ui-packages/rencai-personal-info-ui/src/components/BankCardInfo.tsx

@@ -14,7 +14,7 @@ interface BankCardInfoProps {
 const BankCardInfo: React.FC<BankCardInfoProps> = ({ bankCards, loading }) => {
   if (loading) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <View className="h-5 bg-gray-200 rounded w-24 mb-4 animate-pulse" />
         <View className="space-y-3">
           {[1, 2].map((i) => (
@@ -30,7 +30,7 @@ const BankCardInfo: React.FC<BankCardInfoProps> = ({ bankCards, loading }) => {
 
   if (!bankCards || bankCards.length === 0) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <Text className="text-base font-semibold text-gray-800 mb-4">银行卡信息</Text>
         <Text className="text-gray-500 text-sm">暂无银行卡信息</Text>
       </View>
@@ -38,7 +38,7 @@ const BankCardInfo: React.FC<BankCardInfoProps> = ({ bankCards, loading }) => {
   }
 
   return (
-    <View className="bg-white rounded-lg p-4 mb-3">
+    <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
       {/* 标题和添加按钮 */}
       <View className="flex justify-between items-center mb-3">
         <Text className="text-base font-semibold text-gray-700">银行卡信息</Text>

+ 3 - 3
mini-ui-packages/rencai-personal-info-ui/src/components/DocumentPhotos.tsx

@@ -14,7 +14,7 @@ interface DocumentPhotosProps {
 const DocumentPhotos: React.FC<DocumentPhotosProps> = ({ photos, loading }) => {
   if (loading) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <View className="h-5 bg-gray-200 rounded w-24 mb-4 animate-pulse" />
         <View className="grid grid-cols-2 gap-3">
           {[1, 2, 3, 4].map((i) => (
@@ -27,7 +27,7 @@ const DocumentPhotos: React.FC<DocumentPhotosProps> = ({ photos, loading }) => {
 
   if (!photos || photos.length === 0) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <Text className="text-base font-semibold text-gray-800 mb-4">证件照片</Text>
         <Text className="text-gray-500 text-sm">暂无证件照片</Text>
       </View>
@@ -35,7 +35,7 @@ const DocumentPhotos: React.FC<DocumentPhotosProps> = ({ photos, loading }) => {
   }
 
   return (
-    <View className="bg-white rounded-lg p-4 mb-3">
+    <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
       <Text className="text-base font-semibold text-gray-800 mb-4">证件照片</Text>
 
       <View className="grid grid-cols-2 gap-3">

+ 3 - 3
mini-ui-packages/rencai-personal-info-ui/src/components/PersonalBasicInfo.tsx

@@ -40,7 +40,7 @@ interface PersonalBasicInfoProps {
 const PersonalBasicInfo: React.FC<PersonalBasicInfoProps> = ({ personalInfo, loading }) => {
   if (loading) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <View className="h-5 bg-gray-200 rounded w-24 mb-4 animate-pulse" />
         <View className="space-y-3">
           {[1, 2, 3, 4, 5].map((i) => (
@@ -53,7 +53,7 @@ const PersonalBasicInfo: React.FC<PersonalBasicInfoProps> = ({ personalInfo, loa
 
   if (!personalInfo) {
     return (
-      <View className="bg-white rounded-lg p-4 mb-3">
+      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
         <Text className="text-gray-500 text-sm">暂无个人信息</Text>
       </View>
     )
@@ -83,7 +83,7 @@ const PersonalBasicInfo: React.FC<PersonalBasicInfoProps> = ({ personalInfo, loa
   const age = calculateAge(personalInfo.birthDate)
 
   return (
-    <View className="bg-white rounded-lg p-4 mb-3">
+    <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
       <Text className="text-base font-semibold text-gray-800 mb-4">个人基本信息</Text>
 
       {/* 垂直布局的信息列表 */}