lt
250 lines
14 KiB
HTML
250 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>宇之然内容创作平台 - 用户管理</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Vue 3 -->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
|
<!-- Element Plus CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.3/dist/index.css">
|
|
|
|
<!-- Element Plus JS -->
|
|
<script src="https://unpkg.com/element-plus@2.4.3/dist/index.full.min.js"></script>
|
|
|
|
<style>
|
|
.card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 24px; margin-bottom: 24px; transition: all 0.3s; }
|
|
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
|
|
aside button { width: 100%; text-align: left; border: none; background: transparent; border-radius: 8px; margin-bottom: 4px; }
|
|
aside button:hover { background-color: #f3f4f6; }
|
|
@media (max-width: 768px) { main { padding-bottom: 70px; } }
|
|
.nav-title { text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 导航栏 -->
|
|
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg">
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold nav-title">宇之然内容创作平台 - 用户管理</h1>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 侧边栏 -->
|
|
<div class="page flex gap-6">
|
|
<aside class="w-40 flex-shrink-0 hidden md:block">
|
|
<button @click="currentPage = 'overview'" :class="['px-4 py-2 rounded-lg', currentPage === 'overview' ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-600']">📊 系统概览</button>
|
|
<button @click="currentPage = 'topics'" :class="['px-4 py-2 rounded-lg', currentPage === 'topics' ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-600']">📋 选题管理</button>
|
|
<button @click="currentPage = 'logs'" :class="['px-4 py-2 rounded-lg', currentPage === 'logs' ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-600']">📄 系统日志</button>
|
|
<button v-if="isAdmin" @click="currentPage = 'users'" :class="['px-4 py-2 rounded-lg', currentPage === 'users' ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-600']">👥 用户管理</button>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="flex-1">
|
|
<!-- 用户管理 页面内容 -->
|
|
<div class="card" style="padding: 20px; margin-top: 20px;">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">📄 用户管理</h2>
|
|
|
|
<!-- 用户管理 的具体内容将在这里动态生成 -->
|
|
<div id="users-content">
|
|
<!-- 内容将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 加载覆盖层 -->
|
|
<div v-if="loadingOverlay" class="fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50">
|
|
<el-spinner type="spinning" :size="50"></el-spinner>
|
|
<p class="ml-4 text-lg">{ loadingText }</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const App = {
|
|
data() {
|
|
return {
|
|
isLoggedIn: true,
|
|
currentUser: { username: 'admin' },
|
|
isAdmin: true,
|
|
currentPage: 'users',
|
|
loadingOverlay: false,
|
|
loadingText: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showLoading(text) {
|
|
this.loadingOverlay = true
|
|
this.loadingText = text || '加载中...'
|
|
},
|
|
hideLoading() {
|
|
this.loadingOverlay = false
|
|
this.loadingText = ''
|
|
}
|
|
},
|
|
mounted() {
|
|
// 页面加载完成后显示内容
|
|
setTimeout(() => {
|
|
this.generateContent()
|
|
}, 100)
|
|
|
|
// 监听窗口大小变化，重新调整布局
|
|
window.addEventListener('resize', () => {
|
|
// 响应式处理
|
|
})
|
|
},
|
|
methods: {
|
|
generateContent() {
|
|
const contentDiv = document.getElementById('users-content')
|
|
if (!contentDiv) return
|
|
|
|
switch('users') {
|
|
case 'topics':
|
|
this.generateTopicsContent(contentDiv)
|
|
break
|
|
case 'logs':
|
|
this.generateLogsContent(contentDiv)
|
|
break
|
|
case 'users':
|
|
this.generateUsersContent(contentDiv)
|
|
break
|
|
default:
|
|
contentDiv.innerHTML = '<p>页面内容加载中...</p>'
|
|
}
|
|
},
|
|
|
|
generateTopicsContent(container) {
|
|
container.innerHTML = `
|
|
<div class="mb-6">
|
|
<div class="flex gap-2 flex-wrap mb-4">
|
|
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">🔄 批量刷新</button>
|
|
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">▶ 批量创作</button>
|
|
<button class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors">🔍 批量优化</button>
|
|
<span class="ml-auto text-sm text-gray-500">已选 0 项</span>
|
|
</div>
|
|
|
|
<div class="flex gap-2 flex-wrap mb-4">
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full cursor-pointer active">全部 (3)</span>
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full cursor-pointer">待处理 (1)</span>
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full cursor-pointer">待审查 (1)</span>
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full cursor-pointer">待发布 (1)</span>
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full cursor-pointer">已发布 (0)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="border p-2"><input type="checkbox"></th>
|
|
<th class="border p-2">ID</th>
|
|
<th class="border p-2">标题</th>
|
|
<th class="border p-2">领域</th>
|
|
<th class="border p-2">状态</th>
|
|
<th class="border p-2">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="border p-2"><input type="checkbox"></td>
|
|
<td class="border p-2">A01</td>
|
|
<td class="border p-2">可持续发展趋势分析</td>
|
|
<td class="border p-2">环保</td>
|
|
<td class="border p-2"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded">待处理</span></td>
|
|
<td class="border p-2">
|
|
<button class="px-2 py-1 bg-blue-500 text-white rounded mr-1 text-xs">预览</button>
|
|
<button class="px-2 py-1 bg-green-500 text-white rounded mr-1 text-xs">创作</button>
|
|
<button class="px-2 py-1 bg-yellow-500 text-white rounded mr-1 text-xs">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border p-2"><input type="checkbox"></td>
|
|
<td class="border p-2">B02</td>
|
|
<td class="border p-2">AI在内容创作中的应用</td>
|
|
<td class="border p-2">科技</td>
|
|
<td class="border p-2"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded">待审查</span></td>
|
|
<td class="border p-2">
|
|
<button class="px-2 py-1 bg-blue-500 text-white rounded mr-1 text-xs">预览</button>
|
|
<button class="px-2 py-1 bg-green-500 text-white rounded mr-1 text-xs">创作</button>
|
|
<button class="px-2 py-1 bg-yellow-500 text-white rounded mr-1 text-xs">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`
|
|
|
|
// 添加事件监听器
|
|
document.querySelectorAll('.cursor-pointer').forEach(tag => {
|
|
tag.addEventListener('click', function() {
|
|
document.querySelectorAll('.cursor-pointer').forEach(t => t.classList.remove('active'))
|
|
this.classList.add('active')
|
|
})
|
|
})
|
|
},
|
|
|
|
generateLogsContent(container) {
|
|
container.innerHTML = `
|
|
<div class="mb-4">
|
|
<div class="flex gap-2 flex-wrap">
|
|
<select class="px-3 py-2 border rounded">
|
|
<option>创作日志</option>
|
|
<option>优化日志</option>
|
|
<option>收集日志</option>
|
|
</select>
|
|
<input type="date" class="px-3 py-2 border rounded">
|
|
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">加载日志</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded min-h-[200px] whitespace-pre-wrap font-mono text-sm">
|
|
请选择日志类型和日期，然后点击加载
|
|
</div>
|
|
`
|
|
},
|
|
|
|
generateUsersContent(container) {
|
|
container.innerHTML = `
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold">用户列表</h3>
|
|
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">+ 新建用户</button>
|
|
</div>
|
|
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="border p-2">ID</th>
|
|
<th class="border p-2">用户名</th>
|
|
<th class="border p-2">角色</th>
|
|
<th class="border p-2">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="border p-2">admin</td>
|
|
<td class="border p-2">管理员</td>
|
|
<td class="border p-2"><span class="px-2 py-1 bg-red-100 text-red-800 rounded">管理员</span></td>
|
|
<td class="border p-2"><button class="px-2 py-1 bg-gray-400 text-white rounded text-xs" disabled>删除</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border p-2">editor1</td>
|
|
<td class="border p-2">编辑小王</td>
|
|
<td class="border p-2"><span class="px-2 py-1 bg-green-100 text-green-800 rounded">编辑</span></td>
|
|
<td class="border p-2"><button class="px-2 py-1 bg-red-500 text-white rounded text-xs">删除</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`
|
|
}
|
|
}
|
|
}
|
|
|
|
Vue.createApp(App).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |