| @@ -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", | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| ]; | ]; | ||||
| /** | /** | ||||