@@ -1,119 +0,0 @@ | |||
<template> | |||
<div> | |||
<!-- 侧边栏 --> | |||
<div><Sidebar class="sidebar-container" /></div> | |||
<!-- 页面主体 --> | |||
<div> | |||
<!-- nav --> | |||
<div><navbar /></div> | |||
<!-- 页面主体 --> | |||
<div><app-main /></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script setup lang="ts"> | |||
import { computed, watchEffect } from "vue"; | |||
import { useWindowSize } from "@vueuse/core"; | |||
import { AppMain, Navbar } from "./components/index"; | |||
import SignSucceed from "../views/signSucceed/index.vue"; | |||
import Sidebar from "./components/Sidebar/index.vue"; | |||
import { useAppStore } from "@/store/modules/app"; | |||
import { useSettingsStore } from "@/store/modules/settings"; | |||
import { useRoute, useRouter } from "vue-router"; | |||
const route = useRoute(); | |||
const { params } = route; | |||
const { width } = useWindowSize(); | |||
/** | |||
* 响应式布局容器固定宽度 | |||
* | |||
* 大屏(>=1200px) | |||
* 中屏(>=992px) | |||
* 小屏(>=768px) | |||
*/ | |||
const WIDTH = 992; | |||
const appStore = useAppStore(); | |||
const settingsStore = useSettingsStore(); | |||
const fixedHeader = computed(() => settingsStore.fixedHeader); | |||
const showTagsView = computed(() => settingsStore.tagsView); | |||
const showSettings = computed(() => settingsStore.showSettings); | |||
const classObj = computed(() => ({ | |||
hideSidebar: !appStore.sidebar.opened, | |||
openSidebar: appStore.sidebar.opened, | |||
withoutAnimation: appStore.sidebar.withoutAnimation, | |||
mobile: appStore.device === "mobile", | |||
})); | |||
watchEffect(() => { | |||
if (width.value < WIDTH) { | |||
appStore.toggleDevice("mobile"); | |||
appStore.closeSideBar(true); | |||
} else { | |||
appStore.toggleDevice("desktop"); | |||
if (width.value >= 1200) { | |||
//大屏 | |||
appStore.openSideBar(true); | |||
} else { | |||
appStore.closeSideBar(true); | |||
} | |||
} | |||
}); | |||
function handleOutsideClick() { | |||
appStore.closeSideBar(false); | |||
} | |||
onMounted(() => {}); | |||
</script> | |||
<style lang="scss" scoped> | |||
.app-wrapper { | |||
&::after { | |||
display: table; | |||
clear: both; | |||
content: ""; | |||
} | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
e &.mobile.openSidebar { | |||
position: fixed; | |||
top: 0; | |||
} | |||
} | |||
.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%; | |||
} | |||
.drawer-bg { | |||
position: absolute; | |||
top: 0; | |||
z-index: 999; | |||
width: 100%; | |||
height: 100%; | |||
// background: #1b213a; | |||
background: #000; | |||
opacity: 0.3; | |||
} | |||
</style> |
@@ -1,131 +0,0 @@ | |||
<template> | |||
<div :class="classObj" class="app-wrapper"> | |||
<!-- 手机设备侧边栏打开遮罩层 --> | |||
<div | |||
v-if="classObj.mobile && classObj.openSidebar" | |||
class="drawer-bg" | |||
@click="handleOutsideClick" | |||
></div> | |||
<Sidebar class="sidebar-container" /> | |||
<div :class="{ hasTagsView: showTagsView }" class="main-container"> | |||
<div | |||
:class="{ 'fixed-header': fixedHeader }" | |||
style="box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px; height: 80px" | |||
> | |||
<navbar /> | |||
<tags-view v-if="showTagsView" /> | |||
</div> | |||
<!-- 主页面 --> | |||
<app-main /> | |||
</div> | |||
</div> | |||
</template> | |||
<script setup lang="ts"> | |||
import { computed, watchEffect } from "vue"; | |||
import { useWindowSize } from "@vueuse/core"; | |||
import { AppMain, Navbar } from "./components/index"; | |||
import SignSucceed from "../views/signSucceed/index.vue"; | |||
import Sidebar from "./components/Sidebar/index.vue"; | |||
import { useAppStore } from "@/store/modules/app"; | |||
import { useSettingsStore } from "@/store/modules/settings"; | |||
import { useRoute, useRouter } from "vue-router"; | |||
const route = useRoute(); | |||
const { params } = route; | |||
const { width } = useWindowSize(); | |||
/** | |||
* 响应式布局容器固定宽度 | |||
* | |||
* 大屏(>=1200px) | |||
* 中屏(>=992px) | |||
* 小屏(>=768px) | |||
*/ | |||
const WIDTH = 992; | |||
const appStore = useAppStore(); | |||
const settingsStore = useSettingsStore(); | |||
const fixedHeader = computed(() => settingsStore.fixedHeader); | |||
const showTagsView = computed(() => settingsStore.tagsView); | |||
const showSettings = computed(() => settingsStore.showSettings); | |||
const classObj = computed(() => ({ | |||
hideSidebar: !appStore.sidebar.opened, | |||
openSidebar: appStore.sidebar.opened, | |||
withoutAnimation: appStore.sidebar.withoutAnimation, | |||
mobile: appStore.device === "mobile", | |||
})); | |||
watchEffect(() => { | |||
if (width.value < WIDTH) { | |||
appStore.toggleDevice("mobile"); | |||
appStore.closeSideBar(true); | |||
} else { | |||
appStore.toggleDevice("desktop"); | |||
if (width.value >= 1200) { | |||
//大屏 | |||
appStore.openSideBar(true); | |||
} else { | |||
appStore.closeSideBar(true); | |||
} | |||
} | |||
}); | |||
function handleOutsideClick() { | |||
appStore.closeSideBar(false); | |||
} | |||
onMounted(() => {}); | |||
</script> | |||
<style lang="scss" scoped> | |||
.app-wrapper { | |||
&::after { | |||
display: table; | |||
clear: both; | |||
content: ""; | |||
} | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
e &.mobile.openSidebar { | |||
position: fixed; | |||
top: 0; | |||
} | |||
} | |||
.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%; | |||
} | |||
.drawer-bg { | |||
position: absolute; | |||
top: 0; | |||
z-index: 999; | |||
width: 100%; | |||
height: 100%; | |||
// background: #1b213a; | |||
background: #000; | |||
opacity: 0.3; | |||
} | |||
</style> |
@@ -11,7 +11,7 @@ | |||
</div> | |||
<!-- 侧边路由列表 --> | |||
<div class="myRouter"> | |||
<div class="myRouter-item" @click="router.push('/createVideo')"> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
</div> | |||
@@ -9,35 +9,36 @@ NProgress.configure({ showSpinner: false }); // 进度条 | |||
const permissionStore = usePermissionStoreHook(); | |||
// 白名单路由 | |||
const whiteList = ["/login", "/signSucceed",'/createVideo','/moveImg']; | |||
const whiteList = ["/login", "/signSucceed", "/createVideo", "/moveImg"]; | |||
router.beforeEach(async (to, from, next) => { | |||
NProgress.start(); | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
next(); | |||
// 已登录 | |||
if (AccessToken) { | |||
// 重置密码时可以去往login页面 | |||
if ((to.params.type as string) == "4") { | |||
next(); | |||
} | |||
if (to.query.resetPwd) { | |||
next(); | |||
} | |||
if (to.path === "/login") { | |||
next({ path: "/createVideo" }); | |||
} else { | |||
next(); | |||
} | |||
// 未登录 | |||
} else { | |||
// 未登录可以访问白名单页面 | |||
if (whiteList.indexOf(to.path) !== -1) { | |||
next(); | |||
} else { | |||
// 不在白名单内,跳转登录页 | |||
next({ path: "/login" }); | |||
} | |||
} | |||
// if (AccessToken) { | |||
// // 重置密码时可以去往login页面 | |||
// if ((to.params.type as string) == "4") { | |||
// next(); | |||
// } | |||
// if (to.query.resetPwd) { | |||
// next(); | |||
// } | |||
// if (to.path === "/login") { | |||
// next({ path: "/createVideo" }); | |||
// } else { | |||
// next(); | |||
// } | |||
// // 未登录 | |||
// } else { | |||
// // 未登录可以访问白名单页面 | |||
// if (whiteList.indexOf(to.path) !== -1) { | |||
// next(); | |||
// } else { | |||
// // 不在白名单内,跳转登录页 | |||
// next({ path: "/login" }); | |||
// } | |||
// } | |||
}); | |||
router.afterEach(() => { | |||
@@ -5,13 +5,12 @@ export const Layout = () => import("@/layout/index.vue"); | |||
// 静态路由 | |||
export const constantRoutes: RouteRecordRaw[] = [ | |||
// 登录 | |||
{ | |||
path: "/login", | |||
component: () => import("@/views/login/index.vue"), | |||
meta: { hidden: true }, | |||
name:'login' | |||
name: "login", | |||
}, | |||
{ | |||
path: "/signSucceed", | |||
@@ -55,7 +54,8 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
}, | |||
}, | |||
], | |||
}, { | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/myStore", | |||
@@ -72,7 +72,8 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
}, | |||
}, | |||
], | |||
}, { | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/myAPI", | |||
@@ -108,7 +109,24 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
}, | |||
], | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/model", | |||
children: [ | |||
{ | |||
path: "model", | |||
component: () => import("@/views/mangage/model.vue"), | |||
name: "model", | |||
meta: { | |||
title: "model", | |||
icon: "homepage", | |||
affix: true, | |||
name: "modelMangage.title", | |||
}, | |||
}, | |||
], | |||
}, | |||
]; | |||
/** | |||