generator-mico-cli 0.2.28 → 0.2.30

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 {
@@ -140,19 +140,31 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
     collapsed,
     handleClickMenuItem,
     handleCollapsed,
+    handleMouseEnter,
+    handleMouseLeave,
     setOpenKeys,
   } = useMenuState({ menuItems });
 
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--sider-width',
-      collapsed ? '48px' : '200px',
-    );
+    const layoutContent = document.querySelector('.layout-content');
+    if (layoutContent) {
+      (layoutContent as HTMLElement).style.setProperty(
+        '--sider-width',
+        collapsed ? '48px' : '200px',
+      );
+    }
+  }, [collapsed]);
 
+  useEffect(() => {
+    const sider = siderRef.current;
+    if (!sider) return;
+    sider.addEventListener('mouseenter', handleMouseEnter);
+    sider.addEventListener('mouseleave', handleMouseLeave);
     return () => {
-      document.documentElement.style.removeProperty('--sider-width');
+      sider.removeEventListener('mouseenter', handleMouseEnter);
+      sider.removeEventListener('mouseleave', handleMouseLeave);
     };
-  }, [collapsed]);
+  }, [handleMouseEnter, handleMouseLeave]);
 
   // 点击触发按钮图标
   const clickTriggerBtnIcon = collapsed

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,34 @@ 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',
+
+  // SSO auth failure modal
+  'sso.auth.failure.modal.title': 'Login Required',
+  'sso.auth.failure.modal.content':
+    'Auto login failed. Would you like to try logging in again?',
+  'sso.auth.failure.modal.ok': 'Re-login',
+  'sso.auth.failure.modal.cancel': 'Cancel',
+  sso_auth_failure_modal_title: 'Login Required',
+  sso_auth_failure_modal_content: 'Auto login failed. Would you like to try logging in again?',
+  sso_auth_failure_modal_ok: 'Re-login',
+  sso_auth_failure_modal_cancel: 'Cancel',
 
   // AvatarDropdown
   'avatar.language': 'Language',

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

@@ -19,6 +19,32 @@ 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': '小组管理',
+
+  // SSO 认证失败弹框
+  'sso.auth.failure.modal.title': '登录提示',
+  'sso.auth.failure.modal.content': '自动登录失败，是否重新尝试登录？',
+  'sso.auth.failure.modal.ok': '重新登录',
+  'sso.auth.failure.modal.cancel': '取消',
+  sso_auth_failure_modal_title: '登录提示',
+  sso_auth_failure_modal_content: '自动登录失败，是否重新尝试登录？',
+  sso_auth_failure_modal_ok: '重新登录',
+  sso_auth_failure_modal_cancel: '取消',
 
   // 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,35 @@
   padding-top: 30px;
   color: @color-text-1;
 }
+
+.title {
+  margin: 0 0 12px;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.hint {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: @color-text-2;
+}
+
+.meta {
+  margin: 0;
+  font-size: 12px;
+  font-family: ui-monospace, monospace;
+  color: @color-text-3;
+}
+
+.demoCard {
+  margin-top: 16px;
+  max-width: 720px;
+}
+
+.tzDemoList {
+  width: 100%;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  line-height: 1.8;
+}

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

@@ -1,11 +1,155 @@
-import { useIntl } from '@umijs/max';
+import PermissionFilter from '@/components/PermissionFilter';
+import { useLayoutIntl } from '@/common/intl';
+import { Alert, Button, Card, Space, Typography } from '@mico-platform/ui';
+import type { FC } from 'react';
+import {
+  TIMEZONE,
+  formatTimestampToDateTime,
+  formatTimestampToDateTimeWithTimezone,
+  getShortcutDateRange,
+  parseDateInTimezone,
+  utcOffsetToTimeZoneStr,
+  utcOffsetToTimezone,
+} from '<%= packageScope %>/shared/timezone';
 import styles from './index.less';
 
-const HomePage: React.FC = () => {
-  const intl = useIntl();
+const { Paragraph, Text } = Typography;
+
+/**
+ * shared/timezone 示例：所有函数依赖 app.tsx 顶层的 `configureTimezone({ getTimezone })` 注入。
+ * 这里用一个固定时间戳做确定性展示；业务实际使用时通常传 `Date.now()` 或后端下发值。
+ */
+const DEMO_TIMESTAMP = 1730721621000;
+const DEMO_DATE_STR = '2025-11-04 16:20:21';
+
+/** 与 mock GET /user/info/ button_perms 中的示例 key 对齐 */
+const HOME_BUTTON_PERM_KEY = 'cs_web_btn_home_demo';
+
+/**
+ * 国际化示例：通过 `useLayoutIntl` 适配层统一调用。
+ * - 未配置 `__MICO_CONFIG__.commonIntl`：等同 `useIntl().formatMessage`，读本地 `locales/*`
+ * - 已配置：优先 <%= packageScope %>/common-intl 的 `i18n()`，无命中再 Umi
+ */
+const HomePage: FC = () => {
+  const { formatMessage, commonIntlEnabled, locale } = useLayoutIntl();
+
+  // shared/timezone 示例输出
+  const tzDemo = {
+    utcOffset8: utcOffsetToTimezone(8),
+    utcOffsetMinus5: utcOffsetToTimezone(-5),
+    iana8: utcOffsetToTimeZoneStr(8),
+    parsed: parseDateInTimezone(DEMO_DATE_STR).format('YYYY-MM-DD HH:mm:ss Z'),
+    thisWeek: (() => {
+      const [start, end] = getShortcutDateRange('week');
+      return `${start.format('MM-DD')} ~ ${end.format('MM-DD')}`;
+    })(),
+    formattedDemo: formatTimestampToDateTime(DEMO_TIMESTAMP),
+    formattedWithTz: formatTimestampToDateTimeWithTimezone(
+      DEMO_TIMESTAMP,
+      TIMEZONE['UTC+8'],
+    ),
+  };
+
   return (
     <div className={styles.container}>
-      {intl.formatMessage({ id: 'page.home.title' })}
+      <h1 className={styles.title}>
+        {
+          formatMessage({
+            id: 'page.home.title',
+            defaultMessage: '首页',
+          })
+        }
+      </h1>
+      <p className={styles.hint}>
+        common-intl 优先样例：{formatMessage({
+          id: 'cs_web_workbench_userlist_chat',
+          defaultMessage: '看到该文案代表未启用 commonIntl 或中台无该 key',
+        })}
+      </p>
+      <p className={styles.hint}>
+        Umi 兜底样例：{formatMessage({
+          id: 'page.home.title',
+          defaultMessage: '看到该文案代表仅 Umi 或兜底路径',
+        })}
+      </p>
+      <p className={styles.meta}>
+        commonIntlEnabled: {String(commonIntlEnabled)} · locale: {locale}
+      </p>
+
+      <Card
+        className={styles.demoCard}
+        title={formatMessage({ id: 'page.home.permissionDemo.title' })}
+      >
+        <Paragraph type="secondary">
+          {formatMessage(
+            { id: 'page.home.permissionDemo.desc' },
+            { key: HOME_BUTTON_PERM_KEY },
+          )}
+        </Paragraph>
+
+        <PermissionFilter
+          permissionKey={HOME_BUTTON_PERM_KEY}
+          fallback={
+            <Alert
+              type="warning"
+              title={formatMessage({
+                id: 'page.home.permissionDemo.fallbackTitle',
+              })}
+              content={formatMessage(
+                { id: 'page.home.permissionDemo.noPerm' },
+                { key: HOME_BUTTON_PERM_KEY },
+              )}
+            />
+          }
+        >
+          <Space>
+            <Button type="primary" status="success">
+              {formatMessage({ id: 'page.home.permissionDemo.hasPerm' })}
+            </Button>
+            <Text type="success">
+              ({HOME_BUTTON_PERM_KEY})
+            </Text>
+          </Space>
+        </PermissionFilter>
+      </Card>
+
+      <Card
+        className={styles.demoCard}
+        title={<>shared/timezone 示例</>}
+      >
+        <Paragraph type="secondary">
+          所有函数依赖 app.tsx 顶层的 <Text code>configureTimezone</Text>{' '}
+          注入；时区实时取自 <Text code>@/common/helpers#getTimezone</Text>。
+        </Paragraph>
+
+        <Space direction="vertical" size="mini" className={styles.tzDemoList}>
+          <Text>
+            <Text bold>utcOffsetToTimezone(8):</Text> {tzDemo.utcOffset8}
+          </Text>
+          <Text>
+            <Text bold>utcOffsetToTimezone(-5):</Text> {tzDemo.utcOffsetMinus5}
+          </Text>
+          <Text>
+            <Text bold>utcOffsetToTimeZoneStr(8):</Text> {tzDemo.iana8}
+          </Text>
+          <Text>
+            <Text bold>parseDateInTimezone(&quot;{DEMO_DATE_STR}&quot;):</Text>{' '}
+            {tzDemo.parsed}
+          </Text>
+          <Text>
+            <Text bold>getShortcutDateRange(&quot;week&quot;):</Text>{' '}
+            {tzDemo.thisWeek}
+          </Text>
+          <Text>
+            <Text bold>formatTimestampToDateTime(demo):</Text>{' '}
+            {String(tzDemo.formattedDemo)}
+          </Text>
+          <Text>
+            <Text bold>formatTimestampToDateTimeWithTimezone(demo, UTC+8):</Text>{' '}
+            {String(tzDemo.formattedWithTz)}
+          </Text>
+        </Space>
+      </Card>
     </div>
   );
 };

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

@@ -131,8 +131,9 @@ export const errorConfig: RequestConfig = {
 
           // 根据 HTTP 状态码区分鉴权错误和业务错误
           if (status === 401 || status === 403) {
+            const notifyInfo = `鉴权失败，状态码：${status}，可能登录态过期，请重新登录`;
             // 鉴权失败
-            notifyHostError(createAuthError(errorMessage, status, 'http'));
+            notifyHostError(createAuthError(notifyInfo, status, 'http'));
           } else {
             // 其他业务错误
             notifyHostError(