# 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) 低级操作库**。<br>封装了 `loadSelection` (载入选区), `fill` (填充), `newDocument` (新建文档) 等通过 ActionDescriptor 调用 Photoshop 底层功能的函数。 |
| **`LayerUtils.ts`**    | **图层操作工具库**。<br>包含了 `getAllLayers` (获取所有图层), `findLayerByName` (按名查找), `selectLayerByName` (选中图层) 等 DOM 层面的图层辅助函数。                    |

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

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

| 文件/目录         | 说明                                                                                                                                                                                                                                                                                |
| :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`abstract.ts`** | 定义了一些抽象基类或接口 (目前看来可能是作为一个基类模板)。                                                                                                                                                                                                                         |
| **`index.ts`**    | 导出 `g_func` 等全局对象，汇集了所有功能模块。                                                                                                                                                                                                                                      |
| **`ps/api.ts`**   | **核心 API 实现类**。包含了 `PSApi`, `MyLayer`, `MyDocument` 等类。<br>- 这是一个庞大的文件，封装了大量对 Photoshop 的操作。<br>- 很多功能与我们的 `ActionManager.ts` 类似，但以类的形式组织。<br>- **注意**: 该文件定义了全局的 `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` 的旧脚本。