feat: convert header options component to composition API

src/components/common/ProgressLoading/index.vue

@@ -24,7 +24,7 @@ type TProps = {
   percent: number
   text: string
   cancelText: string
-  msg: string
+  msg?: string
 }
 
 type TEmits = {

src/views/components/CopyRight.vue

@@ -13,19 +13,10 @@
   </tool-tip>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import toolTip from '@/components/common/PopoverTip.vue'
 
-export default defineComponent({
-  components: { toolTip },
-  setup() {
-    const content = '本站为个人项目，所使用素材图片等均为网络收集而来，下载之作品仅供学习研究或欣赏目的而使用，无法提供商用授权哦。'
-    return {
-      content,
-    }
-  },
-})
+const content = '本站为个人项目，所使用素材图片等均为网络收集而来，下载之作品仅供学习研究或欣赏目的而使用，无法提供商用授权哦。'
 </script>
 
 <style lang="less" scoped>

src/views/components/HeaderOptions.vue

@@ -6,10 +6,10 @@
  * @LastEditTime: 2023-12-11 12:40:59
 -->
 <template>
-  <div class="top-title"><el-input v-model="title" placeholder="未命名的设计" class="input-wrap" /></div>
+  <div class="top-title"><el-input v-model="state.title" placeholder="未命名的设计" class="input-wrap" /></div>
   <div class="top-icon-wrap">
     <template v-if="tempEditing">
-      <span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="stateBollean" @change="stateChange" />
+      <span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ state.stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="state.stateBollean" @change="stateChange" />
       <div class="divide__line">|</div>
       <el-button plain type="primary" @click="saveTemp">保存模板</el-button>
       <el-button @click="$store.commit('managerEdit', false)">取消</el-button>
@@ -18,16 +18,16 @@
     <!-- <el-button @click="draw">绘制(测试)</el-button> -->
     <el-button size="large" class="primary-btn" :disabled="tempEditing" @click="save(false)">保存</el-button>
     <copyRight>
-      <el-button :loading="loading" size="large" class="primary-btn" :disabled="tempEditing" plain type="primary" @click="download">下载作品</el-button>
+      <el-button :loading="state.loading" size="large" class="primary-btn" :disabled="tempEditing" plain type="primary" @click="download">下载作品</el-button>
     </copyRight>
   </div>
   <!-- 生成图片组件 -->
   <SaveImage ref="canvasImage" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import api from '@/api'
-import { defineComponent, reactive, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue'
+import { reactive, toRefs, defineEmits, defineProps, ref } from 'vue'
 import { mapGetters, mapActions, useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import _dl from '@/common/methods/download'
@@ -38,62 +38,81 @@ 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'
 
-export default defineComponent({
-  components: { copyRight, SaveImage },
-  props: ['modelValue'],
-  emits: ['change', 'update:modelValue'],
-  setup(props, context) {
-    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
-    const route = useRoute()
-    const router = useRouter()
-    const store = useStore()
-    const state = reactive({
+type TProps = {
+  modelValue?: boolean
+}
+
+type TEmits = {
+  (event: 'change', data: {downloadPercent: number, downloadText: string}): void
+  (event: 'update:modelValue', data: boolean): void
+}
+
+type TState= {
+  stateBollean: boolean,
+  title: string,
+  loading: boolean,
+}
+
+const props = defineProps<TProps>()
+const emit = defineEmits<TEmits>()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+const canvasImage = ref<typeof SaveImage | null>(null)
+const {
+  dPage, dWidgets, tempEditing, dHistory, dPageHistory
+} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+
+const state = reactive<TState>({
   stateBollean: false,
   title: '',
   loading: false,
-    })
+})
 
-    // 保存作品
-    async function save(hasCover: boolean = false) {
+// 保存作品
+async function save(hasCover: boolean = false) {
   // Bugs: 历史操作有问题，且page操作未及时入栈 proxy?.dPageHistory
-      if (proxy?.dHistory.length <= 0) {
+  if (dHistory.value.length <= 0) {
     return
   }
   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
   // console.log(proxy?.dPage, proxy?.dWidgets)
   const { id, tempid } = route.query
-      const cover = hasCover ? await proxy?.draw() : undefined
-      const widgets = proxy.dWidgets // reviseData()
-      const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id, title: proxy.title || '未命名设计', data: JSON.stringify({ page: proxy.dPage, widgets }), temp_id: tempid, width: proxy.dPage.width, height: proxy.dPage.height })
+  const cover = hasCover ? await draw() : undefined
+  const widgets = dWidgets.value // reviseData()
+  const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id, title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: tempid, 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)
-    }
+}
+
     // 保存模板
-    async function saveTemp() {
+async function saveTemp() {
   const { tempid, tempType: type } = route.query
   let res = null
-      if (type == 1) {
+  if (Number(type) == 1) {
     // 保存组件，组合元素要保证在最后一位，才能默认选中
-        if (proxy.dWidgets[0].type === 'w-group') {
-          const group = proxy.dWidgets.shift()
+    if (dWidgets.value[0].type === 'w-group') {
+      const group = dWidgets.value.shift()
       group.record.width = 0
       group.record.height = 0
-          proxy.dWidgets.push(group)
+      dWidgets.value.push(group)
     }
     // TODO：如果保存组件不存在组合，则添加组合。该功能待优化
-        if (!proxy.dWidgets.some((x) => x.type === 'w-group')) {
+    if (!dWidgets.value.some((x: Record<string, any>) => x.type === 'w-group')) {
       alert('提交组件必须为组合！')
       return
       // proxy.dWidgets.push(wGroup.setting)
     }
-        res = await api.home.saveTemp({ id: tempid, type, title: proxy.title || '未命名组件', content: JSON.stringify(proxy.dWidgets), width: proxy.dPage.width, height: proxy.dPage.height })
-      } else res = await api.home.saveTemp({ id: tempid, title: proxy.title || '未命名模板', content: JSON.stringify({ page: proxy.dPage, widgets: proxy.dWidgets }), width: proxy.dPage.width, height: proxy.dPage.height })
+    res = await api.home.saveTemp({ id: tempid, type, title: state.title || '未命名组件', content: JSON.stringify(dWidgets.value), width: dPage.value.width, height: dPage.value.height })
+  } else res = await api.home.saveTemp({ id: tempid, title: state.title || '未命名模板', content: JSON.stringify({ page: dPage.value, widgets: dWidgets.value }), width: dPage.value.width, height: dPage.value.height })
   res.stat != 0 && useNotification('保存成功', '模板内容已变更')
-    }
+}
+
     // 停用启用
-    async function stateChange(e: any) {
+    async function stateChange(e: string | number | boolean) {
       const { tempid, tempType: type } = route.query
       const { stat } = await api.home.saveTemp({ id: tempid, type, state: e ? 1 : 0 })
       stat != 0 && useNotification('保存成功', '模板内容已变更')
@@ -103,28 +122,28 @@ export default defineComponent({
         return
       }
       // 临时提示
-      if (proxy.title === '自设计模板') {
+      if (state.title === '自设计模板') {
         const isPass = await useConfirm('提示', 'PSD自设计作品暂时保存在Github，下载可能失败', 'warning')
         if (!isPass) {
           return
         }
       }
       state.loading = true
-      context.emit('update:modelValue', true)
-      context.emit('change', { downloadPercent: 1, downloadText: '正在处理封面' })
+      emit('update:modelValue', true)
+      emit('change', { downloadPercent: 1, downloadText: '正在处理封面' })
       await save(true)
       setTimeout(async () => {
         const { id } = route.query
         if (id) {
-          const { width, height } = proxy.dPage
-          context.emit('update:modelValue', true)
-          context.emit('change', { downloadPercent: 1, downloadText: '准备合成图片' })
+          const { width, height } = dPage.value
+          emit('update:modelValue', true)
+          emit('change', { downloadPercent: 1, downloadText: '准备合成图片' })
           state.loading = false
           let timerCount = 0
           const animation = setInterval(() => {
             if (props.modelValue && timerCount < 75) {
               timerCount += RandomNumber(1, 10)
-              context.emit('change', { downloadPercent: 1 + timerCount, downloadText: '正在合成图片' })
+              emit('change', { downloadPercent: 1 + timerCount, downloadText: '正在合成图片' })
             } else {
               clearInterval(animation)
             }
@@ -132,12 +151,12 @@ export default defineComponent({
           await _dl.downloadImg(api.home.download({ id, width, height }) + '&r=' + Math.random(), (progress: number, xhr: any) => {
             if (props.modelValue) {
               clearInterval(animation)
-              progress >= timerCount && context.emit('change', { downloadPercent: Number(progress.toFixed(0)), downloadText: '图片生成中' })
+              progress >= timerCount && emit('change', { downloadPercent: Number(progress.toFixed(0)), downloadText: '图片生成中' })
             } else {
               xhr.abort()
             }
           })
-          context.emit('change', { downloadPercent: 100, downloadText: '图片下载中' })
+          emit('change', { downloadPercent: 100, downloadText: '图片下载中' })
         }
       }, 100)
     }
@@ -145,21 +164,10 @@ export default defineComponent({
       return Math.ceil(Math.random() * (max - min)) + min
     }
 
-    return {
-      ...toRefs(state),
-      download,
-      save,
-      saveTemp,
-      stateChange,
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory']),
-  },
-  methods: {
-    ...mapActions(['pushHistory', 'addGroup']),
-    async load(id: any, tempId: any, type: any, cb: Function) {
-      if (this.$route.name !== 'Draw') {
+// ...mapActions(['pushHistory', 'addGroup']),
+
+async function load(id: number, tempId: number, type: number, cb: () => void) {
+  if (route.name !== 'Draw') {
     await useFontStore.init() // 初始化加载字体
   }
   const apiName = tempId && !id ? 'getTempDetail' : 'getWorks'
@@ -170,31 +178,42 @@ export default defineComponent({
   const { data: content, title, state, width, height } = await api.home[apiName]({ id: id || tempId, type })
   if (content) {
     const data = JSON.parse(content)
-        this.stateBollean = !!state
-        this.title = title
-        this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    state.stateBollean = !!state
+    state.title = title
+    store.commit('setShowMoveable', false) // 清理掉上一次的选择框
     // this.$store.commit('setDWidgets', [])
     if (type == 1) {
       // 加载文字组合组件
-          this.dPage.width = width
-          this.dPage.height = height
-          this.addGroup(data)
+      dPage.value.width = width
+      dPage.value.height = height
+      store.dispatch('addGroup', data)
+      // addGroup(data)
     } else {
-          this.$store.commit('setDPage', data.page)
-          id ? this.$store.commit('setDWidgets', data.widgets) : this.$store.dispatch('setTemplate', data.widgets)
+      store.commit('setDPage', data.page)
+      id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
-        this.pushHistory('请求加载load')
+    store.dispatch('pushHistory', '请求加载load')
+    // pushHistory('请求加载load')
   }
-    },
-    draw() {
+}
+
+function draw() {
   return new Promise((resolve) => {
-        this.$refs.canvasImage.createCover(({ key }) => {
+    if (!canvasImage.value) resolve('')
+    else {
+      canvasImage.value.createCover(({ key }: {key: string}) => {
         resolve(_config.IMG_URL + key)
       })
+    }
   })
-    },
-  },
+}
+
+defineExpose({
+  download,
+  save,
+  saveTemp,
+  stateChange,
 })
 </script>