feat: add MarketPluginCard component and integrate random plugin feature in ExtensionPage

dashboard/src/components/extension/MarketPluginCard.vue

@@ -0,0 +1,277 @@
+<script setup>
+import { useModuleI18n } from "@/i18n/composables";
+
+const { tm } = useModuleI18n("features/extension");
+
+defineProps({
+  plugin: {
+    type: Object,
+    required: true,
+  },
+  defaultPluginIcon: {
+    type: String,
+    required: true,
+  },
+  showPluginFullName: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["install"]);
+
+const handleInstall = (plugin) => {
+  emit("install", plugin);
+};
+</script>
+
+<template>
+  <v-card
+    class="rounded-lg d-flex flex-column plugin-card"
+    elevation="0"
+    style="height: 12rem; 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;
+      "
+    >
+      <div style="flex-shrink: 0">
+        <img
+          :src="plugin?.logo || defaultPluginIcon"
+          :alt="plugin.name"
+          style="
+            height: 75px;
+            width: 75px;
+            border-radius: 8px;
+            object-fit: cover;
+          "
+        />
+      </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">
+            {{
+              plugin.display_name?.length
+                ? plugin.display_name
+                : showPluginFullName
+                ? plugin.name
+                : plugin.trimmedName
+            }}
+          </span>
+        </div>
+
+        <div class="d-flex align-center" style="gap: 4px; margin-bottom: 6px">
+          <v-icon
+            icon="mdi-account"
+            size="x-small"
+            style="color: rgba(var(--v-theme-on-surface), 0.5)"
+          ></v-icon>
+          <a
+            v-if="plugin?.social_link"
+            :href="plugin.social_link"
+            target="_blank"
+            class="text-subtitle-2 font-weight-medium"
+            style="
+              text-decoration: none;
+              color: rgb(var(--v-theme-primary));
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            "
+          >
+            {{ plugin.author }}
+          </a>
+          <span
+            v-else
+            class="text-subtitle-2 font-weight-medium"
+            style="
+              color: rgb(var(--v-theme-primary));
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            "
+          >
+            {{ plugin.author }}
+          </span>
+          <div
+            class="d-flex align-center text-subtitle-2 ml-2"
+            style="color: rgba(var(--v-theme-on-surface), 0.7)"
+          >
+            <v-icon
+              icon="mdi-source-branch"
+              size="x-small"
+              style="margin-right: 2px"
+            ></v-icon>
+            <span>{{ plugin.version }}</span>
+          </div>
+        </div>
+
+        <div class="text-caption plugin-description">
+          {{ plugin.desc }}
+        </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>
+    </v-card-text>
+
+    <v-card-actions style="gap: 6px; padding: 8px 12px; padding-top: 0">
+      <v-chip
+        v-for="tag in plugin.tags?.slice(0, 2)"
+        :key="tag"
+        :color="tag === 'danger' ? 'error' : 'primary'"
+        label
+        size="x-small"
+        style="height: 20px"
+      >
+        {{ tag === "danger" ? tm("tags.danger") : tag }}
+      </v-chip>
+      <v-menu v-if="plugin.tags && plugin.tags.length > 2" open-on-hover offset-y>
+        <template v-slot:activator="{ props: menuProps }">
+          <v-chip
+            v-bind="menuProps"
+            color="grey"
+            label
+            size="x-small"
+            style="height: 20px; cursor: pointer"
+          >
+            +{{ plugin.tags.length - 2 }}
+          </v-chip>
+        </template>
+        <v-list density="compact">
+          <v-list-item v-for="tag in plugin.tags.slice(2)" :key="tag">
+            <v-chip :color="tag === 'danger' ? 'error' : 'primary'" label size="small">
+              {{ tag === "danger" ? tm("tags.danger") : tag }}
+            </v-chip>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-spacer></v-spacer>
+      <v-btn
+        v-if="plugin?.repo"
+        color="secondary"
+        size="x-small"
+        variant="tonal"
+        :href="plugin.repo"
+        target="_blank"
+        style="height: 24px"
+      >
+        <v-icon icon="mdi-github" start size="x-small"></v-icon>
+        {{ tm("buttons.viewRepo") }}
+      </v-btn>
+      <v-btn
+        v-if="!plugin?.installed"
+        color="primary"
+        size="x-small"
+        @click="handleInstall(plugin)"
+        variant="flat"
+        style="height: 24px"
+      >
+        {{ tm("buttons.install") }}
+      </v-btn>
+      <v-chip v-else color="success" size="x-small" label style="height: 20px">
+        ✓ {{ tm("status.installed") }}
+      </v-chip>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+.plugin-description {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  line-height: 1.3;
+  margin-bottom: 6px;
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.plugin-card:hover .plugin-description {
+  overflow-y: auto;
+}
+
+.plugin-description::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.plugin-description::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.plugin-description::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--v-theme-primary-rgb), 0.4);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.plugin-description::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(var(--v-theme-primary-rgb), 0.6);
+}
+</style>

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

@@ -38,7 +38,8 @@
     "selectFile": "Select File",
     "refresh": "Refresh",
     "updateAll": "Update All",
-    "deleteSource": "Delete Source"
+    "deleteSource": "Delete Source",
+    "reshuffle": "Shuffle Again"
   },
   "status": {
     "enabled": "Enabled",
@@ -103,7 +104,9 @@
     "sourceUpdated": "Source updated successfully",
     "defaultOfficialSource": "Default Official Source",
     "sourceExists": "This source already exists",
-    "installPlugin": "Install Plugin"
+    "installPlugin": "Install Plugin",
+    "randomPlugins": "🎲 Random Plugins",
+    "sourceSafetyWarning": "Even with the default source, plugin stability and security cannot be fully guaranteed. Please verify carefully before use."
   },
   "sort": {
     "default": "Default",

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

@@ -3,7 +3,7 @@
   "subtitle": "管理和配置系统插件",
   "tabs": {
     "installedPlugins": "AstrBot 插件",
-    "market": "AstrBot 插件市场", 
+    "market": "AstrBot 插件市场",
     "installedMcpServers": "MCP",
     "skills": "Skills",
     "handlersOperation": "管理行为"
@@ -38,7 +38,8 @@
     "selectFile": "选择文件",
     "refresh": "刷新",
     "updateAll": "更新全部插件",
-    "deleteSource": "删除源"
+    "deleteSource": "删除源",
+    "reshuffle": "随机一发"
   },
   "status": {
     "enabled": "启用",
@@ -103,7 +104,9 @@
     "sourceUpdated": "插件源更新成功",
     "defaultOfficialSource": "默认官方源",
     "sourceExists": "该插件源已存在",
-    "installPlugin": "安装插件"
+    "installPlugin": "安装插件",
+    "randomPlugins": "🎲 随机插件",
+    "sourceSafetyWarning": "即使是默认插件源，我们也不能完全保证插件的稳定性和安全性，使用前请谨慎核查。"
   },
   "sort": {
     "default": "默认排序",