feat: 重构电商指令栏布局,模式标签外置、精简结果标签、优化生成记录交互 #13

Merged
stringadmin merged 2 commits from feat/ecommerce-composer-redesign into main 2026-06-13 11:29:36 +00:00
Owner

本次修改对电商图片工作台的指令栏(composer)进行了全面重构,主要包含以下变更:

一、指令栏布局重构(EcommercePage.tsx):

  • 新增生成模式标签页(ecom-command-mode-tabs),5种模式(套图/详情图/模特图/视频/爆款图)以标签形式外置于输入区上方,每种模式配有独立图标和配色
  • 设置行(平台/语种/比例/设置)移入输入区内部,采用圆角胶囊按钮排列
  • 上传按钮从输入区移到底部工具栏,改为"上传素材"紧凑样式
  • 精简生成结果画布:移除所有文字标签(套图/详情图/模特图/爆款图 标签、原图素材标签、结果卡片标签),让图片成为绝对视觉焦点
  • 灵感行"AI团队"更名为"作品记录",更新描述文案为"沉淀最近生成的高转化素材,随时回看与复用"

二、样式系统升级(ecommerce-standalone.css):

  • 新增模式标签页完整样式:5列等宽网格、磨砂玻璃背板、各模式独立主题色
    · 套图 set:翠绿 #0f8f72
    · 详情图 detail:紫色 #7a5af8
    · 模特图 model:蓝色 #1073cc
    · 视频 video:暖橙 #cc6b14
    · 爆款图 hot:玫红 #c04468
  • hover/active 状态带径向光晕和上浮微动效(translateY(-1px))
  • 隐藏生成结果中的所有文字标签(display:none),减少视觉噪音
  • 修复历史记录删除按钮定位:改为绝对居中定位,不受网格布局影响
  • 输入区改为单列布局,增大最小高度(214-286px),增加内边距

变更文件:

  • src/features/ecommerce/EcommercePage.tsx (+87/-51)
  • src/styles/ecommerce-standalone.css (+456)
本次修改对电商图片工作台的指令栏(composer)进行了全面重构,主要包含以下变更: 一、指令栏布局重构(EcommercePage.tsx): - 新增生成模式标签页(ecom-command-mode-tabs),5种模式(套图/详情图/模特图/视频/爆款图)以标签形式外置于输入区上方,每种模式配有独立图标和配色 - 设置行(平台/语种/比例/设置)移入输入区内部,采用圆角胶囊按钮排列 - 上传按钮从输入区移到底部工具栏,改为"上传素材"紧凑样式 - 精简生成结果画布:移除所有文字标签(套图/详情图/模特图/爆款图 标签、原图素材标签、结果卡片标签),让图片成为绝对视觉焦点 - 灵感行"AI团队"更名为"作品记录",更新描述文案为"沉淀最近生成的高转化素材,随时回看与复用" 二、样式系统升级(ecommerce-standalone.css): - 新增模式标签页完整样式:5列等宽网格、磨砂玻璃背板、各模式独立主题色 · 套图 set:翠绿 #0f8f72 · 详情图 detail:紫色 #7a5af8 · 模特图 model:蓝色 #1073cc · 视频 video:暖橙 #cc6b14 · 爆款图 hot:玫红 #c04468 - hover/active 状态带径向光晕和上浮微动效(translateY(-1px)) - 隐藏生成结果中的所有文字标签(display:none),减少视觉噪音 - 修复历史记录删除按钮定位:改为绝对居中定位,不受网格布局影响 - 输入区改为单列布局,增大最小高度(214-286px),增加内边距 变更文件: - src/features/ecommerce/EcommercePage.tsx (+87/-51) - src/styles/ecommerce-standalone.css (+456)
stringadmin added 1 commit 2026-06-13 11:11:23 +00:00
本次修改对电商图片工作台的指令栏(composer)进行了全面重构,主要包含以下变更:

一、指令栏布局重构(EcommercePage.tsx):
- 新增生成模式标签页(ecom-command-mode-tabs),5种模式(套图/详情图/模特图/视频/爆款图)以标签形式外置于输入区上方,每种模式配有独立图标和配色
- 设置行(平台/语种/比例/设置)移入输入区内部,采用圆角胶囊按钮排列
- 上传按钮从输入区移到底部工具栏,改为"上传素材"紧凑样式
- 精简生成结果画布:移除所有文字标签(套图/详情图/模特图/爆款图 标签、原图素材标签、结果卡片标签),让图片成为绝对视觉焦点
- 灵感行"AI团队"更名为"作品记录",更新描述文案为"沉淀最近生成的高转化素材,随时回看与复用"

二、样式系统升级(ecommerce-standalone.css):
- 新增模式标签页完整样式:5列等宽网格、磨砂玻璃背板、各模式独立主题色
  · 套图 set:翠绿 #0f8f72
  · 详情图 detail:紫色 #7a5af8
  · 模特图 model:蓝色 #1073cc
  · 视频 video:暖橙 #cc6b14
  · 爆款图 hot:玫红 #c04468
- hover/active 状态带径向光晕和上浮微动效(translateY(-1px))
- 隐藏生成结果中的所有文字标签(display:none),减少视觉噪音
- 修复历史记录删除按钮定位:改为绝对居中定位,不受网格布局影响
- 输入区改为单列布局,增大最小高度(214-286px),增加内边距

变更文件:
- src/features/ecommerce/EcommercePage.tsx (+87/-51)
- src/styles/ecommerce-standalone.css (+456)
stringadmin added 1 commit 2026-06-13 11:29:07 +00:00
# Conflicts:
#	src/features/ecommerce/EcommercePage.tsx
stringadmin merged commit 76ae9ab0ac into main 2026-06-13 11:29:36 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

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