fix: design download

This commit is contained in:
ShawnPhang 2024-04-03 13:31:51 +08:00
parent 148bfcadde
commit 50d193c067
5 changed files with 166 additions and 28 deletions

View File

@ -0,0 +1,139 @@
<!--
* @Author: ShawnPhang
* @Date: 2024-03-17 16:10:21
* @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-04-03 12:25:15
-->
<template>
<div v-if="percent" v-show="!hide" class="mask">
<div class="content">
<div class="tool">
<div v-show="percent < 100" class="backstage" @click="close"><iconSell width="18" /> <span style="margin-left: 0.4rem">后台下载</span></div>
<iconClose v-show="percent >= 100" class="backstage" @click="cancel" width="20" />
</div>
<div class="text">{{ text }}</div>
<el-progress style="width: 100%" :text-inside="true" :percentage="percent" />
<div v-show="percent < 100" class="text btn" @click="cancel">{{ cancelText }}</div>
<div class="text info">{{ msg }}</div>
<div v-show="percent >= 100" class="success">
<img src="https://store.palxp.cn/Celebration.png" alt="" srcset="" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue'
import { ElProgress } from 'element-plus'
import { Close as iconClose, Sell as iconSell } from '@element-plus/icons-vue'
import toolTip from '@/components/common/PopoverTip.vue'
type TProps = {
percent: number
text?: string
cancelText?: string
msg?: string
}
type TEmits = {
(event: 'done'): void
(event: 'cancel'): void
}
const props = withDefaults(defineProps<TProps>(), {
percent: 0,
text: '',
cancelText: '',
msg: '',
})
const hide = ref(false)
const emit = defineEmits<TEmits>()
watch(
() => props.percent,
(num) => {
if (num >= 100) {
// setTimeout(() => {
// emit('done')
// }, 1000)
hide.value = false
}
},
)
const cancel = () => {
emit('cancel')
hide.value = false
}
const close = () => {
hide.value = true
}
defineExpose({
cancel,
})
</script>
<style lang="less" scoped>
:deep(.el-progress-bar__innerText) {
opacity: 0;
}
.mask {
user-select: none;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 24%;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.content {
background: #ffffff;
border-radius: 8px;
padding: 2rem 4rem;
}
.text {
margin: 2rem 0;
font-size: 20px;
font-weight: bold;
width: 100%;
text-align: center;
color: #333333;
}
.btn {
font-weight: 400;
font-size: 16px;
cursor: pointer;
color: #3771e5;
}
.info {
font-weight: 400;
font-size: 16px;
color: #777777;
}
.tool {
text-align: right;
.backstage {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 14px;
}
}
.success {
display: flex;
justify-content: center;
img {
width: 80%;
}
}
</style>

View File

@ -1,10 +1,3 @@
<!--
* @Author: ShawnPhang
* @Date: 2021-12-28 09:29:42
* @Description: 百分比进度条
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @Date: 2024-03-05 10:50:00
-->
<template>
<div v-if="percent" class="mask">
<div class="content">
@ -22,8 +15,8 @@ import { ElProgress } from 'element-plus'
type TProps = {
percent: number
text: string
cancelText: string
text?: string
cancelText?: string
msg?: string
}
@ -32,12 +25,17 @@ type TEmits = {
(event: 'cancel'): void
}
const {percent, text, cancelText, msg} = defineProps<TProps>()
const props = withDefaults(defineProps<TProps>(), {
percent: 0,
text: '',
cancelText: '',
msg: ''
})
const emit = defineEmits<TEmits>()
watch(
() => percent,
() => props.percent,
(num) => {
if (num >= 100) {
setTimeout(() => {

View File

@ -2,9 +2,9 @@
* @Author: ShawnPhang
* @Date: 2023-09-18 17:34:44
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastUpdateContent: Support typescript
* @LastEditTime: 2024-02-25 14:51:00
* @LastEditTime: 2024-04-03 10:58:42
-->
<template>
<div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
@ -45,6 +45,7 @@
<ProgressLoading
:percent="state.downloadPercent"
:text="state.downloadText"
:msg="state.downloadMsg"
cancelText="取消"
@cancel="downloadCancel"
@done="state.downloadPercent = 0"
@ -66,7 +67,7 @@ import lineGuides from '@/components/modules/layout/lineGuides.vue'
import shortcuts from '@/mixins/shortcuts'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import HeaderOptions from './components/HeaderOptions.vue'
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
import ProgressLoading from '@/components/common/ProgressLoading/download.vue'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router'
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
@ -77,6 +78,7 @@ type TState = {
style: CSSProperties
downloadPercent: number //
downloadText: string
downloadMsg: string | undefined
isContinue: boolean
APP_NAME: string
showLineGuides: boolean
@ -101,6 +103,7 @@ const state = reactive<TState>({
// openDraw: false,
downloadPercent: 0, //
downloadText: '',
downloadMsg: '',
isContinue: true,
APP_NAME: _config.APP_NAME,
showLineGuides: false,
@ -217,9 +220,10 @@ function fixTopBarScroll() {
// console.log('click listener', e)
// }
function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number, downloadText: string }) {
function optionsChange({ downloadPercent, downloadText, downloadMsg }: { downloadPercent: number, downloadText: string, downloadMsg?: string }) {
state.downloadPercent = downloadPercent
state.downloadText = downloadText
state.downloadMsg = downloadMsg
}
</script>

View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2022-03-25 15:19:02
* @Description: 版权声明
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-08-08 10:09:59
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-04-03 10:55:43
-->
<template>
<tool-tip title="免责声明" :width="340" :content="content">
@ -16,7 +16,7 @@
<script lang="ts" setup>
import toolTip from '@/components/common/PopoverTip.vue'
const content = '本站为个人项目,所使用素材图片等均为网络收集而来,下载之作品仅供学习研究或欣赏目的而使用,无法提供商用授权哦。'
const content = '本站为个人项目,所使用图片等素材均为网络搜集而来,下载作品仅供学习、研究或欣赏用途,暂不提供商用授权。'
</script>
<style lang="less" scoped>

View File

@ -3,7 +3,7 @@
* @Date: 2022-01-12 11:26:53
* @Description: 顶部操作按钮组
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-03-11 01:43:30
* @LastEditTime: 2024-04-03 12:21:25
-->
<template>
<div class="top-title"><el-input v-model="state.title" placeholder="未命名的设计" class="input-wrap" /></div>
@ -37,9 +37,7 @@ import { useFontStore } from '@/common/methods/fonts'
import copyRight from './CopyRight.vue'
import _config from '@/config'
import useConfirm from '@/common/methods/confirm'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useBaseStore, useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
import { useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
import { storeToRefs } from 'pinia'
type TProps = {
@ -103,8 +101,6 @@ async function save(hasCover: boolean = false) {
const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
!id && router.push({ path: '/home', query: { id: newId }, replace: true })
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}
@ -151,15 +147,14 @@ async function saveTemp() {
}
state.loading = true
emit('update:modelValue', true)
emit('change', { downloadPercent: 1, downloadText: '正在处理封面' })
emit('change', { downloadPercent: 1, downloadText: '请稍候..' })
await save(true)
setTimeout(async () => {
const { id } = route.query
if (id) {
const { width, height } = dPage.value
emit('update:modelValue', true)
emit('change', { downloadPercent: 1, downloadText: '准备合成图片' })
state.loading = false
emit('change', { downloadPercent: 1, downloadText: '正在处理数据' })
let timerCount = 0
const animation = setInterval(() => {
if (props.modelValue && timerCount < 75) {
@ -175,9 +170,11 @@ async function saveTemp() {
progress >= timerCount && emit('change', { downloadPercent: Number(progress.toFixed(0)), downloadText: '图片生成中' })
} else {
xhr.abort()
state.loading = false
}
})
emit('change', { downloadPercent: 100, downloadText: '图片下载中' })
emit('change', { downloadPercent: 100, downloadText: '作品下载成功', downloadMsg: '仅供学习、研究或欣赏等用途,暂不提供商业授权。' })
state.loading = false
}
}, 100)
}