# 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