@@ -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> | ||||
<!-- 侧边路由列表 --> | <!-- 侧边路由列表 --> | ||||
<div class="myRouter"> | <div class="myRouter"> | ||||
<div class="myRouter-item" @click="router.push('/createVideo')"> | |||||
<div class="myRouter-item" @click="router.push('/model')"> | |||||
<div class="icon"> | <div class="icon"> | ||||
<el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
</div> | </div> | ||||
@@ -9,35 +9,36 @@ NProgress.configure({ showSpinner: false }); // 进度条 | |||||
const permissionStore = usePermissionStoreHook(); | const permissionStore = usePermissionStoreHook(); | ||||
// 白名单路由 | // 白名单路由 | ||||
const whiteList = ["/login", "/signSucceed",'/createVideo','/moveImg']; | |||||
const whiteList = ["/login", "/signSucceed", "/createVideo", "/moveImg"]; | |||||
router.beforeEach(async (to, from, next) => { | router.beforeEach(async (to, from, next) => { | ||||
NProgress.start(); | NProgress.start(); | ||||
const AccessToken = localStorage.getItem("AccessToken"); | 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(() => { | router.afterEach(() => { | ||||
@@ -5,13 +5,12 @@ export const Layout = () => import("@/layout/index.vue"); | |||||
// 静态路由 | // 静态路由 | ||||
export const constantRoutes: RouteRecordRaw[] = [ | export const constantRoutes: RouteRecordRaw[] = [ | ||||
// 登录 | // 登录 | ||||
{ | { | ||||
path: "/login", | path: "/login", | ||||
component: () => import("@/views/login/index.vue"), | component: () => import("@/views/login/index.vue"), | ||||
meta: { hidden: true }, | meta: { hidden: true }, | ||||
name:'login' | |||||
name: "login", | |||||
}, | }, | ||||
{ | { | ||||
path: "/signSucceed", | path: "/signSucceed", | ||||
@@ -55,7 +54,8 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
}, | }, | ||||
}, | }, | ||||
], | ], | ||||
}, { | |||||
}, | |||||
{ | |||||
path: "/", | path: "/", | ||||
component: Layout, | component: Layout, | ||||
redirect: "/myStore", | redirect: "/myStore", | ||||
@@ -72,7 +72,8 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
}, | }, | ||||
}, | }, | ||||
], | ], | ||||
}, { | |||||
}, | |||||
{ | |||||
path: "/", | path: "/", | ||||
component: Layout, | component: Layout, | ||||
redirect: "/myAPI", | 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", | |||||
}, | |||||
}, | |||||
], | |||||
}, | |||||
]; | ]; | ||||
/** | /** | ||||