DP/tempdocs/项目结构文档.md

DesignerCEP 项目结构文档

本文档详细说明了 DesignerCEP/Designer 项目的目录结构及各核心文件的作用，帮助开发者快速理解项目架构。

1. 核心目录结构 (src)

src 是项目的源代码目录，主要分为 前端 UI (Vue) 和 后端逻辑 (JSX/ExtendScript) 两部分。

📂 src/

文件/目录	说明
App.vue	Vue 应用的根组件，定义了全局的布局结构。
main.ts	Vue 应用的入口文件，负责初始化 Vue 实例、挂载路由和插件。
api/	存放前端与后端接口交互的代码 (虽然是 CEP，但也可能涉及部分网络请求)。
assets/	静态资源目录，存放图片、字体等。
components/	Vue 通用组件库，存放可在多个页面复用的 UI 组件。
view/	Vue 页面目录，存放具体的业务页面 (如 Login.vue, Home.vue)。
router/	路由配置目录，定义了页面跳转规则。
utils/	前端通用工具函数库。
jsx/	核心 Photoshop 交互逻辑代码 (见下文详细说明)。

---

2. Photoshop 交互核心 (src/jsx)

src/jsx 目录包含了所有在 Photoshop 内部执行的 ExtendScript 代码。这部分代码会被编译为 index.js 供 CEP 调用。

📂 src/jsx/

文件/目录	说明
index.ts	JSX 入口文件。导出了供前端调用的所有高级函数。可以理解为 CEP 插件的 "后端 API 控制器"。
tsconfig.json	JSX 部分的 TypeScript 配置文件，确保 ExtendScript 代码被正确编译（编译为 ES3 兼容代码）。
types/	存放 .d.ts 类型定义文件，用于支持 TypeScript 开发 Photoshop 脚本。

📂 src/jsx/utils/ (通用工具库)

这是我们本次重构新建的目录，用于存放可复用的底层工具函数。

文件	作用详解
ActionManager.ts	ActionManager (AM) 低级操作库。 封装了 loadSelection (载入选区), fill (填充), newDocument (新建文档) 等通过 ActionDescriptor 调用 Photoshop 底层功能的函数。
LayerUtils.ts	图层操作工具库。 包含了 getAllLayers (获取所有图层), findLayerByName (按名查找), selectLayerByName (选中图层) 等 DOM 层面的图层辅助函数。

📂 src/jsx/function/ (业务逻辑封装)

这里存放封装好的高级业务类。

文件/目录	说明
abstract.ts	定义了一些抽象基类或接口 (目前看来可能是作为一个基类模板)。
index.ts	导出 g_func 等全局对象，汇集了所有功能模块。
ps/api.ts	核心 API 实现类。包含了 PSApi, MyLayer, MyDocument 等类。 - 这是一个庞大的文件，封装了大量对 Photoshop 的操作。 - 很多功能与我们的 ActionManager.ts 类似，但以类的形式组织。 - 注意: 该文件定义了全局的 executeAction 类型，我们在写新代码时要注意兼容。

---

3. 前端工具库 (src/utils)

文件	说明
cep.ts	CEP 桥接工具。封装了 CSInterface，提供了前端调用 JSX（evalScript）、监听事件、获取路径等功能。这是 Vue 与 Photoshop 对话的桥梁。
request.ts	封装了 axios 请求，用于网络通信 (如登录、数据同步)。
common.ts	通用的 JS 辅助函数 (如日期格式化等)。

4. 总结：我们要关注的重点

在接下来的重构工作中，我们主要关注以下流程：

1. Vue (前端): 在 src/view 中编写 UI 界面。
2. 调用: 使用 src/utils/cep.ts 中的 evalFile 或 evalScript 调用 JSX。
3. JSX (后端):
   • 在 src/jsx/index.ts 中注册导出的函数。
   • 复杂的业务逻辑写在 src/jsx/function 中。
   • 通用的底层操作 (AM/图层) 优先调用 src/jsx/utils/ActionManager.ts 和 LayerUtils.ts。

这样分层清晰，便于我们逐步迁移 psmark 的旧脚本。