dsh-model-organizer 0.3.2 → 0.3.3

package/DEVELOPING.md

@@ -4,7 +4,29 @@
 
 ## ⚠️ 改代码前务必先读：踩过的坑
 
-1. **profile bundle 必须声明 `dsh.bundle.patch`**（指向 `cordis.patch.yml`）。缺了它 dsh 启动即报
+0. **服务改名会让座位"静默消失"，必须注入新旧两个名字。**
+   DSH 0.1.7 把客户端设置镜像服务从 `settingsScope` 改名为 `configForms`（由 `@deepseek-ai/dsh-client-ui-settings` 提供，`describe()` 返回的还是同一个 mirror 对象）。
+   cordis 的 `ctx.inject([...])` **只要有一个服务永不出现，回调就永远不执行** —— 不报错、不打日志。所以 0.1.7 一升级，本插件的设置页浮窗就凭空消失了（输入框的模型菜单照常，因为它注入的 `slots/modelDirectories/sessions` 都没变）。
+   现在 `apply()` 里同时注入两个名字，用一次性标志保证只挂载一次：
+   ```js
+   ctx.inject(["slots", "configForms", "remote", "remote.settings"], (s) => mountOrderPanel(s, s.configForms.describe()));
+   ctx.inject(["slots", "settingsScope", "remote", "remote.settings"], (s) => mountOrderPanel(s, s.settingsScope.describe()));
+   ```
+   **推论**：升级 DSH 后如果某个座位不见了，第一件事是去新版本的 `dsh-client-ui-*` 包里 grep 自己注入的每个服务名。
+
+1. **`file:` 依赖是打包快照，`link:` 才是符号链接 —— 改仓库可能根本不生效。**
+   profile 里写 `"dsh-model-organizer": "file:../../../dsh-model-organizer"` 时，pnpm 把目录**打包复制**进自己的 store；只有 `pnpm add ./dir`（直接路径）或 `link:` 才是符号链接。
+   症状：改完仓库代码、强刷浏览器，界面毫无变化；查 `window.__dshModelOrganizerBuild` 会发现跑的还是旧构建号，而服务端 bundle 里明明是新代码 —— 因为 DSH 加载的是 `profiles/<p>/node_modules/dsh-model-organizer/lib/client.js` 那份**副本**。
+   排查：直接 grep 那份副本的 `BUILD` 常量，和仓库对比。
+   修法：`dsh plugin --profile web remove dsh-model-organizer && dsh plugin --profile web add link:./dsh-model-organizer`（换成符号链接后只改一处）。在此之前必须**两份同步改**。
+
+2. **0.1.7 的菜单色 token 是半透明的，浮层必须配 `backdrop-filter`。**
+   `--dsw-specific-menu` 现在解析成 `rgba(48,49,54,0.5)`，官方菜单靠 `backdrop-filter: var(--dsw-menu-backdrop-filter)` 配合。只取颜色不取模糊 → 面板是「透视」的，底下的官方卡片按钮直接透上来。
+
+3. **浮层要 `ReactDOM.createPortal` 到 `document.body`。**
+   `settings.models.footer` 座位在设置页很深的子树里，`position: fixed` 会被困在那个子树的堆叠上下文里，被别的插件的悬浮组件（鲸鱼、地球图标等）盖住 —— 提高 z-index 也没用。挂到 body 之后 z-index 才是全局的（本插件用 10000，官方菜单是 1100）。
+
+4. **profile bundle 必须声明 `dsh.bundle.patch`**（指向 `cordis.patch.yml`）。缺了它 dsh 启动即报
    `profile bundle "..." declares no dsh.bundle in its package.json`。
 
 2. **顶层 `inject` 必须声明座位 standardProps 会读取的每一个服务**（本插件：`locale, slots, sessions, remote, remote.session, remote.settings`）。

package/README.md

@@ -36,6 +36,8 @@ dsh plugin --profile web add github:NimoXie15/dsh-model-organizer
 dsh plugin --profile web add link:/absolute/path/to/dsh-model-organizer
 ```
 
+> **兼容性**：已在 DSH `0.1.7-rc.1` 上验证，同时兼容 `0.1.5`/`0.1.6`（0.1.7 把客户端设置镜像服务从 `settingsScope` 改名为 `configForms`，本插件两个名字都注入，所以两个版本都能用）。
+>
 > 升级插件后如果界面没变化，按 **Ctrl+Shift+R** 强刷一次（DSH 的客户端 bundle 带一年 immutable 缓存，普通刷新不会重新下载）。
 
 ## 截图

package/lib/client.js

@@ -90,7 +90,7 @@ window.__ModuleLoader__.load({
        code changes, so a browser can keep running an old build until a hard reload.
        Kept OFF the UI (it is not user-facing): read it as
        `window.__dshModelOrganizerBuild` when a stale build is suspected. */
-    const BUILD = "b23";
+    const BUILD = "b24";
 
     let officialClasses = null;
     let officialClassesSheets = -1;
@@ -265,11 +265,16 @@ window.__ModuleLoader__.load({
       /* Floating presentation: the panel sits in the corner of the Models page so
          provider/API configuration and reordering are visible at the same time. */
       floatPanel: {
-        position: "fixed", right: 20, bottom: 20, zIndex: 900, width: 380, maxWidth: "calc(100vw - 40px)",
+        position: "fixed", right: 20, bottom: 20, zIndex: 10000, width: 380, maxWidth: "calc(100vw - 40px)",
         display: "flex", flexDirection: "column", padding: 4,
         border: "1px solid var(--dsw-alias-border-l1)", borderRadius: 14,
         background: "var(--dsw-specific-menu, var(--dsw-alias-bg-module, #222))",
-        boxShadow: "0 10px 30px rgba(0,0,0,.34)", color: "var(--dsw-alias-label-primary)"
+        /* 0.1.7's menu token is translucent and the shipped menu pairs it with this
+           blur; without it the panel reads as see-through and the cards behind it
+           bleed through. The elevation shadow matches the shipped menu too. */
+        backdropFilter: "var(--dsw-menu-backdrop-filter)",
+        boxShadow: "var(--dsw-elevation-prominent, 0 10px 30px rgba(0,0,0,.34))",
+        color: "var(--dsw-alias-label-primary)"
       },
       /* The shipped `cell` sets min-width:100%; the head must stay inside the panel. */
       panelHeadCell: { display: "flex", alignItems: "center", gap: 6, flex: "1 1 auto", minWidth: 0 },
@@ -1105,6 +1110,38 @@ window.__ModuleLoader__.load({
       return known.concat(rest);
     }
 
+    /* A seat entry that throws is silently abdicated, so "my panel is missing" and
+       "my panel threw" look identical from the page. This boundary turns the throw
+       into one visible line, so the failure can be reported instead of guessed. */
+    class PanelBoundary extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { err: null };
+      }
+      static getDerivedStateFromError(err) {
+        return { err: err };
+      }
+      render() {
+        if (this.state.err !== null) {
+          const message = String((this.state.err && this.state.err.message) || this.state.err);
+          return h("div", {
+            "data-mo": "panel-error",
+            style: {
+              margin: "8px 0", padding: "6px 10px", borderRadius: 8, fontSize: 12, lineHeight: "18px",
+              whiteSpace: "pre-wrap",
+              border: "1px solid var(--dsw-alias-state-error-primary, #f85149)",
+              color: "var(--dsw-alias-state-error-primary, #f85149)"
+            }
+          }, "dsh-model-organizer 面板渲染失败：" + message);
+        }
+        return this.props.children;
+      }
+    }
+
+    function ProviderOrderPanelGuarded(props) {
+      return h(PanelBoundary, null, h(ProviderOrderPanel, props));
+    }
+
     function ProviderOrderPanel(props) {
       const C = resolveOfficialClasses();
       ensureOwnStyles();
@@ -1164,21 +1201,9 @@ window.__ModuleLoader__.load({
       const idsKey = ids.join("|");
       const dirty = order !== null && order.join("|") !== sourceKey;
 
-      /* Mirror the stored order onto the shipped provider cards (CSS `order` only —
-         the DOM React rendered is never touched). The cards may be (re)rendered after
-         this effect runs, which drops the inline styles, so it is applied again on the
-         next frame and once more shortly after. */
-      useEffect(function () {
-        const list = idsKey.length === 0 ? [] : idsKey.split("|");
-        applyCardOrder(display, list);
-        const frame = requestAnimationFrame(function () { applyCardOrder(display, list); });
-        const timer = setTimeout(function () { applyCardOrder(display, list); }, 400);
-        return function () {
-          cancelAnimationFrame(frame);
-          clearTimeout(timer);
-        };
-      }, [sourceKey, idsKey]);
-
+      /* The shipped provider cards are left exactly as React renders them. Ordering used
+         to be mirrored onto them with inline `order`; that is gone — this plugin adds a
+         floating panel to the Models page and nothing else. */
       function commit(next) {
         if (next.join("|") === baseIds.join("|")) { setOrder(null); return; }
         writeProviderOrder(next);
@@ -1352,56 +1377,19 @@ window.__ModuleLoader__.load({
         : Object.assign({}, S.floatPanel, { left: panelPos.left, top: panelPos.top, right: "auto", bottom: "auto" });
       /* Original layout (header first, list below) with a TOP-anchored panel: the
          header never moves and collapsing pulls the bottom edge up. */
-      return h("div", { ref: panelRef, style: panelStyle },
-        head,
-        panelOpen ? h("div", { style: S.floatBody }, list) : null
+      /* Portalled to <body>: the footer seat lives deep inside the settings page, so a
+         fixed panel there is trapped in that subtree's stacking context and any other
+         plugin's floating widget paints over it. At body level the z-index is global. */
+      return ReactDOM.createPortal(
+        h("div", { ref: panelRef, style: panelStyle, "data-mo": "panel" },
+          head,
+          panelOpen ? h("div", { style: S.floatBody }, list) : null
+        ),
+        document.body
       );
     }
 
     /* -------------------------------- helpers --------------------------------- */
-    /* The Models page renders one <li> per provider inside its own <ul>. The host
-       owns that order (the settings document cannot express it — verified), so the
-       stored preference is applied as CSS `order` on a flex column: the DOM is left
-       exactly as React rendered it, only the visual sequence changes. Cards that do
-       not correspond to a settings provider (catalog-only rows) stay pinned first. */
-    function applyCardOrder(providers, ids) {
-      try {
-        const names = [];
-        for (const id in providers) {
-          const dn = providers[id] ? providers[id].displayName : undefined;
-          if (typeof dn === "string" && dn.length > 0) names.push([id, dn]);
-        }
-        if (names.length === 0) return;
-        names.sort(function (a, b) { return b[1].length - a[1].length; });
-
-        let list = null;
-        let best = 0;
-        const lists = document.querySelectorAll("ul");
-        for (let i = 0; i < lists.length; i++) {
-          const items = lists[i].children;
-          let hits = 0;
-          for (let j = 0; j < items.length; j++) {
-            const text = items[j].textContent || "";
-            for (let k = 0; k < names.length; k++) if (text.indexOf(names[k][1]) !== -1) { hits++; break; }
-          }
-          if (hits >= 2 && hits > best) { best = hits; list = lists[i]; }
-        }
-        if (list === null) return;
-
-        list.style.display = "flex";
-        list.style.flexDirection = "column";
-        const rank = {};
-        for (let i = 0; i < ids.length; i++) rank[ids[i]] = i;
-        const items = list.children;
-        for (let i = 0; i < items.length; i++) {
-          const text = items[i].textContent || "";
-          let matched;
-          for (let k = 0; k < names.length; k++) if (text.indexOf(names[k][1]) !== -1) { matched = names[k][0]; break; }
-          const r = matched === undefined ? undefined : rank[matched];
-          items[i].style.order = String(r === undefined ? -1 : r);
-        }
-      } catch (e) {}
-    }
 
     function namespaceView(view, namespace) {
       if (!view || !view.namespaces) return null;
@@ -1450,6 +1438,18 @@ window.__ModuleLoader__.load({
 
     function apply(ctx) {
       try { window.__dshModelOrganizerBuild = BUILD; } catch (e) {}
+      /* A DOM marker proving this bundle actually applied, independent of any seat.
+         Seat registration is silent by design (a throw abdicates the entry), so
+         "is the new code even loaded?" is otherwise unanswerable from the page. */
+      try {
+        if (document.body !== null && document.querySelector('[data-mo="boot"]') === null) {
+          const boot = document.createElement("div");
+          boot.setAttribute("data-mo", "boot");
+          boot.setAttribute("data-mo-build", BUILD);
+          boot.hidden = true;
+          document.body.appendChild(boot);
+        }
+      } catch (e) {}
       ctx.effect(function () { return ctx.locale.register(NS, { zh: zh, en: en }); }, "dsh-model-organizer: dictionaries");
       const t = ctx.locale.bind(NS);
 
@@ -1481,8 +1481,27 @@ window.__ModuleLoader__.load({
         });
       });
 
-      ctx.inject(["slots", "settingsScope", "remote", "remote.settings"], function (scope) {
-        const mirror = scope.settingsScope.describe();
+      /* The settings mirror moved homes: DSH 0.1.7 exposes it as `configForms`
+         (provided by ui-settings); 0.1.5/0.1.6 exposed the same object as
+         `settingsScope`. A cordis `ctx.inject` whose service never appears simply
+         never runs, so injecting only the old name made this whole seat vanish
+         without a single error once DSH renamed it. Inject both names and mount
+         once — whichever resolves first wins, the other stays dormant. */
+      let orderPanelMounted = false;
+
+      function mountOrderPanel(scope, mirror) {
+        if (orderPanelMounted) return;
+        orderPanelMounted = true;
+        /* Mark that the service resolved and the panel is being mounted — this
+           separates "the seat never rendered" from "the inject never fired". */
+        try {
+          if (document.body !== null && document.querySelector('[data-mo="panel-mounted"]') === null) {
+            const mark = document.createElement("div");
+            mark.setAttribute("data-mo", "panel-mounted");
+            mark.hidden = true;
+            document.body.appendChild(mark);
+          }
+        } catch (e) {}
         mirror.ensure();
         const mutate = function (ops, revision) { return scope.remote.settings.mutate(PI_AI_NS, ops, revision); };
 
@@ -1504,9 +1523,16 @@ window.__ModuleLoader__.load({
               id: "model-organizer-provider-order",
               order: 100,
               inject: face
-            }, ProviderOrderPanel);
+            }, ProviderOrderPanelGuarded);
           });
         });
+      }
+
+      ctx.inject(["slots", "configForms", "remote", "remote.settings"], function (scope) {
+        mountOrderPanel(scope, scope.configForms.describe());
+      });
+      ctx.inject(["slots", "settingsScope", "remote", "remote.settings"], function (scope) {
+        mountOrderPanel(scope, scope.settingsScope.describe());
       });
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-organizer",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "DSH 模型整理插件：输入框的模型下拉改为「供应商分组 + 模型二级折叠菜单」（含推理等级），并在模型设置页提供一个可拖拽的「供应商与模型顺序」浮窗。",
   "type": "module",
   "main": "lib/index.js",