Files
yu-zhi-ran/platform/frontend/test-navigation.html
T
lt 71cb4c35a8 chore: 清理 Docker 相关文件并优化前端布局
- 删除 Docker 相关文件 (docker-compose, Dockerfile, nginx.conf, init.sql 等)
- 优化 platforms.html 卡片布局和响应式样式
- 优化 users.html 格式和移动端卡片设计
- 优化 admin.html 页面结构和表格布局
- 修复各页面 min-height 和溢出问题
- 更新导航组件样式
2026-05-09 19:41:59 +08:00

52 lines
1.2 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航组件测试</title>
<link rel="stylesheet" href="element-plus.css">
<script src="vue.global.prod.js"></script>
<script src="element-plus.full.js"></script>
<script src="navigation-component.js"></script>
<style>
body { margin: 0; font-family: sans-serif; }
.navbar { background: #2563eb; color: white; padding: 16px; }
.main-content { padding: 24px; }
</style>
</head>
<body>
<div id="app">
<nav class="navbar">
<span>测试页面</span>
</nav>
<navigation-component
current-page="topics"
:is-admin="true"
@navigate="redirectToPage"
></navigation-component>
<div class="main-content">
<h1>内容区域</h1>
<p>如果看到左边栏,说明组件工作正常。</p>
</div>
</div>
<script>
const App = {
data() {
return { isAdmin: true };
},
methods: {
redirectToPage(page) {
console.log('导航到:', page);
}
}
};
const app = Vue.createApp(App);
if (window.installNavigation) { window.installNavigation(app); }
app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>