feat: 模型列表更新下载loading

ui/src/components/loading/DownloadLoading.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="loading-container loader">
+    <div class="download-loading">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.loading-container {
+  display: -webkit-flex; /*safari弹性布局*/
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+@-webkit-keyframes loader {
+  0% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.download-loading {
+  position: relative;
+}
+.download-loading div {
+  width: 5px;
+  height: 12px;
+  background: var(--el-color-info);
+  position: absolute;
+  border-radius: 2px;
+  margin: 0 auto;
+}
+.download-loading div:nth-child(1) {
+  top: -20px;
+  left: 0;
+  -webkit-animation: loader 1s -0.8s infinite ease-in-out;
+}
+.download-loading div:nth-child(2) {
+  top: -13px;
+  left: 13px;
+  -webkit-transform: rotate(45deg);
+  -webkit-animation: loader 1s -0.6s infinite ease-in-out;
+}
+.download-loading div:nth-child(3) {
+  top: 0px;
+  left: 20px;
+  -webkit-transform: rotate(90deg);
+  -webkit-animation: loader 1s -0.5s infinite ease-in-out;
+}
+.download-loading div:nth-child(4) {
+  top: 13px;
+  left: 13px;
+  -webkit-transform: rotate(-45deg);
+  -webkit-animation: loader 1s -0.4s infinite ease-in-out;
+}
+.download-loading div:nth-child(5) {
+  top: 20px;
+  left: 0px;
+  -webkit-transform: rotate(0deg);
+  -webkit-animation: loader 1s -0.3s infinite ease-in-out;
+}
+.download-loading div:nth-child(6) {
+  top: 13px;
+  left: -13px;
+  -webkit-transform: rotate(45deg);
+  -webkit-animation: loader 1s -0.2s infinite ease-in-out;
+}
+.download-loading div:nth-child(7) {
+  top: 0px;
+  left: -20px;
+  -webkit-transform: rotate(90deg);
+  -webkit-animation: loader 1s -0.1s infinite ease-in-out;
+}
+.download-loading div:nth-child(8) {
+  top: -13px;
+  left: -13px;
+  -webkit-transform: rotate(-45deg);
+  -webkit-animation: loader 1s 0s infinite ease-in-out;
+}
+</style>

ui/src/styles/app.scss

@@ -377,6 +377,11 @@ h5 {
   color: var(--el-color-primary);
   border: none;
 }
+.danger-tag {
+  background: var(--tag-danger-bg);
+  color: #d03f3b;
+  border: none;
+}
 .success-tag {
   background: var(--tag-success-bg);
   color: var(--el-color-success);
@@ -388,6 +393,12 @@ h5 {
   border: none;
 }
 
+.info-tag {
+  background: var(--app-text-color-light-1);
+  color: var(--app-text-color-secondary);
+  border: none;
+}
+
 .purple-tag {
   background: #f2ebfe;
   color: #7f3bf5;

ui/src/styles/element-plus.scss

@@ -1,5 +1,5 @@
 :root {
-  --el-color-primary: #3370FF;
+  --el-color-primary: #3370ff;
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: #dee0e3;

ui/src/styles/variables.scss

@@ -14,8 +14,8 @@
   --app-header-height: 56px;
   --app-header-padding: 0 20px;
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
-  --app-logo-color: linear-gradient(180deg, #3370FF 0%, #7f3bf5 100%);
+  --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
-  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370FF 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370ff 100%);
 
   /* 计算高度 */
   --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
@@ -30,6 +30,7 @@
   --tag-success-color: #2ca91f;
   --tag-warning-bg: rgba(255, 136, 0, 0.2);
   --tag-warning-color: #d97400;
+  --tag-danger-bg: rgba(245, 74, 69, 0.2);
 
   /** card */
   --card-width: 330px;

ui/src/views/application/component/CreateApplicationDialog.vue

@@ -183,10 +183,7 @@ const submitValid = (formEl: FormInstance | undefined) => {
         if (res?.data) {
           submitHandle(formEl)
         } else {
-          MsgAlert(
+          MsgAlert('提示', '社区版最多支持 5 个应用，如需拥有更多应用，请升级为专业版。')
-            '提示',
-            '社区版最多支持 5 个应用，如需拥有更多应用，请联系我们（https://fit2cloud.com/）。'
-          )
         }
       })
   }

ui/src/views/dataset/component/CreateDatasetDialog.vue

@@ -132,10 +132,7 @@ const submitValid = () => {
       if (res?.data) {
         submitHandle()
       } else {
-        MsgAlert(
+        MsgAlert('提示', '社区版最多支持 50 个知识库，如需拥有更多知识库，请升级为专业版。')
-          '提示',
-          '社区版最多支持 50 个知识库，如需拥有更多知识库，请联系我们（https://fit2cloud.com/）。'
-        )
       }
     })
   }

ui/src/views/template/component/ModelCard.vue

@@ -3,9 +3,18 @@
     <template #header>
       <div class="flex align-center">
         <span style="height: 32px; width: 32px" :innerHTML="icon" class="mr-12"></span>
-        <auto-tooltip :content="model.name" style="max-width: 40%">
+        <div class="w-full">
-          {{ model.name }}
+          <auto-tooltip :content="model.name" style="max-width: 40%">
-        </auto-tooltip>
+            {{ model.name }}
+          </auto-tooltip>
+          <div class="mt-4">
+            <el-tag v-if="model.permission_type === 'PRIVATE'" type="danger" class="danger-tag"
+              >私有</el-tag
+            >
+            <el-tag v-else type="info" class="info-tag">公有</el-tag>
+          </div>
+        </div>
+
         <div class="flex align-center" v-if="currentModel.status === 'ERROR'">
           <el-tag type="danger" class="ml-8">失败</el-tag>
           <el-tooltip effect="dark" :content="errMessage" placement="top">
@@ -29,7 +38,8 @@
     </div>
     <!-- progress -->
     <div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'">
-      <el-progress
+      <DownloadLoading class="percentage" />
+      <!-- <el-progress
         type="circle"
         :width="56"
         color="#3370FF"
@@ -39,8 +49,14 @@
         <template #default="{ percentage }">
           <span class="percentage-value">{{ percentage }}%</span>
         </template>
-      </el-progress>
+      </el-progress> -->
-      <span class="percentage-label">正在下载 <span class="dotting"></span></span>
+
+      <div class="percentage-label flex-center">
+        正在下载中 <span class="dotting"></span>
+        <el-button link type="primary" class="ml-16" @click.stop="cancelDownload"
+          >取消下载</el-button
+        >
+      </div>
     </div>
 
     <template #mouseEnter>
@@ -68,6 +84,7 @@ import type { Provider, Model } from '@/api/type/model'
 import ModelApi from '@/api/model'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import EditModel from '@/views/template/component/EditModel.vue'
+import DownloadLoading from '@/components/loading/DownloadLoading.vue'
 import { MsgConfirm } from '@/utils/message'
 
 const props = defineProps<{
@@ -94,27 +111,27 @@ const errMessage = computed(() => {
   }
   return ''
 })
-const progress = computed(() => {
+// const progress = computed(() => {
-  if (currentModel.value) {
+//   if (currentModel.value) {
-    const down_model_chunk = currentModel.value.meta['down_model_chunk']
+//     const down_model_chunk = currentModel.value.meta['down_model_chunk']
-    if (down_model_chunk) {
+//     if (down_model_chunk) {
-      const maxObj = down_model_chunk
+//       const maxObj = down_model_chunk
-        .filter((chunk: any) => chunk.index > 1)
+//         .filter((chunk: any) => chunk.index > 1)
-        .reduce(
+//         .reduce(
-          (prev: any, current: any) => {
+//           (prev: any, current: any) => {
-            return (prev.index || 0) > (current.index || 0) ? prev : current
+//             return (prev.index || 0) > (current.index || 0) ? prev : current
-          },
+//           },
-          { progress: 0 }
+//           { progress: 0 }
-        )
+//         )
-      if (maxObj) {
+//       if (maxObj) {
-        return parseFloat(maxObj.progress?.toFixed(1))
+//         return parseFloat(maxObj.progress?.toFixed(1))
-      }
+//       }
-      return 0
+//       return 0
-    }
+//     }
-    return 0
+//     return 0
-  }
+//   }
-  return 0
+//   return 0
-})
+// })
 const emit = defineEmits(['change', 'update:model'])
 const eidtModelRef = ref<InstanceType<typeof EditModel>>()
 let interval: any
@@ -130,6 +147,8 @@ const deleteModel = () => {
     })
     .catch(() => {})
 }
+
+const cancelDownload = () => {}
 const openEditModel = () => {
   const provider = props.provider_list.find((p) => p.provider === props.model.provider)
   if (provider) {
@@ -197,21 +216,21 @@ onBeforeUnmount(() => {
     z-index: 99;
     text-align: center;
     .percentage {
-      top: 50%;
+      margin-top: 55px;
-      transform: translateY(-65%);
+      margin-bottom: 16px;
     }
 
-    .percentage-value {
+    // .percentage-value {
-      display: block;
+    //   display: flex;
-      font-size: 12px;
+    //   font-size: 13px;
-      color: var(--el-color-primary);
+    //   align-items: center;
-    }
+    //   color: var(--app-text-color-secondary);
+    // }
     .percentage-label {
-      display: block;
+      margin-top: 50px;
-      margin-top: 45px;
       margin-left: 10px;
-      font-size: 12px;
+      font-size: 13px;
-      color: var(--el-color-primary);
+      color: var(--app-text-color-secondary);
     }
   }
 }

ui/src/views/user-manage/index.vue

@@ -145,10 +145,7 @@ function createUser() {
         title.value = '创建用户'
         UserDialogRef.value.open()
       } else {
-        MsgAlert(
+        MsgAlert('提示', '社区版最多支持 2 个用户，如需拥有更多用户，请升级为专业版。')
-          '提示',
-          '社区版最多支持 2 个用户，如需拥有更多用户，请联系我们（https://fit2cloud.com/）。'
-        )
       }
     })
   }