generator-mico-cli 0.1.18

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

@@ -0,0 +1,165 @@
+import type { ParsedMenuItem } from '@/common/menu';
+import { getWindowMenus, parseMenuItems } from '@/common/menu';
+import IconFont from '@/components/IconFont';
+import { useMenuState } from '@/hooks/useMenuState';
+import { useTheme } from '@/hooks/useTheme';
+import { Layout, Menu } from '@arco-design/web-react';
+import * as Icons from '@arco-design/web-react/icon';
+import React, { useMemo, useRef } from 'react';
+import './index.less';
+
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+const Sider = Layout.Sider;
+
+/**
+ * 图标名称到 Arco Icon 组件的映射
+ * 用于处理自定义图标名称与 Arco 图标名称的差异
+ */
+const ICON_ALIAS_MAP: Record<string, keyof typeof Icons> = {
+  Package: 'IconApps',
+  // 可以在这里添加更多别名映射
+};
+
+/**
+ * 根据图标名称获取对应的 Icon 组件
+ * 优先使用 Icon${name} 格式，然后查找别名映射
+ */
+const getIconComponent = (iconName: string): React.ReactNode => {
+  if (!iconName) return null;
+
+  // 尝试直接匹配 Icon${name} 格式
+  const iconKey = `Icon${iconName}` as keyof typeof Icons;
+  const IconComponent = Icons[iconKey] as React.ComponentType | undefined;
+
+  if (IconComponent) {
+    return <IconComponent />;
+  }
+
+  // 尝试别名映射
+  const aliasKey = ICON_ALIAS_MAP[iconName];
+  if (aliasKey) {
+    const AliasIcon = Icons[aliasKey] as React.ComponentType | undefined;
+    if (AliasIcon) {
+      return <AliasIcon />;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Recursively render menu items
+ */
+const renderMenuItems = (items: ParsedMenuItem[]): React.ReactNode => {
+  return items.map((item) => {
+    const icon = getIconComponent(item.icon);
+
+    // External link type
+    if (item.type === 'link' && item.path) {
+      return (
+        <MenuItem
+          key={item.key}
+          onClick={() => window.open(item.path, '_blank')}
+        >
+          {icon}
+          {item.label}
+        </MenuItem>
+      );
+    }
+
+    // Has sub-menu
+    if (item.children && item.children.length > 0) {
+      return (
+        <SubMenu
+          key={item.key}
+          title={
+            <>
+              {icon}
+              {item.label}
+            </>
+          }
+        >
+          {renderMenuItems(item.children)}
+        </SubMenu>
+      );
+    }
+
+    // Page type
+    return (
+      <MenuItem key={item.key}>
+        {icon}
+        {item.label}
+      </MenuItem>
+    );
+  });
+};
+
+interface LayoutMenuProps {
+  collapsed?: boolean;
+}
+
+const LayoutMenu: React.FC<LayoutMenuProps> = () => {
+  const siderRef = useRef<HTMLDivElement>(null);
+  const { isDark } = useTheme();
+
+  // Parse menu data
+  const menuItems = useMemo(() => {
+    const menus = getWindowMenus();
+    return parseMenuItems(menus);
+  }, []);
+
+  // 使用菜单状态 Hook
+  const {
+    selectedKeys,
+    openKeys,
+    collapsed,
+    handleClickMenuItem,
+    handleCollapsed,
+    setOpenKeys,
+  } = useMenuState({ menuItems });
+
+  // 点击触发按钮图标
+  const clickTriggerBtnIcon = collapsed
+    ? 'webcs-outline_fold'
+    : 'webcs-outline_unfold';
+
+  // 点击触发按钮
+  const clickTriggerBtn = (
+    <div
+      className={`click-trigger-btn ${collapsed ? 'collapsed' : ''} mr-3`}
+      onClick={() => handleCollapsed(collapsed, 'clickTrigger')}
+    >
+      <IconFont type={clickTriggerBtnIcon} fontSize={24} />
+    </div>
+  );
+
+  return (
+    <Sider
+      ref={siderRef}
+      collapsed={collapsed}
+      onCollapse={handleCollapsed}
+      collapsible
+      breakpoint="xl"
+      className="<%= projectName %>-sider"
+      trigger={clickTriggerBtn}
+      theme={isDark ? 'dark' : 'light'}
+    >
+      <Menu
+        className="layout-menu"
+        mode="vertical"
+        collapse={collapsed}
+        selectedKeys={selectedKeys}
+        openKeys={openKeys}
+        onClickMenuItem={handleClickMenuItem}
+        onClickSubMenu={(_, newOpenKeys) => setOpenKeys(newOpenKeys)}
+        style={{ width: '100%', height: '100%' }}
+        theme={isDark ? 'dark' : 'light'}
+      >
+        {renderMenuItems(menuItems)}
+      </Menu>
+    </Sider>
+  );
+};
+
+export default LayoutMenu;

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

@@ -0,0 +1,71 @@
+@import '@/styles/variables.less';
+
+.layout-container {
+  min-width: 100vw;
+  background: @color-fill-1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .layout-content {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+
+    .layout-content-right {
+      padding: @spacing-md @spacing-lg;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .layout-content-outlet {
+        flex: 1;
+        overflow: hidden;
+        background: none;
+        border-radius: @border-radius-lg;
+        position: relative;
+      }
+    }
+  }
+
+  .arco-spin-children::after {
+    background-color: color-mix(in srgb, var(--color-text-5) 60%, transparent);
+  }
+}
+
+.arco-form {
+  .arco-form-label-item {
+    label {
+      span,
+      strong > svg {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.<%= projectName %>-sider {
+  box-shadow: none;
+
+  .arco-layout-sider-trigger {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .click-trigger-btn {
+    cursor: pointer;
+    display: flex;
+  }
+
+  .click-trigger-btn:not(.collapsed) {
+    background-color: @color-fill-1;
+    border-radius: @border-radius-lg;
+  }
+
+  .click-trigger-btn.collapsed {
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,91 @@
+import { layoutLogger } from '@/common/logger';
+import { extractRoutes, findRouteByPath, getWindowMenus } from '@/common/menu';
+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 React, { Suspense, useMemo } from 'react';
+import LayoutHeader from './components/header';
+import LayoutMenu from './components/menu';
+import './index.less';
+
+const { Content } = Layout;
+
+/**
+ * 主布局组件
+ * 注意：Umi Max 使用 React Router 6，应该使用 <Outlet /> 渲染子路由，而不是 children
+ */
+const BasicLayout: React.FC = () => {
+  const location = useLocation();
+
+  // 解析路由配置
+  const routes = useMemo(() => {
+    const menus = getWindowMenus();
+    return extractRoutes(menus);
+  }, []);
+
+  // 查找当前路由配置
+  const currentRoute = useMemo(() => {
+    return findRouteByPath(routes, location.pathname);
+  }, [routes, location.pathname]);
+
+  // 判断是否需要显示布局
+  const showLayout = !NO_AUTH_ROUTE_LIST.includes(location.pathname);
+
+  // 渲染页面内容
+  const renderContent = () => {
+    layoutLogger.log('renderContent:', {
+      pathname: location.pathname,
+      currentRoute,
+      routes,
+    });
+
+    // 如果有匹配的动态路由配置且需要加载微应用
+    if (currentRoute?.loadType === 'microapp' && currentRoute.entry) {
+      layoutLogger.log('Loading microapp:', currentRoute);
+      return (
+        <MicroAppLoader
+          entry={currentRoute.entry}
+          // 使用 path 作为微应用唯一标识（如 /homepage）
+          name={currentRoute.path}
+          // 显示名称用于 loading 提示
+          displayName={currentRoute.name}
+        />
+      );
+    }
+
+    // 默认：使用 Outlet 渲染内部路由
+    return <Outlet />;
+  };
+
+  // 不需要布局的页面
+  if (!showLayout) {
+    return (
+      <Suspense
+        fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+      >
+        <Outlet />
+      </Suspense>
+    );
+  }
+
+  return (
+    <Layout className="layout-container">
+      <LayoutHeader />
+      <Layout className="layout-content">
+        <LayoutMenu />
+        <Layout className="layout-content-right">
+          <Content className="layout-content-outlet">
+            <Suspense
+              fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+            >
+              {renderContent()}
+            </Suspense>
+          </Content>
+        </Layout>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default BasicLayout;

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

@@ -0,0 +1,20 @@
+export default {
+  'menu.home': 'Home',
+  'menu.settings': 'Settings',
+  'menu.logout': 'Logout',
+
+  'header.theme.light': 'Switch to Light Mode',
+  'header.theme.dark': 'Switch to Dark Mode',
+
+  'error.404.title': 'Page Not Found',
+  'error.404.description': 'Sorry, the page you visited does not exist.',
+  'error.404.back': 'Back to Home',
+
+  'error.403.title': 'Access Denied',
+  'error.403.description':
+    'Sorry, you do not have permission to access this page.',
+  'error.403.back': 'Back to Home',
+
+  'loading.text': 'Loading...',
+  'loading.error': 'Failed to load',
+};

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

@@ -0,0 +1,19 @@
+export default {
+  'menu.home': '首页',
+  'menu.settings': '设置',
+  'menu.logout': '退出登录',
+
+  'header.theme.light': '切换到亮色模式',
+  'header.theme.dark': '切换到暗色模式',
+
+  'error.404.title': '页面不存在',
+  'error.404.description': '抱歉，您访问的页面不存在。',
+  'error.404.back': '返回首页',
+
+  'error.403.title': '无权限访问',
+  'error.403.description': '抱歉，您没有权限访问此页面。',
+  'error.403.back': '返回首页',
+
+  'loading.text': '加载中...',
+  'loading.error': '加载失败',
+};

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

@@ -0,0 +1,13 @@
+// 全局共享数据示例
+import { DEFAULT_NAME } from '@/constants';
+import { useState } from 'react';
+
+const useUser = () => {
+  const [name, setName] = useState<string>(DEFAULT_NAME);
+  return {
+    name,
+    setName,
+  };
+};
+
+export default useUser;

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

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 80px;
+}

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

@@ -0,0 +1,7 @@
+import styles from './index.less';
+
+const HomePage: React.FC = () => {
+  return <div className={styles.container}>首页2</div>;
+};
+
+export default HomePage;

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

@@ -0,0 +1,171 @@
+import {
+  createAuthError,
+  createBusinessError,
+  notifyHostError,
+} from '@/common/micro';
+import { Message, Notification } from '@arco-design/web-react';
+import type { RequestConfig } from '@umijs/max';
+
+// 错误处理方案： 错误类型
+enum ErrorShowType {
+  SILENT = 0,
+  WARN_MESSAGE = 1,
+  ERROR_MESSAGE = 2,
+  NOTIFICATION = 3,
+  REDIRECT = 9,
+}
+
+// 与后端约定的响应数据格式
+interface ResponseStructure {
+  success: boolean;
+  data: unknown;
+  errorCode?: number;
+  errorMessage?: string;
+  showType?: ErrorShowType;
+}
+
+// 业务错误类型
+interface BizError extends Error {
+  name: 'BizError';
+  info: ResponseStructure;
+}
+
+// Axios 错误类型
+interface AxiosLikeError extends Error {
+  response?: {
+    status: number;
+    data?: unknown;
+  };
+  request?: unknown;
+  config?: {
+    url?: string;
+  };
+}
+
+// 错误处理选项
+interface ErrorHandlerOptions {
+  skipErrorHandler?: boolean;
+}
+
+/**
+ * 类型守卫：判断是否为业务错误
+ */
+const isBizError = (error: unknown): error is BizError => {
+  return error instanceof Error && error.name === 'BizError' && 'info' in error;
+};
+
+/**
+ * 类型守卫：判断是否为 Axios 类错误
+ */
+const isAxiosLikeError = (error: unknown): error is AxiosLikeError => {
+  return error instanceof Error && ('response' in error || 'request' in error);
+};
+
+/**
+ * @name 错误处理
+ * pro 自带的错误处理， 可以在这里做自己的改动
+ * @doc https://umijs.org/docs/max/request#配置
+ */
+export const errorConfig: RequestConfig = {
+  // 错误处理： umi@3 的错误处理方案。
+  errorConfig: {
+    // 错误抛出
+    errorThrower: (res) => {
+      const { success, data, errorCode, errorMessage, showType } =
+        res as unknown as ResponseStructure;
+      if (!success) {
+        const error = new Error(errorMessage) as BizError;
+        error.name = 'BizError';
+        error.info = { success, errorCode, errorMessage, showType, data };
+        throw error;
+      }
+    },
+    // 错误接收及处理
+    errorHandler: (error: unknown, opts: unknown) => {
+      const options = opts as ErrorHandlerOptions | undefined;
+      if (options?.skipErrorHandler) throw error;
+
+      // 我们的 errorThrower 抛出的错误
+      if (isBizError(error)) {
+        const errorInfo = error.info;
+        const { errorMessage, errorCode } = errorInfo;
+
+        // 通知主应用业务错误
+        notifyHostError(
+          createBusinessError(errorMessage ?? '业务错误', errorCode, 'http', {
+            showType: errorInfo.showType,
+          }),
+        );
+
+        switch (errorInfo.showType) {
+          case ErrorShowType.SILENT:
+            // do nothing
+            break;
+          case ErrorShowType.WARN_MESSAGE:
+            Message.warning(errorMessage ?? 'Warning');
+            break;
+          case ErrorShowType.ERROR_MESSAGE:
+            Message.error(errorMessage ?? 'Error');
+            break;
+          case ErrorShowType.NOTIFICATION:
+            Notification.normal({
+              title: errorMessage,
+              content: errorCode,
+            });
+            break;
+          case ErrorShowType.REDIRECT:
+            // TODO: redirect
+            break;
+          default:
+            Message.error(errorMessage ?? 'Error');
+        }
+        return;
+      }
+
+      if (isAxiosLikeError(error)) {
+        if (error.response) {
+          // Axios 的错误
+          // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
+          const status = error.response.status;
+          const errorMessage = `Response status:${status}`;
+
+          // 根据 HTTP 状态码区分鉴权错误和业务错误
+          if (status === 401 || status === 403) {
+            // 鉴权失败
+            notifyHostError(createAuthError(errorMessage, status, 'http'));
+          } else {
+            // 其他业务错误
+            notifyHostError(
+              createBusinessError(errorMessage, status, 'http', {
+                url: error.config?.url,
+              }),
+            );
+          }
+
+          Message.error(errorMessage);
+        } else if (error.request) {
+          // 请求已经成功发起，但没有收到响应
+          const errorMessage = 'None response! Please retry.';
+          notifyHostError(
+            createBusinessError(errorMessage, 'NO_RESPONSE', 'http', {
+              url: error.config?.url,
+            }),
+          );
+          Message.error(errorMessage);
+        }
+        return;
+      }
+
+      // 发送请求时出了点问题
+      const errorMessage = 'Request error, please retry.';
+      const errorObj =
+        error instanceof Error ? error : new Error(String(error));
+      notifyHostError(
+        createBusinessError(errorMessage, 'REQUEST_ERROR', 'http', {
+          message: errorObj.message,
+        }),
+      );
+      Message.error(errorMessage);
+    },
+  },
+};

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

@@ -0,0 +1,37 @@
+import { request } from '@/common/request';
+
+const AUTH_CHECK = '/api/authentication/check/';
+
+const AUTH_LOGIN = '/api/authentication/login/';
+
+export interface ILoginReq {
+  email: string;
+  password: string;
+}
+
+export interface ILoginRsp {
+  code: number;
+  msg?: string;
+  data?: {
+    access: string;
+    refresh?: string;
+    [key: string]: any;
+  };
+}
+
+export async function checkStaffAuth(): Promise<any> {
+  const response = await request(AUTH_CHECK);
+  console.warn('checkStaffAuth response', JSON.stringify(response));
+  return response;
+}
+
+/**
+ * 员工登录，仅用于测试环境测试使用
+ */
+export async function loginStaff(payload: ILoginReq): Promise<ILoginRsp> {
+  const response = await request<ILoginRsp>(AUTH_LOGIN, {
+    method: 'POST',
+    data: payload,
+  });
+  return response;
+}

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

@@ -0,0 +1,40 @@
+import { request } from '@/common/request';
+
+export interface SignUrlRequestPayload {
+  md5_content: string;
+  file_extension: string;
+  dir_category: number;
+}
+
+export interface SignUrlResponse {
+  upload_url: string;
+  file_url: string;
+  file_key: string;
+  content_type?: string;
+  content_md5?: string;
+}
+
+/**
+ * 获取 OSS 上传签名 URL
+ *
+ * 端点路径由 globalConfig.api.endpoints.ossSignUrl 配置：
+ * - CS 模式：默认使用 '/im_crm_platform/internal/workbench/file/signUrl'
+ * - CRM 模式：可配置不同的端点路径
+ *
+ * URL 的完整解析（baseUrl + proxyPath）由 request 模块统一处理。
+ *
+ * @param payload 请求参数
+ * @returns 签名 URL 响应
+ */
+export async function fetchUploadSignedUrl(
+  payload: SignUrlRequestPayload,
+): Promise<SignUrlResponse> {
+  const response = await request<SignUrlResponse>(
+    '/im_crm_platform/internal/workbench/file/signUrl',
+    {
+      method: 'POST',
+      data: payload,
+    },
+  );
+  return response;
+}