GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-30 12:49:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 PluginAppCard、PluginCard 和 PluginFolderCard 组件的样式，调整布局和响应式设计

Browse Source
This commit is contained in:
jxxghp
2025-05-24 08:41:11 +08:00
parent 5e23ea7809
commit 8334999e98
4 changed files with 383 additions and 1243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

555
src/components/cards/PluginAppCard.vue
View File

@@ -8,7 +8,6 @@ import { getDominantColor } from '@/@core/utils/image'
import { isNullOrEmptyObject } from '@/@core/utils'
import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'
// 输入参数
const props = defineProps({
@@ -24,9 +23,6 @@ const emit = defineEmits(['install'])
// 多语言
const { t } = useI18n()
// 响应式显示
const display = useDisplay()
// 背景颜色
const backgroundColor = ref('#28A9E1')
@@ -40,7 +36,17 @@ const $toast = useToast()
const progressDialog = ref(false)
// 进度框文本
const progressText = ref('正在安装插件...')
const progressText = ref('')
// 获取当前插件的标签
const pluginLabels = computed(() => {
if (!props.plugin?.plugin_label) return []
return props.plugin.plugin_label
.split(',')
.map(tag => tag.trim())
.filter(tag => tag.length > 0)
})
// 图片是否加载完成
const isImageLoaded = ref(false)
@@ -54,19 +60,6 @@ const releaseDialog = ref(false)
// 插件详情弹窗
const detailDialog = ref(false)
// 用户头像是否加载完成
const isAvatarLoaded = ref(false)
// 菜单显示状态
const menuVisible = ref(false)
// 获取当前插件的标签
const currentPluginLabels = computed(() => {
if (!props.plugin?.plugin_label) return []
return props.plugin.plugin_label.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
})
// 图片加载完成
async function imageLoaded() {
isImageLoaded.value = true
@@ -118,14 +111,6 @@ const iconPath: Ref<string> = computed(() => {
return `./plugin_icon/${props.plugin?.plugin_icon}`
})
// 插件作者头像路径
const authorPath: Ref<string> = computed(() => {
// 网络图片则使用代理后返回
return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
props.plugin?.author_url + '.png',
)}`
})
// 访问插件页面
function visitPluginPage() {
// 将raw.githubusercontent.com转换为项目地址
@@ -179,7 +164,6 @@ const dropdownItems = ref([
<template>
<div>
<!-- 重新设计的插件卡片 -->
<VHover>
<template #default="hover">
<VCard
@@ -187,177 +171,98 @@ const dropdownItems = ref([
:width="props.width"
:height="props.height"
@click="detailDialog = true"
class="plugin-app-card"
class="flex flex-col h-full"
:class="{
'plugin-app-card--mobile': display.mobile,
'plugin-app-card--hover': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
variant="elevated"
:elevation="hover.isHovering ? 16 : 6"
>
<!-- 背景渐变层 -->
<div
class="plugin-app-card__bg"
:style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
/>
<!-- 卡片内容 -->
<div class="plugin-app-card__content">
<!-- 主体内容 -->
<div class="plugin-app-card__body">
<!-- 左侧区域：图标和安装按钮 -->
<div class="plugin-app-card__left-section">
<!-- 插件图标 -->
<div class="plugin-app-card__avatar-container">
<VAvatar
:size="display.mobile ? 40 : 48"
class="plugin-app-card__avatar"
variant="elevated"
>
<VImg
ref="imageRef"
:src="iconPath"
@load="imageLoaded"
@error="imageLoadError = true"
>
<template #placeholder>
<VSkeletonLoader type="avatar" />
</template>
</VImg>
</VAvatar>
</div>
<!-- 安装按钮在图标下方 -->
<VBtn
size="x-small"
color="primary"
variant="elevated"
@click.stop="installPlugin"
class="plugin-app-card__install-btn-compact"
>
<VIcon icon="mdi-download" size="12" />
安装
</VBtn>
<div
class="flex-grow"
:style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
>
<VCardText class="px-2 pt-2 pb-0">
<VCardTitle
class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
>
{{ props.plugin?.plugin_name }}
<span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
</VCardTitle>
</VCardText>
<div class="relative flex flex-row items-start px-2 justify-between grow">
<div class="relative flex-1 min-w-0">
<VCardText class="text-white text-sm px-2 py-1 text-shadow overflow-hidden line-clamp-3 ...">
{{ props.plugin?.plugin_desc }}
</VCardText>
</div>
<!-- 右侧信息区域 -->
<div class="plugin-app-card__info-section">
<!-- 标题行 -->
<div class="plugin-app-card__title-row">
<h3 class="plugin-app-card__title">
{{ props.plugin?.plugin_name }}
</h3>
<VChip
size="x-small"
variant="tonal"
color="primary"
class="plugin-app-card__version-chip"
>
v{{ props.plugin?.plugin_version }}
</VChip>
</div>
<!-- 描述 -->
<VTooltip :text="props.plugin?.plugin_desc" location="bottom">
<template #activator="{ props: tooltipProps }">
<p
class="plugin-app-card__description"
v-bind="tooltipProps"
>
{{ props.plugin?.plugin_desc }}
</p>
</template>
</VTooltip>
<!-- 插件标签 -->
<div
v-if="currentPluginLabels.length > 0"
class="plugin-app-card__tags-section"
>
<VChip
v-for="tag in currentPluginLabels"
:key="tag"
size="x-small"
variant="tonal"
color="primary"
class="plugin-app-card__tag"
>
{{ tag }}
</VChip>
</div>
</div>
</div>
<!-- 底部信息栏 -->
<div class="plugin-app-card__footer">
<!-- 作者信息 -->
<div class="plugin-app-card__author-info">
<VAvatar size="18" class="plugin-app-card__author-avatar">
<VImg :src="authorPath" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" icon="mdi-github" size="10" />
</VImg>
</VAvatar>
<span class="plugin-app-card__author-name">
{{ props.plugin?.plugin_author }}
</span>
</div>
<!-- 统计信息 -->
<div class="plugin-app-card__stats-info">
<div v-if="props.count" class="plugin-app-card__download-stats">
<VIcon icon="mdi-download" size="14" />
<span class="plugin-app-card__stats-text">{{ props.count?.toLocaleString() }}</span>
</div>
</div>
</div>
<!-- 更多菜单按钮 - 右下角 -->
<div class="plugin-app-card__menu-section">
<VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
<template #activator="{ props: menuProps }">
<VBtn
v-bind="menuProps"
icon="mdi-dots-vertical"
size="small"
variant="text"
@click.stop
class="plugin-app-card__menu-btn-corner"
:class="{ 'plugin-app-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
<div class="relative flex-shrink-0 self-center pb-3">
<VAvatar size="48">
<VImg
ref="imageRef"
:src="iconPath"
aspect-ratio="4/3"
cover
@load="imageLoaded"
@error="imageLoadError = true"
/>
</template>
<VList>
<VListItem
v-for="(item, i) in dropdownItems"
v-show="item.show"
:key="i"
@click="item.props.click"
density="compact"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" size="16" />
</template>
<VListItemTitle class="text-body-2">{{ item.title }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VAvatar>
</div>
</div>
</div>
<!-- 插件标签 -->
<div v-if="pluginLabels.length > 0" class="plugin-app-card__tags-section">
<VChip v-for="tag in pluginLabels" :key="tag" size="x-small" variant="tonal" color="primary">
{{ tag }}
</VChip>
</div>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<div class="flex flex-nowrap items-center w-full pe-7">
<span>
<VIcon icon="mdi-github" class="me-1" />
<a
class="overflow-hidden text-ellipsis whitespace-nowrap"
:href="props.plugin?.author_url"
target="_blank"
@click.stop
>
{{ props.plugin?.plugin_author }}
</a>
</span>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
</div>
<div class="absolute bottom-0 right-0">
<IconBtn>
<VIcon size="small" icon="mdi-dots-vertical" />
<VMenu activator="parent" close-on-content-click>
<VList>
<VListItem v-for="(item, i) in dropdownItems" v-show="item.show" :key="i" @click="item.props.click">
<template #prepend>
<VIcon :icon="item.props.prependIcon" />
</template>
<VListItemTitle v-text="item.title" />
</VListItem>
</VList>
</VMenu>
</IconBtn>
</div>
</VCardText>
</VCard>
</template>
</VHover>
<!-- 安装插件进度框 -->
<ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
<!-- 更新日志 -->
<VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="85vh" scrollable>
<VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
<VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
<VDialogCloseBtn @click="releaseDialog = false" />
<VDivider />
<VersionHistory :history="props.plugin?.history" />
</VCard>
</VDialog>
<!-- 插件详情-->
<VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
<VCard>
@@ -422,295 +327,3 @@ const dropdownItems = ref([
</VDialog>
</div>
</template>
<style lang="scss" scoped>
.plugin-app-card {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
// 与PluginCard相同的高度
height: 170px;
&--mobile {
border-radius: 12px;
height: 150px; // 移动端高度
}
&--hover {
transform: translateY(-6px);
}
&__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
&__content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
padding: 16px;
padding-bottom: 12px; // 为右下角按钮留空间
.plugin-app-card--mobile & {
padding: 12px;
padding-bottom: 10px;
}
}
&__body {
display: flex;
gap: 12px;
flex: 1;
align-items: flex-start;
margin-bottom: 8px;
.plugin-app-card--mobile & {
gap: 10px;
margin-bottom: 6px;
}
}
&__left-section {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
&__avatar-container {
position: relative;
}
&__avatar {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
&__install-btn-compact {
font-size: 0.7rem;
height: 24px;
padding: 0 8px;
min-width: auto;
border-radius: 4px;
.plugin-app-card--mobile & {
font-size: 0.65rem;
height: 22px;
padding: 0 6px;
}
}
&__info-section {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px; // 增加间距
.plugin-app-card--mobile & {
gap: 8px;
}
}
&__title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 0; // 移除额外间距
}
&__title {
margin: 0;
font-size: 1.0rem; // 稍微缩小字体
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
.plugin-app-card--mobile & {
font-size: 0.9rem;
}
}
&__version-chip {
flex-shrink: 0;
font-size: 0.7rem;
}
&__description {
margin: 0;
font-size: 0.8rem;
line-height: 1.3;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
cursor: help;
min-height: 2.6rem; // 固定最小高度，确保标签位置一致
.plugin-app-card--mobile & {
font-size: 0.75rem;
line-height: 1.25;
-webkit-line-clamp: 2;
line-clamp: 2;
min-height: 2.5rem; // 移动端固定高度
}
}
&__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
gap: 8px;
padding-top: 12px; // 增加上边距
}
&__author-info {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
&__author-avatar {
flex-shrink: 0;
width: 18px;
height: 18px;
}
&__author-name {
font-size: 0.8rem;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__stats-info {
display: flex;
align-items: center;
gap: 8px;
margin-right: 36px;
.plugin-app-card--mobile & {
margin-right: 32px;
}
}
&__download-stats {
display: flex;
align-items: center;
gap: 3px;
opacity: 0.8;
}
&__stats-text {
font-size: 0.8rem;
}
&__tags-section {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin: 0;
overflow-x: hidden;
padding-right: 8px;
min-height: 20px; // 固定最小高度，即使没有标签也占位
align-items: flex-start; // 标签顶部对齐
.plugin-app-card--mobile & {
gap: 4px;
min-height: 18px;
}
}
&__tag {
font-size: 0.65rem;
height: 20px; // 缩小高度
opacity: 0.9;
font-weight: 500;
border-radius: 6px;
transition: all 0.2s ease;
flex-shrink: 0;
white-space: nowrap;
.plugin-app-card--mobile & {
font-size: 0.6rem;
height: 18px;
}
&:hover {
opacity: 1;
transform: scale(1.05);
}
}
&__menu-section {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
.plugin-app-card--mobile & {
bottom: 6px;
right: 6px;
}
}
&__menu-btn-corner {
opacity: 0;
transition: opacity 0.2s ease;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
&--visible {
opacity: 0.9;
}
&:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.05);
}
}
}
// 全局网格布局调整
:global(.grid-plugin-card) {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
@media (max-width: 768px) {
grid-template-columns: 1fr; // 移动端单列
gap: 12px;
}
@media (max-width: 480px) {
grid-template-columns: 1fr; // 小屏幕单列
gap: 10px;
}
}
</style>

605
src/components/cards/PluginCard.vue
View File

@@ -11,7 +11,6 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
import PluginDataDialog from '../dialog/PluginDataDialog.vue'
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'
// 输入参数
const props = defineProps({
@@ -28,9 +27,6 @@ const emit = defineEmits(['remove', 'save', 'actionDone'])
// 多语言
const { t } = useI18n()
// 响应式显示
const display = useDisplay()
// 背景颜色
const backgroundColor = ref('#28A9E1')
@@ -73,13 +69,6 @@ const imageLoadError = ref(false)
// 更新日志弹窗
const releaseDialog = ref(false)
// 获取当前插件的标签
const currentPluginLabels = computed(() => {
if (!props.plugin?.plugin_label) return []
return props.plugin.plugin_label.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
})
// 监听动作标识，如为true则打开详情
watch(
() => props.action,
@@ -340,7 +329,7 @@ watch(
<template>
<div>
<!-- 重新设计的插件卡片 -->
<!-- 插件卡片 -->
<VHover>
<template #default="hover">
<VCard
@@ -349,179 +338,88 @@ watch(
:width="props.width"
:height="props.height"
@click="openPluginDetail"
class="plugin-card"
class="flex flex-col h-full"
:class="{
'plugin-card--mobile': display.mobile,
'plugin-card--hover': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
variant="elevated"
:elevation="hover.isHovering ? 16 : 6"
>
<!-- 背景渐变层 -->
<div
class="plugin-card__bg"
:style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
/>
<!-- 卡片内容 -->
<div class="plugin-card__content">
<!-- 主体内容 -->
<div class="plugin-card__body">
<!-- 左侧区域：图标和更新按钮 -->
<div class="plugin-card__left-section">
<!-- 插件图标 -->
<div class="plugin-card__avatar-container">
<VAvatar
:size="display.mobile ? 40 : 48"
class="plugin-card__avatar"
variant="elevated"
>
<VImg
ref="imageRef"
:src="iconPath"
@load="imageLoaded"
@error="imageLoadError = true"
>
<template #placeholder>
<VSkeletonLoader type="avatar" />
</template>
</VImg>
</VAvatar>
<!-- 拖拽手柄在图标上 -->
<VBtn
icon="mdi-arrow-all"
size="x-small"
variant="text"
class="cursor-move plugin-card__drag-btn-overlay"
:class="{ 'plugin-card__drag-btn-overlay--visible': hover.isHovering }"
@click.stop
/>
</div>
<!-- 更新按钮在图标下方 -->
<VBtn
v-if="props.plugin?.has_update"
size="x-small"
color="warning"
variant="elevated"
@click.stop="showUpdateHistory"
class="plugin-card__update-btn-compact plugin-card__update-btn--blink"
>
<VIcon icon="mdi-arrow-up-circle" size="12" />
更新
</VBtn>
<div
class="flex-grow"
:style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
>
<VCardText class="px-2 pt-2 pb-0">
<VCardTitle
class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
>
<VBadge dot inline :color="props.plugin?.state ? 'success' : 'secondary'" />
{{ props.plugin?.plugin_name }}
<span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
</VCardTitle>
</VCardText>
<div class="relative flex flex-row items-start px-2 justify-between grow">
<div class="relative flex-1 min-w-0">
<VCardText class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
{{ props.plugin?.plugin_desc }}
</VCardText>
</div>
<!-- 右侧信息区域 -->
<div class="plugin-card__info-section">
<!-- 标题行 -->
<div class="plugin-card__title-row">
<!-- 启用状态指示器 -->
<VIcon
:icon="props.plugin?.state ? 'mdi-check-circle' : 'mdi-pause-circle'"
:size="display.mobile ? 14 : 16"
:color="props.plugin?.state ? 'success' : 'warning'"
class="plugin-card__status-icon"
<div class="relative flex-shrink-0 self-center cursor-move pb-3">
<VAvatar size="48">
<VImg
ref="imageRef"
:src="iconPath"
aspect-ratio="4/3"
cover
@load="imageLoaded"
@error="imageLoadError = true"
/>
<h3 class="plugin-card__title">
{{ props.plugin?.plugin_name }}
</h3>
<VChip
size="x-small"
variant="tonal"
color="primary"
class="plugin-card__version-chip"
>
v{{ props.plugin?.plugin_version }}
</VChip>
</div>
<!-- 描述 -->
<VTooltip :text="props.plugin?.plugin_desc" location="bottom">
<template #activator="{ props: tooltipProps }">
<p
class="plugin-card__description"
v-bind="tooltipProps"
>
{{ props.plugin?.plugin_desc }}
</p>
</template>
</VTooltip>
<!-- 插件标签 -->
<div
v-if="currentPluginLabels.length > 0"
class="plugin-card__tags-section"
>
<VChip
v-for="tag in currentPluginLabels"
:key="tag"
size="x-small"
variant="tonal"
color="primary"
class="plugin-card__tag"
>
{{ tag }}
</VChip>
</div>
</div>
</div>
<!-- 底部信息栏 -->
<div class="plugin-card__footer">
<!-- 作者信息 -->
<div class="plugin-card__author-info">
<VAvatar size="18" class="plugin-card__author-avatar">
<VImg :src="authorPath" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" icon="mdi-github" size="10" />
</VImg>
</VAvatar>
<span class="plugin-card__author-name">
</div>
</div>
</div>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<div class="flex flex-nowrap items-center w-full pe-7">
<span class="author-info flex-shrink-1 overflow-hidden text-ellipsis whitespace-nowrap">
<VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
</VImg>
<a
:href="props.plugin?.author_url"
target="_blank"
@click.stop
class="overflow-hidden text-ellipsis whitespace-nowrap"
>
{{ props.plugin?.plugin_author }}
</span>
</div>
<!-- 统计信息 -->
<div class="plugin-card__stats-info">
<div v-if="props.count" class="plugin-card__download-stats">
<VIcon icon="mdi-download" size="14" />
<span class="plugin-card__stats-text">{{ props.count?.toLocaleString() }}</span>
</div>
</div>
</a>
</span>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon size="small" icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
</div>
<!-- 更多菜单按钮 - 右下角 -->
<div class="plugin-card__menu-section" :class="{ 'plugin-card__menu-section--with-update': props.plugin?.has_update }">
<VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
<template #activator="{ props: menuProps }">
<VBtn
v-bind="menuProps"
icon="mdi-dots-vertical"
size="small"
variant="text"
@click.stop
class="plugin-card__menu-btn-corner"
:class="{ 'plugin-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
/>
</template>
<VList>
<VListItem
v-for="(item, i) in dropdownItems"
v-show="item.show"
:key="i"
:base-color="item.props.color"
@click="item.props.click"
density="compact"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" size="16" />
</template>
<VListItemTitle class="text-body-2">{{ item.title }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
<div class="absolute bottom-0 right-0">
<IconBtn>
<VIcon size="small" icon="mdi-dots-vertical" />
<VMenu v-model="menuVisible" activator="parent" close-on-content-click>
<VList>
<VListItem
v-for="(item, i) in dropdownItems"
v-show="item.show"
:key="i"
:base-color="item.props.color"
@click="item.props.click"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" />
</template>
<VListItemTitle v-text="item.title" />
</VListItem>
</VList>
</VMenu>
</IconBtn>
</div>
</VCardText>
<div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
<VIcon icon="mdi-new-box" class="text-white" />
</div>
</VCard>
</template>
@@ -570,343 +468,26 @@ watch(
</template>
<style lang="scss" scoped>
.plugin-card {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
// 降低高度
height: 170px;
&--mobile {
border-radius: 12px;
height: 150px; // 移动端高度
}
&--hover {
transform: translateY(-6px);
}
&__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
&__content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
padding: 16px;
padding-bottom: 12px; // 为右下角按钮留空间
.plugin-card--mobile & {
padding: 12px;
padding-bottom: 10px;
}
}
&__body {
display: flex;
gap: 12px;
flex: 1;
align-items: flex-start;
margin-bottom: 8px;
.plugin-card--mobile & {
gap: 10px;
margin-bottom: 6px;
}
}
&__left-section {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
&__avatar-container {
position: relative;
}
&__avatar {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
&__drag-btn-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s ease;
color: rgba(255, 255, 255, 0.9) !important;
&--visible {
opacity: 0.8;
}
&:hover {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
}
&__update-btn-compact {
font-size: 0.7rem;
height: 24px;
padding: 0 8px;
min-width: auto;
border-radius: 4px;
.plugin-card--mobile & {
font-size: 0.65rem;
height: 22px;
padding: 0 6px;
}
}
// 更新按钮闪烁效果
&__update-btn--blink {
animation: plugin-card-blink 1.5s infinite;
box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
}
@keyframes plugin-card-blink {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.1);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
}
}
&__info-section {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px; // 增加间距
.plugin-card--mobile & {
gap: 8px;
}
}
&__title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 0; // 移除额外间距
}
&__status-icon {
flex-shrink: 0;
opacity: 0.9;
transition: opacity 0.3s ease;
&:hover {
opacity: 1;
}
}
&__title {
margin: 0;
font-size: 1.0rem; // 稍微缩小字体
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
.plugin-card--mobile & {
font-size: 0.9rem;
}
}
&__version-chip {
flex-shrink: 0;
font-size: 0.7rem;
}
&__description {
margin: 0;
font-size: 0.8rem;
line-height: 1.3;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
cursor: help;
min-height: 2.6rem; // 固定最小高度，确保标签位置一致
.plugin-card--mobile & {
font-size: 0.75rem;
line-height: 1.25;
-webkit-line-clamp: 2;
line-clamp: 2;
min-height: 2.5rem; // 移动端固定高度
}
}
&__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
gap: 8px;
padding-top: 12px; // 增加上边距
}
&__author-info {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
&__author-avatar {
flex-shrink: 0;
width: 18px;
height: 18px;
}
&__author-name {
font-size: 0.8rem;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__stats-info {
display: flex;
align-items: center;
gap: 8px;
margin-right: 36px;
.plugin-card--mobile & {
margin-right: 32px;
}
}
&__download-stats {
display: flex;
align-items: center;
gap: 3px;
opacity: 0.8;
}
&__stats-text {
font-size: 0.8rem;
}
&__tags-section {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin: 0;
overflow-x: hidden;
padding-right: 8px;
min-height: 20px; // 固定最小高度，即使没有标签也占位
align-items: flex-start; // 标签顶部对齐
.plugin-card--mobile & {
gap: 4px;
min-height: 18px;
}
}
&__tag {
font-size: 0.65rem;
height: 20px; // 缩小高度
opacity: 0.9;
font-weight: 500;
border-radius: 6px;
transition: all 0.2s ease;
flex-shrink: 0;
white-space: nowrap;
.plugin-card--mobile & {
font-size: 0.6rem;
height: 18px;
}
&:hover {
opacity: 1;
transform: scale(1.05);
}
}
&__menu-section {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
.plugin-card--mobile & {
bottom: 6px;
right: 6px;
}
}
&__menu-btn-corner {
opacity: 0;
transition: opacity 0.2s ease;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
&--visible {
opacity: 0.9;
}
&:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.05);
}
}
.card-cover-blurred::before {
position: absolute;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background: rgba(29, 39, 59, 48%);
content: '';
inset: 0;
}
// 全局网格布局调整
:global(.grid-plugin-card) {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
@media (max-width: 768px) {
grid-template-columns: 1fr; // 移动端单列
gap: 12px;
}
@media (max-width: 480px) {
grid-template-columns: 1fr; // 小屏幕单列
gap: 10px;
}
.author-info {
display: flex;
align-items: center;
}
.author-avatar {
border-radius: 50%;
block-size: 24px;
inline-size: 24px;
margin-inline-end: 8px;
object-fit: cover;
}
</style>

206
src/components/cards/PluginFolderCard.vue
View File

@@ -22,7 +22,7 @@ const props = defineProps({
pluginCount: Number,
folderConfig: {
type: Object as PropType<FolderConfig>,
default: () => ({})
default: () => ({}),
},
width: String,
height: String,
@@ -60,7 +60,8 @@ const folderSettings = ref<FolderConfig>({
background: '',
icon: 'mdi-folder',
color: '#2196F3',
gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
gradient:
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8s) 100%)',
showIcon: true,
})
@@ -92,27 +93,27 @@ const colorOptions = [
// 预设渐变选项
const gradientOptions = [
'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
'linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.15) 100%)',
'linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.15) 100%)',
'linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
'linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.15) 100%)',
'linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.15) 100%)',
'linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0.15) 100%)',
'linear-gradient(135deg, rgba(63, 81, 181, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(76, 175, 80, 0.7) 0%, rgba(76, 175, 80, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(255, 152, 0, 0.7) 0%, rgba(255, 152, 0, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(156, 39, 176, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(244, 67, 54, 0.7) 0%, rgba(244, 67, 54, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(96, 125, 139, 0.7) 0%, rgba(96, 125, 139, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(233, 30, 99, 0.7) 0%, rgba(233, 30, 99, 0.8) 100%)',
'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(63, 81, 181, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
]
// 计算文件夹样式
const folderStyle = computed(() => {
const folderStyle: any = computed(() => {
const config = props.folderConfig || {}
const settings = folderSettings.value
let style = {}
// 背景图片
if (config.background || settings.background) {
const bg = config.background || settings.background
if (bg.startsWith('http')) {
if (bg?.startsWith('http')) {
style = {
...style,
backgroundImage: `url(${bg})`,
@@ -122,7 +123,7 @@ const folderStyle = computed(() => {
}
}
}
return style
})
@@ -130,7 +131,7 @@ const folderStyle = computed(() => {
const backgroundGradient = computed(() => {
const config = props.folderConfig || {}
const settings = folderSettings.value
return config.gradient || settings.gradient || gradientOptions[0]
})
@@ -138,7 +139,7 @@ const backgroundGradient = computed(() => {
const folderIcon = computed(() => {
const config = props.folderConfig || {}
const settings = folderSettings.value
return config.icon || settings.icon || 'mdi-folder'
})
@@ -146,7 +147,7 @@ const folderIcon = computed(() => {
const iconColor = computed(() => {
const config = props.folderConfig || {}
const settings = folderSettings.value
return config.color || settings.color || '#2196F3'
})
@@ -154,19 +155,23 @@ const iconColor = computed(() => {
const shouldShowIcon = computed(() => {
const config = props.folderConfig || {}
const settings = folderSettings.value
return config.showIcon !== undefined ? config.showIcon : (settings.showIcon !== undefined ? settings.showIcon : true)
return config.showIcon !== undefined ? config.showIcon : settings.showIcon !== undefined ? settings.showIcon : true
})
// 监听props变化，更新本地设置
watch(() => props.folderConfig, (newConfig) => {
if (newConfig) {
folderSettings.value = {
...folderSettings.value,
...newConfig,
watch(
() => props.folderConfig,
newConfig => {
if (newConfig) {
folderSettings.value = {
...folderSettings.value,
...newConfig,
}
}
}
}, { deep: true, immediate: true })
},
{ deep: true, immediate: true },
)
// 打开文件夹
function openFolder() {
@@ -185,12 +190,12 @@ async function confirmRename() {
$toast.error('文件夹名称不能为空')
return
}
if (newFolderName.value === props.folderName) {
renameDialog.value = false
return
}
try {
emit('rename', props.folderName, newFolderName.value)
renameDialog.value = false
@@ -233,7 +238,7 @@ function saveSettings() {
...props.folderConfig,
...folderSettings.value,
}
emit('update-config', props.folderName, config)
settingDialog.value = false
$toast.success('文件夹设置已保存')
@@ -273,38 +278,38 @@ const dropdownItems = ref([
</script>
<template>
<div>
<div class="h-full">
<!-- 文件夹卡片 -->
<VHover>
<template #default="hover">
<VCard
v-bind="hover.props"
:ripple="false"
:width="props.width"
:height="props.height"
min-height="9rem"
@click="openFolder"
class="plugin-folder-card cursor-move"
class="plugin-folder-card h-full"
:class="{
'plugin-folder-card--mobile': display.mobile,
'plugin-folder-card--hover': hover.isHovering,
}"
variant="elevated"
:elevation="hover.isHovering ? 16 : 6"
:style="folderStyle"
>
<!-- 背景渐变层 -->
<div class="plugin-folder-card__bg" :style="{ background: backgroundGradient }" />
<!-- 背景遮罩（当有背景图片时） -->
<div v-if="folderStyle.backgroundImage" class="plugin-folder-card__overlay" />
<!-- 卡片内容 -->
<div class="plugin-folder-card__content">
<!-- 主体内容 -->
<div class="plugin-folder-card__body" :class="{ 'plugin-folder-card__body--no-icon': !shouldShowIcon }">
<!-- 文件夹图标 -->
<div v-if="shouldShowIcon" class="plugin-folder-card__icon-container">
<VIcon
:icon="folderIcon"
<VIcon
:icon="folderIcon"
:size="display.mobile ? 56 : 72"
class="plugin-folder-card__folder-icon"
:color="iconColor"
@@ -318,25 +323,17 @@ const dropdownItems = ref([
{{ props.folderName }}
</h3>
<!-- 插件数量 -->
<p class="plugin-folder-card__count">
{{ props.pluginCount }} 个插件
</p>
<p class="plugin-folder-card__count">{{ props.pluginCount }} 个插件</p>
</div>
</div>
<!-- 更多菜单按钮 - 右下角 -->
<div class="plugin-folder-card__menu-section">
<div class="absolute bottom-0 right-0">
<VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
<template #activator="{ props: menuProps }">
<VBtn
v-bind="menuProps"
icon="mdi-dots-vertical"
size="small"
variant="text"
@click.stop
class="plugin-folder-card__menu-btn-corner"
:class="{ 'plugin-folder-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
/>
<IconBtn v-bind="menuProps" @click.stop>
<VIcon size="small" icon="mdi-dots-vertical" color="white" />
</IconBtn>
</template>
<VList>
<VListItem
@@ -345,7 +342,6 @@ const dropdownItems = ref([
:key="i"
:base-color="item.props.color"
@click="item.props.click"
density="compact"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" size="16" />
@@ -392,20 +388,16 @@ const dropdownItems = ref([
<VRow>
<!-- 显示图标开关 -->
<VCol cols="12">
<VSwitch
v-model="folderSettings.showIcon"
label="显示文件夹图标"
color="primary"
hide-details
/>
<VSwitch v-model="folderSettings.showIcon" label="显示文件夹图标" color="primary" hide-details />
</VCol>
<!-- 图标选择 -->
<VCol v-if="folderSettings.showIcon" cols="12" md="6">
<VCardSubtitle class="pa-0 mb-2">图标</VCardSubtitle>
<div class="icon-grid">
<VBtn
v-for="icon in iconOptions"
icon
:key="icon"
:variant="folderSettings.icon === icon ? 'tonal' : 'text'"
:color="folderSettings.icon === icon ? 'primary' : 'default'"
@@ -417,7 +409,7 @@ const dropdownItems = ref([
</VBtn>
</div>
</VCol>
<!-- 颜色选择 -->
<VCol v-if="folderSettings.showIcon" cols="12" md="6">
<VCardSubtitle class="pa-0 mb-2">图标颜色</VCardSubtitle>
@@ -436,7 +428,7 @@ const dropdownItems = ref([
</VBtn>
</div>
</VCol>
<!-- 渐变背景选择 -->
<VCol cols="12">
<VCardSubtitle class="pa-0 mb-2">背景渐变</VCardSubtitle>
@@ -454,7 +446,7 @@ const dropdownItems = ref([
</VBtn>
</div>
</VCol>
<!-- 自定义背景图片 -->
<VCol cols="12">
<VTextField
@@ -482,22 +474,13 @@ const dropdownItems = ref([
.plugin-folder-card {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
// 与插件卡片相同的高度
height: 170px;
&--mobile {
border-radius: 12px;
height: 150px;
}
&--hover {
transform: translateY(-6px);
transform: translateY(-4px);
}
&__bg {
position: absolute;
top: 0;
@@ -506,7 +489,7 @@ const dropdownItems = ref([
bottom: 0;
z-index: 0;
}
&__overlay {
position: absolute;
top: 0;
@@ -516,7 +499,7 @@ const dropdownItems = ref([
z-index: 1;
background: rgba(0, 0, 0, 0.2);
}
&__content {
position: relative;
z-index: 2;
@@ -525,13 +508,13 @@ const dropdownItems = ref([
flex-direction: column;
padding: 16px;
padding-bottom: 12px;
.plugin-folder-card--mobile & {
padding: 12px;
padding-bottom: 10px;
}
}
&__body {
display: flex;
flex-direction: row;
@@ -540,52 +523,51 @@ const dropdownItems = ref([
flex: 1;
gap: 16px;
padding: 0 8px;
.plugin-folder-card--mobile & {
gap: 12px;
padding: 0 4px;
}
&--no-icon {
justify-content: flex-start;
align-items: flex-start;
padding: 16px;
gap: 0;
.plugin-folder-card--mobile & {
padding: 12px;
gap: 0;
}
}
}
&__icon-container {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
&__folder-icon {
transition: all 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
.plugin-folder-card--hover & {
transform: scale(1.05);
}
}
&__info {
text-align: left;
min-height: 0;
flex: 1;
&--no-icon {
text-align: left;
flex: none;
}
}
&__name {
margin: 0;
font-size: 1.1rem;
@@ -600,74 +582,44 @@ const dropdownItems = ref([
max-width: none;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
.plugin-folder-card--mobile & {
font-size: 1.0rem;
font-size: 1rem;
}
.plugin-folder-card__info--no-icon & {
font-size: 1.3rem;
font-weight: 700;
-webkit-line-clamp: 2;
line-clamp: 2;
margin-bottom: 4px;
.plugin-folder-card--mobile & {
font-size: 1.2rem;
}
}
}
&__count {
margin: 2px 0 0 0;
font-size: 0.85rem;
opacity: 0.9;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.plugin-folder-card--mobile & {
font-size: 0.8rem;
}
.plugin-folder-card__info--no-icon & {
margin-top: 0;
font-size: 0.9rem;
.plugin-folder-card--mobile & {
font-size: 0.85rem;
}
}
}
&__menu-section {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
.plugin-folder-card--mobile & {
bottom: 6px;
right: 6px;
}
}
&__menu-btn-corner {
opacity: 0;
transition: opacity 0.2s ease;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
&--visible {
opacity: 0.9;
}
&:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.05);
}
}
}
// 设置对话框样式
@@ -704,4 +656,4 @@ const dropdownItems = ref([
height: 60px !important;
border-radius: 8px !important;
}
</style>
</style>