yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

网页端：平台桥与部署修复（宝塔/Nginx）

Browse Source 
- 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>
This commit is contained in:
24kycj
2026-05-09 18:57:53 +08:00
parent ee6ef462ca
commit 2e6578247e
27 changed files with 6606 additions and 3542 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+361 -160
View File
@@ -1,160 +1,361 @@
# SoonDesign 设计工具
简单易用的桌面设计软件，支持光盘和卡片模板设计。
---
## 🚀 快速开始
### 第一次使用
```bash
# 1. 安装依赖（只需一次）
yarn install
# 2. 启动程序
yarn start
```
> **前置要求**：需要安装 [Node.js](https://nodejs.org/)（推荐 16 或更高版本）
---
## 📦 发布流程（傻瓜式操作）
### 方式一：一键发布 ⭐ 推荐
```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 restore
```
> 从 `.backup` 文件夹恢复所有源文件（误删除时使用）
### 清理加密文件
```bash
yarn cleanup:jsc
```
> 删除所有 `.jsc` 文件（重新加密前使用）
### 修改文件名映射
编辑 `lib/module-map.json`：
```json
{
"mappings": {
"design1": {
"core": "core1", // 修改这里
"output": "output1",
"ui": "ui1"
}
}
}
```
然后重新运行 `yarn encrypt:win`
---
## ⚠️ 注意事项
- **开发时**：保留 `.js` 源文件，不要运行 `cleanup`
- **发布时**：必须先加密、再清理、最后打包
- **备份在**：`.backup` 文件夹（不会被打包进应用）
---
## 📁 项目结构
```
lib/
├── module-map.json - 文件名映射配置
├── index.js - 首页入口
├── design1.js - 光盘模板入口
├── design2.js - 卡片模板入口
├── design1/ - 光盘模板功能模块
│ ├── core.js - 核心功能
│ ├── output.js - 导出/保存
│ └── ui.js - 界面交互
└── design2/ - 卡片模板功能模块
├── core.js
├── output.js
└── ui.js
scripts/encrypt/ - 加密脚本（不会被打包）
.backup/ - 源文件备份（不会被打包）
```
---
## 🔧 调试模式
按 `F12` 或 `Ctrl+Shift+I` 打开开发者工具查看错误信息。
---
## 📚 更多文档
- [加密详细说明](scripts/encrypt/README.md)
- 当前版本：v2.3.017
# 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