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

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

@@ -1,121 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-26 22:13:52
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 02:00:04
- * @description: login-layout
- */
-import { useSelector } from '@spacego/zustand';
-import { useState } from 'react';
-import { FaCheck } from 'react-icons/fa6';
-import { IoMoon } from 'react-icons/io5';
-import { LuPalette } from 'react-icons/lu';
-import { MdWbSunny } from 'react-icons/md';
-import { Outlet } from 'react-router-dom';
-
-import LoginSvg from '@/assets/svg/login-view.svg?react';
-import { applyThemeWithTransition, THEME_COLORS, useGlobal, useThemeStore } from '@/index';
-
-import './index.scss';
-
-export default function LoginLayout() {
-
-  const { appName, logo } = useGlobal();
-
-  const { theme, themeColor, TOGGLE_THEME, SET_THEME_COLOR } = useThemeStore(useSelector(['theme', 'themeColor', 'TOGGLE_THEME', 'SET_THEME_COLOR']));
-  // 记录调色板图标的 hover 状态，可在组件中使用 isPaletteHovered
-  const [isPaletteHovered, setIsPaletteHovered] = useState(false);
-
-  // 处理主题切换
-  const handleToggleTheme = (e: React.MouseEvent<HTMLDivElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = rect.left + rect.width / 2;
-    const y = rect.top + rect.height / 2;
-
-    // 使用带过渡的主题切换
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    applyThemeWithTransition(newTheme, x, y).then(() => {
-      TOGGLE_THEME();
-    });
-  };
-
-  return (
-    <div className="flex min-h-full flex-1 select-none overflow-x-hidden">
-
-      <div
-        className="bg-[#f4f4f5] dark:bg-[#2e3033] rounded-3xl px-3 py-1 flex-center absolute right-3 top-4 z-10 text-[#323639cc] dark:text-[#f2f2f2] flex justify-end transition-all duration-300 ease-in-out"
-      >
-        <div
-          className="flex overflow-hidden items-center gap-3 whitespace-nowrap origin-right"
-          style={{
-            width: isPaletteHovered ? '224px' : '0', // 7个颜色(20px) + 6个gap(12px) = 140 + 72 = 212px
-            transform: `scaleX(${isPaletteHovered ? 1 : 0})`,
-            opacity: isPaletteHovered ? 1 : 0,
-            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-          }}
-          onMouseEnter={() => setIsPaletteHovered(true)}
-          onMouseLeave={() => setIsPaletteHovered(false)}
-        >
-          {
-            THEME_COLORS.map((color) => (
-              <div
-                key={color}
-                className="w-5 h-5 rounded-full flex items-center justify-center cursor-pointer hover-scale-animation shrink-0"
-                style={{ backgroundColor: color }}
-                onClick={() => SET_THEME_COLOR(color)}
-              >
-                {themeColor === color && <FaCheck className="size-[10px] text-white" />}
-              </div>
-            ))
-          }
-        </div>
-
-        <div className="flex relative z-10 shrink-0">
-          <div
-            className="w-8 h-8 flex items-center justify-center cursor-pointer hover-scale-animation"
-            onMouseEnter={() => setIsPaletteHovered(true)}
-            onMouseLeave={() => setIsPaletteHovered(false)}
-          >
-            <LuPalette className="h-[16px] w-[16px] text-(--color-primary)" />
-          </div>
-
-          <div className="w-8 h-8 flex items-center justify-center cursor-pointer hover-scale-animation" onClick={handleToggleTheme}>
-            {theme === 'dark' ? <MdWbSunny className="h-[18px] w-[18px]" /> : <IoMoon className="h-[18px] w-[18px]" />}
-          </div>
-        </div>
-      </div>
-
-      <div className="absolute left-0 top-0 z-10 flex flex-1">
-        <div className="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6">
-          <div className="m-0 text-xl font-medium flex items-center gap-2 text-[#333] dark:text-[#f2f2f2]">
-            {logo}
-            {appName}
-          </div>
-        </div>
-      </div>
-
-      <div className="relative hidden w-0 flex-1 lg:block">
-        <div className="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]!">
-          <div className="login-background absolute left-0 top-0 size-full" />
-
-          <div className="flex flex-col items-center justify-center mr-20 h-full -enter-x">
-            <LoginSvg className="animate-float h-64 w-2/5" />
-
-            <div className="text-1xl mt-6 font-sans lg:text-2xl text-[#333] dark:text-[#f2f2f2]">企业级的大型中后台管理系统</div>
-            <div className="mt-2 text-[#323639] dark:text-[#a1a1aa]">高效、安全、易用的管理系统</div>
-          </div>
-        </div>
-      </div>
-
-      <div className="login-side flex flex-col items-center justify-center relative px-6 py-10 lg:flex-initial lg:px-8 min-h-full w-2/5 flex-1 dark:bg-[#14161a]">
-        <Outlet />
-
-        <div className="text-[#71717a] absolute bottom-3 flex text-center text-xs">
-          <div className="text-md flex justify-center mt-4">
-            Copyright © 2024 <a href="https://dshuais.netlify.app/" className="text-(--color-primary)! hover:text-(--hover-primary-color)! mx-1" target="_blank">DuShuai</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/fe-layouts/basics-layout/components/basics-layout/header.tsx

@@ -1,148 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-27
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 02:00:08
- * @description: 顶部导航栏组件
- */
-import {  LogoutOutlined } from '@ant-design/icons';
-import { useSelector } from '@spacego/zustand';
-import { Avatar, Badge, Breadcrumb, Dropdown, type MenuProps, Popover, Space } from 'antd';
-import { useState } from 'react';
-import { IoMoon } from 'react-icons/io5';
-import { MdWbSunny } from 'react-icons/md';
-import { Link } from 'react-router-dom';
-
-import IconArrowsRightSvg from '@/assets/svg/icon-arrows-right.svg?react';
-import IconBellSvg from '@/assets/svg/icon-bell.svg?react';
-import IconSystemSvg from '@/assets/svg/icon-system.svg?react';
-import { useAuth } from '@/hooks';
-import { useThemeStore } from '@/store';
-import { applyThemeWithTransition } from '@/utils';
-
-import { useGlobal } from '../../../context';
-import SettingDrawer from './setting-drawer';
-
-interface HeaderProps {
-  breadcrumbItems: { title: string }[]
-}
-
-export default function Header({ breadcrumbItems }: HeaderProps) {
-  const { logout } = useAuth();
-  const { appName, logo, headerActionsRender, userInfo, userMenuItems: _userMenuItems = [] } = useGlobal();
-
-  const { theme, TOGGLE_THEME } = useThemeStore(useSelector(['theme', 'TOGGLE_THEME']));
-
-  const [settingOpen, setSettingOpen] = useState(false);
-
-  // 处理主题切换
-  const handleToggleTheme = (e: React.MouseEvent<HTMLDivElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = rect.left + rect.width / 2;
-    const y = rect.top + rect.height / 2;
-
-    // 使用带过渡的主题切换
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    applyThemeWithTransition(newTheme, x, y).then(() => {
-      TOGGLE_THEME();
-    });
-  };
-
-  // 用户菜单
-  const userMenuItems: MenuProps['items'] = [
-    ..._userMenuItems,
-    {
-      key: 'logout',
-      label: '退出登录',
-      icon: <LogoutOutlined />,
-      onClick: () => {
-        logout();
-      }
-    }
-  ];
-
-  return (
-    <header className="layout-header h-[50px] px-4 flex items-center justify-between bg-(--global-background-color) border-b border-(--border-color) z-10">
-      <div className="flex items-center gap-2">
-        {/* Logo */}
-        <div className="min-w-[204px]">
-          <Link to="/" className="flex items-center gap-2 no-underline">
-            {logo}
-            <span className="text-lg font-semibold text-gray-800 dark:text-[#f2f2f2] tracking-wide">
-              {appName}
-            </span>
-          </Link>
-        </div>
-
-        {/* 面包屑 */}
-        <Breadcrumb
-          items={breadcrumbItems}
-          className="items-center basics-breadcrumb text-sm! hidden md:flex"
-          separator={<IconArrowsRightSvg className="w-4 h-4 text-gray-400" />}
-        />
-      </div>
-
-      <div className="flex items-center">
-        <Space size={6}>
-          {/* 头部按钮组 */}
-          {headerActionsRender}
-
-          {/* 设置 */}
-          <div
-            className="cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation"
-            onClick={() => setSettingOpen(true)}
-          >
-            <IconSystemSvg />
-          </div>
-
-          {/* 主题切换 */}
-          <div
-            onClick={handleToggleTheme}
-            className="cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation flex items-center justify-center"
-            title={theme === 'light' ? '切换到暗色主题' : '切换到亮色主题'}
-          >
-            {theme === 'light' ? (
-              <IoMoon className="text-lg" />
-            ) : (
-              <MdWbSunny className="text-lg" />
-            )}
-          </div>
-
-          {/* 通知 */}
-          <div className="cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation">
-            <Popover
-              placement="bottom"
-              arrow={false}
-              trigger="click"
-              classNames={{
-                container: 'p-0!'
-              }}
-              content={1}
-            >
-              <Badge dot color="var(--color-primary)">
-                <IconBellSvg />
-              </Badge>
-            </Popover>
-          </div>
-
-          {/* 用户头像 */}
-          <Dropdown menu={{ items: userMenuItems }} placement="bottomRight" arrow>
-            <div className="flex items-center gap-2 cursor-pointer hover:bg-(--hover-background-color) px-2 py-1 rounded-full transition-all border border-transparent">
-              <Avatar
-                size="default"
-                className="bg-primary/10 text-primary border border-primary/20"
-                src={userInfo?.avatar}
-              />
-              <div className="hidden lg:flex flex-col items-start">
-                <span className="text-sm font-medium text-gray-700 dark:text-[#f2f2f2] leading-tight">{userInfo?.username}</span>
-                <span className="text-xs text-gray-400 dark:text-[#a1a1aa] leading-tight">{userInfo?.roleName}</span>
-              </div>
-            </div>
-          </Dropdown>
-        </Space>
-      </div>
-
-      <SettingDrawer open={settingOpen} onClose={() => setSettingOpen(false)} />
-    </header>
-  );
-}

package/src/fe-layouts/basics-layout/components/basics-layout/setting-custom-color.tsx

@@ -1,52 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-31 23:03:47
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 02:00:11
- * @description: 自定义主题色
- */
-import { useSelector } from '@spacego/zustand';
-import { memo, useCallback, useRef } from 'react';
-
-import IconCustomSvg from '@/assets/svg/icon-custom.svg?react';
-import { useThemeStore } from '@/store';
-import { applyThemeColor } from '@/utils';
-
-function SettingCustomColor() {
-  const { themeColor, SET_THEME_COLOR } =  useThemeStore(useSelector(['themeColor', 'SET_THEME_COLOR']));
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const localValueRef = useRef<string>(themeColor);
-
-  const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    localValueRef.current = value;
-
-    // 直接更新 CSS 变量，不更新 store，避免重新渲染
-    applyThemeColor(value);
-  }, []);
-
-  // onBlur 事件在颜色选择面板关闭时触发，确保最终值被保存
-  const handleBlur = useCallback(() => {
-    // 确保最终值被保存到 store
-    if(localValueRef.current) {
-      SET_THEME_COLOR(localValueRef.current);
-    }
-  }, []);
-
-  return (
-    <div className="w-5 h-5 relative z-10">
-      <IconCustomSvg />
-      <input
-        ref={inputRef}
-        type="color"
-        value={themeColor}
-        className="absolute w-full h-full z-10 opacity-0 cursor-pointer"
-        onInput={handleInput}
-        onBlur={handleBlur}
-      />
-    </div>
-  );
-}
-
-export default memo(SettingCustomColor);

package/src/fe-layouts/basics-layout/components/basics-layout/setting-drawer.tsx

@@ -1,165 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-29
- * @LastEditors: dushuai
- * @LastEditTime: 2026-01-30 21:13:40
- * @description: 设置抽屉
- */
-import { CloseOutlined } from '@ant-design/icons';
-import { useSelector } from '@spacego/zustand';
-import { Drawer } from 'antd';
-import { IoMoon } from 'react-icons/io5';
-import { MdWbSunny } from 'react-icons/md';
-
-import IconSunMoonSvg from '@/assets/svg/icon-sun-moon.svg?react';
-import { THEME_COLORS } from '@/config';
-import { useThemeStore } from '@/store';
-
-import SettingCustomColor from './setting-custom-color';
-
-interface SettingDrawerProps {
-  open: boolean
-  onClose: () => void
-}
-
-export default function SettingDrawer({ open, onClose }: SettingDrawerProps) {
-  const { theme, themeColor, isCustomThemeColor, SET_THEME_COLOR, SET_IS_CUSTOM_THEME_COLOR } =
-  useThemeStore(useSelector(['theme', 'themeColor', 'isCustomThemeColor', 'SET_THEME_COLOR', 'SET_IS_CUSTOM_THEME_COLOR']));
-
-  const list = [
-    { mode: 'light', icon: MdWbSunny, label: '浅色' },
-    { mode: 'dark', icon: IoMoon, label: '深色' },
-    { mode: 'system', icon: IconSunMoonSvg, label: '跟随系统' }
-  ] as const;
-
-  const colorNames = ['默认', '紫罗兰', '樱花粉', '柠檬黄', '天蓝色', '浅绿色', '中性色', '自定义'];
-  const themeColorList = [
-    ...THEME_COLORS.map((color, index) => ({ color, name: colorNames[index], isCustom: false })),
-    { color: themeColor, name: '自定义', isCustom: true }
-  ] as const;
-
-  // 处理主题切换
-  const handleToggleTheme = (mode: 'light' | 'dark' | 'system') => {
-    if(theme === mode) return;
-    useThemeStore.getState().SET_THEME(mode);
-  };
-
-  return (
-    <Drawer
-      title={
-        <div className="flex items-end">
-          偏好设置
-          <span className="text-xs text-[#71717a] dark:text-[#a1a1aa] mb-[2px]">
-            自定义偏好设置 & 实时预览
-          </span>
-        </div>
-      }
-      placement="right"
-      onClose={onClose}
-      open={open}
-      width={380}
-      closable={false}
-      maskStyle={{ backdropFilter: 'none' }}
-      className="dark:bg-[#1a1c1f]!"
-      extra={
-        <div className="cursor-pointer hover:text-primary transition-colors" onClick={onClose}>
-          <CloseOutlined className="text-sm" />
-        </div>
-      }
-      styles={{
-        header: {
-          padding: '18px',
-          borderBottom: '1px solid var(--border-color)'
-        },
-        body: {
-          padding: '18px'
-        }
-      }}
-    >
-      {/* 主题模块 */}
-      <div className="mb-8">
-        <h3 className="text-base font-medium mb-4 text-(--text-color)">主题</h3>
-        <div className="grid grid-cols-3 gap-6">
-          {list.map(({ mode, icon: Icon, label }) => {
-            const isSelected = theme === mode;
-
-            return (
-              <div
-                key={mode}
-                className="group flex flex-col items-center gap-2 cursor-pointer"
-                onClick={() => handleToggleTheme(mode)}
-              >
-                <div className={`w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${isSelected ? 'outline-(--color-primary) outline-2' : 'outline-[#e4e4e7] dark:outline-[#36363a]'}`}>
-                  {
-                    !isSelected && <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                      <div className="w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" />
-                    </div>
-                  }
-                  <Icon className="text-xl text-[#2d2f32] dark:text-[#f0f0f0] relative z-10" />
-                </div>
-                <span className="text-xs text-[#71717a] dark:text-[#a1a1aa]">{label}</span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* 内置主题模块 */}
-      <div>
-        <h3 className="text-base font-medium mb-4 text-(--text-color)">内置主题</h3>
-        <div className="grid grid-cols-3 gap-6">
-          {themeColorList.map((item) => {
-            const isSelected = themeColor === item.color && !isCustomThemeColor;
-
-            return (
-              !item.isCustom ?
-                <div
-                  key={item.color}
-                  className="cursor-pointer group flex flex-col items-center gap-2"
-                  onClick={() => {
-                    SET_THEME_COLOR(item.color);
-                    SET_IS_CUSTOM_THEME_COLOR(false);
-                  }}
-                >
-                  <div className={`w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${isSelected ? 'outline-(--color-primary) outline-2' : 'outline-[#e4e4e7] dark:outline-[#36363a]'}`}>
-                    {/* 未选中时显示hover效果 */}
-                    {
-                      !isSelected && <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        <div className="w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" />
-                      </div>
-                    }
-
-                    {/* 中心色块 */}
-                    <div
-                      className="w-5 h-5 rounded-md shadow-sm relative z-10"
-                      style={{ backgroundColor: item.color }}
-                    />
-                  </div>
-                  <span className="text-xs text-[#71717a] dark:text-[#a1a1aa]">{item.name}</span>
-                </div>
-                :
-                <div
-                  key={`custom-${item.color}`}
-                  className="cursor-pointer group flex flex-col items-center gap-2"
-                  onClick={() => SET_IS_CUSTOM_THEME_COLOR(true)}
-                >
-                  <div className={`w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${isCustomThemeColor ? 'outline-(--color-primary) outline-2' : 'outline-[#e4e4e7] dark:outline-[#36363a]'}`}>
-                    {/* 未选中时显示hover效果 */}
-                    {
-                      !isCustomThemeColor && <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        <div className="w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" />
-                      </div>
-                    }
-
-                    {/* 中心色块 */}
-                    <SettingCustomColor />
-                  </div>
-                  <span className="text-xs text-[#71717a] dark:text-[#a1a1aa]">{item.name}</span>
-                </div>
-            );
-          })}
-        </div>
-      </div>
-    </Drawer>
-  );
-}

package/src/fe-layouts/basics-layout/components/basics-layout/sidebar.tsx

@@ -1,88 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-27
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 01:49:11
- * @description: 侧边栏组件
- */
-import { Layout, Menu, type MenuProps } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
-import { MdOutlineKeyboardDoubleArrowLeft, MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
-
-import type { MenuItem } from '@/router';
-import { renderIcon } from '@/utils';
-
-const { Sider } = Layout;
-
-interface SidebarProps {
-  collapsed: boolean
-  menus: MenuItem[]
-  activeKey: string
-  openKeys?: string[]
-  onMenuClick: (key: string) => void
-  onCollapse: (collapsed: boolean) => void
-}
-
-export default function Sidebar(props: SidebarProps) {
-  const { collapsed, menus, activeKey, openKeys: initialOpenKeys = [], onMenuClick, onCollapse } = props;
-
-  // 使用内部状态管理 openKeys，使其成为非受控变量
-  const [openKeys, setOpenKeys] = useState<string[]>(initialOpenKeys);
-
-  // 当初始 openKeys 变化时（如路由变化），更新内部状态
-  useEffect(() => {
-    if(initialOpenKeys.length > 0) {
-      setOpenKeys(initialOpenKeys);
-    }
-  }, [initialOpenKeys]);
-
-  // 转换菜单数据为 antd Menu 格式
-  const menuItems: MenuProps['items'] = useMemo(() => {
-    const convertMenu = (menuList: MenuItem[]): MenuProps['items'] => {
-      return menuList.map(menu => ({
-        key: menu.key,
-        label: menu.label,
-        icon: renderIcon(menu.icon),
-        children: menu.children ? convertMenu(menu.children) : undefined
-      }));
-    };
-    return convertMenu(menus);
-  }, [menus]);
-
-  return (
-    <Sider
-      trigger={null}
-      collapsible
-      collapsed={collapsed}
-      width={224}
-      className="layout-sidebar border-r border-(--border-color) bg-(--global-background-color)! h-full relative"
-      theme="light"
-    >
-      <div className="h-full flex flex-col">
-        {/* 菜单区域 */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden py-2 custom-scrollbar">
-          <Menu
-            mode="inline"
-            selectedKeys={[activeKey]}
-            openKeys={openKeys}
-            onOpenChange={setOpenKeys}
-            items={menuItems}
-            onClick={({ key }) => onMenuClick(key)}
-            className="sidebar-menu border-none"
-            inlineIndent={16}
-          />
-        </div>
-
-        {/* 底部折叠按钮 */}
-        <div className="flex items-center justify-start pl-4 mb-2">
-          <div
-            onClick={() => onCollapse(!collapsed)}
-            className="text-gray-500 dark:text-[#a1a1a2] text-xl hover:text-[#323639] dark:hover:text-[#f0f0f0] hover:bg-[#dfe3e4] dark:hover:bg-[#333538] transition-all duration-300 w-7 h-7 rounded-sm bg-[#f4f4f5] dark:bg-[#292a2d] cursor-pointer flex items-center justify-center"
-          >
-            {collapsed ? <MdOutlineKeyboardDoubleArrowRight /> : <MdOutlineKeyboardDoubleArrowLeft />}
-          </div>
-        </div>
-      </div>
-    </Sider>
-  );
-}

package/src/fe-layouts/basics-layout/components/basics-layout/tabs.tsx

@@ -1,94 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-27
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 02:00:18
- * @description: 标签页组件
- */
-import { classnames } from '@spacego/turbo-utils';
-import { Divider } from 'antd';
-import { useEffect, useRef, useState } from 'react';
-import { Fragment } from 'react/jsx-runtime';
-import { MdClear } from 'react-icons/md';
-
-import ChromeBgAfter from '@/assets/svg/chrome-bg-after.svg?react';
-import ChromeBgBefore from '@/assets/svg/chrome-bg-before.svg?react';
-import type { TabItem } from '@/store/modules/layout-config.store';
-
-interface TabsComponentProps {
-  tabs: TabItem[]
-  activeKey: string
-  onChange: (key: string) => void
-  onClose: (key: string) => void
-}
-
-export default function TabsComponent(props: TabsComponentProps) {
-  const { tabs, activeKey, onChange, onClose } = props;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [hasScroll, setHasScroll] = useState(false);
-
-  // 检查是否出现滚动条
-  const checkScroll = () => {
-    const container = containerRef.current;
-    if(container) {
-      // 如果 scrollWidth 大于 clientWidth，说明有内容溢出，出现了横向滚动条
-      const isScroll = container.scrollWidth > container.clientWidth;
-      setHasScroll(isScroll);
-    }
-  };
-
-  useEffect(() => {
-    checkScroll();
-    window.addEventListener('resize', checkScroll);
-    return () => {
-      window.removeEventListener('resize', checkScroll);
-    };
-  }, [tabs]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={classnames('layout-tabs bg-(--global-background-color) border-b border-(--border-color) overflow-x-auto overflow-y-hidden relative transition-all duration-300 shrink-0', {
-        'h-[38px]': !hasScroll,
-        // 出现滚动条时增加高度，留出滚动条的空间，防止挤压内容
-        'h-[46px]': hasScroll
-      })}
-    >
-      <div className="flex items-center h-[38px] px-2 pt-1 min-w-fit">
-        {
-          tabs.map((item, index) => {
-            return <Fragment key={`${item.key}-${index}`}>
-              <div
-                key={`${item.key}-${index}`}
-                className={classnames('layout-tabs-item group cursor-pointer px-[16px] h-full flex items-center justify-center rounded-tl-[8px] rounded-tr-[8px] transition-all duration-500 relative hover:bg-[#f4f4f5] dark:hover:bg-[#292a2d] shrink-0', {
-                  'bg-(--background-primary-light)! text-(--color-primary) dark:text-[#f9f9f9]! is-active': activeKey === item.key
-                })}
-                onClick={() => onChange(item.key)}
-              >
-                <ChromeBgBefore />
-                {item.label}
-                <ChromeBgAfter />
-
-                {
-                  item.closable !== false && <div
-                    className="w-4 h-4 flex ml-1 mr-[-10px] items-center justify-center text-[#18181bcc] hover:text-[#18181b] hover:bg-[#f4f4f5] dark:hover:bg-transparent rounded-full transition-all duration-300"
-                    onClick={e => {
-                      e.stopPropagation();
-                      onClose(item.key);
-                    }}
-                  >
-                    <MdClear className="text-xs text-[#333333] dark:text-[#cfd0d0] hover:text-black dark:hover:text-white transition-all" />
-                  </div>
-                }
-              </div>
-              {
-                index !== tabs.length - 1 && <Divider orientation="vertical" className="mx-1! shrink-0" />
-              }
-            </Fragment>;
-          })
-        }
-      </div>
-    </div>
-  );
-}