GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-17 04:37:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化过滤器按钮显示逻辑，支持动态显示和已选择过滤项

Browse Source
This commit is contained in:
jxxghp
2025-03-29 18:28:56 +08:00
parent 593fede47c
commit 398e8b6afc
2 changed files with 105 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/views/torrent/TorrentCardListView.vue
View File

@@ -404,7 +404,7 @@ function loadMore({ done }: { done: any }) {
</script>
<template>
<div class="search-header mb-4 d-none d-sm-flex">
<div class="search-header d-none d-sm-flex">
<!-- 页面头部和筛选栏 -->
<div class="view-header bg-surface rounded-xl">
<div class="d-flex align-center flex-wrap pa-3">
@@ -431,6 +431,7 @@ function loadMore({ done }: { done: any }) {
<div class="filter-bar">
<VBtn
v-for="(title, key) in filterTitles"
v-show="filterOptions[key].length > 0"
:key="key"
variant="tonal"
size="small"
@@ -473,7 +474,7 @@ function loadMore({ done }: { done: any }) {
size="small"
closable
variant="elevated"
class="me-1 mb-1 filter-tag"
class="me-1 mt-2 filter-tag"
@click:close="removeFilter(key, value)"
>
<VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
@@ -483,52 +484,9 @@ function loadMore({ done }: { done: any }) {
</div>
</div>
</div>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="400px" location="center">
<VCard>
<VCardTitle class="py-2 d-flex align-center">
<VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
<span>{{ currentFilterTitle }} 筛选</span>
<VSpacer />
<VBtn
v-if="filterForm[currentFilter].length > 0"
variant="text"
size="small"
color="error"
@click="clearFilter(currentFilter)"
>
清除
</VBtn>
<VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)"> 全选 </VBtn>
</VCardTitle>
<VDivider />
<VCardText class="filter-menu-content pt-4">
<VChipGroup v-model="filterForm[currentFilter]" column multiple class="filter-options">
<VChip
v-for="option in currentFilterOptions"
:key="option"
:value="option"
filter
variant="elevated"
class="ma-1 filter-chip"
size="small"
>
{{ option }}
</VChip>
</VChipGroup>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn variant="elevated" color="primary" @click="filterMenuOpen = false"> 确定 </VBtn>
</VCardActions>
</VCard>
</VDialog>
</div>
<!-- 移动端头部和筛选区域 -->
<div class="d-block d-sm-none">
<!-- 移动端头部 -->
<div class="view-header mb-3">
@@ -560,81 +518,25 @@ function loadMore({ done }: { done: any }) {
<!-- 筛选图标按钮区域 -->
<div class="filter-buttons-grid w-100">
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('site')">
<VIcon icon="mdi-server" class="filter-icon"></VIcon>
<span class="filter-label">站点</span>
<VBtn
v-for="(title, key) in filterTitles"
v-show="filterOptions[key].length > 0"
variant="text"
color="primary"
class="filter-btn-mobile"
@click="toggleFilterMenu(key)"
>
<VIcon :icon="getFilterIcon(key)" class="filter-icon"></VIcon>
<span class="filter-label">
{{ title }}
</span>
<VBadge
v-if="filterForm.site.length > 0"
:content="filterForm.site.length"
v-if="filterForm[key].length > 0"
:content="filterForm[key].length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('season')">
<VIcon icon="mdi-movie-open" class="filter-icon"></VIcon>
<span class="filter-label">季集</span>
<VBadge
v-if="filterForm.season.length > 0"
:content="filterForm.season.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('freeState')">
<VIcon icon="mdi-gift" class="filter-icon"></VIcon>
<span class="filter-label">促销状态</span>
<VBadge
v-if="filterForm.freeState.length > 0"
:content="filterForm.freeState.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('resolution')">
<VIcon icon="mdi-video" class="filter-icon"></VIcon>
<span class="filter-label">视频质量</span>
<VBadge
v-if="filterForm.resolution.length > 0"
:content="filterForm.resolution.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('videoCode')">
<VIcon icon="mdi-quality-high" class="filter-icon"></VIcon>
<span class="filter-label">视频编码</span>
<VBadge
v-if="filterForm.videoCode.length > 0"
:content="filterForm.videoCode.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('releaseGroup')">
<VIcon icon="mdi-account-group" class="filter-icon"></VIcon>
<span class="filter-label">制作组</span>
<VBadge
v-if="filterForm.releaseGroup.length > 0"
:content="filterForm.releaseGroup.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
offset-x="-20"
offset-y="-10"
></VBadge>
</VBtn>
</div>
@@ -642,6 +544,51 @@ function loadMore({ done }: { done: any }) {
</div>
</div>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="400px" location="center">
<VCard>
<VCardTitle class="py-2 d-flex align-center">
<VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
<span>{{ currentFilterTitle }} 筛选</span>
<VSpacer />
<VBtn
v-if="filterForm[currentFilter].length > 0"
variant="text"
size="small"
color="error"
@click="clearFilter(currentFilter)"
>
清除
</VBtn>
<VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)"> 全选 </VBtn>
</VCardTitle>
<VDivider />
<VCardText class="filter-menu-content pt-4">
<VChipGroup v-model="filterForm[currentFilter]" column multiple class="filter-options">
<VChip
v-for="option in currentFilterOptions"
:key="option"
:value="option"
filter
variant="elevated"
class="ma-1 filter-chip"
size="small"
>
{{ option }}
</VChip>
</VChipGroup>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn variant="elevated" color="primary" @click="filterMenuOpen = false"> 确定 </VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 资源列表 -->
<VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-hidden" @load="loadMore">
<template #loading />
<template #empty />
@@ -666,6 +613,8 @@ function loadMore({ done }: { done: any }) {
}
.view-header {
background-color: rgb(var(--v-theme-surface));
border-radius: 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
overflow: hidden;
}

134
src/views/torrent/TorrentRowListView.vue
View File

@@ -408,6 +408,7 @@ function toggleFilterMenu(key: string) {
<!-- 筛选按钮 -->
<VBtn
v-for="(title, key) in filterTitles"
v-show="filterOptions[key].length > 0"
:key="key"
variant="tonal"
size="small"
@@ -439,6 +440,27 @@ function toggleFilterMenu(key: string) {
</div>
</div>
<!-- 已选择的过滤项显示 -->
<div v-if="getFilterCount > 0" class="selected-filters mb-3 d-none d-sm-block">
<div class="d-flex flex-wrap align-center">
<template v-for="(values, key) in getSelectedFilters" :key="key">
<VChip
v-for="(value, index) in values"
:key="`${key}-${index}`"
color="primary"
size="small"
closable
variant="elevated"
class="me-1 mb-1 mt-1 filter-tag"
@click:close="removeFilter(key, value)"
>
<VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
<strong>{{ filterTitles[key] }}:</strong> {{ value }}
</VChip>
</template>
</div>
</div>
<!-- 移动端头部和筛选区域 -->
<div class="d-block d-sm-none">
<!-- 移动端头部 -->
@@ -471,81 +493,25 @@ function toggleFilterMenu(key: string) {
<!-- 筛选图标按钮区域 -->
<div class="filter-buttons-grid w-100">
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('site')">
<VIcon icon="mdi-server" class="filter-icon"></VIcon>
<span class="filter-label">站点</span>
<VBtn
v-for="(title, key) in filterTitles"
v-show="filterOptions[key].length > 0"
variant="text"
color="primary"
class="filter-btn-mobile"
@click="toggleFilterMenu(key)"
>
<VIcon :icon="getFilterIcon(key)" class="filter-icon"></VIcon>
<span class="filter-label">
{{ title }}
</span>
<VBadge
v-if="filterForm.site.length > 0"
:content="filterForm.site.length"
v-if="filterForm[key].length > 0"
:content="filterForm[key].length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('season')">
<VIcon icon="mdi-movie-open" class="filter-icon"></VIcon>
<span class="filter-label">季集</span>
<VBadge
v-if="filterForm.season.length > 0"
:content="filterForm.season.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('freeState')">
<VIcon icon="mdi-gift" class="filter-icon"></VIcon>
<span class="filter-label">促销状态</span>
<VBadge
v-if="filterForm.freeState.length > 0"
:content="filterForm.freeState.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('resolution')">
<VIcon icon="mdi-video" class="filter-icon"></VIcon>
<span class="filter-label">视频质量</span>
<VBadge
v-if="filterForm.resolution.length > 0"
:content="filterForm.resolution.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('videoCode')">
<VIcon icon="mdi-quality-high" class="filter-icon"></VIcon>
<span class="filter-label">视频编码</span>
<VBadge
v-if="filterForm.videoCode.length > 0"
:content="filterForm.videoCode.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
></VBadge>
</VBtn>
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('releaseGroup')">
<VIcon icon="mdi-account-group" class="filter-icon"></VIcon>
<span class="filter-label">制作组</span>
<VBadge
v-if="filterForm.releaseGroup.length > 0"
:content="filterForm.releaseGroup.length"
color="primary"
location="top end"
offset-x="2"
offset-y="2"
offset-x="-20"
offset-y="-10"
></VBadge>
</VBtn>
</div>
@@ -553,27 +519,6 @@ function toggleFilterMenu(key: string) {
</div>
</div>
<!-- 已选择的过滤项显示 -->
<div v-if="getFilterCount > 0" class="selected-filters mb-3">
<div class="d-flex flex-wrap align-center">
<template v-for="(values, key) in getSelectedFilters" :key="key">
<VChip
v-for="(value, index) in values"
:key="`${key}-${index}`"
color="primary"
size="small"
closable
variant="elevated"
class="me-1 mb-1 filter-tag"
@click:close="removeFilter(key, value)"
>
<VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
<strong>{{ filterTitles[key] }}:</strong> {{ value }}
</VChip>
</template>
</div>
</div>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="400px" location="center">
<VCard>
@@ -592,9 +537,7 @@ function toggleFilterMenu(key: string) {
</VBtn>
<VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)"> 全选 </VBtn>
</VCardTitle>
<VDivider />
<VCardText class="filter-menu-content pt-4">
<VChipGroup v-model="filterForm[currentFilter]" column multiple class="filter-options">
<VChip
@@ -610,7 +553,6 @@ function toggleFilterMenu(key: string) {
</VChip>
</VChipGroup>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn variant="elevated" color="primary" @click="filterMenuOpen = false"> 确定 </VBtn>