@shendeguize/remote-dsh-center 0.4.0

package/src/web/components/defaults-card.js

@@ -0,0 +1,216 @@
+/**
+ * 全局默认卡（10 §3.7 / UI-17）。manager.port 改动只落盘；重启提示始终由
+ * configuredPort 与实际监听端口的差异派生（13 §2.6）。
+ */
+
+import { button, el } from '../utils.js';
+import {
+  buildDefaultsPatch,
+  deepEqual,
+  diffPatch,
+  field,
+  input,
+} from '../form.js';
+import { BINDABLE_PORT_MIN, PORT_MAX, PORT_MIN } from '../setup-schema.js';
+
+export function createDefaultsCard({ store, actions }) {
+  const remote = field('远端默认 web 端口', input('number', '', { min: PORT_MIN, max: PORT_MAX }));
+  const rangeFrom = field('本机端口区间起点', input('number', '', { min: BINDABLE_PORT_MIN, max: PORT_MAX }));
+  const rangeTo = field('本机端口区间终点', input('number', '', { min: BINDABLE_PORT_MIN, max: PORT_MAX }));
+  const managerPort = field('manager 监听端口', input('number', '', { min: PORT_MIN, max: PORT_MAX }), {
+    hint: '改动仅落盘，需重启 manager 生效',
+  });
+
+  const saveBtn = button('保存', { variant: 'primary', compact: false, onClick: submit });
+  const resetBtn = button('还原', { compact: false, onClick: resetDraft });
+  const notice = el('p.card-notice', { hidden: true });
+
+  const root = el('article.card.defaults-card', {}, [
+    el('header.card-header', {}, [el('h2', { text: '全局默认' })]),
+    el('div.field-grid', {}, [remote.root, managerPort.root, rangeFrom.root, rangeTo.root]),
+    notice,
+    el('footer.card-footer', {}, [saveBtn, resetBtn]),
+  ]);
+
+  const controls = {
+    remoteWebPort: remote,
+    managerPort,
+    rangeFrom,
+    rangeTo,
+  };
+  const draftKeys = Object.keys(controls);
+  let baseline = configFromStore();
+  const conflicts = new Set();
+
+  function configFromStore() {
+    const defaults = store.state.defaults;
+    const info = store.state.manager.info;
+    const configuredPort = store.state.manager.configuredPort ?? info?.port ?? null;
+    return {
+      remoteWebPort: defaults?.remoteWebPort ?? null,
+      localPortRange: Array.isArray(defaults?.localPortRange) ? [...defaults.localPortRange] : null,
+      manager: { port: configuredPort },
+    };
+  }
+
+  function draftOf(config) {
+    return {
+      remoteWebPort: config?.remoteWebPort == null ? '' : String(config.remoteWebPort),
+      managerPort: config?.manager?.port == null ? '' : String(config.manager.port),
+      rangeFrom: config?.localPortRange?.[0] == null ? '' : String(config.localPortRange[0]),
+      rangeTo: config?.localPortRange?.[1] == null ? '' : String(config.localPortRange[1]),
+    };
+  }
+
+  function readDraft() {
+    return Object.fromEntries(draftKeys.map((key) => [key, controls[key].input.value]));
+  }
+
+  function writeDraft(draft, keys = draftKeys) {
+    for (const key of keys) controls[key].input.value = draft[key];
+  }
+
+  function clearErrors(keys = draftKeys) {
+    for (const key of keys) controls[key].setError(null);
+  }
+
+  function renderNotice() {
+    const messages = [];
+    if (conflicts.size > 0) {
+      messages.push('服务端配置已变化；同字段的本地草稿已保留。「还原」可载入最新服务端值。');
+    }
+    const runtimePort = store.state.manager.info?.port ?? null;
+    const configuredPort = store.state.manager.configuredPort;
+    if (configuredPort != null && runtimePort != null && configuredPort !== runtimePort) {
+      messages.push(`manager 端口已配置为 ${configuredPort}，重启 manager 后生效。`);
+    }
+    notice.textContent = messages.join('\n');
+    notice.hidden = messages.length === 0;
+  }
+
+  function isDirty() {
+    return !deepEqual(readDraft(), draftOf(baseline));
+  }
+
+  function syncDisabled() {
+    const pending = store.isPending('defaults:save');
+    const dirty = isDirty();
+    saveBtn.disabled = !dirty || !store.canWrite() || pending;
+    resetBtn.disabled = !dirty || pending;
+    for (const f of Object.values(controls)) f.input.disabled = pending;
+  }
+
+  function syncDraftState() {
+    const draft = readDraft();
+    const canonical = draftOf(baseline);
+    for (const key of conflicts) {
+      if (draft[key] === canonical[key]) conflicts.delete(key);
+    }
+    renderNotice();
+    syncDisabled();
+  }
+
+  function resetDraft() {
+    if (store.isPending('defaults:save')) return;
+    baseline = configFromStore();
+    writeDraft(draftOf(baseline));
+    clearErrors();
+    conflicts.clear();
+    syncDraftState();
+  }
+
+  /**
+   * 服务端更新按字段三方合并：用户没动的字段跟随；双方都动了同一字段时，
+   * baseline 仍推进到最新服务端值，但保留 DOM 草稿并提示冲突。
+   */
+  function reconcileFromStore() {
+    const next = configFromStore();
+    const previousDraft = draftOf(baseline);
+    const nextDraft = draftOf(next);
+    const draft = readDraft();
+    for (const key of draftKeys) {
+      const localChanged = draft[key] !== previousDraft[key];
+      const serverChanged = nextDraft[key] !== previousDraft[key];
+      if (!localChanged) {
+        controls[key].input.value = nextDraft[key];
+        controls[key].setError(null);
+        conflicts.delete(key);
+      } else if (serverChanged) {
+        if (draft[key] === nextDraft[key]) {
+          controls[key].input.value = nextDraft[key];
+          controls[key].setError(null);
+          conflicts.delete(key);
+        } else {
+          conflicts.add(key);
+        }
+      }
+    }
+    baseline = next;
+    syncDraftState();
+  }
+
+  function onDraftChanged(event) {
+    const key = draftKeys.find((candidate) => controls[candidate].input === event.target);
+    if (key) {
+      if (key === 'rangeFrom' || key === 'rangeTo') rangeFrom.setError(null);
+      else controls[key].setError(null);
+    }
+    syncDraftState();
+  }
+
+  async function submit() {
+    if (store.isPending('defaults:save') || !store.canWrite()) return;
+    const built = buildDefaultsPatch({
+      remoteWebPort: remote.input.value,
+      rangeFrom: rangeFrom.input.value,
+      rangeTo: rangeTo.input.value,
+      managerPort: managerPort.input.value,
+    }, { minWidth: Math.max(1, store.state.hosts.size) });
+
+    remote.setError(built.errors?.remoteWebPort ?? null);
+    rangeFrom.setError(built.errors?.localPortRange ?? null);
+    rangeTo.setError(null);
+    managerPort.setError(built.errors?.managerPort ?? null);
+    if (!built.ok) return;
+
+    const patch = diffPatch(built.value, baseline);
+    if (Object.keys(patch).length === 0) {
+      writeDraft(draftOf(baseline));
+      clearErrors();
+      conflicts.clear();
+      syncDraftState();
+      store.addToast({ level: 'info', summary: '没有需要保存的有效变更' });
+      return;
+    }
+
+    const res = await actions.saveDefaults(patch);
+    if (!res) return;
+    baseline = configFromStore();
+    writeDraft(draftOf(baseline));
+    clearErrors();
+    conflicts.clear();
+    syncDraftState();
+  }
+
+  for (const f of Object.values(controls)) {
+    f.input.addEventListener('input', onDraftChanged);
+    f.input.addEventListener('change', onDraftChanged);
+  }
+
+  const offs = [
+    store.on('defaults:changed', reconcileFromStore),
+    store.on('manager:changed', reconcileFromStore),
+    store.on('manager-config:changed', reconcileFromStore),
+    store.on('pending:changed', syncDraftState),
+    store.on('connection:changed', syncDraftState),
+    store.on('hosts:reset', syncDraftState),
+  ];
+  resetDraft();
+
+  return {
+    root,
+    destroy() {
+      for (const off of offs) off();
+    },
+  };
+}

package/src/web/components/event-panel.js

@@ -0,0 +1,98 @@
+/**
+ * 事件面板（10 §3.8 / UI-18）。环形缓冲 50 条由 store 保证；
+ * 面板只做渲染 + 主机过滤 + 折叠。
+ */
+
+import { clear, coalesce, el, fmtClock } from '../utils.js';
+
+const LEVEL_LABEL = { info: '信息', warn: '警告', error: '错误' };
+
+export function createEventPanel({ store }) {
+  const list = el('ul.event-list', { 'aria-live': 'polite' });
+  const filter = el('select.event-filter', {
+    'aria-label': '按主机过滤事件',
+    on: { change: () => render() },
+  });
+  const clearBtn = el('button.btn.btn-compact.btn-default', {
+    type: 'button', text: '清空', on: { click: () => store.clearEvents() },
+  });
+  const body = el('div.event-body', {}, [
+    el('div.event-toolbar', {}, [filter, clearBtn]),
+    list,
+  ]);
+
+  const root = el('section.card.event-panel', {}, [
+    el('header.card-header', {}, [
+      el('h2', { text: '事件' }),
+      el('button.btn.btn-compact.btn-default.collapse-toggle', {
+        type: 'button',
+        text: '折叠',
+        'aria-expanded': 'true',
+        on: {
+          click: (e) => {
+            const open = body.hidden;
+            body.hidden = !open;
+            e.target.textContent = open ? '折叠' : '展开';
+            e.target.setAttribute('aria-expanded', String(open));
+          },
+        },
+      }),
+    ]),
+    body,
+  ]);
+
+  function renderFilter() {
+    const selected = filter.value;
+    clear(filter);
+    filter.append(el('option', { value: '', text: '全部主机' }));
+    for (const name of [...store.state.hosts.keys()].sort()) {
+      filter.append(el('option', { value: name, text: name }));
+    }
+    filter.value = [...filter.options].some((o) => o.value === selected) ? selected : '';
+  }
+
+  function render() {
+    const want = filter.value;
+    clear(list);
+    const events = store.state.events.filter((e) => want === '' || e.host === want);
+    if (events.length === 0) {
+      list.append(el('li.empty-hint', { text: '暂无事件' }));
+      return;
+    }
+    for (const ev of events.slice().reverse()) {
+      list.append(el(`li.event-item.event-${ev.level}`, {}, [
+        el('time', { datetime: ev.ts, text: fmtClock(ev.ts), title: ev.ts }),
+        el('span.event-level', { text: LEVEL_LABEL[ev.level] ?? ev.level }),
+        el('span.event-host', { text: ev.host ?? 'manager' }),
+        el('span.event-msg', { text: ev.msg, title: ev.detail ?? ev.msg }),
+      ]));
+    }
+  }
+
+  const rerenderAll = () => {
+    renderFilter();
+    render();
+  };
+
+  // 事件是会成串来的（批量拉起、一批隧道同时重连、某台远端在刷警告），故订阅侧一律
+  // 合到帧边界再画一次；用户看到的最终画面不变（issue #106）。
+  const renderSoon = coalesce(render);
+  const rerenderAllSoon = coalesce(rerenderAll);
+
+  const offs = [
+    store.on('events:changed', renderSoon),
+    store.on('hosts:reset', rerenderAllSoon),
+    // 单条 host-changed 也可能带来一台没见过的主机（ssh config 多出一台、向导收尾
+    // 解门禁都走这条）。只认整份快照的话，下拉里就一直缺这台。
+    store.on('hosts:changed', rerenderAllSoon),
+  ];
+  renderFilter();
+  render();
+
+  return {
+    root,
+    destroy() {
+      for (const off of offs) off();
+    },
+  };
+}