样式调整，列表高度自适应100%

src/layout/component/header.vue

@@ -1,33 +1,23 @@
 <template>
-	<el-header class="layout-header" :height="setHeaderHeight" v-show="!isTagsViewCurrenFull">
+	<el-header class="layout-header" v-show="!isTagsViewCurrenFull">
 		<NavBarsIndex />
 	</el-header>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent,defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 
 export default defineComponent({
 	name: 'layoutHeader',
-	components: { 
+	components: {
 		NavBarsIndex: defineAsyncComponent(() => import('/@/layout/navBars/index.vue')),
 	},
 	setup() {
 		const storesTagsViewRoutes = useTagsViewRoutes();
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		// 设置 header 的高度
-		const setHeaderHeight = computed(() => {
-			let { isTagsview, layout } = themeConfig.value;
-			if (isTagsview && layout !== 'classic') return 'auto';
-			else return '50px';
-		});
 		return {
-			setHeaderHeight,
 			isTagsViewCurrenFull,
 		};
 	},

src/layout/component/main.vue

@@ -1,113 +1,71 @@
 <template>
-	<el-main class="layout-main">
-		<el-scrollbar
-			ref="layoutScrollbarRef"
-			:class="{
-				'layout-scrollbar':
-					(!isClassicOrTransverse && !currentRouteMeta.isLink && !currentRouteMeta.isIframe) ||
-					(!isClassicOrTransverse && currentRouteMeta.isLink && !currentRouteMeta.isIframe),
-			}"
-		>
-			<LayoutParentView
-				:style="{
-					padding: !isClassicOrTransverse || (currentRouteMeta.isLink && currentRouteMeta.isIframe) ? '0' : '15px',
-					transition: 'padding 0.3s ease-in-out',
-				}"
-			/>
-			<Footers v-if="themeConfig.isFooter" />
+	<el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
+		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll" wrap-class="layout-main-scroll" view-class="layout-main-scroll">
+			<LayoutParentView />
+			<LayoutFooter v-if="isFooter" />
 		</el-scrollbar>
+		<el-backtop target=".layout-backtop .el-scrollbar__wrap" />
 	</el-main>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, toRefs, reactive, watch, onMounted, computed,onUnmounted,ref } from 'vue';
+import { defineAsyncComponent, defineComponent, onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import { useUserInfo } from '/@/stores/userInfo';
 import { NextLoading } from '/@/utils/loading';
-import mittBus from '/@/utils/mitt';
-
-// 定义接口来定义对象的类型
-interface MainState {
-	headerHeight: string | number;
-	currentRouteMeta: any;
-}
 
 export default defineComponent({
 	name: 'layoutMain',
-	components: { 
+	components: {
 		LayoutParentView: defineAsyncComponent(() => import('/@/layout/routerView/parent.vue')),
-		Footers: defineAsyncComponent(() => import('/@/layout/footer/index.vue')),
+		LayoutFooter: defineAsyncComponent(() => import('/@/layout/footer/index.vue')),
 	},
 	setup() {
-		const layoutScrollbarRef = ref();
+		const layoutMainScrollbarRef = ref('');
+		const route = useRoute();
+		const storesTagsViewRoutes = useTagsViewRoutes();
 		const storesThemeConfig = useThemeConfig();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const route = useRoute();
-		const state = reactive<MainState>({
-			headerHeight: '',
-			currentRouteMeta: {},
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+		const storesUserInfo = useUserInfo();
+		const {userInfos} = storeToRefs(storesUserInfo);
+		// 设置 footer 显示/隐藏
+		const isFooter = computed(() => {
+			return themeConfig.value.isFooter && !route.meta.isIframe;
 		});
-		// 判断布局
-		const isClassicOrTransverse = computed(() => {
-			const { layout } = themeConfig.value;
-			return layout === 'classic' || layout === 'transverse';
+		// 设置 header 固定
+		const isFixedHeader = computed(() => {
+			return themeConfig.value.isFixedHeader;
+		});
+
+		
+		// 设置主内容区的高度
+		const setMainHeight = computed(() => {
+			if (isTagsViewCurrenFull.value) return '0px';
+			const { isTagsview, layout } = themeConfig.value;
+			const {showTelControl} = userInfos.value;
+			if (isTagsview && layout !== 'classic' && showTelControl){
+				return '140px';
+			}else if (isTagsview && layout !== 'classic' && !showTelControl){
+				return '120px';
+			}else {
+				return '51px';
+			}
+			
 		});
-		// 设置 main 的高度
-		const initHeaderHeight = () => {
-			const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
-			let { isTagsview } = themeConfig.value;
-			if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
-			else return (state.headerHeight = `80px`);
-		};
-		// 初始化获取当前路由 meta，用于设置 iframes padding
-		const initGetMeta = () => {
-			state.currentRouteMeta = route.meta;
-		};
 		// 页面加载前
-		onMounted(async () => {
-			await initGetMeta();
-			initHeaderHeight();
+		onMounted(() => {
 			NextLoading.done(600);
 		});
-		// 监听路由变化
-		watch(
-			() => route.path,
-			() => {
-				state.currentRouteMeta = route.meta;
-				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
-				state.headerHeight = bool ? `86px` : `115px`;
-				layoutScrollbarRef.value?.update();
-			}
-		);
-		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-		watch(
-			themeConfig,
-			(val:any) => {
-				state.currentRouteMeta = route.meta;
-				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
-				state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
-				layoutScrollbarRef.value?.update();
-			},
-			{
-				deep: true,
-			}
-		);
-		// 监听页面需要滚动事件
-		mittBus.on('scrollTopEmit', (res: any) => {
-			layoutScrollbarRef.value?.scrollTo(res.top ? res.top : 0,res.left ? res.left : 0)// 滚动到一组特定坐标(x，y)  示例参考/componets/Pagination
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			// 取消非本页面调用监听
-			mittBus.off('scrollTopEmit', () => {});
-		})
 		return {
-			themeConfig,
-			isClassicOrTransverse,
-			layoutScrollbarRef,
-			...toRefs(state),
+			layoutMainScrollbarRef,
+			isFooter,
+			isFixedHeader,
+			setMainHeight,
 		};
 	},
 });
-</script>
+</script>

src/layout/footer/index.vue

@@ -1,11 +1,3 @@
-<!--
- * @Author: zc
- * @Description: 
- * @version: 
- * @Date: 2022-11-16 16:12:31
- * @LastEditors: 
- * @LastEditTime: 2022-11-17 11:34:41
--->
 <template>
 	<div class="layout-footer pb15">
 		<div class="layout-footer-warp">

src/layout/logo/index.vue

@@ -2,9 +2,9 @@
  * @Author: zc
  * @Description: 
  * @version: 
- * @Date: 2022-10-21 09:01:22
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-16 09:51:06
+ * @Date: 2022-11-16 16:12:31
+ * @LastEditors: 
+ * @LastEditTime: 2022-11-17 13:30:27
 -->
 <template>
 	<div class="layout-logo" :style="'height:'+height+'px;'" v-if="setShowLogo" @click="onThemeConfigChange">

src/layout/main/classic.vue

@@ -1,29 +1,22 @@
-<!--
- * @Author: zc
- * @Description: 
- * @version: 
- * @Date: 2022-10-21 09:01:22
- * @LastEditors: 
- * @LastEditTime: 2022-11-17 13:00:40
--->
 <template>
 	<el-container class="layout-container flex-center">
 		<LayoutHeader />
-		<el-container class="layout-main-height-50">
+		<el-container class="layout-mian-height-50">
 			<LayoutAside />
 			<div class="flex-center layout-backtop">
-				<LayoutTagsView v-if="themeConfig.isTagsview" />
-				<LayoutMain />
+				<LayoutTagsView v-if="isTagsview" />
+				<LayoutMain ref="layoutMainRef" />
 			</div>
 		</el-container>
-		<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap" title="返回顶部"></el-backtop>
 	</el-container>
 </template>
 
 <script lang="ts">
-import { defineComponent,defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, defineComponent, computed, ref, watch, nextTick, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
+
 export default defineComponent({
 	name: 'layoutClassic',
 	components: {
@@ -33,10 +26,51 @@ export default defineComponent({
 		LayoutTagsView: defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue')),
 	},
 	setup() {
+		const layoutMainRef = ref<any>('');
+		const route = useRoute();
 		const storesThemeConfig = useThemeConfig();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
-		return {
+		// 判断是否显示 tasgview
+		const isTagsview = computed(() => {
+			return themeConfig.value.isTagsview;
+		});
+		// 重置滚动条高度，更新子级 scrollbar
+		const updateScrollbar = () => {
+			layoutMainRef.value.layoutMainScrollbarRef.update();
+		};
+		// 重置滚动条高度，由于组件是异步引入的
+		const initScrollBarHeight = () => {
+			nextTick(() => {
+				setTimeout(() => {
+					updateScrollbar();
+					layoutMainRef.value.layoutMainScrollbarRef.wrap$.scrollTop = 0;
+				}, 500);
+			});
+		};
+		// 监听路由的变化，切换界面时，滚动条置顶
+		watch(
+			() => route.path,
+			() => {
+				initScrollBarHeight();
+			}
+		);
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(
 			themeConfig,
+			() => {
+				updateScrollbar();
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			initScrollBarHeight();
+		});
+		return {
+			layoutMainRef,
+			isTagsview,
 		};
 	},
 });

src/layout/main/columns.vue

@@ -1,33 +1,21 @@
-<!--
- * @Author: zc
- * @Description: 
- * @version: 
- * @Date: 2022-10-21 09:01:22
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-17 11:38:55
--->
 <template>
 	<el-container class="layout-container">
 		<ColumnsAside />
-		<div class="layout-columns-warp">
+		<el-container class="layout-columns-warp layout-container-view h100">
 			<LayoutAside />
-			<el-container class="flex-center layout-backtop" :class="{ 'layout-backtop': !isFixedHeader }">
-				<LayoutHeader v-if="isFixedHeader" />
-				<el-scrollbar :class="{ 'layout-backtop': isFixedHeader }" ref="layoutDefaultsScrollbarRef">
-					<LayoutHeader v-if="!isFixedHeader" />
-					<LayoutMain />
-				</el-scrollbar>
-			</el-container>
-		</div>
-		<el-backtop target=".layout-backtop .el-scrollbar__wrap"  title="返回顶部"></el-backtop>
+			<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
+				<LayoutHeader />
+				<LayoutMain ref="layoutMainRef" />
+			</el-scrollbar>
+		</el-container>
 	</el-container>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent,onUnmounted,ref,defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, watch, defineComponent, onMounted, nextTick, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
-import mittBus from '/@/utils/mitt';
 
 export default defineComponent({
 	name: 'layoutColumns',
@@ -38,24 +26,52 @@ export default defineComponent({
 		ColumnsAside: defineAsyncComponent(() => import('/@/layout/component/columnsAside.vue')),
 	},
 	setup() {
+		const layoutScrollbarRef = ref<any>('');
+		const layoutMainRef = ref<any>('');
+		const route = useRoute();
 		const storesThemeConfig = useThemeConfig();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const isFixedHeader = computed(() => {
-			return themeConfig.value.isFixedHeader;
-		});
-		const layoutDefaultsScrollbarRef = ref();
-		// 监听页面需要滚动事件
-		mittBus.on('scrollTopEmit', (res: any) => {
-			layoutDefaultsScrollbarRef.value?.scrollTo(res.top ? res.top : 0,res.left ? res.left : 0)// 滚动到一组特定坐标(x，y)  示例参考/componets/Pagination
+		// 重置滚动条高度
+		const updateScrollbar = () => {
+			// 更新父级 scrollbar
+			layoutScrollbarRef.value.update();
+			// 更新子级 scrollbar
+			layoutMainRef.value.layoutMainScrollbarRef.update();
+		};
+		// 重置滚动条高度，由于组件是异步引入的
+		const initScrollBarHeight = () => {
+			nextTick(() => {
+				setTimeout(() => {
+					updateScrollbar();
+					layoutScrollbarRef.value.wrap$.scrollTop = 0;
+					layoutMainRef.value.layoutMainScrollbarRef.wrap$.scrollTop = 0;
+				}, 500);
+			});
+		};
+		// 监听路由的变化，切换界面时，滚动条置顶
+		watch(
+			() => route.path,
+			() => {
+				initScrollBarHeight();
+			}
+		);
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(
+			themeConfig,
+			() => {
+				updateScrollbar();
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			initScrollBarHeight();
 		});
-		// 页面卸载时
-		onUnmounted(() => {
-			// 取消非本页面调用监听
-			mittBus.off('scrollTopEmit', () => {});
-		})
 		return {
-			isFixedHeader,
-			layoutDefaultsScrollbarRef,
+			layoutScrollbarRef,
+			layoutMainRef,
 		};
 	},
 });

src/layout/main/defaults.vue

@@ -1,23 +1,21 @@
 <template>
 	<el-container class="layout-container">
 		<LayoutAside />
-		<el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
-			<LayoutHeader v-if="isFixedHeader" />
-			<el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
-				<LayoutHeader v-if="!isFixedHeader" />
-				<LayoutMain />
+		<el-container class="layout-container-view h100">
+			<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
+				<LayoutHeader />
+				<LayoutMain ref="layoutMainRef" />
 			</el-scrollbar>
 		</el-container>
-		<el-backtop target=".layout-backtop .el-scrollbar__wrap"  title="返回顶部"></el-backtop>
 	</el-container>
 </template>
 
 <script lang="ts">
-import { computed, ref, watch, defineComponent,onUnmounted,defineAsyncComponent} from 'vue';
+import { defineAsyncComponent, watch, defineComponent, onMounted, nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
-import mittBus from '/@/utils/mitt';
+import { NextLoading } from '/@/utils/loading';
 
 export default defineComponent({
 	name: 'layoutDefaults',
@@ -27,32 +25,53 @@ export default defineComponent({
 		LayoutMain: defineAsyncComponent(() => import('/@/layout/component/main.vue')),
 	},
 	setup() {
-		const layoutDefaultsScrollbarRef = ref();
+		const layoutScrollbarRef = ref<any>('');
+		const layoutMainRef = ref<any>('');
 		const route = useRoute();
 		const storesThemeConfig = useThemeConfig();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const isFixedHeader = computed(() => {
-			return themeConfig.value.isFixedHeader;
-		});
-		// 监听路由的变化
+		// 重置滚动条高度
+		const updateScrollbar = () => {
+			// 更新父级 scrollbar
+			layoutScrollbarRef.value.update();
+			// 更新子级 scrollbar
+			layoutMainRef.value.layoutMainScrollbarRef.update();
+		};
+		// 重置滚动条高度，由于组件是异步引入的
+		const initScrollBarHeight = () => {
+			nextTick(() => {
+				setTimeout(() => {
+					updateScrollbar();
+					layoutScrollbarRef.value.wrap$.scrollTop = 0;
+					layoutMainRef.value.layoutMainScrollbarRef.wrap$.scrollTop = 0;
+				}, 500);
+			});
+		};
+		// 监听路由的变化，切换界面时，滚动条置顶
 		watch(
 			() => route.path,
 			() => {
-				layoutDefaultsScrollbarRef.value.wrap$.scrollTop = 0;
+				initScrollBarHeight();
 			}
 		);
-		// 监听页面需要滚动事件
-		mittBus.on('scrollTopEmit', (res: any) => {
-			layoutDefaultsScrollbarRef.value?.scrollTo(res.top ? res.top : 0,res.left ? res.left : 0)// 滚动到一组特定坐标(x，y)  示例参考/componets/Pagination
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			// 取消非本页面调用监听
-			mittBus.off('scrollTopEmit', () => {});
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(
+			themeConfig,
+			() => {
+				updateScrollbar();
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			initScrollBarHeight();
+			NextLoading.done(600);
 		});
 		return {
-			isFixedHeader,
-			layoutDefaultsScrollbarRef
+			layoutScrollbarRef,
+			layoutMainRef,
 		};
 	},
 });

src/layout/main/transverse.vue

@@ -1,18 +1,64 @@
 <template>
 	<el-container class="layout-container flex-center layout-backtop">
 		<LayoutHeader />
-		<LayoutMain />
-		<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap"  title="返回顶部"></el-backtop>
+		<LayoutMain ref="layoutMainRef" />
 	</el-container>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent} from 'vue';
-export default {
+import { defineAsyncComponent, defineComponent, ref, watch, nextTick, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+export default defineComponent({
 	name: 'layoutTransverse',
-	components: { 
+	components: {
 		LayoutHeader: defineAsyncComponent(() => import('/@/layout/component/header.vue')),
 		LayoutMain: defineAsyncComponent(() => import('/@/layout/component/main.vue')),
 	},
-};
+	setup() {
+		const layoutMainRef = ref<any>('');
+		const storesThemeConfig = useThemeConfig();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const route = useRoute();
+		// 重置滚动条高度，更新子级 scrollbar
+		const updateScrollbar = () => {
+			layoutMainRef.value.layoutMainScrollbarRef.update();
+		};
+		// 重置滚动条高度，由于组件是异步引入的
+		const initScrollBarHeight = () => {
+			nextTick(() => {
+				setTimeout(() => {
+					updateScrollbar();
+					layoutMainRef.value.layoutMainScrollbarRef.wrap$.scrollTop = 0;
+				}, 500);
+			});
+		};
+		// 监听路由的变化，切换界面时，滚动条置顶
+		watch(
+			() => route.path,
+			() => {
+				initScrollBarHeight();
+			}
+		);
+		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+		watch(
+			themeConfig,
+			() => {
+				updateScrollbar();
+			},
+			{
+				deep: true,
+			}
+		);
+		// 页面加载时
+		onMounted(() => {
+			initScrollBarHeight();
+		});
+		return {
+			layoutMainRef,
+		};
+	},
+});
 </script>

src/layout/navBars/breadcrumb/search.vue

@@ -1,26 +1,28 @@
 <template>
 	<div class="layout-search-dialog">
-		<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
-			<el-autocomplete
-				v-model="menuQuery"
-				:fetch-suggestions="menuSearch"
-				placeholder="菜单搜索：支持中文、路由路径"
-				ref="layoutMenuAutocompleteRef"
-				@select="onHandleSelect"
-				:fit-input-width="true"
-			>
-				<template #prefix>
-					<el-icon class="el-input__icon">
-						<ele-Search />
-					</el-icon>
-				</template>
-				<template #default="{ item }">
-					<div>
-						<SvgIcon :name="item.meta.icon" class="mr5" />
-						{{ item.meta.title }}
-					</div>
-				</template>
-			</el-autocomplete>
+		<el-dialog v-model="isShowSearch" destroy-on-close :show-close="false">
+			<template #footer>
+				<el-autocomplete
+					v-model="menuQuery"
+					:fetch-suggestions="menuSearch"
+					placeholder="菜单搜索：支持中文、路由路径"
+					ref="layoutMenuAutocompleteRef"
+					@select="onHandleSelect"
+					:fit-input-width="true"
+				>
+					<template #prefix>
+						<el-icon class="el-input__icon">
+							<ele-Search />
+						</el-icon>
+					</template>
+					<template #default="{ item }">
+						<div>
+							<SvgIcon :name="item.meta.icon" class="mr5" />
+							{{ item.meta.title }}
+						</div>
+					</template>
+				</el-autocomplete>
+			</template>
 		</el-dialog>
 	</div>
 </template>
@@ -115,20 +117,25 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-search-dialog {
+	position: relative;
 	:deep(.el-dialog) {
-		box-shadow: unset !important;
-		border-radius: 0 !important;
-		background: rgba(0, 0, 0, 0.5);
+		.el-dialog__header,
+		.el-dialog__body {
+			display: none;
+		}
+		.el-dialog__footer {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			top: -53vh;
+		}
 	}
 	:deep(.el-autocomplete) {
 		width: 560px;
 		position: absolute;
-		top: 100px;
+		top: 150px;
 		left: 50%;
 		transform: translateX(-50%);
 	}
-	:deep(.el-dialog__header) {
-		border: 0 !important;
-	}
 }
 </style>

src/layout/navBars/tagsView/tagsView.vue

@@ -9,6 +9,7 @@
 					:data-url="v.url"
 					:class="{ 'is-active': isActive(v) }"
 					@contextmenu.prevent="onContextmenu(v, $event)"
+					@mousedown="onMousedownMenu(v, $event)"
 					@click="onTagsClick(v, k)"
 					:ref="
 						(el) => {
@@ -244,13 +245,21 @@ export default defineComponent({
 					// 动态路由（xxx/:id/:name"）：参数不同，开启多个 tagsview
 					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
 					else await singleAddTagsView(path, to);
-					if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
+					if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) {
+						// 防止首次进入界面时(登录进入) tagsViewList 不存浏览器中
+						addBrowserSetSession(state.tagsViewList);
+						return false;
+					}
 					item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
 				} else {
 					// 普通路由：参数不同，开启多个 tagsview
 					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
 					else await singleAddTagsView(path, to);
-					if (state.tagsViewList.some((v: any) => v.path === path)) return false;
+					if (state.tagsViewList.some((v: any) => v.path === path)) {
+						// 防止首次进入界面时(登录进入) tagsViewList 不存浏览器中
+						addBrowserSetSession(state.tagsViewList);
+						return false;
+					}
 					item = state.tagsViewRoutesList.find((v: any) => v.path === path);
 				}
 				if (!item) return false;
@@ -411,6 +420,13 @@ export default defineComponent({
 			state.dropdown.y = clientY;
 			contextmenuRef.value.openContextmenu(v);
 		};
+		// 鼠标按下时，判断是鼠标中键就关闭当前 tasgview
+		const onMousedownMenu = (v: any, e: any) => {
+			if (!v.meta.isAffix && e.which === 2) {
+				const item = Object.assign({}, { contextMenuClickId: 1, ...v });
+				onCurrentContextmenuClick(item);
+			}
+		};
 		// 当前的 tagsView 项点击时
 		const onTagsClick = (v: any, k: number) => {
 			state.tagsRefsIndex = k;
@@ -440,10 +456,6 @@ export default defineComponent({
 			// 判断是否是动态路由（xxx/:id/:name"）
 			return `${v.meta.isDynamic ? v.meta.isDynamicPath : v.path}-${path}`;
 		};
-		// 更新滚动条显示
-		const updateScrollbar = () => {
-			scrollbarRef.value.update();
-		};
 		// 鼠标滚轮滚动
 		const onHandleScroll = (e: any) => {
 			scrollbarRef.value.$refs.wrap$.scrollLeft += e.wheelDelta / 4;
@@ -497,7 +509,7 @@ export default defineComponent({
 					}
 				}
 				// 更新滚动条，防止不出现
-				updateScrollbar();
+				scrollbarRef.value.update();
 			});
 		};
 		// 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
@@ -624,6 +636,7 @@ export default defineComponent({
 			refreshCurrentTagsView,
 			closeCurrentTagsView,
 			onCurrentContextmenuClick,
+			onMousedownMenu,
 			...toRefs(state),
 		};
 	},

src/layout/navMenu/horizontal.vue

@@ -17,7 +17,7 @@
 								{{ val.meta.title }}
 							</template>
 							<template #title v-else>
-								<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
+								<a class="w100" @click.prevent="onALinkClick(val)">
 									<SvgIcon :name="val.meta.icon" />
 									{{ val.meta.title }}
 								</a>
@@ -32,10 +32,11 @@
 
 <script lang="ts">
 import { defineAsyncComponent, toRefs, reactive, computed, defineComponent, ref, onMounted, nextTick, onBeforeMount } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate,useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import { verifyUrl } from '/@/utils/toolsValidate';
 import mittBus from '/@/utils/mitt';
 
 export default defineComponent({
@@ -56,6 +57,7 @@ export default defineComponent({
 		const { routesList } = storeToRefs(stores);
 		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const route = useRoute();
+		const router = useRouter();
 		const state = reactive({
 			defaultActive: null,
 		});
@@ -111,6 +113,13 @@ export default defineComponent({
 				else state.defaultActive = path;
 			}
 		};
+		// 打开外部链接
+		const onALinkClick = (val: any) => {
+			const { origin, pathname } = window.location;
+			router.push(val.path);
+			if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
+			else window.open(`${origin}${pathname}#${val.meta.isLink}`);
+		};
 		// 页面加载前
 		onBeforeMount(() => {
 			setCurrentRouterHighlight(route);
@@ -133,6 +142,7 @@ export default defineComponent({
 			menuLists,
 			onElMenuHorizontalScroll,
 			elMenuHorizontalScrollRef,
+			onALinkClick,
 			...toRefs(state),
 		};
 	},

src/layout/navMenu/subItem.vue

@@ -22,7 +22,7 @@
 					<span>{{ val.meta.title }}</span>
 				</template>
 				<template v-else>
-					<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
+					<a class="w100" @click.prevent="onALinkClick(val)">
 						<SvgIcon :name="val.meta.icon" />
 						{{ val.meta.title }}
 					</a>
@@ -34,6 +34,8 @@
 
 <script lang="ts">
 import { defineAsyncComponent, computed, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { verifyUrl } from '/@/utils/toolsValidate';
 export default defineComponent({
 	name: 'navMenuSubItem',
 	components:{
@@ -46,12 +48,21 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const router = useRouter();
 		// 获取父级菜单数据
 		const chils = computed(() => {
 			return <any>props.chil;
 		});
+		// 打开外部链接
+		const onALinkClick = (val: any) => {
+			const { origin, pathname } = window.location;
+			router.push(val.path);
+			if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
+			else window.open(`${origin}${pathname}#${val.meta.isLink}`);
+		};
 		return {
 			chils,
+			onALinkClick,
 		};
 	},
 });

src/layout/navMenu/vertical.vue

@@ -22,7 +22,7 @@
 						<span>{{ val.meta.title }}</span>
 					</template>
 					<template #title v-else>
-						<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">{{ val.meta.title }}</a>
+						<a class="w100" @click.prevent="onALinkClick(val)">{{ val.meta.title }}</a>
 					</template>
 				</el-menu-item>
 			</template>
@@ -32,9 +32,10 @@
 
 <script lang="ts">
 import { defineAsyncComponent, toRefs, reactive, computed, defineComponent, onMounted, watch } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate,useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import { verifyUrl } from '/@/utils/toolsValidate';
 
 export default defineComponent({
 	name: 'navMenuVertical',
@@ -51,6 +52,7 @@ export default defineComponent({
 		const storesThemeConfig = useThemeConfig();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const route = useRoute();
+		const router = useRouter();
 		const state = reactive({
 			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
 			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
@@ -71,6 +73,13 @@ export default defineComponent({
 			if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
 			else return path;
 		};
+		// 打开外部链接
+		const onALinkClick = (val: any) => {
+			const { origin, pathname } = window.location;
+			router.push(val.path);
+			if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
+			else window.open(`${origin}${pathname}#${val.meta.isLink}`);
+		};
 		// 设置菜单的收起/展开
 		watch(
 			themeConfig.value,
@@ -95,6 +104,7 @@ export default defineComponent({
 		return {
 			menuLists,
 			getThemeConfig,
+			onALinkClick,
 			...toRefs(state),
 		};
 	},

src/layout/routerView/iframes.vue

@@ -1,73 +1,103 @@
-<!--
- * @Author: zc
- * @Description: 
- * @version: 
- * @Date: 2022-10-21 09:01:22
- * @LastEditors: 
- * @LastEditTime: 2022-11-17 13:11:05
--->
 <template>
-	<div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
-		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom" v-show="!iframeLoading"></iframe>
+	<div class="layout-padding layout-padding-unset layout-iframe">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="w100" v-for="v in setIframeList" :key="v.path" v-loading="v.meta.loading" element-loading-background="white">
+				<transition-group :name="name" mode="out-in">
+					<iframe
+						:src="v.meta.isLink"
+						:key="v.path"
+						frameborder="0"
+						height="100%"
+						width="100%"
+						style="position: absolute"
+						:data-url="v.path"
+						v-show="getRoutePath === v.path"
+						ref="iframeRef"
+					/>
+				</transition-group>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
-import { storeToRefs } from 'pinia';
+import { defineComponent, computed, watch, ref, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 
 export default defineComponent({
-	name: 'layoutIfameView',
-	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const storesTagsViewRoutes = useTagsViewRoutes();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+	name: 'layoutIframeView',
+	props: {
+		refreshKey: {
+			type: String,
+			default: () => '',
+		},
+		name: {
+			type: String,
+			default: () => 'slide-right',
+		},
+		list: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup(props) {
+		const iframeRef = ref();
 		const route = useRoute();
-		const state = reactive({
-			iframeDom: null as HTMLIFrameElement | null,
-			iframeLoading: true,
-			iframeUrl: '',
+		// 处理 list 列表，当打开时，才进行加载
+		const setIframeList = computed(() => {
+			return (<any>props.list).filter((v: any) => v.meta.isIframeOpen);
+		});
+		// 获取 iframe 当前路由 path
+		const getRoutePath = computed(() => {
+			return route.path;
 		});
-		// 初始化页面加载 loading
-		const initIframeLoad = () => {
-			state.iframeUrl = <any>route.meta.isLink;
+		// 关闭 iframe loading
+		const closeIframeLoading = (val: string, item: any) => {
 			nextTick(() => {
-				state.iframeLoading = true;
-				const iframe = state.iframeDom;
-				if (!iframe) return false;
-				iframe.onload = () => {
-					state.iframeLoading = false;
-				};
+				if (!iframeRef.value) return false;
+				iframeRef.value.forEach((v: any) => {
+					if (v.dataset.url === val) {
+						v.onload = () => {
+							if (item.meta.isIframeOpen && item.meta.loading) item.meta.loading = false;
+						};
+					}
+				});
 			});
 		};
-		// 设置 iframe 的高度
-		const setIframeHeight = computed(() => {
-			let { isTagsview } = themeConfig.value;
-			if (isTagsViewCurrenFull.value) {
-				return `1px`;
-			} else {
-				if (isTagsview) return `86px`;
-				else return `51px`;
+		// 监听路由变化，初始化 iframe 数据，防止多个 iframe 时，切换不生效
+		watch(
+			() => route.fullPath,
+			(val) => {
+				const item: any = props.list.find((v: any) => v.path === val);
+				if (!item) return false;
+				if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
+				closeIframeLoading(val, item);
+			},
+			{
+				immediate: true,
 			}
-		});
-		// 页面加载时
-		onMounted(() => {
-			initIframeLoad();
-		});
-		// 监听路由变化，多个 iframe 时使用
+		);
+		// 监听 iframe refreshKey 变化，用于 tagsview 右键菜单刷新
 		watch(
-			() => route.path,
+			() => props.refreshKey,
 			() => {
-				initIframeLoad();
+				const item: any = props.list.find((v: any) => v.path === route.path);
+				if (!item) return false;
+				if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
+				setTimeout(() => {
+					item.meta.isIframeOpen = true;
+					item.meta.loading = true;
+					closeIframeLoading(route.fullPath, item);
+				});
+			},
+			{
+				deep: true,
 			}
 		);
 		return {
-			setIframeHeight,
-			...toRefs(state),
+			iframeRef,
+			setIframeList,
+			getRoutePath,
 		};
 	},
 });

src/layout/routerView/link.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-link-container">
+	<div class="layout-padding layout-link-container">
 		<div class="layout-padding-auto layout-padding-view">
 			<div class="layout-link-warp">
 				<i class="layout-link-icon iconfont icon-xingqiu"></i>
@@ -66,17 +66,6 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-link-container {
-	.layout-padding-auto{
-		height: inherit;
-	}
-	.layout-padding-view{
-		background: var(--el-color-white);
-		width: 100%;
-		height: 100%;
-		border-radius: 4px;
-		border: 1px solid var(--el-border-color-light, #ebeef5);
-		overflow: hidden;
-	}
 	.layout-link-warp {
 		margin: auto;
 		display: flex;

src/theme/app.scss

@@ -53,6 +53,14 @@ body,
 .layout-container {
 	width: 100%;
 	height: 100%;
+	.layout-pd {
+		padding: 15px !important;
+	}
+	.layout-flex {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
 	.layout-aside {
 		background: var(--hotline-bg-menuBar);
 		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
@@ -68,12 +76,58 @@ body,
 	}
 	.layout-header {
 		padding: 0 !important;
+		height: auto !important;
 	}
 	.layout-main {
 		padding: 0 !important;
 		overflow: hidden;
 		width: 100%;
 		background-color: var(--hotline-bg-main-color);
+		display: flex;
+		flex-direction: column;
+		// 内层 el-scrollbar样式，用于界面高度自适应（main.vue）
+		.layout-main-scroll {
+			@extend .layout-flex;
+			.layout-parent {
+				@extend .layout-flex;
+				position: relative;
+			}
+		}
+	}
+	// 用于界面高度自适应
+	.layout-padding {
+		@extend .layout-pd;
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		overflow: hidden;
+		@extend .layout-flex;
+		&-auto {
+			height: inherit;
+			@extend .layout-flex;
+		}
+		&-view {
+			background-color: var(--el-color-white);
+			width: 100%;
+			height: 100%;
+			border-radius: 8px;
+			overflow: hidden;
+		}
+	}
+	// 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
+	.layout-padding-unset {
+		padding: 0 !important;
+		&-view {
+			border-radius: 0 !important;
+			border: none !important;
+		}
+	}
+	// 用于设置 iframe loading 时的高度（loading 垂直居中显示）
+	.layout-iframe {
+		.el-loading-parent--relative {
+			height: 100%;
+		}
 	}
 	.el-scrollbar {
 		width: 100%;
@@ -129,10 +183,6 @@ body,
 		z-index: 9999998;
 		animation: error-img 0.3s;
 	}
-	.layout-scrollbar {
-		@extend .el-scrollbar;
-		padding: 15px;
-	}
 	.layout-main-height-50 {
 		height: calc(100vh - 50px);
 	}
@@ -312,6 +362,13 @@ body,
 .mt30{
 	margin-top: 30px;
 }
+// 页面padding
+.pd15{
+	padding: 15px;
+}
+.pd20{
+	padding: 20px;
+}
 // 表格头部文字
 .table-title{
 	font-size: var(--el-font-size-large);

src/theme/element.scss

@@ -258,20 +258,24 @@
 
 /* scrollbar
 ------------------------------- */
-.el-scrollbar__bar {
-	z-index: 4;
-}
+/*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
 .el-scrollbar__wrap {
-	max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
+	max-height: 100%;
 }
 .el-select-dropdown .el-scrollbar__wrap {
 	overflow-x: scroll !important;
 }
+/*修复Select 选择器高度问题*/
 .el-select-dropdown__wrap {
-	max-height: 274px !important; /*修复Select 选择器高度问题*/
+	max-height: 274px !important;
 }
+/*修复Cascader 级联选择器高度问题*/
 .el-cascader-menu__wrap.el-scrollbar__wrap {
-	height: 204px !important; /*修复Cascader 级联选择器高度问题*/
+	height: 204px !important;
+}
+/*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
+.layout-container-view .el-scrollbar__view {
+	height: 100%;
 }
 
 /* Drawer 抽屉

src/theme/other.scss

@@ -1,7 +1,7 @@
 /* wangeditor富文本编辑器
 ------------------------------- */
 .editor-container {
-	z-index: 9999;
+	z-index: 10;
 	.w-e-toolbar {
 		border: 1px solid var(--el-border-color-light, #ebeef5) !important;
 		border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;

src/types/mitt.ts

@@ -0,0 +1,13 @@
+// mitt 事件类型定义
+export type MittType = {
+	openSetingsDrawer?: string; // 打开布局设置弹窗
+	restoreDefault?: string; // 分栏布局，鼠标移入、移出数据显示
+	setSendColumnsChildren?: string; // 分栏布局，鼠标移入、移出菜单数据传入到 navMenu 下的菜单中
+	setSendClassicChildren?: string; // 经典布局，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+	getBreadcrumbIndexSetFilterRoutes?: string; // 布局设置弹窗，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+	layoutMobileResize?: object; // 浏览器窗口改变时，用于适配移动端界面显示
+	openOrCloseSortable?: string; // 布局设置弹窗，开启 TagsView 拖拽
+	openShareTagsView?: string; // 布局设置弹窗，开启 TagsView 共用
+	onTagsViewRefreshRouterView?: any; // tagsview 刷新界面
+	onCurrentContextmenuClick?: any; // tagsview 右键菜单每项点击时
+};

src/views/deviceManagement/iverConfig/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ivrContent">
+    <div class="ivrContent  layout-padding">
         <el-alert type="warning" :closable="false">
             <template #title>
                 鼠标右键新增、删除、编辑节点。点击节点查看节点更多信息。

src/views/deviceManagement/ivrCategroy/index.vue

@@ -1,25 +1,28 @@
 <template>
-    <div class="ivrContent">
-        <el-card shadow="never">
+    <div class="deviceManagement-ivrCategroy-container layout-padding">
+        <div class="layout-padding-auto layout-padding-view pd20">
             <div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
+                <p class="table-title">信息列表</p>
                 <div v-auth="'300302'">
-                    <el-button type="primary"  @click="onAddCategory" v-waves>
-                        <SvgIcon name="ele-Plus" class="mr5"/>新增分类
+                    <el-button type="primary" @click="onAddCategory" v-waves>
+                        <SvgIcon name="ele-Plus" class="mr5" />新增分类
                     </el-button>
                 </div>
-			</div>
+            </div>
             <template v-if="authShow">
                 <!-- 表格 -->
                 <el-table :data="list" v-loading="loading">
                     <el-table-column prop="name" label="分类名称" show-overflow-tooltip></el-table-column>
                     <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170"></el-table-column>
+                    <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
+                    </el-table-column>
                     <el-table-column label="操作" width="150" fixed="right" align="center">
                         <template #default="scope">
-                            <el-button text type="primary" @click="onEditCategroy(scope.row)"  v-auth="'300303'">修改</el-button>
+                            <el-button text type="primary" @click="onEditCategroy(scope.row)" v-auth="'300303'">修改
+                            </el-button>
                             <!-- <el-button text type="success" @click="configIvr(scope.row)">配置ivr</el-button> -->
-                            <el-button text type="danger" @click="onDelCategroy(scope.row)"  v-auth="'300304'">删除</el-button>
+                            <el-button text type="danger" @click="onDelCategroy(scope.row)" v-auth="'300304'">删除
+                            </el-button>
                         </template>
                     </el-table-column>
                     <template #empty>
@@ -28,40 +31,43 @@
                 </el-table>
             </template>
             <template v-else>
-                 <el-alert title="您暂无权限查看" type="warning" show-icon :closable="false"/>
+                <el-alert title="您暂无权限查看" type="warning" show-icon :closable="false" />
             </template>
-        </el-card>
-        
+        </div>
+
+
         <el-dialog v-model="isShowDialog" width="600px" draggable :title="dialogTitle">
-			<el-form :model="ruleForm" label-width="100px"  ref="ruleFormRef">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item label="ivr分类名称" prop="name" :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
-							<el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
-						<el-form-item label="备注" prop="remark">
-							<el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入备注" clearable></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="isShowDialog = false">取 消</el-button>
-					<el-button type="primary" @click="onSubmit">保 存</el-button>
-				</span>
-			</template>
-		</el-dialog>
+            <el-form :model="ruleForm" label-width="100px" ref="ruleFormRef">
+                <el-row :gutter="35">
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                        <el-form-item label="ivr分类名称" prop="name"
+                            :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
+                            <el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
+                        <el-form-item label="备注" prop="remark">
+                            <el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"
+                                placeholder="请输入备注" clearable></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="isShowDialog = false">取 消</el-button>
+                    <el-button type="primary" @click="onSubmit">保 存</el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script lang="ts" setup name="ivrCategroy">
-import {  onMounted, reactive, ref, toRefs ,computed} from "vue";
-import {ElMessage, ElMessageBox} from 'element-plus'
-import {getIvrCategories,addIvrCategroies, updateIvrCategroies, deleteIvrCategroies} from "/@/api/deviceManagement/ivr";
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getIvrCategories, addIvrCategroies, updateIvrCategroies, deleteIvrCategroies } from "/@/api/deviceManagement/ivr";
 import { formatDate } from '/@/utils/formatTime';
-import {storeToRefs} from 'pinia';
+import { storeToRefs } from 'pinia';
 import { useUserInfo } from '/@/stores/userInfo';
 // import { useRouter } from "vue-router";
 const loading = ref(false);
@@ -71,73 +77,73 @@ const isShowDialog = ref(false);
 let dialogTitle = ref('新增ivr分类');
 
 interface stateIvrCategroy {
-    ruleForm:{
-        name:string,
-        remark:string
+    ruleForm: {
+        name: string,
+        remark: string
     }
 }
 const state = reactive<stateIvrCategroy>({
-    ruleForm:{
-        name:"",
-        remark:""
+    ruleForm: {
+        name: "",
+        remark: ""
     }
 })
 const ruleFormRef = ref();
-const onAddCategory = ()=>{// 新增分类
+const onAddCategory = () => {// 新增分类
     dialogTitle.value = "新增分类";
-    if(ruleFormRef.value){
+    if (ruleFormRef.value) {
         ruleFormRef.value.resetFields();
     }
     state.ruleForm = {
-        name:"",
-        remark:""
+        name: "",
+        remark: ""
     }
     isShowDialog.value = true;
 }
-const onEditCategroy = (row:any)=>{// 编辑分类
+const onEditCategroy = (row: any) => {// 编辑分类
     dialogTitle.value = "编辑分类";
-    if(ruleFormRef.value){
+    if (ruleFormRef.value) {
         ruleFormRef.value.resetFields();
     }
     state.ruleForm = JSON.parse(JSON.stringify(row));
     isShowDialog.value = true;
 }
-const onDelCategroy = (row:any)=>{ //删除分类
+const onDelCategroy = (row: any) => { //删除分类
     ElMessageBox.confirm(`此操作将永久删除分类：【${row.name}】，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(() => {
-		deleteIvrCategroies(row.id).then(() => {
-			ElMessage.success('删除成功');
-			handleQuery();
-		});
-	}).catch(() => {});
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        deleteIvrCategroies(row.id).then(() => {
+            ElMessage.success('删除成功');
+            handleQuery();
+        });
+    }).catch(() => { });
 }
-const handleQuery = ()=>{ //查询列表
+const handleQuery = () => { //查询列表
     loading.value = true;
-    getIvrCategories().then((res:any)=>{
+    getIvrCategories().then((res: any) => {
         list.value = res?.result ?? [];
         for (let i of list.value) {
             i.creationTime = formatDate(new Date(i.creationTime), 'YYYY-mm-dd HH:MM:SS');
         }
         setTimeout(() => {
-			loading.value = false;
-		}, 300);
+            loading.value = false;
+        }, 300);
     })
 }
-const onSubmit = ()=>{// 保存
+const onSubmit = () => {// 保存
     ruleFormRef.value.validate((valid: boolean) => {
         if (valid) {
             loading.value = true;
-            if(dialogTitle.value === '新增分类'){
-                addIvrCategroies(state.ruleForm).then(()=>{
+            if (dialogTitle.value === '新增分类') {
+                addIvrCategroies(state.ruleForm).then(() => {
                     ElMessage.success("新增成功")
                     handleQuery();
                     isShowDialog.value = false;
                 })
-            }else if(dialogTitle.value === '编辑分类'){
-                updateIvrCategroies(state.ruleForm).then(()=>{
+            } else if (dialogTitle.value === '编辑分类') {
+                updateIvrCategroies(state.ruleForm).then(() => {
                     ElMessage.success("更新成功")
                     handleQuery();
                     isShowDialog.value = false;
@@ -149,8 +155,8 @@ const onSubmit = ()=>{// 保存
     });
 }
 const storesUserInfo = useUserInfo();
-const {userInfos} = storeToRefs(storesUserInfo);
-const authShow = computed(()=>{ // 校验是否有查看权限
+const { userInfos } = storeToRefs(storesUserInfo);
+const authShow = computed(() => { // 校验是否有查看权限
     return userInfos.value.authBtnList.includes('300301')
 })
 // const configIvr = (row:any)=>{ // 配置ivr
@@ -163,14 +169,18 @@ const authShow = computed(()=>{ // 校验是否有查看权限
 //         }
 //     })
 // }
-const {ruleForm} = toRefs(state);
-onMounted(()=>{
-    if(userInfos.value.authBtnList.includes('300301')){
+const { ruleForm } = toRefs(state);
+onMounted(() => {
+    if (userInfos.value.authBtnList.includes('300301')) {
         handleQuery();
     }
 })
 
 </script>
 <style scoped lang="scss">
-
+.deviceManagement-ivrCategroy-container{
+    .el-table {
+        flex: 1;
+    }
+}
 </style>

src/views/deviceManagement/tels/index.vue

@@ -1,39 +1,31 @@
-<!--
- * @Author: zc
- * @Description: 
- * @version: 
- * @Date: 2022-08-16 13:42:46
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-16 16:30:04
--->
 <template>
-    <div class="tels">
-        <el-card shadow="never">
+    <div class="deviceManagement-tels-container layout-padding">
+        <div class="layout-padding-auto layout-padding-view pd20">
             <div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
+                <p class="table-title">信息列表</p>
                 <div v-auth="'300101'">
-                    <el-button type="primary"  @click="asyncDevice" v-waves>
-                        <SvgIcon name="ele-Refresh" class="mr5"/>同步
+                    <el-button type="primary" @click="asyncDevice" v-waves>
+                        <SvgIcon name="ele-Refresh" class="mr5" />同步
                     </el-button>
                 </div>
-			</div>
+            </div>
             <!-- 表格 -->
-            <el-table :data="list" v-loading="loading">
+            <el-table :data="list" v-loading="loading"  style="width: 100%">
                 <el-table-column prop="no" label="分机编号" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="groupNames" label="所属分机组" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="registerIP" label="注册IP" show-overflow-tooltip></el-table-column>
                 <el-table-column label="分机状态" show-overflow-tooltip prop="telStatusText"></el-table-column>
-                <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip  width="170"></el-table-column>
+                <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170"></el-table-column>
                 <template #empty>
-                        <Empty />
-                    </template>
+                    <Empty />
+                </template>
             </el-table>
-        </el-card>
+        </div>
     </div>
 </template>
 
 <script lang="ts" name="tels" setup>
-import { ref,onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { formatDate } from '/@/utils/formatTime';
 // 引入api
@@ -73,11 +65,16 @@ const asyncDevice = () => {
         })
     }).catch(() => { });
 }
-onMounted(()=>{
+onMounted(() => {
     getList();
 })
 
 </script>
 
 <style lang="scss" scoped>
+.deviceManagement-tels-container {
+    .el-table {
+        flex: 1;
+    }
+}
 </style>

src/views/deviceManagement/telsGroup/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="tels">
-        <el-card shadow="never">
+    <div class="deviceManagement-telsGroup-container layout-padding">
+        <div class="layout-padding-auto layout-padding-view pd20">
             <div class="flex-center-between mb20">
                 <p class="table-title">信息列表</p>
                 <div v-auth="'300202'">
@@ -9,32 +9,30 @@
                     </el-button>
                 </div>
             </div>
-            <!-- 表格 -->
-            <div :style="{ height: `calc(100vh - ${setViewHeight}` }">
-                <el-table :data="list" v-loading="loading" height="100%">
-                    <el-table-column prop="no" label="编号" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="name" label="分机组名称" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="distributionText" label="呼叫分配方式" show-overflow-tooltip></el-table-column>
-                    <el-table-column label="是否默认分组" show-overflow-tooltip>
-                        <template #default="scope">
-                            {{ scope.row.isDefault ? '是' : '否' }}
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
-                    </el-table-column>
-                    <el-table-column label="操作" width="100" fixed="right" align="center">
-                        <template #default="scope">
-                            <el-button text type="primary" @click="configure(scope.row)" v-auth="'300203'">配置分机组
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                    <template #empty>
-                        <Empty />
+            <el-table :data="list" v-loading="loading" height="100%">
+                <el-table-column prop="no" label="编号" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="name" label="分机组名称" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="distributionText" label="呼叫分配方式" show-overflow-tooltip></el-table-column>
+                <el-table-column label="是否默认分组" show-overflow-tooltip>
+                    <template #default="scope">
+                        {{ scope.row.isDefault ? '是' : '否' }}
                     </template>
-                </el-table>
-            </div>
-        </el-card>
+                </el-table-column>
+                <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
+                </el-table-column>
+                <el-table-column label="操作" width="100" fixed="right" align="center">
+                    <template #default="scope">
+                        <el-button text type="primary" @click="configure(scope.row)" v-auth="'300203'">配置分机组
+                        </el-button>
+                    </template>
+                </el-table-column>
+                <template #empty>
+                    <Empty />
+                </template>
+            </el-table>
+        </div>
+
 
         <!-- 配置分机组 -->
         <el-dialog v-model="isShowDialog" draggable :title="dialogTitle">
@@ -109,10 +107,8 @@
 </template>
 
 <script lang="ts" name="tels" setup>
-import { ref, reactive, toRefs, computed, onMounted } from "vue";
+import { ref, reactive, toRefs, onMounted } from "vue";
 import { ElMessage, ElNotification } from 'element-plus';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { storeToRefs } from 'pinia';
 import { formatDate } from '/@/utils/formatTime';
 import { useUserInfo } from '/@/stores/userInfo';
@@ -269,20 +265,6 @@ const save = () => { // 保存分机组配置
         }
     });
 }
-const storesThemeConfig = useThemeConfig();
-const stores = useTagsViewRoutes();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const { isTagsViewCurrenFull } = storeToRefs(stores);
-// 设置 view 的高度
-const setViewHeight = computed(() => {
-    let { isTagsview } = themeConfig.value;
-    if (isTagsViewCurrenFull.value) {
-        return `80px`;
-    } else {
-        if (isTagsview) return `164px`;
-        else return `130px`;
-    }
-});
 // 页面加载时
 onMounted(() => {
     getTelList(); //获取分机列表
@@ -293,4 +275,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.deviceManagement-telsGroup-container{
+    .el-table {
+        flex: 1;
+    }
+}
 </style>

src/views/error/401.vue

@@ -1,37 +1,33 @@
 <template>
-	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="error-flex">
-			<div class="left">
-				<div class="left-item">
-					<div class="left-item-animation left-item-num">401</div>
-					<div class="left-item-animation left-item-title">您未被授权，没有操作权限~</div>
-					<div class="left-item-animation left-item-btn">
-						<el-button type="primary" round @click="onSetAuth">重新授权</el-button>
+	<div cclass="error layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="error-flex">
+				<div class="left">
+					<div class="left-item">
+						<div class="left-item-animation left-item-num">401</div>
+						<div class="left-item-animation left-item-title">您未被授权，没有操作权限~</div>
+						<div class="left-item-animation left-item-btn">
+							<el-button type="primary" round @click="onSetAuth">重新授权</el-button>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="right">
-				<img :src="getImageUrl('/public/401.png')" alt=""/>
+				<div class="right">
+					<img :src="getImageUrl('/public/401.png')" alt="" />
+				</div>
 			</div>
 		</div>
+
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { defineComponent } from 'vue';
 import { Session } from '/@/utils/storage';
 import { getImageUrl } from "/@/utils/tools";
 
 export default defineComponent({
 	name: '401',
 	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const storesTagsViewRoutes = useTagsViewRoutes();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const onSetAuth = () => {
 			// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
 			// 清除缓存/token等
@@ -39,19 +35,8 @@ export default defineComponent({
 			// 使用 reload 时，不需要调用 resetRoute() 重置路由
 			window.location.reload();
 		};
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = themeConfig.value;
-			if (isTagsViewCurrenFull.value) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
 		return {
 			onSetAuth,
-			initTagViewHeight,
 			getImageUrl
 		};
 	},
@@ -63,16 +48,19 @@ export default defineComponent({
 	height: 100%;
 	background-color: var(--el-color-white);
 	display: flex;
+
 	.error-flex {
 		margin: auto;
 		display: flex;
 		height: 350px;
 		width: 900px;
+
 		.left {
 			flex: 1;
 			height: 100%;
 			align-items: center;
 			display: flex;
+
 			.left-item {
 				.left-item-animation {
 					opacity: 0;
@@ -80,33 +68,39 @@ export default defineComponent({
 					animation-duration: 0.5s;
 					animation-fill-mode: forwards;
 				}
+
 				.left-item-num {
 					color: var(--el-color-info);
 					font-size: 55px;
 				}
+
 				.left-item-title {
 					font-size: 20px;
 					color: var(--el-text-color-primary);
 					margin: 15px 0 5px 0;
 					animation-delay: 0.1s;
 				}
+
 				.left-item-msg {
 					color: var(--el-text-color-secondary);
 					font-size: 12px;
 					margin-bottom: 30px;
 					animation-delay: 0.2s;
 				}
+
 				.left-item-btn {
 					animation-delay: 0.2s;
 				}
 			}
 		}
+
 		.right {
 			flex: 1;
 			opacity: 0;
 			animation-name: error-img;
 			animation-duration: 2s;
 			animation-fill-mode: forwards;
+
 			img {
 				width: 100%;
 				height: 100%;

src/views/error/404.vue

@@ -1,55 +1,39 @@
 <template>
-	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="error-flex">
-			<div class="left">
-				<div class="left-item">
-					<div class="left-item-animation left-item-num">404</div>
-					<div class="left-item-animation left-item-title">地址输入错误，请重新输入地址~</div>
-					<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题。</div>
-					<div class="left-item-animation left-item-btn">
-						<el-button type="primary" round @click="onGoHome">返回首页</el-button>
+	<div class="error layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="error-flex">
+				<div class="left">
+					<div class="left-item">
+						<div class="left-item-animation left-item-num">404</div>
+						<div class="left-item-animation left-item-title">地址输入错误，请重新输入地址~</div>
+						<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题。</div>
+						<div class="left-item-animation left-item-btn">
+							<el-button type="primary" round @click="onGoHome">返回首页</el-button>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="right">
-				<img :src="getImageUrl('/public/404.png')" alt=""/>
+				<div class="right">
+					<img :src="getImageUrl('/public/404.png')" alt="" />
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent } from 'vue';
 import { useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { getImageUrl } from "/@/utils/tools";
 
 export default defineComponent({
 	name: '404',
 	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const storesTagsViewRoutes = useTagsViewRoutes();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const router = useRouter();
 		const onGoHome = () => {
 			router.push('/');
 		};
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = themeConfig.value;
-			if (isTagsViewCurrenFull.value) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
 		return {
 			onGoHome,
-			initTagViewHeight,
 			getImageUrl
 		};
 	},
@@ -59,18 +43,18 @@ export default defineComponent({
 <style scoped lang="scss">
 .error {
 	height: 100%;
-	background-color: var(--el-color-white);
-	display: flex;
 	.error-flex {
 		margin: auto;
 		display: flex;
 		height: 350px;
 		width: 900px;
+
 		.left {
 			flex: 1;
 			height: 100%;
 			align-items: center;
 			display: flex;
+
 			.left-item {
 				.left-item-animation {
 					opacity: 0;
@@ -78,27 +62,32 @@ export default defineComponent({
 					animation-duration: 0.5s;
 					animation-fill-mode: forwards;
 				}
+
 				.left-item-num {
 					color: var(--el-color-info);
 					font-size: 55px;
 				}
+
 				.left-item-title {
 					font-size: 20px;
 					color: var(--el-text-color-primary);
 					margin: 15px 0 5px 0;
 					animation-delay: 0.1s;
 				}
+
 				.left-item-msg {
 					color: var(--el-text-color-secondary);
 					font-size: 12px;
 					margin-bottom: 30px;
 					animation-delay: 0.2s;
 				}
+
 				.left-item-btn {
 					animation-delay: 0.2s;
 				}
 			}
 		}
+
 		.right {
 			flex: 1;
 			opacity: 0;

src/views/home/index.vue

@@ -4,103 +4,35 @@
  * @version: 
  * @Date: 2022-08-09 16:19:57
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-15 16:34:33
+ * @LastEditTime: 2022-11-17 14:41:30
 -->
 <template>
-	<div class="error" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<el-card>
-			<div class="error-flex">
-			<div class="left">
-				<div class="left-item">
-					<div class="left-item-animation left-item-num">资源建设中~</div>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+		<!-- 普通溢出内容隐藏 -->
+				<div class="error-flex">
+				<div class="left">
+					<div class="left-item">
+						<div class="left-item-animation left-item-num">资源建设中~</div>
+					</div>
+				</div>
+				<!--  v-viewer 图片预览-->
+				<div class="right">
+					<img v-lazy="src"  alt=""/>
 				</div>
 			</div>
-			<!--  v-viewer 图片预览-->
-			<div class="right">
-				<img v-lazy="src"  alt=""/>
-			</div>
+		<!-- 使用 `el-scrollbar` 进行美化滚动条。如：`el-scrollbar`
+		<el-scrllbar> xxx 内容区 </el-scrllbar> -->
 		</div>
-		</el-card>
-	</div>
+  </div>
 </template>
 
 <script lang="ts" setup name="home">
-import {computed} from "vue";
-import {storeToRefs} from "pinia";
-// import {useRouter} from "vue-router";
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-	const storesThemeConfig = useThemeConfig();
-	const storesTagsViewRoutes = useTagsViewRoutes();
-	const { themeConfig } = storeToRefs(storesThemeConfig);
-	const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-	// const router = useRouter();
 	const src:string = "https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png";
-	// 设置主内容的高度
-	const initTagViewHeight = computed(() => {
-		let { isTagsview } = themeConfig.value;
-		if (isTagsViewCurrenFull.value) {
-			return `30px`;
-		} else {
-			if (isTagsview) return `114px`;
-			else return `80px`;
-		}
-	});
 </script>
 
 <style scoped lang="scss">
 .error {
-	height: 100%;
-	width: 100%;
-	.error-flex {
-		margin: auto;
-		display: flex;
-		height: 350px;
-		width: 900px;
-		.left {
-			flex: 1;
-			height: 100%;
-			align-items: center;
-			display: flex;
-			.left-item {
-				.left-item-animation {
-					opacity: 0;
-					animation-name: error-num;
-					animation-duration: 0.5s;
-					animation-fill-mode: forwards;
-				}
-				.left-item-num {
-					color: var(--el-color-info);
-					font-size: 55px;
-				}
-				.left-item-title {
-					font-size: 20px;
-					color: var(--el-text-color-primary);
-					margin: 15px 0 5px 0;
-					animation-delay: 0.1s;
-				}
-				.left-item-msg {
-					color: var(--el-text-color-secondary);
-					font-size: 12px;
-					margin-bottom: 30px;
-					animation-delay: 0.2s;
-				}
-				.left-item-btn {
-					animation-delay: 0.2s;
-				}
-			}
-		}
-		.right {
-			flex: 1;
-			opacity: 0;
-			animation-name: error-img;
-			animation-duration: 2s;
-			animation-fill-mode: forwards;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
+	
 }
 </style>

src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="system-dept-container">
-		<el-card shadow="hover">
+	<div class="system-dept-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
 			<div class="system-dept-search mb15">
 				<el-input size="default" placeholder="请输入部门名称" style="max-width: 180px"> </el-input>
 				<el-button size="default" type="primary" class="ml10">
@@ -52,10 +52,8 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
+import { defineAsyncComponent, ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import AddDept from '/@/views/system/dept/component/addDept.vue';
-import EditDept from '/@/views/system/dept/component/editDept.vue';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -73,7 +71,7 @@ interface TableDataState {
 		total: number;
 		loading: boolean;
 		param: {
-			PageIndex: number;
+			pageNum: number;
 			pageSize: number;
 		};
 	};
@@ -81,7 +79,10 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'systemDept',
-	components: { AddDept, EditDept },
+	components: {
+		AddDept: defineAsyncComponent(() => import('/@/views/system/dept/component/addDept.vue')),
+		EditDept: defineAsyncComponent(() => import('/@/views/system/dept/component/editDept.vue')),
+	},
 	setup() {
 		const addDeptRef = ref();
 		const editDeptRef = ref();
@@ -91,7 +92,7 @@ export default defineComponent({
 				total: 0,
 				loading: false,
 				param: {
-					PageIndex: 1,
+					pageNum: 1,
 					pageSize: 10,
 				},
 			},

src/views/system/dic/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="system-dic-container">
-		<el-card shadow="hover">
+	<div class="system-dic-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
 			<div class="system-user-search mb15">
 				<el-input size="default" placeholder="请输入字典名称" style="max-width: 180px"> </el-input>
 				<el-button size="default" type="primary" class="ml10">
@@ -41,7 +41,7 @@
 				class="mt15"
 				:pager-count="5"
 				:page-sizes="[10, 20, 30]"
-				v-model:current-page="tableData.param.PageIndex"
+				v-model:current-page="tableData.param.pageNum"
 				background
 				v-model:page-size="tableData.param.pageSize"
 				layout="total, sizes, prev, pager, next, jumper"
@@ -55,10 +55,8 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { defineAsyncComponent, toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import AddDic from '/@/views/system/dic/component/addDic.vue';
-import EditDic from '/@/views/system/dic/component/editDic.vue';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -74,7 +72,7 @@ interface TableDataState {
 		total: number;
 		loading: boolean;
 		param: {
-			PageIndex: number;
+			pageNum: number;
 			pageSize: number;
 		};
 	};
@@ -82,7 +80,10 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'systemDic',
-	components: { AddDic, EditDic },
+	components: {
+		AddDic: defineAsyncComponent(() => import('/@/views/system/dic/component/addDic.vue')),
+		EditDic: defineAsyncComponent(() => import('/@/views/system/dic/component/editDic.vue')),
+	},
 	setup() {
 		const addDicRef = ref();
 		const editDicRef = ref();
@@ -92,7 +93,7 @@ export default defineComponent({
 				total: 0,
 				loading: false,
 				param: {
-					PageIndex: 1,
+					pageNum: 1,
 					pageSize: 10,
 				},
 			},
@@ -138,7 +139,7 @@ export default defineComponent({
 		};
 		// 分页改变
 		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.PageIndex = val;
+			state.tableData.param.pageNum = val;
 		};
 		// 页面加载时
 		onMounted(() => {

src/views/system/institutionalUsers/roles/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="system-role-container">
+  <div class="system-role-container layout-pd">
     <el-card shadow="never">
         <!-- 通用搜索 -->
       <transition name="el-zoom-in-bottom" mode="out-in">

src/views/system/institutionalUsers/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="system-user-container">
+  <div class="system-user-container layout-pd">
     <el-card shadow="never">
       <el-form :model="queryParams" ref="ruleFormRef" :inline="true" v-show="showSearch">
         <el-form-item label="手机号" prop="PhoneNo">

src/views/system/menu/component/addMenu.vue

@@ -46,7 +46,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="链接地址" prop="link" :rules="[{ required: ruleForm.isLink, message: '请输入菜单名称', trigger: 'blur' }]">
+            <el-form-item label="链接地址" prop="link" :rules="[{ required: ruleForm.isLink, message: '请输入外链/内嵌时链接地址', trigger: 'blur' }]">
               <el-input v-model="ruleForm.link" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="!ruleForm.isLink">
               </el-input>
             </el-form-item>

src/views/system/menu/component/editMenu.vue

@@ -46,7 +46,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="链接地址" prop="link" :rules="[{ required: ruleForm.isLink, message: '请输入菜单名称', trigger: 'blur' }]">
+            <el-form-item label="链接地址" prop="link" :rules="[{ required: ruleForm.isLink, message: '请输入外链/内嵌时链接地址', trigger: 'blur' }]">
               <el-input v-model="ruleForm.link" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="!ruleForm.isLink">
               </el-input>
             </el-form-item>

src/views/system/menu/index.vue

@@ -1,14 +1,6 @@
-<!--
- * @Author: zc
- * @Description: 菜单管理
- * @version: 
- * @Date: 2022-10-21 09:01:23
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-17 12:19:39
--->
 <template>
-	<div class="system-menu-container">
-		<el-card shadow="never">
+	<div class="system-menu-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
 			<div class="flex-center-between mb20">
 				<p class="table-title">信息列表</p>
 				<div v-auth="'100401'">
@@ -18,7 +10,7 @@
 				</div>
 			</div>
 			<el-table :data="menuTableData" v-loading="loading" style="width: 100%" row-key="id"
-				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+				:default-expand-all="true" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
 				<el-table-column label="菜单名称" show-overflow-tooltip>
 					<template #default="scope">
 						<SvgIcon :name="scope.row.icon" />
@@ -47,7 +39,8 @@
 					<Empty />
 				</template>
 			</el-table>
-		</el-card>
+		</div>
+
 		<AddMenu ref="addMenuRef" @updateList="getMenuListApi" />
 		<EditMenu ref="editMenuRef" @updateList="getMenuListApi" />
 	</div>
@@ -107,3 +100,10 @@ onMounted(() => {
 });
 
 </script>
+<style lang="scss" scoped>
+.system-menu-container {
+	.el-table {
+		flex: 1;
+	}
+}
+</style>

src/views/system/organizational/index.vue

@@ -1,14 +1,6 @@
-<!--
- * @Author: zc
- * @Description: 组织架构
- * @version: 
- * @Date: 2022-10-21 09:01:23
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-17 12:20:31
--->
 <template>
-	<div class="system-menu-container">
-		<el-card shadow="never">
+	<div class="system-organizational-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
 			<div class="flex-center-between mb20">
 				<p class="table-title">信息列表</p>
 				<div v-auth="'100501'">
@@ -18,9 +10,9 @@
 				</div>
 			</div>
 			<template v-if="authShow">
-                <!-- 表格 -->
-                <el-table :data="orgTableData" v-loading="loading" style="width: 100%" row-key="id"
-					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+				<!-- 表格 -->
+				<el-table :data="orgTableData" v-loading="loading" style="width: 100%" row-key="id"
+					:default-expand-all="true" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
 					<el-table-column label="组织名称" show-overflow-tooltip>
 						<template #default="scope">
 							<SvgIcon :name="scope.row.icon" />
@@ -41,7 +33,8 @@
 					</el-table-column>
 					<el-table-column label="操作" show-overflow-tooltip width="160" align="center">
 						<template #default="scope">
-							<el-button text type="primary" @click="onOpenEditOrg(scope.row)"  v-auth="'100502'">修改</el-button>
+							<el-button text type="primary" @click="onOpenEditOrg(scope.row)" v-auth="'100502'">修改
+							</el-button>
 							<!-- <el-button text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button> -->
 						</template>
 					</el-table-column>
@@ -49,20 +42,20 @@
 						<Empty />
 					</template>
 				</el-table>
-            </template>
-            <template v-else>
-                 <el-alert title="您暂无权限查看" type="warning" show-icon :closable="false"/>
-            </template>
-		</el-card>
+			</template>
+			<template v-else>
+				<el-alert title="您暂无权限查看" type="warning" show-icon :closable="false" />
+			</template>
+		</div>
 		<AddOrg ref="addOrgRef" @updateList="getOrgListApi" />
 		<EditOrg ref="editOrgRef" @updateList="getOrgListApi" />
 	</div>
 </template>
 
 <script lang="ts" setup name="organizational">
-import { defineAsyncComponent, ref, toRefs, reactive, onMounted, computed} from 'vue';
+import { defineAsyncComponent, ref, toRefs, reactive, onMounted, computed } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
-import {storeToRefs} from 'pinia';
+import { storeToRefs } from 'pinia';
 import { useUserInfo } from '/@/stores/userInfo';
 import { getOrgList } from "/@/api/system/organizational";
 
@@ -75,7 +68,7 @@ const state = reactive({
 	loading: false
 });
 const storesUserInfo = useUserInfo();
-const {userInfos} = storeToRefs(storesUserInfo);
+const { userInfos } = storeToRefs(storesUserInfo);
 const { orgTableData, loading } = toRefs(state);
 // 打开新增菜单弹窗
 const onOpenAddOrg = () => {
@@ -85,8 +78,8 @@ const onOpenAddOrg = () => {
 const onOpenEditOrg = (row: RouteRecordRaw) => {
 	editOrgRef.value.openDialog(row);
 };
-const authShow = computed(()=>{ // 校验是否有查看权限
-    return userInfos.value.authBtnList.includes('100504')
+const authShow = computed(() => { // 校验是否有查看权限
+	return userInfos.value.authBtnList.includes('100504')
 })
 // 删除当前行
 // const onTabelRowDel = (row: any) => {
@@ -119,3 +112,11 @@ onMounted(() => {
 });
 
 </script>
+<style lang="scss" scoped>
+.system-organizational-container {
+	.el-table {
+		flex: 1;
+	}
+}
+</style>
+

src/views/system/public/index.vue

@@ -3,11 +3,11 @@
  * @Description: 
  * @version: 
  * @Date: 2022-11-15 16:38:59
- * @LastEditors: 
- * @LastEditTime: 2022-11-16 10:27:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-11-17 14:20:05
 -->
 <template>
-    <div>
+    <div  layout-pd>
 
     </div>
 </template>

src/views/system/systemParameter/index.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="systemParameter">
-		<el-card shadow="hover">
+	<div class="system-systemParameter-container layout-pd">
+		<div class="pd20 scorll">
 			<template v-if="list.length">
-				<el-form :model="ruleForm" label-width="200px" ref="ruleFormRef" v-loading="loading">
+				<el-form :model="ruleForm" label-width="200px" ref="ruleFormRef" v-loading="loading" class="form">
 					<el-row :gutter="35">
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-for="(items) in list" :key="items.id">
 							<el-divider content-position="left">{{ items.groupName }}</el-divider>
@@ -17,7 +17,7 @@
 										</el-radio-group>
 									</template>
 									<!-- 多选框 -->
-									<template v-else-if="item.valueType === 1">
+									<template v-else-if="item.valueTeType === 1">
 										<el-checkbox-group v-model="item.settingValue"
 											@change="changeVal($event, item.id)">
 											<el-checkbox v-for="item1 in item.presetValue" :key="item1.value"
@@ -100,7 +100,8 @@
 			<template v-else>
 				<Empty />
 			</template>
-		</el-card>
+		</div>
+
 	</div>
 </template>
 
@@ -199,4 +200,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.system-systemParameter-container{
+	
+	.scorll{
+		overflow: auto;
+		background-color: var(--el-color-white);
+		border-radius:8px;
+	}
+}
 </style>

src/views/telslog/blacklist/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="system-user-container">
+	<div class="telslog-balckList-container layout-pd">
 		<el-card shadow="never">
 			<!-- 通用搜索 -->
 			<el-form :model="queryParams" ref="ruleFormRef" :inline="true" v-show="showSearch">

src/views/telslog/callRecord/index.vue

@@ -4,10 +4,10 @@
  * @version: 
  * @Date: 2022-08-16 13:46:36
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-11-16 15:57:18
+ * @LastEditTime: 2022-11-17 14:20:24
 -->
 <template>
-	<div class="system-user-container">
+	<div class="telslog-callRecord-container layout-pd">
 		<el-card shadow="never">
 			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
 				<el-tab-pane label="呼入列表" name="first">