fix: route

Author: wkylin

src/components/stateless/FixTabPanel/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export type FixTabPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode
+}
+
+declare const FixTabPanel: React.ForwardRefExoticComponent<FixTabPanelProps & React.RefAttributes<HTMLDivElement>>
+
+export default FixTabPanel

src/components/stateless/SectionNotFound/index.jsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import { Result, Button, Typography, Space } from 'antd'
+import { useLocation } from 'react-router-dom'
+import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons'
+import useSafeNavigate from '@hooks/useSafeNavigate'
+import FixTabPanel from '@stateless/FixTabPanel'
+
+const { Paragraph, Text } = Typography
+
+const SectionNotFound = () => {
+  const location = useLocation()
+  const { redirectTo } = useSafeNavigate()
+  const pathname = location.pathname || '/'
+
+  const sectionPath = useMemo(() => {
+    const segments = pathname.split('/').filter(Boolean)
+    if (segments.length <= 1) {
+      return '/'
+    }
+    return `/${segments.slice(0, -1).join('/')}`
+  }, [pathname])
+
+  const handleBackToSection = () => {
+    redirectTo(sectionPath)
+  }
+
+  const handleBackHome = () => {
+    redirectTo('/')
+  }
+
+  return (
+    <FixTabPanel>
+      <Result
+        status="404"
+        title="模块子页面不存在"
+        subTitle={
+          <Paragraph style={{ marginBottom: 0 }}>
+            当前路径 <Text code>{pathname}</Text> 不在该模块的有效子路由列表中。
+            <br />
+            建议返回 <Text code>{sectionPath}</Text> 查看模块首页，或返回全局首页继续浏览。
+          </Paragraph>
+        }
+        extra={
+          <Space size="middle">
+            <Button icon={<ArrowLeftOutlined />} onClick={handleBackToSection}>
+              返回模块首页
+            </Button>
+            <Button type="primary" icon={<HomeOutlined />} onClick={handleBackHome}>
+              返回首页
+            </Button>
+          </Space>
+        }
+      />
+    </FixTabPanel>
+  )
+}
+
+export default SectionNotFound

src/config/menu.config.jsx

@@ -61,46 +61,39 @@ const rawMainLayoutMenu = [
   { label: 'Profile', key: '/profile', icon: <UserOutlined /> },
   { label: 'Contact', key: '/contact', icon: <ContactsOutlined /> },
   {
-    label: '技术栈',
-    key: '/tech',
+    label: '前端技术栈',
+    key: '/tech/frontend',
     icon: <DeploymentUnitOutlined />,
     children: [
+      { label: 'React', key: '/tech/frontend/react', icon: <CodeOutlined /> },
       {
-        label: '前端技术栈',
-        key: '/tech/frontend',
-        icon: <Html5Outlined />,
+        label: 'Vue',
+        key: '/tech/frontend/vue',
+        icon: <CodeOutlined />,
         children: [
           {
-            label: '框架生态',
-            key: '/tech/frontend/framework',
+            label: 'Vue 插件',
+            key: '/tech/frontend/plugins',
             icon: <AppstoreOutlined />,
             children: [
-              {
-                label: 'Vue',
-                key: '/tech/frontend/vue',
-                icon: <CodeOutlined />,
-                children: [
-                  {
-                    label: 'Vue 插件',
-                    key: '/tech/frontend/vue/plugins',
-                    icon: <AppstoreOutlined />,
-                    children: [
-                      { label: 'Vue3 API', key: '/tech/frontend/vue/plugins/vue3', icon: <FileTextOutlined /> },
-                      { label: '性能优化', key: '/tech/frontend/vue/plugins/perf', icon: <ThunderboltOutlined /> },
-                    ],
-                  },
-                ],
-              },
-              { label: 'Angular', key: '/tech/frontend/angular', icon: <Html5Outlined /> },
+              { label: 'Vue3 API', key: '/tech/frontend/plugins/vue3', icon: <FileTextOutlined /> },
+              { label: '性能优化', key: '/tech/frontend/plugins/perf', icon: <ThunderboltOutlined /> },
             ],
           },
         ],
       },
-      {
-        label: '后端技术栈',
-        key: '/tech/backend',
-        icon: <CloudServerOutlined />,
-      },
+      { label: 'Angular', key: '/tech/frontend/angular', icon: <Html5Outlined /> },
+      { label: 'Node', key: '/tech/frontend/node', icon: <CloudServerOutlined /> },
+    ],
+  },
+  {
+    label: '后端技术栈',
+    key: '/tech/backend',
+    icon: <CloudServerOutlined />,
+    children: [
+      { label: 'Node', key: '/tech/backend/node', icon: <CodeOutlined /> },
+      { label: 'Java', key: '/tech/backend/java', icon: <CodeOutlined /> },
+      { label: 'Go', key: '/tech/backend/go', icon: <CodeOutlined /> },
     ],
   },
   {

src/mock/permission.ts

@@ -160,10 +160,9 @@ export const routePermissionMap: Record<string, PermissionCode> = {
   '/tech/frontend': 'tech:read',
   '/tech/frontend/react': 'tech:read',
   '/build/webpack': 'build:read',
-  '/tech/frontend/vue': 'tech:read',
-  '/tech/frontend/vue/plugins': 'tech:read',
-  '/tech/frontend/vue/plugins/vue3': 'tech:read',
-  '/tech/frontend/vue/plugins/perf': 'tech:read',
+  '/tech/frontend/plugins': 'tech:read',
+  '/tech/frontend/plugins/vue3': 'tech:read',
+  '/tech/frontend/plugins/perf': 'tech:read',
   '/tech/frontend/angular': 'tech:read',
   '/tech/frontend/angular/:id': 'tech:read',
   '/tech/frontend/node': 'tech:read',

src/pages/product/add/index.jsx

@@ -3,19 +3,22 @@ import useSafeNavigate from '@hooks/useSafeNavigate'
 import { Button } from 'antd'
 import FixTabPanel from '@stateless/FixTabPanel'
 
-const BackendPage = () => {
+const BackendStack = () => {
   const { redirectTo } = useSafeNavigate()
 
   return (
     <FixTabPanel>
-      <Button type="primary" style={{ margin: 10 }} onClick={() => redirectTo('/')}>
-        Home
+      <Button type="primary" onClick={() => redirectTo('/tech/backend/node')} style={{ margin: 10 }}>
+        Node
       </Button>
-      <Button style={{ margin: 10 }} onClick={() => redirectTo('/tech/frontend')}>
-        Go to Frontend
+      <Button onClick={() => redirectTo('/tech/backend/java')} style={{ margin: 10 }}>
+        Java
+      </Button>
+      <Button onClick={() => redirectTo('/tech/backend/go')} type="dashed" style={{ margin: 10 }}>
+        Go
       </Button>
     </FixTabPanel>
   )
 }
 
-export default BackendPage
+export default BackendStack

src/pages/product/edit/index.jsx

@@ -6,7 +6,7 @@ const VuePlugins = () => {
     <FixTabPanel>
       <div style={{ padding: 16 }}>
         <h2>Vue Plugins</h2>
-        <p>这是用于测试的五级菜单页面：/tech/frontend/vue/plugins</p>
+        <p>这是用于测试的菜单页面：/tech/frontend/plugins</p>
         <p>此页面用于展示插件列表与深层菜单展开行为。</p>
       </div>
     </FixTabPanel>