ai-delivery-workflow 0.2.2

package/skills/ai-delivery-orchestrate/assets/project-template/.workflow/tools/viewer/public/app.js

@@ -0,0 +1,546 @@
+const state = {
+  catalog: null,
+  documents: [],
+  filtered: [],
+  selectedPath: null,
+  selectedNode: "",
+  preview: null,
+  previewMode: "rendered",
+};
+
+const elements = Object.fromEntries([
+  "project-name", "iteration-select", "search-input", "refresh-button", "scan-time",
+  "node-total", "node-list", "iteration-title", "progress-caption", "progress-value",
+  "progress-rail", "release-title", "release-caption", "release-value", "release-progress-rail",
+  "production-version", "line-version", "ready-count", "release-target", "release-mode",
+  "workflow-git", "workflow-sync", "code-git", "code-dirty", "shared-checkpoints",
+  "latest-checkpoint", "traceability-count",
+  "evolution-revision", "evolution-feedback", "evolution-proposals", "evolution-trials",
+  "evolution-active", "evolution-high-risk", "evolution-rollbacks", "evolution-hooks",
+  "status-filter", "type-filter", "node-filter", "changed-filter",
+  "reset-filters", "filter-count", "document-rows", "empty-state", "inspector-empty",
+  "inspector-content", "detail-status", "detail-title", "detail-path", "close-inspector",
+  "detail-metadata", "inbound-count", "inbound-list", "outbound-count", "outbound-list",
+  "detail-checksum", "copy-checksum", "standards-list", "preview-loading",
+  "preview-content", "project-root", "success-count", "warning-count", "danger-count",
+  "document-count", "toast",
+].map((id) => [id, document.getElementById(id)]));
+
+const nodeNames = new Map();
+let toastTimer;
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function icon(name) {
+  const paths = {
+    file: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path><path d="M14 2v6h6"></path><path d="M8 13h8M8 17h5"></path>',
+    link: '<path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.1 1.1"></path><path d="M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.1-1.1"></path>',
+  };
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${paths[name]}</svg>`;
+}
+
+function formatDate(value, short = false) {
+  if (!value) return "--";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("zh-CN", short
+    ? { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }
+    : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" })
+    .format(date);
+}
+
+function formatBytes(value) {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KiB`;
+  return `${(value / 1024 / 1024).toFixed(1)} MiB`;
+}
+
+function showToast(message) {
+  clearTimeout(toastTimer);
+  elements.toast.textContent = message;
+  elements.toast.classList.add("visible");
+  toastTimer = setTimeout(() => elements.toast.classList.remove("visible"), 1800);
+}
+
+function uniqueValues(key) {
+  return [...new Set(state.documents.map((document) => document[key]).filter(Boolean))].sort();
+}
+
+function populateSelect(select, values, labelFor = (value) => value) {
+  const current = select.value;
+  select.replaceChildren(new Option("全部", ""));
+  for (const value of values) select.add(new Option(labelFor(value), value));
+  select.value = values.includes(current) ? current : "";
+}
+
+function currentIteration() {
+  return elements["iteration-select"].value || state.catalog?.project.current_iteration_id || "";
+}
+
+function documentsForIteration() {
+  const iteration = currentIteration();
+  return state.documents.filter((document) => !iteration || !document.iteration_id || document.iteration_id === iteration);
+}
+
+function renderNodes() {
+  elements["node-list"].replaceChildren();
+  const iterationDocuments = documentsForIteration();
+  let lastGroup = null;
+  let visibleCount = 0;
+  for (const node of state.catalog.nodes) {
+    nodeNames.set(node.id, node.label);
+    const count = iterationDocuments.filter((document) => document.node_id === node.id).length;
+    if (node.group === "legacy" && count === 0) continue;
+    if (node.group !== lastGroup) {
+      const heading = document.createElement("div");
+      heading.className = "node-group";
+      heading.textContent = ({
+        governance: "治理",
+        development: "研发流程",
+        release: "发布流程",
+        legacy: "历史兼容",
+      })[node.group] || node.group;
+      elements["node-list"].append(heading);
+      lastGroup = node.group;
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `node-item${state.selectedNode === node.id ? " active" : ""}`;
+    button.dataset.node = node.id;
+    const sequence = node.sequence >= 0 ? String(node.sequence).padStart(2, "0") : "·";
+    button.innerHTML = `
+      <span class="node-sequence">${sequence}</span>
+      <span class="node-label">${escapeHtml(node.label)}</span>
+      <span class="node-count ${node.tone}">${count}</span>`;
+    button.addEventListener("click", () => {
+      state.selectedNode = state.selectedNode === node.id ? "" : node.id;
+      elements["node-filter"].value = state.selectedNode;
+      renderNodes();
+      applyFilters();
+    });
+    elements["node-list"].append(button);
+    visibleCount += 1;
+  }
+  elements["node-total"].textContent = `${visibleCount} 个节点`;
+}
+
+function renderTrack(group, documents, rail, caption, value) {
+  const nodes = state.catalog.nodes.filter((node) => node.group === group);
+  const completed = nodes.filter((node) => {
+    const nodeDocuments = documents.filter((item) => item.node_id === node.id);
+    const tones = nodeDocuments.map((item) => item.status.tone);
+    return nodeDocuments.length && tones.includes("success")
+      && !tones.includes("warning") && !tones.includes("danger");
+  }).length;
+  const percent = nodes.length ? Math.round((completed / nodes.length) * 100) : 0;
+  caption.textContent = `${completed}/${nodes.length} 个节点完成，${documents.length} 项物料`;
+  value.textContent = `${percent}%`;
+  rail.replaceChildren();
+  rail.style.setProperty("--node-count", nodes.length);
+  for (const node of nodes) {
+    const nodeDocuments = documents.filter((item) => item.node_id === node.id);
+    const tones = nodeDocuments.map((item) => item.status.tone);
+    const tone = tones.includes("danger") ? "danger"
+      : tones.includes("warning") ? "warning"
+        : nodeDocuments.length && tones.includes("success") ? "success" : "muted";
+    const item = document.createElement("div");
+    item.className = `progress-node ${tone}`;
+    item.title = `${node.label}：${nodeDocuments.length} 项物料`;
+    item.innerHTML = `<i></i><span>${escapeHtml(node.label)}</span>`;
+    rail.append(item);
+  }
+}
+
+function renderProgress() {
+  const developmentDocuments = documentsForIteration().filter((item) => {
+    const node = state.catalog.nodes.find((candidate) => candidate.id === item.node_id);
+    return node?.group === "development";
+  });
+  const activeRelease = state.catalog.project.active_release_id;
+  const releaseDocuments = state.documents.filter((item) => item.release_id === activeRelease);
+  const iteration = currentIteration() || "未指定版本";
+  elements["iteration-title"].textContent = `${iteration} 研发流程`;
+  elements["release-title"].textContent = activeRelease ? `${activeRelease} 发布流程` : "发布流程";
+  renderTrack("development", developmentDocuments, elements["progress-rail"], elements["progress-caption"], elements["progress-value"]);
+  renderTrack("release", releaseDocuments, elements["release-progress-rail"], elements["release-caption"], elements["release-value"]);
+  if (!activeRelease) elements["release-caption"].textContent = "尚未启动独立发布";
+}
+
+function applyFilters() {
+  const query = elements["search-input"].value.trim().toLowerCase();
+  const status = elements["status-filter"].value;
+  const type = elements["type-filter"].value;
+  const node = elements["node-filter"].value;
+  const changed = elements["changed-filter"].checked;
+  const iteration = currentIteration();
+  state.selectedNode = node;
+  state.filtered = state.documents.filter((document) => {
+    const haystack = [
+      document.title, document.path, document.artifact_id, document.type,
+      nodeNames.get(document.node_id), ...document.standards,
+    ].join(" ").toLowerCase();
+    return (!iteration || !document.iteration_id || document.iteration_id === iteration)
+      && (!query || haystack.includes(query))
+      && (!status || document.status.key === status)
+      && (!type || document.type === type)
+      && (!node || document.node_id === node)
+      && (!changed || Boolean(document.git_status));
+  });
+  renderTable();
+  renderNodes();
+  renderProgress();
+}
+
+function renderTable() {
+  elements["document-rows"].replaceChildren();
+  elements["filter-count"].textContent = `${state.filtered.length} 项物料`;
+  elements["empty-state"].hidden = state.filtered.length > 0;
+  for (const item of state.filtered) {
+    const row = document.createElement("tr");
+    row.tabIndex = 0;
+    row.className = state.selectedPath === item.path ? "selected" : "";
+    row.dataset.path = item.path;
+    row.innerHTML = `
+      <td>
+        <div class="document-cell">
+          <span class="file-icon">${icon("file")}</span>
+          <span class="document-names">
+            <strong>${escapeHtml(item.title)}</strong>
+            <span>${escapeHtml(item.path)}</span>
+          </span>
+        </div>
+      </td>
+      <td>${escapeHtml(nodeNames.get(item.node_id) || item.node_id)}</td>
+      <td>${escapeHtml(item.type)}</td>
+      <td><span class="status-label ${item.status.tone}">${escapeHtml(item.status.label)}</span></td>
+      <td>${escapeHtml(item.version || "--")}</td>
+      <td>${escapeHtml(formatDate(item.modified_at, true))}</td>`;
+    const select = () => selectDocument(item.path);
+    row.addEventListener("click", select);
+    row.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") select();
+    });
+    elements["document-rows"].append(row);
+  }
+}
+
+function relationshipList(container, paths) {
+  container.replaceChildren();
+  if (!paths.length) {
+    const empty = document.createElement("span");
+    empty.className = "relationship-empty";
+    empty.textContent = "暂无可解析的文件引用";
+    container.append(empty);
+    return;
+  }
+  for (const targetPath of paths.slice(0, 8)) {
+    const target = state.documents.find((document) => document.path === targetPath);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "relationship-link";
+    button.innerHTML = `${icon("link")}<span>${escapeHtml(target?.title || targetPath)}</span>`;
+    button.title = targetPath;
+    button.addEventListener("click", () => selectDocument(targetPath));
+    container.append(button);
+  }
+}
+
+function metadataMarkup(item) {
+  const values = [
+    ["节点", nodeNames.get(item.node_id) || item.node_id],
+    ["类型", item.type],
+    ["版本", item.version || "--"],
+    ["物料 ID", item.artifact_id || "--"],
+    ["更新时间", formatDate(item.modified_at, true)],
+    ["大小", formatBytes(item.size_bytes)],
+    ["Git 状态", item.git_status || "已同步"],
+    ["迭代", item.iteration_id || "长期基线"],
+  ];
+  return values.map(([term, value]) => `<dt>${escapeHtml(term)}</dt><dd title="${escapeHtml(value)}">${escapeHtml(value)}</dd>`).join("");
+}
+
+async function selectDocument(pathValue) {
+  const item = state.documents.find((document) => document.path === pathValue);
+  if (!item) return;
+  state.selectedPath = item.path;
+  state.preview = null;
+  elements["inspector-empty"].hidden = true;
+  elements["inspector-content"].hidden = false;
+  document.querySelector(".inspector").classList.add("open");
+  elements["detail-status"].className = `status-label ${item.status.tone}`;
+  elements["detail-status"].textContent = item.status.label;
+  elements["detail-title"].textContent = item.title;
+  elements["detail-path"].textContent = item.path;
+  elements["detail-metadata"].innerHTML = metadataMarkup(item);
+  elements["inbound-count"].textContent = item.inbound.length;
+  elements["outbound-count"].textContent = item.outbound.length;
+  relationshipList(elements["inbound-list"], item.inbound);
+  relationshipList(elements["outbound-list"], item.outbound);
+  elements["detail-checksum"].textContent = item.checksum;
+  elements["detail-checksum"].title = item.checksum;
+  elements["standards-list"].replaceChildren();
+  for (const standard of item.standards) {
+    const tag = document.createElement("span");
+    tag.className = "standard-tag";
+    tag.textContent = standard;
+    elements["standards-list"].append(tag);
+  }
+  if (!item.standards.length) {
+    const empty = document.createElement("span");
+    empty.className = "relationship-empty";
+    empty.textContent = "未在正文中识别到规范 ID";
+    elements["standards-list"].append(empty);
+  }
+  renderTable();
+  elements["preview-loading"].hidden = false;
+  elements["preview-loading"].textContent = item.previewable ? "正在加载预览..." : "该文件不支持文本预览";
+  elements["preview-content"].replaceChildren();
+  if (!item.previewable) return;
+  if (item.preview_kind === "image") {
+    state.preview = {
+      path: item.path,
+      extension: item.extension,
+      imageUrl: `/api/file?path=${encodeURIComponent(item.path)}`,
+    };
+    renderPreview();
+    return;
+  }
+  try {
+    const response = await fetch(`/api/document?path=${encodeURIComponent(item.path)}`);
+    const payload = await response.json();
+    if (!response.ok) throw new Error(payload.error || "预览加载失败");
+    if (state.selectedPath !== item.path) return;
+    state.preview = payload;
+    renderPreview();
+  } catch (error) {
+    elements["preview-loading"].hidden = false;
+    elements["preview-loading"].textContent = error.message;
+  }
+}
+
+function parseCsv(source) {
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let quoted = false;
+  for (let index = 0; index < source.length; index += 1) {
+    const character = source[index];
+    if (character === '"') {
+      if (quoted && source[index + 1] === '"') {
+        cell += '"';
+        index += 1;
+      } else quoted = !quoted;
+    } else if (character === "," && !quoted) {
+      row.push(cell);
+      cell = "";
+    } else if ((character === "\n" || character === "\r") && !quoted) {
+      if (character === "\r" && source[index + 1] === "\n") index += 1;
+      row.push(cell);
+      if (row.some((value) => value.length)) rows.push(row);
+      row = [];
+      cell = "";
+    } else cell += character;
+  }
+  if (cell.length || row.length) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return rows;
+}
+
+function markdown(source) {
+  const escaped = escapeHtml(source);
+  const lines = escaped.split(/\r?\n/);
+  const output = [];
+  let list = null;
+  const closeList = () => {
+    if (list) output.push(`</${list}>`);
+    list = null;
+  };
+  for (const line of lines) {
+    if (/^###\s/.test(line)) { closeList(); output.push(`<h3>${inlineMarkdown(line.slice(4))}</h3>`); }
+    else if (/^##\s/.test(line)) { closeList(); output.push(`<h2>${inlineMarkdown(line.slice(3))}</h2>`); }
+    else if (/^#\s/.test(line)) { closeList(); output.push(`<h1>${inlineMarkdown(line.slice(2))}</h1>`); }
+    else if (/^\s*[-*]\s+/.test(line)) {
+      if (list !== "ul") { closeList(); output.push("<ul>"); list = "ul"; }
+      output.push(`<li>${inlineMarkdown(line.replace(/^\s*[-*]\s+/, ""))}</li>`);
+    } else if (/^\s*\d+\.\s+/.test(line)) {
+      if (list !== "ol") { closeList(); output.push("<ol>"); list = "ol"; }
+      output.push(`<li>${inlineMarkdown(line.replace(/^\s*\d+\.\s+/, ""))}</li>`);
+    } else if (!line.trim()) { closeList(); }
+    else { closeList(); output.push(`<p>${inlineMarkdown(line)}</p>`); }
+  }
+  closeList();
+  return output.join("");
+}
+
+function inlineMarkdown(value) {
+  return value
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/\[([^\]]+)]\(([^)]+)\)/g, "$1");
+}
+
+function csvTable(source) {
+  const rows = parseCsv(source).slice(0, 200);
+  if (!rows.length) return "<p>空 CSV 文件</p>";
+  return `<table><thead><tr>${rows[0].map((cell) => `<th>${escapeHtml(cell)}</th>`).join("")}</tr></thead><tbody>${
+    rows.slice(1).map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("")
+  }</tbody></table>`;
+}
+
+function renderPreview() {
+  if (!state.preview) return;
+  elements["preview-loading"].hidden = true;
+  const { content, extension } = state.preview;
+  if (state.preview.imageUrl) {
+    elements["preview-content"].innerHTML = `<img src="${escapeHtml(state.preview.imageUrl)}" alt="${escapeHtml(state.preview.path)}">`;
+  } else if (state.previewMode === "source") {
+    elements["preview-content"].innerHTML = `<pre>${escapeHtml(content)}</pre>`;
+  } else if (extension === ".md" || extension === ".mdx") {
+    elements["preview-content"].innerHTML = markdown(content);
+  } else if (extension === ".csv") {
+    elements["preview-content"].innerHTML = csvTable(content);
+  } else if (extension === ".json") {
+    let formatted = content;
+    try { formatted = JSON.stringify(JSON.parse(content), null, 2); } catch { /* Show original content. */ }
+    elements["preview-content"].innerHTML = `<pre>${escapeHtml(formatted)}</pre>`;
+  } else {
+    elements["preview-content"].innerHTML = `<pre>${escapeHtml(content)}</pre>`;
+  }
+}
+
+function closeInspector() {
+  state.selectedPath = null;
+  state.preview = null;
+  document.querySelector(".inspector").classList.remove("open");
+  elements["inspector-content"].hidden = true;
+  elements["inspector-empty"].hidden = false;
+  renderTable();
+}
+
+function initializeCatalog(catalog) {
+  state.catalog = catalog;
+  state.documents = catalog.documents;
+  elements["project-name"].textContent = `项目：${catalog.project.name}`;
+  elements["project-root"].textContent = `项目目录：${catalog.project.root}`;
+  elements["project-root"].title = catalog.project.root;
+  elements["scan-time"].textContent = formatDate(catalog.scanned_at);
+  elements["success-count"].textContent = catalog.counts.success || 0;
+  elements["warning-count"].textContent = catalog.counts.warning || 0;
+  elements["danger-count"].textContent = catalog.counts.danger || 0;
+  elements["document-count"].textContent = catalog.documents.length;
+  elements["production-version"].textContent = catalog.project.production_version_id || "未发布";
+  elements["line-version"].textContent = catalog.project.latest_line_version_id || "--";
+  elements["ready-count"].textContent = String(catalog.project.release_ready_count || 0);
+  elements["release-target"].textContent = catalog.project.selected_target_version || "未选择";
+  elements["release-mode"].textContent = ({
+    incremental: "增量发布",
+    "same-version-redeploy": "同版本重发",
+  })[catalog.project.release_mode] || "未启动";
+  const workflowGit = catalog.repositories?.workflow || {};
+  const codeGit = catalog.repositories?.code || {};
+  elements["workflow-git"].textContent = `${workflowGit.branch || "--"} · ${(workflowGit.head || "").slice(0, 8) || "无提交"}`;
+  elements["workflow-sync"].textContent = workflowGit.sync_status || "未知";
+  elements["workflow-sync"].classList.toggle("warning", ["uncommitted", "unpushed", "behind"].includes(workflowGit.sync_status));
+  elements["code-git"].textContent = `${codeGit.branch || "--"} · ${(codeGit.head || "").slice(0, 8) || "无提交"}`;
+  elements["code-dirty"].textContent = codeGit.dirty_paths?.length ? `${codeGit.dirty_paths.length} 个未提交路径` : "工作区干净";
+  elements["code-dirty"].classList.toggle("warning", Boolean(codeGit.dirty_paths?.length));
+  elements["shared-checkpoints"].textContent = String(catalog.shared_state?.checkpoint_count || 0);
+  elements["latest-checkpoint"].textContent = catalog.shared_state?.latest_checkpoint || "暂无";
+  elements["traceability-count"].textContent = String(catalog.traceability?.length || 0);
+  const evolution = catalog.evolution || {};
+  elements["evolution-revision"].textContent = `revision ${evolution.revision || 0}`;
+  elements["evolution-feedback"].textContent = String(evolution.feedback_count || 0);
+  elements["evolution-proposals"].textContent = String(evolution.proposal_count || 0);
+  elements["evolution-trials"].textContent = String(evolution.trial_count || 0);
+  elements["evolution-active"].textContent = String(evolution.active_count || 0);
+  elements["evolution-high-risk"].textContent = String(evolution.high_risk_count || 0);
+  elements["evolution-rollbacks"].textContent = String(evolution.rollback_count || 0);
+  elements["evolution-hooks"].textContent = String(evolution.hook_result_count || 0);
+
+  elements["iteration-select"].replaceChildren();
+  if (!catalog.iterations.length) elements["iteration-select"].add(new Option("未指定迭代", ""));
+  for (const iteration of catalog.iterations) {
+    elements["iteration-select"].add(new Option(
+      iteration === catalog.project.current_iteration_id ? `${iteration}（当前）` : iteration,
+      iteration,
+    ));
+  }
+  elements["iteration-select"].value = catalog.project.current_iteration_id || catalog.iterations[0] || "";
+
+  for (const node of catalog.nodes) nodeNames.set(node.id, node.label);
+  const statusKeys = [...new Set(state.documents.map((item) => item.status.key))].sort();
+  populateSelect(elements["status-filter"], statusKeys, (key) =>
+    state.documents.find((item) => item.status.key === key)?.status.label || key);
+  populateSelect(elements["type-filter"], uniqueValues("type"));
+  populateSelect(elements["node-filter"], catalog.nodes.map((node) => node.id), (id) => nodeNames.get(id) || id);
+  if (catalog.truncated) showToast("物料超过 10,000 项，当前结果已截断");
+  applyFilters();
+}
+
+async function loadCatalog({ preserveSelection = false } = {}) {
+  elements["refresh-button"].disabled = true;
+  elements["refresh-button"].classList.add("loading");
+  try {
+    const response = await fetch("/api/catalog", { cache: "no-store" });
+    const payload = await response.json();
+    if (!response.ok) throw new Error(payload.error || "项目扫描失败");
+    const selected = preserveSelection ? state.selectedPath : null;
+    initializeCatalog(payload);
+    if (selected && payload.documents.some((item) => item.path === selected)) await selectDocument(selected);
+  } catch (error) {
+    showToast(error.message);
+    elements["document-rows"].innerHTML = `<tr><td colspan="6">无法读取项目：${escapeHtml(error.message)}</td></tr>`;
+  } finally {
+    elements["refresh-button"].disabled = false;
+    elements["refresh-button"].classList.remove("loading");
+  }
+}
+
+elements["refresh-button"].addEventListener("click", () => loadCatalog({ preserveSelection: true }));
+elements["iteration-select"].addEventListener("change", applyFilters);
+elements["search-input"].addEventListener("input", applyFilters);
+elements["status-filter"].addEventListener("change", applyFilters);
+elements["type-filter"].addEventListener("change", applyFilters);
+elements["node-filter"].addEventListener("change", applyFilters);
+elements["changed-filter"].addEventListener("change", applyFilters);
+elements["reset-filters"].addEventListener("click", () => {
+  elements["search-input"].value = "";
+  elements["status-filter"].value = "";
+  elements["type-filter"].value = "";
+  elements["node-filter"].value = "";
+  elements["changed-filter"].checked = false;
+  state.selectedNode = "";
+  applyFilters();
+});
+elements["close-inspector"].addEventListener("click", closeInspector);
+elements["copy-checksum"].addEventListener("click", async () => {
+  const value = elements["detail-checksum"].textContent;
+  if (!value) return;
+  await navigator.clipboard.writeText(value);
+  showToast("SHA-256 已复制");
+});
+document.querySelectorAll(".preview-tab").forEach((button) => {
+  button.addEventListener("click", () => {
+    state.previewMode = button.dataset.mode;
+    document.querySelectorAll(".preview-tab").forEach((item) => item.classList.toggle("active", item === button));
+    renderPreview();
+  });
+});
+document.addEventListener("keydown", (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    elements["search-input"].focus();
+  }
+  if (event.key === "Escape" && state.selectedPath) closeInspector();
+});
+
+loadCatalog();