feat: add base layout

package.json

@@ -22,6 +22,7 @@
     "@rsbuild/core": "^1.4.13",
     "@rsbuild/plugin-less": "^1.4.0",
     "@rsbuild/plugin-react": "^1.3.4",
+    "@rsbuild/plugin-svgr": "^1.2.2",
     "@tailwindcss/postcss": "^4.1.11",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",

rsbuild.config.ts

@@ -2,9 +2,10 @@ import { ArcoDesignPlugin } from "@arco-plugins/unplugin-react";
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
 import { pluginLess } from "@rsbuild/plugin-less";
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
 
 export default defineConfig({
-  plugins: [pluginReact(), pluginLess()],
+  plugins: [pluginReact(), pluginLess(), pluginSvgr()],
   tools: {
     rspack: {
       plugins: [

src/assets/images/logo.svg

@@ -0,0 +1,9 @@
+<svg width="33" height="34" viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8125 17.2932C32.8125 19.6071 32.3208 21.8488 31.4779 23.8735L25.6476 17.944C26.35 16.787 26.7012 15.4131 26.7012 13.9669C26.7715 9.84522 23.47 6.44662 19.3958 6.44662C17.9207 6.44662 16.586 6.88048 15.4621 7.60359L10.0533 2.10799C12.0904 1.16795 14.2679 0.661774 16.6562 0.661774C25.5773 0.661774 32.8125 8.10976 32.8125 17.2932ZM7.80543 3.40958L13.6357 9.41135C12.6523 10.7129 12.0904 12.3038 12.0904 14.0392C12.0904 18.2332 15.3918 21.6318 19.466 21.6318C21.1519 21.6318 22.6973 21.0534 23.9617 20.041L30.2134 26.4767C27.2632 30.9599 22.3461 33.9246 16.6562 33.9246C7.73519 33.9246 0.5 26.4767 0.5 17.2932C0.5 11.436 3.38003 6.37431 7.80543 3.40958ZM19.466 18.7394C22.2056 18.7394 24.3832 16.4978 24.3832 13.6777C24.3832 10.8576 22.2056 8.61594 19.466 8.61594C16.7265 8.61594 14.5489 10.8576 14.5489 13.6777C14.5489 16.4978 16.7265 18.7394 19.466 18.7394Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.88952" y1="1.73016" x2="27.8689" y2="33.2773" gradientUnits="userSpaceOnUse">
+<stop stop-color="#73DFE7"/>
+<stop offset="1" stop-color="#0095F7"/>
+</linearGradient>
+</defs>
+</svg>

src/pages/App.tsx

@@ -2,11 +2,14 @@ import { Route, Routes } from 'react-router';
 import '@styles/index.css';
 import Home from '@pages/home';
 import Login from '@pages/login';
+import Application from '@pages/application';
 
 const App = () => {
   return (
     <Routes>
-      <Route index element={<Home />} />
+      <Route path="/" element={<Home />}>
+        <Route path="application" element={<Application />} index />
+      </Route>
       <Route path="/login" element={<Login />} />
     </Routes>
   );

src/pages/application/index.tsx

@@ -0,0 +1,9 @@
+function Application() {
+  return (
+    <div>
+      application
+    </div>
+  )
+}
+
+export default Application;

src/pages/home/index.tsx

@@ -1,6 +1,73 @@
+import { Avatar, Layout, Menu } from '@arco-design/web-react';
+import {
+  IconApps,
+  IconBulb,
+  IconFire,
+  IconMenuFold,
+  IconMenuUnfold,
+  IconRobot,
+  IconSafe,
+  IconUser,
+} from '@arco-design/web-react/icon';
+import { useState } from 'react';
+import Logo from '@assets/images/logo.svg?react';
+import { Outlet } from 'react-router';
 
 function Home() {
-  return <div>Home</div>;
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Layout className="h-screen w-full">
+      <Layout.Sider
+        collapsible
+        onCollapse={setCollapsed}
+        trigger={collapsed ? <IconMenuUnfold /> : <IconMenuFold />}
+      >
+        <div className="flex flex-row items-center justify-center px-2 py-3">
+          <Logo />
+          {!collapsed && <h2 className="ml-4 text-xl font-medium">Foka CI</h2>}
+        </div>
+        <Menu
+          className="flex-1"
+          defaultOpenKeys={['0']}
+          defaultSelectedKeys={['0_1']}
+        >
+          <Menu.Item key="0">
+            <IconApps />
+            Navigation 1
+          </Menu.Item>
+          <Menu.Item key="1">
+            <IconRobot />
+            Navigation 2
+          </Menu.Item>
+          <Menu.Item key="2">
+            <IconBulb />
+            Navigation 3
+          </Menu.Item>
+          <Menu.Item key="3">
+            <IconSafe />
+            Navigation 4
+          </Menu.Item>
+          <Menu.Item key="4">
+            <IconFire />
+            Navigation 5
+          </Menu.Item>
+        </Menu>
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header className="h-14 border-b-gray-100 border-b-[1px]">
+          <div className="flex items-center justify-end px-4 h-full">
+            <Avatar>
+              <IconUser />
+            </Avatar>
+          </div>
+        </Layout.Header>
+        <Layout.Content>
+          <Outlet />
+        </Layout.Content>
+      </Layout>
+    </Layout>
+  );
 }
 
 export default Home;

tsconfig.json

@@ -22,7 +22,8 @@
     "noUnusedParameters": true,
      "paths": {
       "@pages/*": ["./src/pages/*"],
-      "@styles/*": ["./src/styles/*"]
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
     }
   },
   "include": ["src"]