style: 优化样式

Author: wxg0103

ui/src/components/card-box/index.vue

@@ -2,29 +2,26 @@
   <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
-        <div class="title flex align-center">
+        <div class="title flex" :class="slots.subTitle ? '' : 'align-center'">
           <slot name="icon">
             <AppAvatar v-if="showIcon" class="mr-12 avatar-blue" shape="square" :size="32">
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
             </AppAvatar>
           </slot>
-          <div>
+          <div style="width: 90%">
             <auto-tooltip :content="title" style="width: 65%; height: 22px">
               {{ title }}
             </auto-tooltip>
-            <span class="lighter mr-8">
-              <auto-tooltip
-                :content="username"
-                style="display: inline-block; width: 100%; font-size: 12px; height: 20px"
-              >
-                创建人: {{ username }}
-              </auto-tooltip></span
-            >
+            <slot name="subTitle"> </slot>
           </div>
         </div>
       </slot>
     </div>
-    <div class="description break-all mt-12" v-if="$slots.description || description">
+    <div
+      class="description break-all"
+      :class="slots.subTitle ? 'mt-24' : 'mt-12'"
+      v-if="$slots.description || description"
+    >
       <slot name="description">
         <div class="content">
           {{ description }}
@@ -59,7 +56,6 @@ const props = withDefaults(
      * 是否展示icon
      */
     showIcon?: boolean
-    username?: string
   }>(),
   { title: '标题', description: '', showIcon: true, border: true }
 )

ui/src/views/application/index.vue

@@ -49,7 +49,6 @@
           >
             <CardBox
               :title="item.name"
-              :username="item.username"
               :description="item.desc"
               class="application-card cursor"
               @click="router.push({ path: `/application/${item.id}/${item.type}/overview` })"
@@ -73,6 +72,13 @@
                   class="mr-8"
                 />
               </template>
+              <template #subTitle>
+                <el-text class="lighter mr-8" size="small">
+                  <auto-tooltip :content="item.username">
+                    创建人: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
               <div class="status-tag">
                 <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px"
                   >高级编排</el-tag
@@ -296,7 +302,7 @@ onMounted(() => {
   .status-tag {
     position: absolute;
     right: 16px;
-    top: 3px;
+    top: 15px;
   }
 }
 .dropdown-custom-switch {

ui/src/views/dataset/index.vue

@@ -38,7 +38,6 @@
             <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
               <CardBox
                 :title="item.name"
-                :username="item.username"
                 :description="item.desc"
                 class="cursor"
                 @click="router.push({ path: `/dataset/${item.id}/document` })"
@@ -56,6 +55,13 @@
                     <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                   </AppAvatar>
                 </template>
+                <template #subTitle>
+                  <el-text class="lighter mr-8" size="small">
+                    <auto-tooltip :content="item.username">
+                      创建人: {{ item.username }}
+                    </auto-tooltip>
+                  </el-text>
+                </template>
                 <div class="delete-button">
                   <el-tag class="blue-tag" v-if="item.type === '0'" style="height: 22px"
                     >通用型</el-tag
@@ -281,7 +287,7 @@ onMounted(() => {
   .delete-button {
     position: absolute;
     right: 12px;
-    top: 3px;
+    top: 15px;
     height: auto;
   }
   .footer-content {

ui/src/views/function-lib/index.vue

@@ -51,7 +51,6 @@
             <CardBox
               :title="item.name"
               :description="item.desc"
-              :username="item.username"
               class="function-lib-card"
               @click="openCreateDialog(item)"
               :class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
@@ -61,6 +60,13 @@
                   <img src="@/assets/icon_function_outlined.svg" style="width: 58%" alt="" />
                 </AppAvatar>
               </template>
+              <template #subTitle>
+                <el-text class="lighter mr-8" size="small">
+                  <auto-tooltip :content="item.username">
+                    创建人: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
               <div class="status-button">
                 <el-tag
                   class="info-tag"
@@ -287,7 +293,7 @@ onMounted(() => {
   .status-button {
     position: absolute;
     right: 12px;
-    top: 3px;
+    top: 15px;
     height: auto;
   }
 }