From 88f261584f80e9ff426694a27df906b4fd0373b6 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 2 Apr 2025 10:44:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8D=A1=E7=89=87=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/MediaCard.vue          |  2 +-
 src/components/cards/PersonCard.vue         |  1 -
 src/components/cards/PosterCard.vue         |  2 +-
 src/components/cards/SubscribeCard.vue      |  2 +-
 src/components/cards/SubscribeShareCard.vue |  2 +-
 src/layouts/components/Footer.vue           |  2 +-
 src/layouts/components/UserProfile.vue      | 36 +++++----
 src/pages/login.vue                         |  4 +-
 src/plugins/vuetify/defaults.ts             |  8 +-
 src/views/torrent/TorrentCardListView.vue   | 84 ++++++++++-----------
 src/views/torrent/TorrentRowListView.vue    | 81 ++++++++++----------
 11 files changed, 113 insertions(+), 111 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 76da3dc0..335fb4f9 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -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,
diff --git a/src/components/cards/PersonCard.vue b/src/components/cards/PersonCard.vue
index f4834de6..71d41c1e 100644
--- a/src/components/cards/PersonCard.vue
+++ b/src/components/cards/PersonCard.vue
@@ -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,
         }"
diff --git a/src/components/cards/PosterCard.vue b/src/components/cards/PosterCard.vue
index 7057257a..dafc9ec3 100644
--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -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,
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index c49d69fd..6b4ccefe 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -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,
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 6425fd97..14da2c67 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -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,
           }"
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 07a9061f..31ad9cfb 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -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"
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index 3f64a0de..6f9b43d1 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -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>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 937df161..1be2fe80 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -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;
diff --git a/src/plugins/vuetify/defaults.ts b/src/plugins/vuetify/defaults.ts
index cc30cda4..2b4b2128 100644
--- a/src/plugins/vuetify/defaults.ts
+++ b/src/plugins/vuetify/defaults.ts
@@ -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',
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index 2976f698..91888283 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -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>
diff --git a/src/views/torrent/TorrentRowListView.vue b/src/views/torrent/TorrentRowListView.vue
index c21ac667..39d472d7 100644
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -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>