cj-tauri 2.0.0 → 2.1.0

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

@@ -1,56 +1,56 @@
-# {{PROJECT_NAME}}
-
-基于 [cj-tauri]({{FRAMEWORK_ROOT}})（仓颉版 Tauri）+ React 18 + Vite 的应用：**仓颉后端 + 系统 WebView 前端**，
-通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capabilities 清单做最小权限管控。
-
-## 目录结构（一份业务代码，骨架按目标派生）
-
-```
-{{PROJECT_NAME}}/
-├── 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）
-```
-
-## 首次运行（dev，热更新）
-
-```bash
-cd assets/ui && npm install    # 前端依赖（需要 Node.js）
-cd ../.. && cj-tauri sync      # 派生 targets/ 骨架
-cj-tauri dev                   # 起 Vite dev server（改 .jsx 保存即刷新）+ 编译 + 启动窗口
-```
-
-## 发布构建
-
-```bash
-cj-tauri build                 # 先在 assets/ui 跑 npm run build，再编后端
-cj-tauri run
-```
-
-`vite.config.js` 用 vite-plugin-singlefile：产物是 `assets/ui/dist/index.html`
-（js/css 内联、无外部依赖）——正是清单 `[assets] page` 指向的页面。
-
-## 鸿蒙端（PC / 2in1）
-
-```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  # 编完装到设备并拉起
-```
-
-提示：模板不带签名证书——首次在 DevEco 里 File → Project Structure → Signing Configs
-勾「Automatically generate signature」（要登录华为账号）；不签名只能编出
-*-unsigned.hap，装不进设备。
-
-## 命令与能力
-
-命令在 `src/main.cj`（`greet` / `timer` + 演示菜单），白名单在 `assets/capabilities/default.json`——
-两边必须对齐：`cj-tauri check` 的三方比对会交叉核对「能力声明 × 插件自描述 × 实际装配」。
-插件在某端没有实现时（如 shell/sqlite 在鸿蒙端），骨架照样编得过，运行期调用得到
-可照做的「端不支持」错误（RFC-002 §4.6.4 的 P-1 桩）。
+# {{PROJECT_NAME}}
+
+基于 [cj-tauri]({{FRAMEWORK_ROOT}})（仓颉版 Tauri）+ React 18 + Vite 的应用：**仓颉后端 + 系统 WebView 前端**，
+通过 `window.__CJ_TAURI__` 做 invoke/listen 双向 IPC，并由 capabilities 清单做最小权限管控。
+
+## 目录结构（一份业务代码，骨架按目标派生）
+
+```
+{{PROJECT_NAME}}/
+├── 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）
+```
+
+## 首次运行（dev，热更新）
+
+```bash
+cd assets/ui && npm install    # 前端依赖（需要 Node.js）
+cd ../.. && cj-tauri sync      # 派生 targets/ 骨架
+cj-tauri dev                   # 起 Vite dev server（改 .jsx 保存即刷新）+ 编译 + 启动窗口
+```
+
+## 发布构建
+
+```bash
+cj-tauri build                 # 先在 assets/ui 跑 npm run build，再编后端
+cj-tauri run
+```
+
+`vite.config.js` 用 vite-plugin-singlefile：产物是 `assets/ui/dist/index.html`
+（js/css 内联、无外部依赖）——正是清单 `[assets] page` 指向的页面。
+
+## 鸿蒙端（PC / 2in1）
+
+```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  # 编完装到设备并拉起
+```
+
+提示：模板不带签名证书——首次在 DevEco 里 File → Project Structure → Signing Configs
+勾「Automatically generate signature」（要登录华为账号）；不签名只能编出
+*-unsigned.hap，装不进设备。
+
+## 命令与能力
+
+命令在 `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/assets/capabilities/default.json

@@ -1,7 +1,7 @@
-{
-  "identifier": "default",
-  "windows": ["main"],
-  "commands": ["greet", "timer", "system:version", "system:ping", "system:echo", "system:devtools"],
-  "permissions": ["menu:state"],
-  "events": ["tick", "menu:click"]
-}
+{
+  "identifier": "default",
+  "windows": ["main"],
+  "commands": ["greet", "timer", "system:version", "system:ping", "system:echo", "system:devtools"],
+  "permissions": ["menu:state"],
+  "events": ["tick", "menu:click"]
+}

package/cli/templates/app-react/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/assets/ui/package.json

@@ -1,19 +1,19 @@
-{
-  "name": "cj-tauri-ui",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^6.0.11",
-    "vite-plugin-singlefile": "^2.1.0"
-  }
-}
+{
+  "name": "cj-tauri-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.11",
+    "vite-plugin-singlefile": "^2.1.0"
+  }
+}

package/cli/templates/app-react/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;
+}

package/cli/templates/app-react/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/assets/ui/src/main.jsx

@@ -1,6 +1,6 @@
-import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
-
-// 这里不套 React.StrictMode：它在开发模式下会把 effect 跑两遍，
-// 而这个模板的 effect 里就要调 invoke / listen，双跑会让人误以为桥重复投递。
-createRoot(document.getElementById('root')).render(<App />);
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+// 这里不套 React.StrictMode：它在开发模式下会把 effect 跑两遍，
+// 而这个模板的 effect 里就要调 invoke / listen，双跑会让人误以为桥重复投递。
+createRoot(document.getElementById('root')).render(<App />);