优化款式设计标签页UI和交互体验

概述

本提案旨在系统性改进款式设计(Style Designer)标签页的用户界面和交互体验,使其与图片生成标签页保持一致性,同时优化布局、简化操作流程、修复功能性缺陷。

动机

问题来源

• 用户反馈款式设计页面与图片生成页面的界面结构不一致
• 生成过程中的模态遮罩阻塞了其他操作
• 主石选项过多导致用户选择困难
• 按钮和输入框布局不够紧凑
• 敏感信息(模型信息)不应暴露给用户
• 款式设计生成的图片未保存到历史记录
• 珠宝元素添加功能存在问题
• 缺乏快速探索功能——用户需要手动逐个调整参数,无法快速尝试不同风格组合

当前痛点

1. UI一致性问题: 两个核心功能页面的下半部分结构不同,用户体验割裂
2. 交互阻塞: 模态对话框阻止用户在生成过程中执行其他操作
3. 选项过载: 主石字段混合了形状和材质,造成认知负担
4. 空间浪费: 按钮过大、输入框过长、每行只显示一个元素
5. 信息泄露: 技术细节(模型名)暴露给普通用户
6. 功能缺失: 历史记录未集成款式设计生成的内容
7. 文字可读性: 单行文字高度过低影响阅读
8. 图片裁切: 预览区图片显示不完整
9. 探索效率低: 缺少随机生成功能,新用户不知从何开始,老用户难以快速尝试新组合

为什么现在要做

• 这些问题直接影响用户体验和产品一致性
• 修复成本低,收益高
• 为后续功能扩展奠定良好基础

核心目标

• 统一款式设计和图片生成的页面布局结构
• 将模态遮罩改为非阻塞式状态提示
• 拆分主石字段为"形状"和"材质"两个独立字段
• 优化按钮尺寸和表单布局(每行两列)
• 隐藏模型选择器预览
• 修复历史记录保存功能
• 修复珠宝元素添加逻辑
• 移除单个类别的"恢复默认"按钮
• 调整文字行高至18px
• 修复预览图片显示不全问题
• 添加随机参数生成按钮,支持一键生成完整参数组合

技术方案

主要模块

1. StyleDesignerTab类 (image_generator.py:2782)

   • UI布局重构
   • 字段拆分逻辑
   • 生成流程改造
   • 历史记录集成
   • 随机参数生成功能

2. JewelryLibraryManager类

   • 词库结构调整(拆分主石)
   • 添加/删除逻辑修复

3. ImageGeneratorWindow类

   • 历史记录管理器集成

数据结构变化

珠宝词库结构

# 当前结构
{
    "主石": ["圆形钻石", "方形蓝宝石", ...],  # 形状+材质混合
    ...
}

# 新结构
{
    "主石形状": ["圆形", "方形", "椭圆形", ...],
    "主石材质": ["钻石", "蓝宝石", "红宝石", ...],
    ...
}

UI布局改变

旧布局:
[标签] [下拉框________________________] [添加] [删除] [恢复默认]

新布局(每行两个元素):
[标签1] [下拉框______] [添加] [删除]    [标签2] [下拉框______] [添加] [删除]

新增按钮:
[🎲 随机生成参数] [🔄 恢复所有默认词库]

随机生成逻辑

def randomize_parameters():
    """遍历所有combo_boxes,随机选择一个索引"""
    for category, combo in self.combo_boxes.items():
        if combo.count() > 0:
            random_index = random.randint(0, combo.count() - 1)
            combo.setCurrentIndex(random_index)
    # 触发prompt预览更新
    self.update_prompt_preview()

与现有系统关系

• 复用 ImageGenerationWorker 线程
• 复用 HistoryManager 保存逻辑
• 保持 PromptAssembler 接口兼容
• 扩展 JewelryLibraryManager 默认词库

风险评估

兼容性风险

• 词库数据迁移: 需要将现有"主石"数据拆分为"形状"和"材质"
  • 缓解措施: 提供自动迁移脚本,保留原字段作为fallback
• 历史提案影响: 可能与 add-style-designer-tab 提案冲突
  • 缓解措施: 检查该提案状态,必要时合并修改

回滚计划

1. 保留原有词库JSON文件备份
2. 使用git分支隔离开发
3. 如遇问题,通过版本控制快速回退

验收标准

验收方式

1. 视觉验收: 对比款式设计和图片生成页面,确认布局一致
2. 功能测试:
   • 生成过程中切换标签页正常
   • 主石形状+材质组合正确生成prompt
   • 历史记录中出现款式设计生成的图片
   • 添加/删除珠宝元素成功
   • 随机按钮正确填充所有参数字段
   • 多次点击随机按钮生成不同组合
3. UI测试:
   • 模型不可见
   • 按钮尺寸合理
   • 文字行高18px
   • 预览图完整显示
   • 随机按钮位置合理(在"恢复默认"按钮旁)

测试覆盖

• 单元测试: JewelryLibraryManager 拆分逻辑
• 集成测试: 生成流程 + 历史记录保存
• UI测试: 布局渲染、响应式调整
• 回归测试: 原有图片生成功能不受影响

附录

相关文件

• image_generator.py: 主应用逻辑
• jewelry_library.json: 词库数据
• config.json: 配置文件

依赖组件

• PySide6 (GUI框架)
• Google Gemini API (图片生成)
• SQLite/JSON (历史记录存储)

实现细节参考

详见 tasks.md 中的分步实现计划