From 85452b64a72358faeb5f5e55a1e659907da9f135 Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Sat, 5 Jul 2025 10:47:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/keys.ts                       |  4 +--
 web/src/components/keys/GroupInfoCard.vue |  3 +-
 web/src/components/keys/GroupList.vue     |  3 +-
 web/src/utils/display.ts                  | 39 +++++++++++++++++++++++
 4 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 web/src/utils/display.ts

diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
index 0c5ecb4..830a942 100644
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -5,8 +5,8 @@ const mockGroups: Group[] = [
   {
     id: 1,
     name: "openai-main",
-    display_name: "OpenAI主组",
-    description: "OpenAI主要API组",
+    display_name: "",
+    description: "",
     sort: 1,
     channel_type: "openai",
     upstreams: [
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 021d195..83b3985 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/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"
diff --git a/web/src/components/keys/GroupList.vue b/web/src/components/keys/GroupList.vue
index 2ec529c..e79e1e6 100644
--- a/web/src/components/keys/GroupList.vue
+++ b/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 }}
diff --git a/web/src/utils/display.ts b/web/src/utils/display.ts
new file mode 100644
index 0000000..d64f014
--- /dev/null
+++ b/web/src/utils/display.ts
@@ -0,0 +1,39 @@
+import type { Group } from "@/types/models";
+
+/**
+ * Formats a string from camelCase, snake_case, or kebab-case
+ * into a more readable format with spaces and capitalized words.
+ *
+ * @param name The input string.
+ * @returns The formatted string.
+ *
+ * @example
+ * formatDisplayName("myGroupName")      // "My Group Name"
+ * formatDisplayName("my_group_name")    // "My Group Name"
+ * formatDisplayName("my-group-name")    // "My Group Name"
+ * formatDisplayName("MyGroup")          // "My Group"
+ */
+export function formatDisplayName(name: string): string {
+  if (!name) {
+    return "";
+  }
+
+  // Replace snake_case and kebab-case with spaces, and add a space before uppercase letters in camelCase.
+  const result = name.replace(/[_-]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  // Capitalize the first letter of each word.
+  return result
+    .split(" ")
+    .filter(word => word.length > 0)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+/**
+ * Gets the display name for a group, falling back to a formatted version of its name.
+ * @param group The group object.
+ * @returns The display name for the group.
+ */
+export function getGroupDisplayName(group: Group): string {
+  return group.display_name || formatDisplayName(group.name);
+}