83 lines
7.4 KiB
Markdown
83 lines
7.4 KiB
Markdown
# 前端代码结构与功能说明 (DesignerCEP)
|
||
|
||
本文档详细说明了 `DesignerCEP` 项目的前端代码结构，包括新引入的 **"Shell (启动器) + Core (业务核)"** 双层架构。
|
||
|
||
---
|
||
|
||
## 1. 核心架构说明
|
||
|
||
项目被设计为两个独立的部分，分别构建：
|
||
|
||
1. **Shell (启动器)**:
|
||
- **职责**: 极轻量级，负责登录验证、检查版本、下载 ZIP、解压、动态加载 Core。
|
||
- **代码位置**: `src/launcher/`
|
||
- **构建产物**: 生成 ZXP 安装包的主体。
|
||
2. **Core (业务核)**:
|
||
- **职责**: 包含所有设计功能（Vue 界面 + JSX 脚本）。
|
||
- **代码位置**: `src/` (除 `launcher` 外)
|
||
- **构建产物**: 被打包成 ZIP，由 Shell 下载并运行。
|
||
|
||
---
|
||
|
||
## 2. 目录结构详解
|
||
|
||
### 2.1 根目录配置
|
||
|
||
| 文件名 | 作用 |
|
||
| :--------------------- | :------------------------------------------------------------------------------------------------------------ |
|
||
| `package.json` | 项目依赖管理。包含 `npm run build:shell` (构建启动器) 和 `npm run build:core` (构建业务核) 等脚本。 |
|
||
| `vite.config.ts` | **Core 的构建配置**。用于开发环境 (`npm run dev`) 和业务核打包。配置了 API 代理和 Vue 插件。 |
|
||
| `vite.shell.config.ts` | **Shell 的构建配置**。专门用于构建启动器，指定入口为 `src/launcher/index.html`，并打包为独立的 CEP 插件结构。 |
|
||
| `prod.cep.config.ts` | CEP 插件的生产环境配置文件 (Manifest)。定义包括插件 ID、版本、窗口大小、支持的宿主 (PS, AI 等)。 |
|
||
| `tsconfig.json` | TypeScript 配置文件。定义了别名 (`@/`, `@plugins/`) 和编译选项。 |
|
||
|
||
### 2.2 Shell 启动器 (`src/launcher/`)
|
||
|
||
这是用户安装 ZXP 后第一时间运行的代码。
|
||
|
||
| 路径/文件名 | 作用 |
|
||
| :---------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| **`index.html`** | Shell 的 HTML 入口。引入 `CSInterface.js` 和 `main.ts`。 |
|
||
| **`main.ts`** | Shell 的 JS 入口。初始化 Vue 应用，挂载 `App.vue`。 |
|
||
| **`App.vue`** | Shell 的根组件。包含 `<router-view>`，用于切换登录/更新界面。 |
|
||
| **`router.ts`** | Shell 的路由配置。定义了 `/login` (登录页) 和 `/register` (注册页)。 |
|
||
| **`view/Login.vue`** | **核心登录界面**。集成了 `Updater` 类，点击登录后自动执行：**登录 -> 检查更新 -> 下载 ZIP -> 解压 -> 跳转**。 |
|
||
| **`view/Register.vue`** | 注册界面。 |
|
||
| **`utils/updater.ts`** | **核心更新逻辑**。包含 `Updater` 类。负责调用后端 API (`check_update`)，使用 `fs` 写入文件，使用 `adm-zip` 解压，最后修改 `window.location.href` 加载 Core。 |
|
||
| **`jsx/index.ts`** | Shell 的最小化 JSX 脚本。CEP 插件必须包含至少一个 JSX，这里仅返回版本号，不包含重型业务逻辑。 |
|
||
|
||
### 2.3 Core 业务核 (`src/`)
|
||
|
||
这是实际的业务软件，被下载后动态加载。
|
||
|
||
| 路径/目录 | 作用 |
|
||
| :------------------------------ | :----------------------------------------------------------------------------------------------------- |
|
||
| **`main.ts`** | Core 的入口文件。引入 Arco Design，全局样式等。 |
|
||
| **`App.vue`** | Core 的根组件。 |
|
||
| **`router/index.ts`** | Core 的路由配置。包含 `/home`, `/about` 等业务页面。(注意：已移除登录/注册路由，因为这由 Shell 接管)。 |
|
||
| **`view/Home.vue`** | 主页组件。包含主要的功能入口和测试按钮。 |
|
||
| **`jsx/`** | **Adobe ExtendScript (JSX) 脚本目录**。 |
|
||
|   `index.ts` | JSX 入口。导出所有供 Vue 调用的 Photoshop 接口函数。 |
|
||
|   `utils/ActionManager.ts` | action manager 底层封装 (如载入选区、填充、新建文档)。底层核心。 |
|
||
|   `utils/LayerUtils.ts` | 图层操作封装 (如遍历、查找、重命名)。 |
|
||
| **`utils/cep.ts`** | `CSInterface` 的 TS 封装。用于前端 Vue 调用后端 JSX (`evalScript`)。 |
|
||
| **`utils/request.ts`** | 基于 Umi-Request 或 Axios 的 HTTP 请求封装 (业务用)。 |
|
||
|
||
### 2.4 构建插件 (`plugins/`)
|
||
|
||
用于辅助 Vite 打包 CEP 环境的代码。
|
||
|
||
| 路径/文件名 | 作用 |
|
||
| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| **`jsx/cepPlugin.ts`** | **构建核心**。Vite 插件。负责：<br>1. 监听 JSX 变化并重编译 (Dev)。<br>2. 生产环境调用 `rollup` 编译 JSX 为 `index.js`。<br>3. 复制 manifest.xml 和 index.html 到 `dist` 目录。 |
|
||
| **`buildJsx/index.ts`** | 单独的 Rollup 构建配置，专门用于将 `src/jsx/*.ts` 编译成 Photoshop 能跑的 ES3 格式 JS。 |
|
||
| **`template/`** | 存放 `manifest.xml`, `.debug` 等 CEP 配置文件的模板。 |
|
||
|
||
---
|
||
|
||
## 3. 开发与发布流程总结
|
||
|
||
1. **开发 Shell**: 修改 `src/launcher` -> `npm run build:shell` -> 生成 ZXP。
|
||
2. **开发 Core**: 修改 `src/view` 或 `src/jsx` -> `npm run build:core` -> 得到业务 ZIP 包。
|
||
3. **用户视角**: 安装 ZXP -> 启动插件 -> 看到登录框 (Shell) -> 登录并下载最新 Core -> 自动跳转进入业务界面。
|