From 1b7efbc6077e5a2268deae6b30aff269688bf05b Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Thu, 6 Feb 2025 15:18:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=97=E8=A1=A8=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=8F=92=E4=BB=B6=E5=B8=82=E5=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/views/ExtensionPage.vue | 55 +++++++++++++++++++--------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 05b01aa5f..2550fcf92 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -47,32 +47,50 @@ import { max } from 'date-fns';
       </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>
-        </div>
-
+    <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>
-    </v-col>
+    </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 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;">
-        <p style="min-height: 130px; max-height: 130px; overflow: hidden;">{{ plugin.desc }}</p>
+        <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 style="margin-bottom: 16px;" cols="12" md="12">
       <small><a href="https://astrbot.app/dev/plugin.html">插件开发文档</a></small> |
@@ -275,7 +293,14 @@ export default {
         { title: '描述', key: 'desc', maxWidth: '250px' },
         { title: '具体类型', key: 'type' },
         { title: '触发方式', key: 'cmd' },
-      ]
+      ],
+      isListView: false,
+      pluginMarketHeaders: [
+        { title: '名称', value: 'name' },
+        { title: '描述', value: 'desc' },
+        { title: '作者', value: 'author' },
+        { title: '操作', value: 'actions', sortable: false }
+      ],
     }
   },
   mounted() {