优化 TorrentCard 和 TorrentItem 组件的样式,调整过滤器相关 UI 组件的显示效果

This commit is contained in:
jxxghp
2025-03-31 13:03:56 +08:00
parent 7d1ff9876f
commit b70d03e86b
4 changed files with 16 additions and 68 deletions

View File

@@ -103,13 +103,12 @@ onMounted(() => {
</script>
<template>
<div>
<div class="h-full">
<VCard
:width="props.width || '100%'"
height="300px"
:variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
@click="handleAddDownload(props.torrent)"
class="torrent-card"
class="torrent-card h-full"
:class="{ 'downloaded-card': downloaded.includes(torrent?.enclosure || '') }"
>
<!-- 优惠标签 -->
@@ -164,7 +163,7 @@ onMounted(() => {
<!-- 种子描述 -->
<div
v-if="meta?.subtitle || torrent?.description"
class="torrent-desc"
class="torrent-desc grow"
:title="meta?.subtitle || torrent?.description"
>
{{ meta?.subtitle || torrent?.description }}
@@ -457,7 +456,6 @@ onMounted(() => {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 4em;
margin-bottom: 8px;
}

View File

@@ -10,9 +10,6 @@ const props = defineProps({
torrent: Object as PropType<Context>,
})
// 更多来源界面
const showMoreTorrents = ref(false)
// 种子信息
const torrent = ref(props.torrent?.torrent_info)
@@ -245,7 +242,6 @@ onMounted(() => {
padding: 12px;
background-color: rgb(var(--v-theme-surface));
box-shadow: none;
border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
}
.torrent-item:hover {

View File

@@ -62,15 +62,6 @@ const filterOptions: Record<string, string[]> = reactive({
releaseGroup: [] as string[],
})
// 非空值的过滤选项
const filterOptionsNotEmpty = computed(() => {
const options: Record<string, string[]> = {}
for (const key in filterOptions) {
if (filterOptions[key].length > 0) options[key] = filterOptions[key]
}
return options
})
// 完整的数据列表
let dataList: SearchTorrent[]
// 显示用的数据列表
@@ -442,7 +433,7 @@ function loadMore({ done }: { done: any }) {
rounded="pill"
>
{{ title }}
<VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
<VChip v-if="filterForm[key].length > 0" size="small" color="primary" class="ms-1" variant="elevated">{{
filterForm[key].length
}}</VChip>
</VBtn>
@@ -477,7 +468,7 @@ function loadMore({ done }: { done: any }) {
class="me-1 mt-2 filter-tag"
@click:close="removeFilter(key, value)"
>
<VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
<VIcon size="small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
<strong>{{ filterTitles[key] }}:</strong> {{ value }}
</VChip>
</template>
@@ -495,7 +486,7 @@ function loadMore({ done }: { done: any }) {
<VChip
color="primary"
variant="elevated"
size="x-small"
size="small"
class="search-count me-auto"
prepend-icon="mdi-magnify"
>
@@ -526,7 +517,7 @@ function loadMore({ done }: { done: any }) {
class="filter-btn-mobile"
@click="toggleFilterMenu(key)"
>
<VIcon :icon="getFilterIcon(key)" class="filter-icon"></VIcon>
<VIcon :icon="getFilterIcon(key)" class="filter-icon me-1"></VIcon>
<span class="filter-label">
{{ title }}
</span>
@@ -765,7 +756,7 @@ function loadMore({ done }: { done: any }) {
}
.filter-label {
font-size: 0.7rem;
font-size: 0.8rem;
text-align: center;
}

View File

@@ -60,15 +60,6 @@ const filterOptions: Record<string, string[]> = reactive({
releaseGroup: [] as string[],
})
// 非空值的过滤选项
const filterOptionsNotEmpty = computed(() => {
const options: Record<string, string[]> = {}
for (const key in filterOptions) {
if (filterOptions[key].length > 0) options[key] = filterOptions[key]
}
return options
})
// 对季过滤选项进行排序
const sortSeasonFilterOptions = computed(() => {
// 预解析所有选项
@@ -187,13 +178,6 @@ const sortSeasonFilterOptions = computed(() => {
return parsedOptions.map(option => option.original)
})
// 列表样式
const listStyle = computed(() => {
return appMode
? 'height: calc(100vh - 7.5rem - env(safe-area-inset-bottom) - 3.5rem)'
: 'height: calc(100vh - 6.5rem - env(safe-area-inset-bottom)'
})
// 排序字段
const sortField = ref('default')
@@ -277,7 +261,6 @@ watchEffect(() => {
if (props.items?.length) {
// 首先收集所有过滤选项
props.items.forEach(data => {
const { meta_info, torrent_info } = data
initOptions(data)
})
@@ -306,19 +289,8 @@ watchEffect(() => {
}
})
// 切换过滤器选项
function toggleFilter(key: string, value: string) {
const index = filterForm[key].indexOf(value)
if (index === -1) {
filterForm[key].push(value)
} else {
filterForm[key].splice(index, 1)
}
}
// 过滤菜单相关
const filterMenuOpen = ref(false)
const filterMenuAnchor = ref(null)
const currentFilter = ref('site')
const currentFilterTitle = computed(() => filterTitles[currentFilter.value])
const currentFilterOptions = computed(() => {
@@ -328,12 +300,6 @@ const currentFilterOptions = computed(() => {
return filterOptions[currentFilter.value]
})
// 打开过滤菜单
function openFilterMenu(key: string) {
currentFilter.value = key
filterMenuOpen.value = true
}
// 给定过滤类型返回不同图标
function getFilterIcon(key: string) {
const icons: Record<string, string> = {
@@ -417,9 +383,9 @@ function toggleFilterMenu(key: string) {
rounded="pill"
>
{{ title }}
<VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
filterForm[key].length
}}</VChip>
<VChip v-if="filterForm[key].length > 0" size="small" color="primary" class="ms-1" variant="elevated">
{{ filterForm[key].length }}
</VChip>
</VBtn>
<!-- 清除全部筛选按钮 -->
@@ -452,7 +418,7 @@ function toggleFilterMenu(key: string) {
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>
<VIcon size="small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
<strong>{{ filterTitles[key] }}:</strong> {{ value }}
</VChip>
</template>
@@ -469,7 +435,7 @@ function toggleFilterMenu(key: string) {
<VChip
color="primary"
variant="elevated"
size="x-small"
size="small"
class="search-count me-auto"
prepend-icon="mdi-magnify"
>
@@ -500,7 +466,7 @@ function toggleFilterMenu(key: string) {
class="filter-btn-mobile"
@click="toggleFilterMenu(key)"
>
<VIcon :icon="getFilterIcon(key)" class="filter-icon"></VIcon>
<VIcon :icon="getFilterIcon(key)" class="filter-icon me-1"></VIcon>
<span class="filter-label">
{{ title }}
</span>
@@ -571,6 +537,7 @@ function toggleFilterMenu(key: string) {
<div v-else class="resource-list">
<div v-for="(item, index) in dataList" :key="`${item.torrent_info?.enclosure || ''}-${index}`">
<TorrentItem :torrent="item" />
<VDivider v-if="index < dataList.length - 1" class="my-2" />
</div>
</div>
</div>
@@ -741,15 +708,11 @@ function toggleFilterMenu(key: string) {
}
.filter-label {
font-size: 0.7rem;
font-size: 0.8rem;
text-align: center;
}
@media (max-width: 600px) {
.filter-btn {
font-size: 0.75rem;
}
.sort-select {
min-width: 100px;
}