zuowei/DP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI套图分层方案 + Gemini集成 - 4种图案类型处理 + 正片叠底 + 宽高比 + 模型选择

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jimi
2026-02-07 16:59:56 +08:00
parent 12395d8eca
commit dae906aba7
277 changed files with 15009 additions and 19922 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
开发准则.md
View File

@@ -6,13 +6,88 @@
## 2. 技术栈
### 2.1 核心框架与语言
- **核心框架**: Vue 3 (Composition API + `<script setup>`)
- **构建工具**: Vite
- **语言**: TypeScript
- **UI 组件库**: Arco Design Vue (`@arco-design/web-vue`)
- **路由**: Vue Router 4
- **UI 组件库**: Arco Design Vue (`@arco-design/web-vue` v2.57.0)
- **CEP 环境**: Adobe CEP (宿主环境: **Adobe Photoshop**)
- **HTTP**: Axios / Umi-request
### 2.2 状态管理库
- **Pinia** (v3.0.4)
- Vue 3 官方推荐的状态管理库
- 使用 Composition API 风格,支持 TypeScript
- 项目中的使用:
- 在 `main.ts` 中全局注册: `app.use(createPinia())`
- Store 模块位于 `src/store/` 目录
- 示例: `src/store/app.ts` (应用全局状态)、`src/store/counter.ts`
- 使用方式:
```typescript
import { defineStore } from "pinia";
import { ref } from "vue";
export const useAppStore = defineStore("app", () => {
const loading = ref(false);
function setLoading(status: boolean) {
loading.value = status;
}
return { loading, setLoading };
});
```
### 2.3 请求管理库
- **Axios** (v1.6.8)
- 基于 Promise 的 HTTP 客户端
- 项目中的封装:
- 统一请求实例: `src/utils/request.ts`
- 请求拦截器: 自动添加 Token 到请求头
- 响应拦截器: 统一错误处理 (401 自动跳转登录、错误提示等)
- API 模块化: `src/api/` 目录下按功能模块划分
- `auth.ts` - 认证相关接口
- `user.ts` - 用户相关接口
- `checkin.ts` - 签到相关接口
- `analytics.ts` - 数据分析接口
- 配置说明:
- baseURL 通过 `src/config/index.ts` 统一管理
- 开发环境通过 Vite 代理转发到本地后端 (localhost:8000)
- 生产环境直接请求远程 API 服务器
### 2.4 工程管理库
- **Vite** (v4.3.9) - 构建工具
- 配置文件: `vite.config.ts`
- 开发服务器: 端口 5173,支持热更新
- 代理配置: `/api` 代理到本地后端
- 插件系统:
- `@vitejs/plugin-vue` - Vue 3 支持
- `@vitejs/plugin-legacy` - 兼容旧版 Chrome (CEP 环境)
- `vite-tsconfig-paths` - TypeScript 路径别名支持
- 自定义 `cepPlugin` - CEP 开发环境支持
- **Vue Router** (v4.2.4) - 路由管理
- 路由配置: `src/router/index.ts`
- 支持 Hash 模式 (适配 CEP 环境)
- 路由守卫: 登录验证、权限控制
- **TypeScript** (v5.1.5) - 类型系统
- 严格模式开启
- 类型定义: `src/types/` 目录
- 禁止使用 `any` (除非必要且需注释说明)
- **Vitest** (v1.6.0) - 测试框架
- 配置在 `vite.config.ts` 中
- 测试环境: jsdom
- 支持 UI 模式: `npm run test:ui`
### 2.5 其他重要库
- **@vueuse/core** (v10.4.1) - Vue 组合式工具库
- **dayjs** (v1.11.9) - 日期处理库
- **types-for-adobe** (v7.0.12) - Adobe CEP TypeScript 类型定义
---
@@ -55,29 +130,29 @@
2. **使用方法**:
```typescript
import { logger } from '@/utils/logger';
import { logger } from "@/utils/logger";
// 普通日志
logger.log('用户登录成功');
logger.log("用户登录成功");
// 信息日志
logger.info('正在加载数据...');
logger.info("正在加载数据...");
// 警告日志
logger.warn('Token 即将过期');
logger.warn("Token 即将过期");
// 错误日志（始终显示，不受开关控制）
logger.error('API 请求失败:', error);
logger.error("API 请求失败:", error);
// 可控制的错误日志
logger.errorSilent('这个错误只在开启日志时显示');
logger.errorSilent("这个错误只在开启日志时显示");
// 调试日志
logger.debug('调试信息:', data);
logger.debug("调试信息:", data);
// 分隔线
logger.separator(); // 输出 60 个 '='
logger.separator('-', 40); // 输出 40 个 '-'
logger.separator(); // 输出 60 个 '='
logger.separator("-", 40); // 输出 40 个 '-'
```
3. **日志开关控制**:
@@ -85,31 +160,31 @@
```typescript
// 开启日志（开发环境）
logger.enable();
// 关闭日志（生产环境）
logger.disable();
// 切换日志状态
logger.toggle();
// 查询当前状态
console.log(logger.enabled); // true/false
console.log(logger.enabled); // true/false
```
4. **浏览器控制台访问**:
- 日志工具自动挂载到 `window.logger`，可在浏览器控制台直接操作：
```javascript
// 在 Chrome DevTools 控制台中
window.logger.enable(); // 开启日志
window.logger.disable(); // 关闭日志
window.logger.toggle(); // 切换状态
window.logger.enable(); // 开启日志
window.logger.disable(); // 关闭日志
window.logger.toggle(); // 切换状态
```
5. **特殊说明**:
- **错误日志策略**:
- **错误日志策略**:
- `logger.error()` 始终输出，即使日志开关关闭（用于捕获关键错误）。
- 如需可控的错误日志，使用 `logger.errorSilent()`。
- **默认状态**: 日志默认为**关闭**状态，需要手动开启。
@@ -130,6 +205,10 @@
- **调试**: 使用 **ExtendScript Toolkit** 或 **VSCode ExtendScript Debugger** 调试 `.jsx` 文件。
3. **事件监听**: 使用 `CSInterface` 监听 Photoshop 事件（如文档切换、选区改变 `com.adobe.PhotoshopJSONCallback`）时，需注意性能开销。
4. **文件系统**: 利用 Node.js 上下文 (`fs`, `path`) 处理本地文件操作，比 JSX 传参更灵活。
5. **主题同步机制**:
- **Shell (AdminPanel)**: 监听 Photoshop 主题变化事件 (`com.adobe.csxs.events.ThemeColorChanged`)，并将主题数据（背景色、亮度等）通过 `postMessage` 发送给 iframe。
- **Content (Designer)**: 监听 `message` 事件接收主题数据，并根据动态算法计算出完整的主题色板（主色、侧边栏色、悬浮色等），通过 CSS 变量应用到页面。
- **双向通信**: Content 加载时会发送 `REQUEST_THEME` 消息主动请求当前主题，确保初始化时颜色正确。
### 3.4 目录结构建议 (参考)
@@ -153,6 +232,7 @@ src/
CEP 插件运行在 Photoshop 侧边栏面板，**尺寸约束极其严格**，必须按照以下规范设计：
##### manifest.xml 配置（标准参数）
```xml
<Geometry>
<Size>
@@ -171,6 +251,7 @@ CEP 插件运行在 Photoshop 侧边栏面板，**尺寸约束极其严格**，
```
##### 设计约束
- **默认宽度**: 280px（竞品标准）
- **最小宽度**: 280px（不可再窄）
- **最大宽度**: 600px（不建议超过 450px）
@@ -178,25 +259,26 @@ CEP 插件运行在 Photoshop 侧边栏面板，**尺寸约束极其严格**，
- **布局方向**: 必须是垂直布局，禁止横向滚动
##### CSS 设计准则
```css
/* 容器最大宽度约束 */
.cep-container {
max-width: 450px; /* 不要超过这个宽度 */
max-width: 450px; /* 不要超过这个宽度 */
min-width: 280px;
width: 100%;
}
/* 侧边栏（仅图标）*/
.sidebar {
width: 40px; /* 仅显示图标，节省空间 */
width: 40px; /* 仅显示图标，节省空间 */
position: fixed;
left: 0;
}
/* 主内容区 */
.main-content {
margin-left: 40px; /* 侧边栏宽度 */
padding: 8px; /* 紧凑内边距 */
margin-left: 40px; /* 侧边栏宽度 */
padding: 8px; /* 紧凑内边距 */
}
/* 功能网格（自适应列数）*/
@@ -211,62 +293,79 @@ CEP 插件运行在 Photoshop 侧边栏面板，**尺寸约束极其严格**，
```css
/* 不要用网页的大间距！ */
--spacing-xs: 4px; /* 最小间距 */
--spacing-sm: 6px; /* 小间距 */
--spacing-md: 8px; /* 中等间距（常用）*/
--spacing-lg: 12px; /* 大间距 */
--spacing-xl: 16px; /* 超大间距（很少用）*/
--spacing-xs: 4px; /* 最小间距 */
--spacing-sm: 6px; /* 小间距 */
--spacing-md: 8px; /* 中等间距（常用）*/
--spacing-lg: 12px; /* 大间距 */
--spacing-xl: 16px; /* 超大间距（很少用）*/
/* ❌ 错误示例 */
padding: 40px; /* 太大了！会浪费空间 */
margin: 24px 0; /* 太大了！ */
padding: 40px; /* 太大了！会浪费空间 */
margin: 24px 0; /* 太大了！ */
/* ✅ 正确示例 */
padding: 8px; /* 紧凑 */
margin: 12px 0; /* 适中 */
padding: 8px; /* 紧凑 */
margin: 12px 0; /* 适中 */
```
#### 3. **字体大小**（精简尺寸）
```css
--font-xs: 10px; /* 辅助文字 */
--font-sm: 11px; /* 说明文字 */
--font-base: 12px; /* 正文（默认）*/
--font-md: 13px; /* 小标题 */
--font-lg: 14px; /* 主标题（最大）*/
--font-xs: 10px; /* 辅助文字 */
--font-sm: 11px; /* 说明文字 */
--font-base: 12px; /* 正文（默认）*/
--font-md: 13px; /* 小标题 */
--font-lg: 14px; /* 主标题（最大）*/
/* ❌ 不要用网页的大字体 */
h1 { font-size: 24px; } /* 太大！ */
h2 { font-size: 20px; } /* 太大！ */
h1 {
font-size: 24px;
} /* 太大！ */
h2 {
font-size: 20px;
} /* 太大！ */
/* ✅ CEP 插件标准 */
h1 { font-size: 14px; font-weight: 600; }
h2 { font-size: 13px; font-weight: 500; }
p { font-size: 12px; }
h1 {
font-size: 14px;
font-weight: 600;
}
h2 {
font-size: 13px;
font-weight: 500;
}
p {
font-size: 12px;
}
```
#### 4. **组件尺寸**
```css
/* 图标 */
--icon-sm: 16px; /* 小图标（菜单、按钮）*/
--icon-md: 24px; /* 中等图标 */
--icon-lg: 32px; /* 功能入口图标 */
--icon-xl: 48px; /* 主要功能图标（背景）*/
--icon-sm: 16px; /* 小图标（菜单、按钮）*/
--icon-md: 24px; /* 中等图标 */
--icon-lg: 32px; /* 功能入口图标 */
--icon-xl: 48px; /* 主要功能图标（背景）*/
/* 按钮 */
--button-height-sm: 24px;
--button-height-md: 28px;
--button-height-lg: 32px; /* 最大 */
--button-height-lg: 32px; /* 最大 */
/* 输入框 */
--input-height: 28px;
/* ❌ 错误：不要用大尺寸 */
.button { height: 48px; } /* 太高！*/
.button {
height: 48px;
} /* 太高！*/
/* ✅ 正确 */
.button { height: 28px; padding: 0 12px; }
.button {
height: 28px;
padding: 0 12px;
}
```
#### 5. **响应式网格**（自适应列数）
@@ -288,14 +387,14 @@ p { font-size: 12px; }
/* 标准面板 (280-350px) - 最常见 */
@media (min-width: 280px) and (max-width: 350px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr); /* 3列 */
grid-template-columns: repeat(3, 1fr); /* 3列 */
}
}
/* 宽面板 (>350px) */
@media (min-width: 350px) {
.feature-grid {
grid-template-columns: repeat(4, 1fr); /* 4列 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
}
}
```
@@ -463,11 +562,11 @@ Server/
#### 1. 统一配置管理
- ❌ **严禁硬编码**：所有路径地址、数据库连接字符串、API 请求地址、密钥等敏感或可变信息，禁止直接写在代码中。
- ✅ **集中管理**：
- 后端：必须使用环境变量 (`.env`) 或 `app/core/config.py` 进行管理。
- 前端/客户端：必须使用 `.env` 文件或专门的 `config.ts` 模块。
- 工具脚本：必须在脚本头部定义常量或读取外部配置文件。
- ❌ **严禁硬编码**：所有路径地址、数据库连接字符串、API 请求地址、密钥等敏感或可变信息，禁止直接写在代码中。
- ✅ **集中管理**：
- 后端：必须使用环境变量 (`.env`) 或 `app/core/config.py` 进行管理。
- 前端/客户端：必须使用 `.env` 文件或专门的 `config.ts` 模块。
- 工具脚本：必须在脚本头部定义常量或读取外部配置文件。
#### 2. 业务配置可配置化原则 ⭐
@@ -475,19 +574,19 @@ Server/
##### 2.1 **必须可配置的业务规则**
| 配置项 | 存储位置 | 说明 |
|--------|---------|------|
| **功能积分消耗** | `features_config` 表 | 每个功能的积分价格（普通/VIP/SVIP） |
| **VIP价格与权益** | `vip_config` 表 | VIP套餐价格、每日配额、签到倍数 |
| **签到奖励规则** | `check_in_config` 表 | 连续签到天数对应的积分奖励 |
| **功能开关** | `features_config.enabled` | 动态启用/禁用功能 |
| 配置项 | 存储位置 | 说明 |
| ------------------ | ------------------------- | ----------------------------------- |
| **功能积分消耗** | `features_config` 表 | 每个功能的积分价格（普通/VIP/SVIP） |
| **VIP 价格与权益** | `vip_config` 表 | VIP 套餐价格、每日配额、签到倍数 |
| **签到奖励规则** | `check_in_config` 表 | 连续签到天数对应的积分奖励 |
| **功能开关** | `features_config.enabled` | 动态启用/禁用功能 |
##### 2.2 **配置存储规范**
- ✅ **数据库存储**：所有可变业务配置必须存储在数据库表中
- ✅ **管理后台可视化**：必须在 AdminTool 提供可视化编辑界面
- ✅ **实时生效**：配置修改后无需重启服务，立即生效
- ❌ **禁止硬编码**：禁止在代码中写死任何业务规则（如 `if consecutive_days == 7: bonus = 20`）
- ✅ **数据库存储**：所有可变业务配置必须存储在数据库表中
- ✅ **管理后台可视化**：必须在 AdminTool 提供可视化编辑界面
- ✅ **实时生效**：配置修改后无需重启服务，立即生效
- ❌ **禁止硬编码**：禁止在代码中写死任何业务规则（如 `if consecutive_days == 7: bonus = 20`）
##### 2.3 **配置修改流程**
@@ -506,6 +605,7 @@ AdminTool 管理后台（可视化界面）
##### 2.4 **示例：正确 vs 错误**
**❌ 错误示例（硬编码）：**
```python
# 错误：写死在代码里
def calculate_bonus(consecutive_days):
@@ -517,6 +617,7 @@ def calculate_bonus(consecutive_days):
```
**✅ 正确示例（可配置）：**
```python
# 正确：从配置表读取
def calculate_bonus(consecutive_days):
@@ -526,19 +627,19 @@ def calculate_bonus(consecutive_days):
##### 2.5 **管理后台要求**
- ✅ 必须在 `AdminTool/admin_gui.py` 中实现配置管理界面
- ✅ 必须使用表格/表单展示配置项
- ✅ 必须提供「新增/编辑/删除」操作
- ✅ 必须提供「保存/刷新」按钮
- ✅ 必须有操作确认提示
- ✅ 必须在 `AdminTool/admin_gui.py` 中实现配置管理界面
- ✅ 必须使用表格/表单展示配置项
- ✅ 必须提供「新增/编辑/删除」操作
- ✅ 必须提供「保存/刷新」按钮
- ✅ 必须有操作确认提示
#### 3. 代码规模限制
- ❌ **严禁"巨型文件"**：单个代码文件（`.py`, `.ts`, `.vue` 等）的行数 **不得超过 500 行**。
- ✅ **拆分重构**：
- 一旦文件接近 500 行，必须立即进行拆分。
- 将逻辑提取为独立的 Service、Utility 函数、Composable Hook 或子组件。
- 保持代码的"高内聚、低耦合"。
- ❌ **严禁"巨型文件"**：单个代码文件（`.py`, `.ts`, `.vue` 等）的行数 **不得超过 500 行**。
- ✅ **拆分重构**：
- 一旦文件接近 500 行，必须立即进行拆分。
- 将逻辑提取为独立的 Service、Utility 函数、Composable Hook 或子组件。
- 保持代码的"高内聚、低耦合"。
---
@@ -565,28 +666,30 @@ def calculate_bonus(consecutive_days):
---
## 6. 项目架构与工作流 (2025重构版)
## 6. 项目架构与工作流 (2025 重构版)
经过 2025 年底的深度重构，项目采用了高效的 **"壳(Shell) + 核(Core)"** 架构：
### 6.1 核心模块分工
| 模块 | 目录 | 类型 | 职责 |
| :--- | :--- | :--- | :--- |
| **Designer** | `d:\main\DesignerCEP\Designer` | **核心业务 (Core)** | 包含所有设计工具、UI 界面和业务逻辑。开发时的主要工作区。 |
| **AdminPanel** | `d:\main\DesignerCEP\AdminPanel` | **加载壳 (Shell)** | 一个轻量级的 CEP 容器，负责在 PS 中运行。它不包含业务代码，只负责通过 `iframe` 加载 Designer。 |
| **Server** | `d:\main\DesignerCEP\Server` | **后端 (API)** | 基于 FastAPI 的纯数据接口服务。不负责托管静态页面（由 Caddy/Nginx 接管）。 |
| **AdminTool** | `d:\main\DesignerCEP\AdminTool` | **运维工具** | 负责自动化部署、版本管理和配置修改的 Python GUI 工具。 |
| 模块 | 目录 | 类型 | 职责 |
| :------------- | :------------------------------- | :------------------ | :--------------------------------------------------------------------------------------------- |
| **Designer** | `d:\main\DesignerCEP\Designer` | **核心业务 (Core)** | 包含所有设计工具、UI 界面和业务逻辑。开发时的主要工作区。 |
| **AdminPanel** | `d:\main\DesignerCEP\AdminPanel` | **加载壳 (Shell)** | 一个轻量级的 CEP 容器，负责在 PS 中运行。它不包含业务代码，只负责通过 `iframe` 加载 Designer。 |
| **Server** | `d:\main\DesignerCEP\Server` | **后端 (API)** | 基于 FastAPI 的纯数据接口服务。不负责托管静态页面（由 Caddy/Nginx 接管）。 |
| **AdminTool** | `d:\main\DesignerCEP\AdminTool` | **运维工具** | 负责自动化部署、版本管理和配置修改的 Python GUI 工具。 |
### 6.2 开发流程 (Dev Workflow)
1. **启动后端** (可选，如需 API):
```bash
cd Server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
```
2. **启动前端核心**:
```bash
cd Designer
npm run dev
@@ -601,6 +704,7 @@ def calculate_bonus(consecutive_days):
### 6.3 生产发布 (Production)
1. **构建核心**:
```bash
cd Designer
npm run build
@@ -612,5 +716,6 @@ def calculate_bonus(consecutive_days):
- 生产环境的 AdminPanel 会自动加载服务器地址 (`https://app.aidg168.uk`)。
### 6.4 目录清理说明
- **冗余移除**: 所有旧的测试脚本、文档草稿、`dist` 目录、`buildLauncher` 脚本等均已移至 `temp_backup`。
- **配置收敛**: Designer 仅保留 `cep.config.ts`，移除了重复的 dev/prod 配置。