不能轻易的照着抄
先照着Antd的把Layout包过来
已经猪脑过载了
首先是找一个想要的样式并让它显示代码：
然后分别在NewsSandBox，TopHeader，SideMenu的里面把它的样式和模板拷过来：
NewsSandBox：
import React from 'react'
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import {BrowserRouter as Router,Routes,Route,Navigate,
} from 'react-router-dom'
import Home from './home/Home'
import RightList from './right-manage/RightList'
import RoleList from './right-manage/RoleList'
import UserList from './user-manage/UserList'
import Nopermisson from './nopermisson/Nopermisson'import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';export default function NewsSandBox() {return (<Layout><SideMenu></SideMenu><Layout><TopHeader></TopHeader><Router><Routes><Route path="/home" element={<Home />} /><Route path="/user-manage/list" element={<UserList />} /><Route path="/right-manage/role/list" element={<RoleList />} /><Route path="/right-manage/right/list" element={<RightList />} /><Route path="/" element={<Navigate to="/home" />} /><Route path='*' element={<Nopermisson/>}/></Routes></Router></Layout></Layout>)
}TopHeader：
import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;export default function TopHeader() {return (<Headerstyle={{padding: 0,background: colorBgContainer,}}><Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: '16px',width: 64,height: 64,}}/></Header>)
}SideMenu.jsx:
import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd'const { Header, Sider, Content } = Layout;export default function SideMenu() {return (<Sider trigger={null} collapsible collapsed={collapsed}><div className="demo-logo-vertical" /><Menutheme="dark"mode="inline"defaultSelectedKeys={['1']}items={[{key: '1',icon: <UserOutlined />,label: 'nav 1',},{key: '2',icon: <VideoCameraOutlined />,label: 'nav 2',},{key: '3',icon: <UploadOutlined />,label: 'nav 3',},]}/></Sider>)
}到这里之后科文老师不知道为什么又自顾自的开始重构代码了，我由于各种版本啥的不一样又得文档课ai三开
起因是这段代码看不懂，但是一定得重构吗，我努力看懂不行吗
这是重构了一下 的TopHeader代码：
import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;export default function TopHeader() {const [collapsed,setCollapsed] = useState(false)return (<Headerstyle={{padding: 0,background: colorBgContainer,}}>{/* <Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: '16px',width: 64,height: 64,}}/> */}{collapsed?<MenuUnfoldOutlined/>:<MenuFoldOutlined/>}</Header>)
}剩下一个组件是content组件，因为是显示内容，所以可以包住Switch（现在应该叫他Routes了），这样以后内容显示的就是相应的内容
更改本地的配置文件：
Host 121.36.38.249HostName 121.36.38.249User rootServerAliveInterval 30ServerAliveCountMax 5Host switch-121.36.38.249HostName 121.36.38.249User switchServerAliveInterval 30ServerAliveCountMax 5Host 47.98.190.179HostName 47.98.190.179User switchServerAliveInterval 30ServerAliveCountMax 5Host myserverHostName 121.36.38.249User rootIdentityFile ~/.ssh/id_rsaServerAliveInterval 30ServerAliveCountMax 5使用tmux：
tmux new -s mysession服务器还是经常断联🔥🔥🔥 ，拆特鸡皮替告诉我使用tmux并且更改配置文件会好🚀🚀🚀
呜呜呜我再也不想配置这个东西了
我好想配置免密登录可是我又怕配置之间出冲突但是哎呦每一次断联输密码真的好麻烦我要被折磨疯了
我又没跑模型 我只是一个小小的前端。。。别断联了我求你了。
据说会好用很多！
还是断联了，我又问了鸡皮替，它告诉我：
那么Mosh又是一个什么东西呢？
所以鸡皮替你的意思是我需要费劲心思在我的云服务器和我的主机上各安装一个这个子系统并且VScode还不支持这个同时还需要进行设置防火墙和端口号的开放并且安装到最后还是可能出现问题唯一的作用就是可以不断联是吗
这东西居然还有好几种装法
是么？那我是啥？小丑吗
它在干啥？我在干啥？这是啥情况？都怪肘元哲。。。
