@morningfast/create-ui 0.0.7 → 0.0.8

package/README.md

@@ -157,7 +157,7 @@ pnpm dev
 - `main-app` 的 nginx 静态资源目录会按项目名替换。
 - `main-app` 可选替换 nginx 的 `proxy_pass`。
 - 默认模板是 `sub-app`，单独主应用需要显式传 `--template main-app`。
-- `--no-demo` 会删除 `src/pages/demo` 和对应示例路由，`main-app` / `sub-app` 都适用。
+- `--no-demo` 会删除 `src/pages/demo`、对应示例路由和示例子应用配置，`main-app` / `sub-app` 都适用。
 - `--update` 只能在 workspace 根目录执行，支持 `all`、`main`、`sub-apps` 三种更新目标。
 
 ## 不处理的内容

package/dist/index.js

@@ -808,8 +808,11 @@ async function customizeAppTemplate(appRoot, variables) {
   }
   if (!variables.keepDemo) {
     await rm(path.join(appRoot, "src", "pages", "demo"), { recursive: true, force: true });
-    await removeDemoRoute(path.join(appRoot, "src", "router", "business-routes.ts"));
+    await rm(path.join(appRoot, "src", "micro-apps", "demo-apps.ts"), { force: true });
+    await removeDemoRoute(path.join(appRoot, "src", "router", "mock-routes.ts"));
+    await removeSubAppDemoMockRoute(path.join(appRoot, "src", "router", "mock-routes.ts"));
     await removeSubAppDemoRoute(path.join(appRoot, "src", "router", "index.ts"));
+    await removeMainAppDemoSetup(path.join(appRoot, "src", "setup.ts"));
   }
 }
 function getTemplatePackageNameForAppRoot(appRoot, variables) {
@@ -824,14 +827,17 @@ async function updateWorkspaceScripts(targetDir, variables) {
   packageJson.scripts = {
     ...packageJson.scripts ?? {},
     "dev:main": `pnpm --filter ${variables.mainAppDir} dev`,
-    "dev:sub": `pnpm --filter ${variables.subAppDir} dev`,
-    [`dev:${variables.subAppDir}`]: `pnpm --filter ${variables.subAppDir} dev`,
+    "dev:sub": `node scripts/run-sub-app.mjs dev ${variables.subAppDir}`,
+    "dev:sub-app": `node scripts/run-sub-app.mjs dev ${variables.subAppDir}`,
+    [`dev:${variables.subAppDir}`]: `node scripts/run-sub-app.mjs dev ${variables.subAppDir}`,
     "check:main": `pnpm --filter ${variables.mainAppDir} check`,
-    "check:sub": `pnpm --filter ${variables.subAppDir} check`,
-    [`check:${variables.subAppDir}`]: `pnpm --filter ${variables.subAppDir} check`,
+    "check:sub": `node scripts/run-sub-app.mjs check ${variables.subAppDir}`,
+    "check:sub-app": `node scripts/run-sub-app.mjs check ${variables.subAppDir}`,
+    [`check:${variables.subAppDir}`]: `node scripts/run-sub-app.mjs check ${variables.subAppDir}`,
     "build:main": `pnpm --filter ${variables.mainAppDir} build`,
-    "build:sub": `pnpm --filter ${variables.subAppDir} build`,
-    [`build:${variables.subAppDir}`]: `pnpm --filter ${variables.subAppDir} build`,
+    "build:sub": `node scripts/run-sub-app.mjs build ${variables.subAppDir}`,
+    "build:sub-app": `node scripts/run-sub-app.mjs build ${variables.subAppDir}`,
+    [`build:${variables.subAppDir}`]: `node scripts/run-sub-app.mjs build ${variables.subAppDir}`,
     "build:all": "pnpm build:main && pnpm build:sub"
   };
   await writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}
@@ -876,16 +882,56 @@ async function removeDemoRoute(filePath) {
     return;
   }
   const source = await readFile(filePath, "utf8");
-  const demoStart = source.indexOf("  {\n    path: 'demo',");
-  const demoEnd = source.indexOf("\n];", demoStart);
-  if (demoStart < 0 || demoEnd < 0 || demoEnd <= demoStart) {
+  let updated = removeRouteObject(source, "path: 'demo'");
+  updated = removeRouteObject(updated, "path: 'micro'");
+  updated = updated.replace(/\n\s+'demo-user-management': \(\) => import\('@\/pages\/demo\/user-management\/index\.vue'\),/g, "").replace(/\n\s+'demo-mapping-config': \(\) => import\('@\/pages\/demo\/mapping-config\/index\.vue'\),/g, "").replace(/\n\s+'demo-table-page': \(\) => import\('@\/pages\/demo\/table-page-demo\/index\.vue'\),/g, "").replace(/\n\s+'demo-upload': \(\) => import\('@\/pages\/demo\/upload-demo\/index\.vue'\),/g, "");
+  if (updated !== source) {
+    await writeFile(filePath, updated, "utf8");
+  }
+}
+async function removeMainAppDemoSetup(filePath) {
+  if (!existsSync(filePath)) {
     return;
   }
-  const updated = `${source.slice(0, demoStart).replace(/,\\s*$/, "")}${source.slice(demoEnd)}`;
+  const source = await readFile(filePath, "utf8");
+  const updated = source.replace(/\nimport \{ setDefaultAppConfigs \} from '@morningfast\/platform\/main\/micro-apps\/config';\n/, "\n").replace(/\nimport \{ demoAppConfigs \} from '\.\/micro-apps\/demo-apps';\n/, "\n").replace(/\n\s+setDefaultAppConfigs\(demoAppConfigs\);\n/, "\n").replace(/\n{3,}/g, "\n\n").replace(/\{\n\n\s+\/\//g, "{\n  //");
   if (updated !== source) {
     await writeFile(filePath, updated, "utf8");
   }
 }
+function removeRouteObject(source, marker) {
+  const markerIndex = source.indexOf(marker);
+  if (markerIndex < 0) {
+    return source;
+  }
+  const objectStart = source.lastIndexOf("  {", markerIndex);
+  if (objectStart < 0) {
+    return source;
+  }
+  let index = objectStart;
+  let depth = 0;
+  let objectEnd = -1;
+  for (; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        objectEnd = index + 1;
+        break;
+      }
+    }
+  }
+  if (objectEnd < 0) {
+    return source;
+  }
+  const trailingCommaEnd = source.slice(objectEnd).match(/^,\n?/)?.[0].length ?? 0;
+  const leadingCommaStart = trailingCommaEnd ? objectStart : source.lastIndexOf(",", objectStart);
+  const removeStart = leadingCommaStart >= 0 && source.slice(leadingCommaStart, objectStart).trim() === "" ? leadingCommaStart : objectStart;
+  const removeEnd = objectEnd + trailingCommaEnd;
+  return source.slice(0, removeStart) + source.slice(removeEnd);
+}
 async function removeSubAppDemoRoute(filePath) {
   if (!existsSync(filePath)) {
     return;
@@ -902,6 +948,17 @@ async function removeSubAppDemoRoute(filePath) {
     await writeFile(filePath, updated, "utf8");
   }
 }
+async function removeSubAppDemoMockRoute(filePath) {
+  if (!existsSync(filePath)) {
+    return;
+  }
+  const source = await readFile(filePath, "utf8");
+  let updated = removeRouteObject(source, "path: '/demo/orders'");
+  updated = updated.replace(/\n\s+'demo-orders': \(\) => import\('@\/pages\/demo\/orders\/index\.vue'\),/g, "");
+  if (updated !== source) {
+    await writeFile(filePath, updated, "utf8");
+  }
+}
 async function replaceText(filePath, searchValue, replaceValue) {
   if (!existsSync(filePath)) {
     return;

package/dist/templates/main-app/README.md

@@ -45,7 +45,7 @@ pnpm format
 
 ## 本地联调主子应用
 
-主应用已预留 `qiankun` 微前端入口，默认有一个本地测试子应用配置：
+主应用已预留 `qiankun` 微前端入口。保留 demo 时，模板会带一个本地测试子应用配置：
 
 ```txt
 http://localhost:8082
@@ -61,7 +61,9 @@ pnpm --filter __MORNINGFAST_MAIN_APP_DIR__ dev
 pnpm --filter __MORNINGFAST_SUB_APP_DIR__ dev
 ```
 
-然后访问主应用里的“微前端 / 子应用示例”。
+保留 demo 时，然后访问主应用里的“微前端 / 订单管理”。
+
+如果生成项目时使用了 `--no-demo`，不会带默认子应用配置和 demo 菜单，需要在业务路由里添加自己的微前端菜单，再在“系统 / 应用配置”页面维护子应用入口。
 
 如果子应用地址不同，在主应用“系统 / 应用配置”页面维护子应用：
 
@@ -80,6 +82,35 @@ pnpm --filter __MORNINGFAST_SUB_APP_DIR__ dev
 4. 保存后刷新主应用。
 5. 通过主应用菜单进入该子应用路径。
 
+子应用菜单路由复用同一个平台承载页，不需要为每个子应用新增 `componentKey` 或组件映射。完全新增一个子应用菜单时，在 `src/router/mock-routes.ts` 里写 `microApp: true` 即可：
+
+```ts
+{
+  path: 'fms',
+  name: 'fms',
+  title: 'FMS 系统',
+  icon: 'Connection',
+  redirect: '/fms/orders',
+  children: [
+    {
+      path: 'orders',
+      name: 'fms-orders',
+      title: '订单管理',
+      microApp: true,
+    },
+    {
+      path: ':pathMatch(.*)*',
+      name: 'fms-fallback',
+      title: 'FMS 页面',
+      hidden: true,
+      microApp: true,
+    },
+  ],
+}
+```
+
+上面菜单对应的应用配置 `路由前缀` 应填写 `/fms`，入口地址填写该子应用的 dev server 或部署地址。隐藏的 `:pathMatch(.*)*` 用来兜住子应用深层路径刷新或跳转。
+
 配置字段对应 qiankun 注册字段：
 
 - `应用名称` 会成为 qiankun `name` 和主应用展示名。

package/dist/templates/main-app/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@morningfast/platform": "^0.0.7",
+    "@morningfast/platform": "^0.0.8",
     "axios": "^1.16.0",
     "element-plus": "^2.14.0",
     "localforage": "^1.10.0",

package/dist/templates/main-app/src/micro-apps/demo-apps.ts

@@ -0,0 +1,12 @@
+import type { AppConfigItem } from '@morningfast/platform/main/micro-apps/config';
+
+export const demoAppConfigs: AppConfigItem[] = [
+  {
+    id: 'sub-orders',
+    name: '订单子应用',
+    type: 'sub',
+    description: '独立业务子应用，先在本地配置里测试子应用结构和菜单入口。',
+    basePath: '/micro/sub-app',
+    entry: 'http://localhost:8082',
+  },
+];

package/dist/templates/main-app/src/router/mock-routes.ts

@@ -1,4 +1,5 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { MicroAppView } from '@morningfast/platform/main';
 
 export interface MockRouteItem {
   path: string;
@@ -9,6 +10,7 @@ export interface MockRouteItem {
   hidden?: boolean;
   redirect?: string;
   componentKey?: string;
+  microApp?: boolean;
   children?: MockRouteItem[];
 }
 
@@ -63,6 +65,34 @@ export const mockRouteItems: MockRouteItem[] = [
       },
     ],
   },
+  {
+    path: 'micro',
+    name: 'micro',
+    title: '微前端',
+    icon: 'Connection',
+    redirect: '/micro/sub-app/demo/orders',
+    children: [
+      {
+        path: 'sub-app/demo/orders',
+        name: 'micro-sub-app-demo-orders',
+        title: '订单管理',
+        microApp: true,
+      },
+      {
+        path: ':pathMatch(.*)*',
+        name: 'micro-sub-app-fallback',
+        title: '子应用页面',
+        hidden: true,
+        microApp: true,
+      },
+    ],
+  },
+      {
+        path: 'micro2/sub-app-2/demo/orders',
+        name: 'micro2-sub-app2-demo-orders',
+        title: '订单管理',
+        microApp: true,
+      },
 ];
 
 const componentMap: Record<string, RouteRecordRaw['component']> = {
@@ -97,6 +127,10 @@ function createRouteFromMock(item: MockRouteItem): RouteRecordRaw {
     route.component = componentMap[item.componentKey];
   }
 
+  if (item.microApp) {
+    route.component = MicroAppView;
+  }
+
   if (item.children?.length) {
     route.children = createRoutesFromMock(item.children);
   }

package/dist/templates/main-app/src/setup.ts

@@ -1,6 +1,11 @@
 import type { MountMorningfastAppContext } from '@morningfast/platform/main';
+import { setDefaultAppConfigs } from '@morningfast/platform/main/micro-apps/config';
+
+import { demoAppConfigs } from './micro-apps/demo-apps';
 
 export async function setupBusinessApp({ app, router, pinia, http }: MountMorningfastAppContext) {
+  setDefaultAppConfigs(demoAppConfigs);
+
   // 业务插件、全局组件、指令、监控 SDK 等启动扩展写在这里。
   void app;
   void router;

package/dist/templates/sub-app/README.md

@@ -39,7 +39,7 @@ VITE_QIANKUN_DEV_MODE=true pnpm dev
 - 主应用默认挂载路径：`/micro/__MORNINGFAST_SUB_APP_DIR__`。
 - 主应用应用配置里的 `入口地址` 要指向子应用访问地址，例如 `http://localhost:8082`。
 - 主应用应用配置里的 `路由前缀` 要和子应用挂载路径一致，例如 `/micro/__MORNINGFAST_SUB_APP_DIR__`。
-- 子应用默认保留一个基础 `home` 页面，业务示例放在 `src/pages/demo/orders`，对应路由是 `/demo/orders`。
+- 子应用默认保留一个基础 `home` 页面。保留 demo 时，业务示例放在 `src/pages/demo/orders`，对应路由是 `/demo/orders`。
 - 子应用独立运行时，`html`、`body`、`#sub-app` 必须形成 `height: 100%; min-height: 0;` 的闭合高度链，否则
   `MpTablePage` / `MpMainContainerDefault` / `MpTable` 的固定高度表格无法计算内容高度。
 公共组件统一从 `morningfast-plus/components` 引入：
@@ -226,7 +226,7 @@ window.dispatchEvent(
 
 - 基础页面放 `src/pages/<module>/index.vue`。
 - 演示页面放 `src/pages/demo/<module>/index.vue`。
-- 当前订单示例是 `src/pages/demo/orders/index.vue`。
+- 保留 demo 时，当前订单示例是 `src/pages/demo/orders/index.vue`。
 
 ## 后续建设方向
 

package/dist/templates/sub-app/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@morningfast/platform": "^0.0.7",
+    "@morningfast/platform": "^0.0.8",
     "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "^6.0.6",
     "element-plus": "^2.14.0",

package/dist/templates/sub-app/src/pages/error/Forbidden.vue

@@ -15,7 +15,7 @@
           <span class="result-page__eyebrow">ACCESS CONTROL</span>
           <h1>当前子应用页面暂未开放</h1>
           <p class="result-page__desc">
-            登录状态正常，但当前角色还没有这个子应用页面或操作权限。请返回工作台，或联系管理员核对权限配置。
+            登录状态正常，但当前角色还没有这个子应用页面或操作权限。请返回上一页，或联系管理员核对权限配置。
           </p>
           <div class="result-page__meta">
             <span>状态码 403</span>
@@ -23,8 +23,7 @@
           </div>
 
           <div class="result-page__actions">
-            <el-button @click="router.back()">返回上一页</el-button>
-            <el-button type="primary" @click="router.push('/home')">返回工作台</el-button>
+            <el-button type="primary" @click="router.back()">返回上一页</el-button>
           </div>
         </div>
       </div>

package/dist/templates/sub-app/src/pages/error/NotFound.vue

@@ -23,8 +23,7 @@
           </div>
 
           <div class="result-page__actions">
-            <el-button @click="router.back()">返回上一页</el-button>
-            <el-button type="primary" @click="router.push('/home')">返回工作台</el-button>
+            <el-button type="primary" @click="router.back()">返回上一页</el-button>
           </div>
         </div>
       </div>

package/dist/templates/workspace/.morningfast-ui.json

@@ -5,6 +5,7 @@
     ".gitignore",
     "docs",
     "README.md",
+    "scripts",
     "pnpm-workspace.yaml"
   ],
   "preservedRoots": [

package/dist/templates/workspace/README.md

@@ -34,6 +34,12 @@ pnpm dev:main
 pnpm dev:sub
 ```
 
+默认会启动生成时的第一个子应用。多个子应用时，可以把子应用目录名或 package name 作为参数传进去：
+
+```sh
+pnpm dev:sub order-app
+```
+
 主子应用本地联调时，需要开两个终端同时运行：
 
 ```sh
@@ -45,9 +51,11 @@ pnpm dev:sub
 ```
 
 默认主应用使用 Vite 默认端口，通常是 `http://localhost:8081`。
-默认子应用端口是 `http://localhost:8082`，主应用内置的子应用入口也指向这个地址。
+默认子应用端口是 `http://localhost:8082`。保留 demo 时，主应用示例子应用入口也指向这个地址。
 
-启动后先访问主应用地址，再从主应用菜单进入“微前端 / 子应用示例”。如果子应用端口或部署地址不同，在主应用“系统 / 应用配置”里维护子应用入口地址。
+保留 demo 时，启动后先访问主应用地址，再从主应用菜单进入“微前端 / 订单管理”。如果子应用端口或部署地址不同，在主应用“系统 / 应用配置”里维护子应用入口地址。
+
+如果生成项目时使用了 `--no-demo`，不会带默认子应用配置和 demo 菜单，需要在业务路由里添加自己的微前端菜单。
 
 ## 检查和构建
 
@@ -63,6 +71,12 @@ pnpm check:main
 pnpm check:sub
 ```
 
+检查指定子应用：
+
+```sh
+pnpm check:sub order-app
+```
+
 构建主应用：
 
 ```sh
@@ -75,6 +89,12 @@ pnpm build:main
 pnpm build:sub
 ```
 
+构建指定子应用：
+
+```sh
+pnpm build:sub order-app
+```
+
 构建全部应用：
 
 ```sh
@@ -84,7 +104,7 @@ pnpm build:all
 `build:*` 会先执行 `check:*`，校验通过后再使用 `vite build --mode pro` 做正式环境构建。
 
 `apps/main-app` 是微前端主应用，`apps/sub-app` 是默认子应用。后续新增业务子应用时，建议继续放在 `apps/` 下。
-多个子应用不要共用 `dev:sub`，使用具体应用名脚本，例如 `dev:order-app`、`build:order-app`。
+主应用不需要复制子应用启动命令，只需要在“系统 / 应用配置”维护对应子应用的路由前缀和入口地址。
 
 初始化时可以自定义应用目录名：
 

package/dist/templates/workspace/package.json

@@ -5,14 +5,14 @@
   "type": "module",
   "scripts": {
     "dev:main": "pnpm --filter main-app dev",
-    "dev:sub": "pnpm --filter sub-app dev",
-    "dev:sub-app": "pnpm --filter sub-app dev",
+    "dev:sub": "node scripts/run-sub-app.mjs dev sub-app",
+    "dev:sub-app": "node scripts/run-sub-app.mjs dev sub-app",
     "check:main": "pnpm --filter main-app check",
-    "check:sub": "pnpm --filter sub-app check",
-    "check:sub-app": "pnpm --filter sub-app check",
+    "check:sub": "node scripts/run-sub-app.mjs check sub-app",
+    "check:sub-app": "node scripts/run-sub-app.mjs check sub-app",
     "build:main": "pnpm --filter main-app build",
-    "build:sub": "pnpm --filter sub-app build",
-    "build:sub-app": "pnpm --filter sub-app build",
+    "build:sub": "node scripts/run-sub-app.mjs build sub-app",
+    "build:sub-app": "node scripts/run-sub-app.mjs build sub-app",
     "build:all": "pnpm build:main && pnpm build:sub"
   },
   "engines": {

package/dist/templates/workspace/scripts/run-sub-app.mjs

@@ -0,0 +1,23 @@
+import { spawn } from 'node:child_process';
+
+const [script, defaultApp, appArg] = process.argv.slice(2);
+const app = appArg || defaultApp;
+
+if (!script || !app) {
+  console.error('用法：node scripts/run-sub-app.mjs <dev|check|build> <默认子应用> [子应用目录或包名]');
+  process.exit(1);
+}
+
+const child = spawn('pnpm', ['--filter', app, script], {
+  stdio: 'inherit',
+  shell: process.platform === 'win32',
+});
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal);
+    return;
+  }
+
+  process.exit(code ?? 1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morningfast/create-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Morningfast UI internal system scaffold CLI.",
   "bin": {
     "create-morningfast-ui": "dist/index.js"