feat(web): merge SettingsModal and ModelSettingsModal with tab navigation
Signed-off-by: baizhi958216 <1475289190@qq.com>
This commit is contained in:
baizhi958216
@@ -88,6 +88,30 @@
|
|||||||
.vn-scrollbar::-webkit-scrollbar-corner {
|
.vn-scrollbar::-webkit-scrollbar-corner {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 极细滚动条 · 无轨道背景 */
|
||||||
|
.thin-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(195, 155, 75, 0.5) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(195, 155, 75, 0.45);
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(220, 180, 95, 0.7);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes infiplot-ripple {
|
@keyframes infiplot-ripple {
|
||||||
|
|||||||
+8
-22
@@ -12,7 +12,6 @@ import {
|
|||||||
} from "@/lib/options";
|
} from "@/lib/options";
|
||||||
import { readStoredTtsConfig } from "@/lib/clientTtsConfig";
|
import { readStoredTtsConfig } from "@/lib/clientTtsConfig";
|
||||||
import { SettingsModal, readStoredPlayerName, readStoredVisionClick } from "@/components/SettingsModal";
|
import { SettingsModal, readStoredPlayerName, readStoredVisionClick } from "@/components/SettingsModal";
|
||||||
import { ModelSettingsModal } from "@/components/ModelSettingsModal";
|
|
||||||
import { analyzeImageDataUrl } from "@infiplot/ai-client";
|
import { analyzeImageDataUrl } from "@infiplot/ai-client";
|
||||||
import { readStoredModelConfig, resolveEngineConfig } from "@/lib/clientModelConfig";
|
import { readStoredModelConfig, resolveEngineConfig } from "@/lib/clientModelConfig";
|
||||||
import { STYLE_EXTRACTION_PROMPT } from "@/lib/styleExtraction";
|
import { STYLE_EXTRACTION_PROMPT } from "@/lib/styleExtraction";
|
||||||
@@ -1264,9 +1263,9 @@ export default function HomePage() {
|
|||||||
// 顶部使用提示：默认展示，用户可点 × 永久关闭（localStorage:infiplot:hintClosed）。
|
// 顶部使用提示：默认展示，用户可点 × 永久关闭（localStorage:infiplot:hintClosed）。
|
||||||
const [hintClosed, setHintClosed] = useState(false);
|
const [hintClosed, setHintClosed] = useState(false);
|
||||||
|
|
||||||
// 统一设置弹窗（名字 + 识图 + TTS Key）：可选增强，数据只存浏览器。
|
// 统一设置弹窗（通用 + 模型）：可选增强，数据只存浏览器。
|
||||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
const [modelSettingsOpen, setModelSettingsOpen] = useState(false);
|
const [settingsTab, setSettingsTab] = useState<"general" | "models">("general");
|
||||||
const [ttsConfigured, setTtsConfigured] = useState(false);
|
const [ttsConfigured, setTtsConfigured] = useState(false);
|
||||||
const [playerName, setPlayerName] = useState("");
|
const [playerName, setPlayerName] = useState("");
|
||||||
const [visionClickEnabled, setVisionClickEnabled] = useState(true);
|
const [visionClickEnabled, setVisionClickEnabled] = useState(true);
|
||||||
@@ -1486,16 +1485,10 @@ export default function HomePage() {
|
|||||||
<div className="flex items-center gap-5">
|
<div className="flex items-center gap-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setModelSettingsOpen(true)}
|
onClick={() => {
|
||||||
aria-label="模型设置"
|
setSettingsTab("general");
|
||||||
title="模型设置"
|
setSettingsOpen(true);
|
||||||
className="text-base text-clay-500 hover:text-ember-500 transition-colors"
|
}}
|
||||||
>
|
|
||||||
<i className="fa-solid fa-sliders" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSettingsOpen(true)}
|
|
||||||
aria-label="设置"
|
aria-label="设置"
|
||||||
title="设置"
|
title="设置"
|
||||||
className="text-base text-clay-500 hover:text-ember-500 transition-colors"
|
className="text-base text-clay-500 hover:text-ember-500 transition-colors"
|
||||||
@@ -1632,7 +1625,7 @@ export default function HomePage() {
|
|||||||
<p className="font-serif text-[13px] md:text-sm leading-relaxed text-clay-500">
|
<p className="font-serif text-[13px] md:text-sm leading-relaxed text-clay-500">
|
||||||
输入你的想象、配置风格，点击「开始」即可游玩；也可以从下方的精选故事集，挑一篇快速体验{" "}
|
输入你的想象、配置风格，点击「开始」即可游玩；也可以从下方的精选故事集，挑一篇快速体验{" "}
|
||||||
<em className="not-italic text-ember-500">InfiPlot</em>。
|
<em className="not-italic text-ember-500">InfiPlot</em>。
|
||||||
点击「<span className="text-ember-500">设置</span>」可以配置你的名字和配音
|
点击「<span className="inline-flex items-center gap-1 text-ember-500"><i className="fa-solid fa-gear text-[10px]" />设置</span>」可以配置你的名字和配音
|
||||||
API Key，让角色以你的名字称呼你，配音体验也更稳定。
|
API Key，让角色以你的名字称呼你，配音体验也更稳定。
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
@@ -1793,25 +1786,18 @@ export default function HomePage() {
|
|||||||
)}
|
)}
|
||||||
{settingsOpen && (
|
{settingsOpen && (
|
||||||
<SettingsModal
|
<SettingsModal
|
||||||
|
initialTab={settingsTab}
|
||||||
initialVisionClickEnabled={visionClickEnabled}
|
initialVisionClickEnabled={visionClickEnabled}
|
||||||
onClose={() => setSettingsOpen(false)}
|
onClose={() => setSettingsOpen(false)}
|
||||||
onSaved={(settings) => {
|
onSaved={(settings) => {
|
||||||
setPlayerName(settings.playerName);
|
setPlayerName(settings.playerName);
|
||||||
setVisionClickEnabled(settings.visionClickEnabled);
|
setVisionClickEnabled(settings.visionClickEnabled);
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{modelSettingsOpen && (
|
|
||||||
<ModelSettingsModal
|
|
||||||
onClose={() => setModelSettingsOpen(false)}
|
|
||||||
onSaved={(settings) => {
|
|
||||||
setTtsConfigured(settings.ttsConfigured);
|
setTtsConfigured(settings.ttsConfigured);
|
||||||
if (settings.ttsConfigured && voiceRow >= 0) {
|
if (settings.ttsConfigured && voiceRow >= 0) {
|
||||||
const onIdx = OPTS[voiceRow]!.items.indexOf("开启");
|
const onIdx = OPTS[voiceRow]!.items.indexOf("开启");
|
||||||
if (onIdx >= 0)
|
if (onIdx >= 0)
|
||||||
setSel((s) => s.map((v, j) => (j === voiceRow ? onIdx : v)));
|
setSel((s) => s.map((v, j) => (j === voiceRow ? onIdx : v)));
|
||||||
}
|
}
|
||||||
setModelSettingsOpen(false);
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
+1
-1
@@ -803,7 +803,7 @@ function PlayInner() {
|
|||||||
}, [muted, prefetchSceneAudio]);
|
}, [muted, prefetchSceneAudio]);
|
||||||
|
|
||||||
const handleSettingsSaved = useCallback(
|
const handleSettingsSaved = useCallback(
|
||||||
(settings: { playerName: string; visionClickEnabled: boolean }) => {
|
(settings: { playerName: string; visionClickEnabled: boolean; ttsConfigured: boolean }) => {
|
||||||
setVisionClickEnabled(settings.visionClickEnabled);
|
setVisionClickEnabled(settings.visionClickEnabled);
|
||||||
const nextPlayerName = settings.playerName || undefined;
|
const nextPlayerName = settings.playerName || undefined;
|
||||||
setSession((prev) => prev ? { ...prev, playerName: nextPlayerName } : prev);
|
setSession((prev) => prev ? { ...prev, playerName: nextPlayerName } : prev);
|
||||||
|
|||||||
@@ -1,493 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import type { ProviderProtocol } from "@infiplot/types";
|
|
||||||
import {
|
|
||||||
clearStoredModelConfig,
|
|
||||||
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: "自动推断（推荐）" },
|
|
||||||
{ value: "openai_compatible", label: "OpenAI Compatible" },
|
|
||||||
{ value: "openai", label: "OpenAI (Native)" },
|
|
||||||
{ value: "anthropic", label: "Anthropic" },
|
|
||||||
{ value: "google", label: "Google Gemini" },
|
|
||||||
{ value: "runware", label: "Runware" },
|
|
||||||
];
|
|
||||||
|
|
||||||
type ModelGroup = {
|
|
||||||
key: "text" | "image" | "vision";
|
|
||||||
label: string;
|
|
||||||
icon: string;
|
|
||||||
baseUrl: string;
|
|
||||||
apiKey: string;
|
|
||||||
model: string;
|
|
||||||
provider: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ModelSettingsModal({
|
|
||||||
onClose,
|
|
||||||
onSaved,
|
|
||||||
}: {
|
|
||||||
onClose: () => void;
|
|
||||||
onSaved: (settings: { ttsConfigured: boolean }) => void;
|
|
||||||
}) {
|
|
||||||
const initial = readStoredModelConfig();
|
|
||||||
|
|
||||||
const [groups, setGroups] = useState<ModelGroup[]>([
|
|
||||||
{
|
|
||||||
key: "text",
|
|
||||||
label: "文本模型",
|
|
||||||
icon: "fa-solid fa-pen-nib",
|
|
||||||
baseUrl: initial?.textBaseUrl ?? "",
|
|
||||||
apiKey: initial?.textApiKey ?? "",
|
|
||||||
model: initial?.textModel ?? "",
|
|
||||||
provider: initial?.textProvider ?? "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "image",
|
|
||||||
label: "绘图模型",
|
|
||||||
icon: "fa-solid fa-palette",
|
|
||||||
baseUrl: initial?.imageBaseUrl ?? "",
|
|
||||||
apiKey: initial?.imageApiKey ?? "",
|
|
||||||
model: initial?.imageModel ?? "",
|
|
||||||
provider: initial?.imageProvider ?? "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "vision",
|
|
||||||
label: "识图模型",
|
|
||||||
icon: "fa-solid fa-eye",
|
|
||||||
baseUrl: initial?.visionBaseUrl ?? "",
|
|
||||||
apiKey: initial?.visionApiKey ?? "",
|
|
||||||
model: initial?.visionModel ?? "",
|
|
||||||
provider: initial?.visionProvider ?? "",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
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);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handler = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === "Escape") close();
|
|
||||||
};
|
|
||||||
window.addEventListener("keydown", handler);
|
|
||||||
return () => window.removeEventListener("keydown", handler);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
setShown(false);
|
|
||||||
setTimeout(onClose, 280);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateGroup = (
|
|
||||||
key: string,
|
|
||||||
field: keyof Omit<ModelGroup, "key" | "label" | "icon">,
|
|
||||||
value: string,
|
|
||||||
) => {
|
|
||||||
setGroups((prev) =>
|
|
||||||
prev.map((g) => (g.key === key ? { ...g, [field]: value } : g)),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
const [text, image, vision] = groups;
|
|
||||||
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();
|
|
||||||
clearStoredTtsConfig();
|
|
||||||
setGroups((prev) =>
|
|
||||||
prev.map((g) => ({ ...g, baseUrl: "", apiKey: "", model: "", provider: "" })),
|
|
||||||
);
|
|
||||||
setTtsApiKey("");
|
|
||||||
onSaved({ ttsConfigured: false });
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
|
|
||||||
const hasAnySetting =
|
|
||||||
groups.some((g) => g.baseUrl.trim() && g.apiKey.trim() && g.model.trim()) ||
|
|
||||||
initialTts != null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onMouseDown={close}
|
|
||||||
className={
|
|
||||||
"fixed inset-0 z-[60] flex items-center justify-center p-6 md:p-10 transition-all duration-300 " +
|
|
||||||
(shown
|
|
||||||
? "bg-clay-900/30 backdrop-blur-md"
|
|
||||||
: "bg-clay-900/0 backdrop-blur-0")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
|
||||||
className={
|
|
||||||
"flex w-[600px] max-w-[96vw] max-h-[90vh] 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")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center gap-5 px-6 md:px-8 py-5 border-b border-clay-900/10">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="font-serif text-xl md:text-2xl text-clay-900">
|
|
||||||
模型设置
|
|
||||||
</span>
|
|
||||||
<span className="text-[11px] text-clay-500 mt-1 tracking-wide">
|
|
||||||
API Key 仅保存在浏览器本地，不会发送到服务器
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={close}
|
|
||||||
aria-label="关闭"
|
|
||||||
className="ml-auto text-xl leading-none text-clay-500 hover:text-clay-900 transition-colors"
|
|
||||||
>
|
|
||||||
<i className="fa-solid fa-xmark" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-0 overflow-y-auto">
|
|
||||||
{groups.map((g, idx) => (
|
|
||||||
<div key={g.key}>
|
|
||||||
{idx > 0 && (
|
|
||||||
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
|
|
||||||
)}
|
|
||||||
<div className="flex flex-col gap-3 px-6 md:px-8 py-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={`${g.icon} text-[11px]`} />
|
|
||||||
</span>
|
|
||||||
<span className="font-serif text-base text-clay-900">
|
|
||||||
{g.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<span className="text-[10px] smallcaps text-clay-500">
|
|
||||||
B A S E · U R L
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
value={g.baseUrl}
|
|
||||||
onChange={(e) => updateGroup(g.key, "baseUrl", e.target.value)}
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
spellCheck={false}
|
|
||||||
placeholder="https://api.example.com/v1"
|
|
||||||
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
|
||||||
/>
|
|
||||||
</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={g.apiKey}
|
|
||||||
onChange={(e) => updateGroup(g.key, "apiKey", e.target.value)}
|
|
||||||
type={showKeys[g.key] ? "text" : "password"}
|
|
||||||
autoComplete="off"
|
|
||||||
spellCheck={false}
|
|
||||||
placeholder="sk-..."
|
|
||||||
className="h-10 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={() =>
|
|
||||||
setShowKeys((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[g.key]: !prev[g.key],
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
aria-label={showKeys[g.key] ? "隐藏" : "显示"}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-clay-400 hover:text-clay-700 transition-colors"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
className={`fa-solid ${showKeys[g.key] ? "fa-eye-slash" : "fa-eye"} text-sm`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<span className="text-[10px] smallcaps text-clay-500">
|
|
||||||
M o d e l
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
value={g.model}
|
|
||||||
onChange={(e) => updateGroup(g.key, "model", e.target.value)}
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
spellCheck={false}
|
|
||||||
placeholder="gpt-4o / claude-3-5-sonnet / flux-1-dev ..."
|
|
||||||
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<span className="text-[10px] smallcaps text-clay-500">
|
|
||||||
P r o v i d e r（可选）
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
value={g.provider}
|
|
||||||
onChange={(e) => updateGroup(g.key, "provider", e.target.value)}
|
|
||||||
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500"
|
|
||||||
>
|
|
||||||
{PROVIDER_OPTIONS.map((opt) => (
|
|
||||||
<option key={opt.value || "auto"} value={opt.value}>
|
|
||||||
{opt.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<span className="text-[11px] text-clay-400">
|
|
||||||
留空时系统会根据 Base URL 自动推断协议。
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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={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" />
|
|
||||||
请确保你的 API 端点支持浏览器跨域请求（CORS）。大多数主流提供商（OpenAI、Anthropic、Gemini、Runware 等）已默认支持。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center gap-3 border-t border-clay-900/10 px-6 md:px-8 py-4">
|
|
||||||
{hasAnySetting && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={clearAll}
|
|
||||||
className="inline-flex items-center gap-2 rounded-sm border border-clay-900/15 px-4 py-2 font-sans text-sm text-clay-600 transition-colors hover:border-clay-900/35 hover:text-clay-900"
|
|
||||||
>
|
|
||||||
<i className="fa-solid fa-rotate-left text-xs" />
|
|
||||||
全部清除
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={save}
|
|
||||||
className="ml-auto inline-flex items-center gap-2 rounded-sm bg-clay-900 px-5 py-2.5 font-sans text-sm text-cream-50 transition-colors hover:bg-ember-500"
|
|
||||||
>
|
|
||||||
<i className="fa-solid fa-check text-xs" />
|
|
||||||
保存
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+549
-81
@@ -1,6 +1,23 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { type ReactNode, useEffect, useState } from "react";
|
import { type ReactNode, useEffect, useState } from "react";
|
||||||
|
import type { ProviderProtocol } from "@infiplot/types";
|
||||||
|
import {
|
||||||
|
clearStoredModelConfig,
|
||||||
|
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 PLAYER_NAME_STORAGE_KEY = "infiplot:playerName";
|
const PLAYER_NAME_STORAGE_KEY = "infiplot:playerName";
|
||||||
const VISION_CLICK_STORAGE_KEY = "infiplot:visionClick";
|
const VISION_CLICK_STORAGE_KEY = "infiplot:visionClick";
|
||||||
@@ -33,52 +50,216 @@ export function readStoredVisionClick(): boolean {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PROVIDER_OPTIONS: { value: ProviderProtocol | ""; label: string }[] = [
|
||||||
|
{ value: "", label: "自动推断（推荐）" },
|
||||||
|
{ value: "openai_compatible", label: "OpenAI Compatible" },
|
||||||
|
{ value: "openai", label: "OpenAI (Native)" },
|
||||||
|
{ value: "anthropic", label: "Anthropic" },
|
||||||
|
{ value: "google", label: "Google Gemini" },
|
||||||
|
{ value: "runware", label: "Runware" },
|
||||||
|
];
|
||||||
|
|
||||||
|
type ModelGroup = {
|
||||||
|
key: "text" | "image" | "vision";
|
||||||
|
label: string;
|
||||||
|
icon: string;
|
||||||
|
baseUrl: string;
|
||||||
|
apiKey: string;
|
||||||
|
model: string;
|
||||||
|
provider: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TabKey = "general" | "models";
|
||||||
|
|
||||||
export function SettingsModal({
|
export function SettingsModal({
|
||||||
|
initialTab = "general",
|
||||||
initialVisionClickEnabled = true,
|
initialVisionClickEnabled = true,
|
||||||
onClose,
|
onClose,
|
||||||
onSaved,
|
onSaved,
|
||||||
footerNote,
|
footerNote,
|
||||||
}: {
|
}: {
|
||||||
|
initialTab?: TabKey;
|
||||||
initialVisionClickEnabled?: boolean;
|
initialVisionClickEnabled?: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSaved: (settings: { playerName: string; visionClickEnabled: boolean }) => void;
|
onSaved: (settings: {
|
||||||
|
playerName: string;
|
||||||
|
visionClickEnabled: boolean;
|
||||||
|
ttsConfigured: boolean;
|
||||||
|
}) => void;
|
||||||
footerNote?: ReactNode;
|
footerNote?: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
|
const [activeTab, setActiveTab] = useState<TabKey>(initialTab);
|
||||||
|
|
||||||
|
// ── General tab state ──
|
||||||
const [playerName, setPlayerName] = useState(() => readStoredPlayerName());
|
const [playerName, setPlayerName] = useState(() => readStoredPlayerName());
|
||||||
const [visionClick, setVisionClick] = useState(initialVisionClickEnabled);
|
const [visionClick, setVisionClick] = useState(initialVisionClickEnabled);
|
||||||
|
|
||||||
const [shown, setShown] = useState(false);
|
// ── Models tab state ──
|
||||||
|
const initial = readStoredModelConfig();
|
||||||
|
const [groups, setGroups] = useState<ModelGroup[]>([
|
||||||
|
{
|
||||||
|
key: "text",
|
||||||
|
label: "文本模型",
|
||||||
|
icon: "fa-solid fa-pen-nib",
|
||||||
|
baseUrl: initial?.textBaseUrl ?? "",
|
||||||
|
apiKey: initial?.textApiKey ?? "",
|
||||||
|
model: initial?.textModel ?? "",
|
||||||
|
provider: initial?.textProvider ?? "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "image",
|
||||||
|
label: "绘图模型",
|
||||||
|
icon: "fa-solid fa-palette",
|
||||||
|
baseUrl: initial?.imageBaseUrl ?? "",
|
||||||
|
apiKey: initial?.imageApiKey ?? "",
|
||||||
|
model: initial?.imageModel ?? "",
|
||||||
|
provider: initial?.imageProvider ?? "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "vision",
|
||||||
|
label: "识图模型",
|
||||||
|
icon: "fa-solid fa-eye",
|
||||||
|
baseUrl: initial?.visionBaseUrl ?? "",
|
||||||
|
apiKey: initial?.visionApiKey ?? "",
|
||||||
|
model: initial?.visionModel ?? "",
|
||||||
|
provider: initial?.visionProvider ?? "",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const [showKeys, setShowKeys] = useState<Record<string, boolean>>({});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// ── Animation ──
|
||||||
|
const [shown, setShown] = useState(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const id = requestAnimationFrame(() => setShown(true));
|
const id = requestAnimationFrame(() => setShown(true));
|
||||||
return () => cancelAnimationFrame(id);
|
return () => cancelAnimationFrame(id);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "Escape") close();
|
||||||
|
};
|
||||||
|
window.addEventListener("keydown", handler);
|
||||||
|
return () => window.removeEventListener("keydown", handler);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
setShown(false);
|
setShown(false);
|
||||||
setTimeout(onClose, 280);
|
setTimeout(onClose, 280);
|
||||||
};
|
};
|
||||||
|
|
||||||
const save = () => {
|
// ── General actions ──
|
||||||
|
const saveGeneral = () => {
|
||||||
const name = playerName.trim();
|
const name = playerName.trim();
|
||||||
writeStoredPlayerName(name);
|
writeStoredPlayerName(name);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
localStorage.setItem(VISION_CLICK_STORAGE_KEY, visionClick ? "1" : "0");
|
localStorage.setItem(VISION_CLICK_STORAGE_KEY, visionClick ? "1" : "0");
|
||||||
} catch { /* ignore */ }
|
} catch { /* ignore */ }
|
||||||
|
};
|
||||||
|
|
||||||
onSaved({ playerName: name, visionClickEnabled: visionClick });
|
const clearGeneral = () => {
|
||||||
|
writeStoredPlayerName("");
|
||||||
|
try { localStorage.removeItem(VISION_CLICK_STORAGE_KEY); } catch { /* ignore */ }
|
||||||
|
setPlayerName("");
|
||||||
|
setVisionClick(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasGeneralSetting = readStoredPlayerName().length > 0;
|
||||||
|
|
||||||
|
// ── Models actions ──
|
||||||
|
const updateGroup = (
|
||||||
|
key: string,
|
||||||
|
field: keyof Omit<ModelGroup, "key" | "label" | "icon">,
|
||||||
|
value: string,
|
||||||
|
) => {
|
||||||
|
setGroups((prev) =>
|
||||||
|
prev.map((g) => (g.key === key ? { ...g, [field]: value } : g)),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveModels = () => {
|
||||||
|
const [text, image, vision] = groups;
|
||||||
|
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();
|
||||||
|
if (key) {
|
||||||
|
const presetId = keyType === "payg" ? PAYG_PRESET_ID : regionId;
|
||||||
|
writeStoredTtsConfig({ presetId, apiKey: key });
|
||||||
|
} else {
|
||||||
|
clearStoredTtsConfig();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearModels = () => {
|
||||||
|
clearStoredModelConfig();
|
||||||
|
clearStoredTtsConfig();
|
||||||
|
setGroups((prev) =>
|
||||||
|
prev.map((g) => ({ ...g, baseUrl: "", apiKey: "", model: "", provider: "" })),
|
||||||
|
);
|
||||||
|
setTtsApiKey("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasModelSetting =
|
||||||
|
groups.some((g) => g.baseUrl.trim() && g.apiKey.trim() && g.model.trim()) ||
|
||||||
|
initialTts != null;
|
||||||
|
|
||||||
|
// ── Global save / clear ──
|
||||||
|
const save = () => {
|
||||||
|
saveGeneral();
|
||||||
|
saveModels();
|
||||||
|
|
||||||
|
const ttsConfigured = ttsApiKey.trim().length > 0;
|
||||||
|
onSaved({
|
||||||
|
playerName: playerName.trim(),
|
||||||
|
visionClickEnabled: visionClick,
|
||||||
|
ttsConfigured,
|
||||||
|
});
|
||||||
close();
|
close();
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearAll = () => {
|
const clearAll = () => {
|
||||||
writeStoredPlayerName("");
|
clearGeneral();
|
||||||
try { localStorage.removeItem(VISION_CLICK_STORAGE_KEY); } catch { /* ignore */ }
|
clearModels();
|
||||||
onSaved({ playerName: "", visionClickEnabled: true });
|
onSaved({ playerName: "", visionClickEnabled: true, ttsConfigured: false });
|
||||||
close();
|
close();
|
||||||
};
|
};
|
||||||
|
|
||||||
const hasAnySetting = readStoredPlayerName().length > 0;
|
const hasAnySetting = hasGeneralSetting || hasModelSetting;
|
||||||
|
|
||||||
|
const tabs: { key: TabKey; label: string; icon: string }[] = [
|
||||||
|
{ key: "general", label: "通用", icon: "fa-solid fa-sliders" },
|
||||||
|
{ key: "models", label: "模型", icon: "fa-solid fa-microchip" },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -93,7 +274,7 @@ export function SettingsModal({
|
|||||||
<div
|
<div
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
className={
|
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 " +
|
"flex w-[640px] max-w-[96vw] max-h-[90vh] 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")
|
(shown ? "opacity-100 scale-100" : "opacity-0 scale-95")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@@ -117,81 +298,368 @@ export function SettingsModal({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-0 overflow-y-auto">
|
{/* Tab bar */}
|
||||||
{/* ── Player Name Section ── */}
|
<div className="flex border-b border-clay-900/8 px-6 md:px-8">
|
||||||
<div className="flex flex-col gap-3 px-6 md:px-8 py-5">
|
{tabs.map((t) => {
|
||||||
<div className="flex items-center gap-2.5">
|
const active = activeTab === t.key;
|
||||||
<span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
|
return (
|
||||||
<i className="fa-solid fa-user-pen text-[11px]" />
|
<button
|
||||||
</span>
|
key={t.key}
|
||||||
<span className="font-serif text-base text-clay-900">
|
type="button"
|
||||||
玩家名字
|
onClick={() => setActiveTab(t.key)}
|
||||||
</span>
|
className={
|
||||||
</div>
|
"flex items-center gap-2 px-4 py-3 text-[13px] font-sans transition-colors border-b-2 -mb-px " +
|
||||||
<input
|
(active
|
||||||
value={playerName}
|
? "border-ember-500 text-clay-900"
|
||||||
onChange={(e) => setPlayerName(e.target.value)}
|
: "border-transparent text-clay-500 hover:text-clay-700")
|
||||||
type="text"
|
}
|
||||||
maxLength={20}
|
>
|
||||||
autoComplete="off"
|
<i className={`${t.icon} text-[11px]`} />
|
||||||
spellCheck={false}
|
{t.label}
|
||||||
placeholder="不填则使用「你」"
|
</button>
|
||||||
className="h-11 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
);
|
||||||
/>
|
})}
|
||||||
<span className="text-[11px] text-clay-400">
|
</div>
|
||||||
NPC 会在对话中用这个名字称呼你。不填则默认以「你」称呼。
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
|
{/* Content */}
|
||||||
|
<div className="thin-scrollbar flex flex-col gap-0 overflow-y-auto flex-1">
|
||||||
|
{activeTab === "general" && (
|
||||||
|
<>
|
||||||
|
{/* ── Player Name Section ── */}
|
||||||
|
<div className="flex flex-col gap-3 px-6 md:px-8 py-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-user-pen text-[11px]" />
|
||||||
|
</span>
|
||||||
|
<span className="font-serif text-base text-clay-900">
|
||||||
|
玩家名字
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
value={playerName}
|
||||||
|
onChange={(e) => setPlayerName(e.target.value)}
|
||||||
|
type="text"
|
||||||
|
maxLength={20}
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck={false}
|
||||||
|
placeholder="不填则使用「你」"
|
||||||
|
className="h-11 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
||||||
|
/>
|
||||||
|
<span className="text-[11px] text-clay-400">
|
||||||
|
NPC 会在对话中用这个名字称呼你。不填则默认以「你」称呼。
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ── Vision Click Section ── */}
|
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
|
||||||
<div className="flex flex-col gap-3 px-6 md:px-8 py-5">
|
|
||||||
<div className="flex items-center gap-2.5">
|
{/* ── Vision Click Section ── */}
|
||||||
<span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
|
<div className="flex flex-col gap-3 px-6 md:px-8 py-5">
|
||||||
<i className="fa-solid fa-eye text-[11px]" />
|
<div className="flex items-center gap-2.5">
|
||||||
</span>
|
<span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
|
||||||
<span className="font-serif text-base text-clay-900">
|
<i className="fa-solid fa-eye text-[11px]" />
|
||||||
点击画面识别
|
</span>
|
||||||
</span>
|
<span className="font-serif text-base text-clay-900">
|
||||||
</div>
|
点击画面识别
|
||||||
<div className="grid grid-cols-2 gap-2">
|
</span>
|
||||||
{(
|
</div>
|
||||||
[
|
<div className="grid grid-cols-2 gap-2">
|
||||||
{ on: true, label: "开启", icon: "fa-solid fa-wand-magic-sparkles" },
|
{(
|
||||||
{ on: false, label: "关闭", icon: "fa-solid fa-ban" },
|
[
|
||||||
] as const
|
{ on: true, label: "开启", icon: "fa-solid fa-wand-magic-sparkles" },
|
||||||
).map((t) => {
|
{ on: false, label: "关闭", icon: "fa-solid fa-ban" },
|
||||||
const active = visionClick === t.on;
|
] as const
|
||||||
return (
|
).map((t) => {
|
||||||
<button
|
const active = visionClick === t.on;
|
||||||
key={String(t.on)}
|
return (
|
||||||
type="button"
|
<button
|
||||||
onClick={() => setVisionClick(t.on)}
|
key={String(t.on)}
|
||||||
className={
|
type="button"
|
||||||
"flex items-center justify-center gap-2 rounded-sm border px-3 py-2.5 text-[13px] transition-all " +
|
onClick={() => setVisionClick(t.on)}
|
||||||
(active
|
className={
|
||||||
? "border-ember-500 bg-ember-500/5 text-clay-900"
|
"flex items-center justify-center gap-2 rounded-sm border px-3 py-2.5 text-[13px] transition-all " +
|
||||||
: "border-clay-900/12 text-clay-600 hover:border-clay-900/35 hover:bg-cream-100")
|
(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")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className={t.icon + " text-[11px]"} />
|
||||||
|
{t.label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<span className="text-[11px] text-clay-400">
|
||||||
|
开启后，在选择节点点击画面会触发 AI 识图并生成新的剧情分支。
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{footerNote && (
|
||||||
|
<div className="px-6 md:px-8 pb-5">
|
||||||
|
<p className="text-[11px] leading-relaxed text-clay-400">
|
||||||
|
{footerNote}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "models" && (
|
||||||
|
<>
|
||||||
|
{groups.map((g, idx) => (
|
||||||
|
<div key={g.key}>
|
||||||
|
{idx > 0 && (
|
||||||
|
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col gap-3 px-6 md:px-8 py-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={`${g.icon} text-[11px]`} />
|
||||||
|
</span>
|
||||||
|
<span className="font-serif text-base text-clay-900">
|
||||||
|
{g.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-[10px] smallcaps text-clay-500">
|
||||||
|
B A S E · U R L
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
value={g.baseUrl}
|
||||||
|
onChange={(e) => updateGroup(g.key, "baseUrl", e.target.value)}
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck={false}
|
||||||
|
placeholder="https://api.example.com/v1"
|
||||||
|
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
||||||
|
/>
|
||||||
|
</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={g.apiKey}
|
||||||
|
onChange={(e) => updateGroup(g.key, "apiKey", e.target.value)}
|
||||||
|
type={showKeys[g.key] ? "text" : "password"}
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck={false}
|
||||||
|
placeholder="sk-..."
|
||||||
|
className="h-10 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={() =>
|
||||||
|
setShowKeys((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[g.key]: !prev[g.key],
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
aria-label={showKeys[g.key] ? "隐藏" : "显示"}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-clay-400 hover:text-clay-700 transition-colors"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className={`fa-solid ${showKeys[g.key] ? "fa-eye-slash" : "fa-eye"} text-sm`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-[10px] smallcaps text-clay-500">
|
||||||
|
M o d e l
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
value={g.model}
|
||||||
|
onChange={(e) => updateGroup(g.key, "model", e.target.value)}
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck={false}
|
||||||
|
placeholder="gpt-4o / claude-3-5-sonnet / flux-1-dev ..."
|
||||||
|
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-[10px] smallcaps text-clay-500">
|
||||||
|
P r o v i d e r（可选）
|
||||||
|
</span>
|
||||||
|
<select
|
||||||
|
value={g.provider}
|
||||||
|
onChange={(e) => updateGroup(g.key, "provider", e.target.value)}
|
||||||
|
className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 px-4 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500"
|
||||||
|
>
|
||||||
|
{PROVIDER_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value || "auto"} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<span className="text-[11px] text-clay-400">
|
||||||
|
留空时系统会根据 Base URL 自动推断协议。
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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={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={t.icon + " text-[11px]"} />
|
<i className="fa-brands fa-github text-[11px]" />
|
||||||
{t.label}
|
如何免费申请 Key？查看图文教程
|
||||||
</button>
|
</a>
|
||||||
);
|
</div>
|
||||||
})}
|
</div>
|
||||||
</div>
|
|
||||||
<span className="text-[11px] text-clay-400">
|
|
||||||
开启后，在选择节点点击画面会触发 AI 识图并生成新的剧情分支。
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{footerNote && (
|
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
|
||||||
<div className="px-6 md:px-8 pb-5">
|
|
||||||
<p className="text-[11px] leading-relaxed text-clay-400">
|
<div className="px-6 md:px-8 py-4">
|
||||||
{footerNote}
|
<p className="text-[11px] leading-relaxed text-clay-400">
|
||||||
</p>
|
<i className="fa-solid fa-circle-info mr-1.5" />
|
||||||
</div>
|
请确保你的 API 端点支持浏览器跨域请求（CORS）。大多数主流提供商（OpenAI、Anthropic、Gemini、Runware 等）已默认支持。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user