From 5bdd8603a1aa2dcf679c056215f1a788de3546d3 Mon Sep 17 00:00:00 2001 From: xie2can <384968446@qq.com> Date: Fri, 15 May 2026 12:52:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E4=B8=BA=E4=B8=8A=E4=BE=A7=E5=8F=B3=E7=BB=93=E6=9E=84=EF=BC=8C?= =?UTF-8?q?=E9=9B=86=E6=88=90=20antd=20=E5=85=A8=E5=B1=80=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E4=B8=8E=E4=B8=AD=E6=96=87=E8=AF=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 3 ++ src/App.css | 27 +++-------- src/App.tsx | 15 ++++++- src/layouts/RootLayout.tsx | 91 +++++++++++++++++++++++++++++++++----- src/routes/index.tsx | 3 ++ 6 files changed, 106 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index a4ac3a3..539ab53 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "@ant-design/icons": "^6.2.3", "antd": "^6.4.2", + "dayjs": "^1.11.20", "react": "^19.2.6", "react-dom": "^19.2.6", "react-router": "^7.15.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80ce0d7..4dba754 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: antd: specifier: ^6.4.2 version: 6.4.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + dayjs: + specifier: ^1.11.20 + version: 1.11.20 react: specifier: ^19.2.6 version: 19.2.6 diff --git a/src/App.css b/src/App.css index 164c0a6..a2b2cba 100644 --- a/src/App.css +++ b/src/App.css @@ -1,26 +1,9 @@ +* { + box-sizing: border-box; +} + body { margin: 0; - color: #fff; + padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - background-image: linear-gradient(to bottom, #020917, #101725); -} - -.content { - display: flex; - min-height: 100vh; - line-height: 1.1; - text-align: center; - flex-direction: column; - justify-content: center; -} - -.content h1 { - font-size: 3.6rem; - font-weight: 700; -} - -.content p { - font-size: 1.2rem; - font-weight: 400; - opacity: 0.5; } diff --git a/src/App.tsx b/src/App.tsx index aef4ae4..ecbf7c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,19 @@ +import { App as AntdApp, ConfigProvider } from 'antd'; +import zhCN from 'antd/locale/zh_CN'; +import dayjs from 'dayjs'; +import 'dayjs/locale/zh-cn'; import { RouterProvider } from 'react-router'; import router from './router'; +import './App.css'; -const App = () => ; +dayjs.locale('zh-cn'); + +const App = () => ( + + + + + +); export default App; diff --git a/src/layouts/RootLayout.tsx b/src/layouts/RootLayout.tsx index e1f6f40..675c642 100644 --- a/src/layouts/RootLayout.tsx +++ b/src/layouts/RootLayout.tsx @@ -1,17 +1,86 @@ -import { Link, Outlet } from 'react-router'; +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; +import { Layout, Menu } from 'antd'; +import { useState } from 'react'; +import { Outlet, useLocation, useNavigate } from 'react-router'; +import { routes } from '../routes'; + +const { Header, Sider, Content } = Layout; + +const menuItems = routes + .filter((r) => !r.hideInMenu) + .map((r) => ({ + key: r.path, + icon: r.icon, + label: r.label, + })); const RootLayout = () => { + const navigate = useNavigate(); + const location = useLocation(); + const [collapsed, setCollapsed] = useState(false); + return ( - <> - -
- -
- + +
+ TaoTie +
+ + + navigate(key)} + style={{ height: '100%', borderRight: 0, paddingBottom: 48 }} + /> +
setCollapsed(!collapsed)} + style={{ + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + height: 48, + display: 'flex', + alignItems: 'center', + justifyContent: collapsed ? 'center' : 'flex-end', + padding: collapsed ? 0 : '0 24px', + borderTop: '1px solid #f0f0f0', + cursor: 'pointer', + color: '#666', + background: '#fff', + transition: 'all 0.2s', + userSelect: 'none', + }} + > + {collapsed ? ( + + ) : ( + <> + + 收起 + + )} +
+ + + + + + ); }; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 166c40b..02982c7 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,3 +1,4 @@ +import { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons'; import About from '../pages/About'; import Home from '../pages/Home'; import NotFound from '../pages/NotFound'; @@ -7,11 +8,13 @@ export const routes: RouteItem[] = [ { path: '/', label: '首页', + icon: , component: , }, { path: '/about', label: '关于', + icon: , component: , }, {