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,254 +31,305 @@
   </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,
+
+type TState = {
+  position: 'absolute' | 'relative', // 'absolute'relative
+  editBoxStyle: CSSProperties,
+  cropWidgetXY: {
+    x: number
+    y: number
+  }
+  holdPosition: {
+    left: number
+    top: number
+  }
+}
+
+const props = defineProps<TProps>()
+const state = reactive<TState>({
+  position: 'absolute', // 'absolute'relative
+  editBoxStyle: {
+    transformOrigin: 'center',
+    transform: '',
+  },
+  cropWidgetXY: {
+    x: 0,
+    y: 0,
+  },
+  holdPosition: {
     left: 0,
     top: 0,
-    zoom: 1,
+  }
-    transform: '',
+})
-    radius: 0,
+const route = useRoute()
-    opacity: 1,
+const store = useStore()
-    parent: '-1',
+const widgetRef = ref<HTMLElement | null>(null)
-    imgUrl: '',
+const targetRef = ref<HTMLImageElement | null>(null)
-    mask: '',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-      dir: 'all',
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
-      position: 'absolute', // 'absolute'relative
-      editBoxStyle: {
-        transformOrigin: 'center',
-        transform: '',
-      },
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
-    cropEdit() {
-      return this.params.uuid === this.dCropUuid
-    },
-    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)
+
-    // if (this.params.transformData) {
+const {
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+  dZoom,
-    //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
-    // } else {
+} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+// const { dZoom } = storeToRefs(useCanvasStore())
-    //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+
-    // }
+// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
-    // console.log(this.params, this.params.filter)
+const cropEdit = computed(() => {
-    // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
+  return props.params.uuid === dCropUuid.value
-    this.$refs.widget.style.transform += this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+})
-  },
+const tZoom = computed(() => {
-  beforeUnmount() {
+  return props.params.zoom
-    document.removeEventListener('mouseup', this.touchend, false)
+})
-  },
+const isMask = computed(() => {
-  methods: {
+  return props.params.mask && dDropOverUuid.value === props.params.uuid
-    ...mapActions(['updateWidgetData']),
+})
-    touchstart(e) {
+const isDraw = computed(() => {
-      const editBox = this.$refs[this.params.uuid + '_ebox']
+  return route.name === 'Draw'
-      this.cropWidgetXY = {
+})
-        x: Number(editBox.style.left.replace('px', '')) || 0,
+
-        y: Number(editBox.style.top.replace('px', '')) || 0,
+watch(
-      }
+  () => cropEdit.value,
-      // 绑定鼠标移动事件
+  (val) => {
-      document.addEventListener('mousemove', this.handlemousemove, true)
+    // TODO 移动事件绑定
-    },
+    const el = document.getElementById(`${props.params.uuid}`)
-    touchend() {
+    if (val) {
-      // 取消鼠标移动事件
+      el?.addEventListener('mousedown', touchstart, false)
-      document.removeEventListener('mousemove', this.handlemousemove, true)
+    } else {
-      // const left = Number(this.editBoxStyle.left.replace('px', ''))
+      el?.removeEventListener('mousedown', touchstart, false)
-      // const flow = (this.params.width * (1 - this.tZoom)) / 2
+    }
-      // if (left + flow < 0) {
+    fixRotate()
-      // }
+    lockOthers()
-    },
+  }
-    handlemousemove(e) {
+)
-      if (!this.move(e)) {
+
-        return
+watch(
-      }
+  () => tZoom.value,
-      e && e.stopPropagation()
+  async () => {
-      e && e.preventDefault()
+    await nextTick()
-      const { left, top } = this.move(e)
+    updateRecord()
-      // TODO 触发位置刷新
+  }
-      this.holdPosition = { left, top }
+)
-      this.editBoxStyle.left = left + 'px'
+
-      this.editBoxStyle.top = top + 'px'
+onUpdated(() => {
-      this.changeFinish(left / this.params.zoom, top / this.params.zoom)
+  updateRecord()
-    },
+  store.commit('updateRect')
-    changeFinish(x, y) {
+})
-      this.setTransform('translate', `${x}px, ${y}px`)
+
-    },
+onMounted(async () => {
-    move(payload) {
+  updateRecord()
-      if (payload) {
+  await nextTick()
-        const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
+  document.addEventListener('mouseup', touchend, false)
-        const dx = Number(payload.pageX) - this.dMouseXY.x
+  // if (this.params.transformData) {
-        const dy = Number(payload.pageY) - this.dMouseXY.y
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-        let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
+  //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
-        let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
+  // } else {
-        // TODO: 旋转后计算坐标
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-        // const rotate = Number(this.params.rotate.replace('deg', ''))
+  //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-        // console.log(Math.sin(rotate), Math.cos(rotate))
+  // }
-        return { left, top }
+  // console.log(this.params, this.params.filter)
-      } else {
+  // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
-        return this.holdPosition
+  if (widgetRef.value) {
-      }
+    widgetRef.value.style.transform += props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
-    },
+  }
-    updateRecord() {
+})
-      if (this.dActiveElement.uuid === this.params.uuid) {
+
-        let record = this.dActiveElement.record
+onBeforeUnmount(() => {
-        record.width = this.$refs.widget.offsetWidth
+  document.removeEventListener('mouseup', touchend, false)
-        record.height = this.$refs.widget.offsetHeight
+})
-      }
+
-      this.updateZoom()
+// ...mapActions(['updateWidgetData']),
-      // 获取点位
+function touchstart(e: MouseEvent) {
-      if (!this.isDraw) {
+  // const editBox = this.$refs[props.params.uuid + '_ebox']
-        const read = new PointImg(this.$refs.target)
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
-      }
+  state.cropWidgetXY = {
-    },
+    x: Number(editBox?.style.left.replace('px', '')) || 0,
-    setTransform(attrName, value) {
+    y: Number(editBox?.style.top.replace('px', '')) || 0,
-      const iof = this.params.transform.indexOf(attrName)
+  }
-      let setValue = ''
+  // 绑定鼠标移动事件
-      if (iof != -1) {
+  document.addEventListener('mousemove', handlemousemove, true)
-        const index = iof + attrName.length
-        const tf = this.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})`
-      }
-      this.updateWidgetData({
-        uuid: this.params.uuid,
-        key: 'transform',
-        value: setValue,
-        pushHistory: false,
-      })
-      this.params.transform && (this.$refs.target.style.transform = this.params.transform)
-    },
-    setEditBox(attrName, value) {
-      const iof = this.editBoxStyle.transform.indexOf(attrName)
-      let setValue = ''
-      if (iof != -1) {
-        const index = iof + attrName.length
-        const tf = this.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})`
-      }
-      this.editBoxStyle.transform = setValue
-    },
-    updateZoom() {
-      this.setEditBox('scale', this.params.zoom)
-      this.setTransform('scale', this.params.zoom)
-      // this.$refs.target.style.transform = this.params.transform
-      this.handlemousemove()
-    },
-    fixRotate() {
-      // 裁切时修正角度
-      if (this.rotateTemp) {
-        this.$refs.widget.style.transform = `rotate(${this.rotateTemp})`
-        this.params.flip = this.flipTemp
-        this.rotateTemp = null
-      } else {
-        this.rotateTemp = this.params.rotate
-        this.$refs.widget.style.transform = `rotate(0deg)`
-        this.flipTemp = this.params.flip
-        this.params.flip = null
-      }
-      this.$store.commit('setShowMoveable', false)
-      setTimeout(() => {
-        this.$store.commit('setShowMoveable', true)
-      }, 100)
-    },
-    lockOthers() {
-      // 裁剪时锁定其他图层
-      if (this.locksTemp && this.locksTemp.length > 0) {
-        for (let i = 0; i < this.locksTemp.length; i++) {
-          this.dWidgets[i].lock = this.locksTemp[i]
-        }
-        this.locksTemp = []
-      } else {
-        this.locksTemp = []
-        for (const widget of this.dWidgets) {
-          this.locksTemp.push(widget.lock)
-        }
-        this.dWidgets.forEach((widget) => {
-          widget.uuid != this.params.uuid && (widget.lock = true)
-        })
-      }
-    },
-    // cropDone(e) {
-    //   e.stopPropagation()
-    //   e.preventDefault()
-    //   this.updateWidgetData({
-    //     uuid: this.params.uuid,
-    //     key: 'cropEdit',
-    //     value: false,
-    //     pushHistory: false,
-    //   })
-    // },
-  },
 }
+
+/** 取消鼠标移动事件 */
+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) {
+  // }
+}
+
+function handlemousemove(e?: MouseEvent) {
+  if (!move(e)) {
+    return
+  }
+  e && e.stopPropagation()
+  e && e.preventDefault()
+  const { left, top } = move(e)
+  // TODO 触发位置刷新
+  state.holdPosition = { left, top }
+  state.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.top = top + 'px'
+  changeFinish(left / props.params.zoom, top / props.params.zoom)
+}
+
+function changeFinish(x: number, y: number) {
+  setTransform('translate', `${x}px, ${y}px`)
+}
+
+function move(payload?: MouseEvent) {
+  if (payload) {
+    const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
+    const dx = Number(payload.pageX) - dMouseXY.value.x
+    const dy = Number(payload.pageY) - dMouseXY.value.y
+    let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
+    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 state.holdPosition
+  }
+}
+
+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 (!isDraw.value) {
+    if (targetRef.value) {
+      const read = new PointImg(targetRef.value)
+    }
+  }
+}
+
+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 = 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 = props.params.transform + ` ${attrName}(${value})`
+  }
+  store.dispatch("updateWidgetData", {
+    uuid: props.params.uuid,
+    key: 'transform',
+    value: setValue,
+    pushHistory: false,
+  })
+  // updateWidgetData({
+  //   uuid: this.params.uuid,
+  //   key: 'transform',
+  //   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 && iof != undefined) {
+    const index = iof + attrName.length
+    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 = state.editBoxStyle.transform + ` ${attrName}(${value})`
+  }
+  state.editBoxStyle.transform = setValue
+}
+
+function updateZoom() {
+  setEditBox('scale', props.params.zoom)
+  setTransform('scale', props.params.zoom)
+  // this.$refs.target.style.transform = this.params.transform
+  handlemousemove()
+}
+
+function fixRotate() {
+  // 裁切时修正角度
+  if (rotateTemp) {
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(${rotateTemp})`)
+    props.params.flip = flipTemp
+    rotateTemp = null
+  } else {
+    rotateTemp = props.params.rotate
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(0deg)`)
+    flipTemp = props.params.flip
+    props.params.flip = null
+  }
+  store.commit('setShowMoveable', false)
+  setTimeout(() => {
+    store.commit('setShowMoveable', true)
+  }, 100)
+}
+
+function lockOthers() {
+  // 裁剪时锁定其他图层
+  if (locksTemp && locksTemp.length > 0) {
+    for (let i = 0; i < locksTemp.length; i++) {
+      dWidgets.value[i].lock = locksTemp[i]
+    }
+    locksTemp = []
+  } else {
+    locksTemp = []
+    for (const widget of dWidgets.value) {
+      locksTemp.push(widget.lock)
+    }
+    dWidgets.value.forEach((widget: any) => {
+      widget.uuid != props.params.uuid && (widget.lock = true)
+    })
+  }
+}
+// cropDone(e) {
+//   e.stopPropagation()
+//   e.preventDefault()
+//   this.updateWidgetData({
+//     uuid: this.params.uuid,
+//     key: 'cropEdit',
+//     value: false,
+//     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,194 +86,269 @@ 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
-      picBoxShow: false,
+  ingoreKeys: string[]
-      activeNames: ['2', '3', '4'],
+  layerIconList: TIconItemSelectData[]
-      innerElement: {},
+  alignIconList: TIconItemSelectData[]
-      tag: false,
+  toolBarStyle: Record<string, any>
-      ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
-      layerIconList: layerIconList.concat([
-        {
-          key: 'flip',
-          icon: 'sd-zuoyoufanzhuan',
-          extraIcon: true,
-          tip: '水平翻转',
-          value: 'Y',
-        },
-        {
-          key: 'flip',
-          icon: 'sd-shangxiafanzhuan',
-          extraIcon: true,
-          tip: '垂直翻转',
-          value: 'X',
-        },
-      ]),
-      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],
-          })
-        }
-      }
-    },
-    finishSliceData(key, value) {
-      const data = this.dActiveElement.sliceData
-      if (data) {
-        data[key] = value
-        this.updateWidgetData({
-          uuid: this.dActiveElement.uuid,
-          key: 'sliceData',
-          value: data,
-          pushHistory: true,
-        })
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
-        pushHistory: true,
-      })
-    },
-    layerAction(item) {
-      if (item.key === 'zIndex') {
-        this.updateLayerIndex({
-          uuid: this.dActiveElement.uuid,
-          value: item.value,
-        })
-      } else {
-        this.finish(item.key, item.value === this.dActiveElement.flip ? null : item.value)
-      }
-    },
-    async alignAction(item) {
-      this.updateAlign({
-        align: item.value,
-        uuid: this.dActiveElement.uuid,
-      })
-      await this.$nextTick()
-      this.$store.commit('updateRect')
-    },
-    openCropper() {
-      this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
-    },
-    cropDone({ newImg, data, width, height }) {
-      this.innerElement.imgUrl = newImg
-      this.innerElement.cropData = data
-      this.innerElement.width = width.toFixed(0)
-      this.innerElement.height = height.toFixed(0)
-    },
-    async changeContainer(setting) {
-      const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
-      const img = await getImage(setting.svgUrl)
-      setting.width = this.innerElement.width
-      setting.height = img.height * (this.innerElement.width / img.width)
-      setting.left = this.innerElement.left
-      setting.top = this.innerElement.top
-      setting.imgUrl = this.innerElement.imgUrl
-      this.dWidgets.splice(index, 1)
-      this.addWidget(setting)
-    },
-    async 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)
-    },
-    selectDone(img) {
-      this.innerElement.imgUrl = img.url
-      // this.imgCrop(true)
-    },
-    imgCrop(val) {
-      // TODO: 画布内图像裁剪
-      const { left, top } = document.getElementById(this.innerElement.uuid).getBoundingClientRect()
-      this.toolBarStyle = { left: left + 'px', top: top + 'px' }
-      this.innerElement.cropEdit = val
-      this.$store.commit('setShowRotatable', !val)
-    },
-    cropHandle() {
-      this.$store.commit('setCropUuid', this.innerElement.cropEdit ? this.innerElement.uuid : -1)
-    },
-    // 图库选择器
-    openPicBox() {
-      this.$refs.picBox.open()
-    },
-    // 打开抠图
-    openImageCutout() {
-      fetch(this.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)
-        })
-        .catch((error) => {
-          console.error('获取图片失败:', error)
-        })
-    },
-    // 完成抠图
-    async cutImageDone(url) {
-      setTimeout(() => {
-        this.innerElement.imgUrl = url
-      }, 300)
-    },
-  },
 }
+
+const state = reactive<TState>({
+  picBoxShow: false,
+  activeNames: ['2', '3', '4'],
+  innerElement: JSON.parse(JSON.stringify(wImageSetting)),
+  tag: false,
+  ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
+  layerIconList: layerIconList.concat([
+    {
+      key: 'flip',
+      icon: 'sd-zuoyoufanzhuan',
+      extraIcon: true,
+      tip: '水平翻转',
+      value: 'Y',
+    },
+    {
+      key: 'flip',
+      icon: 'sd-shangxiafanzhuan',
+      extraIcon: true,
+      tip: '垂直翻转',
+      value: 'X',
+    },
+  ]),
+  alignIconList,
+  toolBarStyle: {},
+})
+
+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
+  },
+  { deep: true }
+)
+
+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
+    store.dispatch('updateWidgetData', {
+      uuid: dActiveElement.value.uuid,
+      key: 'sliceData',
+      value: data,
+      pushHistory: true,
+    })
+    // updateWidgetData({
+    //   uuid: dActiveElement.uuid,
+    //   key: 'sliceData',
+    //   value: data,
+    //   pushHistory: true,
+    // })
+  }
+}
+
+function finish(key: string = "", value: number | number[] | string | null = "") {
+  store.dispatch('updateWidgetData', {
+    uuid: dActiveElement.value.uuid,
+    key: key,
+    value: value,
+    pushHistory: true,
+  })
+  // this.updateWidgetData({
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  if (item.key === 'zIndex') {
+    store.dispatch("updateLayerIndex", {
+      uuid: dActiveElement.value.uuid,
+      value: item.value,
+    })
+    // this.updateLayerIndex({
+    //   uuid: this.dActiveElement.uuid,
+    //   value: item.value,
+    // })
+  } else {
+    finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
+  }
+}
+
+async function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
+    align: item.value,
+    uuid: dActiveElement.value.uuid,
+  })
+  // this.updateAlign({
+  //   align: item.value,
+  //   uuid: this.dActiveElement.uuid,
+  // })
+  await nextTick()
+  store.commit('updateRect')
+}
+
+function openCropper() {
+  // this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
+}
+
+// function cropDone({ newImg, data, width, height }) {
+//   this.innerElement.imgUrl = newImg
+//   this.innerElement.cropData = data
+//   this.innerElement.width = width.toFixed(0)
+//   this.innerElement.height = height.toFixed(0)
+// }
+
+
+// async function changeContainer(setting) {
+//   const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
+//   const img = await getImage(setting.svgUrl)
+//   setting.width = this.innerElement.width
+//   setting.height = img.height * (this.innerElement.width / img.width)
+//   setting.left = this.innerElement.left
+//   setting.top = this.innerElement.top
+//   setting.imgUrl = this.innerElement.imgUrl
+//   this.dWidgets.splice(index, 1)
+//   this.addWidget(setting)
+// }
+
+// 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)
+}
+
+function imgCrop(val: boolean) {
+  // TODO: 画布内图像裁剪
+  const el = document.getElementById(state.innerElement.uuid || "")
+  if (!el) return
+  const { left, top } = el.getBoundingClientRect()
+  toolBarStyle = { left: left + 'px', top: top + 'px' }
+  state.innerElement.cropEdit = val
+  store.commit('setShowRotatable', !val)
+}
+
+
+function cropHandle() {
+  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+}
+
+// 图库选择器
+function openPicBox() {
+  if (picBoxRef.value) {
+    picBoxRef.value.open()
+  }
+}
+
+// 打开抠图
+function openImageCutout() {
+  fetch(state.innerElement.imgUrl || "")
+    .then((response) => response.blob())
+    .then((blob) => {
+      const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
+      if (imageCutoutRef.value) {
+        imageCutoutRef.value.open(file)
+      }
+    })
+    .catch((error) => {
+      console.error('获取图片失败:', error)
+    })
+}
+
+// 完成抠图
+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) {
+    if (store.getters.dCopyElement.length === 0) {
-    return
+      return
-  } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+    } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
-    return
+      return
-  }
+    }
-  !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+    !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,46 +16,58 @@ 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 () => {
-  navigator.clipboard
+  return new Promise<void>((resolve) => {
-    .read()
+    navigator.clipboard
-    .then(async (dataTransfer: any) => {
+      .read()
-      for (let i = 0; i < dataTransfer.length; i++) {
+      .then(async (dataTransfer: any) => {
-        const item = dataTransfer[i]
+        if (store.getters.dActiveElement.editable) {
-        if (item.types.toString().indexOf('image') !== -1) {
+          return
-          const imageBlob = await item.getType(item.types[0])
-          const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
-          // 上传图片
-          const qnOptions = { bucket: 'xp-design', prePath: 'user' }
-          const result: any = await Qiniu.upload(file, qnOptions)
-          const { width, height }: any = await getImage(file)
-          const url = _config.IMG_URL + result.key
-          await api.material.addMyPhoto({ width, height, url })
-          // 添加图片到画布中
-          store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wImage.setting))
-          setting.width = width
-          setting.height = height
-          setting.imgUrl = url
-          const { width: pW, height: pH } = store.getters.dPage
-          setting.left = pW / 2 - width / 2
-          setting.top = pH / 2 - height / 2
-          store.dispatch('addWidget', setting)
-          break
-        } else if (item.types.toString().indexOf('text') !== -1) {
-          store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wTextSetting))
-          setting.text = await navigator.clipboard.readText()
-          store.dispatch('addWidget', setting)
-          break
         }
-      }
+        for (let i = 0; i < dataTransfer.length; i++) {
-    })
+          const item = dataTransfer[i]
-    .catch((error) => {
+          if (item.types.toString().indexOf('image') !== -1) {
-      console.error('无法读取剪贴板内容：', error)
+            const imageBlob = await item.getType(item.types[0])
-    })
+            const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
+            // 上传图片
+            const qnOptions = { bucket: 'xp-design', prePath: 'user' }
+            const result: any = await Qiniu.upload(file, qnOptions)
+            const { width, height }: any = await getImage(file)
+            const url = _config.IMG_URL + result.key
+            await api.material.addMyPhoto({ width, height, url })
+            // 添加图片到画布中
+            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            const setting = JSON.parse(JSON.stringify(wImageSetting))
+            setting.width = width
+            setting.height = height
+            setting.imgUrl = url
+            const { width: pW, height: pH } = store.getters.dPage
+            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(wText.setting))
+            setting.text = await navigator.clipboard.readText()
+            store.dispatch('addWidget', setting)
+            break
+          }
+        }
+      })
+      .catch((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: '',