From 50d193c067dfc627210d6cfa5d6ce425b2152a51 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Wed, 3 Apr 2024 13:31:51 +0800
Subject: [PATCH] fix: design download

---
 .../common/ProgressLoading/download.vue       | 139 ++++++++++++++++++
 .../common/ProgressLoading/index.vue          |  20 ++-
 src/views/Index.vue                           |  12 +-
 src/views/components/CopyRight.vue            |   6 +-
 src/views/components/HeaderOptions.vue        |  17 +--
 5 files changed, 166 insertions(+), 28 deletions(-)
 create mode 100644 src/components/common/ProgressLoading/download.vue

diff --git a/src/components/common/ProgressLoading/download.vue b/src/components/common/ProgressLoading/download.vue
new file mode 100644
index 0000000..49654ee
--- /dev/null
+++ b/src/components/common/ProgressLoading/download.vue
@@ -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>
diff --git a/src/components/common/ProgressLoading/index.vue b/src/components/common/ProgressLoading/index.vue
index c801b39..0a2d31b 100644
--- a/src/components/common/ProgressLoading/index.vue
+++ b/src/components/common/ProgressLoading/index.vue
@@ -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(() => {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 1bb67d1..d2c8a31 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -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>
 
diff --git a/src/views/components/CopyRight.vue b/src/views/components/CopyRight.vue
index b3cbf67..c025136 100644
--- a/src/views/components/CopyRight.vue
+++ b/src/views/components/CopyRight.vue
@@ -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>
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index af1670d..6eac4a3 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -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)
     }