feat(card): card adaptive

Author: dataeaseShu

frontend/src/views/ds/Card.vue

@@ -119,12 +119,11 @@ const onClickOutside = () => {
 
 <style lang="less" scoped>
 .card {
-  width: calc(33% - 14px);
+  width: 100%;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
   cursor: pointer;
-  margin: 0 0 16px 16px;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }

frontend/src/views/ds/Datasource.vue

@@ -285,20 +285,32 @@ const back = () => {
     />
 
     <div v-else class="card-content">
-      <Card
-        v-for="ele in datasourceListWithSearch"
-        :id="ele.id"
-        :key="ele.id"
-        :name="ele.name"
-        :type="ele.type"
-        :type-name="ele.type_name"
-        :num="ele.num"
-        :description="ele.description"
-        @question="handleQuestion"
-        @edit="handleEditDatasource(ele)"
-        @del="deleteHandler(ele)"
-        @data-table-detail="dataTableDetail(ele)"
-      ></Card>
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in datasourceListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :type="ele.type"
+            :type-name="ele.type_name"
+            :num="ele.num"
+            :description="ele.description"
+            @question="handleQuestion"
+            @edit="handleEditDatasource(ele)"
+            @del="deleteHandler(ele)"
+            @data-table-detail="dataTableDetail(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
     </div>
     <template v-if="!keywords && !datasourceListWithSearch.length && !searchLoading">
       <EmptyBackground
@@ -378,13 +390,13 @@ const back = () => {
 <style lang="less" scoped>
 .datasource-config {
   height: calc(100% - 16px);
-  padding: 24px 24px 24px 8px;
+  padding: 16px 0 16px 0;
   .datasource-methods {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
-    padding-left: 16px;
+    padding: 0 24px 0 24px;
     .title {
       font-weight: 500;
       font-size: 20px;
@@ -393,11 +405,17 @@ const back = () => {
   }
 
   .card-content {
-    display: flex;
-    flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
-    justify-content: space-between;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
   }
 
   .datasource-yet {

frontend/src/views/system/embedded/Card.vue

@@ -69,12 +69,11 @@ const handleEmbedded = () => {
 
 <style lang="less" scoped>
 .card {
-  width: calc(33% - 14px);
+  width: 100%;
   height: 168px;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
-  margin: 0 0 16px 16px;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }

frontend/src/views/system/embedded/index.vue

@@ -508,19 +508,30 @@ const saveHandler = () => {
       :description="$t('datasource.relevant_content_found')"
       img-type="tree"
     />
-
     <div v-else class="card-content">
-      <Card
-        v-for="ele in embeddedListWithSearch"
-        :id="ele.id"
-        :key="ele.id"
-        :name="ele.name"
-        :is-base="ele.type === 0"
-        :description="ele.description"
-        @embedded="handleEmbedded(ele)"
-        @edit="handleEditRule(ele)"
-        @del="deleteHandler(ele)"
-      ></Card>
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in embeddedListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :is-base="ele.type === 0"
+            :description="ele.description"
+            @embedded="handleEmbedded(ele)"
+            @edit="handleEditRule(ele)"
+            @del="deleteHandler(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
     </div>
     <template v-if="!keywords && !embeddedListWithSearch.length && !searchLoading">
       <EmptyBackground :description="$t('embedded.no_application')" img-type="noneWhite" />
@@ -914,7 +925,7 @@ const saveHandler = () => {
 <style lang="less" scoped>
 .embedded {
   height: 100%;
-  padding: 24px 24px 24px 8px;
+  padding: 16px 0 16px 0;
 
   .ed-empty {
     padding-top: 200px;
@@ -925,7 +936,7 @@ const saveHandler = () => {
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
-    padding-left: 24px;
+    padding: 0 24px 0 24px;
 
     .btn-select {
       height: 32px;
@@ -957,11 +968,17 @@ const saveHandler = () => {
   }
 
   .card-content {
-    display: flex;
-    flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
-    justify-content: space-between;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
   }
 }
 </style>

frontend/src/views/system/model/Card.vue

@@ -88,12 +88,11 @@ defineExpose({ showErrorMask })
 
 <style lang="less" scoped>
 .card {
-  width: calc(33% - 14px);
+  width: 100%;
   height: 160px;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
-  margin: 0 0 16px 16px;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }

frontend/src/views/system/model/Model.vue

@@ -343,21 +343,32 @@ const submit = (item: any) => {
       :description="$t('datasource.relevant_content_found')"
       img-type="tree"
     />
-
     <div v-else class="card-content">
-      <card
-        v-for="(ele, index) in modelListWithSearch"
-        :id="ele.id"
-        :ref="(el: any) => setCardRef(el, index)"
-        :key="ele.id"
-        :name="ele.name"
-        :supplier="ele.supplier"
-        :model-type="getModelTypeName(ele['model_type'])"
-        :base-model="ele['base_model']"
-        :is-default="ele['default_model']"
-        @edit="handleEditModel(ele)"
-        @del="deleteHandler"
-      ></card>
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="(ele, index) in modelListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <card
+            :id="ele.id"
+            :ref="(el: any) => setCardRef(el, index)"
+            :key="ele.id"
+            :name="ele.name"
+            :supplier="ele.supplier"
+            :model-type="getModelTypeName(ele['model_type'])"
+            :base-model="ele['base_model']"
+            :is-default="ele['default_model']"
+            @edit="handleEditModel(ele)"
+            @del="deleteHandler"
+          ></card>
+        </el-col>
+      </el-row>
     </div>
     <el-drawer
       v-model="modelConfigvVisible"
@@ -415,13 +426,13 @@ const submit = (item: any) => {
 <style lang="less" scoped>
 .model-config {
   height: calc(100% - 16px);
-  padding: 24px 24px 24px 8px;
+  padding: 16px 0 16px 0;
   .model-methods {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
-    padding-left: 24px;
+    padding: 0 24px 0 24px;
     .title {
       font-weight: 500;
       font-size: 20px;
@@ -430,11 +441,17 @@ const submit = (item: any) => {
   }
 
   .card-content {
-    display: flex;
-    flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
-    justify-content: space-between;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
   }
 }
 </style>