|
@@ -1,33 +1,47 @@
|
|
<template>
|
|
<template>
|
|
- <div class="home">
|
|
|
|
|
|
+ <div class="home" :class="isCollapse ? 'is-collapse' : ''">
|
|
<div class="home-header">
|
|
<div class="home-header">
|
|
- <div>
|
|
|
|
- <h1 class="home-title">云阅卷</h1>
|
|
|
|
|
|
+ <div class="home-exam">
|
|
|
|
+ <el-button text @click="toggleCollapse">
|
|
|
|
+ <svg-icon name="icon-menu" />
|
|
|
|
+ </el-button>
|
|
|
|
+ <span>当前考试:{{ curExamName }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="home-tips">
|
|
|
|
+ <svg-icon name="icon-ai" />
|
|
|
|
+ <span>AI检测预计耗时12小时35分后完成</span>
|
|
</div>
|
|
</div>
|
|
<div class="home-action">
|
|
<div class="home-action">
|
|
- <!-- <div class="home-action-item">
|
|
|
|
- <svg-icon name="icon-user" fill="#BFBFBF" />
|
|
|
|
- <span :title="userStore.name">{{ userStore.name }}</span>
|
|
|
|
- </div> -->
|
|
|
|
<el-tooltip content="修改密码" placement="bottom-end">
|
|
<el-tooltip content="修改密码" placement="bottom-end">
|
|
- <div class="home-action-item cursor" @click="toResetPwd">
|
|
|
|
- <svg-icon name="icon-user" fill="#BFBFBF" />
|
|
|
|
- <span :title="userStore.name">{{ userStore.name }}</span>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-button text @click="toResetPwd">
|
|
|
|
+ <svg-icon name="icon-user" />
|
|
|
|
+ <!-- <span :title="userStore.name">{{ userStore.name }}</span> -->
|
|
|
|
+ <span :title="userStore.name" style="margin-left: 6px"
|
|
|
|
+ >姓名(角色)</span
|
|
|
|
+ >
|
|
|
|
+ </el-button>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
|
+ <el-button text @click="toLogout">
|
|
|
|
+ <svg-icon name="icon-notice" />
|
|
|
|
+ </el-button>
|
|
<el-tooltip content="退出登录" placement="bottom-end">
|
|
<el-tooltip content="退出登录" placement="bottom-end">
|
|
- <div class="home-action-item cursor" @click="toLogout">
|
|
|
|
|
|
+ <el-button text @click="toLogout">
|
|
<svg-icon name="icon-logout" />
|
|
<svg-icon name="icon-logout" />
|
|
- </div>
|
|
|
|
|
|
+ </el-button>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="home-navs">
|
|
<div class="home-navs">
|
|
|
|
+ <div class="home-title">
|
|
|
|
+ <svg-icon name="icon-logo" />
|
|
|
|
+ <h1>云阅卷</h1>
|
|
|
|
+ </div>
|
|
<el-menu
|
|
<el-menu
|
|
v-if="appStore.appMenus && appStore.appMenus.length"
|
|
v-if="appStore.appMenus && appStore.appMenus.length"
|
|
class="el-menu-home"
|
|
class="el-menu-home"
|
|
:default-active="curRouteName"
|
|
:default-active="curRouteName"
|
|
|
|
+ :collapse="isCollapse"
|
|
@select="toMenuItem"
|
|
@select="toMenuItem"
|
|
>
|
|
>
|
|
<template v-for="submenu in appStore.appMenus">
|
|
<template v-for="submenu in appStore.appMenus">
|
|
@@ -36,10 +50,8 @@
|
|
:key="submenu.url"
|
|
:key="submenu.url"
|
|
:index="submenu.url"
|
|
:index="submenu.url"
|
|
>
|
|
>
|
|
- <template #icon>
|
|
|
|
- <svg-icon :name="`icon-${submenu.url}`" />
|
|
|
|
- </template>
|
|
|
|
<template #title>
|
|
<template #title>
|
|
|
|
+ <svg-icon v-if="submenu.icon" :name="submenu.icon" />
|
|
<span>{{ submenu.name }}</span>
|
|
<span>{{ submenu.name }}</span>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -52,6 +64,7 @@
|
|
</el-menu-item>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :key="submenu.url + 'menu'" :index="submenu.url">
|
|
<el-menu-item v-else :key="submenu.url + 'menu'" :index="submenu.url">
|
|
|
|
+ <svg-icon v-if="submenu.icon" :name="submenu.icon" />
|
|
<span>{{ submenu.name }}</span>
|
|
<span>{{ submenu.name }}</span>
|
|
</el-menu-item>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
@@ -78,8 +91,6 @@
|
|
<div class="home-view">
|
|
<div class="home-view">
|
|
<router-view />
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <Footer class="home-footer" />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -88,13 +99,12 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
- import { onMounted, ref, watch } from 'vue';
|
|
|
|
|
|
+ import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAppStore, useUserStore } from '@/store';
|
|
import { useAppStore, useUserStore } from '@/store';
|
|
import { ElMessageBox } from 'element-plus';
|
|
import { ElMessageBox } from 'element-plus';
|
|
|
|
|
|
import ResetPwd from '@/views/login/ResetPwd.vue';
|
|
import ResetPwd from '@/views/login/ResetPwd.vue';
|
|
- import Footer from '@/components/footer/index.vue';
|
|
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
name: 'DefaultLayout',
|
|
name: 'DefaultLayout',
|
|
@@ -107,12 +117,21 @@
|
|
|
|
|
|
const curRouteName = ref('');
|
|
const curRouteName = ref('');
|
|
const fesetPwdRef = ref();
|
|
const fesetPwdRef = ref();
|
|
|
|
+ const isCollapse = ref(false);
|
|
|
|
+
|
|
|
|
+ const curExamName = computed(() => {
|
|
|
|
+ return appStore.curExam?.name ?? '';
|
|
|
|
+ });
|
|
|
|
|
|
function initData() {
|
|
function initData() {
|
|
curRouteName.value = route.name as string;
|
|
curRouteName.value = route.name as string;
|
|
// console.log(route.name);
|
|
// console.log(route.name);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ function toggleCollapse() {
|
|
|
|
+ isCollapse.value = !isCollapse.value;
|
|
|
|
+ }
|
|
|
|
+
|
|
function toMenuItem(val: string) {
|
|
function toMenuItem(val: string) {
|
|
router.push({ name: val });
|
|
router.push({ name: val });
|
|
}
|
|
}
|