diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
new file mode 100644
index 0000000..5ec575f
--- /dev/null
+++ b/src/ant-design.d.ts
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
+
+declare global {
+    type IconComponent =
+        | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
+        | React.ForwardRefExoticComponent<CustomIconComponentProps>
+}
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
new file mode 100644
index 0000000..d8b6342
--- /dev/null
+++ b/src/assets/css/pages/tools-framework.scss
@@ -0,0 +1,43 @@
+@use "@/assets/css/constants" as constants;
+
+.left-panel {
+  width: 16%;
+  background-color: constants.$origin-color;
+
+  .title {
+    font-size: 2em;
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 0.6em;
+    padding: 10px;
+    color: constants.$main-color;
+  }
+
+  .content {
+    ul{
+      li {
+        //background-color: #4E47BB;
+        margin: 4px 10px;
+        padding: 4px;
+        &.item {
+          background-color: #4E47BB;
+        }
+
+        .separate {
+          height: 0;
+          border: {
+            width: 1px;
+            color: constants.$font-secondary-color;
+            style: solid;
+          };
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+}
+
+.right-panel {
+  flex: 1;
+  background-color: constants.$background-color;
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/global.d.ts
similarity index 91%
rename from src/vite-env.d.ts
rename to src/global.d.ts
index 1311793..aa1a600 100644
--- a/src/vite-env.d.ts
+++ b/src/global.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="./ant-design" />
 
 interface ImportMetaEnv {
     readonly VITE_API_URL: string
@@ -16,6 +17,7 @@ type RouteHandle = {
     titlePrefix?: string
     title?: string
     titlePostfix?: string
+    icon?: IconComponent
 }
 
 type _Response<T> = {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 96c04ad..f59a243 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,7 +1,127 @@
 import React from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import '@/assets/css/pages/tools-framework.scss'
+import router from '@/router'
+import { NavLink } from 'react-router-dom'
+import Icon from '@ant-design/icons'
 
 const ToolsFramework: React.FC = () => {
-    return <></>
+    const frameworkRoute = useMatches()[1]
+    const routeId = frameworkRoute.id
+    const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
+
+    return (
+        <>
+            <FitFullScreen className={'flex-horizontal'}>
+                <div className={'left-panel'}>
+                    <div className={'title'}>氦工具</div>
+                    <div className={'content'}>
+                        <ul>
+                            <li className={'item'}>
+                                <NavLink
+                                    to={''}
+                                    className={({ isActive, isPending }) =>
+                                        isPending ? ' pending' : isActive ? ' active' : ''
+                                    }
+                                >
+                                    {routeChildren ? (
+                                        <>
+                                            <Icon
+                                                className={'icon'}
+                                                component={
+                                                    (routeChildren[0].handle as RouteHandle).icon
+                                                }
+                                            />
+                                            <span className={'text'}>
+                                                {(routeChildren[0].handle as RouteHandle).name}
+                                            </span>
+                                        </>
+                                    ) : (
+                                        '全部工具'
+                                    )}
+                                </NavLink>
+                                <div className={'home'}></div>
+                            </li>
+                            <li>
+                                <div className={'separate'} />
+                            </li>
+                            {routeChildren?.map((route) => {
+                                return (route.handle as RouteHandle).menu &&
+                                    route.id !== 'tools' ? (
+                                    <li className={'item'} key={route.id}>
+                                        <NavLink
+                                            to={route.path ?? ''}
+                                            className={({ isActive, isPending }) =>
+                                                isPending ? 'pending' : isActive ? 'active' : ''
+                                            }
+                                        >
+                                            <Icon
+                                                className={'icon'}
+                                                component={(route.handle as RouteHandle).icon}
+                                            />
+                                            <span className={'text'}>
+                                                {(route.handle as RouteHandle).name}
+                                            </span>
+                                        </NavLink>
+                                        {route.children ? (
+                                            <ul className={'submenu'}>
+                                                {route.children.map((subRoute) => {
+                                                    return (subRoute.handle as RouteHandle).menu ? (
+                                                        <li className={'item'} key={subRoute.id}>
+                                                            <NavLink
+                                                                to={
+                                                                    (route.path ?? '') +
+                                                                    '/' +
+                                                                    (subRoute.path ?? '')
+                                                                }
+                                                                className={({
+                                                                    isActive,
+                                                                    isPending
+                                                                }) =>
+                                                                    isPending
+                                                                        ? 'pending'
+                                                                        : isActive
+                                                                        ? 'active'
+                                                                        : ''
+                                                                }
+                                                            >
+                                                                <Icon
+                                                                    className={'icon'}
+                                                                    component={
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).icon
+                                                                    }
+                                                                />
+                                                                <span className={'text'}>
+                                                                    {
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).name
+                                                                    }
+                                                                </span>
+                                                            </NavLink>
+                                                        </li>
+                                                    ) : (
+                                                        <></>
+                                                    )
+                                                })}
+                                            </ul>
+                                        ) : (
+                                            <></>
+                                        )}
+                                    </li>
+                                ) : (
+                                    <></>
+                                )
+                            })}
+                        </ul>
+                    </div>
+                </div>
+                <div className={'right-panel'}></div>
+            </FitFullScreen>
+        </>
+    )
 }
 
 export default ToolsFramework
diff --git a/src/router/index.tsx b/src/router/index.tsx
index fe6967e..6c152d4 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -26,6 +26,7 @@ const routes: RouteObject[] = [
                         Component: React.lazy(() => import('@/pages/tools')),
                         handle: {
                             name: '全部工具',
+                            icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
                             menu: true,
                             auth: false
                         }
@@ -34,11 +35,57 @@ const routes: RouteObject[] = [
                         path: 'translation',
                         id: 'tools-translation',
                         Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        children: [
+                            {
+                                path: '1',
+                                id: '1',
+                                handle: {
+                                    name: '翻译1',
+                                    menu: true
+                                }
+                            },
+                            {
+                                path: '2',
+                                id: '2',
+                                handle: {
+                                    name: '翻译2',
+                                    menu: true
+                                }
+                            }
+                        ],
                         handle: {
                             name: '翻译',
                             menu: true,
                             auth: true
                         }
+                    },
+                    {
+                        path: 'translation-',
+                        id: 'tools-translation-',
+                        Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        children: [
+                            {
+                                path: '1-',
+                                id: '1-',
+                                handle: {
+                                    name: '翻译1-',
+                                    menu: true
+                                }
+                            },
+                            {
+                                path: '2-',
+                                id: '2-',
+                                handle: {
+                                    name: '翻译2-',
+                                    menu: true
+                                }
+                            }
+                        ],
+                        handle: {
+                            name: '翻译-',
+                            menu: true,
+                            auth: true
+                        }
                     }
                 ],
                 handle: {