dsh-model-groups 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-groups",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "在 DSH 网页端按供应商和密钥配置选择模型，并为同一供应商的不同密钥分别设置模型和 API 协议。支持 DSH 0.2.2-rc.1。",
   "type": "module",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "!scripts/pi-ai-protocol.mjs",
     "cordis.patch.yml",
     "README.md",
+    "CHANGELOG.md",
     "docs/maintenance.md",
     "docs/images/*.webp",
     "LICENSE"

package/scripts/settings-reorder-patch.mjs

@@ -0,0 +1,49 @@
+import { createSettingsReorder, useSettingsReorder } from './settings-reorder.mjs';
+import { orderedKeyEntries } from '../src/hierarchy.js';
+
+export function addSettingsReorder(initial, apply) {
+  let current = initial;
+  const replace = (before, after) => { apply(before, after); current = current.replace(before, after); };
+  const anchor = 'const MULTI_KEY_ENTRY_ID =';
+  replace(anchor, `${orderedKeyEntries.toString()}\n\t\t${createSettingsReorder.toString()}\n\t\t${useSettingsReorder.toString()}\n\t\t${anchor}`);
+  replace('children: [Object.entries(entries).map(([id, candidate], index) => {', 'children: [orderedKeyEntries(entries).map(([id, candidate], index) => {');
+  replace('return Object.fromEntries(Object.entries(entries).map(([id, entry]) => {', 'return Object.fromEntries(orderedKeyEntries(entries).map(([id, entry]) => {');
+  replace('const anyBusy = Object.values(busyEntries).some(Boolean);', `const anyBusy = Object.values(busyEntries).some(Boolean);
+\t\t\tconst savedEntryOrder = orderedKeyEntries(props.savedEntries ?? props.persistedEntries ?? {}).map(([id]) => id);
+\t\t\tconst reorder = useSettingsReorder({ disabled: disabled || anyBusy, selector: "[data-key-entry-id]", move: (id, offset) => {
+\t\t\t\tconst ordered = orderedKeyEntries(entries), from = ordered.findIndex(([key]) => key === id), to = from + offset;
+\t\t\t\tif (from < 0 || to < 0 || to >= ordered.length) return;
+\t\t\t\tconst [moved] = ordered.splice(from, 1); ordered.splice(to, 0, moved);
+\t\t\t\tonChange(Object.fromEntries(ordered.map(([key, entry], sortOrder) => [key, { ...entry, sortOrder }])));
+\t\t\t} });`);
+  replace('const dirty = multiKeyEntryDirty(entry, props.savedEntries?.[id] ?? props.persistedEntries?.[id], draft);', 'const dirty = savedEntryOrder.indexOf(id) !== index || multiKeyEntryDirty(entry, props.savedEntries?.[id] ?? props.persistedEntries?.[id], draft);');
+  const before = 'children: [(0, react_jsx_runtime.jsx)("span", {\n\t\t\t\t\t\t\t\tclassName: ModelsSection_module_css_default["rowName"],';
+  replace(before, `children: [(0, react_jsx_runtime.jsx)("button", {
+\t\t\t\t\t\t\t\ttype: "button", className: ModelsSection_module_css_default["iconButton"],
+\t\t\t\t\t\t\t\t"data-key-entry-handle": id, "aria-label": t("multiKeyReorder") + " " + heading,
+\t\t\t\t\t\t\t\t"aria-keyshortcuts": "ArrowUp ArrowDown", "aria-description": t("multiKeyReorderHelp"), title: t("multiKeyReorderHelp"),
+\t\t\t\t\t\t\t\tdisabled: disabled || anyBusy, ...reorder(id),
+\t\t\t\t\t\t\t\tchildren: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDragHandleOutlineRegular, { size: 14 })
+\t\t\t\t\t\t\t}), (0, react_jsx_runtime.jsx)("span", {
+\t\t\t\t\t\t\t\tclassName: ModelsSection_module_css_default["rowName"],`);
+  // ModelRow keeps the native useModelRows onMove action, moving row-local drafts
+  // and stable keys together. The pointer preview never mutates React-owned DOM.
+  replace('const preview = (0, _deepseek_ai_dsh_client_ui_primitives.useRowDragPreview)(ModelsSection_module_css_default["modelDragPreview"]);', 'const reorder = useSettingsReorder({ disabled, selector: "[data-row-key]", move: (_key, offset) => props.order.onMove(offset) });');
+  const start = current.indexOf('\n\t\t\t\tonDragOver: (event) => {', current.indexOf('function ModelRow(props)'));
+  const end = current.indexOf('\n\t\t\t\tchildren:', start);
+  if (start < 0 || end < start) throw new Error('Missing model drag row anchor');
+  replace(current.slice(start, end), '\n\t\t\t\t// Reordering is handled by the pointer handle below.');
+  const dragStart = current.indexOf('\n\t\t\t\t\t\t\t\tdraggable: !disabled,', current.indexOf('function ModelRow(props)'));
+  const dragEnd = current.indexOf('\n\t\t\t\t\t\t\t\tchildren:', dragStart);
+  if (dragStart < 0 || dragEnd < dragStart) throw new Error('Missing model drag handle anchor');
+  replace(current.slice(dragStart, dragEnd), '\n\t\t\t\t\t\t\t\t...reorder(props.rowKey),');
+  replace('label: t("reorderModelHelp"),', 'label: t("modelReorderTouchHelp"),');
+  replace('"aria-description": t("reorderModelHelp"),', '"aria-description": t("modelReorderTouchHelp"),');
+  for (const [locale, values] of Object.entries({
+    en: { multiKeyReorder: 'Reorder key group', multiKeyReorderHelp: 'Hold the handle to reorder; or use Arrow Up/Down. Save with the other edits.' },
+    zh: { multiKeyReorder: '调整密钥分组顺序', multiKeyReorderHelp: '长按手柄拖动，或用上下方向键调整；与其他改动一起保存。' }
+  })) {
+    const text = Object.entries({ ...values, modelReorderTouchHelp: values.multiKeyReorderHelp }).map(([key, value]) => `\t\t\t${key}: ${JSON.stringify(value)},\n`).join('');
+    replace(`const ${locale} = {\n`, `const ${locale} = {\n${text}`);
+  }
+}

package/scripts/settings-reorder.mjs

@@ -0,0 +1,170 @@
+// Serialized into the hash-verified HOST settings patch by its generator.
+// No configuration or credentials are written here: commit changes one draft.
+export function createSettingsReorder({ handle, row, selector, commit, delay = 400 }) {
+  const doc = handle.ownerDocument;
+  const win = doc.defaultView;
+  const list = row.parentElement;
+  const rows = () => [...list.querySelectorAll(selector)].filter(item => item.parentElement === list);
+  const original = rows();
+  let active = false, stopped = false, timer, frame, target, half;
+  let x, y, startX, startY, pointerId;
+  const oldOutline = row.style.outline;
+  const oldOpacity = row.style.opacity;
+  let targetShadow, marker;
+  function clearTarget() {
+    marker?.remove(); marker = undefined;
+    if (target) target.style.boxShadow = targetShadow;
+    target = undefined;
+  }
+  function locate() {
+    clearTarget();
+    const bounds = list.getBoundingClientRect();
+    if (x < bounds.left - 40 || x > bounds.right + 40) return;
+    const candidates = rows().filter(item => item !== row && item.getBoundingClientRect().height > 0);
+    target = candidates.find(item => y < item.getBoundingClientRect().bottom) ?? candidates.at(-1);
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    half = y < rect.top + rect.height / 2 ? 'before' : 'after';
+    targetShadow = target.style.boxShadow;
+    target.style.boxShadow = `inset 0 ${half === 'before' ? 3 : -3}px 0 #3987ff`;
+    // A viewport overlay stays above card borders and does not move the rows.
+    const edge = half === 'before' ? rect.top : rect.bottom;
+    if (edge < 0 || edge > win.innerHeight) return;
+    const visibleEdge = Math.max(4, Math.min(win.innerHeight - 4, edge));
+    marker = doc.createElement('div');
+    marker.setAttribute('data-settings-reorder-marker', '');
+    marker.setAttribute('aria-hidden', 'true');
+    Object.assign(marker.style, {
+      position: 'fixed', pointerEvents: 'none', zIndex: '2147483647',
+      left: `${Math.max(8, bounds.left)}px`, right: `${Math.max(8, win.innerWidth - bounds.right)}px`,
+      top: `${visibleEdge - 2}px`, height: '4px', borderRadius: '4px',
+      background: '#3987ff', boxShadow: '0 0 0 2px #fff, 0 2px 8px #0008'
+    });
+    const label = doc.createElement('span');
+    label.textContent = doc.documentElement.lang?.startsWith('en') ? 'Release to place here' : '松手后放在这里';
+    Object.assign(label.style, {
+      position: 'absolute', right: '4px', top: edge < 44 ? '8px' : '-30px',
+      padding: '4px 10px', borderRadius: '6px', color: '#fff', background: '#175fc9',
+      font: 'bold 13px/20px sans-serif', whiteSpace: 'nowrap', boxShadow: '0 2px 8px #0005'
+    });
+    marker.appendChild(label); doc.body.appendChild(marker);
+  }
+  const scrollParent = () => {
+    for (let node = list; node && node !== doc.documentElement; node = node.parentElement) {
+      if (node.scrollHeight > node.clientHeight && /auto|scroll/.test(win.getComputedStyle(node).overflowY)) return node;
+    }
+    return doc.scrollingElement;
+  };
+  function tick() {
+    if (!active || stopped) return;
+    const scroll = scrollParent();
+    if (scroll) {
+      const viewport = scroll === doc.scrollingElement;
+      const rect = viewport ? { top: 0, bottom: win.innerHeight } : scroll.getBoundingClientRect();
+      const top = Math.max(0, rect.top), bottom = Math.min(win.innerHeight, rect.bottom);
+      const speed = y < top + 56 ? -Math.min(14, (top + 56 - y) / 3) : y > bottom - 56 ? Math.min(14, (y - bottom + 56) / 3) : 0;
+      if (speed) { scroll.scrollTop += speed; locate(); }
+    }
+    frame = win.requestAnimationFrame(tick);
+  }
+  function cancel() { finish(false); }
+  function move(event) {
+    if (event.pointerId !== pointerId) { cancel(); return; }
+    x = event.clientX; y = event.clientY;
+    if (!active) {
+      // A swipe before activation is never interpreted as a reorder.
+      if (Math.hypot(x - startX, y - startY) > 10) cancel();
+      return;
+    }
+    event.preventDefault();
+    locate();
+  }
+  function up(event) {
+    if (event.pointerId !== pointerId) return;
+    if (Number.isFinite(event.clientX)) x = event.clientX;
+    if (Number.isFinite(event.clientY)) y = event.clientY;
+    if (active) locate();
+    finish(true);
+  }
+  function escape(event) { if (event.key === 'Escape') { event.preventDefault(); cancel(); } }
+  function context(event) { event.preventDefault(); }
+  function finish(save) {
+    if (stopped) return;
+    stopped = true;
+    win.clearTimeout(timer); win.cancelAnimationFrame(frame);
+    doc.removeEventListener('pointermove', move, true);
+    doc.removeEventListener('pointerup', up, true);
+    doc.removeEventListener('pointercancel', cancel, true);
+    doc.removeEventListener('pointerdown', secondPointer, true);
+    doc.removeEventListener('keydown', escape, true);
+    doc.removeEventListener('contextmenu', context, true);
+    win.removeEventListener('blur', cancel);
+    doc.removeEventListener('visibilitychange', cancel);
+    const destination = target;
+    clearTarget(); row.style.outline = oldOutline; row.style.opacity = oldOpacity;
+    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId);
+    const current = rows();
+    // Do not apply an offset to a list changed by another control while held.
+    if (!save || !active || !destination || current.length !== original.length || current.some((item, index) => item !== original[index])) return;
+    const from = current.indexOf(row), at = current.indexOf(destination);
+    const insertion = at + (half === 'after' ? 1 : 0);
+    const to = insertion > from ? insertion - 1 : insertion;
+    if (from >= 0 && to >= 0 && to !== from) commit(to - from);
+  }
+  function secondPointer(event) { if (event.pointerId !== pointerId) cancel(); }
+  return {
+    start(event) {
+      if (event.button !== 0 || event.isPrimary === false) return;
+      pointerId = event.pointerId; x = startX = event.clientX; y = startY = event.clientY;
+      handle.setPointerCapture?.(pointerId);
+      doc.addEventListener('pointermove', move, { capture: true, passive: false });
+      doc.addEventListener('pointerup', up, true);
+      doc.addEventListener('pointercancel', cancel, true);
+      doc.addEventListener('pointerdown', secondPointer, true);
+      doc.addEventListener('keydown', escape, true);
+      doc.addEventListener('contextmenu', context, true);
+      win.addEventListener('blur', cancel);
+      doc.addEventListener('visibilitychange', cancel);
+      timer = win.setTimeout(() => {
+        if (stopped || !row.isConnected) { cancel(); return; }
+        active = true;
+        row.style.outline = '2px solid var(--dsw-alias-label-primary, #679cff)';
+        row.style.opacity = '0.65';
+        locate(); tick();
+      }, delay);
+    }, cancel
+  };
+}
+
+export function useSettingsReorder(config) {
+  const latest = (0, react.useRef)(config);
+  latest.current = config;
+  const gesture = (0, react.useRef)();
+  (0, react.useEffect)(() => {
+    if (config.disabled) gesture.current?.cancel();
+    return () => gesture.current?.cancel();
+  }, [config.disabled]);
+  return id => ({
+    draggable: false,
+    style: { minWidth: 44, minHeight: 44, touchAction: 'none', userSelect: 'none', WebkitTouchCallout: 'none', cursor: 'grab', flexShrink: 0 },
+    onContextMenu: event => event.preventDefault(),
+    onClick: event => { event.preventDefault(); event.stopPropagation(); },
+    onPointerDown: event => {
+      if (latest.current.disabled || event.button !== 0 || event.isPrimary === false) return;
+      gesture.current?.cancel();
+      const handle = event.currentTarget;
+      const row = handle.closest(latest.current.selector);
+      if (!row) return;
+      gesture.current = createSettingsReorder({ handle, row, selector: latest.current.selector, commit: offset => {
+        if (!latest.current.disabled) latest.current.move(id, offset);
+      } });
+      gesture.current.start(event);
+    },
+    onLostPointerCapture: () => gesture.current?.cancel(),
+    onKeyDown: event => {
+      if (latest.current.disabled || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) return;
+      event.preventDefault(); event.stopPropagation();
+      latest.current.move(id, event.key === 'ArrowUp' ? -1 : 1);
+    }
+  });
+}

package/src/hierarchy.js

@@ -18,6 +18,17 @@ export function decodeKeyModelId(model) {
   } catch { return undefined; }
 }
 
+/** Explicit ranks survive host equality checks, schema parsing, and reloads.
+ * Unranked legacy/new entries retain their existing relative order at the end.
+ */
+export function orderedKeyEntries(entries) {
+  const rank = entry => Number.isSafeInteger(entry?.sortOrder) && entry.sortOrder >= 0 ? entry.sortOrder : Infinity;
+  return Object.entries(entries ?? {}).sort(([, left], [, right]) => {
+    const a = rank(left), b = rank(right);
+    return a === b ? 0 : a < b ? -1 : 1;
+  });
+}
+
 export function keyEntryGroupKey(provider, entryId) {
   return `@key/${encodeURIComponent(provider)}/${encodeURIComponent(entryId)}`;
 }
@@ -50,7 +61,7 @@ export function buildModelHierarchy(groups, providers, preferences, current = nu
     }
     const byEntry = new Map();
     const configured = profile?.keyEntries && typeof profile.keyEntries === 'object' ? profile.keyEntries : {};
-    for (const entryId of Object.keys(configured)) {
+    for (const [entryId] of orderedKeyEntries(configured)) {
       if (KEY_ENTRY_ID.test(entryId) && !forbiddenEntry(entryId)) byEntry.set(entryId, []);
     }
     for (const model of aliases) {
@@ -64,6 +75,17 @@ export function buildModelHierarchy(groups, providers, preferences, current = nu
     const children = [...byEntry].filter(([, models]) => models.length > 0).map(([entryId, models]) => {
       const key = keyEntryGroupKey(group.id, entryId);
       const active = root.current && selectedEntry === entryId;
+      // Catalog refreshes may use a different order from the saved editor rows.
+      // Empty lists inherit catalog order; unconfigured models stay stable last.
+      const configuredModels = Object.hasOwn(configured, entryId) ? configured[entryId]?.models : undefined;
+      if (Array.isArray(configuredModels) && configuredModels.length > 0) {
+        const order = new Map();
+        for (const model of configuredModels) {
+          if (typeof model?.id === 'string' && !order.has(model.id)) order.set(model.id, order.size);
+        }
+        const rank = model => order.get(decodeKeyModelId(model.id).modelId) ?? order.size;
+        models.sort((left, right) => rank(left) - rank(right));
+      }
       return { ...group, key, entryId, name: keyEntryName(providers, group.id, entryId), models, current: active,
         expanded: Object.hasOwn(preferences, key) ? preferences[key] : active };
     });

package/src/settings-page.js

@@ -29,7 +29,7 @@ export function ModelGroupsSettingsPage() {
   return h('section', { className: 'mg-maintenance', 'aria-label': '模型分组设置', 'aria-busy': state.busy },
     h('h2', null, '多密钥管理'),
     h('p', null, '在这里启用、更新或关闭多密钥。如果只想按供应商浏览模型，无需启用多密钥。'),
-    snapshot?.pluginVersion && h('p', { className: 'mg-maintenance-help' }, `插件 ${snapshot.pluginVersion} · DSH ${snapshot.compatibility?.hostVersion ?? '版本未确认'}`),
+    h('p', { className: 'mg-maintenance-help' }, `网页插件 ${MODEL_GROUPS_CLIENT_VERSION} · 后端插件 ${snapshot?.pluginVersion ?? '检查中'} · DSH ${snapshot?.compatibility?.hostVersion ?? '版本未确认'}`),
     h('section', { className: 'mg-maintenance-card', 'aria-label': '当前状态' },
       h('div', { className: 'mg-maintenance-row' }, h('h3', null, '当前状态'), h('button', { type: 'button', disabled: state.busy, onClick: refresh }, state.busy ? '处理中…' : '刷新检查')),
       h('p', { role: 'status', 'aria-live': 'polite', className: 'mg-maintenance-help' }, state.busy ? '正在检查或执行维护，请勿关闭或重复操作。' : snapshot ? statusLabel : '尚无可验证状态，请刷新检查。'),