From ac4ac0e75316cfde8684271d1570bdcbd3ba9c38 Mon Sep 17 00:00:00 2001
From: hptangxi <hptangxi@yeah.net>
Date: Sun, 6 Jul 2025 19:42:24 +0800
Subject: [PATCH] add keys

---
 web/src/api/keys.ts                         |  22 +++-
 web/src/components/keys/GroupInfoCard.vue   |   2 +-
 web/src/components/keys/KeyCreateDialog.vue | 125 +++++++++++++++++++
 web/src/components/keys/KeyTable.vue        | 129 ++++++++++++++------
 web/src/utils/http.ts                       |   8 +-
 5 files changed, 242 insertions(+), 44 deletions(-)
 create mode 100644 web/src/components/keys/KeyCreateDialog.vue

diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
index a01e531..a08bc06 100644
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -82,10 +82,16 @@ export const keysApi = {
       error: string;
     }[]
   > {
-    const res = await http.post("/keys/test-multiple", {
-      group_id,
-      keys_text,
-    });
+    const res = await http.post(
+      "/keys/test-multiple",
+      {
+        group_id,
+        keys_text,
+      },
+      {
+        hideMessage: true,
+      }
+    );
     return res.data;
   },
 
@@ -97,6 +103,14 @@ export const keysApi = {
     });
   },
 
+  // 测试密钥
+  restoreKeys(group_id: number, keys_text: string): Promise<null> {
+    return http.post("/keys/restore-multiple", {
+      group_id,
+      keys_text,
+    });
+  },
+
   // 恢复所有无效密钥
   restoreAllInvalidKeys(group_id: number): Promise<void> {
     return http.post("/keys/restore-all-invalid", { group_id });
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 8e85c9d..0ad4895 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -75,7 +75,7 @@ function handleGroupEdited(newGroup: Group) {
   }
 }
 
-function handleDelete() {
+async function handleDelete() {
   if (!props.group) {
     return;
   }
diff --git a/web/src/components/keys/KeyCreateDialog.vue b/web/src/components/keys/KeyCreateDialog.vue
new file mode 100644
index 0000000..b6b6653
--- /dev/null
+++ b/web/src/components/keys/KeyCreateDialog.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { keysApi } from "@/api/keys";
+import { Close } from "@vicons/ionicons5";
+import { NButton, NCard, NInput, NModal } from "naive-ui";
+import { ref, watch } from "vue";
+
+interface Props {
+  show: boolean;
+  groupId: number;
+  groupName?: string;
+}
+
+interface Emits {
+  (e: "update:show", value: boolean): void;
+  (e: "success"): void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const loading = ref(false);
+const keysText = ref("");
+
+// 监听弹窗显示状态
+watch(
+  () => props.show,
+  show => {
+    if (show) {
+      resetForm();
+    }
+  }
+);
+
+// 重置表单
+function resetForm() {
+  keysText.value = "";
+}
+
+// 关闭弹窗
+function handleClose() {
+  emit("update:show", false);
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (loading.value || !keysText.value.trim()) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    await keysApi.addMultipleKeys(props.groupId, keysText.value);
+
+    emit("success");
+    handleClose();
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <n-modal :show="show" @update:show="handleClose" class="form-modal">
+    <n-card
+      style="width: 800px"
+      :title="`为 ${groupName || '当前分组'} 添加密钥`"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header-extra>
+        <n-button quaternary circle @click="handleClose">
+          <template #icon>
+            <n-icon :component="Close" />
+          </template>
+        </n-button>
+      </template>
+
+      <n-input
+        v-model:value="keysText"
+        type="textarea"
+        placeholder="输入密钥，每行一个"
+        :rows="8"
+        style="margin-top: 20px"
+      />
+
+      <template #footer>
+        <div style="display: flex; justify-content: flex-end; gap: 12px">
+          <n-button @click="handleClose">取消</n-button>
+          <n-button type="primary" @click="handleSubmit" :loading="loading" :disabled="!keysText">
+            创建
+          </n-button>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<style scoped>
+.form-modal {
+  --n-color: rgba(255, 255, 255, 0.95);
+}
+
+:deep(.n-input) {
+  --n-border-radius: 6px;
+}
+
+:deep(.n-card-header) {
+  border-bottom: 1px solid rgba(239, 239, 245, 0.8);
+  padding: 10px 20px;
+}
+
+:deep(.n-card__content) {
+  max-height: calc(100vh - 68px - 61px - 50px);
+  overflow-y: auto;
+}
+
+:deep(.n-card__footer) {
+  border-top: 1px solid rgba(239, 239, 245, 0.8);
+  padding: 10px 15px;
+}
+</style>
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index 31fca12..feabb2d 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { APIKey, Group, KeyStatus } from "@/types/models";
+import { getGroupDisplayName } from "@/utils/display";
 import {
   AddCircleOutline,
   CopyOutline,
@@ -8,8 +9,19 @@ import {
   EyeOutline,
   RemoveCircleOutline,
 } from "@vicons/ionicons5";
-import { NButton, NDropdown, NEmpty, NIcon, NInput, NSelect, NSpace, NSpin } from "naive-ui";
+import {
+  NButton,
+  NDropdown,
+  NEmpty,
+  NIcon,
+  NInput,
+  NSelect,
+  NSpace,
+  NSpin,
+  useDialog,
+} from "naive-ui";
 import { ref, watch } from "vue";
+import KeyCreateDialog from "./KeyCreateDialog.vue";
 
 interface KeyRow extends APIKey {
   is_visible: boolean;
@@ -29,6 +41,7 @@ const currentPage = ref(1);
 const pageSize = ref(9);
 const total = ref(0);
 const totalPages = ref(0);
+const dialog = useDialog();
 
 // 状态过滤选项
 const statusOptions = [
@@ -51,6 +64,11 @@ const moreOptions = [
 
 // 防抖定时器
 let searchTimer: number | undefined = undefined;
+let testingMsg: any = null;
+let restoreMsg: any = null;
+let deleteMsg: any = null;
+
+const createDialogShow = ref(false);
 
 watch(
   () => props.selectedGroup,
@@ -147,11 +165,11 @@ function copyKey(key: KeyRow) {
 }
 
 async function testKey(_key: KeyRow) {
-  if (!props.selectedGroup?.id || !_key.key_value) {
+  if (!props.selectedGroup?.id || !_key.key_value || testingMsg) {
     return;
   }
 
-  const loadingMsg = window.$message.info("正在测试密钥...", {
+  testingMsg = window.$message.info("正在测试密钥...", {
     duration: 0,
   });
 
@@ -166,7 +184,8 @@ async function testKey(_key: KeyRow) {
   } catch (_error) {
     console.error("测试失败");
   } finally {
-    loadingMsg.destroy();
+    testingMsg?.destroy();
+    testingMsg = null;
   }
 }
 
@@ -175,35 +194,59 @@ function toggleKeyVisibility(key: KeyRow) {
 }
 
 async function restoreKey(key: KeyRow) {
-  // eslint-disable-next-line no-alert
-  const confirmed = window.confirm(`确定要恢复密钥"${maskKey(key.key_value)}"吗？`);
-  if (!confirmed) {
+  if (!props.selectedGroup?.id || !key.key_value || restoreMsg) {
     return;
   }
 
-  try {
-    await keysApi.toggleKeyStatus(key.id.toString(), 1);
-    window.$message.success("密钥已恢复");
-    await loadKeys();
-  } catch (_error) {
-    window.$message.error("恢复失败");
-  }
+  dialog.warning({
+    title: "恢复密钥",
+    content: `确定要恢复密钥"${maskKey(key.key_value)}"吗？`,
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      restoreMsg = window.$message.info("正在恢复密钥...", {
+        duration: 0,
+      });
+
+      try {
+        await keysApi.restoreKeys(props.selectedGroup.id, key.key_value);
+        await loadKeys();
+      } catch (_error) {
+        console.error("恢复失败");
+      } finally {
+        restoreMsg?.destroy();
+        restoreMsg = null;
+      }
+    },
+  });
 }
 
 async function deleteKey(key: KeyRow) {
-  // eslint-disable-next-line no-alert
-  const confirmed = window.confirm(`确定要删除密钥"${maskKey(key.key_value)}"吗？`);
-  if (!confirmed) {
+  if (!props.selectedGroup?.id || !key.key_value || deleteMsg) {
     return;
   }
 
-  try {
-    await keysApi.deleteKeyById(key.id.toString());
-    window.$message.success("密钥已删除");
-    await loadKeys();
-  } catch (_error) {
-    window.$message.error("删除失败");
-  }
+  dialog.warning({
+    title: "删除密钥",
+    content: `确定要删除密钥"${maskKey(key.key_value)}"吗？`,
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      deleteMsg = window.$message.info("正在删除密钥...", {
+        duration: 0,
+      });
+
+      try {
+        await keysApi.deleteKeys(props.selectedGroup.id, key.key_value);
+        await loadKeys();
+      } catch (_error) {
+        console.error("删除失败");
+      } finally {
+        deleteMsg?.destroy();
+        deleteMsg = null;
+      }
+    },
+  });
 }
 
 function formatRelativeTime(date: string) {
@@ -234,7 +277,7 @@ function getStatusClass(status: KeyStatus): string {
 }
 
 function addKey() {
-  window.$message.info("添加密钥功能开发中");
+  createDialogShow.value = true;
 }
 
 async function copyAllKeys() {
@@ -308,19 +351,21 @@ async function restoreAllInvalid() {
     return;
   }
 
-  // eslint-disable-next-line no-alert
-  const confirmed = window.confirm("确定要恢复所有无效密钥吗？");
-  if (!confirmed) {
-    return;
-  }
-
-  try {
-    window.$message.success("所有无效密钥已恢复");
-    await loadKeys();
-  } catch (_error) {
-    // 错误已记录
-    window.$message.error("恢复失败");
-  }
+  dialog.warning({
+    // title: "恢复密钥",
+    content: "确定要恢复所有无效密钥吗？",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      try {
+        window.$message.success("所有无效密钥已恢复");
+        await loadKeys();
+      } catch (_error) {
+        // 错误已记录
+        window.$message.error("恢复失败");
+      }
+    },
+  });
 }
 
 async function validateAllKeys() {
@@ -535,6 +580,14 @@ function changePageSize(size: number) {
         </n-button>
       </div>
     </div>
+
+    <key-create-dialog
+      v-if="selectedGroup?.id"
+      v-model:show="createDialogShow"
+      :group-id="selectedGroup.id"
+      :group-name="getGroupDisplayName(selectedGroup!)"
+      @success="loadKeys"
+    />
   </div>
 </template>
 
diff --git a/web/src/utils/http.ts b/web/src/utils/http.ts
index d0866a6..bf3c768 100644
--- a/web/src/utils/http.ts
+++ b/web/src/utils/http.ts
@@ -2,6 +2,12 @@ import { useAuthService } from "@/services/auth";
 import axios from "axios";
 import { appState } from "./app-state";
 
+declare module "axios" {
+  interface AxiosRequestConfig {
+    hideMessage?: boolean;
+  }
+}
+
 const http = axios.create({
   baseURL: "/api",
   timeout: 10000,
@@ -22,7 +28,7 @@ http.interceptors.request.use(config => {
 http.interceptors.response.use(
   response => {
     appState.loading = false;
-    if (response.config.method !== "get") {
+    if (response.config.method !== "get" && !response.config.hideMessage) {
       window.$message.success("操作成功");
     }
     return response.data;