优化样式,调整背景颜色透明度以提升视觉效果;更新 MediaCardListView 组件,增加上边距以改善布局;在 PluginCardListView 组件中添加新版本过滤条件,优化过滤逻辑和用户交互体验。

This commit is contained in:
jxxghp
2025-04-20 11:18:57 +08:00
parent a820d9129b
commit 9613141527
4 changed files with 44 additions and 17 deletions

View File

@@ -59,8 +59,8 @@
rgba(11, 11, 11, 0.8) 0%,
rgba(11, 11, 11, 0.7) 20%,
rgba(11, 11, 11, 0.6) 40%,
rgba(11, 11, 11, 0.3) 60%,
rgba(11, 11, 11, 0.1) 80%,
rgba(11, 11, 11, 0.4) 60%,
rgba(11, 11, 11, 0.2) 80%,
rgba(11, 11, 11, 0.0) 100%
);
}

View File

@@ -109,7 +109,7 @@ async function fetchData({ done }: { done: any }) {
<template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible pt-3" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">

View File

@@ -198,9 +198,18 @@ watch(filterParams, () => {
<div class="mr-5">
<VLabel>评分</VLabel>
</div>
<VSlider v-model="filterParams.vote_average" thumb-label max="10" min="0" :step="1" class="align-center" hide-details>
<VSlider
v-model="filterParams.vote_average"
thumb-label
max="10"
min="0"
:step="1"
class="align-center"
hide-details
>
<template v-slot:append>
<VTextField
variant="outlined"
width="5rem"
v-model="filterParams.vote_count"
density="compact"

View File

@@ -126,7 +126,10 @@ const isFilterFormEmpty = computed(() => {
})
// 插件过滤条件
const installedFilter = ref('')
const installedFilter = ref(null)
// 有新版本过滤条件
const hasUpdateFilter = ref(false)
// 已安装插件过滤窗口
const filterInstalledPluginDialog = ref(false)
@@ -416,11 +419,17 @@ function handleRepoUrl(url: string | undefined) {
return url.replace('https://github.com/', '').replace('https://raw.githubusercontent.com/', '')
}
// 监测dataList变化或installedFilter变化时更新filteredDataList
watch([dataList, installedFilter], () => {
// 监测dataList变化或installedFilter、hasUpdateFilter变化时更新filteredDataList
watch([dataList, installedFilter, hasUpdateFilter], () => {
filteredDataList.value = dataList.value.filter(item => {
if (!installedFilter.value) return true
return item.plugin_name?.toLowerCase().includes(installedFilter.value.toLowerCase())
if (!installedFilter.value && !hasUpdateFilter.value) return true
if (hasUpdateFilter.value) {
return item.has_update
}
if (installedFilter.value) {
return item.plugin_name?.toLowerCase().includes((installedFilter.value as string).toLowerCase())
}
return true
})
})
@@ -477,13 +486,20 @@ onMounted(async () => {
<VDialogCloseBtn @click="filterInstalledPluginDialog = false" />
</VCardItem>
<VCardText>
<VCombobox
v-model="installedFilter"
:items="installedPluginNames"
label="名称"
density="comfortable"
clearable
/>
<VRow>
<VCol cols="12">
<VCombobox
v-model="installedFilter"
:items="installedPluginNames"
label="名称"
density="comfortable"
clearable
/>
</VCol>
<VCol cols="12">
<VSwitch v-model="hasUpdateFilter" label="有新版本" />
</VCol>
</VRow>
</VCardText>
</VCard>
</VMenu>
@@ -604,7 +620,9 @@ onMounted(async () => {
error-code="404"
error-title="没有数据"
:error-description="
installedFilter ? '没有搜索到相关内容请更换搜索关键词' : '请先前往插件市场安装插件'
installedFilter || hasUpdateFilter
? '没有匹配到相关内容请更换筛选条件'
: '请先前往插件市场安装插件'
"
/>
</div>