@morehao/dsh-skills-console 0.3.3 → 0.3.5

package/README.md

@@ -37,6 +37,7 @@ DSH（DeepSeek Harness）的**技能控制台**：装、更新、删除、接入
 - **两个入口**：默认在「设置 → 技能控制台」；页头 ⚙ 里可切到左侧栏独立面板，切换立即生效。
 - **一页两 tab**：已安装 / 订阅。页头右侧是「自动接入」（多选 Agent）与「添加技能 / 添加订阅」。
 - **每行五个动作**：开关（启停）、查看、更新、接入设置、删除；窄面板下隐藏「查看」，技能名本身仍是入口。状态标签覆盖最新 / 可更新 / 本地已改 / 上游已移除 / 软链断裂 / 无上游等。
+- **窄面板不跳版**：页头动作恒在右上角，只有面板窄到 520px 以下才上下堆叠；列表按面板自身宽度在 860px 处切两列；页面预留滚动条槽位，滚动条出现/消失、切 tab、窗口微调都不会让整页翻面。
 - **Agent 多了不挤**：每行最多展示 3 个，其余折成 `+n`，悬浮或聚焦即可看全。
 - **找得到**：支持按名称 / 来源 / Agent 搜索，按「可更新 / 待检查 / 已停用」筛选，平铺或按 Agent 分组。
 - **待检查 vs 无上游**：「待检查」只表示*这次*没拿到上游结论（限流、网络、仓库 404 等）；再次点「检查更新」时，如果上次没有结论、上游又只回了 304，会无视 ETag 完整重读一次树，不会把「待检查」永久粘住。没有可用订阅来源的技能标「无上游」——它们无法参与更新检查，不计入待检查。

package/client.js

@@ -99,9 +99,6 @@ var DICT = {
     "view.agent": "按 Agent",
     autoLink: "自动接入",
     "settings.title": "插件设置",
-    "id.copy": "复制安装标识",
-    "id.copied": "已复制安装标识",
-    "id.copyFailed": "复制失败，请重试",
     "placement.label": "侧边栏入口",
     "placement.effect": "切换后立即生效",
     "placement.on": "已开启",
@@ -289,9 +286,6 @@ var DICT = {
     "view.agent": "By agent",
     "autoLink": "Auto-link",
     "settings.title": "Plugin settings",
-    "id.copy": "Copy install specifier",
-    "id.copied": "Install specifier copied",
-    "id.copyFailed": "Copy failed, please retry",
     "placement.label": "Sidebar entry",
     "placement.effect": "Applies immediately",
     "placement.on": "on",
@@ -452,17 +446,6 @@ var DICT = {
     "viewer.info.none": "None"
   }
 };
-async function copyText(text) {
-  const value = String(text ?? "");
-  if (!value) return false;
-  try {
-    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
-    await navigator.clipboard.writeText(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
 function buildTranslate(locale) {
   const active = () => {
     try {
@@ -832,37 +815,40 @@ var import_react5 = __toESM(require("react"), 1);
 
 // client/styles.js
 var CSS = `
-  /* 主面板形态：与 DSH 自带管理页同一边距/滚动方式 */
+  /* 主面板形态：与 DSH 自带管理页同一边距/滚动方式。
+     scrollbar-gutter: stable 让滚动条出现/消失都不改变内容宽度——否则列表一长出来，
+     内容就窄 5~15px，贴着断点的布局会整页跳一次。 */
   .dshsc-page { box-sizing: border-box; width: 100%; height: 100%; overflow: auto;
+    scrollbar-gutter: stable;
     padding: calc(28px + var(--dsh-frame-top-clearance, 0px)) clamp(24px, 4vw, 48px) 48px; }
   .dshsc-page .dshsc-root { max-width: 980px; margin: 0 auto; }
   .dshsc-page .dshsc-title { font-size: 20px; font-weight: 500; line-height: 28px; }
   .dshsc-page .dshsc-sub { font-size: 13px; line-height: 20px; }
   .dshsc-root { display: flex; flex-direction: column; gap: 14px; color: var(--dsw-alias-label-primary);
     container-type: inline-size; container-name: dshsc; }
-  .dshsc-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
-  .dshsc-heading { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; }
+  /* 页头两列：左边标题块、右边业务动作。动作组恒在右上角，宽度自动；
+     页面宽度变化只让标题块收窄（身份胶囊省略、工具组内部换行），动作组不会整组跳到第二行。
+     只有面板真的窄（≤520，见下面容器查询）才改成上下两段。 */
+  .dshsc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
+  .dshsc-heading { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
   .dshsc-heading-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
   .dshsc-logo { flex: none; display: block; border-radius: 8px; }
-  .dshsc-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
+  /* 标题不参与收窄：窄面板里让身份胶囊先省略，标题本身不折行 */
+  .dshsc-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; flex: none; white-space: nowrap; }
   .dshsc-sub { font-size: 12px; line-height: 1.55; color: var(--dsw-alias-label-secondary); margin: 0; max-width: 64ch; }
   .dshsc-spacer { flex: 1; }
-  .dshsc-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
-  .dshsc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
+  .dshsc-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
+  /* 标题行恒为一行：身份胶囊按剩余宽度省略，工具组不被挤走。
+     不用 wrap 是因为一 wrap 就会按「身份胶囊整段」的宽度断行，窄面板里会折成 2~3 行、
+     把页头撑高；省略号 + title 提示比整行折行更稳，也不随版本号变长而改变布局。 */
+  .dshsc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
 
-  /* 身份：按「安装时输入的包名」显示（@scope/name@version），等宽 + 可点复制 */
-  .dshsc-id { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-width: 0;
-    max-width: 100%; height: 22px; padding: 0 6px 0 7px; border: 1px solid var(--dsw-alias-border-l1);
-    border-radius: 6px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-tertiary);
+  /* 身份：按「安装时输入的包名」显示（@scope/name@version），等宽只读、不描边 */
+  .dshsc-id { display: inline-flex; align-items: center; box-sizing: border-box; min-width: 0;
+    max-width: 100%; height: 22px; padding: 0 2px; color: var(--dsw-alias-label-tertiary);
     font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
-    font-size: 11px; line-height: 1; white-space: nowrap; cursor: pointer;
-    transition: background .12s ease, border-color .12s ease, color .12s ease; }
-  .dshsc-id:hover { border-color: var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2);
-    color: var(--dsw-alias-label-primary); }
-  .dshsc-id:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+    font-size: 11px; line-height: 1; white-space: nowrap; }
   .dshsc-spec { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
-  .dshsc-idcopy { display: inline-flex; flex: none; opacity: .5; transition: opacity .12s ease; }
-  .dshsc-id:hover .dshsc-idcopy, .dshsc-id:focus-visible .dshsc-idcopy { opacity: 1; }
 
   /* 插件级工具（设置 / GitHub）：跟在身份胶囊后面，用细线分组；鬼影按钮不和业务按钮抢权重 */
   .dshsc-tools { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: 2px;
@@ -1084,9 +1070,10 @@ var CSS = `
   .dshsc-sub-entry .dshsc-actions { margin-left: auto; display: flex; justify-content: flex-end; }
   .dshsc-sub-entry .dshsc-btn { height: 24px; padding: 0 9px; font-size: 11.5px; }
   /* 设置页的真实宽度常常远小于窗口（侧栏 + 页面缩放），视口 media query 不可靠；
-     以 .dshsc-root 自身宽度为准，窄面板时切两列，避免固定列把 Agent 标签挤成竖排。 */
-  @container dshsc (max-width: 900px) {
-    .dshsc-head-actions { width: 100%; justify-content: flex-end; }
+     以 .dshsc-root 自身宽度为准，窄面板时切两列，避免固定列把 Agent 标签挤成竖排。
+     断点取 860 而不是贴着面板常见的 ~900：三列网格需要 300 + 268 + 2×14 gap + 中间列，
+     860 已经够用；留出 ~40px 余量后，滚动条（5~15px）、窗口微调、页面缩放都不会把整页翻面。 */
+  @container dshsc (max-width: 860px) {
     .dshsc-search input { width: 180px; }
     .dshsc-row { grid-template-columns: minmax(0, 1fr) 196px; row-gap: 3px; padding: 9px 12px; }
     .dshsc-cell { grid-column: 1; }
@@ -1094,8 +1081,11 @@ var CSS = `
     .dshsc-row .dshsc-actions { grid-column: 2; grid-row: 1 / span 2; }
     .dshsc-row .dshsc-btn { padding: 0 5px; }
   }
-  /* 窄面板里工具组会换到下一行，行首的分割线就没有意义了 */
+  /* 页头自己的断点，和上面的页面断点解耦：只有面板窄到放不下「标题块 + 动作组」才上下堆叠。
+     520 远低于设置面板/侧栏面板的实际宽度，正常窗口里页头永远是右上角那一组。 */
   @container dshsc (max-width: 520px) {
+    .dshsc-head { grid-template-columns: minmax(0, 1fr); }
+    .dshsc-head-actions { justify-content: flex-end; }
     .dshsc-tools { border-left: 0; padding-left: 0; margin-left: 0; }
   }
   .dshsc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
@@ -1371,7 +1361,8 @@ var CSS = `
   .dshsc-reader-page .dshsc-md { max-width: 720px; }
   .dshsc-reader-page .dshsc-reader-actions { border-radius: 0 0 12px 12px; }
 
-  @container dshsc (max-width: 900px) {
+  /* 与列表同一个页面断点（860）：窄面板里行内「查看」让位、整页目录收起 */
+  @container dshsc (max-width: 860px) {
     /* 行内「查看」先让位：技能名本身仍是入口 */
     .dshsc-row .dshsc-view { display: none; }
     .dshsc-reader-layout { grid-template-columns: minmax(0, 1fr); }
@@ -1781,14 +1772,9 @@ function Header({
   onChangePlacement,
   onOpenAutoLink,
   onAddSkill,
-  onAddSubscription,
-  onToast
+  onAddSubscription
 }) {
   const spec = installSpec(plugin);
-  async function copySpec() {
-    const ok = await copyText(spec);
-    onToast?.(ok ? { kind: "ok", text: t("id.copied") } : { kind: "err", text: t("id.copyFailed") });
-  }
   const headTools = h(
     "div",
     { className: "dshsc-tools" },
@@ -1861,17 +1847,11 @@ function Header({
           { className: "dshsc-title-row" },
           h("h2", { className: "dshsc-title" }, page ? t("page.title") : t("section.title")),
           // 身份：按「安装时输入的包名」显示，点一下整段复制（Host 从 package.json 注入）
+          // 身份：按「安装时输入的包名」显示，只读展示（Host 从 package.json 注入）
           spec ? h(
-            "button",
-            {
-              type: "button",
-              className: "dshsc-id",
-              title: `${t("id.copy")}：${spec}`,
-              "aria-label": `${t("id.copy")}：${spec}`,
-              onClick: () => void copySpec()
-            },
-            h("span", { className: "dshsc-spec" }, spec),
-            h("span", { className: "dshsc-idcopy", "aria-hidden": "true" }, h(CopyIcon, { size: 11 }))
+            "span",
+            { className: "dshsc-id", title: spec },
+            h("span", { className: "dshsc-spec" }, spec)
           ) : null,
           headTools
         ),
@@ -3999,8 +3979,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
       onChangePlacement: (next) => void changePlacement(next),
       onOpenAutoLink: () => setModal({ type: "autolink" }),
       onAddSkill: actions.requestAddSkill,
-      onAddSubscription: actions.requestAddSubscription,
-      onToast: (next) => setToast(next)
+      onAddSubscription: actions.requestAddSubscription
     }),
     error ? h("div", { className: "dshsc-banner err" }, `${error} · `, h("button", { className: "dshsc-btn ghost", onClick: () => void reload() }, t("action.retry"))) : null,
     data?.readOnly ? h("div", { className: "dshsc-banner warn" }, t("banner.readonly")) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morehao/dsh-skills-console",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "统一管理本地技能的安装、更新、删除与接入，让同一份技能在多个 Agent 间复用。A skill manager for DeepSeek Harness: install, update, remove, link and toggle agent skills.",
   "license": "MIT",
   "author": "morehao <morehao@qq.com>",