merge: recovery some code

src/components/business/qrcode/index.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch, nextTick } from 'vue'
-import QRCodeStyling, {DotType, Options } from 'qr-code-styling'
+import QRCodeStyling, { Options } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
 import { generateOption } from './method'
 
@@ -20,10 +20,7 @@ export type TQrcodeProps = {
   height?: number
   image?: string
   value?: string
-  dotsOptions: {
+  dotsOptions: Options['dotsOptions']
-    color: string,
-    type: DotType,
-  }
 }
 
 const props = withDefaults(defineProps<TQrcodeProps>(), {

src/components/modules/layout/designBoard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
-    <el-scrollbar class="scroll-container">
+    <el-scrollbar>
     <div
       id="out-page"
       class="out-page"
@@ -55,16 +55,15 @@
         <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
       </div>
     </div>
-  </el-scrollbar>
+    </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { mapGetters, mapActions, useStore } from 'vuex'
-import { ElScrollbar } from 'element-plus'
 import { getTarget } from '@/common/methods/target'
-
+import { ElScrollbar } from 'element-plus'
 import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
 import PointImg from '@/utils/plugins/pointImg'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'

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

@@ -28,9 +28,10 @@
 import { ref, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
+// import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 
 const store = useStore()
 const route = useRoute()
@@ -59,7 +60,7 @@ onMounted(() => {
 
 function addQrcode() {
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wQrcode.setting))
+  let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2

src/components/modules/settings/colorSelect.vue

@@ -30,13 +30,19 @@ type TProps = {
 type TEmits = {
   (event: 'finish', data: string): void
   (event: 'update:modelValue', data: string): void
-  (event: 'change', data: string): void
+  (event: 'change', data: colorChangeData): void
 }
 
 type TState = {
   innerColor: string
 }
 
+export type colorChangeData = {
+  angle: number
+  color: string
+  mode: string
+}
+
 const props = withDefaults(defineProps<TProps>(), {
   label: '',
   modelValue: '',
@@ -118,7 +124,9 @@ const hide = () => {
   store.commit('setShowMoveable', true) // 恢复上一次的选择框
 }
 
-const colorChange = (color: string) => {
+
+const colorChange = (color: colorChangeData) => {
+  // console.log('color', color)
   emit('change', color)
 }
 

src/components/modules/settings/valueSelect.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-08-02 19:10:06
  * @Description: 选项选择（未拆分字体选择器）
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-11-20 18:21:55
+ * @LastEditTime: 2024-03-15 17:34:00
 -->
 <template>
   <div ref="select" class="value-select" :style="{ width: inputWidth }">

src/components/modules/widgets/pageStyle.vue

@@ -1,161 +1,175 @@
 <template>
   <div id="page-style">
-    <div v-if="showBgLib" style="width: 256px;height: 100%;">
+    <div v-if="state.showBgLib" style="width: 256px;height: 100%;">
-      <span class="header-back" @click="showBgLib = false">
+      <span class="header-back" @click="state.showBgLib = false">
         <i class="iconfont icon-right"></i> 选择背景
       </span>
       <bg-img-list-wrap style="padding-top: 2rem;" model="stylePanel" />
     </div>
-    <el-collapse v-else v-model="activeNames">
+    <el-collapse v-else v-model="state.activeNames">
       <el-collapse-item title="画布尺寸" name="1">
         <div class="position-size">
-          <number-input v-model="innerElement.width" label="宽" :maxValue="5000" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.width" label="宽" :maxValue="5000" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" label="高" :maxValue="5000" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.height" label="高" :maxValue="5000" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="背景设置" name="2">
-        <el-button style="width: 100%; margin: 0 0 1rem 0;" type="primary" link @click="showBgLib = true">在背景库中选择</el-button>
+        <el-button style="width: 100%; margin: 0 0 1rem 0;" type="primary" link @click="state.showBgLib = true">在背景库中选择</el-button>
-        <Tabs :value="mode" @update:value="onChangeMode">
+        <Tabs :value="state.mode" @update:value="onChangeMode">
-          <TabPanel v-for="label in modes" :key="label" :label="label"></TabPanel>
+          <TabPanel v-for="label in state.modes" :key="label" :label="label"></TabPanel>
         </Tabs>
-        <color-select v-show="mode === '颜色'" v-model="innerElement.backgroundColor" :modes="['纯色']" @change="colorChange" @finish="(value) => finish('backgroundColor', value)" />
+        <color-select v-show="state.mode === '颜色'" v-model="state.innerElement.backgroundColor" :modes="['纯色']" @change="colorChange" @finish="(value) => finish('backgroundColor', value)" />
         <!-- <bg-img-select :img="innerElement.backgroundImage"/> -->
-        <div v-if="mode === '图片' && innerElement.backgroundImage" style="margin-top: 2rem">
+        <div v-if="state.mode === '图片' && state.innerElement.backgroundImage" style="margin-top: 2rem">
-          <el-image style="max-height: 428px" :src="innerElement.backgroundImage" fit="contain"></el-image>
+          <el-image style="max-height: 428px" :src="state.innerElement.backgroundImage" fit="contain"></el-image>
           <el-button class="btn-wrap" size="small" @click="deleteBg">删除</el-button>
         </div>
-        <uploader v-show="mode === '图片'" class="btn-wrap" @done="uploadImgDone">
+        <uploader v-show="state.mode === '图片'" class="btn-wrap" @done="uploadImgDone">
-          <el-button style="width: 100%" plain>{{ innerElement.backgroundImage ? '更换背景' : '上传背景' }}图</el-button>
+          <el-button style="width: 100%" plain>{{ state.innerElement.backgroundImage ? '更换背景' : '上传背景' }}图</el-button>
         </uploader>
-        <el-button v-show="mode === '图片' && innerElement.backgroundImage" class="btn-wrap" size="small" @click="downloadBG">{{ downP ? downP + ' %' : '下载背景图' }}</el-button>
+        <el-button v-show="state.mode === '图片' && state.innerElement.backgroundImage" class="btn-wrap" size="small" @click="downloadBG">{{ state.downP ? state.downP + ' %' : '下载背景图' }}</el-button>
 
       </el-collapse-item>
     </el-collapse>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 画布组件样式
-const NAME = 'page-style'
+// const NAME = 'page-style'
-import { mapGetters, mapActions } from 'vuex'
+import { nextTick, onMounted, reactive, watch } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../settings/numberInput.vue'
-import colorSelect from '../settings/colorSelect.vue'
+import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
-import uploader from '@/components/common/Uploader/index.vue'
+import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import api from '@/api'
 import _dl from '@/common/methods/download'
 // import ColorPipette from '@/utils/plugins/color-pipette'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default {
+type TState = {
-  name: NAME,
+  activeNames: string[]
-  components: { numberInput, colorSelect, uploader, Tabs, TabPanel },
+  innerElement: Record<string, any>
-  data() {
+  tag: boolean
-    return {
+  ingoreKeys: string[]
-      activeNames: ['1', '2', '3', '4'],
+  downP: number
-      innerElement: {},
+  mode: string
-      tag: false,
+  modes: string[]
-      ingoreKeys: ['backgroundColor', 'name', 'width', 'height'],
+  showBgLib: boolean
-      downP: 0,
+}
-      mode: '颜色',
+
-      modes: ['颜色', '图片'],
+const store = useStore()
-      showBgLib: false
+const state = reactive<TState>({
-    }
+  activeNames: ['1', '2', '3', '4'],
+  innerElement: {},
+  tag: false,
+  ingoreKeys: ['backgroundColor', 'name', 'width', 'height'],
+  downP: 0,
+  mode: '颜色',
+  modes: ['颜色', '图片'],
+  showBgLib: false
+})
+const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+let _localTempBG: string | null = null
+
+watch(
+  () => dActiveElement.value,
+  () => {
+    change()
   },
-  computed: {
+  { deep: true }
-    ...mapGetters(['dActiveElement']),
+)
+
+watch(
+  () => state.innerElement,
+  () => {
+    changeValue()
   },
-  watch: {
+  { deep: true }
-    dActiveElement: {
+)
-      handler(newValue, oldValue) {
+
-        this.change()
+onMounted(() => {
-      },
+  change()
-      deep: true,
+})
-    },
+
-    innerElement: {
+// ...mapActions(['updatePageData']),
-      handler(newValue, oldValue) {
+function colorChange(e: colorChangeData) {
-        this.changeValue()
+  if (e.mode === '渐变') {
-      },
+    // setTimeout(() => {
-      deep: true,
+    //   console.log(1, e)
-    },
+    //   this.finish('backgroundImage', e.color)
-  },
+    // }, 1000)
-  created() {
+  }
-    this.change()
+}
-  },
+function onChangeMode(value: string) {
-  methods: {
+  state.mode = value
-    ...mapActions(['updatePageData']),
+  if (value === '颜色') {
-    colorChange(e) {
+    _localTempBG = state.innerElement.backgroundImage
-      if (e.mode === '渐变') {
+    finish('backgroundImage', '')
-        // setTimeout(() => {
+  } else {
-        //   console.log(1, e)
+    _localTempBG && finish('backgroundImage', _localTempBG)
-        //   this.finish('backgroundImage', e.color)
+  }
-        // }, 1000)
+}
-      }
+function change() {
-    },
+  state.mode = state.modes[0]
-    onChangeMode(value) {
+  state.tag = true
-      this.mode = value
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
-      if (value === '颜色') {
+  state.innerElement.backgroundImage && (state.mode = state.modes[1])
-        this._localTempBG = this.innerElement.backgroundImage
+}
-        this.finish('backgroundImage', '')
+function changeValue() {
+  if (state.tag) {
+    state.tag = false
+    return
+  }
+  for (let key in state.innerElement) {
+    if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+      if (state.ingoreKeys.indexOf(key) !== -1) {
+        dActiveElement.value[key] = state.innerElement[key]
       } else {
-        this._localTempBG && this.finish('backgroundImage', this._localTempBG)
+        store.dispatch('updatePageData', {
+          key: key,
+          value: state.innerElement[key],
+        })
+        // updatePageData({
+        //   key: key,
+        //   value: this.innerElement[key],
+        // })
       }
-    },
+    }
-    change() {
+  }
-      this.mode = this.modes[0]
+}
-      this.tag = true
+
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
+function finish(key: string, value: string | number) {
-      this.innerElement.backgroundImage && (this.mode = this.modes[1])
+  store.dispatch('updatePageData', {
-    },
+    key: key,
-    changeValue() {
+    value: value,
-      if (this.tag) {
+    pushHistory: true,
-        this.tag = false
+  })
-        return
+}
-      }
+async function uploadImgDone(img: TUploadDoneData) {
-      for (let key in this.innerElement) {
+  await api.material.addMyPhoto(img)
-        if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
+  store.dispatch('updatePageData', {
-          if (this.ingoreKeys.indexOf(key) !== -1) {
+    key: 'backgroundTransform',
-            this.dActiveElement[key] = this.innerElement[key]
+    value: {},
-          } else {
+  })
-            this.updatePageData({
+  finish('backgroundImage', img.url)
-              key: key,
+}
-              value: this.innerElement[key],
+async function deleteBg() {
-            })
+  _localTempBG = null
-          }
+  store.dispatch('updatePageData', {
-        }
+    key: 'backgroundImage',
-      }
+    value: '',
-    },
+    pushHistory: true,
-    finish(key, value) {
+  })
-      this.updatePageData({
+  await nextTick()
-        key: key,
+  state.mode = state.modes[1]
-        value: value,
+}
-        pushHistory: true,
+async function downloadBG() {
-      })
+  await _dl.downloadImg(state.innerElement.backgroundImage, (p) => {
-    },
+    state.downP = p < 99 ? p / 100 : 0
-    async uploadImgDone(img) {
+  })
-      await api.material.addMyPhoto(img)
-      this.updatePageData({
-        key: 'backgroundTransform',
-        value: {},
-      })
-      this.finish('backgroundImage', img.url)
-    },
-    async deleteBg() {
-      this._localTempBG = null
-      this.updatePageData({
-        key: 'backgroundImage',
-        value: '',
-        pushHistory: true,
-      })
-      await this.$nextTick()
-      this.mode = this.modes[1]
-    },
-    async downloadBG() {
-      await _dl.downloadImg(this.innerElement.backgroundImage, (p) => {
-        this.downP = p < 99 ? p / 100 : 0
-      })
-    },
-  },
 }
 </script>
 

src/components/modules/widgets/wGroup/wGroup.vue

@@ -26,7 +26,7 @@
 // 组合组件
 const NAME = 'w-group'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+import { useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
@@ -55,26 +55,26 @@ const widget = ref<HTMLElement | null>(null)
 const ratio = ref(0)
 const temp = ref<Record<string, any>>({})
 const compWidgetsRecord = ref<Record<string, any>>({})
-const setting = {
+// const setting = {
-  name: '组合',
+//   name: '组合',
-  type: NAME,
+//   type: NAME,
-  uuid: -1,
+//   uuid: -1,
-  width: 0,
+//   width: 0,
-  height: 0,
+//   height: 0,
-  left: 0,
+//   left: 0,
-  top: 0,
+//   top: 0,
-  transform: '',
+//   transform: '',
-  opacity: 1,
+//   opacity: 1,
-  parent: '-1',
+//   parent: '-1',
-  isContainer: true,
+//   isContainer: true,
-  record: {
+//   record: {
-    width: 0,
+//     width: 0,
-    height: 0,
+//     height: 0,
-    minWidth: 0,
+//     minWidth: 0,
-    minHeight: 0,
+//     minHeight: 0,
-    dir: 'none',
+//     dir: 'none',
-  },
+//   },
-}
+// }
 
 const timer = ref<number | null>(null)
 const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
@@ -235,9 +235,9 @@ function keySetValue(uuid: string, key: keyof TParamsData, value: number) {
   }, 10)
 }
 
-defineExpose({
+// defineExpose({
-  setting
+//   setting
-})
+// })
 
 </script>
 

src/components/modules/widgets/wQrcode/wQrcode.vue

@@ -7,8 +7,8 @@
 -->
 <template>
   <div
-    :id="params.uuid"
+    :id="`${params.uuid}`"
-    ref="widget"
+    ref="widgetRef"
     :class="['w-qrcode', { 'layer-lock': params.lock }]"
     :style="{
       position: 'absolute',
@@ -19,109 +19,101 @@
       opacity: params.opacity,
     }"
   >
-    <QRCode ref="qrcode" v-bind="qrCodeOptions" :width="width" :height="width" class="target" :image="params.url" :value="params.value" />
+    <QRCode
+      ref="qrcode"
+      v-bind="state.qrCodeOptions"
+      :width="width"
+      :height="width"
+      class="target"
+      :image="params.url"
+      :value="params.value"
+    />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 图片组件
-const NAME = 'w-qrcode'
+// const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import QRCode from '@/components/business/qrcode'
+import { TWQrcodeSetting } from './wQrcodeSetting';
+import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { Options } from 'qr-code-styling';
 
-export default {
+type TProps = {
-  name: NAME,
+  params: TWQrcodeSetting & {
-  components: { QRCode },
+    rotate?: number
-  setting: {
+    lock?: boolean
-    name: '二维码',
+  }
-    type: NAME,
+  parent: {
-    uuid: -1,
+    top: number
-    width: 300,
+    left: number
-    height: 300,
+  }
-    left: 0,
+}
-    top: 0,
+
-    zoom: 1,
+type TState = {
-    transform: '',
+  qrCodeOptions: Options
-    radius: 0,
+}
-    opacity: 1,
+
-    parent: '-1',
+const store = useStore()
-    url: '',
+const props = defineProps<TProps>()
-    dotType: 'classy',
+const state = reactive<TState>({
-    dotColorType: 'single',
+  qrCodeOptions: {}
-    dotRotation: 270,
+})
-    dotColor: '#35495E',
+const { dActiveElement, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
-    dotColor2: '#35495E',
+const width = computed(() => Number(props.params.width))
-    value: 'https://xp.palxp.cn',
+const widgetRef = ref<HTMLElement | null>(null)
-    setting: [],
+
-    record: {
+watch(
-      width: 0,
+  () => props.params,
-      height: 0,
+  () => {
-      minWidth: 10,
+    changeValues()
-      minHeight: 10,
-      dir: 'all',
-    },
   },
-  props: ['params', 'parent'],
+  { immediate: true, deep: true, }
-  data() {
+)
-    return {
+
-      qrCodeOptions: {},
+onUpdated(() => {
-    }
+  updateRecord()
-  },
+  store.commit('updateRect')
-  computed: {
+})
-    ...mapGetters(['dActiveElement', 'dZoom']),
+
-    width() {
+onMounted(async () => {
-      return Number(this.params.width)
+  updateRecord()
-    },
+  await nextTick()
-  },
+  if (widgetRef.value){
-  watch: {
+    props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
-    params: {
+  }
-      async handler(nval) {
+})
-        this.changeValues()
+// ...mapActions(['updateWidgetData']),
+function updateRecord() {
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    if (!widgetRef.value) return
+    record.width = widgetRef.value.offsetWidth
+    record.height = widgetRef.value.offsetHeight
+  }
+  // this.updateZoom()
+}
+
+function changeValues() {
+  state.qrCodeOptions = {
+    qrOptions: { typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' },
+    // dotsOptions: { color: '#999999' },
+    dotsOptions: {
+      type: props.params.dotType,
+      color: props.params.dotColor,
+      gradient: {
+        type: 'linear',
+        rotation: props.params.dotRotation,
+        colorStops: [
+          { offset: 0, color: props.params.dotColor },
+          { offset: 1, color: props.params.dotColorType === 'single' ? props.params.dotColor : props.params.dotColor2 },
+        ],
       },
-      immediate: true,
-      deep: true,
     },
-  },
+  }
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
-
-  async mounted() {
-    this.updateRecord()
-    await this.$nextTick()
-    this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-  },
-  methods: {
-    ...mapActions(['updateWidgetData']),
-    updateRecord() {
-      if (this.dActiveElement.uuid === this.params.uuid) {
-        let record = this.dActiveElement.record
-        record.width = this.$refs.widget.offsetWidth
-        record.height = this.$refs.widget.offsetHeight
-      }
-      // this.updateZoom()
-    },
-    changeValues() {
-      this.qrCodeOptions = {
-        qrOptions: { typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' },
-        // dotsOptions: { color: '#999999' },
-        dotsOptions: {
-          type: this.params.dotType,
-          color: this.params.dotColor,
-          gradient: {
-            type: 'linear',
-            rotation: this.params.dotRotation,
-            colorStops: [
-              { offset: 0, color: this.params.dotColor },
-              { offset: 1, color: this.params.dotColorType === 'single' ? this.params.dotColor : this.params.dotColor2 },
-            ],
-          },
-        },
-      }
-    },
-  },
 }
 </script>
 

src/components/modules/widgets/wQrcode/wQrcodeSetting.ts

@@ -0,0 +1,61 @@
+import { DotType } from "qr-code-styling"
+
+export type TWQrcodeSetting = {
+  name: string
+  type: string
+  uuid: string | number
+  width: number
+  height: number
+  left: number
+  top: number
+  zoom: number
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  url: string
+  dotType: DotType
+  dotColorType: string
+  dotRotation: number
+  dotColor: string
+  dotColor2: string
+  value: string
+  setting: Record<string, any>[]
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  }
+}
+
+export const wQrcodeSetting: TWQrcodeSetting = {
+  name: '二维码',
+  type: 'w-qrcode',
+  uuid: -1,
+  width: 300,
+  height: 300,
+  left: 0,
+  top: 0,
+  zoom: 1,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  url: '',
+  dotType: 'classy',
+  dotColorType: 'single',
+  dotRotation: 270,
+  dotColor: '#35495E',
+  dotColor2: '#35495E',
+  value: 'https://xp.palxp.cn',
+  setting: [],
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+    dir: 'all',
+  },
+}

src/components/modules/widgets/wSvg/wSvg.vue

@@ -1,3 +1,6 @@
+<!--
+  TODO: 重构
+-->
 <template>
   <div
     :id="params.uuid"

src/components/modules/widgets/wText/wText.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    :id="params.uuid"
+    :id="`${params.uuid}`"
     ref="widget"
-    v-loading="loading"
+    v-loading="state.loading"
-    :class="['w-text', { editing: editable, 'layer-lock': params.lock }, params.uuid]"
+    :class="['w-text', { editing: state.editable, 'layer-lock': params.lock }, params.uuid]"
     :style="{
       position: 'absolute',
       left: params.left - parent.left + 'px',
@@ -27,17 +27,17 @@
     }"
     @dblclick="(e) => dblclickText(e)"
   >
-    <template v-if="params.textEffects && !editable">
+    <template v-if="params.textEffects && !state.editable">
       <div
         v-for="(ef, efi) in params.textEffects"
         :key="efi + 'effect'"
         :style="{
           fontFamily: `'${params.fontClass.value}'`,
           color: ef.filling && ef.filling.enable && ef.filling.type === 0 ? ef.filling.color : 'transparent',
-          webkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width}px ${ef.stroke.color}` : undefined,
+          WebkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width}px ${ef.stroke.color}` : undefined,
           textShadow: ef.shadow && ef.shadow.enable ? `${ef.shadow.offsetX}px ${ef.shadow.offsetY}px ${ef.shadow.blur}px ${ef.shadow.color}` : undefined,
           backgroundImage: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : getGradientOrImg(ef)) : undefined,
-          webkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined,
+          WebkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined,
           transform: ef.offset && ef.offset.enable ? `translate(${ef.offset.x}px, ${ef.offset.y}px)` : undefined,
         }"
         class="edit-text effect-text"
@@ -45,203 +45,188 @@
         v-html="params.text"
       ></div>
     </template>
-    <div ref="editWrap" :style="{ fontFamily: `'${params.fontClass.value}'` }" class="edit-text" spellcheck="false" :contenteditable="editable ? 'plaintext-only' : false" @input="writingText($event)" @blur="writeDone($event)" v-html="params.text"></div>
+    <div
+      ref="editWrap" :style="{ fontFamily: `'${params.fontClass.value}'` }"
+      class="edit-text" spellcheck="false" 
+      :contenteditable="state.editable ? 'plaintext-only' : false"
+      @input="writingText($event)"
+      @blur="writeDone($event)"
+      v-html="params.text"></div>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 // 文本组件
-const NAME = 'w-text'
+// const NAME = 'w-text'
 
-import { defineComponent, reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
+import { reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import { fontWithDraw } from '@/utils/widgets/loadFontRule'
-import getGradientOrImg from './getGradientOrImg.ts'
+import getGradientOrImg from './getGradientOrImg'
+import { wTextSetting } from './wTextSetting'
 
-export default defineComponent({
+export type TwTextParams = {
-  name: NAME,
+  rotate?: number
-  setting: {
+  lock?: boolean
-    name: '文本',
+  width?: number
-    type: NAME,
+  height?: number
-    uuid: -1,
+} & typeof wTextSetting
-    editable: false,
-    left: 0,
-    top: 0,
-    transform: '',
-    lineHeight: 1.5,
-    letterSpacing: 0,
-    fontSize: 24,
-    zoom: 1,
-    fontClass: {
-      alias: '站酷快乐体',
-      id: 543,
-      value: 'zcool-kuaile-regular',
-      url: 'https://lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2',
-    },
-    fontFamily: 'SourceHanSansSC-Regular',
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    writingMode: 'horizontal-tb',
-    textDecoration: 'none',
-    color: '#000000ff',
-    textAlign: 'left',
-    text: '',
-    opacity: 1,
-    backgroundColor: '',
-    parent: '-1',
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 0,
-      minHeight: 0,
-      dir: 'horizontal',
-    },
-  },
-  props: ['params', 'parent'],
-  setup(props) {
-    const store = useStore()
-    const route = useRoute()
-    const state = reactive({
-      loading: false,
-      editable: false,
-      loadFontDone: false,
-    })
-    const widget = ref(null)
-    const editWrap = ref(null)
 
-    const dActiveElement = computed(() => store.getters.dActiveElement)
+type TProps = {
-    const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
+  params: TwTextParams
+  parent: {
+    left: number
+    top: number
+  }
+}
 
-    onUpdated(() => {
+const props = defineProps<TProps>()
-      updateRecord()
-    })
 
-    onMounted(() => {
+const store = useStore()
-      updateRecord()
+const route = useRoute()
-      props.params.transform && (widget.value.style.transform = props.params.transform)
+const state = reactive({
-      props.params.rotate && (widget.value.style.transform += `translate(0px, 0px) rotate(${props.params.rotate}) scale(1, 1)`)
+  loading: false,
-      // store.commit('updateRect')
+  editable: false,
-    })
+  loadFontDone: '',
+})
+const widget = ref<HTMLElement | null>(null)
+const editWrap = ref<HTMLElement | null>(null)
 
-    watch(
+const dActiveElement = computed(() => store.getters.dActiveElement)
-      () => props.params,
+const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
-      async (nval) => {
-        updateText()
-        if (state.loading) {
-          return
-        }
-        let font = nval.fontClass
-        const isDone = font.value === state.loadFontDone
 
-        if (font.url && !isDone) {
+onUpdated(() => {
-          if (font.id && isDraw.value) {
+  updateRecord()
-            // 如果为绘制模式，且开启了字体抽取，那么会跳过加载字体url的逻辑
+})
-            // 此前该功能在demo中存在换行bug，实际上是由于抽取字体时忽略了空格导致的
-            state.loading = false
-            return
-          }
-          state.loading = !isDraw.value
-          const loadFont = new window.FontFace(font.value, `url(${font.url})`)
-          await loadFont.load()
-          document.fonts.add(loadFont)
-          state.loadFontDone = font.value
-          state.loading = false
-        } else {
-          state.loading = false
-        }
-      },
-      { immediate: true, deep: true },
-    )
 
-    watch(
+onMounted(() => {
-      () => state.editable,
+  updateRecord()
-      (value) => {
-        store.dispatch('updateWidgetData', {
-          uuid: props.params.uuid,
-          key: 'editable',
-          value,
-          pushHistory: false,
-        })
-      },
-    )
 
-    function updateRecord() {
+  if (!widget.value) return
-      if (dActiveElement.value.uuid === props.params.uuid) {
+  props.params.transform && (widget.value.style.transform = props.params.transform)
-        let record = dActiveElement.value.record
+  props.params.rotate && (widget.value.style.transform += `translate(0px, 0px) rotate(${props.params.rotate}) scale(1, 1)`)
-        record.width = widget.value.offsetWidth
+  // store.commit('updateRect')
-        record.height = widget.value.offsetHeight
+})
-        record.minWidth = props.params.fontSize
+
-        record.minHeight = props.params.fontSize * props.params.lineHeight
+watch(
-        writingText()
+  () => props.params,
+  async (nval) => {
+    updateText()
+    if (state.loading) {
+      return
+    }
+    let font = nval.fontClass
+    const isDone = font.value === state.loadFontDone
+
+    if (font.url && !isDone) {
+      if (font.id && isDraw.value) {
+        // 如果为绘制模式，且开启了字体抽取，那么会跳过加载字体url的逻辑
+        // 此前该功能在demo中存在换行bug，实际上是由于抽取字体时忽略了空格导致的
+        state.loading = false
+        return
       }
-    }
+      state.loading = !isDraw.value
-
+      const loadFont = new window.FontFace(font.value, `url(${font.url})`)
-    function updateText(e) {
+      await loadFont.load()
-      const value = e ? e.target.innerHTML : props.params.text.replace(/\n/g, '<br/>')
+      document.fonts.add(loadFont)
-      // const value = (e ? e.target.innerText : props.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
+      state.loadFontDone = font.value
-      if (value !== props.params.text) {
+      state.loading = false
-        store.dispatch('updateWidgetData', {
+    } else {
-          uuid: props.params.uuid,
+      state.loading = false
-          key: 'text',
-          value,
-          pushHistory: false,
-        })
-      }
-    }
-
-    function writingText(e) {
-      // updateText(e)
-      // TODO: 修正文字选框高度
-      const el = editWrap.value || widget.value
-      store.dispatch('updateWidgetData', {
-        uuid: props.params.uuid,
-        key: 'height',
-        value: el.offsetHeight,
-        pushHistory: false,
-      })
-      store.commit('updateRect')
-    }
-
-    function writeDone(e) {
-      state.editable = false
-      setTimeout(() => {
-        store.dispatch('pushHistory', '文字修改')
-      }, 100)
-      updateText(e)
-    }
-
-    function dblclickText(e) {
-      // store.commit('setShowMoveable', false)
-      state.editable = true
-      const el = editWrap.value || widget.value
-      setTimeout(() => {
-        el.focus()
-        if (document.selection) {
-          const range = document.body.createTextRange()
-          range.moveToElementText(el)
-          range.select()
-        } else if (window.getSelection) {
-          const range = document.createRange()
-          range.selectNodeContents(el)
-          window.getSelection().removeAllRanges()
-          window.getSelection().addRange(range)
-        }
-      }, 100)
-    }
-
-    return {
-      ...toRefs(state),
-      getGradientOrImg,
-      updateRecord,
-      writingText,
-      updateText,
-      writeDone,
-      dblclickText,
-      widget,
-      editWrap,
     }
   },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => state.editable,
+  (value) => {
+    store.dispatch('updateWidgetData', {
+      uuid: props.params.uuid,
+      key: 'editable',
+      value,
+      pushHistory: false,
+    })
+  },
+)
+
+function updateRecord() {
+  if (!widget.value) return
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    record.width = widget.value.offsetWidth
+    record.height = widget.value.offsetHeight
+    record.minWidth = props.params.fontSize
+    record.minHeight = props.params.fontSize * props.params.lineHeight
+    writingText()
+  }
+}
+
+function updateText(e?: Event) {
+  const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text.replace(/\n/g, '<br/>')
+  // const value = (e ? e.target.innerText : props.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
+  if (value !== props.params.text) {
+    store.dispatch('updateWidgetData', {
+      uuid: props.params.uuid,
+      key: 'text',
+      value,
+      pushHistory: false,
+    })
+  }
+}
+
+function writingText(e?: Event) {
+  // updateText(e)
+  // TODO: 修正文字选框高度
+  const el = editWrap.value || widget.value
+  if (!el) return
+  store.dispatch('updateWidgetData', {
+    uuid: props.params.uuid,
+    key: 'height',
+    value: el.offsetHeight,
+    pushHistory: false,
+  })
+  store.commit('updateRect')
+}
+
+function writeDone(e: Event) {
+  state.editable = false
+  setTimeout(() => {
+    store.dispatch('pushHistory', '文字修改')
+  }, 100)
+  updateText(e)
+}
+
+function dblclickText(_: MouseEvent) {
+  // store.commit('setShowMoveable', false)
+  state.editable = true
+  const el = editWrap.value || widget.value
+  setTimeout(() => {
+    if (!el) return
+    el.focus()
+    if (document.selection) {
+      const range = document.body.createTextRange()
+      range.moveToElementText(el)
+      range.select()
+    } else {
+      const range = document.createRange()
+      range.selectNodeContents(el);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+    }
+  }, 100)
+}
+
+defineExpose({
+  getGradientOrImg,
+  updateRecord,
+  writingText,
+  updateText,
+  writeDone,
+  dblclickText,
+  widget,
+  editWrap,
 })
 </script>
 

src/components/modules/widgets/wText/wTextSetting.ts

@@ -0,0 +1,101 @@
+import { StyleValue } from "vue"
+
+export type TwTextData = {
+  name: string
+  type: string
+  uuid: number
+  editable: boolean,
+  left: number
+  top: number
+  transform: string
+  lineHeight: number
+  letterSpacing: number
+  fontSize: number
+  zoom: number
+  fontClass: {
+    alias: string
+    id: number
+    value: string
+    url: string
+  },
+  fontFamily: string
+  fontWeight: string
+  fontStyle: string
+  writingMode: StyleProperty.WritingMode
+  textDecoration: string
+  color: string
+  textAlign: StyleProperty.TextAlign
+  text: string
+  opacity: number
+  backgroundColor: string
+  parent: string
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  },
+  textEffects?: {
+    filling: {
+      enable: boolean
+      type: number
+      color: string
+    }
+    stroke: {
+      enable: boolean
+      width: number
+      color: string
+    }
+    shadow: {
+      enable: boolean
+      offsetY: number
+      offsetX: number
+      blur: number
+      color: string
+    }
+    offset: {
+      enable: boolean
+      x: number
+      y: number
+    }
+  }[]
+}
+
+export const wTextSetting: TwTextData = {
+  name: '文本',
+  type: 'w-text',
+  uuid: -1,
+  editable: false,
+  left: 0,
+  top: 0,
+  transform: '',
+  lineHeight: 1.5,
+  letterSpacing: 0,
+  fontSize: 24,
+  zoom: 1,
+  fontClass: {
+    alias: '站酷快乐体',
+    id: 543,
+    value: 'zcool-kuaile-regular',
+    url: 'https://lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2',
+  },
+  fontFamily: 'SourceHanSansSC-Regular',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  writingMode: 'horizontal-tb',
+  textDecoration: 'none',
+  color: '#000000ff',
+  textAlign: 'left',
+  text: '',
+  opacity: 1,
+  backgroundColor: '',
+  parent: '-1',
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 0,
+    minHeight: 0,
+    dir: 'horizontal',
+  },
+}

src/mixins/methods/dealWithCtrl.ts

@@ -3,7 +3,7 @@
  * @Date: 2022-03-09 16:29:54
  * @Description: 处理和ctrl建相关的操作
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-09 09:49:54
+ * @LastEditTime: 2024-03-15 17:34:51
  */
 import store from '@/store'
 import handlePaste from './handlePaste'

src/mixins/methods/handlePaste.ts

@@ -3,7 +3,7 @@
  * @Date: 2023-10-09 09:47:40
  * @Description: 处理剪贴板
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-09 10:35:21
+ * @LastEditTime: 2024-03-15 17:35:18
  */
 
 // window.addEventListener('paste', (e: any) => {

src/types/global.d.ts

@@ -63,3 +63,14 @@ interface MouseEvent {
   layerY: number
 }
 
+interface Document {
+  selection?: Selection
+}
+
+interface HTMLElement {
+  createTextRange(): {
+    moveToElementText(el: HTMLElement): void
+    select(): void
+  }
+}
+

src/types/style.d.ts

@@ -0,0 +1,6 @@
+
+
+namespace StyleProperty {
+  type TextAlign = "center" | "end" | "left" | "right" | "start";
+  type WritingMode = Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl";
+}

src/views/Psd.vue

@@ -60,7 +60,7 @@ import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
-import wText from '@/components/modules/widgets/wText/wText.vue'
+// import wText from '@/components/modules/widgets/wText/wText.vue'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
@@ -71,6 +71,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'
 import { processPSD2Page } from '@/utils/plugins/psd'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 
 type TState = {
   isDone: boolean
@@ -124,7 +125,7 @@ async function loadPSD(file: File) {
 
   setTimeout(async () => {
     const types: any = {
-      text: wText.setting,
+      text: wTextSetting,
       image: wImage.setting,
     }
     for (let i = 0; i < data.clouds.length; i++) {