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

package/src/fe-layouts/basics-layout/components/utils/index.ts

@@ -1,142 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-28
- * @LastEditors: dushuai
- * @LastEditTime: 2026-01-28
- * @description: 布局工具函数
- */
-import type { RouteObject } from 'react-router-dom';
-
-import type { MenuItem } from '@/router/utils';
-
-/** RouteNode 类型定义 */
-export type RouteNode = RouteObject & {
-  parentId?: string;
-  children?: RouteNode[];
-  handle?: {
-    title?: string;
-    isIndependentMenu?: boolean;
-    activeRouteMenuId?: string;
-  };
-};
-
-/**
- * 规范化路径（统一格式，去除末尾斜杠）
- */
-export function normalizePath(path?: string): string {
-  if(!path) return '';
-  return path === '/' ? '/' : path.replace(/\/+$/, '');
-}
-
-/**
- * 根据路径查找对应的路由节点
- * 优先查找子路由，避免匹配到布局路由（如 root）
- */
-export function findRouteByPath(path: string, routeList: RouteNode[]): RouteNode | null {
-  const normalizedPath = normalizePath(path);
-
-  for(const route of routeList) {
-    // 先递归查找子路由（优先查找子路由，避免匹配到布局路由）
-    if(route.children && route.children.length > 0) {
-      const found = findRouteByPath(path, route.children);
-      if(found) return found;
-    }
-
-    // 首页特殊处理
-    if(route.id === 'Home' && normalizedPath === '/') {
-      return route;
-    }
-
-    // 匹配路径（规范化后比较）
-    // 排除布局路由（root、blank、auth 等），这些路由不应该作为页面路由
-    const routePath = normalizePath(route.path);
-    if(routePath && routePath === normalizedPath && !['root', 'blank', 'auth'].includes(route.id || '')) {
-      return route;
-    }
-  }
-  return null;
-}
-
-/**
- * 构建路由映射表（id -> RouteNode）
- */
-export function buildRouteMap(routeList: RouteNode[]): Map<string, RouteNode> {
-  const routeMap = new Map<string, RouteNode>();
-
-  const build = (routes: RouteNode[]) => {
-    routes.forEach(route => {
-      if(route.id) {
-        routeMap.set(route.id, route);
-      }
-      if(route.children && route.children.length > 0) {
-        build(route.children);
-      }
-    });
-  };
-
-  build(routeList);
-  return routeMap;
-}
-
-/**
- * 根据 id 查找路由节点
- */
-export function getRouteById(id: string, routeMap: Map<string, RouteNode>): RouteNode | null {
-  return routeMap.get(id) || null;
-}
-
-/**
- * 递归查找父级路由链（从根到当前），根据 isIndependentMenu 过滤层级
- */
-export function findParentRoutes(route: RouteNode, routeMap: Map<string, RouteNode>): RouteNode[] {
-  const chain: RouteNode[] = [route];
-  let current = route;
-
-  // 向上查找父级
-  while(current.parentId && current.parentId !== '/') {
-    const parent = getRouteById(current.parentId, routeMap);
-    if(parent) {
-      // 如果当前路由是独立菜单，跳过父级目录，不添加到链中
-      const isIndependent = current.handle?.isIndependentMenu === true;
-      if(!isIndependent) {
-        chain.unshift(parent); // 在数组开头插入，保持从根到当前的顺序
-      }
-      // 继续向上查找，即使当前是独立菜单也要继续，因为可能父级的父级需要显示
-      current = parent;
-    } else {
-      break;
-    }
-  }
-
-  return chain;
-}
-
-/**
- * 递归查找菜单的父级 key
- */
-export function findMenuParentKeys(targetKey: string, menuList: MenuItem[], parents: string[] = []): string[] | null {
-  for(const menu of menuList) {
-    if(menu.key === targetKey) {
-      return parents; // 找到目标菜单，返回所有父级 key
-    }
-    if(menu.children && menu.children.length > 0) {
-      const found = findMenuParentKeys(targetKey, menu.children, [...parents, menu.key]);
-      if(found) return found;
-    }
-  }
-  return null;
-}
-
-/**
- * 递归查找菜单项
- */
-export function findMenuByKey(key: string, menuList: MenuItem[]): MenuItem | null {
-  for(const menu of menuList) {
-    if(menu.key === key) return menu;
-    if(menu.children) {
-      const found = findMenuByKey(key, menu.children);
-      if(found) return found;
-    }
-  }
-  return null;
-}

package/src/fe-layouts/basics-layout/index.scss

@@ -1,110 +0,0 @@
-// 基础布局样式
-.basics-layout {
-  --sidebar-width: 220px;
-  --header-height: 64px;
-  --tabs-height: 44px;
-  --background-primary-light: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  --hover-background-color: #f4f4f5;
-  --icon-text-color: #323639;
-
-  [data-theme='dark'] & {
-    --hover-background-color: #2e3033;
-    --icon-text-color: #dddddd;
-    --background-primary-light: #292a2d;
-  }
-
-  .layout-header {
-    flex-shrink: 0;
-
-    .basics-breadcrumb {
-      .ant-breadcrumb-separator {
-        display: flex;
-        align-items: center;
-        margin-inline: 6px;
-      }
-    }
-  }
-
-  // 侧边栏样式
-  .layout-sidebar {
-    z-index: 20;
-    flex-shrink: 0;
-
-    .sidebar-menu {
-      background: var(--global-background-color);
-      border: none;
-
-      .ant-menu-item {
-        margin: 4px 8px;
-        width: calc(100% - 16px);
-        border-radius: 8px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        padding-inline: 30%;
-
-        &:hover {
-          background: var(--hover-background-color);
-
-          .ant-menu-item-icon {
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            transform: scale(1.18);
-          }
-        }
-
-        &.ant-menu-item-selected {
-          background-color: var(--background-primary-light);
-          color: var(--color-primary);
-        }
-
-        .ant-menu-title-content {
-          margin-inline-start: 8px;
-        }
-      }
-
-      .ant-menu-submenu-title {
-        margin: 4px 8px;
-        width: calc(100% - 16px);
-        border-radius: 8px;
-        padding-inline: 30%;
-
-        &:hover {
-          background-color: var(--hover-background-color);
-
-          .ant-menu-item-icon {
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            transform: scale(1.18);
-          }
-        }
-      }
-
-      .ant-menu-sub {
-        background: transparent;
-      }
-    }
-  }
-
-  // 自定义滚动条
-  .custom-scrollbar {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: 4px;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.5);
-      }
-    }
-  }
-
-  .layout-tabs {
-    position: relative;
-    scrollbar-width: thin; // Firefox
-  }
-}

package/src/fe-layouts/basics-layout/index.tsx

@@ -1,207 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-23 21:29:09
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 01:53:18
- * @description: 后台布局
- */
-import { useSelector } from '@spacego/zustand';
-import { Layout, Spin } from 'antd';
-import { useEffect, useMemo } from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-
-import { useLayoutConfigStore } from '@/store';
-
-import { useGlobal } from '../context';
-import Header from './components/basics-layout/header';
-import Sidebar from './components/basics-layout/sidebar';
-import TabsComponent from './components/basics-layout/tabs';
-import {
-  buildRouteMap,
-  findMenuByKey,
-  findMenuParentKeys,
-  findParentRoutes,
-  findRouteByPath,
-  type RouteNode
-} from './components/utils';
-
-import '../../assets/styles/index.css';
-import './index.scss';
-
-const { Content } = Layout;
-
-export default function BasicsLayout() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const { token, menus, routes } = useGlobal();
-  const { tabsAttribute, sidebarCollapsed, loadingConfig, ADD_TAB, REMOVE_TAB, SET_ACTIVE_TAB_KEY, SET_SIDEBAR_COLLAPSED } = useLayoutConfigStore(useSelector(['tabsAttribute', 'sidebarCollapsed', 'loadingConfig', 'ADD_TAB', 'REMOVE_TAB', 'SET_ACTIVE_TAB_KEY', 'SET_SIDEBAR_COLLAPSED']));
-  const { tabsList, tabsActiveKey } = tabsAttribute;
-
-  // 根据当前路由获取激活的菜单 ID（用于菜单高亮和展开）
-  const activeMenuId = useMemo(() => {
-    if(!routes || routes.length === 0) {
-      return tabsActiveKey;
-    }
-
-    // 根据当前路径查找路由
-    const currentRoute = findRouteByPath(location.pathname, routes as RouteNode[]);
-    if(!currentRoute) {
-      return tabsActiveKey;
-    }
-
-    // 获取激活的菜单 ID：优先使用 activeRouteMenuId，如果为空则使用自己的 menuId
-    return currentRoute.handle?.activeRouteMenuId || currentRoute.id || tabsActiveKey;
-  }, [location.pathname, routes, tabsActiveKey]);
-
-  // 查找当前激活菜单的所有父级菜单 key（用于展开菜单）
-  const openKeys = useMemo(() => {
-    const keys: string[] = [];
-
-    if(!menus || menus.length === 0 || !activeMenuId) {
-      return keys;
-    }
-
-    // 根据激活的菜单 ID 查找父级菜单 key
-    const parentKeys = findMenuParentKeys(activeMenuId, menus);
-    if(parentKeys) {
-      keys.push(...parentKeys);
-    }
-
-    return keys;
-  }, [activeMenuId, menus]);
-
-  // 构建面包屑 - 基于 routes 数据，根据 isIndependentMenu 判断是否需要展示层级
-  const breadcrumbItems = useMemo(() => {
-    const items: { title: string, href?: string }[] = [];
-
-    if(!routes || routes.length === 0) {
-      // 如果没有路由数据，至少显示首页
-      if(location.pathname === '/') {
-        items.push({ title: '首页' });
-      }
-      return items;
-    }
-
-    const routeList = routes as RouteNode[];
-
-    // 构建路由映射表
-    const routeMap = buildRouteMap(routeList);
-
-    // 查找当前路径对应的路由
-    const currentRoute = findRouteByPath(location.pathname, routeList);
-
-    if(currentRoute) {
-      // 找到路由，构建面包屑路径
-      const routeChain = findParentRoutes(currentRoute, routeMap);
-      routeChain.forEach(route => {
-        const title = route.handle?.title || route.id || '';
-        if(title) {
-          items.push({ title });
-        }
-      });
-    } else if(location.pathname === '/') {
-      // 首页特殊处理
-      items.push({ title: '首页' });
-    }
-
-    return items;
-  }, [location.pathname, routes]);
-
-  // 菜单点击处理
-  const handleMenuClick = (key: string) => {
-    const menu = findMenuByKey(key, menus!);
-    navigate(menu?.routeNode?.path ?? '/');
-  };
-
-  // 标签页切换
-  const handleTabChange = (key: string) => {
-    SET_ACTIVE_TAB_KEY(key);
-    const tab = tabsList.find((t: { key: string; path: string }) => t.key === key);
-    if(tab) {
-      navigate(tab.path);
-    }
-  };
-
-  // 标签页关闭
-  const handleTabClose = (targetKey: string) => {
-    const tab = REMOVE_TAB(targetKey);
-    navigate(tab.path ?? '/');
-  };
-
-  // 根据路径从 routes 中查找路由节点（包含隐藏路由）
-  const findRouteByPathInRoutes = useMemo(() => {
-    if(!routes || routes.length === 0) return null;
-    return (path: string) => findRouteByPath(path, routes as RouteNode[]);
-  }, [routes]);
-
-  // 根据路由添加tabslist
-  const addTabsList = () => {
-    // 直接从 routes 中查找路由（包含隐藏路由）
-    const currentRoute = findRouteByPathInRoutes?.(location.pathname);
-    // 排除布局路由（如 root、blank、auth 等），只处理实际页面路由
-    if(currentRoute && currentRoute.id && !['root', 'blank', 'auth'].includes(currentRoute.id)) {
-      const tabKey = currentRoute.id;
-      const tabLabel = currentRoute.handle?.title || currentRoute.id;
-
-      const existingTab = tabsList.find((t: { key: string }) => t.key === tabKey);
-      if(!existingTab) {
-        ADD_TAB({
-          key: tabKey,
-          label: tabLabel,
-          path: location.pathname
-        });
-      } else {
-        SET_ACTIVE_TAB_KEY(tabKey);
-      }
-    }
-  };
-
-  // 路由变化时自动添加标签
-  useEffect(() => {
-    if(token) {
-      addTabsList();
-    }
-  }, [location.pathname, token]);
-
-  return (
-    <Layout className="basics-layout w-full h-screen overflow-hidden flex flex-col">
-      {/* 顶部导航 */}
-      <Header breadcrumbItems={breadcrumbItems} />
-
-      <Layout className="flex-1 overflow-hidden">
-        {/* 左侧菜单 */}
-        <Sidebar
-          collapsed={sidebarCollapsed}
-          onCollapse={SET_SIDEBAR_COLLAPSED}
-          menus={menus!}
-          activeKey={activeMenuId}
-          openKeys={openKeys}
-          onMenuClick={handleMenuClick}
-        />
-
-        {/* 内容区域 */}
-        <Content className="flex flex-col flex-1 overflow-hidden bg-[#eff1f4] dark:bg-[#141619]">
-          {/* 标签栏 */}
-          <TabsComponent
-            tabs={tabsList}
-            activeKey={tabsActiveKey}
-            onChange={handleTabChange}
-            onClose={handleTabClose}
-          />
-
-          {/* 页面内容 - 固定高度，内部滚动 */}
-          <div className="flex-1 overflow-auto p-3 custom-scrollbar relative">
-            <Outlet />
-
-            {loadingConfig.show && (
-              <div className="absolute inset-0 z-9999 flex items-center justify-center bg-white/80 dark:bg-[#1a1c1f]/80">
-                <Spin spinning />
-              </div>
-            )}
-          </div>
-        </Content>
-      </Layout>
-    </Layout>
-  );
-}

package/src/fe-layouts/blank-layout/index.tsx

@@ -1,12 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-23 21:29:09
- * @LastEditors: dushuai
- * @LastEditTime: 2026-01-25 23:50:49
- * @description: 空白布局
- */
-import { Outlet } from 'react-router-dom';
-
-export default function BlankLayout() {
-  return <Outlet />;
-}

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

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import type { IGlobalContext } from './global-context';
-
-export const GlobalContext = createContext<IGlobalContext>({} as IGlobalContext);
-
-/**
- * @name 使用全局上下文
- * @returns
- */
-export const useGlobal = () => useContext(GlobalContext);