zcode-pro 1.4.0 → 1.4.1

package/README.en.md

@@ -37,8 +37,8 @@ Grouped by where each feature lives in the settings window: the category column
 | | UI style adjustments | Fine-tune paragraph spacing, content width, line heights, list/quote/table spacing and cell padding; focusing an input highlights the affected areas; applies instantly |
 | Appearance · Status bar | Status bar statistics | Shows statistics at the bottom-right of the input box and at the end of each answer: context usage (color-shifts when high), questions asked, today/total tokens and task count, all from official data; reorder or hide each item under Settings → Appearance → Status bar |
 | | Per-turn token usage | Shows that turn's in/out tokens and cache hit rate after the time in each answer's action row (local records keep only a recent window; older answers stay unlabelled) |
-| Appearance · Theme | UI skins | Eleven famous editor theme palettes (Dracula / Nord / Tokyo Night / Catppuccin / Gruvbox / One Dark / Solarized / Rosé Pine / Everforest / Night Owl / Kanagawa), each with light and dark variants that follow ZCode's current mode automatically; plus a custom theme: five anchor colors per mode derive the whole palette, applying live |
-| Appearance · Background | Background image | Window-wide background from four sources: none / local library (upload many, pick the active one, delete freely) / folder (read in place, rotate on a timer, random or by filename) / URL (refresh on a timer for random-image APIs); single visibility slider; sidebar, chat and composer reveal the background while menus and dialogs stay opaque; the library uploads with the zcode-pro WebDAV sync group (overwrite, no history versions) |
+| Appearance · Theme | UI skins | Eleven famous editor theme palettes (Dracula / Nord / Tokyo Night / Catppuccin / Gruvbox / One Dark / Solarized / Rosé Pine / Everforest / Night Owl / Kanagawa), auto-matching ZCode's light / dark mode; plus a custom theme: pick 5 colors each for light and dark to derive the whole palette, applying live |
+| Appearance · Background | Background image | Window-wide background from four sources: none / local library (upload many, pick the active one, delete freely) / folder (read in place, rotate on a timer, random or by filename) / URL (refresh on a timer for random-image APIs); three sliders — mask opacity (image fading toward the theme background color), image blur, panel opacity (sidebar/panels/tab bar); sidebar, chat and composer reveal the background while menus and dialogs stay opaque; the library uploads with the zcode-pro WebDAV sync group (overwrite, no history versions) |
 | Performance | Idle project memory reclaim | Projects unused for a while with no running tasks release their memory automatically, and unused ones are reclaimed once after startup; sessions are untouched and reload when reopened (durations adjustable) |
 | Proxy | Software proxy | Set an HTTP proxy for plugin updates/installs and tool upgrades, with connectivity test |
 | Sync | Settings sync | Manually back up ZCode Pro settings and model settings to WebDAV, or restore them on a new computer; transfers only on click |

package/README.md

@@ -37,8 +37,8 @@ ZCode 桌面版界面增强工具。不修改客户端文件，通过 ZCode Pro
 | | 界面样式调整 | 微调段落间距、内容宽度、各类行高、列表/引用块/表格间距与单元格边距；聚焦输入框时高亮预览受影响区域，即改即生效 |
 | 外观 · 状态栏 | 状态栏统计 | 提问输入框右下角和每轮回答最后显示统计项：上下文占用（占用高时变色）、提问次数、今日/累计 token、任务总数，全部取自官方数据；各项的顺序与显隐在 设置 → 外观 → 状态栏 调整 |
 | | 每轮回答 token 用量 | 在每条回答末尾操作按钮的时间后面显示该轮的输入/输出 token 与缓存命中率（本地记录只保留最近一段，更早的回答不标注） |
-| 外观 · 主题 | 界面皮肤 | 内置 11 套知名编辑器主题配色（Dracula / Nord / Tokyo Night / Catppuccin / Gruvbox / One Dark / Solarized / Rosé Pine / Everforest / Night Owl / Kanagawa），每套含明、暗两套变体，跟随 ZCode 当前明暗自动切换；另可自定义主题：明暗各五个锚点色派生整套配色，改色实时生效 |
-| 外观 · 背景图 | 背景图 | 整窗铺背景，四种来源：无背景 / 本地图库（可传多张、点选当前、可单删）/ 文件夹（原地读取，按间隔定时轮换，可选随机或按文件名顺序）/ 网址（可按间隔定时刷新，配合随机图 API）；可见度单滑杆调节；侧栏 / 会话流 / 输入框透出背景，弹窗与菜单保持不透明保可读；图库随 WebDAV 同步的 zcode-pro 组一起上传（覆盖式，不留历史版本） |
+| 外观 · 主题 | 界面皮肤 | 内置 11 套知名编辑器主题配色（Dracula / Nord / Tokyo Night / Catppuccin / Gruvbox / One Dark / Solarized / Rosé Pine / Everforest / Night Owl / Kanagawa），自动匹配 ZCode 的浅色 / 深色模式；另可自定义主题：浅色、深色各选 5 个颜色生成整套配色，改色实时生效 |
+| 外观 · 背景图 | 背景图 | 整窗铺背景，四种来源：无背景 / 本地图库（可传多张、点选当前、可单删）/ 文件夹（原地读取，按间隔定时轮换，可选随机或按文件名顺序）/ 网址（可按间隔定时刷新，配合随机图 API）；遮罩不透明度（图片向主题背景色淡化程度）、图片模糊、面板不透明度（侧栏、面板与标签栏的不透明程度）三个滑杆调节；侧栏 / 会话流 / 输入框透出背景，弹窗与菜单保持不透明保可读；图库随 WebDAV 同步的 zcode-pro 组一起上传（覆盖式，不留历史版本） |
 | 性能 | 空闲项目内存回收 | 长时间未使用且无任务运行的项目自动释放其占用的内存，启动后也会自动回收一次未使用的项目；会话记录不受影响，再次打开时自动恢复（时长可调） |
 | 代理 | 软件代理 | 为插件更新安装与本体升级设置 HTTP 代理，附连通性检测 |
 | 同步 | 设置同步 | 手动把 ZCode Pro 设置与模型设置备份到 WebDAV，或在新电脑上恢复；仅在点击时传输 |

package/dist/inject.js

@@ -304,12 +304,12 @@
     themeBgRegionRight: "\u53F3\u4FA7\u8FB9\u680F",
     themeBgPane: "\u80CC\u666F\u56FE",
     themeSkinTitle: "\u76AE\u80A4",
-    themeSkinDesc: "\u77E5\u540D\u7F16\u8F91\u5668\u4E3B\u9898\u914D\u8272\uFF0C\u660E\u6697\u4E24\u5957\u53D8\u4F53\u8DDF\u968F ZCode \u5F53\u524D\u660E\u6697\u81EA\u52A8\u5207\u6362\uFF1B\u9ED8\u8BA4\u4FDD\u6301 ZCode \u539F\u6837\uFF0C\u81EA\u5B9A\u4E49\u5728\u4E0B\u65B9\u81EA\u884C\u8C03\u8272\u3002",
+    themeSkinDesc: "\u77E5\u540D\u7F16\u8F91\u5668\u4E3B\u9898\u914D\u8272\uFF0C\u81EA\u52A8\u5339\u914D ZCode \u7684\u6D45\u8272 / \u6DF1\u8272\u6A21\u5F0F\uFF1B\u9ED8\u8BA4\u4FDD\u6301 ZCode \u539F\u6837\uFF0C\u81EA\u5B9A\u4E49\u5728\u4E0B\u65B9\u81EA\u884C\u8C03\u8272\u3002",
     themeSkinCustom: "\u81EA\u5B9A\u4E49",
     themeCustomTitle: "\u81EA\u5B9A\u4E49\u4E3B\u9898",
-    themeCustomHint: "\u6539\u989C\u8272\u5373\u5B9E\u65F6\u751F\u6548\uFF08\u81EA\u52A8\u5207\u5230\u81EA\u5B9A\u4E49\u76AE\u80A4\uFF09\uFF1B\u6BCF\u5957\u542B\u660E\u3001\u6697\u4E24\u4E2A\u53D8\u4F53\uFF0C\u4E94\u4E2A\u951A\u70B9\u8272\u6D3E\u751F\u6574\u5957\u754C\u9762\u914D\u8272\u3002",
-    themeCustomLight: "\u660E\u8272\u53D8\u4F53",
-    themeCustomDark: "\u6697\u8272\u53D8\u4F53",
+    themeCustomHint: "\u6539\u989C\u8272\u5373\u5B9E\u65F6\u751F\u6548\uFF08\u81EA\u52A8\u5207\u5230\u81EA\u5B9A\u4E49\u76AE\u80A4\uFF09\uFF1B\u6D45\u8272\u3001\u6DF1\u8272\u5404\u914D\u4E00\u6B21\uFF0C\u9009\u597D 5 \u4E2A\u989C\u8272\u5373\u53EF\u751F\u6210\u6574\u5957\u754C\u9762\u914D\u8272\u3002",
+    themeCustomLight: "\u6D45\u8272",
+    themeCustomDark: "\u6DF1\u8272",
     themeCustomBg: "\u80CC\u666F",
     themeCustomCard: "\u5361\u7247",
     themeCustomFg: "\u6B63\u6587",
@@ -341,7 +341,12 @@
     themeBgFitContain: "\u9002\u5E94",
     themeBgFitFill: "\u62C9\u4F38",
     themeBgFitTile: "\u5E73\u94FA",
-    themeVisibility: "\u80CC\u666F\u53EF\u89C1\u5EA6",
+    themeBgMask: "\u906E\u7F69\u4E0D\u900F\u660E\u5EA6",
+    themeBgMaskHint: "\u6570\u503C\u8D8A\u9AD8\uFF0C\u56FE\u7247\u8D8A\u5411\u4E3B\u9898\u80CC\u666F\u8272\u6DE1\u5316\uFF0C\u6587\u5B57\u5BF9\u6BD4\u8D8A\u6E05\u6670",
+    themeBgMaskHint2: "\u56FE\u7247\u5411\u4E3B\u9898\u80CC\u666F\u8272\u6DE1\u5316\u7684\u7A0B\u5EA6",
+    themeBgBlur: "\u56FE\u7247\u6A21\u7CCA",
+    themeBgPanel: "\u9762\u677F\u4E0D\u900F\u660E\u5EA6",
+    themeBgPanelHint: "\u4FA7\u680F\u3001\u9762\u677F\u4E0E\u6807\u7B7E\u680F\u7684\u4E0D\u900F\u660E\u7A0B\u5EA6\u3002\u8D8A\u4F4E\uFF0C\u900F\u51FA\u7684\u56FE\u7247\u8D8A\u591A\u3002",
     themeBgDeletedActive: "\u5F53\u524D\u80CC\u666F\u5DF2\u5220\u9664\uFF0C\u5DF2\u81EA\u52A8\u505C\u7528\u80CC\u666F",
     sbItemCtx: "\u4E0A\u4E0B\u6587\u5360\u7528",
     sbItemQuestions: "\u63D0\u95EE\u6B21\u6570",
@@ -805,12 +810,12 @@
     themeBgRegionRight: "Right sidebar",
     themeBgPane: "Background",
     themeSkinTitle: "Skins",
-    themeSkinDesc: 'Famous editor theme palettes; light and dark variants follow ZCode\u2019s current mode automatically; "Default" keeps ZCode as-is, "Custom" is tuned below.',
+    themeSkinDesc: 'Famous editor theme palettes, auto-matching ZCode\u2019s light / dark mode; "Default" keeps ZCode as-is, "Custom" is tuned below.',
     themeSkinCustom: "Custom",
     themeCustomTitle: "Custom theme",
-    themeCustomHint: "Color changes apply live (auto-switches to the custom skin); light and dark variants, five anchor colors derive the whole palette.",
-    themeCustomLight: "Light variant",
-    themeCustomDark: "Dark variant",
+    themeCustomHint: "Color changes apply live (auto-switches to the custom skin); set light and dark separately \u2014 pick 5 colors and the whole palette is derived.",
+    themeCustomLight: "Light",
+    themeCustomDark: "Dark",
     themeCustomBg: "Background",
     themeCustomCard: "Card",
     themeCustomFg: "Text",
@@ -842,7 +847,12 @@
     themeBgFitContain: "Fit",
     themeBgFitFill: "Stretch",
     themeBgFitTile: "Tile",
-    themeVisibility: "Background visibility",
+    themeBgMask: "Mask opacity",
+    themeBgMaskHint: "Higher values fade the image toward the theme background color for clearer text",
+    themeBgMaskHint2: "How much the image fades toward the theme background color",
+    themeBgBlur: "Image blur",
+    themeBgPanel: "Panel opacity",
+    themeBgPanelHint: "Opacity of sidebar, panels and tab bar. Lower reveals more of the image.",
     themeBgDeletedActive: "Active background was deleted; background disabled",
     sbItemCtx: "Context usage",
     sbItemQuestions: "Questions asked",
@@ -1258,8 +1268,8 @@
     clearTimeout(toastTimer);
     toastTimer = setTimeout(() => el.remove(), kind === "error" ? 5e3 : 2600);
   }
-  var overlayClass = "fixed inset-0 isolate z-50 flex items-center justify-center bg-black/60 supports-backdrop-filter:backdrop-blur-xs duration-100 p-4 platform-linux-desktop:top-12";
-  var overlayClassBare = "fixed inset-0 isolate z-50 flex items-center justify-center duration-100 p-4 platform-linux-desktop:top-12";
+  var overlayClass = "fixed inset-0 isolate z-50 flex items-start justify-center bg-black/60 supports-backdrop-filter:backdrop-blur-xs duration-100 p-4 platform-linux-desktop:top-12";
+  var overlayClassBare = "fixed inset-0 isolate z-50 flex items-start justify-center duration-100 p-4 platform-linux-desktop:top-12";
   var contentClass = "w-full sm:max-w-md rounded-2xl border-none bg-popover/98 p-5 text-ui-base/relaxed text-foreground ring-border shadow-2xl";
   var dialogStack = [];
   function openDialog({ title, description, onMount, onClose, width = "sm:max-w-md", overlay = "dim", draggable = false, posKey = "", dismissOnOutside = true, bodyClass = "", closable = false }) {
@@ -1287,7 +1297,8 @@
     const content = h("div", {
       role: "dialog",
       "aria-modal": "true",
-      class: contentClass.replace("sm:max-w-md", width) + " zcodepro-card"
+      class: contentClass.replace("sm:max-w-md", width) + " zcodepro-card",
+      style: "margin-top:12vh;max-height:calc(88vh - 3rem);overflow-y:auto;"
     });
     const overlayEl = h("div", {
       "data-overlay": overlay,
@@ -1816,6 +1827,8 @@
       -webkit-appearance: none;
       appearance: none;
       width: 100%;
+      /* \u4E0D\u7ED9 padding\uFF1Apadding \u4F1A\u7F29\u5C0F thumb \u7684\u53EF\u6ED1\u533A\u95F4\uFF08\u62D6\u4E0D\u5230\u6700\u5DE6/\u6700\u53F3\uFF09\u3002
+      \u8F68\u9053\u8D77\u70B9\u5BF9\u9F50\u7531\u5F39\u7A97\u91CC\u7684\u56FA\u5B9A\u6807\u7B7E\u5217\u5BBD\u8D1F\u8D23 */
       height: 4px;
       border-radius: 9999px;
       background: color-mix(in oklab, var(--color-foreground, #888) 18%, transparent);
@@ -4131,7 +4144,7 @@
   var bgStyleEl = null;
   var injectedKeys = /* @__PURE__ */ new Set();
   var classObserver = null;
-  var currentTheme = { skin: "default", custom: null, bg: { mode: "none", visibility: 0.8 } };
+  var currentTheme = { skin: "default", custom: null, bg: { mode: "none", maskOpacity: 0.82, blurPx: 0, panelOpacity: 0.3 } };
   var lastModeSig = "";
   var bgTimer = null;
   var regionStyleEl = null;
@@ -4240,12 +4253,15 @@
       await applyRegionBackgrounds(bg);
       return;
     }
-    const visibility = typeof bg.visibility === "number" && Number.isFinite(bg.visibility) ? Math.min(1, Math.max(0, bg.visibility)) : 0.8;
-    const alpha = 1 - visibility;
+    const num01 = (v, dflt) => typeof v === "number" && Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : dflt;
+    const maskOpacity = num01(bg.maskOpacity, 0.82);
+    const alpha = Math.min(0.99, maskOpacity);
+    const blurPx = typeof bg.blurPx === "number" && Number.isFinite(bg.blurPx) ? Math.min(24, Math.max(0, Math.round(bg.blurPx))) : 0;
+    const panelOpacity = num01(bg.panelOpacity, 0.3);
     const resolvedBg = resolvedColor("--color-background");
     const mHex = resolvedBg.match(/^rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)/);
     const rgb = mHex ? [Math.round(+mHex[1]), Math.round(+mHex[2]), Math.round(+mHex[3])].join(",") : isDarkMode() ? "13,13,13" : "248,248,248";
-    const panelMix = Math.min(100, Math.round(alpha * 100) + 10);
+    const panelMix = Math.round(panelOpacity * 100);
     if (panelMix < 100) {
       for (const t2 of SURFACE_TOKENS) {
         const v = resolvedColor(t2);
@@ -4255,7 +4271,7 @@
         }
       }
     }
-    await applyRegionBackgrounds(bg, { mask, rgb, alpha, fit: bg.fit, visibility, seq });
+    await applyRegionBackgrounds(bg, { rgb, alpha, fit: bg.fit, seq });
     if (seq !== applySeq) return;
     if (!bgActive) return;
     const FIT_CSS = {
@@ -4265,8 +4281,10 @@
       tile: "background-size:100% 100%,auto !important;background-repeat:no-repeat,repeat !important;"
     };
     const fitCss = FIT_CSS[bg.fit] || FIT_CSS.cover;
+    const blurCss = blurPx > 0 ? `filter:blur(${blurPx}px);` : "";
+    const spread = blurPx > 0 ? Math.max(20, blurPx * 2) : 0;
     const setImage = (image) => {
-      bgStyleEl.textContent = `html.zcodepro-bg-on{background-color:rgb(${rgb}) !important;background-image:linear-gradient(rgba(${rgb},${alpha}),rgba(${rgb},${alpha})),${image} !important;${fitCss}background-position:center !important;}`;
+      bgStyleEl.textContent = `html.zcodepro-bg-on{background-color:rgb(${rgb}) !important;}html.zcodepro-bg-on::before{content:'' !important;position:fixed;inset:-${spread}px;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(${rgb},${alpha}),rgba(${rgb},${alpha})),${image} !important;${fitCss}background-position:center !important;${blurCss}}`;
       root.classList.add("zcodepro-bg-on");
     };
     const helperUrl = liveBoot().helperUrl || HELPER_URL;
@@ -4325,7 +4343,7 @@
     const flush = () => {
       regionStyleEl.textContent = [...rules.values()].join("");
     };
-    const alpha = pre ? pre.alpha : 0.2;
+    const alpha = pre ? pre.alpha : 0.82;
     const rgb = pre ? pre.rgb : "13,13,13";
     const FIT_CSS = {
       cover: "100% 100%,cover",
@@ -4379,7 +4397,7 @@
   }
   function startTheme() {
     if (!document.head && !document.documentElement) return;
-    applyAll({ skin: "default", custom: null, bg: { mode: "none", visibility: 0.8 } });
+    applyAll({ skin: "default", custom: null, bg: { mode: "none", maskOpacity: 0.82, blurPx: 0, panelOpacity: 0.3 } });
     void getConfig().then((cfg) => applyAll(cfg.theme)).catch(() => {
     });
     window.addEventListener("zcodepro:config-changed", () => {
@@ -5333,21 +5351,18 @@
           turnList
         );
         let themeCfg = structuredClone(config.theme || {});
+        const numOrBg = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
         themeCfg.skin = themeCfg.skin || "default";
         themeCfg.custom = {
           light: themeCfg.custom && themeCfg.custom.light || {},
           dark: themeCfg.custom && themeCfg.custom.dark || {}
         };
         themeCfg.bg = {
-          mode: "none",
-          file: "",
-          folder: "",
-          folderRandom: true,
-          url: "",
-          intervalMin: 0,
-          fit: "cover",
-          visibility: 0.8,
-          ...themeCfg.bg || {}
+          ...themeCfg.bg || {},
+          mode: themeCfg.bg?.mode || "none",
+          maskOpacity: numOrBg(themeCfg.bg?.maskOpacity, 0.82),
+          blurPx: numOrBg(themeCfg.bg?.blurPx, 0),
+          panelOpacity: numOrBg(themeCfg.bg?.panelOpacity, 0.3)
         };
         themeCfg.bg.regions = themeCfg.bg.regions && typeof themeCfg.bg.regions === "object" ? themeCfg.bg.regions : {};
         let bgFiles = [];
@@ -5590,27 +5605,73 @@
           );
         };
         const renderThemeBg = () => {
-          const vis = Math.round((themeCfg.bg.visibility ?? 0.8) * 100);
-          const visLabel = h("span", { class: "w-10 text-right text-ui-xs tabular-nums text-foreground-subtle" }, vis + "%");
-          const visRange = h("input", {
-            type: "range",
-            min: "0",
-            max: "100",
-            step: "5",
-            value: String(vis),
-            class: "zcodepro-range",
-            "aria-label": L.themeVisibility,
-            style: "flex:1"
-          });
-          let visTimer = null;
-          visRange.addEventListener("input", () => {
-            const v = Number(visRange.value);
-            visLabel.textContent = v + "%";
-            clearTimeout(visTimer);
-            visTimer = setTimeout(() => {
-              void saveTheme({ bg: { visibility: v / 100 } });
-            }, 300);
-          });
+          const sliderRow = (label, title, min, max, step, val, unit, commit, hint) => {
+            const lab = h("span", { class: "shrink-0 whitespace-nowrap text-ui-xs font-medium text-foreground-subtle", title, style: "width:72px" }, label);
+            const valLabel = h("span", { class: "w-12 text-right text-ui-xs tabular-nums text-foreground-subtle" }, val + unit);
+            const range = h("input", {
+              type: "range",
+              min: String(min),
+              max: String(max),
+              step: String(step),
+              value: String(val),
+              class: "zcodepro-range",
+              "aria-label": label,
+              style: "flex:1"
+            });
+            let timer = null;
+            range.addEventListener("input", () => {
+              const v = Number(range.value);
+              valLabel.textContent = v + unit;
+              clearTimeout(timer);
+              timer = setTimeout(() => commit(v), 300);
+            });
+            return h(
+              "div",
+              { class: "flex flex-col gap-0.5" },
+              h("div", { class: "flex items-center gap-3" }, lab, range, valLabel),
+              hint ? h("span", { class: "text-ui-xs/relaxed text-foreground-subtle" }, hint) : null
+            );
+          };
+          const numOr = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
+          const maskRow = () => sliderRow(
+            L.themeBgMask,
+            L.themeBgMaskHint,
+            0,
+            99,
+            1,
+            Math.round(numOr(themeCfg.bg.maskOpacity, 0.82) * 100),
+            "%",
+            (v) => {
+              void saveTheme({ bg: { maskOpacity: v / 100 } });
+            },
+            L.themeBgMaskHint2
+          );
+          const blurRow = () => sliderRow(
+            L.themeBgBlur,
+            "",
+            0,
+            24,
+            1,
+            numOr(themeCfg.bg.blurPx, 0),
+            "px",
+            (v) => {
+              void saveTheme({ bg: { blurPx: v } });
+            },
+            ""
+          );
+          const panelRow = () => sliderRow(
+            L.themeBgPanel,
+            "",
+            0,
+            100,
+            1,
+            Math.round(numOr(themeCfg.bg.panelOpacity, 0.3) * 100),
+            "%",
+            (v) => {
+              void saveTheme({ bg: { panelOpacity: v / 100 } });
+            },
+            L.themeBgPanelHint
+          );
           const modeBtn = (id, label) => h("button", {
             type: "button",
             class: "zcodepro-tab",
@@ -5785,10 +5846,10 @@
             ),
             h(
               "div",
-              { class: "mt-3 flex items-center gap-3" },
-              h("span", { class: "shrink-0 text-ui-xs font-medium text-foreground-subtle" }, L.themeVisibility),
-              visRange,
-              visLabel
+              { class: "mt-3 flex flex-col gap-2" },
+              maskRow(),
+              blurRow(),
+              panelRow()
             ),
             bgInput
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zcode-pro",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "ZCode Pro — 为 ZCode 桌面版增加界面增强（不修改客户端文件，通过 ZCode Pro 快捷方式启动即可），核心功能：项目自定义别名",
   "type": "module",
   "bin": {

package/src/host/helper.mjs

@@ -17,7 +17,7 @@ import { reorderWorkspaceTasks, reorderGroupMembers } from './taskOrder.mjs';
 import { webdavRequest, webdavPutWithMkcol, webdavHttpText, parseWebdavListing, findCurl } from './webdav.mjs';
 import { resolveZcodeExecutable } from './paths.mjs';
 
-const VERSION = '1.4.0';
+const VERSION = '1.4.1';
 
 // 全局提示词固定在用户主目录：官方加载器按 HOME/USERPROFILE 拼 .zcode/AGENTS.md，
 // 不读 ZCODE_DATA_BASE_DIR（数据根迁走时全局指令仍在原位）。
@@ -68,8 +68,10 @@ function listBgFiles(dataRoot) {
 // 主题配置（设置 → 外观 → 主题/背景图）：skin 为皮肤 id（default = 不覆盖，
 // custom = 用 custom 锚点色现算色阶）；bg.mode 选背景来源——none 无背景 /
 // library 本地图库（file 为当前文件）/ folder 文件夹（定时切换，folderRandom
-// 随机或顺序）/ url 网址（intervalMin 针对随机图 API 定时刷新）；visibility
-// 为图片可见度 0-1。主题功能未发过版，无旧结构需要迁移
+// 随机或顺序）/ url 网址（intervalMin 针对随机图 API 定时刷新）；
+// maskOpacity 遮罩不透明度 0-0.99（越高图片越向主题背景色淡化，文字对比越
+// 清晰，默认 0.82）、blurPx 图片模糊 0-24px（默认 0）、panelOpacity 面板
+// 不透明度 0-1（侧栏/面板/标签栏，越低透出图片越多，默认 0.3）
 const THEME_SKINS = new Set(['default', 'dracula', 'nord', 'tokyonight', 'catppuccin', 'gruvbox', 'onedark', 'solarized', 'rosepine', 'everforest', 'nightowl', 'kanagawa', 'custom']);
 const BG_MODES = new Set(['none', 'library', 'folder', 'url']);
 const BG_FITS = new Set(['cover', 'contain', 'fill', 'tile']);
@@ -103,7 +105,6 @@ function mergeBgRegion(src) {
 export function mergeThemeConfig(saved) {
   const t = saved && typeof saved === 'object' ? saved : {};
   const bg = t.bg && typeof t.bg === 'object' ? t.bg : {};
-  const vis = Number(bg.visibility);
   const cfg = {
     skin: THEME_SKINS.has(t.skin) ? t.skin : 'default',
     custom: mergeCustomSkin(t.custom),
@@ -115,7 +116,11 @@ export function mergeThemeConfig(saved) {
       url: (str(bg.url, 2000) || '').trim(),
       intervalMin: Number.isFinite(Number(bg.intervalMin)) ? Math.min(1440, Math.max(0, Math.round(Number(bg.intervalMin)))) : 0,
       fit: BG_FITS.has(bg.fit) ? bg.fit : 'cover',
-      visibility: Number.isFinite(vis) ? Math.min(1, Math.max(0, vis)) : 0.8,
+      // null/undefined/非数值都落默认（Number(null)=0 是有限数，须先排除 null）
+      maskOpacity: bg.maskOpacity != null && Number.isFinite(Number(bg.maskOpacity))
+        ? Math.min(0.99, Math.max(0, Number(bg.maskOpacity))) : 0.82,
+      blurPx: bg.blurPx != null && Number.isFinite(Number(bg.blurPx)) ? Math.min(24, Math.max(0, Math.round(Number(bg.blurPx)))) : 0,
+      panelOpacity: bg.panelOpacity != null && Number.isFinite(Number(bg.panelOpacity)) ? Math.min(1, Math.max(0, Number(bg.panelOpacity))) : 0.3,
       regions: {
         left: mergeBgRegion(bg.regions && bg.regions.left),
         center: mergeBgRegion(bg.regions && bg.regions.center),
@@ -515,7 +520,9 @@ export function startHelper({ port, token, dataRoot, state, agentsFile = default
               url: bt.bg && bt.bg.url !== undefined ? bt.bg.url : cur.bg.url,
               intervalMin: bt.bg && bt.bg.intervalMin !== undefined ? bt.bg.intervalMin : cur.bg.intervalMin,
               fit: bt.bg && bt.bg.fit !== undefined ? bt.bg.fit : cur.bg.fit,
-              visibility: bt.bg && bt.bg.visibility !== undefined ? bt.bg.visibility : cur.bg.visibility,
+              maskOpacity: bt.bg && bt.bg.maskOpacity !== undefined ? bt.bg.maskOpacity : cur.bg.maskOpacity,
+              blurPx: bt.bg && bt.bg.blurPx !== undefined ? bt.bg.blurPx : cur.bg.blurPx,
+              panelOpacity: bt.bg && bt.bg.panelOpacity !== undefined ? bt.bg.panelOpacity : cur.bg.panelOpacity,
               regions: bt.bg && bt.bg.regions !== undefined ? bt.bg.regions : cur.bg.regions,
             },
           };

package/src/inject/core.js

@@ -317,12 +317,12 @@ const zh = {
   themeBgRegionRight: '右侧边栏',
   themeBgPane: '背景图',
   themeSkinTitle: '皮肤',
-  themeSkinDesc: '知名编辑器主题配色，明暗两套变体跟随 ZCode 当前明暗自动切换；默认保持 ZCode 原样，自定义在下方自行调色。',
+  themeSkinDesc: '知名编辑器主题配色，自动匹配 ZCode 的浅色 / 深色模式；默认保持 ZCode 原样，自定义在下方自行调色。',
   themeSkinCustom: '自定义',
   themeCustomTitle: '自定义主题',
-  themeCustomHint: '改颜色即实时生效（自动切到自定义皮肤）；每套含明、暗两个变体，五个锚点色派生整套界面配色。',
-  themeCustomLight: '明色变体',
-  themeCustomDark: '暗色变体',
+  themeCustomHint: '改颜色即实时生效（自动切到自定义皮肤）；浅色、深色各配一次，选好 5 个颜色即可生成整套界面配色。',
+  themeCustomLight: '浅色',
+  themeCustomDark: '深色',
   themeCustomBg: '背景',
   themeCustomCard: '卡片',
   themeCustomFg: '正文',
@@ -354,7 +354,12 @@ const zh = {
   themeBgFitContain: '适应',
   themeBgFitFill: '拉伸',
   themeBgFitTile: '平铺',
-  themeVisibility: '背景可见度',
+  themeBgMask: '遮罩不透明度',
+  themeBgMaskHint: '数值越高，图片越向主题背景色淡化，文字对比越清晰',
+  themeBgMaskHint2: '图片向主题背景色淡化的程度',
+  themeBgBlur: '图片模糊',
+  themeBgPanel: '面板不透明度',
+  themeBgPanelHint: '侧栏、面板与标签栏的不透明程度。越低，透出的图片越多。',
   themeBgDeletedActive: '当前背景已删除，已自动停用背景',
   sbItemCtx: '上下文占用',
   sbItemQuestions: '提问次数',
@@ -819,12 +824,12 @@ const en = {
   themeBgRegionRight: 'Right sidebar',
   themeBgPane: 'Background',
   themeSkinTitle: 'Skins',
-  themeSkinDesc: 'Famous editor theme palettes; light and dark variants follow ZCode\u2019s current mode automatically; "Default" keeps ZCode as-is, "Custom" is tuned below.',
+  themeSkinDesc: 'Famous editor theme palettes, auto-matching ZCode\u2019s light / dark mode; "Default" keeps ZCode as-is, "Custom" is tuned below.',
   themeSkinCustom: 'Custom',
   themeCustomTitle: 'Custom theme',
-  themeCustomHint: 'Color changes apply live (auto-switches to the custom skin); light and dark variants, five anchor colors derive the whole palette.',
-  themeCustomLight: 'Light variant',
-  themeCustomDark: 'Dark variant',
+  themeCustomHint: 'Color changes apply live (auto-switches to the custom skin); set light and dark separately — pick 5 colors and the whole palette is derived.',
+  themeCustomLight: 'Light',
+  themeCustomDark: 'Dark',
   themeCustomBg: 'Background',
   themeCustomCard: 'Card',
   themeCustomFg: 'Text',
@@ -856,7 +861,12 @@ const en = {
   themeBgFitContain: 'Fit',
   themeBgFitFill: 'Stretch',
   themeBgFitTile: 'Tile',
-  themeVisibility: 'Background visibility',
+  themeBgMask: 'Mask opacity',
+  themeBgMaskHint: 'Higher values fade the image toward the theme background color for clearer text',
+  themeBgMaskHint2: 'How much the image fades toward the theme background color',
+  themeBgBlur: 'Image blur',
+  themeBgPanel: 'Panel opacity',
+  themeBgPanelHint: 'Opacity of sidebar, panels and tab bar. Lower reveals more of the image.',
   themeBgDeletedActive: 'Active background was deleted; background disabled',
   sbItemCtx: 'Context usage',
   sbItemQuestions: 'Questions asked',

package/src/inject/features/settings-dialog.js

@@ -869,15 +869,20 @@ export function openSettingsDialog() {
       // —— “颜色”子页（paneStylesSub3）：预设皮肤卡片 + 自定义主题编辑 ——
       // —— “背景图”子页（paneStylesSub4）：无背景 / 图库 / 文件夹轮换 / 网址 ——
       let themeCfg = structuredClone(config.theme || {});
+      const numOrBg = (v, d) => (typeof v === 'number' && Number.isFinite(v) ? v : d);
       themeCfg.skin = themeCfg.skin || 'default';
       themeCfg.custom = {
         light: (themeCfg.custom && themeCfg.custom.light) || {},
         dark: (themeCfg.custom && themeCfg.custom.dark) || {},
       };
       themeCfg.bg = {
-        mode: 'none', file: '', folder: '', folderRandom: true, url: '', intervalMin: 0, fit: 'cover', visibility: 0.8,
         ...(themeCfg.bg || {}),
+        mode: themeCfg.bg?.mode || 'none',
+        maskOpacity: numOrBg(themeCfg.bg?.maskOpacity, 0.82),
+        blurPx: numOrBg(themeCfg.bg?.blurPx, 0),
+        panelOpacity: numOrBg(themeCfg.bg?.panelOpacity, 0.3),
       };
+      // file/folder/url/fit/folderRandom/intervalMin/regions 由 helper 清洗保证形态，原样保留
       themeCfg.bg.regions = (themeCfg.bg.regions && typeof themeCfg.bg.regions === 'object') ? themeCfg.bg.regions : {};
       let bgFiles = [];
       let bgLoading = false;
@@ -1061,19 +1066,35 @@ export function openSettingsDialog() {
           valueCtrl || h('span', { class: 'text-ui-xs text-foreground-subtle' }, ''));
       };
       const renderThemeBg = () => {
-        const vis = Math.round((themeCfg.bg.visibility ?? 0.8) * 100);
-        const visLabel = h('span', { class: 'w-10 text-right text-ui-xs tabular-nums text-foreground-subtle' }, vis + '%');
-        const visRange = h('input', {
-          type: 'range', min: '0', max: '100', step: '5', value: String(vis),
-          class: 'zcodepro-range', 'aria-label': L.themeVisibility, style: 'flex:1',
-        });
-        let visTimer = null;
-        visRange.addEventListener('input', () => {
-          const v = Number(visRange.value);
-          visLabel.textContent = v + '%';
-          clearTimeout(visTimer);
-          visTimer = setTimeout(() => { void saveTheme({ bg: { visibility: v / 100 } }); }, 300);
-        });
+        // 三个调节参数（滑杆行构造器：label + 范围 + 单位 + 提示 + 防抖保存）
+        const sliderRow = (label, title, min, max, step, val, unit, commit, hint) => {
+          // 标签列固定宽（容最长标签六字；内联样式——应用的 Tailwind 按需编译
+          // 不包含 w-[72px] 这类任意值类）：多行滑杆的轨道起点对齐同一竖线
+          const lab = h('span', { class: 'shrink-0 whitespace-nowrap text-ui-xs font-medium text-foreground-subtle', title, style: 'width:72px' }, label);
+          const valLabel = h('span', { class: 'w-12 text-right text-ui-xs tabular-nums text-foreground-subtle' }, val + unit);
+          const range = h('input', {
+            type: 'range', min: String(min), max: String(max), step: String(step), value: String(val),
+            class: 'zcodepro-range', 'aria-label': label, style: 'flex:1',
+          });
+          let timer = null;
+          range.addEventListener('input', () => {
+            const v = Number(range.value);
+            valLabel.textContent = v + unit;
+            clearTimeout(timer);
+            timer = setTimeout(() => commit(v), 300);
+          });
+          return h('div', { class: 'flex flex-col gap-0.5' },
+            h('div', { class: 'flex items-center gap-3' }, lab, range, valLabel),
+            hint ? h('span', { class: 'text-ui-xs/relaxed text-foreground-subtle' }, hint) : null);
+        };
+        // 数值兜底：null（旧配置带入）与 undefined 都要落默认，?? 只兜 undefined
+        const numOr = (v, d) => (typeof v === 'number' && Number.isFinite(v) ? v : d);
+        const maskRow = () => sliderRow(L.themeBgMask, L.themeBgMaskHint, 0, 99, 1, Math.round(numOr(themeCfg.bg.maskOpacity, 0.82) * 100), '%',
+          (v) => { void saveTheme({ bg: { maskOpacity: v / 100 } }); }, L.themeBgMaskHint2);
+        const blurRow = () => sliderRow(L.themeBgBlur, '', 0, 24, 1, numOr(themeCfg.bg.blurPx, 0), 'px',
+          (v) => { void saveTheme({ bg: { blurPx: v } }); }, '');
+        const panelRow = () => sliderRow(L.themeBgPanel, '', 0, 100, 1, Math.round(numOr(themeCfg.bg.panelOpacity, 0.3) * 100), '%',
+          (v) => { void saveTheme({ bg: { panelOpacity: v / 100 } }); }, L.themeBgPanelHint);
         const modeBtn = (id, label) => h('button', {
           type: 'button', class: 'zcodepro-tab',
           'data-state': themeCfg.bg.mode === id ? 'active' : 'inactive',
@@ -1184,9 +1205,8 @@ export function openSettingsDialog() {
             h('span', { class: 'text-ui-xs font-medium text-foreground-subtle' }, L.themeBgFit),
             fitBtn('cover', L.themeBgFitCover), fitBtn('contain', L.themeBgFitContain),
             fitBtn('fill', L.themeBgFitFill), fitBtn('tile', L.themeBgFitTile)),
-          h('div', { class: 'mt-3 flex items-center gap-3' },
-            h('span', { class: 'shrink-0 text-ui-xs font-medium text-foreground-subtle' }, L.themeVisibility),
-            visRange, visLabel),
+          h('div', { class: 'mt-3 flex flex-col gap-2' },
+            maskRow(), blurRow(), panelRow()),
           bgInput,
         );
       };

package/src/inject/features/theme.js

@@ -194,7 +194,7 @@ let skinStyleEl = null;   // 皮肤 token 覆盖
 let bgStyleEl = null;     // html 背景层（图 + 遮罩）
 let injectedKeys = new Set(); // 半透明化写进 root.style 的变量（重算前先撤）
 let classObserver = null; // 明暗切换（root class 变化）→ 重算遮罩色与透明度
-let currentTheme = { skin: 'default', custom: null, bg: { mode: 'none', visibility: 0.8 } };
+let currentTheme = { skin: 'default', custom: null, bg: { mode: 'none', maskOpacity: 0.82, blurPx: 0, panelOpacity: 0.3 } };
 let lastModeSig = ''; // 观察器只对明暗模式变化重算：applySkin/applyBackground
 // 自己也会改 root class（zcodepro-skin-*/zcodepro-bg-on），不带这条过滤会自触发循环
 let bgTimer = null;   // 文件夹轮换 / 网址刷新定时器（重应用前先清）
@@ -321,18 +321,23 @@ async function applyBackground(bg) {
     return;
   }
 
-  const visibility = typeof bg.visibility === 'number' && Number.isFinite(bg.visibility)
-    ? Math.min(1, Math.max(0, bg.visibility)) : 0.8;
-  const alpha = 1 - visibility;
+  // 三参数（对齐 codeg 语义）：maskOpacity 遮罩不透明度（直接作为遮罩 α）；
+  // blurPx 图片模糊（CSS filter，只糊图片层不糊遮罩）；panelOpacity 面板
+  // 不透明度（侧栏/面板/标签栏表面混入底色的比例，独立于遮罩）
+  const num01 = (v, dflt) => (typeof v === 'number' && Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : dflt);
+  const maskOpacity = num01(bg.maskOpacity, 0.82);
+  const alpha = Math.min(0.99, maskOpacity);
+  const blurPx = typeof bg.blurPx === 'number' && Number.isFinite(bg.blurPx)
+    ? Math.min(24, Math.max(0, Math.round(bg.blurPx))) : 0;
+  const panelOpacity = num01(bg.panelOpacity, 0.3);
   // 遮罩色跟随当前明暗的皮肤底色：在皮肤已应用、半透明化未写入时读解析色
   const resolvedBg = resolvedColor('--color-background');
   const mHex = resolvedBg.match(/^rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)/);
   const rgb = mHex
     ? [Math.round(+mHex[1]), Math.round(+mHex[2]), Math.round(+mHex[3])].join(',')
     : (isDarkMode() ? '13,13,13' : '248,248,248');
-  // 表面半透明化：面板不透明度 = 遮罩浓度 + 10% 基础偏移（可见度 100% → 面板
-  // 10% 底色，0% → 100% 纯色）；在设图之前完成，与具体图片无关
-  const panelMix = Math.min(100, Math.round(alpha * 100) + 10);
+  // 表面半透明化：面板不透明度直接用 panelOpacity（0=全透图，1=纯色）
+  const panelMix = Math.round(panelOpacity * 100);
   if (panelMix < 100) {
     for (const t of SURFACE_TOKENS) {
       const v = resolvedColor(t);
@@ -342,7 +347,7 @@ async function applyBackground(bg) {
       }
     }
   }
-  await applyRegionBackgrounds(bg, { mask, rgb, alpha, fit: bg.fit, visibility, seq });
+  await applyRegionBackgrounds(bg, { rgb, alpha, fit: bg.fit, seq });
   if (seq !== applySeq) return; // 分区文件夹列表等待期间配置又变了
   if (!bgActive) return; // 只有分区背景：到此为止，html 层不设图
 
@@ -357,10 +362,17 @@ async function applyBackground(bg) {
     tile: 'background-size:100% 100%,auto !important;background-repeat:no-repeat,repeat !important;',
   };
   const fitCss = FIT_CSS[bg.fit] || FIT_CSS.cover;
+  // 模糊只作用于背景层：图与遮罩画在 html::before（fixed 铺满视口、z 轴最底），
+  // filter 写在伪元素上——写在 html 自身会把整个界面子树一起糊掉。
+  // 模糊会把伪元素边缘拉开出现透明缝，按模糊半径外扩 inset 收边
+  const blurCss = blurPx > 0 ? `filter:blur(${blurPx}px);` : '';
+  const spread = blurPx > 0 ? Math.max(20, blurPx * 2) : 0;
   const setImage = (image) => {
     bgStyleEl.textContent =
-      `html.zcodepro-bg-on{background-color:rgb(${rgb}) !important;background-image:linear-gradient(rgba(${rgb},${alpha}),rgba(${rgb},${alpha})),${image} !important;` +
-      `${fitCss}background-position:center !important;}`;
+      `html.zcodepro-bg-on{background-color:rgb(${rgb}) !important;}` +
+      `html.zcodepro-bg-on::before{content:'' !important;position:fixed;inset:-${spread}px;z-index:-1;pointer-events:none;` +
+      `background-image:linear-gradient(rgba(${rgb},${alpha}),rgba(${rgb},${alpha})),${image} !important;` +
+      `${fitCss}background-position:center !important;${blurCss}}`;
     root.classList.add('zcodepro-bg-on');
   };
   const helperUrl = liveBoot().helperUrl || HELPER_URL;
@@ -413,8 +425,8 @@ async function applyRegionBackgrounds(bg, pre) {
   regionTimers = [];
   const rules = new Map(); // region -> 规则文本（轮换时覆盖同分区旧规则，不无限追加）
   const flush = () => { regionStyleEl.textContent = [...rules.values()].join(''); };
-  // pre.alpha = 遮罩浓度（= 1 - 可见度），与全局同值，不再反转
-  const alpha = pre ? pre.alpha : 0.2;
+  // pre.alpha = 遮罩不透明度（直接配置值），与全局同值
+  const alpha = pre ? pre.alpha : 0.82;
   const rgb = pre ? pre.rgb : '13,13,13';
   const FIT_CSS = {
     cover: '100% 100%,cover', contain: '100% 100%,contain', fill: '100% 100%,100% 100%', tile: '100% 100%,auto',
@@ -468,7 +480,7 @@ function applyAll(theme) {
 
 export function startTheme() {
   if (!document.head && !document.documentElement) return;
-  applyAll({ skin: 'default', custom: null, bg: { mode: 'none', visibility: 0.8 } });
+  applyAll({ skin: 'default', custom: null, bg: { mode: 'none', maskOpacity: 0.82, blurPx: 0, panelOpacity: 0.3 } });
   void getConfig().then((cfg) => applyAll(cfg.theme)).catch(() => { /* 读不到配置保持应用默认 */ });
   window.addEventListener('zcodepro:config-changed', () => {
     void getConfig(true).then((cfg) => applyAll(cfg.theme)).catch(() => { /* ignore */ });

package/src/inject/ui.js

@@ -26,8 +26,10 @@ export function showToast(text, kind = 'info') {
 // 注意：绝不能用 bg-surface 做面板底色——该 token 在应用里是 ~3% 不透明度的着色层（#0d0d0d08），
 // 会导致整卡透明。关键视觉另在 ensureStyle 里以自有样式表兜底（ID 选择器 + 主题变量 + 字面量回退），
 // 应用 Tailwind 类随版本更新变动时遮罩/面板仍能正确绘制。
-const overlayClass = 'fixed inset-0 isolate z-50 flex items-center justify-center bg-black/60 supports-backdrop-filter:backdrop-blur-xs duration-100 p-4 platform-linux-desktop:top-12';
-const overlayClassBare = 'fixed inset-0 isolate z-50 flex items-center justify-center duration-100 p-4 platform-linux-desktop:top-12';
+// 垂直方向 items-start + 卡片 margin-top：切 tab 内容高度变化时卡片顶边不动
+// （此前 items-center 上下双向伸缩，顶部随内容高度跳动，顶部 tab 没法稳着点）
+const overlayClass = 'fixed inset-0 isolate z-50 flex items-start justify-center bg-black/60 supports-backdrop-filter:backdrop-blur-xs duration-100 p-4 platform-linux-desktop:top-12';
+const overlayClassBare = 'fixed inset-0 isolate z-50 flex items-start justify-center duration-100 p-4 platform-linux-desktop:top-12';
 const contentClass = 'w-full sm:max-w-md rounded-2xl border-none bg-popover/98 p-5 text-ui-base/relaxed text-foreground ring-border shadow-2xl';
 
 // overlay: 'dim'（默认，半透明遮罩）| 'none'（透明遮罩）——设置弹窗用 'none'，方便边调样式边看会话。
@@ -59,6 +61,7 @@ export function openDialog({ title, description, onMount, onClose, width = 'sm:m
     role: 'dialog',
     'aria-modal': 'true',
     class: contentClass.replace('sm:max-w-md', width) + ' zcodepro-card',
+    style: 'margin-top:12vh;max-height:calc(88vh - 3rem);overflow-y:auto;',
   });
   const overlayEl = h('div', {
     'data-overlay': overlay,
@@ -566,6 +569,8 @@ export function ensureStyle() {
       -webkit-appearance: none;
       appearance: none;
       width: 100%;
+      /* 不给 padding：padding 会缩小 thumb 的可滑区间（拖不到最左/最右）。
+      轨道起点对齐由弹窗里的固定标签列宽负责 */
       height: 4px;
       border-radius: 9999px;
       background: color-mix(in oklab, var(--color-foreground, #888) 18%, transparent);