@spacego/fe-components 0.0.1-alpha.1

package/src/fe-layouts/context/global-context.d.ts

@@ -0,0 +1,241 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-30 23:02:55
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 12:45:00
+ * @description: global context
+ */
+import { MenuProps } from 'antd';
+import { ReactNode } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+import { MenuItem } from '@/router';
+
+export interface IUserInfo {
+  username?: string;
+  avatar?: string;
+  roleName?: string;
+  [key: string]: any;
+}
+
+export interface IGlobalContextProps {
+  /**
+   * @name 项目名称
+   */
+  appName?: ReactNode;
+  /**
+   * @name 项目logo
+   */
+  logo?: ReactNode;
+  /**
+   * @name 通知的reactNode
+   */
+  noticeRender?: ReactNode;
+  /**
+   * @name 项目说明
+   */
+  description?: ReactNode;
+  /**
+   * @name 项目详细说明
+   */
+  descriptionDetail?: ReactNode;
+  /**
+   * @name Copyright
+   */
+  copyright?: ReactNode;
+  /**
+   * @name 用户菜单
+   */
+  userMenuItems?: MenuProps['items'];
+  /**
+   * @name 用户信息
+   */
+  userInfo?: IUserInfo;
+  /**
+   * @name 侧边栏前置内容
+   */
+  sidebarBefore?: ReactNode;
+  /**
+   * @name 侧边栏后置内容
+   */
+  sidebarAfter?: ReactNode;
+  /**
+   * @name tabs前置内容
+   */
+  tabsBefore?: ReactNode;
+  /**
+   * @name tabs后置内容
+   */
+  tabsAfter?: ReactNode;
+  /**
+   * @name header按钮组render
+   */
+  headerActionsRender?: ReactNode;
+  /**
+   * @name 搜索框render
+   */
+  searchRender?: ReactNode;
+  /**
+   * @name 面包屑前置render
+   */
+  breadcrumbBeforeRender?: ReactNode;
+  /**
+   * @name 登录凭证
+   */
+  token?: string;
+  /**
+   * @name 菜单列表
+   */
+  menus?: MenuItem[];
+  /**
+   * @name 路由配置
+   */
+  routes?: RouteObject[];
+}
+
+export interface IGlobalContext {
+  /**
+   * @name 项目名称
+   */
+  appName?: ReactNode;
+  /**
+   * @name 通知的reactNode
+   */
+  noticeRender?: ReactNode;
+  /**
+   * @name 项目logo
+   */
+  logo?: ReactNode;
+  /**
+   * @name 项目说明
+   */
+  description?: ReactNode;
+  /**
+   * @name 项目详细说明
+   */
+  descriptionDetail?: ReactNode;
+  /**
+   * @name Copyright
+   */
+  copyright?: ReactNode;
+  /**
+   * @name 用户菜单
+   */
+  userMenuItems?: MenuProps['items'];
+  /**
+   * @name 用户信息
+   */
+  userInfo?: IUserInfo;
+  /**
+   * @name 设置项目名称
+   */
+  setAppName: (name?: ReactNode) => void;
+  /**
+   * @name 设置通知的reactNode，用于在顶部通知图标点击显示通知
+   */
+  setNoticeRender: (render?: ReactNode) => void;
+  /**
+   * @name 设置项目logo
+   */
+  setLogo: (logo?: ReactNode) => void;
+  /**
+   * @name 设置项目说明
+   */
+  setDescription: (description?: ReactNode) => void;
+  /**
+   * @name 设置项目详细说明
+   */
+  setDescriptionDetail: (descriptionDetail?: ReactNode) => void;
+  /**
+    * @name 设置Copyright
+    */
+  setCopyright: (copyright?: ReactNode) => void;
+  /**
+   * @name 设置用户菜单
+   */
+  setUserMenuItems: (items?: MenuProps['items']) => void;
+  /**
+   * @name 设置用户信息
+   */
+  setUserInfo: (info?: IUserInfo) => void;
+  /**
+   * @name 侧边栏前置内容
+   */
+  sidebarBefore?: ReactNode;
+  /**
+   * @name 侧边栏后置内容
+   */
+  sidebarAfter?: ReactNode;
+  /**
+   * @name tabs前置内容
+   */
+  tabsBefore?: ReactNode;
+  /**
+   * @name tabs后置内容
+   */
+  tabsAfter?: ReactNode;
+  /**
+   * @name header按钮组render
+   */
+  headerActionsRender?: ReactNode;
+  /**
+   * @name 搜索框render
+   */
+  searchRender?: ReactNode;
+  /**
+   * @name 面包屑前置render
+   */
+  breadcrumbBeforeRender?: ReactNode;
+  /**
+   * @name 设置侧边栏前置内容
+   */
+  setSidebarBefore: (content?: ReactNode) => void;
+  /**
+   * @name 设置侧边栏后置内容
+   */
+  setSidebarAfter: (content?: ReactNode) => void;
+  /**
+   * @name 设置tabs前置内容
+   */
+  setTabsBefore: (content?: ReactNode) => void;
+  /**
+   * @name 设置tabs后置内容
+   */
+  setTabsAfter: (content?: ReactNode) => void;
+  /**
+   * @name 设置header按钮组render
+   */
+  setHeaderActionsRender: (render?: ReactNode) => void;
+  /**
+   * @name 设置搜索框render
+   */
+  setSearchRender: (render?: ReactNode) => void;
+  /**
+   * @name 设置面包屑前置render
+   */
+  setBreadcrumbBeforeRender: (render?: ReactNode) => void;
+  /**
+   * @name 登录凭证
+   */
+  token?: string;
+  /**
+   * @name 菜单列表
+   */
+  menus?: MenuItem[];
+  /**
+   * @name 路由配置
+   */
+  routes?: RouteObject[];
+  /**
+   * @name 设置登录凭证
+   */
+  setToken: (token?: string) => void;
+  /**
+   * @name 设置菜单列表
+   */
+  setMenus: (menus?: MenuItem[]) => void;
+  /**
+   * @name 设置路由配置
+   */
+  setRoutes: (routes?: RouteObject[]) => void;
+}

package/src/fe-layouts/context/global-context.provider.tsx

@@ -0,0 +1,81 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-30 23:57:35
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 12:50:00
+ * @description: 心平气和
+ */
+import type { MenuProps } from 'antd';
+import { type ReactNode, useState } from 'react';
+import type { RouteObject } from 'react-router-dom';
+
+import type { MenuItem } from '@/router';
+
+import { GlobalContext, type IGlobalContextProps, type IUserInfo } from '.';
+
+export default function GlobalContextProvider(props: React.PropsWithChildren<IGlobalContextProps>) {
+
+  const [appName, setAppName] = useState<ReactNode | undefined>(props.appName);
+  const [logo, setLogo] = useState<ReactNode | undefined>(props.logo);
+  const [noticeRender, setNoticeRender] = useState<ReactNode | undefined>(props.noticeRender);
+  const [description, setDescription] = useState<ReactNode | undefined>(props.description);
+  const [descriptionDetail, setDescriptionDetail] = useState<ReactNode | undefined>(props.descriptionDetail);
+  const [copyright, setCopyright] = useState<ReactNode | undefined>(props.copyright);
+  const [userMenuItems, setUserMenuItems] = useState<MenuProps['items'] | undefined>(props.userMenuItems);
+  const [userInfo, setUserInfo] = useState<IUserInfo | undefined>(props.userInfo);
+  const [sidebarBefore, setSidebarBefore] = useState<ReactNode | undefined>(props.sidebarBefore);
+  const [sidebarAfter, setSidebarAfter] = useState<ReactNode | undefined>(props.sidebarAfter);
+  const [tabsBefore, setTabsBefore] = useState<ReactNode | undefined>(props.tabsBefore);
+  const [tabsAfter, setTabsAfter] = useState<ReactNode | undefined>(props.tabsAfter);
+  const [headerActionsRender, setHeaderActionsRender] = useState<ReactNode | undefined>(props.headerActionsRender);
+  const [searchRender, setSearchRender] = useState<ReactNode | undefined>(props.searchRender);
+  const [breadcrumbBeforeRender, setBreadcrumbBeforeRender] = useState<ReactNode | undefined>(props.breadcrumbBeforeRender);
+  const [token, setToken] = useState<string | undefined>(props.token);
+  const [menus, setMenus] = useState<MenuItem[] | undefined>(props.menus);
+  const [routes, setRoutes] = useState<RouteObject[] | undefined>(props.routes);
+
+  return (
+    <GlobalContext.Provider
+      value={{
+        appName,
+        logo,
+        noticeRender,
+        description,
+        descriptionDetail,
+        copyright,
+        userMenuItems,
+        userInfo,
+        sidebarBefore,
+        sidebarAfter,
+        tabsBefore,
+        tabsAfter,
+        headerActionsRender,
+        searchRender,
+        breadcrumbBeforeRender,
+        token,
+        menus,
+        routes,
+        setAppName,
+        setLogo,
+        setNoticeRender,
+        setDescription,
+        setDescriptionDetail,
+        setCopyright,
+        setUserMenuItems,
+        setUserInfo,
+        setSidebarBefore,
+        setSidebarAfter,
+        setTabsBefore,
+        setTabsAfter,
+        setHeaderActionsRender,
+        setSearchRender,
+        setBreadcrumbBeforeRender,
+        setToken,
+        setMenus,
+        setRoutes
+      }}
+    >
+      {props.children}
+    </GlobalContext.Provider>
+  );
+}

package/src/fe-layouts/context/index.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-30 23:00:18
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 01:53:57
+ * @description: global context
+ */
+export * from './context';
+export * from './global-context.d';
+export { default as GlobalContextProvider } from './global-context.provider';

package/src/fe-layouts/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-31 23:23:24
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 12:37:31
+ * @description: fe-layouts
+ */
+export { default as AuthLayout } from './auth-layout';
+export { default as BasicsLayout } from './basics-layout';
+export { default as BlankLayout } from './blank-layout';
+export * from './context';
+export type { IFeLayoutProps } from './layout';
+export { default as FeLayout } from './layout';

package/src/fe-layouts/layout.tsx

@@ -0,0 +1,74 @@
+/*
+ * @Author: dushuai
+ * @Date: 2024-04-07 10:25:43
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 01:39:31
+ * @description: BasicsLayout
+ */
+import { useSelector } from '@spacego/zustand';
+import { ConfigProvider, Spin, theme, type ThemeConfig } from 'antd';
+import { useMemo } from 'react';
+
+import { useLayoutConfigStore, useThemeStore } from '../';
+import themeConfig from '../config/theme';
+import { getRealTheme } from '../utils/theme';
+import AuthLayout from './auth-layout';
+import BasicsLayout from './basics-layout';
+import BlankLayout from './blank-layout';
+import { GlobalContextProvider } from './context';
+
+type ComponentType = () => JSX.Element;
+
+export interface IFeLayoutProps {
+  /**
+   * 布局类型，空白布局和后台布局
+   */
+  layoutType: 'blank' | 'basic' | 'auth';
+}
+
+export default function FeLayout(props: IFeLayoutProps) {
+  const { layoutType } = props;
+
+  const { loadingConfig } = useLayoutConfigStore(useSelector(['loadingConfig']));
+  const { theme: themeMode, themeColor } = useThemeStore(useSelector(['theme', 'themeColor']));
+
+  const sysTheme: Partial<ThemeConfig> = useMemo(() => {
+    // 获取实际主题（system 会转换为 light/dark）
+    const realTheme = getRealTheme(themeMode);
+    return {
+      cssVar: {
+        prefix: 'ant'
+      }, // 启用 CSS 变量模式，生成 --ant-color-primary 等变量
+      algorithm: realTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      token: {
+        colorPrimary: themeColor,
+        ...themeConfig.token
+      },
+      components: {
+        ...themeConfig.components
+      }
+    };
+  }, [themeMode, themeColor]);
+
+  const ComponentMap = new Map<IFeLayoutProps['layoutType'], ComponentType>([
+    ['blank', BlankLayout],
+    ['basic', BasicsLayout],
+    ['auth', AuthLayout]
+  ]);
+  const Component = ComponentMap.get(layoutType);
+
+  return (
+    <ConfigProvider theme={sysTheme}>
+      <GlobalContextProvider>
+        <Spin
+          spinning={loadingConfig.show && layoutType !== 'basic'}
+          wrapperClassName="spin-wrapper-full"
+        >
+          {
+            Component && <Component key={layoutType} />
+          }
+        </Spin>
+      </GlobalContextProvider>
+    </ConfigProvider>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-auth.hook';

package/src/hooks/use-auth.hook.ts

@@ -0,0 +1,54 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-25 21:30:00
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 01:46:53
+ * @description: 登录和退出登录的 hook
+ */
+import { useFetcher, useSearchParams, useSubmit } from 'react-router-dom';
+
+import { useLayoutConfigStore } from '@/store';
+
+import { useGlobal } from '../fe-layouts/context';
+
+/**
+ * 登录和退出登录的 hook
+ * @returns
+ */
+export function useAuth() {
+  const submit = useSubmit();
+  const fetcher = useFetcher();
+  const [searchParams] = useSearchParams();
+  const { setToken } = useGlobal();
+
+  /**
+   * 登录
+   * @param token 登录 token
+   * @param redirectTo 登录成功后跳转的路径，默认为 '/' 或从 URL 参数 'from' 获取
+   */
+  const login = (token: string, redirectTo?: string) => {
+    const targetPath = redirectTo || searchParams.get('from') || '/';
+    submit({ token, redirectTo: targetPath }, { method: 'post', replace: true });
+  };
+
+  /**
+   * 退出登录
+   */
+  const logout = () => {
+    // 1. 调用 GlobalContext 中的 setToken 清空 token
+    setToken(void 0);
+
+    // 2. 触发后端的 logout action (如果需要)
+    fetcher.submit(null, { action: '/logout', method: 'post' });
+
+    // 3. 重置布局配置等其他状态
+    setTimeout(() => {
+      useLayoutConfigStore.getState().RESET();
+    }, 300);
+  };
+
+  return {
+    login,
+    logout
+  };
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author: dushuai
+ * @Date: 2026-01-31 23:07:12
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 12:38:34
+ * @description: export
+ */
+/**------------------------------------------- utils ------------------------------------------- */
+export * from './utils';
+
+/**------------------------------------------- store ------------------------------------------- */
+export * from './store';
+
+/**------------------------------------------- config ------------------------------------------- */
+export * from './config';
+
+/**------------------------------------------- router ------------------------------------------- */
+export * from './router';
+
+/**------------------------------------------- components ------------------------------------------- */
+export * from './fe-layouts';

package/src/router/index.ts

@@ -0,0 +1,110 @@
+/*
+ * @Author: dushuai
+ * @Date: 2024-03-29 16:05:16
+ * @LastEditors: dushuai
+ * @LastEditTime: 2026-02-01 01:14:48
+ * @description: router
+ */
+import type { ComponentType } from 'react';
+import { createBrowserRouter, type RouteObject } from 'react-router-dom';
+
+import { createPermissionHelpers, type TokenHelpers } from './permission';
+import { createDefaultRoutes } from './routes';
+import { type TModule } from './utils';
+
+export interface CreateRouterOptions {
+  /** 页面模块集合 import.meta.glob的结果 */
+  modules: TModule;
+  /** token 操作方法 */
+  token: TokenHelpers;
+  /** 基础布局组件 */
+  BaseLayout: ComponentType<any>;
+  /** 外部传入的路由配置（第一层，RouteObject结构） */
+  routes?: RouteObject[];
+}
+
+/**
+ * 创建路由器配置（第一层）
+ * @param options
+ * @returns { routes, permissionHelpers }
+ */
+export function createRouter(options: CreateRouterOptions) {
+  const { modules, token, BaseLayout, routes: customRoutes = [] } = options;
+
+  // 1. 初始化权限帮助函数
+  const permissionHelpers = createPermissionHelpers(token);
+
+  // 2. 创建默认路由（登录、注册、错误页等）
+  const defaultRoutes = createDefaultRoutes(modules, permissionHelpers, BaseLayout);
+
+  // 3. 合并路由
+  const finalRoutes = mergeRoutes(defaultRoutes, customRoutes);
+
+  return {
+    /** 最终合并后的路由配置 */
+    routes: finalRoutes,
+    /** 权限帮助函数，包含 ProtectedLoader 等，用于外部调用 processRoutes */
+    permissionHelpers
+  };
+}
+
+/**
+ * 合并路由（支持 id 去重，优先使用 customRoutes）
+ * @param defaultRoutes 默认路由
+ * @param customRoutes 自定义路由（已处理为 RouteObject[]）
+ * @returns 合并后的路由数组
+ */
+function mergeRoutes(defaultRoutes: RouteObject[], customRoutes: RouteObject[]): RouteObject[] {
+  const routeMap = new Map<string, RouteObject>();
+
+  // 先放入 defaultRoutes
+  defaultRoutes.forEach(route => {
+    if(route.id) {
+      routeMap.set(route.id, route);
+    }
+  });
+
+  // 再放入 customRoutes，如果有相同 id 则覆盖（除了 root 特殊处理）
+  customRoutes.forEach(route => {
+    if(route.id) {
+      if(route.id === 'root' && routeMap.has('root')) {
+        // 特殊处理 root 路由：合并 children
+        const defaultRoot = routeMap.get('root')!;
+        const customRoot = route;
+
+        // 合并 children
+        const mergedChildren = [
+          ...(defaultRoot.children || []),
+          ...(customRoot.children || [])
+        ];
+
+        routeMap.set('root', {
+          ...defaultRoot,
+          ...customRoot, // 属性以 customRoot 为准
+          children: mergedChildren
+        } as RouteObject);
+      } else {
+        // 其他路由直接覆盖
+        routeMap.set(route.id, route as RouteObject);
+      }
+    } else {
+      // 没有 id 的路由，直接添加？
+      // 为了安全起见，这里可以考虑生成一个临时 id 或者直接追加，但 React Router 建议有 id
+    }
+  });
+
+  return Array.from(routeMap.values());
+}
+
+/**
+ * 生成路由表
+ * @param routes 路由数组
+ * @returns
+ */
+export function generateRouter(routes: RouteObject[]) {
+  return createBrowserRouter(routes);
+}
+
+export * from './permission';
+export * from './routes';
+export * from './utils';