24kycj
SoonDesign 设计工具
专业的卡片和光盘设计软件，支持单面/双面模板设计、二维码/条形码生成、图片编辑等功能。提供桌面端（Electron）和网页端两种使用方式。
✨ 主要功能
- 🎨 模板设计：支持单面（光盘）和双面（卡片）模板设计
- 📱 二维码/条形码：内置二维码和条形码生成器
- 🖼️ 图片编辑：支持图片添加、裁剪、旋转、缩放等操作
- 📝 文本编辑：丰富的文本样式设置（字体、大小、颜色、对齐等）
- 💾 文件管理：支持
.soon格式项目文件的保存和打开 - 🌐 多端支持：桌面端（Windows/Mac/Linux）和网页端（现代浏览器）
- 🌍 多语言：支持中文简体、中文繁体、英文
🚀 快速开始
系统要求
- Node.js: >= 16.0.0
- npm: >= 7.0.0 或 yarn
- 操作系统: Windows 7+, macOS 10.12+, Linux (Ubuntu 18.04+)
安装依赖
# 使用 yarn（推荐）
yarn install
# 或使用 npm
npm install
启动应用
# 桌面端（Electron）
yarn start
# 或
npm start
网页端使用
方式一：使用本地服务器（推荐）⭐
# 启动本地服务器（自动打开浏览器）
yarn web
# 或使用 npm
npm run web
# 开发模式（禁用缓存）
yarn web:dev
服务器会在 http://localhost:8080 启动，并自动打开首页。
💡 提示：使用本地服务器可以避免 CORS 问题，确保所有资源正确加载。
方式二：使用 Python 内置服务器
# Python 3
python -m http.server 8080
# Python 2
python -m SimpleHTTPServer 8080
然后在浏览器中访问 http://localhost:8080/index.web.html
方式三：使用其他静态服务器
# 使用 serve（需要先安装: npm install -g serve）
serve -p 8080
# 使用 live-server（需要先安装: npm install -g live-server）
live-server --port=8080
方式四：直接打开文件
直接在浏览器中打开以下文件：
- 首页:
index.web.html - 单面设计页:
design1.web.html - 双面设计页:
design2.web.html
⚠️ 注意：直接打开文件时，某些浏览器可能因为安全策略限制文件访问，建议使用方式一。
网页端数据存储
- sessionStorage: 存储当前会话的项目数据（关闭标签页后清空）
- localStorage: 存储历史记录和用户设置（持久化）
- 文件格式: 使用
soondesign_session:文件名.soon作为 session key
服务器文件保存功能 ⭐ 新增
网页端默认将文件保存在浏览器缓存中。如果部署在服务器上，可以启用服务器文件保存功能，实现真正的文件持久化：
- 自动检测：程序会自动检测是否在服务器环境（非 localhost）
- 自动保存：保存文件时自动上传到服务器
- 自动读取：打开文件时自动从服务器读取
- 降级处理：如果服务器保存失败，自动降级为浏览器下载
部署步骤：
- 将
api目录下的 PHP 文件上传到服务器的/api/目录 - 创建文件存储目录：
/design/files/ - 详细说明请参考：api/README.md
📦 构建和发布
方式一：一键发布 ⭐ 推荐
# Windows 系统
yarn release:win
# Mac 系统
yarn release:mac
# Linux 系统
yarn release:linux
✅ 自动完成：加密 → 测试 → 清理 → 打包
✅ 安装包位置：build 文件夹
方式二：分步操作（手动控制）
步骤 1：加密代码
yarn encrypt:win # Windows
yarn encrypt:linux # Mac/Linux
✅ 生成 .jsc 加密文件（自动覆盖旧文件）
步骤 2：测试
yarn start
✅ 确认程序正常运行，无报错
步骤 3：清理源文件
yarn cleanup
✅ 删除 .js 源文件，自动备份到 .backup 文件夹
步骤 4：打包
yarn build:win # Windows
yarn build:mac # Mac
yarn build:linux # Linux
✅ 生成安装包到 build 文件夹
🔧 其他常用命令
开发相关
# 启动开发模式
yarn start
# 构建 Web 资源
yarn dist
# 使用 electron-packager 打包（旧方式）
yarn package
文件管理
# 恢复源文件
yarn restore
# 清理加密文件
yarn cleanup:jsc
从
.backup文件夹恢复所有源文件（误删除时使用）
修改文件名映射
编辑 lib/module-map.json：
{
"mappings": {
"design1": {
"core": "core1", // 修改这里
"output": "output1",
"ui": "ui1"
}
}
}
然后重新运行 yarn encrypt:win
📁 项目结构
soonDesign/
├── lib/ # 核心代码库
│ ├── platform/ # 平台抽象层
│ │ ├── web.js # 网页端实现
│ │ ├── electron.js # Electron 桌面端实现
│ │ └── bridge.js # 平台桥接层
│ ├── common/ # 公共工具
│ ├── design1/ # 单面模板（光盘）
│ │ ├── core.js # 核心功能
│ │ ├── output.js # 导出/保存
│ │ └── ui.js # 界面交互
│ ├── design2/ # 双面模板（卡片）
│ │ ├── core.js
│ │ ├── output.js
│ │ └── ui.js
│ ├── index.js # 首页入口
│ ├── design1.js # 单面模板入口
│ └── design2.js # 双面模板入口
├── public/ # 静态资源
│ ├── images/ # 图片资源
│ └── css/ # 样式文件
├── layui/ # LayUI 框架
├── scripts/ # 构建脚本
│ └── encrypt/ # 加密脚本
├── help/ # 帮助文档
├── main.js # Electron 主进程入口
├── index.web.html # 网页端首页
├── design1.web.html # 网页端单面设计页
├── design2.web.html # 网页端双面设计页
├── package.json # 项目配置
└── README.md # 本文档
🛠️ 技术栈
- 框架: Electron 15.x
- UI 库: LayUI
- 画布库: Fabric.js
- 二维码: jr-qrcode
- 条形码: jsbarcode
- 构建工具: electron-builder, webpack
- 语言: JavaScript (ES5+)
🌐 网页端特性
存储机制
- sessionStorage: 存储当前会话的项目数据（关闭标签页后清空）
- localStorage: 存储历史记录和用户设置（持久化）
- 文件格式: 使用
soondesign_session:文件名.soon作为 session key
功能限制
- 文件保存会触发浏览器下载（使用 File System Access API 时除外）
- 关闭标签页后 session 数据会丢失，但历史记录会保留
- 部分浏览器可能限制脚本关闭页签的功能
浏览器兼容性
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
⚠️ 注意事项
开发时
- 保留
.js源文件，不要运行cleanup - 使用
yarn start启动开发模式 - 按
F12打开开发者工具调试
发布时
- 必须先加密、再清理、最后打包
- 备份文件在
.backup文件夹（不会被打包进应用） - 确保所有依赖已正确安装
网页端
- 数据存储在浏览器本地，清除浏览器数据会丢失历史记录
- 建议定期导出
.soon文件作为备份 - 不同域名下的数据不共享
🔧 调试模式
桌面端
按 F12 或 Ctrl+Shift+I（Mac: Cmd+Option+I）打开开发者工具查看错误信息。
网页端
同样使用浏览器开发者工具（F12），查看 Console 面板的日志和错误信息。
📚 更多文档
📝 版本信息
- 当前版本: v3.2.101
- 更新日期: 2026-02-07
📄 许可证
MIT License
Copyright © 2023 CardSoon
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📞 联系方式
- 官网: CardSoon
- 邮箱: jerry79.xu@gmail.com