generator-mico-cli 0.2.28 → 0.2.29

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.tsx

@@ -55,6 +55,7 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
   });
 
   const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
   const location = useLocation();
   const isAuthReady =
     isAuthDisabled() ||
@@ -91,8 +92,11 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       request,
       // 传递当前多语言类型给子应用（zh-CN, en-US）
       locale: getCurrentLocale(),
+      // 与 fetchUserInfo 一致：子应用用于按钮级权限（如 PermissionFilter）
+      button_perms: currentUser?.button_perms ?? [],
+      is_superuser: currentUser?.is_superuser,
     };
-  }, [base, env, routePath]);
+  }, [base, env, routePath, currentUser]);
 
   // ref 持有最新的 buildProps，避免加载 effect 依赖它导致子应用被重载
   const buildPropsRef = useRef(buildProps);

package/generators/micro-react/templates/apps/layout/src/components/PermissionFilter/index.tsx

@@ -0,0 +1,51 @@
+import { isSuperuserUser } from '@/common/menu/parser';
+import { useModel } from '@umijs/max';
+import React from 'react';
+
+export interface IPermissionFilterProps {
+  /** 按钮/操作权限标识，需在用户 `button_perms` 中 */
+  permissionKey: string;
+  children?: React.ReactNode;
+  /** 无权限时渲染内容；不传则渲染 null */
+  fallback?: React.ReactNode;
+}
+
+function hasButtonPermission(
+  permissionKey: string,
+  buttonPerms: string[] | undefined,
+  isSuperuser?: boolean | number,
+): boolean {
+  if (!permissionKey?.trim()) {
+    return false;
+  }
+  if (isSuperuserUser(isSuperuser)) {
+    return true;
+  }
+  return Boolean(buttonPerms?.includes(permissionKey));
+}
+
+/**
+ * 按当前用户 `button_perms`（来自 fetchUserInfo）判断是否渲染子节点。
+ * 超级用户（is_superuser）视为拥有全部按钮权限。
+ */
+const PermissionFilter: React.FC<IPermissionFilterProps> = ({
+  permissionKey,
+  children,
+  fallback = null,
+}) => {
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
+  const allowed = hasButtonPermission(
+    permissionKey,
+    currentUser?.button_perms,
+    currentUser?.is_superuser,
+  );
+
+  if (!allowed) {
+    return <>{fallback}</>;
+  }
+  return <>{children}</>;
+};
+
+export default PermissionFilter;

package/generators/micro-react/templates/apps/layout/src/components/RightContent/AvatarDropdown.tsx

@@ -42,8 +42,17 @@ interface IMenuItem {
 
 // TODO: 临时假数据，后续接入真实登录态
 const MOCK_USER: Partial<IUserInfo> = {
+	id: 0,
+	name: 'Test User',
 	user_name: 'Test User',
 	username: 'test@micous.com',
+	email: 'test@micous.com',
+	avatar: '',
+	app_perms: [],
+	region_perms: [],
+	menu_perms: [],
+	button_perms: [],
+	is_superuser: true,
 };
 
 export const AvatarName: React.FC<{ userName?: string }> = ({ userName }) => {
@@ -371,7 +380,7 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 						</Avatar>
 					</div>
 				)}
-				<AvatarName userName={currentUser?.user_name} />
+				<AvatarName userName={currentUser?.user_name || currentUser?.email} />
 				<IconFont
 					type="webcs-outline_down1"
 					className="avatar-dropdown-icon"

package/generators/micro-react/templates/apps/layout/src/layouts/components/menu/index.tsx

@@ -119,7 +119,7 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   const currentUser = initialState?.currentUser;
 
   // Parse menu data
-  // isMenuAllowed 内部已对每个菜单项单独检查 isNoPermissionRoute，
+  // getMenuItemFilterOutcome 内部已对每个菜单项单独检查 isNoPermissionRoute，
   // 无需在此按当前页面路径全局跳过过滤，避免菜单可见性随页面变化
   const menuItems = useMemo(() => {
     const menus = getMenus();
@@ -128,10 +128,10 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
     }
     const filteredMenus = filterMenuItems(menus, {
       isSuperuser: currentUser?.is_superuser,
-      sideMenus: (currentUser?.side_menus || []) as string[],
+      menuPerms: currentUser?.menu_perms || [],
     });
     return parseMenuItems(filteredMenus);
-  }, [currentUser?.is_superuser, currentUser?.side_menus]);
+  }, [currentUser?.is_superuser, currentUser?.menu_perms]);
 
   // 使用菜单状态 Hook
   const {

package/generators/micro-react/templates/apps/layout/src/layouts/index.tsx

@@ -5,10 +5,11 @@ import {
   findPageByPath,
   findRouteByPath,
   getDynamicRoutes,
+  isMenuPageRequiringPermCode,
   isSuperuserUser,
 } from '@/common/menu';
-import { getMenus, getPages, hasPages } from '@/common/portal-data';
 import { getAppNameFromEntry } from '@/common/micro';
+import { getMenus, getPages, hasPages } from '@/common/portal-data';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
 import {
@@ -36,25 +37,20 @@ const BasicLayout: React.FC = () => {
   const { initialState } = useModel('@@initialState');
   const currentUser = initialState?.currentUser;
 
-  // 路由切换时自动刷新用户权限
-  // isRefreshing 状态仅用于显示 loading 覆盖层
-  // 实际的时序协调由 loadingCoordinator 在 MicroAppManager 层面处理
   const { isRefreshing } = useRoutePermissionRefresh();
 
   const filterOptions = useMemo(
     () => ({
       isSuperuser: currentUser?.is_superuser,
-      sideMenus: (currentUser?.side_menus || []) as string[],
+      menuPerms: currentUser?.menu_perms || [],
     }),
-    [currentUser?.is_superuser, currentUser?.side_menus],
+    [currentUser?.is_superuser, currentUser?.menu_perms],
   );
 
-  // 所有页面路由（优先 PAGES，降级 MENUS）— 用于路由匹配和渲染
   const allPageRoutes = useMemo(() => {
     return getDynamicRoutes();
   }, []);
 
-  // 菜单路由（从 MENUS）— 用于权限交叉引用
   const allMenuRoutes = useMemo(() => {
     return extractRoutes(getMenus());
   }, []);
@@ -67,58 +63,121 @@ const BasicLayout: React.FC = () => {
     return extractRoutes(filteredMenus);
   }, [filterOptions, allMenuRoutes]);
 
-  // 当前路由配置（从所有页面路由中查找）
   const currentRoute = useMemo(() => {
     return findRouteByPath(allPageRoutes, location.pathname);
   }, [allPageRoutes, location.pathname]);
 
-  // 权限判断：菜单交叉引用 + 隐藏页面级兜底
   const isForbidden = useMemo(() => {
-    if (isAuthDisabled()) return false;
-    if (isNoPermissionRoute(location.pathname)) return false;
-    // 非动态路由，交给 Umi 处理（404 等）
-    if (!currentRoute) return false;
-    if (isSuperuserUser(currentUser?.is_superuser)) return false;
-
-    // Tier 1: 菜单权限交叉引用
-    const inAllMenu = findRouteByPath(allMenuRoutes, location.pathname);
-    if (inAllMenu) {
-      const inAllowed = findRouteByPath(allowedMenuRoutes, location.pathname);
-      const forbidden = !inAllowed;
+    const pathname = location.pathname;
+    const permCtx = {
+      userId: currentUser?.id,
+      isSuperuser: currentUser?.is_superuser,
+      menuPermsCount: currentUser?.menu_perms?.length ?? 0,
+    };
 
-      layoutLogger.log('isForbidden (menu check):', {
-        pathname: location.pathname,
-        inAllMenu: true,
-        inAllowed: !!inAllowed,
-        forbidden,
+    if (isAuthDisabled()) {
+      layoutLogger.log('routePermission', {
+        verdict: 'skip',
+        reason: 'disableAuth',
+        pathname,
+        ...permCtx,
       });
-
-      return forbidden;
+      return false;
+    }
+    if (isNoPermissionRoute(pathname)) {
+      layoutLogger.log('routePermission', {
+        verdict: 'skip',
+        reason: 'noPermissionRoute',
+        pathname,
+        ...permCtx,
+      });
+      return false;
+    }
+    if (!currentRoute) {
+      return false;
+    }
+    if (isSuperuserUser(currentUser?.is_superuser)) {
+      layoutLogger.log('routePermission', {
+        verdict: 'skip',
+        reason: 'superuser',
+        pathname,
+        routePath: currentRoute.path,
+        ...permCtx,
+      });
+      return false;
     }
 
-    // Tier 2: 隐藏页面级权限（仅在 PAGES 数据可用时生效）
-    if (!hasPages()) return false;
+    const page =
+      currentRoute.pageConfig ??
+      (hasPages() ? findPageByPath(getPages(), pathname) : undefined);
 
-    const page = findPageByPath(getPages(), location.pathname);
-    if (!page) return false;
+    if (page) {
+      if (page.adminOnly) {
+        layoutLogger.log('routePermission', {
+          verdict: 'deny',
+          reason: 'adminOnly',
+          pathname,
+          pageId: page.id,
+          routePath: currentRoute.path,
+          ...permCtx,
+        });
+        return true;
+      }
+      if (!page.accessControlEnabled) {
+        layoutLogger.log('routePermission', {
+          verdict: 'allow',
+          reason: 'publicPage',
+          pathname,
+          pageId: page.id,
+          accessControlEnabled: false,
+          ...permCtx,
+        });
+        return false;
+      }
+      if (!isMenuPageRequiringPermCode(page)) {
+        layoutLogger.log('routePermission', {
+          verdict: 'allow',
+          reason: 'accessControlNoRouteKey',
+          pathname,
+          pageId: page.id,
+          routePath: currentRoute.path,
+          ...permCtx,
+        });
+        return false;
+      }
+      const menuPerms = currentUser?.menu_perms || [];
+      const rk = page.routeKey!;
+      const keyInMenuPerms = menuPerms.includes(rk);
+      const forbidden = !keyInMenuPerms;
 
-    if (page.adminOnly) {
-      layoutLogger.log('isForbidden (hidden page adminOnly):', {
-        pathname: location.pathname,
+      layoutLogger.log('routePermission', {
+        verdict: forbidden ? 'deny' : 'allow',
+        reason: forbidden ? 'routeKeyNotInMenuPerms' : 'routeKeyInMenuPerms',
+        branch: 'pageMeta',
+        pathname,
         pageId: page.id,
+        routePath: currentRoute.path,
+        routeKey: page.routeKey,
+        keyInMenuPerms,
+        ...permCtx,
       });
-      return true;
+
+      return forbidden;
     }
 
-    if (page.accessControlEnabled) {
-      const sideMenus = (currentUser?.side_menus || []) as string[];
-      const forbidden = !page.routeKey || !sideMenus.includes(page.routeKey);
+    const inAllMenu = findRouteByPath(allMenuRoutes, pathname);
+    if (inAllMenu) {
+      const inAllowed = findRouteByPath(allowedMenuRoutes, pathname);
+      const forbidden = !inAllowed;
 
-      layoutLogger.log('isForbidden (hidden page accessControl):', {
-        pathname: location.pathname,
-        pageId: page.id,
-        routeKey: page.routeKey,
-        hasSideMenuMatch: !forbidden,
+      layoutLogger.log('routePermission', {
+        verdict: forbidden ? 'deny' : 'allow',
+        reason: forbidden ? 'notInFilteredMenuRoutes' : 'inFilteredMenuRoutes',
+        branch: 'menuRouteFallback',
+        pathname,
+        routePath: currentRoute.path,
+        inAllowed: !!inAllowed,
+        ...permCtx,
       });
 
       return forbidden;
@@ -131,13 +190,11 @@ const BasicLayout: React.FC = () => {
     allowedMenuRoutes,
     location.pathname,
     currentUser?.is_superuser,
-    currentUser?.side_menus,
+    currentUser?.menu_perms,
   ]);
 
-  // 判断是否需要显示布局
   const showLayout = !isNoLayoutRoute(location.pathname);
 
-  // 渲染页面内容
   const renderContent = () => {
     layoutLogger.log('renderContent:', {
       pathname: location.pathname,
@@ -145,22 +202,18 @@ const BasicLayout: React.FC = () => {
       isForbidden,
       isRefreshing,
       currentUserChanged: currentUser?.is_superuser,
-      sideMenusCount: currentUser?.side_menus?.length,
+      menuPermsCount: currentUser?.menu_perms?.length,
     });
 
-    // 无权限，显示 403
     if (isForbidden) {
       return <ForbiddenPage />;
     }
 
-    // 如果有匹配的动态路由配置且需要加载微应用
     if (currentRoute?.loadType === 'microapp' && currentRoute.entry) {
       layoutLogger.log('Loading microapp:', currentRoute);
-      // 使用 entry 的 origin 作为微应用标识，同一个 entry 的所有路由共用一个实例
       const appName = getAppNameFromEntry(currentRoute.entry);
       return (
         <>
-          {/* 权限刷新中显示覆盖层，但不卸载 MicroAppLoader，避免子应用被中断 */}
           {isRefreshing && (
             <div
               style={{
@@ -180,23 +233,17 @@ const BasicLayout: React.FC = () => {
             </div>
           )}
           <MicroAppLoader
-            // 使用 appName 作为 key，确保不同微应用使用不同的组件实例
-            // 同一个微应用的不同路由共用同一个实例
             key={appName}
             entry={currentRoute.entry}
             base={currentRoute.base}
-            // 使用 entry 生成的标识，而不是 path
             name={appName}
-            // 显示名称用于 loading 提示
             displayName={currentRoute.name}
-            // 传递当前路由路径，让子应用进行内部路由切换
             routePath={currentRoute.path}
           />
         </>
       );
     }
 
-    // 权限刷新中，显示 loading（仅对非微应用路由）
     if (isRefreshing) {
       return (
         <Spin
@@ -206,11 +253,9 @@ const BasicLayout: React.FC = () => {
       );
     }
 
-    // 默认：使用 Outlet 渲染内部路由
     return <Outlet />;
   };
 
-  // 不需要布局的页面（仍需检查权限）
   if (!showLayout) {
     return (
       <Suspense

package/generators/micro-react/templates/apps/layout/src/locales/en-US.ts

@@ -20,6 +20,23 @@ export default {
 
   // Page titles
   'page.home.title': 'Home',
+  'page.home.permissionDemo.title': 'PermissionFilter (button permission) demo',
+  'page.home.permissionDemo.desc':
+    'Uses fetchUserInfo.button_perms and is_superuser; sample permissionKey: {key}',
+  'page.home.permissionDemo.noPerm':
+    'No permission for {key} (not listed in button_perms).',
+  'page.home.permissionDemo.fallbackTitle': 'No permission',
+  'page.home.permissionDemo.hasPerm': 'Visible when permitted',
+
+  // Mock menu nameKeys (aligned with mock/menus.ts)
+  'cs_web_menu_home': 'Home',
+  'cs_web_menu_example_module': 'Example Module',
+  'cs_web_menu_example_page': 'Example Page',
+  'cs_web_menu_microapp_example': 'Microapp Example',
+  'cs_web_menu_subapp_page': 'Subapp Page',
+  'cs_web_menu_external_link': 'External Link',
+  'cs_web_menu_permission_management': 'Permission Management',
+  'cs_web_menu_group_management': 'Group Management',
 
   // AvatarDropdown
   'avatar.language': 'Language',

package/generators/micro-react/templates/apps/layout/src/locales/zh-CN.ts

@@ -19,6 +19,22 @@ export default {
 
   // Page titles
   'page.home.title': '首页',
+  'page.home.permissionDemo.title': 'PermissionFilter 按钮权限示例',
+  'page.home.permissionDemo.desc':
+    '依据当前用户 fetchUserInfo.button_perms 与 is_superuser；示例 permissionKey：{key}',
+  'page.home.permissionDemo.noPerm': '无 {key} 权限（button_perms 未包含该标识）。',
+  'page.home.permissionDemo.fallbackTitle': '无权限',
+  'page.home.permissionDemo.hasPerm': '有权限时可见',
+
+  // Mock 菜单 nameKey（与 mock/menus.ts 一致）
+  'cs_web_menu_home': '首页',
+  'cs_web_menu_example_module': '示例模块',
+  'cs_web_menu_example_page': '示例页面',
+  'cs_web_menu_microapp_example': '微应用示例',
+  'cs_web_menu_subapp_page': '子应用页面',
+  'cs_web_menu_external_link': '外部链接',
+  'cs_web_menu_permission_management': '权限管理',
+  'cs_web_menu_group_management': '小组管理',
 
   // AvatarDropdown
   'avatar.language': '语言',

package/generators/micro-react/templates/apps/layout/src/pages/404/index.tsx

@@ -1,4 +1,8 @@
-import { extractRoutes, filterMenuItems, type MenuFilterOptions } from '@/common/menu';
+import {
+  extractRoutes,
+  filterMenuItems,
+  type MenuFilterOptions,
+} from '@/common/menu';
 import { getMenus } from '@/common/portal-data';
 import { isAuthDisabled } from '@/constants';
 import { Button, Result, Space } from '@mico-platform/ui';
@@ -30,9 +34,9 @@ const NotFoundPage: React.FC = () => {
   const filterOptions = useMemo<MenuFilterOptions>(
     () => ({
       isSuperuser: currentUser?.is_superuser,
-      sideMenus: (currentUser?.side_menus || []) as string[],
+      menuPerms: currentUser?.menu_perms || [],
     }),
-    [currentUser?.is_superuser, currentUser?.side_menus],
+    [currentUser?.is_superuser, currentUser?.menu_perms],
   );
 
   const firstAvailablePath = useMemo(

package/generators/micro-react/templates/apps/layout/src/pages/Home/index.less

@@ -4,3 +4,8 @@
   padding-top: 30px;
   color: @color-text-1;
 }
+
+.demoCard {
+  margin-top: 16px;
+  max-width: 720px;
+}

package/generators/micro-react/templates/apps/layout/src/pages/Home/index.tsx

@@ -1,11 +1,59 @@
+import PermissionFilter from '@/components/PermissionFilter';
+import { Alert, Button, Card, Space, Typography } from '@mico-platform/ui';
 import { useIntl } from '@umijs/max';
+import React from 'react';
 import styles from './index.less';
 
+const { Paragraph, Text } = Typography;
+
+/** 与 mock GET /user/info/ button_perms 中的示例 key 对齐 */
+const HOME_BUTTON_PERM_KEY = 'cs_web_btn_home_demo';
+
 const HomePage: React.FC = () => {
   const intl = useIntl();
+
   return (
     <div className={styles.container}>
-      {intl.formatMessage({ id: 'page.home.title' })}
+      <Typography.Title heading={4}>
+        {intl.formatMessage({ id: 'page.home.title' })}
+      </Typography.Title>
+
+      <Card
+        className={styles.demoCard}
+        title={intl.formatMessage({ id: 'page.home.permissionDemo.title' })}
+      >
+        <Paragraph type="secondary">
+          {intl.formatMessage(
+            { id: 'page.home.permissionDemo.desc' },
+            { key: HOME_BUTTON_PERM_KEY },
+          )}
+        </Paragraph>
+
+        <PermissionFilter
+          permissionKey={HOME_BUTTON_PERM_KEY}
+          fallback={
+            <Alert
+              type="warning"
+              title={intl.formatMessage({
+                id: 'page.home.permissionDemo.fallbackTitle',
+              })}
+              content={intl.formatMessage(
+                { id: 'page.home.permissionDemo.noPerm' },
+                { key: HOME_BUTTON_PERM_KEY },
+              )}
+            />
+          }
+        >
+          <Space>
+            <Button type="primary" status="success">
+              {intl.formatMessage({ id: 'page.home.permissionDemo.hasPerm' })}
+            </Button>
+            <Text type="success">
+              ({HOME_BUTTON_PERM_KEY})
+            </Text>
+          </Space>
+        </PermissionFilter>
+      </Card>
     </div>
   );
 };

package/generators/micro-react/templates/apps/layout/src/services/user.ts

@@ -1,30 +1,42 @@
-import { request } from '@/common/request';
-import type { IUserInfo } from '@/common/auth/type';
+import type { IUserInfo, IUserInfoApiData } from '@/common/auth/type';
 import { getCurrentLocale, type SupportedLocale } from '@/common/locale';
+import { request } from '@/common/request';
 
-const USER_INFO_API = '/api/user/info';
+/** 新用户信息接口（与 OpenAPI `GET /api/user/info/` 一致，非旧 `/api/user/info`） */
+const USER_INFO_API = '/api/user/info/';
 
 /**
  * 语言代码到接口 lang 参数的映射
  * - zh_CN: 1 (中文)
  * - en: 2 (英文)
  */
-const LOCALE_TO_LANG: Partial<Record<SupportedLocale, number>> = {
-  'zh-CN': 1,
-  'en-US': 2,
-};
+// const LOCALE_TO_LANG: Partial<Record<SupportedLocale, number>> = {
+//   'zh-CN': 1,
+//   'en-US': 2,
+// };
 
-/**
- * 获取当前语言对应的 API lang 参数
- */
-function getApiLangParam(): number {
-  const locale = getCurrentLocale();
-  return LOCALE_TO_LANG[locale] ?? 1;
+// function getApiLangParam(): number {
+//   const locale = getCurrentLocale();
+//   return LOCALE_TO_LANG[locale] ?? 1;
+// }
+
+function normalizeUserInfo(data: IUserInfoApiData): IUserInfo {
+  const name = data.name || '';
+  return {
+    ...data,
+    app_perms: Array.isArray(data.app_perms) ? data.app_perms : [],
+    region_perms: Array.isArray(data.region_perms) ? data.region_perms : [],
+    menu_perms: Array.isArray(data.menu_perms) ? data.menu_perms : [],
+    button_perms: Array.isArray(data.button_perms) ? data.button_perms : [],
+    is_superuser: Boolean(data.is_superuser),
+    user_name: name,
+    username: name || data.email || '',
+  };
 }
 
 export interface IUserInfoResponse {
   code: number;
-  data: IUserInfo;
+  data: IUserInfoApiData;
   msg: string;
 }
 
@@ -34,19 +46,14 @@ export interface IUserInfoResponse {
  * @throws 当接口返回非 200 code 时抛出错误
  */
 export async function fetchUserInfo(): Promise<IUserInfo> {
-  const lang = getApiLangParam();
-  const url = `${USER_INFO_API}?lang=${lang}`;
+  const url = USER_INFO_API;
 
   const response = await request<IUserInfoResponse>(url, {
     method: 'GET',
     skipProxy: true,
   });
   if (response.code === 200 && response.data) {
-    const data = response.data;
-    if (!data.user_name) {
-      data.user_name = data.username || '';
-    }
-    return data;
+    return normalizeUserInfo(response.data);
   }
   throw new Error(response.msg || '获取用户信息失败');
 }