DP/tempdocs/前端代码结构与功能说明.md

前端代码结构与功能说明 (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 插件。负责： 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 -> 自动跳转进入业务界面。