'admin-21.10.17:更新优化，具体查看根目录CHANGELOG.md'

2021-10-17 12:32:28 +08:00 · 2021-10-17 12:32:28 +08:00 · 04ca9b04c1
commit 04ca9b04c1
parent 3f4c08c119
13 changed files with 144 additions and 54 deletions
--- 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.1.2
+
+`2021.10.17`
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 开启全屏时，刷新界面被还原成未全屏的状态
+- 🎯 优化 tagsView 右键菜单关闭逻辑
+- 🎯 优化 wangeditor 富文本编辑器（增加双向绑定）
+- 🎉 新增 工作流（暂不开源）
+- 🎉 新增 基础版 ts（不带国际化），切换 `vue-next-admin-template` 分支
+
 ## 1.1.1

 `2021.09.25`
--- a/README.md
+++ b/README.md
@ -123,7 +123,7 @@ cnpm run build

 #### 💕 特别感谢

-特别感谢群里老哥的建议、指导与帮忙，谢谢！
+特别感谢老哥们的建议、指导与帮忙。谢谢！

 - <a href="https://gitee.com/click33/sa-plus" target="_blank">@省长</a>
 - <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参
--- a/package.json
+++ b/package.json
@ -1,19 +1,22 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.1.1",
+	"version": "1.1.2",
+	"description": "vue3 vite next admin template",
+	"author": "lyt_20201208",
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"axios": "^0.21.4",
+		"axios": "^0.23.0",
 		"countup.js": "^2.0.8",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.2.1",
 		"echarts-gl": "^2.0.8",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.1.0-beta.16",
+		"element-plus": "^1.1.0-beta.20",
 		"jsplumb": "^2.15.6",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
@ -22,11 +25,11 @@
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.14.0",
 		"splitpanes": "^3.0.4",
-		"vue": "^3.2.6",
+		"vue": "^3.2.20",
 		"vue-clipboard3": "^1.0.1",
 		"vue-grid-layout": "^3.0.0-beta1",
-		"vue-i18n": "^9.1.7",
-		"vue-router": "^4.0.11",
+		"vue-i18n": "^9.1.9",
+		"vue-router": "^4.0.12",
 		"vue-web-screen-shot": "^1.2.0",
 		"vuex": "^4.0.2",
 		"wangeditor": "^4.7.8"
@ -34,26 +37,46 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.9.6",
+		"@types/node": "^16.11.0",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.31.2",
-		"@typescript-eslint/parser": "^4.31.2",
-		"@vitejs/plugin-vue": "^1.9.2",
-		"@vue/compiler-sfc": "^3.2.18",
+		"@typescript-eslint/eslint-plugin": "^5.0.0",
+		"@typescript-eslint/parser": "^5.0.0",
+		"@vitejs/plugin-vue": "^1.9.3",
+		"@vue/compiler-sfc": "^3.2.20",
 		"dotenv": "^10.0.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^7.18.0",
+		"eslint": "^8.0.1",
+		"eslint-plugin-vue": "^7.19.1",
 		"prettier": "^2.4.1",
-		"sass": "^1.42.1",
-		"sass-loader": "^12.1.0",
-		"typescript": "^4.4.3",
-		"vite": "^2.5.10",
+		"sass": "^1.43.2",
+		"sass-loader": "^12.2.0",
+		"typescript": "^4.4.4",
+		"vite": "^2.6.7",
 		"vue-eslint-parser": "^7.11.0"
 	},
 	"browserslist": [
 		"> 1%",
 		"last 2 versions",
 		"not dead"
-	]
+	],
+	"bugs": {
+		"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
+	},
+	"engines": {
+		"node": ">=12.0.0",
+		"npm": ">= 6.0.0"
+	},
+	"keywords": [
+		"vue",
+		"vue3",
+		"vuejs/vue-next",
+		"element-ui",
+		"element-plus",
+		"vue-next-admin",
+		"next-admin"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://gitee.com/lyt-top/vue-next-admin.git"
+	}
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -12,7 +12,7 @@ import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounte
 import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 import { useTitle } from '/@/utils/setWebTitle';
-import { Local } from '/@/utils/storage';
+import { Local, Session } from '/@/utils/storage';
 import setIntroduction from '/@/utils/setIconfont';
 import LockScreen from '/@/layout/lockScreen/index.vue';
 import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
@ -60,6 +60,10 @@ export default defineComponent({
 					store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfig'));
 					document.documentElement.style.cssText = Local.get('themeConfigStyle');
 				}
+				// 获取缓存中的全屏配置
+				if (Session.get('isTagsViewCurrenFull')) {
+					store.dispatch('tagsViewRoutes/setCurrenFullscreen', Session.get('isTagsViewCurrenFull'));
+				}
 			});
 		});
 		// 页面销毁时，关闭监听布局配置/i18n监听
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@ -0,0 +1,59 @@
+<template>
+	<div class="editor-container">
+		<div :id="id"></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted } from 'vue';
+import wangeditor from 'wangeditor';
+export default {
+	name: 'wngEditor',
+	props: {
+		// 节点 id
+		id: {
+			type: String,
+			default: () => 'wangeditor',
+		},
+		// 是否禁用
+		isDisable: {
+			type: Boolean,
+			default: () => false,
+		},
+		// 双向绑定
+		// 双向绑定值，字段名为固定，改了之后将不生效
+		// 参考：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 state = reactive({
+			editor: null,
+		});
+		// 初始化富文本
+		// https://doc.wangeditor.com/
+		const initWangeditor = () => {
+			state.editor = new wangeditor('#wangeditor');
+			state.editor.config.placeholder = '请输入内容';
+			state.editor.config.uploadImgShowBase64 = true;
+			state.editor.config.showLinkImg = false;
+			onWangeditorChange();
+			state.editor.create();
+			state.editor.txt.html(props.modelValue);
+			props.isDisable ? state.editor.disable() : state.editor.enable();
+		};
+		// 内容改变时
+		const onWangeditorChange = () => {
+			state.editor.config.onchange = (html: string) => {
+				emit('update:modelValue', html);
+			};
+		};
+		// 页面加载时
+		onMounted(() => {
+			initWangeditor();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@ -4,7 +4,7 @@
 			class="layout-scrollbar"
 			ref="layoutScrollbarRef"
 			:style="{
-				minHeight: `calc(100vh - ${headerHeight}`,
+				minHeight: `calc(100vh - ${headerHeight})`,
 				padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '',
 				transition: 'padding 0.3s ease-in-out',
 			}"
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@ -194,10 +194,12 @@ export default {
 								// 最后一个且高亮时
 								if (arr[arr.length - 1].meta.isDynamic) {
 									// 动态路由（xxx/:id/:name"）
-									router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
+									if (k !== arr.length) router.push({ name: arr[k].name, params: arr[k].params });
+									else router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
 								} else {
 									// 普通路由
-									router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
+									if (k !== arr.length) router.push({ path: arr[k].path, query: arr[k].query });
+									else router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
 								}
 							} else {
 								// 非最后一个且高亮时，跳转到下一个
@ -503,9 +505,10 @@ export default {

 <style scoped lang="scss">
 .layout-navbars-tagsview {
-	flex: 1;
 	background-color: var(--el-color-white);
 	border-bottom: 1px solid #f1f2f3;
+	z-index: 1;
+	position: relative;
 	::v-deep(.el-scrollbar__wrap) {
 		overflow-x: auto !important;
 	}
@ -567,6 +570,7 @@ export default {
 			color: var(--color-whites);
 			background: var(--color-primary);
 			border-color: var(--color-primary);
+			transition: border-color 3s ease;
 		}
 	}
 	// 风格2
--- a/src/router/route.ts
+++ b/src/router/route.ts
@ -93,7 +93,6 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 					},
 				],
 			},
-
 			{
 				path: '/limits',
 				name: 'limits',
@ -1077,7 +1076,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				component: () => import('/@/layout/routerView/iframes.vue'),
 				meta: {
 					title: 'message.router.layoutIfameView',
-					isLink: 'https://gitee.com/lyt-top/vue-next-admin',
+					isLink: 'https://wdd.js.org/jsplumb-chinese-tutorial/#/',
 					isHide: false,
 					isKeepAlive: false,
 					isAffix: true,
--- a/src/store/modules/tagsViewRoutes.ts
+++ b/src/store/modules/tagsViewRoutes.ts
@ -1,6 +1,7 @@
 import { Module } from 'vuex';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
+import { Session } from '/@/utils/storage';

 const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 	namespaced: true,
@ -15,6 +16,7 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 		},
 		// 设置卡片全屏
 		getCurrenFullscreen(state: any, bool: boolean) {
+			Session.set('isTagsViewCurrenFull', bool);
 			state.isTagsViewCurrenFull = bool;
 		},
 	},
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@ -8,7 +8,7 @@ import { ElMessage } from 'element-plus';
 export function hexToRgb(str: any) {
 	let hexs: any = '';
 	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-	if (!reg.test(str)) return ElMessage({ type: 'warning', message: '输入错误的hex' });
+	if (!reg.test(str)) return ElMessage.warning('输入错误的hex');
 	str = str.replace('#', '');
 	hexs = str.match(/../g);
 	for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
@ -24,7 +24,7 @@ export function hexToRgb(str: any) {
 */
 export function rgbToHex(r: any, g: any, b: any) {
 	let reg = /^\d{1,3}$/;
-	if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: '输入错误的rgb颜色值' });
+	if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning('输入错误的rgb颜色值');
 	let hexs = [r.toString(16), g.toString(16), b.toString(16)];
 	for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
 	return `#${hexs.join('')}`;
@ -38,7 +38,7 @@ export function rgbToHex(r: any, g: any, b: any) {
 */
 export function getDarkColor(color: any, level: number) {
 	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-	if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
+	if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
 	let rgb = hexToRgb(color);
 	for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
 	return rgbToHex(rgb[0], rgb[1], rgb[2]);
@ -52,7 +52,7 @@ export function getDarkColor(color: any, level: number) {
 */
 export function getLightColor(color: any, level: number) {
 	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-	if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
+	if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
 	let rgb = hexToRgb(color);
 	for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
 	return rgbToHex(rgb[0], rgb[1], rgb[2]);
--- a/src/utils/wartermark.ts
+++ b/src/utils/wartermark.ts
@ -3,19 +3,18 @@ const setWatermark = (str: string) => {
 	const id = '1.23452384164.123412416';
 	if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
 	const can = document.createElement('canvas');
-	can.width = 250;
-	can.height = 180;
+	can.width = 200;
+	can.height = 130;
 	const cans: any = can.getContext('2d');
 	cans.rotate((-20 * Math.PI) / 180);
 	cans.font = '12px Vedana';
 	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
-	cans.textAlign = 'center';
 	cans.textBaseline = 'Middle';
 	cans.fillText(str, can.width / 10, can.height / 2);
 	const div = document.createElement('div');
 	div.id = id;
 	div.style.pointerEvents = 'none';
-	div.style.top = '35px';
+	div.style.top = '15px';
 	div.style.left = '0px';
 	div.style.position = 'fixed';
 	div.style.zIndex = '10000000';
--- a/src/views/fun/printJs/index.vue
+++ b/src/views/fun/printJs/index.vue
@ -1,5 +1,5 @@
 <template>
-	<div id="printRref">
+	<div id="printRef">
 		<el-card shadow="hover" header="打印演示">
 			<el-alert
 				title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
@ -22,7 +22,7 @@ export default {
 		// 打印点击
 		const onPrintJs = () => {
 			printJs({
-				printable: 'printRref',
+				printable: 'printRef',
 				type: 'html',
 				css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
 				scanStyles: false,
--- a/src/views/fun/wangEditor/index.vue
+++ b/src/views/fun/wangEditor/index.vue
@ -7,34 +7,23 @@
 				:closable="false"
 				class="mb15"
 			></el-alert>
-			<div id="wangeditor"></div>
+			<Editor :is-disable="false" v-model="editorVal" />
 		</el-card>
 	</div>
 </template>

 <script lang="ts">
 import { toRefs, reactive, onMounted } from 'vue';
-import wangeditor from 'wangeditor';
+import Editor from '/@/components/editor/index.vue';
 export default {
 	name: 'funWangEditor',
+	components: { Editor },
 	setup() {
-		const state = reactive({});
-		// 初始化富文本
-		// https://doc.wangeditor.com/
-		const initWangeditor = () => {
-			const editor = new wangeditor('#wangeditor');
-			editor.config.placeholder = '请输入内容';
-			editor.config.onchange = (html: string) => {
-				console.log(html);
-				// console.log(editor.txt.html());
-				// console.log(editor.txt.text());
-			};
-			editor.create();
-		};
-		// 页面加载时
-		onMounted(() => {
-			initWangeditor();
+		const state = reactive({
+			editorVal: '',
 		});
+		// 页面加载时
+		onMounted(() => {});
 		return {
 			...toRefs(state),
 		};