From 94a315a90645c644e27a5a2002dda11bdd3b4f10 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sun, 20 Apr 2025 14:32:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20SongList=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=BC=BA=E6=AD=8C=E6=9B=B2?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加了歌曲搜索和筛选功能，支持按语言、标签和作者筛选。
- 改进了歌曲编辑和删除操作的用户体验，添加了确认提示。
- 更新了表格列定义，确保动态生成筛选选项。
- 优化了歌曲播放器的状态管理，增强了播放体验。
- 规范化了代码注释，提升了可读性和维护性。
---
 src/components/SongList.vue   | 1478 +++++++++++++++++++--------------
 src/components/SongPlayer.vue |    2 +-
 src/views/OBSLayout.vue       |   20 +-
 src/views/OpenLiveLayout.vue  |  397 ++++++---
 4 files changed, 1130 insertions(+), 767 deletions(-)

diff --git a/src/components/SongList.vue b/src/components/SongList.vue
index 09fb952..8b7f142 100644
--- a/src/components/SongList.vue
+++ b/src/components/SongList.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models';
-import { QueryGetAPI, QueryPostAPI } from '@/api/query';
-import { SONG_API_URL } from '@/data/constants';
+// [导入] 依赖项和类型
+import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models'; // API 数据模型
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'; // API 请求方法
+import { SONG_API_URL } from '@/data/constants'; // API 地址常量
+import { GetPlayButton } from '@/Utils'; // 公用方法：获取播放/信息按钮
+import SongPlayer from './SongPlayer.vue'; // 子组件：歌曲播放器
+
+// [导入] UI 组件和图标
 import {
   Delete24Filled,
   Info24Filled,
   NotepadEdit20Filled,
   Play24Filled
 } from '@vicons/fluent';
-import { refDebounced, useLocalStorage } from '@vueuse/core';
-import { List } from 'linqts';
+import { useLocalStorage, refDebounced } from '@vueuse/core'; // VueUse 工具函数
+import { List } from 'linqts'; // LINQ for TypeScript
 import {
   DataTableBaseColumn,
   DataTableColumns,
@@ -38,124 +43,105 @@ import {
   NTag,
   NText,
   NTooltip,
-  useMessage,
+  useMessage, // Naive UI 组件
 } from 'naive-ui';
-import { VNodeChild, computed, h, onMounted, ref, watch } from 'vue';
-  import SongPlayer from './SongPlayer.vue';
-import { GetPlayButton } from '@/Utils';
+import { VNodeChild, computed, h, onMounted, ref, watch } from 'vue'; // Vue 核心 API
 
+// --- Props 定义 ---
 const props = defineProps<{
-  songs: SongsInfo[]
-  canEdit?: boolean
-  isSelf: boolean
-  extraButton?: (song: SongsInfo) => VNodeChild[]
+  songs: SongsInfo[] // 歌曲列表数据
+  canEdit?: boolean // 是否允许编辑（通常用于区分查看模式和管理模式）
+  isSelf: boolean // 是否为用户自己的歌单（控制编辑/删除权限）
+  extraButton?: (song: SongsInfo) => VNodeChild[] // 允许外部传入额外的操作按钮函数
 }>()
-watch(
-  () => props.songs,
-  (newV) => {
-    songsInternal.value = newV
-    setTimeout(() => {
-      columns.value = createColumns()
-    }, 1)
-  },
-)
-const volume = useLocalStorage('Settings.AplayerVolume', 0.8)
-const songsInternal = ref(props.songs)
+
+// --- 响应式状态 ---
+const message = useMessage() // Naive UI 消息提示
+const volume = useLocalStorage('Settings.AplayerVolume', 0.8) // 播放器音量，持久化存储
+const songsInternal = ref<SongsInfo[]>([]) // 内部维护的歌曲列表，避免直接修改 props
+const playingSong = ref<SongsInfo>() // 当前正在试听的歌曲
+const isLrcLoading = ref<string>() // 歌词加载状态（存储歌曲 key）
+const isLoading = ref(false) // 通用加载状态 (用于 API 请求)
+
+// --- 搜索与筛选状态 ---
+const searchMusicKeyword = ref('') // 歌曲名称搜索关键词
+const debouncedInput = refDebounced(searchMusicKeyword, 500) // 防抖处理的搜索关键词
+const selectedLanguageFilter = ref<string[]>([]) // 顶部语言筛选器选中值
+const selectedTagFilter = ref<string[]>([])      // 顶部标签筛选器选中值
+const selectedAuthorFilter = ref<string | null>(null) // 顶部作者筛选器选中值 (直接控制列筛选)
+
+// --- 弹窗状态 ---
+const showModal = ref(false) // 单个歌曲编辑弹窗显示状态
+const showBatchModal = ref(false) // 批量编辑弹窗显示状态
+const updateSongModel = ref<SongsInfo>({} as SongsInfo) // 单个歌曲编辑表单数据模型
+const formRef = ref<FormInst | null>(null) // 单个歌曲编辑表单实例引用
+
+// --- 批量编辑状态 ---
+const batchUpdate_Author = ref<string[]>([]) // 批量编辑 - 作者
+const batchUpdate_Tag = ref<string[]>([]) // 批量编辑 - 标签
+const batchUpdate_Language = ref<string[]>([]) // 批量编辑 - 语言
+const batchUpdate_Option = ref<SongRequestOption | undefined>() // 批量编辑 - 点歌选项
+
+// --- 表格状态 ---
+const columns = ref<DataTableColumns<SongsInfo>>() // 表格列定义
+const selectedColumn = ref<DataTableRowKey[]>([]) // 表格选中行的 Key 数组
+
+// --- 计算属性 ---
+
+// 筛选后的歌曲列表
 const songsComputed = computed(() => {
-  if (debouncedInput.value) {
-    //忽略大小写比较
-    return songsInternal.value.filter((s) => s.name.toLowerCase().includes(debouncedInput.value.toLowerCase()))
+  let filteredSongs = songsInternal.value;
+
+  // 1. 搜索框筛选 (曲名或翻译名，防抖)
+  const searchTerm = debouncedInput.value?.trim().toLowerCase();
+  if (searchTerm) {
+    filteredSongs = filteredSongs.filter((s) =>
+      s.name.toLowerCase().includes(searchTerm) ||
+      s.translateName?.toLowerCase().includes(searchTerm) // 同时搜索翻译名称
+    );
   }
-  return songsInternal.value
-})
-const message = useMessage()
 
-const showModal = ref(false)
-const showBatchModal = ref(false)
-const updateSongModel = ref<SongsInfo>({} as SongsInfo)
-const searchMusicKeyword = ref()
-const debouncedInput = refDebounced(searchMusicKeyword, 500)
+  // 2. 顶部语言筛选
+  if (selectedLanguageFilter.value.length > 0) {
+    filteredSongs = filteredSongs.filter((s) =>
+      s.language?.some(lang => selectedLanguageFilter.value.includes(lang))
+    );
+  }
 
-const batchUpdate_Author = ref<string[]>([])
-const batchUpdate_Tag = ref<string[]>([])
-const batchUpdate_Language = ref<string[]>([])
-const batchUpdate_Option = ref<SongRequestOption>()
+  // 3. 顶部标签筛选
+  if (selectedTagFilter.value.length > 0) {
+    filteredSongs = filteredSongs.filter((s) =>
+      s.tags?.some(tag => selectedTagFilter.value.includes(tag))
+    );
+  }
 
-const playingSong = ref<SongsInfo>()
-const isLrcLoading = ref<string>()
-const isLoading = ref(false)
+  // 注意: 作者筛选主要通过列筛选器实现 (由 selectedAuthorFilter 控制)
+  // 如果需要整合到这里，需要额外逻辑
 
-const formRef = ref<FormInst | null>(null)
-const updateSongRules: FormRules = {
-  name: [
-    {
-      required: true,
-      message: '请输入歌曲名称',
-    },
-  ],
-  password: [
-    {
-      required: true,
-      message: '请输入密码',
-    },
-  ],
-}
-const songSelectOption = [
-  {
-    label: '中文',
-    value: '中文',
-  },
-  {
-    label: '日语',
-    value: '日语',
-  },
-  {
-    label: '英语',
-    value: '英语',
-  },
-  {
-    label: '韩语',
-    value: '韩语',
-  },
-  {
-    label: '法语',
-    value: '法语',
-  },
-  {
-    label: '西语',
-    value: '西语',
-  },
-  {
-    label: '其他',
-    value: '其他',
-  },
-]
+  return filteredSongs;
+});
+
+
+// 语言下拉选项 (包含预设和歌曲数据中存在的)
 const languageSelectOption = computed(() => {
-  const languages = new Set<string>(songSelectOption.map((s) => s.label))
+  const languages = new Set<string>([ // 预设一些常用语言
+    '中文', '日语', '英语', '韩语', '法语', '西语', '其他'
+  ])
   songsInternal.value.forEach((s) => {
-    if (s.language) {
-      s.language.forEach((l) => languages.add(l))
-    }
+    s.language?.forEach((l) => languages.add(l))
   })
-  return [...languages].map((t) => ({
+  return [...languages].sort().map((t) => ({ // 排序增加用户体验
     label: t,
     value: t,
   }))
 })
+
+// 标签下拉选项 (从歌曲数据中动态生成)
 const tagsSelectOption = computed(() => {
   return new List(songsInternal.value)
-    .SelectMany((s) => new List(s?.tags))
-    .Distinct()
-    .ToArray()
-    .map((t) => ({
-      label: t,
-      value: t,
-    }))
-})
-const authorsOptions = computed(() => {
-  return new List(songsInternal.value)
-    .SelectMany((s) => new List(s?.author))
+    .SelectMany((s) => new List(s?.tags ?? [])) // 使用 ?? [] 避免 undefined
     .Distinct()
+    .OrderBy(tag => tag) // 排序
     .ToArray()
     .map((t) => ({
       label: t,
@@ -163,66 +149,104 @@ const authorsOptions = computed(() => {
     }))
 })
 
-const columns = ref<DataTableColumns<SongsInfo>>()
-const selectedColumn = ref<DataTableRowKey[]>([])
+// 作者下拉选项 (从歌曲数据中动态生成)
+const authorsOptions = computed(() => {
+  return new List(songsInternal.value)
+    .SelectMany((s) => new List(s?.author ?? [])) // 使用 ?? [] 避免 undefined
+    .Distinct()
+    .OrderBy(author => author) // 排序
+    .ToArray()
+    .map((t) => ({
+      label: t,
+      value: t,
+    }))
+})
+
+// --- 表格列定义 ---
+
+// 作者列定义 (包含筛选逻辑)
 const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
   title: '作者',
-  key: 'artist',
+  key: 'author', // key 应该对应数据字段，虽然这里是数组，但用于标识
   width: 200,
   resizable: true,
+  // 列筛选函数：检查行的作者数组是否包含筛选值
   filter(value, row) {
-    return (row.author?.findIndex((t) => t == value.toString()) ?? -1) > -1
+    return row.author?.includes(value.toString()) ?? false;
   },
-  filterOptions: authorsOptions.value,
+  // 列筛选选项：使用计算属性动态生成
+  filterOptions: authorsOptions.value, // 初始值
+  // 列筛选值：受顶部的 selectedAuthorFilter 控制
+  filterOptionValue: selectedAuthorFilter.value,
   render(data) {
+    // 渲染作者按钮，点击时更新列筛选状态
     return h(NSpace, { size: 5 }, () =>
-      data.author.map((a) =>
+      data.author?.map((a) => // 使用 ?. 防止 author 为空
         h(NButton, { size: 'tiny', type: 'info', secondary: true, onClick: () => onAuthorClick(a) }, () => a),
-      ),
+      ) ?? null // 如果 author 为空则不渲染
     )
   },
 })
+
+// 点击作者按钮的处理函数：更新列筛选值
 const onAuthorClick = (author: string) => {
-  if (authorColumn.value.filterOptionValue == author) {
-    authorColumn.value.filterOptionValue = undefined
+  if (authorColumn.value.filterOptionValue === author) {
+    // 如果当前筛选值就是点击的作者，则清除筛选
+    authorColumn.value.filterOptionValue = null;
+    selectedAuthorFilter.value = null; // 同步更新顶部筛选状态
   } else {
-    authorColumn.value.filterOptionValue = author
+    // 否则，设置筛选值为点击的作者
+    authorColumn.value.filterOptionValue = author;
+    selectedAuthorFilter.value = author; // 同步更新顶部筛选状态
   }
 }
 
+// 监听顶部作者筛选器变化，更新列筛选状态
+watch(selectedAuthorFilter, (newVal) => {
+  authorColumn.value.filterOptionValue = newVal;
+});
+
+// 创建表格列配置的函数
 function createColumns(): DataTableColumns<SongsInfo> {
+  // 更新作者列的筛选选项和当前筛选值 (确保响应性)
   authorColumn.value.filterOptions = authorsOptions.value
+  authorColumn.value.filterOptionValue = selectedAuthorFilter.value
+
   return [
     {
-      type: 'selection',
-      disabled: () => !props.isSelf,
+      type: 'selection', // 复选框列
+      disabled: () => !props.isSelf, // 只有自己的歌单才允许选择 (用于批量操作)
     },
     {
-      key: 'name',
+      key: 'name', // 对应 SongsInfo 的 name 字段
+      title: '曲名',
       resizable: true,
-      minWidth: 100,
+      minWidth: 150, // 增加最小宽度
       width: 300,
-      sorter: 'default',
+      sorter: 'default', // 启用默认排序
       render(data) {
-        return h(NSpace, { size: 5 }, () => [
-          h(NText, { style: { color: data.options?.scMinPrice ? '#c36767' : '' } }, () => data.name),
-          h(NText, { depth: '3' }, () => data.translateName),
+        // 同时显示原名和翻译名 (如果存在)
+        return h(NSpace, { vertical: true, size: 0, wrap: false }, () => [
+          h(NText, { style: { color: data.options?.scMinPrice ? '#c36767' : '' } }, () => data.name), // SC 歌曲标红
+          data.translateName ? h(NText, { depth: '3', style: { fontSize: '12px' } }, () => data.translateName) : null, // 显示翻译名
         ])
       },
-      title: '曲名',
     },
-    authorColumn.value,
+    authorColumn.value, // 作者列 (已包含筛选)
     {
       title: '语言',
       key: 'language',
       width: 150,
       resizable: true,
-      filterOptions: songSelectOption,
+      // 列筛选选项 (使用预设 + 动态生成)
+      filterOptions: languageSelectOption.value,
+      // 列筛选函数
       filter(value, row) {
-        return (row.language?.findIndex((t) => t == value) ?? -1) > -1
+        return row.language?.includes(value.toString()) ?? false;
       },
       render(data) {
-        return (data.language?.length ?? 0) > 0
+        // 使用 NTag 显示语言
+        return data.language?.length // 使用 ?.length 检查
           ? h(NSpace, { size: 5 }, () =>
             data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a)),
           )
@@ -232,66 +256,57 @@ function createColumns(): DataTableColumns<SongsInfo> {
     {
       title: '描述',
       key: 'description',
+      minWidth: 100, // 增加最小宽度
       resizable: true,
-      render(data) {
-        return h(NEllipsis, () => data.description)
-      },
+      ellipsis: { // 使用 Naive UI 的省略配置
+        tooltip: true // 鼠标悬浮显示完整内容
+      }
+      // render(data) { // 使用 ellipsis 配置后，不再需要手动渲染 NEllipsis
+      //   return h(NEllipsis, { tooltip: { placement: 'top'} }, () => data.description)
+      // },
     },
     {
-      title: '要求',
+      title: '点歌要求', // 标题修改，更清晰
       key: 'options',
+      width: 180, // 调整宽度
       resizable: true,
       render(data) {
-        return data.options
-          ? h(NSpace, {}, () => [
-            data.options?.needJianzhang
-              ? h(
-                NTag,
-                { color: { textColor: 'white', color: GetGuardColor(3), borderColor: 'white' }, size: 'small' },
-                () => '舰长',
-              )
-              : null,
-            data.options?.needTidu
-              ? h(
-                NTag,
-                { color: { textColor: 'white', color: GetGuardColor(2), borderColor: 'white' }, size: 'small' },
-                () => '提督',
-              )
-              : null,
-            data.options?.needZongdu
-              ? h(
-                NTag,
-                { color: { textColor: 'white', color: GetGuardColor(1), borderColor: 'white' }, size: 'small' },
-                () => '总督',
-              )
-              : null,
-            data.options?.scMinPrice
-              ? h(
-                NTag,
-                {
-                  color: { textColor: 'white', color: GetSCColor(data.options.scMinPrice), borderColor: 'white' },
-                  size: 'small',
-                },
-                () => 'SC | ' + data.options?.scMinPrice,
-              )
-              : null,
-            data.options?.fanMedalMinLevel
-              ? h(NTag, { type: 'info', size: 'small' }, () => '粉丝牌 | ' + data.options?.fanMedalMinLevel)
-              : null,
-          ])
-          : null
+        // 渲染点歌要求的标签
+        const tags: VNodeChild[] = []
+        if (!data.options) return null; // 没有选项直接返回
+
+        if (data.options.needJianzhang) {
+          tags.push(h(NTag, { color: { textColor: 'white', color: GetGuardColor(3), borderColor: 'white' }, size: 'small' }, () => '舰长'))
+        }
+        if (data.options.needTidu) {
+          tags.push(h(NTag, { color: { textColor: 'white', color: GetGuardColor(2), borderColor: 'white' }, size: 'small' }, () => '提督'))
+        }
+        if (data.options.needZongdu) {
+          tags.push(h(NTag, { color: { textColor: 'white', color: GetGuardColor(1), borderColor: 'white' }, size: 'small' }, () => '总督'))
+        }
+        if (data.options.scMinPrice) {
+          tags.push(h(NTag, { color: { textColor: 'white', color: GetSCColor(data.options.scMinPrice), borderColor: 'white' }, size: 'small' }, () => `SC ≥ ${data.options?.scMinPrice}`)) // 优化显示
+        }
+        if (data.options.fanMedalMinLevel) {
+          tags.push(h(NTag, { type: 'info', size: 'small' }, () => `粉丝牌 ≥ ${data.options?.fanMedalMinLevel}`)) // 优化显示
+        }
+        return tags.length > 0 ? h(NSpace, { size: 5 }, () => tags) : null;
       },
     },
     {
       title: '标签',
       key: 'tags',
+      width: 150, // 调整宽度
       resizable: true,
-      filter(value, row) {
-        return (row.tags?.findIndex((t) => t == value.toString()) ?? -1) > -1
-      },
+      // 列筛选选项
       filterOptions: tagsSelectOption.value,
+      // 列筛选函数
+      filter(value, row) {
+        return row.tags?.includes(value.toString()) ?? false;
+      },
       render(data) {
-        return (data.tags?.length ?? 0) > 0
+        // 使用 NTag 显示标签
+        return data.tags?.length
           ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a)))
           : null
       },
@@ -299,752 +314,937 @@ function createColumns(): DataTableColumns<SongsInfo> {
     {
       title: '操作',
       key: 'manage',
-      disabled: () => !props.canEdit,
-      width: 170,
+      width: props.isSelf ? 170 : 120, // 根据是否自己的歌单调整宽度
+      fixed: 'right', // 固定操作列在右侧
       render(data) {
-        return h(
-          NSpace,
-          {
-            justify: 'end',
-            size: 10,
-          },
-          () => [
-            GetPlayButton(data),
-            data.url?.endsWith('mp3') ||
-              data.url?.endsWith('flac') ||
-              data.url?.endsWith('ogg') ||
-              data.url?.endsWith('wav') ||
-              data.url?.endsWith('m4a')
-              ? h(NTooltip, null, {
-                trigger: () =>
-                  h(
-                    NButton,
-                    {
-                      type: 'primary',
-                      size: 'small',
-                      circle: true,
-                      loading: isLrcLoading.value == data.key,
-                      onClick: () => {
-                        playingSong.value = data
-                      },
+        const buttons: VNodeChild[] = [];
+
+        // 1. 获取播放/信息按钮 (来自 Utils)
+        const playButton = GetPlayButton(data);
+        if (playButton) buttons.push(playButton);
+
+        // 2. 试听按钮 (仅对音频文件显示)
+        const isAudio = /\.(mp3|flac|ogg|wav|m4a)$/i.test(data.url ?? ''); // 正则判断音频后缀
+        if (isAudio) {
+          buttons.push(
+            h(NTooltip, null, {
+              trigger: () =>
+                h(
+                  NButton,
+                  {
+                    type: 'primary',
+                    size: 'small',
+                    circle: true,
+                    loading: isLrcLoading.value === data.key, // 绑定加载状态
+                    onClick: () => { playingSong.value = data }, // 点击播放
+                  },
+                  { icon: () => h(NIcon, { component: Play24Filled }) }
+                ),
+              default: () => '试听',
+            })
+          );
+        }
+
+        // 3. 编辑和删除按钮 (仅自己的歌单显示)
+        if (props.isSelf) {
+          buttons.push(
+            h(NTooltip, null, {
+              trigger: () =>
+                h(
+                  NButton,
+                  {
+                    size: 'small',
+                    circle: true,
+                    secondary: true, // 次要按钮样式
+                    onClick: () => {
+                      // 深拷贝防止修改影响原数据
+                      updateSongModel.value = JSON.parse(JSON.stringify(data));
+                      showModal.value = true; // 打开编辑弹窗
                     },
-                    {
-                      icon: () => h(NIcon, { component: Play24Filled }),
-                    },
-                  ),
-                default: () => '试听',
-              })
-              : null,
-            props.isSelf
-              ? [
-                h(NTooltip, null, {
-                  trigger: () =>
-                    h(
-                      NButton,
-                      {
-                        size: 'small',
-                        circle: true,
-                        secondary: true,
-                        onClick: () => {
-                          updateSongModel.value = JSON.parse(JSON.stringify(data))
-                          showModal.value = true
-                        },
-                      },
-                      {
-                        icon: () => h(NIcon, { component: NotepadEdit20Filled }),
-                      },
-                    ),
-                  default: () => '修改',
-                }),
-                h(NTooltip, null, {
-                  trigger: () =>
-                    h(
-                      NPopconfirm,
-                      {
-                        onPositiveClick: () => delSong(data),
-                      },
-                      {
-                        trigger: () =>
-                          h(
-                            NButton,
-                            {
-                              type: 'error',
-                              size: 'small',
-                              circle: true,
-                            },
-                            {
-                              icon: () => h(NIcon, { component: Delete24Filled }),
-                            },
-                          ),
-                        default: () => '确认删除该歌曲？',
-                      },
-                    ),
-                  default: () => '删除',
-                }),
-              ]
-              : null,
-            props.extraButton?.(data),
-          ],
-        )
+                  },
+                  { icon: () => h(NIcon, { component: NotepadEdit20Filled }) }
+                ),
+              default: () => '修改',
+            })
+          );
+          buttons.push(
+            h(NTooltip, null, {
+              trigger: () =>
+                h( // 使用 NPopconfirm 包裹删除按钮
+                  NPopconfirm,
+                  { onPositiveClick: () => delSong(data) }, // 确认删除时调用 delSong
+                  {
+                    trigger: () =>
+                      h(
+                        NButton,
+                        { type: 'error', size: 'small', circle: true },
+                        { icon: () => h(NIcon, { component: Delete24Filled }) }
+                      ),
+                    default: () => `确认删除歌曲《${data.name}》？`, // 确认提示语
+                  }
+                ),
+              default: () => '删除',
+            })
+          );
+        }
+
+        // 4. 额外的按钮 (通过 props 传入)
+        if (props.extraButton) {
+          buttons.push(...props.extraButton(data));
+        }
+
+        // 使用 NSpace 渲染所有按钮
+        return h(NSpace, { justify: 'end', size: 8, wrap: false }, () => buttons); // 增加间距，禁止换行
       },
     },
   ]
 }
 
-function renderCell(value: string | number) {
-  if (!value) {
-    return h(NText, { depth: 3 }, { default: () => '未填写' })
-  }
-  return value
+// --- 表单验证规则 ---
+const updateSongRules: FormRules = {
+  name: [{ required: true, message: '请输入歌曲名称', trigger: ['input', 'blur'] }], // 增加 blur 触发
+  // password 规则似乎未使用，注释掉
+  // password: [{ required: true, message: '请输入密码' }],
 }
 
+// --- 方法 ---
+
+// 监听 props.songs 变化，更新内部列表和列定义
+watch(
+  () => props.songs,
+  (newV) => {
+    console.log('Props songs updated, refreshing internal list and columns.'); // 调试信息
+    songsInternal.value = [...newV]; // 使用扩展运算符创建新数组，确保响应性
+    // 重新生成列定义 (确保筛选选项等是最新的)
+    // 使用 nextTick 替代 setTimeout，确保 DOM 更新后再操作
+    // nextTick(() => {
+    //   columns.value = createColumns();
+    // });
+    // 实测 watch 触发时直接更新列定义即可，NaiveUI 会处理
+    columns.value = createColumns();
+  },
+  { deep: true } // 深度监听，如果 songs 数组内部对象变化也触发
+)
+
+// 更新单首歌曲信息
 async function updateSong() {
-  if (props.songs.filter((s) => s.name == updateSongModel.value.name).length > 1) {
-    message.error('已存在相同名称的歌曲')
-    return
-  }
-  isLoading.value = true
-  await QueryPostAPI<SongsInfo>(SONG_API_URL + 'update', {
-    key: updateSongModel.value.key,
-    song: updateSongModel.value,
-  }).then((data) => {
-    if (data.code == 200) {
-      const index = songsInternal.value.findIndex((s) => s.key == data.data.key)
-      songsInternal.value.splice(index, 1, data.data)
-      message.success('已更新歌曲信息')
+  try {
+    await formRef.value?.validate(); // 触发表单验证
+    // 检查是否存在同名歌曲 (排除当前正在编辑的歌曲)
+    if (songsInternal.value.some(s => s.name === updateSongModel.value.name && s.key !== updateSongModel.value.key)) {
+      message.error('已存在相同名称的歌曲');
+      return;
+    }
+    isLoading.value = true; // 开始加载
+    const { code, data, message: errMsg } = await QueryPostAPI<SongsInfo>(SONG_API_URL + 'update', {
+      key: updateSongModel.value.key,
+      song: updateSongModel.value,
+    });
+    if (code === 200 && data) {
+      const index = songsInternal.value.findIndex((s) => s.key === data.key);
+      if (index !== -1) {
+        songsInternal.value.splice(index, 1, data); // 更新内部列表数据
+      }
+      message.success('已更新歌曲信息');
+      showModal.value = false; // 关闭弹窗
     } else {
-      message.error('未能更新歌曲信息: ' + data.message)
-    }
-  }).finally(() => {
-    isLoading.value = false
-  })
-}
-async function delSong(song: SongsInfo) {
-  await QueryGetAPI<SongsInfo>(SONG_API_URL + 'del', {
-    key: song.key,
-  }).then((data) => {
-    if (data.code == 200) {
-      songsInternal.value = songsInternal.value.filter((s) => s.key != song.key)
-      message.success('已删除歌曲')
-    } else {
-      message.error('未能删除歌曲: ' + data.message)
-    }
-  })
-}
-async function delBatchSong() {
-  const ids = selectedColumn.value.map((s) => s.toString())
-  isLoading.value = true
-  await QueryPostAPI<SongsInfo>(SONG_API_URL + 'del-batch', ids).then((data) => {
-    if (data.code == 200) {
-      songsInternal.value = songsInternal.value.filter((s) => !ids.includes(s.key))
-      message.success('已删除 ' + ids.length + ' 首歌曲')
-      showBatchModal.value = false
-      selectedColumn.value = []
-    } else {
-      message.error('未能删除歌曲: ' + data.message)
-    }
-  }).finally(() => {
-    isLoading.value = false
-  })
-}
-function GetSCColor(price: number): string {
-  if (price === 0) return `#2a60b2`
-  if (price > 0 && price < 30) return `#2a60b2`
-  if (price >= 30 && price < 50) return `#2a60b2`
-  if (price >= 50 && price < 100) return `#427d9e`
-  if (price >= 100 && price < 500) return `#c99801`
-  if (price >= 500 && price < 1000) return `#e09443`
-  if (price >= 1000 && price < 2000) return `#e54d4d`
-  if (price >= 2000) return `#ab1a32`
-  return ''
-}
-function GetGuardColor(level: number | null | undefined): string {
-  if (level) {
-    switch (level) {
-      case 1: {
-        return 'rgb(122, 4, 35)'
-      }
-      case 2: {
-        return 'rgb(157, 155, 255)'
-      }
-      case 3: {
-        return 'rgb(104, 136, 241)'
-      }
+      message.error(`未能更新歌曲信息: ${errMsg || '未知错误'}`);
     }
+  } catch (errors) {
+    // 表单验证失败
+    console.error('Form validation failed:', errors);
+    message.warning('请检查表单填写是否正确');
+  } finally {
+    isLoading.value = false; // 结束加载
   }
-  return ''
-}
-function batchUpdateAuthor() {
-  if (selectedColumn.value.length == 0) {
-    message.error('请先选择歌曲')
-    return
-  }
-  isLoading.value = true
-  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-author', {
-    ids: selectedColumn.value.map((s) => s.toString()),
-    data: batchUpdate_Author.value,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已更新歌曲')
-        for (const song of songsInternal.value) {
-          if (selectedColumn.value.includes(song.key)) {
-            const index = songsInternal.value.findIndex((s) => s.key == song.key)
-            songsInternal.value[index].author = batchUpdate_Author.value
-          }
-        }
-      } else {
-        message.error('未能更新歌曲: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('未能更新歌曲: ' + err)
-    }).finally(() => {
-      isLoading.value = false
-    })
-}
-function batchUpdateTag() {
-  if (selectedColumn.value.length == 0) {
-    message.error('请先选择歌曲')
-    return
-  }
-  isLoading.value = true
-  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-tag', {
-    ids: selectedColumn.value.map((s) => s.toString()),
-    data: batchUpdate_Tag.value,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已更新歌曲')
-        for (const song of songsInternal.value) {
-          if (selectedColumn.value.includes(song.key)) {
-            const index = songsInternal.value.findIndex((s) => s.key == song.key)
-            songsInternal.value[index].tags = batchUpdate_Tag.value
-          }
-        }
-      } else {
-        message.error('未能更新歌曲: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('未能更新歌曲: ' + err)
-    }).finally(() => {
-      isLoading.value = false
-    })
-}
-function batchUpdateLanguage() {
-  if (selectedColumn.value.length == 0) {
-    message.error('请先选择歌曲')
-    return
-  }
-  isLoading.value = true
-  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-language', {
-    ids: selectedColumn.value.map((s) => s.toString()),
-    data: batchUpdate_Language.value,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已更新歌曲')
-        for (const song of songsInternal.value) {
-          if (selectedColumn.value.includes(song.key)) {
-            const index = songsInternal.value.findIndex((s) => s.key == song.key)
-            songsInternal.value[index].language = batchUpdate_Language.value
-          }
-        }
-      } else {
-        message.error('未能更新歌曲: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('未能更新歌曲: ' + err)
-    }).finally(() => {
-      isLoading.value = false
-    })
-}
-function batchUpdateOption() {
-  if (selectedColumn.value.length == 0) {
-    message.error('请先选择歌曲')
-    return
-  }
-  isLoading.value = true
-  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-option', {
-    ids: selectedColumn.value.map((s) => s.toString()),
-    data: batchUpdate_Option.value ? batchUpdate_Option.value : null,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已更新歌曲')
-        for (const song of songsInternal.value) {
-          if (selectedColumn.value.includes(song.key)) {
-            const index = songsInternal.value.findIndex((s) => s.key == song.key)
-            songsInternal.value[index].options = batchUpdate_Option.value
-          }
-        }
-      } else {
-        message.error('未能更新歌曲: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('未能更新歌曲: ' + err)
-    }).finally(() => {
-      isLoading.value = false
-    })
 }
 
+// 删除单首歌曲
+async function delSong(song: SongsInfo) {
+  isLoading.value = true; // 开始加载 (虽然删除很快，但保持一致性)
+  try {
+    const { code, message: errMsg } = await QueryGetAPI<SongsInfo>(SONG_API_URL + 'del', { key: song.key });
+    if (code === 200) {
+      // 从内部列表中移除
+      songsInternal.value = songsInternal.value.filter((s) => s.key !== song.key);
+      message.success(`已删除歌曲《${song.name}》`);
+      // 如果删除的是正在播放的歌曲，停止播放
+      if (playingSong.value?.key === song.key) {
+        playingSong.value = undefined;
+      }
+      // 如果删除的是选中的歌曲，也从选中列表中移除
+      selectedColumn.value = selectedColumn.value.filter(key => key !== song.key);
+    } else {
+      message.error(`未能删除歌曲: ${errMsg || '未知错误'}`);
+    }
+  } catch (error: any) {
+    message.error(`删除歌曲时出错: ${error.message || error}`);
+  } finally {
+    isLoading.value = false; // 结束加载
+  }
+}
+
+// 批量删除歌曲
+async function delBatchSong() {
+  if (selectedColumn.value.length === 0) {
+    message.warning('请先选择要删除的歌曲');
+    return;
+  }
+  const ids = selectedColumn.value.map((s) => s.toString());
+  isLoading.value = true;
+  try {
+    const { code, message: errMsg } = await QueryPostAPI<SongsInfo>(SONG_API_URL + 'del-batch', ids);
+    if (code === 200) {
+      songsInternal.value = songsInternal.value.filter((s) => !ids.includes(s.key));
+      message.success(`已删除 ${ids.length} 首歌曲`);
+      showBatchModal.value = false; // 关闭批量编辑弹窗
+      selectedColumn.value = []; // 清空选择
+      // 如果删除的歌曲包含正在播放的歌曲，停止播放
+      if (playingSong.value && ids.includes(playingSong.value.key)) {
+          playingSong.value = undefined;
+      }
+    } else {
+      message.error(`未能批量删除歌曲: ${errMsg || '未知错误'}`);
+    }
+  } catch (error: any) {
+    message.error(`批量删除歌曲时出错: ${error.message || error}`);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// --- 批量更新函数 (通用逻辑提取) ---
+async function executeBatchUpdate<T>(
+    endpoint: string,
+    payload: { ids: string[]; data: T },
+    updateField: keyof SongsInfo,
+    successMessage: string
+) {
+  if (selectedColumn.value.length === 0) {
+    message.warning('请先选择要更新的歌曲');
+    return false; // 返回 false 表示未执行
+  }
+  isLoading.value = true;
+  try {
+    const { code, message: errMsg } = await QueryPostAPI<SongsInfo[]>(`${SONG_API_URL}${endpoint}`, payload);
+    if (code === 200) {
+      message.success(successMessage);
+      // 更新本地数据
+      songsInternal.value.forEach((song, index) => {
+        if (payload.ids.includes(song.key)) {
+          // 直接修改会破坏响应性，需要创建新对象或使用 Vue.set (或直接修改 ref 的 value)
+          // songsInternal.value[index][updateField] = payload.data; // 这种方式可能不触发视图更新
+          const updatedSong = { ...songsInternal.value[index], [updateField]: payload.data };
+          songsInternal.value.splice(index, 1, updatedSong);
+        }
+      });
+      // 可能需要清空批量编辑表单的值
+      return true; // 返回 true 表示成功
+    } else {
+      message.error(`未能更新歌曲: ${errMsg || '未知错误'}`);
+      return false;
+    }
+  } catch (err: any) {
+    message.error(`未能更新歌曲: ${err.message || err}`);
+    return false;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// 批量更新作者
+async function batchUpdateAuthor() {
+  const success = await executeBatchUpdate(
+    'update-batch-author',
+    { ids: selectedColumn.value.map(String), data: batchUpdate_Author.value },
+    'author',
+    `已为 ${selectedColumn.value.length} 首歌曲更新作者`
+  );
+  if (success) batchUpdate_Author.value = []; // 成功后清空输入
+}
+
+// 批量更新标签
+async function batchUpdateTag() {
+  const success = await executeBatchUpdate(
+    'update-batch-tag',
+    { ids: selectedColumn.value.map(String), data: batchUpdate_Tag.value },
+    'tags',
+    `已为 ${selectedColumn.value.length} 首歌曲更新标签`
+  );
+  if (success) batchUpdate_Tag.value = []; // 成功后清空输入
+}
+
+// 批量更新语言
+async function batchUpdateLanguage() {
+  const success = await executeBatchUpdate(
+    'update-batch-language',
+    { ids: selectedColumn.value.map(String), data: batchUpdate_Language.value },
+    'language',
+    `已为 ${selectedColumn.value.length} 首歌曲更新语言`
+  );
+  if (success) batchUpdate_Language.value = []; // 成功后清空输入
+}
+
+// 批量更新点歌选项
+async function batchUpdateOption() {
+  const success = await executeBatchUpdate(
+    'update-batch-option',
+    { ids: selectedColumn.value.map(String), data: batchUpdate_Option.value ?? null }, // 如果为 undefined 发送 null
+    'options',
+    `已为 ${selectedColumn.value.length} 首歌曲更新点歌选项`
+  );
+   if (success) batchUpdate_Option.value = undefined; // 成功后清空输入
+}
+
+// --- 辅助函数 ---
+
+// 根据 SC 价格获取颜色
+function GetSCColor(price: number): string {
+  if (price <= 0) return `#2a60b2`; // 默认蓝色 (或根据实际需要调整)
+  if (price < 30) return `#2a60b2`; // 蓝色
+  if (price < 50) return `#2a60b2`; // 蓝色 (合并)
+  if (price < 100) return `#427d9e`; // 青色
+  if (price < 500) return `#c99801`; // 黄色
+  if (price < 1000) return `#e09443`; // 橙色
+  if (price < 2000) return `#e54d4d`; // 红色
+  return `#ab1a32`; // 深红色 (>= 2000)
+}
+
+// 根据大航海等级获取颜色
+function GetGuardColor(level: number | null | undefined): string {
+  switch (level) {
+    case 1: return 'rgb(122, 4, 35)'; // 总督
+    case 2: return 'rgb(157, 155, 255)'; // 提督
+    case 3: return 'rgb(104, 136, 241)'; // 舰长
+    default: return ''; // 默认或无效值
+  }
+}
+
+// --- 生命周期钩子 ---
 onMounted(() => {
-  songsInternal.value = props.songs
-  setTimeout(() => {
-    columns.value = createColumns()
-  }, 1)
-})
+  //console.log('Component mounted, initializing...'); // 调试信息
+  songsInternal.value = [...props.songs]; // 初始化时复制 props 数据
+  // 初始加载列定义
+  columns.value = createColumns();
+});
+
 </script>
 
 <template>
+  <!-- 顶部筛选区域 -->
   <NCard
     embedded
     size="small"
+    :bordered="false"
+    style="margin-bottom: 10px;"
   >
-    <NSpace>
+    <NSpace
+      align="center"
+      wrap
+      item-style="margin-bottom: 5px;"
+    >
+      <!-- 歌曲名搜索 -->
       <NInput
         v-model:value="searchMusicKeyword"
-        placeholder="搜索歌曲"
+        placeholder="搜索曲名/译名"
         size="small"
-        style="width: 150px"
+        clearable
+        style="min-width: 150px; flex-grow: 1;"
       />
+      <!-- 作者筛选 (控制列筛选) -->
       <NSelect
-        v-model:value="authorColumn.filterOptionValue"
-        placeholder="选择歌手"
+        v-model:value="selectedAuthorFilter"
+        placeholder="筛选歌手"
         :options="authorsOptions"
         clearable
         filterable
         size="small"
-        style="width: 150px"
+        style="min-width: 150px; flex-grow: 1;"
       />
-      <NButton
-        v-if="authorColumn.filterOptionValue"
-        type="error"
+      <!-- 语言筛选 (控制 computed 属性) -->
+      <NSelect
+        v-model:value="selectedLanguageFilter"
+        placeholder="筛选语言"
+        :options="languageSelectOption"
+        multiple
+        clearable
+        filterable
         size="small"
-        @click="authorColumn.filterOptionValue = null"
+        style="min-width: 180px; flex-grow: 1;"
+        max-tag-count="responsive"
+      />
+      <!-- 标签筛选 (控制 computed 属性) -->
+      <NSelect
+        v-model:value="selectedTagFilter"
+        placeholder="筛选标签"
+        :options="tagsSelectOption"
+        multiple
+        clearable
+        filterable
+        size="small"
+        style="min-width: 180px; flex-grow: 1;"
+        max-tag-count="responsive"
+      />
+      <!-- 清除作者列筛选按钮 (当顶部选择器清除时，列筛选也应清除，但保留按钮以防万一) -->
+      <!-- <NButton
+        v-if="authorColumn.filterOptionValue"
+        type="warning"
+        size="small"
+        ghost
+        @click="onAuthorClick(authorColumn.filterOptionValue as string)"
       >
-        清除歌手选择
-      </NButton>
+        清除歌手列筛选
+      </NButton> -->
     </NSpace>
   </NCard>
-  <NDivider style="margin: 5px 0 5px 0">
-    共 {{ songsComputed.length }} 首
-  </NDivider>
-  <Transition>
+
+  <!-- 歌曲数量与批量编辑按钮 -->
+  <NSpace
+    justify="space-between"
+    align="center"
+    style="margin-bottom: 5px;"
+  >
+    <NText depth="3">
+      共 {{ songsComputed.length }} / {{ songsInternal.length }} 首
+    </NText>
+    <!-- 批量编辑按钮 (仅自己的歌单且选中超过1项时显示) -->
+    <NButton
+      v-if="isSelf"
+      :disabled="selectedColumn.length === 0"
+      type="primary"
+      size="small"
+      ghost
+      @click="showBatchModal = true"
+    >
+      批量操作 ({{ selectedColumn.length }})
+    </NButton>
+  </NSpace>
+  <!-- <NDivider style="margin-top: 5px; margin-bottom: 10px;" /> -->
+
+  <!-- 试听播放器区域 -->
+  <Transition name="fade">
     <div
       v-if="playingSong"
-      class="song-list"
+      style="margin-bottom: 15px;"
     >
       <SongPlayer
         v-model:is-lrc-loading="isLrcLoading"
         :song="playingSong"
+        :volume="volume"
+        @update:volume="newVol => volume = newVol"
+        @close="playingSong = undefined"
       />
-      <NDivider style="margin: 15px 0 15px 0" />
+      <!-- <NDivider style="margin: 15px 0 0 0;" /> -->
     </div>
   </Transition>
-  <template v-if="isSelf">
-    <NButton
 
-      :disabled="selectedColumn.length <= 1 && isSelf"
-      type="info"
-      size="small"
-      @click="showBatchModal = true"
-    >
-      批量编辑
-    </NButton>
-    <NDivider style="margin: 5px 0 5px 0" />
-  </template>
+  <!-- 歌曲数据表格 -->
   <NDataTable
     v-model:checked-row-keys="selectedColumn"
-    size="small"
     :columns="columns"
     :data="songsComputed"
+    :row-key="(row: SongsInfo) => row.key"
+    size="small"
+    :bordered="false"
+    :single-line="false"
+    flex-height
+    style="height: 60vh;"
     :pagination="{
-      itemCount: songsInternal.length,
-      defaultPageSize: 25,
-      pageSizes: [25, 50, 200],
-      size: 'small',
+      // itemCount: songsComputed.length, // 根据筛选结果分页或总数分页？取决于需求
+      pageSize: 25, // 默认每页大小
+      pageSizes: [10, 25, 50, 100, 200], // 可选的每页大小
       showSizePicker: true,
+      showQuickJumper: true, // 显示快速跳转
+      // size: 'small', // 已在 NDataTable 设置 size
     }"
+    :loading="isLoading && songsComputed.length === 0"
+    remote
+    striped
   />
+
+  <!-- 单个歌曲编辑弹窗 -->
   <NModal
     v-model:show="showModal"
-    style="max-width: 600px"
     preset="card"
+    style="max-width: 600px;"
+    :title="`修改歌曲信息 - ${updateSongModel.name}`"
+    :mask-closable="false"
+    :closable="true"
   >
-    <template #header>
-      修改信息
-    </template>
     <NForm
       ref="formRef"
       :rules="updateSongRules"
       :model="updateSongModel"
-      :render-cell="renderCell"
+      label-placement="left"
+      label-width="auto"
+      require-mark-placement="right-hanging"
     >
+      <!-- 名称 -->
       <NFormItem
         path="name"
         label="名称"
       >
         <NInput
           v-model:value="updateSongModel.name"
-          autosize
-          style="min-width: 200px"
-          placeholder="就是歌曲名称"
+          placeholder="歌曲名称"
+          clearable
         />
       </NFormItem>
+      <!-- 作者 -->
       <NFormItem
         path="author"
         label="作者"
       >
         <NSelect
           v-model:value="updateSongModel.author"
+          :options="authorsOptions"
+          placeholder="选择或输入新作者，按回车确认"
           filterable
           multiple
           tag
-          placeholder="输入，按回车确认"
-          :options="authorsOptions"
+          clearable
         />
       </NFormItem>
+      <!-- 备注 -->
       <NFormItem
         path="description"
         label="备注"
       >
         <NInput
           v-model:value="updateSongModel.description"
-          placeholder="可选"
+          type="textarea"
+          placeholder="可选，如歌曲来源、特殊说明等"
           :maxlength="250"
           show-count
-          autosize
-          style="min-width: 300px"
           clearable
+          autosize
+          style="min-width: 300px;"
         />
       </NFormItem>
+      <!-- 语言 -->
       <NFormItem
         path="language"
         label="语言"
       >
         <NSelect
           v-model:value="updateSongModel.language"
+          :options="languageSelectOption"
+          placeholder="选择或输入新语言，按回车确认"
           filterable
           multiple
-          clearable
           tag
-          placeholder="可选，输入后按回车新增"
-          :options="languageSelectOption"
+          clearable
         />
       </NFormItem>
+      <!-- 标签 -->
       <NFormItem
         path="tags"
         label="标签"
       >
         <NSelect
           v-model:value="updateSongModel.tags"
+          :options="tagsSelectOption"
+          placeholder="选择或输入新标签，按回车确认"
           filterable
           multiple
-          clearable
           tag
-          placeholder="可选，按回车确认"
-          :options="tagsSelectOption"
+          clearable
         />
       </NFormItem>
+      <!-- 点歌设置 -->
       <NFormItem path="options">
         <template #label>
-          点歌设置
-          <NTooltip>
+          点歌要求
+          <NTooltip trigger="hover">
             <template #trigger>
-              <NIcon :component="Info24Filled" />
+              <NIcon
+                :component="Info24Filled"
+                style="margin-left: 4px; vertical-align: middle; cursor: help;"
+              />
             </template>
-            这个不是控制是否允许点歌的! 启用后将会覆盖点歌功能中的设置, 用于单独设置歌曲要求
+            启用后将覆盖全局点歌设置，用于单独设置歌曲要求。不启用则遵循全局设置。
           </NTooltip>
         </template>
         <NSpace vertical>
+          <!-- 启用开关 -->
           <NCheckbox
-            :checked="updateSongModel.options != undefined"
+            :checked="updateSongModel.options != null"
             @update:checked="(checked: boolean) => {
-              updateSongModel.options = checked
-                ? ({
-                  needJianzhang: false,
-                  needTidu: false,
-                  needZongdu: false,
-                } as SongRequestOption)
-                : undefined
-            }
-            "
+              updateSongModel.options = checked ? {
+                needJianzhang: false,
+                needTidu: false,
+                needZongdu: false,
+                scMinPrice: undefined,
+                fanMedalMinLevel: undefined,
+              } : undefined; // 使用 undefined 表示禁用
+            }"
           >
-            是否启用
+            启用独立要求
           </NCheckbox>
-          <template v-if="updateSongModel.options != undefined">
+          <!-- 详细设置 -->
+          <template v-if="updateSongModel.options != null">
             <NSpace>
-              <NCheckbox v-model:checked="updateSongModel.options.needJianzhang">
-                需要舰长
+              <NCheckbox v-model:checked="updateSongModel.options!.needJianzhang">
+                舰长
               </NCheckbox>
-              <NCheckbox v-model:checked="updateSongModel.options.needTidu">
-                需要提督
+              <NCheckbox v-model:checked="updateSongModel.options!.needTidu">
+                提督
               </NCheckbox>
-              <NCheckbox v-model:checked="updateSongModel.options.needZongdu">
-                需要总督
+              <NCheckbox v-model:checked="updateSongModel.options!.needZongdu">
+                总督
               </NCheckbox>
             </NSpace>
             <NSpace align="center">
               <NCheckbox
-                :checked="updateSongModel.options.scMinPrice != undefined"
-                @update:checked="(checked: boolean) => {
-                  if (updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined
-                }
-                "
+                :checked="updateSongModel.options!.scMinPrice != null"
+                @update:checked="(checked: boolean) => updateSongModel.options!.scMinPrice = checked ? 30 : undefined"
               >
-                需要SC
+                SC点歌
               </NCheckbox>
               <NInputGroup
-                v-if="updateSongModel.options?.scMinPrice"
-                style="width: 200px"
+                v-if="updateSongModel.options!.scMinPrice != null"
+                style="width: auto;"
               >
-                <NInputGroupLabel> SC最低价格 </NInputGroupLabel>
+                <NInputGroupLabel size="small">
+                  最低
+                </NInputGroupLabel>
                 <NInputNumber
-                  v-model:value="updateSongModel.options.scMinPrice"
-                  min="30"
+                  v-model:value="updateSongModel.options!.scMinPrice"
+                  :min="1"
+                  size="small"
+                  style="width: 80px;"
                 />
+                <NInputGroupLabel size="small">
+                  元
+                </NInputGroupLabel>
               </NInputGroup>
             </NSpace>
             <NSpace align="center">
               <NCheckbox
-                :checked="updateSongModel.options.fanMedalMinLevel != undefined"
-                @update:checked="(checked: boolean) => {
-                  if (updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined
-                }
-                "
+                :checked="updateSongModel.options!.fanMedalMinLevel != null"
+                @update:checked="(checked: boolean) => updateSongModel.options!.fanMedalMinLevel = checked ? 1 : undefined"
               >
-                需要粉丝牌
-                <NTooltip>
+                粉丝牌
+                <NTooltip trigger="hover">
                   <template #trigger>
-                    <NIcon :component="Info24Filled" />
+                    <NIcon
+                      :component="Info24Filled"
+                      style="margin-left: 4px; vertical-align: middle; cursor: help;"
+                    />
                   </template>
-                  这个即使不开也会遵循全局点歌设置的粉丝牌等级
+                  启用此项会覆盖全局粉丝牌等级要求。
                 </NTooltip>
               </NCheckbox>
               <NInputGroup
-                v-if="updateSongModel.options?.fanMedalMinLevel"
-                style="width: 200px"
+                v-if="updateSongModel.options!.fanMedalMinLevel != null"
+                style="width: auto;"
               >
-                <NInputGroupLabel> 最低等级 </NInputGroupLabel>
+                <NInputGroupLabel size="small">
+                  最低
+                </NInputGroupLabel>
                 <NInputNumber
-                  v-model:value="updateSongModel.options.fanMedalMinLevel"
-                  min="0"
+                  v-model:value="updateSongModel.options!.fanMedalMinLevel"
+                  :min="1"
+                  size="small"
+                  style="width: 80px;"
                 />
+                <NInputGroupLabel size="small">
+                  级
+                </NInputGroupLabel>
               </NInputGroup>
             </NSpace>
           </template>
         </NSpace>
       </NFormItem>
+      <!-- 链接 -->
       <NFormItem
         path="url"
         label="链接"
       >
         <NInput
           v-model:value="updateSongModel.url"
-          placeholder="可选, 后缀为mp3、wav、ogg时将会尝试播放, 否则会在新页面打开"
-          :disabled="updateSongModel.from != SongFrom.Custom"
+          placeholder="可选, 音频链接(mp3/wav/ogg/m4a/flac)可试听"
+          clearable
+          :disabled="updateSongModel.from !== SongFrom.Custom"
         />
+        <NTooltip
+          v-if="updateSongModel.from !== SongFrom.Custom"
+          trigger="hover"
+        >
+          <template #trigger>
+            <NIcon
+              :component="Info24Filled"
+              style="margin-left: 8px; cursor: help;"
+            />
+          </template>
+          非自定义来源的歌曲链接通常无法修改。
+        </NTooltip>
       </NFormItem>
     </NForm>
-    <NDivider style="margin: 10px" />
-    <NButton
-      type="success"
-      :loading="isLoading"
-      @click="updateSong"
-    >
-      更新
-    </NButton>
+    <!-- 底部按钮 -->
+    <template #footer>
+      <NSpace justify="end">
+        <NButton @click="showModal = false">
+          取消
+        </NButton>
+        <NButton
+          type="primary"
+          :loading="isLoading"
+          @click="updateSong"
+        >
+          确认更新
+        </NButton>
+      </NSpace>
+    </template>
   </NModal>
+
+  <!-- 批量编辑弹窗 -->
   <NModal
     v-model:show="showBatchModal"
     preset="card"
-    :title="`批量编辑 | 已选择: ${selectedColumn.length}`"
-    style="max-width: 600px"
+    :title="`批量操作 | 已选择: ${selectedColumn.length} 首`"
+    style="max-width: 600px;"
+    :mask-closable="false"
   >
-    <NTabs>
+    <NTabs
+      type="line"
+      animated
+    >
+      <!-- 批量删除 -->
       <NTabPane
         name="delete"
         tab="删除"
       >
-        <NPopconfirm @positive-click="delBatchSong">
+        <NText>确定要删除选中的 {{ selectedColumn.length }} 首歌曲吗？此操作不可恢复。</NText>
+        <NDivider />
+        <NPopconfirm
+          :show-icon="false"
+          @positive-click="delBatchSong"
+        >
           <template #trigger>
-            <NButton type="error">
-              批量删除
+            <NButton
+              type="error"
+              :loading="isLoading"
+              :disabled="selectedColumn.length === 0"
+            >
+              执行删除
             </NButton>
           </template>
-          <span> 确定删除 {{ selectedColumn.length }} 首曲目吗？ </span>
+          确认执行批量删除操作？
         </NPopconfirm>
       </NTabPane>
+      <!-- 批量修改作者 -->
       <NTabPane
         name="author"
         tab="作者"
       >
         <NSelect
           v-model:value="batchUpdate_Author"
+          :options="authorsOptions"
+          placeholder="选择或输入新作者（将覆盖原有作者）"
           filterable
           multiple
           tag
-          placeholder="输入后按回车新增"
-          :options="authorsOptions"
+          clearable
         />
         <NDivider />
         <NButton
-          type="success"
+          type="primary"
           :loading="isLoading"
+          :disabled="selectedColumn.length === 0"
           @click="batchUpdateAuthor"
         >
-          更新
+          更新选中歌曲作者
         </NButton>
       </NTabPane>
+      <!-- 批量修改标签 -->
       <NTabPane
         name="tag"
         tab="标签"
       >
         <NSelect
           v-model:value="batchUpdate_Tag"
+          :options="tagsSelectOption"
+          placeholder="选择或输入新标签（将覆盖原有标签）"
           filterable
           multiple
-          clearable
           tag
-          placeholder="可选，按回车确认"
-          :options="tagsSelectOption"
+          clearable
         />
         <NDivider />
         <NButton
-          type="success"
+          type="primary"
           :loading="isLoading"
+          :disabled="selectedColumn.length === 0"
           @click="batchUpdateTag"
         >
-          更新
+          更新选中歌曲标签
         </NButton>
       </NTabPane>
+      <!-- 批量修改语言 -->
       <NTabPane
         name="language"
         tab="语言"
       >
         <NSelect
           v-model:value="batchUpdate_Language"
+          :options="languageSelectOption"
+          placeholder="选择或输入新语言（将覆盖原有语言）"
           filterable
           multiple
-          clearable
           tag
-          placeholder="可选，输入后按回车新增"
-          :options="languageSelectOption"
+          clearable
         />
         <NDivider />
         <NButton
-          type="success"
+          type="primary"
           :loading="isLoading"
+          :disabled="selectedColumn.length === 0"
           @click="batchUpdateLanguage"
         >
-          更新
+          更新选中歌曲语言
         </NButton>
       </NTabPane>
+      <!-- 批量修改点歌选项 -->
       <NTabPane
         name="option"
-        tab="点歌选项"
+        tab="点歌要求"
       >
         <NSpace vertical>
           <NCheckbox
-            :checked="batchUpdate_Option != undefined"
+            :checked="batchUpdate_Option != null"
             @update:checked="(checked: boolean) => {
-              batchUpdate_Option = checked
-                ? ({
-                  needJianzhang: false,
-                  needTidu: false,
-                  needZongdu: false,
-                } as SongRequestOption)
-                : undefined
-            }
-            "
+              batchUpdate_Option = checked ? {
+                needJianzhang: false,
+                needTidu: false,
+                needZongdu: false,
+                scMinPrice: undefined,
+                fanMedalMinLevel: undefined,
+              } : undefined;
+            }"
           >
-            是否启用
+            启用/禁用独立要求 (将覆盖原有设置)
           </NCheckbox>
-          <template v-if="batchUpdate_Option != undefined">
+          <template v-if="batchUpdate_Option != null">
             <NSpace>
-              <NCheckbox v-model:checked="batchUpdate_Option.needJianzhang">
-                需要舰长
+              <NCheckbox v-model:checked="batchUpdate_Option!.needJianzhang">
+                舰长
               </NCheckbox>
-              <NCheckbox v-model:checked="batchUpdate_Option.needTidu">
-                需要提督
+              <NCheckbox v-model:checked="batchUpdate_Option!.needTidu">
+                提督
               </NCheckbox>
-              <NCheckbox v-model:checked="batchUpdate_Option.needZongdu">
-                需要总督
+              <NCheckbox v-model:checked="batchUpdate_Option!.needZongdu">
+                总督
               </NCheckbox>
             </NSpace>
             <NSpace align="center">
               <NCheckbox
-                :checked="batchUpdate_Option.scMinPrice != undefined"
-                @update:checked="(checked: boolean) => {
-                  if (batchUpdate_Option) batchUpdate_Option.scMinPrice = checked ? 30 : undefined
-                }
-                "
+                :checked="batchUpdate_Option!.scMinPrice != null"
+                @update:checked="(checked: boolean) => batchUpdate_Option!.scMinPrice = checked ? 30 : undefined"
               >
-                需要SC
+                SC点歌
               </NCheckbox>
               <NInputGroup
-                v-if="batchUpdate_Option?.scMinPrice"
-                style="width: 200px"
+                v-if="batchUpdate_Option!.scMinPrice != null"
+                style="width: auto;"
               >
-                <NInputGroupLabel> SC最低价格 </NInputGroupLabel>
+                <NInputGroupLabel size="small">
+                  最低
+                </NInputGroupLabel>
                 <NInputNumber
-                  v-model:value="batchUpdate_Option.scMinPrice"
-                  min="30"
+                  v-model:value="batchUpdate_Option!.scMinPrice"
+                  :min="1"
+                  size="small"
+                  style="width: 80px;"
                 />
+                <NInputGroupLabel size="small">
+                  元
+                </NInputGroupLabel>
               </NInputGroup>
             </NSpace>
             <NSpace align="center">
               <NCheckbox
-                :checked="batchUpdate_Option.fanMedalMinLevel != undefined"
-                @update:checked="(checked: boolean) => {
-                  if (batchUpdate_Option) batchUpdate_Option.fanMedalMinLevel = checked ? 5 : undefined
-                }
-                "
+                :checked="batchUpdate_Option!.fanMedalMinLevel != null"
+                @update:checked="(checked: boolean) => batchUpdate_Option!.fanMedalMinLevel = checked ? 1 : undefined"
               >
-                需要粉丝牌
-                <NTooltip>
-                  <template #trigger>
-                    <NIcon :component="Info24Filled" />
-                  </template>
-                  这个即使不开也会遵循全局点歌设置的粉丝牌等级
-                </NTooltip>
+                粉丝牌
               </NCheckbox>
               <NInputGroup
-                v-if="batchUpdate_Option?.fanMedalMinLevel"
-                style="width: 200px"
+                v-if="batchUpdate_Option!.fanMedalMinLevel != null"
+                style="width: auto;"
               >
-                <NInputGroupLabel> 最低等级 </NInputGroupLabel>
+                <NInputGroupLabel size="small">
+                  最低
+                </NInputGroupLabel>
                 <NInputNumber
-                  v-model:value="batchUpdate_Option.fanMedalMinLevel"
-                  min="0"
+                  v-model:value="batchUpdate_Option!.fanMedalMinLevel"
+                  :min="1"
+                  size="small"
+                  style="width: 80px;"
                 />
+                <NInputGroupLabel size="small">
+                  级
+                </NInputGroupLabel>
               </NInputGroup>
             </NSpace>
           </template>
         </NSpace>
         <NDivider />
         <NButton
-          type="success"
+          type="primary"
           :loading="isLoading"
+          :disabled="selectedColumn.length === 0"
           @click="batchUpdateOption"
         >
-          更新
+          更新选中歌曲要求
         </NButton>
       </NTabPane>
     </NTabs>
   </NModal>
 </template>
 
-<style>
-.netease path:nth-child(2) {
-  fill: #c20c0c;
+<style scoped>
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 
-.fivesing:first-child {
-  fill: #00bbb3;
+/* 优化 NDataTable 高度适应 */
+/* :deep(.n-data-table .n-data-table-base-table) { */
+  /* display: flex; */
+  /* flex-direction: column; */
+/* } */
+/* :deep(.n-data-table .n-data-table-base-table-body) { */
+  /* flex: 1; */
+/* } */
+
+/* Naive UI 默认样式可能已足够，若需要强制滚动条可取消注释 */
+/* :deep(.n-data-table-wrapper) {
+    overflow: auto;
+} */
+
+/* 移除NCard默认边框，如果全局设置了 */
+.n-card {
+  border: none !important;
 }
 </style>
+
+<style>
+/* 全局样式 (如果需要影响 GetPlayButton 内部的 SVG) */
+.netease path:nth-child(2) {
+  fill: #c20c0c; /* 网易云红色 */
+}
+
+.fivesing path:first-child { /* 调整选择器以匹配 GetPlayButton 生成的 SVG 结构 */
+  fill: #00bbb3; /* 5sing 绿色 */
+}
+.bilibili path {
+    fill: #00a1d6; /* B站蓝色 */
+}
+/* 可以为其他来源添加类似样式 */
+</style>
\ No newline at end of file
diff --git a/src/components/SongPlayer.vue b/src/components/SongPlayer.vue
index 7a1efdd..60324ff 100644
--- a/src/components/SongPlayer.vue
+++ b/src/components/SongPlayer.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   song: SongsInfo | undefined
   isLrcLoading?: string
 }>()
-const emits = defineEmits(['update:isLrcLoading'])
+const emits = defineEmits(['update:isLrcLoading', 'update:close', 'update:volume'])
 
 const aplayerMusic = ref({
   title: '',
diff --git a/src/views/OBSLayout.vue b/src/views/OBSLayout.vue
index 0e2440e..35b4b94 100644
--- a/src/views/OBSLayout.vue
+++ b/src/views/OBSLayout.vue
@@ -5,6 +5,8 @@ import { onMounted, onUnmounted, ref } from 'vue'
 const timer = ref<any>()
 const visible = ref(true)
 const active = ref(true)
+
+const originalBackgroundColor = ref('')
 onMounted(() => {
   timer.value = setInterval(() => {
     if (!visible.value || !active.value) return
@@ -22,9 +24,21 @@ onMounted(() => {
       active.value = a
     }
   }
+  // 使 .n-layout-content 背景透明
+  const layoutContent = document.querySelector('.n-layout-content');
+  if (layoutContent instanceof HTMLElement) {
+    originalBackgroundColor.value = layoutContent.style.backgroundColor
+    layoutContent.style.setProperty('background-color', 'transparent');
+  }
 })
+
 onUnmounted(() => {
   clearInterval(timer.value)
+  // 还原 .n-layout-content 背景颜色
+  const layoutContent = document.querySelector('.n-layout-content');
+  if (layoutContent instanceof HTMLElement) {
+    layoutContent.style.setProperty('background-color', originalBackgroundColor.value);
+  }
 })
 </script>
 
@@ -46,9 +60,3 @@ onUnmounted(() => {
     </RouterView>
   </div>
 </template>
-
-<style>
-.body,html,.n-element,.n-layout-content {
-  background-color: transparent !important;
-}
-</style>
diff --git a/src/views/OpenLiveLayout.vue b/src/views/OpenLiveLayout.vue
index 4313146..e3cd0ec 100644
--- a/src/views/OpenLiveLayout.vue
+++ b/src/views/OpenLiveLayout.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { isDarkMode } from '@/Utils'
-import { ThemeType } from '@/api/api-models'
-import { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient'
-import { useDanmakuClient } from '@/store/useDanmakuClient';
-import { Lottery24Filled, PeopleQueue24Filled, TabletSpeaker24Filled } from '@vicons/fluent'
-import { Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
-import { useElementSize, useStorage } from '@vueuse/core'
+import { isDarkMode } from '@/Utils' // 引入暗黑模式判断工具
+import { ThemeType } from '@/api/api-models' // 引入主题类型枚举
+import { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient' // 引入开放平台认证信息类型
+import { useDanmakuClient } from '@/store/useDanmakuClient'; // 引入弹幕客户端状态管理
+import { Lottery24Filled, PeopleQueue24Filled, TabletSpeaker24Filled } from '@vicons/fluent' // 引入 Fluent UI 图标
+import { Moon, MusicalNote, Sunny } from '@vicons/ionicons5' // 引入 Ionicons 图标
+import { useElementSize, useStorage } from '@vueuse/core' // 引入 VueUse 组合式函数
 import {
   NAlert,
   NAvatar,
@@ -27,21 +27,28 @@ import {
   NTag,
   NText,
   useMessage,
-} from 'naive-ui'
-import { h, onMounted, onUnmounted, ref } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+} from 'naive-ui' // 引入 Naive UI 组件
+import { h, onMounted, onUnmounted, ref, computed } from 'vue' // 引入 Vue 相关 API
+import { RouterLink, useRoute, useRouter } from 'vue-router' // 引入 Vue Router 相关 API
 
-const route = useRoute()
-const message = useMessage()
-const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+// -- 基本状态和工具 --
+const route = useRoute() // 获取当前路由信息
+const router = useRouter() // 获取路由实例
+const message = useMessage() // 获取 Naive UI 消息提示 API
+const themeType = useStorage('Settings.Theme', ThemeType.Auto) // 使用 useStorage 持久化主题设置 (默认自动)
+const danmakuClient = useDanmakuClient(); // 获取弹幕客户端实例
 
-const sider = ref()
-const { width } = useElementSize(sider)
+// -- 侧边栏状态 --
+const sider = ref<HTMLElement | null>(null) // 侧边栏 DOM 引用
+const { width: siderWidth } = useElementSize(sider) // 实时获取侧边栏宽度
 
-const authInfo = ref<AuthInfo>()
-const danmakuClient = await useDanmakuClient().initOpenlive();
+// -- 认证与连接状态 --
+const authInfo = ref<AuthInfo>() // 存储从路由查询参数获取的认证信息
+const danmakuClientError = ref<string>() // 存储弹幕客户端初始化错误信息
 
-const menuOptions = [
+// -- 菜单配置 --
+// 定义菜单项, 使用 h 函数渲染 RouterLink 以实现路由跳转
+const menuOptions = computed(() => [ // 改为 computed 以便将来可能动态修改
   {
     label: () =>
       h(
@@ -49,10 +56,10 @@ const menuOptions = [
         {
           to: {
             name: 'open-live-lottery',
-            query: route.query,
+            query: route.query, // 保留查询参数
           },
         },
-        { default: () => '抽奖' },
+        { default: () => '弹幕抽奖' },
       ),
     key: 'open-live-lottery',
     icon: renderIcon(Lottery24Filled),
@@ -67,7 +74,7 @@ const menuOptions = [
             query: route.query,
           },
         },
-        { default: () => '点歌' },
+        { default: () => '弹幕点歌' }, // 优化名称
       ),
     key: 'open-live-live-request',
     icon: renderIcon(MusicalNote),
@@ -82,7 +89,7 @@ const menuOptions = [
             query: route.query,
           },
         },
-        { default: () => '排队' },
+        { default: () => '弹幕排队' }, // 优化名称
       ),
     key: 'open-live-queue',
     icon: renderIcon(PeopleQueue24Filled),
@@ -97,37 +104,74 @@ const menuOptions = [
             query: route.query,
           },
         },
-        { default: () => '读弹幕' },
+        { default: () => '弹幕朗读' }, // 优化名称
       ),
     key: 'open-live-speech',
     icon: renderIcon(TabletSpeaker24Filled),
   },
-]
+])
 
+// -- 工具函数 --
+/**
+ * 渲染 Naive UI 图标的辅助函数
+ * @param icon 图标组件
+ */
 function renderIcon(icon: unknown) {
   return () => h(NIcon, null, { default: () => h(icon as any) })
 }
-const danmakuClientError = ref<string>()
+
+// -- 主题切换逻辑 --
+const isDarkValue = computed({
+  get: () => themeType.value === ThemeType.Dark || (themeType.value === ThemeType.Auto && isDarkMode.value),
+  set: (value) => {
+    themeType.value = value ? ThemeType.Dark : ThemeType.Light;
+  }
+});
+
+// -- 生命周期钩子 --
 onMounted(async () => {
+  // 1. 从路由查询参数解析认证信息
   authInfo.value = route.query as unknown as AuthInfo
+
+  // 2. 检查是否存在必要的 Code 参数
   if (authInfo.value?.Code) {
-    danmakuClient.initOpenlive(authInfo.value)
+    try {
+      // 3. 初始化开放平台弹幕客户端
+      await danmakuClient.initOpenlive(authInfo.value) // 改为 await 处理可能的异步初始化
+      // 可选: 初始化成功提示
+      // message.success('弹幕客户端连接中...')
+    } catch (error: any) {
+      // 4. 处理初始化错误
+      console.error("Danmaku client initialization failed:", error);
+      danmakuClientError.value = `弹幕客户端初始化失败: ${error.message || '未知错误'}`;
+      message.error(danmakuClientError.value);
+    }
   } else {
-    message.error('你不是从幻星平台访问此页面, 或未提供对应参数, 无法使用此功能')
+    // 5. 如果缺少 Code, 显示错误信息
+    message.error('无效访问: 缺少必要的认证参数 (Code)。请通过幻星平台获取链接。')
+    // authInfo 清空, 触发 v-if 显示错误页
+    authInfo.value = undefined;
   }
 })
-onUnmounted(() => {
-})
+
+// onUnmounted 清理 (如果需要)
+// onUnmounted(() => {
+//   danmakuClient.dispose(); // 示例: 如果有清理逻辑
+// })
+
 </script>
 
 <template>
+  <!-- 情况一: 缺少认证信息, 显示错误提示页 -->
   <NLayoutContent
     v-if="!authInfo?.Code"
-    style="height: 100vh"
+    style="height: 100vh; display: flex; align-items: center; justify-content: center;"
+    content-style="padding: 24px;"
   >
     <NResult
       status="error"
       title="无效访问"
+      description="请确保您是通过正确的幻星平台 H5 插件链接访问此页面。"
     >
       <template #footer>
         请前往
@@ -140,177 +184,288 @@ onUnmounted(() => {
         >
           幻星平台 | VTsuru
         </NButton>
-        并点击 获取 , 再点击 获取 H5 插件链接来获取可用链接
-        <br>
-        或者直接在那个页面用也可以, 虽然并不推荐
+        获取 H5 插件链接。
       </template>
     </NResult>
   </NLayoutContent>
+
+  <!-- 情况二: 存在认证信息, 显示主布局 -->
   <NLayout
     v-else
     style="height: 100vh"
+    :native-scrollbar="false"
   >
+    <!-- 顶部导航栏 -->
     <NLayoutHeader
-      style="height: 45px; padding: 5px 15px 5px 15px"
+      style="height: 60px; display: flex; align-items: center; padding: 0 20px;"
       bordered
     >
-      <NPageHeader :subtitle="($route.meta.title as string) ?? ''">
-        <template #extra>
-          <NSpace align="center">
-            <NTag :type="danmakuClient.connected ? 'success' : 'warning'">
-              {{ danmakuClient.connected ? `已连接 | ${danmakuClient.authInfo?.anchor_info?.uname}` : '未连接' }}
-            </NTag>
-            <NSwitch
-              :default-value="!isDarkMode"
-              @update:value="(value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
-              "
+      <!-- 使用 NPageHeader 增强语义和结构 -->
+      <NPageHeader style="width: 100%;">
+        <!-- 标题区域 -->
+        <template #title>
+          <NButton
+            text
+            style="text-decoration: none;"
+            @click="router.push({ name: 'open-live-index', query: route.query })"
+          >
+            <NText
+              strong
+              style="font-size: 1.5rem; line-height: 1;"
+              type="primary"
             >
+              <!-- 网站/应用 Logo 或名称 -->
+              <img
+                src="/favicon.ico"
+                alt="VTsuru Logo"
+                style="height: 24px; vertical-align: middle; margin-right: 8px;"
+              > <!-- 可选: 添加 Logo -->
+              VTsuru 开放平台
+            </NText>
+          </NButton>
+        </template>
+
+        <!-- 副标题/当前页面信息 -->
+        <template #subtitle>
+          <NText depth="3">
+            {{ $route.meta.title as string ?? '功能模块' }}
+          </NText>
+        </template>
+
+        <!-- 右侧额外操作区域 -->
+        <template #extra>
+          <NSpace
+            align="center"
+            :size="20"
+          >
+            <!-- 连接状态指示 -->
+            <NTag
+              :type="danmakuClient.connected ? 'success' : 'warning'"
+              round
+              size="small"
+            >
+              <template #icon>
+                <NIcon :component="danmakuClient.connected ? Sunny : Moon" /> <!-- 示例图标 -->
+              </template>
+              {{ danmakuClient.connected ? `已连接: ${danmakuClient.authInfo?.anchor_info?.uname ?? '主播'}` : '连接中...' }}
+            </NTag>
+            <!-- 主题切换开关 -->
+            <NSwitch v-model:value="isDarkValue">
               <template #checked>
-                <NIcon :component="Sunny" />
+                <NIcon :component="Moon" />
               </template>
               <template #unchecked>
-                <NIcon :component="Moon" />
+                <NIcon :component="Sunny" />
               </template>
             </NSwitch>
           </NSpace>
         </template>
-        <template #title>
-          <NButton
-            text
-            tag="a"
-            @click="$router.push({ name: 'open-live-index', query: $route.query })"
-          >
-            <NText
-              strong
-              style="font-size: 1.4rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-justify: auto"
-            >
-              VTSURU | 开放平台
-            </NText>
-          </NButton>
-        </template>
       </NPageHeader>
     </NLayoutHeader>
+
+    <!-- 主体内容区域 (包含侧边栏和内容) -->
     <NLayout
       has-sider
-      style="height: calc(100vh - 45px - 30px)"
+      style="height: calc(100vh - 60px - 40px)"
     >
+      <!-- 左侧导航栏 -->
       <NLayoutSider
         ref="sider"
         bordered
-        show-trigger
-        default-collapsed
+        show-trigger="arrow-circle"
         collapse-mode="width"
         :collapsed-width="64"
-        :width="180"
+        :width="200"
         :native-scrollbar="false"
-        style="height: 100%"
+        style="height: 100%;"
+        default-collapsed
       >
-        <Transition>
+        <!-- 主播信息区域 (优化样式和过渡) -->
+        <Transition name="fade">
+          <!-- 添加简单的淡入淡出效果 -->
           <div
-            v-if="danmakuClient.authInfo"
-            style="margin-top: 8px"
+            v-if="danmakuClient.authInfo?.anchor_info && siderWidth > 64"
+            style="padding: 20px 10px; text-align: center;"
           >
-            <NSpace
-              vertical
-              justify="center"
-              align="center"
+            <NAvatar
+              :src="danmakuClient.authInfo.anchor_info.uface"
+              :img-props="{ referrerpolicy: 'no-referrer' }"
+              round
+              bordered
+              size="large"
+              :style="{
+                marginBottom: '10px',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+              }"
+            />
+            <!-- 限制最大宽度并居中 -->
+            <NEllipsis
+              style="max-width: 160px; margin: 0 auto; font-weight: bold;"
+              :tooltip="{ placement: 'bottom' }"
             >
-              <NAvatar
-                :src="danmakuClient.authInfo?.anchor_info?.uface"
-                :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>
-                  {{ danmakuClient.authInfo?.anchor_info?.uname }}
-                </NText>
-              </NEllipsis>
-            </NSpace>
+              {{ danmakuClient.authInfo.anchor_info.uname }}
+            </NEllipsis>
+          </div>
+          <!-- 折叠时显示小头像 (可选) -->
+          <div
+            v-else-if="danmakuClient.authInfo?.anchor_info && siderWidth <= 64"
+            style="padding: 15px 0; text-align: center;"
+          >
+            <NAvatar
+              :src="danmakuClient.authInfo.anchor_info.uface"
+              :img-props="{ referrerpolicy: 'no-referrer' }"
+              round
+              size="medium"
+              :style="{ boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)' }"
+            />
           </div>
         </Transition>
+
+        <!-- 导航菜单 -->
         <NMenu
-          :default-value="$route.name?.toString()"
+          :value="route.name?.toString()"
           :collapsed-width="64"
           :collapsed-icon-size="22"
           :options="menuOptions"
+          :indent="24"
+          style="margin-top: 10px;"
         />
-        <NSpace justify="center">
+
+        <!-- 侧边栏底部提示/链接 (优化样式和显示逻辑) -->
+        <NSpace
+          v-if="siderWidth > 150"
+          vertical
+          align="center"
+          style="position: absolute; bottom: 20px; left: 0; right: 0; padding: 0 15px;"
+        >
           <NText
-            v-if="width > 150"
             depth="3"
+            style="font-size: 12px; text-align: center;"
           >
-            有更多功能建议请
+            遇到问题或有建议?
             <NButton
               text
               type="info"
-              @click="$router.push({ name: 'about' })"
+              size="tiny"
+              @click="router.push({ name: 'about' })"
             >
-              反馈
+              点此反馈
             </NButton>
           </NText>
         </NSpace>
       </NLayoutSider>
+
+      <!-- 右侧主内容区域 -->
       <NLayoutContent
-        style="height: 100%; padding: 10px"
+        style="height: 100%;"
+        content-style="padding: 15px; height: 100%;"
         :native-scrollbar="false"
       >
+        <!-- 弹幕客户端错误提示 -->
         <NAlert
           v-if="danmakuClientError"
           type="error"
-          title="无法启动弹幕客户端"
+          title="弹幕客户端错误"
+          closable
+          style="margin-bottom: 15px;"
+          @close="danmakuClientError = undefined"
         >
           {{ danmakuClientError }}
         </NAlert>
-        <RouterView
-          v-if="danmakuClient.authInfo"
-          v-slot="{ Component }"
-        >
-          <KeepAlive>
+
+        <!-- 路由视图: 根据认证状态显示不同内容 -->
+        <RouterView v-slot="{ Component }">
+          <!-- 情况一: 认证信息加载中或连接中 -->
+          <div
+            v-if="!danmakuClient.authInfo && !danmakuClientError"
+            style="display: flex; justify-content: center; align-items: center; height: 80%;"
+          >
+            <NSpin size="large">
+              <template #description>
+                正在加载主播信息并连接服务...
+              </template>
+            </NSpin>
+          </div>
+          <!-- 情况二: 加载/连接成功, 渲染对应页面 -->
+          <KeepAlive v-else-if="Component && danmakuClient.authInfo">
             <component
               :is="Component"
+              :key="route.fullPath"
               :room-info="danmakuClient.authInfo"
               :code="authInfo.Code"
             />
           </KeepAlive>
+          <!-- 情况三: 组件无法渲染或其他错误 (理论上不应发生, 但作为后备) -->
+          <NResult
+            v-else-if="!danmakuClientError"
+            status="warning"
+            title="页面加载失败"
+            description="无法加载当前功能模块，请尝试刷新或联系开发者。"
+          />
         </RouterView>
-        <template v-else>
-          {{ }}
-          <NAlert
-            type="info"
-            title="正在请求弹幕客户端认证信息..."
-          >
-            <NSpin show />
-          </NAlert>
-        </template>
-        <NBackTop />
+
+        <!-- 返回顶部按钮 -->
+        <NBackTop
+          :right="40"
+          :bottom="60"
+        />
       </NLayoutContent>
     </NLayout>
+
+    <!-- 底部信息栏 -->
     <NLayoutFooter
-      style="height: 30px"
+      style="height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 20px;"
       bordered
     >
-      <NSpace
-        justify="center"
-        align="center"
-        style="height: 100%"
+      <NText
+        depth="3"
+        style="font-size: 12px;"
       >
+        © {{ new Date().getFullYear() }} <!-- 动态年份 -->
         <NButton
           text
           tag="a"
-          href="/"
+          href="https://vtsuru.live"
           target="_blank"
-          type="info"
+          type="primary"
+          style="margin-left: 5px;"
         >
           vtsuru.live
         </NButton>
-      </NSpace>
+        - 由 VTsuru 提供支持
+      </NText>
     </NLayoutFooter>
   </NLayout>
 </template>
+
+<style scoped>
+/* 添加过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.n-pageheader-wrapper {
+  width: 100% !important;
+}
+/* 优化 NPageHeader 在窄屏幕下的表现 (可选) */
+@media (max-width: 768px) {
+  .n-page-header-wrapper {
+    padding: 0 10px !important; /* 减少内边距 */
+  }
+  .n-page-header__title {
+    font-size: 1.2rem !important; /* 缩小标题字号 */
+  }
+}
+
+/* 确保 NLayoutContent 的内边距生效 */
+:deep(.n-layout-scroll-container) {
+    display: flex;
+    flex-direction: column;
+}
+</style>
\ No newline at end of file