添加了系统配置，待添加至侧栏

src/pages/HomeView.tsx

@@ -148,6 +148,9 @@ function HomeView() {
         key: "/stat",
         //icon: React.createElement(UserOutlined),
         label: <Link to="/stat">财务统计</Link>,
+    }, {
+        key: "/config",
+        label: <Link to="/config">系统配置</Link>
     }]
 
     const {
@@ -197,8 +200,10 @@ function HomeView() {
         <Layout style={{height: '100%'}}>
             <Sider
                 width={208}
-                style={{background: colorBgContainer,zIndex: 200, boxShadow: '6px 0px 16px 0px rgba(0, 0, 0, 0.08)',
+                style={{
-                    borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'}}
+                    background: colorBgContainer, zIndex: 200, boxShadow: '6px 0px 16px 0px rgba(0, 0, 0, 0.08)',
+                    borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'
+                }}
                 breakpoint="lg"
                 collapsedWidth="0"
                 onBreakpoint={(broken) => {

src/pages/configuration/Configuration.tsx

@@ -0,0 +1,54 @@
+import {Tabs} from "antd";
+import React from "react";
+import UserConfig from "./subpage/UserConfig";
+import CityConfig from "./subpage/CityConfig";
+import DepartmentConfig from "./subpage/DepartmentConfig";
+import OtherConfig from "./subpage/OtherConfig";
+
+class Configuration extends React.Component<any,any> {
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            activatedTab: 0
+        }
+    }
+
+    tabItems = () => {
+        return [{
+            label: "用户配置",
+            key: "0",
+            children: <UserConfig activate={this.state.activatedTab === 0}/>
+        },
+            {
+                label: "城市配置",
+                key: "1",
+                children: <CityConfig activate={this.state.activatedTab === 1}/>
+            },
+            {
+                label: "部门配置",
+                key: "2",
+                children: <DepartmentConfig activate={this.state.activatedTab === 2}/>
+            },
+            {
+                label: "其他配置",
+                key: "3",
+                children:<OtherConfig activate={this.state.activatedTab === 3}/>
+            }]
+    }
+    tabChange = (key: string) => {
+        this.setState({activatedTab: Number(key)})
+    }
+    render() {
+        return (
+            <Tabs
+                style={{backgroundColor: "white",paddingLeft:10}}
+                activeKey={this.state.activatedTab.toString()}
+                onChange={this.tabChange}
+                type="line"
+                items={this.tabItems()}
+            />
+        )
+    }
+}
+export default Configuration;

src/pages/configuration/subpage/CityConfig.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+class CityConfig extends React.Component<any,any>{
+  render() {
+    return (
+      <div>
+        <h1>City Config</h1>
+      </div>
+    );
+  }
+}
+export default CityConfig;

src/pages/configuration/subpage/DepartmentConfig.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+
+class DepartmentConfig extends React.Component<any,any> {
+  render() {
+    return (
+      <div>
+        <h1>Department Config</h1>
+      </div>
+    );
+  }
+}
+export default DepartmentConfig;

src/pages/configuration/subpage/OtherConfig.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+class OtherConfig extends React.Component<any,any> {
+    render() {
+        return (
+        <div>
+            <h1>Other Config</h1>
+        </div>
+        );
+    }
+}
+export default OtherConfig;

src/pages/configuration/subpage/UserConfig.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+class UserConfig extends React.Component<any,any> {
+    render() {
+        return (
+            <div>
+                <h1>User Config</h1>
+            </div>
+        );
+    }
+}
+export default UserConfig;

src/router/router.tsx

@@ -8,6 +8,7 @@ import {BrowserRouter} from "./BrowserRouter"
 import InvoiceManagement from "../pages/Invoice/management/InvoiceManagement";
 import ReimbursementApproval from "../pages/reimbursement/approval/ReimbursementApproval";
 import StatView from "../pages/stat/StatView";
+import Configuration from "../pages/configuration/Configuration";
 
 export const history = createBrowserHistory()
 
@@ -21,6 +22,7 @@ function CustomRouter() {
                     <Route path="invoice/management" element={<InvoiceManagement/>}></Route>
                     <Route path="reimbursement/approval" element={<ReimbursementApproval/>}></Route>
                     <Route path="stat" element={<StatView/>}></Route>
+                    <Route path="config" element={<Configuration/>}></Route>
                 </Route>
                 <Route path="/login" element={<LoginView/>}></Route>
             </Routes>