mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<template>
|
|
<q-layout view="hHh LpR fFf">
|
|
<q-header elevated class="bg-primary text-white" height-hint="98">
|
|
<q-toolbar class="pl-0">
|
|
|
|
<q-toolbar-title class="flex items-center cursor-pointer" @click="router.push({ name: 'home' })">
|
|
<q-icon size="3rem" class="mx-1" color="#0ff" name='v-glassdoor' style="color: aqua;"></q-icon>
|
|
<q-separator dark vertical inset />
|
|
<span class="ml-3">
|
|
统一认证系统
|
|
</span>
|
|
</q-toolbar-title>
|
|
|
|
<q-icon class="mx-2" size="2rem" @click="$q.fullscreen.toggle()"
|
|
:name="$q.fullscreen.isActive ? 'v-compress' : 'v-expend'" />
|
|
|
|
<q-icon class="mx-2" size="2rem" @click="$q.dark.toggle" :name="$q.dark.mode ? 'v-light' : 'v-dark'"></q-icon>
|
|
<OAer v-if="user.ready" @logout="user.logout" :is-dark="$q.dark.mode as boolean">
|
|
123
|
|
</OAer>
|
|
</q-toolbar>
|
|
<q-toolbar class="">
|
|
<q-icon @click="toggleLeftDrawer" class="cursor-pointer" name="menu" size="sm"></q-icon>
|
|
<q-tabs align="left">
|
|
<!-- <q-route-tab to="/page1" label="Page One" /> -->
|
|
<!-- <q-route-tab to="/page2" label="Page Two" /> -->
|
|
<!-- <q-route-tab to="/page3" label="Page Three" /> -->
|
|
</q-tabs>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer show-if-above :mini="miniState" :width="140" :breakpoint="500" bordered side="left" class="pt-4">
|
|
<Menu></Menu>
|
|
</q-drawer>
|
|
|
|
<q-page-container class="flex">
|
|
<q-page class="w-full">
|
|
<router-view v-slot="{ Component }">
|
|
<transition mode="out-in" enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
|
|
<component class="animate__animated animate__400ms py-8
|
|
px-8 h-full
|
|
w-full" :is="Component"></component>
|
|
</transition>
|
|
</router-view>
|
|
</q-page>
|
|
</q-page-container>
|
|
<q-footer style="z-index: 1;" bordered class="bg-grey-8 text-white flex justify-around">
|
|
<span class="hover:text-black cursor-pointer" @click="$router.push({ name: 'doc' })">关于OA</span>
|
|
<span class="hover:text-black cursor-pointer" @click="$router.push({ name: 'doc' })">使用须知</span>
|
|
<span class="hover:text-black cursor-pointer" @click="util.goto('https://veypi.com')">
|
|
©2021 veypi
|
|
</span>
|
|
</q-footer>
|
|
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import Menu from './menu.vue'
|
|
import { useUserStore } from 'src/stores/user';
|
|
import { OAer } from "@veypi/oaer";
|
|
import { util, bus } from 'src/libs';
|
|
import oaer from '@veypi/oaer'
|
|
import '@veypi/oaer/dist/index.css'
|
|
import cfg from 'src/cfg'
|
|
|
|
oaer.set({
|
|
token: util.getToken(),
|
|
host: cfg.host,
|
|
uuid: cfg.id,
|
|
})
|
|
|
|
bus.on('token', (t: any) => {
|
|
oaer.set({ token: t })
|
|
})
|
|
|
|
const user = useUserStore()
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
const miniState = ref(false)
|
|
|
|
|
|
|
|
function toggleLeftDrawer() {
|
|
miniState.value = !miniState.value
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.animate__400ms {
|
|
--animate-duration: 300ms;
|
|
}
|
|
</style>
|