126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useThemeStore } from '@/stores/theme'
|
|
|
|
const auth = useAuthStore()
|
|
const theme = useThemeStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const showLayout = computed(() => route.meta.layout !== 'blank' && !!auth.token)
|
|
|
|
const menuColors = computed(() =>
|
|
theme.isDark
|
|
? { bg: '#282828', text: '#cfd8e3', active: '#ffffff' }
|
|
: { bg: '#f9fafb', text: '#1f2937', active: '#0f172a' },
|
|
)
|
|
|
|
function logout() {
|
|
auth.logout()
|
|
router.replace('/login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-container v-if="showLayout" class="app">
|
|
<el-aside width="220px" class="aside" :class="{ 'aside-light': !theme.isDark }">
|
|
<div class="brand">期货报告</div>
|
|
<el-menu
|
|
:default-active="route.path"
|
|
router
|
|
:background-color="menuColors.bg"
|
|
:text-color="menuColors.text"
|
|
:active-text-color="menuColors.active"
|
|
>
|
|
<el-menu-item index="/scores">打分列表</el-menu-item>
|
|
<el-menu-item index="/chart">K 线 / 持仓</el-menu-item>
|
|
<el-menu-item v-if="auth.isAdmin" index="/admin/users">用户管理</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header class="header">
|
|
<div class="user">
|
|
<span>{{ auth.user?.username }}</span>
|
|
<el-tag size="small" :type="auth.isAdmin ? 'danger' : 'info'">
|
|
{{ auth.isAdmin ? '管理员' : '普通用户' }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="right">
|
|
<el-switch
|
|
v-model="theme.isDark"
|
|
inline-prompt
|
|
active-text="暗"
|
|
inactive-text="亮"
|
|
style="--el-switch-on-color: #2c3e50"
|
|
/>
|
|
<el-button type="primary" link @click="logout">退出登录</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
<router-view v-else />
|
|
</template>
|
|
|
|
<style>
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
body {
|
|
background-color: var(--el-bg-color-page);
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
.app {
|
|
height: 100%;
|
|
}
|
|
.aside {
|
|
background: #282828;
|
|
color: #cfd8e3;
|
|
}
|
|
.aside-light {
|
|
background: #f9fafb;
|
|
color: #1f2937;
|
|
border-right: 1px solid var(--el-border-color-light);
|
|
}
|
|
.brand {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
.aside-light .brand {
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: var(--el-bg-color);
|
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
}
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.el-menu {
|
|
border-right: none !important;
|
|
}
|
|
</style>
|