5 Commits

Author SHA1 Message Date
5d06560a08 更新README 2026-09-02 19:55:41 +08:00
36a37bb6e3 修复了一些Bug 2026-09-02 19:53:27 +08:00
155818bbc7 修复了一些Bug 2026-09-02 19:52:25 +08:00
419c7bc660 Add Help Page 2026-09-02 19:04:48 +08:00
0422b724b4 README.md 2026-08-31 18:13:03 +08:00
9 changed files with 936 additions and 11 deletions

View File

@@ -3,3 +3,63 @@
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
Project NodeJS Version: `v20.18.3`
### Run dev commands:
```shell
npm run dev
```
### Run build commands:
```shell
npm run build
```
### 对于Nginx服务器需要添加以下配置
找到你站点 Nginx 配置文件(通常在 `/etc/nginx/conf.d/xxx.conf``/etc/nginx/sites-available/xxx`),在 `location /` 块中添加 `try_files`
```nginx
server {
listen 80;
server_name your-domain.com;
root /你的部署目录/dist; # 指向你构建产物的目录
index index.html;
location / {
try_files $uri $uri/ /index.html; # 关键配置
}
# 静态资源缓存(可选,提升性能)
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
```
**核心就是这一行:**
```nginx
try_files $uri $uri/ /index.html;
```
它的含义是:
1. 先尝试查找请求的文件(`$uri`
2. 再尝试查找请求的目录(`$uri/`
3. 都找不到就返回 `index.html`,让 Vue Router 接管路由
## 生效步骤
修改完配置后,执行:
```bash
# 检查配置语法是否正确
nginx -t
# 重新加载配置(无需重启)
nginx -s reload
```
配置生效后,直接访问 `/help` 就不会再 404 了。

377
package-lock.json generated
View File

@@ -9,12 +9,15 @@
"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"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.8",
"unplugin-auto-import": "^21.1.0",
"unplugin-vue-components": "^32.1.0",
"vite": "^8.2.2"
}
},
@@ -46,6 +49,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 +530,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 +633,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",
@@ -832,12 +890,41 @@
"integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
"license": "MIT"
},
"node_modules/@types/estree": {
"version": "1.0.9",
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz",
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/jsesc": {
"version": "2.5.1",
"resolved": "https://registry.npmmirror.com/@types/jsesc/-/jsesc-2.5.1.tgz",
"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 +1157,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 +1249,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 +1295,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.11.12",
"caniuse-lite": "^1.0.30001809",
@@ -1262,6 +1394,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 +1472,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",
@@ -1364,6 +1528,19 @@
"node": ">=6"
}
},
"node_modules/escape-string-regexp": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1784,6 +1961,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 +2019,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 +2102,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 +2268,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"
@@ -2132,6 +2347,26 @@
"node": ">=0.10.0"
}
},
"node_modules/strip-literal": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-4.0.0.tgz",
"integrity": "sha512-PaqAvfUZKBwc/SLmNZtHmzK+v19Z4O4eS3cKPeGvbIv/U3pnyEq4Tuw3/4v/FwfM8VQaEawsyCcOQ0P+kpwWWw==",
"dev": true,
"license": "MIT",
"dependencies": {
"js-tokens": "^10.0.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/strip-literal/node_modules/js-tokens": {
"version": "10.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-10.0.0.tgz",
"integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/tinyglobby": {
"version": "0.2.17",
"resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -2163,6 +2398,64 @@
"integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
"license": "MIT"
},
"node_modules/unimport": {
"version": "6.4.0",
"resolved": "https://registry.npmmirror.com/unimport/-/unimport-6.4.0.tgz",
"integrity": "sha512-JJOOuNMFq8b4ZPBKwQUxEcba4MplskDzYI1Lvrf8rJfWphZTWvPNXWa493qsPngHUmub89w6C7j+SeLWTE/UIQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"acorn": "^8.18.0",
"escape-string-regexp": "^5.0.0",
"estree-walker": "^3.0.3",
"local-pkg": "^1.2.1",
"magic-string": "^1.1.0",
"mlly": "^1.8.2",
"pathe": "^2.0.3",
"picomatch": "^4.0.5",
"pkg-types": "^2.3.1",
"scule": "^1.3.0",
"strip-literal": "^4.0.0",
"tinyglobby": "^0.2.17",
"unplugin": "^3.3.0",
"unplugin-utils": "^0.3.2"
},
"engines": {
"node": ">=18.12.0"
},
"peerDependencies": {
"oxc-parser": "*",
"rolldown": "^1.0.0"
},
"peerDependenciesMeta": {
"oxc-parser": {
"optional": true
},
"rolldown": {
"optional": true
}
}
},
"node_modules/unimport/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/unimport/node_modules/magic-string": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.2.3.tgz",
"integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
}
},
"node_modules/unplugin": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-3.3.0.tgz",
@@ -2217,6 +2510,49 @@
}
}
},
"node_modules/unplugin-auto-import": {
"version": "21.1.0",
"resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-21.1.0.tgz",
"integrity": "sha512-EzrSqWIBulEqCuP7idADXH+tVKYrbwKlR5+r/lOWik0o+Ksny1kitmtryHGNSv7puzzORlcIwT/x2JStiszlHA==",
"dev": true,
"license": "MIT",
"dependencies": {
"local-pkg": "^1.2.1",
"magic-string": "^1.1.0",
"picomatch": "^4.0.5",
"unimport": "^6.4.0",
"unplugin": "^3.3.0",
"unplugin-utils": "^0.3.2"
},
"engines": {
"node": ">=20.19.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@nuxt/kit": "^4.0.0",
"@vueuse/core": "*"
},
"peerDependenciesMeta": {
"@nuxt/kit": {
"optional": true
},
"@vueuse/core": {
"optional": true
}
}
},
"node_modules/unplugin-auto-import/node_modules/magic-string": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.2.3.tgz",
"integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
}
},
"node_modules/unplugin-utils": {
"version": "0.3.2",
"resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
@@ -2233,6 +2569,39 @@
"url": "https://github.com/sponsors/sxzz"
}
},
"node_modules/unplugin-vue-components": {
"version": "32.1.0",
"resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-32.1.0.tgz",
"integrity": "sha512-YiUkSxuRjab18XFOrX5VsIxXzccrfmHVGsGeJgSgklb829DQmCy9E4vvDUE4tuvZZdxyFJZX0Oc4TPnnxiiMyg==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": "^5.0.0",
"local-pkg": "^1.2.0",
"magic-string": "^0.30.21",
"mlly": "^1.8.2",
"obug": "^2.1.1",
"picomatch": "^4.0.4",
"tinyglobby": "^0.2.16",
"unplugin": "^3.0.0",
"unplugin-utils": "^0.3.1"
},
"engines": {
"node": ">=20.19.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@nuxt/kit": "^3.2.2 || ^4.0.0",
"vue": "^3.0.0"
},
"peerDependenciesMeta": {
"@nuxt/kit": {
"optional": true
}
}
},
"node_modules/update-browserslist-db": {
"version": "1.3.1",
"resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.3.1.tgz",
@@ -2268,6 +2637,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 +2823,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 +2840,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",

View File

@@ -10,12 +10,15 @@
},
"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"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.8",
"unplugin-auto-import": "^21.1.0",
"unplugin-vue-components": "^32.1.0",
"vite": "^8.2.2"
}
}

View File

@@ -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')

View File

@@ -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
View 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>

View File

@@ -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>

View File

@@ -1,18 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
plugins: [
vue(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
})

41
vite.config.js.back Normal file
View File

@@ -0,0 +1,41 @@
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
build: {
rolldownOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules/element-plus')) {
return 'element-plus'
}
if (id.includes('node_modules/vue') || id.includes('node_modules/vue-router') || id.includes('node_modules/@vue')) {
return 'vue-vendor'
}
},
},
},
},
})