61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
window.AppLayout = {
|
|
props: {
|
|
authUser: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
emits: ['logout', 'auth-updated'],
|
|
setup() {
|
|
const { inject } = Vue;
|
|
const currentPage = inject('currentPage');
|
|
|
|
const menuItems = [
|
|
{ index: 'log', icon: 'Document', label: '日志' },
|
|
{ index: 'config', icon: 'Setting', label: '配置' },
|
|
{ index: 'plugin', icon: 'Box', label: '插件' },
|
|
{ index: 'security', icon: 'Lock', label: '安全' },
|
|
];
|
|
|
|
return { currentPage, menuItems };
|
|
},
|
|
template: `
|
|
<el-container class="app-shell">
|
|
<el-aside width="220px" class="app-aside">
|
|
<div class="brand-panel">
|
|
<div class="brand-title">WechatHookBot</div>
|
|
<div class="brand-sub">Control Surface</div>
|
|
</div>
|
|
<el-menu :default-active="currentPage"
|
|
class="app-menu"
|
|
@select="(idx) => currentPage = idx"
|
|
background-color="transparent">
|
|
<el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
|
|
<el-icon><component :is="item.icon" /></el-icon>
|
|
<span>{{ item.label }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-main class="app-main">
|
|
<div class="app-topbar">
|
|
<div class="topbar-title">Real-time Operations Panel</div>
|
|
<div class="topbar-right">
|
|
<span class="auth-pill">
|
|
当前账号: {{ authUser || '-' }}
|
|
</span>
|
|
<el-button size="small" @click="$emit('logout')">退出登录</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="content-stage">
|
|
<LogViewer v-show="currentPage === 'log'" />
|
|
<ConfigEditor v-show="currentPage === 'config'" />
|
|
<PluginList v-show="currentPage === 'plugin'" />
|
|
<SecuritySettings
|
|
v-show="currentPage === 'security'"
|
|
@updated="$emit('auth-updated', $event)" />
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
`
|
|
};
|