180 lines
5.1 KiB
Markdown
180 lines
5.1 KiB
Markdown
# 🎨 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 插件是工具属性极强的应用，**效率**高于**装饰**。尽量减少无用的留白和装饰性元素。
|