添加权限管理功能，允许管理员修改用户权限，更新相关组件和对话框

ui/src/components/admin/AdminPanel.vue

@@ -18,8 +18,11 @@
       <v-chip class="chips" color="blue" @click="dialogRepasswd2Show = true">
         修改指定用户的密码
       </v-chip>
+      <v-chip class="chips" color="green" @click="dialogPermissionShow = true">
+        修改指定用户的身份
+      </v-chip>
       <v-chip class="chips" color="red" @click="dialogDeleteAccountShow = true">
-        删除指定用户的账号
+        删除指定用户的权限
       </v-chip>
     </v-card-item>
   </v-card>
@@ -32,6 +35,7 @@
   </v-dialog>
   <RepasswdDialog v-model="dialogRepasswdShow"></RepasswdDialog>
   <Repasswd2Dialog v-model="dialogRepasswd2Show"></Repasswd2Dialog>
+  <Permission v-model="dialogPermissionShow"></Permission>
   <DeleteAccountDialog v-model="dialogDeleteAccountShow"></DeleteAccountDialog>
 </template>
 
@@ -42,6 +46,7 @@ import axios, { AxiosError } from 'axios';
 import RepasswdDialog from './RepasswdDialog.vue';
 import Repasswd2Dialog from './Repasswd2Dialog .vue';
 import DeleteAccountDialog from './DeleteAccountDialog.vue';
+import Permission from './Permission.vue';
 
 const authStore = useAuthStore();
 const storedAdminToken = ref(authStore.adminToken);
@@ -53,6 +58,7 @@ const dialogClose = ref(() => { });
 
 const dialogRepasswdShow = ref(false);
 const dialogRepasswd2Show = ref(false);
+const dialogPermissionShow = ref(false);
 const dialogDeleteAccountShow = ref(false);
 
 const dialog = (title: string, text: string) => {

ui/src/components/admin/Permission.vue

@@ -0,0 +1,131 @@
+<template>
+  <v-dialog v-model="dialogPermissionShow" max-width="448">
+    <v-card class="mx-auto pa-12 pb-8" elevation="8" width="100%" rounded="lg">
+      <v-form fast-fail @submit.prevent="submit">
+
+        <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules" label="账号"
+          @blur="updateUserPermission"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-select v-model="permission" label="权限" item-title="title" item-value="value" :items="permissions"></v-select>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-btn :loading="loading" class="mb-8" color="blue" size="large" type="submit" variant="tonal" block>
+          修改权限
+        </v-btn>
+
+      </v-form>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model="dialogShow" width="auto">
+    <v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
+      <template v-slot:actions>
+        <v-btn class="ms-auto" text="Ok" @click="dialogShow = false, dialogClose()"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import axios, { AxiosError } from 'axios';
+
+const dialogShow = ref(false);
+const dialogTitle = ref('');
+const dialogText = ref('');
+const dialogClose = ref(() => { });
+
+const dialog = (title: string, text: string) => {
+  dialogTitle.value = title;
+  dialogText.value = text;
+  dialogShow.value = true;
+  return new Promise(res => {
+    dialogClose.value = res as () => void;
+  });
+};
+
+const dialogPermissionShow = defineModel({ default: true });
+
+const loading = ref(false);
+const userId = ref('');
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+
+type UserPermissionResponse = { success?: string, permission?: string, error?: string };
+
+const queryPermission = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("user_id", userId.value);
+    let res = await axios.post('/api/auth/permission', formData);
+    return res.data as UserPermissionResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    return ex.response?.data as UserPermissionResponse;
+  }
+}
+
+const permissions = [
+  { title: '老师', value: '1' },
+  { title: '学生', value: '2' }
+];
+const permission = ref(permissions[0]);
+
+const updateUserPermission = async () => {
+  if (userId.value == '') return;
+  let userPermission = '';
+  let res = await queryPermission();
+  if (res?.success) {
+    userPermission = res.permission as string;
+  }
+  permission.value = permissions[userPermission as any as number - 1];
+}
+
+watch(userId, () => {
+  permission.value = undefined as any;
+}, { immediate: true });
+
+const userIdRules: any = [(value: string) => {
+  if (value?.length > 0) return true;
+  return '账号不能为空';
+}];
+
+type PermissionResponse = { success?: string, error?: string };
+
+const requestPermission = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("action", "permission");
+    formData.append("token", storedAdminToken.value);
+    formData.append("user_id", userId.value);
+    formData.append("permission", permission.value as any);
+    let res = await axios.post('/api/auth/admin', formData);
+    return res.data as PermissionResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    if (ex.response?.data) {
+      return ex.response?.data as PermissionResponse;
+    } {
+      return { error: ex.message };
+    }
+  }
+}
+
+const submit = async () => {
+  loading.value = true;
+  let res = await requestPermission();
+  loading.value = false;
+  if (res?.error) {
+    await dialog('错误', `修改权限失败：${res.error}`);
+  } else {
+    await dialog('信息', `修改权限成功。`);
+    dialogPermissionShow.value = false;
+    userId.value = '';
+  }
+}
+
+
+</script>