feat(studio): 顶部 provider 下拉分组展示 + 纳入远程清单赞助商

jnMetaCode · jnMetaCode · commit 807facd4b1ed · 2026-07-06T23:32:19.000+08:00
- 14+ 项平铺改为分组:聚合平台(赞助商在列)/模型公司/本地 CLI/本地模型/
  自定义,"想配某家模型公司的 API"一眼能找到
- 修复:远程清单上架的赞助商此前只出现在面板,不在顶部下拉里,无法切换;
  现已纳入聚合平台组,赞助商标同步显示
- 注册表加 vendor 标区分模型公司官方 API 与聚合平台
diff --git a/website/src/components/studio/ProviderSelect.tsx b/website/src/components/studio/ProviderSelect.tsx
@@ -1,7 +1,7 @@
 import { Check, ChevronDown, Star } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useLanguage } from "@/i18n/LanguageProvider";
-import { api, API_PROVIDERS, PROVIDER_LABELS, PROVIDERS, type CustomProviderMeta } from "@/lib/studio";
+import { api, API_PROVIDERS, CLI_PROVIDER_IDS, PROVIDER_LABELS, type CustomProviderMeta, type RemoteProviderMeta } from "@/lib/studio";
 import { sponsorsByTier } from "@/content/sponsors";
 import { cn } from "@/lib/utils";
 
@@ -13,17 +13,23 @@ const SPONSOR_IDS = API_PROVIDERS.filter((p) => p.sponsor).map((p) => p.id);
 /**
  * Studio 顶部 provider 选择器。原生 <select> 无法给单个选项上色/加徽章，
  * 这里用一个轻量自定义下拉，把旗舰赞助商（APINEBULA）金色高亮 + 星标 + 旗舰徽章并置顶。
+ * 选项按「聚合平台 / 模型公司 / 本地 CLI / 本地模型 / 自定义」分组——14+ 项平铺看不懂,
+ * 分组后"想配某家模型公司的 API"一眼能找到。
  */
 export function ProviderSelect({ value, onChange }: { value: string; onChange: (p: string) => void }) {
   const { t } = useLanguage();
   const [open, setOpen] = useState(false);
-  // 用户在供应商面板加的自定义供应商也要能在这里切换/显示名称，不能只认静态 PROVIDERS 列表。
+  // 自定义/远程清单上架的供应商也要能在这里切换/显示名称，不能只认静态 PROVIDERS 列表。
   // 演示站没有引擎后端时拉不到 config —— 静默回退为空列表，下拉里只有内置 provider。
   const [customProviders, setCustomProviders] = useState<CustomProviderMeta[]>([]);
+  const [remoteProviders, setRemoteProviders] = useState<RemoteProviderMeta[]>([]);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    api.config().then((c) => setCustomProviders(c.customProviders ?? [])).catch(() => {});
+    api.config().then((c) => {
+      setCustomProviders(c.customProviders ?? []);
+      setRemoteProviders(c.remoteProviders ?? []);
+    }).catch(() => {});
   }, []);
 
   useEffect(() => {
@@ -41,12 +47,25 @@ export function ProviderSelect({ value, onChange }: { value: string; onChange: (
   }, [open]);
 
   const labelFor = (p: string) =>
-    p === "" ? t.studio.shell.providerDefault : PROVIDER_LABELS[p] ?? customProviders.find((c) => c.id === p)?.name ?? p;
+    p === "" ? t.studio.shell.providerDefault
+    : PROVIDER_LABELS[p]
+      ?? customProviders.find((c) => c.id === p)?.name
+      ?? remoteProviders.find((r) => r.id === p)?.name
+      ?? p;
   const isFlagship = (p: string) => !!FLAGSHIP_ID && p === FLAGSHIP_ID;
-  const isSponsor = (p: string) => SPONSOR_IDS.includes(p);
+  const isSponsor = (p: string) => SPONSOR_IDS.includes(p) || !!remoteProviders.find((r) => r.id === p)?.sponsor;
   const selectedFlagship = isFlagship(value);
-  // 自定义供应商排在内置列表之后（去重：万一自定义 id 撞了内置 id，以内置为准）
-  const allProviders = [...PROVIDERS, ...customProviders.map((c) => c.id).filter((id) => !PROVIDERS.includes(id))];
+
+  const g = t.studio.providers;
+  const groups: { label: string; ids: string[] }[] = [
+    // 聚合平台：内置聚合商(旗舰/赞助商在前) + 远程清单上架的赞助商
+    { label: g.groupAggregators, ids: [...API_PROVIDERS.filter((p) => !p.vendor).map((p) => p.id), ...remoteProviders.map((r) => r.id)] },
+    // 模型公司官方 API
+    { label: g.groupVendors, ids: API_PROVIDERS.filter((p) => p.vendor).map((p) => p.id) },
+    { label: g.groupCli, ids: [...CLI_PROVIDER_IDS] },
+    { label: g.groupLocal, ids: ["ollama"] },
+    ...(customProviders.length > 0 ? [{ label: g.groupCustom, ids: customProviders.map((c) => c.id) }] : []),
+  ];
 
   return (
     <div className="relative" ref={ref}>
@@ -67,46 +86,55 @@ export function ProviderSelect({ value, onChange }: { value: string; onChange: (
       </button>
 
       {open && (
-        <div className="absolute right-0 z-50 mt-1.5 max-h-[70vh] w-60 overflow-auto rounded-xl border border-border/70 bg-card p-1 shadow-xl">
-          {allProviders.map((p) => {
-            const flag = isFlagship(p);
-            const sponsor = isSponsor(p);
-            const on = p === value;
-            return (
-              <button
-                key={p}
-                type="button"
-                onClick={() => {
-                  onChange(p);
-                  setOpen(false);
-                }}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
-                  flag ? "font-semibold text-gold hover:bg-gold/10" : "text-foreground hover:bg-muted",
-                  on && !flag && "bg-muted",
-                  on && flag && "bg-gold/10",
-                )}
-              >
-                {flag ? (
-                  <Star className="size-4 shrink-0 fill-gold text-gold" />
-                ) : (
-                  <span className="size-4 shrink-0" />
-                )}
-                <span className="min-w-0 flex-1 truncate">{labelFor(p)}</span>
-                {flag && (
-                  <span className="shrink-0 rounded-full bg-gold/15 px-1.5 py-0.5 text-[10px] font-semibold text-gold">
-                    {t.studio.providers.flagshipTag}
-                  </span>
-                )}
-                {sponsor && (
-                  <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                    {t.studio.providers.sponsorTag}
-                  </span>
-                )}
-                {on && <Check className="size-4 shrink-0 text-gold" />}
-              </button>
-            );
-          })}
+        <div className="absolute right-0 z-50 mt-1.5 max-h-[70vh] w-64 overflow-auto rounded-xl border border-border/70 bg-card p-1 shadow-xl">
+          {groups.map((group) =>
+            group.ids.length === 0 ? null : (
+              <div key={group.label}>
+                <div className="px-2.5 pb-1 pt-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
+                  {group.label}
+                </div>
+                {group.ids.map((p) => {
+                  const flag = isFlagship(p);
+                  const sponsor = isSponsor(p);
+                  const on = p === value;
+                  return (
+                    <button
+                      key={p}
+                      type="button"
+                      onClick={() => {
+                        onChange(p);
+                        setOpen(false);
+                      }}
+                      className={cn(
+                        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
+                        flag ? "font-semibold text-gold hover:bg-gold/10" : "text-foreground hover:bg-muted",
+                        on && !flag && "bg-muted",
+                        on && flag && "bg-gold/10",
+                      )}
+                    >
+                      {flag ? (
+                        <Star className="size-4 shrink-0 fill-gold text-gold" />
+                      ) : (
+                        <span className="size-4 shrink-0" />
+                      )}
+                      <span className="min-w-0 flex-1 truncate">{labelFor(p)}</span>
+                      {flag && (
+                        <span className="shrink-0 rounded-full bg-gold/15 px-1.5 py-0.5 text-[10px] font-semibold text-gold">
+                          {t.studio.providers.flagshipTag}
+                        </span>
+                      )}
+                      {sponsor && (
+                        <span className="shrink-0 rounded-full bg-gold/15 px-1.5 py-0.5 text-[10px] font-semibold text-gold">
+                          {t.studio.providers.sponsorTag}
+                        </span>
+                      )}
+                      {on && <Check className="size-4 shrink-0 text-gold" />}
+                    </button>
+                  );
+                })}
+              </div>
+            ),
+          )}
         </div>
       )}
     </div>
diff --git a/website/src/i18n/translations.ts b/website/src/i18n/translations.ts
@@ -191,6 +191,11 @@ const zh = {
       registerCta: "注册领取 Key",
       modelSelectTitle: "切换模型（保存为该供应商的默认模型）",
       modelDefaultLabel: "默认模型",
+      groupAggregators: "聚合平台",
+      groupVendors: "模型公司",
+      groupCli: "本地 CLI",
+      groupLocal: "本地模型",
+      groupCustom: "自定义",
       modelsLoading: "拉取模型列表…",
       modelsEmpty: "拉取失败或无可用模型,可去配置页手填",
       idImmutableHint: "标识不可修改（被已保存的 key 和工作流引用）",
@@ -724,6 +729,11 @@ const en: typeof zh = {
       registerCta: "Sign up & get a key",
       modelSelectTitle: "Switch model (saved as this provider's default)",
       modelDefaultLabel: "Default model",
+      groupAggregators: "Aggregators",
+      groupVendors: "Model vendors",
+      groupCli: "Local CLI",
+      groupLocal: "Local",
+      groupCustom: "Custom",
       modelsLoading: "Fetching models…",
       modelsEmpty: "Fetch failed or no models; set one manually in Configure",
       idImmutableHint: "The identifier cannot be changed (referenced by saved keys and workflows)",
diff --git a/website/src/lib/studio.ts b/website/src/lib/studio.ts
@@ -517,6 +517,8 @@ export interface ApiProviderMeta {
   defaultBaseUrl?: string;
   /** 注册/领取 key 的直达链接（赞助商带推广参数） */
   signupUrl?: string;
+  /** true=模型公司官方 API(如 DeepSeek/Anthropic/OpenAI),false/缺省=聚合平台 */
+  vendor?: boolean;
   flagship?: boolean;
   sponsor?: boolean;
   modelSuggestions?: string[];
@@ -529,9 +531,9 @@ export const API_PROVIDERS: ApiProviderMeta[] = [
   { id: "compshare", name: "CompShare", hint: "console.compshare.cn", defaultBaseUrl: "https://api.modelverse.cn/v1", signupUrl: "https://passport.compshare.cn/register?referral_code=ETD3L5JBM13CtKARkMORot&ytag=GPU_YY_YX_git_agency-agents", sponsor: true, modelSuggestions: ["deepseek-ai/DeepSeek-R1", "deepseek-ai/DeepSeek-V3"] },
   // 普通赞助商 RootFlowAI —— 前 3 位，紧跟两家旗舰/赞助商之后
   { id: "rootflowai", name: "RootFlowAI", hint: "rootflowai.com", defaultBaseUrl: "https://api.rootflowai.com/v1", signupUrl: "https://rootflowai.com/register?utm_source=agency-agents-zh&utm_medium=sponsor&utm_campaign=studio", sponsor: true, modelSuggestions: ["claude-sonnet-4-6", "claude-opus-4-7", "gpt-5.5", "gemini-3.1-pro-preview"] },
-  { id: "deepseek", name: "DeepSeek", hint: "platform.deepseek.com", defaultBaseUrl: "https://api.deepseek.com/v1", modelSuggestions: ["deepseek-chat", "deepseek-reasoner"] },
-  { id: "claude", name: "Claude (Anthropic)", shortName: "Claude", hint: "console.anthropic.com", defaultBaseUrl: "https://api.anthropic.com/v1", modelSuggestions: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-3-5-sonnet-20241022"] },
-  { id: "openai", name: "OpenAI", hint: "gpt-4o {etc} · platform.openai.com", defaultBaseUrl: "https://api.openai.com/v1", modelSuggestions: ["gpt-4o", "gpt-4o-mini", "o1", "o3-mini", "gpt-4.1"] },
+  { id: "deepseek", name: "DeepSeek", hint: "platform.deepseek.com", defaultBaseUrl: "https://api.deepseek.com/v1", vendor: true, modelSuggestions: ["deepseek-chat", "deepseek-reasoner"] },
+  { id: "claude", name: "Claude (Anthropic)", shortName: "Claude", hint: "console.anthropic.com", defaultBaseUrl: "https://api.anthropic.com/v1", vendor: true, modelSuggestions: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-3-5-sonnet-20241022"] },
+  { id: "openai", name: "OpenAI", hint: "gpt-4o {etc} · platform.openai.com", defaultBaseUrl: "https://api.openai.com/v1", vendor: true, modelSuggestions: ["gpt-4o", "gpt-4o-mini", "o1", "o3-mini", "gpt-4.1"] },
   { id: "agnes", name: "Agnes AI", hint: "agnes-2.0-flash · agnes-ai.com", defaultBaseUrl: "https://apihub.agnes-ai.com/v1", modelSuggestions: ["agnes-2.0-flash", "agnes-1.5-flash"] },
 ];
 
