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

重构 monorepo 并完善网页端订阅与首页体验

Browse Source 
- 迁移为 frontend-web、frontend-electron、backend-web 与 docker 部署结构
- 网页端：订阅门禁二次弹窗、套餐/支付组件化、顶栏分组对齐
- 首页：最近文件与模板库布局优化，缩略图对齐，下载与删除操作
- 新增管理后台、支付与云端文件 API，更新 README 与项目规范

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
2026-06-08 18:17:39 +08:00
parent 5814b7bc0e
commit 88c6ce8ccc
511 changed files with 189528 additions and 22804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+35 -345
View File
@@ -1,361 +1,51 @@
# SoonDesign 设计工具
# SoonDesign
专业的卡片和光盘设计软件，支持单面/双面模板设计、二维码/条形码生成、图片编辑等功能。提供**桌面端（Electron）**和**网页端**两种使用方式。
卡片/光盘设计工具：Electron 桌面端 + Web 端 + PHP 后端。
---
## 目录
## ✨ 主要功能
| 目录 | 说明 |
|---|---|
| [frontend-electron/](frontend-electron/) | 桌面程序 |
| [frontend-web/](frontend-web/) | Web 前端 |
| [backend-web/](backend-web/) | PHP API |
| [docker/](docker/) | 本地 Docker 编排（非生产部署） |
- 🎨 **模板设计**：支持单面（光盘）和双面（卡片）模板设计
- 📱 **二维码/条形码**：内置二维码和条形码生成器
- 🖼️ **图片编辑**：支持图片添加、裁剪、旋转、缩放等操作
- 📝 **文本编辑**：丰富的文本样式设置（字体、大小、颜色、对齐等）
- 💾 **文件管理**：支持 `.soon` 格式项目文件的保存和打开
- 🌐 **多端支持**：桌面端（Windows/Mac/Linux）和网页端（现代浏览器）
- 🌍 **多语言**：支持中文简体、中文繁体、英文
## 本地开发
---
需 [Docker Desktop](https://www.docker.com/products/docker-desktop/)。
## 🚀 快速开始
### 系统要求
- **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
```bat
docker\sync-config.ps1 :: 同步 API 地址到 deploy-config.js 与 backend local.php（改端口后必跑）
scripts\start.bat :: 启动
scripts\start.bat stop :: 停止（保留数据库）
scripts\start.bat reset :: 停止并清空数据库卷
```
### 启动应用
`frontend-web/assets/deploy-config.js` 由 `docker/sync-config.ps1` 根据 `docker/.env` 端口生成，请勿手改 localhost 后提交；生产环境在部署时写入实际 API 地址。
```bash
# 桌面端（Electron）
yarn start
| 服务 | 默认地址 |
|------|----------|
| Web | http://localhost:8100/pages/index.web.html |
| Admin 登录 | http://localhost:8100/pages/admin/login.html |
| Admin 后台 | http://localhost:8100/pages/admin/index.html |
| Electron 静态 | http://localhost:8101/pages/index.html |
| API | http://localhost:8102/health |
# 或
npm start
```
端口在 `docker/.env` 修改（默认 8100/8101/8102）。测试管理员：`admin@local.test` / `admin123`（仅 `role=admin` 可进入管理后台）。
### 网页端使用
管理后台模块：概览、用户（详情/启停）、订单筛选、套餐、系统设置、审计日志、支付密钥上传。
#### 方式一：使用本地服务器（推荐）⭐
桌面窗口（可选）：`cd frontend-electron && npm install && npm start`
```bash
# 启动本地服务器（自动打开浏览器）
yarn web
## 生产部署
# 或使用 npm
npm run web
- Web 根目录：`frontend-web/`
- PHP 根目录：`backend-web/public/`
- 数据库：导入 `backend-web/schema.sql`
- 后端：`backend-web/config/local.php.example` → `local.php`
- 前端 API：`frontend-web/assets/deploy-config.js`
# 开发模式（禁用缓存）
yarn web:dev
```
支付与 notify 说明见 [docs/PAYMENT.md](docs/PAYMENT.md)。列表分页契约见 [docs/API-PAGINATION.md](docs/API-PAGINATION.md)。
服务器会在 `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
`frontend-electron/js/design1-back.js`、`design2-back.js` 等为历史参考快照，页面勿引用；功能对齐请以当前 `frontend-web` / `frontend-electron` 为准。