delete key

web/src/components/Layout.vue

@@ -48,8 +48,6 @@ import NavBar from "@/components/NavBar.vue";
   top: 0;
   z-index: 100;
   padding: 0 24px;
-  max-width: 1400px;
-  margin: 0 auto;
 }
 
 .header-content {
@@ -58,6 +56,8 @@ import NavBar from "@/components/NavBar.vue";
   justify-content: space-between;
   padding: 8px;
   overflow-x: auto;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .header-brand {
@@ -94,6 +94,8 @@ import NavBar from "@/components/NavBar.vue";
   flex: 1;
   overflow: auto;
   background: transparent;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .content-wrapper {

web/src/components/keys/KeyDeleteDialog.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { keysApi } from "@/api/keys";
+import { Close } from "@vicons/ionicons5";
+import { NButton, NCard, NInput, NModal, useMessage } 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("");
+const message = useMessage();
+
+// 监听弹窗显示状态
+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;
+
+    const { data } = await keysApi.deleteKeys(props.groupId, keysText.value);
+    const { deleted_count, ignored_count, total_in_group } = data || {};
+    const msg = `成功删除 ${deleted_count} 个密钥，忽略 ${ignored_count} 个密钥。当前分组共有 ${total_in_group} 个密钥。`;
+    message.info(msg, {
+      closable: true,
+      duration: 5000,
+    });
+
+    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="error" @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>

web/src/components/keys/KeyTable.vue

@@ -22,6 +22,7 @@ import {
 } from "naive-ui";
 import { ref, watch } from "vue";
 import KeyCreateDialog from "./KeyCreateDialog.vue";
+import KeyDeleteDialog from "./KeyDeleteDialog.vue";
 
 interface KeyRow extends APIKey {
   is_visible: boolean;
@@ -69,6 +70,7 @@ let restoreMsg: any = null;
 let deleteMsg: any = null;
 
 const createDialogShow = ref(false);
+const deleteDialogShow = ref(false);
 
 watch(
   () => props.selectedGroup,
@@ -276,10 +278,6 @@ function getStatusClass(status: KeyStatus): string {
   }
 }
 
-function addKey() {
-  createDialogShow.value = true;
-}
-
 async function copyAllKeys() {
   if (!props.selectedGroup) {
     return;
@@ -417,13 +415,13 @@ function changePageSize(size: number) {
     <!-- 工具栏 -->
     <div class="toolbar">
       <div class="toolbar-left">
-        <n-button type="success" size="small" @click="addKey">
+        <n-button type="success" size="small" @click="createDialogShow = true">
           <template #icon>
             <n-icon :component="AddCircleOutline" />
           </template>
           添加密钥
         </n-button>
-        <n-button type="error" size="small">
+        <n-button type="error" size="small" @click="deleteDialogShow = true">
           <template #icon>
             <n-icon :component="RemoveCircleOutline" />
           </template>
@@ -588,6 +586,14 @@ function changePageSize(size: number) {
       :group-name="getGroupDisplayName(selectedGroup!)"
       @success="loadKeys"
     />
+
+    <key-delete-dialog
+      v-if="selectedGroup?.id"
+      v-model:show="deleteDialogShow"
+      :group-id="selectedGroup.id"
+      :group-name="getGroupDisplayName(selectedGroup!)"
+      @success="loadKeys"
+    />
   </div>
 </template>