78 lines
6.5 KiB
Markdown
78 lines
6.5 KiB
Markdown
# 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` 的旧脚本。
|