更新依赖,修改 element icon 使用方式调整,优化 svg-icon

This commit is contained in:
hooray 2021-11-04 15:12:42 +08:00
parent 56d67ddd6b
commit b30b127e3c
6 changed files with 846 additions and 1567 deletions

View File

@ -18,7 +18,7 @@
"@tinymce/tinymce-vue": "^4.0.4",
"axios": "^0.24.0",
"dayjs": "^1.10.7",
"element-plus": "^1.1.0-beta.24",
"element-plus": "^1.2.0-beta.1",
"hotkeys-js": "^3.8.7",
"js-cookie": "^3.0.1",
"mitt": "^3.0.0",
@ -26,22 +26,22 @@
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.0",
"screenfull": "^5.1.0",
"tinymce": "^5.10.0",
"vue": "^3.2.20",
"screenfull": "^6.0.0",
"tinymce": "^5.10.1",
"vue": "^3.2.21",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.4",
"@vue/compiler-sfc": "^3.2.20",
"@vue/compiler-sfc": "^3.2.21",
"eslint": "^8.1.0",
"eslint-plugin-vue": "^8.0.1",
"eslint-plugin-vue": "^8.0.3",
"http-server": "^14.0.0",
"husky": "^7.0.4",
"lint-staged": "^11.2.6",
"plop": "^2.7.6",
"postcss-html": "^1.1.0",
"postcss-html": "^1.2.0",
"postcss-scss": "^4.0.2",
"sass": "^1.43.4",
"stylelint": "^14.0.1",
@ -51,9 +51,9 @@
"stylelint-config-recommended-vue": "^1.0.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-scss": "^4.0.0",
"svgo": "^2.7.0",
"svgo": "^2.8.0",
"unplugin-auto-import": "^0.4.13",
"unplugin-vue-components": "^0.16.0",
"unplugin-vue-components": "^0.17.0",
"vite": "^2.6.13",
"vite-plugin-banner": "^0.1.3",
"vite-plugin-compression": "^0.3.5",
@ -63,6 +63,6 @@
"vite-plugin-spritesmith": "^0.1.1",
"vite-plugin-svg-icons": "^1.0.5",
"vite-plugin-vue-setup-extend": "^0.1.0",
"vue-eslint-parser": "^8.0.0"
"vue-eslint-parser": "^8.0.1"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,8 @@
<template>
<i v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
<el-icon v-if="name.indexOf('el-icon-') === 0" class="svg-icon" :style="transformStyle">
<Component :is="name" />
</el-icon>
<i v-else-if="name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
<svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>

View File

@ -33,7 +33,7 @@
<div class="label">
切换跳转
<el-tooltip content="开启该功能后,切换侧边栏时,页面自动跳转至该侧边栏导航下第一个路由地址" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="switchSidebarAndPageJump" :disabled="['single'].includes($store.state.settings.menuMode)" />
@ -52,7 +52,7 @@
<div class="label">
顶栏固定
<el-tooltip content="包含顶部导航栏和标签栏" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="topbarFixed" />
@ -66,7 +66,7 @@
<div class="label">
导航栏搜索
<el-tooltip content="对导航栏进行快捷搜索" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enableNavSearch" />
@ -75,7 +75,7 @@
<div class="label">
全屏
<el-tooltip content="该功能使用场景极少,用户习惯于通过窗口“最大化”功能来扩大显示区域,以显示更多内容,并且使用 F11 键也可以进入全屏效果" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enableFullscreen" />
@ -84,7 +84,7 @@
<div class="label">
页面刷新
<el-tooltip content="开启时会阻止原生 F5 键刷新功能,并采用框架提供的刷新模式进行页面刷新" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enablePageReload" />
@ -94,7 +94,7 @@
<div class="label">
组件尺寸
<el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-select v-model="elementSize" size="small">
@ -112,7 +112,7 @@
<div class="label">
加载进度条
<el-tooltip content="该功能开启时,跳转路由会看到页面顶部有条蓝色的进度条" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enableProgress" />
@ -121,7 +121,7 @@
<div class="label">
动态标题
<el-tooltip content="该功能开启时,页面标题会显示当前路由标题,格式为“页面标题 - 网站名称”;关闭时则显示网站名称,网站名称在项目根目录下 .env.* 文件里配置" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enableDynamicTitle" />
@ -130,7 +130,7 @@
<div class="label">
欢迎页
<el-tooltip content="欢迎页即控制台页面,该功能开启时,登录成功默认进入控制台页面;关闭时则默认进入侧边栏导航第一个导航页面" placement="top" :append-to-body="false">
<svg-icon name="el-icon-question" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="enableDashboard" />

View File

@ -21,10 +21,10 @@
<el-dropdown class="user-container" @command="userCommand">
<div class="user-wrapper">
<el-avatar size="medium">
<i class="el-icon-user-solid" />
<el-icon><el-icon-user-filled /></el-icon>
</el-avatar>
{{ $store.state.user.account }}
<i class="el-icon-caret-bottom" />
<el-icon><el-icon-caret-bottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu class="user-dropdown">

View File

@ -13,7 +13,7 @@ import 'element-plus/dist/index.css'
import * as ElementIcons from '@element-plus/icons'
// 将 element-plus 的图标库注册到全局
for (var key in ElementIcons) {
app.component(`El${ElementIcons[key].name}`, ElementIcons[key])
app.component(`ElIcon${ElementIcons[key].name}`, ElementIcons[key])
}
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {