src/assets/css/pages/header.scss

@@ -79,6 +79,22 @@
 
       .item:hover .submenu {
         display: block;
+        border: {
+          width: 1px;
+          color: constants.$border-color;
+          style: solid;
+        };
+        animation: 0.3s;
+
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateY(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(4px);
+          }
+        }
       }
 
       .submenu {
@@ -88,20 +104,29 @@
         text-align: center;
         background-color: white;
         transform: translateY(4px);
-        border: {
-          width: 1px;
-          color: constants.$border-color;
-          style: solid;
-        };
+        overflow: hidden;
 
         .item {
           display: block;
-          padding: 10px;
           font-size: 0.8em;
+          transition: all 0s;
+
+          a {
+            display: block;
+            padding: 8px 0;
+          }
         }
 
         .item:hover {
           transform: none;
+          a {
+            background-color: constants.$focus-color !important;
+          }
+        }
+
+        .active {
+          font-weight: bold;
+          border: none;
         }
       }
     }

src/pages/MainFramework.tsx

@@ -5,6 +5,7 @@ import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import Icon from '@ant-design/icons'
 import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+import { NavLink } from 'react-router-dom'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -113,11 +114,29 @@ const MainFramework: React.FC = () => {
                                                                     className={'item'}
                                                                     key={subRoute.id}
                                                                 >
-                                                                    {
-                                                                        (
-                                                                            subRoute.handle as RouteHandle
-                                                                        ).name
-                                                                    }
+                                                                    <NavLink
+                                                                        to={
+                                                                            (route.path ?? '') +
+                                                                            '/' +
+                                                                            (subRoute.path ?? '')
+                                                                        }
+                                                                        className={({
+                                                                            isActive,
+                                                                            isPending
+                                                                        }) =>
+                                                                            isPending
+                                                                                ? 'pending'
+                                                                                : isActive
+                                                                                ? 'active'
+                                                                                : ''
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            (
+                                                                                subRoute.handle as RouteHandle
+                                                                            ).name
+                                                                        }
+                                                                    </NavLink>
                                                                 </li>
                                                             ) : (
                                                                 <></>

src/router/index.tsx

@@ -53,16 +53,6 @@ const routes: RouteObject[] = [
                                     menu: true,
                                     auth: false
                                 }
-                            },
-                            {
-                                path: 'translation',
-                                id: 'tools-translationa',
-                                Component: React.lazy(() => import('@/pages/tools/Translation')),
-                                handle: {
-                                    name: '翻译',
-                                    menu: true,
-                                    auth: false
-                                }
                             }
                         ],
                         handle: {