feat(web): merge TTS settings into ModelSettingsModal, remove from SettingsModal

Signed-off-by: baizhi958216 <1475289190@qq.com>
2026-06-11 11:14:50 +08:00
parent 6b11a225cd
commit ab2f42bc42
3 changed files with 226 additions and 219 deletions
@@ -7,6 +7,17 @@ import {
  readStoredModelConfig,
  writeStoredModelConfig,
 } from "@/lib/clientModelConfig";
+import {
+  clearStoredTtsConfig,
+  readStoredTtsConfig,
+  writeStoredTtsConfig,
+} from "@/lib/clientTtsConfig";
+import {
+  findTtsPreset,
+  PAYG_PRESET_ID,
+  TTS_KEY_DOC_URL,
+  TTS_REGION_PRESETS,
+} from "@/lib/ttsPresets";

 const PROVIDER_OPTIONS: { value: ProviderProtocol | ""; label: string }[] = [
  { value: "", label: "自动推断（推荐）" },
@@ -32,7 +43,7 @@ export function ModelSettingsModal({
  onSaved,
 }: {
  onClose: () => void;
-  onSaved: () => void;
+  onSaved: (settings: { ttsConfigured: boolean }) => void;
 }) {
  const initial = readStoredModelConfig();

@@ -69,6 +80,22 @@ export function ModelSettingsModal({
  const [showKeys, setShowKeys] = useState<Record<string, boolean>>({});
  const [shown, setShown] = useState(false);

+  // TTS state
+  const [initialTts] = useState(() => readStoredTtsConfig());
+  const initialKind = findTtsPreset(initialTts?.presetId)?.kind ?? "payg";
+  const [keyType, setKeyType] = useState<"token-plan" | "payg">(initialKind);
+  const [regionId, setRegionId] = useState<string>(
+    initialKind === "token-plan"
+      ? (initialTts?.presetId ?? TTS_REGION_PRESETS[0]!.id)
+      : TTS_REGION_PRESETS[0]!.id,
+  );
+  const [ttsApiKey, setTtsApiKey] = useState<string>(initialTts?.apiKey ?? "");
+  const [showTtsKey, setShowTtsKey] = useState(false);
+
+  const expectedPrefix = keyType === "payg" ? "sk-" : "tp-";
+  const prefixMismatch =
+    ttsApiKey.trim().length > 0 && !ttsApiKey.trim().startsWith(expectedPrefix);
+
  useEffect(() => {
    const id = requestAnimationFrame(() => setShown(true));
    return () => cancelAnimationFrame(id);
@@ -99,36 +126,51 @@ export function ModelSettingsModal({

  const save = () => {
    const [text, image, vision] = groups;
-    writeStoredModelConfig({
-      textBaseUrl: text.baseUrl,
-      textApiKey: text.apiKey,
-      textModel: text.model,
-      textProvider: (text.provider as ProviderProtocol) || undefined,
-      imageBaseUrl: image.baseUrl,
-      imageApiKey: image.apiKey,
-      imageModel: image.model,
-      imageProvider: (image.provider as ProviderProtocol) || undefined,
-      visionBaseUrl: vision.baseUrl,
-      visionApiKey: vision.apiKey,
-      visionModel: vision.model,
-      visionProvider: (vision.provider as ProviderProtocol) || undefined,
-    });
-    onSaved();
+    if (text && image && vision) {
+      writeStoredModelConfig({
+        textBaseUrl: text.baseUrl,
+        textApiKey: text.apiKey,
+        textModel: text.model,
+        textProvider: (text.provider as ProviderProtocol) || undefined,
+        imageBaseUrl: image.baseUrl,
+        imageApiKey: image.apiKey,
+        imageModel: image.model,
+        imageProvider: (image.provider as ProviderProtocol) || undefined,
+        visionBaseUrl: vision.baseUrl,
+        visionApiKey: vision.apiKey,
+        visionModel: vision.model,
+        visionProvider: (vision.provider as ProviderProtocol) || undefined,
+      });
+    }
+
+    const key = ttsApiKey.trim();
+    let ttsConfigured = false;
+    if (key) {
+      const presetId = keyType === "payg" ? PAYG_PRESET_ID : regionId;
+      writeStoredTtsConfig({ presetId, apiKey: key });
+      ttsConfigured = true;
+    } else {
+      clearStoredTtsConfig();
+    }
+
+    onSaved({ ttsConfigured });
    close();
  };

  const clearAll = () => {
    clearStoredModelConfig();
-    setGroups((prev) =
+    clearStoredTtsConfig();
+    setGroups((prev) =>
      prev.map((g) => ({ ...g, baseUrl: "", apiKey: "", model: "", provider: "" })),
    );
-    onSaved();
+    setTtsApiKey("");
+    onSaved({ ttsConfigured: false });
    close();
  };

-  const hasAnySetting = groups.some(
-    (g) => g.baseUrl.trim() && g.apiKey.trim() && g.model.trim(),
-  );
+  const hasAnySetting =
+    groups.some((g) => g.baseUrl.trim() && g.apiKey.trim() && g.model.trim()) ||
+    initialTts != null;

  return (
    <div
@@ -270,6 +312,152 @@ export function ModelSettingsModal({

          <div className="border-t border-clay-900/8 mx-6 md:mx-8" />

+          {/* ── TTS Key Section ── */}
+          <div className="flex flex-col gap-3 px-6 md:px-8 pt-5 pb-5">
+            <div className="flex items-center gap-2.5">
+              <span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
+                <i className="fa-solid fa-key text-[11px]" />
+              </span>
+              <span className="font-serif text-base text-clay-900">
+                自带配音 Key
+              </span>
+              <span className="text-[10px] text-clay-400">可选</span>
+            </div>
+            <p className="text-[12px] leading-relaxed text-clay-500">
+              填入你自己的
+              <span className="text-clay-800"> 小米 MiMo API Key</span>
+              ，配音将在浏览器本地合成，Key 只保存在本地、绝不经过服务器。MiMo
+              TTS 目前
+              <span className="text-clay-800">限时免费</span>
+              ，申请即可使用。
+            </p>
+
+            <div className="flex flex-col gap-2">
+              <span className="text-[10px] smallcaps text-clay-500">
+                K e y · 类 型
+              </span>
+              <div className="grid grid-cols-2 gap-2">
+                {(
+                  [
+                    {
+                      kind: "payg",
+                      label: "按量付费 Pay-as-you-go",
+                      sub: "sk- 开头",
+                    },
+                    {
+                      kind: "token-plan",
+                      label: "套餐 Token Plan",
+                      sub: "tp- 开头",
+                    },
+                  ] as const
+                ).map((t) => {
+                  const active = keyType === t.kind;
+                  return (
+                    <button
+                      key={t.kind}
+                      type="button"
+                      onClick={() => setKeyType(t.kind)}
+                      className={
+                        "flex flex-col gap-0.5 rounded-sm border px-3 py-2.5 text-left transition-all " +
+                        (active
+                          ? "border-ember-500 bg-ember-500/5 text-clay-900"
+                          : "border-clay-900/12 text-clay-600 hover:border-clay-900/35 hover:bg-cream-100")
+                      }
+                    >
+                      <span className="text-[13px]">{t.label}</span>
+                      <span className="text-[10px] text-clay-400">
+                        {t.sub}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {keyType === "token-plan" && (
+              <div className="flex flex-col gap-2">
+                <span className="text-[10px] smallcaps text-clay-500">
+                  区 域 节 点
+                </span>
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+                  {TTS_REGION_PRESETS.map((p) => {
+                    const active = p.id === regionId;
+                    return (
+                      <button
+                        key={p.id}
+                        type="button"
+                        onClick={() => setRegionId(p.id)}
+                        className={
+                          "rounded-sm border px-3 py-2.5 text-left text-[13px] transition-all " +
+                          (active
+                            ? "border-ember-500 bg-ember-500/5 text-clay-900"
+                            : "border-clay-900/12 text-clay-600 hover:border-clay-900/35 hover:bg-cream-100")
+                        }
+                      >
+                        {p.label}
+                      </button>
+                    );
+                  })}
+                </div>
+                <span className="text-[11px] text-clay-400">
+                  选择与你的套餐订阅地区一致的节点（通常也是延迟最低的那个）。
+                </span>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+              <span className="text-[10px] smallcaps text-clay-500">
+                A P I · K e y
+              </span>
+              <div className="relative">
+                <input
+                  value={ttsApiKey}
+                  onChange={(e) => setTtsApiKey(e.target.value)}
+                  type={showTtsKey ? "text" : "password"}
+                  autoComplete="off"
+                  spellCheck={false}
+                  placeholder={
+                    keyType === "payg"
+                      ? "粘贴 sk- 开头的按量 Key"
+                      : "粘贴 tp- 开头的套餐 Key"
+                  }
+                  className="h-11 w-full rounded-sm border border-clay-900/15 bg-cream-100 pl-4 pr-11 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowTtsKey((v) => !v)}
+                  aria-label={showTtsKey ? "隐藏" : "显示"}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-clay-400 hover:text-clay-700 transition-colors"
+                >
+                  <i
+                    className={`fa-solid ${showTtsKey ? "fa-eye-slash" : "fa-eye"} text-sm`}
+                  />
+                </button>
+              </div>
+              {prefixMismatch && (
+                <span className="flex items-start gap-1.5 text-[11px] leading-relaxed text-ember-500">
+                  <i className="fa-solid fa-triangle-exclamation mt-0.5 text-[10px]" />
+                  此 Key 不是 {expectedPrefix} 开头，可能与所选「
+                  {keyType === "payg"
+                    ? "按量付费 Pay-as-you-go"
+                    : "套餐 Token Plan"}
+                  」类型不符，请确认是否填错。
+                </span>
+              )}
+              <a
+                href={TTS_KEY_DOC_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-[11px] text-ember-500 hover:text-ember-400 transition-colors"
+              >
+                <i className="fa-brands fa-github text-[11px]" />
+                如何免费申请 Key？查看图文教程
+              </a>
+            </div>
+          </div>
+
+          <div className="border-t border-clay-900/8 mx-6 md:mx-8" />
+
          <div className="px-6 md:px-8 py-4">
            <p className="text-[11px] leading-relaxed text-clay-400">
              <i className="fa-solid fa-circle-info mr-1.5" />
@@ -1,17 +1,6 @@
 "use client";

 import { type ReactNode, useEffect, useState } from "react";
-import {
-  clearStoredTtsConfig,
-  readStoredTtsConfig,
-  writeStoredTtsConfig,
-} from "@/lib/clientTtsConfig";
-import {
-  findTtsPreset,
-  PAYG_PRESET_ID,
-  TTS_KEY_DOC_URL,
-  TTS_REGION_PRESETS,
-} from "@/lib/ttsPresets";

 const PLAYER_NAME_STORAGE_KEY = "infiplot:playerName";
 const VISION_CLICK_STORAGE_KEY = "infiplot:visionClick";
@@ -52,30 +41,14 @@ export function SettingsModal({
 }: {
  initialVisionClickEnabled?: boolean;
  onClose: () => void;
-  onSaved: (settings: { ttsConfigured: boolean; playerName: string; visionClickEnabled: boolean }) => void;
+  onSaved: (settings: { playerName: string; visionClickEnabled: boolean }) => void;
  footerNote?: ReactNode;
 }) {
-  const [initialTts] = useState(() => readStoredTtsConfig());
-  const initialKind = findTtsPreset(initialTts?.presetId)?.kind ?? "payg";
-  const [keyType, setKeyType] = useState<"token-plan" | "payg">(initialKind);
-  const [regionId, setRegionId] = useState<string>(
-    initialKind === "token-plan"
-      ? (initialTts?.presetId ?? TTS_REGION_PRESETS[0]!.id)
-      : TTS_REGION_PRESETS[0]!.id,
-  );
-  const [apiKey, setApiKey] = useState<string>(initialTts?.apiKey ?? "");
-  const [showKey, setShowKey] = useState(false);
-  const ttsAlreadyConfigured = initialTts != null;
-
  const [playerName, setPlayerName] = useState(() => readStoredPlayerName());
  const [visionClick, setVisionClick] = useState(initialVisionClickEnabled);

  const [shown, setShown] = useState(false);

-  const expectedPrefix = keyType === "payg" ? "sk-" : "tp-";
-  const prefixMismatch =
-    apiKey.trim().length > 0 && !apiKey.trim().startsWith(expectedPrefix);
-
  useEffect(() => {
    const id = requestAnimationFrame(() => setShown(true));
    return () => cancelAnimationFrame(id);
@@ -94,30 +67,18 @@ export function SettingsModal({
      localStorage.setItem(VISION_CLICK_STORAGE_KEY, visionClick ? "1" : "0");
    } catch { /* ignore */ }

-    const key = apiKey.trim();
-    let ttsConfigured = false;
-    if (key) {
-      const presetId = keyType === "payg" ? PAYG_PRESET_ID : regionId;
-      writeStoredTtsConfig({ presetId, apiKey: key });
-      ttsConfigured = true;
-    } else {
-      clearStoredTtsConfig();
-      ttsConfigured = false;
-    }
-
-    onSaved({ ttsConfigured, playerName: name, visionClickEnabled: visionClick });
+    onSaved({ playerName: name, visionClickEnabled: visionClick });
    close();
  };

  const clearAll = () => {
-    clearStoredTtsConfig();
    writeStoredPlayerName("");
    try { localStorage.removeItem(VISION_CLICK_STORAGE_KEY); } catch { /* ignore */ }
-    onSaved({ ttsConfigured: false, playerName: "", visionClickEnabled: true });
+    onSaved({ playerName: "", visionClickEnabled: true });
    close();
  };

-  const hasAnySetting = ttsAlreadyConfigured || readStoredPlayerName().length > 0;
+  const hasAnySetting = readStoredPlayerName().length > 0;

  return (
    <div
@@ -225,157 +186,13 @@ export function SettingsModal({
            </span>
          </div>

-          <div className="border-t border-clay-900/8 mx-6 md:mx-8" />
-
-          {/* ── TTS Key Section ── */}
-          <div className="flex flex-col gap-3 px-6 md:px-8 pt-5 pb-5">
-            <div className="flex items-center gap-2.5">
-              <span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
-                <i className="fa-solid fa-key text-[11px]" />
-              </span>
-              <span className="font-serif text-base text-clay-900">
-                自带配音 Key
-              </span>
-              <span className="text-[10px] text-clay-400">可选</span>
-            </div>
-            <p className="text-[12px] leading-relaxed text-clay-500">
-              填入你自己的
-              <span className="text-clay-800"> 小米 MiMo API Key</span>
-              ，配音将在浏览器本地合成，Key 只保存在本地、绝不经过服务器。MiMo
-              TTS 目前
-              <span className="text-clay-800">限时免费</span>
-              ，申请即可使用。
-            </p>
-
-            <div className="flex flex-col gap-2">
-              <span className="text-[10px] smallcaps text-clay-500">
-                K e y · 类 型
-              </span>
-              <div className="grid grid-cols-2 gap-2">
-                {(
-                  [
-                    {
-                      kind: "payg",
-                      label: "按量付费 Pay-as-you-go",
-                      sub: "sk- 开头",
-                    },
-                    {
-                      kind: "token-plan",
-                      label: "套餐 Token Plan",
-                      sub: "tp- 开头",
-                    },
-                  ] as const
-                ).map((t) => {
-                  const active = keyType === t.kind;
-                  return (
-                    <button
-                      key={t.kind}
-                      type="button"
-                      onClick={() => setKeyType(t.kind)}
-                      className={
-                        "flex flex-col gap-0.5 rounded-sm border px-3 py-2.5 text-left transition-all " +
-                        (active
-                          ? "border-ember-500 bg-ember-500/5 text-clay-900"
-                          : "border-clay-900/12 text-clay-600 hover:border-clay-900/35 hover:bg-cream-100")
-                      }
-                    >
-                      <span className="text-[13px]">{t.label}</span>
-                      <span className="text-[10px] text-clay-400">
-                        {t.sub}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-
-            {keyType === "token-plan" && (
-              <div className="flex flex-col gap-2">
-                <span className="text-[10px] smallcaps text-clay-500">
-                  区 域 节 点
-                </span>
-                <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
-                  {TTS_REGION_PRESETS.map((p) => {
-                    const active = p.id === regionId;
-                    return (
-                      <button
-                        key={p.id}
-                        type="button"
-                        onClick={() => setRegionId(p.id)}
-                        className={
-                          "rounded-sm border px-3 py-2.5 text-left text-[13px] transition-all " +
-                          (active
-                            ? "border-ember-500 bg-ember-500/5 text-clay-900"
-                            : "border-clay-900/12 text-clay-600 hover:border-clay-900/35 hover:bg-cream-100")
-                        }
-                      >
-                        {p.label}
-                      </button>
-                    );
-                  })}
-                </div>
-                <span className="text-[11px] text-clay-400">
-                  选择与你的套餐订阅地区一致的节点（通常也是延迟最低的那个）。
-                </span>
-              </div>
-            )}
-
-            <div className="flex flex-col gap-2">
-              <span className="text-[10px] smallcaps text-clay-500">
-                A P I · K e y
-              </span>
-              <div className="relative">
-                <input
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  type={showKey ? "text" : "password"}
-                  autoComplete="off"
-                  spellCheck={false}
-                  placeholder={
-                    keyType === "payg"
-                      ? "粘贴 sk- 开头的按量 Key"
-                      : "粘贴 tp- 开头的套餐 Key"
-                  }
-                  className="h-11 w-full rounded-sm border border-clay-900/15 bg-cream-100 pl-4 pr-11 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowKey((v) => !v)}
-                  aria-label={showKey ? "隐藏" : "显示"}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-clay-400 hover:text-clay-700 transition-colors"
-                >
-                  <i
-                    className={`fa-solid ${showKey ? "fa-eye-slash" : "fa-eye"} text-sm`}
-                  />
-                </button>
-              </div>
-              {prefixMismatch && (
-                <span className="flex items-start gap-1.5 text-[11px] leading-relaxed text-ember-500">
-                  <i className="fa-solid fa-triangle-exclamation mt-0.5 text-[10px]" />
-                  此 Key 不是 {expectedPrefix} 开头，可能与所选「
-                  {keyType === "payg"
-                    ? "按量付费 Pay-as-you-go"
-                    : "套餐 Token Plan"}
-                  」类型不符，请确认是否填错。
-                </span>
-              )}
-              <a
-                href={TTS_KEY_DOC_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-[11px] text-ember-500 hover:text-ember-400 transition-colors"
-              >
-                <i className="fa-brands fa-github text-[11px]" />
-                如何免费申请 Key？查看图文教程
-              </a>
-            </div>
-
-            {footerNote && (
+          {footerNote && (
+            <div className="px-6 md:px-8 pb-5">
              <p className="text-[11px] leading-relaxed text-clay-400">
                {footerNote}
              </p>
-            )}
-          </div>
+            </div>
+          )}
        </div>

        {/* Footer */}