feat: Add base project structure with API and web components

2025-12-02 20:28:01 +08:00
parent f3de6d6cc9
commit c1adc62ec6
817 changed files with 111226 additions and 106 deletions
--- a/web/src/components/Header/index.tsx
+++ b/web/src/components/Header/index.tsx
@@ -0,0 +1,106 @@
+import { type FC, useRef } from 'react';
+import { Layout, Dropdown, Space, Breadcrumb } from 'antd';
+import type { MenuProps, BreadcrumbProps } from 'antd';
+import { UserOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { useUser } from '@/store/user';
+import { useMenu } from '@/store/menu';
+import styles from './index.module.css'
+import SettingModal, { type SettingModalRef } from './SettingModal'
+import UserInfoModal, { type UserInfoModalRef } from './UserInfoModal'
+const { Header } = Layout;
+
+const AppHeader: FC<{source?: 'space' | 'manage';}> = ({source = 'manage'}) => {
+  const { t } = useTranslation();
+  const settingModalRef = useRef<SettingModalRef>(null)
+  const userInfoModalRef = useRef<UserInfoModalRef>(null)
+
+  const { user, logout } = useUser();
+  const { allBreadcrumbs } = useMenu();
+  const breadcrumbs = allBreadcrumbs[source] || [];
+
+  // 处理退出登录
+  const handleLogout = () => {
+    logout()
+  };
+
+  // 用户下拉菜单配置
+  const userMenuItems: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (<>
+        <div>{user.username}</div>
+        <div className="rb:text-[12px] rb:text-[#5B6167] rb:mt-[8px]">{user.email}</div>
+      </>),
+    },
+    {
+      key: '2',
+      type: 'divider',
+    },
+    {
+      key: '3',
+      icon: <UserOutlined />,
+      label: t('header.userInfo'),
+      onClick: () => {
+        userInfoModalRef.current?.handleOpen()
+      },
+    },
+    {
+      key: '4',
+      icon: <SettingOutlined />,
+      label: t('header.settings'),
+      onClick: () => {
+        settingModalRef.current?.handleOpen()
+      },
+    },
+    {
+      key: '5',
+      type: 'divider',
+    },
+    {
+      key: '6',
+      icon: <LogoutOutlined />,
+      label: t('header.logout'),
+      danger: true,
+      onClick: handleLogout,
+    },
+  ];
+  const formatBreadcrumbNames = () => {
+    return breadcrumbs.map((menu, index) => ({
+      title: menu.i18nKey ? t(menu.i18nKey) : menu.label,
+      path: index === breadcrumbs.length - 1 ? undefined : menu.path
+    }))
+  }
+  return (
+    <Header className={styles.header}>
+      <Breadcrumb separator=">" items={formatBreadcrumbNames() as BreadcrumbProps['items']} />
+      {/* 语言切换和主题切换按钮 */}
+      <Space>
+        {/* <Button
+          size="small" 
+          type="default"
+          onClick={handleLanguageChange}
+        >
+          {t(`language.${language === 'en' ? 'zh' : 'en'}`)}
+        </Button> */}
+      
+        {/* 用户信息下拉菜单 */}
+        <Dropdown
+          menu={{ 
+            items: userMenuItems
+          }}
+        >
+          <div className="rb:cursor-pointer">{user.username}</div>
+        </Dropdown>
+      </Space>
+      <SettingModal
+        ref={settingModalRef}
+      />
+      <UserInfoModal
+        ref={userInfoModalRef}
+      />
+    </Header>
+  );
+};
+
+export default AppHeader;