feat: 优化电商图片工作台快捷操作区与灵感货架视觉体验 #10

2026-06-12T07:57:49Z

stringadmin commented

2026-06-12 07:57:49 +00:00

本次修改聚焦于电商图片工作台(imageWorkbench)的视觉打磨，主要包含以下优化：

一、快捷操作区(quick action board)全面升级：

拓宽快捷操作面板宽度至 920px，增加内边距和间距，提升呼吸感
面板背景采用多层渐变叠加，模拟磨砂玻璃质感(glassmorphism)
按钮最小高度提升至 56px，引入分类专属色彩体系：
· detail（精细优化）：紫调 #7a5af8
· edit（智能编辑）：暖橙 #cc6b14
· cutout（智能抠图）：蓝色 #1073cc
· watermark（水印去除）：玫红 #c04468
每个按钮图标区采用 30px 圆角方块，带渐变背景和投影
hover/focus 状态加入径向光晕效果(radial gradient)，增强交互反馈

二、灵感实验室(inspiration lab)布局优化：

整体容器宽度改为自适应(2360px 上限)，取消固定最大宽度限制
灵感行采用 grid 两栏布局(元信息 + 卡片带)，列宽比例约 1:5
各行卡片宽度按类型差异化：
· AI团队行：420-620px（较宽，展示文字信息）
· 电商套图行：300-420px（适中）
· 商品视频行：360-540px（偏宽）
行背景采用半透明渐变，边框颜色统一为品牌蓝调

三、紧凑型指令栏(compact composer)居中定位：

当历史面板折叠(is-history-collapsed)时，指令栏水平居中于可视画布
移动端适配：small 文本域尺寸、按钮和缩略图缩放

四、响应式适配：

≤900px：灵感行切换为单列布局，卡片统一宽度
≤640px：快捷面板改为 2 列网格，指令栏进一步紧凑

变更文件：

src/styles/ecommerce-standalone.css (+382)

本次修改聚焦于电商图片工作台(imageWorkbench)的视觉打磨，主要包含以下优化：一、快捷操作区(quick action board)全面升级： - 拓宽快捷操作面板宽度至 920px，增加内边距和间距，提升呼吸感 - 面板背景采用多层渐变叠加，模拟磨砂玻璃质感(glassmorphism) - 按钮最小高度提升至 56px，引入分类专属色彩体系： · detail（精细优化）：紫调 #7a5af8 · edit（智能编辑）：暖橙 #cc6b14 · cutout（智能抠图）：蓝色 #1073cc · watermark（水印去除）：玫红 #c04468 - 每个按钮图标区采用 30px 圆角方块，带渐变背景和投影 - hover/focus 状态加入径向光晕效果(radial gradient)，增强交互反馈二、灵感实验室(inspiration lab)布局优化： - 整体容器宽度改为自适应(2360px 上限)，取消固定最大宽度限制 - 灵感行采用 grid 两栏布局(元信息 + 卡片带)，列宽比例约 1:5 - 各行卡片宽度按类型差异化： · AI团队行：420-620px（较宽，展示文字信息） · 电商套图行：300-420px（适中） · 商品视频行：360-540px（偏宽） - 行背景采用半透明渐变，边框颜色统一为品牌蓝调三、紧凑型指令栏(compact composer)居中定位： - 当历史面板折叠(is-history-collapsed)时，指令栏水平居中于可视画布 - 移动端适配：small 文本域尺寸、按钮和缩略图缩放四、响应式适配： - ≤900px：灵感行切换为单列布局，卡片统一宽度 - ≤640px：快捷面板改为 2 列网格，指令栏进一步紧凑变更文件： - src/styles/ecommerce-standalone.css (+382)

stringadmin added 1 commit 2026-06-12 07:57:50 +00:00

feat: 优化电商图片工作台快捷操作区与灵感货架视觉体验 3cfcfe70d4

本次修改聚焦于电商图片工作台(imageWorkbench)的视觉打磨，主要包含以下优化：

一、快捷操作区(quick action board)全面升级：
- 拓宽快捷操作面板宽度至 920px，增加内边距和间距，提升呼吸感
- 面板背景采用多层渐变叠加，模拟磨砂玻璃质感(glassmorphism)
- 按钮最小高度提升至 56px，引入分类专属色彩体系：
  · detail（精细优化）：紫调 #7a5af8
  · edit（智能编辑）：暖橙 #cc6b14
  · cutout（智能抠图）：蓝色 #1073cc
  · watermark（水印去除）：玫红 #c04468
- 每个按钮图标区采用 30px 圆角方块，带渐变背景和投影
- hover/focus 状态加入径向光晕效果(radial gradient)，增强交互反馈

二、灵感实验室(inspiration lab)布局优化：
- 整体容器宽度改为自适应(2360px 上限)，取消固定最大宽度限制
- 灵感行采用 grid 两栏布局(元信息 + 卡片带)，列宽比例约 1:5
- 各行卡片宽度按类型差异化：
  · AI团队行：420-620px（较宽，展示文字信息）
  · 电商套图行：300-420px（适中）
  · 商品视频行：360-540px（偏宽）
- 行背景采用半透明渐变，边框颜色统一为品牌蓝调

三、紧凑型指令栏(compact composer)居中定位：
- 当历史面板折叠(is-history-collapsed)时，指令栏水平居中于可视画布
- 移动端适配：small 文本域尺寸、按钮和缩略图缩放

四、响应式适配：
- ≤900px：灵感行切换为单列布局，卡片统一宽度
- ≤640px：快捷面板改为 2 列网格，指令栏进一步紧凑

变更文件：
- src/styles/ecommerce-standalone.css (+382)

stringadmin merged commit 6378ce7546 into main

2026-06-12 07:57:53 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: OmniAI/omniai-ds-code-package#10