Add 'frontend/' from commit '94f710850fa74ad3aaca5b65318f2fec9e1a2cdf'

git-subtree-dir: frontend
git-subtree-mainline: 3f114b2cc3
git-subtree-split: 94f710850f

frontend/src/components/EditUserDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="props.mode === 'create' ? '创建用户' : '修改用户信息'">
+    <el-form :model="editForm">
+      <el-form-item v-if="props.mode === 'edit'" label="用户ID">
+        <el-input v-model="editForm.id" disabled />
+      </el-form-item>
+      <el-form-item label="用户名">
+        <el-input v-model="editForm.username" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="editForm.role">
+          <el-option label="系统管理员" value="system_admin" />
+          <el-option label="管理员" value="admin" />
+          <el-option label="普通用户" value="user" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="props.mode === 'create'" label="密码">
+        <el-input v-model="editForm.password" type="password" />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input v-model="editForm.description" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { UserResponse, UserCreate } from '@/api/types'
+import { userService } from '@/api/userService'
+
+const props = defineProps<{
+  mode: 'create' | 'edit',
+  userId?: number
+}>()
+
+const dialogVisible = ref(false)
+const options = ref<{ userId?: number, mode?: 'create' | 'edit', onConfirm?: () => void }>({})
+const editForm = ref<UserResponse & { password?: string }>({
+  id: 0,
+  username: '',
+  role: 'user',
+  description: '',
+  created_at: '',
+  updated_at: '',
+  password: ''
+})
+
+const emit = defineEmits(['confirm'])
+
+const open = async (opts: { userId?: number, mode?: 'create' | 'edit', onConfirm?: () => void }) => {
+  options.value = opts
+  if (options.value.mode === 'edit' && options.value.userId) {
+    const user = await userService.getUser(options.value.userId)
+    editForm.value = { ...user }
+  } else {
+    editForm.value = {
+    id: 0,
+    username: '',
+    role: 'user',
+    description: '',
+    created_at: '',
+    updated_at: ''
+    }
+  }
+  if (options.value.onConfirm) {
+    emit('confirm', options.value.onConfirm)
+  }
+  dialogVisible.value = true
+}
+
+const handleConfirm = async () => {
+  try {
+    if (props.mode === 'create') {
+      // 调用创建用户API
+      const { id, created_at, updated_at, ...createData } = editForm.value
+      if (!createData.password) {
+        throw new Error('密码不能为空')
+      }
+      await userService.createUser({
+        username: createData.username,
+        password: createData.password,
+        role: createData.role,
+        description: createData.description
+      } as UserCreate)
+    } else {
+      // 调用更新用户API
+      const { id, created_at, updated_at, ...updateData } = editForm.value
+      await userService.updateUser(id, updateData)
+    }
+    emit('confirm', editForm.value)
+    if (options.value.onConfirm) {
+      options.value.onConfirm()
+    }
+    ElMessage({
+      type: 'success',
+      message: props.mode === 'create' ? '用户创建成功' : '用户信息更新成功'
+    })
+    dialogVisible.value = false
+  } catch (error) {
+    console.error('操作失败:', error)
+    ElMessage({
+      type: 'error',
+      message: props.mode === 'create' ? '用户创建失败' : '用户信息更新失败'
+    })
+  }
+}
+
+defineExpose({
+  open,
+  handleConfirm
+})
+</script>

frontend/src/components/UserTable.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-table :data="users" style="width: 100%">
+    <el-table-column prop="id" label="ID" width="100" />
+    <el-table-column prop="username" label="用户名" />
+    <el-table-column prop="role" label="角色" />
+    <el-table-column prop="description" label="描述" />
+    <el-table-column prop="created_at" label="创建时间" width="180">
+      <template #default="scope">
+        {{ new Date(scope.row.created_at).toLocaleString() }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="updated_at" label="更新时间" width="180">
+      <template #default="scope">
+        {{ new Date(scope.row.updated_at).toLocaleString() }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="150" v-if="isAdmin">
+      <template #default="scope">
+        <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
+        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <EditUserDialog ref="editDialogRef" mode="edit" />
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { userService } from '../api/userService';
+import { userStore } from '../store/userStore';
+import type { UserResponse } from '../api/types';
+import EditUserDialog from './EditUserDialog.vue';
+
+const store = userStore();
+const users = ref<UserResponse[]>([]);
+const isAdmin = store.isAdmin;
+
+const fetchUsers = async () => {
+  try {
+    const data = await userService.getUsers();
+    console.log('获取用户列表成功:', data);
+    users.value = data;
+  } catch (error) {
+    console.error('获取用户列表失败:', error);
+  }
+};
+
+const editDialogRef = ref<InstanceType<typeof EditUserDialog>>();
+
+const handleEdit = (user: UserResponse) => {
+  editDialogRef.value?.open({
+    userId: user.id,
+    mode: 'edit',
+    onConfirm: () => fetchUsers()
+  });
+};
+
+const handleDelete = async (user: UserResponse) => {
+  try {
+    await userService.deleteUser(user.id);
+    await fetchUsers();
+  } catch (error) {
+    console.error('删除用户失败:', error);
+  }
+};
+
+onMounted(() => {
+  fetchUsers();
+});
+
+defineExpose({
+  fetchUsers
+});
+</script>