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

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

Browse Source
This commit is contained in:
Hooray
2022-04-25 20:21:16 +08:00
parent 20b1710d66
commit 0572573374
31 changed files with 384 additions and 165 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 -1
View File
@@ -12,10 +12,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",
@@ -36,11 +36,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 -24
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
@@ -54,7 +57,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
@@ -75,11 +77,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
@@ -494,6 +500,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'}
@@ -1231,6 +1255,12 @@ packages:
engines: {node: '>=6'}
dev: true
/builtins/4.1.0:
resolution: {integrity: sha512-1bPRZQtmKaO6h7qV1YHXNtr6nCK28k0Zo95KM4dXfILcZZwoHJBN1m3lfLv9LPkcOZlrSr+J1bzMaZFO98Yq0w==}
dependencies:
semver: 7.3.7
dev: true
/cache-base/1.0.1:
resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
engines: {node: '>=0.10.0'}
@@ -1619,7 +1649,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
@@ -2221,6 +2251,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'}
@@ -2230,6 +2266,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'}
@@ -2420,6 +2464,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}
@@ -2753,17 +2808,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
@@ -3291,6 +3337,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'}
@@ -3691,7 +3743,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:
@@ -4643,7 +4695,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
@@ -5300,14 +5352,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
@@ -6263,7 +6315,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
@@ -6282,7 +6334,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
@@ -6349,7 +6401,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
@@ -6366,7 +6418,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
@@ -6541,14 +6593,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
+13 -11
View File
@@ -1,15 +1,6 @@
<template>
<el-config-provider :size="settingsStore.app.elementSize">
<RouterView
:style="{
'--g-main-sidebar-actual-width': mainSidebarActualWidth,
'--g-sub-sidebar-actual-width': subSidebarActualWidth
}"
/>
</el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useSettingsStore } from '@/store/modules/settings'
const settingsStore = useSettingsStore()
@@ -75,3 +66,14 @@ onMounted(() => {
window.onresize()
})
</script>
<template>
<el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize">
<RouterView
:style="{
'--g-main-sidebar-actual-width': mainSidebarActualWidth,
'--g-sub-sidebar-actual-width': subSidebarActualWidth
}"
/>
</el-config-provider>
</template>
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/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
+56 -6
View File
@@ -31,31 +31,52 @@ function userCommand(command) {
break
}
}
function pro() {
window.open(`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/vue3/pro`, 'top')
}
</script>
<template>
<div class="tools">
<div class="buttons">
<span v-if="settingsStore.mode == 'pc'" class="item item-pro" @click="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">
@@ -86,6 +107,35 @@ function userCommand(command) {
vertical-align: middle;
transition: all 0.3s;
}
.item-pro {
display: inline-block;
width: auto;
padding: 0 10px;
transform-origin: right center;
animation: pro-text 3s ease-out infinite;
@keyframes pro-text {
0%,
20% {
transform: scale(1);
}
50%,
70% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.title {
padding-left: 5px;
font-weight: bold;
font-size: 14px;
background-image: linear-gradient(to right, #ffa237, #fc455d);
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
:deep(.user-container) {
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
+7 -10
View File
@@ -11,16 +11,7 @@ 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
})
app.use(ElementPlus)
import globalProperties from '@/util/global.properties'
globalProperties(app)
@@ -32,6 +23,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/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/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$/]
})