cj-tauri 1.1.2 → 2.1.0

package/cli/templates/app/README.md

@@ -1,80 +1,51 @@
 # {{PROJECT_NAME}}
 
 基于 [cj-tauri]({{FRAMEWORK_ROOT}})（仓颉版 Tauri）的应用：**仓颉后端 + 系统 WebView 前端**，
-通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capability 清单做最小权限管控。
+通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capabilities 清单做最小权限管控。
 
-## 目录结构
+## 目录结构（一份业务代码，骨架按目标派生）
 
 ```
 {{PROJECT_NAME}}/
-├── cjpm.toml              # 应用构建配置（依赖 cj-tauri 框架）
-├── src/main.cj            # 仓颉入口：窗口配置 + 命令注册 + 启动
-├── ui/index.html          # 前端页面（任意 Web 技术栈）
-└── capabilities/default.json  # 能力白名单（命令 / 事件）
+├── cj-tauri.toml           # 应用清单——单一真相（id/version/窗口/资产/能力目录）
+├── cjpm.toml               # 业务包（static 库；骨架以 path 依赖引用）
+├── src/main.cj             # 业务装配点 build(): AppSpec（零平台知识）
+├── assets/
+│   ├── ui/index.html       # 前端页面（任意 Web 技术栈）
+│   └── capabilities/default.json   # 能力白名单（命令 / 事件 / 权限集）
+└── targets/                # cj-tauri sync 生成的骨架（勿手改；check 判漂移）
+    ├── desktop/            #   桌面可执行（launcher 调 build()）
+    └── ohos/               #   鸿蒙 hap 工程（DevEco + build-hap.sh）
 ```
 
 ## 运行
 
 ```bash
-# 开发：构建 C 桥 + 编译 + 启动窗口
-cj-tauri dev
-
-# 仅构建 / 仅运行
-cj-tauri build
-cj-tauri run
+cj-tauri sync     # 派生 targets/ 骨架（首次；重跑幂等）
+cj-tauri dev      # 构建 C 桥 + 编译 + 启动窗口
+cj-tauri build    # 仅构建
+cj-tauri run      # 运行已构建产物
+cj-tauri check    # 清单校验 + 骨架漂移 + 插件三方比对
 ```
 
-不带 CLI 时手动运行：
+## 鸿蒙端（PC / 2in1）
 
 ```bash
-cjpm build
-# 需要把「框架 native 目录 + stdx 目录 + 仓颉运行时目录」加入动态库搜索路径后，
-# 在项目根目录（capabilities/ 与 ui/ 是相对路径读取）启动：
-#   Linux:   LD_LIBRARY_PATH=<native>:<stdx>:<cangjie runtime/lib> ./target/release/bin/main
-#   Windows: set PATH=<native>;<native>\webview2;<stdx>;<cangjie>\runtime\lib\windows_x86_64_cjnative;%PATH%
-#            target\release\bin\main.exe
-```
-
-## 窗口配置
-
-```cangjie
-let app = TauriApp()
-    .window(WindowConfig("我的应用", 1200, 800))   // 标题 / 宽 / 高
+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  # 编完装到设备并拉起
 ```
 
-默认标题 `cj-tauri 应用`、1000×700、允许开发者工具；
-`WindowConfig.devTools = false` 可禁用，前端 `invoke('system:devtools')` 可在运行时打开（需在能力清单里声明）。
+提示：模板不带签名证书——首次在 DevEco 里 File → Project Structure → Signing Configs
+勾「Automatically generate signature」（要登录华为账号）；不签名只能编出
+*-unsigned.hap，装不进设备。
 
-## 加一个命令
-
-1. 在 `src/main.cj` 实现 `CommandHandler`：
-
-```cangjie
-public class PingCommand <: CommandHandler {
-    public init() {}
-    public func handle(cmd: String, args: JsonObject, ipc: IpcContext): JsonValue {
-        return JsonString("pong")
-    }
-}
-```
-
-2. 注册：`.register("ping", PingCommand())`
-3. 在 `capabilities/default.json` 的 `commands` 里声明 `"ping"`（**不声明会被拒绝**；
-   清单由框架在 `run()` 时自动扫描 `capabilities/` 目录，无需自己读文件）
-4. 前端调用：`window.__CJ_TAURI__.invoke('ping').then(...)`
-
-## 后端推事件
-
-```cangjie
-var payload = JsonObject()
-payload.put("n", JsonInt(1))
-ipc.emit("tick", payload)     // 需在 capabilities 的 events 中声明 "tick"
-```
-
-```js
-window.__CJ_TAURI__.listen('tick', function (payload) { console.log(payload.n); });
-```
+## 命令与能力
 
-## 文档
+**把骨架变成你的应用，改三处**：① `src/main.cj` 照 `GreetCommand` 写命令并在 `build()` 里 register；
+② `assets/capabilities/default.json` 的 `commands` 里放行；③ `assets/ui/index.html` 里 `tauri.invoke`。
 
-框架完整文档：`{{FRAMEWORK_ROOT}}/README.md` 与 `{{FRAMEWORK_ROOT}}/docs/使用文档.md`
+命令在 `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/{ui → assets/ui}/index.html

@@ -55,6 +55,8 @@
 
   <script>
     // 注入的桥（对标 @tauri-apps/api）：window.__CJ_TAURI__
+    // ③ 改页面从这看起：tauri.invoke 调后端命令、tauri.listen 收后端事件
+    //    （新命令记得在 src/main.cj 实现，并在 assets/capabilities/default.json 放行）
     function withBridge(cb) {
       if (window.__CJ_TAURI__) { cb(window.__CJ_TAURI__); return; }
       setTimeout(function () { withBridge(cb); }, 50);

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

@@ -0,0 +1,32 @@
+# 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 加载的页面（相对资产根 assets/）；dev 模式自动改写到 Vite dev server
+  page = "ui/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/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 应用"
+  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/src/main.cj

@@ -1,11 +1,21 @@
 package {{PACKAGE_NAME}}
 
 import cjTauri.*
+import cjTauri.plugins.menu.*
 import stdx.encoding.json.*
-import std.fs.File
 import std.collection.*
 
 /**
+ * ── 把这个骨架变成你的应用，改三处就够了 ──────────────────────────────
+ * ① 写命令：照下面的 GreetCommand 抄一个，并在 build() 里 register；
+ * ② 放行：assets/capabilities/default.json 的 commands 里加上命令名
+ *    （只写代码不放行 = 前端拿到 command not allowed）；
+ * ③ 改页面：assets/ui/index.html 里用 tauri.invoke 调你的命令。
+ * 进阶（插件 / 菜单 / 多窗口）见项目根的 docs/使用文档.md 与 docs/RFC-插件体系.md。
+ */
+
+/**
+ * ① 写命令从这抄：实现 CommandHandler，再在下面 build() 里 register
  * greet 命令（对标 tauri command）
  * 前端：tauri.invoke("greet", { name: "..." })
  */
@@ -25,7 +35,7 @@ public class GreetCommand <: CommandHandler {
 }
 
 /**
- * 定时器命令：启动后台线程，每秒向后端推一个 tick 事件（验证 仓颉 → JS 通道）
+ * 定时器命令：启动后台线程，每秒向前端推一个 tick 事件（验证 仓颉 → JS 通道）
  * 前端：tauri.listen("tick", cb) + tauri.invoke("timer")
  */
 public class TimerCommand <: CommandHandler {
@@ -67,22 +77,25 @@ func demoMenu(): MenuModel {
     return MenuModel(items)
 }
 
-main(): Int64 {
-    // 1) 装配应用（对标 tauri::Builder）：窗口配置 + 注册命令
-    //    能力清单由框架在 run() 时自动扫描 capabilities/ 目录（对标 Tauri 的 capabilities 目录）
-    let app = TauriApp()
-        .window(WindowConfig("cj-tauri 应用", 1000, 700))
-        .register("greet", GreetCommand())
-        .register("timer", TimerCommand())
+/**
+ * 业务装配点（RFC-002 §4.1）：骨架的 launcher（targets/ 下各目标的 src）调用它取 AppSpec。
+ *
+ * 零平台知识：不碰宿主、不知道页面文件路径、不知道能力目录——那些由清单
+ * （cj-tauri.toml）决定，launcher 按清单覆盖（page/window/assets/capabilities）。
+ * build() 负责业务自己的部分：命令注册、菜单、插件。
+ */
+public func build(): AppSpec {
+    return AppSpec()
+        .window(WindowConfig("{{PROJECT_NAME}}", 1000, 700))
         // menu 插件：给前端挂 window.__CJ_TAURI__.menu.setEnabled / setChecked
         // （插件只声明「我提供什么」，**不自动放行**——要能调，就在 capabilities 里引用
         //   permissions: ["menu:state"]，或逐条写 commands）
         .plugin(MenuPlugin())
-        // 菜单栏必须在 run() 之前挂：预置类宿主能力要赶在页面加载前定稿
-        .setMenu(demoMenu())
-
-    // 2) 载入前端页面并启动（阻塞至窗口关闭）
-    let html = String.fromUtf8(File.readFrom("ui/index.html"))
-    app.run(html)
-    return 0
+        .wire({ app =>
+            // ① 新命令在这里 register；② 别忘了去 capabilities/default.json 放行
+            app.register("greet", GreetCommand())
+            app.register("timer", TimerCommand())
+            // 菜单栏必须在 run 之前挂：预置类宿主能力要赶在页面加载前定稿
+            app.setMenu(demoMenu())
+        })
 }

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

@@ -1,67 +1,56 @@
 # {{PROJECT_NAME}}
 
-`cj-tauri create {{PROJECT_NAME}} --template react` 生成的工程：**仓颉后端 + React 18 / Vite 前端**。
+基于 [cj-tauri]({{FRAMEWORK_ROOT}})（仓颉版 Tauri）+ React 18 + Vite 的应用：**仓颉后端 + 系统 WebView 前端**，
+通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capabilities 清单做最小权限管控。
 
-目录结构：
+## 目录结构（一份业务代码，骨架按目标派生）
 
 ```
 {{PROJECT_NAME}}/
-  src/main.cj            后端入口（窗口 + 命令注册 + 页面来源选择）
-  capabilities/          能力清单（哪些命令 / 事件允许被前端调用）
-  ui/                    前端工程（Vite + React）
-    index.html
-    vite.config.js
-    src/App.jsx
-    src/main.jsx
-  cjpm.toml              仓颉包配置（cjTauri 依赖路径由 create 写入本机绝对路径）
+├── cj-tauri.toml           # 应用清单——单一真相（id/version/窗口/资产/能力目录）
+├── cjpm.toml               # 业务包（static 库；骨架以 path 依赖引用）
+├── src/main.cj             # 业务装配点 build(): AppSpec（零平台知识）
+├── assets/
+│   ├── ui/                 # React 18 + 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（改 .jsx 保存即刷新）+ 编译 + 启动窗口
 ```
 
-`dev` 依次做：桥已构建则跳过 → 若 `ui/node_modules` 不存在则 `npm install` → 后台起 Vite dev server
-（`127.0.0.1:5173`）→ 探活 → 以环境变量 `CJ_TAURI_DEV_URL` 启动应用。页面来自真实 URL，所以：
-
-- 改 `ui/src/**.jsx` / `.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
-```
-
-## 发布：打成一个 HTML 文件
+## 发布构建
 
 ```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
+cj-tauri build                 # 先在 assets/ui 跑 npm run build，再编后端
+cj-tauri run
 ```
 
-`vite-plugin-singlefile` 保证产物就是**一个** `index.html`，与 `app` 模板的单文件模式等价。
+`vite.config.js` 用 vite-plugin-singlefile：产物是 `assets/ui/dist/index.html`
+（js/css 内联、无外部依赖）——正是清单 `[assets] page` 指向的页面。
 
-## 前后端怎么通信
+## 鸿蒙端（PC / 2in1）
 
-前端拿到的是 `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();                            // 整页刷新
+```bash
+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  # 编完装到设备并拉起
 ```
 
-能调哪些命令、能收哪些事件，由 `capabilities/default.json` 决定；没声明的命令一律被拒
-（`command not allowed: xxx`）。
+提示：模板不带签名证书——首次在 DevEco 里 File → Project Structure → Signing Configs
+勾「Automatically generate signature」（要登录华为账号）；不签名只能编出
+*-unsigned.hap，装不进设备。
 
-## 和 vue 模板的差别
+## 命令与能力
 
-只有 `ui/` 里换成了 React：`@vitejs/plugin-react` 替掉 `@vitejs/plugin-vue`，入口是 `src/main.jsx`、
-根组件是 `src/App.jsx`；Vite 配置、`src/main.cj`、能力清单、`cj-tauri dev` 的用法完全一致。
-`src/main.jsx` 里**没有**用 `React.StrictMode`：开发模式下它会把 effect 跑两遍，
-而这个模板的 effect 里要调 `invoke` / `listen`，双跑容易让人误以为桥重复投递。
+命令在 `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-react/{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.css，这里给页面底色 + 让内容整列居中，
-       调色板与零 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 不够——挂载点只有一个子节点，
-       提示行（页面来源、桥状态）很长时会把整列撑宽，卡片反而贴在左边。 */
-    #root { width: 100%; display: flex; flex-direction: column; align-items: center; }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></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.css，这里给页面底色 + 让内容整列居中，
+       调色板与零 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 不够——挂载点只有一个子节点，
+       提示行（页面来源、桥状态）很长时会把整列撑宽，卡片反而贴在左边。 */
+    #root { width: 100%; display: flex; flex-direction: column; align-items: center; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

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

@@ -1,67 +1,67 @@
-/* React 模板的示例样式：与 app-vue 模板的 <style scoped> 逐条对齐（class 名相同）。
-   Vue 靠 SFC 自带样式块，React 没有 SFC，所以走「JS 里 import 一个 css」——Vite 原生支持。 */
-h1 {
-  color: #7ce7ff;
-}
-.hint {
-  font-size: 13px;
-  opacity: 0.8;
-}
-.card {
-  background: #16213e;
-  border-radius: 12px;
-  padding: 20px 24px;
-  width: 560px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-}
-.row {
-  display: flex;
-  gap: 8px;
-}
-input {
-  flex: 1;
-  padding: 8px 12px;
-  border: none;
-  border-radius: 8px;
-  background: #0f3460;
-  color: #eee;
-}
-button {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 8px;
-  background: #e94560;
-  color: #fff;
-  cursor: pointer;
-}
-button.ghost {
-  background: #24476e;
-}
-button:hover {
-  opacity: 0.85;
-}
-.out {
-  margin-top: 14px;
-  font-size: 16px;
-}
-.tick {
-  margin-top: 6px;
-  font-size: 13px;
-  color: #8be9fd;
-}
-.chk {
-  margin-top: 12px;
-  font-size: 13px;
-  opacity: 0.85;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.chk input {
-  flex: none;
-}
-.tip {
-  margin-top: 14px;
-  font-size: 12px;
-  opacity: 0.7;
-}
+/* React 模板的示例样式：与 app-vue 模板的 <style scoped> 逐条对齐（class 名相同）。
+   Vue 靠 SFC 自带样式块，React 没有 SFC，所以走「JS 里 import 一个 css」——Vite 原生支持。 */
+h1 {
+  color: #7ce7ff;
+}
+.hint {
+  font-size: 13px;
+  opacity: 0.8;
+}
+.card {
+  background: #16213e;
+  border-radius: 12px;
+  padding: 20px 24px;
+  width: 560px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+.row {
+  display: flex;
+  gap: 8px;
+}
+input {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: #0f3460;
+  color: #eee;
+}
+button {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 8px;
+  background: #e94560;
+  color: #fff;
+  cursor: pointer;
+}
+button.ghost {
+  background: #24476e;
+}
+button:hover {
+  opacity: 0.85;
+}
+.out {
+  margin-top: 14px;
+  font-size: 16px;
+}
+.tick {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #8be9fd;
+}
+.chk {
+  margin-top: 12px;
+  font-size: 13px;
+  opacity: 0.85;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.chk input {
+  flex: none;
+}
+.tip {
+  margin-top: 14px;
+  font-size: 12px;
+  opacity: 0.7;
+}