@v1hz/md2docx 1.0.0

package/src/web/app.js

@@ -0,0 +1,181 @@
+const form = document.querySelector("#config-form");
+const index = document.querySelector("#config-index");
+const status = document.querySelector("#status");
+const saveButton = document.querySelector("#save-button");
+const resetButton = document.querySelector("#reset-button");
+
+let schema;
+let originalConfig;
+let currentConfig;
+
+initialize();
+
+async function initialize() {
+  try {
+    const response = await fetch("/api/config");
+    if (!response.ok) throw new Error("无法读取配置");
+    ({ schema, config: originalConfig } = await response.json());
+    delete originalConfig.$schema;
+    currentConfig = structuredClone(originalConfig);
+    enforceHeadingDependency(originalConfig);
+    enforceHeadingDependency(currentConfig);
+    renderForm();
+    updateView();
+  } catch (error) {
+    form.innerHTML = `<div class="loading">${escapeHtml(error.message)}</div>`;
+    setStatus(error.message, true);
+  }
+}
+
+function renderForm() {
+  form.innerHTML = "";
+  index.innerHTML = "";
+  for (const [groupName, groupSchema] of Object.entries(schema.properties)) {
+    const title = groupSchema.description ?? groupName;
+    const sectionId = `section-${groupName}`;
+    const link = document.createElement("a");
+    link.href = `#${sectionId}`;
+    link.textContent = title;
+    index.append(link);
+
+    const group = document.createElement("section");
+    group.className = "group";
+    group.id = sectionId;
+    group.innerHTML = `<header class="group-title"><h2>${escapeHtml(title)}</h2></header><div class="fields"></div>`;
+    const fields = group.querySelector(".fields");
+    for (const [name, fieldSchema] of Object.entries(groupSchema.properties)) {
+      fields.append(createField(groupName, name, fieldSchema));
+    }
+    form.append(group);
+  }
+}
+
+function createField(groupName, name, fieldSchema) {
+  const path = `${groupName}.${name}`;
+  const field = document.createElement("div");
+  field.className = "field";
+  field.innerHTML = `<label for="${path}">${escapeHtml(fieldSchema.description ?? name)}</label>`;
+
+  let input;
+  if (fieldSchema.type === "boolean") {
+    const wrapper = document.createElement("label");
+    wrapper.className = "switch";
+    wrapper.innerHTML = `<input id="${path}" type="checkbox" ${getPath(currentConfig, path) ? "checked" : ""}><span class="switch-track"></span>`;
+    input = wrapper.querySelector("input");
+    if (path === "normalizeHeadings.enabled" && currentConfig.numberHeadings.enabled) {
+      input.disabled = true;
+      input.title = "标题编号开启时无法关闭";
+    }
+    field.append(wrapper);
+  } else if (fieldSchema.enum) {
+    input = document.createElement("select");
+    input.id = path;
+    for (const value of fieldSchema.enum) {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = fieldSchema.enumDescriptions?.[value] ?? value;
+      option.selected = value === getPath(currentConfig, path);
+      input.append(option);
+    }
+    field.append(input);
+  } else {
+    input = document.createElement("input");
+    input.id = path;
+    input.type =
+      fieldSchema.type === "integer" || fieldSchema.type === "number" ? "number" : "text";
+    input.value = getPath(currentConfig, path) ?? "";
+    if (fieldSchema.minimum !== undefined) input.min = fieldSchema.minimum;
+    if (fieldSchema.type === "integer") input.step = "1";
+    field.append(input);
+  }
+
+  input.addEventListener("input", () => {
+    const value =
+      fieldSchema.type === "boolean"
+        ? input.checked
+        : fieldSchema.type === "integer"
+          ? Number.parseInt(input.value, 10)
+          : fieldSchema.type === "number"
+            ? Number(input.value)
+            : input.value;
+    setPath(currentConfig, path, value);
+    if (path === "numberHeadings.enabled") {
+      enforceHeadingDependency(currentConfig);
+      syncHeadingDependencyControls();
+    }
+    updateView();
+  });
+  return field;
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  saveButton.disabled = true;
+  setStatus("正在保存配置…");
+  try {
+    const response = await fetch("/api/config", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(currentConfig),
+    });
+    const result = await response.json();
+    if (!response.ok) throw new Error(result.error ?? "保存失败");
+    originalConfig = structuredClone(currentConfig);
+    updateView();
+    setStatus("默认配置已保存");
+  } catch (error) {
+    setStatus(error.message, true);
+    saveButton.disabled = false;
+  }
+});
+
+resetButton.addEventListener("click", () => {
+  currentConfig = structuredClone(originalConfig);
+  renderForm();
+  updateView();
+});
+
+function updateView() {
+  const changes = countChanges(originalConfig, currentConfig);
+  saveButton.disabled = changes === 0;
+  resetButton.disabled = changes === 0;
+  if (changes) setStatus("有尚未保存的修改");
+  else if (status.textContent !== "默认配置已保存") setStatus("配置尚未修改");
+}
+
+function countChanges(before, after) {
+  return Object.keys(schema.properties).reduce(
+    (total, group) =>
+      total +
+      Object.keys(schema.properties[group].properties).filter(
+        (name) => before[group][name] !== after[group][name],
+      ).length,
+    0,
+  );
+}
+
+function getPath(source, path) {
+  return path.split(".").reduce((value, key) => value?.[key], source);
+}
+function setPath(source, path, value) {
+  const [group, name] = path.split(".");
+  source[group][name] = value;
+}
+function enforceHeadingDependency(config) {
+  if (config.numberHeadings.enabled) config.normalizeHeadings.enabled = true;
+}
+function syncHeadingDependencyControls() {
+  const normalizeInput = document.getElementById("normalizeHeadings.enabled");
+  normalizeInput.checked = currentConfig.normalizeHeadings.enabled;
+  normalizeInput.disabled = currentConfig.numberHeadings.enabled;
+  normalizeInput.title = currentConfig.numberHeadings.enabled ? "标题编号开启时无法关闭" : "";
+}
+function setStatus(message, error = false) {
+  status.textContent = message;
+  status.classList.toggle("error", error);
+}
+function escapeHtml(value) {
+  const node = document.createElement("span");
+  node.textContent = value;
+  return node.innerHTML;
+}

package/src/web/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="md2docx 默认配置编辑器" />
+    <title>md2docx 配置台</title>
+    <link rel="stylesheet" href="/app.css" />
+  </head>
+  <body>
+    <main class="workspace">
+      <nav id="config-index" class="config-index" aria-label="配置索引"></nav>
+      <form id="config-form" class="config-sheet" aria-label="默认配置">
+        <div class="loading">正在读取配置…</div>
+      </form>
+    </main>
+
+    <footer class="action-bar">
+      <p id="status" role="status">配置尚未修改</p>
+      <div class="actions">
+        <button id="reset-button" class="secondary" type="button" disabled>撤销修改</button>
+        <button id="save-button" type="submit" form="config-form" disabled>保存默认配置</button>
+      </div>
+    </footer>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

package/src/web.ts

@@ -0,0 +1,148 @@
+import { writeFile } from "fs/promises";
+import { resolve } from "path";
+
+import { getConfigOptions } from "./cli";
+import { CONFIG_PATH, CONFIG_SCHEMA_PATH } from "./paths";
+
+const HOSTNAME = "127.0.0.1";
+const PORT = 3210;
+const WEB_DIR = resolve(import.meta.dir, "web");
+
+interface WebHandlerOptions {
+  configPath?: string;
+  schemaPath?: string;
+  webDir?: string;
+}
+
+export function createWebHandler(
+  options: WebHandlerOptions = {},
+): (request: Request) => Promise<Response> {
+  const configPath = options.configPath ?? CONFIG_PATH;
+  const schemaPath = options.schemaPath ?? CONFIG_SCHEMA_PATH;
+  const webDir = options.webDir ?? WEB_DIR;
+  return async (request) => {
+    const url = new URL(request.url);
+
+    if (url.pathname === "/api/config" && request.method === "GET") {
+      const [schema, config] = await Promise.all([
+        Bun.file(schemaPath).json(),
+        Bun.file(configPath).json(),
+      ]);
+      return Response.json({ schema, config });
+    }
+
+    if (url.pathname === "/api/config" && request.method === "PUT") {
+      try {
+        const schema = await Bun.file(schemaPath).json();
+        const config = await request.json();
+        enforceConfigDependencies(config);
+        validateWebConfig(config, schema);
+        const savedConfig = { $schema: "./config.schema.json", ...config };
+        await writeFile(configPath, `${JSON.stringify(savedConfig, null, 2)}\n`, "utf-8");
+        return Response.json({ ok: true });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return Response.json({ error: message }, { status: 400 });
+      }
+    }
+
+    const files: Record<string, { path: string; type: string }> = {
+      "/": { path: "index.html", type: "text/html; charset=utf-8" },
+      "/app.css": { path: "app.css", type: "text/css; charset=utf-8" },
+      "/app.js": { path: "app.js", type: "text/javascript; charset=utf-8" },
+    };
+    const asset = files[url.pathname];
+    if (!asset || request.method !== "GET") return new Response("Not found", { status: 404 });
+    return new Response(Bun.file(resolve(webDir, asset.path)), {
+      headers: { "Content-Type": asset.type },
+    });
+  };
+}
+
+export async function startWebEditor(): Promise<void> {
+  const server = Bun.serve({ hostname: HOSTNAME, port: PORT, fetch: createWebHandler() });
+  const url = `http://${server.hostname}:${server.port}`;
+  console.log(`配置编辑器已启动：${url}`);
+  console.log("按 Ctrl+C 停止服务");
+  openBrowser(url);
+  await new Promise(() => undefined);
+}
+
+function enforceConfigDependencies(config: unknown): void {
+  if (!isRecord(config)) return;
+  const numberHeadings = config.numberHeadings;
+  const normalizeHeadings = config.normalizeHeadings;
+  if (!isRecord(numberHeadings) || !isRecord(normalizeHeadings)) return;
+  if (numberHeadings.enabled === true) normalizeHeadings.enabled = true;
+}
+
+function validateWebConfig(config: unknown, schema: unknown): void {
+  if (!isRecord(config) || !isRecord(schema)) throw new Error("配置必须是 JSON 对象");
+  const properties = schema.properties;
+  if (!isRecord(properties)) throw new Error("配置 schema 无效");
+  assertKnownKeys(config, properties, "");
+  const options = getConfigOptions(schema);
+  for (const option of options) {
+    const value = getPath(config, option.path);
+    if (value === undefined) {
+      if (option.required) throw new Error(`缺少配置项：${option.path}`);
+      continue;
+    }
+    if (option.type === "integer" && !Number.isInteger(value)) {
+      throw new Error(`${option.path} 必须是整数`);
+    }
+    if (option.type === "number" && (typeof value !== "number" || !Number.isFinite(value))) {
+      throw new Error(`${option.path} 必须是数字`);
+    }
+    if (option.type !== "integer" && option.type !== "number" && typeof value !== option.type) {
+      throw new Error(`${option.path} 必须是 ${option.type}`);
+    }
+    if (option.enum && !option.enum.includes(value)) {
+      throw new Error(`${option.path} 的值无效`);
+    }
+    if (typeof value === "number" && option.minimum !== undefined && value < option.minimum) {
+      throw new Error(`${option.path} 不能小于 ${option.minimum}`);
+    }
+  }
+}
+
+function assertKnownKeys(
+  config: Record<string, unknown>,
+  properties: Record<string, unknown>,
+  prefix: string,
+): void {
+  for (const key of Object.keys(config)) {
+    if (!(key in properties)) throw new Error(`未知配置项：${prefix}${key}`);
+  }
+  for (const [key, childSchema] of Object.entries(properties)) {
+    if (!isRecord(childSchema) || childSchema.type !== "object") continue;
+    const childConfig = config[key];
+    if (!isRecord(childConfig)) throw new Error(`${prefix}${key} 必须是对象`);
+    const childProperties = childSchema.properties;
+    if (!isRecord(childProperties)) throw new Error("配置 schema 无效");
+    assertKnownKeys(childConfig, childProperties, `${prefix}${key}.`);
+  }
+}
+
+function getPath(source: Record<string, unknown>, path: string): unknown {
+  let current: unknown = source;
+  for (const segment of path.split(".")) {
+    if (!isRecord(current)) return undefined;
+    current = current[segment];
+  }
+  return current;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function openBrowser(url: string): void {
+  const command =
+    process.platform === "win32"
+      ? ["cmd", "/c", "start", "", url]
+      : process.platform === "darwin"
+        ? ["open", url]
+        : ["xdg-open", url];
+  Bun.spawn(command, { stdout: "ignore", stderr: "ignore" });
+}