GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-22 16:59:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

改进搜索体验：优化搜索对话框、进度条及无数据提示

Browse Source
This commit is contained in:
madrays
2025-03-30 00:37:48 +08:00
parent 849fad8a8a
commit 43fbc7abd7
3 changed files with 931 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/NoDataFound.vue
View File

@@ -7,25 +7,62 @@ interface Props {
errorCode?: string
errorTitle?: string
errorDescription?: string
size?: number
}
</script>
<template>
<VEmptyState :image="image" size="250">
<template #title>
<div class="mt-8 text-2xl">
{{ props.errorTitle }}
</div>
</template>
<div class="no-data-container">
<VEmptyState :image="image" :size="props.size || 'auto'">
<template #title>
<div class="mt-8 text-2xl">
{{ props.errorTitle }}
</div>
</template>
<template #text>
<div class="text-subtitle mt-3">
{{ props.errorDescription }}
</div>
</template>
<template #text>
<div class="text-subtitle mt-3">
{{ props.errorDescription }}
</div>
</template>
<template #actions>
<slot name="button" />
</template>
</VEmptyState>
<template #actions>
<slot name="button" />
</template>
</VEmptyState>
</div>
</template>
<style scoped>
.no-data-container {
width: 100%;
}
.no-data-container :deep(.v-empty-state) {
width: 100%;
max-width: 100%;
}
.no-data-container :deep(.v-empty-state__media) {
width: 100%;
max-width: 100%;
}
.no-data-container :deep(.v-responsive) {
width: 100%;
max-width: 450px;
margin: 0 auto;
height: auto !important;
}
/* 响应式设计 */
@media (max-width: 768px) {
.no-data-container :deep(.v-responsive) {
max-width: 350px;
}
}
@media (max-width: 480px) {
.no-data-container :deep(.v-responsive) {
max-width: 250px;
}
}
</style>