24kycj
2e6578247e
- lib/platform：网页 Electron 统一 bridge/web/electron，子目录 API 基路径、返回首页跳站点根、路径末尾斜杠兼容 - index/design*.web.html：网页入口，web.js 加缓存参数避免旧脚本缓存 - api：PHP 读写 soon；文档说明目录权限与 Nginx - lib/design*、lib/index：与 platformBridge 对接及网页侧逻辑 - 公共资源 JsBarcode/jr-qrcode；文档与 package/README/.gitignore 等同步更新 Co-authored-by: Cursor <cursoragent@cursor.com>
362 lines
8.3 KiB
Markdown
362 lines
8.3 KiB
Markdown
# 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+)
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 使用 yarn（推荐）
|
||
yarn install
|
||
|
||
# 或使用 npm
|
||
npm install
|
||
```
|
||
|
||
### 启动应用
|
||
|
||
```bash
|
||
# 桌面端（Electron）
|
||
yarn start
|
||
|
||
# 或
|
||
npm start
|
||
```
|
||
|
||
### 网页端使用
|
||
|
||
#### 方式一：使用本地服务器（推荐）⭐
|
||
|
||
```bash
|
||
# 启动本地服务器（自动打开浏览器）
|
||
yarn web
|
||
|
||
# 或使用 npm
|
||
npm run web
|
||
|
||
# 开发模式（禁用缓存）
|
||
yarn web:dev
|
||
```
|
||
|
||
服务器会在 `http://localhost:8080` 启动，并自动打开首页。
|
||
|
||
> 💡 **提示**：使用本地服务器可以避免 CORS 问题，确保所有资源正确加载。
|
||
|
||
#### 方式二：使用 Python 内置服务器
|
||
|
||
```bash
|
||
# Python 3
|
||
python -m http.server 8080
|
||
|
||
# Python 2
|
||
python -m SimpleHTTPServer 8080
|
||
```
|
||
|
||
然后在浏览器中访问 `http://localhost:8080/index.web.html`
|
||
|
||
#### 方式三：使用其他静态服务器
|
||
|
||
```bash
|
||
# 使用 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
|
||
|
||
#### 服务器文件保存功能 ⭐ 新增
|
||
|
||
网页端默认将文件保存在浏览器缓存中。如果部署在服务器上，可以启用服务器文件保存功能，实现真正的文件持久化：
|
||
|
||
1. **自动检测**：程序会自动检测是否在服务器环境（非 localhost）
|
||
2. **自动保存**：保存文件时自动上传到服务器
|
||
3. **自动读取**：打开文件时自动从服务器读取
|
||
4. **降级处理**：如果服务器保存失败，自动降级为浏览器下载
|
||
|
||
**部署步骤**：
|
||
- 将 `api` 目录下的 PHP 文件上传到服务器的 `/api/` 目录
|
||
- 创建文件存储目录：`/design/files/`
|
||
- 详细说明请参考：[api/README.md](api/README.md)
|
||
|
||
---
|
||
|
||
## 📦 构建和发布
|
||
|
||
### 方式一：一键发布 ⭐ 推荐
|
||
|
||
```bash
|
||
# Windows 系统
|
||
yarn release:win
|
||
|
||
# Mac 系统
|
||
yarn release:mac
|
||
|
||
# Linux 系统
|
||
yarn release:linux
|
||
```
|
||
|
||
✅ **自动完成**：加密 → 测试 → 清理 → 打包
|
||
✅ **安装包位置**：`build` 文件夹
|
||
|
||
### 方式二：分步操作（手动控制）
|
||
|
||
#### 步骤 1：加密代码
|
||
|
||
```bash
|
||
yarn encrypt:win # Windows
|
||
yarn encrypt:linux # Mac/Linux
|
||
```
|
||
|
||
✅ 生成 `.jsc` 加密文件（自动覆盖旧文件）
|
||
|
||
#### 步骤 2：测试
|
||
|
||
```bash
|
||
yarn start
|
||
```
|
||
|
||
✅ 确认程序正常运行，无报错
|
||
|
||
#### 步骤 3：清理源文件
|
||
|
||
```bash
|
||
yarn cleanup
|
||
```
|
||
|
||
✅ 删除 `.js` 源文件，自动备份到 `.backup` 文件夹
|
||
|
||
#### 步骤 4：打包
|
||
|
||
```bash
|
||
yarn build:win # Windows
|
||
yarn build:mac # Mac
|
||
yarn build:linux # Linux
|
||
```
|
||
|
||
✅ 生成安装包到 `build` 文件夹
|
||
|
||
---
|
||
|
||
## 🔧 其他常用命令
|
||
|
||
### 开发相关
|
||
|
||
```bash
|
||
# 启动开发模式
|
||
yarn start
|
||
|
||
# 构建 Web 资源
|
||
yarn dist
|
||
|
||
# 使用 electron-packager 打包（旧方式）
|
||
yarn package
|
||
```
|
||
|
||
### 文件管理
|
||
|
||
```bash
|
||
# 恢复源文件
|
||
yarn restore
|
||
|
||
# 清理加密文件
|
||
yarn cleanup:jsc
|
||
```
|
||
|
||
> 从 `.backup` 文件夹恢复所有源文件（误删除时使用）
|
||
|
||
### 修改文件名映射
|
||
|
||
编辑 `lib/module-map.json`：
|
||
|
||
```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 面板的日志和错误信息。
|
||
|
||
---
|
||
|
||
## 📚 更多文档
|
||
|
||
- [加密详细说明](scripts/encrypt/README.md)
|
||
- [网页端功能清单](docs/网页端功能清单.md)
|
||
|
||
---
|
||
|
||
## 📝 版本信息
|
||
|
||
- **当前版本**: v3.2.101
|
||
- **更新日期**: 2026-02-07
|
||
|
||
---
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
Copyright © 2023 [CardSoon](https://www.cardsoon.com)
|
||
|
||
---
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
---
|
||
|
||
## 📞 联系方式
|
||
|
||
- **官网**: [CardSoon](https://www.cardsoon.com/index.php/cn/products/cardsoonsoft.html)
|
||
- **邮箱**: jerry79.xu@gmail.com
|