ADD
This commit is contained in:
18796357645
parent
ab6da25601
commit
5a255f7068
45
.devcontainer/devcontainer.json
Normal file
45
.devcontainer/devcontainer.json
Normal file
@ -0,0 +1,45 @@
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
|
||||
{
|
||||
"name": "Node.js & TypeScript",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-18-buster",
|
||||
"features": {
|
||||
"ghcr.io/devcontainers-contrib/features/pnpm:2": {}
|
||||
},
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"antfu.goto-alias",
|
||||
"mikestead.dotenv",
|
||||
"redhat.vscode-yaml",
|
||||
"Lokalise.i18n-ally",
|
||||
"Vue.volar",
|
||||
"steoates.autoimport",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"EditorConfig.EditorConfig",
|
||||
"usernamehw.errorlens",
|
||||
"shd101wyy.markdown-preview-enhanced",
|
||||
"voorjaar.windicss-intellisense",
|
||||
"yoavbls.pretty-ts-errors",
|
||||
"bodil.prettier-toml",
|
||||
"bungcip.better-toml"
|
||||
]
|
||||
}
|
||||
}
|
||||
// Features to add to the dev container. More info: https://containers.dev/features.
|
||||
// "features": {},
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
// "forwardPorts": [],
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
// "postCreateCommand": "yarn install",
|
||||
|
||||
// Configure tool-specific properties.
|
||||
// "customizations": {},
|
||||
|
||||
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
|
||||
// "remoteUser": "root"
|
||||
}
|
||||
23
.editorConfig
Normal file
23
.editorConfig
Normal file
@ -0,0 +1,23 @@
|
||||
root = true
|
||||
|
||||
# 匹配全部文件
|
||||
[*]
|
||||
# 设置字符集
|
||||
charset = utf-8
|
||||
# 缩进风格，可选 space、tab
|
||||
indent_style = tab
|
||||
# 缩进的空格数，当 indent_style = tab 将使用 tab_width
|
||||
# 否则使用 indent_size
|
||||
indent_size = 2
|
||||
tab_width = 2
|
||||
# 结尾换行符，可选 lf、cr、crlf
|
||||
end_of_line = crlf
|
||||
# 在文件结尾插入新行
|
||||
insert_final_newline = true
|
||||
# 删除一行中的前后空格
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
# 匹配 md 结尾的文件
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
32
.env
Normal file
32
.env
Normal file
@ -0,0 +1,32 @@
|
||||
# 通用环境变量
|
||||
|
||||
# api baseURL
|
||||
VITE_API_BASE_URL = localhost:8000
|
||||
|
||||
# 标题
|
||||
VITE_APP_TITLE = tov
|
||||
|
||||
|
||||
# markdown 渲染支持
|
||||
VITE_APP_MARKDOWN = true
|
||||
|
||||
|
||||
# 开发时的开发面板
|
||||
VITE_APP_DEV_TOOLS = true
|
||||
|
||||
|
||||
# 生产时 mock 支持
|
||||
VITE_APP_MOCK_IN_PRODUCTION = false
|
||||
|
||||
|
||||
# 生产时压缩算法，可选 gzip, brotliCompress, deflate, deflateRaw
|
||||
VITE_APP_COMPRESSINON_ALGORITHM = gzip
|
||||
|
||||
|
||||
# api 自动按需引入
|
||||
# 注意设置关闭时，其他的 api 自动按需引入也将自动关闭
|
||||
VITE_APP_API_AUTO_IMPORT = true
|
||||
|
||||
|
||||
# 项目级 api 自动按需导入
|
||||
VITE_APP_DIR_API_AUTO_IMPORT = true
|
||||
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@ -0,0 +1,4 @@
|
||||
# 忽略 eslint 检查
|
||||
dist
|
||||
node_modules
|
||||
presets/types
|
||||
36
.eslintrc.json
Normal file
36
.eslintrc.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"root": true, // 禁止接着往上找
|
||||
"env": {
|
||||
"node": true,
|
||||
"es2021": true,
|
||||
"browser": true // 浏览器
|
||||
},
|
||||
"parser": "vue-eslint-parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true // 启用 jsx
|
||||
}
|
||||
},
|
||||
"plugins": ["prettier"],
|
||||
"extends": [
|
||||
"@unocss",
|
||||
"eslint:recommended", // 内置规则
|
||||
"plugin:vue/vue3-recommended", // 支持 vue sfc
|
||||
"prettier",
|
||||
"./presets/eslint/.eslintrc-auto-import.json"
|
||||
],
|
||||
"rules": {
|
||||
// 允许相同组件名
|
||||
"vue/multi-word-component-names": "off",
|
||||
// prettier 作为规则
|
||||
"prettier/prettier": "error",
|
||||
// 禁止使用 var，而应该用 let 或 const
|
||||
"no-var": "error"
|
||||
},
|
||||
"globals": {
|
||||
"defineOptions": true,
|
||||
"definePage": true
|
||||
}
|
||||
}
|
||||
173
.gitignore
vendored
173
.gitignore
vendored
@ -1,162 +1,11 @@
|
||||
# ---> Python
|
||||
# Byte-compiled / optimized / DLL files
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# C extensions
|
||||
*.so
|
||||
|
||||
# Distribution / packaging
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
share/python-wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
MANIFEST
|
||||
|
||||
# PyInstaller
|
||||
# Usually these files are written by a python script from a template
|
||||
# before PyInstaller builds the exe, so as to inject date/other infos into it.
|
||||
*.manifest
|
||||
*.spec
|
||||
|
||||
# Installer logs
|
||||
pip-log.txt
|
||||
pip-delete-this-directory.txt
|
||||
|
||||
# Unit test / coverage reports
|
||||
htmlcov/
|
||||
.tox/
|
||||
.nox/
|
||||
.coverage
|
||||
.coverage.*
|
||||
.cache
|
||||
nosetests.xml
|
||||
coverage.xml
|
||||
*.cover
|
||||
*.py,cover
|
||||
.hypothesis/
|
||||
.pytest_cache/
|
||||
cover/
|
||||
|
||||
# Translations
|
||||
*.mo
|
||||
*.pot
|
||||
|
||||
# Django stuff:
|
||||
*.log
|
||||
local_settings.py
|
||||
db.sqlite3
|
||||
db.sqlite3-journal
|
||||
|
||||
# Flask stuff:
|
||||
instance/
|
||||
.webassets-cache
|
||||
|
||||
# Scrapy stuff:
|
||||
.scrapy
|
||||
|
||||
# Sphinx documentation
|
||||
docs/_build/
|
||||
|
||||
# PyBuilder
|
||||
.pybuilder/
|
||||
target/
|
||||
|
||||
# Jupyter Notebook
|
||||
.ipynb_checkpoints
|
||||
|
||||
# IPython
|
||||
profile_default/
|
||||
ipython_config.py
|
||||
|
||||
# pyenv
|
||||
# For a library or package, you might want to ignore these files since the code is
|
||||
# intended to run in multiple environments; otherwise, check them in:
|
||||
# .python-version
|
||||
|
||||
# pipenv
|
||||
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
|
||||
# However, in case of collaboration, if having platform-specific dependencies or dependencies
|
||||
# having no cross-platform support, pipenv may install dependencies that don't work, or not
|
||||
# install all needed dependencies.
|
||||
#Pipfile.lock
|
||||
|
||||
# poetry
|
||||
# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
|
||||
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
||||
# commonly ignored for libraries.
|
||||
# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
|
||||
#poetry.lock
|
||||
|
||||
# pdm
|
||||
# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
|
||||
#pdm.lock
|
||||
# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
|
||||
# in version control.
|
||||
# https://pdm.fming.dev/#use-with-ide
|
||||
.pdm.toml
|
||||
|
||||
# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
|
||||
__pypackages__/
|
||||
|
||||
# Celery stuff
|
||||
celerybeat-schedule
|
||||
celerybeat.pid
|
||||
|
||||
# SageMath parsed files
|
||||
*.sage.py
|
||||
|
||||
# Environments
|
||||
.env
|
||||
.venv
|
||||
env/
|
||||
venv/
|
||||
ENV/
|
||||
env.bak/
|
||||
venv.bak/
|
||||
|
||||
# Spyder project settings
|
||||
.spyderproject
|
||||
.spyproject
|
||||
|
||||
# Rope project settings
|
||||
.ropeproject
|
||||
|
||||
# mkdocs documentation
|
||||
/site
|
||||
|
||||
# mypy
|
||||
.mypy_cache/
|
||||
.dmypy.json
|
||||
dmypy.json
|
||||
|
||||
# Pyre type checker
|
||||
.pyre/
|
||||
|
||||
# pytype static type analyzer
|
||||
.pytype/
|
||||
|
||||
# Cython debug symbols
|
||||
cython_debug/
|
||||
|
||||
# PyCharm
|
||||
# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
|
||||
# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
|
||||
# and can be added to the global gitignore or merged into this file. For a more nuclear
|
||||
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
||||
#.idea/
|
||||
|
||||
dist
|
||||
.nitro
|
||||
.output
|
||||
env.d.ts
|
||||
node_modules
|
||||
.eslintcache
|
||||
components.d.ts
|
||||
type-router.d.ts
|
||||
auto-imports.d.ts
|
||||
.eslintrc-auto-import.json
|
||||
vite.config.ts.timestamp*
|
||||
|
||||
4
.husky/pre-commit
Normal file
4
.husky/pre-commit
Normal file
@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx lint-staged
|
||||
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@ -0,0 +1,3 @@
|
||||
dist
|
||||
node_modules
|
||||
presets/types
|
||||
5
.prettierrc.json
Normal file
5
.prettierrc.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
netlify.toml
Normal file
4
netlify.toml
Normal file
@ -0,0 +1,4 @@
|
||||
[[redirects]]
|
||||
to = "/index.html"
|
||||
from = "/*"
|
||||
status = 200
|
||||
135
package.json
Normal file
135
package.json
Normal file
@ -0,0 +1,135 @@
|
||||
{
|
||||
"name": "tov-template",
|
||||
"version": "1.19.0",
|
||||
"description": "vite + vue3 + ts 开箱即用现代开发模板 | vite + vue3 + ts out-of-the-box modern development template",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"test": "vitest",
|
||||
"build": "vite build",
|
||||
"prepare": "husky install",
|
||||
"dev:host": "vite --host",
|
||||
"dev:open": "vite --open",
|
||||
"preview": "vite preview",
|
||||
"coverage": "vitest --coverage",
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"typecheck": "npx vue-tsc --noEmit",
|
||||
"preview:host": "vite preview --host",
|
||||
"preview:open": "vite preview --open",
|
||||
"lint": "eslint --ext .ts,.js,.jsx,.vue .",
|
||||
"release": "plop --plopfile scripts/release.cjs",
|
||||
"auto:remove": "plop --plopfile scripts/remove.cjs",
|
||||
"auto:create": "plop --plopfile scripts/create.cjs",
|
||||
"build:debug": "cross-env NODE_ENV=debug vite build",
|
||||
"safe:init": "plop --plopfile scripts/safe-init.cjs",
|
||||
"deps:fresh": "plop --plopfile scripts/deps-fresh.cjs",
|
||||
"lint:fix": "eslint --fix --ext .ts,.js,.jsx,.vue,.cjs ."
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.17.0"
|
||||
},
|
||||
"packageManager": "pnpm@8.15.9",
|
||||
"devDependencies": {
|
||||
"@intlify/unplugin-vue-i18n": "^3.0.1",
|
||||
"@types/ityped": "^1.0.3",
|
||||
"@types/node": "^20.16.5",
|
||||
"@typescript-eslint/parser": "7.18.0",
|
||||
"@unocss/eslint-config": "0.62.3",
|
||||
"@unocss/reset": "^0.62.3",
|
||||
"@vitejs/plugin-vue": "^5.1.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"@vueuse/components": "^10.11.1",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vueuse/integrations": "^10.11.1",
|
||||
"axios": "^1.7.7",
|
||||
"browserslist": "^4.23.3",
|
||||
"c8": "^9.1.0",
|
||||
"changelogen": "^0.5.5",
|
||||
"consola": "^3.2.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"defu": "^6.1.4",
|
||||
"echarts": "^5.5.1",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-config-prettier": "9.1.0",
|
||||
"eslint-plugin-prettier": "5.2.1",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"husky": "^9.1.5",
|
||||
"ityped": "^1.0.3",
|
||||
"kolorist": "^1.8.0",
|
||||
"lightningcss": "^1.26.0",
|
||||
"lint-staged": "^15.2.10",
|
||||
"local-pkg": "^0.5.0",
|
||||
"markdown-it-prism": "^2.3.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"perfect-debounce": "^1.0.0",
|
||||
"pinia": "^2.2.2",
|
||||
"pinia-plugin-persistedstate": "^3.2.3",
|
||||
"plop": "^4.0.1",
|
||||
"prettier": "^3.3.3",
|
||||
"prism-theme-vars": "^0.2.5",
|
||||
"simple-git": "^3.26.0",
|
||||
"taze": "^0.16.7",
|
||||
"terser": "^5.31.6",
|
||||
"typescript": "^5.5.4",
|
||||
"unocss": "^0.62.3",
|
||||
"unplugin-auto-import": "^0.18.2",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"unplugin-vue-markdown": "^0.26.2",
|
||||
"unplugin-vue-router": "^0.10.8",
|
||||
"vite": "^5.4.3",
|
||||
"vite-auto-import-resolvers": "^3.2.1",
|
||||
"vite-layers": "^0.5.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-env-types": "^0.1.4",
|
||||
"vite-plugin-legacy-swc": "^1.2.1",
|
||||
"vite-plugin-mock": "2.9.8",
|
||||
"vite-plugin-removelog": "^0.2.2",
|
||||
"vite-plugin-use-modules": "^1.4.8",
|
||||
"vite-plugin-vue-devtools": "^7.4.4",
|
||||
"vite-plugin-vue-meta-layouts": "^0.4.3",
|
||||
"vitest": "^1.6.0",
|
||||
"vue": "^3.5.3",
|
||||
"vue-dark-switch": "^1.0.6",
|
||||
"vue-echarts": "^6.7.3",
|
||||
"vue-request": "2.0.4",
|
||||
"vue-router": "^4.4.3",
|
||||
"vue-toastification": "2.0.0-rc.5"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx,vue}": "eslint --cache --fix"
|
||||
},
|
||||
"overrides": {
|
||||
"sourcemap-codec": "npm:@jridgewell/sourcemap-codec@latest",
|
||||
"array-includes": "npm:@nolyfill/array-includes@latest",
|
||||
"array.prototype.findlastindex": "npm:@nolyfill/array.prototype.findlastindex@latest",
|
||||
"array.prototype.flat": "npm:@nolyfill/array.prototype.flat@latest",
|
||||
"array.prototype.flatmap": "npm:@nolyfill/array.prototype.flatmap@latest",
|
||||
"arraybuffer.prorotype.slice": "npm:@nolyfill/arraybuffer.prorotype.slice@latest",
|
||||
"function.prototype.name": "npm:@nolyfill/function.prototype.name@latest",
|
||||
"has": "npm:@nolyfill/has@latest",
|
||||
"is-regex": "npm:@nolyfill/is-regex@latest",
|
||||
"object-keys": "npm:@nolyfill/object-keys@latest",
|
||||
"object.assign": "npm:@nolyfill/object.assign@latest",
|
||||
"object.entries": "npm:@nolyfill/object.entries@latest",
|
||||
"object.fromentries": "npm:@nolyfill/object.fromentries@latest",
|
||||
"object.values": "npm:@nolyfill/object.values@latest",
|
||||
"vue-demi": "npm:vue-demi@latest"
|
||||
},
|
||||
"repository": {
|
||||
"url": "https://github.com/dishait/tov-template"
|
||||
},
|
||||
"browserslist": [
|
||||
">= 0.25%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"Android >= 4.0",
|
||||
"iOS >= 8"
|
||||
],
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"element-plus": "^2.10.3"
|
||||
}
|
||||
}
|
||||
9077
pnpm-lock.yaml
generated
Normal file
9077
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
presets/autoprefixer.ts
Normal file
33
presets/autoprefixer.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import type { Preset } from 'unocss'
|
||||
import browserslist from 'browserslist'
|
||||
import { defaultBuildTargets } from './shared/detect'
|
||||
import { browserslistToTargets, transformStyleAttribute } from 'lightningcss'
|
||||
|
||||
export default function autoprefixerPreset(
|
||||
targets: string[] = defaultBuildTargets,
|
||||
): Preset {
|
||||
return {
|
||||
name: 'unocss-preset-autoprefixer',
|
||||
postprocess: (util) => {
|
||||
const entries = util.entries
|
||||
const { code } = transformStyleAttribute({
|
||||
code: Buffer.from(
|
||||
entries
|
||||
.filter((item) => !item[0].startsWith('--un'))
|
||||
.map((x) => x.join(':'))
|
||||
.join(';'),
|
||||
),
|
||||
targets: browserslistToTargets(browserslist(targets)),
|
||||
minify: true,
|
||||
})
|
||||
|
||||
util.entries = [
|
||||
...entries.filter((item) => item[0].startsWith('--un')),
|
||||
...(code
|
||||
.toString()
|
||||
.split(';')
|
||||
.map((i) => i.split(':')) as [string, string | number][]),
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
275
presets/index.ts
Normal file
275
presets/index.ts
Normal file
@ -0,0 +1,275 @@
|
||||
import Prism from 'markdown-it-prism'
|
||||
import UnoCss from 'unocss/vite'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import {
|
||||
AntDesignVueResolver,
|
||||
ArcoResolver,
|
||||
DevUiResolver,
|
||||
ElementPlusResolver,
|
||||
HeadlessUiResolver,
|
||||
IduxResolver,
|
||||
InklineResolver,
|
||||
LayuiVueResolver,
|
||||
NaiveUiResolver,
|
||||
PrimeVueResolver,
|
||||
QuasarResolver,
|
||||
TDesignResolver,
|
||||
VantResolver,
|
||||
VarletUIResolver,
|
||||
ViewUiResolver,
|
||||
VueUseComponentsResolver,
|
||||
Vuetify3Resolver,
|
||||
} from 'unplugin-vue-components/resolvers'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import Markdown from 'unplugin-vue-markdown/vite'
|
||||
import { VueRouterAutoImports } from 'unplugin-vue-router'
|
||||
import Router from 'unplugin-vue-router/vite'
|
||||
|
||||
import { AutoGenerateImports, vue3Presets } from 'vite-auto-import-resolvers'
|
||||
import Compression from 'vite-plugin-compression'
|
||||
import EnvTypes from 'vite-plugin-env-types'
|
||||
import { viteMockServe as Mock } from 'vite-plugin-mock'
|
||||
import Removelog from 'vite-plugin-removelog'
|
||||
import Modules from 'vite-plugin-use-modules'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
import Layouts from 'vite-plugin-vue-meta-layouts'
|
||||
|
||||
import I18N from '@intlify/unplugin-vue-i18n/vite'
|
||||
import Legacy from 'vite-plugin-legacy-swc'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
import Jsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// 内置插件
|
||||
import {
|
||||
Alias,
|
||||
Lightningcss,
|
||||
Restart,
|
||||
Warmup,
|
||||
Layers,
|
||||
Optimize,
|
||||
} from './plugins'
|
||||
import { defaultBuildTargets, detectResolvers, useEnv } from './shared/detect'
|
||||
import { r } from './shared/path'
|
||||
import type { PluginOption } from 'vite'
|
||||
|
||||
export default function () {
|
||||
const env = useEnv()
|
||||
const safelist =
|
||||
'prose px-2 sm:px-0 md:prose-lg lg:prose-lg dark:prose-invert text-left w-screen prose-slate prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600'
|
||||
|
||||
const plugins: PluginOption[] = [
|
||||
/**
|
||||
* vite 配置层
|
||||
* 通过 mode 区分 vite 配置文件 (experimental)
|
||||
*/
|
||||
Layers(),
|
||||
/**
|
||||
* 兼容不支持 esmModule 的浏览器
|
||||
* https://www.npmjs.com/package/@vitejs/plugin-legacy
|
||||
*/
|
||||
Legacy({
|
||||
targets: defaultBuildTargets,
|
||||
}),
|
||||
/**
|
||||
* 智能启动 lightningcss
|
||||
*/
|
||||
Lightningcss(),
|
||||
/**
|
||||
* 启动优化
|
||||
*/
|
||||
Optimize(),
|
||||
/**
|
||||
* 环境变量类型提示
|
||||
* https://github.com/dishait/vite-plugin-env-types
|
||||
*/
|
||||
EnvTypes({
|
||||
dts: r('presets/types/env.d.ts'),
|
||||
}),
|
||||
/**
|
||||
* 内置的预热，可以加快冷启动
|
||||
*/
|
||||
Warmup(),
|
||||
/**
|
||||
* 文件路由
|
||||
* https://github.com/posva/unplugin-vue-router
|
||||
*/
|
||||
Router({
|
||||
routesFolder: r('src/pages'),
|
||||
dts: r('presets/types/type-router.d.ts'),
|
||||
extensions: ['.md', '.vue', '.tsx', '.jsx'],
|
||||
}),
|
||||
/**
|
||||
* 自动安装 vue 插件
|
||||
* https://github.com/dishait/vite-plugin-use-modules
|
||||
*/
|
||||
Modules({
|
||||
auto: true,
|
||||
// 内部使用虚拟模块，运行在前端，所以不需要 r 重写路径
|
||||
target: 'src/plugins',
|
||||
}),
|
||||
/**
|
||||
* vue 官方插件，用来解析 sfc 单文件组件
|
||||
* https://www.npmjs.com/package/@vitejs/plugin-vue
|
||||
*/
|
||||
Vue({
|
||||
include: [/\.vue$/, /\.md$/],
|
||||
}),
|
||||
/**
|
||||
* 布局系统
|
||||
* https://github.com/dishait/vite-plugin-vue-meta-layouts
|
||||
*/
|
||||
Layouts({
|
||||
skipTopLevelRouteLayout: true,
|
||||
}),
|
||||
/**
|
||||
* mock 服务
|
||||
* https://github.com/vbenjs/vite-plugin-mock
|
||||
*/
|
||||
Mock({
|
||||
prodEnabled: env.VITE_APP_MOCK_IN_PRODUCTION,
|
||||
}),
|
||||
/**
|
||||
* 组件自动按需引入
|
||||
* https://github.com/antfu/unplugin-vue-components
|
||||
*/
|
||||
Components({
|
||||
directoryAsNamespace: true,
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.[tj]sx$/, /\.md$/],
|
||||
extensions: ['md', 'vue', 'tsx', 'jsx'],
|
||||
dts: r('presets/types/components.d.ts'),
|
||||
types: [
|
||||
{
|
||||
from: 'vue-router',
|
||||
names: ['RouterLink', 'RouterView'],
|
||||
},
|
||||
],
|
||||
resolvers: detectResolvers({
|
||||
onlyExist: [
|
||||
[VantResolver(), 'vant'],
|
||||
[QuasarResolver(), 'quasar'],
|
||||
[DevUiResolver(), 'vue-devui'],
|
||||
[NaiveUiResolver(), 'naive-ui'],
|
||||
[Vuetify3Resolver(), 'vuetify'],
|
||||
[PrimeVueResolver(), 'primevue'],
|
||||
[ViewUiResolver(), 'view-design'],
|
||||
[LayuiVueResolver(), 'layui-vue'],
|
||||
[VarletUIResolver(), '@varlet/ui'],
|
||||
[IduxResolver(), '@idux/components'],
|
||||
[InklineResolver(), '@inkline/inkline'],
|
||||
[ElementPlusResolver(), 'element-plus'],
|
||||
[HeadlessUiResolver(), '@headlessui/vue'],
|
||||
[ArcoResolver(), '@arco-design/web-vue'],
|
||||
[AntDesignVueResolver({ importStyle: false }), 'ant-design-vue'],
|
||||
[VueUseComponentsResolver(), '@vueuse/components'],
|
||||
[TDesignResolver({ library: 'vue-next' }), 'tdesign-vue-next'],
|
||||
],
|
||||
}),
|
||||
}),
|
||||
/**
|
||||
* i18n 国际化支持
|
||||
* https://www.npmjs.com/package/@intlify/unplugin-vue-i18n
|
||||
*/
|
||||
I18N({
|
||||
runtimeOnly: false,
|
||||
compositionOnly: true,
|
||||
include: ['locales/**'],
|
||||
}),
|
||||
/**
|
||||
* jsx 和 tsx 支持
|
||||
* https://www.npmjs.com/package/@vitejs/plugin-vue-jsx
|
||||
*/
|
||||
Jsx(),
|
||||
/**
|
||||
* 生产环境资源压缩
|
||||
* https://github.com/vbenjs/vite-plugin-compression
|
||||
*/
|
||||
Compression({
|
||||
// @ts-ignore
|
||||
algorithm: env.VITE_APP_COMPRESSINON_ALGORITHM,
|
||||
}),
|
||||
/**
|
||||
* 别名插件 (内置)
|
||||
* 支持 `~` 和 `@` 别名到 `src`
|
||||
*/
|
||||
Alias(),
|
||||
/**
|
||||
* 强制重启 (内置)
|
||||
* 如果 package.json 或 pnpm-lock.yaml 更新的话，强制重启
|
||||
*/
|
||||
Restart(),
|
||||
/**
|
||||
* css 原子引擎
|
||||
* https://github.com/unocss/unocss
|
||||
*/
|
||||
UnoCss({
|
||||
safelist: env.VITE_APP_MARKDOWN ? safelist.split(' ') : undefined,
|
||||
}),
|
||||
]
|
||||
/**
|
||||
* 开发面板
|
||||
* https://github.com/webfansplz/vite-plugin-vue-devtools
|
||||
*/
|
||||
if (env.VITE_APP_DEV_TOOLS) {
|
||||
plugins.push(VueDevTools())
|
||||
}
|
||||
|
||||
/**
|
||||
* 生产环境下移除 console.log, console.warn, console.error
|
||||
* https://github.com/dishait/vite-plugin-removelog
|
||||
*/
|
||||
if (process.env.NODE_ENV !== 'debug') {
|
||||
plugins.push(Removelog())
|
||||
}
|
||||
|
||||
/**
|
||||
* markdown 渲染插件
|
||||
* https://github.com/mdit-vue/unplugin-vue-markdown
|
||||
*/
|
||||
if (env.VITE_APP_MARKDOWN) {
|
||||
plugins.push(
|
||||
Markdown({
|
||||
wrapperClasses: safelist,
|
||||
markdownItSetup(md) {
|
||||
md.use(Prism)
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* api 自动按需引入
|
||||
* https://github.com/antfu/unplugin-auto-import
|
||||
*/
|
||||
if (env.VITE_APP_API_AUTO_IMPORT) {
|
||||
const dirs = env.VITE_APP_DIR_API_AUTO_IMPORT
|
||||
? ['src/stores/**', 'src/composables/**', 'src/api/**']
|
||||
: []
|
||||
plugins.push(
|
||||
AutoImport({
|
||||
dirs,
|
||||
vueTemplate: true,
|
||||
dts: r('presets/types/auto-imports.d.ts'),
|
||||
imports: [
|
||||
...AutoGenerateImports({
|
||||
include: [...vue3Presets],
|
||||
exclude: ['vue-router'],
|
||||
}),
|
||||
VueRouterAutoImports,
|
||||
],
|
||||
resolvers: detectResolvers({
|
||||
onlyExist: [
|
||||
[ElementPlusResolver(), 'element-plus'],
|
||||
[TDesignResolver({ library: 'vue-next' }), 'tdesign-vue-next'],
|
||||
],
|
||||
}),
|
||||
eslintrc: {
|
||||
enabled: true,
|
||||
globalsPropValue: true,
|
||||
filepath: r('presets/eslint/.eslintrc-auto-import.json'),
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
return plugins
|
||||
}
|
||||
27
presets/plugins/alias.ts
Normal file
27
presets/plugins/alias.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import type { Plugin } from 'vite'
|
||||
import { r } from '../shared/path'
|
||||
|
||||
/**
|
||||
* 别名插件
|
||||
* @description 支持 `~` 和 `@` 别名到 `src`
|
||||
*/
|
||||
export function Alias(): Plugin {
|
||||
const src = r('./src')
|
||||
return {
|
||||
name: 'vite-alias',
|
||||
enforce: 'pre',
|
||||
config(config) {
|
||||
config.resolve ??= {}
|
||||
config.resolve.alias = [
|
||||
{
|
||||
find: /^~/,
|
||||
replacement: src,
|
||||
},
|
||||
{
|
||||
find: /^@\//,
|
||||
replacement: src + '/',
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
6
presets/plugins/index.ts
Normal file
6
presets/plugins/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export { Alias } from './alias'
|
||||
export { Layers } from './layers'
|
||||
export { Warmup } from './warmup'
|
||||
export { Restart } from './restart'
|
||||
export { Optimize } from './optimize'
|
||||
export { Lightningcss } from './lightningcss'
|
||||
41
presets/plugins/layers.ts
Normal file
41
presets/plugins/layers.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { existsSync } from 'fs'
|
||||
import { gray } from 'kolorist'
|
||||
import { basename } from 'path'
|
||||
import { r } from '../shared/path'
|
||||
import { Restart } from './restart'
|
||||
import { createConsola } from 'consola'
|
||||
import type { Plugin, UserConfig } from 'vite'
|
||||
import { Layers as loadLayer, detectMode } from 'vite-layers'
|
||||
|
||||
const logger = createConsola().withTag('layers')
|
||||
|
||||
/**
|
||||
* vite 配置层
|
||||
* @description 通过 mode 区分 vite 配置文件 (experimental)
|
||||
*/
|
||||
export function Layers(): Plugin {
|
||||
const mode = detectMode()
|
||||
const modeFiles = [mode.slice(0, 3), mode].map((mode) =>
|
||||
r(`vite.config.${mode}.ts`),
|
||||
)
|
||||
return {
|
||||
...Restart(modeFiles.map((modeFile) => basename(modeFile))),
|
||||
name: 'vite-plugin-layers',
|
||||
enforce: 'post',
|
||||
async config(config) {
|
||||
const modeFile = modeFiles.find((modeFile) => existsSync(modeFile))
|
||||
if (modeFile) {
|
||||
logger
|
||||
.withTag(mode)
|
||||
.success(
|
||||
`vite.config.ts → ${basename(modeFile)} ${gray(`(experimental)`)}`,
|
||||
)
|
||||
return loadLayer({
|
||||
logger: false,
|
||||
extends: [config, modeFile],
|
||||
}) as UserConfig
|
||||
}
|
||||
return config
|
||||
},
|
||||
}
|
||||
}
|
||||
62
presets/plugins/lightningcss.ts
Normal file
62
presets/plugins/lightningcss.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import { existsSync } from 'fs'
|
||||
import { gray } from 'kolorist'
|
||||
import type { Plugin } from 'vite'
|
||||
import { createConsola } from 'consola'
|
||||
import { isPackageExists } from 'local-pkg'
|
||||
import { browserslistToTargets } from 'lightningcss'
|
||||
import { defaultBuildTargets } from '../shared/detect'
|
||||
|
||||
const name = 'vite-plugin-fire-lightningcss'
|
||||
|
||||
const logger = createConsola().withTag('css')
|
||||
|
||||
/**
|
||||
* 智能开启 lightningcss (如果不使用预处理器，或者 postcss)
|
||||
*/
|
||||
export function Lightningcss(): Plugin {
|
||||
const packages = ['less', 'sass', 'stylus']
|
||||
return {
|
||||
name,
|
||||
config(config) {
|
||||
config.css ??= {}
|
||||
config.build ??= {}
|
||||
const hasPreprocessor = packages.some((p) => isPackageExists(p))
|
||||
|
||||
const { postcss, modules, transformer } = config.css
|
||||
const conflictConfiguration = [postcss, modules, transformer].some(
|
||||
(c) => !isUndefined(c),
|
||||
)
|
||||
|
||||
const hasPostcssConfigFile = [
|
||||
'postcss.config.js',
|
||||
'postcss.config.cts',
|
||||
'postcss.config.ts',
|
||||
].some((c) => existsSync(c))
|
||||
|
||||
// 如果有预处理器，冲突配置或者 postcss 配置文件则禁用
|
||||
const disabled =
|
||||
hasPreprocessor || conflictConfiguration || hasPostcssConfigFile
|
||||
if (!disabled) {
|
||||
const transformer = 'lightningcss'
|
||||
config.css.transformer = transformer
|
||||
let tip = `${transformer} ${gray(transformer)}`
|
||||
|
||||
if (isUndefined(config.build.cssMinify)) {
|
||||
config.build.cssMinify = 'lightningcss'
|
||||
tip = `${transformer} ${gray('(transformer + cssMinify)')}`
|
||||
}
|
||||
|
||||
if (isUndefined(config.css.lightningcss?.targets)) {
|
||||
config.css.lightningcss ??= {}
|
||||
config.css.lightningcss.targets =
|
||||
browserslistToTargets(defaultBuildTargets)
|
||||
}
|
||||
logger.success(tip)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
function isUndefined(v: unknown): v is undefined {
|
||||
return typeof v === 'undefined'
|
||||
}
|
||||
}
|
||||
19
presets/plugins/optimize.ts
Normal file
19
presets/plugins/optimize.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { createConsola } from 'consola'
|
||||
import { gray } from 'kolorist'
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
const logger = createConsola().withTag('optimize')
|
||||
export function Optimize(): Plugin {
|
||||
return {
|
||||
name: 'vite-optimize',
|
||||
config(config) {
|
||||
config.css ??= {}
|
||||
config.optimizeDeps ??= {}
|
||||
config.css.preprocessorMaxWorkers = true
|
||||
config.optimizeDeps.holdUntilCrawlEnd = false
|
||||
logger.success(
|
||||
`optimize ${gray('(preprocessorMaxWorkers + closeHoldUntilCrawlEnd)')}`,
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
30
presets/plugins/restart.ts
Normal file
30
presets/plugins/restart.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import type { Plugin } from 'vite'
|
||||
import { utimes } from 'fs/promises'
|
||||
import { r } from '../shared/path'
|
||||
import { debounce } from 'perfect-debounce'
|
||||
import { resolve } from 'path'
|
||||
import { slash } from 'vite-layers'
|
||||
|
||||
const defaultPaths = ['package.json', 'pnpm-lock.yaml']
|
||||
|
||||
/**
|
||||
* 强制重启
|
||||
* @description 如果监听更新的话，强制重启项目
|
||||
* @param paths 监听重启路径，默认为 ['package.json', 'pnpm-lock.yaml']
|
||||
*/
|
||||
export function Restart(paths = defaultPaths): Plugin {
|
||||
paths = paths.map((path) => slash(resolve(path)))
|
||||
const restart = debounce(async function touch() {
|
||||
const time = new Date()
|
||||
await utimes(r('vite.config.ts'), time, time)
|
||||
}, 1000)
|
||||
return {
|
||||
name: 'vite-plugin-force-restart',
|
||||
apply: 'serve',
|
||||
async watchChange(id) {
|
||||
if (paths.includes(id)) {
|
||||
await restart()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
21
presets/plugins/warmup.ts
Normal file
21
presets/plugins/warmup.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
/**
|
||||
* 预热
|
||||
* @description 内置的预热，可以加快冷启动
|
||||
*/
|
||||
export function Warmup(): Plugin {
|
||||
return {
|
||||
name: 'vite-plugin-warmup',
|
||||
apply: 'serve',
|
||||
config(config) {
|
||||
const src = './src/**/*'
|
||||
config.server ??= {}
|
||||
config.server.warmup ??= {}
|
||||
config.server.warmup.clientFiles ??= []
|
||||
if (!config.server.warmup.clientFiles.includes(src)) {
|
||||
config.server.warmup.clientFiles.push(src)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
76
presets/shared/detect.ts
Normal file
76
presets/shared/detect.ts
Normal file
@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 侦察模块
|
||||
* @description 自动检测环境并智能生成
|
||||
*/
|
||||
|
||||
import { r } from './path'
|
||||
import { loadEnv } from 'vite'
|
||||
import browserslist from 'browserslist'
|
||||
import { detectMode } from 'vite-layers'
|
||||
import { isPackageExists } from 'local-pkg'
|
||||
import type { ComponentResolver } from 'unplugin-vue-components'
|
||||
|
||||
const { loadConfig: browserslistLoadConfig } = browserslist
|
||||
|
||||
/**
|
||||
* 默认打包目标 (浏览器兼容程度)
|
||||
*/
|
||||
export const defaultBuildTargets = browserslistLoadConfig({
|
||||
path: r('./'),
|
||||
}) || ['last 2 versions and not dead, > 0.3%, Firefox ESR']
|
||||
|
||||
type Arrayable<T> = T | Array<T>
|
||||
|
||||
interface Options {
|
||||
onlyExist?: [Arrayable<ComponentResolver>, string][]
|
||||
include?: ComponentResolver[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 发现 resolvers
|
||||
*/
|
||||
export function detectResolvers(options: Options = {}) {
|
||||
const { onlyExist = [], include = [] } = options
|
||||
|
||||
const existedResolvers = []
|
||||
for (let i = 0; i < onlyExist.length; i++) {
|
||||
const [resolver, packageName] = onlyExist[i]
|
||||
if (
|
||||
isPackageExists(packageName, {
|
||||
paths: [r('./')],
|
||||
})
|
||||
) {
|
||||
existedResolvers.push(resolver)
|
||||
}
|
||||
}
|
||||
existedResolvers.push(...include)
|
||||
|
||||
return existedResolvers
|
||||
}
|
||||
|
||||
// 获取环境变量
|
||||
export function useEnv() {
|
||||
function stringToBoolean(v: string) {
|
||||
return Boolean(v === 'true' || false)
|
||||
}
|
||||
|
||||
const {
|
||||
VITE_APP_TITLE,
|
||||
VITE_APP_DEV_TOOLS,
|
||||
VITE_APP_MARKDOWN,
|
||||
VITE_APP_API_AUTO_IMPORT,
|
||||
VITE_APP_MOCK_IN_PRODUCTION,
|
||||
VITE_APP_DIR_API_AUTO_IMPORT,
|
||||
VITE_APP_COMPRESSINON_ALGORITHM,
|
||||
} = loadEnv(detectMode(), '.')
|
||||
|
||||
return {
|
||||
VITE_APP_TITLE,
|
||||
VITE_APP_COMPRESSINON_ALGORITHM,
|
||||
VITE_APP_DEV_TOOLS: stringToBoolean(VITE_APP_DEV_TOOLS),
|
||||
VITE_APP_MARKDOWN: stringToBoolean(VITE_APP_MARKDOWN),
|
||||
VITE_APP_API_AUTO_IMPORT: stringToBoolean(VITE_APP_API_AUTO_IMPORT),
|
||||
VITE_APP_MOCK_IN_PRODUCTION: stringToBoolean(VITE_APP_MOCK_IN_PRODUCTION),
|
||||
VITE_APP_DIR_API_AUTO_IMPORT: stringToBoolean(VITE_APP_DIR_API_AUTO_IMPORT),
|
||||
}
|
||||
}
|
||||
89
presets/shared/mock.ts
Normal file
89
presets/shared/mock.ts
Normal file
@ -0,0 +1,89 @@
|
||||
// @ts-nocheck
|
||||
/**
|
||||
* issue: https://github.com/vbenjs/vite-plugin-mock/issues/47
|
||||
* fix: https://github.com/vbenjs/vite-plugin-mock/issues/47#issuecomment-982724613
|
||||
*/
|
||||
import Mock from 'mockjs'
|
||||
|
||||
export function createFetchSever(mockList: any[]) {
|
||||
if (!window['originFetch']) {
|
||||
window['originFetch'] = window.fetch
|
||||
window.fetch = function (fetchUrl: string, init: any) {
|
||||
const currentMock = mockList.find((mi) => fetchUrl.includes(mi.url))
|
||||
if (currentMock) {
|
||||
const result = createFetchReturn(currentMock, init)
|
||||
return result
|
||||
} else {
|
||||
return window['originFetch'](fetchUrl, init)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function __param2Obj__(url: string) {
|
||||
const search = url.split('?')[1]
|
||||
if (!search) {
|
||||
return {}
|
||||
}
|
||||
return JSON.parse(
|
||||
'{"' +
|
||||
decodeURIComponent(search)
|
||||
.replace(/"/g, '\\"')
|
||||
.replace(/&/g, '","')
|
||||
.replace(/=/g, '":"')
|
||||
.replace(/\+/g, ' ') +
|
||||
'"}',
|
||||
)
|
||||
}
|
||||
|
||||
function __Fetch2ExpressReqWrapper__(handle: () => any) {
|
||||
return function (options: any) {
|
||||
let result = null
|
||||
if (typeof handle === 'function') {
|
||||
const { body, method, url, headers } = options
|
||||
|
||||
let b = body
|
||||
b = JSON.parse(body)
|
||||
result = handle({
|
||||
method,
|
||||
body: b,
|
||||
query: __param2Obj__(url),
|
||||
headers,
|
||||
})
|
||||
} else {
|
||||
result = handle
|
||||
}
|
||||
|
||||
return Mock.mock(result)
|
||||
}
|
||||
}
|
||||
|
||||
const sleep = (delay = 0) => {
|
||||
if (delay) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, delay)
|
||||
})
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
async function createFetchReturn(mock: any, init) {
|
||||
const { timeout, response } = mock
|
||||
const mockFn = __Fetch2ExpressReqWrapper__(response)
|
||||
const data = mockFn(init)
|
||||
await sleep(timeout)
|
||||
const result = {
|
||||
ok: true,
|
||||
status: 200,
|
||||
clone() {
|
||||
return result
|
||||
},
|
||||
text() {
|
||||
return Promise.resolve(data)
|
||||
},
|
||||
json() {
|
||||
return Promise.resolve(data)
|
||||
},
|
||||
}
|
||||
return result
|
||||
}
|
||||
15
presets/shared/path.ts
Normal file
15
presets/shared/path.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { dirname, resolve } from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const _dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const root = resolve(_dirname, '../../')
|
||||
|
||||
/**
|
||||
* 路径重写
|
||||
* @param path 相对路径
|
||||
* @returns 基于根目录的相对路径
|
||||
*/
|
||||
export function r(path: string) {
|
||||
return resolve(root, path).replaceAll('\\', '/')
|
||||
}
|
||||
18
presets/types/vite.d.ts
vendored
Normal file
18
presets/types/vite.d.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-pages/client" />
|
||||
/// <reference types="unplugin-vue-router/client" />
|
||||
/// <reference types="vite-plugin-use-modules/client" />
|
||||
/// <reference types="vite-plugin-vue-meta-layouts/client" />
|
||||
/// <reference types="@intlify/vite-plugin-vue-i18n/client" />
|
||||
|
||||
declare module "*.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module "*.md" {
|
||||
import { ComponentOptions } from "vue";
|
||||
const Component: ComponentOptions;
|
||||
export default Component;
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
1
public/notFound/33.svg
Normal file
1
public/notFound/33.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
BIN
public/uav/bg.png
Normal file
BIN
public/uav/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconify iconify--logos" width="31.88" height="32" viewBox="0 0 256 257"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
public/vue.svg
Normal file
1
public/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconify iconify--logos" width="37.07" height="36" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56z"/></svg>
|
||||
|
After Width: | Height: | Size: 388 B |
3
renovate.json
Normal file
3
renovate.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": ["github>unjs/renovate-config"]
|
||||
}
|
||||
76
scripts/create.cjs
Normal file
76
scripts/create.cjs
Normal file
@ -0,0 +1,76 @@
|
||||
const { existsSync } = require('fs')
|
||||
|
||||
const { showDir, showExt, moduleTypes } = require('./shared/base.cjs')
|
||||
|
||||
/**
|
||||
* 自动创建
|
||||
* @param {import('plop').NodePlopAPI} plop
|
||||
*/
|
||||
function create(plop) {
|
||||
let exist = null
|
||||
let modulePath = null
|
||||
|
||||
plop.setGenerator('controller', {
|
||||
description: '自动创建',
|
||||
prompts: [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'list',
|
||||
default: 'component',
|
||||
message: '您希望生成哪种类型的模块?',
|
||||
choices: moduleTypes,
|
||||
},
|
||||
{
|
||||
name: 'isMarkdown',
|
||||
type: 'confirm',
|
||||
message: '是否 markdown 类型?',
|
||||
default: false,
|
||||
// 如果是 page 类型需要询问是否为 markdown 类型
|
||||
when({ type }) {
|
||||
return type === 'page'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
type: 'input',
|
||||
message({ type }) {
|
||||
return `请输入 ${type} 的命名`
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'shouldReset',
|
||||
type: 'confirm',
|
||||
default: false,
|
||||
message({ type }) {
|
||||
return `目标 ${type} 已存在，是否重置?`
|
||||
},
|
||||
// 确认模块是否已存在，是则询问是否重置
|
||||
when({ type, name, isMarkdown }) {
|
||||
const dir = showDir(type)
|
||||
const ext = showExt(type, isMarkdown)
|
||||
modulePath = `src/${dir}/${name}.${ext}`
|
||||
exist = existsSync(modulePath)
|
||||
if (exist) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
actions(answer) {
|
||||
const { type, shouldReset } = answer
|
||||
if (exist && !shouldReset) {
|
||||
throw new Error(`${type} 创建失败`)
|
||||
}
|
||||
return [
|
||||
{
|
||||
type: 'add',
|
||||
force: true,
|
||||
path: `../${modulePath}`,
|
||||
templateFile: `./template/${type}.hbs`,
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = create
|
||||
36
scripts/deps-fresh.cjs
Normal file
36
scripts/deps-fresh.cjs
Normal file
@ -0,0 +1,36 @@
|
||||
const { execSync } = require('child_process')
|
||||
|
||||
/**
|
||||
* 自动更新依赖
|
||||
* @param {import('plop').NodePlopAPI} plop
|
||||
*/
|
||||
function depsFresh(plop) {
|
||||
plop.setGenerator('controller', {
|
||||
description: '自动更新依赖',
|
||||
prompts: [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'list',
|
||||
default: 'patch',
|
||||
message: '你希望发布一个什么版本?',
|
||||
choices: ['patch', 'minor', 'major'],
|
||||
},
|
||||
{
|
||||
name: 'shouldWrite',
|
||||
type: 'confirm',
|
||||
default: false,
|
||||
message: '是否直接更新?',
|
||||
},
|
||||
],
|
||||
actions(answer) {
|
||||
const { type, shouldWrite } = answer
|
||||
|
||||
execSync(`npx taze ${type} ${shouldWrite ? '-w' : ''}`, {
|
||||
stdio: 'inherit',
|
||||
})
|
||||
return []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = depsFresh
|
||||
65
scripts/release.cjs
Normal file
65
scripts/release.cjs
Normal file
@ -0,0 +1,65 @@
|
||||
const { createConsola } = require('consola')
|
||||
const { execSync } = require('child_process')
|
||||
const { repository } = require('../package.json')
|
||||
const { gray } = require('kolorist')
|
||||
const { simpleGit } = require('simple-git')
|
||||
const logger = createConsola().withTag('release')
|
||||
|
||||
/**
|
||||
* 自动发版
|
||||
* @param {import('plop').NodePlopAPI} plop
|
||||
*/
|
||||
async function release(plop) {
|
||||
const git = simpleGit()
|
||||
|
||||
const remotes = await git.getRemotes(true)
|
||||
|
||||
const urls = remotes.map((r) => {
|
||||
return r.refs.push
|
||||
.replace('git@github.com:', 'https://github.com/')
|
||||
.replace('.git', '')
|
||||
})
|
||||
let allowRelease = false
|
||||
if (!urls.includes(repository.url)) {
|
||||
allowRelease = await logger.prompt(`是否发布到 ${gray(repository.url)}`, {
|
||||
type: 'confirm',
|
||||
})
|
||||
} else {
|
||||
allowRelease = true
|
||||
}
|
||||
|
||||
if (allowRelease) {
|
||||
plop.setGenerator('controller', {
|
||||
description: '自动发版',
|
||||
prompts: [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'list',
|
||||
default: 'patch',
|
||||
message: '你希望发布一个什么版本?',
|
||||
choices: [
|
||||
'patch',
|
||||
'minor',
|
||||
'major',
|
||||
'prepatch',
|
||||
'premajor',
|
||||
'preminor',
|
||||
'prerelease',
|
||||
],
|
||||
},
|
||||
],
|
||||
actions(answer) {
|
||||
const { type } = answer
|
||||
execSync(
|
||||
`npx changelogen --${type} --release && git push --follow-tags`,
|
||||
{
|
||||
stdio: 'inherit',
|
||||
},
|
||||
)
|
||||
return []
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = release
|
||||
75
scripts/remove.cjs
Normal file
75
scripts/remove.cjs
Normal file
@ -0,0 +1,75 @@
|
||||
const { unlinkSync } = require('fs')
|
||||
const { readdir } = require('fs/promises')
|
||||
const { basename } = require('path')
|
||||
const { showDir, moduleTypes } = require('./shared/base.cjs')
|
||||
|
||||
/**
|
||||
* 自动删除
|
||||
* @param {import('plop').NodePlopAPI} plop
|
||||
*/
|
||||
function remove(plop) {
|
||||
plop.setActionType('remove', (answers) => {
|
||||
const { name, type, shouldRemove } = answers
|
||||
const dir = showDir(type)
|
||||
const target = `./src/${dir}/${name}`
|
||||
if (shouldRemove) {
|
||||
return unlinkSync(target)
|
||||
}
|
||||
throw new Error(`删除 ${target} 失败`)
|
||||
})
|
||||
|
||||
plop.setGenerator('controller', {
|
||||
description: '自动删除',
|
||||
prompts: [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'list',
|
||||
message: '请选择您要删除的类型',
|
||||
async choices() {
|
||||
const entrys = await readdir('./src', {
|
||||
recursive: false,
|
||||
withFileTypes: true,
|
||||
})
|
||||
const dirs = entrys.filter((e) => e.isDirectory())
|
||||
const types = moduleTypes.filter((type) => {
|
||||
const dir = showDir(type)
|
||||
return dirs.includes(`./src/${dir}`)
|
||||
})
|
||||
return types
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
type: 'list',
|
||||
message({ type }) {
|
||||
return `请选择您要删除的 ${type} 模块`
|
||||
},
|
||||
async choices({ type }) {
|
||||
const dir = showDir(type)
|
||||
const entrys = await readdir(`src/${dir}`, {
|
||||
recursive: false,
|
||||
withFileTypes: true,
|
||||
})
|
||||
let modules = entrys.filter((e) => e.isFile())
|
||||
modules = modules.map((module) => {
|
||||
return basename(module)
|
||||
})
|
||||
return modules
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'shouldRemove',
|
||||
type: 'confirm',
|
||||
default: false,
|
||||
message: '再次确认是否删除',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: 'remove',
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = remove
|
||||
113
scripts/safe-init.cjs
Normal file
113
scripts/safe-init.cjs
Normal file
@ -0,0 +1,113 @@
|
||||
const { resolve } = require('path')
|
||||
const { gray, green } = require('kolorist')
|
||||
const { createConsola } = require('consola')
|
||||
const { existsSync, lstatSync } = require('fs')
|
||||
const { removeSync, emptyDirSync } = require('fs-extra')
|
||||
|
||||
function slash(path) {
|
||||
return path.replace(/\\/g, '/')
|
||||
}
|
||||
|
||||
function r(dir) {
|
||||
return slash(resolve(__dirname, '../', dir))
|
||||
}
|
||||
|
||||
const entrys = [
|
||||
'src/components',
|
||||
'src/api',
|
||||
'mock',
|
||||
'layouts/default.vue',
|
||||
'src/pages/index.vue',
|
||||
'src/pages/about.md',
|
||||
'src/pages/echarts.vue',
|
||||
'src/stores',
|
||||
'locales/简体中文',
|
||||
'locales/English',
|
||||
]
|
||||
|
||||
const resolvedEntrys = entrys.map((entry) => r(entry))
|
||||
|
||||
/**
|
||||
* 安全初始化
|
||||
* @param {import('plop').NodePlopAPI} plop
|
||||
*/
|
||||
function safeInit(plop) {
|
||||
const logger = createConsola().withTag('safe:init')
|
||||
|
||||
logger.warn('实验性功能')
|
||||
|
||||
plop.setGenerator('controller', {
|
||||
description: '安全初始化',
|
||||
prompts: [
|
||||
{
|
||||
name: 'yes',
|
||||
type: 'confirm',
|
||||
message: '是否安全的初始化?',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
name: 'cleanStyles',
|
||||
type: 'confirm',
|
||||
message: '是否清理 styles?',
|
||||
default: false,
|
||||
},
|
||||
],
|
||||
actions(answer) {
|
||||
if (!answer.yes) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (answer.cleanStyles) {
|
||||
resolvedEntrys.push(r('src/styles'))
|
||||
}
|
||||
|
||||
console.log()
|
||||
|
||||
// 这里不用异步是因为 plop action 只支持同步
|
||||
resolvedEntrys.forEach((e) => {
|
||||
if (!existsSync(e)) {
|
||||
return
|
||||
}
|
||||
const entry = lstatSync(e)
|
||||
if (entry.isFile()) {
|
||||
removeSync(e)
|
||||
logClean(e)
|
||||
return
|
||||
}
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
emptyDirSync(e)
|
||||
logClean(e)
|
||||
}
|
||||
})
|
||||
|
||||
return [
|
||||
{
|
||||
type: 'add',
|
||||
force: true,
|
||||
path: '../src/pages/index.vue',
|
||||
templateFile: './template/page.hbs',
|
||||
data: {
|
||||
name: 'index',
|
||||
isMarkdown: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'add',
|
||||
force: true,
|
||||
path: '../src/layouts/default.vue',
|
||||
templateFile: './template/layout.hbs',
|
||||
data: {
|
||||
name: 'default',
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function logClean(path) {
|
||||
console.log(`${green('√ clean')} ${gray(path)}`)
|
||||
}
|
||||
|
||||
module.exports = safeInit
|
||||
41
scripts/shared/base.cjs
Normal file
41
scripts/shared/base.cjs
Normal file
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 获取扩展名
|
||||
* @param {string} type 模块类型
|
||||
* @param {boolean} isMarkdown 是否是 markdown，默认为 false
|
||||
* @returns {string} 扩展名
|
||||
*/
|
||||
const showExt = (type, isMarkdown = false) => {
|
||||
const isTs = type === 'api' || type === 'store' || type === 'module'
|
||||
const ext = isMarkdown ? 'md' : isTs ? 'ts' : 'vue'
|
||||
return ext
|
||||
}
|
||||
|
||||
/**
|
||||
* 模块类型
|
||||
*/
|
||||
const moduleTypes = [
|
||||
'api',
|
||||
'page',
|
||||
'store',
|
||||
'layout',
|
||||
'module',
|
||||
'component',
|
||||
'composable',
|
||||
]
|
||||
|
||||
/**
|
||||
* 获取目录
|
||||
* @param {string} type 类型
|
||||
*/
|
||||
const showDir = (type) => {
|
||||
if (type === 'api') {
|
||||
return 'api'
|
||||
}
|
||||
return `${type}s`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
showExt,
|
||||
showDir,
|
||||
moduleTypes,
|
||||
}
|
||||
2
scripts/template/api.hbs
Normal file
2
scripts/template/api.hbs
Normal file
@ -0,0 +1,2 @@
|
||||
import axios from "axios"
|
||||
|
||||
11
scripts/template/component.hbs
Normal file
11
scripts/template/component.hbs
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
{{name}}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
5
scripts/template/composable.hbs
Normal file
5
scripts/template/composable.hbs
Normal file
@ -0,0 +1,5 @@
|
||||
import { ref } from "vue"
|
||||
|
||||
export default {{name}} = () => {
|
||||
|
||||
}
|
||||
4
scripts/template/layout.hbs
Normal file
4
scripts/template/layout.hbs
Normal file
@ -0,0 +1,4 @@
|
||||
<template>
|
||||
{{pascalCase name}} layout
|
||||
<router-view />
|
||||
</template>
|
||||
6
scripts/template/module.hbs
Normal file
6
scripts/template/module.hbs
Normal file
@ -0,0 +1,6 @@
|
||||
import type { App } from "vue"
|
||||
|
||||
|
||||
export default (app: App) => {
|
||||
|
||||
}
|
||||
17
scripts/template/page.hbs
Normal file
17
scripts/template/page.hbs
Normal file
@ -0,0 +1,17 @@
|
||||
{{#if isMarkdown}}
|
||||
## {{pascalCase name}} Page
|
||||
|
||||
> The page is markdown file
|
||||
{{else}}
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
{{pascalCase name}} page
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{{/if}}
|
||||
9
scripts/template/store.hbs
Normal file
9
scripts/template/store.hbs
Normal file
@ -0,0 +1,9 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export default defineStore('{{name}}', {
|
||||
state() {
|
||||
return {}
|
||||
},
|
||||
getters: {},
|
||||
actions: {}
|
||||
})
|
||||
13
src/App.vue
Normal file
13
src/App.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* a {
|
||||
color: rgba(37, 99, 235);
|
||||
} */
|
||||
|
||||
p {
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
6
src/api/mock.ts
Normal file
6
src/api/mock.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { useRequest } from 'vue-request'
|
||||
|
||||
export const testRequest = () => {
|
||||
const { data, loading, error } = useRequest(() => http.post('/mock/post'))
|
||||
return { data, loading, error }
|
||||
}
|
||||
27
src/composables/env.ts
Normal file
27
src/composables/env.ts
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 是否在开发环境
|
||||
* @description 在 `if (IN_DEV)` 块中的代码在 `vite build` 时会自动编译掉，不会带到生产环境
|
||||
* @example
|
||||
* ```ts
|
||||
* if (IN_DEV) {
|
||||
* console.log("开发环境")
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export const IN_DEV = import.meta.env.DEV
|
||||
|
||||
/**
|
||||
* 是否在生产环境
|
||||
* @example
|
||||
* if (IN_PROD) {
|
||||
* console.log("生产环境")
|
||||
* }
|
||||
*/
|
||||
export const IN_PROD = import.meta.env.PROD
|
||||
|
||||
/**
|
||||
* 不带尾部 / 的 BASE_URL
|
||||
*/
|
||||
export const BASE_URL_WITHOUT_TAIL = import.meta.env.BASE_URL.endsWith('/')
|
||||
? import.meta.env.BASE_URL.slice(0, -1)
|
||||
: import.meta.env.BASE_URL
|
||||
60
src/composables/http.ts
Normal file
60
src/composables/http.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export const http = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||||
})
|
||||
|
||||
// 添加请求拦截器
|
||||
http.interceptors.request.use(
|
||||
function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
return config
|
||||
},
|
||||
function (error) {
|
||||
toast.warning(error.message ?? '未知请求错误')
|
||||
// 对请求错误做些什么
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
// 添加响应拦截器
|
||||
http.interceptors.response.use(
|
||||
function (response) {
|
||||
// 2xx 范围内的状态码都会触发该函数。
|
||||
// 对响应数据进行格式化
|
||||
if (response.data) {
|
||||
return response.data
|
||||
}
|
||||
return response
|
||||
},
|
||||
function (error) {
|
||||
const status = error.response?.status
|
||||
let { msg, message } = error.response?.data ?? {}
|
||||
|
||||
if (!msg && message) {
|
||||
msg = message
|
||||
}
|
||||
|
||||
if (!msg) {
|
||||
switch (status) {
|
||||
case 400:
|
||||
msg = '参数错误'
|
||||
break
|
||||
case 500:
|
||||
msg = '服务端错误'
|
||||
break
|
||||
case 404:
|
||||
msg = '路由未找到'
|
||||
break
|
||||
default:
|
||||
msg = error.message ?? '未知响应错误'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
toast.warning(msg)
|
||||
// 超出 2xx 范围的状态码都会触发该函数。
|
||||
// 对响应错误做点什么
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
7
src/composables/path.ts
Normal file
7
src/composables/path.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* base 安全的路径解析
|
||||
* @param path 路径
|
||||
*/
|
||||
export function safeResolve(path: string) {
|
||||
return BASE_URL_WITHOUT_TAIL + path
|
||||
}
|
||||
4
src/composables/toast.ts
Normal file
4
src/composables/toast.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import 'vue-toastification/dist/index.css'
|
||||
import { createToastInterface } from 'vue-toastification'
|
||||
|
||||
export default createToastInterface()
|
||||
12
src/composables/useLanguage.ts
Normal file
12
src/composables/useLanguage.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export default () => {
|
||||
const { t, locale } = useI18n()
|
||||
const toggleLocale = () => {
|
||||
locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
|
||||
}
|
||||
|
||||
const language = computed(() =>
|
||||
locale.value === 'zh-CN' ? '中文' : 'English',
|
||||
)
|
||||
|
||||
return { t, language, toggleLocale }
|
||||
}
|
||||
14
src/composables/useTyped.ts
Normal file
14
src/composables/useTyped.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { init } from 'ityped'
|
||||
|
||||
export default (strings: string[]) => {
|
||||
const typedRef = ref<Element>()
|
||||
|
||||
onMounted(() => {
|
||||
init(typedRef.value!, {
|
||||
strings,
|
||||
showCursor: false,
|
||||
disableBackTyping: true,
|
||||
})
|
||||
})
|
||||
return typedRef
|
||||
}
|
||||
25
src/composables/useVisits.ts
Normal file
25
src/composables/useVisits.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { useRequest } from 'vue-request'
|
||||
|
||||
export function useVisits() {
|
||||
// 开发环境下
|
||||
if (import.meta.env.DEV) {
|
||||
const visits = useStorage('visits-kv', 0)
|
||||
if (typeof visits.value === 'number') {
|
||||
visits.value++
|
||||
}
|
||||
return visits
|
||||
}
|
||||
|
||||
const { data: visits } = useRequest(async function () {
|
||||
try {
|
||||
const n = await http.get('https://visits-kv.deno.dev/tov-template', {
|
||||
baseURL: '',
|
||||
})
|
||||
return Number(n) ?? 0
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return 0
|
||||
}
|
||||
})
|
||||
return visits ?? 0
|
||||
}
|
||||
118
src/layouts/default.vue
Normal file
118
src/layouts/default.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="3" class="menu-left">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="el-menu-vertical"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
active-text-color="#409EFF"
|
||||
:collapse="isCollapse"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="/" class="menu-item">
|
||||
<el-icon>
|
||||
<HomeFilled />
|
||||
</el-icon>
|
||||
<template #title>首页</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/uav" class="menu-item">
|
||||
<el-icon>
|
||||
<Location />
|
||||
</el-icon>
|
||||
<template #title>无人机</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/task" class="menu-item">
|
||||
<el-icon>
|
||||
<MapLocation />
|
||||
</el-icon>
|
||||
<template #title>任务</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/settings" class="menu-item">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
<template #title>设置</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="21" class="menu-right">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
HomeFilled,
|
||||
Location,
|
||||
MapLocation,
|
||||
Setting
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const activeMenu = ref(route.path)
|
||||
// 默认不折叠 // 默认不折叠
|
||||
const isCollapse = ref(false)
|
||||
|
||||
watch(() => route.path, (newPath) => {
|
||||
activeMenu.value = newPath
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu-left {
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #304156;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.el-menu-vertical {
|
||||
border-right: none;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.el-menu-vertical:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 60px;
|
||||
padding: 0 20px !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.menu-item .el-icon {
|
||||
font-size: 22px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-item :deep(.el-menu-tooltip__trigger) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
3
src/layouts/notFound.vue
Normal file
3
src/layouts/notFound.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
17
src/main.ts
Normal file
17
src/main.ts
Normal file
@ -0,0 +1,17 @@
|
||||
// https://unocss.dev/ 原子 css 库
|
||||
import '@unocss/reset/tailwind-compat.css' // unocss reset
|
||||
import 'virtual:uno.css'
|
||||
import 'virtual:unocss-devtools'
|
||||
// 你自定义的 css
|
||||
import './styles/main.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn'
|
||||
import App from './App.vue'
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
app.use(ElementPlus, { locale: zhCn })
|
||||
app.mount('#app')
|
||||
58
src/pages/[...notFound].vue
Normal file
58
src/pages/[...notFound].vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
const typedRef = useTyped([' is not found!'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen flex flex-wrap items-center justify-around text-center">
|
||||
<div class="desc font-blod">
|
||||
<div class="code text-7xl">404</div>
|
||||
<div ref="typedRef" class="content mb-5 text-3xl">The Page</div>
|
||||
<RouterLink :to="safeResolve('/')">
|
||||
<button
|
||||
class="rounded bg-light-800 px-5 py-2 text-lg transition"
|
||||
hover="shadow-md"
|
||||
dark="text-black"
|
||||
>
|
||||
Go Home
|
||||
</button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<img
|
||||
:src="safeResolve('/notFound/32.svg')"
|
||||
class="cover"
|
||||
alt="page not found"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.code {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: auto;
|
||||
width: 700px;
|
||||
margin: 0 5px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"title": "404",
|
||||
"layout": "notFound"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
359
src/pages/[id].vue
Normal file
359
src/pages/[id].vue
Normal file
@ -0,0 +1,359 @@
|
||||
<template>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="grid-content">
|
||||
<!--顶部-->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="top">
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 中间-->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 底部-->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Connection, FullScreen, VideoCamera, Message, Back } from '@element-plus/icons-vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 获取系统ID
|
||||
const sysId = computed(() => {
|
||||
const params = route.params as Record<string, any>
|
||||
return 'id' in params ? (Array.isArray(params.id) ? params.id[0] : params.id ?? '') : ''
|
||||
})
|
||||
|
||||
// 状态数据
|
||||
const state = reactive({
|
||||
POWER_STATUS: { data: null as any },
|
||||
SYS_STATUS: { data: null as any },
|
||||
GPS_STATUS: { data: null as any },
|
||||
HEARTBEAT: { data: null as any },
|
||||
ATTITUDE: { data: null as any },
|
||||
VFR_HUD: { data: null as any },
|
||||
GLOBAL_POSITION_INT: { data: null as any },
|
||||
MISSION_CURRENT: { data: null as any },
|
||||
BATTERY_STATUS: { data: null as any },
|
||||
EKF_STATUS_REPORT: { data: null as any }
|
||||
})
|
||||
|
||||
// 视频流URL
|
||||
const videoUrl = ref('')
|
||||
// WebSocket连接
|
||||
const ws = ref<WebSocket | null>(null)
|
||||
// 消息日志
|
||||
const messages = ref<string[]>([])
|
||||
// 连接状态
|
||||
const isConnected = ref(false)
|
||||
// 地图实例
|
||||
const mapInstance = ref<any>(null)
|
||||
// 地图容器引用
|
||||
const mapContainer = ref<HTMLElement | null>(null)
|
||||
// 计算属性
|
||||
const systemStatusText = computed(() => {
|
||||
if (!state.HEARTBEAT.data) return '未知'
|
||||
const status = state.HEARTBEAT.data.system_status
|
||||
if (status === 3) return '待机'
|
||||
if (status === 4) return '活动中'
|
||||
if (status === 5) return '关键'
|
||||
return '未知'
|
||||
})
|
||||
|
||||
const systemStatusType = computed(() => {
|
||||
if (!state.HEARTBEAT.data) return 'info'
|
||||
const status = state.HEARTBEAT.data.system_status
|
||||
if (status === 3) return 'warning'
|
||||
if (status === 4) return 'success'
|
||||
if (status === 5) return 'danger'
|
||||
return 'info'
|
||||
})
|
||||
|
||||
const ekfHealth = computed(() => {
|
||||
return state.EKF_STATUS_REPORT.data?.health || 0
|
||||
})
|
||||
|
||||
const ekfStatus = computed(() => {
|
||||
const health = ekfHealth.value
|
||||
if (health > 80) return 'success'
|
||||
if (health > 50) return 'warning'
|
||||
return 'exception'
|
||||
})
|
||||
|
||||
const horizonStyle = computed(() => {
|
||||
const pitch = state.ATTITUDE.data?.pitch || 0
|
||||
const roll = state.ATTITUDE.data?.roll || 0
|
||||
return {
|
||||
transform: `rotate(${roll}deg) translateY(${pitch * 5}px)`
|
||||
}
|
||||
})
|
||||
|
||||
const yawStyle = computed(() => {
|
||||
const yaw = state.ATTITUDE.data?.yaw || 0
|
||||
return {
|
||||
transform: `rotate(${yaw}deg)`
|
||||
}
|
||||
})
|
||||
|
||||
// 方法
|
||||
function getFixType(type: number) {
|
||||
const types = ['无', '无', '2D', '3D']
|
||||
return types[type] || '未知'
|
||||
}
|
||||
|
||||
function getSystemMode(mode: number) {
|
||||
// 这里需要根据MAVLink协议解析模式
|
||||
return mode ? `模式 ${mode}` : '未知'
|
||||
}
|
||||
|
||||
function getFlightStatus(status: number) {
|
||||
const statusMap = {
|
||||
0: '未知',
|
||||
1: '启动',
|
||||
2: '校准',
|
||||
3: '待机',
|
||||
4: '活动中',
|
||||
5: '关键',
|
||||
6: '紧急'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
function connectWebSocket() {
|
||||
const wsUrl = `ws://localhost:8000/ws/mavlink/heartbeat/1/`
|
||||
ws.value = new WebSocket(wsUrl)
|
||||
|
||||
ws.value.onopen = () => {
|
||||
isConnected.value = true
|
||||
addMessage('WebSocket 已连接')
|
||||
}
|
||||
|
||||
ws.value.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
handleMavlinkMessage(data)
|
||||
} catch (error) {
|
||||
console.error('消息解析失败:', error)
|
||||
addMessage('消息解析失败')
|
||||
}
|
||||
}
|
||||
|
||||
ws.value.onclose = () => {
|
||||
isConnected.value = false
|
||||
addMessage('WebSocket 已断开')
|
||||
}
|
||||
|
||||
ws.value.onerror = (err) => {
|
||||
addMessage('WebSocket 错误')
|
||||
}
|
||||
}
|
||||
|
||||
function handleMavlinkMessage(data: any) {
|
||||
if (!data.msg_type) return
|
||||
|
||||
// 更新对应状态
|
||||
if (state[data.msg_type as keyof typeof state] !== undefined) {
|
||||
state[data.msg_type as keyof typeof state].data = data
|
||||
}
|
||||
|
||||
// 特殊处理某些消息
|
||||
switch (data.msg_type) {
|
||||
case 'HEARTBEAT':
|
||||
addMessage(`心跳: 系统状态 ${getFlightStatus(data.system_status)}`)
|
||||
break
|
||||
case 'GPS_STATUS':
|
||||
if (data.fix_type >= 3) {
|
||||
updateMapPosition()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function sendHeartbeat() {
|
||||
if (ws.value && isConnected.value) {
|
||||
ws.value.send(JSON.stringify({ type: 'heartbeat' }))
|
||||
addMessage('已发送心跳检测')
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(msg: string) {
|
||||
messages.value.push(msg)
|
||||
if (messages.value.length > 100) {
|
||||
messages.value.shift()
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(date: Date) {
|
||||
return date.toLocaleTimeString()
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
if (!mapContainer.value) return
|
||||
|
||||
// 初始化地图
|
||||
mapInstance.value = echarts.init(mapContainer.value)
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}'
|
||||
},
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
fontSize: 20
|
||||
},
|
||||
data: [{
|
||||
name: '无人机',
|
||||
x: 0,
|
||||
y: 0,
|
||||
symbolSize: 30,
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}],
|
||||
links: [],
|
||||
lineStyle: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
mapInstance.value.setOption(option)
|
||||
}
|
||||
|
||||
function updateMapPosition() {
|
||||
if (!mapInstance.value || !state.GLOBAL_POSITION_INT.data) return
|
||||
|
||||
const lon = state.GLOBAL_POSITION_INT.data.lon / 1e7
|
||||
const lat = state.GLOBAL_POSITION_INT.data.lat / 1e7
|
||||
|
||||
const option = {
|
||||
series: [{
|
||||
data: [{
|
||||
name: '无人机',
|
||||
x: lon,
|
||||
y: lat,
|
||||
symbolSize: 30,
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}
|
||||
|
||||
mapInstance.value.setOption(option)
|
||||
}
|
||||
|
||||
// 无人机控制方法
|
||||
function takeoff() {
|
||||
if (ws.value && isConnected.value) {
|
||||
ws.value.send(JSON.stringify({ command: 'takeoff' }))
|
||||
addMessage('发送起飞指令')
|
||||
}
|
||||
}
|
||||
|
||||
function land() {
|
||||
if (ws.value && isConnected.value) {
|
||||
ws.value.send(JSON.stringify({ command: 'land' }))
|
||||
addMessage('发送降落指令')
|
||||
}
|
||||
}
|
||||
|
||||
function returnToLaunch() {
|
||||
if (ws.value && isConnected.value) {
|
||||
ws.value.send(JSON.stringify({ command: 'rtl' }))
|
||||
addMessage('发送返航指令')
|
||||
}
|
||||
}
|
||||
|
||||
function setMode(mode: string) {
|
||||
if (ws.value && isConnected.value) {
|
||||
ws.value.send(JSON.stringify({ command: 'set_mode', mode }))
|
||||
addMessage(`设置模式: ${mode}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
connectWebSocket()
|
||||
initMap()
|
||||
|
||||
// 模拟视频流
|
||||
setTimeout(() => {
|
||||
videoUrl.value = 'https://example.com/uav-video-stream'
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (ws.value) ws.value.close()
|
||||
if (mapInstance.value) mapInstance.value.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-content {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-image: url('uav/bg.png');
|
||||
background-size: cover; /* 确保图片覆盖整个区域 */
|
||||
}
|
||||
.top{
|
||||
height: 50px;
|
||||
width: 69%;
|
||||
background-color: #00dc82;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"layout": "notFound"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
518
src/pages/index.vue
Normal file
518
src/pages/index.vue
Normal file
@ -0,0 +1,518 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="header">
|
||||
<div class="logo">
|
||||
<!-- <img src="@/assets/logo.png" alt="无人机管理系统" class="logo-img">-->
|
||||
<h1 class="title">无人机管理系统</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tooltip content="消息通知" placement="bottom">
|
||||
<el-badge :value="12" class="notification-badge">
|
||||
<el-icon :size="20">
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</el-tooltip>
|
||||
<el-dropdown class="user-dropdown">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="36" src="@/assets/user-avatar.png" />
|
||||
<span class="username">管理员</span>
|
||||
<el-icon class="dropdown-icon">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
系统设置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided>
|
||||
<el-icon>
|
||||
<SwitchButton />
|
||||
</el-icon>
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-main class="main-content">
|
||||
<!-- 状态卡片 -->
|
||||
<div class="status-cards">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-card shadow="hover" class="status-card">
|
||||
<div class="card-content">
|
||||
<div class="card-icon bg-blue">
|
||||
<el-icon :size="28">
|
||||
<Collection />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">无人机总数</div>
|
||||
<div class="card-value">24</div>
|
||||
<div class="card-trend">
|
||||
<span class="trend-up">↑ 2.5%</span>
|
||||
<span class="trend-text">较上月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-card shadow="hover" class="status-card">
|
||||
<div class="card-content">
|
||||
<div class="card-icon bg-green">
|
||||
<el-icon :size="28">
|
||||
<Check />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">可用无人机</div>
|
||||
<div class="card-value">18</div>
|
||||
<div class="card-trend">
|
||||
<span class="trend-up">↑ 5.8%</span>
|
||||
<span class="trend-text">较上周</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-card shadow="hover" class="status-card">
|
||||
<div class="card-content">
|
||||
<div class="card-icon bg-orange">
|
||||
<el-icon :size="28">
|
||||
<Warning />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">任务中</div>
|
||||
<div class="card-value">5</div>
|
||||
<div class="card-trend">
|
||||
<span class="trend-down">↓ 1.2%</span>
|
||||
<span class="trend-text">较昨日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-card shadow="hover" class="status-card">
|
||||
<div class="card-content">
|
||||
<div class="card-icon bg-purple">
|
||||
<el-icon :size="28">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">待处理任务</div>
|
||||
<div class="card-value">8</div>
|
||||
<div class="card-trend">
|
||||
<span class="trend-up">↑ 3.1%</span>
|
||||
<span class="trend-text">较昨日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="chart-area">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover" class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>无人机任务统计</span>
|
||||
<el-select v-model="chartTimeRange" class="time-select" size="small">
|
||||
<el-option label="本周" value="week" />
|
||||
<el-option label="本月" value="month" />
|
||||
<el-option label="本季度" value="quarter" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<div class="chart-container">
|
||||
<!-- 这里放置echarts图表 -->
|
||||
<div class="mock-chart" style="height: 300px;">
|
||||
<div class="mock-chart-placeholder">
|
||||
<el-icon :size="48">
|
||||
<DataLine />
|
||||
</el-icon>
|
||||
<p>任务统计图表</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>无人机状态分布</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="chart-container">
|
||||
<!-- 这里放置饼图 -->
|
||||
<div class="mock-chart" style="height: 300px;">
|
||||
<div class="mock-chart-placeholder">
|
||||
<el-icon :size="48">
|
||||
<PieChart />
|
||||
</el-icon>
|
||||
<p>状态分布图表</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 最近任务列表 -->
|
||||
<div class="task-list">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>最近任务</span>
|
||||
<el-button type="primary" size="small" :icon="Refresh" @click="refreshTasks">刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="recentTasks" style="width: 100%" stripe>
|
||||
<el-table-column prop="id" label="任务ID" width="100" />
|
||||
<el-table-column prop="name" label="任务名称" />
|
||||
<el-table-column prop="drone" label="无人机" width="120" />
|
||||
<el-table-column prop="startTime" label="开始时间" width="180" />
|
||||
<el-table-column prop="endTime" label="结束时间" width="180" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusTagType(row.status)" size="small">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default>
|
||||
<el-button type="text" size="small">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50"
|
||||
:page-size="5"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Bell,
|
||||
ArrowDown,
|
||||
User,
|
||||
Setting,
|
||||
SwitchButton,
|
||||
Collection,
|
||||
Check,
|
||||
Warning,
|
||||
Clock,
|
||||
DataLine,
|
||||
PieChart,
|
||||
Refresh
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// 图表时间范围选择
|
||||
const chartTimeRange = ref('week')
|
||||
|
||||
// 最近任务数据
|
||||
const recentTasks = ref([
|
||||
{
|
||||
id: 'T20230701',
|
||||
name: '农田巡查-东部区域',
|
||||
drone: 'DJI-001',
|
||||
startTime: '2023-07-01 08:30',
|
||||
endTime: '2023-07-01 11:45',
|
||||
status: '已完成'
|
||||
},
|
||||
{
|
||||
id: 'T20230702',
|
||||
name: '电力线路检查',
|
||||
drone: 'DJI-003',
|
||||
startTime: '2023-07-02 09:00',
|
||||
endTime: '2023-07-02 12:15',
|
||||
status: '已完成'
|
||||
},
|
||||
{
|
||||
id: 'T20230703',
|
||||
name: '建筑工地监测',
|
||||
drone: 'DJI-002',
|
||||
startTime: '2023-07-03 10:30',
|
||||
endTime: '2023-07-03 14:20',
|
||||
status: '进行中'
|
||||
},
|
||||
{
|
||||
id: 'T20230704',
|
||||
name: '森林防火巡查',
|
||||
drone: 'DJI-005',
|
||||
startTime: '2023-07-04 13:00',
|
||||
endTime: '2023-07-04 16:30',
|
||||
status: '已计划'
|
||||
},
|
||||
{
|
||||
id: 'T20230705',
|
||||
name: '交通路况监测',
|
||||
drone: 'DJI-004',
|
||||
startTime: '2023-07-05 07:45',
|
||||
endTime: '2023-07-05 10:15',
|
||||
status: '已取消'
|
||||
}
|
||||
])
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status: string) => {
|
||||
switch (status) {
|
||||
case '已完成':
|
||||
return 'success'
|
||||
case '进行中':
|
||||
return 'primary'
|
||||
case '已计划':
|
||||
return 'info'
|
||||
case '已取消':
|
||||
return 'danger'
|
||||
default:
|
||||
return 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新任务
|
||||
const refreshTasks = () => {
|
||||
console.log('刷新任务数据')
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
const handlePageChange = (currentPage: number) => {
|
||||
console.log('当前页:', currentPage)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 0 8px 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 主内容区样式 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 状态卡片样式 */
|
||||
.status-cards {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #f0f7ff;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #f0f9eb;
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background-color: #fdf6ec;
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background-color: #f9f0ff;
|
||||
color: #8E44AD;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.trend-up {
|
||||
color: #67C23A;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.trend-down {
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.trend-text {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 图表区域样式 */
|
||||
.chart-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mock-chart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.mock-chart-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 任务列表样式 */
|
||||
.task-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
188
src/pages/login.vue
Normal file
188
src/pages/login.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-card class="login-card">
|
||||
<div class="logo">
|
||||
<el-icon :size="60" color="#409EFF">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 16s-5.8-4-10-7l-2 2-2-2c-4.2 3-10 7-10 7l10 7 10-7z"/>
|
||||
<path d="M12 9v6"/>
|
||||
<path d="M15 12h-6"/>
|
||||
</svg>
|
||||
</el-icon>
|
||||
<h1>无人机管理控制平台</h1>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="loginForm"
|
||||
@submit.prevent="handleLogin"
|
||||
class="login-form"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名"
|
||||
prefix-icon="User"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
prefix-icon="Lock"
|
||||
size="large"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="form.remember">记住我</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
size="large"
|
||||
class="login-btn"
|
||||
:loading="loading"
|
||||
>
|
||||
登 录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div class="links">
|
||||
<!-- <el-link type="info" :underline="false">忘记密码?</el-link>-->
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<div class="copyright">
|
||||
© 2025 无人机管理控制平台 版权所有
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const loginForm = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false
|
||||
})
|
||||
const rules = reactive<FormRules>({
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
await loginForm.value?.validate()
|
||||
|
||||
// 这里添加实际的登录逻辑
|
||||
console.log('登录信息:', form)
|
||||
// 模拟登录过程
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
// 登录成功后跳转
|
||||
router.push('/')
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #0f2c59 0%, #1a4b8c 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-card :deep(.el-card__body) {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 1.5rem;
|
||||
color: #303133;
|
||||
margin: 15px 0 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 30px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 调整Element Plus组件在暗背景下的显示 */
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"layout": "notFound"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
721
src/pages/task.vue
Normal file
721
src/pages/task.vue
Normal file
@ -0,0 +1,721 @@
|
||||
<template>
|
||||
<div class="mission-management">
|
||||
<div class="header">
|
||||
<h2>任务管理</h2>
|
||||
<div class="operation-buttons">
|
||||
<el-button type="primary" @click="handleCreate">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
创建任务
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:disabled="!selectedIds.length"
|
||||
@click="handleBatchCancel"
|
||||
>
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
批量取消
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="listQuery.keyword"
|
||||
placeholder="搜索任务名称/描述"
|
||||
style="width: 300px"
|
||||
clearable
|
||||
@keyup.enter="handleFilter"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="handleFilter" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-select
|
||||
v-model="listQuery.status"
|
||||
placeholder="状态筛选"
|
||||
clearable
|
||||
style="width: 120px; margin-left: 10px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="margin-left: 10px; width: 280px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="missionList"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%; margin-top: 20px"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column prop="id" label="ID" width="80" align="center" />
|
||||
<el-table-column prop="name" label="任务名称" min-width="150" />
|
||||
<el-table-column label="关联无人机" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="drone in row.drones" :key="drone.id" style="margin-right: 5px">
|
||||
{{ drone.name }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="任务类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="typeTagMap[row.type]">
|
||||
{{ typeMap[row.type] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTagMap[row.status]">
|
||||
{{ statusMap[row.status] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间" width="180" />
|
||||
<el-table-column prop="endTime" label="结束时间" width="180" />
|
||||
<el-table-column label="操作" width="220" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="handleDetail(row)">
|
||||
<el-icon>
|
||||
<View />
|
||||
</el-icon>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="row.status !== 'pending'"
|
||||
@click="handleExecute(row)"
|
||||
>
|
||||
<el-icon>
|
||||
<VideoPlay />
|
||||
</el-icon>
|
||||
执行
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
:disabled="!['pending', 'progress'].includes(row.status)"
|
||||
@click="handleCancel(row)"
|
||||
>
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="listQuery.page"
|
||||
v-model:page-size="listQuery.limit"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 任务创建/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'edit' ? '编辑任务' : '创建任务'"
|
||||
width="700px"
|
||||
>
|
||||
<el-form
|
||||
ref="missionForm"
|
||||
:model="missionForm"
|
||||
:rules="missionRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="missionForm.name" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型" prop="type">
|
||||
<el-select v-model="missionForm.type" placeholder="请选择任务类型">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联无人机" prop="drones">
|
||||
<el-select
|
||||
v-model="missionForm.drones"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择无人机"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="drone in droneOptions"
|
||||
:key="drone.id"
|
||||
:label="drone.name"
|
||||
:value="drone.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务时间" prop="timeRange">
|
||||
<el-date-picker
|
||||
v-model="missionForm.timeRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述" prop="description">
|
||||
<el-input
|
||||
v-model="missionForm.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入任务描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="航线规划" prop="route">
|
||||
<el-button type="primary" @click="showRouteMap = true">
|
||||
<el-icon>
|
||||
<MapLocation />
|
||||
</el-icon>
|
||||
规划航线
|
||||
</el-button>
|
||||
<div v-if="missionForm.route" class="route-preview">
|
||||
<span>已设置 {{ missionForm.route.points.length }} 个航点</span>
|
||||
<el-button type="text" @click="showRouteMap = true">查看</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmMission">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 航线规划地图 -->
|
||||
<el-dialog
|
||||
v-model="showRouteMap"
|
||||
title="航线规划"
|
||||
width="80%"
|
||||
top="5vh"
|
||||
fullscreen
|
||||
>
|
||||
<div class="map-container">
|
||||
<!-- 这里放置地图组件 -->
|
||||
<div style="height: 80vh; background: #f5f5f5; display: flex; align-items: center; justify-content: center">
|
||||
<h3>地图组件区域 (可集成高德/Google/百度地图)</h3>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="showRouteMap = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveRoute">保存航线</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 任务详情抽屉 -->
|
||||
<el-drawer
|
||||
v-model="detailVisible"
|
||||
title="任务详情"
|
||||
direction="rtl"
|
||||
size="50%"
|
||||
>
|
||||
<div v-if="currentMission" class="mission-detail">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="任务ID">{{ currentMission.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务名称">{{ currentMission.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务类型">
|
||||
<el-tag :type="typeTagMap[currentMission.type]">
|
||||
{{ typeMap[currentMission.type] }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="任务状态">
|
||||
<el-tag :type="statusTagMap[currentMission.status]">
|
||||
{{ statusMap[currentMission.status] }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="关联无人机">
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 5px">
|
||||
<el-tag
|
||||
v-for="drone in currentMission.drones"
|
||||
:key="drone.id"
|
||||
type="info"
|
||||
>
|
||||
{{ drone.name }} ({{ drone.model }})
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="开始时间">{{ currentMission.startTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">{{ currentMission.endTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务描述">
|
||||
<div style="white-space: pre-line">{{ currentMission.description }}</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="航线规划">
|
||||
<div
|
||||
style="height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center">
|
||||
<h3>航线地图预览</h3>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div v-if="currentMission.status === 'progress'" class="real-time-data">
|
||||
<h3 style="margin: 20px 0 10px">实时数据</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header" class="card-header">
|
||||
<span>无人机状态</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div v-for="drone in currentMission.drones" :key="drone.id" class="drone-status">
|
||||
<div class="status-item">
|
||||
<span class="label">{{ drone.name }}:</span>
|
||||
<el-tag :type="drone.status === 'online' ? 'success' : 'danger'" size="small">
|
||||
{{ drone.status === 'online' ? '在线' : '离线' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">电量:</span>
|
||||
<el-progress
|
||||
:percentage="drone.battery"
|
||||
:color="batteryColor(drone.battery)"
|
||||
:show-text="false"
|
||||
:stroke-width="12"
|
||||
style="width: 80px"
|
||||
/>
|
||||
<span class="value">{{ drone.battery }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header" class="card-header">
|
||||
<span>任务进度</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<el-progress
|
||||
:percentage="missionProgress"
|
||||
:stroke-width="16"
|
||||
:text-inside="true"
|
||||
/>
|
||||
<div class="progress-detail">
|
||||
<div>已完成航点: 12/24</div>
|
||||
<div>预计剩余时间: 32分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header" class="card-header">
|
||||
<span>实时画面</span>
|
||||
</div>
|
||||
<div class="card-content" style="text-align: center">
|
||||
<div
|
||||
style="height: 160px; background: #000; display: flex; align-items: center; justify-content: center">
|
||||
<span style="color: #fff">视频直播画面</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
Plus,
|
||||
Close,
|
||||
Search,
|
||||
View,
|
||||
VideoPlay,
|
||||
MapLocation
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
pending: '待执行',
|
||||
progress: '进行中',
|
||||
completed: '已完成',
|
||||
cancelled: '已取消',
|
||||
failed: '失败'
|
||||
}
|
||||
|
||||
const statusTagMap = {
|
||||
pending: 'warning',
|
||||
progress: 'primary',
|
||||
completed: 'success',
|
||||
cancelled: 'info',
|
||||
failed: 'danger'
|
||||
}
|
||||
|
||||
const typeMap = {
|
||||
patrol: '巡检',
|
||||
mapping: '测绘',
|
||||
emergency: '应急',
|
||||
transport: '运输'
|
||||
}
|
||||
|
||||
const typeTagMap = {
|
||||
patrol: '',
|
||||
mapping: 'success',
|
||||
emergency: 'danger',
|
||||
transport: 'info'
|
||||
}
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'pending', label: '待执行' },
|
||||
{ value: 'progress', label: '进行中' },
|
||||
{ value: 'completed', label: '已完成' },
|
||||
{ value: 'cancelled', label: '已取消' },
|
||||
{ value: 'failed', label: '失败' }
|
||||
]
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 'patrol', label: '巡检' },
|
||||
{ value: 'mapping', label: '测绘' },
|
||||
{ value: 'emergency', label: '应急' },
|
||||
{ value: 'transport', label: '运输' }
|
||||
]
|
||||
|
||||
// 电池颜色
|
||||
const batteryColor = (percentage) => {
|
||||
if (percentage > 70) return '#67C23A'
|
||||
if (percentage > 30) return '#E6A23C'
|
||||
return '#F56C6C'
|
||||
}
|
||||
|
||||
// 列表相关
|
||||
const listLoading = ref(false)
|
||||
const missionList = ref([])
|
||||
const total = ref(0)
|
||||
const selectedIds = ref([])
|
||||
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
status: '',
|
||||
dateRange: []
|
||||
})
|
||||
|
||||
// 无人机选项（模拟数据）
|
||||
const droneOptions = ref([
|
||||
{ id: 1, name: '巡检无人机1号', model: 'DJI Mavic 3' },
|
||||
{ id: 2, name: '测绘无人机A', model: 'DJI Phantom 4 RTK' },
|
||||
{ id: 3, name: '应急无人机', model: 'DJI Matrice 300' }
|
||||
])
|
||||
|
||||
// 表单相关
|
||||
const dialogVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const showRouteMap = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const currentMission = ref(null)
|
||||
const missionProgress = ref(45) // 模拟进度
|
||||
|
||||
const missionForm = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
type: 'patrol',
|
||||
drones: [],
|
||||
timeRange: [],
|
||||
description: '',
|
||||
route: null
|
||||
})
|
||||
|
||||
const missionRules = reactive({
|
||||
name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
|
||||
drones: [{ required: true, message: '请选择至少一架无人机', trigger: 'change' }],
|
||||
timeRange: [{ required: true, message: '请选择任务时间', trigger: 'change' }]
|
||||
})
|
||||
|
||||
// 获取任务列表
|
||||
const fetchMissions = async () => {
|
||||
listLoading.value = true
|
||||
try {
|
||||
// 这里替换为实际API调用
|
||||
// const res = await getMissionList(listQuery)
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
missionList.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '园区安全巡检',
|
||||
type: 'patrol',
|
||||
status: 'pending',
|
||||
drones: [
|
||||
{ id: 1, name: '巡检无人机1号', model: 'DJI Mavic 3', status: 'online', battery: 85 },
|
||||
{ id: 3, name: '应急无人机', model: 'DJI Matrice 300', status: 'online', battery: 90 }
|
||||
],
|
||||
startTime: '2023-05-20 09:00:00',
|
||||
endTime: '2023-05-20 11:00:00',
|
||||
description: '每日例行园区安全巡检，重点检查围墙和屋顶区域'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '建筑工地测绘',
|
||||
type: 'mapping',
|
||||
status: 'progress',
|
||||
drones: [
|
||||
{ id: 2, name: '测绘无人机A', model: 'DJI Phantom 4 RTK', status: 'online', battery: 65 }
|
||||
],
|
||||
startTime: '2023-05-19 14:00:00',
|
||||
endTime: '2023-05-19 16:30:00',
|
||||
description: '新建筑工地三维建模测绘'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '紧急物资运输',
|
||||
type: 'emergency',
|
||||
status: 'completed',
|
||||
drones: [
|
||||
{ id: 3, name: '应急无人机', model: 'DJI Matrice 300', status: 'offline', battery: 25 }
|
||||
],
|
||||
startTime: '2023-05-18 10:15:00',
|
||||
endTime: '2023-05-18 11:30:00',
|
||||
description: '向山区运送紧急医疗物资'
|
||||
}
|
||||
].slice(
|
||||
(listQuery.page - 1) * listQuery.limit,
|
||||
listQuery.page * listQuery.limit
|
||||
)
|
||||
total.value = 3
|
||||
listLoading.value = false
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
listLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表格选择
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedIds.value = selection.map((item) => item.id)
|
||||
}
|
||||
|
||||
// 筛选
|
||||
const handleFilter = () => {
|
||||
listQuery.page = 1
|
||||
fetchMissions()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (val) => {
|
||||
listQuery.limit = val
|
||||
fetchMissions()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
listQuery.page = val
|
||||
fetchMissions()
|
||||
}
|
||||
|
||||
// 创建任务
|
||||
const handleCreate = () => {
|
||||
dialogType.value = 'add'
|
||||
Object.assign(missionForm, {
|
||||
id: '',
|
||||
name: '',
|
||||
type: 'patrol',
|
||||
drones: [],
|
||||
timeRange: [],
|
||||
description: '',
|
||||
route: null
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = (row) => {
|
||||
currentMission.value = row
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
// 执行任务
|
||||
const handleExecute = (row) => {
|
||||
ElMessageBox.confirm(`确认开始执行任务 "${row.name}"?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() => {
|
||||
// 这里替换为实际API调用
|
||||
// await executeMission(row.id)
|
||||
ElMessage.success('任务已开始执行')
|
||||
fetchMissions()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
// 取消任务
|
||||
const handleCancel = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确认${row.status === 'progress' ? '终止' : '取消'}任务 "${row.name}"?`,
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
// 这里替换为实际API调用
|
||||
// await cancelMission(row.id)
|
||||
ElMessage.success(`任务已${row.status === 'progress' ? '终止' : '取消'}`)
|
||||
fetchMissions()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
// 批量取消
|
||||
const handleBatchCancel = () => {
|
||||
ElMessageBox.confirm(
|
||||
`确认取消选中的 ${selectedIds.value.length} 个任务?`,
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
// 这里替换为实际API调用
|
||||
// await batchCancelMissions(selectedIds.value)
|
||||
ElMessage.success('取消成功')
|
||||
selectedIds.value = []
|
||||
fetchMissions()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
// 保存航线
|
||||
const saveRoute = () => {
|
||||
// 这里应该是从地图组件获取航线数据
|
||||
missionForm.route = {
|
||||
points: [
|
||||
{ lat: 39.9042, lng: 116.4074 },
|
||||
{ lat: 39.9082, lng: 116.4074 },
|
||||
{ lat: 39.9082, lng: 116.4174 },
|
||||
{ lat: 39.9042, lng: 116.4174 }
|
||||
],
|
||||
distance: '2.5km',
|
||||
estimatedTime: '15分钟'
|
||||
}
|
||||
showRouteMap.value = false
|
||||
ElMessage.success('航线已保存')
|
||||
}
|
||||
|
||||
// 确认表单
|
||||
const confirmMission = () => {
|
||||
// 这里替换为实际表单验证和API调用
|
||||
ElMessage.success(
|
||||
dialogType.value === 'add' ? '创建成功' : '更新成功'
|
||||
)
|
||||
dialogVisible.value = false
|
||||
fetchMissions()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMissions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mission-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.route-preview {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mission-detail {
|
||||
padding: 20px;
|
||||
|
||||
.drone-status {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-detail {
|
||||
margin-top: 10px;
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
411
src/pages/uav.vue
Normal file
411
src/pages/uav.vue
Normal file
@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="drone-management">
|
||||
<div class="header">
|
||||
<h2>无人机管理</h2>
|
||||
<div class="operation-buttons">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加无人机
|
||||
</el-button>
|
||||
<el-button type="danger" :disabled="!selectedIds.length" @click="handleBatchDelete">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="listQuery.keyword"
|
||||
placeholder="搜索无人机名称/型号"
|
||||
style="width: 300px"
|
||||
clearable
|
||||
@keyup.enter="handleFilter"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="handleFilter" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-select
|
||||
v-model="listQuery.status"
|
||||
placeholder="状态筛选"
|
||||
clearable
|
||||
style="width: 120px; margin-left: 10px"
|
||||
>
|
||||
<el-option label="在线" value="online" />
|
||||
<el-option label="离线" value="offline" />
|
||||
<el-option label="维修中" value="maintenance" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="droneList"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column prop="id" label="ID" width="80" align="center" />
|
||||
<el-table-column prop="name" label="无人机名称" min-width="120" />
|
||||
<el-table-column prop="model" label="型号" width="150" />
|
||||
<el-table-column prop="sn" label="序列号" width="180" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType[row.status]">
|
||||
{{ statusMap[row.status] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="battery" label="电量" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-progress
|
||||
:percentage="row.battery"
|
||||
:color="batteryColor(row.battery)"
|
||||
:show-text="false"
|
||||
:stroke-width="18"
|
||||
/>
|
||||
{{ row.battery }}%
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastConnectTime" label="最后连接时间" width="180" />
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="handleEdit(row)">
|
||||
<el-icon>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(row)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click="handleControl(row)">
|
||||
<el-icon>
|
||||
<Connection />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="listQuery.page"
|
||||
v-model:page-size="listQuery.limit"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'edit' ? '编辑无人机' : '添加无人机'"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="droneForm"
|
||||
:model="droneForm"
|
||||
:rules="droneRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="无人机名称" prop="name">
|
||||
<el-input v-model="droneForm.name" placeholder="请输入无人机名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无人机型号" prop="model">
|
||||
<el-input v-model="droneForm.model" placeholder="请输入无人机型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="序列号" prop="sn">
|
||||
<el-input v-model="droneForm.sn" placeholder="请输入序列号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="droneForm.status" placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmDrone">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
Plus,
|
||||
Delete,
|
||||
Edit,
|
||||
Search,
|
||||
Connection
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
online: '在线',
|
||||
offline: '离线',
|
||||
maintenance: '维修中'
|
||||
}
|
||||
|
||||
const statusType = {
|
||||
online: 'success',
|
||||
offline: 'danger',
|
||||
maintenance: 'warning'
|
||||
}
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'online', label: '在线' },
|
||||
{ value: 'offline', label: '离线' },
|
||||
{ value: 'maintenance', label: '维修中' }
|
||||
]
|
||||
|
||||
// 电池颜色
|
||||
const batteryColor = (percentage) => {
|
||||
if (percentage > 70) return '#67C23A'
|
||||
if (percentage > 30) return '#E6A23C'
|
||||
return '#F56C6C'
|
||||
}
|
||||
|
||||
// 列表相关
|
||||
const listLoading = ref(false)
|
||||
const droneList = ref([])
|
||||
const total = ref(0)
|
||||
const selectedIds = ref([])
|
||||
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
// 表单相关
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const droneForm = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
model: '',
|
||||
sn: '',
|
||||
status: 'online',
|
||||
battery: 100
|
||||
})
|
||||
|
||||
const droneRules = reactive({
|
||||
name: [{ required: true, message: '请输入无人机名称', trigger: 'blur' }],
|
||||
model: [{ required: true, message: '请输入无人机型号', trigger: 'blur' }],
|
||||
sn: [{ required: true, message: '请输入序列号', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||||
})
|
||||
|
||||
// 获取无人机列表
|
||||
const fetchDrones = async () => {
|
||||
listLoading.value = true
|
||||
try {
|
||||
// 这里替换为实际API调用
|
||||
// const res = await getDroneList(listQuery)
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
droneList.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '巡检无人机1号',
|
||||
model: 'DJI Mavic 3',
|
||||
sn: 'DJI123456789',
|
||||
status: 'online',
|
||||
battery: 85,
|
||||
lastConnectTime: '2023-05-15 14:30:22'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '测绘无人机A',
|
||||
model: 'DJI Phantom 4 RTK',
|
||||
sn: 'DJI987654321',
|
||||
status: 'offline',
|
||||
battery: 25,
|
||||
lastConnectTime: '2023-05-14 09:15:33'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '应急无人机',
|
||||
model: 'DJI Matrice 300',
|
||||
sn: 'DJI456789123',
|
||||
status: 'maintenance',
|
||||
battery: 0,
|
||||
lastConnectTime: '2023-05-10 16:45:12'
|
||||
}
|
||||
].slice(
|
||||
(listQuery.page - 1) * listQuery.limit,
|
||||
listQuery.page * listQuery.limit
|
||||
)
|
||||
total.value = 3
|
||||
listLoading.value = false
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
listLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表格选择
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedIds.value = selection.map((item) => item.id)
|
||||
}
|
||||
|
||||
// 筛选
|
||||
const handleFilter = () => {
|
||||
listQuery.page = 1
|
||||
fetchDrones()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (val) => {
|
||||
listQuery.limit = val
|
||||
fetchDrones()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
listQuery.page = val
|
||||
fetchDrones()
|
||||
}
|
||||
|
||||
// 添加无人机
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
Object.assign(droneForm, {
|
||||
id: '',
|
||||
name: '',
|
||||
model: '',
|
||||
sn: '',
|
||||
status: 'online',
|
||||
battery: 100
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑无人机
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
Object.assign(droneForm, row)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除无人机
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确认删除无人机 "${row.name}"?`, '警告', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
// 这里替换为实际API调用
|
||||
// await deleteDrone(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchDrones()
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
ElMessageBox.confirm(`确认删除选中的 ${selectedIds.value.length} 台无人机?`, '警告', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
// 这里替换为实际API调用
|
||||
// await batchDeleteDrones(selectedIds.value)
|
||||
ElMessage.success('删除成功')
|
||||
selectedIds.value = []
|
||||
fetchDrones()
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
// 控制无人机
|
||||
const handleControl = (row) => {
|
||||
ElMessage.info(`正在连接无人机 ${row.name}...`)
|
||||
// 这里可以跳转到控制页面或打开控制对话框
|
||||
router.push(`${row.id}`)
|
||||
}
|
||||
|
||||
// 确认表单
|
||||
const confirmDrone = () => {
|
||||
// 这里替换为实际表单验证和API调用
|
||||
ElMessage.success(
|
||||
dialogType.value === 'add' ? '添加成功' : '更新成功'
|
||||
)
|
||||
dialogVisible.value = false
|
||||
fetchDrones()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDrones()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drone-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
23
src/plugins/mock.ts
Normal file
23
src/plugins/mock.ts
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* 该模块主要给生产时的 mock 用，一般情况下你并不需要关注
|
||||
*/
|
||||
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
|
||||
import { createFetchSever } from '../../presets/shared/mock'
|
||||
|
||||
const shouldCreateServer =
|
||||
!import.meta.env.DEV && import.meta.env.VITE_APP_MOCK_IN_PRODUCTION === 'true'
|
||||
|
||||
// 生产环境时才创建服务
|
||||
if (shouldCreateServer) {
|
||||
const mockModules: any[] = []
|
||||
const modules = import.meta.glob('../../mock/*.ts', {
|
||||
eager: true,
|
||||
})
|
||||
Object.values(modules).forEach((v: any) => {
|
||||
if (Array.isArray(v.default)) {
|
||||
mockModules.push(...v.default)
|
||||
}
|
||||
})
|
||||
createProdMockServer(mockModules)
|
||||
createFetchSever(mockModules)
|
||||
}
|
||||
9
src/plugins/nprogress.ts
Normal file
9
src/plugins/nprogress.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { router } from './router'
|
||||
import { useNProgress } from '@vueuse/integrations/useNProgress'
|
||||
|
||||
// https://vueuse.org/integrations/useNProgress/
|
||||
const { start, done } = useNProgress()
|
||||
|
||||
router.beforeEach(() => start())
|
||||
|
||||
router.afterEach(() => done(true))
|
||||
7
src/plugins/pinia.ts
Normal file
7
src/plugins/pinia.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import persistedstate from 'pinia-plugin-persistedstate'
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
pinia.use(persistedstate)
|
||||
|
||||
export default pinia
|
||||
26
src/plugins/router.ts
Normal file
26
src/plugins/router.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { createGetRoutes, setupLayouts } from 'virtual:meta-layouts'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { routes as fileRoutes } from 'vue-router/auto-routes'
|
||||
|
||||
declare module 'vue-router' {
|
||||
// 在这里定义你的 meta 类型
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
interface RouteMeta {
|
||||
title?: string
|
||||
layout?: string
|
||||
}
|
||||
}
|
||||
|
||||
// 重定向 BASE_URL
|
||||
fileRoutes.flat(Infinity).forEach((route) => {
|
||||
route.path = safeResolve(route.path)
|
||||
})
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: setupLayouts(fileRoutes),
|
||||
})
|
||||
|
||||
export const getRoutes = createGetRoutes(router)
|
||||
|
||||
export default router
|
||||
17
src/plugins/title.ts
Normal file
17
src/plugins/title.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { router } from './router'
|
||||
|
||||
useTitle(
|
||||
() => {
|
||||
const { path, meta } = router.currentRoute.value
|
||||
if (meta.title) {
|
||||
return `· ${meta.title}`
|
||||
}
|
||||
if (path === '/') {
|
||||
return '· home'
|
||||
}
|
||||
return path.replaceAll('/', ' · ')
|
||||
},
|
||||
{
|
||||
titleTemplate: `${import.meta.env.VITE_APP_TITLE} %s`,
|
||||
},
|
||||
)
|
||||
15
src/stores/createCounter.ts
Normal file
15
src/stores/createCounter.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export default defineStore('counter', {
|
||||
state() {
|
||||
return {
|
||||
count: 0,
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
inc() {
|
||||
this.count++
|
||||
},
|
||||
},
|
||||
persist: true,
|
||||
})
|
||||
55
src/styles/main.css
Normal file
55
src/styles/main.css
Normal file
@ -0,0 +1,55 @@
|
||||
@import './md.css';
|
||||
|
||||
|
||||
html.dark {
|
||||
background: #100c2a !important;
|
||||
}
|
||||
|
||||
.prose {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
@apply bg-blue-700 bg-opacity-75;
|
||||
|
||||
background: repeating-linear-gradient(90deg, #00dc82 0, #34cdfe 50%, #0047e1);
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 全局滚动条
|
||||
*/
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 11px;
|
||||
background-color: rgb(246, 247, 248);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(233, 236, 239);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgb(246, 247, 248);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar,
|
||||
html.dark ::-webkit-scrollbar-track {
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: #343a40;
|
||||
}
|
||||
83
src/styles/md.css
Normal file
83
src/styles/md.css
Normal file
@ -0,0 +1,83 @@
|
||||
@import 'prism-theme-vars/base.css';
|
||||
|
||||
.prose {
|
||||
--prism-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
|
||||
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
html:not(.dark) {
|
||||
--prism-foreground: #393a34;
|
||||
--prism-background: #f8f8f8;
|
||||
|
||||
--prism-comment: #868e96;
|
||||
--prism-namespace: #444444;
|
||||
--prism-string: #bc8671;
|
||||
--prism-punctuation: #80817d;
|
||||
--prism-literal: #36acaa;
|
||||
--prism-keyword: #d73a49;
|
||||
--prism-function: #0c4c7d;
|
||||
--prism-deleted: #9a050f;
|
||||
--prism-class: #2b91af;
|
||||
--prism-builtin: #800000;
|
||||
--prism-property: #ce9178;
|
||||
--prism-regex: #ad502b;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--prism-foreground: #d4d4d4;
|
||||
--prism-background: #1e1e1e;
|
||||
|
||||
--prism-namespace: #aaaaaa;
|
||||
--prism-comment: #868e96;
|
||||
--prism-namespace: #444444;
|
||||
--prism-string: #ce9178;
|
||||
--prism-punctuation: #d4d4d4;
|
||||
--prism-literal: #36acaa;
|
||||
--prism-keyword: #0ca678;
|
||||
--prism-function: #dcdcaa;
|
||||
--prism-deleted: #9a050f;
|
||||
--prism-class: #4ec9b0;
|
||||
--prism-builtin: #d16969;
|
||||
--prism-property: #ce9178;
|
||||
--prism-regex: #ad502b;
|
||||
}
|
||||
ol {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.prose blockquote p:first-of-type::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
color: #495057;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.prose-sm p {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html.dark .prose blockquote {
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .prose pre {
|
||||
color: #f8f9fa;
|
||||
background: #2a2f33;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
font-style: normal;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
7
src/test/__snapshots__/index.test.ts.snap
Normal file
7
src/test/__snapshots__/index.test.ts.snap
Normal file
@ -0,0 +1,7 @@
|
||||
// Vitest Snapshot v1
|
||||
|
||||
exports[`suite name > snapshot 1`] = `
|
||||
{
|
||||
"foo": "bar",
|
||||
}
|
||||
`;
|
||||
16
src/test/index.test.ts
Normal file
16
src/test/index.test.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { assert, describe, expect, it } from 'vitest'
|
||||
|
||||
describe('suite name', () => {
|
||||
it('foo', () => {
|
||||
expect(1 + 1).toEqual(2)
|
||||
expect(true).to.be.true
|
||||
})
|
||||
|
||||
it('bar', () => {
|
||||
assert.equal(Math.sqrt(4), 2)
|
||||
})
|
||||
|
||||
it('snapshot', () => {
|
||||
expect({ foo: 'bar' }).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
32
tsconfig.json
Normal file
32
tsconfig.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"sourceMap": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"jsxImportSource": "vue",
|
||||
"esModuleInterop": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"resolveJsonModule": true,
|
||||
"moduleResolution": "node",
|
||||
"useDefineForClassFields": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["src/*"],
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"srcipts",
|
||||
"presets",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"./vite.config.ts"
|
||||
],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
24
uno.config.ts
Normal file
24
uno.config.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import {
|
||||
defineConfig,
|
||||
presetAttributify,
|
||||
presetIcons,
|
||||
presetTypography,
|
||||
presetUno,
|
||||
transformerVariantGroup,
|
||||
transformerDirectives,
|
||||
} from 'unocss'
|
||||
|
||||
import presetAutoprefixer from './presets/autoprefixer'
|
||||
|
||||
export default defineConfig({
|
||||
transformers: [transformerDirectives(), transformerVariantGroup()],
|
||||
presets: [
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
autoInstall: true,
|
||||
}),
|
||||
presetUno(),
|
||||
presetTypography(),
|
||||
presetAutoprefixer(),
|
||||
],
|
||||
})
|
||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import Tov from './presets'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [Tov()],
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user