feat: 格式化分组名称显示

web/src/components/keys/GroupInfoCard.vue

@@ -14,6 +14,7 @@ import {
   NTag,
   useMessage,
 } from "naive-ui";
+import { getGroupDisplayName } from "@/utils/display";
 import { onMounted, ref, watch } from "vue";
 
 interface Props {
@@ -94,7 +95,7 @@ function copyUrl(url: string) {
         <div class="card-header">
           <div class="header-left">
             <h3 class="group-title">
-              {{ group?.display_name || group?.name || "请选择分组" }}
+              {{ group ? getGroupDisplayName(group) : "请选择分组" }}
               <code
                 v-if="group"
                 class="group-url"

web/src/components/keys/GroupList.vue

@@ -1,6 +1,7 @@
 <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 { computed, ref } from "vue";
 
@@ -115,7 +116,7 @@ async function createDemoGroup() {
                 <span v-else>🔧</span>
               </div>
               <div class="group-content">
-                <div class="group-name">{{ group.display_name || group.name }}</div>
+                <div class="group-name">{{ getGroupDisplayName(group) }}</div>
                 <div class="group-meta">
                   <n-tag size="tiny" :type="getChannelTagType(group.channel_type)">
                     {{ group.channel_type }}