-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
feat(extension): add category filtering for market plugins and enhance UI components #6762
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -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> | ||||||||||||||||||
|
Comment on lines
+162
to
164
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. suggestion: The empty Stars have been moved to the meta row, but this leaves
Suggested change
|
||||||||||||||||||
|
|
||||||||||||||||||
|
|
@@ -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; | ||||||||||||||||||
|
Comment on lines
303
to
+312
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nitpick: The scrollbar styling for With |
||||||||||||||||||
| 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 { | ||||||||||||||||||
|
|
||||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -96,6 +96,15 @@ | |
| "market": { | ||
| "recommended": "🥳 Рекомендуем", | ||
| "allPlugins": "📦 Все плагины", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| "categories": { | ||
| "all": "Все", | ||
| "ai_tools": "AI Tools", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| "entertainment": "Развлечения", | ||
| "productivity": "Продуктивность", | ||
| "integrations": "Интеграции", | ||
| "utilities": "Утилиты", | ||
| "other": "Другое" | ||
| }, | ||
| "showFullName": "Полное имя", | ||
| "devDocs": "Документация для разработчиков", | ||
| "submitRepo": "Добавить репозиторий", | ||
|
|
@@ -355,4 +364,4 @@ | |
| "pluginChangelog": { | ||
| "menuTitle": "Журнал изменений" | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -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 : "", | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The ternary expression
Suggested change
|
||||||
| "support_platforms": Array.isArray(pluginData?.support_platforms) | ||||||
| ? pluginData.support_platforms | ||||||
| : Array.isArray(pluginData?.support_platform) | ||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This
divwith theplugin-statsclass is currently empty. The corresponding CSS class is defined, but no content is rendered inside it. If this is a placeholder for a future feature, it might be better to add a comment explaining its purpose. If it's a leftover from refactoring and no longer used, it should be removed to avoid confusion and dead code.