src/assets/css/components/common/sidebar.scss

@@ -46,7 +46,7 @@
     }
   }
 
-  .content {
+  .content, .bottom-fixed {
     display: flex;
     min-height: 0;
     flex-direction: column;

src/assets/svg/setting.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512.571429 373.257143c-34.171429 0-66.171429 13.257143-90.4 37.485714-24.114286 24.228571-37.485714 56.228571-37.485715 90.4 0 34.171429 13.371429 66.171429 37.485715 90.4 24.228571 24.114286 56.228571 37.485714 90.4 37.485714 34.171429 0 66.171429-13.371429 90.4-37.485714 24.114286-24.228571 37.485714-56.228571 37.485714-90.4 0-34.171429-13.371429-66.171429-37.485714-90.4a126.811429 126.811429 0 0 0-90.4-37.485714z m471.2 269.142857l-74.742858-63.885714c3.542857-21.714286 5.371429-43.885714 5.371429-65.942857s-1.828571-44.342857-5.371429-65.942858l74.742858-63.885714a36.605714 36.605714 0 0 0 10.628571-40.228571l-1.028571-2.971429a505.714286 505.714286 0 0 0-90.971429-157.371428l-2.057143-2.4a36.708571 36.708571 0 0 0-40.114286-10.857143l-92.8 33.028571c-34.285714-28.114286-72.457143-50.285714-113.828571-65.714286l-17.942857-97.028571a36.628571 36.628571 0 0 0-29.485714-29.371429l-3.085715-0.571428c-59.428571-10.742857-122.057143-10.742857-181.485714 0l-3.085714 0.571428a36.628571 36.628571 0 0 0-29.485715 29.371429l-18.057142 97.485714a403.931429 403.931429 0 0 0-113.028572 65.485715l-93.485714-33.257143a36.571429 36.571429 0 0 0-40.114286 10.857143l-2.057143 2.4a509.634286 509.634286 0 0 0-90.971428 157.371428l-1.028572 2.971429c-5.142857 14.285714-0.914286 30.285714 10.628572 40.228571l75.657143 64.571429c-3.542857 21.485714-5.257143 43.428571-5.257143 65.142857 0 21.942857 1.714286 43.885714 5.257143 65.142857l-75.428572 64.571429a36.605714 36.605714 0 0 0-10.628571 40.228571l1.028571 2.971429c20.685714 57.485714 51.2 110.628571 90.971429 157.371428l2.057143 2.4a36.708571 36.708571 0 0 0 40.114285 10.857143l93.485715-33.257143c34.057143 28 72 50.171429 113.028571 65.485714l18.057143 97.485715a36.628571 36.628571 0 0 0 29.485714 29.371428l3.085714 0.571429a512.308571 512.308571 0 0 0 181.485715 0l3.085714-0.571429a36.628571 36.628571 0 0 0 29.485714-29.371428l17.942857-97.028572c41.371429-15.542857 79.542857-37.6 113.828572-65.714285l92.8 33.028571a36.571429 36.571429 0 0 0 40.114286-10.857143l2.057142-2.4c39.771429-46.971429 70.285714-99.885714 90.971429-157.371428l1.028571-2.971429c4.914286-14.171429 0.685714-30.057143-10.857142-40z m-471.2 59.657143c-110.971429 0-200.914286-89.942857-200.914286-200.914286s89.942857-200.914286 200.914286-200.914286 200.914286 89.942857 200.914285 200.914286-89.942857 200.914286-200.914285 200.914286z" /></svg>

src/components/common/sidebar/index.tsx

@@ -9,6 +9,7 @@ interface SidebarProps extends React.PropsWithChildren {
     title: string
     width?: string
     onSidebarSwitch?: (hidden: boolean) => void
+    bottomFixed?: React.ReactNode
 }
 
 const Sidebar: React.FC<SidebarProps> = (props) => {
@@ -34,6 +35,9 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                 </div>
                 <SidebarSeparate style={{ marginTop: 0 }} />
                 <div className={'content'}>{props.children}</div>
+                <div className={'bottom-fixed'} style={{ flex: 'none' }}>
+                    {props.bottomFixed}
+                </div>
                 <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
                 <SidebarFooter />
             </div>

src/pages/SystemFramework.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import system from '@/router/system'
+import '@/assets/css/pages/tools-framework.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import Sidebar from '@/components/common/sidebar'
+import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar/SidebarItem'
+
+const SystemFramework: React.FC = () => {
+    return (
+        <>
+            <FitFullScreen className={'flex-horizontal'}>
+                <div className={'left-panel'}>
+                    <Sidebar title={'系统设置'}>
+                        <SidebarItemList>
+                            {system.map((value) => {
+                                return value.menu ? (
+                                    <SidebarItem
+                                        path={value.absolutePath}
+                                        icon={value.icon}
+                                        text={value.name}
+                                        key={value.id}
+                                    />
+                                ) : undefined
+                            })}
+                        </SidebarItemList>
+                    </Sidebar>
+                </div>
+                <div className={'right-panel'}>
+                    <Outlet />
+                </div>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default SystemFramework

src/pages/UserFramework.tsx

@@ -1,17 +1,28 @@
 import React from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import user from '@/router/user'
 import '@/assets/css/pages/tools-framework.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import user from '@/router/user.tsx'
 
 const ToolsFramework: React.FC = () => {
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'个人中心'}>
+                    <Sidebar
+                        title={'个人中心'}
+                        bottomFixed={
+                            <SidebarItemList>
+                                <SidebarItem
+                                    path={'/system'}
+                                    icon={IconFatwebSetting}
+                                    text={'系统设置'}
+                                />
+                            </SidebarItemList>
+                        }
+                    >
                         <SidebarItemList>
                             {user.map((value) => {
                                 return value.menu ? (

src/router/system.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const user: RouteJsonObject[] = [
+    {
+        path: '',
+        absolutePath: '/system',
+        id: 'system',
+        name: '系统设置',
+        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        menu: true
+    },
+    {
+        path: '*',
+        absolutePath: '*',
+        element: <Navigate to="/system" replace />
+    }
+]
+
+export default user