diff --git a/README.md b/README.md index 63f2ffb..d2c1b79 100644 --- 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)。 ## 其它 +我们尝试沉淀一个高质量内容社区，形成可持续学习的平台，同时解决开发者在项目中遇到的疑难和困惑，帮大家少走一些弯路。 + + + +也欢迎关注公众号：品味前端，回复“加群”进行交流。 + + + +----- + 本项目最早使用 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** ~ +开源不易，最后别忘了给本项目点个 **Star** ~ [![Star History Chart](https://api.star-history.com/svg?repos=palxiao/poster-design&type=Date)](https://star-history.com/#palxiao/poster-design&Date) diff --git a/package-lock.json b/package-lock.json index 9ff4481..ecc7179 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "moveable-helper": "^0.4.0", "nanoid": "^3.1.23", "normalize.css": "^8.0.1", + "pinia": "^2.1.7", "qr-code-styling": "^1.6.0-rc.1", "selecto": "^1.13.0", "throttle-debounce": "^3.0.1", @@ -3276,6 +3277,56 @@ "node": ">=6" } }, + "node_modules/pinia": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz", + "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==", + "dependencies": { + "@vue/devtools-api": "^6.5.0", + "vue-demi": ">=0.14.5" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.3.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.14.7", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz", + "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/postcss": { "version": "8.4.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", diff --git a/package.json b/package.json index 6d7970f..12b5210 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "moveable-helper": "^0.4.0", "nanoid": "^3.1.23", "normalize.css": "^8.0.1", + "pinia": "^2.1.7", "qr-code-styling": "^1.6.0-rc.1", "selecto": "^1.13.0", "throttle-debounce": "^3.0.1", diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue index d542906..749e6c3 100644 --- a/src/components/modules/layout/designBoard/index.vue +++ b/src/components/modules/layout/designBoard/index.vue @@ -1,5 +1,6 @@ @@ -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' diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue index df968da..320455e 100644 --- a/src/components/modules/panel/wrap/TempListWrap.vue +++ b/src/components/modules/panel/wrap/TempListWrap.vue @@ -32,6 +32,7 @@ import useConfirm from '@/common/methods/confirm' import { useSetupMapGetters } from '@/common/hooks/mapGetters' import imgWaterFall from './components/imgWaterFall.vue' import { IGetTempListData } from '@/api/home' +import useUserStore from '@/store/modules/base/user' type TState = { loading: boolean @@ -52,6 +53,7 @@ const listRef = ref(null) const route = useRoute() const router = useRouter() const store = useStore() +const userStore = useUserStore() const state = reactive({ loading: false, loadDone: false, @@ -64,8 +66,9 @@ const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHis const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 } const { cate, edit } = route.query -cate && (pageOptions.cate = (cate as LocationQueryValue) || 1) -edit && store.commit('managerEdit', true) +cate && (pageOptions.cate = (cate as LocationQueryValue) ?? 1) +// edit && store.commit('managerEdit', true) +edit && userStore.managerEdit(true) // onMounted(async () => {}) @@ -116,7 +119,8 @@ async function selectItem(item: IGetTempListData) { return false } } - store.commit('managerEdit', false) + // store.commit('managerEdit', false) + userStore.managerEdit(false) store.commit('setDWidgets', []) setTempId(item.id) diff --git a/src/components/modules/settings/valueSelect.vue b/src/components/modules/settings/valueSelect.vue index 9eb6089..042e90f 100644 --- 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 - * @LastEditTime: 2023-11-20 18:21:55 + * @LastEditTime: 2024-03-15 17:34:00 -->