@morningfast/create-ui 0.0.6 → 0.0.7

package/README.md

@@ -26,7 +26,7 @@ packages/create-ui/dist/templates/workspace
 可以在任意希望放置新项目的目录执行：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js
+pnpm dlx @morningfast/create-ui
 ```
 
 脚手架会依次询问：
@@ -46,43 +46,43 @@ node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js
 生成默认子应用：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-sub
+pnpm dlx @morningfast/create-ui my-sub
 ```
 
 生成主应用：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-main --template main-app
+pnpm dlx @morningfast/create-ui my-main --template main-app
 ```
 
 生成主应用并移除 demo：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-main --template main-app --no-demo
+pnpm dlx @morningfast/create-ui my-main --template main-app --no-demo
 ```
 
 生成子应用：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-sub --template sub-app
+pnpm dlx @morningfast/create-ui my-sub --template sub-app
 ```
 
 生成业务 monorepo：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-platform --template workspace
+pnpm dlx @morningfast/create-ui my-platform --template workspace
 ```
 
 在已生成项目根目录更新：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js --update
+pnpm dlx @morningfast/create-ui --update
 ```
 
 也可以在项目外指定 workspace 根目录更新：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-platform --update
+pnpm dlx @morningfast/create-ui my-platform --update
 ```
 
 `--update` 必须在 workspace 根目录执行，或显式传入 workspace 根目录。它会读取根目录 `.morningfast-ui.json`，
@@ -91,19 +91,19 @@ node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js m
 默认更新整个 monorepo：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js --update
+pnpm dlx @morningfast/create-ui --update
 ```
 
 只更新主应用：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js --update --update-target main
+pnpm dlx @morningfast/create-ui --update --update-target main
 ```
 
 只更新所有子应用：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js --update --update-target sub-apps
+pnpm dlx @morningfast/create-ui --update --update-target sub-apps
 ```
 
 更新只覆盖 `.morningfast-ui.json` 里声明的 `managedRoots`。业务页面、业务接口模块和业务路由默认不覆盖；
@@ -139,7 +139,7 @@ hash 是按文件完整内容计算的，空格、换行和 CRLF/LF 变化都会
 指定系统初始名：
 
 ```sh
-node /Users/chenjie/Desktop/code/BFI-frontend/packages/create-ui/dist/index.js my-main --system-name "FMS 管理系统"
+pnpm dlx @morningfast/create-ui my-main --system-name "FMS 管理系统"
 ```
 
 生成完成后进入新项目：

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

@@ -48,7 +48,7 @@ pnpm format
 主应用已预留 `qiankun` 微前端入口，默认有一个本地测试子应用配置：
 
 ```txt
-http://localhost:5174
+http://localhost:8082
 ```
 
 本地联调时分别启动主应用和子应用：
@@ -67,14 +67,14 @@ pnpm --filter __MORNINGFAST_SUB_APP_DIR__ dev
 
 - `应用名称`：展示名。
 - `路由前缀`：qiankun `activeRule`，例如 `/micro/__MORNINGFAST_SUB_APP_DIR__`。
-- `入口地址`：qiankun `entry`，例如 `http://localhost:5174`。每个子应用单独维护自己的入口地址。
+- `入口地址`：qiankun `entry`，例如 `http://localhost:8082`。每个子应用单独维护自己的入口地址。
 - `应用说明`：仅用于配置页展示。
 
 应用配置当前先存在浏览器 `localStorage`，key 是 `system:apps`。保存后刷新主应用，qiankun 会重新读取本地配置并注册子应用。
 
 ## 配置一个子应用
 
-1. 启动子应用，确认能直接打开它的本地地址，例如 `http://localhost:5174`。
+1. 启动子应用，确认能直接打开它的本地地址，例如 `http://localhost:8082`。
 2. 打开主应用“系统 / 应用配置”。
 3. 点击新增应用，填写应用名称、路由前缀、入口地址和应用说明。
 4. 保存后刷新主应用。
@@ -97,7 +97,6 @@ pnpm --filter __MORNINGFAST_SUB_APP_DIR__ dev
 {
   basePath,
   app,
-  auth,
   runtime,
   theme,
 }
@@ -107,18 +106,17 @@ pnpm --filter __MORNINGFAST_SUB_APP_DIR__ dev
 
 - `basePath`：子应用路由基座，来自子应用配置的路由前缀。
 - `app`：当前子应用信息，包含 `id`、`name`、`title`、`entry`、`activeRule`。
-- `auth`：主应用登录上下文，包含 `token`、`user`、`roles`、`permissions`。
 - `runtime`：运行时配置，当前包含 `env` 和 `apiBaseUrl`。
 - `theme`：主应用当前 Element Plus 主题变量和明暗模式。
 
 子应用业务页面不直接读主应用 store，也不自己重新维护一套登录态。主应用只负责把必要上下文传进去，子应用通过自己的
-`useSubAppContext()` 读取。
+`useSubAppContext()` 读取。登录 token、用户和权限通过 `@morningfast/platform/auth` 共享包读取。
 
 后续接菜单、权限时，继续沿用这个边界：
 
 - 菜单树属于某个应用，先在应用配置中选应用，再维护该应用菜单。
 - 权限点属于某个应用，接口按应用维度返回。
-- 主应用负责下发当前登录用户的权限集合，子应用负责按自己的菜单和权限点渲染页面。
+- 主应用负责维护当前登录用户的权限集合，子应用通过共享认证包读取权限后按自己的菜单和权限点渲染页面。
 
 子应用通过 `morningfast-plus/components` 使用 `MpSearchForm`、`MpTable` 等公共组件。
 
@@ -152,12 +150,14 @@ const apiBaseUrl = runtime.apiBaseUrl;
 
 ### 子应用怎么取用户信息？
 
-主应用会在 `auth` 里传登录上下文：
+主应用登录后会把 token 持久化到 `localStorage`，并把用户、角色和权限写入共享认证包的内存缓存。子应用从共享认证包读取：
 
 ```ts
-const { auth } = useSubAppContext();
-const token = auth?.token;
-const permissions = auth?.permissions ?? [];
+import { getAccessToken, getAuthProfile } from '@morningfast/platform/auth';
+
+const token = getAccessToken();
+const profile = getAuthProfile();
+const permissions = profile?.permissions ?? [];
 ```
 
 ### 子应用之间怎么通信？

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

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

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

@@ -34,48 +34,8 @@ export const mockRouteItems: MockRouteItem[] = [
     name: 'demo',
     title: '示例模块',
     icon: 'Setting',
-    redirect: '/demo/menu/one',
+    redirect: '/demo/user-management',
     children: [
-      {
-        path: 'menu',
-        name: 'demo-menu',
-        title: '示例分组一',
-        redirect: '/demo/menu/one',
-        children: [
-          {
-            path: 'one',
-            name: 'demo-menu-one',
-            title: '菜单示例一',
-            componentKey: 'demo-menu-one',
-          },
-          {
-            path: 'two',
-            name: 'demo-menu-two',
-            title: '菜单示例二',
-            componentKey: 'demo-menu-two',
-          },
-        ],
-      },
-      {
-        path: 'another',
-        name: 'demo-another',
-        title: '示例分组二',
-        redirect: '/demo/another/leaf',
-        children: [
-          {
-            path: 'leaf',
-            name: 'demo-another-leaf',
-            title: '菜单示例三',
-            componentKey: 'demo-another-leaf',
-          },
-        ],
-      },
-      {
-        path: 'standalone',
-        name: 'demo-standalone',
-        title: '独立菜单示例',
-        componentKey: 'demo-standalone',
-      },
       {
         path: 'user-management',
         name: 'demo-user-management',
@@ -107,10 +67,6 @@ export const mockRouteItems: MockRouteItem[] = [
 
 const componentMap: Record<string, RouteRecordRaw['component']> = {
   dashboard: () => import('@/pages/dashboard/Workplace.vue'),
-  'demo-menu-one': () => import('@/pages/demo/MenuLevelOne.vue'),
-  'demo-menu-two': () => import('@/pages/demo/MenuLevelTwo.vue'),
-  'demo-another-leaf': () => import('@/pages/demo/MenuLeaf.vue'),
-  'demo-standalone': () => import('@/pages/demo/StandaloneMenu.vue'),
   'demo-user-management': () => import('@/pages/demo/user-management/index.vue'),
   'demo-mapping-config': () => import('@/pages/demo/mapping-config/index.vue'),
   'demo-table-page': () => import('@/pages/demo/table-page-demo/index.vue'),

package/dist/templates/main-app/vite.config.ts

@@ -38,10 +38,9 @@ export default defineConfig((configEnv) => {
         },
       ],
     },
-    server: Object.keys(proxy).length
-      ? {
-          proxy,
-        }
-      : undefined,
+    server: {
+      port: Number(env.VITE_MAIN_APP_PORT || 8081),
+      ...(Object.keys(proxy).length ? { proxy } : {}),
+    },
   }, defineBusinessViteConfig(configEnv))
 })

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

@@ -12,7 +12,7 @@ Morningfast UI 微前端子应用模板。
 pnpm dev
 ```
 
-作为主应用子应用联调时，默认端口是 `5174`，主应用默认入口也是 `http://localhost:5174`。
+作为主应用子应用联调时，默认端口是 `8082`，主应用默认入口也是 `http://localhost:8082`。
 
 如果需要开启 `vite-plugin-qiankun` 的 dev 子应用调试模式：
 
@@ -37,7 +37,7 @@ VITE_QIANKUN_DEV_MODE=true pnpm dev
 
 - 子应用名：`morningfast-__MORNINGFAST_SUB_APP_DIR__`。
 - 主应用默认挂载路径：`/micro/__MORNINGFAST_SUB_APP_DIR__`。
-- 主应用应用配置里的 `入口地址` 要指向子应用访问地址，例如 `http://localhost:5174`。
+- 主应用应用配置里的 `入口地址` 要指向子应用访问地址，例如 `http://localhost:8082`。
 - 主应用应用配置里的 `路由前缀` 要和子应用挂载路径一致，例如 `/micro/__MORNINGFAST_SUB_APP_DIR__`。
 - 子应用默认保留一个基础 `home` 页面，业务示例放在 `src/pages/demo/orders`，对应路由是 `/demo/orders`。
 - 子应用独立运行时，`html`、`body`、`#sub-app` 必须形成 `height: 100%; min-height: 0;` 的闭合高度链，否则
@@ -66,7 +66,6 @@ import { MpSearchForm, MpTable } from 'morningfast-plus/components';
 {
   basePath,
   app,
-  auth,
   runtime,
   theme,
 }
@@ -81,14 +80,12 @@ import { useSubAppContext } from '@/composables/useSubAppContext';
 
 const subAppContext = useSubAppContext();
 const apiBaseUrl = subAppContext.runtime.apiBaseUrl;
-const token = subAppContext.auth?.token;
 ```
 
 常用字段：
 
 - `basePath`：子应用路由基座，独立运行时默认 `/`，被主应用挂载时例如 `/micro/sub-app/`。
 - `app`：当前子应用配置，包含应用 id、名称、入口地址和激活路由前缀。
-- `auth`：主应用登录态，包含 token、用户、角色和权限。
 - `runtime`：运行时配置，当前包含 `env` 和 `apiBaseUrl`。请求封装应优先从这里拿接口前缀。
 - `theme`：当前主题快照。
 
@@ -103,9 +100,9 @@ runtime: {
 
 后续真实接菜单和权限时，建议保持边界：
 
-- 主应用只传当前应用运行时上下文，不通过 qiankun props 传 token 或权限快照。
+- 主应用只通过 qiankun props 传当前应用运行时上下文，不通过 props 传 token 或权限快照。
 - 子应用维护自己的路由、菜单和权限点定义。
-- 子应用通过 profile 接口获取权限集合，并根据自身菜单配置决定展示内容。
+- 子应用通过 `@morningfast/platform/auth` 共享认证包读取 token、用户和权限，并根据自身菜单配置决定展示内容。
 
 ## 子应用接收主应用消息
 
@@ -172,13 +169,15 @@ fetch(`${runtime.apiBaseUrl}/orders`, {
 ### 子应用怎么取当前用户和权限？
 
 ```ts
-const { auth } = useSubAppContext();
+import { getAccessToken, getAuthProfile } from '@morningfast/platform/auth';
 
-const user = auth?.user;
-const permissions = auth?.permissions ?? [];
+const token = getAccessToken();
+const profile = getAuthProfile();
+const user = profile?.user;
+const permissions = profile?.permissions ?? [];
 ```
 
-业务页面用 `permissions` 控制按钮和功能入口。不要在子应用里重新维护一套登录态。
+业务页面用 `permissions` 控制按钮和功能入口。token 保存在 `localStorage`，刷新后仍可读取；用户和权限在共享包内存中，主应用刷新初始化后会重新写入。
 
 ### 子应用怎么知道自己挂在哪个路径？
 

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

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

package/dist/templates/sub-app/vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig((configEnv) => {
       ],
     },
     server: {
-      port: Number(env.VITE_SUB_APP_PORT || 5174),
+      port: Number(env.VITE_SUB_APP_PORT || 8082),
       cors: true,
       headers: {
         'Access-Control-Allow-Origin': '*',

package/dist/templates/workspace/README.md

@@ -14,16 +14,70 @@ packages/
   micro-contract/
 ```
 
-## 命令
+## 快速启动
+
+进入生成后的项目根目录，先安装依赖：
 
 ```sh
 pnpm install
+```
+
+只运行主应用：
+
+```sh
 pnpm dev:main
+```
+
+只运行子应用：
+
+```sh
 pnpm dev:sub
+```
+
+主子应用本地联调时，需要开两个终端同时运行：
+
+```sh
+pnpm dev:main
+```
+
+```sh
+pnpm dev:sub
+```
+
+默认主应用使用 Vite 默认端口，通常是 `http://localhost:8081`。
+默认子应用端口是 `http://localhost:8082`，主应用内置的子应用入口也指向这个地址。
+
+启动后先访问主应用地址，再从主应用菜单进入“微前端 / 子应用示例”。如果子应用端口或部署地址不同，在主应用“系统 / 应用配置”里维护子应用入口地址。
+
+## 检查和构建
+
+检查主应用：
+
+```sh
 pnpm check:main
+```
+
+检查子应用：
+
+```sh
 pnpm check:sub
+```
+
+构建主应用：
+
+```sh
 pnpm build:main
+```
+
+构建子应用：
+
+```sh
 pnpm build:sub
+```
+
+构建全部应用：
+
+```sh
 pnpm build:all
 ```
 

package/package.json

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

package/dist/templates/main-app/src/pages/demo/MenuLeaf.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page__header">
-      <div>
-        <h2 class="page__title">菜单示例三</h2>
-        <p class="page__subtitle">用于演示另一条三级菜单链路。</p>
-      </div>
-    </div>
-
-    <el-card shadow="never">示例分组二 / 菜单示例三</el-card>
-  </div>
-</template>

package/dist/templates/main-app/src/pages/demo/MenuLevelOne.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page__header">
-      <div>
-        <h2 class="page__title">菜单示例一</h2>
-        <p class="page__subtitle">用于演示二三级菜单、面包屑和页签联动效果。</p>
-      </div>
-    </div>
-
-    <el-card shadow="never">示例分组一 / 菜单示例一</el-card>
-  </div>
-</template>

package/dist/templates/main-app/src/pages/demo/MenuLevelTwo.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page__header">
-      <div>
-        <h2 class="page__title">菜单示例二</h2>
-        <p class="page__subtitle">用于演示同级菜单切换和面包屑展示。</p>
-      </div>
-    </div>
-
-    <el-card shadow="never">示例分组一 / 菜单示例二</el-card>
-  </div>
-</template>

package/dist/templates/main-app/src/pages/demo/StandaloneMenu.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page__header">
-      <div>
-        <h2 class="page__title">独立菜单示例</h2>
-        <p class="page__subtitle">这是一个直接挂在示例模块下的叶子菜单页面。</p>
-      </div>
-    </div>
-
-    <el-card shadow="never">示例模块 / 独立菜单示例</el-card>
-  </div>
-</template>