From 2797102de8bf143c4c1cf0297c0a079f95ee9d11 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Tue, 1 Apr 2025 03:51:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B8=83=E5=B0=94=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E9=85=8D=E7=BD=AE=E9=A1=B9=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E6=AD=8C=E6=9B=B2=E5=88=97=E8=A1=A8=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E5=8A=9F=E8=83=BD=EF=BC=9B=E4=BC=98=E5=8C=96=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DynamicForm.vue                | 21 +++++++++++++++++--
 src/data/VTsuruTypes.ts                       |  5 +++++
 .../TraditionalSongListTemplate.vue           | 20 ++++++++++++++----
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/DynamicForm.vue b/src/components/DynamicForm.vue
index d5ae2b1..973313a 100644
--- a/src/components/DynamicForm.vue
+++ b/src/components/DynamicForm.vue
@@ -3,7 +3,8 @@
   import { QueryPostAPI } from '@/api/query';
   import { ConfigItemDefinition, TemplateConfigImageItem } from '@/data/VTsuruTypes';
   import { FILE_BASE_URL, VTSURU_API_URL } from '@/data/constants';
-  import { NButton, NColorPicker, NEmpty, NForm, NFormItem, NGrid, NInput, NInputNumber, NSlider, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
+import { Info24Filled } from '@vicons/fluent';
+  import { NButton, NCheckbox, NColorPicker, NEmpty, NForm, NFormItem, NGrid, NInput, NInputNumber, NSlider, NTooltip, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
   import { onMounted, ref } from 'vue';
 
   const message = useMessage();
@@ -117,8 +118,8 @@
           <NInput
             :value="configData[item.key]"
             :placeholder="item.placeholder"
-            @update:value="configData[item.key] = $event"
             :type="item.inputType"
+            @update:value="configData[item.key] = $event"
           />
         </template>
         <NColorPicker
@@ -141,6 +142,22 @@
           :step="item.step"
           @update:value="configData[item.key] = $event"
         />
+        <template v-else-if="item.type == 'boolean'">
+          <NCheckbox
+            :checked="configData[item.key]"
+            @update:checked="configData[item.key] = $event">
+            启用
+          </NCheckbox>
+          <NTooltip
+            v-if="item.description"
+            placement="top"
+          >
+            <template #trigger>
+              <NIcon :component="Info24Filled" />
+            </template>
+            {{ item.description }}
+          </NTooltip>
+        </template>
         <NUpload
           v-else-if="item.type == 'image'"
           v-model:file-list="fileList[item.key]"
diff --git a/src/data/VTsuruTypes.ts b/src/data/VTsuruTypes.ts
index 0d26a58..9a436d0 100644
--- a/src/data/VTsuruTypes.ts
+++ b/src/data/VTsuruTypes.ts
@@ -103,6 +103,10 @@ export type TemplateConfigSliderNumberItem<T = unknown> = TemplateConfigItemWith
 export type TemplateConfigNumberArrayItem<T = unknown> = TemplateConfigItemWithType<T, number[]> & {
   type: 'numberArray';
 };
+export type TemplateConfigBooleanItem<T = unknown> = TemplateConfigItemWithType<T, boolean> & {
+  type: 'boolean';
+  description?: string; // 可选的描述
+};
 
 export type TemplateConfigImageItem<T = unknown> = TemplateConfigItemWithType<T, string[]> & {
   type: 'image';
@@ -159,6 +163,7 @@ export type ConfigItemDefinition =
   | TemplateConfigImageItem<any>
   | TemplateConfigRenderItem<any> // 包含优化后的 render/onUploaded 方法
   | TemplateConfigSliderNumberItem<any>
+  | TemplateConfigBooleanItem<any>
   | TemplateConfigColorItem<any>;
 
 /**
diff --git a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
index 66904cb..be63ca2 100644
--- a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
+++ b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
@@ -293,6 +293,13 @@ export const Config = defineTemplateConfig([
       config.background = url;
     },
   },
+  {
+    name: '固定歌曲列表高度',
+    type: 'boolean',
+    key: 'fixedHeight',
+    default: true,
+    description: '如果不勾选，歌曲较多时会整个页面滚动, 否则只会滚动歌单部分',
+  },
   {
     name: '标题',
     type: 'string',
@@ -629,15 +636,18 @@ export const Config = defineTemplateConfig([
             <n-button
               class="refresh-button"
               size="small"
-              @click="randomOrder"
               ghost
+              @click="randomOrder"
             >
               随机点歌
             </n-button>
           </n-flex>
 
           <!-- Song Table -->
-          <div class="song-table-wrapper">
+          <div
+            class="song-table-wrapper"
+            :style="{ height: props.config?.fixedHeight ? '55vh' : 'none' }"
+          >
             <table class="song-list-table">
               <thead>
                 <tr>
@@ -718,7 +728,7 @@ export const Config = defineTemplateConfig([
                         size="small"
                         checkable
                         :checked="selectedTag === tag"
-                        @checked-change="selectTag(tag)"
+                        @update:checked="selectTag(tag)"
                       >
                         {{ tag }}
                       </n-tag>
@@ -936,7 +946,7 @@ html.dark .song-list-background-wrapper::before {
   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 */
-
+  min-width: 400px;
   /* Keep scrollbar styles */
   &::-webkit-scrollbar { width: 8px; }
   &::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
@@ -1107,10 +1117,12 @@ html.dark .song-list-container {
   border-radius: 8px;
   /* Scrollbar styling specific to this inner table scroll if needed */
   /* ... */
+
 }
 
 .song-list-table {
   width: 100%; border-collapse: collapse; font-size: 0.9em;
+  min-width: 600px;
 }
 
 .song-list-table thead th {