fix(layout): 还原layout
Former-commit-id: 0a0193d9da494ff9ee7ff48a8ffec11b4a010411
This commit is contained in:
郝先瑞
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="app-main">
|
|
||||||
<router-view v-slot="{ Component, route }">
|
|
||||||
<transition name="router-fade" mode="out-in">
|
|
||||||
<keep-alive :include="cachedViews">
|
|
||||||
<component :is="Component" :key="route.fullPath" />
|
|
||||||
</keep-alive>
|
|
||||||
</transition>
|
|
||||||
</router-view>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed } from "vue";
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const { tagsView } = useStore();
|
|
||||||
|
|
||||||
const cachedViews = computed(() => tagsView.cachedViews);
|
|
||||||
</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: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,180 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="navbar">
|
|
||||||
<hamburger
|
|
||||||
id="hamburger-container"
|
|
||||||
:is-active="sidebar.opened"
|
|
||||||
class="hamburger-container"
|
|
||||||
@toggleClick="toggleSideBar"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
||||||
|
|
||||||
<div class="right-menu">
|
|
||||||
<template v-if="device !== 'mobile'">
|
|
||||||
<!-- <search id="header-search" class="right-menu-item" />
|
|
||||||
<error-log class="errLog-container right-menu-item hover-effect" />-->
|
|
||||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
||||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
||||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
||||||
</el-tooltip>
|
|
||||||
<lang-select class="right-menu-item hover-effect" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-dropdown
|
|
||||||
class="avatar-container right-menu-item hover-effect"
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
<div class="avatar-wrapper">
|
|
||||||
<img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
|
|
||||||
<CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<router-link to="/">
|
|
||||||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
|
|
||||||
</router-link>
|
|
||||||
<a target="_blank" href="https://github.com/hxrui">
|
|
||||||
<el-dropdown-item>Github</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<a target="_blank" href="https://gitee.com/haoxr">
|
|
||||||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
|
|
||||||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<el-dropdown-item divided @click="logout">
|
|
||||||
{{ $t("navbar.logout") }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed } from "vue";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { ElMessageBox } from "element-plus";
|
|
||||||
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
// 组件依赖
|
|
||||||
import Breadcrumb from "@/components/Breadcrumb/index.vue";
|
|
||||||
import Hamburger from "@/components/Hamburger/index.vue";
|
|
||||||
import Screenfull from "@/components/Screenfull/index.vue";
|
|
||||||
import SizeSelect from "@/components/SizeSelect/index.vue";
|
|
||||||
import LangSelect from "@/components/LangSelect/index.vue";
|
|
||||||
|
|
||||||
// 图标依赖
|
|
||||||
import { CaretBottom } from "@element-plus/icons-vue";
|
|
||||||
|
|
||||||
const { app, user } = useStore();
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const sidebar = computed(() => app.sidebar);
|
|
||||||
const device = computed(() => app.device);
|
|
||||||
const avatar = computed(() => user.avatar);
|
|
||||||
|
|
||||||
function toggleSideBar() {
|
|
||||||
app.toggleSidebar();
|
|
||||||
}
|
|
||||||
|
|
||||||
function logout() {
|
|
||||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
}).then(() => {
|
|
||||||
user.logout().then(() => {
|
|
||||||
router.push(`/login?redirect=${route.fullPath}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
height: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
||||||
|
|
||||||
.hamburger-container {
|
|
||||||
line-height: 46px;
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.025);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-container {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-menu {
|
|
||||||
float: right;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 50px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-menu-item {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 8px;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #5a5e66;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
|
|
||||||
&.hover-effect {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.025);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-container {
|
|
||||||
margin-right: 30px;
|
|
||||||
|
|
||||||
.avatar-wrapper {
|
|
||||||
margin-top: 5px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-caret-bottom {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: -20px;
|
|
||||||
top: 25px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="drawer-container">
|
|
||||||
<h3 class="drawer-title">系统布局配置</h3>
|
|
||||||
<div class="drawer-item">
|
|
||||||
<span>主题颜色</span>
|
|
||||||
<div style="float: right; height: 26px; margin: -3px 8px 0 0">
|
|
||||||
<theme-picker @change="themeChange" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="drawer-item">
|
|
||||||
<span>开启 Tags-View</span>
|
|
||||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="drawer-item">
|
|
||||||
<span>固定 Header</span>
|
|
||||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="drawer-item">
|
|
||||||
<span>侧边栏 Logo</span>
|
|
||||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, toRefs, watch } from "vue";
|
|
||||||
|
|
||||||
import ThemePicker from "@/components/ThemePicker/index.vue";
|
|
||||||
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const { setting } = useStore();
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
fixedHeader: setting.fixedHeader,
|
|
||||||
tagsView: setting.tagsView,
|
|
||||||
sidebarLogo: setting.sidebarLogo,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { fixedHeader, tagsView, sidebarLogo } = toRefs(state);
|
|
||||||
|
|
||||||
function themeChange(val: any) {
|
|
||||||
setting.changeSetting({ key: "theme", value: val });
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => state.fixedHeader,
|
|
||||||
(value) => {
|
|
||||||
setting.changeSetting({ key: "fixedHeader", value: value });
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => state.tagsView,
|
|
||||||
(value) => {
|
|
||||||
setting.changeSetting({ key: "tagsView", value: value });
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => state.sidebarLogo,
|
|
||||||
(value) => {
|
|
||||||
setting.changeSetting({ key: "sidebarLogo", value: value });
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.drawer-container {
|
|
||||||
padding: 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
.drawer-title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-item {
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-switch {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-link {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a
|
|
||||||
v-if="isExternal(to)"
|
|
||||||
:href="to"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</a>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
@click="push"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import {computed, defineComponent} from 'vue'
|
|
||||||
import { isExternal } from '@/utils/validate'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const {app}=useStore()
|
|
||||||
|
|
||||||
const sidebar = computed(() => app.sidebar);
|
|
||||||
const device = computed(() => app.device);
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
to: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const router = useRouter()
|
|
||||||
const push = () => {
|
|
||||||
if (device.value === 'mobile' && sidebar.value.opened == true) {
|
|
||||||
app.closeSideBar(false)
|
|
||||||
}
|
|
||||||
router.push(props.to).catch((err) => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
push,
|
|
||||||
isExternal
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="sidebar-logo-container" :class="{ 'collapse': isCollapse }">
|
|
||||||
<transition name="sidebarLogoFade">
|
|
||||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
|
||||||
<h1 v-else class="sidebar-title">{{ title }} </h1>
|
|
||||||
</router-link>
|
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
|
||||||
<h1 class="sidebar-title">{{ title }} </h1>
|
|
||||||
</router-link>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, toRefs } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
collapse: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
isCollapse: props.collapse
|
|
||||||
})
|
|
||||||
|
|
||||||
const { isCollapse } = toRefs(state)
|
|
||||||
|
|
||||||
const title = ref("vue3-element-admin")
|
|
||||||
const logo = ref("https://www.youlai.tech/files/blog/logo.png")
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.sidebarLogoFade-enter-active {
|
|
||||||
transition: opacity 1.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarLogoFade-enter,
|
|
||||||
.sidebarLogoFade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logo-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
background: #2b2f3a;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
& .sidebar-logo-link {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
& .sidebar-logo {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .sidebar-title {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 50px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapse {
|
|
||||||
.sidebar-logo {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="!item.meta || !item.meta.hidden">
|
|
||||||
<template
|
|
||||||
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&(!item.meta|| !item.meta.alwaysShow)"
|
|
||||||
>
|
|
||||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
|
||||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
|
||||||
<svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
|
|
||||||
<template #title>
|
|
||||||
{{ generateTitle(onlyOneChild.meta.title ) }}
|
|
||||||
</template>
|
|
||||||
</el-menu-item>
|
|
||||||
</app-link>
|
|
||||||
</template>
|
|
||||||
<el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
|
|
||||||
<!-- popper-append-to-body -->
|
|
||||||
<template #title>
|
|
||||||
<svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
|
||||||
<span v-if="item.meta && item.meta.title">{{generateTitle(item.meta.title) }}</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<sidebar-item
|
|
||||||
v-for="child in item.children"
|
|
||||||
:key="child.path"
|
|
||||||
:item="child"
|
|
||||||
:is-nest="true"
|
|
||||||
:base-path="resolvePath(child.path)"
|
|
||||||
class="nest-menu"
|
|
||||||
/>
|
|
||||||
</el-sub-menu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref} from "vue";
|
|
||||||
import path from 'path-browserify'
|
|
||||||
import {isExternal} from '@/utils/validate'
|
|
||||||
import AppLink from './Link.vue'
|
|
||||||
|
|
||||||
import { generateTitle } from '@/utils/i18n'
|
|
||||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
item: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
isNest: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
basePath: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const onlyOneChild = ref();
|
|
||||||
|
|
||||||
function hasOneShowingChild(children = [] as any, parent: any) {
|
|
||||||
if (!children) {
|
|
||||||
children = [];
|
|
||||||
}
|
|
||||||
const showingChildren = children.filter((item: any) => {
|
|
||||||
if (item.meta && item.meta.hidden) {
|
|
||||||
return false
|
|
||||||
} else {
|
|
||||||
// Temp set(will be used if only has one showing child)
|
|
||||||
onlyOneChild.value = item
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// When there is only one child router, the child router is displayed by default
|
|
||||||
if (showingChildren.length === 1) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show parent if there are no child router to display
|
|
||||||
if (showingChildren.length === 0) {
|
|
||||||
onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolvePath(routePath: string) {
|
|
||||||
if (isExternal(routePath)) {
|
|
||||||
return routePath
|
|
||||||
}
|
|
||||||
if (isExternal(props.basePath)) {
|
|
||||||
return props.basePath
|
|
||||||
}
|
|
||||||
return path.resolve(props.basePath, routePath)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="{'has-logo':showLogo}">
|
|
||||||
<logo v-if="showLogo" :collapse="isCollapse"/>
|
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
||||||
<el-menu
|
|
||||||
:default-active="activeMenu"
|
|
||||||
:collapse="isCollapse"
|
|
||||||
:background-color="variables.menuBg"
|
|
||||||
:text-color="variables.menuText"
|
|
||||||
:active-text-color="variables.menuActiveText"
|
|
||||||
:unique-opened="false"
|
|
||||||
:collapse-transition="false"
|
|
||||||
mode="vertical">
|
|
||||||
<sidebar-item
|
|
||||||
v-for="route in routes"
|
|
||||||
:item="route"
|
|
||||||
:key="route.path"
|
|
||||||
:base-path="route.path"
|
|
||||||
:is-collapse="isCollapse"
|
|
||||||
/>
|
|
||||||
</el-menu>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
import {computed} from "vue";
|
|
||||||
import {useRoute} from 'vue-router'
|
|
||||||
|
|
||||||
import SidebarItem from './SidebarItem.vue'
|
|
||||||
import Logo from './Logo.vue'
|
|
||||||
import variables from '@/styles/variables.module.scss'
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const {permission,setting,app} =useStore();
|
|
||||||
|
|
||||||
const route =useRoute()
|
|
||||||
const routes =computed(() => permission.routes)
|
|
||||||
const showLogo = computed(() => setting.sidebarLogo)
|
|
||||||
const isCollapse = computed(() => !app.sidebar.opened)
|
|
||||||
|
|
||||||
const activeMenu = computed(() => {
|
|
||||||
const {meta, path} = route
|
|
||||||
// if set path, the sidebar will highlight the path you set
|
|
||||||
if (meta.activeMenu) {
|
|
||||||
return meta.activeMenu as string
|
|
||||||
}
|
|
||||||
return path
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-scrollbar
|
|
||||||
ref="scrollContainerRef"
|
|
||||||
:vertical="false"
|
|
||||||
class="scroll-container"
|
|
||||||
@wheel.prevent="handleScroll"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</el-scrollbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
computed,
|
|
||||||
onMounted,
|
|
||||||
onBeforeUnmount,
|
|
||||||
getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
import { TagView } from "@/types";
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
|
|
||||||
const tagAndTagSpacing = ref(4);
|
|
||||||
const scrollContainerRef = ref(null);
|
|
||||||
|
|
||||||
const { tagsView } = useStore();
|
|
||||||
|
|
||||||
const visitedViews = computed(() => tagsView.visitedViews);
|
|
||||||
|
|
||||||
|
|
||||||
const { ctx } = getCurrentInstance() as any;
|
|
||||||
const scrollWrapper = computed(() => {
|
|
||||||
return (scrollContainerRef.value as any).$refs.wrap as HTMLElement;
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
//scrollWrapper.value.addEventListener('scroll', emitScroll, true);
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
// scrollWrapper.value.removeEventListener('scroll', emitScroll);
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleScroll(e: WheelEvent) {
|
|
||||||
const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
|
|
||||||
scrollWrapper.value.scrollLeft =
|
|
||||||
scrollWrapper.value.scrollLeft + eventDelta / 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveToTarget(currentTag: TagView) {
|
|
||||||
const $container = ctx.$refs.scrollContainer.$el;
|
|
||||||
const $containerWidth = $container.offsetWidth;
|
|
||||||
const $scrollWrapper = scrollWrapper.value;
|
|
||||||
|
|
||||||
let firstTag = null;
|
|
||||||
let lastTag = null;
|
|
||||||
|
|
||||||
// find first tag and last tag
|
|
||||||
if (visitedViews.value.length > 0) {
|
|
||||||
firstTag = visitedViews.value[0];
|
|
||||||
lastTag = visitedViews.value[visitedViews.value.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (firstTag === currentTag) {
|
|
||||||
$scrollWrapper.scrollLeft = 0;
|
|
||||||
} else if (lastTag === currentTag) {
|
|
||||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
|
|
||||||
} else {
|
|
||||||
const tagListDom = document.getElementsByClassName("tags-view-item");
|
|
||||||
const currentIndex = visitedViews.value.findIndex(
|
|
||||||
(item) => item === currentTag
|
|
||||||
);
|
|
||||||
let prevTag = null;
|
|
||||||
let nextTag = null;
|
|
||||||
for (const k in tagListDom) {
|
|
||||||
if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
|
|
||||||
if (
|
|
||||||
(tagListDom[k] as any).dataset.path ===
|
|
||||||
visitedViews.value[currentIndex - 1].path
|
|
||||||
) {
|
|
||||||
prevTag = tagListDom[k];
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
(tagListDom[k] as any).dataset.path ===
|
|
||||||
visitedViews.value[currentIndex + 1].path
|
|
||||||
) {
|
|
||||||
nextTag = tagListDom[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// the tag's offsetLeft after of nextTag
|
|
||||||
const afterNextTagOffsetLeft =
|
|
||||||
(nextTag as any).offsetLeft +
|
|
||||||
(nextTag as any).offsetWidth +
|
|
||||||
tagAndTagSpacing.value;
|
|
||||||
|
|
||||||
// the tag's offsetLeft before of prevTag
|
|
||||||
const beforePrevTagOffsetLeft =
|
|
||||||
(prevTag as any).offsetLeft - tagAndTagSpacing.value;
|
|
||||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
|
||||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
|
|
||||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
|
||||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
moveToTarget,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.scroll-container {
|
|
||||||
.el-scrollbar__bar {
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container {
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,392 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="tags-view-container" class="tags-view-container">
|
|
||||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
|
||||||
<router-link v-for="tag in visitedViews" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
|
|
||||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item"
|
|
||||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)">
|
|
||||||
{{ generateTitle(tag.meta.title) }}
|
|
||||||
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)">
|
|
||||||
<Close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
|
|
||||||
</span>
|
|
||||||
</router-link>
|
|
||||||
</scroll-pane>
|
|
||||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
|
||||||
<li @click="refreshSelectedTag(selectedTag)">
|
|
||||||
<refresh-right style="width: 1em; height: 1em" />
|
|
||||||
刷新
|
|
||||||
</li>
|
|
||||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
|
||||||
<close style="width: 1em; height: 1em" />
|
|
||||||
关闭
|
|
||||||
</li>
|
|
||||||
<li @click="closeOtherTags">
|
|
||||||
<circle-close style="width: 1em; height: 1em" />
|
|
||||||
关闭其它
|
|
||||||
</li>
|
|
||||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
|
||||||
<back style="width: 1em; height: 1em" />
|
|
||||||
关闭左侧
|
|
||||||
</li>
|
|
||||||
<li v-if="!isLastView()" @click="closeRightTags">
|
|
||||||
<right style="width: 1em; height: 1em" />
|
|
||||||
关闭右侧
|
|
||||||
</li>
|
|
||||||
<li @click="closeAllTags(selectedTag)">
|
|
||||||
<circle-close style="width: 1em; height: 1em" />
|
|
||||||
关闭所有
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" >
|
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
getCurrentInstance,
|
|
||||||
nextTick,
|
|
||||||
ref,
|
|
||||||
watch,
|
|
||||||
onMounted,
|
|
||||||
ComponentInternalInstance,
|
|
||||||
} from "vue";
|
|
||||||
|
|
||||||
import path from "path-browserify";
|
|
||||||
|
|
||||||
import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
|
|
||||||
import { TagView } from "@/types";
|
|
||||||
|
|
||||||
import ScrollPane from "./ScrollPane.vue";
|
|
||||||
import {
|
|
||||||
Close,
|
|
||||||
RefreshRight,
|
|
||||||
CircleClose,
|
|
||||||
Back,
|
|
||||||
Right,
|
|
||||||
} from "@element-plus/icons-vue";
|
|
||||||
import { generateTitle } from "@/utils/i18n";
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const { tagsView, permission } = useStore();
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; // 获取当前组件实例
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
|
||||||
|
|
||||||
const visitedViews = computed<any>(() => tagsView.visitedViews);
|
|
||||||
const routes = computed<any>(() => permission.routes);
|
|
||||||
|
|
||||||
const affixTags = ref([]);
|
|
||||||
const visible = ref(false);
|
|
||||||
const selectedTag = ref({});
|
|
||||||
const scrollPaneRef = ref();
|
|
||||||
const left = ref(0);
|
|
||||||
const top = ref(0);
|
|
||||||
|
|
||||||
watch(route, () => {
|
|
||||||
addTags();
|
|
||||||
moveToCurrentTag();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(visible, (value) => {
|
|
||||||
if (value) {
|
|
||||||
document.body.addEventListener("click", closeMenu);
|
|
||||||
} else {
|
|
||||||
document.body.removeEventListener("click", closeMenu);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
|
|
||||||
let tags: TagView[] = [];
|
|
||||||
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.meta && route.meta.affix) {
|
|
||||||
const tagPath = path.resolve(basePath, route.path);
|
|
||||||
tags.push({
|
|
||||||
fullPath: tagPath,
|
|
||||||
path: tagPath,
|
|
||||||
name: route.name,
|
|
||||||
meta: { ...route.meta },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (route.children) {
|
|
||||||
const childTags = filterAffixTags(route.children, route.path);
|
|
||||||
if (childTags.length >= 1) {
|
|
||||||
tags = tags.concat(childTags);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return tags;
|
|
||||||
}
|
|
||||||
|
|
||||||
function initTags() {
|
|
||||||
const res = filterAffixTags(routes.value) as [];
|
|
||||||
affixTags.value = res;
|
|
||||||
for (const tag of res) {
|
|
||||||
// Must have tag name
|
|
||||||
if ((tag as TagView).name) {
|
|
||||||
tagsView.addVisitedView(tag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addTags() {
|
|
||||||
if (route.name) {
|
|
||||||
tagsView.addView(route);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveToCurrentTag() {
|
|
||||||
const tags = getCurrentInstance()?.refs.tag as any[];
|
|
||||||
nextTick(() => {
|
|
||||||
if (tags === null || tags === undefined || !Array.isArray(tags)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const tag of tags) {
|
|
||||||
if ((tag.to as TagView).path === route.path) {
|
|
||||||
(scrollPaneRef.value as any).value.moveToTarget(tag);
|
|
||||||
// when query is different then update
|
|
||||||
if ((tag.to as TagView).fullPath !== route.fullPath) {
|
|
||||||
tagsView.updateVisitedView(route);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function isActive(tag: TagView) {
|
|
||||||
return tag.path === route.path;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isAffix(tag: TagView) {
|
|
||||||
return tag.meta && tag.meta.affix;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isFirstView() {
|
|
||||||
try {
|
|
||||||
return (
|
|
||||||
(selectedTag.value as TagView).fullPath ===
|
|
||||||
visitedViews.value[1].fullPath ||
|
|
||||||
(selectedTag.value as TagView).fullPath === "/index"
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isLastView() {
|
|
||||||
try {
|
|
||||||
return (
|
|
||||||
(selectedTag.value as TagView).fullPath ===
|
|
||||||
visitedViews.value[visitedViews.value.length - 1].fullPath
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function refreshSelectedTag(view: TagView) {
|
|
||||||
tagsView.delCachedView(view);
|
|
||||||
const { fullPath } = view;
|
|
||||||
nextTick(() => {
|
|
||||||
router.replace({ path: "/redirect" + fullPath }).catch((err) => {
|
|
||||||
console.warn(err);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toLastView(visitedViews: TagView[], view?: any) {
|
|
||||||
const latestView = visitedViews.slice(-1)[0];
|
|
||||||
if (latestView && latestView.fullPath) {
|
|
||||||
router.push(latestView.fullPath);
|
|
||||||
} else {
|
|
||||||
// now the default is to redirect to the home page if there is no tags-view,
|
|
||||||
// you can adjust it according to your needs.
|
|
||||||
if (view.name === "Dashboard") {
|
|
||||||
// to reload home page
|
|
||||||
router.replace({ path: "/redirect" + view.fullPath });
|
|
||||||
} else {
|
|
||||||
router.push("/");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeSelectedTag(view: TagView) {
|
|
||||||
tagsView.delView(view).then((res: any) => {
|
|
||||||
if (isActive(view)) {
|
|
||||||
toLastView(res.visitedViews, view);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeLeftTags() {
|
|
||||||
tagsView.delLeftViews(selectedTag.value).then((res: any) => {
|
|
||||||
if (
|
|
||||||
!res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
|
|
||||||
) {
|
|
||||||
toLastView(res.visitedViews);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function closeRightTags() {
|
|
||||||
tagsView.delRightViews(selectedTag.value).then((res: any) => {
|
|
||||||
if (
|
|
||||||
!res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
|
|
||||||
) {
|
|
||||||
toLastView(res.visitedViews);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeOtherTags() {
|
|
||||||
tagsView.delOtherViews(selectedTag.value).then(() => {
|
|
||||||
moveToCurrentTag();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeAllTags(view: TagView) {
|
|
||||||
tagsView.delRightViews(selectedTag.value).then((res: any) => {
|
|
||||||
if (affixTags.value.some((tag: any) => tag.path === route.path)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
toLastView(res.visitedViews, view);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openMenu(tag: TagView, e: MouseEvent) {
|
|
||||||
const menuMinWidth = 105;
|
|
||||||
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
|
|
||||||
const offsetWidth = proxy?.$el.offsetWidth; // container width
|
|
||||||
const maxLeft = offsetWidth - menuMinWidth; // left boundary
|
|
||||||
const l = e.clientX - offsetLeft + 15; // 15: margin right
|
|
||||||
|
|
||||||
if (l > maxLeft) {
|
|
||||||
left.value = maxLeft;
|
|
||||||
} else {
|
|
||||||
left.value = l;
|
|
||||||
}
|
|
||||||
|
|
||||||
top.value = e.clientY;
|
|
||||||
visible.value = true;
|
|
||||||
selectedTag.value = tag;
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeMenu() {
|
|
||||||
visible.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleScroll() {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initTags();
|
|
||||||
addTags();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.tags-view-container {
|
|
||||||
height: 34px;
|
|
||||||
width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #d8dce5;
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
|
||||||
|
|
||||||
.tags-view-wrapper {
|
|
||||||
.tags-view-item {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 26px;
|
|
||||||
line-height: 26px;
|
|
||||||
border: 1px solid #d8dce5;
|
|
||||||
color: #495060;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: 4px;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #42b983;
|
|
||||||
color: #fff;
|
|
||||||
border-color: #42b983;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
background: #fff;
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextmenu {
|
|
||||||
margin: 0;
|
|
||||||
background: #fff;
|
|
||||||
z-index: 3000;
|
|
||||||
position: absolute;
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 5px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333;
|
|
||||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 7px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
//reset element css of el-icon-close
|
|
||||||
.tags-view-wrapper {
|
|
||||||
.tags-view-item {
|
|
||||||
.el-icon-close {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: 0px;
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
||||||
transform-origin: 100% 50%;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
transform: scale(0.6);
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #b4bccc;
|
|
||||||
color: #fff;
|
|
||||||
width: 12px !important;
|
|
||||||
height: 12px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export { default as Navbar } from './Navbar.vue'
|
|
||||||
export { default as AppMain } from './AppMain.vue'
|
|
||||||
export { default as Settings } from './Settings/index.vue'
|
|
||||||
export { default as TagsView } from './TagsView/index.vue'
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="classObj" class="app-wrapper">
|
|
||||||
<div
|
|
||||||
v-if="device === 'mobile' && sidebar.opened"
|
|
||||||
class="drawer-bg"
|
|
||||||
@click="handleClickOutside"
|
|
||||||
/>
|
|
||||||
<Sidebar class="sidebar-container" />
|
|
||||||
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
|
||||||
<div :class="{ 'fixed-header': fixedHeader }">
|
|
||||||
<navbar />
|
|
||||||
<tags-view v-if="needTagsView" />
|
|
||||||
</div>
|
|
||||||
<app-main />
|
|
||||||
<RightPanel v-if="showSettings">
|
|
||||||
<settings />
|
|
||||||
</RightPanel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, watchEffect } from "vue";
|
|
||||||
import { useWindowSize } from "@vueuse/core";
|
|
||||||
import { AppMain, Navbar, Settings, TagsView } from "./components/index";
|
|
||||||
import Sidebar from "./components/Sidebar/index.vue";
|
|
||||||
import RightPanel from "@/components/RightPanel/index.vue";
|
|
||||||
|
|
||||||
import useStore from "@/store";
|
|
||||||
|
|
||||||
const { width } = useWindowSize();
|
|
||||||
const WIDTH = 992;
|
|
||||||
|
|
||||||
const { app, setting } = useStore();
|
|
||||||
|
|
||||||
const sidebar = computed(() => app.sidebar);
|
|
||||||
const device = computed(() => app.device);
|
|
||||||
const needTagsView = computed(() => setting.tagsView);
|
|
||||||
const fixedHeader = computed(() => setting.fixedHeader);
|
|
||||||
const showSettings = computed(() => setting.showSettings);
|
|
||||||
|
|
||||||
const classObj = computed(() => ({
|
|
||||||
hideSidebar: !sidebar.value.opened,
|
|
||||||
openSidebar: sidebar.value.opened,
|
|
||||||
withoutAnimation: sidebar.value.withoutAnimation,
|
|
||||||
mobile: device.value === "mobile",
|
|
||||||
}));
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
if (width.value < WIDTH) {
|
|
||||||
app.toggleDevice("mobile");
|
|
||||||
app.closeSideBar(true);
|
|
||||||
} else {
|
|
||||||
app.toggleDevice("desktop");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleClickOutside() {
|
|
||||||
app.closeSideBar(false);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/styles/mixin.scss";
|
|
||||||
@import "@/styles/variables.module.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% - #{$sideBarWidth});
|
|
||||||
transition: width 0.28s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
|
||||||
width: calc(100% - 54px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .fixed-header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user