From 7b48d89784300d0fc87499d62cc28bb487e241e3 Mon Sep 17 00:00:00 2001
From: Rhonin <rhonin@STARFORGE.localdomain>
Date: Sat, 4 Jul 2026 04:42:39 +0800
Subject: [PATCH] feat(extension): add list view and page size options to
 plugin market

# Conflicts:
#	dashboard/src/views/extension/useExtensionPage.js
---
 .../locales/en-US/features/extension.json     |   1 +
 .../locales/zh-CN/features/extension.json     |   1 +
 .../src/views/extension/MarketPluginsTab.vue  | 308 +++++++++++++++++-
 .../src/views/extension/useExtensionPage.js   |  76 ++++-
 4 files changed, 374 insertions(+), 12 deletions(-)

diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 75313fdba9..a01cc7c3ce 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -172,6 +172,7 @@
     "sourceResolved": "Source resolved successfully",
     "installPlugin": "Install Plugin",
     "randomPlugins": "🎲 Random Plugins",
+    "itemsPerPage": "Items per page",
     "sourceSafetyWarning": "Even with the default source, plugin stability and security cannot be fully guaranteed. Please verify carefully before use."
   },
   "sort": {
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index d8ba9869e6..3fb5d250cb 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -172,6 +172,7 @@
     "sourceResolved": "插件源可用",
     "installPlugin": "安装插件",
     "randomPlugins": "🎲 随机插件",
+    "itemsPerPage": "每页显示",
     "sourceSafetyWarning": "即使是默认插件源，我们也不能完全保证插件的稳定性和安全性，使用前请谨慎核查。"
   },
   "sort": {
diff --git a/dashboard/src/views/extension/MarketPluginsTab.vue b/dashboard/src/views/extension/MarketPluginsTab.vue
index 73767a2c8f..d103d71c57 100644
--- a/dashboard/src/views/extension/MarketPluginsTab.vue
+++ b/dashboard/src/views/extension/MarketPluginsTab.vue
@@ -1,6 +1,7 @@
 <script setup>
 import MarketPluginCard from "@/components/extension/MarketPluginCard.vue";
 import PluginSortControl from "@/components/extension/PluginSortControl.vue";
+import PluginPlatformChip from "@/components/shared/PluginPlatformChip.vue";
 import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 import { computed } from "vue";
 import { normalizeTextInput } from "@/utils/inputValue";
@@ -72,6 +73,7 @@ const {
   upload_file,
   uploadTab,
   showPluginFullName,
+  marketIsListView,
   marketSearch,
   debouncedMarketSearch,
   refreshingMarket,
@@ -83,6 +85,7 @@ const {
   normalizeStr,
   toPinyinText,
   toInitials,
+  marketPluginHeaders,
   pluginHeaders,
   filteredExtensions,
   filteredPlugins,
@@ -92,6 +95,8 @@ const {
   randomPlugins,
   shufflePlugins,
   refreshRandomPlugins,
+  marketItemsPerPage,
+  marketItemsPerPageOptions,
   displayItemsPerPage,
   totalPages,
   paginatedPlugins,
@@ -311,10 +316,206 @@ const openMarketPluginDetail = (plugin) => {
             :show-order="sortBy !== 'default'"
             @update:order="sortOrder = $event"
           />
+
+          <v-btn-toggle
+            v-model="marketIsListView"
+            mandatory
+            density="compact"
+            color="primary"
+            class="view-mode-toggle"
+          >
+            <v-btn
+              :value="false"
+              icon="mdi-view-grid"
+              :title="tm('views.card')"
+            ></v-btn>
+            <v-btn
+              :value="true"
+              icon="mdi-view-list"
+              :title="tm('views.list')"
+            ></v-btn>
+          </v-btn-toggle>
         </div>
       </div>
 
-      <v-row style="min-height: 26rem" dense>
+      <div v-if="marketIsListView">
+        <v-card class="rounded-lg overflow-hidden elevation-0">
+          <v-data-table
+            class="plugin-list-table"
+            :headers="marketPluginHeaders"
+            :items="paginatedPlugins"
+            item-key="name"
+            hover
+            hide-default-footer
+          >
+            <template v-slot:item.name="{ item }">
+              <div class="d-flex align-center py-2">
+                <div class="mr-3" style="flex-shrink: 0">
+                  <img
+                    :src="item.logo || defaultPluginIcon"
+                    :alt="item.name"
+                    style="
+                      height: 40px;
+                      width: 40px;
+                      border-radius: 8px;
+                      object-fit: cover;
+                    "
+                  />
+                </div>
+                <div style="min-width: 0">
+                  <div class="d-flex align-center flex-wrap" style="gap: 6px">
+                    <button
+                      type="button"
+                      class="market-list-title"
+                      @click="openMarketPluginDetail(item)"
+                    >
+                      {{
+                        item.display_name && item.display_name.length
+                          ? item.display_name
+                          : showPluginFullName
+                          ? item.name
+                          : item.trimmedName
+                      }}
+                    </button>
+                    <v-chip
+                      v-if="item.pinned"
+                      color="warning"
+                      size="x-small"
+                      label
+                    >
+                      {{ tm("market.recommended") }}
+                    </v-chip>
+                    <v-chip
+                      v-if="item.installed"
+                      color="success"
+                      size="x-small"
+                      label
+                    >
+                      {{ tm("status.installed") }}
+                    </v-chip>
+                  </div>
+                  <div
+                    v-if="item.display_name && item.display_name.length"
+                    class="text-caption text-medium-emphasis mt-1"
+                  >
+                    {{ item.name }}
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <template v-slot:item.desc="{ item }">
+              <div class="py-2">
+                <div class="text-body-2 text-medium-emphasis market-list-desc">
+                  {{ item.desc }}
+                </div>
+
+                <div
+                  class="d-flex align-center flex-wrap mt-2"
+                  style="gap: 6px"
+                >
+                  <PluginPlatformChip
+                    v-if="item.support_platforms?.length"
+                    :platforms="item.support_platforms"
+                    size="x-small"
+                    :chip-style="{ height: '20px' }"
+                  />
+
+                  <v-chip
+                    v-if="item.astrbot_version"
+                    size="x-small"
+                    color="secondary"
+                    variant="outlined"
+                    style="height: 20px"
+                  >
+                    {{ tm("card.status.astrbotVersion") }}:
+                    {{ item.astrbot_version }}
+                  </v-chip>
+
+                  <v-chip
+                    v-if="item.stars !== undefined"
+                    size="x-small"
+                    color="warning"
+                    variant="outlined"
+                    style="height: 20px"
+                  >
+                    Star {{ item.stars }}
+                  </v-chip>
+
+                  <v-chip
+                    v-if="item.updated_at"
+                    size="x-small"
+                    variant="outlined"
+                    style="height: 20px"
+                  >
+                    {{ new Date(item.updated_at).toLocaleDateString() }}
+                  </v-chip>
+                </div>
+              </div>
+            </template>
+
+            <template v-slot:item.version="{ item }">
+              <div class="text-body-2">{{ item.version }}</div>
+            </template>
+
+            <template v-slot:item.author="{ item }">
+              <div class="text-body-2">{{ item.author }}</div>
+            </template>
+
+            <template v-slot:item.actions="{ item }">
+              <div class="market-list-actions py-1">
+                <v-tooltip
+                  v-if="item.repo"
+                  location="top"
+                  :text="tm('buttons.viewRepo')"
+                >
+                  <template v-slot:activator="{ props }">
+                    <v-btn
+                      v-bind="props"
+                      size="small"
+                      variant="tonal"
+                      color="secondary"
+                      icon="mdi-github"
+                      :href="item.repo"
+                      target="_blank"
+                    ></v-btn>
+                  </template>
+                </v-tooltip>
+
+                <v-btn
+                  v-if="!item.installed"
+                  size="small"
+                  color="primary"
+                  variant="flat"
+                  @click="handleInstallPlugin(item)"
+                >
+                  {{ tm("buttons.install") }}
+                </v-btn>
+
+                <v-chip v-else color="success" size="x-small" label>
+                  {{ tm("status.installed") }}
+                </v-chip>
+              </div>
+            </template>
+
+            <template v-slot:no-data>
+              <div class="text-center pa-8">
+                <v-icon size="64" color="info" class="mb-4"
+                  >mdi-puzzle-outline</v-icon
+                >
+                <div class="text-h5 mb-2">
+                  {{ tm("empty.noPlugins") }}
+                </div>
+                <div class="text-body-1 mb-4">
+                  {{ tm("empty.noPluginsDesc") }}
+                </div>
+              </div>
+            </template>
+          </v-data-table>
+        </v-card>
+      </div>
+
+      <v-row v-else style="min-height: 26rem" dense>
         <v-col
           v-for="plugin in paginatedPlugins"
           :key="plugin.name"
@@ -333,13 +534,32 @@ const openMarketPluginDetail = (plugin) => {
         </v-col>
       </v-row>
 
-      <div class="d-flex justify-center mt-4" v-if="totalPages > 1">
-        <v-pagination
-          v-model="currentPage"
-          :length="totalPages"
-          :total-visible="7"
-          size="small"
-        ></v-pagination>
+      <div v-if="sortedPlugins.length > 0" class="market-pagination-footer">
+        <div class="market-pagination-footer__spacer"></div>
+
+        <div class="market-pagination-footer__pagination">
+          <v-pagination
+            v-if="totalPages > 1"
+            v-model="currentPage"
+            :length="totalPages"
+            :total-visible="7"
+            size="small"
+          ></v-pagination>
+        </div>
+
+        <div class="market-pagination-footer__page-size">
+          <span class="text-caption text-medium-emphasis">
+            {{ tm("market.itemsPerPage") }}
+          </span>
+          <v-select
+            v-model="marketItemsPerPage"
+            :items="marketItemsPerPageOptions"
+            density="compact"
+            variant="outlined"
+            hide-details
+            class="market-pagination-footer__select"
+          ></v-select>
+        </div>
       </div>
 
       <v-expand-transition>
@@ -398,4 +618,76 @@ const openMarketPluginDetail = (plugin) => {
 .market-filter-control :deep(.v-field__prepend-inner) {
   font-size: 0.875rem;
 }
+
+.market-list-title {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.market-list-title:hover {
+  color: rgb(var(--v-theme-primary));
+}
+
+.market-list-desc {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.market-list-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.market-pagination-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.market-pagination-footer__pagination {
+  display: flex;
+  justify-content: center;
+}
+
+.market-pagination-footer__page-size {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+
+.market-pagination-footer__select {
+  width: 110px;
+}
+
+@media (max-width: 960px) {
+  .market-pagination-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .market-pagination-footer__spacer {
+    display: none;
+  }
+
+  .market-pagination-footer__pagination,
+  .market-pagination-footer__page-size {
+    justify-content: center;
+  }
+}
 </style>
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index a358cebb9b..34a4a34edc 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -201,6 +201,24 @@ export const useExtensionPage = () => {
   const upload_file = ref(null);
   const uploadTab = ref("file");
   const showPluginFullName = ref(false);
+  const marketItemsPerPageOptions = [9, 25, 50, 100];
+  const getInitialMarketListViewMode = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return localStorage.getItem("pluginMarketListViewMode") === "true";
+    }
+    return false;
+  };
+  const getInitialMarketItemsPerPage = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      const rawValue = Number(localStorage.getItem("pluginMarketItemsPerPage"));
+      if (marketItemsPerPageOptions.includes(rawValue)) {
+        return rawValue;
+      }
+    }
+    return 9;
+  };
+  const marketIsListView = ref(getInitialMarketListViewMode());
+  const marketItemsPerPage = ref(getInitialMarketItemsPerPage());
   const marketSearch = ref("");
   const debouncedMarketSearch = ref("");
   const refreshingMarket = ref(false);
@@ -303,6 +321,39 @@ export const useExtensionPage = () => {
     return items;
   });
 
+  const marketPluginHeaders = computed(() => [
+    {
+      title: tm("table.headers.name"),
+      key: "name",
+      sortable: false,
+      width: "28%",
+    },
+    {
+      title: tm("table.headers.description"),
+      key: "desc",
+      sortable: false,
+      width: "40%",
+    },
+    {
+      title: tm("table.headers.version"),
+      key: "version",
+      sortable: false,
+      width: "12%",
+    },
+    {
+      title: tm("table.headers.author"),
+      key: "author",
+      sortable: false,
+      width: "10%",
+    },
+    {
+      title: tm("table.headers.actions"),
+      key: "actions",
+      sortable: false,
+      width: "10%",
+    },
+  ]);
+
   // 过滤要显示的插件
   const filteredExtensions = computed(() => {
     const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
@@ -452,15 +503,15 @@ export const useExtensionPage = () => {
   };
 
   // 分页计算属性
-  const displayItemsPerPage = 9; // 固定每页显示9个卡片（3行）
+  const displayItemsPerPage = computed(() => marketItemsPerPage.value);
 
   const totalPages = computed(() => {
-    return Math.ceil(sortedPlugins.value.length / displayItemsPerPage);
+    return Math.ceil(sortedPlugins.value.length / displayItemsPerPage.value);
   });
 
   const paginatedPlugins = computed(() => {
-    const start = (currentPage.value - 1) * displayItemsPerPage;
-    const end = start + displayItemsPerPage;
+    const start = (currentPage.value - 1) * displayItemsPerPage.value;
+    const end = start + displayItemsPerPage.value;
     return sortedPlugins.value.slice(start, end);
   });
 
@@ -2276,6 +2327,19 @@ export const useExtensionPage = () => {
     }, 300); // 300ms 防抖延迟
   });
 
+  watch(marketIsListView, (newVal) => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("pluginMarketListViewMode", String(newVal));
+    }
+  });
+
+  watch(marketItemsPerPage, (newVal) => {
+    currentPage.value = 1;
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("pluginMarketItemsPerPage", String(newVal));
+    }
+  });
+
   watch(
     [() => dialog.value, () => extension_url.value, () => uploadTab.value],
     async ([dialogOpen, _, currentUploadTab]) => {
@@ -2411,6 +2475,7 @@ export const useExtensionPage = () => {
     upload_file,
     uploadTab,
     showPluginFullName,
+    marketIsListView,
     marketSearch,
     debouncedMarketSearch,
     refreshingMarket,
@@ -2420,6 +2485,7 @@ export const useExtensionPage = () => {
     normalizeStr,
     toPinyinText,
     toInitials,
+    marketPluginHeaders,
     filteredExtensions,
     filteredPlugins,
     filteredMarketPlugins,
@@ -2428,6 +2494,8 @@ export const useExtensionPage = () => {
     randomPlugins,
     shufflePlugins,
     refreshRandomPlugins,
+    marketItemsPerPage,
+    marketItemsPerPageOptions,
     displayItemsPerPage,
     totalPages,
     paginatedPlugins,