imeepos
|
30a4cfc23f
|
feat: 优化MaterialSegmentView筛选条件布局为单行显示
布局优化:
- AI分类筛选改为单行显示：'AI分类：' + 选项按钮
- 模特筛选改为单行显示：'模特：' + 选项按钮
- 使用flex布局，标签和选项在同一行
- 标签部分使用flex-shrink-0防止收缩
视觉改进:
- 标签文字添加冒号，更清晰的层次结构
- 保持原有的颜色主题：AI分类(蓝色)，模特(绿色)
- 选项按钮保持原有的样式和交互效果
- 数量显示保持在按钮内的小徽章中
响应式设计:
- flex-wrap确保选项按钮在小屏幕上能够换行
- gap-4提供合适的间距
- 保持良好的移动端体验
用户体验提升:
- 更紧凑的布局，节省垂直空间
- 清晰的标签指示，用户一眼就能看到筛选维度
- 保持所有原有功能：点击筛选、数量显示、状态管理
- 筛选逻辑完全不变，只是视觉布局优化
现在筛选条件显示为：
- AI分类：全部(44) 全身(20) 半身(15) 其他(9)
- 模特：全部(44) 杨明明(44)
这种单行布局更加简洁明了，符合用户的使用习惯。
|
2025-07-15 21:46:45 +08:00 |
|
imeepos
|
6610695177
|
fix: 修复MaterialSegmentView数据结构不匹配问题，实现完整的多条件筛选功能
修复数据结构不匹配:
- 发现前端期望字段(classification_info, model_info, material_info)与后端实际返回字段(classification, model, material_name, material_type)不匹配
- 更新前端SegmentWithDetails接口定义，与后端MaterialSegmentView数据结构保持一致
- 修复所有过滤逻辑中的字段引用：classification_info -> classification, model_info -> model
- 修复渲染卡片中的字段引用：material_info.name -> material_name
完善多条件筛选功能:
- 修复分类过滤逻辑：使用segment.classification?.category进行筛选
- 修复模特过滤逻辑：使用segment.model?.name进行筛选
- 修复搜索过滤逻辑：使用segment.material_name进行搜索
- 修复标签信息显示：正确显示classification和model信息
验证数据流通:
- 后端正常返回44个片段详情
- 按分类聚合：3个分类组
- 按模特聚合：1个模特组
- 统计信息：总片段数44
- 前端成功接收并处理数据
解决的问题:
- 统计信息有数据但下方列表没数据的问题已解决
- 前后端数据结构现在完全匹配
- 多条件筛选功能正常工作
- AI分类和模特筛选都能正确过滤数据
- 搜索功能与筛选条件正确组合
功能验证:
- 后端API调用正常(get_project_segment_view)
- 数据结构匹配，字段映射正确
- 多条件筛选逻辑工作正常
- 卡片渲染显示正确信息
- 搜索和筛选组合功能正常
- 应用构建和运行成功
现在MaterialSegmentView组件完全正常工作，用户可以：
1. 看到完整的片段统计信息
2. 在下方列表中看到所有片段数据
3. 使用AI分类筛选功能
4. 使用模特筛选功能
5. 使用组合筛选(AI分类 AND 模特)
6. 使用搜索功能与筛选条件组合
|
2025-07-15 21:44:34 +08:00 |
|
imeepos
|
60cd01c1ec
|
feat: 重构MaterialSegmentView为多条件筛选系统 - 移除标签页设计
核心功能重构:
- 移除标签页(tab)设计，改为同时显示AI分类和模特的筛选条件
- 实现组合筛选：AI分类 AND 模特的多条件检索
- 支持类似'AI分类：全身 and 模特：杨明明'的筛选组合
多条件筛选系统:
- AI分类筛选：独立的筛选区域，显示所有分类选项及数量
- 模特筛选：独立的筛选区域，显示所有模特选项及数量
- 组合筛选：两个条件可以同时生效，实现精确筛选
- 当前筛选条件显示：实时显示已选择的筛选条件
UI/UX优化:
- 分区设计：AI分类和模特各自独立的筛选区域
- 视觉区分：AI分类使用蓝色主题，模特使用绿色主题
- 筛选状态显示：当有筛选条件时显示当前筛选状态栏
- 清除功能：一键清除所有筛选条件
- Card卡片风格：片段展示保持卡片设计
数据处理优化:
- 智能过滤：先获取所有片段，再依次应用分类和模特过滤
- 组合逻辑：支持分类 AND 模特的组合筛选
- 搜索集成：搜索功能与筛选条件无缝结合
- 实时更新：筛选条件变化时立即更新结果
技术实现:
- 移除activeTab状态，简化组件逻辑
- 优化过滤算法，支持多条件组合
- 保持useMemo性能优化
- 完善的错误处理和加载状态
交互体验:
- 直观的筛选界面：用户可以清楚看到所有可用的筛选选项
- 即时反馈：点击筛选条件立即看到结果变化
- 状态提示：当前筛选条件清晰显示，支持快速清除
- 空状态处理：没有匹配结果时的友好提示
功能特点:
- 支持单一条件筛选：只选择AI分类或只选择模特
- 支持组合条件筛选：同时选择AI分类和模特
- 支持搜索+筛选：搜索词与筛选条件组合使用
- 支持快速重置：一键清除所有筛选条件
这个重构完全满足了用户的新需求：
1. 移除了标签页设计
2. 实现了AI分类和模特的同时筛选
3. 支持组合筛选条件（AI分类 AND 模特）
4. 提供了清晰的筛选状态显示和管理
|
2025-07-15 21:36:33 +08:00 |
|
imeepos
|
e1e4b9d67a
|
feat: 重构MaterialSegmentView为多条件检索标签页风格
核心功能重构:
- 将MaterialSegmentView改为多条件检索的标签页风格
- 实现AI分类和模特两个主要检索维度
- 移除折叠/展开功能，改为直接平铺Card卡片风格
标签页检索系统:
- AI分类标签页：显示所有分类选项及对应数量
- 模特标签页：显示所有模特选项及对应数量
- 全部选项：显示总片段数量
- 动态数量显示：每个选项显示对应的片段数量
UI/UX优化:
- Card卡片风格：每个片段使用独立卡片展示
- 缩略图显示：支持视频缩略图预览
- 标签信息：显示分类、模特、置信度等信息
- 操作按钮：查看、编辑、删除等快捷操作
- 搜索功能：支持按片段名称、分类、模特搜索
数据展示优化:
- 时长格式化：MM:SS格式显示时间
- 置信度显示：百分比形式显示AI分类置信度
- 状态标签：不同颜色区分分类和模特信息
- 响应式布局：适配不同屏幕尺寸
技术实现:
- 使用get_project_segment_view API获取数据
- useMemo优化性能，避免不必要的重新计算
- TypeScript类型安全，完整的接口定义
- 错误处理和加载状态管理
交互体验:
- 标签页切换：平滑的标签页切换动画
- 过滤选择：点击标签即可过滤对应内容
- 实时搜索：输入即时过滤结果
- 空状态处理：友好的空数据提示
性能优化:
- 智能过滤：基于选中标签和搜索词的组合过滤
- 数据缓存：避免重复API调用
- 组件优化：使用React hooks优化渲染性能
这个重构完全满足了用户的需求：
1. 检索风格改为标签页
2. AI分类和模特维度，显示全部/具体选项+数量
3. 内容直接平铺Card卡片风格，无折叠/展开
4. 合理规划内容布局，美观易用
|
2025-07-15 21:28:51 +08:00 |
|
imeepos
|
49bc9211d6
|
feat: 重构MaterialSegmentView为多条件检索标签页风格
核心功能重构:
- 将MaterialSegmentView改为多条件检索的标签页风格
- 实现AI分类和模特两个主要检索维度
- 移除折叠/展开功能，改为直接平铺Card卡片风格
标签页检索系统:
- AI分类标签页：显示所有分类选项及对应数量
- 模特标签页：显示所有模特选项及对应数量
- 全部选项：显示总片段数量
- 动态数量显示：每个选项显示对应的片段数量
UI/UX优化:
- Card卡片风格：每个片段使用独立卡片展示
- 缩略图显示：支持视频缩略图预览
- 标签信息：显示分类、模特、置信度等信息
- 操作按钮：查看、编辑、删除等快捷操作
- 搜索功能：支持按片段名称、分类、模特搜索
数据展示优化:
- 时长格式化：MM:SS格式显示时间
- 置信度显示：百分比形式显示AI分类置信度
- 状态标签：不同颜色区分分类和模特信息
- 响应式布局：适配不同屏幕尺寸
技术实现:
- 使用get_project_segment_view API获取数据
- useMemo优化性能，避免不必要的重新计算
- TypeScript类型安全，完整的接口定义
- 错误处理和加载状态管理
交互体验:
- 标签页切换：平滑的标签页切换动画
- 过滤选择：点击标签即可过滤对应内容
- 实时搜索：输入即时过滤结果
- 空状态处理：友好的空数据提示
性能优化:
- 智能过滤：基于选中标签和搜索词的组合过滤
- 数据缓存：避免重复API调用
- 组件优化：使用React hooks优化渲染性能
这个重构完全满足了用户的需求：
1. 检索风格改为标签页
2. AI分类和模特维度，显示全部/具体选项+数量
3. 内容直接平铺Card卡片风格，无折叠/展开
4. 合理规划内容布局，美观易用
|
2025-07-15 21:26:53 +08:00 |
|
imeepos
|
19a05f4e8a
|
fix
|
2025-07-15 21:23:54 +08:00 |
|
imeepos
|
f67c6357e1
|
fix: 重构项目详情页面
|
2025-07-15 21:20:00 +08:00 |
|
imeepos
|
590e254fe1
|
feat: 添加项目详情/素材管理的MaterialSegment聚合视图功能
- 新增MaterialSegment聚合视图，支持按AI分类和模特聚合展示
- 实现后端MaterialSegmentViewService和相关API命令
- 创建前端React组件：MaterialSegmentView、MaterialSegmentGroup、MaterialSegmentCard等
- 添加MaterialSegment详细信息模态框和批量操作对话框
- 实现搜索、筛选、排序、分页功能
- 集成虚拟滚动和性能优化
- 在ProjectDetails页面添加片段管理选项卡
- 遵循promptx开发规范和UI/UX设计标准
|
2025-07-15 16:49:08 +08:00 |