Vendor can show more

web/pages/LLMLibrary.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer, Pencil, Play } from 'lucide-react';
 import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
 import { LLMModel } from '../types';
@@ -13,7 +13,7 @@ const maskApiKey = (key?: string) => {
 export const LLMLibraryPage: React.FC = () => {
   const [models, setModels] = useState<LLMModel[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
-  const [vendorFilter, setVendorFilter] = useState<string>('OpenAI Compatible');
+  const [vendorFilter, setVendorFilter] = useState<string>('all');
   const [typeFilter, setTypeFilter] = useState<string>('all');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [editingModel, setEditingModel] = useState<LLMModel | null>(null);
@@ -35,13 +35,18 @@ export const LLMLibraryPage: React.FC = () => {
     load();
   }, []);
 
+  const vendorOptions = useMemo(
+    () => Array.from(new Set(models.map((m) => String(m.vendor || '').trim()).filter(Boolean))).sort(),
+    [models]
+  );
+
   const filteredModels = models.filter((m) => {
     const q = searchTerm.toLowerCase();
     const matchesSearch =
       m.name.toLowerCase().includes(q) ||
       (m.modelName || '').toLowerCase().includes(q) ||
       (m.baseUrl || '').toLowerCase().includes(q);
-    const matchesVendor = m.vendor === vendorFilter;
+    const matchesVendor = vendorFilter === 'all' || m.vendor === vendorFilter;
     const matchesType = typeFilter === 'all' || m.type === typeFilter;
     return matchesSearch && matchesVendor && matchesType;
   });
@@ -89,7 +94,10 @@ export const LLMLibraryPage: React.FC = () => {
             value={vendorFilter}
             onChange={(e) => setVendorFilter(e.target.value)}
           >
-            <option value="OpenAI Compatible">OpenAI Compatible</option>
+            <option value="all">所有厂商</option>
+            {vendorOptions.map((vendor) => (
+              <option key={vendor} value={vendor}>{vendor}</option>
+            ))}
           </Select>
         </div>
         <div className="flex items-center space-x-2">