@spacego/fe-components 0.0.1-alpha.2 → 0.0.1-alpha.4

package/src/router/permission.tsx

@@ -1,134 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2024-08-19 21:19:46
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 11:30:00
- * @description: permission 权限控制的最佳使用
- *
- * 用法：/login、/logout、/(id: 'root') 为一级路由，所有功能路由均存在于/下 或者新建一级路由
- *
- * 受保护：需要登录后才能访问的路由 使用loader: ProtectedLoader
- * 登录：外部调用登录接口成功后 调用用 useSubmit() 方法
- *      useSubmit()({ token, redirectTo: params.get('from') || '/' }, { method: 'post', replace: true });
- * 登出：有外部接口时 在接口成功后 调用 useFetcher() 方法
- *      useFetcher().submit(null, { action: '/logout', method: 'post' });
- *
- * 所有逻辑均可根据实际情况进行修改
- */
-import { message } from 'antd';
-import { type LoaderFunctionArgs, redirect } from 'react-router-dom';
-
-export type AuthStatus = {
-  token: string | void | null;
-}
-
-export interface TokenHelpers {
-  /** 获取token */
-  getToken: () => string | void | null;
-  /** 设置token */
-  setToken: (token: string) => void;
-  /** 移除token */
-  removeToken: () => void;
-}
-
-/**
- * 创建权限相关的 loader 和 action
- * @param tokenHelpers token 操作方法
- */
-export function createPermissionHelpers(tokenHelpers: TokenHelpers) {
-  const { getToken, setToken, removeToken } = tokenHelpers;
-
-  /**
-   * root根目录的Loader 根据需要设置使用
-   */
-  function RootLoader(): AuthStatus {
-    const token = getToken();
-
-    return { token };
-    //  Get our logged in user, if they exist, from the root route loader data
-    //  const { token } = useRouteLoaderData('root') as AuthStatus;
-  }
-
-  /**
-   * 受保护页面的Loader
-   */
-  function ProtectedLoader({ request }: LoaderFunctionArgs) {
-    // If the user is not logged in and tries to access `/protected`, we redirect
-    // them to `/login` with a `from` parameter that allows login to redirect back
-    // to this page upon successful authentication
-    const token = getToken();
-
-    if(!token) {
-      const params = new URLSearchParams();
-      params.set('from', new URL(request.url).pathname);
-      return redirect('/auth/login?' + params.toString());
-    }
-    return null;
-  }
-
-  /**
-   * login页面的Loader 主要用来频闭登陆后再次进入/login
-   * 所有有该需求的页面都可以使用
-   */
-  async function LoginLoader() {
-    const token = getToken();
-    if(token) {
-      return redirect('/');
-    }
-    return null;
-  }
-
-  /**
-   * 登录的action 登陆后自动跳转到之前想要访问的页面
-   */
-  async function LoginAction({ request }: LoaderFunctionArgs) {
-    const formData = await request.formData();
-    const token = formData.get('token') as string | null;
-
-    // Validate our form inputs and return validation errors via useActionData()
-    if(!token) {
-      return message.warning('You must provide a token to log in');
-      // return {
-      // error: 'You must provide a token to log in'
-      /**
-       * action内return error时 只能通过 useActionData() as { error: string } | undefined 来获取，根据需要使用
-       */
-      // };
-    }
-
-    // Sign in and redirect to the proper destination if successful.
-    try {
-      setToken(token);
-      message.success('登录成功');
-    } catch(error) {
-      // Unused as of now but this is how you would handle invalid
-      // username/password combinations - just like validating the inputs
-      // above
-      return message.warning('Invalid login attempt');
-      // return {
-      //   error: 'Invalid login attempt'
-      // };
-    }
-
-    const redirectTo = formData.get('redirectTo') as string | null;
-    return redirect(redirectTo || '/');
-  }
-
-  /**
-   * 退出登录的action
-   */
-  function LogoutAction() {
-    // We signout in a "resource route" that we can hit from a fetcher.Form
-    removeToken();
-    message.success('退出成功');
-    return redirect('/auth/login');
-  }
-
-  return {
-    RootLoader,
-    ProtectedLoader,
-    LoginLoader,
-    LoginAction,
-    LogoutAction
-  };
-}

package/src/router/routes.tsx

@@ -1,94 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2024-03-29 16:17:20
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 12:15:00
- * @description: 路由表
- */
-import type { ComponentType } from 'react';
-import type { RouteObject } from 'react-router-dom';
-
-import type { createPermissionHelpers } from './permission';
-import { createLazyComponent, type TModule } from './utils';
-
-/**
- * 创建默认路由表
- * @param modules 页面模块集合
- * @param permissionHelpers 权限相关的 loader 和 action
- * @param BaseLayout 基础布局组件
- */
-export function createDefaultRoutes(
-  modules: TModule,
-  permissionHelpers: ReturnType<typeof createPermissionHelpers>,
-  BaseLayout: ComponentType<any>
-): RouteObject[] {
-  const { RootLoader, LoginLoader, LoginAction, LogoutAction } = permissionHelpers;
-
-  /**
-   * 路由表
-   *
-   * Component vs element 区别：
-   *
-   * 1. Component (推荐用于简单场景)
-   *    - 接收组件类型，React Router 自动实例化
-   *    - 自动传递路由数据（通过 useLoaderData() 获取）
-   *    - 不能传递自定义 props
-   *    - 代码更简洁
-   *
-   * 2. element (用于需要传递 props 的场景)
-   *    - 接收 React 元素（JSX）
-   *    - 可以传递自定义 props
-   *    - 可以包装 Suspense、ErrorBoundary 等
-   *    - 仍然可以通过 useLoaderData() 获取 loader 数据
-   */
-  const routes: RouteObject[] = [
-    {
-      id: 'root',
-      path: '/',
-      // 使用 element: 可以传递自定义 props
-      element: <BaseLayout layoutType="basic" />,
-      loader: RootLoader,
-      children: [] // ...dynamicRoutes
-    },
-    {
-      id: 'blank',
-      path: '/blank',
-      element: <BaseLayout layoutType="blank" />,
-      loader: RootLoader,
-      children: []
-    },
-    {
-      id: 'auth',
-      element: <BaseLayout layoutType="auth" />,
-      loader: RootLoader,
-      children: [
-        {
-          path: '/auth/login',
-          loader: LoginLoader,
-          action: LoginAction,
-          // 使用 Component: 简洁，但不能传递自定义 props
-          Component: createLazyComponent('/basics/login', modules)
-        },
-        {
-          path: '/auth/register',
-          loader: LoginLoader,
-          action: LoginAction,
-          // 使用 Component: 简洁，但不能传递自定义 props
-          Component: createLazyComponent('/basics/register', modules)
-        }
-      ]
-    },
-    {
-      // logout路由只用来退出登录，不展示页面
-      path: '/logout',
-      action: LogoutAction,
-      Component: createLazyComponent('/basics/error', modules)
-    },
-    {
-      path: '*',
-      Component: createLazyComponent('/basics/error', modules)
-    }
-  ];
-
-  return routes;
-}

package/src/router/utils.ts

@@ -1,283 +0,0 @@
-import { type ComponentType, lazy } from 'react';
-import type { RouteObject } from 'react-router-dom';
-
-import type { IRoute, MenuType } from '@/typings';
-
-export type TModule = {
-  [keys in string]: () => Promise<{ default: ComponentType<any>; }>
-}
-
-/**
- * 获取页面路径
- * @param name
- * @returns
- */
-export function getPath(name: string) {
-  // 移除开头的第一个斜杠
-  const cleanName = name.replace(/^\/+/, '');
-  return `/src/pages/${cleanName}/index.tsx`;
-}
-
-/**
- * 获取动态页面
- * @param name
- * @param modules
- * @returns
- */
-export function createLazyComponent(name: string, modules: TModule) {
-  // return lazy(components[`${name}/index.tsx`])
-  const moduleFn = modules[getPath(name)];
-  if(!moduleFn) {
-    console.warn(`Module not found for path: ${name}`);
-    return undefined;
-  }
-  return lazy(moduleFn);
-}
-
-/**
- * 规范化路径格式
- * @param path 路径
- * @returns 规范化后的路径
- */
-function normalizePath(path?: string): string | undefined {
-  if(!path) return void 0;
-  // 确保路径以 / 开头
-  return path.startsWith('/') ? path : `/${path}`;
-}
-
-/** 路由节点类型 */
-type RouteNode = RouteObject & { parentId: string; children?: RouteNode[] };
-
-/** 菜单项类型（用于 antd Menu 组件） */
-export interface MenuItem {
-  key: string;
-  label: string;
-  icon?: string;
-  /** 对应的路由节点信息（不包含 children） */
-  routeNode?: Omit<RouteNode, 'children'>;
-  children?: MenuItem[];
-  menuType?: MenuType;
-  /** 是否独立菜单 */
-  isIndependentMenu?: boolean;
-}
-
-/** 处理结果类型 */
-export interface ProcessedRoutes {
-  /** react-router 路由配置 */
-  routes: RouteNode[];
-  /** antd Menu 菜单配置 */
-  menus: MenuItem[];
-  /** 按钮权限列表 */
-  permissions: string[];
-}
-
-/**
- * 按 sort 字段排序
- */
-function sortByOrder(a: IRoute, b: IRoute): number {
-  return (a.sort ?? 0) - (b.sort ?? 0);
-}
-
-/**
- * 将扁平的 IRoute 数组处理成三份数据
- * @param rawRoutes 扁平路由数组
- * @param modules 页面模块集合
- * @param protectedLoader 受保护路由的加载器
- * @returns { routes, menus, permissions }
- */
-export function processRoutes(
-  rawRoutes: IRoute[],
-  modules: TModule,
-  protectedLoader?: any
-): ProcessedRoutes {
-  // 按 sort 排序
-  const sortedRoutes = [...rawRoutes].sort(sortByOrder);
-
-  // 按类型分组：1目录、2菜单、3按钮
-  const routesByType = sortedRoutes.reduce((acc, route) => {
-    const type = route.menuType || 2;
-    if(!acc[type]) acc[type] = [];
-    acc[type].push(route);
-    return acc;
-  }, {} as Record<MenuType, IRoute[]>);
-
-  // 提取按钮权限列表（使用 menuCode 作为权限标识）
-  const permissions = (routesByType[3] || [])
-    .filter(r => r.menuCode)
-    .map(r => r.menuCode!);
-
-  // 只处理目录和菜单（用于路由和菜单）
-  const directoriesAndMenus = [
-    ...(routesByType[1] || []),
-    ...(routesByType[2] || [])
-  ].sort(sortByOrder);
-
-  // 构建路由树
-  const routeMap = new Map<string, RouteNode>();
-  const rootRoutes: RouteNode[] = [];
-
-  // 第一遍遍历：转换为 RouteNode
-  directoriesAndMenus.forEach(route => {
-    const parentId = route.parentId || '/';
-    const path = normalizePath(route.path);
-
-    const node: RouteNode = {
-      id: route.menuId,
-      path,
-      parentId,
-      // 将 title、icon 放入 handle 字段
-      handle: {
-        title: route.title,
-        icon: route.icon,
-        isShowMenu: route.isShowMenu ?? true,
-        isIndependentMenu: route.isIndependentMenu ?? false,
-        activeRouteMenuId: route.activeRouteMenuId ?? route.menuId
-      }
-    };
-
-    // 菜单类型(2)需要组件（使用 menuCode 作为组件路径）
-    if(route.menuType === 2 && route.menuCode) {
-      const Component = createLazyComponent(route.menuCode, modules);
-      if(Component) {
-        node.Component = Component;
-      }
-
-      if(route.index) {
-        // index 路由需要特殊处理：不能同时有 path 和 index
-        node.index = true as any;
-        delete node.path;
-      }
-
-      if(route.protected !== false && protectedLoader) {
-        node.loader = protectedLoader;
-      }
-    }
-
-    routeMap.set(route.menuId, node);
-  });
-
-  // 第二遍遍历：构建父子关系
-  directoriesAndMenus.forEach(route => {
-    const node = routeMap.get(route.menuId)!;
-    const parentId = route.parentId;
-
-    if(parentId && parentId !== '/') {
-      const parent = routeMap.get(parentId);
-
-      if(parent) {
-        if(!parent.children) parent.children = [];
-        parent.children.push(node);
-      } else {
-        rootRoutes.push(node);
-      }
-    } else {
-      rootRoutes.push(node);
-    }
-  });
-
-  // 构建菜单树（只包含需要在菜单中显示的项）
-  const menuMap = new Map<string, MenuItem>();
-  const rootMenus: MenuItem[] = [];
-
-  // 过滤出需要在菜单中显示的项（isShowMenu !== false，默认为true）
-  const menuVisibleRoutes = directoriesAndMenus.filter(route => route.isShowMenu !== false);
-
-  // 第一遍遍历：转换为 MenuItem
-  menuVisibleRoutes.forEach(route => {
-    const routeNode = routeMap.get(route.menuId);
-    // 从 RouteNode 中提取信息，去除 children 字段
-    const routeNodeInfo: Omit<RouteNode, 'children'> | undefined = routeNode
-      ? (() => {
-        const { children, ...rest } = routeNode;
-        return rest;
-      })()
-      : undefined;
-
-    const menuItem: MenuItem = {
-      key: route.menuId,
-      label: route.title || route.menuId,
-      icon: route.icon,
-      routeNode: routeNodeInfo,
-      menuType: route.menuType,
-      isIndependentMenu: route.isIndependentMenu
-    };
-
-    menuMap.set(route.menuId, menuItem);
-  });
-
-  // 第二遍遍历：构建父子关系
-  menuVisibleRoutes.forEach(route => {
-    const menuItem = menuMap.get(route.menuId)!;
-    const parentId = route.parentId;
-
-    if(parentId && parentId !== '/') {
-      const parent = menuMap.get(parentId);
-
-      if(parent) {
-        if(!parent.children) parent.children = [];
-        parent.children.push(menuItem);
-      } else {
-        rootMenus.push(menuItem);
-      }
-    } else {
-      rootMenus.push(menuItem);
-    }
-  });
-
-  /**
-   * 递归处理菜单：根据 isIndependentMenu 字段处理独立菜单
-   * 如果是独立菜单，在 menus 内移除对应目录，直接展示此菜单
-   * 独立菜单的判断只针对直接父级，不是无限向外查找
-   */
-  function simplifyMenus(menus: MenuItem[]): MenuItem[] {
-    const result: MenuItem[] = [];
-
-    menus.forEach(menu => {
-      // 先递归处理子菜单
-      if(menu.children && menu.children.length > 0) {
-        menu.children = simplifyMenus(menu.children);
-      }
-
-      // 如果是目录，检查是否有独立菜单的子菜单
-      if(menu.menuType === 1 && menu.children && menu.children.length > 0) {
-        // 查找所有独立菜单的子菜单（只处理直接子菜单，不递归）
-        const independentMenus = menu.children.filter(child => {
-          // 只处理直接子菜单，且是独立菜单，且没有被提升过的
-          return child.isIndependentMenu === true &&
-            child.menuType === 2 &&
-            !(child as any).customType;
-        });
-
-        if(independentMenus.length > 0) {
-          // 如果有独立菜单，移除目录，直接展示独立菜单
-          // 将独立菜单提升到当前层级，并添加内部标识
-          const promotedMenus = independentMenus.map(child => ({
-            ...child,
-            customType: 'menu-promoted' // 内部标识，表示这个菜单是被提升的
-          }));
-
-          // 保留其他非独立菜单
-          const otherMenus = menu.children.filter(child => {
-            return !(child.isIndependentMenu === true && child.menuType === 2 && !(child as any).customType);
-          });
-
-          result.push(...promotedMenus, ...otherMenus);
-        } else {
-          // 没有独立菜单，保留原目录
-          result.push(menu);
-        }
-      } else {
-        // 不是目录，或者没有子菜单，直接保留
-        result.push(menu);
-      }
-    });
-
-    return result;
-  }
-
-  return {
-    routes: rootRoutes,
-    menus: simplifyMenus(rootMenus),
-    permissions
-  };
-}

package/src/store/index.ts

@@ -1,9 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2024-04-01 15:34:55
- * @LastEditors: dushuai
- * @LastEditTime: 2026-01-31 23:38:26
- * @description: store
- */
-export * from './modules/layout-config.store';
-export * from './modules/theme.store';