From 3822ab20d5976e3a81ba902092fb0c5f571dbc78 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 2 Apr 2025 12:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=9A=E4=B8=AA=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E7=9A=84=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/browse.vue                         |  4 +-
 src/styles/styles.scss                       | 54 ++++----------------
 src/views/discover/MediaCardListView.vue     |  2 +-
 src/views/discover/PersonCardListView.vue    |  2 +-
 src/views/reorganize/DownloadingListView.vue |  2 +-
 src/views/site/SiteCardListView.vue          | 14 +++--
 src/views/subscribe/SubscribeListView.vue    |  2 +-
 src/views/subscribe/SubscribePopularView.vue |  2 +-
 src/views/subscribe/SubscribeShareView.vue   |  2 +-
 src/views/torrent/TorrentCardListView.vue    |  2 +-
 src/views/user/UserListView.vue              | 24 +++++----
 src/views/workflow/WorkflowListView.vue      | 14 +++--
 12 files changed, 52 insertions(+), 72 deletions(-)

diff --git a/src/pages/browse.vue b/src/pages/browse.vue
index ed250a6b..998c8b34 100644
--- a/src/pages/browse.vue
+++ b/src/pages/browse.vue
@@ -27,10 +27,10 @@ function getApiPath(paths: string[] | string) {
 
 <template>
   <div>
-    <div v-if="title" class="mt-3 md:flex md:items-center md:justify-between">
+    <div v-if="title" class="my-3 md:flex md:items-center md:justify-between">
       <div class="min-w-0 flex-1 mx-0">
         <h2
-          class="mb-4 ms-3 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
+          class="ms-1 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
           data-testid="page-header"
         >
           <span class="text-moviepilot">{{ title }}</span>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 7558cbe9..9f409536 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -12,22 +12,22 @@ html.v-overlay-scroll-blocked body {
   --v-body-scroll-y: 0px !important;
 }
 
-@media (max-width: 768px){
+@media (width <= 768px){
   html.v-overlay-scroll-blocked {
     position: relative;
   }
 }
 
 @mixin hide-scrollbar {
-  scrollbar-width: none;
   -ms-overflow-style: none;
+  scrollbar-width: none;
   
   &::-webkit-scrollbar {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   html,body {
     @include hide-scrollbar;
   }
@@ -39,9 +39,9 @@ html.v-overlay-scroll-blocked body {
 }
 
 #nprogress .peg {
-  width: 5px;
   box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
-      transform: rotate(0deg) translate(0, 0px);
+  inline-size: 5px;
+      transform: rotate(0deg) translate(0, 0);
 }
 
 .v-toast--bottom {
@@ -222,28 +222,28 @@ html.v-overlay-scroll-blocked body {
   padding-block-end: 1rem;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .user-list-container {
     padding: 12px;
   }
 
   .grid-user-card {
+    gap: 1rem;
     grid-template-columns: 1fr;
-    gap: 1rem;
   }
 }
 
-@media (min-width: 601px) and (max-width: 960px) {
+@media (width >= 601px) and (width <= 960px) {
   .grid-user-card{
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }
 }
 
-@media (min-width: 961px) {
+@media (width >= 961px) {
   .grid-user-card {
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   }
 }
 
@@ -294,35 +294,3 @@ html.v-overlay-scroll-blocked body {
   content: '';
   inset: 0;
 }
-
-
-.card-list-container {
-  padding: 20px;
-  margin: 0 auto;
-}
-
-@media (max-width: 600px) {
-  .card-list-container {
-    padding: 12px;
-  }
-}
-
-.page-content-header {
-  margin-bottom: 24px;
-}
-
-.page-content-header-title {
-  display: flex;
-  align-items: center;
-}
-
-.page-content-header-title-icon {
-  margin-right: 12px;
-}
-
-.page-content-header-title-text {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: rgba(var(--v-theme-on-surface), 0.87);
-  margin: 0;
-}
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index 7c24d179..30cc8c1c 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -112,7 +112,7 @@ async function fetchData({ done }: { done: any }) {
   <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
     <template #loading />
     <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
       <MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
     </div>
     <NoDataFound
diff --git a/src/views/discover/PersonCardListView.vue b/src/views/discover/PersonCardListView.vue
index 42e3f639..be8d5e5b 100644
--- a/src/views/discover/PersonCardListView.vue
+++ b/src/views/discover/PersonCardListView.vue
@@ -113,7 +113,7 @@ async function fetchData({ done }: { done: any }) {
   <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
     <template #loading />
     <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
       <PersonCard v-for="data in dataList" :key="data.id" :person="data" />
     </div>
     <NoDataFound
diff --git a/src/views/reorganize/DownloadingListView.vue b/src/views/reorganize/DownloadingListView.vue
index d29e05b9..ed15ea30 100644
--- a/src/views/reorganize/DownloadingListView.vue
+++ b/src/views/reorganize/DownloadingListView.vue
@@ -74,7 +74,7 @@ onUnmounted(() => {
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
   <VPullToRefresh v-model="loading" @load="onRefresh" :pull-down-threshold="64">
-    <div v-if="filteredDataList.length > 0" class="grid gap-3 grid-downloading-card">
+    <div v-if="filteredDataList.length > 0" class="grid gap-4 grid-downloading-card">
       <DownloadingCard v-for="data in filteredDataList" :key="data.hash" :info="data" />
     </div>
     <NoDataFound
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
index cd415cc1..83bdfeaa 100644
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -89,10 +89,14 @@ onActivated(() => {
 <template>
   <div class="card-list-container">
     <!-- 页面标题 -->
-    <div class="page-content-header">
-      <div class="page-content-header-title">
-        <VIcon icon="mdi-web" size="large" color="primary" class="page-content-header-title-icon" />
-        <h1 class="page-content-header-title-text">站点管理</h1>
+    <div class="my-3 md:flex md:items-center md:justify-between">
+      <div class="min-w-0 flex-1 mx-0 flex align-middle">
+        <h2
+          class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
+          <span class="text-moviepilot">站点管理</span>
+        </h2>
       </div>
     </div>
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
@@ -103,7 +107,7 @@ onActivated(() => {
       handle=".cursor-move"
       item-key="id"
       tag="div"
-      :component-data="{ 'class': 'grid gap-3 grid-site-card' }"
+      :component-data="{ 'class': 'grid gap-4 grid-site-card' }"
     >
       <template #item="{ element }">
         <SiteCard :site="element" :data="getUserData(element.domain)" @remove="fetchData" @update="fetchData" />
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index 20c4a710..4efa99dc 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -151,7 +151,7 @@ onActivated(async () => {
     handle=".cursor-move"
     item-key="id"
     tag="div"
-    :component-data="{ class: 'mx-3 grid gap-4 grid-subscribe-card p-1' }"
+    :component-data="{ class: 'grid gap-4 grid-subscribe-card p-1' }"
   >
     <template #item="{ element }">
       <SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />
diff --git a/src/views/subscribe/SubscribePopularView.vue b/src/views/subscribe/SubscribePopularView.vue
index 3c19b8c4..9beca904 100644
--- a/src/views/subscribe/SubscribePopularView.vue
+++ b/src/views/subscribe/SubscribePopularView.vue
@@ -110,7 +110,7 @@ async function fetchData({ done }: { done: any }) {
   <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
     <template #loading />
     <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
       <div v-for="data in dataList" :key="data.tmdb_id || data.douban_id">
         <MediaCard :media="data" />
         <div v-if="data.popularity" class="mt-2 flex flex-row justify-center align-center text-subtitle-2">
diff --git a/src/views/subscribe/SubscribeShareView.vue b/src/views/subscribe/SubscribeShareView.vue
index 9d7c2361..b3cf31a7 100644
--- a/src/views/subscribe/SubscribeShareView.vue
+++ b/src/views/subscribe/SubscribeShareView.vue
@@ -109,7 +109,7 @@ function removeData(id: number) {
   <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
     <template #loading />
     <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card mx-3" tabindex="0">
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">
       <div v-for="data in dataList" :key="data.id">
         <SubscribeShareCard :media="data" @delete="removeData(data.id || 0)" />
       </div>
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index 91888283..c08ccd38 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -609,7 +609,7 @@ function loadMore({ done }: { done: any }) {
   <VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-hidden" @load="loadMore">
     <template #loading />
     <template #empty />
-    <div class="grid gap-3 grid-torrent-card items-start">
+    <div class="grid gap- grid-torrent-card items-start">
       <TorrentCard
         v-for="item in displayDataList"
         :key="`${item.torrent_info.page_url}`"
diff --git a/src/views/user/UserListView.vue b/src/views/user/UserListView.vue
index 3078b820..36041a4f 100644
--- a/src/views/user/UserListView.vue
+++ b/src/views/user/UserListView.vue
@@ -56,10 +56,14 @@ onActivated(() => {
 <template>
   <div class="card-list-container">
     <!-- 页面标题 -->
-    <div class="page-content-header">
-      <div class="page-content-header-title">
-        <VIcon icon="mdi-account-group" size="large" color="primary" class="page-content-header-title-icon" />
-        <h1 class="page-content-header-title-text">用户管理</h1>
+    <div class="my-3 md:flex md:items-center md:justify-between">
+      <div class="min-w-0 flex-1 mx-0 flex align-middle">
+        <h2
+          class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
+          <span class="text-moviepilot">用户管理</span>
+        </h2>
       </div>
     </div>
 
@@ -67,7 +71,7 @@ onActivated(() => {
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
 
     <!-- 用户卡片网格 -->
-    <div v-if="allUsers.length > 0 && isRefreshed" class="grid gap-3 grid-user-card">
+    <div v-if="allUsers.length > 0 && isRefreshed" class="grid gap- grid-user-card">
       <!-- 普通用户卡片 -->
       <UserCard
         v-for="user in allUsers"
@@ -108,14 +112,14 @@ onActivated(() => {
 
 <style scoped>
 .add-user-card {
-  height: 100%;
-  min-height: 160px;
-  background-color: rgba(var(--v-theme-surface), 1);
-  border: 1.5px dashed rgba(var(--v-theme-primary), 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1.5px dashed rgba(var(--v-theme-primary), 0.4);
+  background-color: rgba(var(--v-theme-surface), 1);
+  block-size: 100%;
   cursor: pointer;
+  min-block-size: 160px;
   transition: all 0.3s ease;
 }
 
@@ -132,8 +136,8 @@ onActivated(() => {
 }
 
 .add-user-text {
-  font-size: 1.05rem;
   color: rgba(var(--v-theme-primary), 0.8);
+  font-size: 1.05rem;
   font-weight: 500;
 }
 </style>
diff --git a/src/views/workflow/WorkflowListView.vue b/src/views/workflow/WorkflowListView.vue
index 9b2e4da3..dc444849 100644
--- a/src/views/workflow/WorkflowListView.vue
+++ b/src/views/workflow/WorkflowListView.vue
@@ -45,12 +45,16 @@ onActivated(() => {
 </script>
 
 <template>
-  <div class="card-list-container">
+  <div>
     <!-- 页面标题 -->
-    <div class="page-content-header">
-      <div class="page-content-header-title">
-        <VIcon icon="mdi-state-machine" size="large" color="primary" class="page-content-header-title-icon" />
-        <h1 class="page-content-header-title-text">工作流</h1>
+    <div class="my-3 md:flex md:items-center md:justify-between">
+      <div class="min-w-0 flex-1 mx-0 flex align-middle">
+        <h2
+          class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
+          <span class="text-moviepilot">工作流</span>
+        </h2>
       </div>
     </div>
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />