Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 124 additions & 88 deletions dashboard/src/components/extension/MarketPluginCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This div with the plugin-stats class 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.

</div>
</v-card-text>
Comment on lines +162 to 164
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The empty plugin-stats container and removed updated_at display may deserve a follow-up decision.

Stars have been moved to the meta row, but this leaves plugin-stats empty and removes updated_at from the UI. If updated_at is still needed, consider rendering it here (or other stats); otherwise, remove the empty container to avoid an unnecessary flex row.

Suggested change
<div class="plugin-stats"></div>
</div>
</v-card-text>
<div class="plugin-stats">
<span>{{ new Date(plugin.updated_at).toLocaleString() }}</span>
</div>
</div>
</v-card-text>


Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: The scrollbar styling for .plugin-description is now redundant after switching to line-clamp.

With overflow: hidden and line clamp, the ::-webkit-scrollbar rules for .plugin-description no longer apply. Please remove those scrollbar styles (or move them to a truly scrollable element) to keep the CSS clear and accurate.

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 {
Expand Down
1 change: 1 addition & 0 deletions dashboard/src/components/extension/PluginSortControl.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const toggleOrder = () => {
.plugin-sort-control__select {
min-width: 180px;
width: 190px;
max-width: 220px;
}
Expand Down
10 changes: 10 additions & 0 deletions dashboard/src/i18n/locales/en-US/features/extension.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 10 additions & 1 deletion dashboard/src/i18n/locales/ru-RU/features/extension.json
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,15 @@
"market": {
"recommended": "🥳 Рекомендуем",
"allPlugins": "📦 Все плагины",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The category translation key is missing in this file, but it's present in the en-US and zh-CN versions. This will likely cause the category filter label to be missing in the Russian UI. Please add the translation for market.category before the categories object.

"categories": {
"all": "Все",
"ai_tools": "AI Tools",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The value for ai_tools is not translated into Russian and currently uses the English text. While there is a fallback mechanism, providing a proper translation would improve the user experience for Russian-speaking users.

"entertainment": "Развлечения",
"productivity": "Продуктивность",
"integrations": "Интеграции",
"utilities": "Утилиты",
"other": "Другое"
},
"showFullName": "Полное имя",
"devDocs": "Документация для разработчиков",
"submitRepo": "Добавить репозиторий",
Expand Down Expand Up @@ -355,4 +364,4 @@
"pluginChangelog": {
"menuTitle": "Журнал изменений"
}
}
}
10 changes: 10 additions & 0 deletions dashboard/src/i18n/locales/zh-CN/features/extension.json
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,16 @@
"market": {
"recommended": "🥳 推荐",
"allPlugins": "📦 全部插件",
"category": "分类",
"categories": {
"all": "全部",
"ai_tools": "AI 增强",
"entertainment": "娱乐",
"productivity": "效率",
"integrations": "外部集成",
"utilities": "生活实用",
"other": "其他"
},
"showFullName": "完整名称",
"devDocs": "插件开发文档",
"submitRepo": "提交插件仓库",
Expand Down
1 change: 1 addition & 0 deletions dashboard/src/stores/common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 : "",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The ternary expression pluginData?.category ? pluginData.category : "" can be simplified using the logical OR operator. For consistency with modern JavaScript and to make the code more concise, consider using pluginData?.category || "".

Suggested change
"category": pluginData?.category ? pluginData.category : "",
"category": pluginData?.category || "",

"support_platforms": Array.isArray(pluginData?.support_platforms)
? pluginData.support_platforms
: Array.isArray(pluginData?.support_platform)
Expand Down
9 changes: 0 additions & 9 deletions dashboard/src/views/ExtensionPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading