From 30a4cfc23f13f10015b63f2ab7243b7dffaab6b7 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 15 Jul 2025 21:46:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96MaterialSegmentView?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=9D=A1=E4=BB=B6=E5=B8=83=E5=B1=80=E4=B8=BA?=
 =?UTF-8?q?=E5=8D=95=E8=A1=8C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 布局优化:
- AI分类筛选改为单行显示：'AI分类：' + 选项按钮
- 模特筛选改为单行显示：'模特：' + 选项按钮
- 使用flex布局，标签和选项在同一行
- 标签部分使用flex-shrink-0防止收缩

 视觉改进:
- 标签文字添加冒号，更清晰的层次结构
- 保持原有的颜色主题：AI分类(蓝色)，模特(绿色)
- 选项按钮保持原有的样式和交互效果
- 数量显示保持在按钮内的小徽章中

 响应式设计:
- flex-wrap确保选项按钮在小屏幕上能够换行
- gap-4提供合适的间距
- 保持良好的移动端体验

 用户体验提升:
- 更紧凑的布局，节省垂直空间
- 清晰的标签指示，用户一眼就能看到筛选维度
- 保持所有原有功能：点击筛选、数量显示、状态管理
- 筛选逻辑完全不变，只是视觉布局优化

现在筛选条件显示为：
- AI分类：全部(44) 全身(20) 半身(15) 其他(9)
- 模特：全部(44) 杨明明(44)

这种单行布局更加简洁明了，符合用户的使用习惯。
---
 .../src/components/MaterialSegmentView.tsx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/components/MaterialSegmentView.tsx b/apps/desktop/src/components/MaterialSegmentView.tsx
index b08c8a1..c860829 100644
--- a/apps/desktop/src/components/MaterialSegmentView.tsx
+++ b/apps/desktop/src/components/MaterialSegmentView.tsx
@@ -326,11 +326,11 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
 
       {/* 筛选条件 */}
       <div className="space-y-4">
-        {/* AI分类筛选 */}
-        <div>
-          <div className="flex items-center gap-2 mb-3">
+        {/* AI分类筛选 - 单行显示 */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 flex-shrink-0">
             <Tag size={16} className="text-gray-600" />
-            <span className="text-sm font-medium text-gray-700">AI分类</span>
+            <span className="text-sm font-medium text-gray-700">AI分类：</span>
           </div>
           <div className="flex flex-wrap gap-2">
             {classificationOptions.map(option => (
@@ -352,11 +352,11 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
           </div>
         </div>
 
-        {/* 模特筛选 */}
-        <div>
-          <div className="flex items-center gap-2 mb-3">
+        {/* 模特筛选 - 单行显示 */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 flex-shrink-0">
             <Users size={16} className="text-gray-600" />
-            <span className="text-sm font-medium text-gray-700">模特</span>
+            <span className="text-sm font-medium text-gray-700">模特：</span>
           </div>
           <div className="flex flex-wrap gap-2">
             {modelOptions.map(option => (