@maiyunnet/kebab 9.0.1 → 9.1.0

package/sys/cmd.js

@@ -172,6 +172,8 @@ async function run() {
         config.ai['ALICN'].skey ??= '';
         config.ai['ALIAS'] ??= {};
         config.ai['ALIAS'].skey ??= '';
+        config.ai['ALINE'] ??= {};
+        config.ai['ALINE'].skey ??= '';
         config.ai['AZURE'] ??= {};
         config.ai['AZURE'].endpoint ??= '';
         config.ai['AZURE'].skey ??= '';
@@ -349,10 +351,11 @@ async function run() {
         process.exit();
     }
     if (cmds[0] === 'build') {
-        // --- 构建命令：使用 esbuild 打包入口 .tsx 文件为自包含 bundle ---
-        // --- 只打包「直属于指定目录」的 .tsx，子目录内的组件文件不会被打包 ---
-        // --- 推荐目录结构：stc/view/app.tsx（入口）+ stc/view/pages/home.tsx（子组件）---
-        // --- 用法：node ./source/main build [-d www/myapp/stc/view] ---
+        // --- 构建命令：使用 esbuild 打包 *.page.tsx 文件为自包含 bundle ---
+        // --- 约定：文件名以 .page.tsx 结尾的为页面入口，会被打包；其余 .tsx 均视为组件，不参与打包 ---
+        // --- 与 Next.js 的 page.tsx 约定同理，开发者可自由组织目录结构，框架靠文件名区分入口与组件 ---
+        // --- 推荐目录结构：stc/view/home.page.tsx（入口）+ stc/view/components/header.tsx（组件）---
+        // --- 用法：node ./source/main build [-d www/myapp/stc] ---
         let targetDir = '';
         for (let i = 1; i < cmds.length; i++) {
             if ((cmds[i] === '-d' || cmds[i] === '--dir') && cmds[i + 1]) {
@@ -360,7 +363,7 @@ async function run() {
                 i++;
             }
         }
-        /** --- 扫描目录下直属的 .tsx 文件（非递归），子目录内文件不作为打包入口 --- */
+        /** --- 递归扫描目录，收集所有 *.page.tsx 文件作为打包入口 --- */
         const entryPoints = [];
         const scanDir = async (dir) => {
             const items = await lFs.readDir(dir);
@@ -368,13 +371,16 @@ async function run() {
                 if (item.name === '.' || item.name === '..') {
                     continue;
                 }
-                if (!item.isDirectory() && item.name.endsWith('.tsx')) {
+                if (item.isDirectory()) {
+                    await scanDir(`${dir}/${item.name}`);
+                }
+                else if (item.name.endsWith('.page.tsx')) {
                     entryPoints.push(`${dir}/${item.name}`);
                 }
             }
         };
         if (targetDir) {
-            // --- 指定了目录，只扫描该目录下的直属 .tsx ---
+            // --- 指定了目录：递归扫描该目录下所有 *.page.tsx ---
             const absTarget = targetDir.startsWith('/') || /^[A-Za-z]:/.test(targetDir)
                 ? targetDir
                 : kebab.ROOT_CWD + targetDir.replace(/^\//, '');
@@ -388,8 +394,7 @@ async function run() {
             }
         }
         else {
-            // --- 未指定目录：扫描 www/*/stc/ 及其直接子目录下的 .tsx ---
-            // --- 即扫描 stc/*.tsx 和 stc/*/*.tsx（如 stc/view/app.tsx），不再深入 ---
+            // --- 未指定目录：递归扫描所有站点的 www/*/stc/ ---
             const wwwItems = await lFs.readDir(kebab.WWW_CWD);
             for (const wwwItem of wwwItems) {
                 if (wwwItem.name === '.' || wwwItem.name === '..' || !wwwItem.isDirectory()) {
@@ -399,16 +404,7 @@ async function run() {
                 if (!await lFs.isDir(stcPath)) {
                     continue;
                 }
-                // --- 扫描 stc/ 直属文件 ---
                 await scanDir(stcPath);
-                // --- 扫描 stc/ 的直接子目录（如 view/），取其顶层 .tsx 作为入口 ---
-                const stcItems = await lFs.readDir(stcPath);
-                for (const stcItem of stcItems) {
-                    if (stcItem.name === '.' || stcItem.name === '..' || !stcItem.isDirectory()) {
-                        continue;
-                    }
-                    await scanDir(`${stcPath}/${stcItem.name}`);
-                }
             }
         }
         if (entryPoints.length === 0) {
@@ -418,17 +414,32 @@ async function run() {
         }
         lCore.display('KEBAB', 'BUILD', `Found ${entryPoints.length} file(s).`);
         const esbuild = await import('esbuild');
+        // --- 按 stc/ 根目录分组：同一站点内所有页面合并为一次 esbuild 构建 ---
+        // --- 不同站点（不同 stc/）相互隔离，同站点内跨子目录页面共享 chunk ---
+        // --- splitting: true 自动将任意共享 import（React/Header/utils 等）提取为独立 chunk ---
+        /**
+         * --- 查找路径中最后一段名为 stc 的祖先目录 ---
+         */
+        const getStcRoot = (filePath) => {
+            const parts = filePath.split('/');
+            const idx = parts.lastIndexOf('stc');
+            return idx >= 0 ? parts.slice(0, idx + 1).join('/') : parts.slice(0, -1).join('/');
+        };
+        const byStc = new Map();
         for (const entry of entryPoints) {
-            const outfile = entry.replace(/\.tsx$/, '.bundle.js');
-            lCore.display('KEBAB', 'BUILD', entry.replace(kebab.ROOT_CWD, ''), '→', outfile.replace(kebab.ROOT_CWD, ''));
-            try {
-                /** --- 组件文件名（不含扩展名），用于生成 stdin 入口的 import 语句 --- */
+            const stcRoot = getStcRoot(entry);
+            if (!byStc.has(stcRoot)) {
+                byStc.set(stcRoot, []);
+            }
+            byStc.get(stcRoot).push(entry);
+        }
+        for (const [stcRoot, entries] of byStc) {
+            // --- 为每个页面写入水合入口临时文件（实际文件，splitting 不支持 stdin 多入口）---
+            const tempFiles = [];
+            for (const entry of entries) {
                 const basename = entry.split('/').pop().replace(/\.tsx$/, '');
-                /** --- 组件所在目录，esbuild 以此为基准解析相对 import --- */
-                const resolveDir = entry.substring(0, entry.lastIndexOf('/'));
-                // --- stdin 入口：含水合逻辑，_routerBase 在 props 中时自动包裹 BrowserRouter ---
-                // --- React/react-dom/react-router-dom 全部打入 bundle，浏览器只加载一个 JS ---
-                const stdinContent = [
+                const entryDir = entry.substring(0, entry.lastIndexOf('/'));
+                const hydrateCode = [
                     `import{hydrateRoot}from'react-dom/client';`,
                     `import{createElement}from'react';`,
                     `import{BrowserRouter}from'react-router-dom';`,
@@ -443,31 +454,52 @@ async function run() {
                     `}`,
                     `}`,
                 ].join('');
+                const tempFile = `${entryDir}/${basename}.hydrate.tsx`;
+                await lFs.putContent(tempFile, hydrateCode);
+                tempFiles.push(tempFile);
+                lCore.display('KEBAB', 'BUILD', entry.replace(kebab.ROOT_CWD, ''), '→', entry.replace(kebab.ROOT_CWD, '').replace(/\.tsx$/, '.bundle.js'));
+            }
+            // --- JS 构建：整站一次构建，splitting 按实际共享情况自动提取 chunk ---
+            // --- outbase = outdir = stcRoot，入口保留子目录结构，chunk 落在 stcRoot 根 ---
+            try {
                 await esbuild.build({
-                    'stdin': {
-                        'contents': stdinContent,
-                        'resolveDir': resolveDir,
-                        'sourcefile': basename + '.hydrate.tsx',
-                        'loader': 'tsx',
-                    },
+                    'entryPoints': tempFiles,
                     'bundle': true,
-                    // --- 无 external：React 全部打入 bundle，生成自包含文件，浏览器只加载一个 JS ---
+                    'splitting': true,
                     'format': 'esm',
                     'jsx': 'automatic',
                     'jsxImportSource': 'react',
                     'platform': 'browser',
                     'target': 'es2022',
                     'minify': true,
-                    'outfile': outfile,
+                    'outbase': stcRoot,
+                    'outdir': stcRoot,
+                    'entryNames': '[dir]/[name]',
+                    'chunkNames': 'chunk-[hash]',
                 });
-                lCore.display('KEBAB', 'BUILD', 'JS', outfile.replace(kebab.ROOT_CWD, ''));
-                // --- 构建 Tailwind CSS：生成同名 .css 文件 ---
+                // --- 将 *.hydrate.js 重命名为 *.bundle.js ---
+                for (const tempFile of tempFiles) {
+                    const hydrateJs = tempFile.replace(/\.tsx$/, '.js');
+                    const bundleJs = hydrateJs.replace(/\.hydrate\.js$/, '.bundle.js');
+                    await lFs.rename(hydrateJs, bundleJs);
+                    lCore.display('KEBAB', 'BUILD', 'JS', bundleJs.replace(kebab.ROOT_CWD, ''));
+                }
+            }
+            catch (e) {
+                lCore.display('KEBAB', 'BUILD', 'JS FAILED', stcRoot.replace(kebab.ROOT_CWD, ''), e.message ?? '');
+            }
+            finally {
+                // --- 清理临时水合入口文件 ---
+                for (const tempFile of tempFiles) {
+                    await lFs.unlink(tempFile);
+                }
+            }
+            // --- CSS：每个入口单独构建 Tailwind ---
+            for (const entry of entries) {
                 const cssOut = entry.replace(/\.tsx$/, '.css');
-                /** --- 临时 CSS 输入文件，@source 扫描当前目录及子目录所有 tsx 文件 ---  */
                 const tmpCss = entry + '.__tw__.css';
                 await lFs.putContent(tmpCss, `@import "tailwindcss";\n@source "./**/*.tsx";\n`);
                 try {
-                    /** --- 直接用当前 Node.js 执行 CLI 的 JS 入口，跨平台无需 shell --- */
                     const twJs = fileURLToPath(new URL('../node_modules/@tailwindcss/cli/dist/index.mjs', import.meta.url));
                     await new Promise((resolve, reject) => {
                         const proc = childProcess.spawn(process.execPath, [twJs, '-i', tmpCss, '-o', cssOut, '--minify'], { 'shell': false });
@@ -491,9 +523,6 @@ async function run() {
                     await lFs.unlink(tmpCss);
                 }
             }
-            catch (e) {
-                lCore.display('KEBAB', 'BUILD', 'FAILED', entry.replace(kebab.ROOT_CWD, ''), e.message ?? '');
-            }
         }
         lCore.display('DONE');
         process.exit();

package/sys/ctr.d.ts

@@ -185,6 +185,14 @@ export declare class Ctr {
          */
         'staticPath'?: string;
     }): Promise<string>;
+    /**
+     * --- 递归扫描 JS 文件中的 import 语句，收集第三方 bare specifier ---
+     * @param filePath 当前要扫描的文件绝对路径
+     * @param scannedFiles 已扫描文件集（去重用）
+     * @param extraImports 收集到的第三方包名集合
+     * @param builtinImports 内置 import map，已有条目不重复添加
+     */
+    private _scanImports;
     /**
      * --- 设置校验错误返回值 ---
      * @param rtn 返回值数组

package/sys/ctr.js

@@ -249,8 +249,9 @@ export class Ctr {
      * @param opt 可选配置
      */
     async _loadReactPage(path, props = {}, opt = {}) {
+        // --- 约定：传入路径不含 .page 后缀，框架自动补全（对应 build 命令的 *.page.tsx 约定）---
         // --- 组件 JS 从 stc 目录读取，浏览器同样通过 staticPath（支持 CDN）下载 ---
-        const componentPath = this._config.const.rootPath + 'stc/' + path + '.js';
+        const componentPath = this._config.const.rootPath + 'stc/' + path + '.page.js';
         if (!await lFs.isFile(componentPath)) {
             return '';
         }
@@ -280,56 +281,67 @@ export class Ctr {
                 '_locale': this._locale,
                 '_localeData': localeData,
             };
+            // --- 框架自动注入的 HTML 片段，用户组件无需手动渲染 ---
+            let headInject = '';
+            let bodyInject = '';
             if (opt.hydrate !== false) {
                 const reactVer = opt.reactVer ?? '19';
                 const esm = 'https://esm.sh/';
                 // --- 检查是否有 npx kebab build 生成的自包含预构建包 ---
-                const bundlePath = this._config.const.rootPath + 'stc/' + path + '.bundle.js';
+                const bundlePath = this._config.const.rootPath + 'stc/' + path + '.page.bundle.js';
                 const hasBundle = await lFs.isFile(bundlePath);
                 if (opt.router === 'browser') {
-                    // --- BrowserRouter 模式：_routerBase 注入 props，bundle 读取此值决定是否包裹 BrowserRouter ---
+                    // --- BrowserRouter 模式：_routerBase 注入 props，供水合脚本读取 ---
                     const base = opt.routerBase ?? '';
                     const routerBase = this._config.const.urlBase + base.replace(/^\//, '');
                     fullProps['_routerBase'] = routerBase.replace(/\/$/, '');
                 }
+                // --- propsJson 在渲染前序列化，框架直接注入 HTML，组件无需手动渲染 ---
+                const propsJson = lText.stringifyJson(fullProps).replace(/<\/script>/gi, '<\\/script>');
+                let hydrateScript;
                 if (hasBundle) {
-                    // --- bundle 模式：bundle 自包含 React + 水合逻辑，无需 import map，一个 JS 文件搞定 ---
-                    const clientUrl = `${staticPath}${path}.bundle.js?v=${this._config.set.staticVer}`;
-                    fullProps['_hydrateScript'] = `import'${clientUrl}';`;
+                    // --- bundle 模式：bundle 自包含 React + 水合逻辑，无需 import map ---
+                    const clientUrl = `${staticPath}${path}.page.bundle.js?v=${this._config.set.staticVer}`;
+                    hydrateScript = `import'${clientUrl}';`;
                 }
                 else {
                     // --- 开发模式（tsc 编译 .js）：通过 esm.sh import map 解析 bare import ---
-                    const clientUrl = `${staticPath}${path}.js?v=${this._config.set.staticVer}`;
-                    fullProps['_importMapJson'] = lText.stringifyJson({
-                        'imports': {
-                            'react': `${esm}react@${reactVer}`,
-                            'react-dom': `${esm}react-dom@${reactVer}`,
-                            'react-dom/client': `${esm}react-dom@${reactVer}/client`,
-                            'react/jsx-runtime': `${esm}react@${reactVer}/jsx-runtime`,
-                            'react-router-dom': `${esm}react-router-dom@7?external=react,react-dom`,
-                        },
-                    });
-                    if (opt.router === 'browser') {
-                        fullProps['_hydrateScript'] =
-                            `import{hydrateRoot}from'react-dom/client';` +
-                                `import{createElement}from'react';` +
-                                `import{BrowserRouter}from'react-router-dom';` +
-                                `import App from'${clientUrl}';` +
-                                `const p=JSON.parse(document.getElementById('__kebab_props__').textContent);` +
-                                `hydrateRoot(document,createElement(BrowserRouter,{basename:p._routerBase},createElement(App,p)));`;
-                    }
-                    else {
-                        fullProps['_hydrateScript'] =
-                            `import{hydrateRoot}from'react-dom/client';` +
-                                `import{createElement}from'react';` +
-                                `import App from'${clientUrl}';` +
-                                `const p=JSON.parse(document.getElementById('__kebab_props__').textContent);` +
-                                `hydrateRoot(document,createElement(App,p));`;
+                    const clientUrl = `${staticPath}${path}.page.js?v=${this._config.set.staticVer}`;
+                    // --- 内置 import map 条目（React 生态核心包）---
+                    const builtinImports = {
+                        'react': `${esm}react@${reactVer}`,
+                        'react-dom': `${esm}react-dom@${reactVer}`,
+                        'react-dom/client': `${esm}react-dom@${reactVer}/client`,
+                        'react/jsx-runtime': `${esm}react@${reactVer}/jsx-runtime`,
+                        'react-router-dom': `${esm}react-router-dom@7?external=react,react-dom`,
+                    };
+                    // --- 自动扫描入口 JS 及其相对引用，收集所有第三方 bare specifier ---
+                    const scannedFiles = new Set();
+                    const extraImports = new Set();
+                    await this._scanImports(componentPath, scannedFiles, extraImports, builtinImports);
+                    // --- 第三方包统一通过 esm.sh 解析，external react/react-dom 避免重复加载 ---
+                    for (const pkg of extraImports) {
+                        builtinImports[pkg] = `${esm}${pkg}?external=react,react-dom`;
                     }
+                    // --- import map 注入到 </head> 前 ---
+                    headInject = `<script type="importmap">${lText.stringifyJson({ 'imports': builtinImports })}</script>`;
+                    // --- BrowserRouter 模式多一段 Router 导入与包裹层 ---
+                    const routerImport = opt.router === 'browser' ? `import{BrowserRouter}from'react-router-dom';` : '';
+                    const routerCreate = opt.router === 'browser'
+                        ? `createElement(BrowserRouter,{basename:p._routerBase},createElement(App,p))`
+                        : `createElement(App,p)`;
+                    hydrateScript =
+                        `import{hydrateRoot}from'react-dom/client';` +
+                            `import{createElement}from'react';` +
+                            routerImport +
+                            `import App from'${clientUrl}';` +
+                            `const p=JSON.parse(document.getElementById('__kebab_props__').textContent);` +
+                            `hydrateRoot(document,${routerCreate});`;
                 }
-                // --- _propsJson 序列化当前 fullProps（不含 _propsJson 本身，避免循环引用）---
-                // --- 客户端水合时读取此 JSON，_propsJson 缺失，suppressHydrationWarning 处理差异 ---
-                fullProps['_propsJson'] = lText.stringifyJson(fullProps).replace(/<\/script>/gi, '<\\/script>');
+                // --- props JSON + 水合脚本注入到 </body> 前 ---
+                bodyInject =
+                    `<script id="__kebab_props__" type="application/json">${propsJson}</script>` +
+                        `<script type="module">${hydrateScript}</script>`;
             }
             // --- BrowserRouter 模式：服务端用 StaticRouter 渲染，与客户端的 BrowserRouter 等价 ---
             // --- component 来自动态 import，TypeScript 无法精确推断，需要明确限定 element 类型 ---
@@ -343,13 +355,51 @@ export class Ctr {
                     'basename': fullProps['_routerBase'],
                 }, react.createElement(component, fullProps));
             }
-            return '<!DOCTYPE html>' + reactDomServer.renderToString(element);
+            // --- 框架将 import map 注入 </head> 前，props JSON + 水合脚本注入 </body> 前 ---
+            let html = '<!DOCTYPE html>' + reactDomServer.renderToString(element);
+            if (opt.hydrate !== false) {
+                html = html.replace('</head>', headInject + '</head>');
+                html = html.replace('</body>', bodyInject + '</body>');
+            }
+            return html;
         }
         catch (e) {
             lCore.debug(`[CTR][_loadReactPage] ${e.message ?? ''}`);
             return '';
         }
     }
+    /**
+     * --- 递归扫描 JS 文件中的 import 语句，收集第三方 bare specifier ---
+     * @param filePath 当前要扫描的文件绝对路径
+     * @param scannedFiles 已扫描文件集（去重用）
+     * @param extraImports 收集到的第三方包名集合
+     * @param builtinImports 内置 import map，已有条目不重复添加
+     */
+    async _scanImports(filePath, scannedFiles, extraImports, builtinImports) {
+        if (scannedFiles.has(filePath)) {
+            return;
+        }
+        scannedFiles.add(filePath);
+        const src = await lFs.getContent(filePath, 'utf8');
+        if (!src) {
+            return;
+        }
+        const re = /\bfrom\s*['"]([^'"]+)['"]/g;
+        let m;
+        while ((m = re.exec(src)) !== null) {
+            const spec = m[1];
+            if (spec.startsWith('./') || spec.startsWith('../')) {
+                // --- 相对引用：解析为绝对路径后递归扫描 ---
+                const dir = filePath.substring(0, filePath.lastIndexOf('/') + 1);
+                const resolved = new URL(spec, 'file://' + dir).pathname;
+                await this._scanImports(resolved, scannedFiles, extraImports, builtinImports);
+            }
+            else if (!spec.startsWith('/') && !spec.startsWith('http') && !(spec in builtinImports)) {
+                // --- 第三方 bare specifier：加入 import map ---
+                extraImports.add(spec);
+            }
+        }
+    }
     /**
      * --- 设置校验错误返回值 ---
      * @param rtn 返回值数组

package/sys/monitor.js

@@ -411,7 +411,7 @@ function logSpike(alerts, cpuPercent, cpuOs, eloopLag, blocked = false) {
  */
 function getOsCpuPercent() {
     const cpus = os.cpus();
-    if (!lastOsCpus || lastOsCpus.length !== cpus.length) {
+    if (lastOsCpus?.length !== cpus.length) {
         lastOsCpus = cpus;
         return 0;
     }

package/www/example/ctr/test.d.ts

@@ -127,6 +127,10 @@ export default class extends sCtr.Ctr {
      * --- Rate Limit 限流测试 ---
      */
     ratelimit(): Promise<string>;
+    /**
+     * --- React 最简页面示例：展示一个 React 页面最少需要写哪些内容 ---
+     */
+    reactHelloPage(): Promise<string>;
     /**
      * --- React 全页模式测试：组件自主渲染完整 HTML 文档 + 客户端水合，无需 EJS ---
      */

package/www/example/ctr/test.js

@@ -98,6 +98,7 @@ export default class extends sCtr.Ctr {
             `<br><a href="${this._config.const.urlBase}test/react-page">View "test/react-page" (SSR)</a>`,
             `<br><a href="${this._config.const.urlBase}test/react-router-page">View "test/react-router-page" (SSR + BrowserRouter)</a>`,
             `<br><a href="${this._config.const.urlBase}test/react-router-page-data?path=/user">View "test/react-router-page-data?path=/user" (Data API)</a>`,
+            `<br><a href="${this._config.const.urlBase}test/react-hello-page">View "test/react-hello-page" (React Hello Page)</a>`,
             '<br><br><b>Return json:</b>',
             `<br><br><a href="${this._config.const.urlBase}test/json?type=1">View "test/json?type=1"</a>`,
             `<br><a href="${this._config.const.urlBase}test/json?type=2">View "test/json?type=2"</a>`,
@@ -161,7 +162,7 @@ export default class extends sCtr.Ctr {
             `<br><br><a href="${this._config.const.urlBase}test/crypto">View "test/crypto"</a>`,
             '<br><br><b>Db:</b>',
             `<br><br><a href="${this._config.const.urlBase}test/db">View "test/db"</a> <a href="${this._config.const.urlBase}test/db?s=pgsql">pgsql</a>`,
-            `<br><br><a href="${this._config.const.urlBase}test/db-read">View "test/db-read"</a>`,
+            `<br><a href="${this._config.const.urlBase}test/db-read">View "test/db-read"</a>`,
             `<br><br><b>Vector:</b>`,
             `<br><br><a href="${this._config.const.urlBase}test/vector">View "test/vector"</a>`,
             '<br><br><b>Kv:</b>',
@@ -3519,7 +3520,9 @@ rtn.push(reader.readBCDString());</pre>${JSON.stringify(rtn)}`);
                 // --- 文生图 ---
                 let model = 'z-image-turbo';
                 let size = [1280, 720];
-                if (ai.service !== lAi.ESERVICE.ALICN && ai.service !== lAi.ESERVICE.ALIAS) {
+                if (ai.service !== lAi.ESERVICE.ALICN &&
+                    ai.service !== lAi.ESERVICE.ALIAS &&
+                    ai.service !== lAi.ESERVICE.ALINE) {
                     switch (ai.service) {
                         case lAi.ESERVICE.AZURE:
                         case lAi.ESERVICE.AZURE2:
@@ -3562,7 +3565,9 @@ rtn.push(reader.readBCDString());</pre>${JSON.stringify(rtn)}`);
                 let model = 'wan2.6-image';
                 let size = [1280, 720];
                 const prompt = '用图1的绘画风格重绘图2的场景，桌上增加一盘番茄炒蛋';
-                if (ai.service !== lAi.ESERVICE.ALICN && ai.service !== lAi.ESERVICE.ALIAS) {
+                if (ai.service !== lAi.ESERVICE.ALICN &&
+                    ai.service !== lAi.ESERVICE.ALIAS &&
+                    ai.service !== lAi.ESERVICE.ALINE) {
                     switch (ai.service) {
                         default: {
                             // --- 火山引擎 ---
@@ -3903,12 +3908,20 @@ send.addEventListener('click', async () => {
         echo.push(`Result: ${JSON.stringify(rtn2)}`);
         return echo.join('') + '<br><br>' + this._getEnd();
     }
+    /**
+     * --- React 最简页面示例：展示一个 React 页面最少需要写哪些内容 ---
+     */
+    async reactHelloPage() {
+        return this._loadReactPage('view/hello', {
+            'greeting': 'Hello, Kebab React!',
+        });
+    }
     /**
      * --- React 全页模式测试：组件自主渲染完整 HTML 文档 + 客户端水合，无需 EJS ---
      */
     async reactPage() {
         // --- Ctr 方法负责数据准备（可以查数据库、调接口等），组件不包含任何服务端专属代码 ---
-        return this._loadReactPage('view/react-page', {
+        return this._loadReactPage('view/react', {
             'title': 'Kebab React Full Page',
             'serverTime': lTime.format(this, 'Y-m-d H:i:s'),
             'node': process.version,
@@ -3952,7 +3965,7 @@ send.addEventListener('click', async () => {
             ? (reqUrl.substring(basePrefix.length) || '/')
             : '/';
         const routeData = this._getRouteData(routePath);
-        return this._loadReactPage('view/react-router-page', {
+        return this._loadReactPage('view/react-router', {
             'title': 'Kebab React Router',
             'serverTime': lTime.format(this, 'Y-m-d H:i:s'),
             'node': process.version,