# 前端代码结构与功能说明 (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) 脚本目录**。                                                                |
| &emsp; `index.ts`               | JSX 入口。导出所有供 Vue 调用的 Photoshop 接口函数。                                                   |
| &emsp; `utils/ActionManager.ts` | action manager 底层封装 (如载入选区、填充、新建文档)。底层核心。                                       |
| &emsp; `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 -> 自动跳转进入业务界面。
