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://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
```
-访问 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** ~
[](https://star-history.com/#palxiao/poster-design&Date)
diff --git a/src/assets/data/LayerIconList.ts b/src/assets/data/LayerIconList.ts
index 7562027..da31325 100644
--- a/src/assets/data/LayerIconList.ts
+++ b/src/assets/data/LayerIconList.ts
@@ -6,12 +6,7 @@
* @LastEditTime: 2024-03-01 20:55:51
*/
-export type LayerIconList = {
- key: string
- icon: string
- tip: string
- value: number
-}
+import { TIconItemSelectData } from "@/components/modules/settings/iconItemSelect.vue"
export default [
{
@@ -26,4 +21,4 @@ export default [
tip: '下一层',
value: -1,
},
-] as LayerIconList[]
+] as TIconItemSelectData[]
diff --git a/src/common/methods/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts
index c3fc7a9..0759941 100644
--- a/src/common/methods/DesignFeatures/setWidgetData.ts
+++ b/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) {
@@ -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
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index 2d92219..076501f 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/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)
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/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 490ad35..7d16256 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -41,7 +41,8 @@