更新列表歌单样式

src/views/view/songListTemplate/TraditionalSongListTemplate.vue

@@ -146,7 +146,7 @@ const selectTag = (tagName: string) => {
 };
 
 // Select Artist (from table click, unchanged)
-const selectArtist = (artist: string) => {
+const selectArtistFromTable = (artist: string) => {
   selectedArtist.value = artist;
 };
 
@@ -433,13 +433,15 @@ export const Config = defineTemplateConfig([
 </script>
 
 <template>
+  <!-- 新增: 外部背景和模糊容器 -->
   <div
-    class="song-list-template"
+    class="song-list-background-wrapper"
     :style="{
-      backgroundImage: `url(${FILE_BASE_URL + props.config?.background})`,
+      backgroundImage: props.config?.background ? `url(${FILE_BASE_URL + props.config.background})` : 'none',
-      backgroundSize: 'cover', height: '100%', backdropFilter: 'blur(5px)'
     }"
   >
+    <!-- 原始: 滚动和内容容器 -->
+    <div class="song-list-template">
       <div class="profile-card-container">
         <!-- Profile Hover Area (unchanged) -->
         <div
@@ -692,7 +694,7 @@ export const Config = defineTemplateConfig([
                         <span
                           class="artist-link"
                           :title="`筛选: ${artist}`"
-                        @click.stop="selectArtist(artist)"
+                          @click.stop="selectArtistFromTable(artist)"
                         >
                           {{ artist }}
                         </span>
@@ -731,6 +733,7 @@ export const Config = defineTemplateConfig([
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -895,50 +898,82 @@ html.dark .filter-input::placeholder {
   white-space: nowrap;
 }
 
-/* --- Table Styles (mostly unchanged) --- */
+/* --- MODIFIED: Structure Styles --- */
 
-.song-list-template {
+/* --- NEW: Outer Background & Blur Wrapper --- */
+.song-list-background-wrapper {
+  position: relative; /* Anchor for ::before */
   height: calc(100vh - var(--vtsuru-header-height) - var(--vtsuru-content-padding) - var(--vtsuru-content-padding));
-  overflow-y: auto;
+  border-radius: 8px; /* Apply rounding here */
-  border-radius: 8px;
   background-size: cover;
   background-position: center center;
-  position: relative;
+  background-attachment: fixed; /* Keep background fixed */
+  overflow: hidden; /* Clip the ::before pseudo-element */
 }
 
-.song-list-template::before {
+/* Blur effect on the wrapper's ::before */
+.song-list-background-wrapper::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.1); /* Optional overlay */
-  border-radius: inherit;
+  border-radius: inherit; /* Inherit rounding */
-  z-index: 1;
+  z-index: 1; /* Below content */
   pointer-events: none;
 }
 
-html.dark .song-list-template::before {
+html.dark .song-list-background-wrapper::before {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.05); /* Dark mode overlay */
 }
 
+/* --- MODIFIED: Inner Scrolling Container --- */
+.song-list-template {
+  height: 100%; /* Fill the wrapper */
+  overflow-y: auto; /* Enable vertical scrolling for content */
+  position: relative; /* Needed for z-index */
+  z-index: 2; /* Place above the ::before blur layer */
+  background: transparent !important; /* Ensure no background color obscures the wrapper */
+  border-radius: inherit; /* Inherit rounding for scrollbar area */
+
+  /* Keep scrollbar styles */
+  &::-webkit-scrollbar { width: 8px; }
+  &::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
+  &::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
+  &::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
+}
+
+/* Dark mode scrollbar styles for the scrolling container */
+html.dark .song-list-template {
+  &::-webkit-scrollbar-track { background: var(--scrollbar-color); }
+  &::-webkit-scrollbar-thumb { background: var(--scrollbar-color-hover); }
+  &::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-color-active); }
+}
+
+
+/* --- MODIFIED: Main Content Container --- */
 .profile-card-container {
-  position: relative;
+  position: relative; /* Keep for potential absolute children if any */
-  z-index: 2;
+  /* z-index: 2; */ /* Removed: Handled by .song-list-template */
   padding: 20px;
   font-family: sans-serif;
   color: #333333;
+  /* height: 100%; */ /* Removed: Let content define height */
+  min-height: 100%; /* Ensure it tries to fill the scroll container */
+  box-sizing: border-box; /* Include padding in height calculation */
 }
 
 html.dark .profile-card-container {
   color: var(--text-color-1);
 }
 
+/* --- Profile Hover Area Styles (Unchanged) --- */
 .profile-hover-area {
   position: relative; display: flex; align-items: flex-start;
   width: fit-content; min-width: 300px; margin: 0 auto 20px auto;
   padding: 15px; border-radius: 15px;
-  transition: transform 0.4s ease-in-out; z-index: 100;
+  transition: transform 0.4s ease-in-out; z-index: 100; /* High z-index for hover effect */
   box-shadow: var(--box-shadow-1);
   background-color: rgba(255, 255, 255, 0.65);
   border: 1px solid rgba(0, 0, 0, 0.08);
@@ -994,7 +1029,7 @@ html.dark .profile-extra-info {
 .social-links {
   position: absolute; top: 5px; left: calc(100px + 20px + 10px);
   width: 380px; padding: 15px 20px; border-radius: 10px;
-  box-shadow: var(--box-shadow-2); z-index: 20;
+  box-shadow: var(--box-shadow-2); z-index: 20; /* High z-index within hover area */
   background-color: rgba(255, 255, 255, 0.85);
   border: 1px solid rgba(0, 0, 0, 0.1);
   opacity: 0; visibility: hidden; transform: translateX(20px);
@@ -1052,10 +1087,11 @@ html.dark .social-link .arrow { color: var(--text-color-3); }
   left: calc(100px - 60px + 15px);
 }
 
+/* --- Song List Container Styles (Unchanged except background/border) --- */
 .song-list-container {
   padding: 15px 25px; border-radius: 15px; font-family: sans-serif;
   box-shadow: var(--box-shadow-1);
-  background-color: rgba(255, 255, 255, 0.65); /* Matched profile */
+  background-color: rgba(255, 255, 255, 0.50); /* Matched profile */
   border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
@@ -1064,21 +1100,13 @@ html.dark .song-list-container {
   border-color: rgba(255, 255, 255, 0.1);
 }
 
+/* --- Table Styles (Unchanged) --- */
 .song-table-wrapper {
-  overflow-y: auto;
+  overflow-y: auto; /* This overflow handles table content, not main scroll */
-  max-height: calc(100vh - 520px); /* Adjusted height calculation */
+  /* min-height: 200px; */ /* Might not be needed if max-height is set */
-  min-height: 200px;
   border-radius: 8px;
-  &::-webkit-scrollbar { width: 8px; }
+  /* Scrollbar styling specific to this inner table scroll if needed */
-  &::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
+  /* ... */
-  &::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
-  &::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
-}
-
-html.dark .song-table-wrapper {
-  &::-webkit-scrollbar-track { background: var(--scrollbar-color); }
-  &::-webkit-scrollbar-thumb { background: var(--scrollbar-color-hover); }
-  &::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-color-active); }
 }
 
 .song-list-table {
@@ -1086,7 +1114,7 @@ html.dark .song-table-wrapper {
 }
 
 .song-list-table thead th {
-  position: sticky; top: 0; z-index: 1;
+  position: sticky; top: 0; z-index: 1; /* Sticky within .song-table-wrapper */
   padding: 10px 12px; text-align: left; font-weight: 600;
   background-color: rgba(245, 245, 245, 0.8); /* Slightly less transparent */
   backdrop-filter: blur(2px); /* Blur header slightly */
@@ -1095,7 +1123,7 @@ html.dark .song-table-wrapper {
 }
 
 html.dark .song-list-table thead th {
-  background-color: rgba(55, 55, 55, 0.8); /* Dark mode header bg */
+  background-color: rgba(55, 55, 55, 0.85); /* Dark mode header bg */
   border-bottom-color: var(--border-color);
   color: var(--text-color-2);
 }
@@ -1135,7 +1163,7 @@ html.dark .song-name { color: var(--text-color-1); }
 
 .artist-link {
   padding: 1px 0; cursor: pointer; text-decoration: none;
-  color: var(--primary-color); /* Use theme primary for links */
+  color: var(--text-color-2); /* Use theme primary for links */
   transition: color 0.2s ease, text-decoration 0.2s ease;
 }
 .artist-link:hover { text-decoration: underline; }