feat ：修改文件结构

2026-06-05 19:24:06 +08:00
parent 1da95eaef3
commit af85d31035
15 changed files with 577 additions and 273 deletions
--- a/src/pages/home/components/ModelSelector.tsx
+++ b/src/pages/home/components/ModelSelector.tsx
@@ -0,0 +1,122 @@
+// ============================================================
+// ModelSelector — 模型选择器（垂直单选列表，按类别分组）
+// 使用 useModelList() Hook 获取数据，组件仅负责渲染
+// ============================================================
+
+import { useMemo } from 'react';
+import { Menu, Spin, Empty, Tag, Typography, theme as antTheme } from 'antd';
+import { AppstoreOutlined } from '@ant-design/icons';
+
+import { useModelList, MODEL_CATEGORY_LABELS } from '@/hooks/use-api';
+import { useHomeContext } from '@/contexts/home-context';
+import type { ModelCategory } from '@/services/modules';
+
+const { Text } = Typography;
+
+// ---------- 组件 ----------
+
+export function ModelSelector() {
+   const { token } = antTheme.useToken();
+   const { selectedModel, setSelectedModel } = useHomeContext();
+   const { data: models, loading, groupedModels } = useModelList();
+
+   // 构建 Menu items：分组标题 + 模型项
+   const menuItems = useMemo(() => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const items: any[] = [];
+
+      groupedModels.forEach((groupModels, category) => {
+         const categoryLabel = MODEL_CATEGORY_LABELS[category as ModelCategory] || category;
+         items.push({
+            key: `group-${category}`,
+            label: (
+               <Text strong style={{ fontSize: 12, color: token.colorTextSecondary }}>
+                  {categoryLabel} ({groupModels.length})
+               </Text>
+            ),
+            type: 'group' as const,
+            children: groupModels.map((model) => ({
+               key: model.id,
+               label: (
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                     <Text
+                        style={{
+                           flex: 1,
+                           overflow: 'hidden',
+                           textOverflow: 'ellipsis',
+                           whiteSpace: 'nowrap',
+                           fontSize: 13,
+                        }}
+                        title={model.name}
+                     >
+                        {model.name}
+                     </Text>
+                     {model.status !== 'active' && (
+                        <Tag
+                           color={model.status === 'inactive' ? 'default' : 'orange'}
+                           style={{ fontSize: 10, lineHeight: '16px', padding: '0 4px' }}
+                        >
+                           {model.status === 'maintenance' ? '维护' : '停用'}
+                        </Tag>
+                     )}
+                  </div>
+               ),
+            })),
+         });
+      });
+
+      return items;
+   }, [groupedModels, token.colorTextSecondary]);
+
+   // 选中菜单项
+   const handleSelect = ({ key }: { key: string }) => {
+      const model = models?.find((m) => m.id === key);
+      if (model) {
+         setSelectedModel(model);
+      }
+   };
+
+   // 加载态
+   if (loading) {
+      return (
+         <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
+            <Spin size="small" />
+         </div>
+      );
+   }
+
+   // 空态
+   if (!models || models.length === 0) {
+      return <Empty description="暂无可用模型" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+   }
+
+   // 选中 key
+   const selectedKeys = selectedModel ? [selectedModel.id] : [];
+
+   return (
+      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
+         <div
+            style={{
+               padding: '8px 12px',
+               borderBottom: `1px solid ${token.colorBorderSecondary}`,
+               display: 'flex',
+               alignItems: 'center',
+               gap: 6,
+            }}
+         >
+            <AppstoreOutlined style={{ color: token.colorPrimary, fontSize: 14 }} />
+            <Text strong style={{ fontSize: 13 }}>选择模型</Text>
+         </div>
+         <Menu
+            mode="inline"
+            selectedKeys={selectedKeys}
+            onSelect={handleSelect}
+            items={menuItems}
+            style={{
+               borderInlineEnd: 'none',
+               background: 'transparent',
+            }}
+         />
+      </div>
+   );
+}