Merge pull request #93 from JeremyYu-cn/feat-upgrade-vue3

Feat: Convert wImage component to composition API

README.md

@@ -1,19 +1,21 @@
-**[在线体验网址](https://design.palxp.cn/)** | **[中文文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667) | [架构说明](https://xp.palxp.cn/#/articles/1689321259854)
+**[在线体验网站](https://design.palxp.cn/)** | **[在线文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667)
 
 ---
 
-## Poster Design
+## 迅排设计
 
-迅排设计是一款漂亮易用且功能强大的开源创意图片编辑器，是对标稿定设计、创客贴、Canva 等商业产品的免费在线设计工具。
+一款漂亮易用且功能强大的创意图片编辑器，对标稿定设计、创客贴、Canva 等商业产品。
+
+适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现云端编辑、迅速完成图文排版。
 
 [![](https://xp.palxp.cn/images/2023-7-16-1689500112694.gif)](https://design.palxp.cn/)
 
-适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现云端编辑、迅速完成图文排版。
+### 特点
 
 - 丝滑的页面操作体验，丰富的交互细节，基础功能完善
 - 采用服务端生成图片，能确保多端出图统一性，支持各种 CSS 特性
 - 简易 AI 抠图工具，上传图片一键去除背景
-- 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus，开发体验畅快
+- 技术栈：Vue3 、Vite5 、Vuex 、ElementPlus，开发体验畅快
 - 图片生成：Puppeteer、Express
 
 ### 支持功能
@@ -35,25 +37,35 @@
 git clone https://github.com/palxiao/poster-design.git
 cd poster-design
 npm run prepared
-npm run serve
+npm run dev
+cd screreenshot
+npm run dev
 ```
 
 ![](https://xp.palxp.cn/images/2023-7-16-1689498291322.png)
 
-访问 http://127.0.0.1:5173/ 查看网页。点此查看[完整说明文档](https://xp.palxp.cn/#/articles/1689319644311)。
+访问 http://127.0.0.1:5173/ 查看网页。点此查看[更多说明文档](https://xp.palxp.cn/#/articles/1689319644311)。
 
 ### 图片生成服务
 
 代码位于根目录 [/screenshot](https://github.com/palxiao/poster-design/tree/main/screenshot)，接口API文档点此查看：[接口 API 文档](https://xp.palxp.cn/apidoc/screenshot.html)。
 
-> 更多相关事项请进入该目录下查看 [README.md](https://github.com/palxiao/poster-design/blob/main/screenshot/README.md) 文件。 Docker 部署：[参考说明](https://xp.palxp.cn/#/articles/1689319644311?id=docker%e5%ae%b9%e5%99%a8)。
-
 ### 服务端
 
-目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
+后端需要自己开发，目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
 
 ## 其它
 
+我们尝试沉淀一个高质量内容社区，形成可持续学习的平台，同时解决开发者在项目中遇到的疑难和困惑，帮大家少走一些弯路。
+
+<img style="width: 380px;" src="https://github.com/palxiao/poster-design/assets/21021314/643dcc8b-ef73-4c76-a78c-a7c377b5f268" />
+
+也欢迎关注公众号：品味前端，回复“加群”进行交流。
+
+<img style="width: 380px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" />
+
+-----
+
 本项目最早使用 Vue2 开发，现改用 Vue3 重构中。[一些迭代计划记录](https://xp.palxp.cn/#/articles/1689319986889?id=%e8%bf%ad%e4%bb%a3%e8%ae%a1%e5%88%92).
 
 目前开源版仍在持续迭代中，还有很多的不足，可以将你遇到的问题在 Issues 中提出，或者提交 Pull Request 帮助完善。
@@ -67,13 +79,7 @@ npm run serve
 - [qr-code-styling](https://qr-code-styling.com/): 风格化二维码
 - [rembg](https://github.com/danielgatis/rembg): 图片抠图，使用 u2net 预训练模型
 
-### 交流群
+开源不易，最后别忘了给本项目点个 **Star** ~
-
-| 作者微信：备注加群 | 关注公众号 |
-| --- | --- |
-| <img style="width: 240px;" src="https://xp.palxp.cn/images/2024-3-1-1709306328344.png" /> | <img style="width: 320px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" /> |
-
-开源不易，别忘了给本项目点个 **Star** ~
 
 [![Star History Chart](https://api.star-history.com/svg?repos=palxiao/poster-design&type=Date)](https://star-history.com/#palxiao/poster-design&Date)
 

src/assets/data/LayerIconList.ts

@@ -6,12 +6,7 @@
  * @LastEditTime: 2024-03-01 20:55:51
  */
 
-export type LayerIconList = {
+import { TIconItemSelectData } from "@/components/modules/settings/iconItemSelect.vue"
-  key: string
-  icon: string
-  tip: string
-  value: number
-}
 
 export default [
   {
@@ -26,4 +21,4 @@ export default [
     tip: '下一层',
     value: -1,
   },
-] as LayerIconList[]
+] as TIconItemSelectData[]

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -9,7 +9,8 @@
 // import { getImage } from '../getImgDetail'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import wText from '@/components/modules/widgets/wText/wText.vue'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
@@ -22,11 +23,12 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.fontWeight = item.fontWeight
   }
   if (type === 'image' || type === 'mask') {
-    setting = JSON.parse(JSON.stringify(wImage.setting))
+    setting = JSON.parse(JSON.stringify(wImageSetting))
     const img = await setImageData(item.value)
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
     setting.imgUrl = item.value.url
+    console.log("setting", setting)
   }
   if (type === 'mask') {
     setting.mask = item.value.url

src/components/business/picture-selector/index.vue

@@ -74,7 +74,7 @@ const load = async (init?: boolean) => {
   loading = true
   page += 1
   api.material.getMyPhoto({ page }).then(({ list }) => {
-    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
+    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list as TGetImageListResult[]))
     setTimeout(() => {
       loading = false
     }, 100)

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

@@ -1,5 +1,6 @@
 <template>
   <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
+    <!-- <el-scrollbar> -->
     <div
       id="out-page"
       class="out-page"
@@ -54,6 +55,7 @@
         <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
       </div>
     </div>
+    <!-- </el-scrollbar> -->
   </div>
 </template>
 
@@ -61,7 +63,7 @@
 import { nextTick, onMounted, ref } from 'vue'
 import { mapGetters, mapActions, useStore } from 'vuex'
 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/GraphListWrap.vue

@@ -41,7 +41,8 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { mapActions, mapGetters } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -159,7 +160,7 @@ export default defineComponent({
         return
       }
       this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
+      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
       const img: any = await setImageData(item)
 
       setting.width = img.width

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

@@ -28,7 +28,8 @@
 // 图片列表
 const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -64,7 +65,7 @@ export default {
     const selectImg = async (index, list) => {
       const item = list ? list[index] : state.recommendImgList[index]
       store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = JSON.parse(JSON.stringify(wImage.setting))
+      let setting = JSON.parse(JSON.stringify(wImageSetting))
       const img = await setImageData(item) // await getImage(item.url)
       setting.width = img.width
       setting.height = img.height // parseInt(100 / item.value.ratio, 10)

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

@@ -42,7 +42,8 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage'
 import useConfirm from '@/common/methods/confirm'
 import { TGetImageListResult, TMyPhotoResult } from '@/api/material'
@@ -158,7 +159,7 @@ onMounted(() => {
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wImage.setting))
+  let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)

src/components/modules/settings/iconItemSelect.vue

@@ -22,20 +22,22 @@
 // 图标按钮选择组件
 // const NAME = 'icon-item-select'
 
-type TPropData = {
+export type TIconItemSelectData = {
-  select: boolean,
+  key?: string
-  extraIcon: boolean,
+  select?: boolean,
-  tip: string
+  extraIcon?: boolean,
+  tip?: string
   icon?: string
+  value?: string | number
 }
 
 type TProps = {
   label?: string
-  data: TPropData[]
+  data: TIconItemSelectData[]
 }
 
 type TEmits = {
-  (event: 'finish', data: TPropData): void
+  (event: 'finish', data: TIconItemSelectData): void
 }
 
 const props = withDefaults(defineProps<TProps>(), {
@@ -45,7 +47,7 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 
-function selectItem(item: TPropData) {
+function selectItem(item: TIconItemSelectData) {
   if (typeof item.select !== 'undefined') {
     item.select = !item.select
   }

src/components/modules/settings/numberSlider.vue

@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 const emit = defineEmits<TEmits>()
 
-const innerValue = ref<number>(0)
+const innerValue = ref<number>(1)
 
 watch(
   () => innerValue.value,

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 }">
@@ -65,7 +65,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 
 type TProps = {
   label?: string
-  modelValue?: Record<string, any>
+  modelValue?: Record<string, any> | string | number
   suffix?: string
   data: Record<string, any>
   disable?: boolean
@@ -189,9 +189,8 @@ function down() {
 </style>
 
 <style lang="less" scoped>
-// Color variables (appears count calculates by raw css)
+@color0: #e1e1e1;
-@color0: #e1e1e1; // Appears 2 times
+@color1: #d1d1d1;
-@color1: #d1d1d1; // Appears 2 times
 
 .value-select {
   // height: 60px;

src/components/modules/widgets/wImage/wImage.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     :id="params.uuid"
-    ref="widget"
+    ref="widgetRef"
     :class="['w-image', { 'layer-lock': params.lock }]"
     :style="{
-      position,
+      position: state.position,
       left: params.left - parent.left + 'px',
       top: params.top - parent.top + 'px',
       width: params.width + 'px',
@@ -12,12 +12,18 @@
       opacity: params.opacity,
     }"
   >
-    <div v-if="cropEdit" :ref="params.uuid + '_ebox'" :style="editBoxStyle" class="svg__edit__wrap">
+    <div
+      v-if="cropEdit"
+      :id="params.uuid + '_ebox'"
+      :ref="params.uuid + '_ebox'"
+      :style="state.editBoxStyle"
+      class="svg__edit__wrap"
+    >
       <img class="edit__model" :src="params.imgUrl" />
     </div>
     <div :style="{ transform: params.flip ? `rotate${params.flip}(180deg)` : undefined, borderRadius: params.radius + 'px', '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : undefined}` }" :class="['img__box', { mask: params.mask }]">
-      <div v-if="params.isNinePatch" ref="target" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
+      <div v-if="params.isNinePatch" ref="targetRef" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
-      <img v-else ref="target" class="target" style="transform-origin: center" :src="params.imgUrl" />
+      <img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" />
     </div>
     <div v-if="isMask" class="drop__mask">
       <div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div>
@@ -25,90 +31,117 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件
-const NAME = 'w-image'
+// const NAME = 'w-image'
-
+import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import { getMatrix } from '@/common/methods/handleTransform'
+import setting from "./wImageSetting"
 import PointImg from '@/utils/plugins/pointImg'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
+// import { storeToRefs } from 'pinia'
+// import { useCanvasStore } from '@/pinia'
 
-export default {
+type TProps = {
-  name: NAME,
+  params: typeof setting
-  setting: {
+  parent: {
-    name: '图片',
+    left: number
-    type: NAME,
+    top: number
-    uuid: -1,
+  }
-    width: 300,
+}
-    height: 300,
+
-    left: 0,
+type TState = {
-    top: 0,
+  position: 'absolute' | 'relative', // 'absolute'relative
-    zoom: 1,
+  editBoxStyle: CSSProperties,
-    transform: '',
+  cropWidgetXY: {
-    radius: 0,
+    x: number
-    opacity: 1,
+    y: number
-    parent: '-1',
+  }
-    imgUrl: '',
+  holdPosition: {
-    mask: '',
+    left: number
-    setting: [],
+    top: number
-    record: {
+  }
-      width: 0,
+}
-      height: 0,
+
-      minWidth: 10,
+const props = defineProps<TProps>()
-      minHeight: 10,
+const state = reactive<TState>({
-      dir: 'all',
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
   position: 'absolute', // 'absolute'relative
   editBoxStyle: {
     transformOrigin: 'center',
     transform: '',
   },
+  cropWidgetXY: {
+    x: 0,
+    y: 0,
+  },
+  holdPosition: {
+    left: 0,
+    top: 0,
   }
-  },
+})
-  computed: {
+const route = useRoute()
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
+const store = useStore()
-    cropEdit() {
+const widgetRef = ref<HTMLElement | null>(null)
-      return this.params.uuid === this.dCropUuid
+const targetRef = ref<HTMLImageElement | null>(null)
-    },
-    tZoom() {
-      return this.params.zoom
-    },
-    isMask() {
-      return this.params.mask && this.dDropOverUuid === this.params.uuid
-    },
-    isDraw() {
-      return this.$route.name === 'Draw'
-    },
-  },
-  watch: {
-    cropEdit(val) {
-      // TODO 移动事件绑定
-      if (val) {
-        document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
-      } else {
-        document.getElementById(this.params.uuid).removeEventListener('mousedown', this.touchstart, false)
-      }
-      this.fixRotate()
-      this.lockOthers()
-    },
-    async tZoom() {
-      await this.$nextTick()
-      this.updateRecord()
-    },
-  },
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
 
-  async mounted() {
+let rotateTemp: number | null = null
-    this.updateRecord()
+let flipTemp: string | null = null
-    await this.$nextTick()
+let locksTemp: string[] | null = null
-    document.addEventListener('mouseup', this.touchend, false)
+
+const {
+  dZoom,
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+// const { dZoom } = storeToRefs(useCanvasStore())
+
+// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
+const cropEdit = computed(() => {
+  return props.params.uuid === dCropUuid.value
+})
+const tZoom = computed(() => {
+  return props.params.zoom
+})
+const isMask = computed(() => {
+  return props.params.mask && dDropOverUuid.value === props.params.uuid
+})
+const isDraw = computed(() => {
+  return route.name === 'Draw'
+})
+
+watch(
+  () => cropEdit.value,
+  (val) => {
+    // TODO 移动事件绑定
+    const el = document.getElementById(`${props.params.uuid}`)
+    if (val) {
+      el?.addEventListener('mousedown', touchstart, false)
+    } else {
+      el?.removeEventListener('mousedown', touchstart, false)
+    }
+    fixRotate()
+    lockOthers()
+  }
+)
+
+watch(
+  () => tZoom.value,
+  async () => {
+    await nextTick()
+    updateRecord()
+  }
+)
+
+onUpdated(() => {
+  updateRecord()
+  store.commit('updateRect')
+})
+
+onMounted(async () => {
+  updateRecord()
+  await nextTick()
+  document.addEventListener('mouseup', touchend, false)
   // if (this.params.transformData) {
   //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
   //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
@@ -118,149 +151,175 @@ export default {
   // }
   // console.log(this.params, this.params.filter)
   // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
-    this.$refs.widget.style.transform += this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+  if (widgetRef.value) {
-  },
+    widgetRef.value.style.transform += props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
-  beforeUnmount() {
+  }
-    document.removeEventListener('mouseup', this.touchend, false)
+})
-  },
+
-  methods: {
+onBeforeUnmount(() => {
-    ...mapActions(['updateWidgetData']),
+  document.removeEventListener('mouseup', touchend, false)
-    touchstart(e) {
+})
-      const editBox = this.$refs[this.params.uuid + '_ebox']
+
-      this.cropWidgetXY = {
+// ...mapActions(['updateWidgetData']),
-        x: Number(editBox.style.left.replace('px', '')) || 0,
+function touchstart(e: MouseEvent) {
-        y: Number(editBox.style.top.replace('px', '')) || 0,
+  // const editBox = this.$refs[props.params.uuid + '_ebox']
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
+  state.cropWidgetXY = {
+    x: Number(editBox?.style.left.replace('px', '')) || 0,
+    y: Number(editBox?.style.top.replace('px', '')) || 0,
   }
   // 绑定鼠标移动事件
-      document.addEventListener('mousemove', this.handlemousemove, true)
+  document.addEventListener('mousemove', handlemousemove, true)
-    },
+}
-    touchend() {
+
-      // 取消鼠标移动事件
+/** 取消鼠标移动事件 */
-      document.removeEventListener('mousemove', this.handlemousemove, true)
+function touchend() {
+  document.removeEventListener('mousemove', handlemousemove, true)
   // const left = Number(this.editBoxStyle.left.replace('px', ''))
   // const flow = (this.params.width * (1 - this.tZoom)) / 2
   // if (left + flow < 0) {
   // }
-    },
+}
-    handlemousemove(e) {
+
-      if (!this.move(e)) {
+function handlemousemove(e?: MouseEvent) {
+  if (!move(e)) {
     return
   }
   e && e.stopPropagation()
   e && e.preventDefault()
-      const { left, top } = this.move(e)
+  const { left, top } = move(e)
   // TODO 触发位置刷新
-      this.holdPosition = { left, top }
+  state.holdPosition = { left, top }
-      this.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.left = left + 'px'
-      this.editBoxStyle.top = top + 'px'
+  state.editBoxStyle.top = top + 'px'
-      this.changeFinish(left / this.params.zoom, top / this.params.zoom)
+  changeFinish(left / props.params.zoom, top / props.params.zoom)
-    },
+}
-    changeFinish(x, y) {
+
-      this.setTransform('translate', `${x}px, ${y}px`)
+function changeFinish(x: number, y: number) {
-    },
+  setTransform('translate', `${x}px, ${y}px`)
-    move(payload) {
+}
+
+function move(payload?: MouseEvent) {
   if (payload) {
-        const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
+    const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
-        const dx = Number(payload.pageX) - this.dMouseXY.x
+    const dx = Number(payload.pageX) - dMouseXY.value.x
-        const dy = Number(payload.pageY) - this.dMouseXY.y
+    const dy = Number(payload.pageY) - dMouseXY.value.y
-        let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
+    let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
-        let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
+    let top = Number(widgetXY.y) + Math.floor((dy * 100) / dZoom.value)
     // TODO: 旋转后计算坐标
     // const rotate = Number(this.params.rotate.replace('deg', ''))
     // console.log(Math.sin(rotate), Math.cos(rotate))
     return { left, top }
   } else {
-        return this.holdPosition
+    return state.holdPosition
   }
-    },
-    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()
+
+function updateRecord() {
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    if (widgetRef.value) {
+      record.width = widgetRef.value.offsetWidth
+      record.height = widgetRef.value.offsetHeight
+    }
+  }
+  updateZoom()
   // 获取点位
-      if (!this.isDraw) {
+  if (!isDraw.value) {
-        const read = new PointImg(this.$refs.target)
+    if (targetRef.value) {
+      const read = new PointImg(targetRef.value)
     }
-    },
+  }
-    setTransform(attrName, value) {
+}
-      const iof = this.params.transform.indexOf(attrName)
+
+function setTransform(attrName: string, value: string | number) {
+  const iof = props.params.transform.indexOf(attrName)
   let setValue = ''
   if (iof != -1) {
     const index = iof + attrName.length
-        const tf = this.params.transform
+    const tf = props.params.transform
     const FRONT = tf.slice(0, index + 1)
     const half = tf.substring(index + 1)
     const END = half.substring(half.indexOf(')'))
     setValue = FRONT + value + END
   } else {
-        setValue = this.params.transform + ` ${attrName}(${value})`
+    setValue = props.params.transform + ` ${attrName}(${value})`
   }
-      this.updateWidgetData({
+  store.dispatch("updateWidgetData", {
-        uuid: this.params.uuid,
+    uuid: props.params.uuid,
     key: 'transform',
     value: setValue,
     pushHistory: false,
   })
-      this.params.transform && (this.$refs.target.style.transform = this.params.transform)
+  // updateWidgetData({
-    },
+  //   uuid: this.params.uuid,
-    setEditBox(attrName, value) {
+  //   key: 'transform',
-      const iof = this.editBoxStyle.transform.indexOf(attrName)
+  //   value: setValue,
+  //   pushHistory: false,
+  // })
+  if (props.params.transform && targetRef.value) {
+    targetRef.value.style.transform = props.params.transform
+  }
+}
+
+function setEditBox(attrName: string, value: string | number) {
+  const iof = state.editBoxStyle.transform?.indexOf(attrName)
   let setValue = ''
-      if (iof != -1) {
+  if (iof != -1 && iof != undefined) {
     const index = iof + attrName.length
-        const tf = this.editBoxStyle.transform
+    const tf = state.editBoxStyle.transform ?? ''
     const FRONT = tf.slice(0, index + 1)
     const half = tf.substring(index + 1)
     const END = half.substring(half.indexOf(')'))
     setValue = FRONT + value + END
   } else {
-        setValue = this.editBoxStyle.transform + ` ${attrName}(${value})`
+    setValue = state.editBoxStyle.transform + ` ${attrName}(${value})`
   }
-      this.editBoxStyle.transform = setValue
+  state.editBoxStyle.transform = setValue
-    },
+}
-    updateZoom() {
+
-      this.setEditBox('scale', this.params.zoom)
+function updateZoom() {
-      this.setTransform('scale', this.params.zoom)
+  setEditBox('scale', props.params.zoom)
+  setTransform('scale', props.params.zoom)
   // this.$refs.target.style.transform = this.params.transform
-      this.handlemousemove()
+  handlemousemove()
-    },
+}
-    fixRotate() {
+
+function fixRotate() {
   // 裁切时修正角度
-      if (this.rotateTemp) {
+  if (rotateTemp) {
-        this.$refs.widget.style.transform = `rotate(${this.rotateTemp})`
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(${rotateTemp})`)
-        this.params.flip = this.flipTemp
+    props.params.flip = flipTemp
-        this.rotateTemp = null
+    rotateTemp = null
   } else {
-        this.rotateTemp = this.params.rotate
+    rotateTemp = props.params.rotate
-        this.$refs.widget.style.transform = `rotate(0deg)`
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(0deg)`)
-        this.flipTemp = this.params.flip
+    flipTemp = props.params.flip
-        this.params.flip = null
+    props.params.flip = null
   }
-      this.$store.commit('setShowMoveable', false)
+  store.commit('setShowMoveable', false)
   setTimeout(() => {
-        this.$store.commit('setShowMoveable', true)
+    store.commit('setShowMoveable', true)
   }, 100)
-    },
+}
-    lockOthers() {
+
+function lockOthers() {
   // 裁剪时锁定其他图层
-      if (this.locksTemp && this.locksTemp.length > 0) {
+  if (locksTemp && locksTemp.length > 0) {
-        for (let i = 0; i < this.locksTemp.length; i++) {
+    for (let i = 0; i < locksTemp.length; i++) {
-          this.dWidgets[i].lock = this.locksTemp[i]
+      dWidgets.value[i].lock = locksTemp[i]
     }
-        this.locksTemp = []
+    locksTemp = []
   } else {
-        this.locksTemp = []
+    locksTemp = []
-        for (const widget of this.dWidgets) {
+    for (const widget of dWidgets.value) {
-          this.locksTemp.push(widget.lock)
+      locksTemp.push(widget.lock)
     }
-        this.dWidgets.forEach((widget) => {
+    dWidgets.value.forEach((widget: any) => {
-          widget.uuid != this.params.uuid && (widget.lock = true)
+      widget.uuid != props.params.uuid && (widget.lock = true)
     })
   }
-    },
+}
 // cropDone(e) {
 //   e.stopPropagation()
 //   e.preventDefault()
@@ -271,8 +330,6 @@ export default {
 //     pushHistory: false,
 //   })
 // },
-  },
-}
 </script>
 
 <style lang="less" scoped>

src/components/modules/widgets/wImage/wImageSetting.ts

@@ -0,0 +1,68 @@
+export type TImageSetting = {
+  name: string
+  type: string
+  uuid: string
+  width: number
+  height: number
+  left: number
+  top: number
+  zoom: number
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  imgUrl: string
+  mask: string
+  setting: [],
+  rotate: number
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: string | null
+  sliceData: {
+    ratio: number
+    left: number
+  }
+  cropEdit?: boolean
+}
+
+const setting: TImageSetting = {
+  name: '图片',
+  type: 'w-image',
+  uuid: '-1',
+  width: 300,
+  height: 300,
+  left: 0,
+  top: 0,
+  zoom: 1,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  imgUrl: '',
+  mask: '',
+  setting: [],
+  rotate: 0,
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+    dir: 'all',
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: '',
+  sliceData: {
+    ratio: 0,
+    left: 0,
+  }
+}
+
+export default setting

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -7,20 +7,20 @@
 -->
 <template>
   <div id="w-image-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="设置" name="2">
         <!-- <el-button size="mini" style="width: 100%; margin-top: 0.5rem" plain @click="openCropper">替换图片</el-button> -->
         <el-button style="width: 100%; margin-bottom: 12px" plain @click="openPicBox">替换图片</el-button>
         <div class="options">
-          <el-button v-if="innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
+          <el-button v-if="state.innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
           <el-button v-else plain type="primary" @click="imgCrop(true)"><i class="icon sd-caijian" /> 裁剪</el-button>
           <el-button plain @click="openImageCutout"><i class="icon sd-AIkoutu" /> 抠图</el-button>
           <!-- <uploader class="options__upload" @done="uploadImgDone">
@@ -31,15 +31,23 @@
         <!-- <container-wrap @change="changeContainer" />
         <br /> -->
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
-          <number-slider v-model="innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(innerElement.record.width, innerElement.record.height)" @finish="(value) => finish('radius', value)" />
+          <number-slider v-model="state.innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))" @finish="(value) => finish('radius', value)" />
           <!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" />
         <number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> -->
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="innerElement.isNinePatch" title="点九图设置" name="3">
+      <el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3">
-        <number-slider v-model="innerElement.sliceData.ratio" :step="0.01" label="比率" :maxValue="10" @finish="(value) => finishSliceData('ratio', value)" />
+        <number-slider
-        <number-slider v-model="innerElement.sliceData.left" :step="0.5" label="大小" @finish="(value) => finishSliceData('left', value)" />
+          v-model="state.innerElement.sliceData.ratio"
+          :step="0.01" label="比率" :maxValue="10" 
+          @finish="(value) => finishSliceData('ratio', value)"
+        />
+        <number-slider
+          v-model="state.innerElement.sliceData.left"
+          :step="0.5" label="大小"
+          @finish="(value) => finishSliceData('left', value)"
+        />
       </el-collapse-item>
       <br />
       <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@@ -47,21 +55,26 @@
       <br />
     </el-collapse>
     <!-- <CropImage ref="crop" @done="cropDone" /> -->
-    <inner-tool-bar v-show="innerElement.cropEdit" :style="toolBarStyle">
+    <inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle">
-      <number-slider v-model="innerElement.zoom" class="inner-bar" label="缩放" labelWidth="40px" :step="0.01" :minValue="1" :maxValue="3" />
+      <number-slider
+        v-model="state.innerElement.zoom"
+        class="inner-bar" label="缩放" labelWidth="40px"
+        :step="0.01" :minValue="1" :maxValue="3"
+      />
       <i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" />
     </inner-tool-bar>
-    <picBox ref="picBox" @select="selectDone" />
+    <picBox ref="picBoxRef" @select="selectDone" />
-    <imageCutout ref="imageCutout" @done="cutImageDone" />
+    <imageCutout ref="imageCutoutRef" @done="cutImageDone" />
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
+// const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+import { nextTick, reactive, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 // import textInput from '../../settings/textInput.vue'
 // import CropImage from '@/components/business/cropper/CropImage.vue'
@@ -73,15 +86,25 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import wImageSetting, { TImageSetting } from './wImageSetting'
+import { TGetImageListResult } from '@/api/material'
 
-export default {
+type TState = {
-  name: NAME,
+  picBoxShow: boolean
-  components: { numberInput, numberSlider, iconItemSelect, picBox, imageCutout },
+  activeNames: string[]
-  data() {
+  innerElement: TImageSetting
-    return {
+  tag: boolean
+  ingoreKeys: string[]
+  layerIconList: TIconItemSelectData[]
+  alignIconList: TIconItemSelectData[]
+  toolBarStyle: Record<string, any>
+}
+
+const state = reactive<TState>({
   picBoxShow: false,
   activeNames: ['2', '3', '4'],
-      innerElement: {},
+  innerElement: JSON.parse(JSON.stringify(wImageSetting)),
   tag: false,
   ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
   layerIconList: layerIconList.concat([
@@ -102,165 +125,230 @@ export default {
   ]),
   alignIconList,
   toolBarStyle: {},
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-        // 失焦取消编辑模式
-        if (newValue.uuid != this.lastUuid && typeof this.lastUuid !== 'undefined') {
-          this.innerElement.cropEdit = false
-          this.$store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
-        }
-        this.lastUuid = newValue.uuid
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-        this.cropHandle()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify({ ...this.innerElement, ...this.dActiveElement }))
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'cropEdit' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
 })
+
+const picBoxRef = ref<typeof picBox | null>(null)
+const imageCutoutRef = ref<typeof imageCutout | null>(null)
+
+const store = useStore()
+const {
+  dActiveElement, dMoving, dWidgets
+} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+// computed: {
+//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+// },
+
+let lastUuid: string | undefined = undefined
+let tag: boolean
+let toolBarStyle: { left: string, top: string } | null = null
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
+    // 失焦取消编辑模式
+    if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
+      state.innerElement.cropEdit = false
+      store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
     }
-      }
+    lastUuid = newValue.uuid
   },
-    finishSliceData(key, value) {
+  { deep: true }
-      const data = this.dActiveElement.sliceData
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
+    cropHandle()
+  },
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
+
+function change() {
+  tag = true
+  state.innerElement = JSON.parse(JSON.stringify({ ...state.innerElement, ...dActiveElement.value }))
+}
+
+function changeValue() {
+  if (tag) {
+    tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    if (state.ingoreKeys.indexOf(key) !== -1) {
+      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
+    } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
+      store.dispatch('updateWidgetData', {
+        uuid: dActiveElement.value.uuid,
+        key: key,
+        value: state.innerElement[(key as keyof TImageSetting)],
+      })
+      // updateWidgetData({
+      //   uuid: this.dActiveElement.uuid,
+      //   key: key,
+      //   value: this.innerElement[key],
+      // })
+    }
+  }
+}
+
+function finishSliceData(key: string, value: number | number[]) {
+  const data = dActiveElement.value.sliceData
   if (data) {
     data[key] = value
-        this.updateWidgetData({
+    store.dispatch('updateWidgetData', {
-          uuid: this.dActiveElement.uuid,
+      uuid: dActiveElement.value.uuid,
       key: 'sliceData',
       value: data,
       pushHistory: true,
     })
+    // updateWidgetData({
+    //   uuid: dActiveElement.uuid,
+    //   key: 'sliceData',
+    //   value: data,
+    //   pushHistory: true,
+    // })
   }
-    },
+}
-    finish(key, value) {
+
-      this.updateWidgetData({
+function finish(key: string = "", value: number | number[] | string | null = "") {
-        uuid: this.dActiveElement.uuid,
+  store.dispatch('updateWidgetData', {
+    uuid: dActiveElement.value.uuid,
     key: key,
     value: value,
     pushHistory: true,
   })
-    },
+  // this.updateWidgetData({
-    layerAction(item) {
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
   if (item.key === 'zIndex') {
-        this.updateLayerIndex({
+    store.dispatch("updateLayerIndex", {
-          uuid: this.dActiveElement.uuid,
+      uuid: dActiveElement.value.uuid,
       value: item.value,
     })
+    // this.updateLayerIndex({
+    //   uuid: this.dActiveElement.uuid,
+    //   value: item.value,
+    // })
   } else {
-        this.finish(item.key, item.value === this.dActiveElement.flip ? null : item.value)
+    finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
   }
-    },
+}
-    async alignAction(item) {
+
-      this.updateAlign({
+async function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
     align: item.value,
-        uuid: this.dActiveElement.uuid,
+    uuid: dActiveElement.value.uuid,
   })
-      await this.$nextTick()
+  // this.updateAlign({
-      this.$store.commit('updateRect')
+  //   align: item.value,
-    },
+  //   uuid: this.dActiveElement.uuid,
-    openCropper() {
+  // })
-      this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
+  await nextTick()
-    },
+  store.commit('updateRect')
-    cropDone({ newImg, data, width, height }) {
+}
-      this.innerElement.imgUrl = newImg
+
-      this.innerElement.cropData = data
+function openCropper() {
-      this.innerElement.width = width.toFixed(0)
+  // this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
-      this.innerElement.height = height.toFixed(0)
+}
-    },
+
-    async changeContainer(setting) {
+// function cropDone({ newImg, data, width, height }) {
-      const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
+//   this.innerElement.imgUrl = newImg
-      const img = await getImage(setting.svgUrl)
+//   this.innerElement.cropData = data
-      setting.width = this.innerElement.width
+//   this.innerElement.width = width.toFixed(0)
-      setting.height = img.height * (this.innerElement.width / img.width)
+//   this.innerElement.height = height.toFixed(0)
-      setting.left = this.innerElement.left
+// }
-      setting.top = this.innerElement.top
+
-      setting.imgUrl = this.innerElement.imgUrl
+
-      this.dWidgets.splice(index, 1)
+// async function changeContainer(setting) {
-      this.addWidget(setting)
+//   const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
-    },
+//   const img = await getImage(setting.svgUrl)
-    async uploadImgDone(img) {
+//   setting.width = this.innerElement.width
-      this.$store.commit('setShowMoveable', false)
+//   setting.height = img.height * (this.innerElement.width / img.width)
-      await api.material.addMyPhoto(img)
+//   setting.left = this.innerElement.left
-      // this.innerElement.width = img.width
+//   setting.top = this.innerElement.top
-      this.innerElement.height = img.height * (this.innerElement.width / img.width)
+//   setting.imgUrl = this.innerElement.imgUrl
-      this.innerElement.imgUrl = img.url
+//   this.dWidgets.splice(index, 1)
-      this.$store.commit('setShowMoveable', true)
+//   this.addWidget(setting)
-    },
+// }
-    selectDone(img) {
+
-      this.innerElement.imgUrl = img.url
+// async function uploadImgDone(img) {
+//   this.$store.commit('setShowMoveable', false)
+//   await api.material.addMyPhoto(img)
+//   // this.innerElement.width = img.width
+//   this.innerElement.height = img.height * (this.innerElement.width / img.width)
+//   this.innerElement.imgUrl = img.url
+//   this.$store.commit('setShowMoveable', true)
+// }
+
+
+function selectDone(img: TGetImageListResult) {
+  state.innerElement.imgUrl = img.url
   // this.imgCrop(true)
-    },
+}
-    imgCrop(val) {
+
+function imgCrop(val: boolean) {
   // TODO: 画布内图像裁剪
-      const { left, top } = document.getElementById(this.innerElement.uuid).getBoundingClientRect()
+  const el = document.getElementById(state.innerElement.uuid || "")
-      this.toolBarStyle = { left: left + 'px', top: top + 'px' }
+  if (!el) return
-      this.innerElement.cropEdit = val
+  const { left, top } = el.getBoundingClientRect()
-      this.$store.commit('setShowRotatable', !val)
+  toolBarStyle = { left: left + 'px', top: top + 'px' }
-    },
+  state.innerElement.cropEdit = val
-    cropHandle() {
+  store.commit('setShowRotatable', !val)
-      this.$store.commit('setCropUuid', this.innerElement.cropEdit ? this.innerElement.uuid : -1)
+}
-    },
+
+
+function cropHandle() {
+  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+}
+
 // 图库选择器
-    openPicBox() {
+function openPicBox() {
-      this.$refs.picBox.open()
+  if (picBoxRef.value) {
-    },
+    picBoxRef.value.open()
+  }
+}
+
 // 打开抠图
-    openImageCutout() {
+function openImageCutout() {
-      fetch(this.innerElement.imgUrl)
+  fetch(state.innerElement.imgUrl || "")
     .then((response) => response.blob())
     .then((blob) => {
       const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
-          this.$refs.imageCutout.open(file)
+      if (imageCutoutRef.value) {
+        imageCutoutRef.value.open(file)
+      }
     })
     .catch((error) => {
       console.error('获取图片失败:', error)
     })
-    },
-    // 完成抠图
-    async cutImageDone(url) {
-      setTimeout(() => {
-        this.innerElement.imgUrl = url
-      }, 300)
-    },
-  },
 }
+
+// 完成抠图
+async function cutImageDone(url: string) {
+  setTimeout(() => {
+    state.innerElement.imgUrl = url
+  }, 300)
+}
+
 </script>
 
 <style lang="less" scoped>

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'
@@ -50,7 +50,7 @@ function checkGroupChild(pid: number | string, key: any) {
   return itHas
 }
 /**
- * 复制
+ * 复制元素
  */
 function copy() {
   if (store.getters.dActiveElement.uuid === '-1') {
@@ -64,13 +64,14 @@ function copy() {
  * 粘贴
  */
 function paste() {
-  handlePaste()
+  handlePaste().then(() => {
     if (store.getters.dCopyElement.length === 0) {
       return
     } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
       return
     }
     !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+  })
 }
 /**
  * 撤销

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) => {
@@ -16,14 +16,18 @@ import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
 import { getImage } from '@/common/methods/getImgDetail'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-// import wText from '@/components/modules/widgets/wText/wText.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
+  return new Promise<void>((resolve) => {
     navigator.clipboard
       .read()
       .then(async (dataTransfer: any) => {
+        if (store.getters.dActiveElement.editable) {
+          return
+        }
         for (let i = 0; i < dataTransfer.length; i++) {
           const item = dataTransfer[i]
           if (item.types.toString().indexOf('image') !== -1) {
@@ -37,7 +41,7 @@ export default () => {
             await api.material.addMyPhoto({ width, height, url })
             // 添加图片到画布中
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wImage.setting))
+            const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
             setting.imgUrl = url
@@ -45,10 +49,16 @@ export default () => {
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
             store.dispatch('addWidget', setting)
+            // 清空剪贴板，防止多次上传图片
+            navigator.clipboard.write([
+              new ClipboardItem({
+                'text/plain': new Blob([''], {type: 'text/plain'})
+              })
+            ])
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wTextSetting))
+            const setting = JSON.parse(JSON.stringify(wText.setting))
             setting.text = await navigator.clipboard.readText()
             store.dispatch('addWidget', setting)
             break
@@ -56,6 +66,8 @@ export default () => {
         }
       })
       .catch((error) => {
-      console.error('无法读取剪贴板内容：', error)
+        // 剪贴板内容为空
+        resolve()
+      })
   })
 }

src/store/modules/design/actions.ts

@@ -237,7 +237,7 @@ export default {
     if (activeElement.type === 'page') {
       return
     }
-
+    navigator.clipboard.writeText('') // 清空系统剪贴板内容
     const container = []
     const selectWidgets = store.state.dSelectWidgets
     if (selectWidgets.length === 0) {

src/store/modules/design/index.ts

@@ -29,7 +29,6 @@ const all = {
     dDraging: false, // 是否正在抓取组件
     dResizeing: false, // 是否正在调整组件宽高
     dShowRefLine: true, // 是否显示参考线
-
     dResizeWH: {
       // 初始化调整大小时组件的宽高
       width: 0,

src/views/Psd.vue

@@ -61,7 +61,8 @@ 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 wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -126,7 +127,7 @@ async function loadPSD(file: File) {
   setTimeout(async () => {
     const types: any = {
       text: wTextSetting,
-      image: wImage.setting,
+      image: wImageSetting,
     }
     for (let i = 0; i < data.clouds.length; i++) {
       const x: any = data.clouds[i]

vite.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
   },
   server: {
     hmr: { overlay: false },
+    host: '127.0.0.1'
     // proxy: {
     //   '/api': {
     //     target: '',