From fe537d0e360ff6688c4ada06c97b50f8749cff3d Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Fri, 2 Jul 2021 21:52:32 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.07.02:=E7=B3=BB=E5=88=97=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BC=98=E5=8C=96=EF=BC=8C=E8=AF=B7=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?CHANGELOG.md=E6=9B=B4=E6=96=B0=E6=97=A5=E5=BF=97=E6=96=87?= =?UTF-8?q?=E4=BB=B6'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 11 ++++ package.json | 12 ++-- src/components/iconSelector/index.vue | 64 +++++++++++++++----- src/components/noticeBar/index.vue | 23 ++++--- src/layout/navBars/breadcrumb/user.vue | 5 +- src/theme/iconSelector.scss | 13 +--- src/utils/getStyleSheets.ts | 16 +++-- src/utils/setIconfont.ts | 2 +- src/views/fun/noticeBar/index.vue | 10 +-- src/views/fun/selector/index.vue | 3 +- src/views/pages/awesome/index.vue | 3 - src/views/pages/element/index.vue | 4 -- src/views/system/menu/component/addMenu.vue | 4 +- src/views/system/menu/component/editMenu.vue | 5 +- 14 files changed, 112 insertions(+), 63 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6709dbc2..61c6d77e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支） +## 1.0.9 + +`2021.07.02` + +- 🌟 更新 依赖更新最新版本 +- 🎯 优化 图标选择器设置宽度、v-model 等问题 +- 🎯 优化 滚动通知栏在手机上的体验 +- 🎯 优化 系统管理/新增菜单（编辑菜单），使用 `图标选择器` 进行模拟 +- 🎯 优化 字体图标(自动载入) 逻辑 +- 🐞 修复 screenfull 全屏时，按键盘 esc 键图标不改变问题，感谢群友@伯牙已遇钟子期 + ## 1.0.8 `2021.06.29` diff --git a/package.json b/package.json index 8da54f0e..929b7c62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-next-admin", - "version": "1.0.8", + "version": "1.0.9", "scripts": { "dev": "vite", "build": "vite build", @@ -13,7 +13,7 @@ "cropperjs": "^1.5.12", "echarts": "^5.1.2", "echarts-wordcloud": "^2.0.0", - "element-plus": "^1.0.2-beta.53", + "element-plus": "^1.0.2-beta.54", "mitt": "^3.0.0", "nprogress": "^0.2.0", "print-js": "^1.6.0", @@ -27,18 +27,18 @@ "vue-router": "^4.0.8", "vue-web-screen-shot": "^1.2.0", "vuex": "^4.0.1", - "wangeditor": "^4.7.4" + "wangeditor": "^4.7.5" }, "devDependencies": { "@types/axios": "^0.14.0", "@types/clipboard": "^2.0.1", - "@types/node": "^15.12.5", + "@types/node": "^15.14.0", "@types/nprogress": "^0.2.0", "@types/sortablejs": "^1.10.6", "@typescript-eslint/eslint-plugin": "^4.28.1", "@typescript-eslint/parser": "^4.28.1", "@vitejs/plugin-vue": "^1.2.4", - "@vue/compiler-sfc": "^3.1.2", + "@vue/compiler-sfc": "^3.1.3", "dotenv": "^10.0.0", "eslint": "^7.29.0", "eslint-plugin-vue": "^7.12.1", @@ -47,7 +47,7 @@ "sass-loader": "^12.1.0", "typescript": "^4.3.5", "vite": "^2.3.8", - "vue-eslint-parser": "^7.6.0" + "vue-eslint-parser": "^7.7.1" }, "browserslist": [ "> 1%", diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue index 3f52362e..e5e50755 100644 --- a/src/components/iconSelector/index.vue +++ b/src/components/iconSelector/index.vue @@ -10,9 +10,18 @@ :size="size" ref="inputWidthRef" @clear="onClearFontIcon" + @input="onIconInput" > @@ -21,13 +30,13 @@
{{ title }}
- + '无相关图标', }, + // 双向绑定值，字段名为固定，改了之后将不生效 + // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5 + modelValue: String, }, setup(props, { emit }) { const inputWidthRef = ref(); @@ -110,6 +123,25 @@ export default { fontIconTabsIcon: 'iconfont ali', fontIconSheetsList: [], }); + // icon input 改变时，实现双向绑定 + const onIconInput = (icon) => { + emit('update:modelValue', icon); + }; + // 处理 icon 双向绑定数值回显 + const initModeValueEcho = () => { + // 父级 v-model 为空，不执行下一步 + if (props.modelValue === '') return false; + // 双向绑定赋值回显 + state.fontIconSearch = props.modelValue; + // 处理回显 + let iconData: object = {}; + for (let i in state.fontIconSheetsList) { + if (state.fontIconSheetsList[i].toLowerCase().indexOf(props.modelValue) !== -1) { + iconData = { item: state.fontIconSheetsList[i] }; + } + } + onColClick(iconData.item, 0); + }; // 设置无数据时的空状态 const fontIconSheetsFilterList = computed(() => { if (!state.fontIconSearch) return state.fontIconSheetsList; @@ -131,34 +163,35 @@ export default { }); }; // 初始化数据 - const initFontIconData = () => { + const initFontIconData = async () => { if (props.type === 'ali') { - initIconfont.ali().then((res: any) => { - state.fontIconTabsIcon = 'iconfont ali'; + await initIconfont.ali().then((res: any) => { + state.fontIconTabsIcon = 'iconfont'; state.fontIconTabsIndex = 0; state.fontIconSheetsList = res; }); } else if (props.type === 'ele') { - initIconfont.ele().then((res: any) => { + await initIconfont.ele().then((res: any) => { state.fontIconTabsIcon = 'ele'; state.fontIconTabsIndex = 1; state.fontIconSheetsList = res; }); } else if (props.type === 'awe') { - initIconfont.awe().then((res: any) => { - state.fontIconTabsIcon = 'fa awe'; + await initIconfont.awe().then((res: any) => { + state.fontIconTabsIcon = 'fa'; state.fontIconTabsIndex = 2; state.fontIconSheetsList = res; }); } + initModeValueEcho(); }; // 获取当前点击的 icon 图标 const onColClick = (v: any, k: number) => { state.fontIconIndex = k; state.fontIconVisible = false; - if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `iconfont ali ${v}`; - else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `ele ${v}`; - else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `fa awe ${v}`; + if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `${v}`; + else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `${v}`; + else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `${v}`; emit('get', state.fontIconPrefix); }; // 清空当前点击的 icon 图标 @@ -178,6 +211,7 @@ export default { fontIconSheetsFilterList, onColClick, onClearFontIcon, + onIconInput, ...toRefs(state), }; }, diff --git a/src/components/noticeBar/index.vue b/src/components/noticeBar/index.vue index 048ffd5c..c0671ad8 100644 --- a/src/components/noticeBar/index.vue +++ b/src/components/noticeBar/index.vue @@ -3,10 +3,8 @@
-
- - -
+
{{ text }}
+
@@ -76,7 +74,7 @@ export default defineComponent({ }, setup(props, { emit }) { const noticeBarWarpRef = ref(); - const noticeBarWarpTextRef = ref(); + const noticeBarTextRef = ref(); const state = reactive({ order: 1, oneTime: '', @@ -89,7 +87,7 @@ export default defineComponent({ const initAnimation = () => { nextTick(() => { state.warpOWidth = noticeBarWarpRef.value.offsetWidth; - state.textOWidth = noticeBarWarpTextRef.value.offsetWidth; + state.textOWidth = noticeBarTextRef.value.offsetWidth; document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`); document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`); computeAnimationTime(); @@ -106,15 +104,15 @@ export default defineComponent({ // 改变 animation 动画调用 const changeAnimation = () => { if (state.order === 1) { - noticeBarWarpTextRef.value.style.animation = `oneAnimation ${state.oneTime}s linear`; + noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`; state.order = 2; } else { - noticeBarWarpTextRef.value.style.animation = `twoAnimation ${state.twoTime}s linear infinite`; + noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`; } }; // 监听 animation 动画的结束 const listenerAnimationend = () => { - noticeBarWarpTextRef.value.addEventListener( + noticeBarTextRef.value.addEventListener( 'animationend', () => { changeAnimation(); @@ -140,7 +138,7 @@ export default defineComponent({ }); return { noticeBarWarpRef, - noticeBarWarpTextRef, + noticeBarTextRef, onRightIconClick, ...toRefs(state), }; @@ -169,7 +167,10 @@ export default defineComponent({ white-space: nowrap; position: absolute; left: 0; + } + .notice-bar-warp-slot { width: 100%; + white-space: nowrap; ::v-deep(.el-carousel__item) { display: flex; align-items: center; @@ -178,10 +179,12 @@ export default defineComponent({ } .notice-bar-warp-left-icon { width: 24px; + font-size: inherit !important; } .notice-bar-warp-right-icon { width: 24px; text-align: right; + font-size: inherit !important; &:hover { cursor: pointer; } diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue index de113b40..59c25a4d 100644 --- a/src/layout/navBars/breadcrumb/user.vue +++ b/src/layout/navBars/breadcrumb/user.vue @@ -120,7 +120,10 @@ export default { return false; } screenfull.toggle(); - state.isScreenfull = !state.isScreenfull; + screenfull.on('change', () => { + if (screenfull.isFullscreen) state.isScreenfull = true; + else state.isScreenfull = false; + }); }; // 布局配置 icon 点击时 const onLayoutSetingClick = () => { diff --git a/src/theme/iconSelector.scss b/src/theme/iconSelector.scss index 7212d995..8340dcc9 100644 --- a/src/theme/iconSelector.scss +++ b/src/theme/iconSelector.scss @@ -3,7 +3,7 @@ .icon-selector-popper { padding: 0 !important; .icon-selector-warp { - height: 300px; + height: 260px; overflow: hidden; .icon-selector-warp-title { height: 40px; @@ -11,7 +11,7 @@ padding: 0 15px; } .icon-selector-warp-row { - height: 260px; + height: 230px; overflow: hidden; border-top: 1px solid #ebeef5; .el-row { @@ -20,17 +20,10 @@ .el-scrollbar__bar.is-horizontal { display: none; } - .ele-col:nth-last-child(1), - .ele-col:nth-last-child(2) { - display: none; - } - .awe-col:nth-child(-n + 24) { - display: none; - } .icon-selector-warp-item { display: flex; border: 1px solid #ebeef5; - padding: 10px; + padding: 5px; border-radius: 5px; margin-bottom: 10px; .icon-selector-warp-item-value { diff --git a/src/utils/getStyleSheets.ts b/src/utils/getStyleSheets.ts index f14e59dd..6eccb7a4 100644 --- a/src/utils/getStyleSheets.ts +++ b/src/utils/getStyleSheets.ts @@ -36,9 +36,11 @@ const getElementPlusIconfont = () => { for (let i = 0; i < styles.length; i++) { for (let j = 0; j < styles[i].cssRules.length; j++) { if (styles[i].cssRules[j].selectorText && styles[i].cssRules[j].selectorText.indexOf('.el-icon-') === 0) { - sheetsIconList.push( - `${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` - ); + if (!/--/.test(styles[i].cssRules[j].selectorText)) { + sheetsIconList.push( + `${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` + ); + } } } } @@ -67,9 +69,11 @@ const getAwesomeIconfont = () => { sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 && sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1 ) { - sheetsIconList.push( - `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` - ); + if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) { + sheetsIconList.push( + `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` + ); + } } } } diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts index 4092d9d4..e08e371c 100644 --- a/src/utils/setIconfont.ts +++ b/src/utils/setIconfont.ts @@ -1,6 +1,6 @@ // 字体图标 url const cssCdnUrlList: Array = [ - '//at.alicdn.com/t/font_2298093_wl7t9plo8fs.css', + '//at.alicdn.com/t/font_2298093_ke79kmw5s7r.css', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', ]; // 第三方 js url diff --git a/src/views/fun/noticeBar/index.vue b/src/views/fun/noticeBar/index.vue index 918d7d0d..79e3bbb5 100644 --- a/src/views/fun/noticeBar/index.vue +++ b/src/views/fun/noticeBar/index.vue @@ -11,7 +11,8 @@ @@ -55,9 +56,10 @@ export default defineComponent({ setup() { const state = reactive({ noticeList: [ - '🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）', + '🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等', + '适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）', '仓库地址：https://gitee.com/lyt-top/vue-next-admin', - '演示地址：vue3.x 版本预览（vue-next-admin）https://lyt-top.gitee.io/vue-next-admin-preview/#/login', + '演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login', ], tableData: [ { @@ -120,7 +122,7 @@ export default defineComponent({ a1: 'scrollable', a2: '是否开启垂直滚动', a3: 'boolean', - a4: '', + a4: 'true', a5: 'false', }, { diff --git a/src/views/fun/selector/index.vue b/src/views/fun/selector/index.vue index 344422c3..fb9d8b8a 100644 --- a/src/views/fun/selector/index.vue +++ b/src/views/fun/selector/index.vue @@ -1,7 +1,7 @@