Add Help Page
This commit is contained in:
201
package-lock.json
generated
201
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -5,6 +5,11 @@ const routes = [
|
||||
name: '首页',
|
||||
path: '/',
|
||||
component: () => import('../views/index/index.vue')
|
||||
},
|
||||
{
|
||||
name: '帮助',
|
||||
path: '/help',
|
||||
component: () => import('../views/help/help.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
408
src/views/help/help.vue
Normal file
408
src/views/help/help.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user