feat: convert all pages to composition API

src/components/common/PopoverTip.vue

@@ -20,7 +20,7 @@ type TProps = {
   title: string
   width: number
   content: string
-  position: "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
+  position?: "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
   offset?: number
 }
 

src/components/common/Uploader/index.vue

@@ -35,9 +35,9 @@ export type TUploadDoneData = {
 type TQiNiuUploadReturn = { hash: string, key: string }
 
 type TProps = {
-  modelValue: TModelData
-  options: { bucket: string, prePath: string }
-  hold: boolean
+  modelValue?: TModelData
+  options?: { bucket: string, prePath: string }
+  hold?: boolean
 }
 
 type TEmits = {

src/components/modules/panel/wrap/UserWrap.vue

@@ -52,7 +52,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 
 type TProps = {
-  active: number
+  active?: number
 }
 
 type TState = {
@@ -104,7 +104,6 @@ const load = (init?: boolean) => {
     } else {
       state.imgList = state.imgList.concat(list)
     }
-    console.log('state.imgList', state.imgList)
     setTimeout(() => {
       loading = false
       if (!imgListRef.value) return
@@ -133,11 +132,9 @@ const loadDesign = (init: boolean = false) => {
             return x
           }),
         ))
-    console.log('state.designList', state.designList)
     setTimeout(() => {
       loading = false
       if (!listRef.value) return
-      console.log('listRef.value', listRef.value)
       checkHeight(listRef.value, loadDesign)
     }, 100)
   })

src/components/modules/panel/wrap/components/classHeader.vue

@@ -30,7 +30,7 @@ export type TClassHeaderTypeData = {
 
 type TProps = {
   types: TClassHeaderTypeData[]
-  isBack: boolean
+  isBack?: boolean
 }
 
 type TEmits = {

src/components/modules/panel/wrap/components/photoList.vue

@@ -46,9 +46,9 @@ import { IGetTempListData } from '@/api/home';
 
 type TProps = {
   listData: IGetTempListData[]
-  edit: Record<string, any>
-  isDone: boolean
-  isShort: boolean
+  edit?: Record<string, any>
+  isDone?: boolean
+  isShort?: boolean
 }
 
 type TEmits = {
@@ -64,7 +64,8 @@ type TState = {
 }
 
 const props = withDefaults(defineProps<TProps>(), {
-  isShort: false
+  isShort: false,
+  listData: () => ([])
 })
 const emit = defineEmits<TEmits>()
 const listRef = ref<HTMLElement | null>(null)

src/components/modules/panel/wrap/components/searchHeader.vue

@@ -37,7 +37,7 @@ import api from '@/api'
 
 type TProps = {
   type?: string
-  modelValue: string
+  modelValue?: string
 }
 
 type TEmits = {

src/components/modules/settings/colorSelect.vue

@@ -46,7 +46,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const store = useStore()
     const state: any = reactive({
-      innerColor: '#ffffffff',
+      innerColor: '',
       // colorLength: 0,
       // hasEyeDrop: 'EyeDropper' in window,
     })

src/mixins/shortcuts.ts

@@ -14,6 +14,7 @@ _this.dHistoryParams = store.getters.dHistoryParams
 
 import keyCodeOptions from './methods/keyCodeOptions'
 import dealWithCtrl from './methods/dealWithCtrl'
+import { useStore, Store } from 'vuex'
 
 const ignoreNode = ['INPUT', 'TEXTAREA']
 
@@ -36,94 +37,98 @@ let hadDown = false
 
 const shortcuts = {
   methods: {
-    handleKeydowm(e: any) {
-      const nodeName = e.target.nodeName
-      if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
-        return
-      }
-      // if (hadDown || this.showMenuBg) {
-      //   e.stopPropagation()
-      //   e.preventDefault()
-      //   return
-      // }
-      // hadDown = true
-      const ctrl = e.key === 'Control' || e.key === 'Meta'
-      const alt = e.key === 'Alt'
-      const shift = e.key === 'Shift'
-      // const dir = e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40
-      // const specialKey = ctrl || alt || shift || dir
-      // if (specialKey || e.metaKey) {
-      //   hadDown = false
-      // }
-      if (shift || ctrl) {
-        this.$store.dispatch('updateAltDown', true)
-        clearInterval(this.checkCtrl)
-        this.checkCtrl = setInterval(() => {
-          // TODO: 防止组合键导致页面失焦无法操作
-          if (!document.hasFocus()) {
-            clearInterval(this.checkCtrl)
-            hadDown = false
-            this.$store.dispatch('updateAltDown', false)
-          }
-        }, 500)
-      }
-      // const systemKey = systemKeyCode.find((item) => {
-      //   let f = false
-      //   let f2 = false
-      //   for (let i = 0; i < item.key.length; ++i) {
-      //     f = e[item.key[i]]
-      //     if (f) {
-      //       break
-      //     }
-      //   }
-      //   if (item.key2) {
-      //     for (let i = 0; i < item.key2.length; ++i) {
-      //       f2 = e[item.key2[i]]
-      //       if (f2) {
-      //         break
-      //       }
-      //     }
-      //   }
-      //   return f && f2 && e.keyCode === item.code
-      // })
-      // if (systemKey) {
-      //   return
-      // }
-      const withCtrl = e.ctrlKey || e.metaKey
-      if (withCtrl && !(ctrl || alt || shift)) {
-        this.dealCtrl(e)
-        return
-      }
-      // const withAlt = e.altKey
-      // if (withAlt && !specialKey) {
-      //   return
-      // }
-      const withShift = e.shiftKey
-      // if (withShift && !specialKey) {
-      //   return
-      // }
-      // // TODO
-      // if (!this.dActiveElement) {
-      //   return
-      // }
-      // if (this.dActiveElement.uuid === '-1') {
-      //   return
-      // }
-      // e.stopPropagation()
-      // e.preventDefault()
-      const f = withShift ? 10 : 1
-      keyCodeOptions(e, { f })
-    },
-    handleKeyup(e) {
-      console.log(e)
-      clearInterval(this.checkCtrl)
-      hadDown = false
-      if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
-        this.$store.dispatch('updateAltDown', false)
+    handleKeydowm(store: Store<any>, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
+      return (e: any) => {
+        const nodeName = e.target.nodeName
+        if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
+          return
+        }
+        // if (hadDown || this.showMenuBg) {
+        //   e.stopPropagation()
+        //   e.preventDefault()
+        //   return
+        // }
+        // hadDown = true
+        const ctrl = e.key === 'Control' || e.key === 'Meta'
+        const alt = e.key === 'Alt'
+        const shift = e.key === 'Shift'
+        // const dir = e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40
+        // const specialKey = ctrl || alt || shift || dir
+        // if (specialKey || e.metaKey) {
+        //   hadDown = false
+        // }
+        if (shift || ctrl) {
+          store.dispatch('updateAltDown', true)
+          clearInterval(checkCtrl)
+          checkCtrl = setInterval(() => {
+            // TODO: 防止组合键导致页面失焦无法操作
+            if (!document.hasFocus()) {
+              clearInterval(checkCtrl)
+              hadDown = false
+              store.dispatch('updateAltDown', false)
+            }
+          }, 500)
+        }
+        // const systemKey = systemKeyCode.find((item) => {
+        //   let f = false
+        //   let f2 = false
+        //   for (let i = 0; i < item.key.length; ++i) {
+        //     f = e[item.key[i]]
+        //     if (f) {
+        //       break
+        //     }
+        //   }
+        //   if (item.key2) {
+        //     for (let i = 0; i < item.key2.length; ++i) {
+        //       f2 = e[item.key2[i]]
+        //       if (f2) {
+        //         break
+        //       }
+        //     }
+        //   }
+        //   return f && f2 && e.keyCode === item.code
+        // })
+        // if (systemKey) {
+        //   return
+        // }
+        const withCtrl = e.ctrlKey || e.metaKey
+        if (withCtrl && !(ctrl || alt || shift)) {
+          dealCtrl(e, instance)
+          return
+        }
+        // const withAlt = e.altKey
+        // if (withAlt && !specialKey) {
+        //   return
+        // }
+        const withShift = e.shiftKey
+        // if (withShift && !specialKey) {
+        //   return
+        // }
+        // // TODO
+        // if (!this.dActiveElement) {
+        //   return
+        // }
+        // if (this.dActiveElement.uuid === '-1') {
+        //   return
+        // }
+        // e.stopPropagation()
+        // e.preventDefault()
+        const f = withShift ? 10 : 1
+        keyCodeOptions(e, { f })
       }
     },
-    dealCtrl(e: any) {
-      dealWithCtrl(e, this)
+    handleKeyup(store: Store<any>, checkCtrl: number | undefined) {
+      return (e: any) => {
+        console.log(e)
+        clearInterval(checkCtrl)
+        hadDown = false
+        if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
+          store.dispatch('updateAltDown', false)
+        }
+      }
+    },
+    dealCtrl(e: any, instance: any) {
+      dealWithCtrl(e, instance)
       console.log(e.key, e.keyCode)
     },
   },

src/views/Index.vue

@@ -8,10 +8,10 @@
 -->
 <template>
   <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
-    <div :style="style" class="top-nav">
+    <div :style="state.style" class="top-nav">
       <div class="top-nav-wrap">
         <div class="top-left">
-          <div class="name" @click="jump2home">{{ APP_NAME }}</div>
+          <div class="name" @click="jump2home">{{ state.APP_NAME }}</div>
           <div class="operation">
             <div :class="['operation-item', { disable: !undoable }]" @click="undoable ? handleHistory('undo') : ''"><i class="iconfont icon-undo" /></div>
             <div :class="['operation-item', { disable: !redoable }]" @click="redoable ? handleHistory('redo') : ''"><i class="iconfont icon-redo" /></div>
@@ -20,7 +20,7 @@
             <i style="font-size: 20px" class="icon sd-biaochi extra-operation" @click="changeLineGuides" />
           </el-tooltip>
         </div>
-        <HeaderOptions ref="options" v-model="isContinue" @change="optionsChange" />
+        <HeaderOptions ref="optionsRef" v-model="state.isContinue" @change="optionsChange" />
       </div>
     </div>
     <div class="page-design-index-wrap">
@@ -34,28 +34,32 @@
       <style-panel></style-panel>
     </div>
     <!-- 标尺 -->
-    <line-guides :show="showLineGuides" />
+    <line-guides :show="state.showLineGuides" />
     <!-- 缩放控制 -->
-    <zoom-control ref="zoomControl" />
+    <zoom-control ref="zoomControlRef" />
     <!-- 右键菜单 -->
     <right-click-menu />
     <!-- 旋转缩放组件 -->
     <Moveable />
     <!-- 遮罩百分比进度条 -->
     <ProgressLoading
-      :percent="downloadPercent"
-      :text="downloadText"
+      :percent="state.downloadPercent"
+      :text="state.downloadText"
       cancelText="取消"
       @cancel="downloadCancel"
-      @done="downloadPercent = 0"
+      @done="state.downloadPercent = 0"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import _config from '../config'
-import { defineComponent, reactive, toRefs } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import {
+  CSSProperties, computed, nextTick,
+  onBeforeUnmount, onMounted, reactive, ref,
+  getCurrentInstance
+} from 'vue'
+import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -66,125 +70,159 @@ 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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
 
-const beforeUnload = function (e: any) {
-  const confirmationMessage = '系统不会自动保存您未修改的内容'
-  ;(e || window.event).returnValue = confirmationMessage // Gecko and Trident
+type TState = {
+  style: CSSProperties
+  downloadPercent: number // 下载进度
+  downloadText: string
+  isContinue: boolean
+  APP_NAME: string
+  showLineGuides: boolean
+}
+
+const beforeUnload = function (e: Event): string {
+  const confirmationMessage: string = '系统不会自动保存您未修改的内容';
+
+  (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
   return confirmationMessage // Gecko and WebKit
 }
 
-export default defineComponent({
-  components: {
-    RightClickMenu,
-    Moveable,
-    HeaderOptions,
-    ProgressLoading,
-    designBoard,
-    zoomControl,
-    lineGuides,
-  },
-  // mixins: [shortcuts],
-  setup() {
-    !_config.isDev && window.addEventListener('beforeunload', beforeUnload)
+// mixins: [shortcuts],
+!_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
-    const state = reactive({
-      style: {
-        left: '0px',
-      },
-      // openDraw: false,
-      downloadPercent: 0, // 下载进度
-      downloadText: '',
-      isContinue: true,
-      APP_NAME: _config.APP_NAME,
-      showLineGuides: false,
-    })
-    // const draw = () => {
-    //   state.openDraw = true
-    // }
-    function jump2home() {
-      // const fullPath = window.location.href.split('/')
-      // window.open(fullPath[0] + '//' + fullPath[2])
-      window.open('https://xp.palxp.cn/')
-    }
-    return {
-      ...toRefs(state),
-      jump2home,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom']),
-    undoable() {
-      return !(this.dHistoryParams.index === -1 || (this.dHistoryParams === 0 && this.dHistoryParams.length === this.dHistoryParams.maxLength))
-    },
-    redoable() {
-      return !(this.dHistoryParams.index === this.dHistoryParams.length - 1)
-    },
-  },
-  // watch: {
-  //   $route() {
-  //     console.log('change route', this.$route.query)
-  //     this.loadData()
-  //   },
-  // },
-  mounted() {
-    this.initGroupJson(JSON.stringify(wGroup.setting))
-    window.addEventListener('scroll', this.fixTopBarScroll)
-    // window.addEventListener('click', this.clickListener)
-    document.addEventListener('keydown', this.handleKeydowm, false)
-    document.addEventListener('keyup', this.handleKeyup, false)
-    this.loadData()
-  },
-  beforeUnmount() {
-    window.removeEventListener('scroll', this.fixTopBarScroll)
-    // window.removeEventListener('click', this.clickListener)
-    document.removeEventListener('keydown', this.handleKeydowm, false)
-    document.removeEventListener('keyup', this.handleKeyup, false)
-    document.oncontextmenu = null
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
-    ...shortcuts.methods,
-    changeLineGuides() {
-      this.showLineGuides = !this.showLineGuides
-    },
-    downloadCancel() {
-      this.downloadPercent = 0
-      this.isContinue = false
-    },
-    loadData() {
-      // 初始化加载页面
-      const { id, tempid, tempType } = this.$route.query
-      ;(this.$refs as any).options.load(id, tempid, tempType, async () => {
-        ;(this.$refs as any).zoomControl.screenChange()
-        await this.$nextTick()
-        // 初始化激活的控件为page
-        this.selectWidget({
-          uuid: '-1',
-        })
-      })
-    },
-    zoomSub() {
-      ;(this.$refs as any).zoomControl.sub()
-    },
-    zoomAdd() {
-      ;(this.$refs as any).zoomControl.add()
-    },
-    save() {
-      ;(this.$refs as any).options.save()
-    },
-    fixTopBarScroll() {
-      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
-      this.style.left = `-${scrollLeft}px`
-    },
-    clickListener(e: Event) {
-      console.log('click listener', e)
-    },
-    optionsChange({ downloadPercent, downloadText }: any) {
-      this.downloadPercent = downloadPercent
-      this.downloadText = downloadText
-    },
+const {
+  dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
+} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+
+const state = reactive<TState>({
+  style: {
+    left: '0px',
   },
+  // openDraw: false,
+  downloadPercent: 0, // 下载进度
+  downloadText: '',
+  isContinue: true,
+  APP_NAME: _config.APP_NAME,
+  showLineGuides: false,
 })
+const optionsRef = ref<typeof HeaderOptions | null>(null)
+const zoomControlRef = ref<typeof zoomControl | null>(null)
+const store = useStore()
+const route = useRoute()
+
+// const draw = () => {
+//   state.openDraw = true
+// }
+
+function jump2home() {
+  // const fullPath = window.location.href.split('/')
+  // window.open(fullPath[0] + '//' + fullPath[2])
+  window.open('https://xp.palxp.cn/')
+}
+
+defineExpose({
+  jump2home,
+})
+
+const undoable = computed(() => {
+  return !(
+    dHistoryParams.value.index === -1 || 
+    (dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
+})
+
+const redoable = computed(() => {
+  return !(dHistoryParams.value.index === dHistoryParams.value.length - 1)
+})
+// watch: {
+//   $route() {
+//     console.log('change route', this.$route.query)
+//     this.loadData()
+//   },
+// },
+
+const { handleKeydowm, handleKeyup, dealCtrl } = shortcuts.methods
+let checkCtrl: number | undefined
+
+onMounted(() => {
+  store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
+  // initGroupJson(JSON.stringify(wGroup.setting))
+  window.addEventListener('scroll', fixTopBarScroll)
+  // window.addEventListener('click', this.clickListener)
+  const instance = getCurrentInstance()
+  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  loadData()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', fixTopBarScroll)
+  const instance = getCurrentInstance()
+  // window.removeEventListener('click', this.clickListener)
+  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.oncontextmenu = null
+})
+    // ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
+
+function handleHistory(data: string) {
+  store.dispatch('handleHistory', data)
+}
+
+function changeLineGuides() {
+  state.showLineGuides = !state.showLineGuides
+}
+
+function downloadCancel() {
+  state.downloadPercent = 0
+  state.isContinue = false
+}
+
+function loadData() {
+  // 初始化加载页面
+  const { id, tempid, tempType } = route.query
+  if (!optionsRef.value) return
+  optionsRef.value.load(id, tempid, tempType, async () => {
+    if (!zoomControlRef.value) return
+    zoomControlRef.value.screenChange()
+    await nextTick()
+    // 初始化激活的控件为page
+    store.dispatch('selectWidget', { uuid: '-1' })
+    // selectWidget({
+    //   uuid: '-1',
+    // })
+  })
+}
+
+function zoomSub() {
+  if (!zoomControlRef.value) return
+  zoomControlRef.value.sub()
+}
+
+function zoomAdd() {
+  if (!zoomControlRef.value) return
+  zoomControlRef.value.add()
+}
+
+function save() {
+  if (!optionsRef.value) return
+  optionsRef.value.save()
+}
+
+function fixTopBarScroll() {
+  const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+  state.style.left = `-${scrollLeft}px`
+}
+
+function clickListener(e: Event) {
+  console.log('click listener', e)
+}
+
+function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number, downloadText: string }) {
+  state.downloadPercent = downloadPercent
+  state.downloadText = downloadText
+}
 </script>
 
 <style lang="less" scoped>

src/views/Psd.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted, nextTick, onBeforeMount, ref } from 'vue'
+import { reactive, onMounted, nextTick, onBeforeMount, ref, getCurrentInstance } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
@@ -99,6 +99,9 @@ let loading: ReturnType<typeof useLoading> | null = null
 
 onMounted(async () => {
   await nextTick()
+  if (zoomControlRef.value){
+    zoomControlRef.value.screenChange()
+  }
   state.isDone = false
 })
 
@@ -158,19 +161,23 @@ const cancel = () => {
   window.open(`${window.location.protocol + '//' + window.location.host}/home?id=${route.query.id}`)
 }
 
-const {handleKeydowm, handleKeyup,} = shortcuts.methods
+const {handleKeydowm, handleKeyup, dealCtrl} = shortcuts.methods
 
 // ...mapGetters(['dPage', 'dZoom']),
 
+let checkCtrl: number | undefined
+
 onMounted(() => {
-  document.addEventListener('keydown', handleKeydowm, false)
-  document.addEventListener('keyup', handleKeyup, false)
+  const instance = getCurrentInstance()
+  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
   loadJS()
 })
 
 onBeforeMount(() => {
-  document.removeEventListener('keydown', handleKeydowm, false)
-  document.removeEventListener('keyup', handleKeyup, false)
+  const instance = getCurrentInstance()
+  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
   document.oncontextmenu = null
 })
 // ...mapActions(['selectWidget']),

src/views/components/HeaderOptions.vue

@@ -214,6 +214,7 @@ defineExpose({
   save,
   saveTemp,
   stateChange,
+  load,
 })
 </script>