From 8dc426664fc061a4afbc11f31bbf597ec896067a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 19 Jul 2024 14:58:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=8B=E8=BD=BDloading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/loading/DownloadLoading.vue | 93 ++++++++++++++++++
 ui/src/styles/app.scss                        | 11 +++
 ui/src/styles/element-plus.scss               |  2 +-
 ui/src/styles/variables.scss                  |  5 +-
 .../component/CreateApplicationDialog.vue     |  5 +-
 .../dataset/component/CreateDatasetDialog.vue |  5 +-
 ui/src/views/template/component/ModelCard.vue | 95 +++++++++++--------
 ui/src/views/user-manage/index.vue            |  5 +-
 8 files changed, 168 insertions(+), 53 deletions(-)
 create mode 100644 ui/src/components/loading/DownloadLoading.vue

diff --git a/ui/src/components/loading/DownloadLoading.vue b/ui/src/components/loading/DownloadLoading.vue
new file mode 100644
index 000000000..83332c8c5
--- /dev/null
+++ b/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>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index dc2ad7803..d056bb12f 100644
--- a/ui/src/styles/app.scss
+++ b/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;
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index feea925b9..83c7227cc 100644
--- a/ui/src/styles/element-plus.scss
+++ b/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;
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 5fdad42fe..dfa649771 100644
--- a/ui/src/styles/variables.scss
+++ b/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-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370FF 100%);
+  --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 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;
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
index b4a280bb6..35964e1fd 100644
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -183,10 +183,7 @@ const submitValid = (formEl: FormInstance | undefined) => {
         if (res?.data) {
           submitHandle(formEl)
         } else {
-          MsgAlert(
-            '提示',
-            '社区版最多支持 5 个应用，如需拥有更多应用，请联系我们（https://fit2cloud.com/）。'
-          )
+          MsgAlert('提示', '社区版最多支持 5 个应用，如需拥有更多应用，请升级为专业版。')
         }
       })
   }
diff --git a/ui/src/views/dataset/component/CreateDatasetDialog.vue b/ui/src/views/dataset/component/CreateDatasetDialog.vue
index df47c9ff7..b958bd8f0 100644
--- a/ui/src/views/dataset/component/CreateDatasetDialog.vue
+++ b/ui/src/views/dataset/component/CreateDatasetDialog.vue
@@ -132,10 +132,7 @@ const submitValid = () => {
       if (res?.data) {
         submitHandle()
       } else {
-        MsgAlert(
-          '提示',
-          '社区版最多支持 50 个知识库，如需拥有更多知识库，请联系我们（https://fit2cloud.com/）。'
-        )
+        MsgAlert('提示', '社区版最多支持 50 个知识库，如需拥有更多知识库，请升级为专业版。')
       }
     })
   }
diff --git a/ui/src/views/template/component/ModelCard.vue b/ui/src/views/template/component/ModelCard.vue
index 1446031c3..380443e5f 100644
--- a/ui/src/views/template/component/ModelCard.vue
+++ b/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%">
-          {{ model.name }}
-        </auto-tooltip>
+        <div class="w-full">
+          <auto-tooltip :content="model.name" style="max-width: 40%">
+            {{ 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>
-      <span class="percentage-label">正在下载 <span class="dotting"></span></span>
+      </el-progress> -->
+
+      <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(() => {
-  if (currentModel.value) {
-    const down_model_chunk = currentModel.value.meta['down_model_chunk']
-    if (down_model_chunk) {
-      const maxObj = down_model_chunk
-        .filter((chunk: any) => chunk.index > 1)
-        .reduce(
-          (prev: any, current: any) => {
-            return (prev.index || 0) > (current.index || 0) ? prev : current
-          },
-          { progress: 0 }
-        )
-      if (maxObj) {
-        return parseFloat(maxObj.progress?.toFixed(1))
-      }
-      return 0
-    }
-    return 0
-  }
-  return 0
-})
+// const progress = computed(() => {
+//   if (currentModel.value) {
+//     const down_model_chunk = currentModel.value.meta['down_model_chunk']
+//     if (down_model_chunk) {
+//       const maxObj = down_model_chunk
+//         .filter((chunk: any) => chunk.index > 1)
+//         .reduce(
+//           (prev: any, current: any) => {
+//             return (prev.index || 0) > (current.index || 0) ? prev : current
+//           },
+//           { progress: 0 }
+//         )
+//       if (maxObj) {
+//         return parseFloat(maxObj.progress?.toFixed(1))
+//       }
+//       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%;
-      transform: translateY(-65%);
+      margin-top: 55px;
+      margin-bottom: 16px;
     }
 
-    .percentage-value {
-      display: block;
-      font-size: 12px;
-      color: var(--el-color-primary);
-    }
+    // .percentage-value {
+    //   display: flex;
+    //   font-size: 13px;
+    //   align-items: center;
+    //   color: var(--app-text-color-secondary);
+    // }
     .percentage-label {
-      display: block;
-      margin-top: 45px;
+      margin-top: 50px;
       margin-left: 10px;
-      font-size: 12px;
-      color: var(--el-color-primary);
+      font-size: 13px;
+      color: var(--app-text-color-secondary);
     }
   }
 }
diff --git a/ui/src/views/user-manage/index.vue b/ui/src/views/user-manage/index.vue
index 5d641ba9a..c9528cbeb 100644
--- a/ui/src/views/user-manage/index.vue
+++ b/ui/src/views/user-manage/index.vue
@@ -145,10 +145,7 @@ function createUser() {
         title.value = '创建用户'
         UserDialogRef.value.open()
       } else {
-        MsgAlert(
-          '提示',
-          '社区版最多支持 2 个用户，如需拥有更多用户，请联系我们（https://fit2cloud.com/）。'
-        )
+        MsgAlert('提示', '社区版最多支持 2 个用户，如需拥有更多用户，请升级为专业版。')
       }
     })
   }