fix(creator-studio): 沉浸式布局与公众号式写作体验

首轮实机体验暴露的问题：

- 投稿页仍在渲染主题头部的 all_top_fluid 挂件区、页脚与浮动入口，
  与工作台顶栏重复。header.php / footer.php 新增 jio_render_header、
  jio_render_footer、jio_render_fluid_widgets 过滤器，工作台模式下全部关闭
- 区块 Inspector 被写在 BlockList 之后，作为正文流的一部分渲染出
  一个巨大的「未选择区块」白框；移除内联 Inspector（区块设置改由
  行内工具栏的区块菜单提供）
- 中文正文被 wordcount 的 'words' 口径算成「字数：1」；改用
  characters_excluding_spaces，与前台 TinyMCE 字数一致
- 行宽 820px、标题 34px 偏松散；收窄到 720px / 27px，正文 16px/1.85，
  段落间距与选区描边收敛，行内工具栏改为深色圆角悬浮条

新增本地视觉验收脚本（不参与运行时）：
- scripts/preview.cjs：用模拟 bootstrap 生成离线预览页
- scripts/shoot.cjs：桌面/移动端截图与控制台错误采集

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

assets/creator-studio/scripts/shoot.cjs

@@ -0,0 +1,75 @@
+/**
+ * 截图：打开预览页并保存桌面 / 移动端截图，同时把配色、字体与布局尺寸打印出来。
+ */
+const fs = require('fs');
+const puppeteer = require('puppeteer-core');
+
+const CANDIDATES = [
+  process.env.JIO_BROWSER,
+  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+].filter(Boolean);
+const BROWSER = CANDIDATES.find((p) => fs.existsSync(p));
+
+const URL = process.argv[2] || 'https://localhost/jio-preview.html';
+const PREFIX = process.argv[3] || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot';
+
+(async () => {
+  if (!BROWSER) {
+    console.error('no browser');
+    process.exit(1);
+  }
+  const browser = await puppeteer.launch({
+    executablePath: BROWSER,
+    headless: 'new',
+    ignoreHTTPSErrors: true,
+    args: ['--disable-gpu', '--no-sandbox'],
+  });
+
+  for (const [name, viewport] of [
+    ['desktop', { width: 1440, height: 1000 }],
+    ['mobile', { width: 390, height: 844, isMobile: true, hasTouch: true }],
+  ]) {
+    const page = await browser.newPage();
+    await page.setViewport(viewport);
+    await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
+    await new Promise((r) => setTimeout(r, 2000));
+    await page.screenshot({ path: `${PREFIX}-${name}.png` });
+
+    const metrics = await page.evaluate(() => {
+      const pick = (sel) => {
+        const el = document.querySelector(sel);
+        if (!el) return null;
+        const cs = getComputedStyle(el);
+        const r = el.getBoundingClientRect();
+        return {
+          text: (el.textContent || '').trim().slice(0, 40),
+          font: `${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily.split(',')[0]}`,
+          weight: cs.fontWeight,
+          color: cs.color,
+          bg: cs.backgroundColor,
+          pad: cs.padding,
+          box: `${Math.round(r.width)}x${Math.round(r.height)}`,
+        };
+      };
+      return {
+        bar: pick('.jio-creator__bar'),
+        title: pick('.jio-creator__title textarea'),
+        excerpt: pick('.jio-creator__excerpt textarea'),
+        canvas: pick('.jio-creator__canvas'),
+        para: pick('.block-editor-block-list__block'),
+        appender: pick('.block-editor-default-block-appender'),
+        primaryBtn: pick('.jio-creator__primary'),
+        ghostBtn: pick('.jio-creator__ghost'),
+        pageBg: getComputedStyle(document.body).backgroundColor,
+      };
+    });
+    console.log(`=== ${name} ===`);
+    console.log(JSON.stringify(metrics, null, 2));
+    await page.close();
+  }
+
+  await browser.close();
+})();