newrun
This commit is contained in:
zuowei1216
179
temp_backup/Designer_redundant/docs/CEP插件UI适配指南.md
Normal file
179
temp_backup/Designer_redundant/docs/CEP插件UI适配指南.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 🎨 CEP 插件 UI 适配完全指南
|
||||
|
||||
> **目标**：将网页版 UI 完美重构为 Adobe CEP 插件原生体验，对标行业顶尖竞品。
|
||||
|
||||
## 📋 目录
|
||||
|
||||
- [核心约束](#-核心约束)
|
||||
- [问题诊断](#-问题诊断)
|
||||
- [UI 重构方案](#-ui-重构方案)
|
||||
- [样式系统 (Design System)](#-样式系统-design-system)
|
||||
- [实施路线图](#-实施路线图)
|
||||
- [验收标准](#-验收标准)
|
||||
|
||||
---
|
||||
|
||||
## <20> 核心约束
|
||||
|
||||
> [!IMPORTANT] > **CEP 插件的黄金法则**：
|
||||
> 能够在 **280px** 宽度的面板中完整显示所有核心功能，且无需横向滚动。
|
||||
|
||||
### 尺寸规范 (Manifest.xml)
|
||||
|
||||
| 属性 | 值 | 说明 |
|
||||
| :----------- | :--------------- | :------------------------- |
|
||||
| **默认尺寸** | `280px × 600px` | 最小可用状态 |
|
||||
| **最小尺寸** | `280px × 600px` | 锁死最小宽度，防止布局崩坏 |
|
||||
| **最大尺寸** | `600px × 4080px` | 允许垂直方向无限延伸 |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 问题诊断
|
||||
|
||||
我们在将 Web UI 移植到 CEP 环境时，面临以下主要适配挑战：
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Web UI (1200px+)] -->|❌ 侧边栏过宽| B(180px Nav)
|
||||
A -->|❌ 网格松散| C(Card Layout)
|
||||
A -->|❌ 组件巨大| D(Large Buttons/Inputs)
|
||||
|
||||
B --> E[CEP Environment (280px)]
|
||||
C --> E
|
||||
D --> E
|
||||
|
||||
E -->|导致| F[⚠️ 横向滚动条]
|
||||
E -->|导致| G[⚠️ 内容被截断]
|
||||
E -->|导致| H[⚠️ 操作效率低]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠 UI 重构方案
|
||||
|
||||
### 1. 导航栏 (Navigation)
|
||||
|
||||
**现状**：`180px` 宽度的侧边栏在 `280px` 的面板中占据了 64% 的空间。
|
||||
**方案**：采用 **图标栏 (Icon Bar)** 模式。
|
||||
|
||||
| 调整项 | Web 版 | CEP 适配版 |
|
||||
| :------- | :----------- | :-------------------------- |
|
||||
| **模式** | 展开式侧边栏 | 收缩式图标栏 |
|
||||
| **宽度** | `180px` | `40px` |
|
||||
| **标签** | 文字 + 图标 | 仅图标 (Hover 显示 Tooltip) |
|
||||
|
||||
### 2. 信息卡片 (Info Cards)
|
||||
|
||||
**现状**：卡片布局在窄屏下挤压严重。
|
||||
**方案**：**CSS Grid 自适应紧凑布局**。
|
||||
|
||||
> [!TIP]
|
||||
> 使用 `grid-template-columns: repeat(3, 1fr)` 确保在 280px 宽度下也能整齐排列。
|
||||
|
||||
**代码对比**：
|
||||
|
||||
```vue
|
||||
<!-- ✅ 推荐写法 -->
|
||||
<div class="cep-info-grid">
|
||||
<div class="info-card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-data">
|
||||
<span class="label">积分</span>
|
||||
<span class="value">{{ points }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 3. 功能入口 (Feature Grid)
|
||||
|
||||
**现状**：每个功能占据大块面积，包含描述文字。
|
||||
**方案**：**应用抽屉风格 (App Drawer)**，仅保留图标和名称。
|
||||
|
||||
- **移除**：详细的功能描述文本。
|
||||
- **缩小**：图标尺寸从 `32px` -> `24px`。
|
||||
- **布局**：使用 `repeat(auto-fill, minmax(70px, 1fr))` 实现自动换行。
|
||||
|
||||
---
|
||||
|
||||
## 🎨 样式系统 (Design System)
|
||||
|
||||
为了让插件看起来像原生 PS 功能，我们需要覆盖 Arco Design 的默认样式。
|
||||
|
||||
> [!NOTE]
|
||||
> 请在 `src/style/` 下创建 `cep-override.css` 并全局引入。
|
||||
|
||||
### 全局样式重写 (`cep-override.css`)
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 定义紧凑型尺寸变量 */
|
||||
--cep-padding-base: 8px;
|
||||
--cep-font-size-base: 12px;
|
||||
--cep-btn-height: 28px;
|
||||
}
|
||||
|
||||
/* 🟢 按钮微型化 */
|
||||
.arco-btn {
|
||||
height: var(--cep-btn-height) !important;
|
||||
padding: 0 12px !important;
|
||||
font-size: var(--cep-font-size-base) !important;
|
||||
border-radius: 2px !important; /* PS 风格通常更方正 */
|
||||
}
|
||||
|
||||
/* 🟢 输入框紧凑化 */
|
||||
.arco-input-wrapper {
|
||||
height: var(--cep-btn-height) !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
/* 🟢 滚动条美化 (原生风格) */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px; /* 极细滚动条 */
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #505050;
|
||||
border-radius: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #6e6e6e;
|
||||
}
|
||||
|
||||
/* 🟢 卡片与容器 */
|
||||
.cep-container {
|
||||
padding: var(--cep-padding-base);
|
||||
}
|
||||
.arco-card-body {
|
||||
padding: 8px !important;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## <20> 实施路线图
|
||||
|
||||
1. **配置 manifest**
|
||||
- 修改 `manifest.xml` 中的 geometry 配置，锁定最小宽度。
|
||||
2. **样式注入**
|
||||
- 创建并引入 `cep-override.css`。
|
||||
3. **组件改造**
|
||||
- **Home.vue**: 将 Sider `width` 设为 40，`collapsed` 设为 true。
|
||||
- **HomePage.vue**: 重写 Grid 布局，移除多余文字描述，使用紧凑型 Icon。
|
||||
4. **响应式测试**
|
||||
- 在浏览器中将视口宽度调整为 `280px` 进行极限测试。
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验收标准 (Checklist)
|
||||
|
||||
请逐项核对以确保完美交付：
|
||||
|
||||
- [ ] **宽度测试**：在 280px 宽度下，无横向滚动条。
|
||||
- [ ] **侧边栏**：宽度严格控制在 40px 以内。
|
||||
- [ ] **字体**：正文不大于 12px，标题不大于 14px。
|
||||
- [ ] **按钮**：高度不大于 28px (Small/Mini 尺寸)。
|
||||
- [ ] **深色模式**：背景色与 PS 界面融合 (通常为 `#323232` 或 `#535353`)。
|
||||
- [ ] **交互**：所有点击区域即使在小尺寸下也易于点击 (增加热区 padding 不增加视觉 margin)。
|
||||
|
||||
> [!WARNING] > **切记**：CEP 插件是工具属性极强的应用，**效率**高于**装饰**。尽量减少无用的留白和装饰性元素。
|
||||
164
temp_backup/Designer_redundant/docs/CEP适配完成说明.md
Normal file
164
temp_backup/Designer_redundant/docs/CEP适配完成说明.md
Normal file
@@ -0,0 +1,164 @@
|
||||
# ✅ CEP 插件 UI 适配完成说明
|
||||
|
||||
## 🎯 完成的工作
|
||||
|
||||
### 1. **面板尺寸配置** ✅
|
||||
已统一为竞品标准（图牛助理2.0）：
|
||||
|
||||
```
|
||||
所有配置文件已更新：
|
||||
├── cep.config.ts ✅ 280px × 600px
|
||||
├── dev.cep.config.ts ✅ 280px × 600px
|
||||
└── prod.cep.config.ts ✅ 280px × 600px
|
||||
```
|
||||
|
||||
### 2. **全局样式系统** ✅
|
||||
|
||||
创建了两个全局样式文件：
|
||||
|
||||
#### `src/style/cep-arco-override.css` - Arco Design 组件覆盖
|
||||
```css
|
||||
自动调整所有 Arco 组件：
|
||||
- Button: 28px 高度（小按钮 24px）
|
||||
- Input: 28px 高度
|
||||
- Card: 8px 内边距
|
||||
- 字体: 12px 正文，10px 辅助文字
|
||||
- 图标: 14-24px
|
||||
- 间距: 4-16px 紧凑系统
|
||||
```
|
||||
|
||||
#### `src/style/cep-pages.css` - 页面布局样式
|
||||
```css
|
||||
专门优化的页面：
|
||||
- Home.vue: 40px 侧边栏（仅图标）
|
||||
- HomePage.vue: 紧凑信息卡片 + 功能网格
|
||||
- Profile.vue: 2列统计网格
|
||||
- CheckIn.vue: 紧凑签到日历
|
||||
```
|
||||
|
||||
### 3. **已调整的组件** ✅
|
||||
|
||||
#### Home.vue 主容器
|
||||
```diff
|
||||
- 侧边栏宽度: 180px
|
||||
+ 侧边栏宽度: 40px（仅图标）
|
||||
|
||||
- 可折叠展开
|
||||
+ 固定折叠（节省空间）
|
||||
|
||||
- 显示菜单文字
|
||||
+ 仅显示图标
|
||||
```
|
||||
|
||||
#### HomePage.vue 首页
|
||||
```diff
|
||||
信息卡片：
|
||||
- gutter: 16
|
||||
+ gutter: 8（紧凑间距）
|
||||
|
||||
- 标题: "剩余积分"
|
||||
+ 标题: "积分"（简化文字）
|
||||
|
||||
- 图标大小: 默认
|
||||
+ 图标大小: 14px
|
||||
|
||||
快捷按钮：
|
||||
- size="large"
|
||||
+ size="default"（28px）
|
||||
|
||||
- 文字: "每日签到"
|
||||
+ 文字: "签到"（简化）
|
||||
```
|
||||
|
||||
### 4. **引入方式** ✅
|
||||
|
||||
在 `src/main.ts` 中自动引入：
|
||||
```typescript
|
||||
import '@arco-design/web-vue/dist/arco.css';
|
||||
import './style/cep-arco-override.css'; // ⭐ 全局覆盖
|
||||
import './style/cep-pages.css'; // ⭐ 页面样式
|
||||
```
|
||||
|
||||
## 🎨 UI框架信息
|
||||
|
||||
- **组件库**: Arco Design Vue 2.57.0（字节跳动）
|
||||
- **核心框架**: Vue 3 + TypeScript
|
||||
- **构建工具**: Vite
|
||||
- **路由**: Vue Router 4
|
||||
|
||||
## 📐 适配效果
|
||||
|
||||
### 尺寸对比
|
||||
|
||||
| 元素 | 网页版 | CEP版 | 优化 |
|
||||
|------|--------|-------|------|
|
||||
| 面板宽度 | - | 280px | ✅ |
|
||||
| 侧边栏 | 180px | 40px | ✅ 节省 140px |
|
||||
| 按钮高度 | 40px | 28px | ✅ |
|
||||
| 卡片间距 | 16px | 8px | ✅ |
|
||||
| 字体大小 | 14px | 12px | ✅ |
|
||||
| 图标 | 24px | 14-20px | ✅ |
|
||||
|
||||
### 响应式网格
|
||||
|
||||
```css
|
||||
功能网格自动适配：
|
||||
- 窄面板 (<300px): 2列
|
||||
- 标准面板 (300-350px): 3列 ⭐ 默认
|
||||
- 宽面板 (>350px): 4列
|
||||
```
|
||||
|
||||
## 🧪 测试方法
|
||||
|
||||
### 方法1: 浏览器测试
|
||||
```bash
|
||||
cd Designer
|
||||
npm run dev
|
||||
```
|
||||
在浏览器中打开，按 F12 开发者工具：
|
||||
- 设置设备工具栏（Ctrl+Shift+M）
|
||||
- 自定义宽度: 280px
|
||||
- 测试滚动和交互
|
||||
|
||||
### 方法2: Photoshop 测试
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
在 PS 中加载插件，查看实际效果。
|
||||
|
||||
## 📋 全局样式变量参考
|
||||
|
||||
```css
|
||||
/* 在组件中使用这些变量 */
|
||||
.my-component {
|
||||
padding: var(--cep-spacing-md); /* 8px */
|
||||
font-size: var(--cep-font-base); /* 12px */
|
||||
height: var(--cep-button-height); /* 28px */
|
||||
}
|
||||
|
||||
/* 或使用工具类 */
|
||||
<div class="cep-compact"> /* 自动应用紧凑间距 */
|
||||
<span class="cep-text-xs"> /* 10px 字体 */
|
||||
```
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. **所有新组件**都会自动应用 CEP 样式（无需手动调整）
|
||||
2. **如果需要特殊尺寸**，在组件内用 `style` 覆盖
|
||||
3. **开发时**在浏览器中测试 280px 宽度
|
||||
4. **构建前**确保所有样式文件已保存
|
||||
|
||||
## 🚀 下一步
|
||||
|
||||
1. ✅ 面板尺寸已调整
|
||||
2. ✅ 全局样式已配置
|
||||
3. ✅ 主要组件已优化
|
||||
4. 📝 测试所有页面在 280px 宽度下的显示效果
|
||||
5. 📝 根据需要微调个别组件
|
||||
|
||||
---
|
||||
|
||||
**现在您的 Designer 插件已完美适配 CEP 环境！** 🎉
|
||||
|
||||
所有页面都会自动应用紧凑布局，无需逐个调整！
|
||||
|
||||
98
temp_backup/Designer_redundant/docs/core-publish-guide.md
Normal file
98
temp_backup/Designer_redundant/docs/core-publish-guide.md
Normal file
@@ -0,0 +1,98 @@
|
||||
# Core 应用发布流程
|
||||
|
||||
本文档描述如何构建和发布 Core 应用的新版本。
|
||||
|
||||
## 前置条件
|
||||
|
||||
- 后端服务器已运行
|
||||
- 已完成代码修改并测试
|
||||
|
||||
## 发布步骤
|
||||
|
||||
### 1. 构建 Core 应用
|
||||
|
||||
```powershell
|
||||
cd d:\main\DesignerCEP\Designer
|
||||
npm run build:core
|
||||
```
|
||||
|
||||
这会在 `dist_core/` 目录生成构建产物。
|
||||
|
||||
### 2. 重命名入口文件
|
||||
|
||||
构建后的入口文件是 `index-core.html`，需要重命名为 `index.html`：
|
||||
|
||||
```powershell
|
||||
Move-Item -Path ".\dist_core\index-core.html" -Destination ".\dist_core\index.html" -Force
|
||||
```
|
||||
|
||||
### 3. 打包为 ZIP
|
||||
|
||||
将版本号替换为新版本（如 `v1.0.4`）：
|
||||
|
||||
```powershell
|
||||
$version = "v1.0.4"
|
||||
Compress-Archive -Path ".\dist_core\*" -DestinationPath "..\Server\archives\core-$version.zip" -Force
|
||||
```
|
||||
|
||||
### 4. 更新数据库
|
||||
|
||||
编辑 `Server/update_version.py`，将版本号改为新版本，然后运行：
|
||||
|
||||
```powershell
|
||||
cd d:\main\DesignerCEP\Server
|
||||
python update_version.py
|
||||
```
|
||||
|
||||
或者直接执行 SQL：
|
||||
|
||||
```sql
|
||||
UPDATE plugin_groups SET current_version_file='core-v1.0.4.zip' WHERE id=1;
|
||||
```
|
||||
|
||||
### 5. 清除客户端缓存（测试时）
|
||||
|
||||
用户端需要清除旧缓存才能下载新版本：
|
||||
|
||||
```powershell
|
||||
Remove-Item -Recurse -Force "$env:APPDATA\DesignerCache" -ErrorAction SilentlyContinue
|
||||
```
|
||||
|
||||
## 一键发布脚本
|
||||
|
||||
可以创建一个 PowerShell 脚本自动执行以上步骤：
|
||||
|
||||
```powershell
|
||||
# publish-core.ps1
|
||||
param([string]$version = "v1.0.0")
|
||||
|
||||
# 1. Build
|
||||
npm run build:core
|
||||
|
||||
# 2. Rename
|
||||
Move-Item -Path ".\dist_core\index-core.html" -Destination ".\dist_core\index.html" -Force
|
||||
|
||||
# 3. Package
|
||||
Compress-Archive -Path ".\dist_core\*" -DestinationPath "..\Server\archives\core-$version.zip" -Force
|
||||
|
||||
Write-Host "Created: core-$version.zip"
|
||||
Write-Host "Remember to update database: python update_version.py"
|
||||
```
|
||||
|
||||
使用方法：
|
||||
|
||||
```powershell
|
||||
.\publish-core.ps1 -version "v1.0.5"
|
||||
```
|
||||
|
||||
## 项目结构说明
|
||||
|
||||
| 路径 | 说明 |
|
||||
| :------------------------------ | :------------------- |
|
||||
| `Designer/index.html` | Shell 入口（登录页） |
|
||||
| `Designer/index-core.html` | Core 入口（主应用） |
|
||||
| `Designer/src/main.ts` | Core 应用入口点 |
|
||||
| `Designer/src/launcher/main.ts` | Shell 应用入口点 |
|
||||
| `Designer/dist_core/` | Core 构建输出 |
|
||||
| `Server/archives/` | ZIP 包存放目录 |
|
||||
| `Server/update_version.py` | 数据库版本更新脚本 |
|
||||
Reference in New Issue
Block a user