权限控制 #3

Merged
zyb merged 1 commits from feature/login-screen into master 2025-06-27 21:10:04 +08:00

View File

@ -0,0 +1,99 @@
<template>
<div class="admin-edit-user-privilege">
<h2>管理员修改用户权限</h2>
<form class="edit-form" @submit.prevent="savePrivilege">
<div class="form-row">
<label for="uuid">用户UUID</label>
<input id="uuid" v-model="uuid" placeholder="请输入用户UUID" required />
</div>
<div class="form-row">
<label for="privilege">权限</label>
<select id="privilege" v-model="editPrivilege" required>
<option value="lv-admin">管理员</option>
<option value="lv-mod">模组</option>
<option value="lv-competitor">竞技</option>
<option value="lv-map">地图</option>
<option value="lv-user">用户</option>
</select>
</div>
<button type="submit">保存</button>
</form>
<div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
<div v-if="successMsg" class="success-msg">{{ successMsg }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { adminChangeUserPrivilege } from '@/api/login'
const uuid = ref('')
const editPrivilege = ref('lv-user')
const errorMsg = ref('')
const successMsg = ref('')
const savePrivilege = async () => {
if (!uuid.value) return
errorMsg.value = ''
successMsg.value = ''
try {
await adminChangeUserPrivilege(uuid.value, editPrivilege.value)
successMsg.value = '权限修改成功!'
} catch (e) {
errorMsg.value = e.response?.data?.detail || '权限修改失败'
}
}
</script>
<style scoped>
.admin-edit-user-privilege {
max-width: 400px;
margin: 0 auto;
background: #fff;
padding: 24px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.edit-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-row {
display: flex;
flex-direction: column;
gap: 6px;
}
label {
font-weight: 500;
}
input, select {
padding: 8px 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 1rem;
}
button[type="submit"] {
margin-top: 10px;
padding: 10px 0;
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
button[type="submit"]:hover {
background: #1d4ed8;
}
.error-msg {
color: #e53e3e;
margin-top: 16px;
}
.success-msg {
color: #16a34a;
margin-top: 16px;
}
</style>