From 080dbcbabee4276538c6e3cb3954dee5ac0f0030 Mon Sep 17 00:00:00 2001
From: ddcat666 <26564566+ddcat666@users.noreply.github.com>
Date: Thu, 1 Oct 2026 13:18:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E9=9F=B3=E9=A2=91=E4=B8=8E?=
 =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=B4=A0=E6=9D=90=20-=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E6=A3=80=E6=9F=A5=E6=9C=AA=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

角色库、音频参数和音频测试在上次提交后不再符合 Prettier，质量检查因此失败。只调整格式，不改变交互。
---
 web/src/components/audio-settings-panel.tsx   | 104 ++++----
 .../canvas/canvas-character-library-modal.tsx |  26 +-
 .../canvas/character-media-library.tsx        | 230 ++++++++++++------
 web/test/audio-generation.test.ts             |  18 +-
 4 files changed, 236 insertions(+), 142 deletions(-)

diff --git a/web/src/components/audio-settings-panel.tsx b/web/src/components/audio-settings-panel.tsx
index dc026767d..5bcea4347 100644
--- a/web/src/components/audio-settings-panel.tsx
+++ b/web/src/components/audio-settings-panel.tsx
@@ -47,46 +47,50 @@ export function AudioSettingsPanel({ config, onConfigChange, theme, showTitle =
             <div className={className} style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
                 {showTitle ? <div className="text-lg font-semibold">音频设置</div> : null}
                 <SettingGroup title="音色" color={theme.node.muted}>
-                        {isDoubao ? (
-                            <div className="space-y-3">
-                                <div className="rounded-xl border px-3 py-2 text-sm leading-6" style={{ borderColor: theme.node.stroke, color: theme.node.muted }}>
-                                    不连接素材时，按提示词直接生成。连接音频时按参考音频生成，最多 3 段。连接图片时按参考图片生成，最多 1 张。图片和音频不能同时连接。
-                                </div>
-                                <select
-                                    value={voice}
-                                    className="h-9 w-full rounded-xl border bg-transparent px-3 text-sm outline-none"
-                                    style={{ borderColor: theme.node.stroke, color: theme.node.text, background: theme.spatial.elevated }}
-                                    onChange={(event) => onConfigChange("audioVoice", event.target.value)}
-                                    onMouseDown={(event) => event.stopPropagation()}
-                                >
-                                    <option value="">不指定音色</option>
-                                    {voice ? <option value={voice}>当前音色</option> : null}
-                                </select>
+                    {isDoubao ? (
+                        <div className="space-y-3">
+                            <div className="rounded-xl border px-3 py-2 text-sm leading-6" style={{ borderColor: theme.node.stroke, color: theme.node.muted }}>
+                                不连接素材时，按提示词直接生成。连接音频时按参考音频生成，最多 3 段。连接图片时按参考图片生成，最多 1 张。图片和音频不能同时连接。
                             </div>
-                        ) : (
-                            <>
-                                <input
-                                    value={config.audioVoice || ""}
-                                    placeholder="输入渠道音色 ID，例如 voice_001"
-                                    list="audio-voice-options"
-                                    className="h-9 w-full rounded-xl border bg-transparent px-3 text-sm outline-none"
-                                    style={{ borderColor: theme.node.stroke, color: theme.node.text }}
-                                    onChange={(event) => onConfigChange("audioVoice", event.target.value)}
-                                    onMouseDown={(event) => event.stopPropagation()}
-                                />
-                                <datalist id="audio-voice-options">
-                                    {visibleVoiceOptions.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
-                                </datalist>
-                                <div className="grid grid-cols-3 gap-2.5">
-                                    {visibleVoiceOptions.map((item) => (
-                                        <OptionPill key={item.value} selected={voice === item.value} theme={theme} onClick={() => onConfigChange("audioVoice", item.value)}>
-                                            {item.label}
-                                        </OptionPill>
-                                    ))}
-                                </div>
-                            </>
-                        )}
-                    </SettingGroup>
+                            <select
+                                value={voice}
+                                className="h-9 w-full rounded-xl border bg-transparent px-3 text-sm outline-none"
+                                style={{ borderColor: theme.node.stroke, color: theme.node.text, background: theme.spatial.elevated }}
+                                onChange={(event) => onConfigChange("audioVoice", event.target.value)}
+                                onMouseDown={(event) => event.stopPropagation()}
+                            >
+                                <option value="">不指定音色</option>
+                                {voice ? <option value={voice}>当前音色</option> : null}
+                            </select>
+                        </div>
+                    ) : (
+                        <>
+                            <input
+                                value={config.audioVoice || ""}
+                                placeholder="输入渠道音色 ID，例如 voice_001"
+                                list="audio-voice-options"
+                                className="h-9 w-full rounded-xl border bg-transparent px-3 text-sm outline-none"
+                                style={{ borderColor: theme.node.stroke, color: theme.node.text }}
+                                onChange={(event) => onConfigChange("audioVoice", event.target.value)}
+                                onMouseDown={(event) => event.stopPropagation()}
+                            />
+                            <datalist id="audio-voice-options">
+                                {visibleVoiceOptions.map((item) => (
+                                    <option key={item.value} value={item.value}>
+                                        {item.label}
+                                    </option>
+                                ))}
+                            </datalist>
+                            <div className="grid grid-cols-3 gap-2.5">
+                                {visibleVoiceOptions.map((item) => (
+                                    <OptionPill key={item.value} selected={voice === item.value} theme={theme} onClick={() => onConfigChange("audioVoice", item.value)}>
+                                        {item.label}
+                                    </OptionPill>
+                                ))}
+                            </div>
+                        </>
+                    )}
+                </SettingGroup>
                 <SettingGroup title="格式" color={theme.node.muted}>
                     <div className="grid grid-cols-3 gap-2.5">
                         {formatOptions.map((item) => (
@@ -117,16 +121,18 @@ export function AudioSettingsPanel({ config, onConfigChange, theme, showTitle =
                         onMouseDown={(event) => event.stopPropagation()}
                     />
                 </SettingGroup>
-                {!isDoubao ? <SettingGroup title="声音指令" color={theme.node.muted}>
-                    <textarea
-                        value={config.audioInstructions || ""}
-                        placeholder="例如：自然、温暖、适合旁白。"
-                        className="thin-scrollbar h-20 w-full resize-none rounded-xl border bg-transparent px-3 py-2 text-sm leading-5 outline-none"
-                        style={{ borderColor: theme.node.stroke, color: theme.node.text }}
-                        onChange={(event) => onConfigChange("audioInstructions", event.target.value)}
-                        onMouseDown={(event) => event.stopPropagation()}
-                    />
-                </SettingGroup> : null}
+                {!isDoubao ? (
+                    <SettingGroup title="声音指令" color={theme.node.muted}>
+                        <textarea
+                            value={config.audioInstructions || ""}
+                            placeholder="例如：自然、温暖、适合旁白。"
+                            className="thin-scrollbar h-20 w-full resize-none rounded-xl border bg-transparent px-3 py-2 text-sm leading-5 outline-none"
+                            style={{ borderColor: theme.node.stroke, color: theme.node.text }}
+                            onChange={(event) => onConfigChange("audioInstructions", event.target.value)}
+                            onMouseDown={(event) => event.stopPropagation()}
+                        />
+                    </SettingGroup>
+                ) : null}
             </div>
         </ImageSettingsTheme>
     );
diff --git a/web/src/components/canvas/canvas-character-library-modal.tsx b/web/src/components/canvas/canvas-character-library-modal.tsx
index 5888329f1..bb08e7373 100644
--- a/web/src/components/canvas/canvas-character-library-modal.tsx
+++ b/web/src/components/canvas/canvas-character-library-modal.tsx
@@ -107,18 +107,36 @@ export function CanvasCharacterLibraryModal({
                     <div className="grid grid-cols-2 gap-2">
                         {characters.map((item) => (
                             <button key={item.asset.id} type="button" className="flex min-h-16 items-center gap-3 rounded-md border border-border px-3 py-2 text-left hover:bg-foreground/[.04]" onClick={() => void insertCharacter(item.asset)}>
-                                <span className="grid size-10 shrink-0 place-items-center rounded bg-foreground/[.06]"><UserRound className="size-4" /></span>
+                                <span className="grid size-10 shrink-0 place-items-center rounded bg-foreground/[.06]">
+                                    <UserRound className="size-4" />
+                                </span>
                                 <span className="min-w-0">
                                     <span className="block truncate text-sm font-medium">{item.asset.title}</span>
                                     <span className="mt-1 flex gap-2 text-[11px] text-foreground/50">
-                                        <span className="inline-flex items-center gap-1"><ImageIcon className="size-3" />{item.character.visualStatus === "ready" ? "形象就绪" : "形象待完善"}</span>
-                                        <span className="inline-flex items-center gap-1"><Volume2 className="size-3" />{item.character.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}</span>
+                                        <span className="inline-flex items-center gap-1">
+                                            <ImageIcon className="size-3" />
+                                            {item.character.visualStatus === "ready" ? "形象就绪" : "形象待完善"}
+                                        </span>
+                                        <span className="inline-flex items-center gap-1">
+                                            <Volume2 className="size-3" />
+                                            {item.character.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}
+                                        </span>
                                     </span>
                                 </span>
                             </button>
                         ))}
                     </div>
-                    <PaginationBar current={page} pageSize={pageSize} total={total} pageSizeOptions={[12, 24, 48]} itemLabel="张" onChange={(nextPage, nextPageSize) => { setPage(nextPage); setPageSize(nextPageSize); }} />
+                    <PaginationBar
+                        current={page}
+                        pageSize={pageSize}
+                        total={total}
+                        pageSizeOptions={[12, 24, 48]}
+                        itemLabel="张"
+                        onChange={(nextPage, nextPageSize) => {
+                            setPage(nextPage);
+                            setPageSize(nextPageSize);
+                        }}
+                    />
                 </div>
             </div>
         </AppModal>
diff --git a/web/src/components/canvas/character-media-library.tsx b/web/src/components/canvas/character-media-library.tsx
index 5a25549b6..df1da1d15 100644
--- a/web/src/components/canvas/character-media-library.tsx
+++ b/web/src/components/canvas/character-media-library.tsx
@@ -28,9 +28,12 @@ function useCharacterMediaPages<K extends "image" | "audio">(kind: K, keyword: s
     useEffect(() => {
         const target = sentinelRef.current;
         if (!target || !hasNextPage || typeof IntersectionObserver === "undefined") return;
-        const observer = new IntersectionObserver((entries) => {
-            if (entries.some((entry) => entry.isIntersecting) && !isFetchingNextPage) void fetchNextPage();
-        }, { rootMargin: "160px" });
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting) && !isFetchingNextPage) void fetchNextPage();
+            },
+            { rootMargin: "160px" },
+        );
         observer.observe(target);
         return () => observer.disconnect();
     }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
@@ -43,10 +46,22 @@ function SearchField({ value, placeholder, onChange }: { value: string; placehol
 
 function FilePicker({ accept, onFile, children }: { accept: string; onFile: (file: File) => void; children: (open: () => void) => ReactNode }) {
     const inputRef = useRef<HTMLInputElement>(null);
-    return <>
-        {children(() => inputRef.current?.click())}
-        <input ref={inputRef} type="file" accept={accept} className="hidden" onChange={(event) => { const file = event.target.files?.[0]; event.target.value = ""; if (file) onFile(file); }} />
-    </>;
+    return (
+        <>
+            {children(() => inputRef.current?.click())}
+            <input
+                ref={inputRef}
+                type="file"
+                accept={accept}
+                className="hidden"
+                onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (file) onFile(file);
+                }}
+            />
+        </>
+    );
 }
 
 function ListState({ loading, empty, loadingMore }: { loading: boolean; empty: string; loadingMore: boolean }) {
@@ -59,49 +74,68 @@ function ListState({ loading, empty, loadingMore }: { loading: boolean; empty: s
 export type CanvasMediaTitles = ReadonlyMap<string, string>;
 
 /** 形象选择：缩略图网格，点选即绑定；第一格为本地上传。 */
-export function CharacterImageLibrary({ currentResourceId, busyKey, canvasTitles, onPick, onUpload }: {
-    currentResourceId: string;
-    canvasTitles?: CanvasMediaTitles;
-    busyKey: string;
-    onPick: (resourceId: string) => void;
-    onUpload: (file: File) => void;
-}) {
+export function CharacterImageLibrary({ currentResourceId, busyKey, canvasTitles, onPick, onUpload }: { currentResourceId: string; canvasTitles?: CanvasMediaTitles; busyKey: string; onPick: (resourceId: string) => void; onUpload: (file: File) => void }) {
     const [keyword, setKeyword] = useState("");
     const { items, query, loading, loadingMore, sentinelRef } = useCharacterMediaPages("image", keyword);
-    return <div className="space-y-4">
-        <SearchField value={keyword} placeholder="搜索素材库图片" onChange={setKeyword} />
-        <div className="grid grid-cols-3 gap-2.5">
-            <FilePicker accept="image/*" onFile={onUpload}>
-                {(open) => <button type="button" onClick={open} disabled={Boolean(busyKey)} className="grid aspect-[3/4] place-items-center rounded-lg border border-dashed border-foreground/15 text-foreground/45 outline-none transition-colors hover:border-foreground/35 hover:text-foreground/75 focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-wait">
-                    <span className="flex flex-col items-center gap-2 text-xs">{busyKey === "upload" ? <Loader2 className="size-5 animate-spin" /> : <ImagePlus className="size-5 stroke-[1.5]" />}上传本地图片</span>
-                </button>}
-            </FilePicker>
-            {items.map((asset) => {
-                const resourceId = resourceIdFromStorageKey(asset.data.storageKey);
-                const current = resourceId === currentResourceId;
-                const busy = busyKey === resourceId;
-                const title = canvasTitles?.get(resourceId) || asset.title;
-                return <button
-                    key={asset.id}
-                    type="button"
-                    title={title}
-                    aria-pressed={current}
-                    disabled={Boolean(busyKey) || current}
-                    onClick={() => onPick(resourceId)}
-                    className={`group relative aspect-[3/4] overflow-hidden rounded-lg bg-foreground/[.05] outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-default ${current ? "ring-2 ring-[var(--workspace-accent)] ring-offset-2 ring-offset-background" : ""}`}
-                >
-                    <CachedResourceImage storageKey={asset.data.storageKey} src={asset.coverUrl} variant="thumbnail" alt={title} className="h-full w-full object-cover transition-transform duration-300 [transition-timing-function:cubic-bezier(.16,1,.3,1)] group-hover:scale-[1.04] motion-reduce:transition-none" />
-                    <span className="pointer-events-none absolute inset-x-0 bottom-0 translate-y-1 bg-gradient-to-t from-black/75 to-transparent px-2 pb-1.5 pt-6 text-left text-[11px] text-white opacity-0 transition duration-200 group-hover:translate-y-0 group-hover:opacity-100">
-                        <span className="block truncate">{title}</span>
-                    </span>
-                    {current ? <span className="absolute right-1.5 top-1.5 grid size-5 place-items-center rounded-full bg-[var(--workspace-accent)] text-background"><Check className="size-3" /></span> : null}
-                    {busy ? <span className="absolute inset-0 grid place-items-center bg-black/45 text-white"><Loader2 className="size-5 animate-spin" /></span> : null}
-                </button>;
-            })}
+    return (
+        <div className="space-y-4">
+            <SearchField value={keyword} placeholder="搜索素材库图片" onChange={setKeyword} />
+            <div className="grid grid-cols-3 gap-2.5">
+                <FilePicker accept="image/*" onFile={onUpload}>
+                    {(open) => (
+                        <button
+                            type="button"
+                            onClick={open}
+                            disabled={Boolean(busyKey)}
+                            className="grid aspect-[3/4] place-items-center rounded-lg border border-dashed border-foreground/15 text-foreground/45 outline-none transition-colors hover:border-foreground/35 hover:text-foreground/75 focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-wait"
+                        >
+                            <span className="flex flex-col items-center gap-2 text-xs">{busyKey === "upload" ? <Loader2 className="size-5 animate-spin" /> : <ImagePlus className="size-5 stroke-[1.5]" />}上传本地图片</span>
+                        </button>
+                    )}
+                </FilePicker>
+                {items.map((asset) => {
+                    const resourceId = resourceIdFromStorageKey(asset.data.storageKey);
+                    const current = resourceId === currentResourceId;
+                    const busy = busyKey === resourceId;
+                    const title = canvasTitles?.get(resourceId) || asset.title;
+                    return (
+                        <button
+                            key={asset.id}
+                            type="button"
+                            title={title}
+                            aria-pressed={current}
+                            disabled={Boolean(busyKey) || current}
+                            onClick={() => onPick(resourceId)}
+                            className={`group relative aspect-[3/4] overflow-hidden rounded-lg bg-foreground/[.05] outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-default ${current ? "ring-2 ring-[var(--workspace-accent)] ring-offset-2 ring-offset-background" : ""}`}
+                        >
+                            <CachedResourceImage
+                                storageKey={asset.data.storageKey}
+                                src={asset.coverUrl}
+                                variant="thumbnail"
+                                alt={title}
+                                className="h-full w-full object-cover transition-transform duration-300 [transition-timing-function:cubic-bezier(.16,1,.3,1)] group-hover:scale-[1.04] motion-reduce:transition-none"
+                            />
+                            <span className="pointer-events-none absolute inset-x-0 bottom-0 translate-y-1 bg-gradient-to-t from-black/75 to-transparent px-2 pb-1.5 pt-6 text-left text-[11px] text-white opacity-0 transition duration-200 group-hover:translate-y-0 group-hover:opacity-100">
+                                <span className="block truncate">{title}</span>
+                            </span>
+                            {current ? (
+                                <span className="absolute right-1.5 top-1.5 grid size-5 place-items-center rounded-full bg-[var(--workspace-accent)] text-background">
+                                    <Check className="size-3" />
+                                </span>
+                            ) : null}
+                            {busy ? (
+                                <span className="absolute inset-0 grid place-items-center bg-black/45 text-white">
+                                    <Loader2 className="size-5 animate-spin" />
+                                </span>
+                            ) : null}
+                        </button>
+                    );
+                })}
+            </div>
+            <ListState loading={loading} loadingMore={loadingMore} empty={!loading && !items.length ? (query ? "没有匹配的图片" : "素材库里还没有图片，可以直接上传本地图片") : ""} />
+            <div ref={sentinelRef} />
         </div>
-        <ListState loading={loading} loadingMore={loadingMore} empty={!loading && !items.length ? (query ? "没有匹配的图片" : "素材库里还没有图片，可以直接上传本地图片") : ""} />
-        <div ref={sentinelRef} />
-    </div>;
+    );
 }
 
 /** 共用一个播放器试听，避免每行一个原生控件把列表挤乱。 */
@@ -130,7 +164,13 @@ function useAudition() {
 }
 
 /** 声音选择：列表 + 单击试听，右侧“使用”即绑定。 */
-export function CharacterVoiceLibrary({ currentResourceId, busyKey, canvasTitles, onPick, onUpload }: {
+export function CharacterVoiceLibrary({
+    currentResourceId,
+    busyKey,
+    canvasTitles,
+    onPick,
+    onUpload,
+}: {
     currentResourceId: string;
     canvasTitles?: CanvasMediaTitles;
     busyKey: string;
@@ -140,38 +180,68 @@ export function CharacterVoiceLibrary({ currentResourceId, busyKey, canvasTitles
     const [keyword, setKeyword] = useState("");
     const { items, query, loading, loadingMore, sentinelRef } = useCharacterMediaPages("audio", keyword);
     const { playing, toggle } = useAudition();
-    return <div className="space-y-4">
-        <div className="flex gap-2">
-            <div className="min-w-0 flex-1"><SearchField value={keyword} placeholder="搜索素材库音频" onChange={setKeyword} /></div>
-            <FilePicker accept="audio/*" onFile={onUpload}>
-                {(open) => <button type="button" onClick={open} disabled={Boolean(busyKey)} aria-label="上传本地音频" title="上传本地音频" className="grid size-8 shrink-0 place-items-center rounded-md bg-foreground/[.05] text-foreground/60 outline-none transition-colors hover:bg-foreground/[.09] hover:text-foreground focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-wait">
-                    {busyKey === "upload" ? <Loader2 className="size-4 animate-spin" /> : <Upload className="size-4" />}
-                </button>}
-            </FilePicker>
-        </div>
-        <ul className="divide-y divide-border/60">
-            {items.map((asset) => {
-                const resourceId = resourceIdFromStorageKey(asset.data.storageKey);
-                const current = resourceId === currentResourceId;
-                const seconds = asset.data.durationMs ? Math.round(asset.data.durationMs / 1000) : 0;
-                const title = canvasTitles?.get(resourceId) || asset.title;
-                return <li key={asset.id} className="group flex items-center gap-3 py-2.5">
-                    <button type="button" onClick={() => void toggle(resourceId, asset.data.storageKey)} aria-label={`${playing === resourceId ? "暂停" : "试听"} ${title}`} className={`grid size-8 shrink-0 place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] ${playing === resourceId ? "bg-[var(--workspace-accent)] text-background" : "bg-foreground/[.06] text-foreground/70 hover:bg-foreground/[.1]"}`}>
-                        {playing === resourceId ? <Pause className="size-3.5" /> : <Play className="size-3.5 translate-x-px" />}
-                    </button>
-                    <span className="min-w-0 flex-1">
-                        <span className="block truncate text-[13px] font-medium">{title}</span>
-                        <span className="text-[11px] text-foreground/40">{seconds ? `${seconds} 秒` : "音频"}</span>
-                    </span>
-                    {current ? <span className="inline-flex items-center gap-1 text-xs font-medium text-foreground/70"><Check className="size-3.5" />使用中</span> : (
-                        <button type="button" disabled={Boolean(busyKey)} onClick={() => onPick(resourceId, title)} className="rounded-md px-2.5 py-1 text-xs font-medium text-foreground/55 opacity-0 outline-none transition hover:bg-foreground/[.07] hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] group-hover:opacity-100 disabled:cursor-wait">
-                            {busyKey === resourceId ? <Loader2 className="size-3.5 animate-spin" /> : "使用"}
+    return (
+        <div className="space-y-4">
+            <div className="flex gap-2">
+                <div className="min-w-0 flex-1">
+                    <SearchField value={keyword} placeholder="搜索素材库音频" onChange={setKeyword} />
+                </div>
+                <FilePicker accept="audio/*" onFile={onUpload}>
+                    {(open) => (
+                        <button
+                            type="button"
+                            onClick={open}
+                            disabled={Boolean(busyKey)}
+                            aria-label="上传本地音频"
+                            title="上传本地音频"
+                            className="grid size-8 shrink-0 place-items-center rounded-md bg-foreground/[.05] text-foreground/60 outline-none transition-colors hover:bg-foreground/[.09] hover:text-foreground focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] disabled:cursor-wait"
+                        >
+                            {busyKey === "upload" ? <Loader2 className="size-4 animate-spin" /> : <Upload className="size-4" />}
                         </button>
                     )}
-                </li>;
-            })}
-        </ul>
-        <ListState loading={loading} loadingMore={loadingMore} empty={!loading && !items.length ? (query ? "没有匹配的音频" : "素材库里还没有音频，可以直接上传本地音频") : ""} />
-        <div ref={sentinelRef} />
-    </div>;
+                </FilePicker>
+            </div>
+            <ul className="divide-y divide-border/60">
+                {items.map((asset) => {
+                    const resourceId = resourceIdFromStorageKey(asset.data.storageKey);
+                    const current = resourceId === currentResourceId;
+                    const seconds = asset.data.durationMs ? Math.round(asset.data.durationMs / 1000) : 0;
+                    const title = canvasTitles?.get(resourceId) || asset.title;
+                    return (
+                        <li key={asset.id} className="group flex items-center gap-3 py-2.5">
+                            <button
+                                type="button"
+                                onClick={() => void toggle(resourceId, asset.data.storageKey)}
+                                aria-label={`${playing === resourceId ? "暂停" : "试听"} ${title}`}
+                                className={`grid size-8 shrink-0 place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] ${playing === resourceId ? "bg-[var(--workspace-accent)] text-background" : "bg-foreground/[.06] text-foreground/70 hover:bg-foreground/[.1]"}`}
+                            >
+                                {playing === resourceId ? <Pause className="size-3.5" /> : <Play className="size-3.5 translate-x-px" />}
+                            </button>
+                            <span className="min-w-0 flex-1">
+                                <span className="block truncate text-[13px] font-medium">{title}</span>
+                                <span className="text-[11px] text-foreground/40">{seconds ? `${seconds} 秒` : "音频"}</span>
+                            </span>
+                            {current ? (
+                                <span className="inline-flex items-center gap-1 text-xs font-medium text-foreground/70">
+                                    <Check className="size-3.5" />
+                                    使用中
+                                </span>
+                            ) : (
+                                <button
+                                    type="button"
+                                    disabled={Boolean(busyKey)}
+                                    onClick={() => onPick(resourceId, title)}
+                                    className="rounded-md px-2.5 py-1 text-xs font-medium text-foreground/55 opacity-0 outline-none transition hover:bg-foreground/[.07] hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--workspace-accent)] group-hover:opacity-100 disabled:cursor-wait"
+                                >
+                                    {busyKey === resourceId ? <Loader2 className="size-3.5 animate-spin" /> : "使用"}
+                                </button>
+                            )}
+                        </li>
+                    );
+                })}
+            </ul>
+            <ListState loading={loading} loadingMore={loadingMore} empty={!loading && !items.length ? (query ? "没有匹配的音频" : "素材库里还没有音频，可以直接上传本地音频") : ""} />
+            <div ref={sentinelRef} />
+        </div>
+    );
 }
diff --git a/web/test/audio-generation.test.ts b/web/test/audio-generation.test.ts
index d35564108..7b35bb8c2 100644
--- a/web/test/audio-generation.test.ts
+++ b/web/test/audio-generation.test.ts
@@ -1,14 +1,15 @@
 import { describe, expect, test } from "bun:test";
 import { doubaoAudioVoiceOptions, isDoubaoAudioConfig, normalizeAudioVoiceForConfig, normalizeAudioVoiceValue } from "../src/lib/audio-generation";
 
-const config = (protocol: string) => ({
-    provider: "custom",
-    model: "models/index-tts",
-    audioModel: "models/index-tts",
-    apiKey: "",
-    baseUrl: "",
-    channels: [{ models: ["index-tts"], modelCosts: [], interfaceType: protocol, baseUrl: "", apiKey: "" }],
-} as any);
+const config = (protocol: string) =>
+    ({
+        provider: "custom",
+        model: "models/index-tts",
+        audioModel: "models/index-tts",
+        apiKey: "",
+        baseUrl: "",
+        channels: [{ models: ["index-tts"], modelCosts: [], interfaceType: protocol, baseUrl: "", apiKey: "" }],
+    }) as any;
 
 describe("audio voice protocol handling", () => {
     test("keeps custom voice identifiers for non-OpenAI channels", () => {
@@ -37,5 +38,4 @@ describe("audio voice protocol handling", () => {
         const doubao = { ...config("doubao-streaming-tts"), model: "seed-audio-1.0", audioModel: "seed-audio-1.0" } as any;
         expect(normalizeAudioVoiceForConfig(doubao, "zh_male_custom_official_speaker")).toBe("zh_male_custom_official_speaker");
     });
-
 });