15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 模型列表更新下载loading

This commit is contained in:
wangdan-fit2cloud 2024-07-19 14:58:08 +08:00
parent d728b0c751
commit 8dc426664f
8 changed files with 168 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
ui/src/components/loading/DownloadLoading.vue Normal file
View File

@ -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>

11
ui/src/styles/app.scss
View File

@ -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;

2
ui/src/styles/element-plus.scss
View File

@ -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;

5
ui/src/styles/variables.scss
View File

@ -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;

5
ui/src/views/application/component/CreateApplicationDialog.vue
View File

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

5
ui/src/views/dataset/component/CreateDatasetDialog.vue
View File

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

95
ui/src/views/template/component/ModelCard.vue
View File

@ -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);
}
}
}

5
ui/src/views/user-manage/index.vue
View File

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