gongxiangp2/yedir/docs/ui-guide.md

用户界面指南

本文档详细介绍"由壹点AIGC"图片处理工具的用户界面结构、功能模块和交互流程。

页面总体结构

应用界面主要分为三个部分：

1. 顶部导航栏：包含应用品牌标识、版本信息和用户相关链接
2. 左侧侧边栏：包含所有功能模块的导航菜单
3. 主内容区域：显示当前选中功能的操作界面

用户认证流程

应用实现了完整的用户认证机制：

• 页面加载时通过 checkAuth() 函数验证用户登录状态
• 使用 localStorage 存储登录状态、用户名和角色信息
• 未登录用户会被自动重定向到 /login.html
• 系统通过API调用 /api/auth/me 验证令牌有效性
• 提供登出功能，调用 /api/auth/logout API并清除本地存储

权限管理

• 普通用户和管理员用户角色区分
• 管理员用户（userRole === 'admin'）会在导航栏显示额外的"系统设置"链接
• 系统设置页面路径：/admin/settings.html

功能模块

应用提供以下主要功能模块：

1. 去除背景

• 菜单项调用: appExtensions.RemoveBgTool.activate(event)
• 功能描述: 自动移除图片背景，输出透明背景图片
• 对应脚本: /js/remove-bg-tool.js
• 使用流程:
  1. 上传图片或提供图片URL
  2. 选择前景类型（人物/产品/自动）
  3. 系统处理并输出无背景图片
  4. 提供下载或进一步编辑选项

2. 生成背景

• 菜单项调用: app.openTab(event, 'GenerateBg')
• 功能描述: 为透明背景图片智能生成新背景
• 使用流程:
  1. 上传透明背景图片
  2. 输入背景描述提示词
  3. 选择背景风格（可选）
  4. 系统生成带新背景的图片

3. 局部重绘

• 菜单项调用: app.openTab(event, 'Repaint')
• 功能描述: 智能修复和重绘图像的特定区域
• 使用流程:
  1. 上传图片
  2. 选择需要重绘的区域
  3. 输入重绘提示词
  4. 设置重绘强度（可选）
  5. 系统重绘选定区域

4. 图像拓展

• 菜单项调用: appExtensions.ImageExtender.activate(event)
• 功能描述: 智能扩展图像边界，生成额外的图像内容
• 对应脚本: /js/image-extender.js
• 使用流程:
  1. 上传图片
  2. 选择扩展方向和大小
  3. 系统自动扩展图像边界并填充内容

5. 线稿生图

• 菜单项调用: appExtensions.SketchToImage.activate(event)
• 功能描述: 将线稿或素描转换为彩色图像
• 对应脚本: /js/sketch-to-image.js
• 使用流程:
  1. 上传线稿图片
  2. 输入风格描述（可选）
  3. 系统自动填充色彩和细节

6. 创意海报

• 菜单项调用: app.openTab(event, 'Poster')
• 功能描述: 一键生成各种类型的精美海报
• 使用流程:
  1. 输入海报内容描述提示词
  2. 选择海报风格和尺寸比例
  3. 系统生成符合描述的海报图像

7. 视觉分析

• 菜单项调用: app.openTab(event, 'Analyze')
• 功能描述: 分析图像内容，识别并提取信息
• 使用流程:
  1. 上传图片
  2. 系统分析图像内容
  3. 显示识别结果（物体、文本、场景等）

8. 虚拟模特

• 菜单项调用: appExtensions.ModelGenerator.activate(event)
• 功能描述: 生成虚拟模特展示商品
• 对应脚本:
  • /js/model-generator.js（主逻辑）
  • /js/model-generator-templates.js（模板）
  • /js/model-generator-styles.js（样式）
  • /js/model-generator-functions.js（功能函数）
  • /js/model-generator-results.js（结果处理）
• 使用流程:
  1. 上传商品图片
  2. 选择模特类型和风格
  3. 配置展示参数
  4. 系统生成穿戴商品的虚拟模特图像

9. 图生3D模型

• 菜单项调用: appExtensions.Tripo3dGenerator.activate(event)
• 功能描述: 从2D图像生成3D模型
• 对应脚本:
  • /js/tripo3d-generator.js（生成器）
  • /js/tripo3d-viewer.js（查看器）
  • /js/tripo3d-viewer-fix.js（修复脚本）
• 使用流程:
  1. 上传参考图片或输入文本描述
  2. 选择模型风格和质量设置
  3. 系统生成3D模型
  4. 提供模型预览和下载选项

前端架构模式

应用采用了以下架构模式和设计原则：

1. 模块化设计

• 所有功能模块通过独立的JavaScript文件实现
• 采用 appExtensions 命名空间组织各个功能模块
• 每个模块有自己的激活方法 activate()

2. 事件处理

• 使用事件委托模式处理菜单点击
• 侧边栏菜单使用 onclick 属性调用相应的功能激活函数

3. 主内容区动态加载

• 通过各功能模块的 activate() 方法动态填充主内容区域
• 使用 app.openTab() 方法切换不同的功能标签页

4. 前端脚本组织

应用引入了多个脚本文件：

• 核心脚本：/js/main.js, /js/script.js
• 功能模块脚本：针对各个功能的专用JS文件
• 模块化组织：模型生成器功能拆分为多个JS文件（templates, styles, functions, results）

UI组件层次结构

应用 (index.html)
├── 导航栏 (.navbar)
│   ├── 品牌区域 (.navbar-brand)
│   └── 导航链接区域 (.nav-right)
│       ├── 版本标签 (.version-tag)
│       ├── 系统设置链接 (仅管理员可见)
│       └── 个人中心链接
├── 内容容器 (.container)
│   ├── 侧边栏 (.sidebar)
│   │   └── 功能菜单列表 (.sidebar-menu)
│   │       └── 菜单项 (li > a)
│   └── 主内容区 (.main-content)
│       └── 功能区域 (.function-area)

用户交互流程

1. 用户登录：

   • 访问首页时自动检查登录状态
   • 未登录时重定向到登录页面
   • 登录成功后返回主页

2. 功能选择：

   • 从左侧侧边栏选择所需功能
   • 点击菜单项加载相应功能界面到主内容区

3. 功能操作：

   • 每个功能模块有其特定的操作流程
   • 多数功能以图片上传作为起点
   • 根据功能类型设置相应参数
   • 提交处理请求并等待结果

4. 结果获取：

   • 显示处理结果（如处理后的图片）
   • 提供下载、分享或进一步处理的选项
   • 部分功能（如3D模型生成）提供交互式预览

5. 会话管理：

   • 导航栏提供个人中心和登出选项
   • 管理员可访问系统设置页面