feat: 优化MaterialSegmentView筛选条件布局为单行显示

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

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

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

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

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

这种单行布局更加简洁明了，符合用户的使用习惯。

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 => (