客服模块的新增

src/layout/component/columnsAside.vue

@@ -2,20 +2,14 @@
 	<div class="layout-columns-aside">
 		<el-scrollbar>
 			<ul @mouseleave="onColumnsAsideMenuMouseleave()">
-				<li
-					v-for="(v, k) in columnsAsideList"
-					:key="k"
-					@click="onColumnsAsideMenuClick(v, k)"
-					@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
-					:ref="
-						(el) => {
-							if (el) columnsAsideOffsetTopRefs[k] = el;
-						}
-					"
-					:class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
-					:title="$t(v.meta.title)"
-				>
-					<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
+				<li v-for="(v, k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)"
+					@mouseenter="onColumnsAsideMenuMouseenter(v, k)" :ref="(el) => {
+						if (el) columnsAsideOffsetTopRefs[k] = el;
+					}
+						" :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
+					:title="$t(v.meta.title)">
+					<div :class="themeConfig.columnsAsideLayout"
+						v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
 						<SvgIcon :name="v.meta.icon" />
 						<div class="columns-vertical-title font12">
 							{{
@@ -31,7 +25,8 @@
 							<div class="columns-vertical-title font12">
 								{{
 									$t(v.meta.title) && $t(v.meta.title).length >= 4
-										? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
+										? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 :
+											3)
 										: $t(v.meta.title)
 								}}
 							</div>
@@ -102,9 +97,9 @@ export default defineComponent({
 			state.liOldPath = path;
 			state.liOldIndex = k;
 			state.liHoverIndex = k;
-      if(v.children&&v.children.length>0){
-			  proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(v.children[0].path));
-      }
+			if (v.children && v.children.length > 0) {
+				proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(v.children[0].path));
+			}
 			stores.setColumnsMenuHover(false);
 			stores.setColumnsNavHover(true);
 		};
@@ -133,20 +128,20 @@ export default defineComponent({
 		// 传送当前子级数据到菜单中
 		const setSendChildren = (path: string) => {
 			let currentData: any = {};
-      state.columnsAsideList.some((v:any,k:number)=>{
-        if(v.children){
-          v.children.some((sv:any)=>{
-            if(sv.path===path){
-              v['k'] = k;
-              currentData['item'] = [{ ...v }];
-              currentData['children'] = [{ ...v }];
-              if (v.children) currentData['children'] = v.children;
-              return true
-            }
-          })
-        }
-         return false
-      })
+			state.columnsAsideList.some((v: any, k: number) => {
+				if (v.children) {
+					v.children.some((sv: any) => {
+						if (sv.path === path) {
+							v['k'] = k;
+							currentData['item'] = [{ ...v }];
+							currentData['children'] = [{ ...v }];
+							if (v.children) currentData['children'] = v.children;
+							return true
+						}
+					})
+				}
+				return false
+			})
 			return currentData;
 		};
 		// 路由过滤递归函数
@@ -161,17 +156,17 @@ export default defineComponent({
 		};
 		// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
 		const setColumnsMenuHighlight = (path: string) => {
-      const currentSplitRoute = state.columnsAsideList.some((v:any)=>{
-        if(v.children){
-          v.children.some((sv:any)=>{
-            if(sv.path===path){
-              return true
-            }
-          })
-        }
-        return false
-      })
-      if (!currentSplitRoute) return false;
+			const currentSplitRoute = state.columnsAsideList.some((v: any) => {
+				if (v.children) {
+					v.children.some((sv: any) => {
+						if (sv.path === path) {
+							return true
+						}
+					})
+				}
+				return false
+			})
+			if (!currentSplitRoute) return false;
 			// 延迟拿值，防止取不到
 			setTimeout(() => {
 				onColumnsAsideDown((<any>currentSplitRoute).k);
@@ -206,7 +201,7 @@ export default defineComponent({
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-			proxy.mittBus.off('restoreDefault', () => {});
+			proxy.mittBus.off('restoreDefault', () => { });
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
@@ -232,8 +227,10 @@ export default defineComponent({
 	width: 70px;
 	height: 100%;
 	background: var(--next-bg-columnsMenuBar);
+
 	ul {
 		position: relative;
+
 		li {
 			color: var(--next-bg-columnsMenuBarColor);
 			width: 100%;
@@ -243,43 +240,54 @@ export default defineComponent({
 			cursor: pointer;
 			position: relative;
 			z-index: 1;
+
 			.columns-vertical {
 				margin: auto;
+
 				.columns-vertical-title {
 					padding-top: 1px;
 				}
 			}
+
 			.columns-horizontal {
 				display: flex;
 				height: 50px;
 				width: 100%;
 				align-items: center;
 				padding: 0 5px;
+
 				i {
 					margin-right: 3px;
 				}
+
 				a {
 					display: flex;
+
 					.columns-horizontal-title {
 						padding-top: 1px;
 					}
 				}
 			}
+
 			a {
 				text-decoration: none;
 				color: var(--next-bg-columnsMenuBarColor);
 			}
 		}
+
 		.layout-columns-active {
 			color: var(--next-bg-columnsMenuBarColor) !important;
 			transition: 0.3s ease-in-out;
 		}
+
 		.layout-columns-hover {
 			color: var(--el-color-primary);
+
 			a {
 				color: var(--el-color-primary);
 			}
 		}
+
 		.columns-round {
 			background: var(--el-color-primary);
 			color: var(--el-color-white);
@@ -293,6 +301,7 @@ export default defineComponent({
 			transition: 0.3s ease-in-out;
 			border-radius: 5px;
 		}
+
 		.columns-card {
 			@extend .columns-round;
 			top: 0;