diff --git a/ui/src/components/DeleteAccountDialog.vue b/ui/src/components/DeleteAccountDialog.vue
new file mode 100644
index 0000000..96a8ff8
--- /dev/null
+++ b/ui/src/components/DeleteAccountDialog.vue
@@ -0,0 +1,95 @@
+<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-row dense>
+          <v-card-text style="color: red;">
+            请在下方文本框中一字不差地输入引号内的内容：“{{ DialogDeleteAccountPromise }}”之后，您才能删除账号。
+          </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>
+</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 DialogDeleteAccountPromise = '我确定要删除我的账号。';
+const dialogDeleteAccountPromise = ref('');
+const dialogDeleteAccountShow = defineModel({ default: true });
+
+watch(dialogDeleteAccountShow, () => {
+  if (dialogDeleteAccountShow.value == true) {
+    dialogDeleteAccountPromise.value = '';
+  }
+});
+
+const authStore = useAuthStore();
+const token = ref(authStore.token);
+
+type DeleteAccountResponse = { success?: string, error?: string };
+
+const requestDeleteAccount = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("token", token.value);
+    let res = await axios.post('/api/auth/delete', formData);
+    return res.data as DeleteAccountResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    return ex.response?.data as DeleteAccountResponse;
+  }
+}
+
+const deleteAccount = async () => {
+  let res = await requestDeleteAccount();
+  if (res?.error) {
+    await dialog('错误', `删除账号失败：${res.error}`);
+  } else {
+    await dialog('信息', `删除账号成功。`);
+    authStore.clearToken();
+  }
+}
+
+</script>