Yuzhiran Dev
200 lines
13 KiB
HTML
200 lines
13 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>
|
|
<link rel="stylesheet" href="element-plus.css">
|
|
<link rel="stylesheet" href="theme-modern.css">
|
|
<style>
|
|
.user-table { width: 100%; }
|
|
.user-table .el-table__cell { word-break: break-word; }
|
|
|
|
.user-card-list { display: none; }
|
|
|
|
@media (max-width: 768px) {
|
|
.user-table { display: none; }
|
|
.user-card-list { display: block; margin: 0 -16px; }
|
|
.user-card { background: var(--color-bg-raised); border-radius: var(--radius-sm); padding: var(--spacing-md); margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
|
|
.user-card:active { transform: scale(0.99); }
|
|
.user-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.user-card-name { font-size: var(--font-size-h3); font-weight: 600; display: flex; align-items: center; gap: var(--spacing-sm); }
|
|
.user-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); font-size: var(--font-size-small); color: var(--color-text-regular); margin-bottom: 12px; }
|
|
.user-card-meta-item { display: flex; flex-direction: column; gap: 2px; }
|
|
.user-card-meta-label { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
|
|
.user-card-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--color-border); }
|
|
}
|
|
</style>
|
|
<script src="uni-nav.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<uni-nav title="用户管理" :username="currentUser.username" :is-admin="isAdmin" current-page="users" @navigate="redirectToPage" @logout="handleLogout">
|
|
</uni-nav>
|
|
<div class="main-content">
|
|
<main class="content-area">
|
|
<div class="card page-fade">
|
|
<div class="card-header">
|
|
<h2 class="card-title"><el-icon style="vertical-align:-2px;"><IconUser /></el-icon> 用户管理</h2>
|
|
<el-button type="primary" @click="addUser">+ 新建用户</el-button>
|
|
</div>
|
|
<el-table :data="users" stripe class="user-table" v-loading="loading">
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="username" label="用户名"></el-table-column>
|
|
<el-table-column prop="role" label="角色" width="100">
|
|
<template #default="scope"><el-tag :type="scope.row.role === 'admin' ? 'danger' : 'info'">{{ scope.row.role === 'admin' ? '管理员' : '编辑' }}</el-tag></template>
|
|
</el-table-column>
|
|
<el-table-column prop="org_id" label="组织" width="100"></el-table-column>
|
|
<el-table-column prop="created_at" label="创建时间"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
|
<el-table-column label="操作" width="120">
|
|
<template #default="scope">
|
|
<el-button size="small" type="danger" @click="deleteUser(scope.row.id)" :disabled="scope.row.role === 'admin'">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="!loading && users.length === 0" style="text-align:center;padding:40px 0;color:#909399;">
|
|
<el-icon style="font-size:48px;margin-bottom:12px;color:#c0c4cc;"><IconUser /></el-icon>
|
|
<div>暂无用户</div>
|
|
</div>
|
|
<div class="user-card-list">
|
|
<div v-for="u in users" :key="u.id" class="user-card">
|
|
<div class="user-card-header">
|
|
<div class="user-card-name">
|
|
{{ u.username }}
|
|
<el-tag size="small" :type="u.role === 'admin' ? 'danger' : 'info'">{{ u.role === 'admin' ? '管理员' : '编辑' }}</el-tag>
|
|
</div>
|
|
<span style="font-size: 12px; color: #909399;">#{{ u.id }}</span>
|
|
</div>
|
|
<div class="user-card-meta">
|
|
<div class="user-card-meta-item">
|
|
<span class="user-card-meta-label">组织</span>
|
|
<span>{{ u.org_id || '-' }}</span>
|
|
</div>
|
|
<div class="user-card-meta-item">
|
|
<span class="user-card-meta-label">创建时间</span>
|
|
<span>{{ formatDate(u.created_at) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="user-card-actions">
|
|
<el-button size="small" type="danger" plain @click="deleteUser(u.id)" :disabled="u.role === 'admin'">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<el-dialog v-model="dialogVisible" title="新建用户" width="400px" :close-on-click-modal="false">
|
|
<el-form :model="form" label-width="80px" @submit.prevent="submitUser">
|
|
<el-form-item label="用户名" required>
|
|
<el-input v-model="form.username" placeholder="2-20个字符" maxlength="20" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码" required>
|
|
<el-input v-model="form.password" type="password" placeholder="至少6位" show-password></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="角色">
|
|
<el-select v-model="form.role" style="width:100%">
|
|
<el-option label="编辑" value="editor"></el-option>
|
|
<el-option label="管理员" value="admin"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submitUser" :loading="submitting">创建</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
<script src="vue.global.prod.js"></script>
|
|
<script src="icon-components.js"></script>
|
|
<script src="element-plus.full.js"></script>
|
|
<script>
|
|
const UsersApp = {
|
|
data() {
|
|
return {
|
|
isLoggedIn: false, isAdmin: false, currentUser: { username: '' },
|
|
users: [], dialogVisible: false, submitting: false, loading: false,
|
|
form: { username: '', password: '', role: 'editor' }
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchUsers() {
|
|
this.loading = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
if (!token) { this.$message.error('请先登录'); return; }
|
|
const response = await fetch('/api/admin/users', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.detail || `请求失败: ${response.status}`); }
|
|
const data = await response.json();
|
|
this.users = data || [];
|
|
} catch (error) {
|
|
console.error('获取用户失败:', error);
|
|
this.$message.error(`获取用户失败: ${error.message}`);
|
|
this.users = [];
|
|
} finally { this.loading = false; }
|
|
},
|
|
addUser() {
|
|
this.form = { username: '', password: '', role: 'editor' };
|
|
this.dialogVisible = true;
|
|
},
|
|
async submitUser() {
|
|
if (!this.form.username || this.form.username.length < 2) { this.$message.warning('用户名至少2个字符'); return; }
|
|
if (!this.form.password || this.form.password.length < 6) { this.$message.warning('密码至少6位'); return; }
|
|
this.submitting = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
if (!token) { this.$message.error('请先登录'); return; }
|
|
const response = await fetch('/api/admin/users', {
|
|
method: 'POST',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(this.form)
|
|
});
|
|
if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.detail || `请求失败: ${response.status}`); }
|
|
const newUser = await response.json();
|
|
this.users.push(newUser);
|
|
this.$message.success('添加用户成功');
|
|
this.dialogVisible = false;
|
|
} catch (error) {
|
|
console.error('添加用户失败:', error);
|
|
this.$message.error(`添加用户失败: ${error.message}`);
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
},
|
|
async deleteUser(id) {
|
|
if (id === 'admin') { this.$message.warning('不能删除管理员用户'); return; }
|
|
this.$confirm('确定删除该用户？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
|
.then(async () => {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
if (!token) { this.$message.error('请先登录'); window.location.href = '/'; return; }
|
|
const response = await fetch(`/api/admin/users/${encodeURIComponent(id)}`, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.detail || `请求失败: ${response.status}`); }
|
|
this.users = this.users.filter(u => u.id !== id);
|
|
this.$message.success('删除用户成功');
|
|
} catch (error) { console.error('删除用户失败:', error); this.$message.error(`删除用户失败: ${error.message}`); }
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; },
|
|
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
|
|
checkAuth() {
|
|
const token = localStorage.getItem('authToken');
|
|
if (!token) { window.location.href = '/login.html'; return; }
|
|
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
|
.then(response => response.ok ? response.json() : Promise.reject())
|
|
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; if (!this.isAdmin) { this.$message.warning('需要管理员权限'); window.location.href = '/login.html'; } else { this.fetchUsers(); } })
|
|
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
|
|
},
|
|
formatDate(dateStr) { if (!dateStr) return '-'; return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); }
|
|
},
|
|
mounted() { this.checkAuth(); }
|
|
};
|
|
const app = Vue.createApp(UsersApp);
|
|
app.use(ElementPlus);
|
|
if (window.installIcons) { window.installIcons(app); }
|
|
if (window.installUniNav) { window.installUniNav(app); }
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|