From dc36b1fe9e6efc3d1740ab6e5d11be3229102e7e Mon Sep 17 00:00:00 2001 From: yuanzonghao Date: Sun, 7 Jun 2026 14:15:22 +0800 Subject: [PATCH 1/2] feat(play): integrate vision click with unified settings modal Merge vision-click toggle into the shared SettingsModal alongside player name and TTS key configuration. Remove standalone TtsKeyModal. Add settings gear button to PlayCanvas dialogue card and header. Fix fullscreen settings modal not rendering in immersive mode. Voice toggle uses standard CategorySelect dropdown matching other tab bar options. Co-Authored-By: Claude Opus 4.6 --- app/page.tsx | 56 +++--- app/play/page.tsx | 49 +++--- components/PlayCanvas.tsx | 59 ++++--- components/SettingsModal.tsx | 331 ++++++++++++++++++----------------- components/TtsKeyModal.tsx | 271 ---------------------------- 5 files changed, 266 insertions(+), 500 deletions(-) delete mode 100644 components/TtsKeyModal.tsx diff --git a/app/page.tsx b/app/page.tsx index 5d44036..99be34f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,7 +11,7 @@ import { type Gender, } from "@/lib/options"; import { readStoredTtsConfig } from "@/lib/clientTtsConfig"; -import { SettingsModal, readStoredPlayerName } from "@/components/SettingsModal"; +import { SettingsModal, readStoredPlayerName, readStoredVisionClick } from "@/components/SettingsModal"; /* ============================================================================ InfiPlot · 首页（编辑式视觉风格 · 居中构图，呼应低保真原型） @@ -47,6 +47,7 @@ const OPTS: Opt[] = [ { label: "性向", items: [...GENDERS] }, { label: "绘画风格", modal: true, items: [...ART_STYLES] }, { label: "剧情风格", items: [...PLOT_STYLES], defaultIndex: 1 }, + { label: "语音配音", items: ["关闭", "开启"], defaultIndex: 1 }, { label: "内容节奏", items: [...PACINGS], defaultIndex: 1 }, ]; @@ -1252,13 +1253,14 @@ export default function HomePage() { // 顶部使用提示：默认展示，用户可点 × 永久关闭（localStorage:infiplot:hintClosed）。 const [hintClosed, setHintClosed] = useState(false); - // 统一设置弹窗（名字 + 配音 + TTS Key）：可选增强，数据只存浏览器。 + // 统一设置弹窗（名字 + 识图 + TTS Key）：可选增强，数据只存浏览器。 const [settingsOpen, setSettingsOpen] = useState(false); const [ttsConfigured, setTtsConfigured] = useState(false); const [playerName, setPlayerName] = useState(""); - const [audioEnabled, setAudioEnabled] = useState(true); + const [visionClickEnabled, setVisionClickEnabled] = useState(true); const styleRow = OPTS.findIndex((o) => o.modal); + const voiceRow = OPTS.findIndex((o) => o.label === "语音配音"); const genderIndex = sel[0] ?? 0; const gender = (OPTS[0]!.items[genderIndex] as Gender) ?? "男性向"; const phrases = EXAMPLE_PHRASES[gender]; @@ -1300,14 +1302,11 @@ export default function HomePage() { } }, []); - // 启动时回填配置状态——读 localStorage 判断用户是否已存过 Key / 名字 / 配音偏好。 + // 启动时回填配置状态——读 localStorage 判断用户是否已存过 Key / 名字。 useEffect(() => { setTtsConfigured(readStoredTtsConfig() != null); setPlayerName(readStoredPlayerName()); - try { - const stored = localStorage.getItem("infiplot:muted"); - if (stored === "1") setAudioEnabled(false); - } catch { /* ignore */ } + setVisionClickEnabled(readStoredVisionClick()); }, []); // 输入框随内容自动增高：长文本整段可见（打字与点卡片填入都覆盖）。 @@ -1334,7 +1333,9 @@ export default function HomePage() { prompt.trim() || (phrases[phraseIdx] ?? "").trim(); const artStyle = ART_STYLES[sel[1] ?? 0] ?? "自动"; const plotStyle = PLOT_STYLES[sel[2] ?? 1] ?? "多线转折"; - const pace = PACINGS[sel[3] ?? 1] ?? "紧凑爽快"; + const voice = OPTS[voiceRow]!.items[sel[voiceRow] ?? 1]!; + const audioEnabled = voice === "开启"; + const pace = PACINGS[sel[4] ?? 1] ?? "紧凑爽快"; // worldSetting 顺序很重要：玩家输入若存在，必须放在最前面、单独成段、 // 用强指令包住，否则模型会把它当成夹在风格说明里的背景参考、扩写出 @@ -1407,6 +1408,8 @@ export default function HomePage() { // 其余选项（剧情风格 / 内容节奏）在预烘焙时已锁成「多线转折 / 紧凑爽快」 // 的红果默认基调，对精选卡不再生效。 const onCardClick = (idx: number, _card: StoryContent) => { + const voice = OPTS[voiceRow]!.items[sel[voiceRow] ?? 1]!; + const audioEnabled = voice === "开启"; sessionStorage.setItem( "infiplot:custom", JSON.stringify({ worldSetting: "", styleGuide: "", audioEnabled, playerName }), @@ -1428,6 +1431,15 @@ export default function HomePage() { InfiPlot
+
))} - {/* 设置入口：与 CategorySelect 视觉一致，点击打开 modal */} -
- -
{/* 使用提示：可被用户永久关闭（localStorage:infiplot:hintClosed） */} @@ -1714,12 +1709,17 @@ export default function HomePage() { )} {settingsOpen && ( setSettingsOpen(false)} onSaved={(settings) => { setTtsConfigured(settings.ttsConfigured); setPlayerName(settings.playerName); - setAudioEnabled(settings.audioEnabled); + setVisionClickEnabled(settings.visionClickEnabled); + if (settings.ttsConfigured && voiceRow >= 0) { + const onIdx = OPTS[voiceRow]!.items.indexOf("开启"); + if (onIdx >= 0) + setSel((s) => s.map((v, j) => (j === voiceRow ? onIdx : v))); + } }} /> )} diff --git a/app/play/page.tsx b/app/play/page.tsx index 0f2a5e0..739a8b4 100644 --- a/app/play/page.tsx +++ b/app/play/page.tsx @@ -17,8 +17,7 @@ import { } from "@/components/PlayCanvas"; import type { DialogueHistoryItem } from "@/components/DialogueHistoryModal"; import type { GalleryDoc, GalleryScene } from "@/app/gallery/page"; -import { TtsKeyModal } from "@/components/TtsKeyModal"; -import { readStoredPlayerName } from "@/components/SettingsModal"; +import { SettingsModal, readStoredPlayerName, readStoredVisionClick } from "@/components/SettingsModal"; import { annotateClick } from "@/lib/annotateClient"; import { loadClientTtsConfig } from "@/lib/clientTtsConfig"; import { PRESETS } from "@/lib/presets"; @@ -580,9 +579,11 @@ function PlayInner() { const [silenceStrikes, setSilenceStrikes] = useState(0); // Once the player dismisses the silence nudge, keep it gone for this session. const [nudgeDismissed, setNudgeDismissed] = useState(false); - // The in-place BYO-key modal, opened from the silence nudge so the player can - // add a key without leaving the play page. - const [ttsModalOpen, setTtsModalOpen] = useState(false); + const [settingsOpen, setSettingsOpen] = useState(false); + const [visionClickEnabled, setVisionClickEnabled] = useState(() => { + if (typeof window === "undefined") return true; + return readStoredVisionClick(); + }); const startedRef = useRef(false); const poolRef = useRef>(new Map()); @@ -852,15 +853,10 @@ function PlayInner() { prefetchSceneAudio(); }, [muted, prefetchSceneAudio]); - // ── BYO key enabled/disabled from the play page (silence nudge → modal) ─ - // On enable: point the synth path at the user's key and immediately - // re-synthesize the current scene in-browser, so the voices the player just - // missed come back without a reload (their characters already carry - // server-provisioned `voice`, which resolveByoVoice reuses with the new key). - // On disable: just stop using it; later scenes fall back to the server. - const handleByoSaved = useCallback( - (configured: boolean) => { - const cfg = configured ? loadClientTtsConfig() : null; + const handleSettingsSaved = useCallback( + (settings: { ttsConfigured: boolean; playerName: string; visionClickEnabled: boolean }) => { + setVisionClickEnabled(settings.visionClickEnabled); + const cfg = settings.ttsConfigured ? loadClientTtsConfig() : null; byoTtsRef.current = cfg; setByoTtsConfig(cfg); if (cfg) { @@ -1761,6 +1757,8 @@ function PlayInner() { onFreeformInput={onFreeformInput} orientation={orientation} playerName={session?.playerName} + visionClickEnabled={visionClickEnabled} + onOpenSettings={() => setSettingsOpen(true)} fullViewport dialogueHistory={dialogueHistory} /> @@ -1788,6 +1786,14 @@ function PlayInner() { )} + {settingsOpen && ( + setSettingsOpen(false)} + onSaved={handleSettingsSaved} + footerNote="保存后配音 Key 会立即生效，用你自己的额度合成当前这一幕的配音。" + /> + )} ); } @@ -1838,6 +1844,8 @@ function PlayInner() { onFreeformInput={onFreeformInput} orientation={orientation} playerName={session?.playerName} + visionClickEnabled={visionClickEnabled} + onOpenSettings={() => setSettingsOpen(true)} dialogueHistory={dialogueHistory} aboveCanvas={ + )} + - ); - })} - - + {/* ── TTS Key Section ── */} +
+
+ + + + + 自带配音 Key + + 可选 +
+

+ 填入你自己的 + 小米 MiMo API Key + ，配音将在浏览器本地合成，Key 只保存在本地、绝不经过服务器。MiMo + TTS 目前 + 限时免费 + ，申请即可使用。 +

- {keyType === "token-plan" && ( -
- - 区 域 节 点 - -
- {TTS_REGION_PRESETS.map((p) => { - const active = p.id === regionId; - return ( - - ); - })} -
- - 选择与你的套餐订阅地区一致的节点（通常也是延迟最低的那个）。 - -
- )} - -
- - A P I · K e y - -
- 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-50 pl-4 pr-11 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400" - /> +
+ + K e y · 类 型 + +
+ {( + [ + { + 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 ( -
- {prefixMismatch && ( - - - 此 Key 不是 {expectedPrefix} 开头，可能与所选「 - {keyType === "payg" - ? "按量付费 Pay-as-you-go" - : "套餐 Token Plan"} - 」类型不符，请确认是否填错。 - - )} - - - 如何免费申请 Key？查看图文教程 - -
- - {footerNote && ( -

- {footerNote} -

- )} + ); + })}
+
+ + {keyType === "token-plan" && ( +
+ + 区 域 节 点 + +
+ {TTS_REGION_PRESETS.map((p) => { + const active = p.id === regionId; + return ( + + ); + })} +
+ + 选择与你的套餐订阅地区一致的节点（通常也是延迟最低的那个）。 + +
+ )} + +
+ + A P I · K e y + +
+ 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" + /> + +
+ {prefixMismatch && ( + + + 此 Key 不是 {expectedPrefix} 开头，可能与所选「 + {keyType === "payg" + ? "按量付费 Pay-as-you-go" + : "套餐 Token Plan"} + 」类型不符，请确认是否填错。 + + )} + + + 如何免费申请 Key？查看图文教程 + +
+ + {footerNote && ( +

+ {footerNote} +

)}
diff --git a/components/TtsKeyModal.tsx b/components/TtsKeyModal.tsx deleted file mode 100644 index 1713d15..0000000 --- a/components/TtsKeyModal.tsx +++ /dev/null @@ -1,271 +0,0 @@ -"use client"; - -// Bring-your-own Xiaomi MiMo TTS key modal — shared by the homepage and the -// play page. Two-step picker (key family → region for Token Plan only), key -// stored CLIENT-SIDE ONLY (see lib/clientTtsConfig). `onSaved(configured)` -// fires after a save/disable so each host can react (homepage flips the -// 语音配音 toggle; the play page re-synthesizes the current scene in-browser). -// `footerNote` lets the host tailor the closing hint to its own context. - -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 DEFAULT_FOOTER_NOTE: ReactNode = - "提示：需将上方「语音配音」设为「开启」配音才会生效。保存后本设备后续游玩会自动使用此 Key。"; - -export function TtsKeyModal({ - onClose, - onSaved, - footerNote = DEFAULT_FOOTER_NOTE, -}: { - onClose: () => void; - onSaved: (configured: boolean) => void; - footerNote?: ReactNode; -}) { - // Read storage once; useState initializers ignore later renders, so local - // edits aren't clobbered and we don't re-hit localStorage every render. - const [initial] = useState(() => readStoredTtsConfig()); - // Two-step picker: choose key family first, then — only for Token Plan — a - // region. Pay-as-you-go (`sk-`) keys hit one fixed endpoint, so no region. - const initialKind = findTtsPreset(initial?.presetId)?.kind ?? "token-plan"; - const [keyType, setKeyType] = useState<"token-plan" | "payg">(initialKind); - const [regionId, setRegionId] = useState( - initialKind === "token-plan" - ? (initial?.presetId ?? TTS_REGION_PRESETS[0]!.id) - : TTS_REGION_PRESETS[0]!.id, - ); - const [apiKey, setApiKey] = useState(initial?.apiKey ?? ""); - const [showKey, setShowKey] = useState(false); - const [shown, setShown] = useState(false); - const alreadyConfigured = initial != null; - // Soft guard: tp- keys belong to Token Plan, sk- to pay-as-you-go. A - // mismatched pairing hits the wrong endpoint → guaranteed auth failure → - // silent playback (the very symptom BYO exists to kill). Warn, but never - // block: prefix conventions could change and a hard gate would lock out an - // otherwise-valid key. - 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); - }, []); - - const close = () => { - setShown(false); - setTimeout(onClose, 280); - }; - const save = () => { - const key = apiKey.trim(); - if (!key) return; - const presetId = keyType === "payg" ? PAYG_PRESET_ID : regionId; - writeStoredTtsConfig({ presetId, apiKey: key }); - onSaved(true); - close(); - }; - const disable = () => { - clearStoredTtsConfig(); - onSaved(false); - close(); - }; - - return ( -
-
e.stopPropagation()} - className={ - "flex w-[560px] max-w-[94vw] max-h-[88vh] flex-col overflow-hidden rounded-sm border border-clay-900/15 bg-cream-50 shadow-2xl shadow-clay-900/25 transition-all duration-300 " + - (shown ? "opacity-100 scale-100" : "opacity-0 scale-95") - } - > -
-
- - 自带配音 Key - - - 可选 · 用你自己的小米 MiMo 免费额度，配音更稳定、延迟更低 - -
- -
- -
-

- 经常没有声音？公共语音模型有调用频率限额（RPM / TPM），同时游玩的人多时很容易撞到限额而静音。填入你自己的小米 MiMo API Key 后，配音将 - 直接在你的浏览器里合成 - 、使用你自己的免费额度 ——{" "} - Key 只保存在本地浏览器、绝不经过我们的服务器 - 。 -

- -
- K e y · 类 型 -
- {( - [ - { kind: "token-plan", label: "套餐 Token Plan", sub: "tp- 开头" }, - { kind: "payg", label: "按量付费 Pay-as-you-go", sub: "sk- 开头" }, - ] as const - ).map((t) => { - const active = keyType === t.kind; - return ( - - ); - })} -
-
- - {keyType === "token-plan" ? ( -
- 区 域 节 点 -
- {TTS_REGION_PRESETS.map((p) => { - const active = p.id === regionId; - return ( - - ); - })} -
- - 选择与你的套餐订阅地区一致的节点（通常也是延迟最低的那个）。 - -
- ) : ( -
- - - 按量付费使用统一端点{" "} - api.xiaomimimo.com - ，无需选择区域。 - -
- )} - -
- - A P I · K e y - -
- 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" - /> - -
- {prefixMismatch && ( - - - 此 Key 不是 {expectedPrefix} 开头，可能与所选「 - {keyType === "payg" ? "按量付费 Pay-as-you-go" : "套餐 Token Plan"} - 」类型不符，请确认是否填错。 - - )} - - - 如何免费申请 Key？查看图文教程 - -
- -

{footerNote}

-
- -
- {alreadyConfigured && ( - - )} - -
-
-
- ); -} From 69ae1380cbe6173daac7fc983b309d6d62440216 Mon Sep 17 00:00:00 2001 From: yuanzonghao Date: Sun, 7 Jun 2026 14:23:44 +0800 Subject: [PATCH 2/2] fix(play): resolve hydration mismatch and fragile pace index Co-Authored-By: Claude Opus 4.6 --- app/page.tsx | 3 ++- app/play/page.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 99be34f..729fbdc 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1261,6 +1261,7 @@ export default function HomePage() { const styleRow = OPTS.findIndex((o) => o.modal); const voiceRow = OPTS.findIndex((o) => o.label === "语音配音"); + const paceRow = OPTS.findIndex((o) => o.label === "内容节奏"); const genderIndex = sel[0] ?? 0; const gender = (OPTS[0]!.items[genderIndex] as Gender) ?? "男性向"; const phrases = EXAMPLE_PHRASES[gender]; @@ -1335,7 +1336,7 @@ export default function HomePage() { const plotStyle = PLOT_STYLES[sel[2] ?? 1] ?? "多线转折"; const voice = OPTS[voiceRow]!.items[sel[voiceRow] ?? 1]!; const audioEnabled = voice === "开启"; - const pace = PACINGS[sel[4] ?? 1] ?? "紧凑爽快"; + const pace = PACINGS[sel[paceRow] ?? 1] ?? "紧凑爽快"; // worldSetting 顺序很重要：玩家输入若存在，必须放在最前面、单独成段、 // 用强指令包住，否则模型会把它当成夹在风格说明里的背景参考、扩写出 diff --git a/app/play/page.tsx b/app/play/page.tsx index 739a8b4..66a8a48 100644 --- a/app/play/page.tsx +++ b/app/play/page.tsx @@ -580,10 +580,7 @@ function PlayInner() { // Once the player dismisses the silence nudge, keep it gone for this session. const [nudgeDismissed, setNudgeDismissed] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); - const [visionClickEnabled, setVisionClickEnabled] = useState(() => { - if (typeof window === "undefined") return true; - return readStoredVisionClick(); - }); + const [visionClickEnabled, setVisionClickEnabled] = useState(true); const startedRef = useRef(false); const poolRef = useRef>(new Map()); @@ -653,6 +650,9 @@ function PlayInner() { useEffect(() => { mutedRef.current = muted; }, [muted]); + useEffect(() => { + setVisionClickEnabled(readStoredVisionClick()); + }, []); // Coarse liveness ping for active-time analytics. /play is a single SPA // route, so page views alone read as ~0 duration; a 30s heartbeat (only