merge: merge main branch

2025-07-15 16:02:19 +08:00 · 2024-03-16 11:30:41 +00:00 · 2024-03-16 11:30:41 +00:00 · dc37a3b9c1
commit dc37a3b9c1
parent d346f4e3a9 ba34a9ee94
8 changed files with 92 additions and 73 deletions
--- a/README.md
+++ b/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 预训练模型

-### 交流群
-
-| 作者微信：备注加群 | 关注公众号 |
-| --- | --- |
-| <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** ~

 [![Star History Chart](https://api.star-history.com/svg?repos=palxiao/poster-design&type=Date)](https://star-history.com/#palxiao/poster-design&Date)

--- a/src/components/modules/layout/designBoard/index.vue
+++ b/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'
--- a/src/components/modules/settings/valueSelect.vue
+++ b/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; // Appears 2 times
-@color1: #d1d1d1; // Appears 2 times
+@color0: #e1e1e1;
+@color1: #d1d1d1;

 .value-select {
  // height: 60px;
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/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()
-  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')
+  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')
+  })
 }
 /**
 * 撤销
--- a/src/mixins/methods/handlePaste.ts
+++ b/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) => {
@ -17,45 +17,56 @@ 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 { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import wText from '@/components/modules/widgets/wText/wText.vue'

 export default () => {
-  navigator.clipboard
-    .read()
-    .then(async (dataTransfer: any) => {
-      for (let i = 0; i < dataTransfer.length; i++) {
-        const item = dataTransfer[i]
-        if (item.types.toString().indexOf('image') !== -1) {
-          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
+  return new Promise<void>((resolve) => {
+    navigator.clipboard
+      .read()
+      .then(async (dataTransfer: any) => {
+        if (store.getters.dActiveElement.editable) {
+          return
        }
-      }
-    })
-    .catch((error) => {
-      console.error('无法读取剪贴板内容：', error)
-    })
+        for (let i = 0; i < dataTransfer.length; i++) {
+          const item = dataTransfer[i]
+          if (item.types.toString().indexOf('image') !== -1) {
+            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)
+            // 清空剪贴板，防止多次上传图片
+            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()
+      })
+  })
 }
--- a/src/store/modules/design/actions.ts
+++ b/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) {
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@ -29,7 +29,6 @@ const all = {
    dDraging: false, // 是否正在抓取组件
    dResizeing: false, // 是否正在调整组件宽高
    dShowRefLine: true, // 是否显示参考线
-
    dResizeWH: {
      // 初始化调整大小时组件的宽高
      width: 0,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -58,6 +58,7 @@ export default defineConfig({
  },
  server: {
    hmr: { overlay: false },
+    host: '127.0.0.1'
    // proxy: {
    //   '/api': {
    //     target: '',