Compare commits
No commits in common. "main" and "v3.9.7" have entirely different histories.
@ -1,4 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
not ie 11
|
|
@ -1,21 +0,0 @@
|
|||||||
node_modules
|
|
||||||
.DS_Store
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
.eslintcache
|
|
||||||
report.html
|
|
||||||
|
|
||||||
yarn.lock
|
|
||||||
npm-debug.log*
|
|
||||||
.pnpm-error.log*
|
|
||||||
.pnpm-debug.log
|
|
||||||
tests/**/coverage/
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.idea
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
tsconfig.tsbuildinfo
|
|
3
.env
@ -1,5 +1,2 @@
|
|||||||
# 平台本地运行端口号
|
# 平台本地运行端口号
|
||||||
VITE_PORT = 8848
|
VITE_PORT = 8848
|
||||||
|
|
||||||
# 是否隐藏首页 隐藏 true 不隐藏 false (勿删除,VITE_HIDE_HOME只需在.env文件配置)
|
|
||||||
VITE_HIDE_HOME = false
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# 预发布也需要生产环境的行为
|
# 预发布也需要生产环境的行为
|
||||||
# https://cn.vitejs.dev/guide/env-and-mode.html#modes
|
# https://cn.vitejs.dev/guide/env-and-mode.html#modes
|
||||||
# NODE_ENV = development
|
NODE_ENV=production
|
||||||
|
|
||||||
VITE_PUBLIC_PATH = /
|
VITE_PUBLIC_PATH = /
|
||||||
|
|
||||||
@ -13,4 +13,4 @@ VITE_CDN = true
|
|||||||
# 是否启用gzip压缩或brotli压缩(分两种情况,删除原始文件和不删除原始文件)
|
# 是否启用gzip压缩或brotli压缩(分两种情况,删除原始文件和不删除原始文件)
|
||||||
# 压缩时不删除原始文件的配置:gzip、brotli、both(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
# 压缩时不删除原始文件的配置:gzip、brotli、both(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
||||||
# 压缩时删除原始文件的配置:gzip-clear、brotli-clear、both-clear(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
# 压缩时删除原始文件的配置:gzip-clear、brotli-clear、both-clear(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
||||||
VITE_COMPRESSION = "none"
|
VITE_COMPRESSION = "both-clear"
|
||||||
|
11
.eslintignore
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
public
|
||||||
|
dist
|
||||||
|
*.d.ts
|
||||||
|
/src/assets
|
||||||
|
package.json
|
||||||
|
.eslintrc.js
|
||||||
|
.prettierrc.js
|
||||||
|
commitlint.config.js
|
||||||
|
postcss.config.js
|
||||||
|
tailwind.config.js
|
||||||
|
stylelint.config.js
|
120
.eslintrc.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
// Ref sugar (take 2)
|
||||||
|
$: "readonly",
|
||||||
|
$$: "readonly",
|
||||||
|
$ref: "readonly",
|
||||||
|
$shallowRef: "readonly",
|
||||||
|
$computed: "readonly",
|
||||||
|
|
||||||
|
// index.d.ts
|
||||||
|
// global.d.ts
|
||||||
|
Fn: "readonly",
|
||||||
|
PromiseFn: "readonly",
|
||||||
|
RefType: "readonly",
|
||||||
|
LabelValueOptions: "readonly",
|
||||||
|
EmitType: "readonly",
|
||||||
|
TargetContext: "readonly",
|
||||||
|
ComponentElRef: "readonly",
|
||||||
|
ComponentRef: "readonly",
|
||||||
|
ElRef: "readonly",
|
||||||
|
global: "readonly",
|
||||||
|
ForDataType: "readonly",
|
||||||
|
ComponentRoutes: "readonly",
|
||||||
|
|
||||||
|
// script setup
|
||||||
|
defineProps: "readonly",
|
||||||
|
defineEmits: "readonly",
|
||||||
|
defineExpose: "readonly",
|
||||||
|
withDefaults: "readonly"
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended",
|
||||||
|
"@vue/typescript/recommended",
|
||||||
|
"@vue/prettier",
|
||||||
|
"@vue/eslint-config-typescript"
|
||||||
|
],
|
||||||
|
parser: "vue-eslint-parser",
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
sourceType: "module",
|
||||||
|
jsxPragma: "React",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ["*.ts", "*.vue"],
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ["*.vue"],
|
||||||
|
parser: "vue-eslint-parser",
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
extraFileExtensions: [".vue"],
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
"vue/no-v-html": "off",
|
||||||
|
"vue/require-default-prop": "off",
|
||||||
|
"vue/require-explicit-emits": "off",
|
||||||
|
"vue/multi-word-component-names": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "off", // any
|
||||||
|
"no-debugger": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off", // setup()
|
||||||
|
"@typescript-eslint/ban-types": "off",
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"@typescript-eslint/no-empty-function": "off",
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "off",
|
||||||
|
"vue/html-self-closing": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
html: {
|
||||||
|
void: "always",
|
||||||
|
normal: "always",
|
||||||
|
component: "always"
|
||||||
|
},
|
||||||
|
svg: "always",
|
||||||
|
math: "always"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"prettier/prettier": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
endOfLine: "auto"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
1
.gitignore
vendored
@ -5,7 +5,6 @@ dist-ssr
|
|||||||
*.local
|
*.local
|
||||||
.eslintcache
|
.eslintcache
|
||||||
report.html
|
report.html
|
||||||
vite.config.*.timestamp*
|
|
||||||
|
|
||||||
yarn.lock
|
yarn.lock
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
|
@ -3,6 +3,4 @@
|
|||||||
# shellcheck source=./_/husky.sh
|
# shellcheck source=./_/husky.sh
|
||||||
. "$(dirname "$0")/_/husky.sh"
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
PATH="/usr/local/bin:$PATH"
|
npx --no-install commitlint --edit "$1"
|
||||||
|
|
||||||
npx --no-install commitlint --edit "$1"
|
|
||||||
|
8
.husky/lintstagedrc.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
module.exports = {
|
||||||
|
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
|
||||||
|
"{!(package)*.json}": ["prettier --write--parser json"],
|
||||||
|
"package.json": ["prettier --write"],
|
||||||
|
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
|
||||||
|
"*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
|
||||||
|
"*.md": ["prettier --write"]
|
||||||
|
};
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
[ -n "$CI" ] && exit 0
|
[ -n "$CI" ] && exit 0
|
||||||
|
|
||||||
PATH="/usr/local/bin:$PATH"
|
# Format and submit code according to lintstagedrc.js configuration
|
||||||
|
npm run lint:lint-staged
|
||||||
|
|
||||||
# Perform lint check on files in the staging area through .lintstagedrc configuration
|
npm run lint:pretty
|
||||||
pnpm exec lint-staged
|
|
||||||
|
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"*.{js,jsx,ts,tsx}": [
|
|
||||||
"prettier --cache --ignore-unknown --write",
|
|
||||||
"eslint --cache --fix"
|
|
||||||
],
|
|
||||||
"{!(package)*.json,*.code-snippets,.!({browserslist,npm,nvm})*rc}": [
|
|
||||||
"prettier --cache --write--parser json"
|
|
||||||
],
|
|
||||||
"package.json": ["prettier --cache --write"],
|
|
||||||
"*.vue": [
|
|
||||||
"prettier --write",
|
|
||||||
"eslint --cache --fix",
|
|
||||||
"stylelint --fix --allow-empty-input"
|
|
||||||
],
|
|
||||||
"*.{css,scss,html}": [
|
|
||||||
"prettier --cache --ignore-unknown --write",
|
|
||||||
"stylelint --fix --allow-empty-input"
|
|
||||||
],
|
|
||||||
"*.md": ["prettier --cache --ignore-unknown --write"]
|
|
||||||
}
|
|
5
.npmrc
@ -1,4 +1,3 @@
|
|||||||
shell-emulator=true
|
|
||||||
shamefully-hoist=true
|
shamefully-hoist=true
|
||||||
enable-pre-post-scripts=false
|
strict-peer-dependencies=false
|
||||||
strict-peer-dependencies=false
|
shell-emulator=true
|
@ -1,7 +1,4 @@
|
|||||||
// @ts-check
|
module.exports = {
|
||||||
|
|
||||||
/** @type {import("prettier").Config} */
|
|
||||||
export default {
|
|
||||||
bracketSpacing: true,
|
bracketSpacing: true,
|
||||||
singleQuote: false,
|
singleQuote: false,
|
||||||
arrowParens: "avoid",
|
arrowParens: "avoid",
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
/dist/*
|
/dist/*
|
||||||
/public/*
|
/public/*
|
||||||
public/*
|
public/*
|
||||||
src/style/reset.scss
|
|
4
.vscode/extensions.json
vendored
@ -1,10 +1,8 @@
|
|||||||
{
|
{
|
||||||
"recommendations": [
|
"recommendations": [
|
||||||
"christian-kohler.path-intellisense",
|
"christian-kohler.path-intellisense",
|
||||||
"warmthsea.vscode-custom-code-color",
|
|
||||||
"vscode-icons-team.vscode-icons",
|
"vscode-icons-team.vscode-icons",
|
||||||
"davidanson.vscode-markdownlint",
|
"davidanson.vscode-markdownlint",
|
||||||
"ms-azuretools.vscode-docker",
|
|
||||||
"stylelint.vscode-stylelint",
|
"stylelint.vscode-stylelint",
|
||||||
"bradlc.vscode-tailwindcss",
|
"bradlc.vscode-tailwindcss",
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
@ -16,4 +14,4 @@
|
|||||||
"antfu.iconify",
|
"antfu.iconify",
|
||||||
"Vue.volar"
|
"Vue.volar"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
18
.vscode/settings.json
vendored
@ -25,19 +25,7 @@
|
|||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
},
|
},
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
"source.fixAll.eslint": "explicit"
|
"source.fixAll.eslint": true
|
||||||
},
|
},
|
||||||
"iconify.excludes": [
|
"iconify.excludes": ["el"]
|
||||||
"el"
|
}
|
||||||
],
|
|
||||||
"vscodeCustomCodeColor.highlightValue": [
|
|
||||||
"v-loading",
|
|
||||||
"v-auth",
|
|
||||||
"v-copy",
|
|
||||||
"v-longpress",
|
|
||||||
"v-optimize",
|
|
||||||
"v-perms",
|
|
||||||
"v-ripple"
|
|
||||||
],
|
|
||||||
"vscodeCustomCodeColor.highlightValueColor": "#b392f0",
|
|
||||||
}
|
|
||||||
|
12
.vscode/vue3.0.code-snippets
vendored
@ -1,19 +1,19 @@
|
|||||||
{
|
{
|
||||||
"Vue3.0快速生成模板": {
|
"Vue3.0快速生成模板": {
|
||||||
"scope": "vue",
|
|
||||||
"prefix": "Vue3.0",
|
"prefix": "Vue3.0",
|
||||||
"body": [
|
"body": [
|
||||||
"<template>",
|
"<template>",
|
||||||
"\t<div>test</div>",
|
"\t<div>\n",
|
||||||
|
"\t</div>",
|
||||||
"</template>\n",
|
"</template>\n",
|
||||||
"<script lang='ts'>",
|
"<script lang='ts'>",
|
||||||
"export default {",
|
"export default {",
|
||||||
"\tsetup() {",
|
"\tsetup(){",
|
||||||
"\t\treturn {}",
|
"\t\treturn{\n\n\t\t}",
|
||||||
"\t}",
|
"\t},",
|
||||||
"}",
|
"}",
|
||||||
"</script>\n",
|
"</script>\n",
|
||||||
"<style lang='scss' scoped>\n",
|
"<style scoped>\n",
|
||||||
"</style>",
|
"</style>",
|
||||||
"$2"
|
"$2"
|
||||||
],
|
],
|
||||||
|
6
.vscode/vue3.2.code-snippets
vendored
@ -1,14 +1,14 @@
|
|||||||
{
|
{
|
||||||
"Vue3.2+快速生成模板": {
|
"Vue3.2+快速生成模板": {
|
||||||
"scope": "vue",
|
|
||||||
"prefix": "Vue3.2+",
|
"prefix": "Vue3.2+",
|
||||||
"body": [
|
"body": [
|
||||||
"<script setup lang='ts'>",
|
"<script setup lang='ts'>",
|
||||||
"</script>\n",
|
"</script>\n",
|
||||||
"<template>",
|
"<template>",
|
||||||
"\t<div>test</div>",
|
"\t<div>\n",
|
||||||
|
"\t</div>",
|
||||||
"</template>\n",
|
"</template>\n",
|
||||||
"<style lang='scss' scoped>\n",
|
"<style scoped>\n",
|
||||||
"</style>",
|
"</style>",
|
||||||
"$2"
|
"$2"
|
||||||
],
|
],
|
||||||
|
20
.vscode/vue3.3.code-snippets
vendored
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"Vue3.3+defineOptions快速生成模板": {
|
|
||||||
"scope": "vue",
|
|
||||||
"prefix": "Vue3.3+",
|
|
||||||
"body": [
|
|
||||||
"<script setup lang='ts'>",
|
|
||||||
"defineOptions({",
|
|
||||||
"\tname: ''",
|
|
||||||
"})",
|
|
||||||
"</script>\n",
|
|
||||||
"<template>",
|
|
||||||
"\t<div>test</div>",
|
|
||||||
"</template>\n",
|
|
||||||
"<style lang='scss' scoped>\n",
|
|
||||||
"</style>",
|
|
||||||
"$2"
|
|
||||||
],
|
|
||||||
"description": "Vue3.3+defineOptions快速生成模板"
|
|
||||||
}
|
|
||||||
}
|
|
20
Dockerfile
@ -1,20 +0,0 @@
|
|||||||
FROM node:20-alpine as build-stage
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
RUN corepack enable
|
|
||||||
RUN corepack prepare pnpm@latest --activate
|
|
||||||
|
|
||||||
RUN npm config set registry https://registry.npmmirror.com
|
|
||||||
|
|
||||||
COPY .npmrc package.json pnpm-lock.yaml ./
|
|
||||||
RUN pnpm install --frozen-lockfile
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
RUN pnpm build
|
|
||||||
|
|
||||||
FROM nginx:stable-alpine as production-stage
|
|
||||||
|
|
||||||
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
2
LICENSE
@ -1,6 +1,6 @@
|
|||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2020-present, pure-admin
|
Copyright (c) 2022 啝裳
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
@ -1,47 +1,47 @@
|
|||||||
<h1>vue-pure-admin Lite Edition(no i18n version)</h1>
|
<h1>vue-pure-admin Lite Edition(no i18n version)</h1>
|
||||||
|
|
||||||
[](LICENSE)
|
[](LICENSE)
|
||||||
|
|
||||||
**English** | [中文](./README.md)
|
**English** | [中文](./README.md)
|
||||||
|
|
||||||
## Introduce
|
## Introduce
|
||||||
|
|
||||||
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
|
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
|
||||||
|
|
||||||
## `js` version
|
## Supporting Video
|
||||||
|
|
||||||
[Click me to view js version](https://pure-admin.cn/pages/js/)
|
- [Click Watch Tutorial](https://www.bilibili.com/video/BV1534y1S7HV)
|
||||||
|
- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
|
|
||||||
## `max` version
|
## Docs
|
||||||
|
|
||||||
[Click me to view the max version](https://pure-admin.cn/pages/max/)
|
- [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
|
- [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)
|
||||||
|
|
||||||
## Supporting video
|
## Usage
|
||||||
|
|
||||||
[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)
|
### Installation dependencies
|
||||||
[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
|
||||||
|
|
||||||
## Nanny-level documents
|
pnpm install
|
||||||
|
|
||||||
[Click me to view vue-pure-admin documentation](https://pure-admin.cn/)
|
### Install a package
|
||||||
[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
|
|
||||||
|
|
||||||
## Quality service, software outsourcing, sponsorship support
|
pnpm add packageName
|
||||||
|
|
||||||
[Click me to view details](https://pure-admin.cn/pages/service/)
|
### Uninstall a package
|
||||||
|
|
||||||
## Preview
|
pnpm remove packageName
|
||||||
|
|
||||||
[Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
|
I think you should fork the project first to develop, so that you can pull the update synchronously when I update! ! !
|
||||||
|
|
||||||
## Maintainer
|
## Supporting video tutorial
|
||||||
|
|
||||||
[xiaoxian521](https://github.com/xiaoxian521)
|
bilibili: https://www.bilibili.com/video/BV1534y1S7HV/
|
||||||
|
|
||||||
## ⚠️ Attention
|
## ⚠️ Attention
|
||||||
|
|
||||||
The Lite version does not accept any issues and prs. If you have any questions, please go to the full version [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) to mention, thank you!
|
- The Lite version does not accept any issues and prs. If you have any questions, please go to the full version https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose to mention, thank you! ! !
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[MIT © 2020-present, pure-admin](./LICENSE)
|
In principle, no fees and copyrights are charged, and you can use it with confidence, but if you need secondary open source, please contact the author for permission!
|
||||||
|
64
README.md
@ -1,51 +1,63 @@
|
|||||||
<h1>vue-pure-admin精简版(非国际化版本)</h1>
|
<h1>vue-pure-admin精简版(非国际化版本)</h1>
|
||||||
|
|
||||||
[](LICENSE)
|
[](LICENSE)
|
||||||
|
|
||||||
**中文** | [English](./README.en-US.md)
|
**中文** | [English](./README.en-US.md)
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`,并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后,打包大小低于 `350kb`
|
精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`,并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后,打包大小低于 `350kb`
|
||||||
|
|
||||||
## 版本选择
|
## 版本选择
|
||||||
|
|
||||||
当前是非国际化版本,如果您需要国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
|
当前是非国际化版本哦,如果您需要国际化版本 [请点击](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
|
||||||
|
|
||||||
## `js` 版本
|
|
||||||
|
|
||||||
[点我查看 js 版本](https://pure-admin.cn/pages/js/)
|
|
||||||
|
|
||||||
## `max` 版本
|
|
||||||
|
|
||||||
[点我查看 max 版本](https://pure-admin.cn/pages/max/)
|
|
||||||
|
|
||||||
## 配套视频
|
## 配套视频
|
||||||
|
|
||||||
[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
- [点我查看教程](https://www.bilibili.com/video/BV1534y1S7HV)
|
||||||
[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
|
|
||||||
## 配套保姆级文档
|
## 配套文档
|
||||||
|
|
||||||
[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)
|
- [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
|
- [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
|
||||||
|
|
||||||
## 优质服务、软件外包、赞助支持
|
|
||||||
|
|
||||||
[点我查看详情](https://pure-admin.cn/pages/service/)
|
|
||||||
|
|
||||||
## 预览
|
|
||||||
|
|
||||||
[查看预览](https://pure-admin-thin.netlify.app/#/login)
|
|
||||||
|
|
||||||
## 维护者
|
## 维护者
|
||||||
|
|
||||||
[xiaoxian521](https://github.com/xiaoxian521)
|
[xiaoxian521](https://github.com/xiaoxian521)
|
||||||
|
|
||||||
|
## 支持
|
||||||
|
|
||||||
|
如果你觉得这个项目对您有帮助,可以帮作者买一杯果汁 🍹 表示支持
|
||||||
|
|
||||||
|
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />
|
||||||
|
|
||||||
|
## `QQ` 交流群
|
||||||
|
|
||||||
|
[点击去加入](https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4)
|
||||||
|
|
||||||
|
## 用法
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
### 安装一个包
|
||||||
|
|
||||||
|
pnpm add 包名
|
||||||
|
|
||||||
|
### 卸载一个包
|
||||||
|
|
||||||
|
pnpm remove 包名
|
||||||
|
|
||||||
|
我认为你应该先 `fork` 项目去开发,以便我更新时您可以同步拉取更新!!!
|
||||||
|
|
||||||
## ⚠️ 注意
|
## ⚠️ 注意
|
||||||
|
|
||||||
精简版不接受任何 `issues` 和 `pr`,如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提,谢谢!
|
- 精简版不接受任何 `issues` 和 `pr`,如果有问题请到完整版 [issues](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 去提,谢谢!!!
|
||||||
|
|
||||||
## 许可证
|
## 许可证
|
||||||
|
|
||||||
[MIT © 2020-present, pure-admin](./LICENSE)
|
原则上不收取任何费用及版权,可以放心使用,不过如需二次开源(比如用此平台二次开发并开源)请联系作者获取许可!
|
||||||
|
|
||||||
|
[MIT © xiaoxian521-2020](./LICENSE)
|
||||||
|
@ -3,6 +3,7 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
|
|||||||
/**
|
/**
|
||||||
* @description 打包时采用`cdn`模式,仅限外网使用(默认不采用,如果需要采用cdn模式,请在 .env.production 文件,将 VITE_CDN 设置成true)
|
* @description 打包时采用`cdn`模式,仅限外网使用(默认不采用,如果需要采用cdn模式,请在 .env.production 文件,将 VITE_CDN 设置成true)
|
||||||
* 平台采用国内cdn:https://www.bootcdn.cn,当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
|
* 平台采用国内cdn:https://www.bootcdn.cn,当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
|
||||||
|
* 提醒:mockjs不能用cdn模式引入,会报错。正确的方式是,生产环境删除mockjs,使用真实的后端请求
|
||||||
* 注意:上面提到的仅限外网使用也不是完全肯定的,如果你们公司内网部署的有相关js、css文件,也可以将下面配置对应改一下,整一套内网版cdn
|
* 注意:上面提到的仅限外网使用也不是完全肯定的,如果你们公司内网部署的有相关js、css文件,也可以将下面配置对应改一下,整一套内网版cdn
|
||||||
*/
|
*/
|
||||||
export const cdn = importToCDN({
|
export const cdn = importToCDN({
|
||||||
|
30
build/index.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
/** 处理环境变量 */
|
||||||
|
const warpperEnv = (envConf: Recordable): ViteEnv => {
|
||||||
|
/** 此处为默认值 */
|
||||||
|
const ret: ViteEnv = {
|
||||||
|
VITE_PORT: 8848,
|
||||||
|
VITE_PUBLIC_PATH: "",
|
||||||
|
VITE_ROUTER_HISTORY: "",
|
||||||
|
VITE_CDN: false,
|
||||||
|
VITE_COMPRESSION: "none"
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const envName of Object.keys(envConf)) {
|
||||||
|
let realName = envConf[envName].replace(/\\n/g, "\n");
|
||||||
|
realName =
|
||||||
|
realName === "true" ? true : realName === "false" ? false : realName;
|
||||||
|
|
||||||
|
if (envName === "VITE_PORT") {
|
||||||
|
realName = Number(realName);
|
||||||
|
}
|
||||||
|
ret[envName] = realName;
|
||||||
|
if (typeof realName === "string") {
|
||||||
|
process.env[envName] = realName;
|
||||||
|
} else if (typeof realName === "object") {
|
||||||
|
process.env[envName] = JSON.stringify(realName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { warpperEnv };
|
@ -1,21 +1,10 @@
|
|||||||
import type { Plugin } from "vite";
|
import type { Plugin } from "vite";
|
||||||
import gradient from "gradient-string";
|
import dayjs, { Dayjs } from "dayjs";
|
||||||
import { getPackageSize } from "./utils";
|
|
||||||
import dayjs, { type Dayjs } from "dayjs";
|
|
||||||
import duration from "dayjs/plugin/duration";
|
import duration from "dayjs/plugin/duration";
|
||||||
import boxen, { type Options as BoxenOptions } from "boxen";
|
import { green, blue, bold } from "picocolors";
|
||||||
|
import { getPackageSize } from "@pureadmin/utils";
|
||||||
dayjs.extend(duration);
|
dayjs.extend(duration);
|
||||||
|
|
||||||
const welcomeMessage = gradient(["cyan", "magenta"]).multiline(
|
|
||||||
`您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.cn\nhttps://pure-admin-utils.netlify.app`
|
|
||||||
);
|
|
||||||
|
|
||||||
const boxenOptions: BoxenOptions = {
|
|
||||||
padding: 0.5,
|
|
||||||
borderColor: "cyan",
|
|
||||||
borderStyle: "round"
|
|
||||||
};
|
|
||||||
|
|
||||||
export function viteBuildInfo(): Plugin {
|
export function viteBuildInfo(): Plugin {
|
||||||
let config: { command: string };
|
let config: { command: string };
|
||||||
let startTime: Dayjs;
|
let startTime: Dayjs;
|
||||||
@ -28,7 +17,15 @@ export function viteBuildInfo(): Plugin {
|
|||||||
outDir = resolvedConfig.build?.outDir ?? "dist";
|
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||||
},
|
},
|
||||||
buildStart() {
|
buildStart() {
|
||||||
console.log(boxen(welcomeMessage, boxenOptions));
|
console.log(
|
||||||
|
bold(
|
||||||
|
green(
|
||||||
|
`👏欢迎使用${blue(
|
||||||
|
"[vue-pure-admin]"
|
||||||
|
)},如果您感觉不错,记得点击后面链接给个star哦💖 https://github.com/xiaoxian521/vue-pure-admin`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
if (config.command === "build") {
|
if (config.command === "build") {
|
||||||
startTime = dayjs(new Date());
|
startTime = dayjs(new Date());
|
||||||
}
|
}
|
||||||
@ -40,13 +37,12 @@ export function viteBuildInfo(): Plugin {
|
|||||||
folder: outDir,
|
folder: outDir,
|
||||||
callback: (size: string) => {
|
callback: (size: string) => {
|
||||||
console.log(
|
console.log(
|
||||||
boxen(
|
bold(
|
||||||
gradient(["cyan", "magenta"]).multiline(
|
green(
|
||||||
`🎉 恭喜打包完成(总用时${dayjs
|
`🎉恭喜打包完成(总用时${dayjs
|
||||||
.duration(endTime.diff(startTime))
|
.duration(endTime.diff(startTime))
|
||||||
.format("mm分ss秒")},打包后的大小为${size})`
|
.format("mm分ss秒")},打包后的大小为${size})`
|
||||||
),
|
)
|
||||||
boxenOptions
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -10,20 +10,22 @@ const include = [
|
|||||||
"dayjs",
|
"dayjs",
|
||||||
"axios",
|
"axios",
|
||||||
"pinia",
|
"pinia",
|
||||||
"vue-types",
|
"echarts",
|
||||||
"js-cookie",
|
"js-cookie",
|
||||||
"vue-tippy",
|
|
||||||
"pinyin-pro",
|
|
||||||
"sortablejs",
|
|
||||||
"@vueuse/core",
|
"@vueuse/core",
|
||||||
"@pureadmin/utils",
|
"@pureadmin/utils",
|
||||||
"responsive-storage"
|
"responsive-storage",
|
||||||
|
"element-resize-detector"
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 在预构建中强制排除的依赖项
|
* 在预构建中强制排除的依赖项
|
||||||
* 温馨提示:平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
|
* 温馨提示:所有以 `@iconify-icons/` 开头引入的的本地图标模块,都应该加入到下面的 `exclude` 里,因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
|
||||||
*/
|
*/
|
||||||
const exclude = ["@iconify/json"];
|
const exclude = [
|
||||||
|
"@iconify-icons/ep",
|
||||||
|
"@iconify-icons/ri",
|
||||||
|
"@pureadmin/theme/dist/browser-utils"
|
||||||
|
];
|
||||||
|
|
||||||
export { include, exclude };
|
export { include, exclude };
|
||||||
|
@ -2,65 +2,57 @@ import { cdn } from "./cdn";
|
|||||||
import vue from "@vitejs/plugin-vue";
|
import vue from "@vitejs/plugin-vue";
|
||||||
import { viteBuildInfo } from "./info";
|
import { viteBuildInfo } from "./info";
|
||||||
import svgLoader from "vite-svg-loader";
|
import svgLoader from "vite-svg-loader";
|
||||||
import Icons from "unplugin-icons/vite";
|
|
||||||
import type { PluginOption } from "vite";
|
|
||||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||||
import tailwindcss from "@tailwindcss/vite";
|
import { viteMockServe } from "vite-plugin-mock";
|
||||||
import { configCompressPlugin } from "./compress";
|
import { configCompressPlugin } from "./compress";
|
||||||
import removeNoMatch from "vite-plugin-router-warn";
|
// import ElementPlus from "unplugin-element-plus/vite";
|
||||||
import { visualizer } from "rollup-plugin-visualizer";
|
import { visualizer } from "rollup-plugin-visualizer";
|
||||||
import removeConsole from "vite-plugin-remove-console";
|
import removeConsole from "vite-plugin-remove-console";
|
||||||
import { codeInspectorPlugin } from "code-inspector-plugin";
|
import themePreprocessorPlugin from "@pureadmin/theme";
|
||||||
import { vitePluginFakeServer } from "vite-plugin-fake-server";
|
import DefineOptions from "unplugin-vue-define-options/vite";
|
||||||
|
import { genScssMultipleScopeVars } from "../src/layout/theme";
|
||||||
|
|
||||||
export function getPluginsList(
|
export function getPluginsList(
|
||||||
|
command: string,
|
||||||
VITE_CDN: boolean,
|
VITE_CDN: boolean,
|
||||||
VITE_COMPRESSION: ViteCompression
|
VITE_COMPRESSION: ViteCompression
|
||||||
): PluginOption[] {
|
) {
|
||||||
|
const prodMock = true;
|
||||||
const lifecycle = process.env.npm_lifecycle_event;
|
const lifecycle = process.env.npm_lifecycle_event;
|
||||||
return [
|
return [
|
||||||
tailwindcss(),
|
|
||||||
vue(),
|
vue(),
|
||||||
// jsx、tsx语法支持
|
// jsx、tsx语法支持
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
/**
|
VITE_CDN ? cdn : null,
|
||||||
* 在页面上按住组合键时,鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息,点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
|
configCompressPlugin(VITE_COMPRESSION),
|
||||||
* Mac 默认组合键 Option + Shift
|
DefineOptions(),
|
||||||
* Windows 默认组合键 Alt + Shift
|
// 线上环境删除console
|
||||||
* 更多用法看 https://inspector.fe-dev.cn/guide/start.html
|
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
|
||||||
*/
|
|
||||||
codeInspectorPlugin({
|
|
||||||
bundler: "vite",
|
|
||||||
hideConsole: true
|
|
||||||
}),
|
|
||||||
viteBuildInfo(),
|
viteBuildInfo(),
|
||||||
/**
|
// 自定义主题
|
||||||
* 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
|
themePreprocessorPlugin({
|
||||||
* 非必要具体看 https://github.com/vuejs/router/issues/521 和 https://github.com/vuejs/router/issues/359
|
scss: {
|
||||||
* vite-plugin-router-warn只在开发环境下启用,只处理vue-router文件并且只在服务启动或重启时运行一次,性能消耗可忽略不计
|
multipleScopeVars: genScssMultipleScopeVars(),
|
||||||
*/
|
extract: true
|
||||||
removeNoMatch(),
|
}
|
||||||
// mock支持
|
|
||||||
vitePluginFakeServer({
|
|
||||||
logger: false,
|
|
||||||
include: "mock",
|
|
||||||
infixName: false,
|
|
||||||
enableProd: true
|
|
||||||
}),
|
}),
|
||||||
// svg组件化支持
|
// svg组件化支持
|
||||||
svgLoader(),
|
svgLoader(),
|
||||||
// 自动按需加载图标
|
// ElementPlus({}),
|
||||||
Icons({
|
// mock支持
|
||||||
compiler: "vue3",
|
viteMockServe({
|
||||||
scale: 1
|
mockPath: "mock",
|
||||||
|
localEnabled: command === "serve",
|
||||||
|
prodEnabled: command !== "serve" && prodMock,
|
||||||
|
injectCode: `
|
||||||
|
import { setupProdMockServer } from './mockProdServer';
|
||||||
|
setupProdMockServer();
|
||||||
|
`,
|
||||||
|
logger: false
|
||||||
}),
|
}),
|
||||||
VITE_CDN ? cdn : null,
|
|
||||||
configCompressPlugin(VITE_COMPRESSION),
|
|
||||||
// 线上环境删除console
|
|
||||||
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
|
|
||||||
// 打包分析
|
// 打包分析
|
||||||
lifecycle === "report"
|
lifecycle === "report"
|
||||||
? visualizer({ open: true, brotliSize: true, filename: "report.html" })
|
? visualizer({ open: true, brotliSize: true, filename: "report.html" })
|
||||||
: (null as any)
|
: null
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
110
build/utils.ts
@ -1,110 +0,0 @@
|
|||||||
import dayjs from "dayjs";
|
|
||||||
import { readdir, stat } from "node:fs";
|
|
||||||
import { fileURLToPath } from "node:url";
|
|
||||||
import { dirname, resolve } from "node:path";
|
|
||||||
import { sum, formatBytes } from "@pureadmin/utils";
|
|
||||||
import {
|
|
||||||
name,
|
|
||||||
version,
|
|
||||||
engines,
|
|
||||||
dependencies,
|
|
||||||
devDependencies
|
|
||||||
} from "../package.json";
|
|
||||||
|
|
||||||
/** 启动`node`进程时所在工作目录的绝对路径 */
|
|
||||||
const root: string = process.cwd();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 根据可选的路径片段生成一个新的绝对路径
|
|
||||||
* @param dir 路径片段,默认`build`
|
|
||||||
* @param metaUrl 模块的完整`url`,如果在`build`目录外调用必传`import.meta.url`
|
|
||||||
*/
|
|
||||||
const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
|
|
||||||
// 当前文件目录的绝对路径
|
|
||||||
const currentFileDir = dirname(fileURLToPath(metaUrl));
|
|
||||||
// build 目录的绝对路径
|
|
||||||
const buildDir = resolve(currentFileDir, "build");
|
|
||||||
// 解析的绝对路径
|
|
||||||
const resolvedPath = resolve(currentFileDir, dir);
|
|
||||||
// 检查解析的绝对路径是否在 build 目录内
|
|
||||||
if (resolvedPath.startsWith(buildDir)) {
|
|
||||||
// 在 build 目录内,返回当前文件路径
|
|
||||||
return fileURLToPath(metaUrl);
|
|
||||||
}
|
|
||||||
// 不在 build 目录内,返回解析后的绝对路径
|
|
||||||
return resolvedPath;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 设置别名 */
|
|
||||||
const alias: Record<string, string> = {
|
|
||||||
"@": pathResolve("../src"),
|
|
||||||
"@build": pathResolve()
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
|
|
||||||
const __APP_INFO__ = {
|
|
||||||
pkg: { name, version, engines, dependencies, devDependencies },
|
|
||||||
lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 处理环境变量 */
|
|
||||||
const wrapperEnv = (envConf: Recordable): ViteEnv => {
|
|
||||||
// 默认值
|
|
||||||
const ret: ViteEnv = {
|
|
||||||
VITE_PORT: 8848,
|
|
||||||
VITE_PUBLIC_PATH: "",
|
|
||||||
VITE_ROUTER_HISTORY: "",
|
|
||||||
VITE_CDN: false,
|
|
||||||
VITE_HIDE_HOME: "false",
|
|
||||||
VITE_COMPRESSION: "none"
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const envName of Object.keys(envConf)) {
|
|
||||||
let realName = envConf[envName].replace(/\\n/g, "\n");
|
|
||||||
realName =
|
|
||||||
realName === "true" ? true : realName === "false" ? false : realName;
|
|
||||||
|
|
||||||
if (envName === "VITE_PORT") {
|
|
||||||
realName = Number(realName);
|
|
||||||
}
|
|
||||||
ret[envName] = realName;
|
|
||||||
if (typeof realName === "string") {
|
|
||||||
process.env[envName] = realName;
|
|
||||||
} else if (typeof realName === "object") {
|
|
||||||
process.env[envName] = JSON.stringify(realName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
};
|
|
||||||
|
|
||||||
const fileListTotal: number[] = [];
|
|
||||||
|
|
||||||
/** 获取指定文件夹中所有文件的总大小 */
|
|
||||||
const getPackageSize = options => {
|
|
||||||
const { folder = "dist", callback, format = true } = options;
|
|
||||||
readdir(folder, (err, files: string[]) => {
|
|
||||||
if (err) throw err;
|
|
||||||
let count = 0;
|
|
||||||
const checkEnd = () => {
|
|
||||||
++count == files.length &&
|
|
||||||
callback(format ? formatBytes(sum(fileListTotal)) : sum(fileListTotal));
|
|
||||||
};
|
|
||||||
files.forEach((item: string) => {
|
|
||||||
stat(`${folder}/${item}`, async (err, stats) => {
|
|
||||||
if (err) throw err;
|
|
||||||
if (stats.isFile()) {
|
|
||||||
fileListTotal.push(stats.size);
|
|
||||||
checkEnd();
|
|
||||||
} else if (stats.isDirectory()) {
|
|
||||||
getPackageSize({
|
|
||||||
folder: `${folder}/${item}/`,
|
|
||||||
callback: checkEnd
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
files.length === 0 && callback(0);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export { root, pathResolve, alias, __APP_INFO__, wrapperEnv, getPackageSize };
|
|
@ -1,7 +1,4 @@
|
|||||||
// @ts-check
|
module.exports = {
|
||||||
|
|
||||||
/** @type {import("@commitlint/types").UserConfig} */
|
|
||||||
export default {
|
|
||||||
ignores: [commit => commit.includes("init")],
|
ignores: [commit => commit.includes("init")],
|
||||||
extends: ["@commitlint/config-conventional"],
|
extends: ["@commitlint/config-conventional"],
|
||||||
rules: {
|
rules: {
|
||||||
|
173
eslint.config.js
@ -1,173 +0,0 @@
|
|||||||
import js from "@eslint/js";
|
|
||||||
import tseslint from "typescript-eslint";
|
|
||||||
import pluginVue from "eslint-plugin-vue";
|
|
||||||
import * as parserVue from "vue-eslint-parser";
|
|
||||||
import configPrettier from "eslint-config-prettier";
|
|
||||||
import pluginPrettier from "eslint-plugin-prettier";
|
|
||||||
import { defineConfig, globalIgnores } from "eslint/config";
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores([
|
|
||||||
"**/.*",
|
|
||||||
"dist/*",
|
|
||||||
"*.d.ts",
|
|
||||||
"public/*",
|
|
||||||
"src/assets/**",
|
|
||||||
"src/**/iconfont/**"
|
|
||||||
]),
|
|
||||||
{
|
|
||||||
...js.configs.recommended,
|
|
||||||
languageOptions: {
|
|
||||||
globals: {
|
|
||||||
// types/index.d.ts
|
|
||||||
RefType: "readonly",
|
|
||||||
EmitType: "readonly",
|
|
||||||
TargetContext: "readonly",
|
|
||||||
ComponentRef: "readonly",
|
|
||||||
ElRef: "readonly",
|
|
||||||
ForDataType: "readonly",
|
|
||||||
AnyFunction: "readonly",
|
|
||||||
PropType: "readonly",
|
|
||||||
Writable: "readonly",
|
|
||||||
Nullable: "readonly",
|
|
||||||
NonNullable: "readonly",
|
|
||||||
Recordable: "readonly",
|
|
||||||
ReadonlyRecordable: "readonly",
|
|
||||||
Indexable: "readonly",
|
|
||||||
DeepPartial: "readonly",
|
|
||||||
Without: "readonly",
|
|
||||||
Exclusive: "readonly",
|
|
||||||
TimeoutHandle: "readonly",
|
|
||||||
IntervalHandle: "readonly",
|
|
||||||
Effect: "readonly",
|
|
||||||
ChangeEvent: "readonly",
|
|
||||||
WheelEvent: "readonly",
|
|
||||||
ImportMetaEnv: "readonly",
|
|
||||||
Fn: "readonly",
|
|
||||||
PromiseFn: "readonly",
|
|
||||||
ComponentElRef: "readonly",
|
|
||||||
parseInt: "readonly",
|
|
||||||
parseFloat: "readonly"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
prettier: pluginPrettier
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...configPrettier.rules,
|
|
||||||
...pluginPrettier.configs.recommended.rules,
|
|
||||||
"no-debugger": "off",
|
|
||||||
"no-unused-vars": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
argsIgnorePattern: "^_",
|
|
||||||
varsIgnorePattern: "^_"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"prettier/prettier": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
endOfLine: "auto"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
...tseslint.config({
|
|
||||||
extends: [...tseslint.configs.recommended],
|
|
||||||
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
|
|
||||||
rules: {
|
|
||||||
"@typescript-eslint/no-redeclare": "error",
|
|
||||||
"@typescript-eslint/ban-ts-comment": "off",
|
|
||||||
"@typescript-eslint/no-explicit-any": "off",
|
|
||||||
"@typescript-eslint/prefer-as-const": "warn",
|
|
||||||
"@typescript-eslint/no-empty-function": "off",
|
|
||||||
"@typescript-eslint/no-non-null-assertion": "off",
|
|
||||||
"@typescript-eslint/no-unused-expressions": "off",
|
|
||||||
"@typescript-eslint/no-unsafe-function-type": "off",
|
|
||||||
"@typescript-eslint/no-import-type-side-effects": "error",
|
|
||||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
|
||||||
"@typescript-eslint/consistent-type-imports": [
|
|
||||||
"error",
|
|
||||||
{ disallowTypeAnnotations: false, fixStyle: "inline-type-imports" }
|
|
||||||
],
|
|
||||||
"@typescript-eslint/prefer-literal-enum-member": [
|
|
||||||
"error",
|
|
||||||
{ allowBitwiseExpressions: true }
|
|
||||||
],
|
|
||||||
"@typescript-eslint/no-unused-vars": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
argsIgnorePattern: "^_",
|
|
||||||
varsIgnorePattern: "^_"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
files: ["**/*.d.ts"],
|
|
||||||
rules: {
|
|
||||||
"eslint-comments/no-unlimited-disable": "off",
|
|
||||||
"import/no-duplicates": "off",
|
|
||||||
"no-restricted-syntax": "off",
|
|
||||||
"unused-imports/no-unused-vars": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
files: ["**/*.?([cm])js"],
|
|
||||||
rules: {
|
|
||||||
"@typescript-eslint/no-require-imports": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
files: ["**/*.vue"],
|
|
||||||
languageOptions: {
|
|
||||||
globals: {
|
|
||||||
$: "readonly",
|
|
||||||
$$: "readonly",
|
|
||||||
$computed: "readonly",
|
|
||||||
$customRef: "readonly",
|
|
||||||
$ref: "readonly",
|
|
||||||
$shallowRef: "readonly",
|
|
||||||
$toRef: "readonly"
|
|
||||||
},
|
|
||||||
parser: parserVue,
|
|
||||||
parserOptions: {
|
|
||||||
ecmaFeatures: {
|
|
||||||
jsx: true
|
|
||||||
},
|
|
||||||
extraFileExtensions: [".vue"],
|
|
||||||
parser: tseslint.parser,
|
|
||||||
sourceType: "module"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
"@typescript-eslint": tseslint.plugin,
|
|
||||||
vue: pluginVue
|
|
||||||
},
|
|
||||||
processor: pluginVue.processors[".vue"],
|
|
||||||
rules: {
|
|
||||||
...pluginVue.configs.base.rules,
|
|
||||||
...pluginVue.configs.essential.rules,
|
|
||||||
...pluginVue.configs.recommended.rules,
|
|
||||||
"no-undef": "off",
|
|
||||||
"no-unused-vars": "off",
|
|
||||||
"vue/no-v-html": "off",
|
|
||||||
"vue/require-default-prop": "off",
|
|
||||||
"vue/require-explicit-emits": "off",
|
|
||||||
"vue/multi-word-component-names": "off",
|
|
||||||
"vue/no-setup-props-reactivity-loss": "off",
|
|
||||||
"vue/html-self-closing": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
html: {
|
|
||||||
void: "always",
|
|
||||||
normal: "always",
|
|
||||||
component: "always"
|
|
||||||
},
|
|
||||||
svg: "always",
|
|
||||||
math: "always"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
43
index.html
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@ -10,6 +10,9 @@
|
|||||||
/>
|
/>
|
||||||
<title>pure-admin-thin</title>
|
<title>pure-admin-thin</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
window.process = {};
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -18,54 +21,54 @@
|
|||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader,
|
.loader,
|
||||||
.loader::before,
|
.loader:before,
|
||||||
.loader::after {
|
.loader:after {
|
||||||
|
border-radius: 50%;
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
border-radius: 50%;
|
|
||||||
animation: load-animation 1.8s infinite ease-in-out;
|
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
|
animation: loadAnimation 1.8s infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader {
|
.loader {
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
margin: 80px auto;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #406eeb;
|
color: #406eeb;
|
||||||
|
font-size: 10px;
|
||||||
|
margin: 80px auto;
|
||||||
|
position: relative;
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
transform: translate(-50%, 0);
|
|
||||||
animation-delay: -0.16s;
|
animation-delay: -0.16s;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader::before,
|
.loader:before,
|
||||||
.loader::after {
|
.loader:after {
|
||||||
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
content: "";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader::before {
|
.loader:before {
|
||||||
left: -3.5em;
|
left: -3.5em;
|
||||||
animation-delay: -0.32s;
|
animation-delay: -0.32s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader::after {
|
.loader:after {
|
||||||
left: 3.5em;
|
left: 3.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes load-animation {
|
@keyframes loadAnimation {
|
||||||
0%,
|
0%,
|
||||||
80%,
|
80%,
|
||||||
100% {
|
100% {
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
// 模拟后端动态生成路由
|
// 模拟后端动态生成路由
|
||||||
import { defineFakeRoute } from "vite-plugin-fake-server/client";
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* roles:页面级别权限,这里模拟二种 "admin"、"common"
|
* roles:页面级别权限,这里模拟二种 "admin"、"common"
|
||||||
* admin:管理员角色
|
* admin:管理员角色
|
||||||
* common:普通角色
|
* common:普通角色
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const permissionRouter = {
|
const permissionRouter = {
|
||||||
path: "/permission",
|
path: "/permission",
|
||||||
meta: {
|
meta: {
|
||||||
title: "权限管理",
|
title: "权限管理",
|
||||||
icon: "ep:lollipop",
|
icon: "lollipop",
|
||||||
rank: 10
|
rank: 10
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
@ -23,41 +24,20 @@ const permissionRouter = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/permission/button",
|
path: "/permission/button/index",
|
||||||
|
name: "PermissionButton",
|
||||||
meta: {
|
meta: {
|
||||||
title: "按钮权限",
|
title: "按钮权限",
|
||||||
roles: ["admin", "common"]
|
roles: ["admin", "common"],
|
||||||
},
|
auths: ["btn_add", "btn_edit", "btn_delete"]
|
||||||
children: [
|
}
|
||||||
{
|
|
||||||
path: "/permission/button/router",
|
|
||||||
component: "permission/button/index",
|
|
||||||
name: "PermissionButtonRouter",
|
|
||||||
meta: {
|
|
||||||
title: "路由返回按钮权限",
|
|
||||||
auths: [
|
|
||||||
"permission:btn:add",
|
|
||||||
"permission:btn:edit",
|
|
||||||
"permission:btn:delete"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/permission/button/login",
|
|
||||||
component: "permission/button/perms",
|
|
||||||
name: "PermissionButtonLogin",
|
|
||||||
meta: {
|
|
||||||
title: "登录接口返回按钮权限"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineFakeRoute([
|
export default [
|
||||||
{
|
{
|
||||||
url: "/get-async-routes",
|
url: "/getAsyncRoutes",
|
||||||
method: "get",
|
method: "get",
|
||||||
response: () => {
|
response: () => {
|
||||||
return {
|
return {
|
||||||
@ -66,4 +46,4 @@ export default defineFakeRoute([
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]);
|
] as MockMethod[];
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// 根据角色动态生成路由
|
// 根据角色动态生成路由
|
||||||
import { defineFakeRoute } from "vite-plugin-fake-server/client";
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
export default defineFakeRoute([
|
export default [
|
||||||
{
|
{
|
||||||
url: "/login",
|
url: "/login",
|
||||||
method: "post",
|
method: "post",
|
||||||
@ -10,33 +10,27 @@ export default defineFakeRoute([
|
|||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: {
|
data: {
|
||||||
avatar: "https://avatars.githubusercontent.com/u/44761321",
|
|
||||||
username: "admin",
|
username: "admin",
|
||||||
nickname: "小铭",
|
|
||||||
// 一个用户可能有多个角色
|
// 一个用户可能有多个角色
|
||||||
roles: ["admin"],
|
roles: ["admin"],
|
||||||
// 按钮级别权限
|
|
||||||
permissions: ["*:*:*"],
|
|
||||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
||||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
|
||||||
expires: "2030/10/30 00:00:00"
|
expires: "2023/10/30 00:00:00"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: {
|
data: {
|
||||||
avatar: "https://avatars.githubusercontent.com/u/52823142",
|
|
||||||
username: "common",
|
username: "common",
|
||||||
nickname: "小林",
|
// 一个用户可能有多个角色
|
||||||
roles: ["common"],
|
roles: ["common"],
|
||||||
permissions: ["permission:btn:add", "permission:btn:edit"],
|
|
||||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
||||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
||||||
expires: "2030/10/30 00:00:00"
|
expires: "2023/10/30 00:00:00"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]);
|
] as MockMethod[];
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { defineFakeRoute } from "vite-plugin-fake-server/client";
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
// 模拟刷新token接口
|
// 模拟刷新token接口
|
||||||
export default defineFakeRoute([
|
export default [
|
||||||
{
|
{
|
||||||
url: "/refresh-token",
|
url: "/refreshToken",
|
||||||
method: "post",
|
method: "post",
|
||||||
response: ({ body }) => {
|
response: ({ body }) => {
|
||||||
if (body.refreshToken) {
|
if (body.refreshToken) {
|
||||||
@ -13,7 +13,7 @@ export default defineFakeRoute([
|
|||||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
|
||||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
|
||||||
// `expires`选择这种日期格式是为了方便调试,后端直接设置时间戳或许更方便(每次都应该递增)。如果后端返回的是时间戳格式,前端开发请来到这个目录`src/utils/auth.ts`,把第`38`行的代码换成expires = data.expires即可。
|
// `expires`选择这种日期格式是为了方便调试,后端直接设置时间戳或许更方便(每次都应该递增)。如果后端返回的是时间戳格式,前端开发请来到这个目录`src/utils/auth.ts`,把第`38`行的代码换成expires = data.expires即可。
|
||||||
expires: "2030/10/30 23:59:59"
|
expires: "2023/10/30 23:59:59"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
@ -24,4 +24,4 @@ export default defineFakeRoute([
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]);
|
] as MockMethod[];
|
||||||
|
231
package.json
@ -1,8 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "pure-admin-thin",
|
"name": "pure-admin-thin",
|
||||||
"version": "6.0.0",
|
"version": "3.9.7",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
||||||
"serve": "pnpm dev",
|
"serve": "pnpm dev",
|
||||||
@ -12,148 +11,114 @@
|
|||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"preview:build": "pnpm build && vite preview",
|
"preview:build": "pnpm build && vite preview",
|
||||||
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
|
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
|
||||||
"svgo": "svgo -f . -r",
|
"svgo": "svgo -f src/assets/svg -o src/assets/svg",
|
||||||
"clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install",
|
"cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
|
||||||
|
"clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
|
||||||
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
|
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
|
||||||
"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
|
"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
|
||||||
"lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
|
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||||
|
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
|
||||||
|
"lint:pretty": "pretty-quick --staged",
|
||||||
"lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
|
"lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
|
||||||
"prepare": "husky",
|
"prepare": "husky install",
|
||||||
"preinstall": "npx only-allow pnpm"
|
"preinstall": "npx only-allow pnpm"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"browserslist": [
|
||||||
"pure-admin-thin",
|
"> 1%",
|
||||||
"vue-pure-admin",
|
"not ie 11",
|
||||||
"element-plus",
|
"not op_mini all"
|
||||||
"tailwindcss",
|
|
||||||
"pure-admin",
|
|
||||||
"typescript",
|
|
||||||
"pinia",
|
|
||||||
"vue3",
|
|
||||||
"vite",
|
|
||||||
"esm"
|
|
||||||
],
|
],
|
||||||
"homepage": "https://github.com/pure-admin/pure-admin-thin",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git+https://github.com/pure-admin/pure-admin-thin.git"
|
|
||||||
},
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/pure-admin/vue-pure-admin/issues"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"author": {
|
|
||||||
"name": "xiaoxian521",
|
|
||||||
"email": "pureadmin@163.com",
|
|
||||||
"url": "https://github.com/xiaoxian521"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@pureadmin/descriptions": "^1.2.1",
|
"@pureadmin/descriptions": "^1.1.0",
|
||||||
"@pureadmin/table": "^3.2.1",
|
"@pureadmin/table": "^1.9.0",
|
||||||
"@pureadmin/utils": "^2.6.0",
|
"@pureadmin/utils": "^1.8.5",
|
||||||
"@vueuse/core": "^13.1.0",
|
"@vueuse/core": "^9.6.0",
|
||||||
"@vueuse/motion": "^3.0.3",
|
"@vueuse/motion": "2.0.0-beta.12",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.9.0",
|
"axios": "^1.2.0",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.6",
|
||||||
"echarts": "^5.6.0",
|
"echarts": "^5.4.0",
|
||||||
"element-plus": "^2.9.8",
|
"element-plus": "^2.2.27",
|
||||||
"js-cookie": "^3.0.5",
|
"element-resize-detector": "^1.2.4",
|
||||||
"localforage": "^1.10.0",
|
"js-cookie": "^3.0.1",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.0",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path": "^0.12.7",
|
||||||
"pinia": "^3.0.2",
|
"pinia": "^2.0.28",
|
||||||
"pinyin-pro": "^3.26.0",
|
"qs": "^6.11.0",
|
||||||
"qs": "^6.14.0",
|
"responsive-storage": "^2.1.0",
|
||||||
"responsive-storage": "^2.2.0",
|
"vue": "^3.2.45",
|
||||||
"sortablejs": "^1.15.6",
|
"vue-router": "^4.1.6",
|
||||||
"vue": "^3.5.13",
|
"vue-types": "^4.2.1"
|
||||||
"vue-router": "^4.5.0",
|
|
||||||
"vue-tippy": "^6.7.0",
|
|
||||||
"vue-types": "^6.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^19.8.0",
|
"@commitlint/cli": "13.1.0",
|
||||||
"@commitlint/config-conventional": "^19.8.0",
|
"@commitlint/config-conventional": "13.1.0",
|
||||||
"@commitlint/types": "^19.8.0",
|
"@iconify-icons/ep": "^1.2.7",
|
||||||
"@eslint/js": "^9.25.1",
|
"@iconify-icons/ri": "^1.2.3",
|
||||||
"@faker-js/faker": "^9.7.0",
|
"@iconify/vue": "^4.0.0",
|
||||||
"@iconify/json": "^2.2.331",
|
"@pureadmin/theme": "^3.0.0",
|
||||||
"@iconify/vue": "4.2.0",
|
"@types/element-resize-detector": "1.1.3",
|
||||||
"@tailwindcss/vite": "^4.1.4",
|
"@types/js-cookie": "^3.0.1",
|
||||||
"@types/js-cookie": "^3.0.6",
|
"@types/mockjs": "^1.0.7",
|
||||||
"@types/node": "^20.17.30",
|
"@types/node": "^18.11.9",
|
||||||
"@types/nprogress": "^0.2.3",
|
"@types/nprogress": "0.2.0",
|
||||||
"@types/path-browserify": "^1.0.3",
|
"@types/qs": "^6.9.7",
|
||||||
"@types/qs": "^6.9.18",
|
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||||
"@types/sortablejs": "^1.15.8",
|
"@typescript-eslint/parser": "^5.42.1",
|
||||||
"@vitejs/plugin-vue": "^5.2.3",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"@vitejs/plugin-vue-jsx": "^4.1.2",
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
"boxen": "^8.0.1",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
"code-inspector-plugin": "^0.20.10",
|
"@vue/eslint-config-typescript": "^11.0.2",
|
||||||
"cssnano": "^7.0.6",
|
"autoprefixer": "^10.4.13",
|
||||||
"eslint": "^9.25.1",
|
"cloc": "^2.10.0",
|
||||||
"eslint-config-prettier": "^10.1.2",
|
"cssnano": "^5.1.14",
|
||||||
"eslint-plugin-prettier": "^5.2.6",
|
"eslint": "^8.8.0",
|
||||||
"eslint-plugin-vue": "^10.0.0",
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
"gradient-string": "^3.0.0",
|
"eslint-plugin-vue": "^9.7.0",
|
||||||
"husky": "^9.1.7",
|
"husky": "^7.0.4",
|
||||||
"lint-staged": "^15.5.1",
|
"lint-staged": "11.1.2",
|
||||||
"postcss": "^8.5.3",
|
"picocolors": "^1.0.0",
|
||||||
"postcss-html": "^1.8.0",
|
"postcss": "^8.4.18",
|
||||||
"postcss-load-config": "^6.0.1",
|
"postcss-html": "^1.5.0",
|
||||||
"postcss-scss": "^4.0.9",
|
"postcss-import": "^15.0.0",
|
||||||
"prettier": "^3.5.3",
|
"postcss-scss": "^4.0.5",
|
||||||
"rimraf": "^6.0.1",
|
"prettier": "^2.5.1",
|
||||||
"rollup-plugin-visualizer": "^5.14.0",
|
"pretty-quick": "3.1.1",
|
||||||
"sass": "^1.87.0",
|
"rimraf": "3.0.2",
|
||||||
"stylelint": "^16.19.0",
|
"rollup-plugin-visualizer": "^5.8.3",
|
||||||
"stylelint-config-recess-order": "^6.0.0",
|
"sass": "^1.56.1",
|
||||||
"stylelint-config-recommended-vue": "^1.6.0",
|
"sass-loader": "^13.2.0",
|
||||||
"stylelint-config-standard-scss": "^14.0.0",
|
"stylelint": "^14.3.0",
|
||||||
"stylelint-prettier": "^5.0.3",
|
"stylelint-config-html": "^1.0.0",
|
||||||
"svgo": "^3.3.2",
|
"stylelint-config-prettier": "^9.0.3",
|
||||||
"tailwindcss": "^4.1.4",
|
"stylelint-config-recommended": "^9.0.0",
|
||||||
"typescript": "^5.8.3",
|
"stylelint-config-standard": "^29.0.0",
|
||||||
"typescript-eslint": "^8.31.0",
|
"stylelint-order": "^5.0.0",
|
||||||
"unplugin-icons": "^22.1.0",
|
"svgo": "^3.0.2",
|
||||||
"vite": "^6.3.3",
|
"tailwindcss": "^3.2.4",
|
||||||
"vite-plugin-cdn-import": "^1.0.1",
|
"terser": "^5.16.1",
|
||||||
|
"typescript": "^4.9.3",
|
||||||
|
"unplugin-vue-define-options": "^1.1.1",
|
||||||
|
"vite": "^4.0.3",
|
||||||
|
"vite-plugin-cdn-import": "^0.3.5",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-fake-server": "^2.2.0",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-remove-console": "^2.2.0",
|
"vite-plugin-remove-console": "^1.3.0",
|
||||||
"vite-plugin-router-warn": "^1.0.0",
|
"vite-svg-loader": "^3.6.0",
|
||||||
"vite-svg-loader": "^5.1.0",
|
"vue-eslint-parser": "^9.1.0",
|
||||||
"vue-eslint-parser": "^10.1.3",
|
"vue-tsc": "^1.0.9"
|
||||||
"vue-tsc": "^2.2.10"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "^18.18.0 || ^20.9.0 || >=22.0.0",
|
|
||||||
"pnpm": ">=9"
|
|
||||||
},
|
},
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
"allowedDeprecatedVersions": {
|
"peerDependencyRules": {
|
||||||
"are-we-there-yet": "*",
|
"ignoreMissing": [
|
||||||
"sourcemap-codec": "*",
|
"rollup",
|
||||||
"lodash.isequal": "*",
|
"webpack"
|
||||||
"domexception": "*",
|
]
|
||||||
"w3c-hr-time": "*",
|
}
|
||||||
"inflight": "*",
|
},
|
||||||
"npmlog": "*",
|
"repository": "git@github.com:xiaoxian521/pure-admin-thin.git",
|
||||||
"rimraf": "*",
|
"author": "xiaoxian521",
|
||||||
"stable": "*",
|
"license": "MIT"
|
||||||
"gauge": "*",
|
|
||||||
"abab": "*",
|
|
||||||
"glob": "*"
|
|
||||||
},
|
|
||||||
"onlyBuiltDependencies": [
|
|
||||||
"@parcel/watcher",
|
|
||||||
"core-js",
|
|
||||||
"es5-ext",
|
|
||||||
"esbuild",
|
|
||||||
"typeit",
|
|
||||||
"vue-demi"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
14144
pnpm-lock.yaml
generated
@ -1,8 +1,8 @@
|
|||||||
// @ts-check
|
module.exports = {
|
||||||
|
|
||||||
/** @type {import('postcss-load-config').Config} */
|
|
||||||
export default {
|
|
||||||
plugins: {
|
plugins: {
|
||||||
|
"postcss-import": {},
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
|
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
|
|
Before Width: | Height: | Size: 706 B |
@ -1,26 +1,21 @@
|
|||||||
{
|
{
|
||||||
"Version": "6.0.0",
|
"Version": "3.9.7",
|
||||||
"Title": "PureAdmin",
|
"Title": "PureAdmin",
|
||||||
"FixedHeader": true,
|
"FixedHeader": true,
|
||||||
"HiddenSideBar": false,
|
"HiddenSideBar": false,
|
||||||
"MultiTagsCache": false,
|
"MultiTagsCache": false,
|
||||||
"KeepAlive": true,
|
"KeepAlive": true,
|
||||||
"Layout": "vertical",
|
"Layout": "vertical",
|
||||||
"Theme": "light",
|
"Theme": "default",
|
||||||
"DarkMode": false,
|
"DarkMode": false,
|
||||||
"OverallStyle": "light",
|
|
||||||
"Grey": false,
|
"Grey": false,
|
||||||
"Weak": false,
|
"Weak": false,
|
||||||
"HideTabs": false,
|
"HideTabs": false,
|
||||||
"HideFooter": false,
|
|
||||||
"Stretch": false,
|
|
||||||
"SidebarStatus": true,
|
"SidebarStatus": true,
|
||||||
"EpThemeColor": "#409EFF",
|
"EpThemeColor": "#409EFF",
|
||||||
"ShowLogo": true,
|
"ShowLogo": true,
|
||||||
"ShowModel": "smart",
|
"ShowModel": "smart",
|
||||||
"MenuArrowIconNoTransition": false,
|
"MenuArrowIconNoTransition": true,
|
||||||
"CachingAsyncRoutes": false,
|
"CachingAsyncRoutes": false,
|
||||||
"TooltipEffect": "light",
|
"TooltipEffect": "light"
|
||||||
"ResponsiveStorageNameSpace": "responsive-",
|
|
||||||
"MenuSearchHistory": 6
|
|
||||||
}
|
}
|
@ -1,21 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-config-provider :locale="currentLocale">
|
<el-config-provider :locale="currentLocale">
|
||||||
<router-view />
|
<router-view />
|
||||||
<ReDialog />
|
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { ElConfigProvider } from "element-plus";
|
import { ElConfigProvider } from "element-plus";
|
||||||
import { ReDialog } from "@/components/ReDialog";
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
||||||
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "app",
|
name: "app",
|
||||||
components: {
|
components: {
|
||||||
[ElConfigProvider.name]: ElConfigProvider,
|
[ElConfigProvider.name]: ElConfigProvider
|
||||||
ReDialog
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentLocale() {
|
currentLocale() {
|
||||||
|
@ -6,5 +6,5 @@ type Result = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getAsyncRoutes = () => {
|
export const getAsyncRoutes = () => {
|
||||||
return http.request<Result>("get", "/get-async-routes");
|
return http.request<Result>("get", "/getAsyncRoutes");
|
||||||
};
|
};
|
||||||
|
@ -3,16 +3,10 @@ import { http } from "@/utils/http";
|
|||||||
export type UserResult = {
|
export type UserResult = {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: {
|
data: {
|
||||||
/** 头像 */
|
|
||||||
avatar: string;
|
|
||||||
/** 用户名 */
|
/** 用户名 */
|
||||||
username: string;
|
username: string;
|
||||||
/** 昵称 */
|
/** 当前登陆用户的角色 */
|
||||||
nickname: string;
|
|
||||||
/** 当前登录用户的角色 */
|
|
||||||
roles: Array<string>;
|
roles: Array<string>;
|
||||||
/** 按钮级别权限 */
|
|
||||||
permissions: Array<string>;
|
|
||||||
/** `token` */
|
/** `token` */
|
||||||
accessToken: string;
|
accessToken: string;
|
||||||
/** 用于调用刷新`accessToken`的接口时所需的`token` */
|
/** 用于调用刷新`accessToken`的接口时所需的`token` */
|
||||||
@ -39,7 +33,7 @@ export const getLogin = (data?: object) => {
|
|||||||
return http.request<UserResult>("post", "/login", { data });
|
return http.request<UserResult>("post", "/login", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 刷新`token` */
|
/** 刷新token */
|
||||||
export const refreshTokenApi = (data?: object) => {
|
export const refreshTokenApi = (data?: object) => {
|
||||||
return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
|
return http.request<RefreshTokenResult>("post", "/refreshToken", { data });
|
||||||
};
|
};
|
||||||
|
@ -1,9 +1,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 2208059 */
|
font-family: "iconfont"; /* Project id 2208059 */
|
||||||
src:
|
src: url("iconfont.woff2?t=1638023560828") format("woff2"),
|
||||||
url("iconfont.woff2?t=1671895108120") format("woff2"),
|
url("iconfont.woff?t=1638023560828") format("woff"),
|
||||||
url("iconfont.woff?t=1671895108120") format("woff"),
|
url("iconfont.ttf?t=1638023560828") format("truetype");
|
||||||
url("iconfont.ttf?t=1671895108120") format("truetype");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@ -14,14 +13,26 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-iconfont-tabs:before {
|
.team-icontabs::before {
|
||||||
content: "\e63e";
|
content: "\e63e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-iconfont-logo:before {
|
.team-iconlogo::before {
|
||||||
content: "\e620";
|
content: "\e620";
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-iconfont-new:before {
|
.team-iconxinpin::before {
|
||||||
|
content: "\e614";
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-iconxinpinrenqiwang::before {
|
||||||
content: "\e615";
|
content: "\e615";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.team-iconexit-fullscreen::before {
|
||||||
|
content: "\e62a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-iconfullscreen::before {
|
||||||
|
content: "\e62b";
|
||||||
|
}
|
||||||
|
@ -2,29 +2,50 @@
|
|||||||
"id": "2208059",
|
"id": "2208059",
|
||||||
"name": "pure-admin",
|
"name": "pure-admin",
|
||||||
"font_family": "iconfont",
|
"font_family": "iconfont",
|
||||||
"css_prefix_text": "pure-iconfont-",
|
"css_prefix_text": "team-icon",
|
||||||
"description": "pure-admin-iconfont",
|
"description": "pure-admin",
|
||||||
"glyphs": [
|
"glyphs": [
|
||||||
{
|
{
|
||||||
"icon_id": "20594647",
|
"icon_id": "20594647",
|
||||||
"name": "Tabs",
|
"name": "标签页",
|
||||||
"font_class": "tabs",
|
"font_class": "tabs",
|
||||||
"unicode": "e63e",
|
"unicode": "e63e",
|
||||||
"unicode_decimal": 58942
|
"unicode_decimal": 58942
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"icon_id": "22129506",
|
"icon_id": "22129506",
|
||||||
"name": "PureLogo",
|
"name": "水能",
|
||||||
"font_class": "logo",
|
"font_class": "logo",
|
||||||
"unicode": "e620",
|
"unicode": "e620",
|
||||||
"unicode_decimal": 58912
|
"unicode_decimal": 58912
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "7795613",
|
||||||
|
"name": "新品",
|
||||||
|
"font_class": "xinpin",
|
||||||
|
"unicode": "e614",
|
||||||
|
"unicode_decimal": 58900
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"icon_id": "7795615",
|
"icon_id": "7795615",
|
||||||
"name": "New",
|
"name": "新品人气王",
|
||||||
"font_class": "new",
|
"font_class": "xinpinrenqiwang",
|
||||||
"unicode": "e615",
|
"unicode": "e615",
|
||||||
"unicode_decimal": 58901
|
"unicode_decimal": 58901
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5698509",
|
||||||
|
"name": "全屏缩小",
|
||||||
|
"font_class": "exit-fullscreen",
|
||||||
|
"unicode": "e62a",
|
||||||
|
"unicode_decimal": 58922
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5698510",
|
||||||
|
"name": "全屏显示",
|
||||||
|
"font_class": "fullscreen",
|
||||||
|
"unicode": "e62b",
|
||||||
|
"unicode_decimal": 58923
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 712 B |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.9 35.9 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0q.25.27.413.455a35.9 35.9 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44 44 0 0 1-6.584-.874m6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42 42 0 0 0 4.227-.454A33.9 33.9 0 0 0 12 4.09a33.9 33.9 0 0 0-6.649 12.387q2.093.334 4.227.454M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
|
Before Width: | Height: | Size: 533 B After Width: | Height: | Size: 588 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 263 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
|
Before Width: | Height: | Size: 435 B After Width: | Height: | Size: 480 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/></svg>
|
Before Width: | Height: | Size: 332 B After Width: | Height: | Size: 352 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
|
Before Width: | Height: | Size: 308 B After Width: | Height: | Size: 348 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
|
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 318 B |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"/></svg>
|
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 381 B |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" viewBox="0 0 1024 1024"><path d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358z"/><path d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5m33-714.074C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98z"/></svg>
|
|
Before Width: | Height: | Size: 605 B |
@ -1 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2m10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2"/></svg>
|
|
Before Width: | Height: | Size: 439 B |
@ -1 +0,0 @@
|
|||||||
<svg width="32" height="32" fill="currentColor" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97m0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0M300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0"/></svg>
|
|
Before Width: | Height: | Size: 373 B |
@ -1 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
|
|
Before Width: | Height: | Size: 161 B |
@ -1 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
|
|
Before Width: | Height: | Size: 235 B |
@ -1 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.499.001A5 5 0 0 1 15 17.197a5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8 8 0 0 0-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499-.001A5 5 0 0 1 9 6.803a5 5 0 0 1-3.525.565 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334 8 8 0 0 0 .75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>
|
|
Before Width: | Height: | Size: 840 B |
Before Width: | Height: | Size: 3.6 KiB |
@ -1,29 +0,0 @@
|
|||||||
import { ElCol } from "element-plus";
|
|
||||||
import { h, defineComponent } from "vue";
|
|
||||||
|
|
||||||
// 封装element-plus的el-col组件
|
|
||||||
export default defineComponent({
|
|
||||||
name: "ReCol",
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Number,
|
|
||||||
default: 24
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const attrs = this.$attrs;
|
|
||||||
const val = this.value;
|
|
||||||
return h(
|
|
||||||
ElCol,
|
|
||||||
{
|
|
||||||
xs: val,
|
|
||||||
sm: val,
|
|
||||||
md: val,
|
|
||||||
lg: val,
|
|
||||||
xl: val,
|
|
||||||
...attrs
|
|
||||||
},
|
|
||||||
{ default: () => this.$slots.default() }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,69 +0,0 @@
|
|||||||
import { ref } from "vue";
|
|
||||||
import reDialog from "./index.vue";
|
|
||||||
import { useTimeoutFn } from "@vueuse/core";
|
|
||||||
import { withInstall } from "@pureadmin/utils";
|
|
||||||
import type {
|
|
||||||
EventType,
|
|
||||||
ArgsType,
|
|
||||||
DialogProps,
|
|
||||||
ButtonProps,
|
|
||||||
DialogOptions
|
|
||||||
} from "./type";
|
|
||||||
|
|
||||||
const dialogStore = ref<Array<DialogOptions>>([]);
|
|
||||||
|
|
||||||
/** 打开弹框 */
|
|
||||||
const addDialog = (options: DialogOptions) => {
|
|
||||||
const open = () =>
|
|
||||||
dialogStore.value.push(Object.assign(options, { visible: true }));
|
|
||||||
if (options?.openDelay) {
|
|
||||||
useTimeoutFn(() => {
|
|
||||||
open();
|
|
||||||
}, options.openDelay);
|
|
||||||
} else {
|
|
||||||
open();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 关闭弹框 */
|
|
||||||
const closeDialog = (options: DialogOptions, index: number, args?: any) => {
|
|
||||||
dialogStore.value[index].visible = false;
|
|
||||||
options.closeCallBack && options.closeCallBack({ options, index, args });
|
|
||||||
|
|
||||||
const closeDelay = options?.closeDelay ?? 200;
|
|
||||||
useTimeoutFn(() => {
|
|
||||||
dialogStore.value.splice(index, 1);
|
|
||||||
}, closeDelay);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 更改弹框自身属性值
|
|
||||||
* @param value 属性值
|
|
||||||
* @param key 属性,默认`title`
|
|
||||||
* @param index 弹框索引(默认`0`,代表只有一个弹框,对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`)
|
|
||||||
*/
|
|
||||||
const updateDialog = (value: any, key = "title", index = 0) => {
|
|
||||||
dialogStore.value[index][key] = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 关闭所有弹框 */
|
|
||||||
const closeAllDialog = () => {
|
|
||||||
dialogStore.value = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 千万别忘了在下面这三处引入并注册下,放心注册,不使用`addDialog`调用就不会被挂载
|
|
||||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
|
|
||||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
|
|
||||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
|
|
||||||
*/
|
|
||||||
const ReDialog = withInstall(reDialog);
|
|
||||||
|
|
||||||
export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
|
|
||||||
export {
|
|
||||||
ReDialog,
|
|
||||||
dialogStore,
|
|
||||||
addDialog,
|
|
||||||
closeDialog,
|
|
||||||
updateDialog,
|
|
||||||
closeAllDialog
|
|
||||||
};
|
|
@ -1,206 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
type EventType,
|
|
||||||
type ButtonProps,
|
|
||||||
type DialogOptions,
|
|
||||||
closeDialog,
|
|
||||||
dialogStore
|
|
||||||
} from "./index";
|
|
||||||
import { ref, computed } from "vue";
|
|
||||||
import { isFunction } from "@pureadmin/utils";
|
|
||||||
import Fullscreen from "~icons/ri/fullscreen-fill";
|
|
||||||
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: "ReDialog"
|
|
||||||
});
|
|
||||||
|
|
||||||
const sureBtnMap = ref({});
|
|
||||||
const fullscreen = ref(false);
|
|
||||||
|
|
||||||
const footerButtons = computed(() => {
|
|
||||||
return (options: DialogOptions) => {
|
|
||||||
return options?.footerButtons?.length > 0
|
|
||||||
? options.footerButtons
|
|
||||||
: ([
|
|
||||||
{
|
|
||||||
label: "取消",
|
|
||||||
text: true,
|
|
||||||
bg: true,
|
|
||||||
btnClick: ({ dialog: { options, index } }) => {
|
|
||||||
const done = () =>
|
|
||||||
closeDialog(options, index, { command: "cancel" });
|
|
||||||
if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
|
|
||||||
options.beforeCancel(done, { options, index });
|
|
||||||
} else {
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "确定",
|
|
||||||
type: "primary",
|
|
||||||
text: true,
|
|
||||||
bg: true,
|
|
||||||
popconfirm: options?.popconfirm,
|
|
||||||
btnClick: ({ dialog: { options, index } }) => {
|
|
||||||
if (options?.sureBtnLoading) {
|
|
||||||
sureBtnMap.value[index] = Object.assign(
|
|
||||||
{},
|
|
||||||
sureBtnMap.value[index],
|
|
||||||
{
|
|
||||||
loading: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const closeLoading = () => {
|
|
||||||
if (options?.sureBtnLoading) {
|
|
||||||
sureBtnMap.value[index].loading = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const done = () => {
|
|
||||||
closeLoading();
|
|
||||||
closeDialog(options, index, { command: "sure" });
|
|
||||||
};
|
|
||||||
if (options?.beforeSure && isFunction(options?.beforeSure)) {
|
|
||||||
options.beforeSure(done, { options, index, closeLoading });
|
|
||||||
} else {
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
] as Array<ButtonProps>);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const fullscreenClass = computed(() => {
|
|
||||||
return [
|
|
||||||
"el-icon",
|
|
||||||
"el-dialog__close",
|
|
||||||
"-translate-x-2",
|
|
||||||
"cursor-pointer",
|
|
||||||
"hover:text-[red]!"
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
function eventsCallBack(
|
|
||||||
event: EventType,
|
|
||||||
options: DialogOptions,
|
|
||||||
index: number,
|
|
||||||
isClickFullScreen = false
|
|
||||||
) {
|
|
||||||
if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
|
|
||||||
if (options?.[event] && isFunction(options?.[event])) {
|
|
||||||
return options?.[event]({ options, index });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose(
|
|
||||||
options: DialogOptions,
|
|
||||||
index: number,
|
|
||||||
args = { command: "close" }
|
|
||||||
) {
|
|
||||||
closeDialog(options, index, args);
|
|
||||||
eventsCallBack("close", options, index);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
v-for="(options, index) in dialogStore"
|
|
||||||
:key="index"
|
|
||||||
v-bind="options"
|
|
||||||
v-model="options.visible"
|
|
||||||
class="pure-dialog"
|
|
||||||
:fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
|
|
||||||
@closed="handleClose(options, index)"
|
|
||||||
@opened="eventsCallBack('open', options, index)"
|
|
||||||
@openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
|
|
||||||
@closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
|
|
||||||
>
|
|
||||||
<!-- header -->
|
|
||||||
<template
|
|
||||||
v-if="options?.fullscreenIcon || options?.headerRenderer"
|
|
||||||
#header="{ close, titleId, titleClass }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="options?.fullscreenIcon"
|
|
||||||
class="flex items-center justify-between"
|
|
||||||
>
|
|
||||||
<span :id="titleId" :class="titleClass">{{ options?.title }}</span>
|
|
||||||
<i
|
|
||||||
v-if="!options?.fullscreen"
|
|
||||||
:class="fullscreenClass"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
fullscreen = !fullscreen;
|
|
||||||
eventsCallBack(
|
|
||||||
'fullscreenCallBack',
|
|
||||||
{ ...options, fullscreen },
|
|
||||||
index,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<IconifyIconOffline
|
|
||||||
class="pure-dialog-svg"
|
|
||||||
:icon="
|
|
||||||
options?.fullscreen
|
|
||||||
? ExitFullscreen
|
|
||||||
: fullscreen
|
|
||||||
? ExitFullscreen
|
|
||||||
: Fullscreen
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
<component
|
|
||||||
:is="options?.headerRenderer({ close, titleId, titleClass })"
|
|
||||||
v-else
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<component
|
|
||||||
v-bind="options?.props"
|
|
||||||
:is="options.contentRenderer({ options, index })"
|
|
||||||
@close="args => handleClose(options, index, args)"
|
|
||||||
/>
|
|
||||||
<!-- footer -->
|
|
||||||
<template v-if="!options?.hideFooter" #footer>
|
|
||||||
<template v-if="options?.footerRenderer">
|
|
||||||
<component :is="options?.footerRenderer({ options, index })" />
|
|
||||||
</template>
|
|
||||||
<span v-else>
|
|
||||||
<template v-for="(btn, key) in footerButtons(options)" :key="key">
|
|
||||||
<el-popconfirm
|
|
||||||
v-if="btn.popconfirm"
|
|
||||||
v-bind="btn.popconfirm"
|
|
||||||
@confirm="
|
|
||||||
btn.btnClick({
|
|
||||||
dialog: { options, index },
|
|
||||||
button: { btn, index: key }
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template #reference>
|
|
||||||
<el-button v-bind="btn">{{ btn?.label }}</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
<el-button
|
|
||||||
v-else
|
|
||||||
v-bind="btn"
|
|
||||||
:loading="key === 1 && sureBtnMap[index]?.loading"
|
|
||||||
@click="
|
|
||||||
btn.btnClick({
|
|
||||||
dialog: { options, index },
|
|
||||||
button: { btn, index: key }
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ btn?.label }}
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
@ -1,275 +0,0 @@
|
|||||||
import type { CSSProperties, VNode, Component } from "vue";
|
|
||||||
|
|
||||||
type DoneFn = (cancel?: boolean) => void;
|
|
||||||
type EventType =
|
|
||||||
| "open"
|
|
||||||
| "close"
|
|
||||||
| "openAutoFocus"
|
|
||||||
| "closeAutoFocus"
|
|
||||||
| "fullscreenCallBack";
|
|
||||||
type ArgsType = {
|
|
||||||
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
|
|
||||||
command: "cancel" | "sure" | "close";
|
|
||||||
};
|
|
||||||
type ButtonType =
|
|
||||||
| "primary"
|
|
||||||
| "success"
|
|
||||||
| "warning"
|
|
||||||
| "danger"
|
|
||||||
| "info"
|
|
||||||
| "text";
|
|
||||||
|
|
||||||
/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
|
|
||||||
type DialogProps = {
|
|
||||||
/** `Dialog` 的显示与隐藏 */
|
|
||||||
visible?: boolean;
|
|
||||||
/** `Dialog` 的标题 */
|
|
||||||
title?: string;
|
|
||||||
/** `Dialog` 的宽度,默认 `50%` */
|
|
||||||
width?: string | number;
|
|
||||||
/** 是否为全屏 `Dialog`(会一直处于全屏状态,除非弹框关闭),默认 `false`,`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
|
|
||||||
fullscreen?: boolean;
|
|
||||||
/** 是否显示全屏操作图标,默认 `false`,`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
|
|
||||||
fullscreenIcon?: boolean;
|
|
||||||
/** `Dialog CSS` 中的 `margin-top` 值,默认 `15vh` */
|
|
||||||
top?: string;
|
|
||||||
/** 是否需要遮罩层,默认 `true` */
|
|
||||||
modal?: boolean;
|
|
||||||
/** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`,默认 `false` */
|
|
||||||
appendToBody?: boolean;
|
|
||||||
/** 是否在 `Dialog` 出现时将 `body` 滚动锁定,默认 `true` */
|
|
||||||
lockScroll?: boolean;
|
|
||||||
/** `Dialog` 的自定义类名 */
|
|
||||||
class?: string;
|
|
||||||
/** `Dialog` 的自定义样式 */
|
|
||||||
style?: CSSProperties;
|
|
||||||
/** `Dialog` 打开的延时时间,单位毫秒,默认 `0` */
|
|
||||||
openDelay?: number;
|
|
||||||
/** `Dialog` 关闭的延时时间,单位毫秒,默认 `0` */
|
|
||||||
closeDelay?: number;
|
|
||||||
/** 是否可以通过点击 `modal` 关闭 `Dialog`,默认 `true` */
|
|
||||||
closeOnClickModal?: boolean;
|
|
||||||
/** 是否可以通过按下 `ESC` 关闭 `Dialog`,默认 `true` */
|
|
||||||
closeOnPressEscape?: boolean;
|
|
||||||
/** 是否显示关闭按钮,默认 `true` */
|
|
||||||
showClose?: boolean;
|
|
||||||
/** 关闭前的回调,会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
|
||||||
beforeClose?: (done: DoneFn) => void;
|
|
||||||
/** 为 `Dialog` 启用可拖拽功能,默认 `false` */
|
|
||||||
draggable?: boolean;
|
|
||||||
/** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列,默认 `false` */
|
|
||||||
center?: boolean;
|
|
||||||
/** 是否水平垂直对齐对话框,默认 `false` */
|
|
||||||
alignCenter?: boolean;
|
|
||||||
/** 当关闭 `Dialog` 时,销毁其中的元素,默认 `false` */
|
|
||||||
destroyOnClose?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
//element-plus.org/zh-CN/component/popconfirm.html#attributes
|
|
||||||
type Popconfirm = {
|
|
||||||
/** 标题 */
|
|
||||||
title?: string;
|
|
||||||
/** 确定按钮文字 */
|
|
||||||
confirmButtonText?: string;
|
|
||||||
/** 取消按钮文字 */
|
|
||||||
cancelButtonText?: string;
|
|
||||||
/** 确定按钮类型,默认 `primary` */
|
|
||||||
confirmButtonType?: ButtonType;
|
|
||||||
/** 取消按钮类型,默认 `text` */
|
|
||||||
cancelButtonType?: ButtonType;
|
|
||||||
/** 自定义图标,默认 `QuestionFilled` */
|
|
||||||
icon?: string | Component;
|
|
||||||
/** `Icon` 颜色,默认 `#f90` */
|
|
||||||
iconColor?: string;
|
|
||||||
/** 是否隐藏 `Icon`,默认 `false` */
|
|
||||||
hideIcon?: boolean;
|
|
||||||
/** 关闭时的延迟,默认 `200` */
|
|
||||||
hideAfter?: number;
|
|
||||||
/** 是否将 `popover` 的下拉列表插入至 `body` 元素,默认 `true` */
|
|
||||||
teleported?: boolean;
|
|
||||||
/** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除,默认 `false` */
|
|
||||||
persistent?: boolean;
|
|
||||||
/** 弹层宽度,最小宽度 `150px`,默认 `150` */
|
|
||||||
width?: string | number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type BtnClickDialog = {
|
|
||||||
options?: DialogOptions;
|
|
||||||
index?: number;
|
|
||||||
};
|
|
||||||
type BtnClickButton = {
|
|
||||||
btn?: ButtonProps;
|
|
||||||
index?: number;
|
|
||||||
};
|
|
||||||
/** https://element-plus.org/zh-CN/component/button.html#button-attributes */
|
|
||||||
type ButtonProps = {
|
|
||||||
/** 按钮文字 */
|
|
||||||
label: string;
|
|
||||||
/** 按钮尺寸 */
|
|
||||||
size?: "large" | "default" | "small";
|
|
||||||
/** 按钮类型 */
|
|
||||||
type?: "primary" | "success" | "warning" | "danger" | "info";
|
|
||||||
/** 是否为朴素按钮,默认 `false` */
|
|
||||||
plain?: boolean;
|
|
||||||
/** 是否为文字按钮,默认 `false` */
|
|
||||||
text?: boolean;
|
|
||||||
/** 是否显示文字按钮背景颜色,默认 `false` */
|
|
||||||
bg?: boolean;
|
|
||||||
/** 是否为链接按钮,默认 `false` */
|
|
||||||
link?: boolean;
|
|
||||||
/** 是否为圆角按钮,默认 `false` */
|
|
||||||
round?: boolean;
|
|
||||||
/** 是否为圆形按钮,默认 `false` */
|
|
||||||
circle?: boolean;
|
|
||||||
/** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
|
|
||||||
popconfirm?: Popconfirm;
|
|
||||||
/** 是否为加载中状态,默认 `false` */
|
|
||||||
loading?: boolean;
|
|
||||||
/** 自定义加载中状态图标组件 */
|
|
||||||
loadingIcon?: string | Component;
|
|
||||||
/** 按钮是否为禁用状态,默认 `false` */
|
|
||||||
disabled?: boolean;
|
|
||||||
/** 图标组件 */
|
|
||||||
icon?: string | Component;
|
|
||||||
/** 是否开启原生 `autofocus` 属性,默认 `false` */
|
|
||||||
autofocus?: boolean;
|
|
||||||
/** 原生 `type` 属性,默认 `button` */
|
|
||||||
nativeType?: "button" | "submit" | "reset";
|
|
||||||
/** 自动在两个中文字符之间插入空格 */
|
|
||||||
autoInsertSpace?: boolean;
|
|
||||||
/** 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 */
|
|
||||||
color?: string;
|
|
||||||
/** `dark` 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色,默认 `false` */
|
|
||||||
dark?: boolean;
|
|
||||||
/** 自定义元素标签 */
|
|
||||||
tag?: string | Component;
|
|
||||||
/** 点击按钮后触发的回调 */
|
|
||||||
btnClick?: ({
|
|
||||||
dialog,
|
|
||||||
button
|
|
||||||
}: {
|
|
||||||
/** 当前 `Dialog` 信息 */
|
|
||||||
dialog: BtnClickDialog;
|
|
||||||
/** 当前 `button` 信息 */
|
|
||||||
button: BtnClickButton;
|
|
||||||
}) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface DialogOptions extends DialogProps {
|
|
||||||
/** 内容区组件的 `props`,可通过 `defineProps` 接收 */
|
|
||||||
props?: any;
|
|
||||||
/** 是否隐藏 `Dialog` 按钮操作区的内容 */
|
|
||||||
hideFooter?: boolean;
|
|
||||||
/** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
|
|
||||||
popconfirm?: Popconfirm;
|
|
||||||
/** 点击确定按钮后是否开启 `loading` 加载动画 */
|
|
||||||
sureBtnLoading?: boolean;
|
|
||||||
/**
|
|
||||||
* @description 自定义对话框标题的内容渲染器
|
|
||||||
* @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
|
|
||||||
*/
|
|
||||||
headerRenderer?: ({
|
|
||||||
close,
|
|
||||||
titleId,
|
|
||||||
titleClass
|
|
||||||
}: {
|
|
||||||
close: Function;
|
|
||||||
titleId: string;
|
|
||||||
titleClass: string;
|
|
||||||
}) => VNode | Component;
|
|
||||||
/** 自定义内容渲染器 */
|
|
||||||
contentRenderer?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => VNode | Component;
|
|
||||||
/** 自定义按钮操作区的内容渲染器,会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
|
|
||||||
footerRenderer?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => VNode | Component;
|
|
||||||
/** 自定义底部按钮操作 */
|
|
||||||
footerButtons?: Array<ButtonProps>;
|
|
||||||
/** `Dialog` 打开后的回调 */
|
|
||||||
open?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => void;
|
|
||||||
/** `Dialog` 关闭后的回调(只有点击右上角关闭按钮或空白页或按下了esc键关闭页面时才会触发) */
|
|
||||||
close?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => void;
|
|
||||||
/** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析:`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
|
|
||||||
closeCallBack?: ({
|
|
||||||
options,
|
|
||||||
index,
|
|
||||||
args
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
args: any;
|
|
||||||
}) => void;
|
|
||||||
/** 点击全屏按钮时的回调 */
|
|
||||||
fullscreenCallBack?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => void;
|
|
||||||
/** 输入焦点聚焦在 `Dialog` 内容时的回调 */
|
|
||||||
openAutoFocus?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => void;
|
|
||||||
/** 输入焦点从 `Dialog` 内容失焦时的回调 */
|
|
||||||
closeAutoFocus?: ({
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}) => void;
|
|
||||||
/** 点击底部取消按钮的回调,会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
|
||||||
beforeCancel?: (
|
|
||||||
done: Function,
|
|
||||||
{
|
|
||||||
options,
|
|
||||||
index
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
}
|
|
||||||
) => void;
|
|
||||||
/** 点击底部确定按钮的回调,会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
|
||||||
beforeSure?: (
|
|
||||||
done: Function,
|
|
||||||
{
|
|
||||||
options,
|
|
||||||
index,
|
|
||||||
closeLoading
|
|
||||||
}: {
|
|
||||||
options: DialogOptions;
|
|
||||||
index: number;
|
|
||||||
/** 关闭确定按钮的 `loading` 加载动画 */
|
|
||||||
closeLoading: Function;
|
|
||||||
}
|
|
||||||
) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
|
|
@ -6,7 +6,7 @@ import fontIcon from "./src/iconfont";
|
|||||||
const IconifyIconOffline = iconifyIconOffline;
|
const IconifyIconOffline = iconifyIconOffline;
|
||||||
/** 在线图标组件 */
|
/** 在线图标组件 */
|
||||||
const IconifyIconOnline = iconifyIconOnline;
|
const IconifyIconOnline = iconifyIconOnline;
|
||||||
/** `iconfont`组件 */
|
/** iconfont组件 */
|
||||||
const FontIcon = fontIcon;
|
const FontIcon = fontIcon;
|
||||||
|
|
||||||
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import type { iconType } from "./types";
|
import { iconType } from "./types";
|
||||||
import { h, defineComponent, type Component } from "vue";
|
import { h, defineComponent, Component } from "vue";
|
||||||
import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
|
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
|
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
|
||||||
* @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
|
* @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
|
||||||
* @param icon 必传 图标
|
* @param icon 必传 图标
|
||||||
* @param attrs 可选 iconType 属性
|
* @param attrs 可选 iconType 属性
|
||||||
* @returns Component
|
* @returns Component
|
||||||
@ -33,7 +33,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
|
|||||||
});
|
});
|
||||||
} else if (typeof icon === "function" || typeof icon?.render === "function") {
|
} else if (typeof icon === "function" || typeof icon?.render === "function") {
|
||||||
// svg
|
// svg
|
||||||
return attrs ? h(icon, { ...attrs }) : icon;
|
return icon;
|
||||||
} else if (typeof icon === "object") {
|
} else if (typeof icon === "object") {
|
||||||
return defineComponent({
|
return defineComponent({
|
||||||
name: "OfflineIcon",
|
name: "OfflineIcon",
|
||||||
@ -49,12 +49,10 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
|
|||||||
return defineComponent({
|
return defineComponent({
|
||||||
name: "Icon",
|
name: "Icon",
|
||||||
render() {
|
render() {
|
||||||
if (!icon) return;
|
const IconifyIcon =
|
||||||
const IconifyIcon = icon.includes(":")
|
icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
|
||||||
? IconifyIconOnline
|
|
||||||
: IconifyIconOffline;
|
|
||||||
return h(IconifyIcon, {
|
return h(IconifyIcon, {
|
||||||
icon,
|
icon: icon,
|
||||||
...attrs
|
...attrs
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,8 @@ export default defineComponent({
|
|||||||
return h(
|
return h(
|
||||||
"svg",
|
"svg",
|
||||||
{
|
{
|
||||||
class: "icon-svg"
|
class: "icon-svg",
|
||||||
|
"aria-hidden": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
default: () => [
|
default: () => [
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { h, defineComponent } from "vue";
|
import { h, defineComponent } from "vue";
|
||||||
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
||||||
|
|
||||||
// Iconify Icon在Vue里本地使用(用于内网环境)
|
// Iconify Icon在Vue里本地使用(用于内网环境)https://docs.iconify.design/icon-components/vue/offline.html
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "IconifyIconOffline",
|
name: "IconifyIconOffline",
|
||||||
components: { IconifyIcon },
|
components: { IconifyIcon },
|
||||||
@ -13,35 +13,18 @@ export default defineComponent({
|
|||||||
render() {
|
render() {
|
||||||
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
|
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
|
||||||
const attrs = this.$attrs;
|
const attrs = this.$attrs;
|
||||||
if (typeof this.icon === "string") {
|
return h(
|
||||||
return h(
|
IconifyIcon,
|
||||||
IconifyIcon,
|
{
|
||||||
{
|
icon: this.icon,
|
||||||
icon: this.icon,
|
style: attrs?.style
|
||||||
"aria-hidden": false,
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
style: attrs?.style
|
: { outline: "none" },
|
||||||
? Object.assign(attrs.style, { outline: "none" })
|
...attrs
|
||||||
: { outline: "none" },
|
},
|
||||||
...attrs
|
{
|
||||||
},
|
default: () => []
|
||||||
{
|
}
|
||||||
default: () => []
|
);
|
||||||
}
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return h(
|
|
||||||
this.icon,
|
|
||||||
{
|
|
||||||
"aria-hidden": false,
|
|
||||||
style: attrs?.style
|
|
||||||
? Object.assign(attrs.style, { outline: "none" })
|
|
||||||
: { outline: "none" },
|
|
||||||
...attrs
|
|
||||||
},
|
|
||||||
{
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -17,7 +17,6 @@ export default defineComponent({
|
|||||||
IconifyIcon,
|
IconifyIcon,
|
||||||
{
|
{
|
||||||
icon: `${this.icon}`,
|
icon: `${this.icon}`,
|
||||||
"aria-hidden": false,
|
|
||||||
style: attrs?.style
|
style: attrs?.style
|
||||||
? Object.assign(attrs.style, { outline: "none" })
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
: { outline: "none" },
|
: { outline: "none" },
|
||||||
|
@ -1,23 +1,14 @@
|
|||||||
// 这里存放本地图标,在 src/layout/index.vue 文件中加载,避免在首启动加载
|
|
||||||
import { getSvgInfo } from "@pureadmin/utils";
|
|
||||||
import { addIcon } from "@iconify/vue/dist/offline";
|
import { addIcon } from "@iconify/vue/dist/offline";
|
||||||
|
|
||||||
// https://icon-sets.iconify.design/ep/?keyword=ep
|
/**
|
||||||
import EpHomeFilled from "~icons/ep/home-filled?raw";
|
* 这里存放本地图标,在 src/layout/index.vue 文件中加载,避免在首启动加载
|
||||||
|
*/
|
||||||
|
|
||||||
// https://icon-sets.iconify.design/ri/?keyword=ri
|
// 本地菜单图标,后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
|
||||||
import RiSearchLine from "~icons/ri/search-line?raw";
|
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||||
import RiInformationLine from "~icons/ri/information-line?raw";
|
import InformationLine from "@iconify-icons/ri/information-line";
|
||||||
|
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||||
|
|
||||||
const icons = [
|
addIcon("homeFilled", HomeFilled);
|
||||||
// Element Plus Icon: https://github.com/element-plus/element-plus-icons
|
addIcon("informationLine", InformationLine);
|
||||||
["ep/home-filled", EpHomeFilled],
|
addIcon("lollipop", Lollipop);
|
||||||
// Remix Icon: https://github.com/Remix-Design/RemixIcon
|
|
||||||
["ri/search-line", RiSearchLine],
|
|
||||||
["ri/information-line", RiInformationLine]
|
|
||||||
];
|
|
||||||
|
|
||||||
// 本地菜单图标,后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
|
|
||||||
icons.forEach(([name, icon]) => {
|
|
||||||
addIcon(name as string, getSvgInfo(icon as string));
|
|
||||||
});
|
|
||||||
|
@ -13,8 +13,7 @@ export interface iconType {
|
|||||||
align?: string;
|
align?: string;
|
||||||
onLoad?: Function;
|
onLoad?: Function;
|
||||||
includes?: Function;
|
includes?: Function;
|
||||||
// svg 需要什么SVG属性自行添加
|
|
||||||
fill?: string;
|
// all icon
|
||||||
// all icon
|
|
||||||
style?: object;
|
style?: object;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
import perms from "./src/perms";
|
|
||||||
|
|
||||||
const Perms = perms;
|
|
||||||
|
|
||||||
export { Perms };
|
|
@ -1,20 +0,0 @@
|
|||||||
import { defineComponent, Fragment } from "vue";
|
|
||||||
import { hasPerms } from "@/utils/auth";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "Perms",
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: undefined,
|
|
||||||
default: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(props, { slots }) {
|
|
||||||
return () => {
|
|
||||||
if (!slots) return null;
|
|
||||||
return hasPerms(props.value) ? (
|
|
||||||
<Fragment>{slots.default?.()}</Fragment>
|
|
||||||
) : null;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,5 +0,0 @@
|
|||||||
import pureTableBar from "./src/bar";
|
|
||||||
import { withInstall } from "@pureadmin/utils";
|
|
||||||
|
|
||||||
/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
|
|
||||||
export const PureTableBar = withInstall(pureTableBar);
|
|
@ -1,393 +0,0 @@
|
|||||||
import Sortable from "sortablejs";
|
|
||||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
|
||||||
import {
|
|
||||||
type PropType,
|
|
||||||
ref,
|
|
||||||
unref,
|
|
||||||
computed,
|
|
||||||
nextTick,
|
|
||||||
defineComponent,
|
|
||||||
getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
import {
|
|
||||||
delay,
|
|
||||||
cloneDeep,
|
|
||||||
isBoolean,
|
|
||||||
isFunction,
|
|
||||||
getKeyList
|
|
||||||
} from "@pureadmin/utils";
|
|
||||||
|
|
||||||
import Fullscreen from "~icons/ri/fullscreen-fill";
|
|
||||||
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
|
|
||||||
import DragIcon from "@/assets/table-bar/drag.svg?component";
|
|
||||||
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
|
|
||||||
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
|
|
||||||
import SettingIcon from "@/assets/table-bar/settings.svg?component";
|
|
||||||
import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
/** 头部最左边的标题 */
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: "列表"
|
|
||||||
},
|
|
||||||
/** 对于树形表格,如果想启用展开和折叠功能,传入当前表格的ref即可 */
|
|
||||||
tableRef: {
|
|
||||||
type: Object as PropType<any>
|
|
||||||
},
|
|
||||||
/** 需要展示的列 */
|
|
||||||
columns: {
|
|
||||||
type: Array as PropType<TableColumnList>,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
isExpandAll: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
tableKey: {
|
|
||||||
type: [String, Number] as PropType<string | number>,
|
|
||||||
default: "0"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "PureTableBar",
|
|
||||||
props,
|
|
||||||
emits: ["refresh", "fullscreen"],
|
|
||||||
setup(props, { emit, slots, attrs }) {
|
|
||||||
const size = ref("default");
|
|
||||||
const loading = ref(false);
|
|
||||||
const checkAll = ref(true);
|
|
||||||
const isFullscreen = ref(false);
|
|
||||||
const isIndeterminate = ref(false);
|
|
||||||
const instance = getCurrentInstance()!;
|
|
||||||
const isExpandAll = ref(props.isExpandAll);
|
|
||||||
const filterColumns = cloneDeep(props?.columns).filter(column =>
|
|
||||||
isBoolean(column?.hide)
|
|
||||||
? !column.hide
|
|
||||||
: !(isFunction(column?.hide) && column?.hide())
|
|
||||||
);
|
|
||||||
let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
|
|
||||||
const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
|
|
||||||
const dynamicColumns = ref(cloneDeep(props?.columns));
|
|
||||||
|
|
||||||
const getDropdownItemStyle = computed(() => {
|
|
||||||
return s => {
|
|
||||||
return {
|
|
||||||
background:
|
|
||||||
s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
|
||||||
color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
|
|
||||||
};
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const iconClass = computed(() => {
|
|
||||||
return [
|
|
||||||
"text-black",
|
|
||||||
"dark:text-white",
|
|
||||||
"duration-100",
|
|
||||||
"hover:text-primary!",
|
|
||||||
"cursor-pointer",
|
|
||||||
"outline-hidden"
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
const topClass = computed(() => {
|
|
||||||
return [
|
|
||||||
"flex",
|
|
||||||
"justify-between",
|
|
||||||
"pt-[3px]",
|
|
||||||
"px-[11px]",
|
|
||||||
"border-b-[1px]",
|
|
||||||
"border-solid",
|
|
||||||
"border-[#dcdfe6]",
|
|
||||||
"dark:border-[#303030]"
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
function onReFresh() {
|
|
||||||
loading.value = true;
|
|
||||||
emit("refresh");
|
|
||||||
delay(500).then(() => (loading.value = false));
|
|
||||||
}
|
|
||||||
|
|
||||||
function onExpand() {
|
|
||||||
isExpandAll.value = !isExpandAll.value;
|
|
||||||
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onFullscreen() {
|
|
||||||
isFullscreen.value = !isFullscreen.value;
|
|
||||||
emit("fullscreen", isFullscreen.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleRowExpansionAll(data, isExpansion) {
|
|
||||||
data.forEach(item => {
|
|
||||||
props.tableRef.toggleRowExpansion(item, isExpansion);
|
|
||||||
if (item.children !== undefined && item.children !== null) {
|
|
||||||
toggleRowExpansionAll(item.children, isExpansion);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCheckAllChange(val: boolean) {
|
|
||||||
checkedColumns.value = val ? checkColumnList : [];
|
|
||||||
isIndeterminate.value = false;
|
|
||||||
dynamicColumns.value.map(column =>
|
|
||||||
val ? (column.hide = false) : (column.hide = true)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCheckedColumnsChange(value: string[]) {
|
|
||||||
checkedColumns.value = value;
|
|
||||||
const checkedCount = value.length;
|
|
||||||
checkAll.value = checkedCount === checkColumnList.length;
|
|
||||||
isIndeterminate.value =
|
|
||||||
checkedCount > 0 && checkedCount < checkColumnList.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCheckColumnListChange(val: boolean, label: string) {
|
|
||||||
dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onReset() {
|
|
||||||
checkAll.value = true;
|
|
||||||
isIndeterminate.value = false;
|
|
||||||
dynamicColumns.value = cloneDeep(props?.columns);
|
|
||||||
checkColumnList = [];
|
|
||||||
checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
|
|
||||||
checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
|
|
||||||
}
|
|
||||||
|
|
||||||
const dropdown = {
|
|
||||||
dropdown: () => (
|
|
||||||
<el-dropdown-menu class="translation">
|
|
||||||
<el-dropdown-item
|
|
||||||
style={getDropdownItemStyle.value("large")}
|
|
||||||
onClick={() => (size.value = "large")}
|
|
||||||
>
|
|
||||||
宽松
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item
|
|
||||||
style={getDropdownItemStyle.value("default")}
|
|
||||||
onClick={() => (size.value = "default")}
|
|
||||||
>
|
|
||||||
默认
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item
|
|
||||||
style={getDropdownItemStyle.value("small")}
|
|
||||||
onClick={() => (size.value = "small")}
|
|
||||||
>
|
|
||||||
紧凑
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 列展示拖拽排序 */
|
|
||||||
const rowDrop = (event: { preventDefault: () => void }) => {
|
|
||||||
event.preventDefault();
|
|
||||||
nextTick(() => {
|
|
||||||
const wrapper: HTMLElement = (
|
|
||||||
instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
|
|
||||||
).$el.firstElementChild;
|
|
||||||
Sortable.create(wrapper, {
|
|
||||||
animation: 300,
|
|
||||||
handle: ".drag-btn",
|
|
||||||
onEnd: ({ newIndex, oldIndex, item }) => {
|
|
||||||
const targetThElem = item;
|
|
||||||
const wrapperElem = targetThElem.parentNode as HTMLElement;
|
|
||||||
const oldColumn = dynamicColumns.value[oldIndex];
|
|
||||||
const newColumn = dynamicColumns.value[newIndex];
|
|
||||||
if (oldColumn?.fixed || newColumn?.fixed) {
|
|
||||||
// 当前列存在fixed属性 则不可拖拽
|
|
||||||
const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
|
|
||||||
if (newIndex > oldIndex) {
|
|
||||||
wrapperElem.insertBefore(targetThElem, oldThElem);
|
|
||||||
} else {
|
|
||||||
wrapperElem.insertBefore(
|
|
||||||
targetThElem,
|
|
||||||
oldThElem ? oldThElem.nextElementSibling : oldThElem
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
|
|
||||||
dynamicColumns.value.splice(newIndex, 0, currentRow);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const isFixedColumn = (label: string) => {
|
|
||||||
return dynamicColumns.value.filter(item => item.label === label)[0].fixed
|
|
||||||
? true
|
|
||||||
: false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const rendTippyProps = (content: string) => {
|
|
||||||
// https://vue-tippy.netlify.app/props
|
|
||||||
return {
|
|
||||||
content,
|
|
||||||
offset: [0, 18],
|
|
||||||
duration: [300, 0],
|
|
||||||
followCursor: true,
|
|
||||||
hideOnClick: "toggle"
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const reference = {
|
|
||||||
reference: () => (
|
|
||||||
<SettingIcon
|
|
||||||
class={["w-[16px]", iconClass.value]}
|
|
||||||
v-tippy={rendTippyProps("列设置")}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
{...attrs}
|
|
||||||
class={[
|
|
||||||
"w-full",
|
|
||||||
"px-2",
|
|
||||||
"pb-2",
|
|
||||||
"bg-bg_color",
|
|
||||||
isFullscreen.value
|
|
||||||
? ["h-full!", "z-2002", "fixed", "inset-0"]
|
|
||||||
: "mt-2"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<div class="flex justify-between w-full h-[60px] p-4">
|
|
||||||
{slots?.title ? (
|
|
||||||
slots.title()
|
|
||||||
) : (
|
|
||||||
<p class="font-bold truncate">{props.title}</p>
|
|
||||||
)}
|
|
||||||
<div class="flex items-center justify-around">
|
|
||||||
{slots?.buttons ? (
|
|
||||||
<div class="flex mr-4">{slots.buttons()}</div>
|
|
||||||
) : null}
|
|
||||||
{props.tableRef?.size ? (
|
|
||||||
<>
|
|
||||||
<ExpandIcon
|
|
||||||
class={["w-[16px]", iconClass.value]}
|
|
||||||
style={{
|
|
||||||
transform: isExpandAll.value ? "none" : "rotate(-90deg)"
|
|
||||||
}}
|
|
||||||
v-tippy={rendTippyProps(
|
|
||||||
isExpandAll.value ? "折叠" : "展开"
|
|
||||||
)}
|
|
||||||
onClick={() => onExpand()}
|
|
||||||
/>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
<RefreshIcon
|
|
||||||
class={[
|
|
||||||
"w-[16px]",
|
|
||||||
iconClass.value,
|
|
||||||
loading.value ? "animate-spin" : ""
|
|
||||||
]}
|
|
||||||
v-tippy={rendTippyProps("刷新")}
|
|
||||||
onClick={() => onReFresh()}
|
|
||||||
/>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-dropdown
|
|
||||||
v-slots={dropdown}
|
|
||||||
trigger="click"
|
|
||||||
v-tippy={rendTippyProps("密度")}
|
|
||||||
>
|
|
||||||
<CollapseIcon class={["w-[16px]", iconClass.value]} />
|
|
||||||
</el-dropdown>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
|
|
||||||
<el-popover
|
|
||||||
v-slots={reference}
|
|
||||||
placement="bottom-start"
|
|
||||||
popper-style={{ padding: 0 }}
|
|
||||||
width="200"
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
<div class={[topClass.value]}>
|
|
||||||
<el-checkbox
|
|
||||||
class="-mr-1!"
|
|
||||||
label="列展示"
|
|
||||||
v-model={checkAll.value}
|
|
||||||
indeterminate={isIndeterminate.value}
|
|
||||||
onChange={value => handleCheckAllChange(value)}
|
|
||||||
/>
|
|
||||||
<el-button type="primary" link onClick={() => onReset()}>
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-[6px] pl-[11px]">
|
|
||||||
<el-scrollbar max-height="36vh">
|
|
||||||
<el-checkbox-group
|
|
||||||
ref={`GroupRef${unref(props.tableKey)}`}
|
|
||||||
modelValue={checkedColumns.value}
|
|
||||||
onChange={value => handleCheckedColumnsChange(value)}
|
|
||||||
>
|
|
||||||
<el-space
|
|
||||||
direction="vertical"
|
|
||||||
alignment="flex-start"
|
|
||||||
size={0}
|
|
||||||
>
|
|
||||||
{checkColumnList.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div class="flex items-center">
|
|
||||||
<DragIcon
|
|
||||||
class={[
|
|
||||||
"drag-btn w-[16px] mr-2",
|
|
||||||
isFixedColumn(item)
|
|
||||||
? "cursor-no-drop!"
|
|
||||||
: "cursor-grab!"
|
|
||||||
]}
|
|
||||||
onMouseenter={(event: {
|
|
||||||
preventDefault: () => void;
|
|
||||||
}) => rowDrop(event)}
|
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
key={index}
|
|
||||||
label={item}
|
|
||||||
value={item}
|
|
||||||
onChange={value =>
|
|
||||||
handleCheckColumnListChange(value, item)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
title={item}
|
|
||||||
class="inline-block w-[120px] truncate hover:text-text_color_primary"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</span>
|
|
||||||
</el-checkbox>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</el-space>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
|
|
||||||
<iconifyIconOffline
|
|
||||||
class={["w-[16px]", iconClass.value]}
|
|
||||||
icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
|
|
||||||
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
|
|
||||||
onClick={() => onFullscreen()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{slots.default({
|
|
||||||
size: size.value,
|
|
||||||
dynamicColumns: dynamicColumns.value
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,8 +0,0 @@
|
|||||||
import reSegmented from "./src/index";
|
|
||||||
import { withInstall } from "@pureadmin/utils";
|
|
||||||
|
|
||||||
/** 分段控制器组件 */
|
|
||||||
export const ReSegmented = withInstall(reSegmented);
|
|
||||||
|
|
||||||
export default ReSegmented;
|
|
||||||
export type { OptionsType } from "./src/type";
|
|
@ -1,156 +0,0 @@
|
|||||||
.pure-segmented {
|
|
||||||
--pure-control-padding-horizontal: 12px;
|
|
||||||
--pure-control-padding-horizontal-sm: 8px;
|
|
||||||
--pure-segmented-track-padding: 2px;
|
|
||||||
--pure-segmented-line-width: 1px;
|
|
||||||
|
|
||||||
--pure-segmented-border-radius-small: 4px;
|
|
||||||
--pure-segmented-border-radius-base: 6px;
|
|
||||||
--pure-segmented-border-radius-large: 8px;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
padding: var(--pure-segmented-track-padding);
|
|
||||||
font-size: var(--el-font-size-base);
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
background-color: rgb(0 0 0 / 4%);
|
|
||||||
border-radius: var(--pure-segmented-border-radius-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-block {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-block .pure-segmented-item {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* small */
|
|
||||||
.pure-segmented.pure-segmented--small {
|
|
||||||
border-radius: var(--pure-segmented-border-radius-small);
|
|
||||||
}
|
|
||||||
.pure-segmented.pure-segmented--small .pure-segmented-item {
|
|
||||||
border-radius: var(--el-border-radius-small);
|
|
||||||
}
|
|
||||||
.pure-segmented.pure-segmented--small .pure-segmented-item > div {
|
|
||||||
min-height: calc(
|
|
||||||
var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
line-height: calc(
|
|
||||||
var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
padding: 0
|
|
||||||
calc(
|
|
||||||
var(--pure-control-padding-horizontal-sm) -
|
|
||||||
var(--pure-segmented-line-width)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* large */
|
|
||||||
.pure-segmented.pure-segmented--large {
|
|
||||||
border-radius: var(--pure-segmented-border-radius-large);
|
|
||||||
}
|
|
||||||
.pure-segmented.pure-segmented--large .pure-segmented-item {
|
|
||||||
border-radius: calc(
|
|
||||||
var(--el-border-radius-base) + var(--el-border-radius-small)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.pure-segmented.pure-segmented--large .pure-segmented-item > div {
|
|
||||||
min-height: calc(
|
|
||||||
var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
line-height: calc(
|
|
||||||
var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
padding: 0
|
|
||||||
calc(
|
|
||||||
var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
|
|
||||||
);
|
|
||||||
font-size: var(--el-font-size-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* default */
|
|
||||||
.pure-segmented-item {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--el-border-radius-base);
|
|
||||||
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
||||||
}
|
|
||||||
.pure-segmented .pure-segmented-item > div {
|
|
||||||
min-height: calc(
|
|
||||||
var(--el-component-size) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
line-height: calc(
|
|
||||||
var(--el-component-size) - var(--pure-segmented-track-padding) * 2
|
|
||||||
);
|
|
||||||
padding: 0
|
|
||||||
calc(
|
|
||||||
var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
|
|
||||||
);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-group {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-items: flex-start;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item-selected {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: none;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4px 0;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow:
|
|
||||||
0 2px 8px -2px rgb(0 0 0 / 5%),
|
|
||||||
0 1px 4px -1px rgb(0 0 0 / 7%),
|
|
||||||
0 0 1px rgb(0 0 0 / 7%);
|
|
||||||
transition:
|
|
||||||
transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
||||||
width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
||||||
will-change: transform, width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item > input {
|
|
||||||
position: absolute;
|
|
||||||
inset-block-start: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item-icon svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item-disabled {
|
|
||||||
color: rgba(0, 0, 0, 0.25);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
@ -1,216 +0,0 @@
|
|||||||
import "./index.css";
|
|
||||||
import type { OptionsType } from "./type";
|
|
||||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
||||||
import {
|
|
||||||
useDark,
|
|
||||||
isNumber,
|
|
||||||
isFunction,
|
|
||||||
useResizeObserver
|
|
||||||
} from "@pureadmin/utils";
|
|
||||||
import {
|
|
||||||
type PropType,
|
|
||||||
h,
|
|
||||||
ref,
|
|
||||||
toRef,
|
|
||||||
watch,
|
|
||||||
nextTick,
|
|
||||||
defineComponent,
|
|
||||||
getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
options: {
|
|
||||||
type: Array<OptionsType>,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
/** 默认选中,按照第一个索引为 `0` 的模式,可选(`modelValue`只有传`number`类型时才为响应式) */
|
|
||||||
modelValue: {
|
|
||||||
type: undefined,
|
|
||||||
require: false,
|
|
||||||
default: "0"
|
|
||||||
},
|
|
||||||
/** 将宽度调整为父元素宽度 */
|
|
||||||
block: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
/** 控件尺寸 */
|
|
||||||
size: {
|
|
||||||
type: String as PropType<"small" | "default" | "large">
|
|
||||||
},
|
|
||||||
/** 是否全局禁用,默认 `false` */
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
/** 当内容发生变化时,设置 `resize` 可使其自适应容器位置 */
|
|
||||||
resize: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "ReSegmented",
|
|
||||||
props,
|
|
||||||
emits: ["change", "update:modelValue"],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const width = ref(0);
|
|
||||||
const translateX = ref(0);
|
|
||||||
const { isDark } = useDark();
|
|
||||||
const initStatus = ref(false);
|
|
||||||
const curMouseActive = ref(-1);
|
|
||||||
const segmentedItembg = ref("");
|
|
||||||
const instance = getCurrentInstance()!;
|
|
||||||
const curIndex = isNumber(props.modelValue)
|
|
||||||
? toRef(props, "modelValue")
|
|
||||||
: ref(0);
|
|
||||||
|
|
||||||
function handleChange({ option, index }, event: Event) {
|
|
||||||
if (props.disabled || option.disabled) return;
|
|
||||||
event.preventDefault();
|
|
||||||
isNumber(props.modelValue)
|
|
||||||
? emit("update:modelValue", index)
|
|
||||||
: (curIndex.value = index);
|
|
||||||
segmentedItembg.value = "";
|
|
||||||
emit("change", { index, option });
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseenter({ option, index }, event: Event) {
|
|
||||||
if (props.disabled) return;
|
|
||||||
event.preventDefault();
|
|
||||||
curMouseActive.value = index;
|
|
||||||
if (option.disabled || curIndex.value === index) {
|
|
||||||
segmentedItembg.value = "";
|
|
||||||
} else {
|
|
||||||
segmentedItembg.value = isDark.value
|
|
||||||
? "#1f1f1f"
|
|
||||||
: "rgba(0, 0, 0, 0.06)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseleave(_, event: Event) {
|
|
||||||
if (props.disabled) return;
|
|
||||||
event.preventDefault();
|
|
||||||
curMouseActive.value = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleInit(index = curIndex.value) {
|
|
||||||
nextTick(() => {
|
|
||||||
const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
|
|
||||||
if (!curLabelRef) return;
|
|
||||||
width.value = curLabelRef.clientWidth;
|
|
||||||
translateX.value = curLabelRef.offsetLeft;
|
|
||||||
initStatus.value = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleResizeInit() {
|
|
||||||
useResizeObserver(".pure-segmented", () => {
|
|
||||||
nextTick(() => {
|
|
||||||
handleInit(curIndex.value);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
(props.block || props.resize) && handleResizeInit();
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => curIndex.value,
|
|
||||||
index => {
|
|
||||||
nextTick(() => {
|
|
||||||
handleInit(index);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(() => props.size, handleResizeInit, {
|
|
||||||
immediate: true
|
|
||||||
});
|
|
||||||
|
|
||||||
const rendLabel = () => {
|
|
||||||
return props.options.map((option, index) => {
|
|
||||||
return (
|
|
||||||
<label
|
|
||||||
ref={`labelRef${index}`}
|
|
||||||
class={[
|
|
||||||
"pure-segmented-item",
|
|
||||||
(props.disabled || option?.disabled) &&
|
|
||||||
"pure-segmented-item-disabled"
|
|
||||||
]}
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
curMouseActive.value === index ? segmentedItembg.value : "",
|
|
||||||
color: props.disabled
|
|
||||||
? null
|
|
||||||
: !option.disabled &&
|
|
||||||
(curIndex.value === index || curMouseActive.value === index)
|
|
||||||
? isDark.value
|
|
||||||
? "rgba(255, 255, 255, 0.85)"
|
|
||||||
: "rgba(0,0,0,.88)"
|
|
||||||
: ""
|
|
||||||
}}
|
|
||||||
onMouseenter={event => handleMouseenter({ option, index }, event)}
|
|
||||||
onMouseleave={event => handleMouseleave({ option, index }, event)}
|
|
||||||
onClick={event => handleChange({ option, index }, event)}
|
|
||||||
>
|
|
||||||
<input type="radio" name="segmented" />
|
|
||||||
<div
|
|
||||||
class="pure-segmented-item-label"
|
|
||||||
v-tippy={{
|
|
||||||
content: option?.tip,
|
|
||||||
zIndex: 41000
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option.icon && !isFunction(option.label) ? (
|
|
||||||
<span
|
|
||||||
class="pure-segmented-item-icon"
|
|
||||||
style={{ marginRight: option.label ? "6px" : 0 }}
|
|
||||||
>
|
|
||||||
{h(
|
|
||||||
useRenderIcon(option.icon, {
|
|
||||||
...option?.iconAttrs
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
{option.label ? (
|
|
||||||
isFunction(option.label) ? (
|
|
||||||
h(option.label)
|
|
||||||
) : (
|
|
||||||
<span>{option.label}</span>
|
|
||||||
)
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div
|
|
||||||
class={{
|
|
||||||
"pure-segmented": true,
|
|
||||||
"pure-segmented-block": props.block,
|
|
||||||
"pure-segmented--large": props.size === "large",
|
|
||||||
"pure-segmented--small": props.size === "small"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="pure-segmented-group">
|
|
||||||
<div
|
|
||||||
class="pure-segmented-item-selected"
|
|
||||||
style={{
|
|
||||||
width: `${width.value}px`,
|
|
||||||
transform: `translateX(${translateX.value}px)`,
|
|
||||||
display: initStatus.value ? "block" : "none"
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
{rendLabel()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,20 +0,0 @@
|
|||||||
import type { VNode, Component } from "vue";
|
|
||||||
import type { iconType } from "@/components/ReIcon/src/types.ts";
|
|
||||||
|
|
||||||
export interface OptionsType {
|
|
||||||
/** 文字 */
|
|
||||||
label?: string | (() => VNode | Component);
|
|
||||||
/**
|
|
||||||
* @description 图标,采用平台内置的 `useRenderIcon` 函数渲染
|
|
||||||
* @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
|
|
||||||
*/
|
|
||||||
icon?: string | Component;
|
|
||||||
/** 图标属性、样式配置 */
|
|
||||||
iconAttrs?: iconType;
|
|
||||||
/** 值 */
|
|
||||||
value?: any;
|
|
||||||
/** 是否禁用 */
|
|
||||||
disabled?: boolean;
|
|
||||||
/** `tooltip` 提示 */
|
|
||||||
tip?: string;
|
|
||||||
}
|
|
@ -1,7 +0,0 @@
|
|||||||
import reText from "./src/index.vue";
|
|
||||||
import { withInstall } from "@pureadmin/utils";
|
|
||||||
|
|
||||||
/** 支持`Tooltip`提示的文本省略组件 */
|
|
||||||
export const ReText = withInstall(reText);
|
|
||||||
|
|
||||||
export default ReText;
|
|
@ -1,69 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { h, onMounted, ref } from "vue";
|
|
||||||
import { type TippyOptions, type TippyContent, useTippy } from "vue-tippy";
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: "ReText"
|
|
||||||
});
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
// 行数
|
|
||||||
lineClamp: {
|
|
||||||
type: [String, Number]
|
|
||||||
},
|
|
||||||
tippyProps: {
|
|
||||||
type: Object as PropType<TippyOptions>,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const slots = defineSlots<{
|
|
||||||
content: () => TippyContent;
|
|
||||||
default: () => any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const textRef = ref();
|
|
||||||
const tippyFunc = ref();
|
|
||||||
|
|
||||||
const isTextEllipsis = (el: HTMLElement) => {
|
|
||||||
if (!props.lineClamp) {
|
|
||||||
// 单行省略判断
|
|
||||||
return el.scrollWidth > el.clientWidth;
|
|
||||||
} else {
|
|
||||||
// 多行省略判断
|
|
||||||
return el.scrollHeight > el.clientHeight;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTippyProps = () => ({
|
|
||||||
content: h(slots.content || slots.default),
|
|
||||||
...props.tippyProps
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleHover(event: MouseEvent) {
|
|
||||||
if (isTextEllipsis(event.target as HTMLElement)) {
|
|
||||||
tippyFunc.value.setProps(getTippyProps());
|
|
||||||
tippyFunc.value.enable();
|
|
||||||
} else {
|
|
||||||
tippyFunc.value.disable();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-text
|
|
||||||
v-bind="{
|
|
||||||
truncated: !lineClamp,
|
|
||||||
lineClamp,
|
|
||||||
...$attrs
|
|
||||||
}"
|
|
||||||
ref="textRef"
|
|
||||||
@mouseover.self="handleHover"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</el-text>
|
|
||||||
</template>
|
|
@ -1,5 +1,5 @@
|
|||||||
|
import { App } from "vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import type { App } from "vue";
|
|
||||||
|
|
||||||
let config: object = {};
|
let config: object = {};
|
||||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||||
@ -8,7 +8,7 @@ const setConfig = (cfg?: unknown) => {
|
|||||||
config = Object.assign(config, cfg);
|
config = Object.assign(config, cfg);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getConfig = (key?: string): PlatformConfigs => {
|
const getConfig = (key?: string): ServerConfigs => {
|
||||||
if (typeof key === "string") {
|
if (typeof key === "string") {
|
||||||
const arr = key.split(".");
|
const arr = key.split(".");
|
||||||
if (arr && arr.length) {
|
if (arr && arr.length) {
|
||||||
@ -27,15 +27,15 @@ const getConfig = (key?: string): PlatformConfigs => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** 获取项目动态全局配置 */
|
/** 获取项目动态全局配置 */
|
||||||
export const getPlatformConfig = async (app: App): Promise<undefined> => {
|
export const getServerConfig = async (app: App): Promise<undefined> => {
|
||||||
app.config.globalProperties.$config = getConfig();
|
app.config.globalProperties.$config = getConfig();
|
||||||
return axios({
|
return axios({
|
||||||
method: "get",
|
method: "get",
|
||||||
url: `${VITE_PUBLIC_PATH}platform-config.json`
|
url: `${VITE_PUBLIC_PATH}serverConfig.json`
|
||||||
})
|
})
|
||||||
.then(({ data: config }) => {
|
.then(({ data: config }) => {
|
||||||
let $config = app.config.globalProperties.$config;
|
let $config = app.config.globalProperties.$config;
|
||||||
// 自动注入系统配置
|
// 自动注入项目配置
|
||||||
if (app && $config && typeof config === "object") {
|
if (app && $config && typeof config === "object") {
|
||||||
$config = Object.assign($config, config);
|
$config = Object.assign($config, config);
|
||||||
app.config.globalProperties.$config = $config;
|
app.config.globalProperties.$config = $config;
|
||||||
@ -45,11 +45,8 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
|
|||||||
return $config;
|
return $config;
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
throw "请在public文件夹下添加platform-config.json配置文件";
|
throw "请在public文件夹下添加serverConfig.json配置文件";
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 本地响应式存储的命名空间 */
|
export { getConfig, setConfig };
|
||||||
const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace;
|
|
||||||
|
|
||||||
export { getConfig, setConfig, responsiveStorageNameSpace };
|
|
||||||
|
@ -1,15 +1,13 @@
|
|||||||
import { hasAuth } from "@/router/utils";
|
import { hasAuth } from "@/router/utils";
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
import { Directive, type DirectiveBinding } from "vue";
|
||||||
|
|
||||||
export const auth: Directive = {
|
export const auth: Directive = {
|
||||||
mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
const { value } = binding;
|
const { value } = binding;
|
||||||
if (value) {
|
if (value) {
|
||||||
!hasAuth(value) && el.parentNode?.removeChild(el);
|
!hasAuth(value) && el.parentNode?.removeChild(el);
|
||||||
} else {
|
} else {
|
||||||
throw new Error(
|
throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
|
||||||
"[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1,33 +0,0 @@
|
|||||||
import { message } from "@/utils/message";
|
|
||||||
import { useEventListener } from "@vueuse/core";
|
|
||||||
import { copyTextToClipboard } from "@pureadmin/utils";
|
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
|
||||||
|
|
||||||
export interface CopyEl extends HTMLElement {
|
|
||||||
copyValue: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 文本复制指令(默认双击复制) */
|
|
||||||
export const copy: Directive = {
|
|
||||||
mounted(el: CopyEl, binding: DirectiveBinding<string>) {
|
|
||||||
const { value } = binding;
|
|
||||||
if (value) {
|
|
||||||
el.copyValue = value;
|
|
||||||
const arg = binding.arg ?? "dblclick";
|
|
||||||
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
|
||||||
useEventListener(el, arg, () => {
|
|
||||||
const success = copyTextToClipboard(el.copyValue);
|
|
||||||
success
|
|
||||||
? message("复制成功", { type: "success" })
|
|
||||||
: message("复制失败", { type: "error" });
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
'[Directive: copy]: need value! Like v-copy="modelValue"'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updated(el: CopyEl, binding: DirectiveBinding) {
|
|
||||||
el.copyValue = binding.value;
|
|
||||||
}
|
|
||||||
};
|
|
27
src/directives/elResizeDetector/index.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Directive, type DirectiveBinding, type VNode } from "vue";
|
||||||
|
import elementResizeDetectorMaker from "element-resize-detector";
|
||||||
|
import type { Erd } from "element-resize-detector";
|
||||||
|
import { emitter } from "@/utils/mitt";
|
||||||
|
|
||||||
|
const erd: Erd = elementResizeDetectorMaker({
|
||||||
|
strategy: "scroll"
|
||||||
|
});
|
||||||
|
|
||||||
|
export const resize: Directive = {
|
||||||
|
mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
|
||||||
|
erd.listenTo(el, elem => {
|
||||||
|
const width = elem.offsetWidth;
|
||||||
|
const height = elem.offsetHeight;
|
||||||
|
if (binding?.instance) {
|
||||||
|
emitter.emit("resize", { detail: { width, height } });
|
||||||
|
} else {
|
||||||
|
vnode.el.dispatchEvent(
|
||||||
|
new CustomEvent("resize", { detail: { width, height } })
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
unmounted(el: HTMLElement) {
|
||||||
|
erd.uninstall(el);
|
||||||
|
}
|
||||||
|
};
|
@ -1,6 +1,2 @@
|
|||||||
export * from "./auth";
|
export * from "./auth";
|
||||||
export * from "./copy";
|
export * from "./elResizeDetector";
|
||||||
export * from "./longpress";
|
|
||||||
export * from "./optimize";
|
|
||||||
export * from "./perms";
|
|
||||||
export * from "./ripple";
|
|
||||||
|
@ -1,63 +0,0 @@
|
|||||||
import { useEventListener } from "@vueuse/core";
|
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
|
||||||
import { subBefore, subAfter, isFunction } from "@pureadmin/utils";
|
|
||||||
|
|
||||||
export const longpress: Directive = {
|
|
||||||
mounted(el: HTMLElement, binding: DirectiveBinding<Function>) {
|
|
||||||
const cb = binding.value;
|
|
||||||
if (cb && isFunction(cb)) {
|
|
||||||
let timer = null;
|
|
||||||
let interTimer = null;
|
|
||||||
let num = 500;
|
|
||||||
let interNum = null;
|
|
||||||
const isInter = binding?.arg?.includes(":") ?? false;
|
|
||||||
|
|
||||||
if (isInter) {
|
|
||||||
num = Number(subBefore(binding.arg, ":"));
|
|
||||||
interNum = Number(subAfter(binding.arg, ":"));
|
|
||||||
} else if (binding.arg) {
|
|
||||||
num = Number(binding.arg);
|
|
||||||
}
|
|
||||||
|
|
||||||
const clear = () => {
|
|
||||||
if (timer) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
timer = null;
|
|
||||||
}
|
|
||||||
if (interTimer) {
|
|
||||||
clearInterval(interTimer);
|
|
||||||
interTimer = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDownInter = (ev: PointerEvent) => {
|
|
||||||
ev.preventDefault();
|
|
||||||
if (interTimer === null) {
|
|
||||||
interTimer = setInterval(() => cb(), interNum);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDown = (ev: PointerEvent) => {
|
|
||||||
clear();
|
|
||||||
ev.preventDefault();
|
|
||||||
if (timer === null) {
|
|
||||||
timer = isInter
|
|
||||||
? setTimeout(() => {
|
|
||||||
cb();
|
|
||||||
onDownInter(ev);
|
|
||||||
}, num)
|
|
||||||
: setTimeout(() => cb(), num);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
|
||||||
useEventListener(el, "pointerdown", onDown);
|
|
||||||
useEventListener(el, "pointerup", clear);
|
|
||||||
useEventListener(el, "pointerleave", clear);
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
'[Directive: longpress]: need callback and callback must be a function! Like v-longpress="callback"'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
@ -1,68 +0,0 @@
|
|||||||
import {
|
|
||||||
isArray,
|
|
||||||
throttle,
|
|
||||||
debounce,
|
|
||||||
isObject,
|
|
||||||
isFunction
|
|
||||||
} from "@pureadmin/utils";
|
|
||||||
import { useEventListener } from "@vueuse/core";
|
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
|
||||||
|
|
||||||
export interface OptimizeOptions {
|
|
||||||
/** 事件名 */
|
|
||||||
event: string;
|
|
||||||
/** 事件触发的方法 */
|
|
||||||
fn: (...params: any) => any;
|
|
||||||
/** 是否立即执行 */
|
|
||||||
immediate?: boolean;
|
|
||||||
/** 防抖或节流的延迟时间(防抖默认:`200`毫秒、节流默认:`1000`毫秒) */
|
|
||||||
timeout?: number;
|
|
||||||
/** 传递的参数 */
|
|
||||||
params?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 防抖(v-optimize或v-optimize:debounce)、节流(v-optimize:throttle)指令 */
|
|
||||||
export const optimize: Directive = {
|
|
||||||
mounted(el: HTMLElement, binding: DirectiveBinding<OptimizeOptions>) {
|
|
||||||
const { value } = binding;
|
|
||||||
const optimizeType = binding.arg ?? "debounce";
|
|
||||||
const type = ["debounce", "throttle"].find(t => t === optimizeType);
|
|
||||||
if (type) {
|
|
||||||
if (value && value.event && isFunction(value.fn)) {
|
|
||||||
let params = value?.params;
|
|
||||||
if (params) {
|
|
||||||
if (isArray(params) || isObject(params)) {
|
|
||||||
params = isObject(params) ? Array.of(params) : params;
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
"[Directive: optimize]: `params` must be an array or object"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
|
||||||
useEventListener(
|
|
||||||
el,
|
|
||||||
value.event,
|
|
||||||
type === "debounce"
|
|
||||||
? debounce(
|
|
||||||
params ? () => value.fn(...params) : value.fn,
|
|
||||||
value?.timeout ?? 200,
|
|
||||||
value?.immediate ?? false
|
|
||||||
)
|
|
||||||
: throttle(
|
|
||||||
params ? () => value.fn(...params) : value.fn,
|
|
||||||
value?.timeout ?? 1000
|
|
||||||
)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
"[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
"[Directive: optimize]: only `debounce` and `throttle` are supported"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
@ -1,15 +0,0 @@
|
|||||||
import { hasPerms } from "@/utils/auth";
|
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
|
||||||
|
|
||||||
export const perms: Directive = {
|
|
||||||
mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
|
|
||||||
const { value } = binding;
|
|
||||||
if (value) {
|
|
||||||
!hasPerms(value) && el.parentNode?.removeChild(el);
|
|
||||||
} else {
|
|
||||||
throw new Error(
|
|
||||||
"[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
@ -1,48 +0,0 @@
|
|||||||
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
|
|
||||||
$ripple-animation-transition-in:
|
|
||||||
transform 0.4s cubic-bezier(0, 0, 0.2, 1),
|
|
||||||
opacity 0.2s cubic-bezier(0, 0, 0.2, 1) !default;
|
|
||||||
$ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1) !default;
|
|
||||||
$ripple-animation-visible-opacity: 0.25 !default;
|
|
||||||
|
|
||||||
.v-ripple {
|
|
||||||
&__container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: inherit;
|
|
||||||
contain: strict;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__animation {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
background: currentcolor;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
will-change: transform, opacity;
|
|
||||||
|
|
||||||
&--enter {
|
|
||||||
opacity: 0;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--in {
|
|
||||||
opacity: $ripple-animation-visible-opacity;
|
|
||||||
transition: $ripple-animation-transition-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--out {
|
|
||||||
opacity: 0;
|
|
||||||
transition: $ripple-animation-transition-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,229 +0,0 @@
|
|||||||
import "./index.scss";
|
|
||||||
import { isObject } from "@pureadmin/utils";
|
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
|
||||||
|
|
||||||
export interface RippleOptions {
|
|
||||||
/** 自定义`ripple`颜色,支持`tailwindcss` */
|
|
||||||
class?: string;
|
|
||||||
/** 是否从中心扩散 */
|
|
||||||
center?: boolean;
|
|
||||||
circle?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RippleDirectiveBinding
|
|
||||||
extends Omit<DirectiveBinding, "modifiers" | "value"> {
|
|
||||||
value?: boolean | { class: string };
|
|
||||||
modifiers: {
|
|
||||||
center?: boolean;
|
|
||||||
circle?: boolean;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function transform(el: HTMLElement, value: string) {
|
|
||||||
el.style.transform = value;
|
|
||||||
el.style.webkitTransform = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const calculate = (
|
|
||||||
e: PointerEvent,
|
|
||||||
el: HTMLElement,
|
|
||||||
value: RippleOptions = {}
|
|
||||||
) => {
|
|
||||||
const offset = el.getBoundingClientRect();
|
|
||||||
|
|
||||||
// 获取点击位置距离 el 的垂直和水平距离
|
|
||||||
const localX = e.clientX - offset.left;
|
|
||||||
const localY = e.clientY - offset.top;
|
|
||||||
|
|
||||||
let radius = 0;
|
|
||||||
let scale = 0.3;
|
|
||||||
// 计算点击位置到 el 顶点最远距离,即为圆的最大半径(勾股定理)
|
|
||||||
if (el._ripple?.circle) {
|
|
||||||
scale = 0.15;
|
|
||||||
radius = el.clientWidth / 2;
|
|
||||||
radius = value.center
|
|
||||||
? radius
|
|
||||||
: radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
|
|
||||||
} else {
|
|
||||||
radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 中心点坐标
|
|
||||||
const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
|
|
||||||
const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
|
|
||||||
|
|
||||||
// 点击位置坐标
|
|
||||||
const x = value.center ? centerX : `${localX - radius}px`;
|
|
||||||
const y = value.center ? centerY : `${localY - radius}px`;
|
|
||||||
|
|
||||||
return { radius, scale, x, y, centerX, centerY };
|
|
||||||
};
|
|
||||||
|
|
||||||
const ripples = {
|
|
||||||
show(e: PointerEvent, el: HTMLElement, value: RippleOptions = {}) {
|
|
||||||
if (!el?._ripple?.enabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建 ripple 元素和 ripple 父元素
|
|
||||||
const container = document.createElement("span");
|
|
||||||
const animation = document.createElement("span");
|
|
||||||
|
|
||||||
container.appendChild(animation);
|
|
||||||
container.className = "v-ripple__container";
|
|
||||||
|
|
||||||
if (value.class) {
|
|
||||||
container.className += ` ${value.class}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
|
|
||||||
|
|
||||||
// ripple 圆大小
|
|
||||||
const size = `${radius * 2}px`;
|
|
||||||
|
|
||||||
animation.className = "v-ripple__animation";
|
|
||||||
animation.style.width = size;
|
|
||||||
animation.style.height = size;
|
|
||||||
|
|
||||||
el.appendChild(container);
|
|
||||||
|
|
||||||
// 获取目标元素样式表
|
|
||||||
const computed = window.getComputedStyle(el);
|
|
||||||
// 防止 position 被覆盖导致 ripple 位置有问题
|
|
||||||
if (computed && computed.position === "static") {
|
|
||||||
el.style.position = "relative";
|
|
||||||
el.dataset.previousPosition = "static";
|
|
||||||
}
|
|
||||||
|
|
||||||
animation.classList.add("v-ripple__animation--enter");
|
|
||||||
animation.classList.add("v-ripple__animation--visible");
|
|
||||||
transform(
|
|
||||||
animation,
|
|
||||||
`translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
|
|
||||||
);
|
|
||||||
animation.dataset.activated = String(performance.now());
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
animation.classList.remove("v-ripple__animation--enter");
|
|
||||||
animation.classList.add("v-ripple__animation--in");
|
|
||||||
transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
|
|
||||||
hide(el: HTMLElement | null) {
|
|
||||||
if (!el?._ripple?.enabled) return;
|
|
||||||
|
|
||||||
const ripples = el.getElementsByClassName("v-ripple__animation");
|
|
||||||
|
|
||||||
if (ripples.length === 0) return;
|
|
||||||
const animation = ripples[ripples.length - 1] as HTMLElement;
|
|
||||||
|
|
||||||
if (animation.dataset.isHiding) return;
|
|
||||||
else animation.dataset.isHiding = "true";
|
|
||||||
|
|
||||||
const diff = performance.now() - Number(animation.dataset.activated);
|
|
||||||
const delay = Math.max(250 - diff, 0);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
animation.classList.remove("v-ripple__animation--in");
|
|
||||||
animation.classList.add("v-ripple__animation--out");
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
const ripples = el.getElementsByClassName("v-ripple__animation");
|
|
||||||
if (ripples.length === 1 && el.dataset.previousPosition) {
|
|
||||||
el.style.position = el.dataset.previousPosition;
|
|
||||||
delete el.dataset.previousPosition;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (animation.parentNode?.parentNode === el)
|
|
||||||
el.removeChild(animation.parentNode);
|
|
||||||
}, 300);
|
|
||||||
}, delay);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function isRippleEnabled(value: any): value is true {
|
|
||||||
return typeof value === "undefined" || !!value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function rippleShow(e: PointerEvent) {
|
|
||||||
const value: RippleOptions = {};
|
|
||||||
const element = e.currentTarget as HTMLElement | undefined;
|
|
||||||
|
|
||||||
if (!element?._ripple || element._ripple.touched) return;
|
|
||||||
|
|
||||||
value.center = element._ripple.centered;
|
|
||||||
if (element._ripple.class) {
|
|
||||||
value.class = element._ripple.class;
|
|
||||||
}
|
|
||||||
|
|
||||||
ripples.show(e, element, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function rippleHide(e: Event) {
|
|
||||||
const element = e.currentTarget as HTMLElement | null;
|
|
||||||
if (!element?._ripple) return;
|
|
||||||
|
|
||||||
window.setTimeout(() => {
|
|
||||||
if (element._ripple) {
|
|
||||||
element._ripple.touched = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ripples.hide(element);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRipple(
|
|
||||||
el: HTMLElement,
|
|
||||||
binding: RippleDirectiveBinding,
|
|
||||||
wasEnabled: boolean
|
|
||||||
) {
|
|
||||||
const { value, modifiers } = binding;
|
|
||||||
const enabled = isRippleEnabled(value);
|
|
||||||
if (!enabled) {
|
|
||||||
ripples.hide(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
el._ripple = el._ripple ?? {};
|
|
||||||
el._ripple.enabled = enabled;
|
|
||||||
el._ripple.centered = modifiers.center;
|
|
||||||
el._ripple.circle = modifiers.circle;
|
|
||||||
if (isObject(value) && value.class) {
|
|
||||||
el._ripple.class = value.class;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (enabled && !wasEnabled) {
|
|
||||||
el.addEventListener("pointerdown", rippleShow);
|
|
||||||
el.addEventListener("pointerup", rippleHide);
|
|
||||||
} else if (!enabled && wasEnabled) {
|
|
||||||
removeListeners(el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeListeners(el: HTMLElement) {
|
|
||||||
el.removeEventListener("pointerdown", rippleShow);
|
|
||||||
el.removeEventListener("pointerup", rippleHide);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mounted(el: HTMLElement, binding: RippleDirectiveBinding) {
|
|
||||||
updateRipple(el, binding, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function unmounted(el: HTMLElement) {
|
|
||||||
delete el._ripple;
|
|
||||||
removeListeners(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
|
|
||||||
if (binding.value === binding.oldValue) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const wasEnabled = isRippleEnabled(binding.oldValue);
|
|
||||||
updateRipple(el, binding, wasEnabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Ripple: Directive = {
|
|
||||||
mounted,
|
|
||||||
unmounted,
|
|
||||||
updated
|
|
||||||
};
|
|