diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts
index 6dfe614..cd4487c 100644
--- a/vue-admin-wonderful-next/src/router/index.ts
+++ b/vue-admin-wonderful-next/src/router/index.ts
@@ -14,6 +14,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: true,
+ isIframe: false,
icon: 'iconfont icon-shouye'
},
children: [{
@@ -26,6 +27,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: true,
+ isIframe: false,
icon: 'iconfont icon-shouye'
}
},
@@ -40,6 +42,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-xitongshezhi'
},
children: [
@@ -53,6 +56,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@@ -66,6 +70,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-icon-',
}
}
@@ -82,6 +87,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-quanxian'
},
children: [
@@ -95,7 +101,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
},
children: [
{
@@ -107,7 +114,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
}
},
{
@@ -119,7 +127,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
}
}
]
@@ -133,7 +142,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
},
children: [
{
@@ -145,7 +155,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
}
},
{
@@ -157,7 +168,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
- isAffix: false
+ isAffix: false,
+ isIframe: false
}
}
]
@@ -175,6 +187,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-xitongshezhi'
},
children: [
@@ -189,6 +202,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
},
children: [
@@ -202,6 +216,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@@ -216,6 +231,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
},
children: [
@@ -229,6 +245,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@@ -242,6 +259,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@@ -257,6 +275,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@@ -272,6 +291,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@@ -288,6 +308,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-crew_feature'
},
children: [
@@ -301,6 +322,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'el-icon-thumb'
}
}
@@ -316,6 +338,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-fuzhiyemian'
}
},
@@ -329,6 +352,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-zujian'
}
},
@@ -342,6 +366,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-ico_shuju'
}
},
@@ -355,6 +380,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-gerenzhongxin'
}
},
@@ -368,32 +394,35 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-gongju'
}
},
{
path: '/link',
- name: 'link',
+ name: 'layoutLinkView',
component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '外链',
- isLink: '',
- isHide: true,
- isKeepAlive: true,
- isAffix: true,
+ isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
+ isHide: false,
+ isKeepAlive: false,
+ isAffix: false,
+ isIframe: false,
icon: 'iconfont icon-caozuo-wailian'
}
},
{
path: '/iframes',
- name: 'iframes',
- component: () => import('/@/views/layout/routerView/iframes.vue'),
+ name: 'layoutIfameView',
+ component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '内嵌 iframe',
- isLink: '',
+ isLink: 'https://gitee.com/lyt-top/vue-admin-wonderful',
isHide: false,
isKeepAlive: true,
isAffix: true,
+ isIframe: true,
icon: 'iconfont icon-neiqianshujuchucun'
}
}]
diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss
index 97f90e2..a4035f8 100644
--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/vue-admin-wonderful-next/src/theme/app.scss
@@ -38,6 +38,9 @@ body,
display: flex;
flex-direction: column;
overflow-x: hidden !important;
+ .el-scrollbar__view {
+ overflow: hidden;
+ }
}
.el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
@@ -46,10 +49,18 @@ body,
.el-main {
padding: 0 !important;
overflow: hidden;
+ width: 100%;
}
.el-scrollbar {
width: 100%;
}
+ .layout-view-bg-white {
+ background: white;
+ width: 100%;
+ height: 100%;
+ border-radius: 4px;
+ border: 1px solid rgba(238, 238, 238, 0.6);
+ }
.layout-el-aside-br-color {
border-right: 1px solid rgb(238, 238, 238);
}
@@ -111,6 +122,9 @@ body,
flex-direction: column;
width: 100%;
}
+.flex-margin {
+ margin: auto;
+}
/* 宽高 100%
------------------------------- */
diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss
index 6c62a73..7935df5 100644
--- a/vue-admin-wonderful-next/src/theme/common/transition.scss
+++ b/vue-admin-wonderful-next/src/theme/common/transition.scss
@@ -6,8 +6,8 @@
.slide-left-leave-active {
will-change: transform;
transition: all 0.3s ease;
- position: absolute;
}
+// slide-right
.slide-right-enter-from {
opacity: 0;
transform: translateX(-20px);
@@ -16,17 +16,18 @@
opacity: 0;
transform: translateX(20px);
}
+// slide-left
.slide-left-enter-from {
@extend .slide-right-leave-to;
}
.slide-left-leave-to {
@extend .slide-right-enter-from;
}
+// opacitys
.opacitys-enter-active,
.opacitys-leave-active {
will-change: transform;
transition: all 0.3s ease;
- position: absolute;
}
.opacitys-enter-from,
.opacitys-leave-to {
diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss
index a96442f..0f680fa 100644
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/vue-admin-wonderful-next/src/theme/element.scss
@@ -737,6 +737,10 @@
color: inherit;
text-decoration: none;
}
+.el-menu-item a {
+ width: 86%;
+ display: inline-block;
+}
// 默认 hover 时
.el-menu-item:hover,
.el-submenu__title:hover {
diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue
index cf7626c..4a1c749 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@@ -1,10 +1,15 @@
+
@@ -16,23 +21,44 @@ import {
reactive,
getCurrentInstance,
watch,
+ onBeforeMount,
} from "vue";
+import { useRoute } from "vue-router";
import { useStore } from "/@/store/index.ts";
import LayoutParentView from "/@/views/layout/routerView/parent.vue";
import Footer from "/@/views/layout/footer/index.vue";
+import Link from "/@/views/layout/routerView/link.vue";
+import Iframes from "/@/views/layout/routerView/iframes.vue";
export default defineComponent({
name: "layoutMain",
- components: { LayoutParentView, Footer },
+ components: { LayoutParentView, Footer, Link, Iframes },
setup() {
const { proxy } = getCurrentInstance();
const store = useStore();
+ const route = useRoute();
const state = reactive({
- headerHeight: "84px",
+ headerHeight: "",
+ currentRouteMeta: {},
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
+ // 初始化当前路由 meta 信息
+ const initCurrentRouteMeta = (meta: object) => {
+ state.currentRouteMeta = meta;
+ };
+ // 设置 main 的高度
+ const initHeaderHeight = () => {
+ let { isTagsview } = store.state.themeConfig;
+ if (isTagsview) return (state.headerHeight = `84px`);
+ else return (state.headerHeight = `50px`);
+ };
+ // 页面加载前
+ onBeforeMount(() => {
+ initCurrentRouteMeta(route.meta);
+ initHeaderHeight();
+ });
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
@@ -41,8 +67,16 @@ export default defineComponent({
proxy.$refs.layoutScrollbarRef.update();
}
});
+ // 监听路由的变化
+ watch(
+ () => route.path,
+ () => {
+ initCurrentRouteMeta(route.meta);
+ }
+ );
return {
getThemeConfig,
+ initCurrentRouteMeta,
...toRefs(state),
};
},
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
index 86639f6..14b18fa 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
@@ -66,6 +66,7 @@ export default {
};
// 当前路由字符串切割成数组，并删除第一项空内容
const initRouteSplit = (path: string) => {
+ if (!store.state.themeConfig.isBreadcrumb) return false;
state.breadcrumbList = [store.state.routes[0]];
state.routeSplit = path.split("/");
state.routeSplit.shift();
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/index.vue b/vue-admin-wonderful-next/src/views/layout/navBars/index.vue
index 7dc4794..6840de2 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/index.vue
@@ -17,8 +17,8 @@ export default {
const store = useStore();
// 是否显示 tagsView
const setShowTagsView = computed(() => {
- let { layout } = store.state.themeConfig;
- return layout !== "classic";
+ let { layout, isTagsview } = store.state.themeConfig;
+ return layout !== "classic" && isTagsview;
});
return {
setShowTagsView,
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
index 85ef364..0a04c38 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
@@ -1,6 +1,5 @@
-