docs: readme

README.md

@@ -4,7 +4,7 @@
 
 ## Poster Design
 
-迅排设计是一款漂亮易用且功能强大的开源创意图片编辑器，是对标稿定设计、创客贴、Canva 等商业产品的免费在线设计工具。
+一款漂亮易用且功能强大的开源创意图片编辑器，是对标稿定设计、创客贴、Canva 等商业产品的免费在线设计工具。
 
 [![](https://xp.palxp.cn/images/2023-7-16-1689500112694.gif)](https://design.palxp.cn/)
 
@@ -13,7 +13,7 @@
 - 丝滑的页面操作体验，丰富的交互细节，基础功能完善
 - 采用服务端生成图片，能确保多端出图统一性，支持各种 CSS 特性
 - 简易 AI 抠图工具，上传图片一键去除背景
-- 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus，开发体验畅快
+- 技术栈：Vue3 、Vite5 、Vuex 、ElementPlus，开发体验畅快
 - 图片生成：Puppeteer、Express
 
 ### 支持功能
@@ -35,12 +35,14 @@
 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)。
 
 ### 图片生成服务
 
@@ -50,10 +52,20 @@ npm run serve
 
 ### 服务端
 
-目前本项目演示 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/components/modules/widgets/wGroup/wGroup.vue

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

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

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

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

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

src/mixins/methods/handlePaste.ts

@@ -17,8 +17,7 @@ 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 wText from '@/components/modules/widgets/wText/wText.vue'
+import wText from '@/components/modules/widgets/wText/wText.vue'
-import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 
 export default () => {
   navigator.clipboard
@@ -48,7 +47,7 @@ export default () => {
           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

src/types/global.d.ts

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

src/types/style.d.ts

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

src/views/Psd.vue

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