feat(extension): add category filtering for market plugins and enhance UI components (#6762)

Author: Soulter

dashboard/src/components/extension/MarketPluginCard.vue

@@ -41,80 +41,42 @@ const handleInstall = (plugin) => {
   <v-card
     class="rounded-lg d-flex flex-column plugin-card"
     elevation="0"
-    style="height: 13rem; position: relative"
   >
-    <v-chip
-      v-if="plugin?.pinned"
-      color="warning"
-      size="x-small"
-      label
-      style="
-        position: absolute;
-        right: 8px;
-        top: 8px;
-        z-index: 10;
-        height: 20px;
-        font-weight: bold;
-      "
-    >
-      {{ tm("market.recommended") }}
-    </v-chip>
 
     <v-card-text
-      style="
-        padding: 12px;
-        padding-bottom: 8px;
-        display: flex;
-        gap: 12px;
-        width: 100%;
-        flex: 1;
-        overflow: hidden;
-      "
+      class="plugin-card-content"
     >
-      <div style="flex-shrink: 0">
+      <div class="plugin-cover">
         <img
           :src="plugin?.logo || defaultPluginIcon"
           :alt="plugin.name"
-          style="
-            height: 75px;
-            width: 75px;
-            border-radius: 8px;
-            object-fit: cover;
-          "
+          class="plugin-cover__image"
         />
       </div>
 
-      <div
-        style="
-          flex: 1;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
-        "
-      >
-        <div
-          class="font-weight-bold"
-          style="
-            margin-bottom: 4px;
-            line-height: 1.3;
-            font-size: 1.2rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          "
-        >
-          <span style="overflow: hidden; text-overflow: ellipsis">
+      <div class="plugin-info">
+        <div class="d-flex align-center plugin-title-row">
+          <div class="font-weight-bold plugin-title">
             {{
               plugin.display_name?.length
                 ? plugin.display_name
                 : showPluginFullName
                 ? plugin.name
                 : plugin.trimmedName
             }}
-          </span>
+          </div>
+          <v-chip
+            v-if="plugin?.pinned"
+            color="warning"
+            size="x-small"
+            label
+            class="market-recommended-chip"
+          >
+            {{ tm("market.recommended") }}
+          </v-chip>
         </div>
 
-        <div class="d-flex align-center" style="gap: 4px; margin-bottom: 6px">
+        <div class="d-flex align-center plugin-meta">
           <v-icon
             icon="mdi-account"
             size="x-small"
@@ -159,6 +121,18 @@ const handleInstall = (plugin) => {
             ></v-icon>
             <span>{{ plugin.version }}</span>
           </div>
+          <div
+            v-if="plugin.stars !== undefined"
+            class="d-flex align-center text-subtitle-2 ml-2"
+            style="color: rgba(var(--v-theme-on-surface), 0.7)"
+          >
+            <v-icon
+              icon="mdi-star"
+              size="x-small"
+              style="margin-right: 2px"
+            ></v-icon>
+            <span>{{ plugin.stars }}</span>
+          </div>
         </div>
 
         <div class="text-caption plugin-description">
@@ -167,8 +141,7 @@ const handleInstall = (plugin) => {
 
         <div
           v-if="plugin.astrbot_version || platformDisplayList.length"
-          class="d-flex align-center flex-wrap"
-          style="gap: 4px; margin-top: 4px; margin-bottom: 4px"
+          class="plugin-badges"
         >
           <v-chip
             v-if="plugin.astrbot_version"
@@ -186,32 +159,7 @@ const handleInstall = (plugin) => {
           />
         </div>
 
-        <div class="d-flex align-center" style="gap: 8px; margin-top: auto">
-          <div
-            v-if="plugin.stars !== undefined"
-            class="d-flex align-center text-subtitle-2"
-            style="color: rgba(var(--v-theme-on-surface), 0.7)"
-          >
-            <v-icon
-              icon="mdi-star"
-              size="x-small"
-              style="margin-right: 2px"
-            ></v-icon>
-            <span>{{ plugin.stars }}</span>
-          </div>
-          <div
-            v-if="plugin.updated_at"
-            class="d-flex align-center text-subtitle-2"
-            style="color: rgba(var(--v-theme-on-surface), 0.7)"
-          >
-            <v-icon
-              icon="mdi-clock-outline"
-              size="x-small"
-              style="margin-right: 2px"
-            ></v-icon>
-            <span>{{ new Date(plugin.updated_at).toLocaleString() }}</span>
-          </div>
-        </div>
+        <div class="plugin-stats"></div>
       </div>
     </v-card-text>
 
@@ -274,24 +222,112 @@ const handleInstall = (plugin) => {
       >
         {{ tm("buttons.install") }}
       </v-btn>
-      <v-chip v-else color="success" size="x-small" label style="height: 20px">
+      <v-btn
+        v-else
+        color="success"
+        size="small"
+        variant="flat"
+        disabled
+        class="market-action-btn"
+        style="height: 32px"
+      >
         ✓ {{ tm("status.installed") }}
-      </v-chip>
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
 
 <style scoped>
+.plugin-card-content {
+  padding: 12px;
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.plugin-cover {
+  flex-shrink: 0;
+  width: 76px;
+  height: 76px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: transparent;
+}
+
+.plugin-cover__image {
+  width: 76px;
+  height: 76px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.plugin-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.plugin-title-row {
+  margin-bottom: 4px;
+  gap: 8px;
+}
+
+.market-recommended-chip {
+  flex-shrink: 0;
+  font-weight: bold;
+  height: 20px;
+}
+
+.plugin-title {
+  line-height: 1.3;
+  font-size: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.plugin-meta {
+  gap: 4px;
+  margin-bottom: 6px;
+  flex-wrap: nowrap;
+}
+
 .plugin-description {
   color: rgba(var(--v-theme-on-surface), 0.6);
   line-height: 1.3;
   margin-bottom: 6px;
   flex: 1;
-  overflow-y: hidden;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  min-height: calc(1.3em * 3);
+  max-height: calc(1.3em * 3);
+}
+
+.plugin-badges {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
-.plugin-card:hover .plugin-description {
-  overflow-y: auto;
+.plugin-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
 }
 
 .plugin-description::-webkit-scrollbar {

dashboard/src/components/extension/PluginSortControl.vue

@@ -85,6 +85,7 @@ const toggleOrder = () => {
 
 .plugin-sort-control__select {
   min-width: 180px;
+  width: 190px;
   max-width: 220px;
 }
 

dashboard/src/i18n/locales/en-US/features/extension.json

@@ -96,6 +96,16 @@
   "market": {
     "recommended": "🥳 Recommended",
     "allPlugins": "📦 All Extensions",
+    "category": "Category",
+    "categories": {
+      "all": "All",
+      "ai_tools": "AI Tools",
+      "entertainment": "Entertainment",
+      "productivity": "Productivity",
+      "integrations": "Integrations",
+      "utilities": "Utilities",
+      "other": "Other"
+    },
     "showFullName": "Full Name",
     "devDocs": "Extension Development Docs",
     "submitRepo": "Submit Extension Repository",

dashboard/src/i18n/locales/ru-RU/features/extension.json

@@ -96,6 +96,15 @@
     "market": {
         "recommended": "🥳 Рекомендуем",
         "allPlugins": "📦 Все плагины",
+        "categories": {
+            "all": "Все",
+            "ai_tools": "AI Tools",
+            "entertainment": "Развлечения",
+            "productivity": "Продуктивность",
+            "integrations": "Интеграции",
+            "utilities": "Утилиты",
+            "other": "Другое"
+        },
         "showFullName": "Полное имя",
         "devDocs": "Документация для разработчиков",
         "submitRepo": "Добавить репозиторий",
@@ -355,4 +364,4 @@
     "pluginChangelog": {
         "menuTitle": "Журнал изменений"
     }
-}
+}

dashboard/src/i18n/locales/zh-CN/features/extension.json

@@ -96,6 +96,16 @@
   "market": {
     "recommended": "🥳 推荐",
     "allPlugins": "📦 全部插件",
+    "category": "分类",
+    "categories": {
+      "all": "全部",
+      "ai_tools": "AI 增强",
+      "entertainment": "娱乐",
+      "productivity": "效率",
+      "integrations": "外部集成",
+      "utilities": "生活实用",
+      "other": "其他"
+    },
     "showFullName": "完整名称",
     "devDocs": "插件开发文档",
     "submitRepo": "提交插件仓库",

dashboard/src/stores/common.js

@@ -178,6 +178,7 @@ export const useCommonStore = defineStore({
                 "updated_at": pluginData?.updated_at ? pluginData.updated_at : "",
                 "display_name": pluginData?.display_name ? pluginData.display_name : "",
                 "astrbot_version": pluginData?.astrbot_version ? pluginData.astrbot_version : "",
+                "category": pluginData?.category ? pluginData.category : "",
                 "support_platforms": Array.isArray(pluginData?.support_platforms)
                   ? pluginData.support_platforms
                   : Array.isArray(pluginData?.support_platform)

dashboard/src/views/ExtensionPage.vue

@@ -218,15 +218,6 @@ const {
           <!-- 插件市场标签页内容 -->
           <MarketPluginsTab :state="pageState" />
 
-          <v-row v-if="loading_">
-            <v-col cols="12" class="d-flex justify-center">
-              <v-progress-circular
-                indeterminate
-                color="primary"
-                size="48"
-              ></v-progress-circular>
-            </v-col>
-          </v-row>
         </v-card-text>
       </v-card>
     </v-col>