✨ feat: webui supports to search plugin via name

dashboard/src/components/shared/ExtensionCard.vue

@@ -4,6 +4,7 @@ const props = defineProps({
   link: String,
   logo: String,
   has_update: Boolean,
+  activated: Boolean,
 });
 
 const open = (link: string | undefined) => {
@@ -16,8 +17,9 @@ const open = (link: string | undefined) => {
     <v-card-item style="padding: 10px 12px">
       <div class="d-sm-flex align-center justify-space-between">
         <img v-if="logo" :src="logo" alt="logo" style="width: 40px; height: 40px; margin-right: 8px;">
-        <v-card-title style="font-size: 16px;">{{ props.title }}</v-card-title>
+        <v-card-title style="font-size: 15px; max-width: 70%">{{ props.title }}</v-card-title>
         <v-spacer></v-spacer>
+        <v-icon color="success" v-if="!activated">mdi-cancel</v-icon>
         <v-icon color="success" v-if="has_update">mdi-arrow-up-bold</v-icon>
         <v-btn size="small" text="Read" variant="flat" border  @click="open(props.link)">帮助</v-btn>
       </div>

dashboard/src/views/ExtensionPage.vue

@@ -10,8 +10,8 @@ import { max } from 'date-fns';
 
 <template>
   <v-row>
-    <v-alert style="margin: 16px" text="1. 如果因为网络问题安装失败，点击设置页选择 GitHub 加速地址。或前往仓库下载压缩包然后本地上传。" title="💡提示"
-      type="info" color="primary" variant="tonal">
+    <v-alert style="margin: 16px" text="1. 如果因为网络问题安装失败，点击设置页选择 GitHub 加速地址。或前往仓库下载压缩包然后本地上传。" title="💡提示" type="info"
+      color="primary" variant="tonal">
     </v-alert>
     <v-col cols="12" md="12">
       <div style="background-color: white; width: 100%; padding: 16px; border-radius: 10px;">
@@ -44,14 +44,14 @@ import { max } from 'date-fns';
           </v-dialog>
         </div>
       </div>
-    </v-col>  
+    </v-col>
     <v-col cols="12" md="6" lg="3" v-for="extension in extension_data.data">
       <ExtensionCard :key="extension.name" :title="extension.name" :link="extension.repo" :logo="extension?.logo"
-        :has_update="extension.has_update" style="margin-bottom: 4px;">
+        :has_update="extension.has_update" style="margin-bottom: 4px;" :activated="extension.activated">
         <div style="min-height: 140px; max-height: 140px; overflow: auto;">
           <div>
             <span style="font-weight: bold  ;">By @{{ extension.author }}</span>
-            <span> | 插件有 {{ extension.handlers.length }} 个行为</span>
+            <span> | {{ extension.handlers.length }} 个行为</span>
           </div>
           <span> 当前: <v-chip size="small" color="primary">{{ extension.version }}</v-chip>
             <span v-if="extension.online_version">
@@ -82,51 +82,88 @@ import { max } from 'date-fns';
         </div>
       </ExtensionCard>
     </v-col>
-    <v-col cols="12" md="12">
-      <div style="background-color: white; width: 100%; padding: 16px; border-radius: 10px;">
-        <div style="display: flex; align-items: center;">
-          <h3>🧩 插件市场</h3>
-          <small style="margin-left: 16px;">如无法显示，请打开 <a
-              href="https://soulter.github.io/AstrBot_Plugins_Collection/plugins.json">链接</a> 复制想安装插件对应的 `repo`
-            链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。</small>
-          <v-btn icon @click="isListView = !isListView" size="small" style="margin-left: auto;" variant="plain">
-            <v-icon>{{ isListView ? 'mdi-view-grid' : 'mdi-view-list' }}</v-icon>
-          </v-btn>
-        </div>
-      </div>
-    </v-col>
 
     <v-col cols="12" md="12" v-if="announcement">
       <v-banner color="success" lines="one" :text="announcement" :stacked="false">
       </v-banner>
     </v-col>
 
-    <template v-if="isListView">
-      <v-col cols="12" md="12">
-        <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name">
-          <template v-slot:item.actions="{ item }">
-            <v-btn v-if="!item.installed" class="text-none mr-2" size="small" text="Read" variant="flat" border
-              @click="extension_url = item.repo; newExtension()">安装</v-btn>
-            <v-btn v-else class="text-none mr-2" size="small" text="Read" variant="flat" border disabled>已安装</v-btn>
-          </template>
-        </v-data-table>
-      </v-col>
-    </template>
-    <template v-else>
-      <v-col cols="12" md="6" lg="3" v-for="plugin in pluginMarketData">
-        <ExtensionCard :key="plugin.name" :title="plugin.name" :link="plugin.repo" style="margin-bottom: 4px;">
-          <div style="min-height: 130px; max-height: 130px; overflow: hidden;">
-            <p style="font-weight: bold;">By @{{ plugin.author }}</p>
-            {{ plugin.desc }}
-          </div>
-          <div class="d-flex align-center gap-2">
-            <v-btn v-if="!plugin.installed" class="text-none mr-2" size="small" text="Read" variant="flat" border
-              @click="extension_url = plugin.repo; newExtension()">安装</v-btn>
-            <v-btn v-else class="text-none mr-2" size="small" text="Read" variant="flat" border disabled>已安装</v-btn>
-          </div>
-        </ExtensionCard>
-      </v-col>
-    </template>
+    <v-col cols="12" md="12">
+      <v-card>
+        <v-card-title class="d-flex align-center pe-2">
+
+          🧩 插件市场
+
+          <v-btn icon size="small" style="margin-left: 8px" variant="plain">
+            <v-icon size="small">mdi-help</v-icon>
+            <v-tooltip activator="parent" location="start">
+              如无法显示，请打开 <a href="https://soulter.github.io/AstrBot_Plugins_Collection/plugins.json">链接</a> 复制想安装插件对应的
+              `repo`
+              链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。
+            </v-tooltip>
+          </v-btn>
+
+          <v-btn icon @click="isListView = !isListView" size="small" style="margin-left: auto;" variant="plain">
+            <v-icon>{{ isListView ? 'mdi-view-grid' : 'mdi-view-list' }}</v-icon>
+          </v-btn>
+
+          <v-spacer></v-spacer>
+
+          <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify"
+            variant="solo-filled" flat hide-details single-line></v-text-field>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <template v-if="isListView">
+          <v-col cols="12" md="12">
+            <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name"
+              v-model:search="marketSearch" :filter-keys="['name']">
+              <template v-slot:item.name="{ item }">
+                <span v-if="item?.repo"><a :href="item?.repo" style="color: #000; text-decoration:none">{{ item.name }}</a></span>
+                <span v-else>{{ item.name}}</span>
+              </template>
+              <template v-slot:item.author="{ item }">
+                <span v-if="item?.social_link"><a :href="item?.social_link">{{ item.author}}</a></span>
+                <span v-else>{{ item.author}}</span>
+              </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="small">{{ tag }}</v-chip>
+              </template>
+              <template v-slot:item.actions="{ item }">
+                <v-btn v-if="!item.installed" class="text-none mr-2" size="small" text="Read" variant="flat" border
+                  @click="extension_url = item.repo; newExtension()">安装</v-btn>
+                <v-btn v-else class="text-none mr-2" size="small" text="Read" variant="flat" border disabled>已安装</v-btn>
+              </template>
+            </v-data-table>
+          </v-col>
+        </template>
+        <template v-else>
+          <v-row style="margin: 8px;">
+            <v-col cols="12" md="6" lg="3" v-for="plugin in pluginMarketData">
+              <ExtensionCard :key="plugin.name" :title="plugin.name" :link="plugin.repo" style="margin-bottom: 4px;">
+                <div style="min-height: 130px; max-height: 130px; overflow: hidden;">
+                  <p style="font-weight: bold;">By @{{ plugin.author }}</p>
+                  {{ plugin.desc }}
+                </div>
+
+                <div class="d-flex align-center gap-2">
+                  <v-btn v-if="!plugin.installed" class="text-none mr-2" size="small" text="Read" variant="flat"
+                    border @click="extension_url = plugin.repo; newExtension()">安装</v-btn>
+                  <v-btn v-else class="text-none mr-2" size="small" text="Read" variant="flat" border
+                    disabled>已安装</v-btn>
+                </div>
+              </ExtensionCard>
+            </v-col>
+          </v-row>
+
+        </template>
+
+      </v-card>
+
+    </v-col>
+
 
     <v-col style="margin-bottom: 16px;" cols="12" md="12">
       <small><a href="https://astrbot.app/dev/plugin.html">插件开发文档</a></small> |
@@ -314,7 +351,7 @@ export default {
         "config": {}
       },
       upload_file: null,
-      pluginMarketData: {},
+      pluginMarketData: [],
       loadingDialog: {
         show: false,
         title: "加载中...",
@@ -331,13 +368,15 @@ export default {
         { title: '具体类型', key: 'type' },
         { title: '触发方式', key: 'cmd' },
       ],
-      isListView: false,
+      isListView: true,
       pluginMarketHeaders: [
-        { title: '名称', value: 'name' },
-        { title: '描述', value: 'desc' },
-        { title: '作者', value: 'author' },
-        { title: '操作', value: 'actions', sortable: false }
+        { title: '名称', key: 'name', maxWidth: '150px' },
+        { title: '描述', key: 'desc', maxWidth: '250px' },
+        { title: '作者', key: 'author', maxWidth: '60px' },
+        { title: '标签', key: 'tags', maxWidth: '60px' },
+        { title: '操作', key: 'actions', sortable: false }
       ],
+      marketSearch: "",
       alreadyCheckUpdate: false
     }
   },
@@ -562,6 +601,8 @@ export default {
             "repo": res.data.data[key].repo,
             "installed": false,
             "version": res.data.data[key]?.version ? res.data.data[key].version : "未知",
+            "social_link": res.data.data[key]?.social_link,
+            "tags": res.data.data[key]?.tags ? res.data.data[key].tags : []
           })
         }
         this.pluginMarketData = data;