feat: Add base project structure with API and web components

web/src/components/Layout/AuthLayout.tsx

@@ -0,0 +1,37 @@
+import { Outlet } from 'react-router-dom';
+import { useEffect, type FC } from 'react';
+import { Layout } from 'antd';
+import useRouteGuard from '@/hooks/useRouteGuard';
+import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
+import AppHeader from '@/components/Header';
+import Sider from '@/components/SiderMenu'
+import { useUser } from '@/store/user';
+
+
+const { Content } = Layout;
+
+// 认证布局组件，使用useRouteGuard hook进行路由鉴权
+const AuthLayout: FC = () => {
+  const { getUserInfo } = useUser();
+  // 使用路由守卫hook处理认证和权限检查
+  useRouteGuard('manage');
+  // 自动更新面包屑导航
+  useNavigationBreadcrumbs('manage');
+  useEffect(() => {
+    getUserInfo()
+  }, []);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider />
+      <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+        <AppHeader />
+        <Content style={{ padding: '16px 17px 24px 16px', zIndex: 0 }}>
+          <Outlet />
+        </Content> 
+      </Layout>
+    </Layout>
+  )
+};
+
+export default AuthLayout;

web/src/components/Layout/AuthSpaceLayout.tsx

@@ -0,0 +1,38 @@
+import { Outlet } from 'react-router-dom';
+import { useEffect, type FC } from 'react';
+import { Layout } from 'antd';
+import useRouteGuard from '@/hooks/useRouteGuard';
+import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
+import AppHeader from '@/components/Header';
+import Sider from '@/components/SiderMenu';
+import { useUser } from '@/store/user';
+
+
+const { Content } = Layout;
+
+// 认证布局组件，使用useRouteGuard hook进行路由鉴权
+const AuthSpaceLayout: FC = () => {
+  const { getUserInfo, getStorageType } = useUser();
+  // 使用路由守卫hook处理认证和权限检查
+  useRouteGuard('space');
+  // 自动更新面包屑导航
+  useNavigationBreadcrumbs('space');
+  useEffect(() => {
+    getUserInfo()
+    getStorageType()
+  }, []);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider source="space" />
+      <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+        <AppHeader source="space" />
+        <Content style={{ padding: '16px 17px 24px 16px', zIndex: 0, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
+          <Outlet />
+        </Content> 
+      </Layout>
+    </Layout>
+  )
+};
+
+export default AuthSpaceLayout;

web/src/components/Layout/BasicLayout.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router-dom';
+import { useEffect, type FC } from 'react';
+import { useUser } from '@/store/user';
+
+// 基础布局组件，用于展示内容并保留用户信息获取功能
+const BasicLayout: FC = () => {
+  const { getUserInfo } = useUser();
+  
+  // 获取用户信息
+  useEffect(() => {
+    getUserInfo();
+  }, [getUserInfo]);
+
+  return (
+    <div className="rb:relative rb:h-full rb:w-full">
+      <Outlet />
+    </div>
+  )
+};
+
+export default BasicLayout;

web/src/components/Layout/LayoutBg.tsx

@@ -0,0 +1,17 @@
+import { type FC } from 'react';
+import clsx from 'clsx';
+import styles from './layout.module.css';
+
+const LayoutBg: FC = () => {
+  return (
+    <div className="rb:fixed rb:top-0 rb:right-0 rb:left-0 rb:bottom-0 rb:bg-[#FBFDFF]">
+      <div className={clsx('rb:h-[240px]', styles.bgTop)}>
+        <div className={clsx(styles.left1)}></div>
+        <div className={clsx(styles.left2)}></div>
+        <div className={clsx(styles.right1)}></div>
+      </div>
+    </div>
+  )
+};
+
+export default LayoutBg;

web/src/components/Layout/LoginLayout.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from 'react-router-dom';
+import { type FC } from 'react';
+
+// 基础布局组件，用于展示内容并保留用户信息获取功能
+const LoginLayout: FC = () => {
+
+  return (
+    <div className="rb:relative rb:h-full rb:w-full">
+      <Outlet />
+    </div>
+  )
+};
+
+export default LoginLayout;

web/src/components/Layout/layout.module.css

@@ -0,0 +1,37 @@
+.bg-top {
+  width: 100%;
+  height: 240px;
+  background: linear-gradient(to bottom, rgba(229, 242, 254, 1), rgba(251, 253, 255, 1));
+  opacity: 0.8;
+}
+
+.left1 {
+  width: 748px;
+  height: 354px;
+  background: radial-gradient(circle, rgba(138, 239, 255, 1) 100%, rgba(232, 244, 255, 0.71) 100%);
+  opacity: 0.24;
+  filter: blur(50px);
+  position: absolute;
+  left: -374px;
+  top: -187px;
+}
+.left2 {
+  width: 558px;
+  height: 504px;
+  background: radial-gradient(circle, #155EEF 0%, rgba(232, 244, 255, 0) 100%);
+  opacity: 0.22399999999999998;
+  filter: blur(50px);
+  position: absolute;
+  left: -279px;
+  top: -252px;
+}
+.right1 {
+  width: 470px;
+  height: 474px;
+  background: radial-gradient(circle, rgba(21, 94, 239, 1) 0%, rgba(232, 244, 255, 0) 100%);
+  opacity: 0.32;
+  filter: blur(50px);
+  position: absolute;
+  right: -235px;
+  top: -237px;
+}