# 前端代码结构与功能说明 (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.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 插件。负责：
1. 监听 JSX 变化并重编译 (Dev)。
2. 生产环境调用 `rollup` 编译 JSX 为 `index.js`。
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 -> 自动跳转进入业务界面。