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

优化卡片样式，移除多余的圆角设置，提升组件一致性

Browse Source
This commit is contained in:
jxxghp
2025-04-02 10:44:47 +08:00
parent 62db4508da
commit 88f261584f
11 changed files with 113 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/MediaCard.vue
View File

@@ -530,7 +530,7 @@ function onRemoveSubscribe() {
v-bind="hover.props"
:height="props.height"
:width="props.width"
class="outline-none shadow ring-gray-500 rounded-lg"
class="outline-none shadow ring-gray-500"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'ring-1': isImageLoaded,

1
src/components/cards/PersonCard.vue
View File

@@ -77,7 +77,6 @@ function goPersonDetail() {
v-bind="hover.props"
:height="personProps.height"
:width="personProps.width"
class="rounded-lg"
:class="{
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"

2
src/components/cards/PosterCard.vue
View File

@@ -43,7 +43,7 @@ function goPlay(isHovering: boolean | null = false) {
v-bind="hover.props"
:height="props.height"
:width="props.width"
class="outline-none shadow ring-gray-500 rounded-lg"
class="outline-none shadow ring-gray-500"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'ring-1': isImageLoaded,

2
src/components/cards/SubscribeCard.vue
View File

@@ -295,7 +295,7 @@ function onSubscribeEditRemove() {
<VCard
v-bind="hover.props"
:key="props.media?.id"
class="flex flex-col rounded-lg h-full"
class="flex flex-col h-full"
:class="{
'outline-dashed outline-1': props.media?.best_version && imageLoaded,
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,

2
src/components/cards/SubscribeShareCard.vue
View File

@@ -100,7 +100,7 @@ function doDelete() {
<VCard
v-bind="hover.props"
:key="props.media?.id"
class="flex flex-col rounded-lg h-full"
class="flex flex-col h-full"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
}"

2
src/layouts/components/Footer.vue
View File

@@ -61,7 +61,7 @@ const currentPath = computed(() => route.path)
:color="moreActiveState ? 'primary' : ''"
/>
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent">
<VList class="font-bold" lines="one">
<VList class="font-bold" lines="one" elevation="1">
<VListSubheader class="bg-transparent"> 更多 </VListSubheader>
<VListItem
class="pe-20"

36
src/layouts/components/UserProfile.vue
View File

@@ -38,26 +38,24 @@ function logout() {
// 执行重启操作
async function restart() {
{
restartDialog.value = false
// 调用API重启
try {
// 显示等待框
progressDialog.value = true
const result: { [key: string]: any } = await api.get('system/restart')
if (!result?.success) {
// 隐藏等待框
progressDialog.value = false
// 重启不成功
$toast.error(result.message)
return
}
} catch (error) {
console.error(error)
restartDialog.value = false
// 调用API重启
try {
// 显示等待框
progressDialog.value = true
const result: { [key: string]: any } = await api.get('system/restart')
if (!result?.success) {
// 隐藏等待框
progressDialog.value = false
// 重启不成功
$toast.error(result.message)
return
}
// 注销
logout()
} catch (error) {
console.error(error)
}
// 注销
logout()
}
// 显示重启确认对话框
@@ -88,7 +86,7 @@ const userLevel = computed(() => userStore.level)
<VImg :src="avatar" />
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
<VList>
<VList elevation="1">
<!-- 👉 User Avatar & Name -->
<VListItem>
<template #prepend>

4
src/pages/login.vue
View File

@@ -228,7 +228,7 @@ onUnmounted(() => {
</div>
<!-- 登录表单 -->
<div class="auth-wrapper d-flex align-center justify-center">
<VCard class="auth-card px-7 py-3 w-full h-full rounded-lg opacity-85" max-width="24rem">
<VCard class="auth-card px-7 py-3 w-full h-full opacity-85" max-width="24rem">
<VCardItem class="justify-center">
<template #prepend>
<div class="d-flex pe-0">
@@ -289,7 +289,7 @@ onUnmounted(() => {
</template>
<style lang="scss" scoped>
@use '@core/scss/pages/page-auth.scss';
@use '@core/scss/pages/page-auth';
.v-card-item__prepend {
padding-inline-end: 0 !important;

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

@@ -1,5 +1,3 @@
import { VCard } from 'vuetify/lib/components/index.mjs'
export default {
IconBtn: {
icon: true,
@@ -31,6 +29,7 @@ export default {
},
VCard: {
elevation: 0,
rounded: 'lg',
},
VMenu: {
elevation: 0,
@@ -41,9 +40,12 @@ export default {
VBottomSheet: {
elevation: 0,
},
VExpansionPanels: {
elevation: 0,
},
VList: {
color: 'primary',
elevation: 1,
elevation: 0,
},
VPagination: {
activeColor: 'primary',

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

@@ -507,7 +507,7 @@ function loadMore({ done }: { done: any }) {
</div>
<!-- 移动端头部和筛选区域 -->
<VCard class="d-block d-sm-none search-header-mobile rounded-lg">
<VCard class="d-block d-sm-none search-header-mobile">
<!-- 移动端头部 -->
<div class="view-header">
<div class="d-flex align-center flex-wrap pa-2">
@@ -623,32 +623,32 @@ function loadMore({ done }: { done: any }) {
<style scoped>
.search-header {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
}
.view-header {
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
overflow: hidden;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background-color: rgb(var(--v-theme-surface));
}
.sort-container {
border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
padding-right: 12px;
border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.12);
padding-inline-end: 12px;
}
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
gap: 8px;
}
.filter-btn {
min-width: 0;
min-inline-size: 0;
transition: transform 0.2s;
}
@@ -658,21 +658,20 @@ function loadMore({ done }: { done: any }) {
.sort-select {
font-size: 0.9rem;
min-width: 120px;
max-width: 160px;
font-weight: 500;
max-inline-size: 160px;
min-inline-size: 120px;
}
.sort-select :deep(.v-field__input) {
padding-top: 5px;
padding-bottom: 5px;
min-height: 36px;
min-block-size: 36px;
padding-block: 5px;
}
.selected-filters {
background-color: rgba(var(--v-theme-surface-variant), 0.08);
border-radius: 0 0 12px 12px;
overflow: hidden;
border-radius: 0 0 12px 12px;
background-color: rgba(var(--v-theme-surface-variant), 0.08);
}
.filter-menu-content {
@@ -685,24 +684,24 @@ function loadMore({ done }: { done: any }) {
}
.filter-chip {
border: 1px solid rgba(var(--v-theme-primary), 0.2);
margin: 4px;
transition: all 0.2s ease;
background-color: rgba(var(--v-theme-primary), 0.1) !important;
color: rgba(var(--v-theme-on-surface), 0.9) !important;
font-weight: 500;
border: 1px solid rgba(var(--v-theme-primary), 0.2);
transition: all 0.2s ease;
}
.filter-chip:hover {
transform: translateY(-2px);
background-color: rgba(var(--v-theme-primary), 0.15) !important;
transform: translateY(-2px);
}
.filter-chip.v-chip--selected {
background-color: rgba(var(--v-theme-primary), 0.85) !important;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
color: rgb(var(--v-theme-on-primary)) !important;
font-weight: 600;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
}
.filter-tag {
@@ -722,10 +721,10 @@ function loadMore({ done }: { done: any }) {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 600px) {
@media (width <= 600px) {
.sort-select {
min-width: 100px;
max-width: 120px;
max-inline-size: 120px;
min-inline-size: 100px;
}
.filter-btn {
@@ -733,49 +732,50 @@ function loadMore({ done }: { done: any }) {
}
.sort-container {
border-right: none;
padding-right: 0;
margin-bottom: 8px;
width: 100%;
border-inline-end: none;
inline-size: 100%;
margin-block-end: 8px;
padding-inline-end: 0;
}
.sort-select {
width: 100%;
inline-size: 100%;
}
.filter-bar {
width: 100%;
margin-top: 8px;
inline-size: 100%;
margin-block-start: 8px;
}
}
.mobile-sort-select {
min-width: 110px;
max-width: 130px;
max-inline-size: 130px;
min-inline-size: 110px;
}
.filter-buttons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
grid-template-columns: repeat(3, 1fr);
}
.filter-btn-mobile {
height: auto;
min-height: 48px;
padding: 4px 0;
background-color: rgba(var(--v-theme-surface), 1);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 8px;
background-color: rgba(var(--v-theme-surface), 1);
block-size: auto;
min-block-size: 48px;
padding-block: 4px;
padding-inline: 0;
}
.filter-icon {
margin-bottom: 2px;
font-size: 18px;
margin-block-end: 2px;
}
.filter-label {
@@ -785,9 +785,9 @@ function loadMore({ done }: { done: any }) {
.search-header-mobile {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
}
</style>

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

@@ -344,7 +344,7 @@ function toggleFilterMenu(key: string) {
<!-- 搜索头部容器 - 新增，用于固定在顶部 -->
<div class="search-header d-none d-sm-block">
<!-- PC端页面头部和筛选栏 -->
<VCard class="view-header mb-3 rounded-lg">
<VCard class="view-header mb-3">
<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 }} 个资源
@@ -452,7 +452,7 @@ function toggleFilterMenu(key: string) {
</div>
<!-- 移动端头部和筛选区域 -->
<VCard class="d-block d-sm-none search-header-mobile rounded-lg mb-3">
<VCard class="d-block d-sm-none search-header-mobile mb-3">
<!-- 移动端头部 -->
<div class="view-header">
<div class="d-flex align-center flex-wrap pa-2">
@@ -572,30 +572,30 @@ function toggleFilterMenu(key: string) {
<style scoped>
.torrent-view {
position: relative;
height: 100%;
block-size: 100%;
}
.search-header {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
}
.search-header-mobile {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
}
.view-header {
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
box-shadow: none;
overflow: hidden;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background-color: rgb(var(--v-theme-surface));
box-shadow: none;
}
.search-count {
@@ -605,19 +605,20 @@ function toggleFilterMenu(key: string) {
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
gap: 4px;
}
.filter-divider {
width: 1px;
height: 24px;
background-color: rgba(var(--v-theme-on-surface), 0.12);
margin: 0 8px;
block-size: 24px;
inline-size: 1px;
margin-block: 0;
margin-inline: 8px;
}
.filter-btn {
min-width: 0;
min-inline-size: 0;
transition: transform 0.2s;
}
@@ -627,12 +628,12 @@ function toggleFilterMenu(key: string) {
.sort-select {
font-size: 0.875rem;
min-width: 100px;
max-width: 120px;
max-inline-size: 120px;
min-inline-size: 100px;
}
.filter-menu-content {
max-height: 50vh;
max-block-size: 50vh;
overflow-y: auto;
}
@@ -642,24 +643,24 @@ function toggleFilterMenu(key: string) {
}
.filter-chip {
border: 1px solid rgba(var(--v-theme-primary), 0.2);
margin: 4px;
transition: all 0.2s ease;
background-color: rgba(var(--v-theme-primary), 0.1) !important;
color: rgba(var(--v-theme-on-surface), 0.9) !important;
font-weight: 500;
border: 1px solid rgba(var(--v-theme-primary), 0.2);
transition: all 0.2s ease;
}
.filter-chip:hover {
transform: translateY(-2px);
background-color: rgba(var(--v-theme-primary), 0.15) !important;
transform: translateY(-2px);
}
.filter-chip.v-chip--selected {
background-color: rgba(var(--v-theme-primary), 0.85) !important;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
color: rgb(var(--v-theme-on-primary)) !important;
font-weight: 600;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
}
.filter-tag {
@@ -672,16 +673,17 @@ function toggleFilterMenu(key: string) {
}
.selected-filters {
background-color: rgba(var(--v-theme-surface-variant), 0.08);
padding: 8px 12px;
overflow: hidden;
background-color: rgba(var(--v-theme-surface-variant), 0.08);
padding-block: 8px;
padding-inline: 12px;
}
.resource-list-container {
padding: 8px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 12px;
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding: 8px;
}
.resource-list {
@@ -695,36 +697,37 @@ function toggleFilterMenu(key: string) {
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
min-block-size: 300px;
}
.mobile-sort-select {
min-width: 110px;
max-width: 130px;
max-inline-size: 130px;
min-inline-size: 110px;
}
.filter-buttons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
grid-template-columns: repeat(3, 1fr);
}
.filter-btn-mobile {
height: auto;
min-height: 48px;
padding: 4px 0;
background-color: rgba(var(--v-theme-surface), 1);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 8px;
background-color: rgba(var(--v-theme-surface), 1);
block-size: auto;
min-block-size: 48px;
padding-block: 4px;
padding-inline: 0;
}
.filter-icon {
margin-bottom: 2px;
font-size: 18px;
margin-block-end: 2px;
}
.filter-label {
@@ -732,9 +735,9 @@ function toggleFilterMenu(key: string) {
text-align: center;
}
@media (max-width: 600px) {
@media (width <= 600px) {
.sort-select {
min-width: 100px;
min-inline-size: 100px;
}
}
</style>