🎨 CEP 插件 UI 适配完全指南

目标：将网页版 UI 完美重构为 Adobe CEP 插件原生体验，对标行业顶尖竞品。

📋 目录

核心约束
问题诊断
UI 重构方案
样式系统 (Design System)
实施路线图
验收标准

<EFBFBD> 核心约束

[!IMPORTANT] > CEP 插件的黄金法则：能够在 280px 宽度的面板中完整显示所有核心功能，且无需横向滚动。

尺寸规范 (Manifest.xml)

属性	值	说明
默认尺寸	`280px × 600px`	最小可用状态
最小尺寸	`280px × 600px`	锁死最小宽度，防止布局崩坏
最大尺寸	`600px × 4080px`	允许垂直方向无限延伸

🔍 问题诊断

我们在将 Web UI 移植到 CEP 环境时，面临以下主要适配挑战：

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 重构方案

现状：180px 宽度的侧边栏在 280px 的面板中占据了 64% 的空间。方案：采用 图标栏 (Icon Bar) 模式。

调整项	Web 版	CEP 适配版
模式	展开式侧边栏	收缩式图标栏
宽度	`180px`	`40px`
标签	文字 + 图标	仅图标 (Hover 显示 Tooltip)

2. 信息卡片 (Info Cards)

现状：卡片布局在窄屏下挤压严重。方案：CSS Grid 自适应紧凑布局。

Tip

使用 grid-template-columns: repeat(3, 1fr) 确保在 280px 宽度下也能整齐排列。

代码对比：

<!-- ✅ 推荐写法 -->
<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`)

: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;
}

<EFBFBD> 实施路线图

配置 manifest
- 修改 manifest.xml 中的 geometry 配置，锁定最小宽度。
样式注入
- 创建并引入 cep-override.css。
组件改造
- Home.vue: 将 Sider width 设为 40，collapsed 设为 true。
- HomePage.vue: 重写 Grid 布局，移除多余文字描述，使用紧凑型 Icon。
响应式测试
- 在浏览器中将视口宽度调整为 280px 进行极限测试。

✅ 验收标准 (Checklist)

请逐项核对以确保完美交付：

宽度测试：在 280px 宽度下，无横向滚动条。
侧边栏：宽度严格控制在 40px 以内。
字体：正文不大于 12px，标题不大于 14px。
按钮：高度不大于 28px (Small/Mini 尺寸)。
深色模式：背景色与 PS 界面融合 (通常为 #323232 或 #535353)。
交互：所有点击区域即使在小尺寸下也易于点击 (增加热区 padding 不增加视觉 margin)。

[!WARNING] > 切记：CEP 插件是工具属性极强的应用，效率高于装饰。尽量减少无用的留白和装饰性元素。

5.1 KiB Raw Blame History Unescape Escape