generator-mico-cli 0.1.29 → 0.2.2-8.beta.1

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

@@ -1,10 +1,25 @@
 import { layoutLogger } from '@/common/logger';
-import { extractRoutes, findRouteByPath, getWindowMenus } from '@/common/menu';
+import {
+  extractRoutes,
+  filterMenuItems,
+  findPageByPath,
+  findRouteByPath,
+  getDynamicRoutes,
+  isSuperuserUser,
+} from '@/common/menu';
+import { getMenus, getPages, hasPages } from '@/common/portal-data';
+import { getAppNameFromEntry } from '@/common/micro';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
-import { NO_AUTH_ROUTE_LIST } from '@/constants';
-import { Layout, Spin } from '@arco-design/web-react';
-import { Outlet, useLocation } from '@umijs/max';
+import {
+  isAuthDisabled,
+  isNoLayoutRoute,
+  isNoPermissionRoute,
+} from '@/constants';
+import { useRoutePermissionRefresh } from '@/hooks/useRoutePermissionRefresh';
+import ForbiddenPage from '@/pages/403';
+import { Layout, Spin } from '@mico-platform/ui';
+import { Outlet, useLocation, useModel } from '@umijs/max';
 import React, { Suspense, useMemo } from 'react';
 import LayoutHeader from './components/header';
 import LayoutMenu from './components/menu';
@@ -12,69 +27,181 @@ import './index.less';
 
 const { Content } = Layout;
 
-/**
- * 从 entry URL 中提取微应用标识
- * 同一个 entry 的所有路由使用相同的标识，避免频繁卸载/重载微应用
- *
- * 注意：使用完整的 origin + pathname 作为标识，避免同一 host 上多个子应用冲突
- * 例如：http://localhost:8010/app1/ 和 http://localhost:8010/app2/ 会有不同的标识
- */
-const getAppNameFromEntry = (entry: string): string => {
-  try {
-    const url = new URL(entry, window.location.href);
-    // 使用 origin + pathname 作为标识，确保不同路径的子应用有不同标识
-    // 如 "localhost-8010" 或 "localhost-8010-app1"
-    const identifier = url.host + url.pathname;
-    return identifier.replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
-  } catch {
-    // fallback：使用 entry 的 hash
-    return entry.replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
-  }
-};
-
 /**
  * 主布局组件
  * 注意：Umi Max 使用 React Router 6，应该使用 <Outlet /> 渲染子路由，而不是 children
  */
 const BasicLayout: React.FC = () => {
   const location = useLocation();
+  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[],
+    }),
+    [currentUser?.is_superuser, currentUser?.side_menus],
+  );
 
-  // 解析路由配置
-  const routes = useMemo(() => {
-    const menus = getWindowMenus();
-    return extractRoutes(menus);
+  // 所有页面路由（优先 PAGES，降级 MENUS）— 用于路由匹配和渲染
+  const allPageRoutes = useMemo(() => {
+    return getDynamicRoutes();
   }, []);
 
-  // 查找当前路由配置
+  // 菜单路由（从 MENUS）— 用于权限交叉引用
+  const allMenuRoutes = useMemo(() => {
+    return extractRoutes(getMenus());
+  }, []);
+
+  const allowedMenuRoutes = useMemo(() => {
+    if (isAuthDisabled()) {
+      return allMenuRoutes;
+    }
+    const filteredMenus = filterMenuItems(getMenus(), filterOptions);
+    return extractRoutes(filteredMenus);
+  }, [filterOptions, allMenuRoutes]);
+
+  // 当前路由配置（从所有页面路由中查找）
   const currentRoute = useMemo(() => {
-    return findRouteByPath(routes, location.pathname);
-  }, [routes, location.pathname]);
+    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;
+
+      layoutLogger.log('isForbidden (menu check):', {
+        pathname: location.pathname,
+        inAllMenu: true,
+        inAllowed: !!inAllowed,
+        forbidden,
+      });
+
+      return forbidden;
+    }
+
+    // Tier 2: 隐藏页面级权限（仅在 PAGES 数据可用时生效）
+    if (!hasPages()) return false;
+
+    const page = findPageByPath(getPages(), location.pathname);
+    if (!page) return false;
+
+    if (page.adminOnly) {
+      layoutLogger.log('isForbidden (hidden page adminOnly):', {
+        pathname: location.pathname,
+        pageId: page.id,
+      });
+      return true;
+    }
+
+    if (page.accessControlEnabled) {
+      const sideMenus = (currentUser?.side_menus || []) as string[];
+      const forbidden = !page.routeKey || !sideMenus.includes(page.routeKey);
+
+      layoutLogger.log('isForbidden (hidden page accessControl):', {
+        pathname: location.pathname,
+        pageId: page.id,
+        routeKey: page.routeKey,
+        hasSideMenuMatch: !forbidden,
+      });
+
+      return forbidden;
+    }
+
+    return false;
+  }, [
+    currentRoute,
+    allMenuRoutes,
+    allowedMenuRoutes,
+    location.pathname,
+    currentUser?.is_superuser,
+    currentUser?.side_menus,
+  ]);
 
   // 判断是否需要显示布局
-  const showLayout = !NO_AUTH_ROUTE_LIST.includes(location.pathname);
+  const showLayout = !isNoLayoutRoute(location.pathname);
 
   // 渲染页面内容
   const renderContent = () => {
     layoutLogger.log('renderContent:', {
       pathname: location.pathname,
       currentRoute,
-      routes,
+      isForbidden,
+      isRefreshing,
+      currentUserChanged: currentUser?.is_superuser,
+      sideMenusCount: currentUser?.side_menus?.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
-          entry={currentRoute.entry}
-          // 使用 entry 生成的标识，而不是 path
-          name={appName}
-          // 显示名称用于 loading 提示
-          displayName={currentRoute.name}
-          // 传递当前路由路径，让子应用进行内部路由切换
-          routePath={currentRoute.path}
+        <>
+          {/* 权限刷新中显示覆盖层，但不卸载 MicroAppLoader，避免子应用被中断 */}
+          {isRefreshing && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'var(--color-bg-1)',
+                zIndex: 100,
+              }}
+            >
+              <Spin dot />
+            </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
+          dot
+          style={{ width: '100%', marginTop: 100, textAlign: 'center' }}
         />
       );
     }
@@ -83,13 +210,13 @@ const BasicLayout: React.FC = () => {
     return <Outlet />;
   };
 
-  // 不需要布局的页面
+  // 不需要布局的页面（仍需检查权限）
   if (!showLayout) {
     return (
       <Suspense
         fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
       >
-        <Outlet />
+        {isForbidden ? <ForbiddenPage /> : renderContent()}
       </Suspense>
     );
   }
@@ -100,15 +227,19 @@ const BasicLayout: React.FC = () => {
       <Layout className="layout-content">
         <LayoutMenu />
         <Layout className="layout-content-right">
-          <AppTabs />
-          <Content className="layout-content-outlet">
+          <div className="layout-content-scroll-container">
+            <AppTabs />
+            <Content className="layout-content-outlet">
               <Suspense
-                fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+                fallback={
+                  <Spin dot style={{ width: '100%', marginTop: 100 }} />
+                }
               >
                 {renderContent()}
               </Suspense>
             </Content>
-          </Layout>
+          </div>
+        </Layout>
       </Layout>
     </Layout>
   );

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

@@ -17,4 +17,16 @@ export default {
 
   'loading.text': 'Loading...',
   'loading.error': 'Failed to load',
+
+  // Page titles
+  'page.home.title': 'Home',
+
+  // AvatarDropdown
+  'avatar.language': 'Language',
+  'avatar.language.zh_CN': 'Simplified Chinese',
+  'avatar.language.en': 'English',
+  'avatar.theme': 'Theme',
+  'avatar.theme.light': 'Light Mode',
+  'avatar.theme.dark': 'Dark Mode',
+  'avatar.logout': 'Logout',
 };

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

@@ -16,4 +16,16 @@ export default {
 
   'loading.text': '加载中...',
   'loading.error': '加载失败',
+
+  // Page titles
+  'page.home.title': '首页',
+
+  // AvatarDropdown
+  'avatar.language': '语言',
+  'avatar.language.zh_CN': '简体中文',
+  'avatar.language.en': 'English',
+  'avatar.theme': '主题',
+  'avatar.theme.light': '浅色模式',
+  'avatar.theme.dark': '深色模式',
+  'avatar.logout': '退出登录',
 };

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

@@ -0,0 +1,34 @@
+import { Button, Result } from '@mico-platform/ui';
+import { history } from '@umijs/max';
+import React from 'react';
+
+const ForbiddenPage: React.FC = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      minHeight: 400,
+      margin: '0 auto',
+    }}>
+      <Result
+        status="403"
+        title="无权限访问"
+        subTitle="抱歉，您没有权限访问此页面"
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              history.push('/');
+            }}
+          >
+            返回首页
+          </Button>
+        }
+      />
+    </div>
+  );
+};
+
+export default ForbiddenPage;

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

@@ -0,0 +1,78 @@
+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';
+import { history, useModel } from '@umijs/max';
+import React, { useMemo } from 'react';
+
+/**
+ * 获取第一个可访问的路由路径
+ */
+const getFirstAvailablePath = (filterOptions: MenuFilterOptions): string => {
+  const menus = getMenus();
+
+  // 根据权限过滤菜单
+  const filteredMenus = isAuthDisabled()
+    ? menus
+    : filterMenuItems(menus, filterOptions);
+
+  // 提取路由
+  const routes = extractRoutes(filteredMenus);
+
+  // 返回第一个有效路由，默认返回首页
+  return routes[0]?.path || '/';
+};
+
+const NotFoundPage: React.FC = () => {
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
+  const filterOptions = useMemo<MenuFilterOptions>(
+    () => ({
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    }),
+    [currentUser?.is_superuser, currentUser?.side_menus],
+  );
+
+  const firstAvailablePath = useMemo(
+    () => getFirstAvailablePath(filterOptions),
+    [filterOptions],
+  );
+
+  const handleGoBack = () => {
+    history.back();
+  };
+
+  const handleGoFirst = () => {
+    history.push(firstAvailablePath);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        minHeight: 400,
+      }}
+    >
+      <Result
+        status="404"
+        title="页面不存在"
+        subTitle="抱歉，您访问的页面不存在"
+        extra={
+          <Space>
+            <Button onClick={handleGoBack}>返回上页</Button>
+            <Button type="primary" onClick={handleGoFirst}>
+              前往首页
+            </Button>
+          </Space>
+        }
+      />
+    </div>
+  );
+};
+
+export default NotFoundPage;

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

@@ -1,3 +1,6 @@
+@import '@mico-platform/theme/variables';
+
 .container {
   padding-top: 30px;
+  color: @color-text-1;
 }

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

@@ -1,7 +1,13 @@
+import { useIntl } from '@umijs/max';
 import styles from './index.less';
 
 const HomePage: React.FC = () => {
-  return <div className={styles.container}>首页2</div>;
+  const intl = useIntl();
+  return (
+    <div className={styles.container}>
+      {intl.formatMessage({ id: 'page.home.title' })}
+    </div>
+  );
 };
 
 export default HomePage;

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

@@ -1,4 +1,4 @@
-@import '<%= packageScope %>/shared-styles/variables-only';
+@import '@mico-platform/theme/variables';
 
 .container {
   display: flex;

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

@@ -1,6 +1,6 @@
-import { Button, Form, Input, Message, Space, Typography } from '@arco-design/web-react';
-import { IconLock, IconUser } from '@arco-design/web-react/icon';
-import { useLocation, useNavigate } from '@umijs/max';
+import { Button, Form, Input, Message, Space, Typography } from '@mico-platform/ui';
+import { IconLock, IconUser } from '@mico-platform/ui/icon';
+import { useLocation, useModel,useNavigate } from '@umijs/max';
 import React, { useCallback, useMemo, useState } from 'react';
 import { loginStaff } from '@/services/auth';
 import { maybePersistTokens } from '@/common/auth/auth-manager';
@@ -18,6 +18,8 @@ const LoginPage: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [form] = Form.useForm<LoginFormValues>();
+  const { refresh } = useModel('@@initialState');
+
 
   const redirectPath = useMemo(() => {
     const params = new URLSearchParams(location.search);
@@ -39,6 +41,8 @@ const LoginPage: React.FC = () => {
         if (response?.code === 200) {
           maybePersistTokens(response);
           Message.success('登录成功');
+          // 刷新 initialState，获取用户信息
+          await refresh();
           navigate(redirectPath, { replace: true });
           return;
         }
@@ -50,7 +54,7 @@ const LoginPage: React.FC = () => {
         setLoading(false);
       }
     },
-    [navigate, redirectPath],
+    [navigate, redirectPath, refresh],
   );
 
   return (
@@ -88,7 +92,7 @@ const LoginPage: React.FC = () => {
             </svg>
           </div>
           <div className={styles.titleBlock}>
-            <Title level={3} className={styles.title}>
+            <Title className={styles.title}>
               {window.__MICO_WORKSPACE__?.name}
             </Title>
             <Text className={styles.subTitle}><%= ProjectName %> Management Center</Text>

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

@@ -3,7 +3,7 @@ import {
   createBusinessError,
   notifyHostError,
 } from '@/common/micro';
-import { Message, Notification } from '@arco-design/web-react';
+import { Message, Notification } from '@mico-platform/ui';
 import type { RequestConfig } from '@umijs/max';
 
 // 错误处理方案： 错误类型

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

@@ -0,0 +1,63 @@
+import { request } from '@/common/request';
+import type {
+  IGetTimezoneListRequest,
+  IGetTimezoneListResponse,
+  ITimezone,
+} from './type';
+
+/**
+ * 静态时区列表（兜底配置）
+ * 当未配置 timezoneListUrl 时使用此静态列表
+ * 覆盖 UTC-12 到 UTC+14 共 27 个时区
+ */
+const STATIC_TIMEZONE_LIST: ITimezone[] = [
+  { region: 'AZ', utc_offset: 3 },
+  { region: 'BR', utc_offset: -3 },
+  { region: 'DE', utc_offset: 1 },
+  { region: 'FJ', utc_offset: 15 },
+  { region: 'FR', utc_offset: 1 },
+  { region: 'Global', utc_offset: 8 },
+  { region: 'ID', utc_offset: 7 },
+  { region: 'IN', utc_offset: 5 },
+  { region: 'JP', utc_offset: 9 },
+  { region: 'MECA', utc_offset: 3 },
+  { region: 'MY', utc_offset: 8 },
+  { region: 'PH', utc_offset: 8 },
+  { region: 'PK', utc_offset: 5 },
+  { region: 'TH', utc_offset: 7 },
+  { region: 'TR', utc_offset: 3 },
+  { region: 'TW', utc_offset: 8 },
+  { region: 'US', utc_offset: -5 },
+  { region: 'UU', utc_offset: -8 },
+  { region: 'VN', utc_offset: 7 },
+];
+
+/**
+ * 获取时区配置
+ * 获取系统支持的时区配置列表
+ *
+ * - 如果配置了 window.__MICO_CONFIG__.timezoneListUrl，则请求该 API
+ * - 如果未配置，则返回静态时区列表
+ */
+export async function getTimezoneList(
+  payload: IGetTimezoneListRequest = {},
+): Promise<IGetTimezoneListResponse> {
+  const timezoneListUrl = window.__MICO_CONFIG__?.timezoneListUrl;
+
+  // 未配置 API 地址时，返回静态时区列表
+  if (!timezoneListUrl) {
+    return {
+      result: { code: 0 },
+      timezone_list: STATIC_TIMEZONE_LIST,
+    };
+  }
+
+  // 配置了 API 地址时，请求接口
+  return await request<IGetTimezoneListResponse>(timezoneListUrl, {
+    method: 'POST',
+    data: payload,
+  });
+}
+
+// 导出类型
+export type { ITimezone, IGetTimezoneListResponse } from './type';

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

@@ -0,0 +1,30 @@
+/**
+ * 配置管理相关类型定义
+ */
+
+/**
+ * 时区信息
+ */
+export interface ITimezone {
+  /** UTC偏移量 */
+  utc_offset: number;
+  /** 时区地区 */
+  region: string;
+}
+
+/**
+ * 获取时区配置请求（空请求体）
+ */
+export type IGetTimezoneListRequest = Record<string, never>;
+
+/**
+ * 获取时区配置响应
+ */
+export interface IGetTimezoneListResponse {
+  result: {
+    code: number;
+    message?: string;
+  };
+  /** 时区列表 */
+  timezone_list?: ITimezone[];
+}

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

@@ -1,8 +1,27 @@
 import { request } from '@/common/request';
 import type { IUserInfo } from '@/common/auth/type';
+import { getCurrentLocale, type SupportedLocale } from '@/common/locale';
 
 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,
+};
+
+/**
+ * 获取当前语言对应的 API lang 参数
+ */
+function getApiLangParam(): number {
+  const locale = getCurrentLocale();
+  return LOCALE_TO_LANG[locale] ?? 1;
+}
+
 export interface IUserInfoResponse {
   code: number;
   data: IUserInfo;
@@ -15,11 +34,19 @@ export interface IUserInfoResponse {
  * @throws 当接口返回非 200 code 时抛出错误
  */
 export async function fetchUserInfo(): Promise<IUserInfo> {
-  const response = await request<IUserInfoResponse>(USER_INFO_API, {
+  const lang = getApiLangParam();
+  const url = `${USER_INFO_API}?lang=${lang}`;
+
+  const response = await request<IUserInfoResponse>(url, {
     method: 'GET',
+    skipProxy: true,
   });
   if (response.code === 200 && response.data) {
-    return response.data;
+    const data = response.data;
+    if (!data.user_name) {
+      data.user_name = data.username || '';
+    }
+    return data;
   }
   throw new Error(response.msg || '获取用户信息失败');
 }

package/generators/micro-react/templates/apps/layout/tailwind.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx,less,css}',
+    // 排除 .umi 目录，避免 Tailwind 重建时触发自己的 watch，导致无限循环
+    '!./src/.umi/**',
+    '!./src/.umi-production/**',
     './README.md',
     './docs/**/*.{md,mdx}',
   ],