group add

web/src/components/keys/GroupList.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { keysApi } from "@/api/keys";
 import type { Group } from "@/types/models";
 import { getGroupDisplayName } from "@/utils/display";
-import { NButton, NCard, NEmpty, NInput, NSpin, NTag, useMessage } from "naive-ui";
+import { Add, Search } from "@vicons/ionicons5";
+import { NButton, NCard, NEmpty, NInput, NSpin, NTag } from "naive-ui";
 import { computed, ref } from "vue";
+import GroupFormModal from "./GroupFormModal.vue";
 
 interface Props {
   groups: Group[];
@@ -23,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 const searchText = ref("");
-const message = useMessage();
+const showGroupModal = ref(false);
 
 // 过滤后的分组列表
 const filteredGroups = computed(() => {
@@ -54,29 +55,13 @@ function getChannelTagType(channelType: string) {
   }
 }
 
-// 简单的创建分组功能（演示用）
-async function createDemoGroup() {
-  try {
-    const newGroup = await keysApi.createGroup({
-      name: `demo-group-${Date.now()}`,
-      display_name: `演示分组 ${props.groups.length + 1}`,
-      description: "这是一个演示分组",
-      sort: props.groups.length + 1,
-      channel_type: "openai",
-      upstreams: [{ url: "https://api.openai.com", weight: 1 }],
-      config: {
-        test_model: "gpt-3.5-turbo",
-        param_overrides: {},
-        request_timeout: 30000,
-      },
-    });
+function openCreateGroupModal() {
+  showGroupModal.value = true;
+}
 
-    message.success(`创建分组成功: ${newGroup.display_name}`);
-    emit("refresh");
-  } catch (_error) {
-    // 错误已记录
-    message.error("创建分组失败");
-  }
+function handleGroupCreated() {
+  showGroupModal.value = false;
+  emit("refresh");
 }
 </script>
 
@@ -87,11 +72,7 @@ async function createDemoGroup() {
       <div class="search-section">
         <n-input v-model:value="searchText" placeholder="搜索分组名称..." size="small" clearable>
           <template #prefix>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+            <n-icon :component="Search" />
           </template>
         </n-input>
       </div>
@@ -131,16 +112,15 @@ async function createDemoGroup() {
 
       <!-- 添加分组按钮 -->
       <div class="add-section">
-        <n-button type="primary" size="small" block @click="createDemoGroup">
+        <n-button type="primary" size="small" block @click="openCreateGroupModal">
           <template #icon>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
+            <n-icon :component="Add" />
           </template>
           创建分组
         </n-button>
       </div>
     </n-card>
+    <group-form-modal v-model:show="showGroupModal" @success="handleGroupCreated" />
   </div>
 </template>