feat: Align the cards on the Model Providers page infiniflow#2111

cike8899 · Aug 27, 2024 · 854e882 · 854e882
1 parent c8097e9
commit 854e882
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/web/src/pages/user-setting/setting-model/index.less b/web/src/pages/user-setting/setting-model/index.less
@@ -17,11 +17,22 @@
     border: 1px solid #eaecf0;
     background: #e3f0ff;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    :global(.ant-card-body) {
+      padding: 10px 24px;
+    }
   }
   .addedCard {
     border-radius: 18px;
     border: 1px solid #eaecf0;
     background: #e6e7eb;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
+  .modelDivider {
+    margin: 0;
+  }
+  .modelTags {
+    height: 40px;
+    overflow: hidden;
+    font-size: 8px;
+  }
 }
diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx
@@ -286,20 +286,22 @@ const UserSettingModel = () => {
             md: 3,
             lg: 4,
             xl: 4,
-            xxl: 8,
+            xxl: 10,
           }}
           dataSource={factoryList}
           renderItem={(item) => (
             <List.Item>
               <Card className={styles.toBeAddedCard}>
-                <Flex vertical gap={'large'}>
+                <Flex vertical gap={'middle'}>
                   <LlmIcon name={item.name} />
                   <Flex vertical gap={'middle'}>
-                    <b>{item.name}</b>
-                    <Text>{item.tags}</Text>
+                    <b>
+                      <Text ellipsis={{ tooltip: item.name }}>{item.name}</Text>
+                    </b>
+                    <Text className={styles.modelTags}>{item.tags}</Text>
                   </Flex>
                 </Flex>
-                <Divider></Divider>
+                <Divider className={styles.modelDivider}></Divider>
                 <Button type="link" onClick={() => handleAddModel(item.name)}>
                   {t('addTheModel')}
                 </Button>