fix: 调整布局和样式,修复滚动和间距问题

This commit is contained in:
jxxghp
2026-06-04 23:33:20 +08:00
parent 9ebe740c69
commit 8d13f3e5ca
3 changed files with 20 additions and 49 deletions
@@ -459,8 +459,7 @@ export default defineComponent({
.layout-page-content { .layout-page-content {
// display: flex; // display: flex;
// 使用 clip 替代 hidden,避免 Chrome 144+ 滚动锁定问题 overflow: auto;
overflow: clip auto;
.page-content-container { .page-content-container {
inline-size: 100%; inline-size: 100%;
+2 -3
View File
@@ -301,7 +301,7 @@ watch(
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
margin-block-end: 8px; margin-block-end: 12px;
padding-block: 0; padding-block: 0;
padding-inline: 8px; padding-inline: 8px;
@@ -361,8 +361,7 @@ watch(
// 横向滚动会让纵向 visible 被浏览器计算成可裁剪区域,这里用缓冲区承接卡片阴影。 // 横向滚动会让纵向 visible 被浏览器计算成可裁剪区域,这里用缓冲区承接卡片阴影。
margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1); margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1);
-ms-overflow-style: none !important; -ms-overflow-style: none !important;
overflow-x: auto; overflow: auto hidden;
overflow-y: hidden;
overscroll-behavior-x: contain !important; overscroll-behavior-x: contain !important;
padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end); padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end);
padding-inline: 12px; padding-inline: 12px;
+17 -44
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VPullToRefresh } from 'vuetify/labs/VPullToRefresh'
import api from '@/api' import api from '@/api'
import type { DownloadingInfo } from '@/api/types' import type { DownloadingInfo } from '@/api/types'
import NoDataFound from '@/components/NoDataFound.vue' import NoDataFound from '@/components/NoDataFound.vue'
@@ -39,17 +38,6 @@ async function fetchData(_context: KeepAliveRefreshContext = {}) {
} }
} }
// 刷新状态
const loading = ref(false)
// 下拉刷新
function onRefresh() {
loading.value = true
void fetchData().finally(() => {
loading.value = false
})
}
// 过滤数据,管理员用户显示全部,非管理员只显示自己的订阅 // 过滤数据,管理员用户显示全部,非管理员只显示自己的订阅
const filteredDataList = computed(() => { const filteredDataList = computed(() => {
// 从 Store 中获取用户信息 // 从 Store 中获取用户信息
@@ -64,7 +52,7 @@ const { loading: dataLoading } = useDataRefresh(
'downloading-list', 'downloading-list',
fetchData, fetchData,
3000, // 3秒间隔 3000, // 3秒间隔
false // 初始加载交给 keep-alive 页面自身,避免同时发起两次请求 false, // 初始加载交给 keep-alive 页面自身,避免同时发起两次请求
) )
onMounted(fetchData) onMounted(fetchData)
@@ -76,36 +64,21 @@ useKeepAliveRefresh(fetchData, {
<template> <template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VPullToRefresh <ProgressiveCardGrid
v-model="loading" v-if="filteredDataList.length > 0"
class="downloading-refresh-shell" :items="filteredDataList"
@load="onRefresh" :get-item-key="item => item.hash || item.name"
:pull-down-threshold="64" :min-item-width="320"
:estimated-item-height="230"
> >
<ProgressiveCardGrid <template #default="{ item }">
v-if="filteredDataList.length > 0" <DownloadingCard :info="item" :downloader-name="props.name" />
:items="filteredDataList" </template>
:get-item-key="item => item.hash || item.name" </ProgressiveCardGrid>
:min-item-width="320" <NoDataFound
:estimated-item-height="230" v-if="filteredDataList.length === 0 && isRefreshed"
> error-code="404"
<template #default="{ item }"> :error-title="t('downloading.noTask')"
<DownloadingCard :info="item" :downloader-name="props.name" /> :error-description="t('downloading.noTaskDescription')"
</template> />
</ProgressiveCardGrid>
<NoDataFound
v-if="filteredDataList.length === 0 && isRefreshed"
error-code="404"
:error-title="t('downloading.noTask')"
:error-description="t('downloading.noTaskDescription')"
/>
</VPullToRefresh>
</template> </template>
<style lang="scss" scoped>
// VPullToRefresh 自带 overflow: hidden,给下载卡阴影预留裁剪范围内的缓冲区。
.downloading-refresh-shell {
margin: -2rem;
padding: 2rem;
}
</style>