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

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
+1 -1
View File
@@ -530,7 +530,7 @@ function onRemoveSubscribe() {
v-bind="hover.props" v-bind="hover.props"
:height="props.height" :height="props.height"
:width="props.width" :width="props.width"
class="outline-none shadow ring-gray-500 rounded-lg" class="outline-none shadow ring-gray-500"
:class="{ :class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering, 'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'ring-1': isImageLoaded, 'ring-1': isImageLoaded,
-1
View File
@@ -77,7 +77,6 @@ function goPersonDetail() {
v-bind="hover.props" v-bind="hover.props"
:height="personProps.height" :height="personProps.height"
:width="personProps.width" :width="personProps.width"
class="rounded-lg"
:class="{ :class="{
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering, 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}" }"
+1 -1
View File
@@ -43,7 +43,7 @@ function goPlay(isHovering: boolean | null = false) {
v-bind="hover.props" v-bind="hover.props"
:height="props.height" :height="props.height"
:width="props.width" :width="props.width"
class="outline-none shadow ring-gray-500 rounded-lg" class="outline-none shadow ring-gray-500"
:class="{ :class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering, 'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'ring-1': isImageLoaded, 'ring-1': isImageLoaded,
+1 -1
View File
@@ -295,7 +295,7 @@ function onSubscribeEditRemove() {
<VCard <VCard
v-bind="hover.props" v-bind="hover.props"
:key="props.media?.id" :key="props.media?.id"
class="flex flex-col rounded-lg h-full" class="flex flex-col h-full"
:class="{ :class="{
'outline-dashed outline-1': props.media?.best_version && imageLoaded, 'outline-dashed outline-1': props.media?.best_version && imageLoaded,
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering, 'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+1 -1
View File
@@ -100,7 +100,7 @@ function doDelete() {
<VCard <VCard
v-bind="hover.props" v-bind="hover.props"
:key="props.media?.id" :key="props.media?.id"
class="flex flex-col rounded-lg h-full" class="flex flex-col h-full"
:class="{ :class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering, 'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
}" }"
+1 -1
View File
@@ -61,7 +61,7 @@ const currentPath = computed(() => route.path)
:color="moreActiveState ? 'primary' : ''" :color="moreActiveState ? 'primary' : ''"
/> />
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent"> <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> <VListSubheader class="bg-transparent"> 更多 </VListSubheader>
<VListItem <VListItem
class="pe-20" class="pe-20"
+17 -19
View File
@@ -38,26 +38,24 @@ function logout() {
// 执行重启操作 // 执行重启操作
async function restart() { async function restart() {
{ restartDialog.value = false
restartDialog.value = false // 调用API重启
// 调用API重启 try {
try { // 显示等待框
// 显示等待框 progressDialog.value = true
progressDialog.value = true const result: { [key: string]: any } = await api.get('system/restart')
const result: { [key: string]: any } = await api.get('system/restart') if (!result?.success) {
if (!result?.success) { // 隐藏等待框
// 隐藏等待框 progressDialog.value = false
progressDialog.value = false // 重启不成功
// 重启不成功 $toast.error(result.message)
$toast.error(result.message) return
return
}
} catch (error) {
console.error(error)
} }
// 注销 } catch (error) {
logout() console.error(error)
} }
// 注销
logout()
} }
// 显示重启确认对话框 // 显示重启确认对话框
@@ -88,7 +86,7 @@ const userLevel = computed(() => userStore.level)
<VImg :src="avatar" /> <VImg :src="avatar" />
<VMenu activator="parent" width="230" location="bottom end" offset="14px"> <VMenu activator="parent" width="230" location="bottom end" offset="14px">
<VList> <VList elevation="1">
<!-- 👉 User Avatar & Name --> <!-- 👉 User Avatar & Name -->
<VListItem> <VListItem>
<template #prepend> <template #prepend>
+2 -2
View File
@@ -228,7 +228,7 @@ onUnmounted(() => {
</div> </div>
<!-- 登录表单 --> <!-- 登录表单 -->
<div class="auth-wrapper d-flex align-center justify-center"> <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"> <VCardItem class="justify-center">
<template #prepend> <template #prepend>
<div class="d-flex pe-0"> <div class="d-flex pe-0">
@@ -289,7 +289,7 @@ onUnmounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@core/scss/pages/page-auth.scss'; @use '@core/scss/pages/page-auth';
.v-card-item__prepend { .v-card-item__prepend {
padding-inline-end: 0 !important; padding-inline-end: 0 !important;
+5 -3
View File
@@ -1,5 +1,3 @@
import { VCard } from 'vuetify/lib/components/index.mjs'
export default { export default {
IconBtn: { IconBtn: {
icon: true, icon: true,
@@ -31,6 +29,7 @@ export default {
}, },
VCard: { VCard: {
elevation: 0, elevation: 0,
rounded: 'lg',
}, },
VMenu: { VMenu: {
elevation: 0, elevation: 0,
@@ -41,9 +40,12 @@ export default {
VBottomSheet: { VBottomSheet: {
elevation: 0, elevation: 0,
}, },
VExpansionPanels: {
elevation: 0,
},
VList: { VList: {
color: 'primary', color: 'primary',
elevation: 1, elevation: 0,
}, },
VPagination: { VPagination: {
activeColor: 'primary', activeColor: 'primary',
+42 -42
View File
@@ -507,7 +507,7 @@ function loadMore({ done }: { done: any }) {
</div> </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="view-header">
<div class="d-flex align-center flex-wrap pa-2"> <div class="d-flex align-center flex-wrap pa-2">
@@ -623,32 +623,32 @@ function loadMore({ done }: { done: any }) {
<style scoped> <style scoped>
.search-header { .search-header {
position: sticky; position: sticky;
top: 0;
z-index: 10; z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
} }
.view-header { .view-header {
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
overflow: hidden; overflow: hidden;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background-color: rgb(var(--v-theme-surface));
} }
.sort-container { .sort-container {
border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12); border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.12);
padding-right: 12px; padding-inline-end: 12px;
} }
.filter-bar { .filter-bar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px;
align-items: center; align-items: center;
gap: 8px;
} }
.filter-btn { .filter-btn {
min-width: 0; min-inline-size: 0;
transition: transform 0.2s; transition: transform 0.2s;
} }
@@ -658,21 +658,20 @@ function loadMore({ done }: { done: any }) {
.sort-select { .sort-select {
font-size: 0.9rem; font-size: 0.9rem;
min-width: 120px;
max-width: 160px;
font-weight: 500; font-weight: 500;
max-inline-size: 160px;
min-inline-size: 120px;
} }
.sort-select :deep(.v-field__input) { .sort-select :deep(.v-field__input) {
padding-top: 5px; min-block-size: 36px;
padding-bottom: 5px; padding-block: 5px;
min-height: 36px;
} }
.selected-filters { .selected-filters {
background-color: rgba(var(--v-theme-surface-variant), 0.08);
border-radius: 0 0 12px 12px;
overflow: hidden; overflow: hidden;
border-radius: 0 0 12px 12px;
background-color: rgba(var(--v-theme-surface-variant), 0.08);
} }
.filter-menu-content { .filter-menu-content {
@@ -685,24 +684,24 @@ function loadMore({ done }: { done: any }) {
} }
.filter-chip { .filter-chip {
border: 1px solid rgba(var(--v-theme-primary), 0.2);
margin: 4px; margin: 4px;
transition: all 0.2s ease;
background-color: rgba(var(--v-theme-primary), 0.1) !important; background-color: rgba(var(--v-theme-primary), 0.1) !important;
color: rgba(var(--v-theme-on-surface), 0.9) !important; color: rgba(var(--v-theme-on-surface), 0.9) !important;
font-weight: 500; font-weight: 500;
border: 1px solid rgba(var(--v-theme-primary), 0.2); transition: all 0.2s ease;
} }
.filter-chip:hover { .filter-chip:hover {
transform: translateY(-2px);
background-color: rgba(var(--v-theme-primary), 0.15) !important; background-color: rgba(var(--v-theme-primary), 0.15) !important;
transform: translateY(-2px);
} }
.filter-chip.v-chip--selected { .filter-chip.v-chip--selected {
background-color: rgba(var(--v-theme-primary), 0.85) !important; 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; color: rgb(var(--v-theme-on-primary)) !important;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
} }
.filter-tag { .filter-tag {
@@ -722,10 +721,10 @@ function loadMore({ done }: { done: any }) {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} }
@media (max-width: 600px) { @media (width <= 600px) {
.sort-select { .sort-select {
min-width: 100px; max-inline-size: 120px;
max-width: 120px; min-inline-size: 100px;
} }
.filter-btn { .filter-btn {
@@ -733,49 +732,50 @@ function loadMore({ done }: { done: any }) {
} }
.sort-container { .sort-container {
border-right: none; border-inline-end: none;
padding-right: 0; inline-size: 100%;
margin-bottom: 8px; margin-block-end: 8px;
width: 100%; padding-inline-end: 0;
} }
.sort-select { .sort-select {
width: 100%; inline-size: 100%;
} }
.filter-bar { .filter-bar {
width: 100%; inline-size: 100%;
margin-top: 8px; margin-block-start: 8px;
} }
} }
.mobile-sort-select { .mobile-sort-select {
min-width: 110px; max-inline-size: 130px;
max-width: 130px; min-inline-size: 110px;
} }
.filter-buttons-grid { .filter-buttons-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px; gap: 4px;
grid-template-columns: repeat(3, 1fr);
} }
.filter-btn-mobile { .filter-btn-mobile {
height: auto;
min-height: 48px;
padding: 4px 0;
background-color: rgba(var(--v-theme-surface), 1);
border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08); 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 { .filter-icon {
margin-bottom: 2px;
font-size: 18px; font-size: 18px;
margin-block-end: 2px;
} }
.filter-label { .filter-label {
@@ -785,9 +785,9 @@ function loadMore({ done }: { done: any }) {
.search-header-mobile { .search-header-mobile {
position: sticky; position: sticky;
top: 0;
z-index: 10; z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
} }
</style> </style>
+42 -39
View File
@@ -344,7 +344,7 @@ function toggleFilterMenu(key: string) {
<!-- 搜索头部容器 - 新增用于固定在顶部 --> <!-- 搜索头部容器 - 新增用于固定在顶部 -->
<div class="search-header d-none d-sm-block"> <div class="search-header d-none d-sm-block">
<!-- PC端页面头部和筛选栏 --> <!-- 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"> <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"> <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
{{ dataList.length }} 个资源 {{ dataList.length }} 个资源
@@ -452,7 +452,7 @@ function toggleFilterMenu(key: string) {
</div> </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="view-header">
<div class="d-flex align-center flex-wrap pa-2"> <div class="d-flex align-center flex-wrap pa-2">
@@ -572,30 +572,30 @@ function toggleFilterMenu(key: string) {
<style scoped> <style scoped>
.torrent-view { .torrent-view {
position: relative; position: relative;
height: 100%; block-size: 100%;
} }
.search-header { .search-header {
position: sticky; position: sticky;
top: 0;
z-index: 10; z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
} }
.search-header-mobile { .search-header-mobile {
position: sticky; position: sticky;
top: 0;
z-index: 10; z-index: 10;
background-color: rgba(var(--v-theme-background), 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-background), 0.95);
inset-block-start: 0;
} }
.view-header { .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; 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 { .search-count {
@@ -605,19 +605,20 @@ function toggleFilterMenu(key: string) {
.filter-bar { .filter-bar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px;
align-items: center; align-items: center;
gap: 4px;
} }
.filter-divider { .filter-divider {
width: 1px;
height: 24px;
background-color: rgba(var(--v-theme-on-surface), 0.12); 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 { .filter-btn {
min-width: 0; min-inline-size: 0;
transition: transform 0.2s; transition: transform 0.2s;
} }
@@ -627,12 +628,12 @@ function toggleFilterMenu(key: string) {
.sort-select { .sort-select {
font-size: 0.875rem; font-size: 0.875rem;
min-width: 100px; max-inline-size: 120px;
max-width: 120px; min-inline-size: 100px;
} }
.filter-menu-content { .filter-menu-content {
max-height: 50vh; max-block-size: 50vh;
overflow-y: auto; overflow-y: auto;
} }
@@ -642,24 +643,24 @@ function toggleFilterMenu(key: string) {
} }
.filter-chip { .filter-chip {
border: 1px solid rgba(var(--v-theme-primary), 0.2);
margin: 4px; margin: 4px;
transition: all 0.2s ease;
background-color: rgba(var(--v-theme-primary), 0.1) !important; background-color: rgba(var(--v-theme-primary), 0.1) !important;
color: rgba(var(--v-theme-on-surface), 0.9) !important; color: rgba(var(--v-theme-on-surface), 0.9) !important;
font-weight: 500; font-weight: 500;
border: 1px solid rgba(var(--v-theme-primary), 0.2); transition: all 0.2s ease;
} }
.filter-chip:hover { .filter-chip:hover {
transform: translateY(-2px);
background-color: rgba(var(--v-theme-primary), 0.15) !important; background-color: rgba(var(--v-theme-primary), 0.15) !important;
transform: translateY(-2px);
} }
.filter-chip.v-chip--selected { .filter-chip.v-chip--selected {
background-color: rgba(var(--v-theme-primary), 0.85) !important; 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; color: rgb(var(--v-theme-on-primary)) !important;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
} }
.filter-tag { .filter-tag {
@@ -672,16 +673,17 @@ function toggleFilterMenu(key: string) {
} }
.selected-filters { .selected-filters {
background-color: rgba(var(--v-theme-surface-variant), 0.08);
padding: 8px 12px;
overflow: hidden; overflow: hidden;
background-color: rgba(var(--v-theme-surface-variant), 0.08);
padding-block: 8px;
padding-inline: 12px;
} }
.resource-list-container { .resource-list-container {
padding: 8px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 12px; border-radius: 12px;
background-color: rgb(var(--v-theme-surface)); background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding: 8px;
} }
.resource-list { .resource-list {
@@ -695,36 +697,37 @@ function toggleFilterMenu(key: string) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 300px; min-block-size: 300px;
} }
.mobile-sort-select { .mobile-sort-select {
min-width: 110px; max-inline-size: 130px;
max-width: 130px; min-inline-size: 110px;
} }
.filter-buttons-grid { .filter-buttons-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px; gap: 4px;
grid-template-columns: repeat(3, 1fr);
} }
.filter-btn-mobile { .filter-btn-mobile {
height: auto;
min-height: 48px;
padding: 4px 0;
background-color: rgba(var(--v-theme-surface), 1);
border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08); 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 { .filter-icon {
margin-bottom: 2px;
font-size: 18px; font-size: 18px;
margin-block-end: 2px;
} }
.filter-label { .filter-label {
@@ -732,9 +735,9 @@ function toggleFilterMenu(key: string) {
text-align: center; text-align: center;
} }
@media (max-width: 600px) { @media (width <= 600px) {
.sort-select { .sort-select {
min-width: 100px; min-inline-size: 100px;
} }
} }
</style> </style>