添加布尔类型配置项，支持固定歌曲列表高度功能；优化动态表单组件

src/App.vue

@@ -50,12 +50,9 @@ const layout = computed(() => {
 watchEffect(() => {
   if (isDarkMode.value) {
     document.documentElement.classList.add('dark');
-    console.log('Added dark class to HTML'); // For debugging
   } else {
     document.documentElement.classList.remove('dark');
-    console.log('Removed dark class from HTML'); // For debugging
   }
-  // If you dynamically apply Naive UI theme to body or provider, do it here too
 });
 
 const themeOverrides = {

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]"

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>;
 
 /**

src/views/VideoCollectPublic.vue

@@ -147,15 +147,16 @@ onUnmounted(() => {
           >
             推荐视频
           </NButton>
+
+          <VueTurnstile
+            ref="turnstile"
+            v-model="token"
+            :site-key="TURNSTILE_KEY"
+            theme="auto"
+            style="text-align: center"
+          />
         </NSpace>
       </NCard>
-      <VueTurnstile
-        ref="turnstile"
-        v-model="token"
-        :site-key="TURNSTILE_KEY"
-        theme="auto"
-        style="text-align: center"
-      />
     </div>
   </NLayoutContent>
 </template>

src/views/ViewerLayout.vue

@@ -1,230 +1,272 @@
-<!-- eslint-disable vue/component-name-in-template-casing -->
 <script setup lang="ts">
-import { NavigateToNewTab, isDarkMode } from '@/Utils'
+  import { NavigateToNewTab, isDarkMode } from '@/Utils';
-import { useAccount } from '@/api/account'
+  import { useAccount } from '@/api/account';
-import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models'
+  import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models';
-import { useUser } from '@/api/user'
+  import { useUser } from '@/api/user';
-import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+  import RegisterAndLogin from '@/components/RegisterAndLogin.vue';
-import { AVATAR_URL, FETCH_API } from '@/data/constants'
+  import { FETCH_API } from '@/data/constants'; // 移除了未使用的 AVATAR_URL
-import { useAuthStore } from '@/store/useAuthStore'
+  import { useAuthStore } from '@/store/useAuthStore';
-import {
+  import {
-  BookCoins20Filled,
+    BookCoins20Filled,
-  CalendarClock24Filled,
+    CalendarClock24Filled,
-  Person48Filled,
+    Person48Filled,
-  VideoAdd20Filled,
+    VideoAdd20Filled,
-  WindowWrench20Filled,
+    WindowWrench20Filled,
-} from '@vicons/fluent'
+  } from '@vicons/fluent';
-import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
+  import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5';
-import { useElementSize, useStorage } from '@vueuse/core'
+  import { useElementSize, useStorage } from '@vueuse/core';
-import {
+  import {
-  MenuOption,
+    MenuOption,
-  NAvatar,
+    NAvatar,
-  NBackTop,
+    NBackTop,
-  NButton,
+    NButton,
-  NEllipsis,
+    NDivider,
-  NIcon,
+    NEllipsis,
-  NLayout,
+    NIcon,
-  NLayoutContent,
+    NLayout,
-  NLayoutHeader,
+    NLayoutContent,
-  NLayoutSider,
+    NLayoutHeader,
-  NMenu,
+    NLayoutSider,
-  NModal,
+    NMenu,
-  NPageHeader,
+    NModal,
-  NResult,
+    NPageHeader,
-  NSpace,
+    NResult,
-  NSpin,
+    NSpace,
-  NSwitch,
+    NSpin,
-  NText,
+    NSwitch,
-  useMessage,
+    NText,
-} from 'naive-ui'
+    useMessage,
-import { computed, h, onMounted, ref } from 'vue'
+    // NSpin 已默认导入，如果单独使用需确保导入
-import { RouterLink, useRoute } from 'vue-router'
+  } from 'naive-ui';
+  import { computed, h, onMounted, ref, watch, defineAsyncComponent } from 'vue'; // 引入 watch
+  import { RouterLink, useRoute, useRouter } from 'vue-router'; // 引入 useRouter
 
-const route = useRoute()
+  // --- 响应式状态和常量 ---
-const id = computed(() => {
+  const route = useRoute();
-  return route.params.id
+  const router = useRouter(); // 获取 router 实例
-})
+  const message = useMessage();
-const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+  const accountInfo = useAccount(); // 获取当前登录账户信息
+  const useAuth = useAuthStore(); // 获取认证状态 Store
 
-const userInfo = ref<UserInfo>()
+  // 路由参数
-const biliUserInfo = ref()
+  const id = computed(() => route.params.id);
-const accountInfo = useAccount()
-const useAuth = useAuthStore()
-const message = useMessage()
 
-const notfount = ref(false)
+  // 主题设置
+  const themeType = useStorage('Settings.Theme', ThemeType.Auto);
 
-const registerAndLoginModalVisiable = ref(false)
+  // 用户和页面状态
-const sider = ref()
+  const userInfo = ref<UserInfo | null>(null); // 用户信息，初始化为 null
-const { width } = useElementSize(sider)
+  const biliUserInfo = ref<any>(null); // B站用户信息
-const windowWidth = window.innerWidth
+  const isLoading = ref(true); // 是否正在加载数据
+  const notFound = ref(false); // 是否未找到用户
 
-function renderIcon(icon: unknown) {
+  // UI 控制状态
-  return () => h(NIcon, null, { default: () => h(icon as any) })
+  const registerAndLoginModalVisiable = ref(false); // 注册/登录弹窗可见性
-}
+  const sider = ref(); // 侧边栏 DOM 引用
-const menuOptions = ref<MenuOption[]>()
+  const { width: siderWidth } = useElementSize(sider); // 侧边栏宽度
-async function RequestBiliUserData() {
+  const windowWidth = window.innerWidth; // 窗口宽度，用于响应式显示
-  await fetch(FETCH_API + `https://workers.vrp.moe/api/bilibili/user-info/${userInfo.value?.biliId}`).then(
+
-    async (respone) => {
+  // 侧边栏菜单项
-      const data = await respone.json()
+  const menuOptions = ref<MenuOption[]>([]); // 初始化为空数组
-      if (data.code == 0) {
+
-        biliUserInfo.value = data.card
+  // --- 方法 ---
+
+  /** 渲染图标的辅助函数 */
+  function renderIcon(icon: unknown) {
+    return () => h(NIcon, null, { default: () => h(icon as any) });
+  }
+
+  /** 根据 userInfo 更新侧边栏菜单 */
+  function updateMenuOptions() {
+    // 如果没有用户信息，清空菜单
+    if (!userInfo.value) {
+      menuOptions.value = [];
+      return;
+    }
+    // 基于 userInfo.extra.enableFunctions 构建菜单项
+    menuOptions.value = [
+      {
+        label: () => h(RouterLink, { to: { name: 'user-index' } }, { default: () => '主页' }),
+        key: 'user-index', icon: renderIcon(Home),
+        // 主页通常都显示
+        show: true
+      },
+      {
+        label: () => h(RouterLink, { to: { name: 'user-songList' } }, { default: () => '歌单' }),
+        key: 'user-songList', icon: renderIcon(MusicalNote),
+        // 根据用户配置判断是否显示
+        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.SongList)
+      },
+      {
+        label: () => h(RouterLink, { to: { name: 'user-schedule' } }, { default: () => '日程' }),
+        key: 'user-schedule', icon: renderIcon(CalendarClock24Filled),
+        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Schedule)
+      },
+      {
+        label: () => h(RouterLink, { to: { name: 'user-questionBox' } }, { default: () => '棉花糖 (提问箱)' }),
+        key: 'user-questionBox', icon: renderIcon(Chatbox),
+        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.QuestionBox)
+      },
+      {
+        label: () => h(RouterLink, { to: { name: 'user-video-collect' } }, { default: () => '视频征集' }),
+        key: 'user-video-collect', icon: renderIcon(VideoAdd20Filled),
+        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.VideoCollect)
+      },
+      {
+        label: () => h(RouterLink, { to: { name: 'user-goods' } }, { default: () => '积分' }),
+        key: 'user-goods', icon: renderIcon(BookCoins20Filled),
+        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Point)
+      },
+    ].filter(option => option.show !== false) as MenuOption[]; // 过滤掉 show 为 false 的菜单项
+  }
+
+
+  /** 获取 Bilibili 用户信息 */
+  async function RequestBiliUserData() {
+    // 确保 userInfo 和 biliId 存在
+    if (!userInfo.value?.biliId) return;
+
+    try {
+      const response = await fetch(FETCH_API + `https://workers.vrp.moe/api/bilibili/user-info/${userInfo.value.biliId}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.code === 0) {
+        biliUserInfo.value = data.card; // 存储获取到的 B 站信息
       } else {
-        throw new Error('Bili User API Error: ' + data.message)
+        console.error('Bili User API Error:', data.message);
+        // message.warning('获取B站信息失败: ' + data.message) // 可选: 轻微提示用户
+      }
+    } catch (error) {
+      console.error('Failed to fetch Bili user data:', error);
+      // message.error('获取B站信息时网络错误') // 可选: 提示用户网络问题
+    }
+  }
+
+  /** 获取 Vtsuru 用户信息和相关数据 */
+  async function fetchUserData(userId: string | string[] | undefined) {
+    // 验证 userId 的有效性
+    if (!userId || Array.isArray(userId)) {
+      notFound.value = true; // 标记为未找到
+      isLoading.value = false; // 加载结束
+      userInfo.value = null; // 清空用户信息
+      menuOptions.value = []; // 清空菜单
+      console.error("无效的用户 ID:", userId);
+      return;
+    }
+
+    // 重置状态，准备加载新数据
+    isLoading.value = true;
+    notFound.value = false;
+    userInfo.value = null;
+    menuOptions.value = [];
+    biliUserInfo.value = null;
+
+    try {
+      // 调用 API 获取用户信息
+      const fetchedUserInfo = await useUser(userId as string); // 强制转换为 string
+
+      if (!fetchedUserInfo) {
+        // 如果 API 返回 null 或 undefined，则视为未找到
+        notFound.value = true;
+        userInfo.value = null;
+      } else {
+        // 成功获取用户信息
+        userInfo.value = fetchedUserInfo;
+        // 基于新的用户信息更新菜单
+        updateMenuOptions();
+        // 异步获取 B 站信息（不阻塞主流程）
+        await RequestBiliUserData();
+      }
+    } catch (error) {
+      console.error("获取用户信息时出错:", error);
+      message.error("加载用户信息时发生错误");
+      notFound.value = true; // 标记为未找到状态
+      userInfo.value = null;
+    } finally {
+      // 无论成功或失败，加载状态都结束
+      isLoading.value = false;
+    }
+  }
+
+  /** 跳转到 Bilibili 认证用户中心 */
+  function gotoAuthPage() {
+    if (!accountInfo.value?.biliUserAuthInfo) {
+      message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定');
+      return;
+    }
+    NavigateToNewTab('/bili-user'); // 在新标签页打开
+  }
+
+  // --- Watcher ---
+
+  // 监听路由参数 id 的变化
+  watch(
+    () => route.params.id,
+    (newId, oldId) => {
+      // 只有当 newId 有效且与 oldId 不同时才重新加载数据
+      if (newId && newId !== oldId) {
+        fetchUserData(newId);
+      } else if (!newId) {
+        // 如果 id 从路由中移除，处理相应的状态
+        notFound.value = true;
+        isLoading.value = false;
+        userInfo.value = null;
+        menuOptions.value = [];
       }
     },
-  )
+    { immediate: true } // 关键: 组件挂载时立即执行一次 watcher，触发初始数据加载
-}
+  );
-function gotoAuthPage() {
-  if (!accountInfo.value?.biliUserAuthInfo) {
-    message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定')
-    return
-  }
-  /*useAuthStore()
-    .setCurrentAuth(accountInfo.value?.biliUserAuthInfo.token)
-    .then(() => {
-      NavigateToNewTab('/bili-user')
-    })*/
-  NavigateToNewTab('/bili-user')
-}
-onMounted(async () => {
-  userInfo.value = await useUser(id.value?.toString())
-  if (!userInfo.value) {
-    notfount.value = true
-  }
 
-  menuOptions.value = [
+  // --- 组件模板 ---
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-index',
-            },
-          },
-          { default: () => '主页' },
-        ),
-      key: 'user-index',
-      icon: renderIcon(Home),
-    },
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-songList',
-            },
-          },
-          { default: () => '歌单' },
-        ),
-      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) > -1,
-      key: 'user-songList',
-      icon: renderIcon(MusicalNote),
-    },
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-schedule',
-            },
-          },
-          { default: () => '日程' },
-        ),
-      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) > -1,
-      key: 'user-schedule',
-      icon: renderIcon(CalendarClock24Filled),
-    },
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-questionBox',
-            },
-          },
-          { default: () => '棉花糖 (提问箱' },
-        ),
-      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) > -1,
-      key: 'user-questionBox',
-      icon: renderIcon(Chatbox),
-    },
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-video-collect',
-            },
-          },
-          { default: () => '视频征集' },
-        ),
-      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.VideoCollect) ?? -1) > -1,
-      key: 'user-video-collect',
-      icon: renderIcon(VideoAdd20Filled),
-    },
-    {
-      label: () =>
-        h(
-          RouterLink,
-          {
-            to: {
-              name: 'user-goods',
-            },
-          },
-          { default: () => '积分' },
-        ),
-      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.Point) ?? -1) > -1,
-      key: 'user-goods',
-      icon: renderIcon(BookCoins20Filled),
-    },
-  ]
-  await RequestBiliUserData()
-})
 </script>
 
 <template>
+  <!-- 情况 1: 加载完毕，但 URL 中没有提供用户 ID -->
   <NLayoutContent
-    v-if="!id"
+    v-if="!id && !isLoading"
-    style="height: 100vh"
+    class="center-container"
   >
     <NResult
       status="error"
-      title="输入的uId无效"
+      title="未提供用户ID"
-      description="再检查检查"
+      description="请检查访问的URL地址"
     />
   </NLayoutContent>
+
+  <!-- 情况 2: 加载完毕，但未找到指定 ID 的用户 -->
   <NLayoutContent
-    v-else-if="notfount"
+    v-else-if="notFound && !isLoading"
-    style="height: 100vh"
+    class="center-container"
   >
     <NResult
       status="error"
-      title="未找到指定 uId 的用户"
+      title="用户不存在"
-      description="或者是没有进行认证"
+      description="无法找到指定ID的用户，或者该用户未完成认证"
     />
   </NLayoutContent>
+
+  <!-- 情况 3: 存在 ID 且 (正在加载 或 加载成功且找到用户) -->
   <NLayout
     v-else
     style="height: 100vh"
   >
-    <NLayoutHeader style="height: 50px; padding: 5px 15px 5px 15px">
+    <!-- 顶部导航栏 -->
+    <NLayoutHeader class="layout-header">
       <NPageHeader
-        :subtitle="($route.meta.title as string) ?? ''"
+        :subtitle="isLoading ? '加载中...' : ($route.meta.title as string) ?? ''"
-        style="margin-top: 6px"
+        style="width: 100%"
       >
+        <!-- 右侧额外操作区域 -->
         <template #extra>
           <NSpace align="center">
+            <!-- 主题切换开关 -->
             <NSwitch
-              :default-value="!isDarkMode"
+              :value="themeType === ThemeType.Light"
-              @update:value="
+              :disabled="isLoading"
-                (value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
+              title="切换亮/暗色主题"
-              "
+              @update:value="(value) => (themeType = value ? ThemeType.Light : ThemeType.Dark)"
             >
               <template #checked>
                 <NIcon :component="Sunny" />
@@ -233,11 +275,12 @@ onMounted(async () => {
                 <NIcon :component="Moon" />
               </template>
             </NSwitch>
-            <template v-if="accountInfo.id">
+            <!-- 已登录用户操作 -->
+            <template v-if="accountInfo?.id">
               <NSpace>
+                <!-- B站认证中心按钮 (如果已认证) -->
                 <NButton
                   v-if="useAuth.isAuthed || accountInfo.biliUserAuthInfo"
-                  style="right: 0px; position: relative"
                   type="primary"
                   tag="a"
                   href="/bili-user"
@@ -250,8 +293,8 @@ onMounted(async () => {
                   </template>
                   <span v-if="windowWidth >= 768"> 认证用户中心 </span>
                 </NButton>
+                <!-- 主播后台按钮 -->
                 <NButton
-                  style="right: 0px; position: relative"
                   type="primary"
                   size="small"
                   @click="$router.push({ name: 'manage-index' })"
@@ -263,9 +306,9 @@ onMounted(async () => {
                 </NButton>
               </NSpace>
             </template>
+            <!-- 未登录用户操作 -->
             <template v-else>
               <NButton
-                style="right: 0px; position: relative"
                 type="primary"
                 @click="registerAndLoginModalVisiable = true"
               >
@@ -274,146 +317,325 @@ onMounted(async () => {
             </template>
           </NSpace>
         </template>
+        <!-- 页面标题 (网站 Logo) -->
         <template #title>
-          <NButton
+          <span>
-            text
-            tag="a"
-            @click="$router.push({ name: 'index' })"
-          >
             <NText
               strong
-              style="font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)"
+              class="site-title"
             >
               VTSURU
             </NText>
-          </NButton>
+          </span>
         </template>
       </NPageHeader>
     </NLayoutHeader>
+
+    <!-- 主体布局 (包含侧边栏和内容区) -->
     <NLayout
       has-sider
-      style="height: calc(100vh - --vtsuru-header-height)"
+      class="main-layout-body"
     >
+      <!-- 左侧边栏 -->
       <NLayoutSider
         ref="sider"
         show-trigger
-        default-collapsed
         collapse-mode="width"
         :collapsed-width="64"
         :width="180"
         :native-scrollbar="false"
-        style="height: calc(100vh - --vtsuru-header-height)"
+        :default-collapsed="windowWidth < 768"
+        style="height: 100%"
       >
-        <Transition>
+        <!-- 用户头像和昵称 (加载完成后显示) -->
-          <div
+        <div
-            v-if="userInfo?.streamerInfo"
+          v-if="userInfo?.streamerInfo"
-            style="margin-top: 8px"
+          style="margin-top: 8px"
+        >
+          <NSpace
+            vertical
+            justify="center"
+            align="center"
           >
-            <NSpace
+            <NAvatar
-              vertical
+              class="sider-avatar"
-              justify="center"
+              :src="userInfo.streamerInfo.faceUrl"
-              align="center"
+              :img-props="{ referrerpolicy: 'no-referrer' }"
+              round
+              bordered
+              title="前往用户B站主页"
+              @click="NavigateToNewTab(`https://space.bilibili.com/${userInfo.biliId}`)"
+            />
+            <NEllipsis
+              v-if="siderWidth > 100"
+              style="max-width: 100%"
             >
-              <NAvatar
+              <NText strong>
-                :src="userInfo.streamerInfo.faceUrl"
+                {{ userInfo?.streamerInfo.name }}
-                :img-props="{ referrerpolicy: 'no-referrer' }"
+              </NText>
-                round
+            </NEllipsis>
-                bordered
+          </NSpace>
-                :style="{
+        </div>
-                  boxShadow: isDarkMode ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
+        <!-- 侧边栏加载状态 -->
-                }"
+        <div
-              />
+          v-else-if="isLoading"
-              <NEllipsis
+          class="sider-loading"
-                v-if="width > 100"
+        >
-                style="max-width: 100%"
+          <NSpin size="small" />
-              >
+        </div>
-                <NText strong>
+        <NDivider style="margin: 0; margin-top: 5px;" />
-                  {{ userInfo?.streamerInfo.name }}
+        <!-- 导航菜单 -->
-                </NText>
-              </NEllipsis>
-            </NSpace>
-          </div>
-        </Transition>
         <NMenu
-          :default-value="$route.name?.toString()"
+          :value="route.name?.toString()"
           :collapsed-width="64"
           :collapsed-icon-size="22"
           :options="menuOptions"
+          :disabled="isLoading"
+          class="sider-menu"
         />
-        <NSpace
+
-          v-if="width > 150"
+        <!-- 侧边栏底部链接 -->
-          justify="center"
+        <div class="sider-footer">
-          align="center"
+          <!-- 仅在侧边栏展开时显示 -->
-          vertical
+          <NSpace
-        >
+            v-if="siderWidth > 150"
-          <NText depth="3">
+            justify="center"
-            有更多功能建议请
+            align="center"
-            <NButton
+            vertical
-              text
+            size="small"
-              type="info"
+            style="width: 100%;"
-              tag="a"
+          >
-              href="/feedback"
+            <NText
-              target="_blank"
+              depth="3"
+              class="footer-text"
             >
-              反馈
+              有有更多功能建议请 <NButton
-            </NButton>
+                text
-          </NText>
+                type="info"
-          <NText depth="3">
+                tag="a"
-            <NButton
+                href="/feedback"
-              text
+                target="_blank"
-              type="info"
+                size="tiny"
-              tag="a"
+              >
-              href="/about"
+                反馈
-              target="_blank"
+              </NButton>
+            </NText>
+            <NDivider style="margin: 0; width: 100%" />
+            <NText
+              depth="3"
+              class="footer-text"
             >
-              关于本站
+              <NButton
-            </NButton>
+                text
-          </NText>
+                type="info"
-        </NSpace>
+                tag="a"
+                href="/about"
+                target="_blank"
+                size="tiny"
+              >
+                关于本站
+              </NButton>
+            </NText>
+          </NSpace>
+        </div>
       </NLayoutSider>
-      <NLayout style="height: 100%">
+
+      <!-- 右侧内容区域布局容器 -->
+      <NLayout class="content-layout-container">
+        <!-- 全局加载动画 (覆盖内容区) -->
         <div
+          v-if="isLoading"
+          class="loading-container"
+        >
+          <NSpin size="large" />
+        </div>
+        <!-- 实际内容区域 (加载完成且找到用户时显示) -->
+        <div
+          v-else-if="userInfo && !notFound"
           class="viewer-page-content"
           :style="`box-shadow:${isDarkMode ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`"
         >
-          <RouterView
+          <!-- 路由视图和动画 -->
-            v-if="userInfo"
+          <RouterView v-slot="{ Component }">
-            v-slot="{ Component }"
+            <Transition
-          >
+              name="fade-slide"
-            <KeepAlive>
+              mode="out-in"
-              <component
+              :appear="true"
-                :is="Component"
+            >
-                :bili-info="biliUserInfo"
+              <KeepAlive>
-                :user-info="userInfo"
+                <component
-              />
+                  :is="Component"
-            </KeepAlive>
+                  :key="route.fullPath"
+                  :bili-info="biliUserInfo"
+                  :user-info="userInfo"
+                />
+              </KeepAlive>
+            </Transition>
           </RouterView>
-          <template v-else>
+          <NBackTop
-            <NSpin show />
+            :right="40"
-          </template>
+            :bottom="40"
-          <NBackTop />
+            :listen-to="'.viewer-page-content'"
+          />
         </div>
+        <!-- 如果 !isLoading && notFound, 会显示顶部的 NResult，这里不需要 else -->
       </NLayout>
     </NLayout>
   </NLayout>
+
+  <!-- 注册/登录弹窗 -->
   <NModal
     v-model:show="registerAndLoginModalVisiable"
+    preset="card"
     style="width: 500px; max-width: 90vw"
+    title="注册 / 登录"
+    :auto-focus="false"
+    :mask-closable="false"
   >
-    <div>
+    <!-- 异步加载注册登录组件，优化初始加载性能 -->
-      <RegisterAndLogin />
+    <RegisterAndLogin @close="registerAndLoginModalVisiable = false" />
-    </div>
   </NModal>
 </template>
 
 <style lang="stylus" scoped>
-.viewer-page-content{
+// --- CSS 变量定义 ---
+:root {
+  --vtsuru-header-height: 50px; // 顶部导航栏高度
+  --vtsuru-content-padding: 20px; // 内容区域内边距
+}
+
+// --- 布局样式 ---
+.center-container {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.layout-header {
+  height: var(--vtsuru-header-height);
+  padding: 0 15px; // 左右内边距
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--n-border-color); // 底部边框
+  flex-shrink: 0; // 防止头部被压缩
+}
+
+.site-title {
+  font-size: 1.5rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.main-layout-body {
+  height: calc(100vh - var(--vtsuru-header-height)); // 填充剩余高度
+}
+
+.sider-avatar {
+  box-shadow: var(--n-avatar-box-shadow, 0 2px 3px rgba(0, 0, 0, 0.1)); // 使用 Naive UI 变量或默认值
+  cursor: pointer;
+  transition: transform 0.2s ease; // 添加悬浮效果
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
+.sider-username {
+  max-width: 90%;
+  margin: 8px auto 0;
+  font-size: 14px; // 调整字体大小
+}
+
+.sider-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center; // 垂直居中
+  padding: 30px 0; // 增加上下间距
+  height: 98px; // 大致等于头像+昵称的高度，防止跳动
+}
+
+.sider-menu {
+  margin-top: 10px;
+  width: 100%; // 确保菜单宽度正确
+}
+
+.sider-footer {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+  padding: 0 5px; // 左右留白，防止文字贴边
+  box-sizing: border-box;
+}
+
+.footer-text {
+  font-size: 12px;
+}
+
+// --- 内容区域样式 ---
+.content-layout-container {
+  height: 100%;
+  min-height: 100%; // 保证最小高度，防止塌陷
+  overflow: hidden; // 关键: 隐藏此容器自身的滚动条，剪切内部溢出内容
+  position: relative; // 关键: 作为内部绝对定位元素(过渡中的组件)的定位基准
+}
+
+.loading-container {
+  // ... (保持不变) ...
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--n-body-color);
+  position: absolute; // 相对于 content-layout-container 定位
+  top: 0;
+  left: 0;
+  z-index: 5;
+}
+
+.viewer-page-content {
     height: 100%;
-    border-radius: 18px;
+    min-height: 100%; // 同样保证最小高度
+    border-radius: 8px;
     padding: var(--vtsuru-content-padding);
-    height: calc(100vh - var(--vtsuru-header-height));
-    margin-right: 10px;
     box-sizing: border-box;
-    overflow-y: auto;
+    overflow-y: auto; // 允许内容 Y 轴滚动
+    overflow-x: hidden; // 禁止内容 X 轴滚动 (可选，但通常推荐)
+    position: relative; // 为内部非绝对定位的内容提供上下文，例如 NBackTop
+    background-color: var(--n-card-color);
+    box-shadow: var(--content-shadow);
+}
+
+// --- 路由过渡动画 ---
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  // 关键: 相对于 content-layout-container 定位
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; // 让过渡元素也撑满容器高度
+  // 关键: 保持内边距和盒模型一致
+  padding: var(--vtsuru-content-padding);
+  box-sizing: border-box;
+  // 关键: 背景色防止透视
+  background-color: var(--n-card-color); // 使用内容区的背景色
+  z-index: 1;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(15px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+}
+
+// --- 返回顶部按钮 ---
+.n-back-top {
+  z-index: 10; // 确保在最上层
 }
 </style>

src/views/view/QuestionBoxView.vue

@@ -30,11 +30,13 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
 const { biliInfo, userInfo } = defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
 }>()
 
+const nextSendQuestionTime = ref(Date.now())
+const minSendQuestionTime = 30 * 1000 // 30 seconds
+
 const splitter = new GraphemeSplitter()
 
 const message = useMessage()
@@ -64,6 +66,10 @@ async function SendQuestion() {
     message.error('内容最少需要3个字')
     return
   }
+  if (nextSendQuestionTime.value > Date.now()) {
+    message.error('冷却中, 剩余 ' + Math.ceil((nextSendQuestionTime.value - Date.now()) / 1000) + '秒')
+    return
+  }
   isSending.value = true
   await QueryPostAPI<QAInfo>(
     QUESTION_API_URL + 'send',
@@ -81,6 +87,7 @@ async function SendQuestion() {
         message.success('成功发送棉花糖')
         questionMessage.value = ''
         fileList.value = []
+        nextSendQuestionTime.value = Date.now() + minSendQuestionTime
       } else {
         message.error(data.message)
       }
@@ -172,40 +179,50 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div style="max-width: 700px; margin: 0 auto" title="提问">
+  <div
+    style="max-width: 700px; margin: 0 auto"
+    title="提问"
+  >
     <NCard embedded>
       <NSpace vertical>
-        <NCard v-if="tags.length > 0" title="投稿话题 (可选)" size="small">
+        <NCard
+          v-if="tags.length > 0"
+          title="投稿话题 (可选)"
+          size="small"
+        >
           <NSpace>
             <NTag
               v-for="tag in tags"
               :key="tag"
-              @click="onSelectTag(tag)"
               style="cursor: pointer"
               :bordered="false"
               :type="selectedTag == tag ? 'primary' : 'default'"
+              @click="onSelectTag(tag)"
             >
               {{ tag }}
             </NTag>
           </NSpace>
         </NCard>
-        <NSpace align="center" justify="center">
+        <NSpace
+          align="center"
+          justify="center"
+        >
           <NInput
+            v-model:value="questionMessage"
             :disabled="isSelf"
             show-count
             maxlength="5000"
             type="textarea"
             :count-graphemes="countGraphemes"
-            v-model:value="questionMessage"
             style="width: 300px"
           />
           <NUpload
+            v-model:file-list="fileList"
             :max="1"
             accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
             list-type="image-card"
             :disabled="!accountInfo.id || isSelf"
             :default-upload="false"
-            v-model:file-list="fileList"
             @update:file-list="OnFileListChange"
           >
             + 上传图片
@@ -213,14 +230,31 @@ onUnmounted(() => {
         </NSpace>
         <NDivider style="margin: 10px 0 10px 0" />
         <NSpace align="center">
-          <NAlert v-if="!accountInfo.id && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+          <NAlert
+            v-if="!accountInfo.id && !isSelf"
+            type="warning"
+          >
+            只有注册用户才能够上传图片
+          </NAlert>
         </NSpace>
-        <NSpace v-if="accountInfo.id" vertical>
+        <NSpace
-          <NCheckbox :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+          v-if="accountInfo.id"
+          vertical
+        >
+          <NCheckbox
+            v-model:checked="isAnonymous"
+            :disabled="isSelf"
+            label="匿名提问"
+          />
           <NDivider style="margin: 10px 0 10px 0" />
         </NSpace>
         <NSpace justify="center">
-          <NButton :disabled="isSelf" type="primary" :loading="isSending || !token" @click="SendQuestion">
+          <NButton
+            :disabled="isSelf"
+            type="primary"
+            :loading="isSending || !token"
+            @click="SendQuestion"
+          >
             发送
           </NButton>
           <NButton
@@ -233,24 +267,46 @@ onUnmounted(() => {
         </NSpace>
         <VueTurnstile
           ref="turnstile"
-          :site-key="TURNSTILE_KEY"
           v-model="token"
+          :site-key="TURNSTILE_KEY"
           theme="auto"
           style="text-align: center"
         />
-        <NAlert v-if="isSelf" type="warning"> 不能给自己提问 </NAlert>
+        <NAlert
+          v-if="isSelf"
+          type="warning"
+        >
+          不能给自己提问
+        </NAlert>
       </NSpace>
     </NCard>
     <NDivider> 公开回复 </NDivider>
     <NList v-if="publicQuestions.length > 0">
-      <NListItem v-for="item in publicQuestions" :key="item.id">
+      <NListItem
-        <NCard :embedded="!item.isReaded" hoverable size="small">
+        v-for="item in publicQuestions"
+        :key="item.id"
+      >
+        <NCard
+          :embedded="!item.isReaded"
+          hoverable
+          size="small"
+        >
           <template #header>
-            <NSpace :size="0" align="center">
+            <NSpace
-              <NText depth="3" style="font-size: small">
+              :size="0"
+              align="center"
+            >
+              <NText
+                depth="3"
+                style="font-size: small"
+              >
                 <NTooltip>
                   <template #trigger>
-                    <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+                    <NTime
+                      :time="item.sendAt"
+                      :to="Date.now()"
+                      type="relative"
+                    />
                   </template>
                   <NTime />
                 </NTooltip>
@@ -259,12 +315,29 @@ onUnmounted(() => {
           </template>
           <NCard style="text-align: center">
             {{ item.question.message }}
-            <br />
+            <br>
-            <NImage v-if="item.question.image" :src="item.question.image" height="100" lazy />
+            <NImage
+              v-if="item.question.image"
+              :src="item.question.image"
+              height="100"
+              lazy
+            />
           </NCard>
-          <template v-if="item.answer" #footer>
+          <template
-            <NSpace align="center" :size="6" :wrap="false">
+            v-if="item.answer"
-              <NAvatar :src="AVATAR_URL + userInfo?.biliId + '?size=64'" circle :size="45" :img-props="{ referrerpolicy: 'no-referrer' }" />
+            #footer
+          >
+            <NSpace
+              align="center"
+              :size="6"
+              :wrap="false"
+            >
+              <NAvatar
+                :src="AVATAR_URL + userInfo?.biliId + '?size=64'"
+                circle
+                :size="45"
+                :img-props="{ referrerpolicy: 'no-referrer' }"
+              />
               <NDivider vertical />
               <NText style="font-size: 16px">
                 {{ item.answer?.message }}

src/views/view/SongListView.vue

@@ -1,42 +1,44 @@
 <template>
-  <NSpin
+  <div>
-    v-if="isLoading"
+    <NSpin
-    show
+      v-if="isLoading"
-  />
+      show
-  <component
-    :is="selectedTemplate?.component"
-    v-else
-    ref="dynamicConfigRef"
-    :config="selectedTemplate?.settingName ? currentConfig : undefined"
-    :user-info="userInfo"
-    :bili-info="biliInfo"
-    :data="currentData"
-    :live-request-settings="settings"
-    :live-request-active="songsActive"
-    v-bind="$attrs"
-    @request-song="requestSong"
-  />
-  <NButton
-    v-if="selectedTemplate?.settingName && userInfo?.id == accountInfo.id"
-    type="info"
-    size="small"
-    style="position: absolute; right: 32px; top: 20px; z-index: 1000; border: solid 3px #dfdfdf;"
-    @click="showSettingModal = true"
-  >
-    自定义
-  </NButton>
-  <NModal
-    v-model:show="showSettingModal"
-    style="max-width: 90vw; width: 800px;"
-    preset="card"
-    title="设置"
-  >
-    <DynamicForm
-      :name="selectedTemplate?.settingName"
-      :config-data="currentConfig"
-      :config="selectedTemplateConfig"
     />
-  </NModal>
+    <component
+      :is="selectedTemplate?.component"
+      v-else
+      ref="dynamicConfigRef"
+      :config="selectedTemplate?.settingName ? currentConfig : undefined"
+      :user-info="userInfo"
+      :bili-info="biliInfo"
+      :data="currentData"
+      :live-request-settings="settings"
+      :live-request-active="songsActive"
+      v-bind="$attrs"
+      @request-song="requestSong"
+    />
+    <NButton
+      v-if="selectedTemplate?.settingName && userInfo?.id == accountInfo.id"
+      type="info"
+      size="small"
+      style="position: absolute; right: 32px; top: 20px; z-index: 1000; border: solid 3px #dfdfdf;"
+      @click="showSettingModal = true"
+    >
+      自定义
+    </NButton>
+    <NModal
+      v-model:show="showSettingModal"
+      style="max-width: 90vw; width: 800px;"
+      preset="card"
+      title="设置"
+    >
+      <DynamicForm
+        :name="selectedTemplate?.settingName"
+        :config-data="currentConfig"
+        :config="selectedTemplateConfig"
+      />
+    </NModal>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -135,7 +137,8 @@ import { computed, onMounted, ref, watch } from 'vue';
     await DownloadConfig(selectedTemplate.value!.settingName, props.userInfo?.id)
       .then((data) => {
         if (data.msg) {
-          message.error('加载失败: ' + data.msg);
+          //message.error('加载失败: ' + data.msg);
+          console.log('当前模板没有配置, 使用默认配置');
         } else {
           currentConfig.value = data.data;
         }

src/views/view/UserIndexView.vue

@@ -1,9 +1,11 @@
 <template>
-  <component
+  <div>
-    :is="componentType"
+    <component
-    :user-info="userInfo"
+      :is="componentType"
-    :bili-info="biliInfo"
+      :user-info="userInfo"
-  />
+      :bili-info="biliInfo"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/view/VideoCollectView.vue

@@ -39,25 +39,27 @@ async function get() {
 </script>
 
 <template>
-  <NSpin :show="isLoading">
+  <div>
-    <NFlex justify="center">
+    <NSpin :show="isLoading">
-      <NEmpty
+      <NFlex justify="center">
-        v-if="videoTables.length == 0"
+        <NEmpty
-        description="没有正在进行的征集表"
+          v-if="videoTables.length == 0"
-      />
+          description="没有正在进行的征集表"
-      <NList v-else>
+        />
-        <NListItem
+        <NList v-else>
-          v-for="item in videoTables"
+          <NListItem
-          :key="item.id"
+            v-for="item in videoTables"
-        >
+            :key="item.id"
-          <VideoCollectInfoCard
+          >
-            :item="item"
+            <VideoCollectInfoCard
-            can-click
+              :item="item"
-            style="width: 500px; max-width: 70vw"
+              can-click
-            from="user"
+              style="width: 500px; max-width: 70vw"
-          />
+              from="user"
-        </NListItem>
+            />
-      </NList>
+          </NListItem>
-    </NFlex>
+        </NList>
-  </NSpin>
+      </NFlex>
+    </NSpin>
+  </div>
 </template>

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',
@@ -472,10 +479,10 @@ export const Config = defineTemplateConfig([
           <!-- Social Links (Visible on Hover) -->
           <div class="social-links">
             <p class="social-links-title">
-              关于
+              关于我
             </p>
             <p class="social-links-subtitle">
-              {{ props.config?.longDescription }}
+              {{ props.config?.longDescription ?? '暂时没有填写介绍' }}
             </p>
             <div class="social-icons-bar">
               <!-- Add actual icons here -->
@@ -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>
@@ -918,7 +928,7 @@ html.dark .filter-input::placeholder {
   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); /* Optional overlay */
+  background-color: rgba(80, 80, 80, 0.1); /* Optional overlay */
   border-radius: inherit; /* Inherit rounding */
   z-index: 1; /* Below content */
   pointer-events: none;
@@ -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 {