cj-tauri 1.1.2 → 2.1.0

package/cli/templates/app-react/{ui → assets/ui}/src/App.jsx

@@ -1,124 +1,124 @@
-import { useEffect, useState } from 'react';
-import './App.css';   // 与 app-vue 模板等价的样式（React 没有 SFC，样式走独立的 css）
-
-// 桥（window.__CJ_TAURI__）由宿主注入，注入时机随平台/页面来源而异：Linux 宿主注入在文档开始，
-// 但发行态单文件里的内联 <script type="module"> 解析完就执行，谁先谁后与加载方式有关。
-// 所以统一「等桥出现再初始化」，不要在模块作用域直接读。
-let bridge = null;
-
-function waitForBridge(timeoutMs = 3000) {
-  return new Promise((resolve) => {
-    const t0 = Date.now();
-    const tick = () => {
-      if (window.__CJ_TAURI__) return resolve(window.__CJ_TAURI__);
-      if (Date.now() - t0 >= timeoutMs) return resolve(null);
-      setTimeout(tick, 20);
-    };
-    tick();
-  });
-}
-
-export default function App() {
-  const [name, setName] = useState('world');
-  const [result, setResult] = useState('等待 invoke…');
-  const [tick, setTick] = useState('');
-  const [menuMsg, setMenuMsg] = useState('');
-  const [sidebar, setSidebar] = useState(true);
-  const [href, setHref] = useState('');
-  const [bridgeOk, setBridgeOk] = useState(false);
-
-  useEffect(() => {
-    let alive = true;   // 等桥是异步的：组件卸载后不要再回写状态
-    (async () => {
-      setHref(location.href);
-      const t = await waitForBridge();
-      if (!alive) return;
-      bridge = t;
-      if (!t) {
-        setResult('未找到 window.__CJ_TAURI__');
-        return;
-      }
-      setBridgeOk(true);
-      t.listen('tick', (payload) => {
-        setTick('事件 tick #' + payload.n + ' 来自仓颉后端');
-      });
-      // 原生菜单 → 页面（capabilities 里要声明 menu:click）
-      t.listen('menu:click', (p) => {
-        setMenuMsg('菜单被点: ' + p.id + '（enabled=' + p.enabled + ', checked=' + p.checked + '）');
-      });
-    })();
-    return () => {
-      alive = false;
-    };
-  }, []);
-
-  async function greet() {
-    if (!bridge) {
-      setResult('桥未就绪');
-      return;
-    }
-    try {
-      const data = await bridge.invoke('greet', { name });
-      setResult('invoke OK: ' + data);
-    } catch (err) {
-      setResult('invoke FAIL: ' + err.message);
-    }
-  }
-
-  async function startTimer() {
-    if (bridge) await bridge.invoke('timer');
-  }
-
-  function reload() {
-    if (bridge) bridge.reload();
-  }
-
-  // 页面 → 原生菜单：menu 插件的前端 shim（window.__CJ_TAURI__.menu，注入在 document start）
-  async function toggleSidebar(e) {
-    const checked = e.target.checked;
-    if (!bridge || !bridge.menu) {
-      setResult('未注入 menu 插件 shim（页面来自 runUrl 时插件 JS 不在本进程）');
-      return;
-    }
-    try {
-      await bridge.menu.setChecked({ id: 'view.sidebar', checked });
-      setResult('原生菜单「侧边栏」已同步为 ' + checked);
-    } catch (err) {
-      setResult('menu.setChecked FAIL: ' + err.message);
-    }
-  }
-
-  return (
-    <>
-      <h1>cj-tauri · React + Vite</h1>
-      <p className="hint">
-        页面来源：<code>{href}</code>
-        <br />
-        桥状态：{bridgeOk ? '已注入 __CJ_TAURI__' : '未注入'}
-      </p>
-
-      <div className="card">
-        <div className="row">
-          <input
-            value={name}
-            placeholder="输入名字"
-            onChange={(e) => setName(e.target.value)}
-          />
-          <button onClick={greet}>greet</button>
-          <button className="ghost" onClick={startTimer}>timer</button>
-          <button className="ghost" onClick={reload}>reload</button>
-        </div>
-        <div className="out">{result}</div>
-        <div className="tick">{tick}</div>
-        <div className="tick">{menuMsg}</div>
-        <div className="chk">
-          <input type="checkbox" checked={sidebar} onChange={toggleSidebar} />
-          <span>侧边栏（对应原生菜单「视图 → 侧边栏」）</span>
-        </div>
-        <p className="tip">
-          改这个文件（<code>ui/src/App.jsx</code>）保存，页面会在不重启应用的情况下更新。
-        </p>
-      </div>
-    </>
-  );
-}
+import { useEffect, useState } from 'react';
+import './App.css';   // 与 app-vue 模板等价的样式（React 没有 SFC，样式走独立的 css）
+
+// 桥（window.__CJ_TAURI__）由宿主注入，注入时机随平台/页面来源而异：Linux 宿主注入在文档开始，
+// 但发行态单文件里的内联 <script type="module"> 解析完就执行，谁先谁后与加载方式有关。
+// 所以统一「等桥出现再初始化」，不要在模块作用域直接读。
+let bridge = null;
+
+function waitForBridge(timeoutMs = 3000) {
+  return new Promise((resolve) => {
+    const t0 = Date.now();
+    const tick = () => {
+      if (window.__CJ_TAURI__) return resolve(window.__CJ_TAURI__);
+      if (Date.now() - t0 >= timeoutMs) return resolve(null);
+      setTimeout(tick, 20);
+    };
+    tick();
+  });
+}
+
+export default function App() {
+  const [name, setName] = useState('world');
+  const [result, setResult] = useState('等待 invoke…');
+  const [tick, setTick] = useState('');
+  const [menuMsg, setMenuMsg] = useState('');
+  const [sidebar, setSidebar] = useState(true);
+  const [href, setHref] = useState('');
+  const [bridgeOk, setBridgeOk] = useState(false);
+
+  useEffect(() => {
+    let alive = true;   // 等桥是异步的：组件卸载后不要再回写状态
+    (async () => {
+      setHref(location.href);
+      const t = await waitForBridge();
+      if (!alive) return;
+      bridge = t;
+      if (!t) {
+        setResult('未找到 window.__CJ_TAURI__');
+        return;
+      }
+      setBridgeOk(true);
+      t.listen('tick', (payload) => {
+        setTick('事件 tick #' + payload.n + ' 来自仓颉后端');
+      });
+      // 原生菜单 → 页面（capabilities 里要声明 menu:click）
+      t.listen('menu:click', (p) => {
+        setMenuMsg('菜单被点: ' + p.id + '（enabled=' + p.enabled + ', checked=' + p.checked + '）');
+      });
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  async function greet() {
+    if (!bridge) {
+      setResult('桥未就绪');
+      return;
+    }
+    try {
+      const data = await bridge.invoke('greet', { name });
+      setResult('invoke OK: ' + data);
+    } catch (err) {
+      setResult('invoke FAIL: ' + err.message);
+    }
+  }
+
+  async function startTimer() {
+    if (bridge) await bridge.invoke('timer');
+  }
+
+  function reload() {
+    if (bridge) bridge.reload();
+  }
+
+  // 页面 → 原生菜单：menu 插件的前端 shim（window.__CJ_TAURI__.menu，注入在 document start）
+  async function toggleSidebar(e) {
+    const checked = e.target.checked;
+    if (!bridge || !bridge.menu) {
+      setResult('未注入 menu 插件 shim（页面来自 runUrl 时插件 JS 不在本进程）');
+      return;
+    }
+    try {
+      await bridge.menu.setChecked({ id: 'view.sidebar', checked });
+      setResult('原生菜单「侧边栏」已同步为 ' + checked);
+    } catch (err) {
+      setResult('menu.setChecked FAIL: ' + err.message);
+    }
+  }
+
+  return (
+    <>
+      <h1>cj-tauri · React + Vite</h1>
+      <p className="hint">
+        页面来源：<code>{href}</code>
+        <br />
+        桥状态：{bridgeOk ? '已注入 __CJ_TAURI__' : '未注入'}
+      </p>
+
+      <div className="card">
+        <div className="row">
+          <input
+            value={name}
+            placeholder="输入名字"
+            onChange={(e) => setName(e.target.value)}
+          />
+          <button onClick={greet}>greet</button>
+          <button className="ghost" onClick={startTimer}>timer</button>
+          <button className="ghost" onClick={reload}>reload</button>
+        </div>
+        <div className="out">{result}</div>
+        <div className="tick">{tick}</div>
+        <div className="tick">{menuMsg}</div>
+        <div className="chk">
+          <input type="checkbox" checked={sidebar} onChange={toggleSidebar} />
+          <span>侧边栏（对应原生菜单「视图 → 侧边栏」）</span>
+        </div>
+        <p className="tip">
+          改这个文件（<code>ui/src/App.jsx</code>）保存，页面会在不重启应用的情况下更新。
+        </p>
+      </div>
+    </>
+  );
+}

package/cli/templates/app-react/cj-tauri.toml

@@ -0,0 +1,33 @@
+# cj-tauri 应用清单——整个工程的单一真相（RFC-002 §7）。
+# cj-tauri sync 从这里派生 targets/ 骨架（desktop/ohos）；cj-tauri check 校验它并检测骨架漂移。
+[app]
+  name = "{{PROJECT_NAME}}"
+  version = "0.1.0"
+  # 应用标识：桌面是安装 ID，鸿蒙直接是 bundleName（每段须字母开头、只含字母数字下划线）
+  id = "{{BUNDLE_NAME}}"
+  # 业务包名（cjpm 约束①：toml 模块名必须等于源包名）
+  package = "{{PACKAGE_NAME}}"
+
+[[windows]]
+  label = "main"
+  title = "{{PROJECT_NAME}}"
+  width = 1000
+  height = 700
+
+[assets]
+  # 骨架 launcher 加载的页面：Vite 打出来的单文件产物（vite-plugin-singlefile 内联 js/css）。
+  # dev 模式自动改写到 Vite dev server（热更新）；发布构建才用这个产物。
+  page = "ui/dist/index.html"
+
+[capabilities]
+  dir = "assets/capabilities"
+
+[links]
+  # 各目标端**追加**的链接选项（拼在框架默认值之后；留空 = 只用默认）。
+  # 什么时候需要它：要调的原生能力在仓颉 SDK 里没有绑定，只能 FFI 直连系统库——
+  # 符号必须出现在最终链接那一侧，而那份 cjpm.toml 是 sync 生成的、不能手改。
+  # 例：鸿蒙读设备电量走系统 C API（ohbattery_info.h），写 ohos = "-lohbattery_info"
+  # 三端分开写是因为同一个库在三端上名字通常不同（-lfoo / foo.lib / -lfoo_ndk.z）。
+  desktop-linux = ""
+  desktop-windows = ""
+  ohos = ""

package/cli/templates/app-react/cjpm.toml

@@ -1,17 +1,34 @@
+# 业务包：业务代码的唯一真相（RFC-002 §7.3——骨架永远是外壳，业务只有一份）。
+# output-type = "static"：桌面骨架（targets/desktop）与鸿蒙入口（targets/ohos/entry）
+# 都以 path 依赖引用本包——同一份业务代码，多个目标各编各的产物。
 [package]
   cjc-version = "{{CJC_VERSION}}"
   name = "{{PACKAGE_NAME}}"
-  description = "{{PROJECT_NAME}} - cj-tauri 应用（Vue 3 + Vite 前端）"
+  description = "{{PROJECT_NAME}} - cj-tauri 业务包"
   version = "0.1.0"
   target-dir = ""
-  output-type = "executable"
+  output-type = "static"
   compile-option = ""
   override-compile-option = ""
   link-option = ""
   package-configuration = {}
 
 [dependencies]
-  # cj-tauri 框架本体（由 cj-tauri create 写入的本机路径）
+  # cj-tauri 框架本体（由 cj-tauri create 写入的本机路径；换机器重跑 create 或手改）
   cjTauri = { path = "{{FRAMEWORK_ROOT_TOML}}" }
 
-{{TARGET_SECTION}}
+[target.x86_64-unknown-linux-gnu.bin-dependencies]
+    path-option = ["${CANGJIE_STDX}"]
+
+[target.x86_64-w64-mingw32.bin-dependencies]
+    path-option = ["${CANGJIE_STDX}"]
+
+[target.aarch64-linux-ohos]
+  # 鸿蒙目标：交叉编译工具链与 sysroot 由 DevEco 仓颉套件提供，路径全部走环境变量
+  # （与框架根 cjpm.toml 同口径；末尾 --dy-std 不可省，原因见框架根 toml 的鸿蒙段注释）
+  compile-option = "-B \"${DEVECO_CANGJIE_HOME}/build-tools/third_party/llvm/bin\" -B \"${DEVECO_OH_NATIVE_HOME}/sysroot/usr/lib/aarch64-linux-ohos\" -L \"${DEVECO_OH_NATIVE_HOME}/sysroot/usr/lib/aarch64-linux-ohos\" -L \"${DEVECO_OH_NATIVE_HOME}/llvm/lib/clang/15.0.4/lib/aarch64-linux-ohos\" -L \"${DEVECO_OH_NATIVE_HOME}/llvm/lib/aarch64-linux-ohos\" --sysroot \"${DEVECO_OH_NATIVE_HOME}/sysroot\" --dy-std"
+
+[target.aarch64-linux-ohos.bin-dependencies]
+    # stdx 必须用鸿蒙版（CANGJIE_STDX_OHOS，桌面版 ABI 不通）；CANGJIE_OHOS_LIBS 指 DevEco
+    # 套件的 api/lib/linux_ohos_aarch64_cjnative/ohos（仓颉标准库 + ohos API 绑定）
+    path-option = ["${CANGJIE_STDX_OHOS}", "${CANGJIE_OHOS_LIBS}", "${AARCH64_MACRO_LIBS}", "${AARCH64_KIT_LIBS}"]

package/cli/templates/app-react/src/main.cj

@@ -1,8 +1,8 @@
 package {{PACKAGE_NAME}}
 
 import cjTauri.*
+import cjTauri.plugins.menu.*
 import stdx.encoding.json.*
-import std.fs.*
 import std.collection.*
 
 /**
@@ -25,7 +25,7 @@ public class GreetCommand <: CommandHandler {
 }
 
 /**
- * 定时器命令：启动后台线程，每秒向后端推一个 tick 事件（验证 仓颉 → JS 通道）
+ * 定时器命令：启动后台线程，每秒向前端推一个 tick 事件（验证 仓颉 → JS 通道）
  * 前端：tauri.listen("tick", cb) + tauri.invoke("timer")
  */
 public class TimerCommand <: CommandHandler {
@@ -67,36 +67,25 @@ func demoMenu(): MenuModel {
     return MenuModel(items)
 }
 
-main(): Int64 {
-    // 1) 装配应用（对标 tauri::Builder）：窗口配置 + 注册命令
-    //    能力清单由框架在 run() 时自动扫描 capabilities/ 目录（对标 Tauri 的 capabilities 目录）
-    let app = TauriApp()
+/**
+ * 业务装配点（RFC-002 §4.1）：骨架的 launcher（targets/ 下各目标的 src）调用它取 AppSpec。
+ *
+ * 零平台知识：不碰宿主、不知道页面文件路径、不知道能力目录——那些由清单
+ * （cj-tauri.toml）决定，launcher 按清单覆盖（page/window/assets/capabilities）。
+ * dev 模式页面来自 Vite dev server（框架按 CJ_TAURI_DEV_URL 自动改写），
+ * 发布构建加载 assets/ui/dist 的单文件产物——两种跑法业务代码完全一致。
+ */
+public func build(): AppSpec {
+    return AppSpec()
         .window(WindowConfig("{{PROJECT_NAME}}", 1000, 700))
-        .register("greet", GreetCommand())
-        .register("timer", TimerCommand())
         // menu 插件：给前端挂 window.__CJ_TAURI__.menu.setEnabled / setChecked
         // （插件只声明「我提供什么」，**不自动放行**——要能调，就在 capabilities 里引用
         //   permissions: ["menu:state"]，或逐条写 commands）
         .plugin(MenuPlugin())
-        // 菜单栏必须在 run() / runUrl() 之前挂：预置类宿主能力要赶在页面加载前定稿
-        .setMenu(demoMenu())
-
-    // 2) 页面来源二选一，对应本模板的两种跑法：
-    //    dev  : cj-tauri dev 起了 Vite dev server 并注入 CJ_TAURI_DEV_URL
-    //           → 页面来自真实 URL，改 .vue 保存即热更新，应用不用重启
-    //    发布 : 读 Vite 打出来的单文件 ui/dist/index.html（js/css 已内联，无外部依赖）
-    if (let Some(url) <- TauriApp.devUrl()) {
-        eprintln("[app] dev 模式，页面来自 ${url}")
-        app.runUrl(url)
-    } else {
-        let dist = "ui/dist/index.html"
-        if (!exists(dist)) {
-            eprintln("[app] 找不到 ${dist}")
-            eprintln("      开发: 在项目根跑 cj-tauri dev（会自动 npm install + 起 dev server）")
-            eprintln("      发布: cd ui && npm run build")
-            return 1
-        }
-        app.run(String.fromUtf8(File.readFrom(dist)))
-    }
-    return 0
+        .wire({ app =>
+            app.register("greet", GreetCommand())
+            app.register("timer", TimerCommand())
+            // 菜单栏必须在 run 之前挂：预置类宿主能力要赶在页面加载前定稿
+            app.setMenu(demoMenu())
+        })
 }

package/cli/templates/app-vue/README.md

@@ -1,60 +1,56 @@
 # {{PROJECT_NAME}}
 
-`cj-tauri create {{PROJECT_NAME}} --template vue` 生成的工程：**仓颉后端 + Vue 3 / Vite 前端**。
+基于 [cj-tauri]({{FRAMEWORK_ROOT}})（仓颉版 Tauri）+ Vue 3 + Vite 的应用：**仓颉后端 + 系统 WebView 前端**，
+通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capabilities 清单做最小权限管控。
 
-目录结构：
+## 目录结构（一份业务代码，骨架按目标派生）
 
 ```
 {{PROJECT_NAME}}/
-  src/main.cj            后端入口（窗口 + 命令注册 + 页面来源选择）
-  capabilities/          能力清单（哪些命令 / 事件允许被前端调用）
-  ui/                    前端工程（Vite + Vue 3）
-    index.html
-    vite.config.js
-    src/App.vue
-    src/main.js
-  cjpm.toml              仓颉包配置（cjTauri 依赖路径由 create 写入本机绝对路径）
+├── cj-tauri.toml           # 应用清单——单一真相（id/version/窗口/资产/能力目录）
+├── cjpm.toml               # 业务包（static 库；骨架以 path 依赖引用）
+├── src/main.cj             # 业务装配点 build(): AppSpec（零平台知识）
+├── assets/
+│   ├── ui/                 # Vue 3 + Vite 前端工程（package.json / vite.config.js / src/）
+│   └── capabilities/default.json   # 能力白名单（命令 / 事件 / 权限集）
+└── targets/                # cj-tauri sync 生成的骨架（勿手改；check 判漂移）
+    ├── desktop/            #   桌面可执行（launcher 调 build()）
+    └── ohos/               #   鸿蒙 hap 工程（DevEco + build-hap.sh）
 ```
 
-## 开发：`cj-tauri dev`（热重载）
+## 首次运行（dev，热更新）
 
 ```bash
-cj-tauri dev
+cd assets/ui && npm install    # 前端依赖（需要 Node.js）
+cd ../.. && cj-tauri sync      # 派生 targets/ 骨架
+cj-tauri dev                   # 起 Vite dev server（改 .vue 保存即刷新）+ 编译 + 启动窗口
 ```
 
-`dev` 依次做：桥已构建则跳过 → 若 `ui/node_modules` 不存在则 `npm install` → 后台起 Vite dev server
-（`127.0.0.1:5173`）→ 探活 → 以环境变量 `CJ_TAURI_DEV_URL` 启动应用。页面来自真实 URL，所以：
-
-- 改 `ui/src/**.vue` / `.js`：保存后页面自己更新，**应用不重启**（Vite HMR）；
-- 改后端 `src/*.cj`：需要重新 `cj-tauri dev`（框架不承诺后端进程内热替换）；
-- 应用窗口关闭后会一并收掉 dev server。
-
-想手动控制前端时，也可以自己起 dev server 再启动应用：
+## 发布构建
 
 ```bash
-cd ui && npm run dev            # 另一个终端
-CJ_TAURI_DEV_URL=http://127.0.0.1:5173/ cj-tauri run
+cj-tauri build                 # 先在 assets/ui 跑 npm run build，再编后端
+cj-tauri run
 ```
 
-## 发布：打成一个 HTML 文件
+`vite.config.js` 用 vite-plugin-singlefile：产物是 `assets/ui/dist/index.html`
+（js/css 内联、无外部依赖）——正是清单 `[assets] page` 指向的页面。
+
+## 鸿蒙端（PC / 2in1）
 
 ```bash
-cd ui && npm install && npm run build   # 产出 ui/dist/index.html（js/css/图片全内联）
-cd .. && cj-tauri build                 # 构建桥 + cjpm build
-cj-tauri run                            # 没有 CJ_TAURI_DEV_URL 时读 ui/dist/index.html
+export CANGJIE_STDX_OHOS=<鸿蒙版 stdx>/linux_ohos_aarch64_cjnative/dynamic/stdx
+cd targets/ohos && bash build-hap.sh            # 编 hap
+cd targets/ohos && bash build-hap.sh --install  # 编完装到设备并拉起
 ```
 
-`vite-plugin-singlefile` 保证产物就是**一个** `index.html`，与 `app` 模板的单文件模式等价。
+提示：模板不带签名证书——首次在 DevEco 里 File → Project Structure → Signing Configs
+勾「Automatically generate signature」（要登录华为账号）；不签名只能编出
+*-unsigned.hap，装不进设备。
 
-## 前后端怎么通信
-
-前端拿到的是 `window.__CJ_TAURI__`（与 Tauri 的 `@tauri-apps/api` 同形）：
-
-```js
-window.__CJ_TAURI__.invoke('greet', { name: '仓颉' });   // → Promise
-window.__CJ_TAURI__.listen('tick', (payload) => { /* ... */ });
-window.__CJ_TAURI__.reload();                            // 整页刷新
-```
+## 命令与能力
 
-能调哪些命令、能收哪些事件，由 `capabilities/default.json` 决定；没声明的命令一律被拒
-（`command not allowed: xxx`）。
+命令在 `src/main.cj`（`greet` / `timer` + 演示菜单），白名单在 `assets/capabilities/default.json`——
+两边必须对齐：`cj-tauri check` 的三方比对会交叉核对「能力声明 × 插件自描述 × 实际装配」。
+插件在某端没有实现时（如 shell/sqlite 在鸿蒙端），骨架照样编得过，运行期调用得到
+可照做的「端不支持」错误（RFC-002 §4.6.4 的 P-1 桩）。

package/cli/templates/app-vue/{ui → assets/ui}/index.html

@@ -1,25 +1,25 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>{{PROJECT_NAME}}</title>
-  <style>
-    /* 整页基础样式：组件样式在各组件里（App.vue），这里给页面底色 + 让内容整列居中，
-       调色板与零 Node 模板、examples/hello 一致（#16161d 深色底）。 */
-    :root { color-scheme: dark; }
-    /* min-height（不是 height）+ 居中：内容比视口高时 body 跟着长，顶部不会被裁掉。 */
-    body { box-sizing: border-box; margin: 0; padding: 24px; min-height: 100vh;
-           display: flex; flex-direction: column; align-items: center; justify-content: center;
-           background: #16161d; color: #e6e6e6;
-           font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
-    /* 标题 / 提示 / 卡片同一列居中：光靠 body 的 align-items 不够——挂载点只有一个子节点，
-       提示行（页面来源、桥状态）很长时会把整列撑宽，卡片反而贴在左边。 */
-    #app { width: 100%; display: flex; flex-direction: column; align-items: center; }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{PROJECT_NAME}}</title>
+  <style>
+    /* 整页基础样式：组件样式在各组件里（App.vue），这里给页面底色 + 让内容整列居中，
+       调色板与零 Node 模板、examples/hello 一致（#16161d 深色底）。 */
+    :root { color-scheme: dark; }
+    /* min-height（不是 height）+ 居中：内容比视口高时 body 跟着长，顶部不会被裁掉。 */
+    body { box-sizing: border-box; margin: 0; padding: 24px; min-height: 100vh;
+           display: flex; flex-direction: column; align-items: center; justify-content: center;
+           background: #16161d; color: #e6e6e6;
+           font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+    /* 标题 / 提示 / 卡片同一列居中：光靠 body 的 align-items 不够——挂载点只有一个子节点，
+       提示行（页面来源、桥状态）很长时会把整列撑宽，卡片反而贴在左边。 */
+    #app { width: 100%; display: flex; flex-direction: column; align-items: center; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>