feat(extension): add filtering and sorting for installed plugins in WebUI (AstrBotDevs#5923)

* feat(extension): add PluginSortControl reusable component for sorting

* i18n: add i18n keys for plugin sorting and filtering features

* feat(extension): add sorting and status filtering for installed plugins

Backend changes (plugin.py):
- Add _resolve_plugin_dir method to resolve plugin directory path
- Add _get_plugin_installed_at method to get installation time from file mtime
- Add installed_at field to plugin API response

Frontend changes (InstalledPluginsTab.vue):
- Import PluginSortControl component
- Add status filter toggle (all/enabled/disabled) using v-btn-toggle
- Integrate PluginSortControl for sorting options
- Add toolbar layout with actions and controls sections

Frontend changes (MarketPluginsTab.vue):
- Import PluginSortControl component
- Replace v-select + v-btn combination with unified PluginSortControl

Frontend changes (useExtensionPage.js):
- Add installedStatusFilter, installedSortBy, installedSortOrder refs
- Add installedSortItems and installedSortUsesOrder computed properties
- Add sortInstalledPlugins function with multi-criteria support
- Support sorting by install time, name, author, and update status
- Add status filtering in filteredPlugins computed property
- Disable default table sorting by setting sortable: false

* test: add tests for installed_at field in plugin API

- Assert all plugins have installed_at field in get_plugins response
- Assert installed_at is not null after plugin installation

* fix(extension): add explicit fallbacks for installed plugin sort comparisons

* i18n(extension): rename install time label to last modified

* fix(extension): cache installed_at parsing and validate timestamp format in tests

* test(dashboard): strengthen installed_at coverage for plugin API

Author: ChuwuYo

astrbot/dashboard/routes/plugin.py

@@ -5,7 +5,8 @@
 import ssl
 import traceback
 from dataclasses import dataclass
-from datetime import datetime
+from datetime import datetime, timezone
+from pathlib import Path
 
 import aiohttp
 import certifi
@@ -352,6 +353,34 @@ async def get_plugin_logo_token(self, logo_path: str):
             logger.warning(f"获取插件 Logo 失败: {e}")
             return None
 
+    def _resolve_plugin_dir(self, plugin) -> Path | None:
+        if not plugin.root_dir_name:
+            return None
+
+        base_dir = Path(
+            self.plugin_manager.reserved_plugin_path
+            if plugin.reserved
+            else self.plugin_manager.plugin_store_path
+        )
+        plugin_dir = base_dir / plugin.root_dir_name
+        if not plugin_dir.is_dir():
+            return None
+        return plugin_dir
+
+    def _get_plugin_installed_at(self, plugin) -> str | None:
+        plugin_dir = self._resolve_plugin_dir(plugin)
+        if plugin_dir is None:
+            return None
+
+        try:
+            return datetime.fromtimestamp(
+                plugin_dir.stat().st_mtime,
+                timezone.utc,
+            ).isoformat()
+        except OSError as exc:
+            logger.warning(f"获取插件安装时间失败 {plugin.name}: {exc!s}")
+            return None
+
     async def get_plugins(self):
         _plugin_resp = []
         plugin_name = request.args.get("name")
@@ -377,6 +406,7 @@ async def get_plugins(self):
                 "logo": f"/api/file/{logo_url}" if logo_url else None,
                 "support_platforms": plugin.support_platforms,
                 "astrbot_version": plugin.astrbot_version,
+                "installed_at": self._get_plugin_installed_at(plugin),
             }
             # 检查是否为全空的幽灵插件
             if not any(

dashboard/src/components/extension/PluginSortControl.vue

@@ -0,0 +1,97 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  order: {
+    type: String,
+    default: "desc",
+  },
+  ascendingLabel: {
+    type: String,
+    default: "Ascending",
+  },
+  descendingLabel: {
+    type: String,
+    default: "Descending",
+  },
+  showOrder: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "update:order"]);
+
+const updateSortBy = (value) => {
+  emit("update:modelValue", value);
+};
+
+const toggleOrder = () => {
+  emit("update:order", props.order === "desc" ? "asc" : "desc");
+};
+</script>
+
+<template>
+  <div class="plugin-sort-control">
+    <v-select
+      :model-value="modelValue"
+      :items="items"
+      density="compact"
+      variant="outlined"
+      hide-details
+      :label="label"
+      class="plugin-sort-control__select"
+      @update:model-value="updateSortBy"
+    >
+      <template #prepend-inner>
+        <v-icon size="small">mdi-sort</v-icon>
+      </template>
+    </v-select>
+
+    <v-btn
+      v-if="showOrder"
+      icon
+      variant="text"
+      density="compact"
+      @click="toggleOrder"
+    >
+      <v-icon>{{
+        order === "desc" ? "mdi-arrow-down-thin" : "mdi-arrow-up-thin"
+      }}</v-icon>
+      <v-tooltip activator="parent" location="top">
+        {{ order === "desc" ? descendingLabel : ascendingLabel }}
+      </v-tooltip>
+    </v-btn>
+  </div>
+</template>
+
+<style scoped>
+.plugin-sort-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.plugin-sort-control__select {
+  min-width: 180px;
+  max-width: 220px;
+}
+
+.plugin-sort-control__select :deep(.v-field__input),
+.plugin-sort-control__select :deep(.v-field-label),
+.plugin-sort-control__select :deep(.v-select__selection-text),
+.plugin-sort-control__select :deep(.v-field__prepend-inner) {
+  font-size: 0.875rem;
+}
+</style>

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

@@ -23,6 +23,9 @@
     "placeholder": "Search extensions...",
     "marketPlaceholder": "Search market extensions..."
   },
+  "filters": {
+    "all": "All"
+  },
   "views": {
     "card": "Card View",
     "list": "List View"
@@ -122,10 +125,14 @@
     "sourceSafetyWarning": "Even with the default source, plugin stability and security cannot be fully guaranteed. Please verify carefully before use."
   },
   "sort": {
+    "by": "Sort by",
     "default": "Default",
+    "installTime": "Last Modified",
+    "name": "Name",
     "stars": "Stars",
     "author": "Author",
     "updated": "Last Updated",
+    "updateStatus": "Update Status",
     "ascending": "Ascending",
     "descending": "Descending"
   },

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

@@ -23,6 +23,9 @@
     "placeholder": "搜索插件...",
     "marketPlaceholder": "搜索市场插件..."
   },
+  "filters": {
+    "all": "全部"
+  },
   "views": {
     "card": "卡片视图",
     "list": "列表视图"
@@ -122,10 +125,14 @@
     "sourceSafetyWarning": "即使是默认插件源，我们也不能完全保证插件的稳定性和安全性，使用前请谨慎核查。"
   },
   "sort": {
+    "by": "排序方式",
     "default": "默认排序",
+    "installTime": "最后修改时间",
+    "name": "名称",
     "stars": "Star数",
     "author": "作者名",
     "updated": "更新时间",
+    "updateStatus": "更新状态",
     "ascending": "升序",
     "descending": "降序"
   },

dashboard/src/views/extension/InstalledPluginsTab.vue

@@ -1,4 +1,5 @@
 <script setup>
+import PluginSortControl from "@/components/extension/PluginSortControl.vue";
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
 import defaultPluginIcon from "@/assets/images/plugin_icon.png";
@@ -48,6 +49,9 @@ const {
   getInitialListViewMode,
   isListView,
   pluginSearch,
+  installedStatusFilter,
+  installedSortBy,
+  installedSortOrder,
   loading_,
   currentPage,
   dangerConfirmDialog,
@@ -82,6 +86,8 @@ const {
   toPinyinText,
   toInitials,
   plugin_handler_info_headers,
+  installedSortItems,
+  installedSortUsesOrder,
   pluginHeaders,
   filteredExtensions,
   filteredPlugins,
@@ -185,30 +191,64 @@ const {
             </div>
 
             <v-row class="mb-4">
-              <v-col cols="12" class="d-flex align-center flex-wrap ga-2">
-                <v-btn variant="tonal" @click="toggleShowReserved">
-                  <v-icon>{{
-                    showReserved ? "mdi-eye-off" : "mdi-eye"
-                  }}</v-icon>
-                  {{
-                    showReserved
-                      ? tm("buttons.hideSystemPlugins")
-                      : tm("buttons.showSystemPlugins")
-                  }}
-                </v-btn>
-
-                <v-btn
-                  class="ml-2"
-                  color="warning"
-                  variant="tonal"
-                  :disabled="updatableExtensions.length === 0"
-                  :loading="updatingAll"
-                  @click="showUpdateAllConfirm"
-                >
-                  <v-icon>mdi-update</v-icon>
-                  {{ tm("buttons.updateAll") }}
-                </v-btn>
-
+              <v-col cols="12">
+                <div class="installed-toolbar">
+                  <div class="installed-toolbar__actions">
+                    <v-btn variant="tonal" @click="toggleShowReserved">
+                      <v-icon>{{
+                        showReserved ? "mdi-eye-off" : "mdi-eye"
+                      }}</v-icon>
+                      {{
+                        showReserved
+                          ? tm("buttons.hideSystemPlugins")
+                          : tm("buttons.showSystemPlugins")
+                      }}
+                    </v-btn>
+
+                    <v-btn
+                      color="warning"
+                      variant="tonal"
+                      :disabled="updatableExtensions.length === 0"
+                      :loading="updatingAll"
+                      @click="showUpdateAllConfirm"
+                    >
+                      <v-icon>mdi-update</v-icon>
+                      {{ tm("buttons.updateAll") }}
+                    </v-btn>
+                  </div>
+
+                  <div class="installed-toolbar__controls">
+                    <v-btn-toggle
+                      v-model="installedStatusFilter"
+                      mandatory
+                      divided
+                      density="compact"
+                      color="primary"
+                      class="installed-status-toggle"
+                    >
+                      <v-btn value="all" prepend-icon="mdi-filter-variant">
+                        {{ tm("filters.all") }}
+                      </v-btn>
+                      <v-btn value="enabled" prepend-icon="mdi-play-circle-outline">
+                        {{ tm("status.enabled") }}
+                      </v-btn>
+                      <v-btn value="disabled" prepend-icon="mdi-pause-circle-outline">
+                        {{ tm("status.disabled") }}
+                      </v-btn>
+                    </v-btn-toggle>
+
+                    <PluginSortControl
+                      v-model="installedSortBy"
+                      :items="installedSortItems"
+                      :label="tm('sort.by')"
+                      :order="installedSortOrder"
+                      :ascending-label="tm('sort.ascending')"
+                      :descending-label="tm('sort.descending')"
+                      :show-order="installedSortUsesOrder"
+                      @update:order="installedSortOrder = $event"
+                    />
+                  </div>
+                </div>
               </v-col>
             </v-row>
 
@@ -654,6 +694,32 @@ const {
 </template>
 
 <style scoped>
+.installed-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.installed-toolbar__actions,
+.installed-toolbar__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.installed-toolbar__controls {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
+.installed-status-toggle :deep(.v-btn) {
+  min-height: 34px;
+  text-transform: none;
+}
+
 .view-mode-toggle :deep(.v-btn) {
   min-width: 30px;
   height: 28px;
@@ -684,6 +750,14 @@ const {
   }
 }
 
+@media (max-width: 960px) {
+  .installed-toolbar__controls {
+    margin-left: 0;
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
 .fab-button {
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);