92 lines
4.8 KiB
HTML
92 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>OfferPie 管理后台</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.3/dist/index.css"/>
|
|
<style>
|
|
html, body, #app { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
|
.layout { height: 100%; }
|
|
.aside { background: #1d1e3c; overflow-y: auto; }
|
|
.aside .logo { height: 60px; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
|
.aside .logo img { height: 32px; max-width: 100%; object-fit: contain; }
|
|
.aside .el-menu { border-right: none; background: transparent; padding-top: 8px; }
|
|
.aside .el-menu-item { margin: 4px 10px; border-radius: 6px; }
|
|
.aside .el-menu-item.is-active { background: rgba(64,158,255,0.18) !important; }
|
|
.header { background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); z-index: 10; }
|
|
.header .title { font-size: 16px; font-weight: 600; color: #303133; }
|
|
.header .admin-info { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #606266; }
|
|
.main-content { padding: 20px; background: #f0f2f5; overflow-y: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<el-container class="layout">
|
|
<el-aside width="210px" class="aside">
|
|
<div class="logo">
|
|
<img src="/admin/img/logo.png" alt="logo"/>
|
|
</div>
|
|
<el-menu :default-active="currentView" background-color="#1d1e3c" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" @select="handleMenuSelect">
|
|
<el-menu-item index="dashboard"><el-icon><data-board/></el-icon><span>数据概览</span></el-menu-item>
|
|
<el-menu-item index="user"><el-icon><user/></el-icon><span>用户管理</span></el-menu-item>
|
|
<el-menu-item index="order"><el-icon><tickets/></el-icon><span>订单管理</span></el-menu-item>
|
|
<el-menu-item index="product"><el-icon><goods/></el-icon><span>商品管理</span></el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header class="header">
|
|
<span class="title">{{ title }}</span>
|
|
<div class="admin-info">
|
|
<el-button type="primary" plain @click="handleLogout">退出登录</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="main-content">
|
|
<component :is="currentComponent"></component>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>
|
|
<script src="https://unpkg.com/element-plus@2.7.3/dist/index.full.min.js"></script>
|
|
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
|
|
<script src="/admin/js/request.js"></script>
|
|
<script src="/admin/js/api/auth.js"></script>
|
|
<script src="/admin/js/api/user.js"></script>
|
|
<script src="/admin/js/api/order.js"></script>
|
|
<script src="/admin/js/api/product.js"></script>
|
|
<script src="/admin/js/views/dashboard.js"></script>
|
|
<script src="/admin/js/views/user.js"></script>
|
|
<script src="/admin/js/views/order.js"></script>
|
|
<script src="/admin/js/views/product.js"></script>
|
|
<style>[v-cloak] { display: none; }</style>
|
|
<script>
|
|
const { createApp, ref, computed } = Vue;
|
|
const app = createApp({
|
|
setup() {
|
|
const currentView = ref('dashboard');
|
|
const views = { dashboard: DashboardView, user: UserView, order: OrderView, product: ProductView };
|
|
const titles = { dashboard: '数据概览', user: '用户管理', order: '订单管理', product: '商品管理' };
|
|
const currentComponent = computed(() => views[currentView.value]);
|
|
const title = computed(() => titles[currentView.value]);
|
|
const handleMenuSelect = (index) => { currentView.value = index; };
|
|
const handleLogout = () => {
|
|
document.cookie = 'Token=; path=/; max-age=0';
|
|
window.location.href = '/admin/page/login';
|
|
};
|
|
return { currentView, currentComponent, title, handleMenuSelect, handleLogout };
|
|
}
|
|
});
|
|
// 注册 Element Plus 图标（容错：CDN 未加载时不阻断应用）
|
|
if (window.ElementPlusIconsVue) {
|
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
app.component(key, component);
|
|
}
|
|
}
|
|
app.use(ElementPlus);
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|