beauticode-dsh 1.0.7 → 1.0.13

package/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 该 Cordis 插件向 DSH Web 注入 beautiCode 浏览器客户端，并提供本机鉴权接口。支持图片、MP4、播放位置、静音、摸鱼模式以及清除背景。
 
-装好插件并运行 `dsh web` 后，侧栏「设置」上方会出现「背景」：可从文件夹选图片或 MP4、清除、开关声音、切换或删除已保存主题，以及打开「皮肤中心」安装已审核的社区皮肤。导入的图片和视频会自动进入已保存主题。网页控制台没有摸鱼；浅色/深色跟 DSH 自己的外观走。下次打开会恢复上次背景。设置 `BEAUTICODE_SKIN_CENTER` 或填写 `skin-center.json` 后，皮肤中心才会显示远程目录。
+装好插件并运行 `dsh web` 后，侧栏「设置」上方会出现「背景」：在 Windows 上点击图片或视频会打开系统文件选择器，选好后在页面内命名，背景立即应用并进入已保存主题；也可以清除、开关声音、切换或删除主题，以及打开「皮肤中心」安装已审核的社区皮肤。本地导入只在 Node 端保存绝对路径，并通过带 Range 支持的回环媒体服务读取原文件，不复制用户选择的图片或整段视频主文件。Windows 强制使用本地引用；原生选择器不可用时会明确报错，不会静默上传或复制媒体。非 Windows 环境保留兼容上传，并明确提示该模式会保存托管副本。网页控制台没有摸鱼；浅色/深色跟 DSH 自己的外观走。下次打开会恢复上次背景。设置 `BEAUTICODE_SKIN_CENTER` 或填写 `skin-center.json` 后，皮肤中心才会显示远程目录。
 
 插件也会注册对话工具（`beauticode_*`）和斜杠命令（`/bg`、`/bg-theme`、`/bg-clear`）。不需要托盘；托盘若已在跑则复用它。
 
@@ -40,7 +40,7 @@ npx @deepseek-ai/dsh web
 
 手动接入时：
 
-1. 修改 `cordis.patch.example.yml` 中的 `file:///.../index.mjs`。
+1. 修改 `cordis.patch.yml` 中的插件接入项；优先使用上面的安装命令自动完成接线。
 2. 确保 DSH 和 beautiCode 使用相同的 `BEAUTICODE_DATA_ROOT`。
 3. 自己运行 `dsh web`（或带 `--patch`）。
 4. 打开页面后用侧栏「背景」，或输入 `/bg <本机绝对路径>`，或直接跟 AI 说把某个视频/图片设为背景。

package/agent.mjs

@@ -61,15 +61,20 @@ async function chineseError(error) {
   return raw || "操作失败。";
 }
 
-async function unwrapApplyResult(result, fallbackMode, message) {
-  if (!result || result.ok === false) {
-    fail(await chineseError(result?.error || "操作失败。"));
-  }
-  return {
-    ok: true,
-    generation: result.generation ?? null,
-    mode: result.mode ?? fallbackMode,
-    message,
+async function unwrapApplyResult(result, fallbackMode, message) {
+  if (!result || result.ok === false) {
+    const failure = new Error(await chineseError(result?.error || "操作失败。"));
+    if (result?.sourceMode != null) failure.sourceMode = result.sourceMode;
+    if (result?.timings != null) failure.timings = result.timings;
+    throw failure;
+  }
+  return {
+    ok: true,
+    generation: result.generation ?? null,
+    mode: result.mode ?? fallbackMode,
+    sourceMode: result.sourceMode ?? null,
+    timings: result.timings ?? null,
+    message,
     ...(result.theme
       ? {
           theme: {
@@ -98,7 +103,7 @@ function normalizeActionOptions(dataRootOrOptions) {
     : {};
 }
 
-function unwrapApply(result, fallbackMode, message) {
+function unwrapApply(result, fallbackMode, message) {
   if (!result || result.ok === false) {
     fail(result?.error || "操作失败。");
   }
@@ -116,18 +121,24 @@ function unwrapApply(result, fallbackMode, message) {
           },
         }
       : {}),
-  };
-}
-
-function presentStatus(status) {
-  return {
+  };
+}
+
+function presentStatus(status) {
+  const background = status.manifest?.background ?? status.background ?? null;
+  return {
     ok: true,
     hostReady: status.hostReady === true || status.sessions > 0,
     sessions: status.sessions ?? 0,
     fish: status.fish === true,
     muted: status.muted !== false,
     tone: status.tone ?? "dark",
-    background: status.manifest?.background ?? status.background ?? null,
+    background,
+    sourceMode: background
+      ? background.source?.kind === "local"
+        ? "local"
+        : "managed"
+      : "clear",
     themeId: typeof status.themeId === "string" && status.themeId ? status.themeId : null,
     message: formatStatusText(status),
   };
@@ -167,21 +178,26 @@ export function createBeauticodeActions(dataRootOrOptions) {
       }
       const effects = effectsForPreset(options?.effects?.preset) || options?.effects || null;
       const persistTheme = options?.persistTheme !== false;
-      const themeName =
-        String(options?.themeName ?? "").trim() ||
-        themeNameFromFilePath(inspected.path, "图片");
-      const input = { type: "image", imagePath: inspected.path };
-      if (effects) input.effects = effects;
-      const resolved = await backend();
-      if (resolved.kind === "tray") {
-        const body = { imagePath: inspected.path, persistTheme, themeName };
-        if (effects) body.effects = effects;
-        const result = await request({
-          method: "POST",
-          path: "/apply/image",
-          body,
-          signal,
-        });
+      const themeName =
+        String(options?.themeName ?? "").trim() ||
+        themeNameFromFilePath(inspected.path, "图片");
+      const source = options?.source === "managed" ? "managed" : "local";
+      const input = { type: "image", imagePath: inspected.path, source };
+      if (effects) input.effects = effects;
+      const resolved = await backend();
+      if (resolved.kind === "tray") {
+        const result = await request({
+          method: "POST",
+          path: persistTheme ? "/theme/apply" : "/apply/image",
+          body: persistTheme
+            ? { name: themeName, input }
+            : {
+                imagePath: inspected.path,
+                source,
+                ...(effects ? { effects } : {}),
+              },
+          signal,
+        });
         return unwrapApplyResult(
           result,
           "image",
@@ -189,10 +205,10 @@ export function createBeauticodeActions(dataRootOrOptions) {
             ? `已将「${result.theme?.name || themeName}」设为背景。`
             : "已将图片设为背景。",
         );
-      }
-      const applied = persistTheme
-        ? await resolved.session.applyImportedMedia(input, { name: themeName })
-        : await resolved.session.apply(input);
+      }
+      const applied = persistTheme
+        ? await resolved.session.applyAndSaveTheme(input, themeName)
+        : await resolved.session.apply(input);
       return unwrapApplyResult(
         applied,
         "image",
@@ -245,11 +261,12 @@ export function createBeauticodeActions(dataRootOrOptions) {
         fail("beauticode_apply_video 只接受 .mp4 文件。");
       }
       const persistTheme = input?.persistTheme !== false;
-      const themeName =
-        String(input?.themeName ?? "").trim() ||
-        themeNameFromFilePath(inspected.path, "视频");
-      const body = { videoPath: inspected.path, persistTheme, themeName };
-      const localInput = { type: "video", videoPath: inspected.path };
+      const themeName =
+        String(input?.themeName ?? "").trim() ||
+        themeNameFromFilePath(inspected.path, "视频");
+      const source = input?.source === "managed" ? "managed" : "local";
+      const body = { videoPath: inspected.path, persistTheme, themeName, source };
+      const localInput = { type: "video", videoPath: inspected.path, source };
       if (typeof input.poster === "string" && input.poster.trim()) {
         const poster = await inspectLocalMedia(input.poster);
         if (!poster.ok) fail(poster.error);
@@ -265,14 +282,14 @@ export function createBeauticodeActions(dataRootOrOptions) {
         body.startAt = startAt;
         localInput.startAt = startAt;
       }
-      const resolved = await backend();
-      if (resolved.kind === "tray") {
-        const result = await request({
-          method: "POST",
-          path: "/apply/video",
-          body,
-          signal,
-        });
+      const resolved = await backend();
+      if (resolved.kind === "tray") {
+        const result = await request({
+          method: "POST",
+          path: persistTheme ? "/theme/apply" : "/apply/video",
+          body: persistTheme ? { name: themeName, input: localInput } : body,
+          signal,
+        });
         return unwrapApplyResult(
           result,
           "video",
@@ -280,10 +297,10 @@ export function createBeauticodeActions(dataRootOrOptions) {
             ? `已将「${result.theme?.name || themeName}」设为背景。`
             : "已将视频设为背景。",
         );
-      }
-      const applied = persistTheme
-        ? await resolved.session.applyImportedMedia(localInput, { name: themeName })
-        : await resolved.session.apply(localInput);
+      }
+      const applied = persistTheme
+        ? await resolved.session.applyAndSaveTheme(localInput, themeName)
+        : await resolved.session.apply(localInput);
       return unwrapApplyResult(
         applied,
         "video",

package/client.js

@@ -197,25 +197,103 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     });
   }
 
-  function waitForVideo(video) {
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) return Promise.resolve();
-    return new Promise((resolve, reject) => {
-      const done = () => {
-        cleanup();
-        resolve();
-      };
-      const failed = () => {
-        cleanup();
-        reject(new Error("MP4 加载或解码失败"));
-      };
-      const cleanup = () => {
-        video.removeEventListener("loadeddata", done);
-        video.removeEventListener("error", failed);
-      };
+  function describeVideoState(video, phase) {
+    const mediaErrorNames = {
+      1: "MEDIA_ERR_ABORTED",
+      2: "MEDIA_ERR_NETWORK",
+      3: "MEDIA_ERR_DECODE",
+      4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
+    };
+    const code = Number(video?.error?.code) || 0;
+    const mediaError = code ? mediaErrorNames[code] || `MEDIA_ERR_${code}` : "none";
+    return `${phase}；mediaError=${mediaError}；readyState=${video?.readyState ?? -1}；networkState=${video?.networkState ?? -1}；paused=${Boolean(video?.paused)}`;
+  }
+
+  function waitForVideo(video, timeoutMs = 20_000) {
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+      const done = () => {
+        cleanup();
+        resolve();
+      };
+      const failed = () => {
+        cleanup();
+        reject(new Error(describeVideoState(video, "MP4 加载或解码失败")));
+      };
+      const timer = setTimeout(() => {
+        cleanup();
+        reject(new Error(describeVideoState(video, "等待视频首帧超时")));
+      }, timeoutMs);
+      const cleanup = () => {
+        clearTimeout(timer);
+        video.removeEventListener("loadeddata", done);
+        video.removeEventListener("error", failed);
+      };
       video.addEventListener("loadeddata", done, { once: true });
       video.addEventListener("error", failed, { once: true });
-    });
-  }
+    });
+  }
+
+  function waitForStablePlayback(video, timeoutMs = 8_000) {
+    return new Promise((resolve, reject) => {
+      const startedAt = performance.now();
+      const initialTime = Number.isFinite(video.currentTime) ? video.currentTime : 0;
+      let frameSeen = false;
+      let settled = false;
+      let frameRequest = null;
+
+      const cleanup = () => {
+        clearInterval(timer);
+        video.removeEventListener("playing", check);
+        video.removeEventListener("timeupdate", check);
+        video.removeEventListener("error", failed);
+        if (frameRequest != null && typeof video.cancelVideoFrameCallback === "function") {
+          video.cancelVideoFrameCallback(frameRequest);
+        }
+      };
+      const finish = (error) => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        if (error) reject(error);
+        else resolve();
+      };
+      const failed = () => {
+        finish(new Error(describeVideoState(video, "视频解码器报告失败")));
+      };
+      const check = () => {
+        if (settled) return;
+        if (video.error) {
+          failed();
+          return;
+        }
+        const progressed =
+          Number.isFinite(video.currentTime) && video.currentTime >= initialTime + 0.08;
+        if (
+          video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA &&
+          !video.paused &&
+          (frameSeen || progressed)
+        ) {
+          finish();
+          return;
+        }
+        if (performance.now() - startedAt >= timeoutMs) {
+          finish(new Error(describeVideoState(video, "视频未在稳定窗口内输出首帧")));
+        }
+      };
+      const timer = setInterval(check, 100);
+      video.addEventListener("playing", check);
+      video.addEventListener("timeupdate", check);
+      video.addEventListener("error", failed, { once: true });
+      if (typeof video.requestVideoFrameCallback === "function") {
+        frameRequest = video.requestVideoFrameCallback(() => {
+          frameSeen = true;
+          check();
+        });
+      }
+      check();
+    });
+  }
 
   function seekVideo(video, value) {
     const requested = Number(value);
@@ -299,11 +377,13 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
       video.poster = payload.imageUrl;
       video.src = payload.videoUrl;
       node.replaceChildren(image, video);
-      await waitForVideo(video);
-      if (activePayload !== payload) return;
-      seekVideo(video, payload.startAt);
-      await playWithPreference(video);
-      document.documentElement.dataset.bcActive = "true";
+      await waitForVideo(video);
+      if (activePayload !== payload) return;
+      seekVideo(video, payload.startAt);
+      await playWithPreference(video);
+      await waitForStablePlayback(video);
+      if (activePayload !== payload) return;
+      document.documentElement.dataset.bcActive = "true";
       document.documentElement.dataset.bcMedia = "video";
       const visible = video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && !video.paused;
       await acknowledgeRender(payload, visible, visible, visible ? null : "视频未开始播放");

package/console.js

@@ -34,14 +34,27 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-toggle:hover{ba
 body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-list{border-color:rgba(0,0,0,.08);background:#f4f6f8}
 #beauticode-console-pop .bc-theme-row{display:flex;gap:4px;align-items:center}
 #beauticode-console-pop .bc-theme-item{cursor:pointer;display:block;flex:1;min-width:0;height:32px;padding:0 8px;border:none;border-radius:8px;background:transparent;color:inherit;font-size:13px;line-height:32px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#beauticode-console-pop .bc-theme-item:hover{background:rgba(255,255,255,.08)}
-body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-item:hover{background:rgba(0,0,0,.06)}
+#beauticode-console-pop .bc-theme-item:hover{background:rgba(255,255,255,.08)}
+body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-item:hover{background:rgba(0,0,0,.06)}
+#beauticode-console-pop .bc-source{margin-left:6px;font-size:11px;opacity:.62}
 #beauticode-console-pop .bc-theme-del{cursor:pointer;flex:none;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:inherit;font-size:12px;opacity:.72}
 #beauticode-console-pop .bc-theme-del:hover{background:rgba(255,255,255,.08);opacity:1}
 body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{background:rgba(0,0,0,.06)}
-#beauticode-console-pop .bc-msg{color:var(--dsw-alias-label-secondary,#9aa3ad);font-size:12px;line-height:16px;margin:6px 0 0;max-height:3.2em;overflow:hidden}
-#beauticode-console-file{display:none !important}
-`;
+#beauticode-console-pop .bc-msg{color:var(--dsw-alias-label-secondary,#9aa3ad);font-size:12px;line-height:16px;margin:6px 0 0;max-height:3.2em;overflow:hidden}
+#beauticode-console-file{display:none !important}
+#beauticode-name-dialog{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.42);font:inherit}
+#beauticode-name-dialog .bc-name-card{display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 48px));padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#2c323c;color:#e8eaed;box-shadow:0 18px 60px rgba(0,0,0,.35)}
+#beauticode-name-dialog .bc-name-title{margin:0;font-size:15px;font-weight:600}
+#beauticode-name-dialog .bc-name-file,#beauticode-name-dialog .bc-name-note,#beauticode-name-dialog .bc-name-error{margin:0;color:#aeb7c3;font-size:12px;line-height:18px;overflow-wrap:anywhere}
+#beauticode-name-dialog .bc-name-error{color:#ff9a9a}
+#beauticode-name-dialog input{height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:13px}
+#beauticode-name-dialog .bc-name-actions{display:flex;justify-content:flex-end;gap:8px}
+#beauticode-name-dialog button{cursor:pointer;height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font:inherit}
+#beauticode-name-dialog button[data-name="confirm"]{background:#4f7cff;border-color:#4f7cff;color:#fff}
+body:not([data-ds-dark-theme]) #beauticode-name-dialog .bc-name-card{background:#fff;color:#1b1f24;border-color:rgba(0,0,0,.1)}
+body:not([data-ds-dark-theme]) #beauticode-name-dialog input,body:not([data-ds-dark-theme]) #beauticode-name-dialog button{border-color:rgba(0,0,0,.12);background:#f4f6f8}
+body:not([data-ds-dark-theme]) #beauticode-name-dialog button[data-name="confirm"]{background:#315efb;border-color:#315efb;color:#fff}
+`;
   document.head.append(style);
 
   const host = document.createElement("div");
@@ -144,7 +157,7 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
     msgEl.textContent = text;
   }
 
-  function renderStatus(data) {
+  function renderStatus(data) {
     if (!data?.ok) {
       statusEl.textContent = data?.error || "未就绪";
       return;
@@ -157,7 +170,13 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
           : data.media === "image"
             ? "图片"
             : "无背景";
-    statusEl.textContent = label;
+    const sourceLabel =
+      data.sourceMode === "local"
+        ? "本地引用"
+        : data.sourceMode === "managed"
+          ? "托管副本"
+          : "";
+    statusEl.textContent = sourceLabel ? `${label} · ${sourceLabel}` : label;
     if (typeof data.themeId === "string" && data.themeId) {
       currentThemeId = data.themeId;
     } else if (data.atmosphere === "gallery") {
@@ -181,7 +200,9 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
           theme.bundled === true
             ? ""
             : `<button type="button" class="bc-theme-del" data-theme-delete="${escapeAttr(theme.id)}" data-theme-name="${escapeAttr(theme.name)}" aria-label="删除 ${escapeAttr(theme.name)}">删</button>`;
-        return `<div class="bc-theme-row"><button type="button" class="bc-theme-item" data-theme-id="${escapeAttr(theme.id)}">${escapeText(theme.name)}</button>${del}</div>`;
+        const source =
+          theme.sourceMode === "local" ? "本地" : theme.bundled ? "内置" : "托管";
+        return `<div class="bc-theme-row"><button type="button" class="bc-theme-item" data-theme-id="${escapeAttr(theme.id)}">${escapeText(theme.name)}<span class="bc-source">${source}</span></button>${del}</div>`;
       })
       .join("");
     const selected = themes.find((theme) => theme.id === currentThemeId);
@@ -206,9 +227,12 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
         ...(init?.headers || {}),
       },
     });
-    const body = await response.json().catch(() => null);
-    if (!response.ok || body?.ok === false) {
-      throw new Error(body?.error || `请求失败（${response.status}）`);
+    const body = await response.json().catch(() => null);
+    if (!response.ok || body?.ok === false) {
+      const error = new Error(body?.error || `请求失败（${response.status}）`);
+      error.status = response.status;
+      error.code = body?.code || "";
+      throw error;
     }
     return body;
   }
@@ -222,44 +246,138 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
   }
 
   async function run(task) {
-    if (busy) return;
-    busy = true;
+    if (busy) return;
+    busy = true;
+    let afterRun = null;
     for (const button of pop.querySelectorAll(".bc-btn, .bc-theme-toggle, .bc-theme-item, .bc-theme-del")) button.disabled = true;
     showMessage("");
     try {
-      const result = await task();
-      if (result?.theme?.id) currentThemeId = result.theme.id;
-      if (result?.message) showMessage(result.message);
+      const result = await task();
+      if (typeof result?.afterRun === "function") afterRun = result.afterRun;
+      if (result?.theme?.id) currentThemeId = result.theme.id;
+      if (result?.message) {
+        const source =
+          result.sourceMode === "local"
+            ? "本地引用，未复制主媒体"
+            : result.sourceMode === "managed"
+              ? "托管副本"
+              : "";
+        const totalMs = Number(result.importTimings?.applyAndSaveMs ?? result.timings?.totalMs);
+        const duration = Number.isFinite(totalMs) ? `${Math.round(totalMs)} ms` : "";
+        showMessage([result.message, source, duration].filter(Boolean).join(" · "));
+      }
       await refresh();
     } catch (error) {
       showMessage(error instanceof Error ? error.message : String(error));
     } finally {
-      busy = false;
-      for (const button of pop.querySelectorAll(".bc-btn, .bc-theme-toggle, .bc-theme-item, .bc-theme-del")) button.disabled = false;
+      busy = false;
+      for (const button of pop.querySelectorAll(".bc-btn, .bc-theme-toggle, .bc-theme-item, .bc-theme-del")) button.disabled = false;
     }
+    if (afterRun) queueMicrotask(afterRun);
+  }
+
+  function validateThemeName(value) {
+    const name = String(value || "").trim();
+    if (!name) return "主题名不能为空。";
+    if (name.length > 80) return "主题名不能超过 80 个字符。";
+    if (/[<>:"/\\|?*]/.test(name) || /[\u0000-\u001f]/.test(name)) {
+      return '主题名不能包含 < > : " / \\ | ? * 或控制字符。';
+    }
+    return "";
   }
 
-  function askThemeName(fileName) {
+  function defaultThemeName(fileName) {
     const suggested = String(fileName || "")
       .replace(/\.[^.]+$/, "")
       .trim()
       .slice(0, 80);
-    const entered = window.prompt("请给该主题取个名字（1–80 个字符）：", suggested);
-    if (entered == null) return null;
-    const name = entered.trim();
-    if (!name) {
-      showMessage("主题名不能为空。");
-      return null;
-    }
-    if (name.length > 80) {
-      showMessage("主题名不能超过 80 个字符。");
-      return null;
-    }
-    if (/[<>:"/\\|?*]/.test(name) || /[\u0000-\u001f]/.test(name)) {
-      showMessage('主题名不能包含 < > : " / \\ | ? * 或控制字符。');
-      return null;
+    return suggested || "新主题";
+  }
+
+  function askThemeName(fileName, suggestedName, options = {}) {
+    return new Promise((resolve) => {
+      const dialog = document.createElement("div");
+      dialog.id = "beauticode-name-dialog";
+      dialog.innerHTML =
+        '<div class="bc-name-card" role="dialog" aria-modal="true" aria-labelledby="beauticode-name-title">' +
+        '<p id="beauticode-name-title" class="bc-name-title">给主题取个名字</p>' +
+        `<p class="bc-name-file">${escapeText(fileName)}</p>` +
+        (options.compatibilityUpload
+          ? '<p class="bc-name-note">原生选择器不可用，兼容模式会复制媒体文件。</p>'
+          : "") +
+        `<input type="text" maxlength="80" aria-label="主题名称" value="${escapeAttr(suggestedName || defaultThemeName(fileName))}"/>` +
+        '<p class="bc-name-error" hidden></p>' +
+        '<div class="bc-name-actions"><button type="button" data-name="cancel">取消</button><button type="button" data-name="confirm">保存并应用</button></div>' +
+        "</div>";
+      document.body.append(dialog);
+      const input = dialog.querySelector('input[aria-label="主题名称"]');
+      const errorEl = dialog.querySelector(".bc-name-error");
+      let closed = false;
+
+      const close = (value) => {
+        if (closed) return;
+        closed = true;
+        dialog.remove();
+        resolve(value);
+      };
+      const confirm = () => {
+        const error = validateThemeName(input.value);
+        if (error) {
+          errorEl.hidden = false;
+          errorEl.textContent = error;
+          input.focus();
+          return;
+        }
+        close(input.value.trim());
+      };
+      dialog.querySelector('[data-name="confirm"]').addEventListener("click", confirm);
+      dialog.querySelector('[data-name="cancel"]').addEventListener("click", () => close(null));
+      input.addEventListener("input", () => {
+        errorEl.hidden = true;
+        errorEl.textContent = "";
+      });
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") confirm();
+        if (event.key === "Escape") close(null);
+      });
+      dialog.addEventListener("click", (event) => {
+        if (event.target === dialog) close(null);
+      });
+      input.focus();
+      input.select();
+    });
+  }
+
+  async function pickAndImport(kind) {
+    let picked;
+    try {
+      picked = await request("/__beauticode/ui/pick", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ kind }),
+      });
+    } catch (error) {
+      if (error?.code !== "native_picker_unavailable") throw error;
+      return {
+        ok: true,
+        afterRun: () => {
+          fileInput.accept = kind === "video" ? VIDEO_ACCEPT : IMAGE_ACCEPT;
+          fileInput.dataset.compatibilityUpload = "true";
+          fileInput.click();
+        },
+      };
     }
-    return name;
+    if (picked.cancelled) return { ok: true };
+    const themeName = await askThemeName(
+      picked.name,
+      picked.suggestedThemeName,
+    );
+    if (!themeName) return { ok: true };
+    return request("/__beauticode/ui/import-selected", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ selectionId: picked.selectionId, themeName }),
+    });
   }
 
   trigger.addEventListener("click", (event) => {
@@ -267,12 +385,10 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
     setOpen(pop.hidden);
   });
   pop.querySelector('[data-act="image"]').addEventListener("click", () => {
-    fileInput.accept = IMAGE_ACCEPT;
-    fileInput.click();
+    void run(() => pickAndImport("image"));
   });
   pop.querySelector('[data-act="video"]').addEventListener("click", () => {
-    fileInput.accept = VIDEO_ACCEPT;
-    fileInput.click();
+    void run(() => pickAndImport("video"));
   });
   pop.querySelector('[data-act="gallery"]').addEventListener("click", (event) => {
     event.stopPropagation();
@@ -338,21 +454,25 @@ body:not([data-ds-dark-theme]) #beauticode-console-pop .bc-theme-del:hover{backg
   });
   fileInput.addEventListener("change", () => {
     const file = fileInput.files?.[0];
+    const compatibilityUpload = fileInput.dataset.compatibilityUpload === "true";
     fileInput.value = "";
+    delete fileInput.dataset.compatibilityUpload;
     if (!file) return;
-    const themeName = askThemeName(file.name);
-    if (!themeName) return;
-    void run(() =>
-      request("/__beauticode/ui/import", {
+    void run(async () => {
+      const themeName = await askThemeName(file.name, defaultThemeName(file.name), {
+        compatibilityUpload,
+      });
+      if (!themeName) return { ok: true };
+      return request("/__beauticode/ui/import", {
         method: "POST",
         headers: {
           "x-beauticode-filename": encodeURIComponent(file.name),
-          "x-beauticode-theme-name": encodeURIComponent(themeName),
+          "x-beauticode-theme-name": encodeURIComponent(themeName),
         },
         body: file,
-      }),
-    );
-  });
+      });
+    });
+  });
 
   document.addEventListener("click", (event) => {
     if (pop.hidden) return;

package/control-client.mjs

@@ -505,10 +505,12 @@ export async function callDshControl(dataRoot, spec) {
       typeof payload?.error === "string"
         ? payload.error
         : `托盘请求失败（HTTP ${response.status}）。`;
-    const error = new Error(message);
-    error.statusCode = response.status;
-    error.payload = payload;
-    throw error;
+    const error = new Error(message);
+    error.statusCode = response.status;
+    error.payload = payload;
+    if (payload?.sourceMode != null) error.sourceMode = payload.sourceMode;
+    if (payload?.timings != null) error.timings = payload.timings;
+    throw error;
   }
   return payload;
 }