From e078a1df93a22e734722b2bb466d257a7b242437 Mon Sep 17 00:00:00 2001
From: keqingmoe <me@keqing.moe>
Date: Sat, 28 Dec 2024 21:00:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=92=8C=E7=AE=A1=E7=90=86=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E8=BA=AB=E4=BB=BD?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/Admin.vue                   |  27 ++++
 ui/src/components/admin/AdminPanel.vue        |  77 ++++++++++
 .../components/admin/DeleteAccountDialog.vue  | 139 ++++++++++++++++++
 ui/src/components/admin/LoginForm.vue         | 106 +++++++++++++
 ui/src/components/admin/Repasswd2Dialog .vue  | 111 ++++++++++++++
 ui/src/components/admin/RepasswdDialog.vue    | 117 +++++++++++++++
 6 files changed, 577 insertions(+)
 create mode 100644 ui/src/components/Admin.vue
 create mode 100644 ui/src/components/admin/AdminPanel.vue
 create mode 100644 ui/src/components/admin/DeleteAccountDialog.vue
 create mode 100644 ui/src/components/admin/LoginForm.vue
 create mode 100644 ui/src/components/admin/Repasswd2Dialog .vue
 create mode 100644 ui/src/components/admin/RepasswdDialog.vue

diff --git a/ui/src/components/Admin.vue b/ui/src/components/Admin.vue
new file mode 100644
index 0000000..6abdb02
--- /dev/null
+++ b/ui/src/components/Admin.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4" v-if="authStore.adminToken == ''"
+    width="640" height="670">
+    <v-sheet class="v-center" height="100%">
+      <LoginForm></LoginForm>
+    </v-sheet>
+  </v-sheet>
+  <AdminPanel v-else></AdminPanel>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '@/store/auth';
+import LoginForm from './admin/LoginForm.vue';
+import AdminPanel from './admin/AdminPanel.vue';
+
+const authStore = useAuthStore();
+
+</script>
+
+<style lang="scss" scoped>
+.v-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/admin/AdminPanel.vue b/ui/src/components/admin/AdminPanel.vue
new file mode 100644
index 0000000..b571495
--- /dev/null
+++ b/ui/src/components/admin/AdminPanel.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-card subtitle="占位符占位符占位符" title="管理员面板" max-width="80%">
+    <v-card-item>
+      <v-chip class="ma-2" color="pink" label>
+        <v-icon icon="mdi-human" start></v-icon>
+        权限: 管理员
+      </v-chip>
+    </v-card-item>
+    <v-card-item>
+      <v-chip class="chips" color="orange" @click="logout">
+        退出登录
+      </v-chip>
+      <v-chip class="chips" color="blue" @click="dialogRepasswdShow = true">
+        修改密码
+      </v-chip>
+    </v-card-item>
+    <v-card-item>
+      <v-chip class="chips" color="blue" @click="dialogRepasswd2Show = true">
+        修改指定用户的密码
+      </v-chip>
+      <v-chip class="chips" color="red" @click="dialogDeleteAccountShow = true">
+        删除指定用户的账号
+      </v-chip>
+    </v-card-item>
+  </v-card>
+  <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>
+  <RepasswdDialog v-model="dialogRepasswdShow"></RepasswdDialog>
+  <Repasswd2Dialog v-model="dialogRepasswd2Show"></Repasswd2Dialog>
+  <DeleteAccountDialog v-model="dialogDeleteAccountShow"></DeleteAccountDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import axios, { AxiosError } from 'axios';
+import RepasswdDialog from './RepasswdDialog.vue';
+import Repasswd2Dialog from './Repasswd2Dialog .vue';
+import DeleteAccountDialog from './DeleteAccountDialog.vue';
+
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+
+const dialogShow = ref(false);
+const dialogTitle = ref('');
+const dialogText = ref('');
+const dialogClose = ref(() => { });
+
+const dialogRepasswdShow = ref(false);
+const dialogRepasswd2Show = ref(false);
+const dialogDeleteAccountShow = ref(false);
+
+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 logout = async () => {
+  authStore.clearAdminToken();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.chips {
+  margin: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/admin/DeleteAccountDialog.vue b/ui/src/components/admin/DeleteAccountDialog.vue
new file mode 100644
index 0000000..0cc4443
--- /dev/null
+++ b/ui/src/components/admin/DeleteAccountDialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <v-dialog v-model="dialogDeleteAccountShow" max-width="600">
+    <v-card prepend-icon="mdi-account">
+      <template v-slot:title>
+        删除账号
+      </template>
+      <template v-slot:subtitle>
+        <span style="color: red;">警告！不可逆操作！您正在进行很危险的事情！</span>
+      </template>
+      <!-- <v-card-text>
+      </v-card-text> -->
+      <v-card-text>
+        <v-row dense>
+          <v-card-text>
+            在下方文本框中输入要删除的账号的 ID，可以批量删除，使用英文逗号分隔即可，逗号前后不需要空格。
+          </v-card-text>
+          <v-col cols="12" sm="12">
+            <v-text-field v-model="userIds" :rules="[() => userIds.length == 0 ? '不能为空' : true]" label="用户 ID"
+              prepend-inner-icon="mdi-account" type="text"></v-text-field>
+          </v-col>
+        </v-row>
+        <v-row dense>
+          <v-card-text style="color: red;">
+            请在下方文本框中一字不差地输入引号内的内容：“<span style="user-select: none;">{{ DialogDeleteAccountPromise }}</span>”之后，您才能删除账号。
+          </v-card-text>
+          <v-col cols="12" sm="12">
+            <v-text-field v-model="dialogDeleteAccountPromise" :label="DialogDeleteAccountPromise"
+              prepend-inner-icon="mdi-delete" type="text"></v-text-field>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text="取消" color="primary" variant="tonal" @click="dialogDeleteAccountShow = false"></v-btn>
+        <v-btn :readonly="dialogDeleteAccountPromise != DialogDeleteAccountPromise" color="red" variant="tonal"
+          @click="dialogDeleteAccountShow = false, deleteAccount()">
+          <span style="color: red;">确定</span>
+        </v-btn>
+      </v-card-actions>
+    </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>
+  <v-dialog v-model="dialog2Show" width="auto">
+    <v-card max-width="400" prepend-icon="mdi-update" :text="dialogFailedListText" title="部分账号删除失败">
+      <template v-slot:actions>
+        <v-btn class="ms-auto" text="Ok" @click="deleteFailedList = []"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, 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 deleteFailedList = ref<string[]>([]);
+const dialog2Show = computed(() => deleteFailedList.value.length > 0);
+const dialogFailedListText = computed(() => {
+  return `ID 为 ${deleteFailedList.value.join()} 的账号删除失败。`
+});
+
+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 userIds = ref('');
+const userIdArr = computed(() => {
+  return userIds.value.split(',');
+});
+const DialogDeleteAccountPromise = computed(() => {
+  return `我确定要删除这${userIdArr.value.length > 1 ? '些' : '个'}账号。`
+});
+const dialogDeleteAccountPromise = ref('');
+const dialogDeleteAccountShow = defineModel({ default: true });
+
+watch(dialogDeleteAccountShow, () => {
+  if (dialogDeleteAccountShow.value == true) {
+    dialogDeleteAccountPromise.value = '';
+  }
+});
+
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+
+type DeleteAccountResponse = { success?: string, error?: string };
+
+const requestDeleteAccount = async (userId: string) => {
+  try {
+    const formData = new FormData;
+    formData.append("action", "delete");
+    formData.append("token", storedAdminToken.value);
+    formData.append("user_id", userId);
+    let res = await axios.post('/api/auth/admin', formData);
+    return res.data as DeleteAccountResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    if (ex.response?.data) {
+      return ex.response?.data as DeleteAccountResponse;
+    } {
+      return { error: ex.message };
+    }
+  }
+}
+
+const deleteAccount = async () => {
+  if (userIdArr.value.length == 1) {
+    let res = await requestDeleteAccount(userIdArr.value[0]);
+    if (res?.error) {
+      await dialog('错误', `删除账号失败：${res.error}`);
+    } else {
+      await dialog('信息', `删除账号成功。`);
+    }
+  } else {
+    for (let userId of userIdArr.value) {
+      let res = await requestDeleteAccount(userId);
+      if (res?.error) {
+        deleteFailedList.value.push(userId);
+      }
+    }
+  }
+}
+
+</script>
diff --git a/ui/src/components/admin/LoginForm.vue b/ui/src/components/admin/LoginForm.vue
new file mode 100644
index 0000000..c714cfc
--- /dev/null
+++ b/ui/src/components/admin/LoginForm.vue
@@ -0,0 +1,106 @@
+<template>
+  <v-card class="mx-auto pa-12 pb-8" width="448" elevation="8" rounded="lg">
+    <v-form fast-fail @submit.prevent="submit">
+
+      <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" disabled></v-text-field>
+
+      <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+      <v-text-field v-model="password" :rules="passwordRules" :error-messages="passwordValidate" label="密码"
+        :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
+        @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+      <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+      <v-btn class="mb-8" color="blue" size="large" variant="tonal" type="submit" block>
+        登录
+      </v-btn>
+
+      <v-card-text class="text-center">
+        <a class="text-red text-decoration-none" @click="dialog('忘记密码', '请在后端服务器上修改密码。')">
+          忘记密码<v-icon icon="mdi-chevron-right"></v-icon>
+        </a>
+      </v-card-text>
+    </v-form>
+  </v-card>
+  <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 { useAuthStore } from '@/store/auth';
+import axios, { AxiosError } from 'axios';
+import { ref } from 'vue';
+
+const visible = ref(false);
+
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+
+const dialogShow = ref(false);
+const dialogTitle = ref('');
+const dialogText = ref('');
+const dialogClose = ref(() => { });
+
+const loading = ref(false);
+const userId = ref('管理员');
+const password = ref('');
+const passwordValidate = ref<string>("");
+
+
+type LoginResponse = { success?: string, token?: string, error?: string };
+
+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 login = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("action", "login");
+    formData.append("password", password.value);
+    let res = await axios.post('/api/auth/admin', formData);
+    return res.data as LoginResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    if (ex.response?.data) {
+      return ex.response?.data as LoginResponse;
+    } {
+      return { error: ex.message };
+    }
+  }
+};
+
+const submit = async (event: SubmitEvent) => {
+  const results: any = await event;
+  if (results.valid) {
+    loading.value = true
+    let res = await login();
+    loading.value = false
+    if (res?.error) {
+      passwordValidate.value = res.error;
+      await dialog('错误', `登录失败：${res.error}`);
+    } else {
+      await dialog('信息', `登录成功，你好，管理员。`);
+      authStore.setAdminToken(res.token as string);
+    }
+  }
+};
+
+const passwordRules: any = [(value: string) => {
+  passwordValidate.value = '';
+  if (value?.length > 0) return true;
+  return '密码不能为空';
+}];
+
+</script>
\ No newline at end of file
diff --git a/ui/src/components/admin/Repasswd2Dialog .vue b/ui/src/components/admin/Repasswd2Dialog .vue
new file mode 100644
index 0000000..c10fcce
--- /dev/null
+++ b/ui/src/components/admin/Repasswd2Dialog .vue	
@@ -0,0 +1,111 @@
+<template>
+  <v-dialog v-model="dialogRepasswdShow" 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="账号"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-text-field v-model="password" :rules="passwordRules" label="新密码"
+          :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
+          @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <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 } 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 dialogRepasswdShow = defineModel({ default: true });
+
+const loading = ref(false);
+const userId = ref('');
+const password = ref('');
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+const visible = ref(false);
+
+type RepasswdResponse = { success?: string, error?: string };
+
+const requestRepasswd = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("action", "repasswd2");
+    formData.append("token", storedAdminToken.value);
+    formData.append("user_id", userId.value);
+    formData.append("new_passwd", password.value);
+    let res = await axios.post('/api/auth/admin', formData);
+    return res.data as RepasswdResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    if (ex.response?.data) {
+      return ex.response?.data as RepasswdResponse;
+    } {
+      return { error: ex.message };
+    }
+  }
+}
+
+const repasswd = async () => {
+  loading.value = true;
+  let res = await requestRepasswd();
+  loading.value = false;
+  if (res?.error) {
+    await dialog('错误', `修改密码失败：${res.error}`);
+  } else {
+    await dialog('信息', `修改密码成功。`);
+  }
+}
+
+const submit = async (event: SubmitEvent) => {
+  const results: any = await event;
+  if (results.valid) {
+    await repasswd();
+  }
+};
+
+const userIdRules: any = [(value: string) => {
+  if (value?.length > 0) return true;
+  return '账号不能为空';
+}];
+
+const passwordRules: any = [(value: string) => {
+  if (value?.length > 0) return true;
+  return '密码不能为空';
+}];
+
+
+</script>
diff --git a/ui/src/components/admin/RepasswdDialog.vue b/ui/src/components/admin/RepasswdDialog.vue
new file mode 100644
index 0000000..9f9b9e0
--- /dev/null
+++ b/ui/src/components/admin/RepasswdDialog.vue
@@ -0,0 +1,117 @@
+<template>
+  <v-dialog v-model="dialogRepasswdShow" 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="passwords[0]" :rules="passwordRules" label="原密码"
+          :append-inner-icon="visible[0] ? 'mdi-eye' : 'mdi-eye-off'" :type="visible[0] ? 'text' : 'password'"
+          @click:append-inner="visible[0] = !visible[0]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-text-field v-model="passwords[1]" :rules="passwordRules" label="新密码"
+          :append-inner-icon="visible[1] ? 'mdi-eye' : 'mdi-eye-off'" :type="visible[1] ? 'text' : 'password'"
+          @click:append-inner="visible[1] = !visible[1]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-text-field :rules="passwordRules2" label="重复输入新密码"
+          :append-inner-icon="visible[2] ? 'mdi-eye' : 'mdi-eye-off'" :type="visible[2] ? 'text' : 'password'"
+          @click:append-inner="visible[2] = !visible[2]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <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 } 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 dialogRepasswdShow = defineModel({ default: true });
+
+const loading = ref(false);
+const passwords = ref(['', '']);
+const authStore = useAuthStore();
+const storedAdminToken = ref(authStore.adminToken);
+const visible = ref([false, false, false]);
+
+type RepasswdResponse = { success?: string, error?: string };
+
+const requestRepasswd = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("action", "repasswd");
+    formData.append("token", storedAdminToken.value);
+    formData.append("raw_passwd", passwords.value[0]);
+    formData.append("new_passwd", passwords.value[1]);
+    let res = await axios.post('/api/auth/admin', formData);
+    return res.data as RepasswdResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    if (ex.response?.data) {
+      return ex.response?.data as RepasswdResponse;
+    } {
+      return { error: ex.message };
+    }
+  }
+}
+
+const repasswd = async () => {
+  loading.value = true;
+  let res = await requestRepasswd();
+  loading.value = false;
+  if (res?.error) {
+    await dialog('错误', `修改密码失败：${res.error}`);
+  } else {
+    await dialog('信息', `修改密码成功，请重新登录。`);
+    authStore.clearToken();
+  }
+}
+
+const submit = async (event: SubmitEvent) => {
+  const results: any = await event;
+  if (results.valid) {
+    await repasswd();
+  }
+};
+
+const passwordRules: any = [(value: string) => {
+  if (value?.length > 0) return true;
+  return '密码不能为空';
+}];
+
+const passwordRules2: any = [(value: string) => {
+  if (value == passwords.value[1]) return true;
+  return '两次输入需保持一致';
+}];
+
+</script>