feat(docs): add demo WebM videos and 2.1.2 演示视频 page

- Record overview, rule-engine datasource, and instruct flows from
  demo.fluxmq.com via scripts/record-demo-videos.mjs (npm run record:demos).
- Ship WebM under static/video; document regeneration in static/video/README.
- Add product/demos to version-2.1.2 sidebar.

Made-with: Cursor

Author: 1ssqq1lxr

package.json

@@ -11,7 +11,8 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "record:demos": "node scripts/record-demo-videos.mjs"
   },
   "dependencies": {
     "@docusaurus/core": "3.6.2",

scripts/record-demo-videos.mjs

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+/**
+ * 使用 Playwright 从 demo.fluxmq.com 录制短演示视频（WebM），输出到 static/video/。
+ *
+ * 用法：
+ *   cd fluxmq-doc && npm install playwright --no-save && npx playwright install chromium
+ *   node scripts/record-demo-videos.mjs
+ *
+ * 环境变量：
+ *   FLUXMQ_DEMO_USER / FLUXMQ_DEMO_PASS — 默认 fluxmq / fluxmq
+ */
+import { chromium } from 'playwright';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const OUT = path.join(ROOT, 'static', 'video');
+
+const BASE = process.env.FLUXMQ_DEMO_URL || 'http://demo.fluxmq.com';
+const USER = process.env.FLUXMQ_DEMO_USER || 'fluxmq';
+const PASS = process.env.FLUXMQ_DEMO_PASS || 'fluxmq';
+
+const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+
+async function login(page) {
+  await page.goto(`${BASE}/#/login`, { waitUntil: 'domcontentloaded', timeout: 90000 });
+  await delay(1000);
+  await page.fill('input[name="username"]', USER);
+  await page.fill('input[name="password"]', PASS);
+  await page.click('button.ant-btn-primary');
+  await delay(3500);
+}
+
+async function recordClip(name, runner) {
+  fs.mkdirSync(OUT, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 720 },
+    recordVideo: { dir: OUT, size: { width: 1280, height: 720 } },
+  });
+  const page = await context.newPage();
+  try {
+    await runner(page);
+  } finally {
+    await context.close();
+    await browser.close();
+  }
+  const files = fs
+    .readdirSync(OUT)
+    .filter((f) => f.endsWith('.webm'))
+    .map((f) => ({ f, t: fs.statSync(path.join(OUT, f)).mtimeMs }))
+    .sort((a, b) => b.t - a.t);
+  if (!files.length) {
+    console.warn(`No webm produced for ${name}`);
+    return;
+  }
+  const latest = path.join(OUT, files[0].f);
+  const target = path.join(OUT, `${name}.webm`);
+  if (fs.existsSync(target)) fs.unlinkSync(target);
+  fs.renameSync(latest, target);
+  console.log('Wrote', target);
+}
+
+async function main() {
+  await recordClip('overview', async (page) => {
+    await login(page);
+    await page.goto(`${BASE}/index.html#/dashboard/overview`, {
+      waitUntil: 'networkidle',
+      timeout: 90000,
+    }).catch(() => page.goto(`${BASE}/#/dashboard/overview`, { waitUntil: 'networkidle', timeout: 90000 }));
+    await delay(4000);
+    await page.mouse.wheel(0, 400);
+    await delay(2000);
+  });
+
+  await recordClip('rule-engine-datasource', async (page) => {
+    await login(page);
+    await page.goto(`${BASE}/index.html#/rule-engine/datasource`, {
+      waitUntil: 'networkidle',
+      timeout: 90000,
+    }).catch(() => page.goto(`${BASE}/#/rule-engine/datasource`, { waitUntil: 'networkidle', timeout: 90000 }));
+    await delay(5000);
+  });
+
+  await recordClip('instruct', async (page) => {
+    await login(page);
+    await page.goto(`${BASE}/index.html#/instruct/index`, {
+      waitUntil: 'networkidle',
+      timeout: 90000,
+    }).catch(() => page.goto(`${BASE}/#/instruct/index`, { waitUntil: 'networkidle', timeout: 90000 }));
+    await delay(5000);
+  });
+
+  console.log('Done. Files in', OUT);
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

static/video/README.md

@@ -0,0 +1,24 @@
+# 演示视频（WebM）
+
+本目录由仓库内脚本录制，也可将同名文件上传到 OBS/CDN 后把文档中的地址改为公网 URL。
+
+## 生成
+
+```bash
+cd fluxmq-doc
+npm install playwright --no-save
+npx playwright install chromium
+node scripts/record-demo-videos.mjs
+```
+
+默认使用 `http://demo.fluxmq.com` 与账号 `fluxmq` / `fluxmq`，可通过环境变量 `FLUXMQ_DEMO_URL`、`FLUXMQ_DEMO_USER`、`FLUXMQ_DEMO_PASS` 覆盖。
+
+## 文件说明
+
+| 文件 | 内容概要 |
+|------|----------|
+| `overview.webm` | 控制台总览 / 仪表盘 |
+| `rule-engine-datasource.webm` | 规则引擎 — 数据源 |
+| `instruct.webm` | 指令消费列表 |
+
+构建后访问路径为：`/video/<文件名>`（见 [产品演示视频](/product/demos)）。

static/video/instruct.webm

@@ -0,0 +1,25 @@
+# 演示视频
+
+以下视频基于在线演示环境录制，便于快速了解 FluxMQ 控制台主要能力。若浏览器无法播放 WebM，可使用 Chrome / Edge，或将视频下载后本地播放。
+
+## 控制台总览
+
+<video controls width="100%" preload="metadata">
+  <source src="/video/overview.webm" type="video/webm" />
+</video>
+
+## 规则引擎 · 数据源
+
+<video controls width="100%" preload="metadata">
+  <source src="/video/rule-engine-datasource.webm" type="video/webm" />
+</video>
+
+## 指令消费
+
+<video controls width="100%" preload="metadata">
+  <source src="/video/instruct.webm" type="video/webm" />
+</video>
+
+---
+
+**说明：** 若仓库中尚未包含 `static/video/*.webm` 文件，请在 `fluxmq-doc` 目录执行 `node scripts/record-demo-videos.mjs` 生成；或将视频上传至对象存储后，将本页各 `<source src="...">` 改为公网地址。

static/video/overview.webm

@@ -9,7 +9,8 @@
       "items": [
         "README",
         "product/introduction",
-        "product/core"
+        "product/core",
+        "product/demos"
       ]
     },
     {