feat: 更新主题样式

ui/src/assets/icon_document.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_332_3845)">
+<path opacity="0.5" d="M11.5903 10.7326C11.5903 8.64041 13.2864 6.9444 15.3785 6.9444C17.4706 6.9444 19.1667 8.64042 19.1667 10.7326V15.3784C19.1667 17.4705 17.4706 19.1666 15.3785 19.1666C13.2864 19.1666 11.5903 17.4705 11.5903 15.3784V10.7326Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6212 0.833374H14.6211V2.36113H13.1059V0.833374H2.83347C1.72892 0.833374 0.833495 1.72878 0.833474 2.83333L0.833313 11.1665C0.833228 15.5848 4.41497 19.1666 8.83331 19.1666H15.1666C15.5076 19.1666 15.8387 19.1239 16.1547 19.0436C15.2624 18.7368 14.6212 17.8902 14.6212 16.8937V0.833374ZM4.51881 6.35876C4.51881 5.89468 4.89501 5.51848 5.35909 5.51848H10.3457C10.8098 5.51848 11.186 5.89468 11.186 6.35876C11.186 6.82283 10.8098 7.19904 10.3457 7.19904H5.35909C4.89501 7.19904 4.51881 6.82283 4.51881 6.35876ZM5.35909 9.4398C4.89501 9.4398 4.51881 9.816 4.51881 10.2801C4.51881 10.7441 4.89501 11.1204 5.35909 11.1204H10.3457C10.8098 11.1204 11.186 10.7441 11.186 10.2801C11.186 9.816 10.8098 9.4398 10.3457 9.4398H5.35909Z" fill="white"/>
+<ellipse cx="13.1058" cy="2.36108" rx="1.51527" ry="1.52776" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_332_3845">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -1,8 +1,8 @@
 <template>
-  <el-card shadow="always">
-    <div class="card-add">
-      <AppIcon :iconName="icon" class="add-icon" />
-      <span class="ml-10">{{ title }}</span>
+  <el-card shadow="always" class="card-add">
+    <div class="flex-center">
+      <AppIcon iconName="Plus" class="add-icon" />
+      <span>{{ title }}</span>
     </div>
   </el-card>
 </template>
@@ -12,27 +12,37 @@ defineProps({
   title: {
     type: String,
     default: '标题'
-  },
-  icon: {
-    type: String,
-    default: 'CirclePlusFilled'
   }
 })
 </script>
 <style lang="scss" scoped>
 .card-add {
   width: 100%;
-  min-height: 110px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 15px;
+  font-size: 16px;
   cursor: pointer;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-color-primary);
+  background: #eff0f1;
+  box-shadow: none;
+
+  .add-icon {
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid #bbbfc4;
+    background: #f5f6f7;
+    padding: 8px;
+    margin-right: 12px;
+  }
   &:hover {
     color: var(--el-color-primary);
-  }
-  .add-icon {
-    font-size: 16px;
+    background: #ffffff;
+    .add-icon {
+      background: #ffffff;
+      border-color: var(--el-color-primary);
+    }
   }
 }
 </style>

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

@@ -3,14 +3,14 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-8">
-            <el-icon><Document /></el-icon>
+          <AppAvatar class="mr-12" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
           </AppAvatar>
           <h4>{{ title }}</h4>
         </div>
       </slot>
     </div>
-    <div class="description mt-8">
+    <div class="description mt-12">
       <slot name="description">
         {{ description }}
       </slot>
@@ -48,7 +48,7 @@ function cardLeave() {
 .card-box {
   font-size: 14px;
   position: relative;
-  min-height: 150px;
+  min-height: var(--card-min-height);
 
   .description {
     display: -webkit-box;
@@ -56,11 +56,16 @@ function cardLeave() {
     -webkit-line-clamp: 2;
     overflow: hidden;
     height: 40px;
+    color: var(--app-text-color-secondary);
+    line-height: 22px;
+    font-weight: 400;
   }
   .card-footer {
     position: absolute;
-    bottom: 0;
+    bottom: 8px;
     min-height: 30px;
+    color: var(--app-text-color-secondary);
+    font-weight: 400;
   }
 }
 </style>

ui/src/styles/app.scss

@@ -87,6 +87,10 @@ h4 {
   font-size: 16px;
 }
 
+.bold {
+  font-weight: 600;
+}
+
 .w-full {
   width: 100%;
 }
@@ -97,6 +101,9 @@ h4 {
 .mt-8 {
   margin-top: 8px;
 }
+.mt-12 {
+  margin-top: 12px;
+}
 .mt-16 {
   margin-top: 16px;
 }
@@ -116,6 +123,9 @@ h4 {
 .mr-8 {
   margin-right: 8px;
 }
+.mr-12 {
+  margin-right: 12px;
+}
 
 .p-8 {
   padding: 8px;

ui/src/styles/element-plus.scss

@@ -1,6 +1,5 @@
 :root {
   --el-menu-item-height: 45px;
-  --el-text-color-primary: '#1F2329';
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: rgba(31, 35, 41, 0.15);
 }
@@ -11,11 +10,9 @@
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
   --el-avatar-size-small: 33px;
+  --el-avatar-border-radius: 8px;
   cursor: pointer;
 }
-.el-popper {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
 
 .el-form {
   --el-form-inline-content-width: 100%;
@@ -35,7 +32,7 @@
   padding-bottom: 24px;
   .app-confirm {
     .app-confirm-title {
-      color: var(--el-text-color-primary);
+      color: var(--app-text-color-primary);
     }
     .icon {
       font-size: 24px;
@@ -49,7 +46,7 @@
 
 .el-message-box__content {
   padding: 24px;
-  color: var(--el-text-color-primary);
+  color: var(--app-text-color-primary);
 }
 .el-message-box__btns {
   padding: 5px 24px 0;
@@ -65,15 +62,8 @@
   }
 }
 
-@media only screen and (min-width: 1200px) {
-  .el-col-lg-5 {
-    display: block;
-    max-width: 25%;
-    flex: 0 0 25%;
-  }
-}
 @media only screen and (min-width: 1400px) {
-  .el-col-lg-5 {
+  .el-col-lg-6 {
     display: block;
     max-width: 20.8333333333%;
     flex: 0 0 20.8333333333%;
@@ -89,7 +79,8 @@
 
 .el-card {
   --el-card-border-radius: 8px;
-  border: none !important;
+  --el-card-padding: 16px;
+  border: 1px solid #ffffff;
 }
 .el-dropdown {
   color: var(--app-text-color-primary);

ui/src/styles/variables.scss

@@ -1,8 +1,8 @@
 :root {
-  --el-color-primary: rgba(51, 112, 255, 1);
+  --el-color-primary: #3370ff;
   --app-layout-bg-color: #f5f6f7;
   --app-text-color-primary: #1f2329;
-  --app-text-color-secondary: #646A73;
+  --app-text-color-secondary: #646a73;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
 
@@ -17,6 +17,11 @@
   /** tag */
   --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
   --tag-deflaut-color: #2b5fd9;
+  /** card */
+  --card-width: 330px;
+  --card-min-height: 160px;
+  --card-min-width: 220px;
+
   /** team */
   --team-manage-left-width: 280px;
 }

ui/src/utils/utils.ts

@@ -0,0 +1,8 @@
+function toThousands(num: any) {
+  return num.toString().replace(/\d+/, function (n: any) {
+    return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+  })
+}
+export function numberFormat(num: number) {
+  return num < 1000 ? toThousands(num) : toThousands((num / 1000).toFixed(1)) + 'k'
+}

ui/src/views/dataset/index.vue

@@ -9,20 +9,20 @@
         style="width: 300px"
       />
     </div>
-    <div>
+    <div v-loading.fullscreen.lock="loading">
       <el-row
         :gutter="15"
         v-infinite-scroll="loadDataset"
         :infinite-scroll-disabled="disabledScroll"
       >
-        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-8">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
         <el-col
           :xs="24"
           :sm="12"
-          :md="6"
-          :lg="5"
+          :md="8"
+          :lg="6"
           :xl="4"
           v-for="(item, index) in datasetList"
           :key="index"
@@ -30,17 +30,21 @@
         >
           <CardBox :title="item.name" :description="item.desc" class="cursor">
             <template #mouseEnter>
-              <div class="delete-button">
-                <el-button type="primary" link @click.stop="deleteDateset(item)">
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button text @click.stop="deleteDateset(item)" class="delete-button">
                   <el-icon><Delete /></el-icon>
                 </el-button>
-              </div>
+              </el-tooltip>
             </template>
 
             <template #footer>
               <div class="footer-content">
-                {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
-                {{ item?.char_length || 0 }}关联应用
+                <span class="bold">{{ item?.document_count || 0 }}</span>
+                文档<el-divider direction="vertical" />
+                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                字符<el-divider direction="vertical" />
+                <span class="bold">{{ item?.char_length || 0 }}</span>
+                关联应用
               </div>
             </template>
           </CardBox>
@@ -55,6 +59,7 @@ import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
+import { numberFormat } from '@/utils/utils';
 const router = useRouter()
 
 const loading = ref(false)
@@ -73,7 +78,7 @@ function deleteDateset(row: any) {
   MsgConfirm(
     {
       title: `是否删除数据集：${row.name}？`,
-      decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
+      decription: `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
       confirmButtonText: '删除'
     },
     {
@@ -116,8 +121,15 @@ onMounted(() => {
 .dataset-list-container {
   .delete-button {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 12px;
+    top: 18px;
+    padding: 6px;
+    height: auto;
+  }
+  .footer-content {
+    .bold {
+      color: var(--app-text-color-primary);
+    }
   }
 }
 </style>