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