edgepress 2026.10.13 → 2026.10.14

package/src/page-editor-client.js

@@ -0,0 +1,396 @@
+const $ = id => document.getElementById(id);
+const state = { path: '', page: null, revision: '', selected: null, dirty: false };
+const labels = {
+  hero: '横幅 / Hero', section: '分区', heading: '标题', text: '文字', image: '图片',
+  quote: '引用', cta: '操作按钮', 'link-list': '链接列表', 'feature-grid': '功能卡片',
+  faq: '问答', code: '代码', notice: '提示', 'data-table': '数据表',
+  'post-list': '文章列表', 'latest-posts': '最新文章', document: '文档',
+  'media-text': '图文', 'media-viewer': '媒体浏览器', 'display-text': '展示文字',
+  list: '列表', steps: '步骤', 'link-directory': '链接目录', oembed: '外部嵌入',
+  service: '第三方服务', 'local-tool': '本地工具', 'privacy-services': '服务隐私',
+  'privacy-consent': '隐私同意', 'privacy-controller': '隐私设置',
+  captcha: '验证码', 'ad-slot': '广告位'
+};
+const templates = {
+  heading: { type: 'heading', level: 2, text: '新标题' },
+  text: { type: 'text', text: '在这里输入文字' },
+  hero: { type: 'hero', title: '页面标题', text: '介绍一下这个页面' },
+  section: { type: 'section', title: '新分区', blocks: [{ type: 'text', text: '分区内容' }] },
+  image: { type: 'image', src: '/images/example.png', alt: '图片描述' },
+  quote: { type: 'quote', text: '引用内容' },
+  cta: { type: 'cta', label: '了解更多', url: '/quick-start/' },
+  'link-list': { type: 'link-list', title: '相关链接', items: [{ label: '查看内容', url: '/quick-start/' }] },
+  code: { type: 'code', language: 'text', code: '示例代码' },
+  notice: { type: 'notice', title: '提示', text: '提示内容' },
+  'post-list': { type: 'post-list', title: '文章列表', count: 3 },
+  'latest-posts': { type: 'latest-posts', title: '最新文章', count: 3 },
+  document: { type: 'document', title: '文档预览', src: '/documents/sample.pdf' },
+  'feature-grid': { type: 'feature-grid', title: '功能列表', items: [{ title: '功能', text: '功能介绍', icon: 'check' }] },
+  faq: { type: 'faq', title: '常见问题', items: [{ question: '问题', answer: '答案' }] }
+};
+const suggestions = {
+  hero: { eyebrow: '', cta: { label: '了解更多', url: '/' }, highlights: ['亮点'] },
+  image: { title: '', caption: '', width: 800, height: 450 },
+  heading: { id: '' }, text: { paragraphs: ['新段落'] },
+  section: { tone: 'soft', id: '' }, quote: { author: '' },
+  'media-text': { title: '', text: '', src: '', alt: '', placement: 'left' },
+  code: { title: '' }, document: { caption: '' }
+};
+
+function el(tag, text, cssClass) {
+  const node = document.createElement(tag);
+  if (text !== undefined && text !== null) node.textContent = String(text);
+  if (cssClass) node.className = cssClass;
+  return node;
+}
+function button(label, onClick, cssClass) {
+  const node = el('button', label, cssClass);
+  node.type = 'button';
+  node.addEventListener('click', onClick);
+  return node;
+}
+function info(message, error = false, saved = false) {
+  $('status').textContent = message;
+  $('status').className = error ? 'error' : saved ? 'saved' : '';
+}
+function changed() {
+  state.dirty = true;
+  info('有尚未保存的更改');
+}
+function guarded(next) {
+  if (!state.dirty || window.confirm('有未保存的更改，确定放弃吗？')) next();
+}
+function selectedBlock() {
+  const s = state.selected;
+  return s && state.page?.blocks[s.row]?.cells[s.cell]?.[s.block];
+}
+function selection(row, cell, block) {
+  state.selected = { row, cell, block };
+  repaint();
+}
+function move(list, index, difference) {
+  const next = index + difference;
+  if (next < 0 || next >= list.length) return;
+  [list[index], list[next]] = [list[next], list[index]];
+  changed();
+}
+async function request(path, options) {
+  const response = await fetch(path, { cache: 'no-store', ...options });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || 'HTTP ' + response.status);
+  return data;
+}
+async function reloadPages() {
+  const data = await request('/api/pages');
+  const picker = $('page-picker');
+  picker.replaceChildren();
+  data.pages.forEach(path => {
+    const option = el('option', path); option.value = path; picker.append(option);
+  });
+  if (!data.pages.length) {
+    info('没有找到 JSON 页面。请先在 content/pages/ 下创建页面。', true);
+    return;
+  }
+  if (state.path && data.pages.includes(state.path)) picker.value = state.path;
+  await loadPage(picker.value);
+}
+async function loadPage(path) {
+  if (!path) return;
+  try {
+    const data = await request('/api/page?path=' + encodeURIComponent(path));
+    state.path = path;
+    state.page = data.page;
+    state.revision = data.revision;
+    state.selected = null;
+    state.dirty = false;
+    $('page-picker').value = path;
+    $('title').value = data.page.title || '';
+    $('description').value = data.page.description || '';
+    $('page-name').textContent = data.page.title || path;
+    $('page-path').textContent = path + ' · ' + (data.page.lang || '');
+    repaint();
+    info('已载入 ' + path, false, true);
+  } catch (error) { info('无法载入页面：' + error.message, true); }
+}
+function snippet(block) {
+  const value = block.title || block.text || block.code || block.src || block.label || block.type;
+  return String(value).replace(/\s+/g, ' ').slice(0, 44);
+}
+function repaint() {
+  if (!state.page) return;
+  drawOutline();
+  drawCanvas();
+  drawInspector();
+}
+function drawOutline() {
+  const nav = $('outline'); nav.replaceChildren();
+  state.page.blocks.forEach((row, rowIndex) => {
+    const group = el('div', null, 'outline-row');
+    group.append(el('strong', '第 ' + (rowIndex + 1) + ' 行 · ' + row.columns + ' 栏'));
+    row.cells.forEach((cell, cellIndex) => {
+      const section = el('div', null, 'outline-cell');
+      section.append(el('small', '栏 ' + (cellIndex + 1)));
+      cell.forEach((block, blockIndex) => {
+        const item = button((labels[block.type] || block.type) + ' · ' + snippet(block), () => selection(rowIndex, cellIndex, blockIndex), 'outline-button');
+        if (state.selected?.row === rowIndex && state.selected?.cell === cellIndex && state.selected?.block === blockIndex) item.setAttribute('aria-current', 'true');
+        section.append(item);
+      });
+      group.append(section);
+    });
+    nav.append(group);
+  });
+}
+function addBlock(rowIndex, cellIndex, type) {
+  const cell = state.page.blocks[rowIndex].cells[cellIndex];
+  cell.push(structuredClone(templates[type]));
+  changed();
+  selection(rowIndex, cellIndex, cell.length - 1);
+}
+function drawCanvas() {
+  const canvas = $('canvas'); canvas.replaceChildren();
+  state.page.blocks.forEach((row, rowIndex) => {
+    const wrap = el('section', null, 'canvas-row');
+    const toolbar = el('div', null, 'row-actions');
+    const title = el('strong', '行 ' + (rowIndex + 1));
+    const operations = el('div', null, 'row-actions');
+    const count = el('select'); count.setAttribute('aria-label', '第 ' + (rowIndex + 1) + ' 行的栏数');
+    for (let n = 1; n <= 4; n++) {
+      const opt = el('option', n + ' 栏'); opt.value = String(n);
+      count.append(opt);
+    }
+    count.value = String(row.columns);
+    count.addEventListener('change', () => {
+      const next = Number(count.value);
+      // Reducing columns reflows all existing elements into the last kept cell.
+      // Never discard content merely because the editor layout changes.
+      if (next < row.columns) {
+        for (const extra of row.cells.slice(next)) row.cells[next - 1].push(...extra);
+      }
+      while (row.cells.length < next) row.cells.push([{ type: 'text', text: '新栏内容' }]);
+      row.cells.length = next;
+      row.columns = next;
+      state.selected = null;
+      changed(); repaint();
+    });
+    operations.append(count,
+      button('↑', () => { move(state.page.blocks, rowIndex, -1); state.selected = null; repaint(); }),
+      button('↓', () => { move(state.page.blocks, rowIndex, 1); state.selected = null; repaint(); }),
+      button('删除行', () => {
+        if (state.page.blocks.length === 1) return info('页面至少需要一行。', true);
+        if (!window.confirm('确定删除整行及其所有元素？')) return;
+        state.page.blocks.splice(rowIndex, 1); state.selected = null; changed(); repaint();
+      }, 'danger')
+    );
+    toolbar.append(title, operations); wrap.append(toolbar);
+    const cells = el('div', null, 'cells columns-' + row.columns);
+    row.cells.forEach((blocks, cellIndex) => {
+      const cell = el('div', null, 'canvas-cell');
+      const tools = el('div', null, 'cell-actions');
+      tools.append(el('strong', '栏 ' + (cellIndex + 1)));
+      const select = el('select'); select.setAttribute('aria-label', '选择要添加的元素类型');
+      for (const [key, value] of Object.entries(templates)) {
+        const option = el('option', labels[key] || key); option.value = key; select.append(option);
+      }
+      tools.append(select, button('＋ 添加', () => addBlock(rowIndex, cellIndex, select.value)));
+      cell.append(tools);
+      blocks.forEach((block, blockIndex) => {
+        const selected = state.selected?.row === rowIndex && state.selected?.cell === cellIndex && state.selected?.block === blockIndex;
+        const card = el('article', null, 'element' + (selected ? ' active' : ''));
+        const head = el('div', null, 'element-head');
+        const choose = button(labels[block.type] || block.type, () => selection(rowIndex, cellIndex, blockIndex), 'pick');
+        choose.setAttribute('aria-pressed', String(Boolean(selected)));
+        const operations = el('div', null, 'element-actions');
+        operations.append(
+          button('↑', () => { move(blocks, blockIndex, -1); selection(rowIndex, cellIndex, Math.max(0, blockIndex - 1)); }),
+          button('↓', () => { move(blocks, blockIndex, 1); selection(rowIndex, cellIndex, Math.min(blocks.length - 1, blockIndex + 1)); }),
+          button('×', () => {
+            if (blocks.length === 1) return info('每栏至少保留一个元素。可直接修改这个元素。', true);
+            blocks.splice(blockIndex, 1); state.selected = null; changed(); repaint();
+          }, 'danger')
+        );
+        head.append(choose, operations); card.append(head, preview(block));
+        card.addEventListener('click', event => { if (!event.target.closest('button')) selection(rowIndex, cellIndex, blockIndex); });
+        cell.append(card);
+      });
+      cells.append(cell);
+    });
+    wrap.append(cells); canvas.append(wrap);
+  });
+}
+function preview(block) {
+  const box = el('div', null, 'element-preview');
+  const heading = block.title || (block.type === 'heading' ? block.text : '');
+  if (heading) box.append(el(block.type === 'hero' ? 'h2' : 'h3', heading));
+  if (block.eyebrow) box.prepend(el('small', block.eyebrow));
+  if (block.type === 'image' || block.type === 'document' || block.type === 'media-viewer') {
+    box.append(el('div', (block.type === 'image' ? '▧ 图片 · ' : '▤ 资源 · ') + (block.src || block.alt || '选择资源'), 'placeholder'));
+  } else if (block.type === 'quote') {
+    box.append(el('blockquote', block.text || '引用'));
+  } else if (block.type === 'code') {
+    const code = el('code', block.code || '代码');
+    const pre = el('pre'); pre.append(code); box.append(pre);
+  } else if (block.type === 'link-list' && Array.isArray(block.items)) {
+    for (const item of block.items.slice(0, 6)) box.append(el('p', '↗ ' + (item.label || item.title || '链接')));
+  } else if (block.type === 'section' && Array.isArray(block.blocks)) {
+    for (const nested of block.blocks.slice(0, 4)) box.append(el('p', '└ ' + (nested.title || nested.text || nested.type)));
+  } else if (block.type === 'feature-grid' && Array.isArray(block.items)) {
+    for (const item of block.items.slice(0, 4)) box.append(el('p', '▪ ' + (item.title || item.text || '功能')));
+  } else if (block.type === 'faq' && Array.isArray(block.items)) {
+    for (const item of block.items.slice(0, 4)) box.append(el('p', '❔ ' + (item.question || item.title || '问题')));
+  } else if (block.type !== 'heading' && block.type !== 'cta' && block.text) {
+    box.append(el('p', block.text));
+  }
+  if (Array.isArray(block.paragraphs)) box.append(el('p', block.paragraphs.slice(0, 3).join('\n')));
+  if (block.type === 'cta') box.append(el('p', '↗ ' + (block.label || block.cta?.label || block.url || '操作按钮')));
+  if (!box.childNodes.length) box.append(el('p', '点击上方元素名称，编辑 ' + (labels[block.type] || block.type), 'muted'));
+  return box;
+}
+function drawInspector() {
+  const fields = $('fields'); fields.replaceChildren();
+  const block = selectedBlock();
+  if (!block) {
+    $('selected-label').textContent = '尚未选择';
+    fields.append(el('p', '请在画布或页面结构中选择元素。', 'empty'));
+    return;
+  }
+  $('selected-label').textContent = (state.selected.row + 1) + ' 行 · ' + (state.selected.cell + 1) + ' 栏';
+  fields.append(el('h3', labels[block.type] || block.type));
+  const form = el('form'); form.addEventListener('submit', event => event.preventDefault());
+  objectFields(form, block, 0, true);
+  fields.append(form);
+}
+function fieldLabel(key, note) {
+  const label = el('label', key, 'field');
+  if (note) label.append(el('small', note, 'type-hint'));
+  return label;
+}
+function replaceValue(target, key, value) {
+  target[key] = value; changed(); drawOutline(); drawCanvas();
+}
+function objectFields(container, obj, depth, root = false) {
+  for (const [key, value] of Object.entries(obj)) {
+    if (root && key === 'type') continue;
+    const field = fieldLabel(key);
+    if (typeof value === 'string') {
+      const control = key === 'text' || key === 'code' || key === 'fallback' || value.length > 130 ? el('textarea') : el('input');
+      if (control.tagName === 'INPUT') control.type = 'text';
+      control.value = value;
+      control.setAttribute('aria-label', key);
+      control.addEventListener('input', () => replaceValue(obj, key, control.value));
+      field.append(control);
+    } else if (typeof value === 'number') {
+      const control = el('input'); control.type = 'number'; control.value = value;
+      control.addEventListener('change', () => { if (Number.isFinite(control.valueAsNumber)) replaceValue(obj, key, control.valueAsNumber); });
+      field.append(control);
+    } else if (typeof value === 'boolean') {
+      field.classList.add('checkbox');
+      const control = el('input'); control.type = 'checkbox'; control.checked = value;
+      control.addEventListener('change', () => replaceValue(obj, key, control.checked));
+      field.append(control);
+    } else if (Array.isArray(value)) {
+      field.append(arrayEditor(value, obj, key, depth));
+    } else if (value && typeof value === 'object' && depth < 5) {
+      const group = el('div', null, 'object-editor');
+      objectFields(group, value, depth + 1);
+      field.append(group);
+    } else {
+      const control = el('textarea'); control.value = JSON.stringify(value, null, 2);
+      control.addEventListener('change', () => {
+        try { replaceValue(obj, key, JSON.parse(control.value)); }
+        catch { info('字段 ' + key + ' 不是有效 JSON', true); }
+      });
+      field.append(control);
+    }
+    container.append(field);
+  }
+  if (root) {
+    const allowed = suggestions[obj.type] || {};
+    const missing = Object.keys(allowed).filter(key => !(key in obj));
+    if (missing.length) {
+      const chooser = el('select'); chooser.setAttribute('aria-label', '添加可选字段');
+      missing.forEach(key => { const option = el('option', key); option.value = key; chooser.append(option); });
+      container.append(chooser, button('＋ 添加属性', () => {
+        const key = chooser.value;
+        obj[key] = structuredClone(allowed[key]);
+        changed(); repaint();
+      }));
+    }
+  }
+}
+function arrayEditor(value, owner, key, depth) {
+  const box = el('div', null, 'array-editor');
+  if (value.every(v => typeof v === 'string')) {
+    const control = el('textarea');
+    control.value = value.join('\n');
+    control.setAttribute('aria-label', key + ' 每行一项');
+    control.addEventListener('input', () => replaceValue(owner, key, control.value ? control.value.split('\n') : []));
+    box.append(el('small', '每行一项', 'type-hint'), control);
+  } else if (depth < 4 && value.every(v => v && typeof v === 'object' && !Array.isArray(v))) {
+    for (const [index, item] of value.entries()) {
+      const card = el('div', null, 'array-item');
+      const head = el('div', null, 'item-head');
+      head.append(el('strong', '项目 ' + (index + 1)), button('移除', () => {
+        if (value.length <= 1 && key === 'blocks') return info('分区至少保留一个子元素', true);
+        value.splice(index, 1); changed(); repaint();
+      }, 'danger'));
+      card.append(head);
+      objectFields(card, item, depth + 1, false);
+      box.append(card);
+    }
+    box.append(button('＋ 添加项目', () => {
+      const sample = value.length ? structuredClone(value[0]) : key === 'blocks' ? structuredClone(templates.text) : { label: '', url: '/' };
+      for (const [name, v] of Object.entries(sample)) {
+        if (name === 'type') continue;
+        if (typeof v === 'string') sample[name] = '';
+        else if (typeof v === 'number') sample[name] = 1;
+      }
+      value.push(sample); changed(); repaint();
+    }));
+  } else {
+    const control = el('textarea'); control.value = JSON.stringify(value, null, 2);
+    control.setAttribute('aria-label', key + ' 高级 JSON');
+    control.addEventListener('change', () => {
+      try { const next = JSON.parse(control.value); if (!Array.isArray(next)) throw Error(); replaceValue(owner, key, next); }
+      catch { info('字段 ' + key + ' 必须是 JSON 数组', true); }
+    });
+    box.append(el('small', '复杂嵌套数组 · 高级编辑', 'type-hint'), control);
+  }
+  return box;
+}
+async function save() {
+  if (!state.page || !state.dirty) return info('没有需要保存的更改。');
+  $('save').disabled = true;
+  try {
+    const result = await request('/api/page?path=' + encodeURIComponent(state.path), {
+      method: 'PUT', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ page: state.page, revision: state.revision })
+    });
+    state.revision = result.revision; state.dirty = false;
+    info('已安全保存到 ' + state.path + '。运行 npm run build 检查最终网页。', false, true);
+  } catch (error) { info('保存失败：' + error.message, true); }
+  finally { $('save').disabled = false; }
+}
+
+$('save').addEventListener('click', save);
+$('reload').addEventListener('click', () => guarded(() => loadPage(state.path)));
+$('page-picker').addEventListener('change', event => {
+  const path = event.target.value;
+  guarded(() => loadPage(path));
+  if (state.dirty) $('page-picker').value = state.path;
+});
+$('add-row').addEventListener('click', () => {
+  if (!state.page) return;
+  if (state.page.blocks.length >= 100) return info('最多允许 100 行', true);
+  state.page.blocks.push({ columns: 1, cells: [[structuredClone(templates.text)]] });
+  changed(); selection(state.page.blocks.length - 1, 0, 0);
+});
+for (const key of ['title', 'description']) {
+  $(key).addEventListener('input', () => {
+    if (!state.page) return;
+    state.page[key] = $(key).value;
+    $('page-name').textContent = state.page.title || '未命名页面';
+    changed();
+  });
+}
+window.addEventListener('beforeunload', event => { if (state.dirty) event.preventDefault(); });
+reloadPages().catch(error => info('无法启动编辑器：' + error.message, true));

package/src/page-editor-extension.js

@@ -0,0 +1,86 @@
+// Shares the module scope of page-editor-client.js. No third-party script or eval.
+async function initializeBlockCatalog() {
+  const definition = await request('/api/block-catalog');
+  for (const [type, entry] of Object.entries(definition.blocks)) {
+    labels[type] = entry.label + (entry.requiresSetup ? ' · 需配置' : '');
+    templates[type] = structuredClone(entry.template);
+  }
+  repaint();
+}
+
+async function showNewPageDialog() {
+  const { locales, defaultLocale } = await request('/api/locales');
+  const dialog = el('dialog');
+  dialog.className = 'new-page-dialog';
+  const form = el('form');
+  form.setAttribute('aria-label', '新建页面');
+  const heading = el('h2', '新建 Pages 页面');
+  const hint = el('p', '填写页面标题和语言，选择是否手动指定 URL 路径。创建后可继续可视化编辑。', 'help');
+  const labelled = (caption, control) => {
+    const label = el('label', caption, 'field');
+    label.append(control);
+    return label;
+  };
+  const title = el('input');
+  title.type = 'text';
+  title.required = true;
+  title.maxLength = 160;
+  title.placeholder = '例如：关于我们';
+  title.id = 'create-title';
+  const slug = el('input');
+  slug.type = 'text';
+  slug.maxLength = 100;
+  slug.placeholder = '留空时根据标题生成';
+  slug.id = 'create-slug';
+  const locale = el('select');
+  locale.id = 'create-lang';
+  for (const value of locales) {
+    const option = el('option', value);
+    option.value = value;
+    locale.append(option);
+  }
+  locale.value = defaultLocale;
+  const message = el('p', '', 'new-page-error');
+  message.setAttribute('role', 'alert');
+  const actions = el('div', null, 'actions');
+  const cancel = button('取消', () => dialog.close());
+  const submit = el('button', '创建并编辑', 'primary');
+  submit.type = 'submit';
+  actions.append(cancel, submit);
+  form.append(heading, hint, labelled('页面标题', title), labelled('URL 路径名称（可选）', slug), labelled('页面语言', locale), actions, message);
+  dialog.append(form);
+  document.body.append(dialog);
+  dialog.addEventListener('close', () => dialog.remove());
+  form.addEventListener('submit', async event => {
+    event.preventDefault();
+    submit.disabled = true;
+    message.textContent = '';
+    try {
+      const created = await request('/api/pages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.value.trim(), slug: slug.value.trim() || undefined,
+          lang: locale.value
+        })
+      });
+      dialog.close();
+      state.dirty = false;
+      state.path = created.path;
+      await reloadPages();
+      info('新页面已创建：' + created.path + '。请继续选择和编辑元素。', false, true);
+    } catch (error) {
+      message.textContent = error.message;
+      info('创建页面失败：' + error.message, true);
+    } finally {
+      submit.disabled = false;
+    }
+  });
+  dialog.showModal();
+  title.focus();
+}
+
+$('new-page').addEventListener('click', () => guarded(() => {
+  showNewPageDialog().catch(error => info('无法打开新建页面：' + error.message, true));
+}));
+initializeBlockCatalog().catch(error => info('无法载入全部元素模板：' + error.message, true));

package/src/page-editor.css

@@ -0,0 +1 @@
+:root{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#263343;background:#f1f5f8;line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #cdd8e2;background:white;color:#244056;padding:.45rem .75rem;border-radius:.55rem;font-weight:600}button:hover{background:#eaf3fa}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #5fa9ee;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.45}button.primary{background:#1d5e91;border-color:#1d5e91;color:white}button.primary:hover{background:#154e7d}button.danger{color:#a33838}.subtle{background:transparent}.topbar{padding:.8rem 1.4rem;background:#fff;border-bottom:1px solid #dbe3e9;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.6rem}.brand-icon{display:grid;place-items:center;background:#176397;color:white;border-radius:12px;width:44px;height:44px;font-size:1.8rem}.brand strong{font-size:1.1rem;display:block}.brand small{color:#536477;display:block}.actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.actions select{min-width:230px;max-width:360px}.workspace{flex:1;min-height:calc(100vh - 144px);display:grid;grid-template-columns:minmax(210px,250px) minmax(360px,1fr) minmax(275px,335px);gap:1px;background:#dbe3e9}.panel{background:#fff;min-width:0;padding:1rem;overflow:auto}.side,.inspector{max-height:calc(100vh - 135px)}.center{background:#f8fafc}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.6rem}.panel-header h1,.panel-header h2{margin:0}.panel-header h1{font-size:1.18rem}.panel-header h2{font-size:1rem}.muted,.help{color:#657687;font-size:.84rem}.help{margin:.5rem 0 1rem}.note{margin:1rem auto;max-width:780px}.page-meta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.1rem 0}.page-meta label{font-size:.83rem;color:#566778}input,textarea,select{background:#fff;border:1px solid #bfcbd7;border-radius:.45rem;padding:.43rem .55rem;color:#263343;max-width:100%}input[type="text"],input[type="number"],textarea,.page-meta input{width:100%;display:block;margin-top:.3rem}textarea{min-height:80px;resize:vertical}.outline-row{padding:.65rem .3rem .6rem;border-bottom:1px solid #e8eef2}.outline-row strong{font-size:.89rem}.outline-cell{margin:.4rem 0 .45rem .75rem;border-left:2px solid #e1eaf1;padding-left:.7rem}.outline-cell small{display:block;color:#76899b}.outline-button{display:block;width:100%;text-align:left;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.26rem}.outline-button[aria-current="true"]{border-color:#2b7db7;background:#ebf6ff}.canvas-wrap{max-width:900px;margin:auto}.canvas{background:#fff;min-height:350px;padding:1.5rem;box-shadow:0 8px 30px #253f5612;border:1px solid #e0e9ef;border-radius:.8rem}.canvas-row{margin:0 0 1.4rem;border:1px dashed #cbd9e4;padding:.7rem;border-radius:.65rem}.row-actions,.cell-actions,.element-actions{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.row-actions{justify-content:space-between;margin-bottom:.7rem;color:#627487}.row-actions button,.cell-actions button,.element-actions button{font-size:.78rem;padding:.25rem .45rem}.row-actions label{font-size:.78rem;display:flex;align-items:center;gap:.35rem}.row-actions select{padding:.15rem}.cells{display:grid;gap:.8rem}.columns-1{grid-template-columns:minmax(0,1fr)}.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.canvas-cell{background:#f8fbff;border-radius:.4rem;border:1px solid #e1eaf2;padding:.6rem;min-width:0}.cell-actions{justify-content:space-between;margin-bottom:.6rem}.cell-actions select{font-size:.8rem;min-width:0;max-width:150px}.element{border:2px solid transparent;background:#fff;margin:.35rem 0;border-radius:.6rem;padding:.75rem;box-shadow:0 1px 5px #143d5510}.element.active{border-color:#2387d2;background:#f5fbff}.element-head{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.45rem}.element-head button.pick{flex:1;text-align:left;border:0;background:transparent;padding:0;color:#326383}.element-preview{white-space:pre-wrap;word-break:break-word}.element-preview h2,.element-preview h3{margin:.15rem 0;font-size:1.12rem}.element-preview p{margin:.3rem 0}.element-preview .placeholder{border:1px dashed #abc1d2;padding:.9rem;border-radius:.5rem;background:#eef5fb;color:#46677c}.element-preview blockquote{border-left:4px solid #94b8d4;padding-left:1rem;margin:.2rem 0}.inspector form{display:flex;flex-direction:column;gap:.75rem}.field{display:block;margin:.65rem 0;font-size:.84rem;font-weight:600}.field .type-hint{display:block;font-size:.72rem;color:#708297;font-weight:400}.field.checkbox{display:flex;align-items:center;gap:.4rem}.field.checkbox input{width:auto}.array-editor,.object-editor{border-left:3px solid #d9e8f4;margin:.6rem 0;padding:.25rem 0 .45rem .7rem}.array-item{border:1px solid #e1eaf1;border-radius:.5rem;padding:.5rem;margin:.5rem 0}.item-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.empty{color:#6c7b88;padding:1.5rem .5rem}.footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#fff;padding:.6rem 1.4rem;border-top:1px solid #dce5ed;font-size:.84rem;color:#5e7181}#status.error{color:#b32d36}#status.saved{color:#186744}.preview-label{font-size:.77rem;border:1px solid #c9d8e5;color:#51708b;border-radius:40px;padding:.2rem .6rem;white-space:nowrap}@media(max-width:1050px){.workspace{grid-template-columns:230px minmax(0,1fr)}.inspector{grid-column:1/-1;max-height:none}.side{max-height:none}}@media(max-width:680px){.workspace{display:flex;flex-direction:column}.side,.inspector{max-height:none}.page-meta{grid-template-columns:1fr}.canvas{padding:.65rem}.actions select{min-width:120px}.cells{grid-template-columns:1fr!important}}

package/src/page-editor.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="robots" content="noindex,nofollow">
+  <title>EdgePress · 可视化 Pages 编辑器</title>
+  <link rel="stylesheet" href="/editor.css">
+  <script type="module" src="/editor.js"></script>
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand"><span class="brand-icon" aria-hidden="true">◧</span><div><strong>EdgePress</strong><small>Pages 可视化编辑器 · 本地运行</small></div></div>
+    <div class="actions">
+      <label for="page-picker">页面</label><select id="page-picker" aria-label="选择页面"></select>
+      <button id="new-page" type="button" class="subtle">＋ 新建页面</button>
+      <button id="reload" type="button" class="subtle">重新载入</button>
+      <button id="save" type="button" class="primary">保存更改</button>
+    </div>
+  </header>
+  <main class="workspace">
+    <aside class="side panel" aria-label="页面结构">
+      <div class="panel-header"><h2>页面结构</h2><button id="add-row" type="button" title="添加页面行">＋ 行</button></div>
+      <p class="help">选中元素后可调整内容、顺序和位置。</p>
+      <nav id="outline" aria-label="页面结构导航"></nav>
+    </aside>
+    <section class="center panel" aria-label="可视化页面画布">
+      <div class="panel-header"><div><h1 id="page-name">选择页面</h1><p id="page-path" class="muted"></p></div><span class="preview-label">结构与内容预览</span></div>
+      <div class="page-meta"><label>页面标题 <input id="title" maxlength="500" type="text"></label><label>摘要 <input id="description" type="text"></label></div>
+      <div class="canvas-wrap"><div id="canvas" class="canvas" aria-label="页面内容预览"></div></div>
+      <p class="help note">预览展示真实的行列顺序和主要内容，不是主题渲染或最终网页效果。正式效果请运行 <code>npm run dev</code>。</p>
+    </section>
+    <aside class="inspector panel" aria-label="元素设置">
+      <div class="panel-header"><h2>元素属性</h2><span id="selected-label" class="muted">尚未选择</span></div>
+      <div id="fields"><p class="empty">从中间的页面画布选择一个元素开始编辑。</p></div>
+    </aside>
+  </main>
+  <footer class="footer"><span id="status" role="status" aria-live="polite">正在载入页面…</span><span>只监听 127.0.0.1 · JSON 是唯一的数据源</span></footer>
+</body>
+</html>