'admin-21.07.14:优化、修复诸多内容，具体查看根目录CHANGELOG.md文件'

2021-07-14 21:02:28 +08:00 · 2021-07-14 21:02:28 +08:00 · d9e9779581
commit d9e9779581
parent f7275035e5
32 changed files with 1035 additions and 107 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,25 @@

 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）

+## 1.0.11
+
+`2021.07.14`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 路由参数、图片懒加载界面演示
+- ⚠️ 警告 Form 表单 `binding value must be a string or number`，解决：加上 `label-position="top"` 不报警告（等待官方修复）
+- 🎯 优化 锁屏界面动画效果、首页图表显示
+- 🎯 优化 tagsView 右键菜单 `关闭` 功能逻辑
+- 🐞 修复 开启 TagsView 拖拽报错及小于 `1000px` 时自动设置禁止拖拽（<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI" target="_blank">#I3ZRRI</a>）
+- 🐞 修复 `iframe 内嵌、外链` 高度问题，使用 computed 进行计算
+- 🐞 修复 默认布局开启 `侧边栏 Logo` 与关闭 `菜单水平折叠`，切换到横向布局时，菜单看不见的问题
+- 🐞 修复 切换不同布局时，再去开启 `经典布局分割菜单` 功能不生效问题
+- 🐞 修复 浏览器窗口标题中/英文切换不实时生效的问题
+- 🐞 修复 切换布局时，某些功能不可以使用。部分界面不需要取消事件监听(proxy.mittBus.off('xxx'))
+- 🐞 修复 动态路由带参数，router-link 跳转问题（<a href="hhttps://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G" target="_blank">#I3YX6G</a>）
+- 🐞 修复 横向菜单有二级菜单时，点击子级菜单不高亮问题
+- 🐞 修复 功能 tagsView 操作演示不生效
+
 ## 1.0.10

 `2021.07.07`
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@ -12,7 +12,7 @@
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.54",
+		"element-plus": "^1.0.2-beta.55",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@ -32,21 +32,21 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.0.0",
+		"@types/node": "^16.3.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.28.2",
-		"@typescript-eslint/parser": "^4.28.2",
-		"@vitejs/plugin-vue": "^1.2.4",
+		"@typescript-eslint/eslint-plugin": "^4.28.3",
+		"@typescript-eslint/parser": "^4.28.3",
+		"@vitejs/plugin-vue": "^1.2.5",
 		"@vue/compiler-sfc": "^3.1.4",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.30.0",
 		"eslint-plugin-vue": "^7.13.0",
 		"prettier": "^2.3.2",
-		"sass": "^1.35.1",
+		"sass": "^1.35.2",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
-		"vite": "^2.4.1",
+		"vite": "^2.4.2",
 		"vue-eslint-parser": "^7.8.0"
 	},
 	"browserslist": [
--- a/src/App.vue
+++ b/src/App.vue
@ -7,8 +7,8 @@
 <script lang="ts">
 import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { useStore } from '/@/store/index';
+import { useTitle } from '/@/utils/setWebTitle';
 import { Local } from '/@/utils/storage';
 import setIntroduction from '/@/utils/setIconfont';
 import LockScreen from '/@/layout/lockScreen/index.vue';
@ -17,11 +17,11 @@ export default defineComponent({
 	name: 'app',
 	components: { LockScreen, Setings },
 	setup() {
-		const { t } = useI18n();
 		const { proxy } = getCurrentInstance() as any;
 		const setingsRef = ref();
 		const route = useRoute();
 		const store = useStore();
+		const title = useTitle();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
@ -59,11 +59,7 @@ export default defineComponent({
 		watch(
 			() => route.path,
 			() => {
-				nextTick(() => {
-					let webTitle = '';
-					route.path === '/login' ? (webTitle = route.meta.title) : (webTitle = t(route.meta.title));
-					document.title = `${webTitle} - ${getThemeConfig.value.globalTitle}` || getThemeConfig.value.globalTitle;
-				});
+				title();
 			}
 		);
 		return {
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@ -51,6 +51,12 @@ export default {
 		pagesWaves: 'Wave effect',
 		pagesTree: 'tree alter table',
 		pagesDrag: 'Drag command',
+		pagesLazyImg: 'Image lazy loading',
+		paramsIndex: 'Routing parameters',
+		paramsCommon: 'General routing',
+		paramsDynamic: 'Dynamic routing',
+		paramsCommonDetails: 'General routing details',
+		paramsDynamicDetails: 'Dynamic routing details',
 		chartIndex: 'chartIndex',
 		personal: 'personal',
 		tools: 'tools',
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@ -51,6 +51,12 @@ export default {
 		pagesWaves: '波浪效果',
 		pagesTree: '树形改表格',
 		pagesDrag: '拖动指令',
+		pagesLazyImg: '图片懒加载',
+		paramsIndex: '路由参数',
+		paramsCommon: '普通路由',
+		paramsDynamic: '动态路由',
+		paramsCommonDetails: '普通路由详情',
+		paramsDynamicDetails: '动态路由详情',
 		chartIndex: '大数据图表',
 		personal: '个人中心',
 		tools: '工具类集合',
--- a/src/i18n/lang/zh-tw.ts
+++ b/src/i18n/lang/zh-tw.ts
@ -51,6 +51,12 @@ export default {
 		pagesWaves: '波浪效果',
 		pagesTree: '樹形改表格',
 		pagesDrag: '拖動指令',
+		pagesLazyImg: '圖片懶加載',
+		paramsIndex: '路由參數',
+		paramsCommon: '普通路由',
+		paramsDynamic: '動態路由',
+		paramsCommonDetails: '普通路由詳情',
+		paramsDynamicDetails: '動態路由詳情',
 		chartIndex: '大資料圖表',
 		personal: '個人中心',
 		tools: '工具類集合',
--- a/src/layout/component/aside.vue
+++ b/src/layout/component/aside.vue
@ -16,7 +16,7 @@
 </template>

 <script lang="ts">
-import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount } from 'vue';
 import { useStore } from '/@/store/index';
 import Logo from '/@/layout/logo/index.vue';
 import Vertical from '/@/layout/navMenu/vertical.vue';
@ -95,6 +95,8 @@ export default {
 		onBeforeMount(() => {
 			initMenuFixed(document.body.clientWidth);
 			setFilterRoutes();
+			// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
+			// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
 			proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
 				state.menuList = res.children;
 			});
@ -112,13 +114,6 @@ export default {
 				initMenuFixed(res.clientWidth);
 			});
 		});
-		// 页面卸载时
-		onUnmounted(() => {
-			proxy.mittBus.off('setSendColumnsChildren');
-			proxy.mittBus.off('setSendClassicChildren');
-			proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
-			proxy.mittBus.off('layoutMobileResize');
-		});
 		return {
 			setCollapseWidth,
 			setShowLogo,
--- a/src/layout/lockScreen/index.vue
+++ b/src/layout/lockScreen/index.vue
@ -200,6 +200,7 @@ export default defineComponent({
 .layout-lock-screen-filter {
 	filter: blur(5px);
 	transform: scale(1.01);
+	transition: all 0.1s 0.1s ease-in-out;
 }
 .layout-lock-screen-mask {
 	background: rgba(255, 255, 255, 1);
@ -271,6 +272,7 @@ export default defineComponent({
 			&:hover {
 				border: 1px solid rgba(255, 255, 255, 0.5);
 				background: rgba(255, 255, 255, 0.2);
+				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
 				color: #ffffff;
 				opacity: 1;
 				transition: all 0.3s ease;
--- a/src/layout/navBars/breadcrumb/setings.vue
+++ b/src/layout/navBars/breadcrumb/setings.vue
@ -524,6 +524,8 @@ export default defineComponent({
 				getThemeConfig.value.topBarColor = '#FFFFFF';
 				initLayoutChangeFun();
 			} else if (getThemeConfig.value.layout === 'columns') {
+				// 1.0.11 更新日志
+				getThemeConfig.value.isShowLogo = false;
 				getThemeConfig.value.menuBar = '#FFFFFF';
 				getThemeConfig.value.menuBarColor = '#606266';
 				getThemeConfig.value.topBar = '#ffffff';
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@ -79,6 +79,7 @@ import screenfull from 'screenfull';
 import { useI18n } from 'vue-i18n';
 import { resetRoute } from '/@/router/index';
 import { useStore } from '/@/store/index';
+import { useTitle } from '/@/utils/setWebTitle';
 import { Session, Local } from '/@/utils/storage';
 import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
 import Search from '/@/layout/navBars/breadcrumb/search.vue';
@ -90,6 +91,7 @@ export default {
 		const { proxy } = getCurrentInstance() as any;
 		const router = useRouter();
 		const store = useStore();
+		const title = useTitle();
 		const searchRef = ref();
 		const state = reactive({
 			isScreenfull: false,
@ -190,6 +192,7 @@ export default {
 			Local.set('themeConfig', getThemeConfig.value);
 			proxy.$i18n.locale = lang;
 			initI18n();
+			title();
 		};
 		// 初始化言语国际化
 		const initI18n = () => {
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@ -81,7 +81,7 @@ export default {
 		};
 		// 获取 vuex 中的 tagsViewRoutes 列表
 		const getTagsViewRoutes = () => {
-			state.routePath = route.path;
+			state.routePath = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
 			state.tagsViewList = [];
 			if (!store.state.themeConfig.themeConfig.isCacheTagsView) Session.remove('tagsViewList');
 			state.tagsViewRoutesList = store.state.tagsViewRoutes.tagsViewRoutes;
@ -95,7 +95,7 @@ export default {
 				state.tagsViewRoutesList.map((v: any) => {
 					if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
 				});
-				addTagsView(route.path);
+				addTagsView(route.path, route);
 			}
 			// 初始化当前元素(li)的下标
 			getTagsRefsIndex(route.path);
@ -103,11 +103,19 @@ export default {
 			tagsViewmoveToCurrentTag();
 		};
 		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
-		const addTagsView = (path: string, to: any) => {
-			if (state.tagsViewList.some((v: any) => v.path === path)) return false;
-			const item = state.tagsViewRoutesList.find((v: any) => v.path === path);
+		const addTagsView = (path: string, to?: any) => {
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			let item = '';
+			if (to && to.meta.isDynamic) {
+				if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
+				item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
+			} else {
+				if (state.tagsViewList.some((v: any) => v.path === path)) return false;
+				item = state.tagsViewRoutesList.find((v: any) => v.path === path);
+			}
 			if (item.meta.isLink && !item.meta.isIframe) return false;
-			item.query = to?.query ? to?.query : route.query;
+			if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
+			else item.query = to?.query ? to?.query : route.query;
 			state.tagsViewList.push({ ...item });
 			addBrowserSetSession(state.tagsViewList);
 		};
@ -122,10 +130,27 @@ export default {
 					if (v.path === path) {
 						state.tagsViewList.splice(k, 1);
 						setTimeout(() => {
-							// 最后一个
-							if (state.tagsViewList.length === k) router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
-							// 否则，跳转到下一个
-							else router.push({ path: arr[k].path, query: arr[k].query });
+							if (state.tagsViewList.length === k && state.routePath === path) {
+								// 最后一个且高亮时
+								if (arr[arr.length - 1].meta.isDynamic) {
+									// 动态路由（xxx/:id/:name"）
+									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 });
+								}
+							} else {
+								// 非最后一个且高亮时，跳转到下一个
+								if (state.tagsViewList.length !== k && state.routePath === path) {
+									if (arr[k].meta.isDynamic) {
+										// 动态路由（xxx/:id/:name"）
+										router.push({ name: arr[k].name, params: arr[k].params });
+									} else {
+										// 普通路由
+										router.push({ path: arr[k].path, query: arr[k].query });
+									}
+								}
+							}
 						}, 0);
 					}
 				}
@ -138,7 +163,7 @@ export default {
 			state.tagsViewRoutesList.map((v: any) => {
 				if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
 			});
-			addTagsView(path);
+			addTagsView(path, route);
 		};
 		// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
 		const closeAllTagsView = (path: string) => {
@ -163,19 +188,21 @@ export default {
 			});
 		};
 		// 当前项右键菜单点击
-		const onCurrentContextmenuClick = (data: any) => {
-			let { id, path } = data;
-			let currentTag = state.tagsViewList.find((v: any) => v.path === path);
+		const onCurrentContextmenuClick = (item) => {
+			const { id, path } = item;
+			const { meta, name, params, query } = route;
 			switch (id) {
 				case 0:
 					refreshCurrentTagsView(path);
-					router.push({ path, query: currentTag.query });
+					if (meta.isDynamic) router.push({ name, params });
+					else router.push({ path, query });
 					break;
 				case 1:
 					closeCurrentTagsView(path);
 					break;
 				case 2:
-					router.push({ path, query: currentTag.query });
+					if (meta.isDynamic) router.push({ name, params });
+					else router.push({ path, query });
 					closeOtherTagsView(path);
 					break;
 				case 3:
@ -186,7 +213,7 @@ export default {
 					break;
 			}
 		};
-		// 判断页面高亮
+		// 判断页面高亮（修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G）
 		const isActive = (path: string) => {
 			return path === state.routePath;
 		};
@ -271,24 +298,30 @@ export default {
 		};
 		// 设置 tagsView 可以进行拖拽
 		const initSortable = () => {
-			const el: any = document.querySelector('.layout-navbars-tagsview-ul');
+			const el = document.querySelector('.layout-navbars-tagsview-ul') as HTMLElement;
 			if (!el) return false;
-			if (!getThemeConfig.value.isSortableTagsView) state.sortable && state.sortable.destroy();
-			if (getThemeConfig.value.isSortableTagsView) {
-				state.sortable = Sortable.create(el, {
-					animation: 300,
-					dataIdAttr: 'data-name',
-					onEnd: () => {
-						const sortEndList: any = [];
-						state.sortable.toArray().map((val: any) => {
-							state.tagsViewList.map((v: any) => {
-								if (v.name === val) sortEndList.push({ ...v });
-							});
+			state.sortable && state.sortable.destroy();
+			state.sortable = Sortable.create(el, {
+				animation: 300,
+				dataIdAttr: 'data-name',
+				disabled: getThemeConfig.value.isSortableTagsView ? false : true,
+				onEnd: () => {
+					const sortEndList: any = [];
+					state.sortable.toArray().map((val: any) => {
+						state.tagsViewList.map((v: any) => {
+							if (v.name === val) sortEndList.push({ ...v });
 						});
-						addBrowserSetSession(sortEndList);
-					},
-				});
-			}
+					});
+					addBrowserSetSession(sortEndList);
+				},
+			});
+		};
+		// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
+		const onSortableResize = () => {
+			const clientWidth = document.body.clientWidth;
+			if (clientWidth < 1000) getThemeConfig.value.isSortableTagsView = false;
+			else getThemeConfig.value.isSortableTagsView = true;
+			initSortable();
 		};
 		// 监听路由的变化，动态赋值给 tagsView
 		watch(store.state, (val) => {
@ -297,6 +330,8 @@ export default {
 		});
 		// 页面加载前
 		onBeforeMount(() => {
+			// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
+			window.addEventListener('resize', onSortableResize);
 			// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
 			proxy.mittBus.on('onCurrentContextmenuClick', (data: object) => {
 				onCurrentContextmenuClick(data);
@ -312,6 +347,8 @@ export default {
 			proxy.mittBus.off('onCurrentContextmenuClick');
 			// 取消监听布局配置界面开启/关闭拖拽
 			proxy.mittBus.off('openOrCloseSortable');
+			// 取消窗口 resize 监听
+			window.removeEventListener('resize', onSortableResize);
 		});
 		// 页面更新时
 		onBeforeUpdate(() => {
@ -325,7 +362,7 @@ export default {
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
-			state.routePath = to.path;
+			state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
 			addTagsView(to.path, to);
 			getTagsRefsIndex(to.path);
 			tagsViewmoveToCurrentTag();
--- a/src/layout/navMenu/horizontal.vue
+++ b/src/layout/navMenu/horizontal.vue
@ -102,11 +102,12 @@ export default defineComponent({
 		// 页面加载时
 		onMounted(() => {
 			initElMenuOffsetLeft();
-			setCurrentRouterHighlight(route.path);
+			setCurrentRouterHighlight(route.meta.isDynamic ? route.meta.isDynamicPath : route.path);
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
-			setCurrentRouterHighlight(to.path);
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			setCurrentRouterHighlight(to.meta.isDynamic ? to.meta.isDynamicPath : to.path);
 			proxy.mittBus.emit('onMenuClick');
 			// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
 			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
--- a/src/layout/navMenu/vertical.vue
+++ b/src/layout/navMenu/vertical.vue
@ -47,7 +47,8 @@ export default defineComponent({
 		const store = useStore();
 		const route = useRoute();
 		const state = reactive({
-			defaultActive: route.path,
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
 		});
 		// 获取父级菜单数据
 		const menuLists = computed(() => {
@ -63,7 +64,8 @@ export default defineComponent({
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
-			state.defaultActive = to.path;
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			state.defaultActive = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
 			proxy.mittBus.emit('onMenuClick');
 			const clientWidth = document.body.clientWidth;
 			if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
--- a/src/layout/routerView/iframes.vue
+++ b/src/layout/routerView/iframes.vue
@ -1,11 +1,11 @@
 <template>
-	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${iframeHeight}`, border: 'none' }" v-loading="iframeLoading">
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
 		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
 	</div>
 </template>

 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, nextTick, watch } from 'vue';
+import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 export default defineComponent({
@ -16,7 +16,6 @@ export default defineComponent({
 		const state = reactive({
 			iframeLoading: true,
 			iframeUrl: '',
-			iframeHeight: '',
 		});
 		// 初始化页面加载 loading
 		const initIframeLoad = () => {
@ -31,15 +30,14 @@ export default defineComponent({
 			});
 		};
 		// 设置 iframe 的高度
-		const initIframeHeight = () => {
+		const setIframeHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
-			if (isTagsview) return (state.iframeHeight = `84px`);
-			else return (state.iframeHeight = `20px`);
-		};
+			if (isTagsview) return `84px`;
+			else return `50px`;
+		});
 		// 页面加载时
 		onMounted(() => {
 			initIframeLoad();
-			initIframeHeight();
 		});
 		// 监听路由变化，多个 iframe 时使用
 		watch(
@ -49,6 +47,7 @@ export default defineComponent({
 			}
 		);
 		return {
+			setIframeHeight,
 			...toRefs(state),
 		};
 	},
--- a/src/layout/routerView/link.vue
+++ b/src/layout/routerView/link.vue
@ -1,5 +1,5 @@
 <template>
-	<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${linkHeight}` }">
+	<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
 		<a href="https://element-plus.gitee.io/#/zh-CN/component/installation" target="_blank" class="flex-margin"
 			>{{ currentRouteMeta.title }}：{{ currentRouteMeta.isLink }}</a
 		>
@ -7,7 +7,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, toRefs, reactive, onMounted } from 'vue';
+import { defineComponent, toRefs, reactive, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 export default defineComponent({
@ -17,24 +17,23 @@ export default defineComponent({
 		const store = useStore();
 		const state = reactive({
 			currentRouteMeta: {},
-			linkHeight: '',
 		});
 		// 初始化获取当前路由 meta
 		const initGetMeta = () => {
 			state.currentRouteMeta = route.meta;
 		};
-		// 设置 iframe 的高度
-		const initLinkHeight = () => {
+		// 设置 link 的高度
+		const setLinkHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
-			if (isTagsview) return (state.linkHeight = `114px`);
-			else return (state.linkHeight = `50px`);
-		};
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
 		// 页面加载时
 		onMounted(() => {
 			initGetMeta();
-			initLinkHeight();
 		});
 		return {
+			setLinkHeight,
 			...toRefs(state),
 		};
 	},
--- a/src/layout/routerView/parent.vue
+++ b/src/layout/routerView/parent.vue
@ -41,9 +41,16 @@ export default defineComponent({
 		onBeforeMount(() => {
 			state.keepAliveNameList = getKeepAliveNames.value;
 			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
-				if (route.path !== path) return false;
+				// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+				if (route.meta.isDynamic) {
+					// 动态路由（xxx/:id/:name）
+					if (route.meta.isDynamicPath !== path) return false;
+				} else {
+					// 普通路由
+					if (route.path !== path) return false;
+				}
 				state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
-				state.refreshRouterViewKey = route.path;
+				state.refreshRouterViewKey = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
 				nextTick(() => {
 					state.refreshRouterViewKey = null;
 					state.keepAliveNameList = getKeepAliveNames.value;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -57,6 +57,12 @@ export function formatTwoStageRoutes(arr: any) {
 		if (v.path === '/') {
 			newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
 		} else {
+			// 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
+			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			if (v.path.indexOf('/:') > -1) {
+				v.meta['isDynamic'] = true;
+				v.meta['isDynamicPath'] = v.path;
+			}
 			newArr[0].children.push({ ...v });
 			// 存 name 值，keep-alive 中 include 使用，实现路由的缓存
 			// 路径：/@/layout/routerView/parent.vue
--- a/src/router/route.ts
+++ b/src/router/route.ts
@ -800,6 +800,99 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							icon: 'el-icon-thumb',
 						},
 					},
+					{
+						path: '/pages/lazyImg',
+						name: 'pagesLazyImg',
+						component: () => import('/@/views/pages/lazyImg/index.vue'),
+						meta: {
+							title: 'message.router.pagesLazyImg',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'el-icon-picture-outline',
+						},
+					},
+				],
+			},
+			{
+				path: '/params',
+				name: 'paramsIndex',
+				component: () => import('/@/layout/routerView/parent.vue'),
+				redirect: '/params/common',
+				meta: {
+					title: 'message.router.paramsIndex',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					auth: ['admin', 'test'],
+					icon: 'iconfont icon-zhongduancanshu',
+				},
+				children: [
+					{
+						path: '/params/common',
+						name: 'paramsCommon',
+						component: () => import('/@/views/params/common/index.vue'),
+						meta: {
+							title: 'message.router.paramsCommon',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'iconfont icon-putong',
+						},
+					},
+					{
+						path: '/params/common/details',
+						name: 'paramsCommonDetails',
+						component: () => import('/@/views/params/common/details.vue'),
+						meta: {
+							title: 'message.router.paramsCommonDetails',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'el-icon-s-order',
+						},
+					},
+					{
+						path: '/params/dynamic',
+						name: 'paramsDynamic',
+						component: () => import('/@/views/params/dynamic/index.vue'),
+						meta: {
+							title: 'message.router.paramsDynamic',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'iconfont icon-dongtai',
+						},
+					},
+					{
+						path: '/params/dynamic/details/:t/:id',
+						name: 'paramsDynamicDetails',
+						component: () => import('/@/views/params/dynamic/details.vue'),
+						meta: {
+							title: 'message.router.paramsDynamicDetails',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'el-icon-s-order',
+						},
+					},
 				],
 			},
 			{
--- a/src/store/modules/themeConfig.ts
+++ b/src/store/modules/themeConfig.ts
@ -106,6 +106,7 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			 * 其它设置
 			 */
 			// Tagsview 风格：可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>"，默认 tags-style-one
+			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
 			tagsStyle: 'tags-style-one',
 			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
 			animation: 'slide-right',
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@ -760,7 +760,7 @@
 .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
 	border-bottom: 3px solid !important;
 	border-bottom-color: set-color(primary);
-	color: set-color(primary);
+	color: set-color(primary) !important;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
@ -768,7 +768,7 @@
 .el-menu--horizontal > .el-submenu:hover .el-submenu__title,
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
 .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
-	color: set-color(primary);
+	color: set-color(primary) !important;
 }
 .el-menu.el-menu--horizontal {
 	border-bottom: none !important;
--- a/src/utils/lazyImgLoading.ts
+++ b/src/utils/lazyImgLoading.ts
@ -0,0 +1,25 @@
+import { nextTick } from 'vue';
+
+/**
+ * 图片懒加载
+ * @param el dom 目标元素
+ * @param arr 列表数据
+ * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
+ */
+export const lazyImgLoading = (el: any, arr: any) => {
+	const io = new IntersectionObserver((res) => {
+		res.forEach((v: any) => {
+			if (v.isIntersecting) {
+				const { img, key } = v.target.dataset;
+				v.target.src = img;
+				v.target.onload = () => {
+					io.unobserve(v.target);
+					arr[key]['loading'] = false;
+				};
+			}
+		});
+	});
+	nextTick(() => {
+		document.querySelectorAll(el).forEach((img) => io.observe(img));
+	});
+};
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_ke79kmw5s7r.css',
+	'//at.alicdn.com/t/font_2298093_h8g6cpatww5.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url
--- a/src/utils/setWebTitle.ts
+++ b/src/utils/setWebTitle.ts
@ -0,0 +1,20 @@
+import { nextTick } from 'vue';
+import router from '/@/router/index';
+import { store } from '/@/store/index';
+import { i18n } from '/@/i18n/index';
+
+/**
+ * 设置浏览器标题国际化
+ */
+export function useTitle() {
+	return () => {
+		nextTick(() => {
+			let webTitle = '';
+			let globalTitle: string = store.state.themeConfig.themeConfig.globalTitle;
+			router.currentRoute.value.path === '/login'
+				? (webTitle = router.currentRoute.value.meta.title as any)
+				: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
+			document.title = `${webTitle} - ${globalTitle}` || globalTitle;
+		});
+	};
+}
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -150,7 +150,7 @@ export default {
 				new CountUp('tipNum3', Math.random() * 1000).start();
 			});
 		};
-		// 实验室使用情况
+		// 商品销售情
 		const initHomeLaboratory = () => {
 			const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
 			const option = {
@ -167,8 +167,28 @@ export default {
 					data: ['预购队列', '最新成交价'],
 					right: 13,
 				},
+				color: [
+					'#63caff',
+					'#49beff',
+					'#03387a',
+					'#03387a',
+					'#03387a',
+					'#6c93ee',
+					'#a9abff',
+					'#f7a23f',
+					'#27bae7',
+					'#ff6d9d',
+					'#cb79ff',
+					'#f95b5a',
+					'#ccaf27',
+					'#38b99c',
+					'#93d0ff',
+					'#bd74e0',
+					'#fd77da',
+					'#dea700',
+				],
 				xAxis: {
-					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 				},
 				yAxis: [
 					{
@ -180,12 +200,36 @@ export default {
 					{
 						name: '预购队列',
 						type: 'bar',
-						data: [5, 20, 36, 10, 10, 20],
+						data: [200, 85, 112, 275, 305, 415, 441, 405, 275, 305, 415, 441],
+						itemStyle: {
+							barBorderRadius: [4, 4, 0, 0],
+							color: {
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								type: 'linear',
+								global: false,
+								colorStops: [
+									{
+										offset: 0,
+										color: '#0b9eff',
+									},
+									{
+										offset: 1,
+										color: '#63caff',
+									},
+								],
+							},
+						},
 					},
 					{
 						name: '最新成交价',
 						type: 'line',
-						data: [15, 20, 16, 20, 30, 8],
+						data: [50, 85, 22, 155, 170, 25, 224, 245, 285, 300, 415, 641],
+						itemStyle: {
+							color: '#febb50',
+						},
 					},
 				],
 			};
--- a/src/views/pages/filtering/mock.ts
+++ b/src/views/pages/filtering/mock.ts
@ -113,7 +113,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 1,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
@ -123,7 +122,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 2,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
@ -133,7 +131,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 3,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
@ -143,7 +140,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 4,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
@ -153,7 +149,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 5,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
@ -163,7 +158,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 6,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
@ -173,7 +167,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 7,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
@ -183,7 +176,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 8,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
@ -193,7 +185,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 9,
-		isShowMore: false,
 	},
 	{
 		img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
@ -203,6 +194,5 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 10,
-		isShowMore: false,
 	},
 ];
--- a/src/views/pages/lazyImg/index.vue
+++ b/src/views/pages/lazyImg/index.vue
@ -0,0 +1,193 @@
+<template>
+	<div class="lazy-img-container">
+		<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
+			<div class="flex-warp" v-if="tableData.data.length > 0">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
+						<div class="flex-warp-item">
+							<div class="flex-warp-item-box">
+								<div class="item-img" v-loading="v.loading">
+									<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
+								</div>
+								<div class="item-txt">
+									<div class="item-txt-title">{{ v.title }}</div>
+									<div class="item-txt-other">
+										<div style="width: 100%">
+											<div class="item-txt-msg mb10">
+												<span>评价 {{ v.evaluate }}</span>
+												<span class="ml10">收藏 {{ v.collection }}</span>
+											</div>
+											<div class="item-txt-msg item-txt-price">
+												<span class="font-price">
+													<span>￥</span>
+													<span class="font">{{ v.price }}</span>
+												</span>
+												<span>月销{{ v.monSales }}笔</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<el-empty v-else description="暂无数据"></el-empty>
+			<template v-if="tableData.data.length > 0">
+				<el-pagination
+					style="text-align: right"
+					background
+					@size-change="onHandleSizeChange"
+					@current-change="onHandleCurrentChange"
+					:page-sizes="[10, 20, 30]"
+					:current-page="tableData.param.pageNum"
+					:page-size="tableData.param.pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+				>
+				</el-pagination>
+			</template>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { lazyImgLoading } from '/@/utils/lazyImgLoading';
+import { filterList } from './mock';
+export default {
+	name: 'pagesListAdapt',
+	setup() {
+		const router = useRouter();
+		const state = reactive({
+			tableData: {
+				data: filterList,
+				total: 99,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 当前列表项点击
+		const onTableItemClick = (v: object) => {
+			router.push({
+				path: '/pages/filteringDetails',
+				query: { id: v.id },
+			});
+		};
+		// 分页点击
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页点击
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			lazyImgLoading('[data-lazy-img-list]', state.tableData.data);
+		});
+		return {
+			onTableItemClick,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			...toRefs(state),
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.lazy-img-container {
+	.flex-warp {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		margin: 0 -5px;
+		.flex-warp-item {
+			padding: 5px;
+			width: 100%;
+			height: 360px;
+			.flex-warp-item-box {
+				border: 1px solid #ebeef5;
+				width: 100%;
+				height: 100%;
+				border-radius: 2px;
+				display: flex;
+				flex-direction: column;
+				transition: all 0.3s ease;
+				&:hover {
+					cursor: pointer;
+					border: 1px solid var(--color-primary);
+					transition: all 0.3s ease;
+					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+					.item-txt-title {
+						color: var(--color-primary) !important;
+						transition: all 0.3s ease;
+					}
+					.item-img {
+						img {
+							transition: all 0.3s ease;
+							transform: translateZ(0) scale(1.05);
+						}
+					}
+				}
+				.item-img {
+					width: 100%;
+					height: 215px;
+					overflow: hidden;
+					img {
+						transition: all 0.3s ease;
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.item-txt {
+					flex: 1;
+					padding: 15px;
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+					.item-txt-title {
+						text-overflow: ellipsis;
+						overflow: hidden;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+						display: -webkit-box;
+						color: #666666;
+						transition: all 0.3s ease;
+						&:hover {
+							color: var(--color-primary);
+							text-decoration: underline;
+							transition: all 0.3s ease;
+						}
+					}
+					.item-txt-other {
+						flex: 1;
+						align-items: flex-end;
+						display: flex;
+						.item-txt-msg {
+							font-size: 12px;
+							color: #8d8d91;
+						}
+						.item-txt-price {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							.font-price {
+								color: #ff5000;
+								.font {
+									font-size: 22px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/views/pages/lazyImg/mock.ts
+++ b/src/views/pages/lazyImg/mock.ts
@ -0,0 +1,313 @@
+// 列表数据
+export const filterList = [
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
+		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
+		title: '深圳湾公园一女子落水，三名男子接力及时施救',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
+		title: '盛夏的那考河湿地公园！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
+		title: '深圳湾公园一女子落水，三名男子接力及时施救',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
+		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 1,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
+		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 2,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
+		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 3,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
+		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 4,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
+		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 5,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
+		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 6,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
+		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 7,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
+		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 8,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
+		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 9,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
+		title: '民众前往中共一大纪念馆参观',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+	{
+		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
+		title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
+		evaluate: (Math.random() * 10).toFixed(2),
+		collection: (Math.random() * 100).toFixed(2),
+		price: (Math.random() * 10).toFixed(2),
+		monSales: (Math.random() * 20).toFixed(2),
+		id: 10,
+		loading: true,
+	},
+];
--- a/src/views/pages/listAdapt/mock.ts
+++ b/src/views/pages/listAdapt/mock.ts
@ -8,7 +8,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 1,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
@ -18,7 +17,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 2,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
@ -28,7 +26,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 3,
-		isShowMore: false,
 	},
 	{
 		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
@ -38,7 +35,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 4,
-		isShowMore: false,
 	},
 	{
 		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
@ -48,7 +44,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 5,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
@ -58,7 +53,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 6,
-		isShowMore: false,
 	},
 	{
 		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
@ -68,7 +62,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 7,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
@ -78,7 +71,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 8,
-		isShowMore: false,
 	},
 	{
 		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
@ -88,7 +80,6 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 9,
-		isShowMore: false,
 	},
 	{
 		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
@ -98,6 +89,5 @@ export const filterList = [
 		price: (Math.random() * 10).toFixed(2),
 		monSales: (Math.random() * 20).toFixed(2),
 		id: 10,
-		isShowMore: false,
 	},
 ];
--- a/src/views/params/common/details.vue
+++ b/src/views/params/common/details.vue
@ -0,0 +1,39 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin color-primary">
+			<div>paramsCommonDetails</div>
+			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
+			<div>参数：query: {{ params.query }}</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from '/@/store/index';
+export default defineComponent({
+	name: 'paramsCommonDetails',
+	setup() {
+		const route = useRoute();
+		const store = useStore();
+		const state = reactive({
+			params: {},
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		// 页面加载时
+		onMounted(() => {
+			state.params = route;
+		});
+		return {
+			setViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
--- a/src/views/params/common/index.vue
+++ b/src/views/params/common/index.vue
@ -0,0 +1,46 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin">
+			<el-result icon="success" title="普通路由" subTitle="请根据提示进行操作">
+				<template #extra>
+					<el-button type="primary" size="small" icon="iconfont icon-putong" @click="onGoDetailsClick">点击测试普通路由传参</el-button>
+				</template>
+			</el-result>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed } from 'vue';
+import { useStore } from '/@/store/index';
+import { useRouter } from 'vue-router';
+export default defineComponent({
+	name: 'paramsCommon',
+	setup() {
+		const store = useStore();
+		const state = reactive({});
+		const router = useRouter();
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		// 跳转到详情
+		const onGoDetailsClick = () => {
+			router.push({
+				path: '/params/common/details',
+				query: {
+					t: new Date().getTime(),
+					id: Math.random(),
+				},
+			});
+		};
+		return {
+			setViewHeight,
+			onGoDetailsClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
--- a/src/views/params/dynamic/details.vue
+++ b/src/views/params/dynamic/details.vue
@ -0,0 +1,39 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin color-primary">
+			<div>paramsDynamicDetails</div>
+			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
+			<div>参数：params: {{ params.params }}</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from '/@/store/index';
+export default defineComponent({
+	name: 'paramsDynamicDetails',
+	setup() {
+		const route = useRoute();
+		const store = useStore();
+		const state = reactive({
+			params: {},
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		// 页面加载时
+		onMounted(() => {
+			state.params = route;
+		});
+		return {
+			setViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
--- a/src/views/params/dynamic/index.vue
+++ b/src/views/params/dynamic/index.vue
@ -0,0 +1,49 @@
+<template>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+		<div class="flex-margin">
+			<el-result icon="warning" title="动态路由" subTitle="请根据提示进行操作">
+				<template #extra>
+					<el-button type="primary" size="small" icon="iconfont icon-dongtai" @click="onGoDetailsClick">点击测试动态路由传参</el-button>
+				</template>
+			</el-result>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed } from 'vue';
+import { useStore } from '/@/store/index';
+import { useRouter } from 'vue-router';
+export default defineComponent({
+	name: 'paramsDynamic',
+	setup() {
+		const store = useStore();
+		const state = reactive({});
+		const router = useRouter();
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		// 跳转到详情
+		const onGoDetailsClick = () => {
+			// name 值为路由中的 name
+			const t = new Date().getTime();
+			const id = Math.random();
+			router.push({
+				name: 'paramsDynamicDetails',
+				params: {
+					t,
+					id,
+				},
+			});
+		};
+		return {
+			setViewHeight,
+			onGoDetailsClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>