From 9ed86e5f5394dbf07c2a60894156843224d8615a Mon Sep 17 00:00:00 2001
From: kwicxy <ones_republic@foxmail.com>
Date: Fri, 30 May 2025 09:37:21 +0800
Subject: [PATCH] feat: Name trim of extension list to improve readability

---
 dashboard/src/views/ExtensionMarketplace.vue | 52 ++++++++++++++------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/dashboard/src/views/ExtensionMarketplace.vue b/dashboard/src/views/ExtensionMarketplace.vue
index 466fe3cc5..516fc35ea 100644
--- a/dashboard/src/views/ExtensionMarketplace.vue
+++ b/dashboard/src/views/ExtensionMarketplace.vue
@@ -24,7 +24,7 @@ import 'highlight.js/styles/github.css';
                         <h2>✨ 插件市场</h2>                    
                         <v-btn icon size="small" style="margin-left: 8px" variant="plain" @click="jumpToPluginMarket()">
                             <v-icon size="small">mdi-help</v-icon>
-                            <v-tooltip activator="parent" location="start" max-width="600" open-delay="400">
+                            <v-tooltip activator="parent" location="start" max-width="500" open-delay="500">
                                 <span>
                                     如无法显示，请单击此按钮跳转至插件市场，复制想安装插件对应的
                                     repo链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。<br/>
@@ -38,13 +38,12 @@ import 'highlight.js/styles/github.css';
                             <v-icon>{{ isListView ? 'mdi-view-grid' : 'mdi-view-list' }}</v-icon>
                         </v-btn>
 
-                        <v-spacer></v-spacer>
+                        <v-spacer/>
 
                         <v-text-field v-model="marketSearch" density="compact" label="Search"
                             prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details
                             single-line></v-text-field>
                     </div>
-
                 </v-card-title>
 
                 <v-card-text>
@@ -68,6 +67,13 @@ import 'highlight.js/styles/github.css';
 
                     <div v-if="isListView" class="mt-4">
                         <h2>📦 全部插件</h2>
+                        <v-switch
+                            v-model="showPluginFullName"
+                            label="显示完整名称"
+                            hide-details
+                            density="compact"
+                            style="margin-left: 12px"
+                        />
                         <v-col cols="12" md="12" style="padding: 0px;">
                             <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name"
                                 :loading="loading_" v-model:search="marketSearch" :filter-keys="filterKeys">
@@ -78,9 +84,8 @@ import 'highlight.js/styles/github.css';
                                             alt="logo">
                                         <span v-if="item?.repo"><a :href="item?.repo"
                                                 style="color: var(--v-theme-primaryText, #000); text-decoration:none">{{
-                                                    item.name }}</a></span>
-                                        <span v-else>{{ item.name }}</span>
-
+                                                    showPluginFullName ? item.name : item.trimmedName }}</a></span>
+                                        <span v-else>{{ showPluginFullName ? item.name : item.trimmedName }}</span>
                                     </div>
 
                                 </template>
@@ -107,18 +112,18 @@ import 'highlight.js/styles/github.css';
                                 </template>
 
                                 <template v-slot:item.tags="{ item }">
-                                    <span v-if="item.tags.length === 0">无</span>
-                                    <v-chip v-for="tag in item.tags" :key="tag" color="primary" size="x-small">{{ tag
-                                        }}</v-chip>
+                                    <span v-if="item.tags.length === 0">-</span>
+                                    <v-chip v-for="tag in item.tags" :key="tag" color="primary" size="x-small">
+                                      {{ tag }}</v-chip>
                                 </template>
                                 <template v-slot:item.actions="{ item }">
-                                    <v-btn v-if="!item.installed" class="text-none mr-2" size="x-small" 
-                                        variant="flat" border
-                                        @click="extension_url = item.repo; newExtension()">安装</v-btn>
+                                    <v-btn v-if="!item.installed" class="text-none mr-2" size="x-small"
+                                        variant="flat" @click="extension_url = item.repo; newExtension()">
+                                      <v-icon>mdi-download</v-icon></v-btn>
                                     <v-btn v-else class="text-none mr-2" size="x-small" variant="flat" border
-                                        disabled>已安装</v-btn>
-                                    <v-btn class="text-none mr-2" size="x-small" variant="flat" border 
-                                        @click="open(item.repo)">帮助</v-btn>
+                                        disabled><v-icon>mdi-check</v-icon></v-btn>
+                                    <v-btn class="text-none mr-2" size="x-small" variant="flat" border
+                                        @click="open(item.repo)"><v-icon>mdi-help</v-icon></v-btn>
                                 </template>
                             </v-data-table>
                         </v-col>
@@ -261,6 +266,7 @@ export default {
             loading_: false,
             upload_file: null,
             pluginMarketData: [],
+            showPluginFullName: false,
             loadingDialog: {
                 show: false,
                 title: "加载中...",
@@ -315,6 +321,7 @@ export default {
         this.loading_ = true
         this.commonStore.getPluginCollections().then((data) => {
             this.pluginMarketData = data;
+            this.trimExtensionName();
             this.checkAlreadyInstalled();
             this.checkUpdate();
             this.loading_ = false
@@ -363,11 +370,24 @@ export default {
         getExtensions() {
             axios.get('/api/plugin/get').then((res) => {
                 this.extension_data = res.data;
+                this.trimExtensionName();
                 this.checkAlreadyInstalled();
                 this.checkUpdate()
             });
         },
-
+        trimExtensionName() {
+            console.log(this.pluginMarketData);
+            this.pluginMarketData.forEach(plugin => {
+                if (plugin.name) {
+                  let name = plugin.name.trim().toLowerCase();
+                  if (name.startsWith("astrbot_plugin_")) {
+                    plugin.trimmedName = name.substring(15);
+                  } else if (name.startsWith("astrbot_") || name.startsWith("astrbot-")) {
+                    plugin.trimmedName = name.substring(8);
+                  } else plugin.trimmedName = plugin.name;
+                }
+            });
+        },
         checkUpdate() {
             // 创建在线插件的map
             const onlinePluginsMap = new Map();