mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
fix: 调整布局和样式,修复滚动和间距问题
This commit is contained in:
@@ -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%;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user