feat(voice): 语音配置控制面——火山豆包 appid/token/resource-id/音色(参数落地处)

JARVIS 不依赖火山账号能先做的第二块:配置层,做成'你参数一填就落库'的形态。 - voice.Config: AppID/AccessToken/ASRResourceID/TTSResourceID/TTSVoiceType，AccessToken 走 secrets AES 加密入库(镜像微信配置)；ASREnabled/TTSEnabled 可各自独立判断。 - admin GET/PUT /admin/voice(RequireAdmin)，token 空串=沿用已存、明文回显。 - admin「语音设置」页(运维组)：五个字段 + ASR/TTS 就绪徽标 + '去哪拿参数'清单。端点/音频格式(PCM 16k 单声道)由代码固定不入配置。WS 会话 + 火山 ASR/TTS 客户端等用户回传 resource-id 后按官方 demo 协议做。build+tsc 绿。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 17:00:35 +08:00
parent 644b635d73
commit 618184689e
6 changed files with 295 additions and 0 deletions
@@ -267,6 +267,38 @@ export async function saveWechatMP(body: { appid: string; app_secret: string; to
  return { enabled: !!d.enabled };
 }

+// —— 语音（火山豆包）配置 ——
+export interface VoiceConfig {
+  appid: string;
+  access_token: string; // 明文回显（单管理员后台）
+  asr_resource_id: string;
+  tts_resource_id: string;
+  tts_voice_type: string;
+  asr_enabled: boolean;
+  tts_enabled: boolean;
+}
+
+export async function getVoiceConfig(): Promise<VoiceConfig> {
+  const res = guard(await fetch(`${ADMIN}/voice`, { headers: authHeaders() }));
+  const d = (await res.json().catch(() => ({}))) as Partial<VoiceConfig> & { error?: string };
+  if (!res.ok) throw new Error(d.error ?? `voice config failed: ${res.status}`);
+  return {
+    appid: d.appid ?? "", access_token: d.access_token ?? "", asr_resource_id: d.asr_resource_id ?? "",
+    tts_resource_id: d.tts_resource_id ?? "", tts_voice_type: d.tts_voice_type ?? "",
+    asr_enabled: !!d.asr_enabled, tts_enabled: !!d.tts_enabled,
+  };
+}
+
+// access_token 传空串 = 沿用已保存的。
+export async function saveVoiceConfig(body: {
+  appid: string; access_token: string; asr_resource_id: string; tts_resource_id: string; tts_voice_type: string;
+}): Promise<{ asr_enabled: boolean; tts_enabled: boolean }> {
+  const res = guard(await fetch(`${ADMIN}/voice`, { method: "PUT", headers: authHeaders(true), body: JSON.stringify(body) }));
+  const d = (await res.json().catch(() => ({}))) as { asr_enabled?: boolean; tts_enabled?: boolean; error?: string };
+  if (!res.ok) throw new Error(d.error ?? `save failed: ${res.status}`);
+  return { asr_enabled: !!d.asr_enabled, tts_enabled: !!d.tts_enabled };
+}
+
 export interface WechatPayConfig {
  mchid: string;
  cert_serial: string;
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { getVoiceConfig, saveVoiceConfig } from "../api";
+
+// 运维 · 语音设置：火山引擎豆包语音（流式 ASR 耳朵 + 双向流式 TTS 嘴）。
+// AccessToken 明文回显（单管理员后台，方便核对；密文仍加密入库）。设计见 VOICE_DESIGN.md。
+export function VoiceConfigPage() {
+  const [appid, setAppid] = useState("");
+  const [token, setToken] = useState("");
+  const [asrRes, setAsrRes] = useState("");
+  const [ttsRes, setTtsRes] = useState("");
+  const [voice, setVoice] = useState("");
+  const [asrOn, setAsrOn] = useState(false);
+  const [ttsOn, setTtsOn] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState("");
+  const [ok, setOk] = useState(false);
+
+  useEffect(() => {
+    getVoiceConfig()
+      .then((c) => {
+        setAppid(c.appid);
+        setToken(c.access_token);
+        setAsrRes(c.asr_resource_id);
+        setTtsRes(c.tts_resource_id);
+        setVoice(c.tts_voice_type);
+        setAsrOn(c.asr_enabled);
+        setTtsOn(c.tts_enabled);
+      })
+      .catch((e) => setErr((e as Error).message));
+  }, []);
+
+  const save = async () => {
+    if (busy) return;
+    setBusy(true);
+    setErr("");
+    setOk(false);
+    try {
+      const r = await saveVoiceConfig({
+        appid: appid.trim(),
+        access_token: token,
+        asr_resource_id: asrRes.trim(),
+        tts_resource_id: ttsRes.trim(),
+        tts_voice_type: voice.trim(),
+      });
+      setAsrOn(r.asr_enabled);
+      setTtsOn(r.tts_enabled);
+      setOk(true);
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const field = "mt-1 block w-full rounded-lg border border-gray-200 px-2.5 py-1.5 font-mono text-sm text-gray-800 focus:border-violet-400 focus:outline-none";
+  const badge = (on: boolean, label: string) =>
+    on ? (
+      <span className="rounded bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-600">{label} 已就绪</span>
+    ) : (
+      <span className="rounded bg-gray-100 px-2 py-0.5 text-[10px] text-gray-500">{label} 未配齐</span>
+    );
+
+  return (
+    <div className="space-y-5">
+      <div className="border-b border-gray-200 pb-4">
+        <h3 className="text-base font-semibold text-gray-800">语音设置 · 火山豆包</h3>
+        <p className="text-xs text-gray-400">流式语音识别(耳朵) + 双向流式语音合成(嘴)。AccessToken 加密入库、后台明文可见</p>
+      </div>
+
+      <div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
+        <div className="mb-3 flex items-center gap-2">
+          <h4 className="text-sm font-semibold text-gray-700">火山引擎配置</h4>
+          {badge(asrOn, "ASR")}
+          {badge(ttsOn, "TTS")}
+        </div>
+
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label className="text-xs text-gray-500">
+            AppID(X-Api-App-Key)
+            <input value={appid} onChange={(e) => setAppid(e.target.value)} placeholder="火山应用 AppID" className={field} />
+          </label>
+          <label className="text-xs text-gray-500">
+            Access Token(X-Api-Access-Key)
+            <input value={token} onChange={(e) => setToken(e.target.value)} placeholder="火山 Access Token" className={field} />
+          </label>
+          <label className="text-xs text-gray-500">
+            ASR Resource-Id
+            <input value={asrRes} onChange={(e) => setAsrRes(e.target.value)} placeholder="流式语音识别的 X-Api-Resource-Id" className={field} />
+          </label>
+          <label className="text-xs text-gray-500">
+            TTS Resource-Id
+            <input value={ttsRes} onChange={(e) => setTtsRes(e.target.value)} placeholder="双向流式 TTS 的 X-Api-Resource-Id" className={field} />
+          </label>
+          <label className="text-xs text-gray-500 md:col-span-2">
+            音色 voice_type
+            <input value={voice} onChange={(e) => setVoice(e.target.value)} placeholder="从标准音色里挑一个（如 zh_male_…）" className={field} />
+          </label>
+        </div>
+
+        {err && <p className="mt-2 text-xs text-rose-500">{err}</p>}
+        {ok && <p className="mt-2 text-xs text-emerald-600">已保存</p>}
+
+        <div className="mt-3">
+          <button onClick={() => void save()} disabled={busy} className="rounded-lg bg-violet-600 px-3.5 py-1.5 text-sm text-white hover:bg-violet-700 disabled:opacity-40">
+            {busy ? "保存中…" : "保存"}
+          </button>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-amber-100 bg-amber-50/40 p-5 text-xs leading-relaxed text-gray-600">
+        <h4 className="mb-2 text-sm font-semibold text-gray-700">去哪拿这些参数</h4>
+        <ol className="list-decimal space-y-1.5 pl-4">
+          <li>火山「豆包语音控制台」→ 你的应用详情页，拿 <b>AppID</b> 与 <b>Access Token</b>（ASR/TTS 通常同一应用共用）</li>
+          <li><b>ASR Resource-Id</b>：在「流式语音识别 2.0」文档的鉴权小节（X-Api-Resource-Id 那一栏）</li>
+          <li><b>TTS Resource-Id</b>：在「双向流式语音合成」文档的鉴权小节</li>
+          <li><b>音色</b>：控制台「音色管理」里挑一个（JARVIS 建议沉稳男声），填其 voice_type</li>
+          <li>端点/音频格式（PCM 16k 单声道）由后端固定，不用填</li>
+        </ol>
+      </div>
+    </div>
+  );
+}
@@ -1,5 +1,6 @@
 import { SubscriptionPage } from "./pages/SubscriptionPage";
 import { LoginConfigPage } from "./pages/LoginConfigPage";
+import { VoiceConfigPage } from "./pages/VoiceConfigPage";
 import { WechatUsersPage } from "./pages/WechatUsersPage";
 import { lazy, type ReactNode } from "react";

@@ -86,6 +87,13 @@ export const routes: RouteDef[] = [
    ready: true,
    element: <LoginConfigPage />,
  },
+  {
+    path: "voice-config",
+    label: "语音设置",
+    group: "运维",
+    ready: true,
+    element: <VoiceConfigPage />,
+  },
  {
    path: "datasources",
    label: "数据源 & RAG",