generator-mico-cli 0.2.27 → 0.2.29

package/generators/subapp-react/index.js

@@ -257,7 +257,7 @@ module.exports = class extends Generator {
 
       this._updateDevPreset();
       this._updateMockPages();
-      this._updateConfigDev();
+      this._updateApiMockMenuPerms();
     } catch (error) {
       console.error('');
       console.error('❌ Error during file generation:');
@@ -297,6 +297,12 @@ module.exports = class extends Generator {
     }
   }
 
+  /** 与 mock menus / api.mock menu_perms 一致的权限 key（cs_web_menu_subapp_page 风格） */
+  _subappRouteKey() {
+    const snake = this.appName.replace(/-/g, '_');
+    return `cs_web_menu_${snake}_page`;
+  }
+
   _updateMockPages() {
     const pagesPath = path.join(this.monorepoRoot, 'apps/layout/mock/pages.ts');
     if (!fs.existsSync(pagesPath)) {
@@ -312,6 +318,8 @@ module.exports = class extends Generator {
         return;
       }
 
+      const routeKey = this._subappRouteKey();
+
       // 找出已有的最大 id
       const idMatches = [...content.matchAll(/id:\s*(\d+)/g)];
       const maxId = idMatches.reduce((max, m) => Math.max(max, Number(m[1])), 0);
@@ -330,9 +338,9 @@ module.exports = class extends Generator {
         "    prefixPath: '',",
         "    routeMode: 'prefix',",
         '    enabled: true,',
-        '    accessControlEnabled: false,',
+        '    accessControlEnabled: true,',
         '    adminOnly: false,',
-        '    routeKey: null,',
+        `    routeKey: '${routeKey}',`,
         `    mainDocumentId: ${maxId + 1},`,
         "    version: '',",
         '  },',
@@ -369,40 +377,38 @@ module.exports = class extends Generator {
     }
   }
 
-  _updateConfigDev() {
-    const configPath = path.join(this.monorepoRoot, 'apps/layout/config/config.dev.ts');
-    if (!fs.existsSync(configPath)) {
-      this.logger.verbose('apps/layout/config/config.dev.ts not found, skipping');
+  /** 将子应用 routeKey 写入 layout mock 的 GET /user/info menu_perms，本地 mock 用户具备该页菜单权限 */
+  _updateApiMockMenuPerms() {
+    const apiMockPath = path.join(this.monorepoRoot, 'apps/layout/mock/api.mock.ts');
+    if (!fs.existsSync(apiMockPath)) {
+      this.logger.verbose('apps/layout/mock/api.mock.ts not found, skipping');
       return;
     }
 
     try {
-      const content = fs.readFileSync(configPath, 'utf-8');
-      const routeEntry = `'/${this.appName}/*'`;
+      const content = fs.readFileSync(apiMockPath, 'utf-8');
+      const routeKey = this._subappRouteKey();
+      const quotedKey = `'${routeKey}'`;
 
-      if (content.includes(routeEntry)) {
-        this.logger.verbose(`Route "${routeEntry}" already in noPermissionRouteList, skipping`);
+      if (content.includes(quotedKey)) {
+        this.logger.verbose(`menu_perms already contains ${routeKey}, skipping`);
         return;
       }
 
       const updated = content.replace(
-        /noPermissionRouteList:\s*\[([^\]]*)\]/,
-        (match, inner) => {
-          const trimmed = inner.trim();
-          const entries = trimmed ? `${trimmed}, ${routeEntry}` : routeEntry;
-          return `noPermissionRouteList: [${entries}]`;
-        },
+        /(menu_perms:\s*\[[\s\S]*?)(\n\s*\],)/,
+        (match, before, closing) => `${before}\n        ${quotedKey},${closing}`,
       );
 
       if (updated === content) {
-        this.logger.verbose('noPermissionRouteList not found in config.dev.ts, skipping');
+        this.logger.verbose('menu_perms array not found in api.mock.ts, skipping');
         return;
       }
 
-      fs.writeFileSync(configPath, updated, 'utf-8');
-      this.log(`   📝 已将 "${routeEntry}" 添加到 config.dev.ts 的 noPermissionRouteList 中`);
+      fs.writeFileSync(apiMockPath, updated, 'utf-8');
+      this.log(`   📝 已将 "${routeKey}" 添加到 api.mock.ts 的 GET /user/info menu_perms 中`);
     } catch (e) {
-      console.warn(`   ⚠️  更新 config.dev.ts 失败: ${e.message}`);
+      console.warn(`   ⚠️  更新 api.mock.ts 失败: ${e.message}`);
     }
   }
 
@@ -429,7 +435,7 @@ module.exports = class extends Generator {
     if (fs.existsSync(path.join(layoutDir, '.prettierrc'))) {
       const filesToFormat = [
         path.join(layoutDir, 'mock/pages.ts'),
-        path.join(layoutDir, 'config/config.dev.ts'),
+        path.join(layoutDir, 'mock/api.mock.ts'),
       ].filter((f) => fs.existsSync(f));
 
       if (filesToFormat.length > 0) {

package/generators/subapp-react/templates/homepage/README.md

@@ -102,6 +102,7 @@ PORT=8001
 ### 项目文档
 
 - [项目根目录 README](../../README.md)
+- [PermissionFilter 按钮权限](./docs/feature-PermissionFilter按钮权限.md)（子应用用法与主应用文档入口）
 
 ### UmiJS 官方文档
 

package/generators/subapp-react/templates/homepage/config/config.prod.development.ts

@@ -45,6 +45,7 @@ const config: ReturnType<typeof defineConfig> = {
     'react-dom': 'ReactDOM',
     '@mico-platform/ui': 'micoUI',
     '@common-web/sentry': 'CommonWebSentry',
+    '<%= packageScope %>/common-intl': 'CommonIntl',
   },
 };
 

package/generators/subapp-react/templates/homepage/config/config.prod.testing.ts

@@ -45,6 +45,7 @@ const config: ReturnType<typeof defineConfig> = {
     'react-dom': 'ReactDOM',
     '@mico-platform/ui': 'micoUI',
     '@common-web/sentry': 'CommonWebSentry',
+    '<%= packageScope %>/common-intl': 'CommonIntl',
   },
 };
 

package/generators/subapp-react/templates/homepage/config/config.prod.ts

@@ -44,6 +44,7 @@ const config: ReturnType<typeof defineConfig> = {
     'react-dom': 'ReactDOM',
     '@mico-platform/ui': 'micoUI',
     '@common-web/sentry': 'CommonWebSentry',
+    '<%= packageScope %>/common-intl': 'CommonIntl',
   },
 };
 

package/generators/subapp-react/templates/homepage/docs/feature-PermissionFilter/346/214/211/351/222/256/346/235/203/351/231/220.md

@@ -0,0 +1,35 @@
+# PermissionFilter 按钮权限（子应用）
+
+> 创建时间：2025-03-27
+
+## 说明
+
+子应用内 `PermissionFilter` 与主应用**同名同 Props**，但权限数据来源不同：通过 qiankun 接收主应用注入的 `button_perms`、`is_superuser`，详见 `src/common/mainApp.ts` 与 `useMainAppProps()`。
+
+**完整架构、主应用用法、Mock 与 `getInitialState` 说明**请阅读主应用文档：
+
+`apps/layout/docs/feature-PermissionFilter按钮权限.md`
+
+## 子应用要点
+
+| 项目 | 说明 |
+| --- | --- |
+| 权限来源 | 主应用 `MicroAppLoader` 传入的 props，非子应用自行请求 `/user/info/` |
+| Hook | `useMainAppProps()`，props 变更时组件会重渲染 |
+| 独立运行 | 无主应用 props，无 `button_perms`，默认走 `fallback` |
+| 示例 | `src/pages/index.tsx` 中「PermissionFilter 按钮权限示例」卡片 |
+
+## 使用示例
+
+```tsx
+import PermissionFilter from '@/components/PermissionFilter';
+
+<PermissionFilter
+  permissionKey="cs_web_btn_subapp_demo"
+  fallback={<Alert type="warning" title="无权限" content="..." />}
+>
+  <Button type="primary">有权限时可见</Button>
+</PermissionFilter>
+```
+
+主应用需在用户信息接口返回的 `button_perms` 中包含与页面一致的 `permissionKey`；本地联调可修改主应用 `mock/api.mock.ts`。

package/generators/subapp-react/templates/homepage/package.json

@@ -19,7 +19,8 @@
     "@mico-platform/theme": "<%= themeVersion %>",
     "@umijs/max": "^4.4.8",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "<%= packageScope %>/common-intl": "workspace:*"
   },
   "devDependencies": {
     "@mico-platform/ui": "<%= micoUiVersion %>",

package/generators/subapp-react/templates/homepage/src/app.tsx

@@ -5,6 +5,13 @@
  *
  * 注意：app.tsx 只能导出 Umi 规定的 API（qiankun、getInitialState 等）
  * 自定义函数请放在 @/common/mainApp.ts 中
+ *
+ * 国际化使用：
+ * 子应用默认共享主应用的 intl，直接导入即可：
+ *   import { intl } from '<%= packageScope %>/common-intl';
+ *   intl.common_hello();
+ * 如需独立 tag，直接依赖 @common-web/common-intl 自行调用 initIntl，
+ * 参考 packages/common-intl/README.md
  */
 
 import React from 'react';

package/generators/subapp-react/templates/homepage/src/common/mainApp.ts

@@ -3,6 +3,8 @@
  * @description 存储和获取主应用传递的 props
  */
 
+import { useSyncExternalStore } from 'react';
+
 /**
  * 主应用传递的 props 类型定义
  */
@@ -13,17 +15,54 @@ export interface IMicroAppProps {
   request?: <T = any>(url: string, options?: any) => Promise<T>;
   /** 当前路由路径（由主应用传递，用于子应用内部路由切换） */
   routePath?: string;
+  /**
+   * 按钮权限列表（与主应用 fetchUserInfo.button_perms 一致，由主应用 MicroAppLoader 注入）
+   */
+  button_perms?: string[];
+  /** 是否超级用户（与主应用用户信息一致） */
+  is_superuser?: boolean;
 }
 
 /** 存储主应用传递的 props */
 let mainAppProps: IMicroAppProps | null = null;
 
+const propsListeners = new Set<() => void>();
+
+const notifyPropsListeners = (): void => {
+  propsListeners.forEach((listener) => listener());
+};
+
+/**
+ * 订阅主应用 props 变更（qiankun update 时触发，供 PermissionFilter 等订阅刷新）
+ */
+export const subscribeMainAppProps = (listener: () => void): (() => void) => {
+  propsListeners.add(listener);
+  return () => propsListeners.delete(listener);
+};
+
 /**
  * 设置主应用 props（由 qiankun 生命周期调用）
  * @internal
  */
 export const setMainAppProps = (props: IMicroAppProps | null) => {
   mainAppProps = props;
+  notifyPropsListeners();
+};
+
+/**
+ * 获取当前主应用注入的 props（非 React 场景）
+ */
+export const getMainAppProps = (): IMicroAppProps | null => mainAppProps;
+
+/**
+ * React Hook：订阅主应用 props，与 qiankun update 同步
+ */
+export const useMainAppProps = (): IMicroAppProps | null => {
+  return useSyncExternalStore(
+    subscribeMainAppProps,
+    () => mainAppProps,
+    () => null,
+  );
 };
 
 /**
@@ -51,5 +90,3 @@ export const isRunningInQiankun = () => !!mainAppProps;
  * 获取主应用标识
  */
 export const getMainAppName = () => mainAppProps?.mainApp;
-
-

package/generators/subapp-react/templates/homepage/src/components/PermissionFilter/index.tsx

@@ -0,0 +1,48 @@
+import { type IMicroAppProps, useMainAppProps } from '@/common/mainApp';
+import React from 'react';
+
+export interface IPermissionFilterProps {
+  /** 按钮/操作权限标识，需在主应用传入的 `button_perms` 中 */
+  permissionKey: string;
+  children?: React.ReactNode;
+  /** 无权限时渲染内容；不传则渲染 null */
+  fallback?: React.ReactNode;
+}
+
+const isSuperuserUser = (value?: boolean | number): boolean => {
+  return value === true || value === 1;
+};
+
+function hasButtonPermission(
+  permissionKey: string,
+  props: IMicroAppProps | null,
+): boolean {
+  if (!permissionKey?.trim()) {
+    return false;
+  }
+  if (isSuperuserUser(props?.is_superuser)) {
+    return true;
+  }
+  const buttonPerms = props?.button_perms ?? [];
+  return buttonPerms.includes(permissionKey);
+}
+
+/**
+ * 按主应用通过 qiankun 传入的 `button_perms` / `is_superuser` 判断是否渲染子节点。
+ * 独立运行子应用时无主应用 props，默认无按钮权限。
+ */
+const PermissionFilter: React.FC<IPermissionFilterProps> = ({
+  permissionKey,
+  children,
+  fallback = null,
+}) => {
+  const mainProps = useMainAppProps();
+  const allowed = hasButtonPermission(permissionKey, mainProps);
+
+  if (!allowed) {
+    return <>{fallback}</>;
+  }
+  return <>{children}</>;
+};
+
+export default PermissionFilter;

package/generators/subapp-react/templates/homepage/src/pages/index.tsx

@@ -1,3 +1,4 @@
+import PermissionFilter from '@/components/PermissionFilter';
 import { getRequestSource, request } from '@/common/request';
 import {
   Alert,
@@ -265,6 +266,39 @@ export default function HomePage() {
         </Card>
       </Spin>
 
+      {/* PermissionFilter：按主应用传入的 button_perms 控制展示 */}
+      <Card title="🔐 PermissionFilter 按钮权限示例" style={{ marginBottom: 16 }}>
+        <Paragraph>
+          子应用通过 qiankun 接收主应用注入的{' '}
+          <Text code>button_perms</Text> / <Text code>is_superuser</Text>。
+          仅当权限匹配（或超级用户）时渲染 <Text code>children</Text>，否则渲染{' '}
+          <Text code>fallback</Text>。
+        </Paragraph>
+        <Paragraph type="secondary" style={{ marginBottom: 12 }}>
+          示例 permissionKey 为 <Text code>cs_web_btn_subapp_demo</Text>
+          。嵌入主应用时，需在主应用用户信息接口的{' '}
+          <Text code>button_perms</Text> 中包含该标识；独立运行子应用时无主应用
+          props，将始终走 fallback。
+        </Paragraph>
+        <PermissionFilter
+          permissionKey="cs_web_btn_subapp_demo"
+          fallback={
+            <Alert
+              type="warning"
+              title="无权限"
+              content="未在 button_perms 中包含 cs_web_btn_subapp_demo，或为独立运行子应用。"
+            />
+          }
+        >
+          <Space>
+            <Button type="primary" status="success">
+              有权限时可见的操作
+            </Button>
+            <Text type="success">（当前用户具备该按钮权限）</Text>
+          </Space>
+        </PermissionFilter>
+      </Card>
+
       {/* @mico-platform/ui 组件示例 */}
       <Card title="📦 @mico-platform/ui 组件" style={{ marginBottom: 16 }}>
         <Paragraph>
@@ -363,7 +397,7 @@ export default function HomePage() {
         <Alert
           type="info"
           title="依赖共享"
-          content="通过 externals 配置，子应用复用主应用的 React 和 @mico-platform/ui，打包体积减少 ~1MB"
+          content="通过 externals 配置，子应用复用主应用的 React、@mico-platform/ui 和 common-intl 包（含多语言文案数据），打包体积减少 ~1MB"
         />
         <Alert
           type="success"

package/lib/utils.js

@@ -376,7 +376,6 @@ async function runDoctorChecks() {
   const results = {
     node: checkNodeVersion('18'),
     pnpm: checkCommand('pnpm'),
-    yo: checkCommand('yo'),
     git: checkCommand('git'),
     npm: null
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",
@@ -30,7 +30,6 @@
     "@biomejs/biome": "^1.9.4",
     "husky": "^9.1.7",
     "vitest": "^4.0.18",
-    "yeoman-environment": "^3.19.3",
     "yeoman-test": "^6.3.0"
   },
   "engines": {
@@ -39,6 +38,7 @@
   "dependencies": {
     "semver": "^7.6.3",
     "update-notifier": "^7.3.1",
+    "yeoman-environment": "^3.19.3",
     "yeoman-generator": "^5.9.0"
   }
 }