From dcb9cb3d135c5adc62931e2076bdabd2e9f22f70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=85=83=E5=8D=9A?= <1553592282@qq.com>
Date: Sat, 11 Mar 2023 14:42:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BC=B9=E7=AA=97=E5=90=8E?=
=?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=81=8F=E7=A7=BB=E7=9A=84=E9=97=AE?=
=?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/layout/components/AppMain.vue | 113 +++++-----
ruoyi-ui/src/layout/index.vue | 232 +++++++++++----------
2 files changed, 173 insertions(+), 172 deletions(-)
diff --git a/ruoyi-ui/src/layout/components/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue
index 25d5a25..b7a87ae 100644
--- a/ruoyi-ui/src/layout/components/AppMain.vue
+++ b/ruoyi-ui/src/layout/components/AppMain.vue
@@ -1,61 +1,52 @@
-<template>
- <section class="app-main">
- <transition name="fade-transform" mode="out-in">
- <keep-alive :include="cachedViews">
- <router-view v-if="!$route.meta.link" :key="key" />
- </keep-alive>
- </transition>
- <iframe-toggle />
- </section>
-</template>
-
-<script>
-import iframeToggle from "./IframeToggle/index"
-
-export default {
- name: 'AppMain',
- components: { iframeToggle },
- computed: {
- cachedViews() {
- return this.$store.state.tagsView.cachedViews
- },
- key() {
- return this.$route.path
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-main {
- /* 50= navbar 50 */
- min-height: calc(100vh - 50px);
- width: 100%;
- position: relative;
- overflow: hidden;
-}
-
-.fixed-header + .app-main {
- padding-top: 50px;
-}
-
-.hasTagsView {
- .app-main {
- /* 84 = navbar + tags-view = 50 + 34 */
- min-height: calc(100vh - 84px);
- }
-
- .fixed-header + .app-main {
- padding-top: 84px;
- }
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
- .fixed-header {
- padding-right: 17px;
- }
-}
-</style>
+<template>
+ <section class="app-main">
+ <transition name="fade-transform" mode="out-in">
+ <keep-alive :include="cachedViews">
+ <router-view v-if="!$route.meta.link" :key="key" />
+ </keep-alive>
+ </transition>
+ <iframe-toggle />
+ </section>
+</template>
+
+<script>
+import iframeToggle from "./IframeToggle/index"
+
+export default {
+ name: 'AppMain',
+ components: { iframeToggle },
+ computed: {
+ cachedViews() {
+ return this.$store.state.tagsView.cachedViews
+ },
+ key() {
+ return this.$route.path
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+ /* 50= navbar 50 */
+ min-height: calc(100vh - 50px);
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+.fixed-header + .app-main {
+ padding-top: 50px;
+}
+
+.hasTagsView {
+ .app-main {
+ /* 84 = navbar + tags-view = 50 + 34 */
+ min-height: calc(100vh - 84px);
+ }
+
+ .fixed-header + .app-main {
+ padding-top: 84px;
+ }
+}
+</style>
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index 202cfcd..ab2be3c 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,111 +1,121 @@
-<template>
- <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
- <sidebar v-if="!sidebar.hide" class="sidebar-container" />
- <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
- <div :class="{'fixed-header':fixedHeader}">
- <navbar />
- <tags-view v-if="needTagsView" />
- </div>
- <app-main />
- <right-panel>
- <settings />
- </right-panel>
- </div>
- </div>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
-
-export default {
- name: 'Layout',
- components: {
- AppMain,
- Navbar,
- RightPanel,
- Settings,
- Sidebar,
- TagsView
- },
- mixins: [ResizeMixin],
- computed: {
- ...mapState({
- theme: state => state.settings.theme,
- sideTheme: state => state.settings.sideTheme,
- sidebar: state => state.app.sidebar,
- device: state => state.app.device,
- needTagsView: state => state.settings.tagsView,
- fixedHeader: state => state.settings.fixedHeader
- }),
- classObj() {
- return {
- hideSidebar: !this.sidebar.opened,
- openSidebar: this.sidebar.opened,
- withoutAnimation: this.sidebar.withoutAnimation,
- mobile: this.device === 'mobile'
- }
- },
- variables() {
- return variables;
- }
- },
- methods: {
- handleClickOutside() {
- this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
- @import "~@/assets/styles/mixin.scss";
- @import "~@/assets/styles/variables.scss";
-
- .app-wrapper {
- @include clearfix;
- position: relative;
- height: 100%;
- width: 100%;
-
- &.mobile.openSidebar {
- position: fixed;
- top: 0;
- }
- }
-
- .drawer-bg {
- background: #000;
- opacity: 0.3;
- width: 100%;
- top: 0;
- height: 100%;
- position: absolute;
- z-index: 999;
- }
-
- .fixed-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: calc(100% - #{$base-sidebar-width});
- transition: width 0.28s;
- }
-
- .hideSidebar .fixed-header {
- width: calc(100% - 54px);
- }
-
- .sidebarHide .fixed-header {
- width: 100%;
- }
-
- .mobile .fixed-header {
- width: 100%;
- }
-</style>
+<template>
+ <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+ <el-scrollbar>
+ <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+ <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+ <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+ <div :class="{'fixed-header':fixedHeader}">
+ <navbar/>
+ <tags-view v-if="needTagsView"/>
+ </div>
+ <app-main/>
+ <right-panel>
+ <settings/>
+ </right-panel>
+ </div>
+ </el-scrollbar>
+ </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+import variables from '@/assets/styles/variables.scss'
+
+export default {
+ name: 'Layout',
+ components: {
+ AppMain,
+ Navbar,
+ RightPanel,
+ Settings,
+ Sidebar,
+ TagsView
+ },
+ mixins: [ResizeMixin],
+ computed: {
+ ...mapState({
+ theme: state => state.settings.theme,
+ sideTheme: state => state.settings.sideTheme,
+ sidebar: state => state.app.sidebar,
+ device: state => state.app.device,
+ needTagsView: state => state.settings.tagsView,
+ fixedHeader: state => state.settings.fixedHeader
+ }),
+ classObj() {
+ return {
+ hideSidebar: !this.sidebar.opened,
+ openSidebar: this.sidebar.opened,
+ withoutAnimation: this.sidebar.withoutAnimation,
+ mobile: this.device === 'mobile'
+ }
+ },
+ variables() {
+ return variables;
+ }
+ },
+ methods: {
+ handleClickOutside() {
+ this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+ @import "~@/assets/styles/mixin.scss";
+ @import "~@/assets/styles/variables.scss";
+
+ .app-wrapper {
+ @include clearfix;
+ position: relative;
+ height: 100%;
+ width: 100%;
+
+ .el-scrollbar{
+ height: 100%;
+ }
+
+ ::v-deep .el-scrollbar__wrap {
+ overflow-x: hidden;
+ }
+
+ &.mobile.openSidebar {
+ position: fixed;
+ top: 0;
+ }
+ }
+
+ .drawer-bg {
+ background: #000;
+ opacity: 0.3;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
+ }
+
+ .fixed-header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9;
+ width: calc(100% - #{$base-sidebar-width});
+ transition: width 0.28s;
+ }
+
+ .hideSidebar .fixed-header {
+ width: calc(100% - 54px);
+ }
+
+ .sidebarHide .fixed-header {
+ width: 100%;
+ }
+
+ .mobile .fixed-header {
+ width: 100%;
+ }
+</style>