调整用户页样式, 添加过渡动画

2025-12-06 18:36:55 +08:00 · 2025-04-01 03:10:19 +08:00
parent 574a177f8e
commit 4c188826ac
7 changed files with 676 additions and 385 deletions
--- a/src/App.vue
+++ b/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 = {
--- a/src/views/ViewerLayout.vue
+++ b/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 { useAccount } from '@/api/account'
-import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models'
-import { useUser } from '@/api/user'
-import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
-import { AVATAR_URL, FETCH_API } from '@/data/constants'
-import { useAuthStore } from '@/store/useAuthStore'
-import {
-  BookCoins20Filled,
-  CalendarClock24Filled,
-  Person48Filled,
-  VideoAdd20Filled,
-  WindowWrench20Filled,
-} from '@vicons/fluent'
-import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
-import { useElementSize, useStorage } from '@vueuse/core'
-import {
-  MenuOption,
-  NAvatar,
-  NBackTop,
-  NButton,
-  NEllipsis,
-  NIcon,
-  NLayout,
-  NLayoutContent,
-  NLayoutHeader,
-  NLayoutSider,
-  NMenu,
-  NModal,
-  NPageHeader,
-  NResult,
-  NSpace,
-  NSpin,
-  NSwitch,
-  NText,
-  useMessage,
-} from 'naive-ui'
-import { computed, h, onMounted, ref } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+  import { NavigateToNewTab, isDarkMode } from '@/Utils';
+  import { useAccount } from '@/api/account';
+  import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models';
+  import { useUser } from '@/api/user';
+  import RegisterAndLogin from '@/components/RegisterAndLogin.vue';
+  import { FETCH_API } from '@/data/constants'; // 移除了未使用的 AVATAR_URL
+  import { useAuthStore } from '@/store/useAuthStore';
+  import {
+    BookCoins20Filled,
+    CalendarClock24Filled,
+    Person48Filled,
+    VideoAdd20Filled,
+    WindowWrench20Filled,
+  } from '@vicons/fluent';
+  import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5';
+  import { useElementSize, useStorage } from '@vueuse/core';
+  import {
+    MenuOption,
+    NAvatar,
+    NBackTop,
+    NButton,
+    NDivider,
+    NEllipsis,
+    NIcon,
+    NLayout,
+    NLayoutContent,
+    NLayoutHeader,
+    NLayoutSider,
+    NMenu,
+    NModal,
+    NPageHeader,
+    NResult,
+    NSpace,
+    NSpin,
+    NSwitch,
+    NText,
+    useMessage,
+    // NSpin 已默认导入，如果单独使用需确保导入
+  } 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(() => {
-  return route.params.id
-})
-const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+  // --- 响应式状态和常量 ---
+  const route = useRoute();
+  const router = useRouter(); // 获取 router 实例
+  const message = useMessage();
+  const accountInfo = useAccount(); // 获取当前登录账户信息
+  const useAuth = useAuthStore(); // 获取认证状态 Store

-const userInfo = ref<UserInfo>()
-const biliUserInfo = ref()
-const accountInfo = useAccount()
-const useAuth = useAuthStore()
-const message = useMessage()
+  // 路由参数
+  const id = computed(() => route.params.id);

-const notfount = ref(false)
+  // 主题设置
+  const themeType = useStorage('Settings.Theme', ThemeType.Auto);

-const registerAndLoginModalVisiable = ref(false)
-const sider = ref()
-const { width } = useElementSize(sider)
-const windowWidth = window.innerWidth
+  // 用户和页面状态
+  const userInfo = ref<UserInfo | null>(null); // 用户信息，初始化为 null
+  const biliUserInfo = ref<any>(null); // B站用户信息
+  const isLoading = ref(true); // 是否正在加载数据
+  const notFound = ref(false); // 是否未找到用户

-function renderIcon(icon: unknown) {
-  return () => h(NIcon, null, { default: () => h(icon as any) })
-}
-const menuOptions = ref<MenuOption[]>()
-async function RequestBiliUserData() {
-  await fetch(FETCH_API + `https://workers.vrp.moe/api/bilibili/user-info/${userInfo.value?.biliId}`).then(
-    async (respone) => {
-      const data = await respone.json()
-      if (data.code == 0) {
-        biliUserInfo.value = data.card
+  // UI 控制状态
+  const registerAndLoginModalVisiable = ref(false); // 注册/登录弹窗可见性
+  const sider = ref(); // 侧边栏 DOM 引用
+  const { width: siderWidth } = useElementSize(sider); // 侧边栏宽度
+  const windowWidth = window.innerWidth; // 窗口宽度，用于响应式显示
+
+  // 侧边栏菜单项
+  const menuOptions = ref<MenuOption[]>([]); // 初始化为空数组
+
+  // --- 方法 ---
+
+  /** 渲染图标的辅助函数 */
+  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 = [];
      }
    },
-  )
-}
-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
-  }
+    { immediate: true } // 关键: 组件挂载时立即执行一次 watcher，触发初始数据加载
+  );

-  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"
-    style="height: 100vh"
+    v-if="!id && !isLoading"
+    class="center-container"
  >
    <NResult
      status="error"
-      title="输入的uId无效"
-      description="再检查检查"
+      title="未提供用户ID"
+      description="请检查访问的URL地址"
    />
  </NLayoutContent>
+
+  <!-- 情况 2: 加载完毕，但未找到指定 ID 的用户 -->
  <NLayoutContent
-    v-else-if="notfount"
-    style="height: 100vh"
+    v-else-if="notFound && !isLoading"
+    class="center-container"
  >
    <NResult
      status="error"
-      title="未找到指定 uId 的用户"
-      description="或者是没有进行认证"
+      title="用户不存在"
+      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) ?? ''"
-        style="margin-top: 6px"
+        :subtitle="isLoading ? '加载中...' : ($route.meta.title as string) ?? ''"
+        style="width: 100%"
      >
+        <!-- 右侧额外操作区域 -->
        <template #extra>
          <NSpace align="center">
+            <!-- 主题切换开关 -->
            <NSwitch
-              :default-value="!isDarkMode"
-              @update:value="
-                (value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
-              "
+              :value="themeType === ThemeType.Light"
+              :disabled="isLoading"
+              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
-            text
-            tag="a"
-            @click="$router.push({ name: 'index' })"
-          >
+          <span>
            <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
-            v-if="userInfo?.streamerInfo"
-            style="margin-top: 8px"
+        <!-- 用户头像和昵称 (加载完成后显示) -->
+        <div
+          v-if="userInfo?.streamerInfo"
+          style="margin-top: 8px"
+        >
+          <NSpace
+            vertical
+            justify="center"
+            align="center"
          >
-            <NSpace
-              vertical
-              justify="center"
-              align="center"
+            <NAvatar
+              class="sider-avatar"
+              :src="userInfo.streamerInfo.faceUrl"
+              :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
-                :src="userInfo.streamerInfo.faceUrl"
-                :img-props="{ referrerpolicy: 'no-referrer' }"
-                round
-                bordered
-                :style="{
-                  boxShadow: isDarkMode ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
-                }"
-              />
-              <NEllipsis
-                v-if="width > 100"
-                style="max-width: 100%"
-              >
-                <NText strong>
-                  {{ userInfo?.streamerInfo.name }}
-                </NText>
-              </NEllipsis>
-            </NSpace>
-          </div>
-        </Transition>
+              <NText strong>
+                {{ userInfo?.streamerInfo.name }}
+              </NText>
+            </NEllipsis>
+          </NSpace>
+        </div>
+        <!-- 侧边栏加载状态 -->
+        <div
+          v-else-if="isLoading"
+          class="sider-loading"
+        >
+          <NSpin size="small" />
+        </div>
+        <NDivider style="margin: 0; margin-top: 5px;" />
+        <!-- 导航菜单 -->
        <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"
-          align="center"
-          vertical
-        >
-          <NText depth="3">
-            有更多功能建议请
-            <NButton
-              text
-              type="info"
-              tag="a"
-              href="/feedback"
-              target="_blank"
+
+        <!-- 侧边栏底部链接 -->
+        <div class="sider-footer">
+          <!-- 仅在侧边栏展开时显示 -->
+          <NSpace
+            v-if="siderWidth > 150"
+            justify="center"
+            align="center"
+            vertical
+            size="small"
+            style="width: 100%;"
+          >
+            <NText
+              depth="3"
+              class="footer-text"
            >
-              反馈
-            </NButton>
-          </NText>
-          <NText depth="3">
-            <NButton
-              text
-              type="info"
-              tag="a"
-              href="/about"
-              target="_blank"
+              有有更多功能建议请 <NButton
+                text
+                type="info"
+                tag="a"
+                href="/feedback"
+                target="_blank"
+                size="tiny"
+              >
+                反馈
+              </NButton>
+            </NText>
+            <NDivider style="margin: 0; width: 100%" />
+            <NText
+              depth="3"
+              class="footer-text"
            >
-              关于本站
-            </NButton>
-          </NText>
-        </NSpace>
+              <NButton
+                text
+                type="info"
+                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"
-            v-slot="{ Component }"
-          >
-            <KeepAlive>
-              <component
-                :is="Component"
-                :bili-info="biliUserInfo"
-                :user-info="userInfo"
-              />
-            </KeepAlive>
+          <!-- 路由视图和动画 -->
+          <RouterView v-slot="{ Component }">
+            <Transition
+              name="fade-slide"
+              mode="out-in"
+              :appear="true"
+            >
+              <KeepAlive>
+                <component
+                  :is="Component"
+                  :key="route.fullPath"
+                  :bili-info="biliUserInfo"
+                  :user-info="userInfo"
+                />
+              </KeepAlive>
+            </Transition>
          </RouterView>
-          <template v-else>
-            <NSpin show />
-          </template>
-          <NBackTop />
+          <NBackTop
+            :right="40"
+            :bottom="40"
+            :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 />
-    </div>
+    <!-- 异步加载注册登录组件，优化初始加载性能 -->
+    <RegisterAndLogin @close="registerAndLoginModalVisiable = false" />
  </NModal>
 </template>

 <style lang="stylus" scoped>
-.viewer-page-content{
-    height: 100%;
-    border-radius: 18px;
-    padding: var(--vtsuru-content-padding);
-    height: calc(100vh - var(--vtsuru-header-height));
-    margin-right: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
+// --- CSS 变量定义 ---
+:root {
+  --vtsuru-header-height: 50px; // 顶部导航栏高度
+  --vtsuru-content-padding: 20px; // 内容区域内边距
 }
-</style>
+
+// --- 布局样式 ---
+.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%;
+    min-height: 100%; // 同样保证最小高度
+    border-radius: 8px;
+    padding: var(--vtsuru-content-padding);
+    box-sizing: border-box;
+    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>
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -30,7 +30,6 @@ 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
 }>()
@@ -172,40 +171,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 +222,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>
-          <NCheckbox :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+        <NSpace
+          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 +259,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">
-        <NCard :embedded="!item.isReaded" hoverable size="small">
+      <NListItem
+        v-for="item in publicQuestions"
+        :key="item.id"
+      >
+        <NCard
+          :embedded="!item.isReaded"
+          hoverable
+          size="small"
+        >
          <template #header>
-            <NSpace :size="0" align="center">
-              <NText depth="3" style="font-size: small">
+            <NSpace
+              :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 +307,29 @@ onUnmounted(() => {
          </template>
          <NCard style="text-align: center">
            {{ item.question.message }}
-            <br />
-            <NImage v-if="item.question.image" :src="item.question.image" height="100" lazy />
+            <br>
+            <NImage
+              v-if="item.question.image"
+              :src="item.question.image"
+              height="100"
+              lazy
+            />
          </NCard>
-          <template v-if="item.answer" #footer>
-            <NSpace align="center" :size="6" :wrap="false">
-              <NAvatar :src="AVATAR_URL + userInfo?.biliId + '?size=64'" circle :size="45" :img-props="{ referrerpolicy: 'no-referrer' }" />
+          <template
+            v-if="item.answer"
+            #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 }}
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -1,42 +1,44 @@
 <template>
-  <NSpin
-    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"
+  <div>
+    <NSpin
+      v-if="isLoading"
+      show
    />
-  </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;
        }
--- a/src/views/view/UserIndexView.vue
+++ b/src/views/view/UserIndexView.vue
@@ -1,9 +1,11 @@
 <template>
-  <component
-    :is="componentType"
-    :user-info="userInfo"
-    :bili-info="biliInfo"
-  />
+  <div>
+    <component
+      :is="componentType"
+      :user-info="userInfo"
+      :bili-info="biliInfo"
+    />
+  </div>
 </template>

 <script lang="ts" setup>
--- a/src/views/view/VideoCollectView.vue
+++ b/src/views/view/VideoCollectView.vue
@@ -39,25 +39,27 @@ async function get() {
 </script>

 <template>
-  <NSpin :show="isLoading">
-    <NFlex justify="center">
-      <NEmpty
-        v-if="videoTables.length == 0"
-        description="没有正在进行的征集表"
-      />
-      <NList v-else>
-        <NListItem
-          v-for="item in videoTables"
-          :key="item.id"
-        >
-          <VideoCollectInfoCard
-            :item="item"
-            can-click
-            style="width: 500px; max-width: 70vw"
-            from="user"
-          />
-        </NListItem>
-      </NList>
-    </NFlex>
-  </NSpin>
+  <div>
+    <NSpin :show="isLoading">
+      <NFlex justify="center">
+        <NEmpty
+          v-if="videoTables.length == 0"
+          description="没有正在进行的征集表"
+        />
+        <NList v-else>
+          <NListItem
+            v-for="item in videoTables"
+            :key="item.id"
+          >
+            <VideoCollectInfoCard
+              :item="item"
+              can-click
+              style="width: 500px; max-width: 70vw"
+              from="user"
+            />
+          </NListItem>
+        </NList>
+      </NFlex>
+    </NSpin>
+  </div>
 </template>
--- a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
+++ b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
@@ -472,10 +472,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 -->
@@ -918,7 +918,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;