From 5169f081975c493ad3b9132b25a3a9c911c0b403 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 4 Dec 2023 11:42:16 +0800
Subject: [PATCH] feat:

---
 ui/src/components/card-box/index.vue          | 10 ++++--
 .../component/{Model.vue => ModelCard.vue}    |  0
 ui/src/views/template/index.vue               | 33 ++++++++++---------
 3 files changed, 25 insertions(+), 18 deletions(-)
 rename ui/src/views/template/component/{Model.vue => ModelCard.vue} (100%)

diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index a8bee22f..24566fb2 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <el-card shadow="always" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+  <el-card
+    shadow="always"
+    class="card-box"
+    @mouseenter="cardEnter()"
+    @mouseleave="cardLeave()"
+  >
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
@@ -44,7 +49,7 @@ const props = withDefaults(
      */
     showIcon?: boolean
   }>(),
-  { title: '标题', description: '', showIcon: true }
+  { title: '标题', description: '', showIcon: true, border: true }
 )
 
 const show = ref(false)
@@ -61,7 +66,6 @@ function cardLeave() {
   position: relative;
   min-height: var(--card-min-height);
   min-width: var(--card-min-width);
-  border: 1px solid #ffffff;
   border-radius: 8px;
   .description {
     display: -webkit-box;
diff --git a/ui/src/views/template/component/Model.vue b/ui/src/views/template/component/ModelCard.vue
similarity index 100%
rename from ui/src/views/template/component/Model.vue
rename to ui/src/views/template/component/ModelCard.vue
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index f1c3dd02..7e49c789 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -2,14 +2,8 @@
   <LayoutContainer header="模版管理">
     <div class="template-manage flex main-calc-height">
       <div class="template-manage__left p-8 border-r">
-        <h4 class="p-16">供应商</h4>
-
-        <common-list
-          :data="provider_list"
-          class="mt-8"
-          v-loading="loading"
-          @click="clickListHandle"
-        >
+        <h4 class="p-16" style="padding-bottom: 8px">供应商</h4>
+        <common-list :data="provider_list" v-loading="loading" @click="clickListHandle">
           <template #default="{ row, index }">
             <div class="flex" v-if="index === 0">
               <AppIcon
@@ -27,8 +21,8 @@
         </common-list>
       </div>
       <div class="template-manage__right p-24" v-loading="list_model_loading">
-        <h3>{{ active_provider?.name }}</h3>
-        <div class="flex-between mt-8">
+        <h4>{{ active_provider?.name }}</h4>
+        <div class="flex-between mt-16 mb-8">
           <el-button type="primary" @click="openCreateModel(active_provider)">创建模型</el-button>
           <el-input
             v-model="model_search_form.name"
@@ -39,10 +33,19 @@
           />
         </div>
 
-        <el-row :gutter="15" v-for="row in model_split_list">
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mt-8" v-for="model in row">
-            <ModelVue @change="list_model" :model="model" :provider_list="provider_list">
-            </ModelVue>
+        <el-row :gutter="15" v-for="(row, index) in model_split_list" :key="index">
+          <el-col
+            :xs="24"
+            :sm="24"
+            :md="12"
+            :lg="12"
+            :xl="12"
+            class="mt-8"
+            v-for="(model, i) in row"
+            :key="i"
+          >
+            <ModelCard @change="list_model" :model="model" :provider_list="provider_list">
+            </ModelCard>
           </el-col>
         </el-row>
       </div>
@@ -59,7 +62,7 @@ import ModelApi from '@/api/model'
 import type { Provider, Model } from '@/api/type/model'
 
 import AppIcon from '@/components/icons/AppIcon.vue'
-import ModelVue from '@/views/template/component/Model.vue'
+import ModelCard from '@/views/template/component/ModelCard.vue'
 import { splitArray } from '@/utils/common'
 import CreateModel from '@/views/template/component/CreateModel.vue'
 import SelectProvider from '@/views/template/component/SelectProvider.vue'