 ludan
|
4f6e32fb10
|
feat: 重构电商指令栏布局，模式标签外置、精简结果标签、优化生成记录交互
本次修改对电商图片工作台的指令栏(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)
|
2026-06-12 18:41:31 +08:00 |
|
stringadmin