github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 11:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

重构图标使用方式；将element plus 改为按需导入

Browse Source
This commit is contained in:
Hooray
2022-04-25 20:21:08 +08:00
parent 33b9a11208
commit 1b3740bbc6
43 changed files with 576 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
auto-import-eslint-config.js
+6 -1
View File
@@ -46,6 +46,11 @@ module.exports = {
withDefaults: 'readonly',
// vue-router
useRoute: 'readonly',
useRouter: 'readonly'
useRouter: 'readonly',
// element plus
ElMessage: 'readonly',
ElNotification: 'readonly',
ElMessageBox: 'readonly',
ElLoading: 'readonly'
}
}
jsconfig.json
+2 -1
View File
@@ -5,7 +5,8 @@
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"jsx": "preserve"
},
"exclude": ["node_modules", "dist", "dist-test"]
}
package.json
+5 -2
View File
@@ -14,10 +14,10 @@
"lint:eslint": "eslint src/**/*.{js,vue} --fix",
"lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix",
"prepare": "husky install",
"postinstall": "esno scripts/prepare.js",
"preinstall": "npx only-allow pnpm"
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"@tinymce/tinymce-vue": "^4.0.7",
"@vueuse/core": "^8.3.1",
"@vueuse/integrations": "^8.3.1",
@@ -29,7 +29,6 @@
"mavon-editor": "^3.0.0-beta",
"mitt": "^3.0.0",
"mockjs": "^1.1.0",
"naming-style": "^1.0.1",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.0",
@@ -40,11 +39,15 @@
"vue-router": "^4.0.14"
},
"devDependencies": {
"@iconify-json/ep": "^1.1.3",
"@iconify/vue": "^3.2.1",
"@vitejs/plugin-vue": "^2.3.1",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/compiler-sfc": "^3.2.33",
"eslint": "^8.14.0",
"eslint-plugin-vue": "^8.7.1",
"esno": "^0.14.1",
"fs-extra": "^10.1.0",
"http-server": "^14.1.0",
"husky": "^7.0.4",
"lint-staged": "^12.4.0",
pnpm-lock.yaml
Generated
+76 -30
View File
@@ -1,7 +1,8 @@
lockfileVersion: 5.3
specifiers:
'@element-plus/icons-vue': ^1.1.4
'@iconify-json/ep': ^1.1.3
'@iconify/vue': ^3.2.1
'@tinymce/tinymce-vue': ^4.0.7
'@vitejs/plugin-vue': ^2.3.1
'@vitejs/plugin-vue-jsx': ^1.3.10
@@ -13,6 +14,8 @@ specifiers:
element-plus: ^2.1.10
eslint: ^8.14.0
eslint-plugin-vue: ^8.7.1
esno: ^0.14.1
fs-extra: ^10.1.0
hotkeys-js: ^3.9.0
http-server: ^14.1.0
husky: ^7.0.4
@@ -21,7 +24,6 @@ specifiers:
mavon-editor: ^3.0.0-beta
mitt: ^3.0.0
mockjs: ^1.1.0
naming-style: ^1.0.1
nprogress: ^0.2.0
path-browserify: ^1.0.1
path-to-regexp: ^6.2.0
@@ -56,7 +58,6 @@ specifiers:
vue-router: ^4.0.14
dependencies:
'@element-plus/icons-vue': 1.1.4_vue@3.2.33
'@tinymce/tinymce-vue': 4.0.7_vue@3.2.33
'@vueuse/core': 8.3.1_vue@3.2.33
'@vueuse/integrations': 8.3.1_deda4b00ac8a40f4d1264f96789e0783
@@ -68,7 +69,6 @@ dependencies:
mavon-editor: 3.0.0-beta
mitt: 3.0.0
mockjs: 1.1.0
naming-style: 1.0.1
nprogress: 0.2.0
path-browserify: 1.0.1
path-to-regexp: 6.2.0
@@ -79,11 +79,15 @@ dependencies:
vue-router: 4.0.14_vue@3.2.33
devDependencies:
'@iconify-json/ep': 1.1.3
'@iconify/vue': 3.2.1_vue@3.2.33
'@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33
'@vitejs/plugin-vue-jsx': 1.3.10
'@vue/compiler-sfc': 3.2.33
eslint: 8.14.0
eslint-plugin-vue: 8.7.1_eslint@8.14.0
esno: 0.14.1
fs-extra: 10.1.0
http-server: 14.1.0
husky: 7.0.4
lint-staged: 12.4.0
@@ -541,6 +545,24 @@ packages:
resolution: {integrity: sha1-tSBSnsIdjllFoYUd/Rwy6U45/0U=, tarball: '@humanwhocodes/object-schema/download/@humanwhocodes/object-schema-1.2.1.tgz'}
dev: true
/@iconify-json/ep/1.1.3:
resolution: {integrity: sha512-i69QdJo01daSZZ9yIkaCCxpKcxnqZNwLZU+0joNqbD+MzNpQHFVTmBaIvT44oyCpjfy5eSHF1WJ7pV0vT/O+WQ==}
dependencies:
'@iconify/types': 1.1.0
dev: true
/@iconify/types/1.1.0:
resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
dev: true
/@iconify/vue/3.2.1_vue@3.2.33:
resolution: {integrity: sha512-c4R6ZgFo1JrJ8aPMMgOPgfU7lBswihMGR+yWe/P4ZukC3kTkeT4+lkt9Pc/itVFMkwva/S/7u9YofmYv57fnNQ==}
peerDependencies:
vue: 3.x
dependencies:
vue: 3.2.33
dev: true
/@jridgewell/resolve-uri/3.0.5:
resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==}
engines: {node: '>=6.0.0'}
@@ -1258,6 +1280,12 @@ packages:
engines: {node: '>=6'}
dev: true
/builtins/4.1.0:
resolution: {integrity: sha512-1bPRZQtmKaO6h7qV1YHXNtr6nCK28k0Zo95KM4dXfILcZZwoHJBN1m3lfLv9LPkcOZlrSr+J1bzMaZFO98Yq0w==}
dependencies:
semver: 7.3.5
dev: true
/cache-base/1.0.1:
resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
engines: {node: '>=0.10.0'}
@@ -1645,7 +1673,7 @@ packages:
dev: true
/cross-spawn/7.0.3:
resolution: {integrity: sha1-9zqFudXUHQRVUcF34ogtSshXKKY=, tarball: cross-spawn/download/cross-spawn-7.0.3.tgz?cache=0&sync_timestamp=1632883303690&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcross-spawn%2Fdownload%2Fcross-spawn-7.0.3.tgz}
resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
engines: {node: '>= 8'}
dependencies:
path-key: 3.1.1
@@ -2258,6 +2286,12 @@ packages:
dev: true
optional: true
/esbuild-node-loader/0.6.5:
resolution: {integrity: sha512-uPP+dllWm38cFvDysdocutN3lfe5pTIbddAHp1ENyLzpHYqE2r+3Wo+pfg9X3p8DFWwzIisft5YkeBIthIcixw==}
dependencies:
esbuild: 0.14.30
dev: true
/esbuild-openbsd-64/0.14.30:
resolution: {integrity: sha512-UyK1MTMcy4j5fH260fsE1o6MVgWNhb62eCK2yCKCRazZv8Nqdc2WiP9ygjWidmEdCDS+A6MuVp9ozk9uoQtQpA==}
engines: {node: '>=12'}
@@ -2267,6 +2301,14 @@ packages:
dev: true
optional: true
/esbuild-register/3.3.2_esbuild@0.14.30:
resolution: {integrity: sha512-jceAtTO6zxPmCfSD5cBb3rgIK1vmuqCKYwgylHiS1BF4pq0jJiJb4K2QMuqF4BEw7XDBRatYzip0upyTzfkgsQ==}
peerDependencies:
esbuild: '>=0.12 <1'
dependencies:
esbuild: 0.14.30
dev: true
/esbuild-sunos-64/0.14.30:
resolution: {integrity: sha512-aQRtRTNKHB4YuG+xXATe5AoRTNY48IJg5vjE8ElxfmjO9+KdX7MHFkTLhlKevCD6rNANtB3qOlSIeAiXTwHNqw==}
engines: {node: '>=12'}
@@ -2457,6 +2499,17 @@ packages:
- supports-color
dev: true
/esno/0.14.1:
resolution: {integrity: sha512-yDFYw6dGUjCT1qKsdG7WOc/RzIh/qwxUEVZ+ohCltaxBxEFMNqeqbQL9xjRl6Yvdwrfc5OCjUA9JbFmuu/8BKg==}
hasBin: true
dependencies:
cross-spawn: 7.0.3
esbuild: 0.14.30
esbuild-node-loader: 0.6.5
esbuild-register: 3.3.2_esbuild@0.14.30
import-meta-resolve: 1.1.1
dev: true
/espree/9.0.0:
resolution: {integrity: sha1-6QopZWmCKFAudxx6WEibGp0QcJA=, tarball: espree/download/espree-9.0.0.tgz}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2790,17 +2843,8 @@ packages:
map-cache: 0.2.2
dev: true
/fs-extra/10.0.0:
resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
engines: {node: '>=12'}
dependencies:
graceful-fs: 4.2.9
jsonfile: 6.1.0
universalify: 2.0.0
dev: true
/fs-extra/10.0.1:
resolution: {integrity: sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==}
/fs-extra/10.1.0:
resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
engines: {node: '>=12'}
dependencies:
graceful-fs: 4.2.9
@@ -3326,6 +3370,12 @@ packages:
engines: {node: '>=8'}
dev: true
/import-meta-resolve/1.1.1:
resolution: {integrity: sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==}
dependencies:
builtins: 4.1.0
dev: true
/imurmurhash/0.1.4:
resolution: {integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o=, tarball: imurmurhash/download/imurmurhash-0.1.4.tgz?cache=0&sync_timestamp=1632883651457&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fimurmurhash%2Fdownload%2Fimurmurhash-0.1.4.tgz}
engines: {node: '>=0.8.19'}
@@ -3726,7 +3776,7 @@ packages:
dev: true
/isexe/2.0.0:
resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=, tarball: isexe/download/isexe-2.0.0.tgz}
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
dev: true
/isobject/2.1.0:
@@ -4279,10 +4329,6 @@ packages:
resolution: {integrity: sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=, tarball: mute-stream/download/mute-stream-0.0.8.tgz}
dev: true
/naming-style/1.0.1:
resolution: {integrity: sha1-LIHzeKnk0nhhjCyKpVBrCyozA00=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/naming-style/download/naming-style-1.0.1.tgz}
dev: false
/nanoid/3.1.30:
resolution: {integrity: sha1-Y/k8xUjSoRPcXfvGO/oJ4rm2Q2I=, tarball: nanoid/download/nanoid-3.1.30.tgz}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -4696,7 +4742,7 @@ packages:
dev: true
/path-key/3.1.1:
resolution: {integrity: sha1-WB9q3mWMu6ZaDTOA3ndTKVBU83U=, tarball: path-key/download/path-key-3.1.1.tgz}
resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
engines: {node: '>=8'}
dev: true
@@ -5339,14 +5385,14 @@ packages:
dev: true
/shebang-command/2.0.0:
resolution: {integrity: sha1-zNCvT4g1+9wmW4JGGq8MNmY/NOo=, tarball: shebang-command/download/shebang-command-2.0.0.tgz}
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}
dependencies:
shebang-regex: 3.0.0
dev: true
/shebang-regex/3.0.0:
resolution: {integrity: sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=, tarball: shebang-regex/download/shebang-regex-3.0.0.tgz}
resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
engines: {node: '>=8'}
dev: true
@@ -6302,7 +6348,7 @@ packages:
dependencies:
chalk: 4.1.2
debug: 4.3.3
fs-extra: 10.0.0
fs-extra: 10.1.0
vite: 2.9.5_sass@1.50.1
transitivePeerDependencies:
- supports-color
@@ -6321,7 +6367,7 @@ packages:
dotenv-expand: 8.0.2
ejs: 3.1.6
fast-glob: 3.2.11
fs-extra: 10.0.1
fs-extra: 10.1.0
html-minifier-terser: 6.1.0
node-html-parser: 5.3.3
pathe: 0.2.0
@@ -6388,7 +6434,7 @@ packages:
/vite-plugin-spritesmith/0.1.1:
resolution: {integrity: sha1-sb1P3NVi10sbVRBYrG48ONdXkgw=, tarball: vite-plugin-spritesmith/download/vite-plugin-spritesmith-0.1.1.tgz}
dependencies:
fs-extra: 10.0.0
fs-extra: 10.1.0
gaze: 1.1.3
lodash: 4.17.21
mkdirp: 1.0.4
@@ -6405,7 +6451,7 @@ packages:
cors: 2.8.5
debug: 4.3.3
etag: 1.8.1
fs-extra: 10.0.0
fs-extra: 10.1.0
pathe: 0.2.0
svg-baker: 1.7.0
svgo: 2.8.0
@@ -6580,14 +6626,14 @@ packages:
dev: true
/which/1.3.1:
resolution: {integrity: sha1-pFBD1U9YBTFtqNYvn1CRjT2nCwo=, tarball: which/download/which-1.3.1.tgz}
resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
hasBin: true
dependencies:
isexe: 2.0.0
dev: true
/which/2.0.2:
resolution: {integrity: sha1-fGqN0KY2oDJ+ELWckobu6T8/UbE=, tarball: which/download/which-2.0.2.tgz}
resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
engines: {node: '>= 8'}
hasBin: true
dependencies:
public/icons/icons.json
+1
View File
File diff suppressed because one or more lines are too long
scripts/prepare.js
+15
View File
@@ -0,0 +1,15 @@
import path from 'path'
import fs from 'fs-extra'
import { icons } from '@iconify-json/ep'
async function prepare() {
const outputDir = path.resolve(process.cwd(), 'public/icons')
fs.ensureDir(outputDir)
fs.emptyDir(outputDir)
fs.writeJSON(
path.resolve(outputDir, 'icons.json'),
icons
)
}
prepare()
src/App.vue
+3 -1
View File
@@ -1,4 +1,6 @@
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useSettingsStore } from '@/store/modules/settings'
const settingsStore = useSettingsStore()
@@ -66,7 +68,7 @@ onMounted(() => {
</script>
<template>
<el-config-provider :size="settingsStore.app.elementSize">
<el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize">
<RouterView
:style="{
'--g-main-sidebar-actual-width': mainSidebarActualWidth,
src/components/FileUpload/index.vue
+6 -6
View File
@@ -1,6 +1,4 @@
<script setup name="FileUpload">
const { proxy } = getCurrentInstance()
const props = defineProps({
action: {
type: String,
@@ -48,15 +46,15 @@ function beforeUpload(file) {
const isTypeOk = props.ext.indexOf(fileExt) >= 0
const isSizeOk = file.size / 1024 / 1024 < props.size
if (!isTypeOk) {
proxy.$message.error(`上传文件只支持 ${ props.ext.join(' / ') } 格式！`)
ElMessage.error(`上传文件只支持 ${ props.ext.join(' / ') } 格式！`)
}
if (!isSizeOk) {
proxy.$message.error(`上传文件大小不能超过 ${props.size}MB！`)
ElMessage.error(`上传文件大小不能超过 ${props.size}MB！`)
}
return isTypeOk && isSizeOk
}
function onExceed() {
proxy.$message.warning('文件上传超过限制')
ElMessage.warning('文件上传超过限制')
}
function onSuccess(res, file) {
emit('on-success', res, file)
@@ -76,7 +74,9 @@ function onSuccess(res, file) {
drag
>
<div class="slot">
<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
<el-icon class="el-icon--upload">
<svg-icon name="ep:upload-filled" />
</el-icon>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</div>
<template #tip>
src/components/ImagePreview/index.vue
+3 -1
View File
@@ -27,7 +27,9 @@ const realHeight = computed(() => {
<el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
<template #error>
<div class="image-slot">
<svg-icon name="image-load-fail" />
<el-icon>
<svg-icon name="image-load-fail" />
</el-icon>
</div>
</template>
</el-image>
src/components/ImageUpload/index.vue
+11 -7
View File
@@ -1,6 +1,4 @@
<script setup name="ImageUpload">
const { proxy } = getCurrentInstance()
const props = defineProps({
action: {
type: String,
@@ -76,10 +74,10 @@ function beforeUpload(file) {
const isTypeOk = props.ext.indexOf(fileExt) >= 0
const isSizeOk = file.size / 1024 / 1024 < props.size
if (!isTypeOk) {
proxy.$message.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
}
if (!isSizeOk) {
proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
}
if (isTypeOk && isSizeOk) {
uploadData.value.progress.preview = URL.createObjectURL(file)
@@ -112,7 +110,9 @@ function onSuccess(res) {
<el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
<template #error>
<div class="image-slot">
<svg-icon name="el-icon-plus" />
<el-icon>
<svg-icon name="ep:plus" />
</el-icon>
</div>
</template>
</el-image>
@@ -121,10 +121,14 @@ function onSuccess(res) {
<div class="mask">
<div class="actions">
<span title="预览" @click.stop="preview">
<el-icon><el-icon-zoom-in /></el-icon>
<el-icon>
<svg-icon name="ep:zoom-in" />
</el-icon>
</span>
<span title="移除" @click.stop="remove">
<el-icon><el-icon-delete /></el-icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
</span>
</div>
</div>
src/components/ImagesUpload/index.vue
+17 -9
View File
@@ -1,6 +1,4 @@
<script setup name="ImagesUpload">
const { proxy } = getCurrentInstance()
const props = defineProps({
action: {
type: String,
@@ -95,10 +93,10 @@ function beforeUpload(file) {
const isTypeOk = props.ext.indexOf(fileExt) >= 0
const isSizeOk = file.size / 1024 / 1024 < props.size
if (!isTypeOk) {
proxy.$message.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
}
if (!isSizeOk) {
proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
}
if (isTypeOk && isSizeOk) {
uploadData.value.progress.preview = URL.createObjectURL(file)
@@ -122,16 +120,24 @@ function onSuccess(res) {
<div class="mask">
<div class="actions">
<span title="预览" @click="preview(index)">
<el-icon><el-icon-zoom-in /></el-icon>
<el-icon>
<svg-icon name="ep:zoom-in" />
</el-icon>
</span>
<span title="移除" @click="remove(index)">
<el-icon><el-icon-delete /></el-icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
</span>
<span v-show="url.length > 1" title="左移" :class="{'disabled': index == 0}" @click="move(index, 'left')">
<el-icon><el-icon-back /></el-icon>
<el-icon>
<svg-icon name="ep:back" />
</el-icon>
</span>
<span v-show="url.length > 1" title="右移" :class="{'disabled': index == url.length - 1}" @click="move(index, 'right')">
<el-icon><el-icon-right /></el-icon>
<el-icon>
<svg-icon name="ep:right" />
</el-icon>
</span>
</div>
</div>
@@ -150,7 +156,9 @@ function onSuccess(res) {
class="images-upload"
>
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
<svg-icon name="el-icon-plus" />
<el-icon>
<svg-icon name="ep:plus" />
</el-icon>
</div>
<div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
src/components/PageMain/index.vue
+3 -1
View File
@@ -33,7 +33,9 @@ function unCollaspe() {
<div v-if="title" class="title-container">{{ title }}</div>
<slot />
<div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
<el-icon><el-icon-arrow-down /></el-icon>
<el-icon>
<svg-icon name="ep:arrow-down" />
</el-icon>
</div>
</div>
</template>
src/components/SearchBar/index.vue
+8 -1
View File
@@ -28,7 +28,14 @@ function toggle() {
<div class="search-container">
<slot />
<div v-if="showMore" class="more">
<el-button type="text" size="small" :icon="isUnfold ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" @click="toggle">{{ isUnfold ? '收起' : '展开' }}</el-button>
<el-button type="text" size="small" @click="toggle">
<template #icon>
<el-icon>
<svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
</el-icon>
</template>
{{ isUnfold ? '收起' : '展开' }}
</el-button>
</div>
</div>
</template>
src/components/SvgIcon/index.vue
+4 -14
View File
@@ -1,4 +1,6 @@
<script setup name="SvgIcon">
import { Icon } from '@iconify/vue'
const props = defineProps({
name: {
type: String,
@@ -44,20 +46,8 @@ const transformStyle = computed(() => {
</script>
<template>
<el-icon v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ElIcon') === 0" class="svg-icon" :style="transformStyle">
<Component :is="name" />
</el-icon>
<svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
<Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
<svg v-else :style="transformStyle" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
</template>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentcolor;
overflow: hidden;
}
</style>
src/components/Trend/index.vue
+3 -1
View File
@@ -37,7 +37,9 @@ const isUp = computed(() => {
<span v-if="prefix" class="prefix">{{ prefix }}</span>
<span class="text">{{ value }}</span>
<span v-if="suffix" class="suffix">{{ suffix }}</span>
<svg-icon :name="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
<el-icon>
<svg-icon :name="`${isUp ? 'ep:caret-top' : 'ep:caret-bottom'}`" />
</el-icon>
</div>
</template>
src/iconify-ep/index.js
+6
View File
@@ -0,0 +1,6 @@
import { addCollection } from '@iconify/vue'
export async function downloadAndInstall() {
const data = Object.freeze(await fetch('./icons/icons.json').then(r => r.json()))
addCollection(data)
}
src/layout/components/AppSetting/index.vue
+45 -14
View File
@@ -31,7 +31,7 @@ const { copy, copied, isSupported } = useClipboard()
watch(copied, val => {
if (val) {
proxy.$message.success('复制成功，请粘贴到 src/settings.custom.json 文件中！')
ElMessage.success('复制成功，请粘贴到 src/settings.custom.json 文件中！')
}
})
@@ -49,17 +49,23 @@ function handleCopy() {
<div v-if="settingsStore.mode === 'pc'" class="menu-mode">
<el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
<div class="mode mode-side" :class="{'active': settings.menu.menuMode === 'side'}" @click="settings.menu.menuMode = 'side'">
<svg-icon name="el-icon-check" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="顶部模式" placement="top" :show-after="500">
<div class="mode mode-head" :class="{'active': settings.menu.menuMode === 'head'}" @click="settings.menu.menuMode = 'head'">
<svg-icon name="el-icon-check" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
<div class="mode mode-single" :class="{'active': settings.menu.menuMode === 'single'}" @click="settings.menu.menuMode = 'single'">
<svg-icon name="el-icon-check" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
</div>
@@ -72,7 +78,9 @@ function handleCopy() {
<div class="label">
切换跳转
<el-tooltip content="开启该功能后，切换侧边栏时，页面自动跳转至该侧边栏导航下第一个路由地址" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settings.menu.menuMode)" />
@@ -81,7 +89,9 @@ function handleCopy() {
<div class="label">
保持展开一个
<el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.subMenuUniqueOpened" />
@@ -103,7 +113,9 @@ function handleCopy() {
<div class="label">
导航栏搜索
<el-tooltip content="对导航栏进行快捷搜索" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableNavSearch" />
@@ -112,7 +124,9 @@ function handleCopy() {
<div class="label">
全屏
<el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableFullscreen" />
@@ -121,7 +135,9 @@ function handleCopy() {
<div class="label">
页面刷新
<el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enablePageReload" />
@@ -148,7 +164,9 @@ function handleCopy() {
<div class="label">
是否开启
<el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.dashboard.enable" />
@@ -162,7 +180,9 @@ function handleCopy() {
<div class="label">
组件尺寸
<el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-radio-group v-model="settings.app.elementSize" size="small">
@@ -179,7 +199,9 @@ function handleCopy() {
<div class="label">
载入进度条
<el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableProgress" />
@@ -188,14 +210,23 @@ function handleCopy() {
<div class="label">
动态标题
<el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
<svg-icon name="el-icon-question-filled" />
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableDynamicTitle" />
</div>
</div>
<div v-if="isSupported" class="action-buttons">
<el-button icon="el-icon-document-copy" type="primary" @click="handleCopy">复制配置</el-button>
<el-button type="primary" @click="handleCopy">
<template #icon>
<el-icon>
<svg-icon name="ep:document-copy" />
</el-icon>
</template>
复制配置
</el-button>
</div>
</el-drawer>
</div>
src/layout/components/BuyIt/index.vue
+14 -8
View File
@@ -1,6 +1,4 @@
<script setup name="BuyIt">
const { proxy } = getCurrentInstance()
const locationOrigin = ref(location.href)
const isActived = ref(true)
@@ -9,7 +7,7 @@ setTimeout(() => {
}, 5000)
onMounted(() => {
proxy.$notify({
ElNotification({
type: 'success',
title: '温馨提示',
dangerouslyUseHTMLString: true,
@@ -30,19 +28,27 @@ function open(url) {
<template>
<div class="buy-it" :class="{'actived': isActived}">
<div class="item" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/buy.html`)">
<svg-icon name="fixed-right-buy" />
<el-icon>
<svg-icon name="fixed-right-buy" />
</el-icon>
<span class="title">购买<br>专业版</span>
</div>
<div class="item" @click="open(`https://${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.com/hooray/fantastic-admin/`)">
<svg-icon name="fixed-right-code" />
<el-icon>
<svg-icon name="fixed-right-code" />
</el-icon>
<span class="title">下载<br>基础版</span>
</div>
<div class="item" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/`)">
<svg-icon name="fixed-right-doc" />
<el-icon>
<svg-icon name="fixed-right-doc" />
</el-icon>
<span class="title">开发<br>文档</span>
</div>
<div class="item" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/support.html`)">
<svg-icon name="fixed-right-chat" />
<el-icon>
<svg-icon name="fixed-right-chat" />
</el-icon>
<span class="title">技术<br>支持</span>
</div>
</div>
@@ -96,7 +102,7 @@ function open(url) {
&:nth-child(4) {
background-color: #343b42;
}
.svg-icon {
.el-icon {
display: block;
margin: 0 auto;
font-size: 20px;
src/layout/components/Header/index.vue
+4 -2
View File
@@ -20,7 +20,9 @@ const switchMenu = inject('switchMenu')
<div class="nav">
<template v-for="(item, index) in menuStore.allMenus">
<div v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{'active': index == menuStore.actived}" @click="switchMenu(index)">
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<el-icon>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
</el-icon>
<span v-if="item.meta.title">{{ item.meta.title }}</span>
</div>
</template>
@@ -109,7 +111,7 @@ header {
color: $g-header-menu-active-color;
background-color: $g-header-menu-active-bg;
}
.svg-icon {
.el-icon {
font-size: 24px;
vertical-align: middle;
& + span {
src/layout/components/MainSidebar/index.vue
+4 -2
View File
@@ -22,7 +22,9 @@ const switchMenu = inject('switchMenu')
'active': index === menuStore.actived
}" :title="item.meta.title" @click="switchMenu(index)"
>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<el-icon>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
</el-icon>
<span>{{ item.meta.title }}</span>
</div>
</template>
@@ -80,7 +82,7 @@ const switchMenu = inject('switchMenu')
color: $g-main-sidebar-menu-active-color;
background-color: $g-main-sidebar-menu-active-bg;
}
.svg-icon {
.el-icon {
margin: 0 auto;
font-size: 24px;
}
src/layout/components/Search/index.vue
+33 -24
View File
@@ -122,8 +122,7 @@ function getSourceList(arr) {
title: item.meta.title,
i18n: item.meta.i18n,
breadcrumb: breadcrumb,
path: path,
isExternalLink: isExternalLink(item.path)
path: path
})
}
}
@@ -172,19 +171,37 @@ function scrollTo(offsetTop) {
<div id="search" :class="{'searching': isShow}" @click="isShow && $eventBus.emit('global-search-toggle')">
<div class="container">
<div class="search-box" @click.stop>
<el-input ref="input" v-model="searchInput" prefix-icon="el-icon-search" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="$eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter" />
<el-input ref="input" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="$eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
<template #prefix>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
</el-input>
<div v-if="settingsStore.mode === 'pc'" class="tips">
<div class="tip">
<span>Alt</span>+<span>S</span>
唤醒搜索面板
</div>
<div class="tip">
<span><svg-icon name="search-up" /></span>
<span><svg-icon name="search-down" /></span>
<span>
<el-icon>
<svg-icon name="search-up" />
</el-icon>
</span>
<span>
<el-icon>
<svg-icon name="search-down" />
</el-icon>
</span>
切换搜索结果
</div>
<div class="tip">
<span><svg-icon name="search-enter" /></span>
<span>
<el-icon>
<svg-icon name="search-enter" />
</el-icon>
</span>
访问页面
</div>
<div class="tip">
@@ -196,18 +213,19 @@ function scrollTo(offsetTop) {
<div ref="search" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
<router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
<a :ref="`search-item-${index}`" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
<div class="icon">
<el-icon class="icon">
<svg-icon v-if="item.icon" :name="item.icon" />
</div>
</el-icon>
<div class="info">
<div class="title">
{{ item.title }}
<svg-icon v-if="item.isExternalLink" name="external-link" />
</div>
<div class="breadcrumb">
<span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
{{ bc }}
<svg-icon name="el-icon-arrow-right" />
<el-icon>
<svg-icon name="ep:arrow-right" />
</el-icon>
</span>
</div>
<div class="path">{{ item.path }}</div>
@@ -302,11 +320,8 @@ function scrollTo(offsetTop) {
&.actived {
background-color: #dbe7f8;
.icon {
[class^="el-icon-"],
.svg-icon {
color: #409eff;
transform: scale(1.2);
}
color: #409eff;
transform: scale(1.2);
}
.info {
border-left-color: #b7cafc;
@@ -322,12 +337,9 @@ function scrollTo(offsetTop) {
.icon {
flex: 0 0 66px;
text-align: center;
[class^="el-icon-"],
.svg-icon {
color: #999;
font-size: 20px;
transition: all 0.3s;
}
color: #999;
font-size: 20px;
transition: all 0.3s;
}
.info {
flex: 1;
@@ -344,9 +356,6 @@ function scrollTo(offsetTop) {
font-weight: bold;
color: #666;
@include text-overflow(1, true);
.svg-icon {
font-size: 14px;
}
}
.breadcrumb,
.path {
src/layout/components/SidebarItem/index.vue
+13 -11
View File
@@ -30,7 +30,9 @@ const hasChildren = computed(() => {
<div class="sidebar-item">
<el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
<template #title>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<el-icon v-if="item.meta.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<span class="title">{{ item.meta.title }}</span>
</template>
<template v-for="route in item.children">
@@ -40,14 +42,18 @@ const hasChildren = computed(() => {
<router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
<a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<el-icon v-if="item.meta.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<span class="title">{{ item.meta.title }}</span>
</el-menu-item>
</a>
</router-link>
<el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<template #title>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<el-icon v-if="item.meta.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<span class="title">{{ item.meta.title }}</span>
</template>
<template v-for="route in item.children">
@@ -74,22 +80,18 @@ const hasChildren = computed(() => {
}
:deep(.el-sub-menu),
:deep(.el-menu-item) {
.svg-icon {
.title-icon {
width: 20px;
font-size: 20px;
vertical-align: -0.25em;
transition: transform 0.3s;
color: unset;
&[class^="el-icon-"],
&[class*=" el-icon-"] {
vertical-align: middle;
}
}
.svg-icon + .title {
.title-icon + .title {
margin-left: 10px;
}
&:hover > .svg-icon,
.el-sub-menu__title:hover > .svg-icon {
&:hover > .title-icon,
.el-sub-menu__title:hover > .title-icon {
transform: scale(1.2);
}
}
src/layout/components/Tools/index.vue
+21 -7
View File
@@ -40,29 +40,43 @@ function pro() {
<div class="tools">
<div class="buttons">
<span v-if="settingsStore.mode == 'pc'" class="item item-pro" @click="pro">
<svg-icon name="pro" />
<el-icon>
<svg-icon name="pro" />
</el-icon>
<span class="title">查看专业版</span>
</span>
<span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="$eventBus.emit('global-search-toggle')">
<svg-icon name="search" />
<el-icon>
<svg-icon name="search" />
</el-icon>
</span>
<span v-if="settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen" class="item" @click="toggle">
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
<el-icon>
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
</el-icon>
</span>
<span v-if="settingsStore.topbar.enablePageReload" class="item" @click="reload()">
<svg-icon name="toolbar-reload" />
<el-icon>
<svg-icon name="toolbar-reload" />
</el-icon>
</span>
<span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="$eventBus.emit('global-theme-toggle')">
<svg-icon name="toolbar-theme" />
<el-icon>
<svg-icon name="toolbar-theme" />
</el-icon>
</span>
</div>
<el-dropdown class="user-container" size="default" @command="userCommand">
<div class="user-wrapper">
<el-avatar size="small">
<el-icon><el-icon-user-filled /></el-icon>
<el-icon>
<svg-icon name="ep:user-filled" />
</el-icon>
</el-avatar>
{{ userStore.account }}
<el-icon><el-icon-caret-bottom /></el-icon>
<el-icon>
<svg-icon name="ep:caret-bottom" />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu class="user-dropdown">
src/layout/components/Topbar/index.vue
+7 -5
View File
@@ -55,9 +55,11 @@ function pathCompile(path) {
>
<div class="left-box">
<div v-if="enableSidebarCollapse" class="sidebar-collapse" :class="{'is-collapse': settingsStore.menu.subMenuCollapse}" @click="settingsStore.toggleSidebarCollapse()">
<svg-icon name="toolbar-collapse" />
<el-icon>
<svg-icon name="toolbar-collapse" />
</el-icon>
</div>
<el-breadcrumb v-if="settingsStore.topbar.enableBreadcrumb && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'" separator-class="el-icon-arrow-right">
<el-breadcrumb v-if="settingsStore.topbar.enableBreadcrumb && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
{{ item.title }}
@@ -101,13 +103,13 @@ function pathCompile(path) {
height: 50px;
cursor: pointer;
transition: 0.3s;
.svg-icon {
.el-icon {
transition: 0.3s;
}
&:hover .svg-icon {
&:hover .el-icon {
color: #5482ee;
}
&.is-collapse .svg-icon {
&.is-collapse .el-icon {
transform: rotateZ(-180deg);
}
& + .el-breadcrumb {
src/main.js
+6 -13
View File
@@ -9,19 +9,6 @@ app.use(piniaStore)
import router from './router'
app.use(router)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementIcons from '@element-plus/icons-vue'
// 将 element-plus 的图标库注册到全局
for (var key in ElementIcons) {
app.component(`ElIcon${ElementIcons[key].name}`, ElementIcons[key])
}
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
size: useSettingsOutsideStore().app.elementSize
})
import globalProperties from '@/util/global.properties'
globalProperties(app)
@@ -32,6 +19,12 @@ directive(app)
// 加载 svg 图标
import 'virtual:svg-icons-register'
// 加载 iconify 图标（element plus）
import { downloadAndInstall } from '@/iconify-ep'
if (useSettingsOutsideStore().app.iconifyOfflineUse) {
downloadAndInstall()
}
// 全局样式
import '@/assets/styles/globals.scss'
src/settings.js
+2
View File
@@ -2,6 +2,8 @@ let globalSettings = {
app: {
// Element 组件默认尺寸，支持：large、default、small
elementSize: 'default',
// 是否将 iconify 图标集中的 Element Plus 图标下载到本地，以便在离线环境下使用
iconifyOfflineUse: false,
/**
* 是否开启权限功能，权限功能提供以下鉴权支持：
* 1、路由鉴权
src/views/[...all].vue
+2 -2
View File
@@ -38,7 +38,7 @@ function goBack() {
<template>
<div class="notfound">
<svg-icon name="404" />
<svg-icon name="404" class="icon" />
<div class="content">
<h1>404</h1>
<div class="desc">抱歉，你访问的页面不存在</div>
@@ -54,7 +54,7 @@ function goBack() {
justify-content: space-between;
width: 700px;
@include position-center(xy);
.svg-icon {
.icon {
width: 400px;
height: 400px;
}
src/views/component_basic_example/button.vue
+109 -17
View File
@@ -8,7 +8,6 @@
<script setup>
import Alert from './components/alert.vue'
import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@element-plus/icons-vue'
</script>
<template>
@@ -41,12 +40,48 @@ import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@e
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Edit" circle />
<el-button type="success" :icon="Check" circle />
<el-button type="info" :icon="Message" circle />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />
<el-button circle>
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
</el-button>
<el-button type="primary" circle>
<template #icon>
<el-icon>
<svg-icon name="ep:edit" />
</el-icon>
</template>
</el-button>
<el-button type="success" circle>
<template #icon>
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</template>
</el-button>
<el-button type="info" circle>
<template #icon>
<el-icon>
<svg-icon name="ep:message" />
</el-icon>
</template>
</el-button>
<el-button type="warning" circle>
<template #icon>
<el-icon>
<svg-icon name="ep:star" />
</el-icon>
</template>
</el-button>
<el-button type="danger" circle>
<template #icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
</template>
</el-button>
</el-row>
</page-main>
<page-main title="禁用状态" class="demo">
@@ -72,24 +107,81 @@ import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@e
<el-button type="text" disabled>文字按钮</el-button>
</page-main>
<page-main title="图标按钮" class="demo">
<el-button type="primary" :icon="Edit" />
<el-button type="primary" :icon="Share" />
<el-button type="primary" :icon="Delete" />
<el-button type="primary" :icon="Search">搜索</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:edit" />
</el-icon>
</template>
</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:share" />
</el-icon>
</template>
</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
</template>
</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
搜索
</el-button>
<el-button type="primary">
上传
<el-icon class="el-icon--right"><el-icon-upload /></el-icon>
<el-icon class="el-icon--right">
<svg-icon name="ep:upload" />
</el-icon>
</el-button>
</page-main>
<page-main title="按钮组" class="demo">
<el-button-group style="margin-right: 10px;">
<el-button type="primary" :icon="ArrowLeft">上一页</el-button>
<el-button type="primary">下一页<el-icon class="el-icon--right"><el-icon-arrow-right /></el-icon></el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:arrow-left" />
</el-icon>
</template>
上一页
</el-button>
<el-button type="primary">
下一页
<el-icon class="el-icon--right">
<svg-icon name="ep:arrow-right" />
</el-icon>
</el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" :icon="Edit" />
<el-button type="primary" :icon="Share" />
<el-button type="primary" :icon="Delete" />
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:edit" />
</el-icon>
</template>
</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:share" />
</el-icon>
</template>
</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
</template>
</el-button>
</el-button-group>
</page-main>
<page-main title="加载中" class="demo">
src/views/component_basic_example/icon.vue
+15 -16
View File
@@ -8,11 +8,6 @@
<script setup>
import Alert from './components/alert.vue'
import { Search } from '@element-plus/icons-vue'
import * as ElementIcons from '@element-plus/icons-vue'
import { hyphen } from 'naming-style'
const icon = Object.keys(ElementIcons)
</script>
<template>
@@ -20,20 +15,24 @@ const icon = Object.keys(ElementIcons)
<Alert />
<page-header title="图标" />
<page-main class="demo">
<el-icon><el-icon-edit /></el-icon>
<el-icon><el-icon-share /></el-icon>
<el-icon><el-icon-delete /></el-icon>
<el-button type="primary" :icon="Search">
<el-icon>
<svg-icon name="ep:edit" />
</el-icon>
<el-icon>
<svg-icon name="ep:share" />
</el-icon>
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
搜索
</el-button>
</page-main>
<page-main title="图标集合">
<div v-for="(item, index) in icon" :key="index" class="list-icon">
<el-tooltip class="item" effect="dark" :content="hyphen(`ElIcon${item}`)" placement="top">
<svg-icon :name="hyphen(`ElIcon${item}`)" />
</el-tooltip>
</div>
</page-main>
</div>
</template>
src/views/component_basic_example/input.vue
+6 -2
View File
@@ -43,12 +43,16 @@ export default {
<page-main title="带 icon 的输入框" class="demo">
<el-input v-model="input1" placeholder="请选择日期">
<template #suffix>
<el-icon class="el-input__icon"><el-icon-calendar /></el-icon>
<el-icon>
<svg-icon name="ep:calendar" />
</el-icon>
</template>
</el-input>
<el-input v-model="input2" placeholder="请输入内容">
<template #prefix>
<el-icon class="el-input__icon"><el-icon-search /></el-icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
</el-input>
</page-main>
src/views/component_basic_example/link.vue
+9 -3
View File
@@ -8,7 +8,6 @@
<script setup>
import Alert from './components/alert.vue'
import { Edit } from '@element-plus/icons-vue'
</script>
<template>
@@ -36,10 +35,17 @@ import { Edit } from '@element-plus/icons-vue'
<el-link>有下划线</el-link>
</page-main>
<page-main title="图标" class="demo">
<el-link :icon="Edit">编辑</el-link>
<el-link>
<el-icon class="el-icon--left">
<svg-icon name="ep:edit" />
</el-icon>
编辑
</el-link>
<el-link>
查看
<el-icon class="el-icon-view el-icon--right"><el-icon-view /></el-icon>
<el-icon class="el-icon--right">
<svg-icon name="ep:view" />
</el-icon>
</el-link>
</page-main>
</div>
src/views/component_extend_example/pageheader.demo.vue
+8 -1
View File
@@ -14,7 +14,14 @@
<p>提供两块插槽：</p>
<p>一块是 content 区域插槽，一块是右侧区域</p>
</template>
<el-button icon="el-icon-arrow-left" round>返回</el-button>
<el-button round>
<template #icon>
<el-icon>
<svg-icon name="ep:arrow-left" />
</el-icon>
</template>
返回
</el-button>
</page-header>
</div>
</template>
src/views/component_extend_example/searchbar.demo.vue
+16 -2
View File
@@ -75,7 +75,14 @@ export default {
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" icon="el-icon-search">筛选</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="text">查看已导出记录</el-button>
</el-form-item>
@@ -129,7 +136,14 @@ export default {
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" icon="el-icon-search">筛选</el-button>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="text">查看已导出记录</el-button>
</el-form-item>
src/views/component_extend_example/svg.demo.vue
+18 -6
View File
@@ -21,13 +21,25 @@ export default {
<div>
<page-header title="SVG Icon" content="除了使用 Element Plus 提供的图标外，你还可以使用自己的 SVG 图标" />
<page-main>
<svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" class="example-icon" />
<svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" class="example-icon" />
<svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" class="example-icon" />
<el-icon class="example-icon">
<svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" />
</el-icon>
<el-icon class="example-icon">
<svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" />
</el-icon>
<el-icon class="example-icon">
<svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" />
</el-icon>
<p>也支持彩色 SVG Icon</p>
<svg-icon name="example-crown" :flip="flip" :rotate="rotate" class="example-icon" />
<svg-icon name="example-star" :flip="flip" :rotate="rotate" class="example-icon" />
<svg-icon name="example-vip" :flip="flip" :rotate="rotate" class="example-icon" />
<el-icon class="example-icon">
<svg-icon name="example-crown" :flip="flip" :rotate="rotate" />
</el-icon>
<el-icon class="example-icon">
<svg-icon name="example-star" :flip="flip" :rotate="rotate" />
</el-icon>
<el-icon class="example-icon">
<svg-icon name="example-vip" :flip="flip" :rotate="rotate" />
</el-icon>
<div>
<p>翻转：</p>
<el-radio-group v-model="flip">
src/views/index.vue
+24 -3
View File
@@ -75,7 +75,14 @@ const oneStepAdminInfo = ref({
<img src="https://v3.cn.vuejs.org/logo.png" style="width: 30%;">
<h1>Fantastic-template</h1>
<h2>一款开箱即用的 Vue 项目模版</h2>
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-template`)">访问官网</el-button>
<el-button plain @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-template`)">
<template #icon>
<el-icon>
<svg-icon name="ep:link" />
</el-icon>
</template>
访问官网
</el-button>
</div>
<el-divider border-style="dashed" />
<ul>
@@ -91,7 +98,14 @@ const oneStepAdminInfo = ref({
<img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/logo.png`" style="width: 30%;">
<h1>Fantastic-admin</h1>
<h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin`)">访问官网</el-button>
<el-button plain @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin`)">
<template #icon>
<el-icon>
<svg-icon name="ep:link" />
</el-icon>
</template>
访问官网
</el-button>
</div>
<el-divider border-style="dashed" />
<el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
@@ -110,7 +124,14 @@ const oneStepAdminInfo = ref({
<img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/logo.png`" style="width: 30%;">
<h1>One-step-admin</h1>
<h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin`)">访问官网</el-button>
<el-button plain @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin`)">
<template #icon>
<el-icon>
<svg-icon name="ep:link" />
</el-icon>
</template>
访问官网
</el-button>
</div>
<el-divider border-style="dashed" />
<el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
src/views/jsx_example/index.jsx
+5 -1
View File
@@ -10,7 +10,11 @@ export default defineComponent({
])
const icons = (
iconsArr.value.map(v => {
return <svg-icon name={v} class={styles['example-icon']} />
return (
<el-icon class={styles['example-icon']}>
<svg-icon name={v} />
</el-icon>
)
})
)
src/views/login.vue
+22 -8
View File
@@ -90,7 +90,7 @@ function handleLogin() {
}
function handleFind() {
proxy.$message({
ElMessage({
message: '重置密码仅提供界面演示，无实际功能，需开发者自行扩展',
type: 'info'
})
@@ -121,17 +121,23 @@ function testAccount(account) {
<el-form-item prop="account">
<el-input ref="name" v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1" autocomplete="on">
<template #prefix>
<svg-icon name="user" />
<el-icon>
<svg-icon name="user" />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
<template #prefix>
<svg-icon name="password" />
<el-icon>
<svg-icon name="password" />
</el-icon>
</template>
<template #suffix>
<svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
<el-icon>
<svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
</el-icon>
</template>
</el-input>
</el-form-item>
@@ -155,14 +161,18 @@ function testAccount(account) {
<el-form-item prop="account">
<el-input ref="name" v-model="resetForm.account" placeholder="用户名" type="text" tabindex="1" autocomplete="on">
<template #prefix>
<svg-icon name="user" />
<el-icon>
<svg-icon name="user" />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-input ref="captcha" v-model="resetForm.captcha" placeholder="验证码" type="text" tabindex="2" autocomplete="on">
<template #prefix>
<svg-icon name="captcha" />
<el-icon>
<svg-icon name="captcha" />
</el-icon>
</template>
<template #append>
<el-button>发送验证码</el-button>
@@ -172,10 +182,14 @@ function testAccount(account) {
<el-form-item prop="newPassword">
<el-input ref="newPassword" v-model="resetForm.newPassword" :type="passwordType" placeholder="新密码" tabindex="3" autocomplete="on">
<template #prefix>
<svg-icon name="password" />
<el-icon>
<svg-icon name="password" />
</el-icon>
</template>
<template #suffix>
<svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
<el-icon>
<svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
</el-icon>
</template>
</el-input>
</el-form-item>
src/views/mock_example/index.vue
+9 -4
View File
@@ -7,14 +7,12 @@
</route>
<script setup>
const { proxy } = getCurrentInstance()
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
function getPermission() {
userStore.getPermissions().then(res => {
proxy.$notify({
ElNotification({
title: '当前用户权限',
dangerouslyUseHTMLString: true,
message: res.map(p => `<p>${p}</p>`).join('')
@@ -30,7 +28,14 @@ function open(url) {
<template>
<div>
<page-header title="Mock" content="通过拦截 Ajax 请求，返回模拟的响应数据，可以让前端工程师独立于后端进行开发，本演示站的登录和权限获取就是通过 mock 实现的。更多 Mock 语法规则请查询官方文档">
<el-button icon="el-icon-link" @click="open('http://mockjs.com/')">Mock.js 官网</el-button>
<el-button @click="open('http://mockjs.com/')">
<template #icon>
<el-icon>
<svg-icon name="ep:link" />
</el-icon>
</template>
Mock.js 官网
</el-button>
</page-header>
<page-main>
<el-button @click="getPermission">测试：获取用户权限</el-button>
src/views/permission_example/index.vue
+5 -5
View File
@@ -15,7 +15,7 @@ import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
function accountChange(val) {
proxy.$loading({
ElLoading.service({
lock: true,
text: '帐号切换中',
background: 'rgba(0, 0, 0, 0.7)'
@@ -31,16 +31,16 @@ function accountChange(val) {
}
function permissionCheck(permissions) {
if (proxy.$auth(permissions)) {
proxy.$message.success('校验通过')
ElMessage.success('校验通过')
} else {
proxy.$message.error('校验不通过')
ElMessage.error('校验不通过')
}
}
function permissionCheck2(permissions) {
if (proxy.$authAll(permissions)) {
proxy.$message.success('校验通过')
ElMessage.success('校验通过')
} else {
proxy.$message.error('校验不通过')
ElMessage.error('校验不通过')
}
}
</script>
src/views/personal/edit.password.vue
+1 -1
View File
@@ -45,7 +45,7 @@ function onSubmit() {
proxy.$refs['formRef'].validate(valid => {
if (valid) {
userStore.editPassword(form.value).then(() => {
proxy.$message({
ElMessage({
type: 'success',
message: '模拟修改成功，请重新登录'
})
src/views/personal/setting.vue
+1 -2
View File
@@ -9,7 +9,6 @@
<script setup name="PersonalSetting">
const router = useRouter()
const { proxy } = getCurrentInstance()
const form = ref({
headimg: '',
@@ -23,7 +22,7 @@ function handleSuccess(res) {
if (res.error == '') {
form.value.headimg = res.data.path
} else {
proxy.$message.warning(res.error)
ElMessage.warning(res.error)
}
}
function editPassword() {
vite/plugins/auto-import.js
+4
View File
@@ -1,4 +1,5 @@
import autoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default function createAutoImport() {
return autoImport({
@@ -6,6 +7,9 @@ export default function createAutoImport() {
'vue',
'vue-router'
],
resolvers: [
ElementPlusResolver()
],
dts: false
})
}
vite/plugins/components.js
+4
View File
@@ -1,7 +1,11 @@
import components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default function createComponents() {
return components({
resolvers: [
ElementPlusResolver()
],
dirs: ['src/components'],
include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/]
})