wsqy-poster-editor一款面向移动端 H5 的海报编辑器 / 海报设计器,纯前端,操作简单,功能齐全。Gitee:https://gitee.com/mosmos/wsqy-poster-editor/Github:https://github.com/imooos/wsqy-poster-editor/在线预览:https://wsqy-poster-editor.pages.dev/预览软件架构Vue 3 TypeScriptscript setup,组合式 API 风格Vite构建,vue-tsc做类型检查Pinia作为文档状态单一真相源(单一 storeposter,维护 elements、canvas、撤销/重做、选区)Konva / vue-konva负责画布渲染,直接消费 store 的 reactive 对象,自动响应式idb-keyval把整份文档写入 IndexedDB 实现草稿持久化QRCode生成二维码fontsource/* 自研utils/fontLoader按需动态加载 Web 字体,首屏不打包字形lucide-vue-next提供图标源码分层:目录职责src/views/顶层页面(单视图EditorView.vue)src/components/UI 组件(PosterCanvas、TopBar/BottomBar、PropertyPanel/LayerPanel、各种*Dialog/*Sheet)src/composables/可复用逻辑(useDraft、useDialog、useAvailableFonts)src/stores/全局状态(poster.ts,撤销栈容量 50)src/utils/纯函数工具(qrcode、exportPng、image、crop、roundRect、snap、fontLoader)src/types/类型定义(PosterDocument、PosterElement联合类型)src/constants/常量(画布尺寸预设、字体库、颜色板)功能特性多种画布尺寸预设:1:1、3:4、4:3、5:4、9:16、16:9元素增删:文字、图片、矩形、圆形、三角形、二维码拖拽、缩放、旋转、锁定,支持多选与图层面板撤销 / 重做(历史栈容量 50,键盘 ⌘/CtrlZ / ⌘/CtrlShiftZ)复制(⌘/CtrlD)、删除、上下左右微调(Shift 10px)文字属性:字号、字体、字重、字色、行高、字距、对齐、下划线图片裁剪与替换、滤镜(原图/灰度/复古/黑白)、圆角画布背景:透明 / 纯色 / 图片,支持自定义颜色与圆角二维码:支持任意文本 / URL,实时预览导出 PNG,支持右键保存JSON 导入 / 导出(可作为本地存档与跨设备搬运)草稿自动保存到 IndexedDB,刷新页面自动恢复响应式布局,移动端优先安装与运行# 安装依赖npminstall# 本地开发(默认 http://localhost:5173)npmrun dev# 类型检查npmrun type-check# 生产构建(产物在 dist/)npmrun build# 预览构建产物npmrun preview使用说明点击底部工具栏文字 / 图片 / 矩形 / 圆形 / 三角 / 二维码添加元素单击选中元素,拖动控制点调整位置 / 大小 / 旋转,八个手柄支持等比缩放双击文字或点击右下角编辑按钮打开属性面板,编辑字号、颜色、对齐等点击右上角导出生成 PNG,右键保存或点击保存链接下载顶部画布尺寸下拉切换预设比例;吸管 / 橡皮切换背景调整;导入按钮从 JSON 恢复所有变更自动进入撤销栈,可随时 ⌘/CtrlZ 回退快捷键快捷键动作⌘ / Ctrl Z撤销⌘ / Ctrl Shift Z重做⌘ / Ctrl D复制选中Delete / Backspace删除选中Esc取消选择 / 关闭面板← ↑ → ↓选中元素移动 1pxShift ← ↑ → ↓选中元素移动 10px浏览器要求支持现代浏览器(Chrome / Edge / Safari / Firefox 最新两个大版本),移动端 iOS Safari 14、Android Chrome 90。