Add Help Page

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "corepack": "^0.34.7",
+        "element-plus": "^2.14.5",
         "vite-plugin-vue-devtools": "^8.2.1",
         "vue": "^3.5.41",
         "vue-router": "^5.2.0"
@@ -46,6 +47,7 @@
       "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.29.7.tgz",
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -526,6 +528,49 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-4.2.0.tgz",
+      "integrity": "sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -586,6 +631,17 @@
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.8.tgz",
+      "integrity": "sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm-eabi": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.5.tgz",
@@ -838,6 +894,28 @@
       "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.25",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.25.tgz",
+      "integrity": "sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -1070,6 +1148,44 @@
       "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-14.4.0.tgz",
+      "integrity": "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.4.0",
+        "@vueuse/shared": "14.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-14.4.0.tgz",
+      "integrity": "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.4.0.tgz",
+      "integrity": "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.18.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.18.0.tgz",
@@ -1124,6 +1240,12 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.18",
       "resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.11.18.tgz",
@@ -1164,6 +1286,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.12",
         "caniuse-lite": "^1.0.30001809",
@@ -1262,6 +1385,12 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.23",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
+      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
@@ -1334,6 +1463,32 @@
       "integrity": "sha512-z4rMe3esBzlzovKHj4gxJnsCGZRK5l4baUvm+gCGJBPE+gsyUMKsuU9tnEUtI1dOebXz1ytAPGjvXhmQ7rIPwA==",
       "license": "ISC"
     },
+    "node_modules/element-plus": {
+      "version": "2.14.5",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.14.5.tgz",
+      "integrity": "sha512-bghYy/S+qg87enHPXELirhEdDqsVAUGcGpbGIeG8dz0kwpIkGz7gYsifulBshXX74iRtHib85XWQj0uSH2A1Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.2.0",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.8.0",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.8",
+        "@types/lodash": "^4.17.24",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "14.4.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.20",
+        "lodash": "^4.18.1",
+        "lodash-es": "^4.18.1",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0",
+        "vue-component-type-helpers": "^3.3.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.7"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
@@ -1784,6 +1939,31 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -1817,6 +1997,12 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.8.2",
       "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.2.tgz",
@@ -1894,6 +2080,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nostics": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/nostics/-/nostics-1.2.0.tgz",
@@ -2054,6 +2246,7 @@
       "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.2.5.tgz",
       "integrity": "sha512-VD2IE5PUG4Oj8zz2VGykiYd5wbnjdIiSsNQb8Qu5B+noEp+A78mu2iVvpp27g8es14Tk9rofNs5Tku9iQCS4fA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.146.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -2268,6 +2461,7 @@
       "resolved": "https://registry.npmmirror.com/vite/-/vite-8.2.2.tgz",
       "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.5",
@@ -2453,6 +2647,7 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.41.tgz",
       "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.41",
         "@vue/compiler-sfc": "3.5.41",
@@ -2469,6 +2664,12 @@
         }
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-3.3.11.tgz",
+      "integrity": "sha512-LwcxzeliO9fkQcpJG0PoX8X5kmAhKmH9wkpDLxNabwzkQ9Zeib2YVHwFV4pcWmMLfXVfjr/dSV+DaJ3cIPgSNA==",
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-5.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "corepack": "^0.34.7",
+    "element-plus": "^2.14.5",
     "vite-plugin-vue-devtools": "^8.2.1",
     "vue": "^3.5.41",
     "vue-router": "^5.2.0"

src/main.js

@@ -2,8 +2,11 @@ import './style.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from "@/router/router.js";
+import router from "@/router/router.js"
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 const VueApp = createApp(App)
 VueApp.use(router)
+VueApp.use(ElementPlus)
 VueApp.mount('#app')

src/router/router.js

@@ -5,6 +5,11 @@ const routes = [
         name: '首页',
         path: '/',
         component: () => import('../views/index/index.vue')
+    },
+    {
+        name: '帮助',
+        path: '/help',
+        component: () => import('../views/help/help.vue')
     }
 ]
 

src/views/help/help.vue

@@ -0,0 +1,408 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const router = useRouter()
+const activeNames = ref(['4xx', '5xx'])
+
+const statusCodes = {
+  '1xx': {
+    title: '1xx - 信息响应',
+    items: [
+      { code: '100', name: 'Continue', desc: '客户端应当继续发送请求。服务器已收到请求头，客户端应继续发送请求体。' },
+      { code: '101', name: 'Switching Protocols', desc: '服务器已理解并同意切换协议，通常用于 WebSocket 升级。' },
+    ]
+  },
+  '2xx': {
+    title: '2xx - 成功响应',
+    items: [
+      { code: '200', name: 'OK', desc: '请求已成功处理，服务器返回了请求的数据。' },
+      { code: '201', name: 'Created', desc: '请求已成功，并且创建了新资源，通常在 POST 或 PUT 请求后返回。' },
+      { code: '204', name: 'No Content', desc: '请求成功处理，但没有返回内容。常用于 DELETE 请求。' },
+    ]
+  },
+  '3xx': {
+    title: '3xx - 重定向',
+    items: [
+      { code: '301', name: 'Moved Permanently', desc: '请求的资源已永久移动到新 URL，客户端应更新书签或链接。' },
+      { code: '302', name: 'Found', desc: '请求的资源临时移动到新 URL，客户端应继续使用原有 URL。' },
+      { code: '304', name: 'Not Modified', desc: '资源未修改，可使用缓存版本。常用于条件请求（If-Modified-Since）。' },
+    ]
+  },
+  '4xx': {
+    title: '4xx - 客户端错误',
+    items: [
+      { code: '400', name: 'Bad Request', desc: '服务器无法理解请求格式，请检查请求语法和参数。' },
+      { code: '401', name: 'Unauthorized', desc: '请求要求身份验证，请登录后重试。' },
+      { code: '403', name: 'Forbidden', desc: '服务器理解请求，但拒绝授权访问，权限不足。' },
+      { code: '404', name: 'Not Found', desc: '服务器找不到请求的资源，请检查 URL 是否正确。' },
+      { code: '405', name: 'Method Not Allowed', desc: '请求方法不被允许，例如对只读接口发送了 POST 请求。' },
+      { code: '408', name: 'Request Timeout', desc: '请求超时，客户端未能在服务器预设时间内完成请求。' },
+      { code: '429', name: 'Too Many Requests', desc: '发送请求过多，已触发速率限制，请稍后重试。' },
+    ]
+  },
+  '5xx': {
+    title: '5xx - 服务器错误',
+    items: [
+      { code: '500', name: 'Internal Server Error', desc: '服务器遇到意外情况，无法完成请求，通常是服务端代码异常。' },
+      { code: '502', name: 'Bad Gateway', desc: '服务器作为网关或代理时，从上游服务器收到无效响应。' },
+      { code: '503', name: 'Service Unavailable', desc: '服务器暂时无法处理请求，通常因过载或维护停机。' },
+      { code: '504', name: 'Gateway Timeout', desc: '服务器作为网关或代理时，未及时从上游服务器收到响应。' },
+    ]
+  },
+}
+
+const solutions = [
+  {
+    title: '404 页面未找到',
+    icon: '🔍',
+    steps: [
+      '检查 URL 是否拼写正确，注意大小写和路径分隔符。',
+      '确认目标资源是否已移动或删除。',
+      '如果是内部链接，检查路由配置是否正确。',
+      '配置自定义 404 页面，引导用户回到首页或搜索。',
+    ]
+  },
+  {
+    title: '401 / 403 认证与权限错误',
+    icon: '🔐',
+    steps: [
+      '确认用户已登录且 Token / Session 未过期。',
+      '检查请求头中 Authorization 字段格式是否正确。',
+      '验证用户角色权限是否满足访问要求。',
+      '如使用 CORS，确认跨域请求携带了凭证（withCredentials）。',
+    ]
+  },
+  {
+    title: '500 服务器内部错误',
+    icon: '⚙️',
+    steps: [
+      '查看服务器日志，定位具体异常堆栈。',
+      '检查数据库连接是否正常。',
+      '确认服务端代码是否有未捕获的异常。',
+      '尝试重启服务或回滚最近部署的版本。',
+    ]
+  },
+  {
+    title: '502 / 504 网关错误',
+    icon: '🌐',
+    steps: [
+      '检查上游服务是否正常运行。',
+      '确认 Nginx / 反向代理配置是否正确。',
+      '增大代理超时时间（proxy_read_timeout）。',
+      '检查服务器负载和资源使用情况。',
+    ]
+  },
+  {
+    title: '网络异常 / 请求超时',
+    icon: '📡',
+    steps: [
+      '检查客户端网络连接是否稳定。',
+      '确认 DNS 解析是否正常。',
+      '设置合理的请求超时时间，并添加重试机制。',
+      '使用 navigator.onLine 检测离线状态并给出提示。',
+    ]
+  },
+]
+</script>
+
+<template>
+  <div class="help-page">
+    <header class="help-header">
+      <h1>帮助与参考</h1>
+      <p class="subtitle">HTTP 状态码速查 & Web 常见错误处理方案</p>
+      <el-button type="primary" size="large" bg @click="router.push('/')">
+        ← 返回首页
+      </el-button>
+    </header>
+
+    <!-- HTTP 状态码速查 -->
+    <section class="section">
+      <h2 class="section-title">📋 HTTP 状态码速查</h2>
+      <el-collapse v-model="activeNames" class="status-collapse">
+        <el-collapse-item
+            v-for="(group, key) in statusCodes"
+            :key="key"
+            :title="group.title"
+            :name="key"
+        >
+          <el-table :data="group.items" stripe style="width: 100%">
+            <el-table-column prop="code" label="状态码" width="100" />
+            <el-table-column prop="name" label="英文名称" width="220" />
+            <el-table-column prop="desc" label="说明" />
+          </el-table>
+        </el-collapse-item>
+      </el-collapse>
+    </section>
+
+    <!-- 常见错误处理方案 -->
+    <section class="section">
+      <h2 class="section-title">🛠️ 常见 Web 错误处理方案</h2>
+      <div class="solution-grid">
+        <el-card
+            v-for="(item, index) in solutions"
+            :key="index"
+            class="solution-card"
+            shadow="hover"
+        >
+          <template #header>
+            <div class="card-header">
+              <span class="card-icon">{{ item.icon }}</span>
+              <span class="card-title">{{ item.title }}</span>
+            </div>
+          </template>
+          <ol class="step-list">
+            <li v-for="(step, i) in item.steps" :key="i">{{ step }}</li>
+          </ol>
+        </el-card>
+      </div>
+    </section>
+
+    <!-- 全局错误处理建议 -->
+    <section class="section">
+      <h2 class="section-title">💡 全局错误处理最佳实践</h2>
+      <el-card shadow="never" class="practice-card">
+        <ul class="practice-list">
+          <li><strong>统一拦截：</strong>在 Axios 拦截器中统一处理 HTTP 错误，根据状态码弹出对应提示。</li>
+          <li><strong>友好提示：</strong>为用户展示可理解的错误信息，避免直接暴露技术细节。</li>
+          <li><strong>日志记录：</strong>将错误详情（状态码、请求路径、时间戳）上报至日志系统，便于排查。</li>
+          <li><strong>降级策略：</strong>关键接口失败时提供缓存数据或默认值，保证页面基本可用。</li>
+          <li><strong>重试机制：</strong>对网络超时等临时性错误，实现自动重试（建议最多 3 次，指数退避）。</li>
+          <li><strong>错误边界：</strong>在 Vue 中使用 onErrorCaptured 捕获组件树错误，防止白屏。</li>
+        </ul>
+      </el-card>
+    </section>
+
+    <footer class="help-footer">
+      <p>如有疑问，请联系系统管理员。</p>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.help-page {
+  min-height: 100vh;
+  background: linear-gradient(160deg, #f0f4f8 0%, #dce3ec 50%, #e8ecf1 100%);
+  padding: 40px 20px 24px;
+}
+
+/* ── Header ── */
+.help-header {
+  text-align: center;
+  margin-bottom: 52px;
+  padding-top: 20px;
+}
+
+.help-header h1 {
+  font-size: 2.6em;
+  font-weight: 700;
+  color: #1a1a2e;
+  letter-spacing: 2px;
+  margin-bottom: 10px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.subtitle {
+  font-size: 1.1em;
+  color: #6b7280;
+  margin-bottom: 28px;
+  letter-spacing: 1px;
+}
+
+/* ── Section ── */
+.section {
+  max-width: 980px;
+  margin: 0 auto 56px;
+}
+
+.section-title {
+  font-size: 1.45em;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 22px;
+  padding-left: 14px;
+  border-left: 4px solid #409eff;
+  line-height: 1.3;
+}
+
+/* ── Collapse ── */
+.status-collapse {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+:deep(.el-collapse) {
+  border: none;
+}
+
+:deep(.el-collapse-item__header) {
+  font-size: 1.05em;
+  font-weight: 600;
+  color: #1a1a2e;
+  background: #fff;
+  padding: 0 20px;
+  height: 52px;
+  line-height: 52px;
+  border-bottom: 1px solid #ebeef5;
+  transition: background-color 0.25s ease;
+}
+
+:deep(.el-collapse-item__header:hover) {
+  background: #f5f8ff;
+}
+
+:deep(.el-collapse-item__wrap) {
+  background: #fafbfd;
+  border-bottom: 1px solid #ebeef5;
+}
+
+:deep(.el-collapse-item__content) {
+  padding: 16px 12px;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.el-table th.el-table__cell) {
+  background: #f0f5ff;
+  color: #1a1a2e;
+  font-weight: 600;
+  font-size: 0.95em;
+}
+
+:deep(.el-table .el-table__row:hover > td) {
+  background: #ecf5ff !important;
+}
+
+/* ── Solution Cards ── */
+.solution-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 22px;
+}
+
+.solution-card {
+  border-radius: 12px;
+  border: none;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  overflow: hidden;
+}
+
+.solution-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.12);
+}
+
+:deep(.solution-card .el-card__header) {
+  background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%);
+  padding: 14px 20px;
+  border-bottom: 1px solid #e4e9f0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.card-icon {
+  font-size: 1.6em;
+  line-height: 1;
+}
+
+.card-title {
+  font-size: 1.08em;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+
+:deep(.solution-card .el-card__body) {
+  padding: 16px 20px 20px;
+}
+
+.step-list {
+  padding-left: 20px;
+  line-height: 2;
+  color: #374151;
+  margin: 0;
+}
+
+.step-list li {
+  margin-bottom: 4px;
+  padding-left: 4px;
+}
+
+.step-list li::marker {
+  color: #409eff;
+  font-weight: 600;
+}
+
+/* ── Practice Card ── */
+.practice-card {
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+:deep(.practice-card .el-card__body) {
+  padding: 8px 24px;
+}
+
+.practice-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.practice-list li {
+  padding: 14px 0;
+  border-bottom: 1px solid #f0f0f0;
+  line-height: 1.8;
+  color: #374151;
+  transition: padding-left 0.2s ease;
+}
+
+.practice-list li:hover {
+  padding-left: 8px;
+}
+
+.practice-list li:last-child {
+  border-bottom: none;
+}
+
+.practice-list li strong {
+  color: #409eff;
+  margin-right: 2px;
+}
+
+/* ── Footer ── */
+.help-footer {
+  text-align: center;
+  padding: 40px 0 16px;
+  color: #9ca3af;
+  font-size: 0.92em;
+  letter-spacing: 0.5px;
+}
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .help-header h1 {
+    font-size: 1.8em;
+  }
+
+  .section-title {
+    font-size: 1.2em;
+  }
+
+  .solution-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :deep(.el-table) {
+    font-size: 0.9em;
+  }
+}
+</style>

src/views/index/index.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const canvasRef = ref(null)
 canvasRef.value = undefined;
@@ -90,6 +93,11 @@ onBeforeUnmount(() => {
   if (animationId) cancelAnimationFrame(animationId)
   window.removeEventListener('resize', () => {})
 })
+
+const button = [
+  {type: 'success', text: '查看帮助'}
+]
+
 </script>
 
 <template>
@@ -109,6 +117,19 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
+      <div class="btn-wrapper">
+        <el-button
+            :type="button[0].type"
+            :key="button[0].text"
+            size="large"
+            class="action-btn"
+            bg
+            @click="router.push('/help')"
+        >
+          {{ button[0].text }}
+        </el-button>
+      </div>
+
     </div>
   </div>
 </template>
@@ -158,4 +179,13 @@ onBeforeUnmount(() => {
   position: relative;
   z-index: 1;
 }
+.btn-wrapper {
+  display: flex;
+  justify-content: center;
+}
+.action-btn {
+  font-size: 18px;
+  padding: 14px 36px;
+  border-radius: 8px;
+}
 </style>