GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-12 02:21:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化组件结构，调整 VCard 使用，提升界面一致性和可读性

Browse Source
This commit is contained in:
jxxghp
2025-04-01 13:17:07 +08:00
parent c873787a89
commit ae62847ded
9 changed files with 35 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/FileBrowser.vue
View File

@@ -187,7 +187,7 @@ const fileListStyle = computed(() => {
</script>
<template>
<VCard class="mx-auto" :loading="loading > 0">
<div class="mx-auto" :loading="loading > 0">
<div v-if="activeStorage && item">
<FileToolbar
:item="item"
@@ -229,5 +229,5 @@ const fileListStyle = computed(() => {
/>
</div>
</div>
</VCard>
</div>
</template>

2
src/components/dialog/AddDownloadDialog.vue
View File

@@ -120,7 +120,7 @@ onMounted(() => {
<template>
<VDialog max-width="35rem" scrollable>
<VCard>
<VCardTitle class="py-3">
<VCardTitle class="py-3 me-12">
<VIcon icon="mdi-download" class="me-2" />
<span v-if="title">{{ torrent?.site_name }} - {{ title }}</span>
<span v-else>确认下载</span>

2
src/components/filebrowser/FileList.vue
View File

@@ -533,7 +533,7 @@ onMounted(() => {
</script>
<template>
<VCard class="d-flex flex-column w-full h-full">
<VCard class="d-flex flex-column w-full h-full rounded-t-0 rounded-s-0">
<VToolbar v-if="!loading" density="compact" flat color="gray">
<VTextField
v-if="!isFile"

8
src/components/filebrowser/FileNavigator.vue
View File

@@ -259,7 +259,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
</script>
<template>
<div class="file-navigator" v-if="!isMobile">
<VCard class="file-navigator rounded-t-0 rounded-e-0" v-if="!isMobile">
<div class="tree-container">
<!-- 根目录项 -->
<div
@@ -382,20 +382,19 @@ function getIndentLevel(path: string, ancestorPath: string) {
</div>
</template>
</div>
</div>
</VCard>
</template>
<style lang="scss" scoped>
.file-navigator {
width: 240px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background-color: var(--v-theme-surface);
flex-shrink: 0;
border-bottom-left-radius: 12px;
background: rgb(var(--v-table-header-background));
}
.navigator-header {
@@ -403,7 +402,6 @@ function getIndentLevel(path: string, ancestorPath: string) {
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background-color: var(--v-theme-surface);
}
.tree-container {

2
src/components/filebrowser/FileToolbar.vue
View File

@@ -115,7 +115,7 @@ const sortIcon = computed(() => {
</script>
<template>
<VToolbar flat dense>
<VToolbar flat dense class="rounded-t-lg border-b">
<VToolbarItems class="overflow-hidden">
<VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
<template #activator="{ props }">

35
src/pages/resource.vue
View File

@@ -4,11 +4,6 @@ import api from '@/api'
import type { Context } from '@/api/types'
import TorrentCardListView from '@/views/torrent/TorrentCardListView.vue'
import TorrentRowListView from '@/views/torrent/TorrentRowListView.vue'
import { useDisplay } from 'vuetify'
// APP
const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value
// 路由参数
const route = useRoute()
@@ -80,14 +75,14 @@ function startLoadingProgress() {
}
}
}
// 添加错误处理
progressEventSource.value.onerror = () => {
setTimeout(() => {
stopLoadingProgress()
}, 1000)
}
// 添加安全超时，确保不会永远卡住
setTimeout(() => {
if (progressEventSource.value && progressValue.value < 100) {
@@ -204,7 +199,7 @@ onUnmounted(() => {
</VFadeTransition>
<!-- 精简标题栏 -->
<div v-if="isRefreshed" class="search-header d-flex align-center mb-4">
<VCard v-if="isRefreshed" class="search-header d-flex align-center mb-4">
<div class="search-info-container d-flex align-center flex-wrap">
<div class="search-title text-primary">资源搜索结果</div>
<div class="search-tags d-flex flex-wrap">
@@ -216,9 +211,7 @@ onUnmounted(() => {
<VChip v-if="season" class="search-tag" color="primary" size="small" variant="flat"> 季: {{ season }} </VChip>
</div>
</div>
<VSpacer />
<!-- 重新设计的视图切换按钮 -->
<div class="view-toggle-container">
<div class="view-toggle-buttons">
@@ -230,7 +223,7 @@ onUnmounted(() => {
</button>
</div>
</div>
</div>
</VCard>
<!-- 视图切换加载状态 -->
<VFadeTransition>
@@ -261,10 +254,7 @@ onUnmounted(() => {
<!-- 无数据显示 -->
<div v-else-if="isRefreshed && !isViewChanging" class="d-flex flex-column align-center justify-center py-8">
<NoDataFound
:errorTitle="errorTitle"
:errorDescription="errorDescription"
/>
<NoDataFound :errorTitle="errorTitle" :errorDescription="errorDescription" />
<VBtn class="mt-4" color="primary" prepend-icon="mdi-magnify" to="/"> 返回首页 </VBtn>
</div>
@@ -356,7 +346,6 @@ onUnmounted(() => {
.search-header {
padding: 12px 16px;
background-color: rgb(var(--v-theme-surface));
border-radius: 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
@@ -546,38 +535,38 @@ onUnmounted(() => {
.search-header {
padding: 8px 12px;
}
.search-title {
font-size: 0.95rem;
white-space: nowrap;
}
.search-info-container {
flex: 1;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.search-tags {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
margin-right: 8px;
}
.search-tags::-webkit-scrollbar {
display: none;
}
.view-toggle-container {
flex-shrink: 0;
}
.view-toggle-buttons {
padding: 2px;
}
.view-toggle-btn {
width: 36px;
height: 32px;

2
src/plugins/vuetify/defaults.ts
View File

@@ -30,7 +30,7 @@ export default {
color: 'primary',
},
VCard: {
elevation: 2,
elevation: 1,
},
VChip: {
elevation: 0,

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

@@ -397,12 +397,11 @@ function loadMore({ done }: { done: any }) {
<template>
<div class="search-header d-none d-sm-flex">
<!-- 页面头部和筛选栏 -->
<div class="view-header bg-surface rounded-xl">
<VCard class="view-header rounded-xl">
<div class="d-flex align-center flex-wrap pa-3">
<VChip color="primary" variant="elevated" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
{{ props.items?.length || 0 }} 个资源
</VChip>
<!-- 排序选择 -->
<div class="sort-container me-4">
<VSelect
@@ -438,7 +437,7 @@ function loadMore({ done }: { done: any }) {
<VMenu activator="parent" :close-on-content-click="false">
<VCard max-width="25rem">
<VCardText class="filter-menu-content">
<div class="text-end">
<div class="flex justify-between">
<VBtn variant="text" size="small" color="primary" @click="selectAll(key)"> 全选 </VBtn>
<VBtn
v-if="filterForm[key].length > 0"
@@ -504,13 +503,13 @@ function loadMore({ done }: { done: any }) {
</template>
</div>
</div>
</div>
</VCard>
</div>
<!-- 移动端头部和筛选区域 -->
<div class="d-block d-sm-none search-header-mobile">
<VCard class="d-block d-sm-none search-header-mobile rounded-lg">
<!-- 移动端头部 -->
<div class="view-header mb-2">
<div class="view-header">
<div class="d-flex align-center flex-wrap pa-2">
<div class="d-flex align-center w-100 mb-2">
<VChip
@@ -563,7 +562,7 @@ function loadMore({ done }: { done: any }) {
</div>
</div>
</div>
</div>
</VCard>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
@@ -632,7 +631,6 @@ 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;
}

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

@@ -344,12 +344,11 @@ function toggleFilterMenu(key: string) {
<!-- 搜索头部容器 - 新增，用于固定在顶部 -->
<div class="search-header d-none d-sm-block">
<!-- PC端页面头部和筛选栏 -->
<div class="view-header mb-3">
<VCard class="view-header mb-3 rounded-lg">
<div class="d-flex align-center flex-wrap pa-3">
<VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
{{ dataList.length }} 个资源
</VChip>
<div class="filter-bar">
<!-- 排序选择 -->
<VSelect
@@ -364,9 +363,7 @@ function toggleFilterMenu(key: string) {
prepend-icon="mdi-sort"
>
</VSelect>
<div class="filter-divider"></div>
<!-- 筛选按钮 -->
<VBtn
v-for="(title, key) in filterTitles"
@@ -430,6 +427,7 @@ function toggleFilterMenu(key: string) {
</VBtn>
</div>
</div>
<!-- 已选择的过滤项显示 -->
<div v-if="getFilterCount > 0" class="selected-filters">
<div class="d-flex flex-wrap align-center">
@@ -450,15 +448,15 @@ function toggleFilterMenu(key: string) {
</template>
</div>
</div>
</div>
</VCard>
</div>
<!-- 移动端头部和筛选区域 -->
<div class="d-block d-sm-none search-header-mobile">
<VCard class="d-block d-sm-none search-header-mobile rounded-lg mb-3">
<!-- 移动端头部 -->
<div class="view-header mb-2">
<div class="view-header">
<div class="d-flex align-center flex-wrap pa-2">
<div class="d-flex align-center w-100 mb-2">
<div class="d-flex align-center w-100">
<VChip
color="primary"
variant="elevated"
@@ -484,7 +482,7 @@ function toggleFilterMenu(key: string) {
</div>
<!-- 筛选图标按钮区域 -->
<div class="filter-buttons-grid w-100">
<div class="filter-buttons-grid w-100 mt-2">
<VBtn
v-for="(title, key) in filterTitles"
v-show="filterOptions[key].length > 0"
@@ -509,7 +507,7 @@ function toggleFilterMenu(key: string) {
</div>
</div>
</div>
</div>
</VCard>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
@@ -583,7 +581,6 @@ function toggleFilterMenu(key: string) {
z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px);
}
.search-header-mobile {
@@ -596,7 +593,6 @@ function toggleFilterMenu(key: string) {
.view-header {
background-color: rgb(var(--v-theme-surface));
border-radius: 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
box-shadow: none;
overflow: hidden;