|
|
@@ -113,6 +113,37 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 新增用户对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="showAddUserDialog"
|
|
|
+ title="新增用户"
|
|
|
+ width="480px"
|
|
|
+ @closed="resetUserForm"
|
|
|
+ >
|
|
|
+ <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="80px">
|
|
|
+ <el-form-item label="用户名" prop="username">
|
|
|
+ <el-input v-model="userForm.username" placeholder="请输入用户名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="password">
|
|
|
+ <el-input v-model="userForm.password" type="password" show-password placeholder="请输入密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱" prop="email">
|
|
|
+ <el-input v-model="userForm.email" placeholder="请输入邮箱(可选)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色" prop="role">
|
|
|
+ <el-select v-model="userForm.role" style="width: 100%">
|
|
|
+ <el-option label="运营" value="operator" />
|
|
|
+ <el-option label="编辑" value="editor" />
|
|
|
+ <el-option label="管理员" value="admin" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="showAddUserDialog = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleAddUser" :loading="addingUser">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="系统状态" name="status">
|
|
|
@@ -142,7 +173,7 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
|
|
|
import request from '@/api/request';
|
|
|
import { useAuthStore } from '@/stores/auth';
|
|
|
import type { User } from '@media-manager/shared';
|
|
|
@@ -170,6 +201,63 @@ const pythonCheckResult = ref<any | null>(null);
|
|
|
|
|
|
const users = ref<User[]>([]);
|
|
|
const showAddUserDialog = ref(false);
|
|
|
+const addingUser = ref(false);
|
|
|
+const userFormRef = ref<FormInstance>();
|
|
|
+
|
|
|
+const userForm = reactive({
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ email: '',
|
|
|
+ role: 'operator',
|
|
|
+});
|
|
|
+
|
|
|
+const userFormRules: FormRules = {
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
+ { min: 3, max: 50, message: '用户名长度为3-50个字符', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { min: 6, message: '密码长度至少6个字符', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ role: [
|
|
|
+ { required: true, message: '请选择角色', trigger: 'change' },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+function resetUserForm() {
|
|
|
+ userForm.username = '';
|
|
|
+ userForm.password = '';
|
|
|
+ userForm.email = '';
|
|
|
+ userForm.role = 'operator';
|
|
|
+ userFormRef.value?.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleAddUser() {
|
|
|
+ if (!userFormRef.value) return;
|
|
|
+ const valid = await userFormRef.value.validate().catch(() => false);
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ addingUser.value = true;
|
|
|
+ try {
|
|
|
+ await request.post('/api/users', {
|
|
|
+ username: userForm.username,
|
|
|
+ password: userForm.password,
|
|
|
+ email: userForm.email || undefined,
|
|
|
+ role: userForm.role,
|
|
|
+ });
|
|
|
+ ElMessage.success('用户创建成功');
|
|
|
+ showAddUserDialog.value = false;
|
|
|
+ loadUsers();
|
|
|
+ } catch {
|
|
|
+ // 错误已由拦截器处理
|
|
|
+ } finally {
|
|
|
+ addingUser.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
const systemStatus = reactive({
|
|
|
database: 'disconnected',
|