feat:列表新增右键菜单;fix:播放列表滚动条，搜索页切换源重新加载

1. 软件启动位置宽高记忆限制软件最大宽高
2. debug: 修复歌曲音质支持短缺问题
2025-11-25 03:15:07 +08:00 · 2025-09-25 02:43:02 +08:00 · 2025-09-22 19:36:07 +08:00 · 2025-09-22 19:34:58 +08:00 · 2025-09-22 19:34:06 +08:00 · 2025-09-22 12:08:35 +08:00
42 changed files with 2760 additions and 28337 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -94,13 +94,13 @@ jobs:
          # 获取当前标签对应的 release 信息
          TAG_NAME=${GITHUB_REF#refs/tags/}
          echo "tag_name=$TAG_NAME" >> $GITHUB_OUTPUT
-
+          
          # 获取 release 详细信息
          response=$(curl -s \
            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
            -H "Accept: application/vnd.github.v3+json" \
            "https://api.github.com/repos/${{ github.repository }}/releases/tags/$TAG_NAME")
-
+          
          release_id=$(echo "$response" | jq -r '.id')
          echo "release_id=$release_id" >> $GITHUB_OUTPUT
          echo "找到 Release ID: $release_id"
@@ -109,7 +109,7 @@ jobs:
        run: |
          TAG_NAME="${{ steps.get-release.outputs.tag_name }}"
          RELEASE_ID="${{ steps.get-release.outputs.release_id }}"
-
+          
          echo "🚀 开始同步版本 $TAG_NAME 到 WebDAV..."
          echo "Release ID: $RELEASE_ID"
          echo "WebDAV 根路径: ${{ secrets.WEBDAV_BASE_URL }}/yd/ceru"
@@ -131,7 +131,7 @@ jobs:
          # 先创建版本目录
          dir_path="/yd/ceru/$TAG_NAME"
          dir_url="${{ secrets.WEBDAV_BASE_URL }}$dir_path"
-
+          
          echo "创建版本目录: $dir_path"
          curl -s -X MKCOL \
            -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
@@ -140,7 +140,7 @@ jobs:
          # 处理每个asset
          success_count=0
          failed_count=0
-
+          
          for i in $(seq 0 $(($assets_count - 1))); do
            asset=$(echo "$assets_json" | jq -c ".[$i]")
            asset_name=$(echo "$asset" | jq -r '.name')
@@ -198,7 +198,7 @@ jobs:
              failed_count=$((failed_count + 1))
            fi
          done
-
+          
          echo "========================================"
          echo "🎉 同步完成！"
          echo "成功: $success_count 个文件"
--- a/.vitepress/cache/deps/@theme_index.js
+++ b/.vitepress/cache/deps/@theme_index.js
@@ -1,275 +0,0 @@
-import {
-  useMediaQuery
-} from "./chunk-B6YPYVPP.js";
-import {
-  computed,
-  ref,
-  shallowRef,
-  watch
-} from "./chunk-I4O5PVBA.js";
-
-// node_modules/vitepress/dist/client/theme-default/index.js
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
-
-// node_modules/vitepress/dist/client/theme-default/without-fonts.js
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/base.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/icons.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
-import "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
-import VPBadge from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
-import Layout from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/Layout.vue";
-import { default as default2 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
-import { default as default3 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPButton.vue";
-import { default as default4 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
-import { default as default5 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPFeatures.vue";
-import { default as default6 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPHomeContent.vue";
-import { default as default7 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
-import { default as default8 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
-import { default as default9 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
-import { default as default10 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPImage.vue";
-import { default as default11 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPLink.vue";
-import { default as default12 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue";
-import { default as default13 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPSocialLink.vue";
-import { default as default14 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPSocialLinks.vue";
-import { default as default15 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPSponsors.vue";
-import { default as default16 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
-import { default as default17 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
-import { default as default18 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
-import { default as default19 } from "D:/code/CeruMuisc/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
-
-// node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
-import { onContentUpdated } from "vitepress";
-
-// node_modules/vitepress/dist/client/theme-default/composables/outline.js
-import { getScrollOffset } from "vitepress";
-
-// node_modules/vitepress/dist/client/theme-default/support/utils.js
-import { withBase } from "vitepress";
-
-// node_modules/vitepress/dist/client/theme-default/composables/data.js
-import { useData as useData$ } from "vitepress";
-var useData = useData$;
-
-// node_modules/vitepress/dist/client/theme-default/support/utils.js
-function ensureStartingSlash(path) {
-  return path.startsWith("/") ? path : `/${path}`;
-}
-
-// node_modules/vitepress/dist/client/theme-default/support/sidebar.js
-function getSidebar(_sidebar, path) {
-  if (Array.isArray(_sidebar))
-    return addBase(_sidebar);
-  if (_sidebar == null)
-    return [];
-  path = ensureStartingSlash(path);
-  const dir = Object.keys(_sidebar).sort((a, b) => {
-    return b.split("/").length - a.split("/").length;
-  }).find((dir2) => {
-    return path.startsWith(ensureStartingSlash(dir2));
-  });
-  const sidebar = dir ? _sidebar[dir] : [];
-  return Array.isArray(sidebar) ? addBase(sidebar) : addBase(sidebar.items, sidebar.base);
-}
-function getSidebarGroups(sidebar) {
-  const groups = [];
-  let lastGroupIndex = 0;
-  for (const index in sidebar) {
-    const item = sidebar[index];
-    if (item.items) {
-      lastGroupIndex = groups.push(item);
-      continue;
-    }
-    if (!groups[lastGroupIndex]) {
-      groups.push({ items: [] });
-    }
-    groups[lastGroupIndex].items.push(item);
-  }
-  return groups;
-}
-function addBase(items, _base) {
-  return [...items].map((_item) => {
-    const item = { ..._item };
-    const base = item.base || _base;
-    if (base && item.link)
-      item.link = base + item.link;
-    if (item.items)
-      item.items = addBase(item.items, base);
-    return item;
-  });
-}
-
-// node_modules/vitepress/dist/client/theme-default/composables/sidebar.js
-function useSidebar() {
-  const { frontmatter, page, theme: theme2 } = useData();
-  const is960 = useMediaQuery("(min-width: 960px)");
-  const isOpen = ref(false);
-  const _sidebar = computed(() => {
-    const sidebarConfig = theme2.value.sidebar;
-    const relativePath = page.value.relativePath;
-    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [];
-  });
-  const sidebar = ref(_sidebar.value);
-  watch(_sidebar, (next, prev) => {
-    if (JSON.stringify(next) !== JSON.stringify(prev))
-      sidebar.value = _sidebar.value;
-  });
-  const hasSidebar = computed(() => {
-    return frontmatter.value.sidebar !== false && sidebar.value.length > 0 && frontmatter.value.layout !== "home";
-  });
-  const leftAside = computed(() => {
-    if (hasAside)
-      return frontmatter.value.aside == null ? theme2.value.aside === "left" : frontmatter.value.aside === "left";
-    return false;
-  });
-  const hasAside = computed(() => {
-    if (frontmatter.value.layout === "home")
-      return false;
-    if (frontmatter.value.aside != null)
-      return !!frontmatter.value.aside;
-    return theme2.value.aside !== false;
-  });
-  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value);
-  const sidebarGroups = computed(() => {
-    return hasSidebar.value ? getSidebarGroups(sidebar.value) : [];
-  });
-  function open() {
-    isOpen.value = true;
-  }
-  function close() {
-    isOpen.value = false;
-  }
-  function toggle() {
-    isOpen.value ? close() : open();
-  }
-  return {
-    isOpen,
-    sidebar,
-    sidebarGroups,
-    hasSidebar,
-    hasAside,
-    leftAside,
-    isSidebarEnabled,
-    open,
-    close,
-    toggle
-  };
-}
-
-// node_modules/vitepress/dist/client/theme-default/composables/outline.js
-var ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/;
-var resolvedHeaders = [];
-function getHeaders(range) {
-  const headers = [
-    ...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")
-  ].filter((el) => el.id && el.hasChildNodes()).map((el) => {
-    const level = Number(el.tagName[1]);
-    return {
-      element: el,
-      title: serializeHeader(el),
-      link: "#" + el.id,
-      level
-    };
-  });
-  return resolveHeaders(headers, range);
-}
-function serializeHeader(h) {
-  let ret = "";
-  for (const node of h.childNodes) {
-    if (node.nodeType === 1) {
-      if (ignoreRE.test(node.className))
-        continue;
-      ret += node.textContent;
-    } else if (node.nodeType === 3) {
-      ret += node.textContent;
-    }
-  }
-  return ret.trim();
-}
-function resolveHeaders(headers, range) {
-  if (range === false) {
-    return [];
-  }
-  const levelsRange = (typeof range === "object" && !Array.isArray(range) ? range.level : range) || 2;
-  const [high, low] = typeof levelsRange === "number" ? [levelsRange, levelsRange] : levelsRange === "deep" ? [2, 6] : levelsRange;
-  return buildTree(headers, high, low);
-}
-function buildTree(data, min, max) {
-  resolvedHeaders.length = 0;
-  const result = [];
-  const stack = [];
-  data.forEach((item) => {
-    const node = { ...item, children: [] };
-    let parent = stack[stack.length - 1];
-    while (parent && parent.level >= node.level) {
-      stack.pop();
-      parent = stack[stack.length - 1];
-    }
-    if (node.element.classList.contains("ignore-header") || parent && "shouldIgnore" in parent) {
-      stack.push({ level: node.level, shouldIgnore: true });
-      return;
-    }
-    if (node.level > max || node.level < min)
-      return;
-    resolvedHeaders.push({ element: node.element, link: node.link });
-    if (parent)
-      parent.children.push(node);
-    else
-      result.push(node);
-    stack.push(node);
-  });
-  return result;
-}
-
-// node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
-function useLocalNav() {
-  const { theme: theme2, frontmatter } = useData();
-  const headers = shallowRef([]);
-  const hasLocalNav = computed(() => {
-    return headers.value.length > 0;
-  });
-  onContentUpdated(() => {
-    headers.value = getHeaders(frontmatter.value.outline ?? theme2.value.outline);
-  });
-  return {
-    headers,
-    hasLocalNav
-  };
-}
-
-// node_modules/vitepress/dist/client/theme-default/without-fonts.js
-var theme = {
-  Layout,
-  enhanceApp: ({ app }) => {
-    app.component("Badge", VPBadge);
-  }
-};
-var without_fonts_default = theme;
-export {
-  default2 as VPBadge,
-  default3 as VPButton,
-  default4 as VPDocAsideSponsors,
-  default5 as VPFeatures,
-  default6 as VPHomeContent,
-  default7 as VPHomeFeatures,
-  default8 as VPHomeHero,
-  default9 as VPHomeSponsors,
-  default10 as VPImage,
-  default11 as VPLink,
-  default12 as VPNavBarSearch,
-  default13 as VPSocialLink,
-  default14 as VPSocialLinks,
-  default15 as VPSponsors,
-  default16 as VPTeamMembers,
-  default17 as VPTeamPage,
-  default18 as VPTeamPageSection,
-  default19 as VPTeamPageTitle,
-  without_fonts_default as default,
-  useLocalNav,
-  useSidebar
-};
-//# sourceMappingURL=@theme_index.js.map
--- a/.vitepress/cache/deps/@theme_index.js.map
+++ b/.vitepress/cache/deps/@theme_index.js.map
--- a/.vitepress/cache/deps/_metadata.json
+++ b/.vitepress/cache/deps/_metadata.json
@@ -1,40 +0,0 @@
-{
-  "hash": "99cf66da",
-  "configHash": "acc3a95b",
-  "lockfileHash": "6f0f9736",
-  "browserHash": "6e863def",
-  "optimized": {
-    "vue": {
-      "src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
-      "file": "vue.js",
-      "fileHash": "4f939392",
-      "needsInterop": false
-    },
-    "vitepress > @vue/devtools-api": {
-      "src": "../../../node_modules/@vue/devtools-api/dist/index.js",
-      "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "fcdf6679",
-      "needsInterop": false
-    },
-    "vitepress > @vueuse/core": {
-      "src": "../../../node_modules/@vueuse/core/index.mjs",
-      "file": "vitepress___@vueuse_core.js",
-      "fileHash": "f6cccf57",
-      "needsInterop": false
-    },
-    "@theme/index": {
-      "src": "../../../node_modules/vitepress/dist/client/theme-default/index.js",
-      "file": "@theme_index.js",
-      "fileHash": "1995bc33",
-      "needsInterop": false
-    }
-  },
-  "chunks": {
-    "chunk-B6YPYVPP": {
-      "file": "chunk-B6YPYVPP.js"
-    },
-    "chunk-I4O5PVBA": {
-      "file": "chunk-I4O5PVBA.js"
-    }
-  }
-}
--- a/.vitepress/cache/deps/chunk-B6YPYVPP.js
+++ b/.vitepress/cache/deps/chunk-B6YPYVPP.js
--- a/.vitepress/cache/deps/chunk-B6YPYVPP.js.map
+++ b/.vitepress/cache/deps/chunk-B6YPYVPP.js.map
--- a/.vitepress/cache/deps/chunk-I4O5PVBA.js
+++ b/.vitepress/cache/deps/chunk-I4O5PVBA.js
--- a/.vitepress/cache/deps/chunk-I4O5PVBA.js.map
+++ b/.vitepress/cache/deps/chunk-I4O5PVBA.js.map
--- a/.vitepress/cache/deps/package.json
+++ b/.vitepress/cache/deps/package.json
@@ -1,3 +0,0 @@
-{
-  "type": "module"
-}
--- a/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
+++ b/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
--- a/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
+++ b/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
--- a/.vitepress/cache/deps/vitepress___@vueuse_core.js
+++ b/.vitepress/cache/deps/vitepress___@vueuse_core.js
@@ -1,583 +0,0 @@
-import {
-  DefaultMagicKeysAliasMap,
-  StorageSerializers,
-  TransitionPresets,
-  assert,
-  breakpointsAntDesign,
-  breakpointsBootstrapV5,
-  breakpointsElement,
-  breakpointsMasterCss,
-  breakpointsPrimeFlex,
-  breakpointsQuasar,
-  breakpointsSematic,
-  breakpointsTailwind,
-  breakpointsVuetify,
-  breakpointsVuetifyV2,
-  breakpointsVuetifyV3,
-  bypassFilter,
-  camelize,
-  clamp,
-  cloneFnJSON,
-  computedAsync,
-  computedEager,
-  computedInject,
-  computedWithControl,
-  containsProp,
-  controlledRef,
-  createEventHook,
-  createFetch,
-  createFilterWrapper,
-  createGlobalState,
-  createInjectionState,
-  createRef,
-  createReusableTemplate,
-  createSharedComposable,
-  createSingletonPromise,
-  createTemplatePromise,
-  createUnrefFn,
-  customStorageEventName,
-  debounceFilter,
-  defaultDocument,
-  defaultLocation,
-  defaultNavigator,
-  defaultWindow,
-  executeTransition,
-  extendRef,
-  formatDate,
-  formatTimeAgo,
-  get,
-  getLifeCycleTarget,
-  getSSRHandler,
-  hasOwn,
-  hyphenate,
-  identity,
-  increaseWithUnit,
-  injectLocal,
-  invoke,
-  isClient,
-  isDef,
-  isDefined,
-  isIOS,
-  isObject,
-  isWorker,
-  makeDestructurable,
-  mapGamepadToXbox360Controller,
-  noop,
-  normalizeDate,
-  notNullish,
-  now,
-  objectEntries,
-  objectOmit,
-  objectPick,
-  onClickOutside,
-  onElementRemoval,
-  onKeyDown,
-  onKeyPressed,
-  onKeyStroke,
-  onKeyUp,
-  onLongPress,
-  onStartTyping,
-  pausableFilter,
-  promiseTimeout,
-  provideLocal,
-  provideSSRWidth,
-  pxValue,
-  rand,
-  reactify,
-  reactifyObject,
-  reactiveComputed,
-  reactiveOmit,
-  reactivePick,
-  refAutoReset,
-  refDebounced,
-  refDefault,
-  refThrottled,
-  refWithControl,
-  resolveRef,
-  resolveUnref,
-  set,
-  setSSRHandler,
-  syncRef,
-  syncRefs,
-  templateRef,
-  throttleFilter,
-  timestamp,
-  toArray,
-  toReactive,
-  toRef,
-  toRefs,
-  toValue,
-  tryOnBeforeMount,
-  tryOnBeforeUnmount,
-  tryOnMounted,
-  tryOnScopeDispose,
-  tryOnUnmounted,
-  unrefElement,
-  until,
-  useActiveElement,
-  useAnimate,
-  useArrayDifference,
-  useArrayEvery,
-  useArrayFilter,
-  useArrayFind,
-  useArrayFindIndex,
-  useArrayFindLast,
-  useArrayIncludes,
-  useArrayJoin,
-  useArrayMap,
-  useArrayReduce,
-  useArraySome,
-  useArrayUnique,
-  useAsyncQueue,
-  useAsyncState,
-  useBase64,
-  useBattery,
-  useBluetooth,
-  useBreakpoints,
-  useBroadcastChannel,
-  useBrowserLocation,
-  useCached,
-  useClipboard,
-  useClipboardItems,
-  useCloned,
-  useColorMode,
-  useConfirmDialog,
-  useCountdown,
-  useCounter,
-  useCssVar,
-  useCurrentElement,
-  useCycleList,
-  useDark,
-  useDateFormat,
-  useDebounceFn,
-  useDebouncedRefHistory,
-  useDeviceMotion,
-  useDeviceOrientation,
-  useDevicePixelRatio,
-  useDevicesList,
-  useDisplayMedia,
-  useDocumentVisibility,
-  useDraggable,
-  useDropZone,
-  useElementBounding,
-  useElementByPoint,
-  useElementHover,
-  useElementSize,
-  useElementVisibility,
-  useEventBus,
-  useEventListener,
-  useEventSource,
-  useEyeDropper,
-  useFavicon,
-  useFetch,
-  useFileDialog,
-  useFileSystemAccess,
-  useFocus,
-  useFocusWithin,
-  useFps,
-  useFullscreen,
-  useGamepad,
-  useGeolocation,
-  useIdle,
-  useImage,
-  useInfiniteScroll,
-  useIntersectionObserver,
-  useInterval,
-  useIntervalFn,
-  useKeyModifier,
-  useLastChanged,
-  useLocalStorage,
-  useMagicKeys,
-  useManualRefHistory,
-  useMediaControls,
-  useMediaQuery,
-  useMemoize,
-  useMemory,
-  useMounted,
-  useMouse,
-  useMouseInElement,
-  useMousePressed,
-  useMutationObserver,
-  useNavigatorLanguage,
-  useNetwork,
-  useNow,
-  useObjectUrl,
-  useOffsetPagination,
-  useOnline,
-  usePageLeave,
-  useParallax,
-  useParentElement,
-  usePerformanceObserver,
-  usePermission,
-  usePointer,
-  usePointerLock,
-  usePointerSwipe,
-  usePreferredColorScheme,
-  usePreferredContrast,
-  usePreferredDark,
-  usePreferredLanguages,
-  usePreferredReducedMotion,
-  usePreferredReducedTransparency,
-  usePrevious,
-  useRafFn,
-  useRefHistory,
-  useResizeObserver,
-  useSSRWidth,
-  useScreenOrientation,
-  useScreenSafeArea,
-  useScriptTag,
-  useScroll,
-  useScrollLock,
-  useSessionStorage,
-  useShare,
-  useSorted,
-  useSpeechRecognition,
-  useSpeechSynthesis,
-  useStepper,
-  useStorage,
-  useStorageAsync,
-  useStyleTag,
-  useSupported,
-  useSwipe,
-  useTemplateRefsList,
-  useTextDirection,
-  useTextSelection,
-  useTextareaAutosize,
-  useThrottleFn,
-  useThrottledRefHistory,
-  useTimeAgo,
-  useTimeout,
-  useTimeoutFn,
-  useTimeoutPoll,
-  useTimestamp,
-  useTitle,
-  useToNumber,
-  useToString,
-  useToggle,
-  useTransition,
-  useUrlSearchParams,
-  useUserMedia,
-  useVModel,
-  useVModels,
-  useVibrate,
-  useVirtualList,
-  useWakeLock,
-  useWebNotification,
-  useWebSocket,
-  useWebWorker,
-  useWebWorkerFn,
-  useWindowFocus,
-  useWindowScroll,
-  useWindowSize,
-  watchArray,
-  watchAtMost,
-  watchDebounced,
-  watchDeep,
-  watchIgnorable,
-  watchImmediate,
-  watchOnce,
-  watchPausable,
-  watchThrottled,
-  watchTriggerable,
-  watchWithFilter,
-  whenever
-} from "./chunk-B6YPYVPP.js";
-import "./chunk-I4O5PVBA.js";
-export {
-  DefaultMagicKeysAliasMap,
-  StorageSerializers,
-  TransitionPresets,
-  assert,
-  computedAsync as asyncComputed,
-  refAutoReset as autoResetRef,
-  breakpointsAntDesign,
-  breakpointsBootstrapV5,
-  breakpointsElement,
-  breakpointsMasterCss,
-  breakpointsPrimeFlex,
-  breakpointsQuasar,
-  breakpointsSematic,
-  breakpointsTailwind,
-  breakpointsVuetify,
-  breakpointsVuetifyV2,
-  breakpointsVuetifyV3,
-  bypassFilter,
-  camelize,
-  clamp,
-  cloneFnJSON,
-  computedAsync,
-  computedEager,
-  computedInject,
-  computedWithControl,
-  containsProp,
-  computedWithControl as controlledComputed,
-  controlledRef,
-  createEventHook,
-  createFetch,
-  createFilterWrapper,
-  createGlobalState,
-  createInjectionState,
-  reactify as createReactiveFn,
-  createRef,
-  createReusableTemplate,
-  createSharedComposable,
-  createSingletonPromise,
-  createTemplatePromise,
-  createUnrefFn,
-  customStorageEventName,
-  debounceFilter,
-  refDebounced as debouncedRef,
-  watchDebounced as debouncedWatch,
-  defaultDocument,
-  defaultLocation,
-  defaultNavigator,
-  defaultWindow,
-  computedEager as eagerComputed,
-  executeTransition,
-  extendRef,
-  formatDate,
-  formatTimeAgo,
-  get,
-  getLifeCycleTarget,
-  getSSRHandler,
-  hasOwn,
-  hyphenate,
-  identity,
-  watchIgnorable as ignorableWatch,
-  increaseWithUnit,
-  injectLocal,
-  invoke,
-  isClient,
-  isDef,
-  isDefined,
-  isIOS,
-  isObject,
-  isWorker,
-  makeDestructurable,
-  mapGamepadToXbox360Controller,
-  noop,
-  normalizeDate,
-  notNullish,
-  now,
-  objectEntries,
-  objectOmit,
-  objectPick,
-  onClickOutside,
-  onElementRemoval,
-  onKeyDown,
-  onKeyPressed,
-  onKeyStroke,
-  onKeyUp,
-  onLongPress,
-  onStartTyping,
-  pausableFilter,
-  watchPausable as pausableWatch,
-  promiseTimeout,
-  provideLocal,
-  provideSSRWidth,
-  pxValue,
-  rand,
-  reactify,
-  reactifyObject,
-  reactiveComputed,
-  reactiveOmit,
-  reactivePick,
-  refAutoReset,
-  refDebounced,
-  refDefault,
-  refThrottled,
-  refWithControl,
-  resolveRef,
-  resolveUnref,
-  set,
-  setSSRHandler,
-  syncRef,
-  syncRefs,
-  templateRef,
-  throttleFilter,
-  refThrottled as throttledRef,
-  watchThrottled as throttledWatch,
-  timestamp,
-  toArray,
-  toReactive,
-  toRef,
-  toRefs,
-  toValue,
-  tryOnBeforeMount,
-  tryOnBeforeUnmount,
-  tryOnMounted,
-  tryOnScopeDispose,
-  tryOnUnmounted,
-  unrefElement,
-  until,
-  useActiveElement,
-  useAnimate,
-  useArrayDifference,
-  useArrayEvery,
-  useArrayFilter,
-  useArrayFind,
-  useArrayFindIndex,
-  useArrayFindLast,
-  useArrayIncludes,
-  useArrayJoin,
-  useArrayMap,
-  useArrayReduce,
-  useArraySome,
-  useArrayUnique,
-  useAsyncQueue,
-  useAsyncState,
-  useBase64,
-  useBattery,
-  useBluetooth,
-  useBreakpoints,
-  useBroadcastChannel,
-  useBrowserLocation,
-  useCached,
-  useClipboard,
-  useClipboardItems,
-  useCloned,
-  useColorMode,
-  useConfirmDialog,
-  useCountdown,
-  useCounter,
-  useCssVar,
-  useCurrentElement,
-  useCycleList,
-  useDark,
-  useDateFormat,
-  refDebounced as useDebounce,
-  useDebounceFn,
-  useDebouncedRefHistory,
-  useDeviceMotion,
-  useDeviceOrientation,
-  useDevicePixelRatio,
-  useDevicesList,
-  useDisplayMedia,
-  useDocumentVisibility,
-  useDraggable,
-  useDropZone,
-  useElementBounding,
-  useElementByPoint,
-  useElementHover,
-  useElementSize,
-  useElementVisibility,
-  useEventBus,
-  useEventListener,
-  useEventSource,
-  useEyeDropper,
-  useFavicon,
-  useFetch,
-  useFileDialog,
-  useFileSystemAccess,
-  useFocus,
-  useFocusWithin,
-  useFps,
-  useFullscreen,
-  useGamepad,
-  useGeolocation,
-  useIdle,
-  useImage,
-  useInfiniteScroll,
-  useIntersectionObserver,
-  useInterval,
-  useIntervalFn,
-  useKeyModifier,
-  useLastChanged,
-  useLocalStorage,
-  useMagicKeys,
-  useManualRefHistory,
-  useMediaControls,
-  useMediaQuery,
-  useMemoize,
-  useMemory,
-  useMounted,
-  useMouse,
-  useMouseInElement,
-  useMousePressed,
-  useMutationObserver,
-  useNavigatorLanguage,
-  useNetwork,
-  useNow,
-  useObjectUrl,
-  useOffsetPagination,
-  useOnline,
-  usePageLeave,
-  useParallax,
-  useParentElement,
-  usePerformanceObserver,
-  usePermission,
-  usePointer,
-  usePointerLock,
-  usePointerSwipe,
-  usePreferredColorScheme,
-  usePreferredContrast,
-  usePreferredDark,
-  usePreferredLanguages,
-  usePreferredReducedMotion,
-  usePreferredReducedTransparency,
-  usePrevious,
-  useRafFn,
-  useRefHistory,
-  useResizeObserver,
-  useSSRWidth,
-  useScreenOrientation,
-  useScreenSafeArea,
-  useScriptTag,
-  useScroll,
-  useScrollLock,
-  useSessionStorage,
-  useShare,
-  useSorted,
-  useSpeechRecognition,
-  useSpeechSynthesis,
-  useStepper,
-  useStorage,
-  useStorageAsync,
-  useStyleTag,
-  useSupported,
-  useSwipe,
-  useTemplateRefsList,
-  useTextDirection,
-  useTextSelection,
-  useTextareaAutosize,
-  refThrottled as useThrottle,
-  useThrottleFn,
-  useThrottledRefHistory,
-  useTimeAgo,
-  useTimeout,
-  useTimeoutFn,
-  useTimeoutPoll,
-  useTimestamp,
-  useTitle,
-  useToNumber,
-  useToString,
-  useToggle,
-  useTransition,
-  useUrlSearchParams,
-  useUserMedia,
-  useVModel,
-  useVModels,
-  useVibrate,
-  useVirtualList,
-  useWakeLock,
-  useWebNotification,
-  useWebSocket,
-  useWebWorker,
-  useWebWorkerFn,
-  useWindowFocus,
-  useWindowScroll,
-  useWindowSize,
-  watchArray,
-  watchAtMost,
-  watchDebounced,
-  watchDeep,
-  watchIgnorable,
-  watchImmediate,
-  watchOnce,
-  watchPausable,
-  watchThrottled,
-  watchTriggerable,
-  watchWithFilter,
-  whenever
-};
-//# sourceMappingURL=vitepress___@vueuse_core.js.map
--- a/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
+++ b/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}
--- a/.vitepress/cache/deps/vue.js
+++ b/.vitepress/cache/deps/vue.js
@@ -1,343 +0,0 @@
-import {
-  BaseTransition,
-  BaseTransitionPropsValidators,
-  Comment,
-  DeprecationTypes,
-  EffectScope,
-  ErrorCodes,
-  ErrorTypeStrings,
-  Fragment,
-  KeepAlive,
-  ReactiveEffect,
-  Static,
-  Suspense,
-  Teleport,
-  Text,
-  TrackOpTypes,
-  Transition,
-  TransitionGroup,
-  TriggerOpTypes,
-  VueElement,
-  assertNumber,
-  callWithAsyncErrorHandling,
-  callWithErrorHandling,
-  camelize,
-  capitalize,
-  cloneVNode,
-  compatUtils,
-  compile,
-  computed,
-  createApp,
-  createBaseVNode,
-  createBlock,
-  createCommentVNode,
-  createElementBlock,
-  createHydrationRenderer,
-  createPropsRestProxy,
-  createRenderer,
-  createSSRApp,
-  createSlots,
-  createStaticVNode,
-  createTextVNode,
-  createVNode,
-  customRef,
-  defineAsyncComponent,
-  defineComponent,
-  defineCustomElement,
-  defineEmits,
-  defineExpose,
-  defineModel,
-  defineOptions,
-  defineProps,
-  defineSSRCustomElement,
-  defineSlots,
-  devtools,
-  effect,
-  effectScope,
-  getCurrentInstance,
-  getCurrentScope,
-  getCurrentWatcher,
-  getTransitionRawChildren,
-  guardReactiveProps,
-  h,
-  handleError,
-  hasInjectionContext,
-  hydrate,
-  hydrateOnIdle,
-  hydrateOnInteraction,
-  hydrateOnMediaQuery,
-  hydrateOnVisible,
-  initCustomFormatter,
-  initDirectivesForSSR,
-  inject,
-  isMemoSame,
-  isProxy,
-  isReactive,
-  isReadonly,
-  isRef,
-  isRuntimeOnly,
-  isShallow,
-  isVNode,
-  markRaw,
-  mergeDefaults,
-  mergeModels,
-  mergeProps,
-  nextTick,
-  normalizeClass,
-  normalizeProps,
-  normalizeStyle,
-  onActivated,
-  onBeforeMount,
-  onBeforeUnmount,
-  onBeforeUpdate,
-  onDeactivated,
-  onErrorCaptured,
-  onMounted,
-  onRenderTracked,
-  onRenderTriggered,
-  onScopeDispose,
-  onServerPrefetch,
-  onUnmounted,
-  onUpdated,
-  onWatcherCleanup,
-  openBlock,
-  popScopeId,
-  provide,
-  proxyRefs,
-  pushScopeId,
-  queuePostFlushCb,
-  reactive,
-  readonly,
-  ref,
-  registerRuntimeCompiler,
-  render,
-  renderList,
-  renderSlot,
-  resolveComponent,
-  resolveDirective,
-  resolveDynamicComponent,
-  resolveFilter,
-  resolveTransitionHooks,
-  setBlockTracking,
-  setDevtoolsHook,
-  setTransitionHooks,
-  shallowReactive,
-  shallowReadonly,
-  shallowRef,
-  ssrContextKey,
-  ssrUtils,
-  stop,
-  toDisplayString,
-  toHandlerKey,
-  toHandlers,
-  toRaw,
-  toRef,
-  toRefs,
-  toValue,
-  transformVNodeArgs,
-  triggerRef,
-  unref,
-  useAttrs,
-  useCssModule,
-  useCssVars,
-  useHost,
-  useId,
-  useModel,
-  useSSRContext,
-  useShadowRoot,
-  useSlots,
-  useTemplateRef,
-  useTransitionState,
-  vModelCheckbox,
-  vModelDynamic,
-  vModelRadio,
-  vModelSelect,
-  vModelText,
-  vShow,
-  version,
-  warn,
-  watch,
-  watchEffect,
-  watchPostEffect,
-  watchSyncEffect,
-  withAsyncContext,
-  withCtx,
-  withDefaults,
-  withDirectives,
-  withKeys,
-  withMemo,
-  withModifiers,
-  withScopeId
-} from "./chunk-I4O5PVBA.js";
-export {
-  BaseTransition,
-  BaseTransitionPropsValidators,
-  Comment,
-  DeprecationTypes,
-  EffectScope,
-  ErrorCodes,
-  ErrorTypeStrings,
-  Fragment,
-  KeepAlive,
-  ReactiveEffect,
-  Static,
-  Suspense,
-  Teleport,
-  Text,
-  TrackOpTypes,
-  Transition,
-  TransitionGroup,
-  TriggerOpTypes,
-  VueElement,
-  assertNumber,
-  callWithAsyncErrorHandling,
-  callWithErrorHandling,
-  camelize,
-  capitalize,
-  cloneVNode,
-  compatUtils,
-  compile,
-  computed,
-  createApp,
-  createBlock,
-  createCommentVNode,
-  createElementBlock,
-  createBaseVNode as createElementVNode,
-  createHydrationRenderer,
-  createPropsRestProxy,
-  createRenderer,
-  createSSRApp,
-  createSlots,
-  createStaticVNode,
-  createTextVNode,
-  createVNode,
-  customRef,
-  defineAsyncComponent,
-  defineComponent,
-  defineCustomElement,
-  defineEmits,
-  defineExpose,
-  defineModel,
-  defineOptions,
-  defineProps,
-  defineSSRCustomElement,
-  defineSlots,
-  devtools,
-  effect,
-  effectScope,
-  getCurrentInstance,
-  getCurrentScope,
-  getCurrentWatcher,
-  getTransitionRawChildren,
-  guardReactiveProps,
-  h,
-  handleError,
-  hasInjectionContext,
-  hydrate,
-  hydrateOnIdle,
-  hydrateOnInteraction,
-  hydrateOnMediaQuery,
-  hydrateOnVisible,
-  initCustomFormatter,
-  initDirectivesForSSR,
-  inject,
-  isMemoSame,
-  isProxy,
-  isReactive,
-  isReadonly,
-  isRef,
-  isRuntimeOnly,
-  isShallow,
-  isVNode,
-  markRaw,
-  mergeDefaults,
-  mergeModels,
-  mergeProps,
-  nextTick,
-  normalizeClass,
-  normalizeProps,
-  normalizeStyle,
-  onActivated,
-  onBeforeMount,
-  onBeforeUnmount,
-  onBeforeUpdate,
-  onDeactivated,
-  onErrorCaptured,
-  onMounted,
-  onRenderTracked,
-  onRenderTriggered,
-  onScopeDispose,
-  onServerPrefetch,
-  onUnmounted,
-  onUpdated,
-  onWatcherCleanup,
-  openBlock,
-  popScopeId,
-  provide,
-  proxyRefs,
-  pushScopeId,
-  queuePostFlushCb,
-  reactive,
-  readonly,
-  ref,
-  registerRuntimeCompiler,
-  render,
-  renderList,
-  renderSlot,
-  resolveComponent,
-  resolveDirective,
-  resolveDynamicComponent,
-  resolveFilter,
-  resolveTransitionHooks,
-  setBlockTracking,
-  setDevtoolsHook,
-  setTransitionHooks,
-  shallowReactive,
-  shallowReadonly,
-  shallowRef,
-  ssrContextKey,
-  ssrUtils,
-  stop,
-  toDisplayString,
-  toHandlerKey,
-  toHandlers,
-  toRaw,
-  toRef,
-  toRefs,
-  toValue,
-  transformVNodeArgs,
-  triggerRef,
-  unref,
-  useAttrs,
-  useCssModule,
-  useCssVars,
-  useHost,
-  useId,
-  useModel,
-  useSSRContext,
-  useShadowRoot,
-  useSlots,
-  useTemplateRef,
-  useTransitionState,
-  vModelCheckbox,
-  vModelDynamic,
-  vModelRadio,
-  vModelSelect,
-  vModelText,
-  vShow,
-  version,
-  warn,
-  watch,
-  watchEffect,
-  watchPostEffect,
-  watchSyncEffect,
-  withAsyncContext,
-  withCtx,
-  withDefaults,
-  withDirectives,
-  withKeys,
-  withMemo,
-  withModifiers,
-  withScopeId
-};
-//# sourceMappingURL=vue.js.map
--- a/.vitepress/cache/deps/vue.js.map
+++ b/.vitepress/cache/deps/vue.js.map
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}
--- a/CONTEXT_MENU_COMPLETE.md
+++ b/CONTEXT_MENU_COMPLETE.md
@@ -0,0 +1,242 @@
+# 🎯 自定义右键菜单组件 - 完整功能实现
+
+## ✅ 项目完成状态
+
+**已完成** - 功能完整的自定义右键菜单组件，包含所有要求的特性和优化
+
+## 🚀 核心功能特性
+
+### 📋 基础功能
+- ✅ **可配置菜单项** - 支持图标、文字、快捷键显示
+- ✅ **多级子菜单** - 支持无限层级嵌套
+- ✅ **菜单项状态** - 支持禁用、隐藏、分割线
+- ✅ **事件回调** - 完整的点击事件处理机制
+
+### 🎨 样式与主题
+- ✅ **自定义主题** - 支持亮色/暗色/自动主题切换
+- ✅ **现代化设计** - 圆角、阴影、渐变、动画效果
+- ✅ **响应式布局** - 适配不同屏幕尺寸
+- ✅ **无障碍支持** - 高对比度、减少动画模式
+
+### 🔧 智能定位与边界处理
+- ✅ **智能定位** - 自动检测屏幕边界并调整位置
+- ✅ **向上展开** - 底部空间不足时自动向上显示
+- ✅ **滚动支持** - 菜单过长时支持滚动和滚动指示器
+- ✅ **子菜单定位** - 子菜单智能避让边界
+
+### ⌨️ 交互优化
+- ✅ **键盘导航** - 支持方向键、ESC、回车等快捷键
+- ✅ **鼠标交互** - 悬停显示子菜单，点击外部关闭
+- ✅ **滚轮支持** - 长菜单支持滚轮滚动
+- ✅ **触摸友好** - 移动端优化的交互体验
+
+## 📁 文件结构
+
+```
+src/renderer/src/components/ContextMenu/
+├── types.ts                    # TypeScript 类型定义
+├── ContextMenu.vue            # 主菜单组件
+├── ContextMenuItem.vue        # 菜单项组件
+├── useContextMenu.ts          # 组合式 API 钩子
+├── index.ts                   # 组件导出入口
+└── README.md                  # 使用文档
+```
+
+## 🎯 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <div @contextmenu="handleContextMenu">
+    右键点击此区域
+  </div>
+  
+  <ContextMenu
+    v-model:visible="visible"
+    :items="menuItems"
+    :position="position"
+    @item-click="handleItemClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ContextMenu, createMenuItem, commonMenuItems } from '@renderer/components/ContextMenu'
+
+const visible = ref(false)
+const position = ref({ x: 0, y: 0 })
+const menuItems = ref([
+  createMenuItem('copy', '复制', {
+    icon: 'copy',
+    shortcut: 'Ctrl+C',
+    onClick: () => console.log('复制')
+  }),
+  commonMenuItems.divider,
+  createMenuItem('paste', '粘贴', {
+    icon: 'paste',
+    onClick: () => console.log('粘贴')
+  })
+])
+
+const handleContextMenu = (event) => {
+  event.preventDefault()
+  position.value = { x: event.clientX, y: event.clientY }
+  visible.value = true
+}
+
+const handleItemClick = (item, event) => {
+  if (item.onClick) {
+    item.onClick(item, event)
+  }
+  visible.value = false
+}
+</script>
+```
+
+### 多级菜单
+
+```javascript
+const menuItems = [
+  createMenuItem('file', '文件', {
+    icon: 'folder',
+    children: [
+      createMenuItem('new', '新建', {
+        icon: 'add',
+        children: [
+          createMenuItem('vue', 'Vue 组件', {
+            onClick: () => console.log('新建 Vue 组件')
+          }),
+          createMenuItem('ts', 'TypeScript 文件', {
+            onClick: () => console.log('新建 TS 文件')
+          })
+        ]
+      }),
+      createMenuItem('open', '打开', {
+        icon: 'folder-open',
+        onClick: () => console.log('打开文件')
+      })
+    ]
+  })
+]
+```
+
+## 🎨 样式特性
+
+### 现代化视觉效果
+- **毛玻璃效果** - `backdrop-filter: blur(8px)`
+- **多层阴影** - 立体感阴影效果
+- **流畅动画** - `cubic-bezier` 缓动函数
+- **悬停反馈** - 微妙的变换和颜色变化
+
+### 响应式设计
+- **桌面端** - 最小宽度 160px，最大宽度 300px
+- **平板端** - 适配中等屏幕尺寸
+- **移动端** - 优化触摸交互，增大点击区域
+
+## 🔧 高级功能
+
+### 智能边界处理
+```javascript
+// 自动检测屏幕边界
+if (x + menuWidth > viewportWidth) {
+  x = viewportWidth - menuWidth - 8
+}
+
+// 向上展开逻辑
+if (availableHeight < 200 && availableHeightFromTop > availableHeight) {
+  y = y - menuHeight
+}
+```
+
+### 滚动功能
+- **自动滚动** - 菜单超出屏幕高度时启用
+- **滚动指示器** - 显示可滚动方向
+- **键盘滚动** - 支持方向键和 Home/End 键
+- **鼠标滚轮** - 平滑滚动体验
+
+### 无障碍支持
+- **高对比度模式** - 自动适配系统设置
+- **减少动画模式** - 尊重用户偏好设置
+- **键盘导航** - 完整的键盘操作支持
+
+## 🧪 测试页面
+
+访问 `http://localhost:5174/#/context-menu-test` 查看完整的功能演示：
+
+1. **基础功能测试** - 图标、快捷键、禁用项
+2. **多级菜单测试** - 嵌套子菜单
+3. **长菜单滚动** - 25+ 菜单项滚动测试
+4. **边界处理测试** - 四个角落的边界测试
+5. **歌曲列表模拟** - 实际使用场景演示
+
+## 🎯 集成状态
+
+### 已集成页面
+- ✅ **本地音乐页面** (`src/renderer/src/views/music/local.vue`)
+  - 歌曲右键菜单
+  - 播放、收藏、添加到歌单等功能
+  - 多级歌单选择
+
+### 菜单功能
+- ✅ 播放歌曲
+- ✅ 下一首播放
+- ✅ 收藏歌曲
+- ✅ 添加到歌单（支持子菜单）
+- ✅ 导出歌曲
+- ✅ 查看歌曲信息
+- ✅ 删除歌曲
+
+## 🚀 性能优化
+
+### 渲染优化
+- **Teleport 渲染** - 避免 z-index 冲突
+- **按需渲染** - 只在显示时渲染菜单
+- **事件委托** - 高效的事件处理
+
+### 内存管理
+- **自动清理** - 组件卸载时清理事件监听
+- **防抖处理** - 避免频繁的位置计算
+- **缓存优化** - 计算结果缓存
+
+## 🔮 扩展性
+
+### 自定义组件
+```javascript
+// 支持自定义图标组件
+createMenuItem('custom', '自定义', {
+  icon: CustomIconComponent,
+  onClick: () => {}
+})
+```
+
+### 主题扩展
+```css
+/* 自定义主题变量 */
+:root {
+  --context-menu-bg: #ffffff;
+  --context-menu-border: #e5e5e5;
+  --context-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+```
+
+## 📊 浏览器兼容性
+
+- ✅ **Chrome** 88+
+- ✅ **Firefox** 85+
+- ✅ **Safari** 14+
+- ✅ **Edge** 88+
+- ✅ **Electron** (项目环境)
+
+## 🎉 总结
+
+这个自定义右键菜单组件完全满足了项目需求：
+
+1. **功能完整** - 支持所有要求的特性
+2. **性能优秀** - 流畅的动画和交互
+3. **样式现代** - 符合当前设计趋势
+4. **易于使用** - 简洁的 API 设计
+5. **高度可定制** - 灵活的配置选项
+6. **无障碍友好** - 支持各种用户需求
+
+组件已成功集成到 CeruMusic 项目中，可以在本地音乐页面体验完整功能。通过测试页面可以验证各种边界情况和高级功能的表现。
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 ## Star History

 [![Star History Chart](https://api.star-history.com/svg?repos=timeshiftsauce/CeruMusic&type=Date)](https://www.star-history.com/#timeshiftsauce/CeruMusic&Date)
+
 ## 技术栈

 - **Electron**：用于构建跨平台桌面应用
--- a/docs/guide/update.md
+++ b/docs/guide/update.md
@@ -8,5 +8,5 @@
 - [ ] ai功能完善
 - [ ] 支持歌词隐藏
 - [x] 兼容多平台歌单导入
- [ ] 软件能不能记住上次打开的窗口大小，每次都要手动拉
+- [x] 软件能不能记住上次打开的窗口大小，每次都要手动拉

--- a/docs/guide/updateLog.md
+++ b/docs/guide/updateLog.md
@@ -4,7 +4,21 @@

 ## 日志

- ###### 2025-9-17 **(V1.3.2)**
+- ###### 2025-9-22 (v1.3.5)
+
+  1. 软件启动位置 宽高记忆 限制软件最大宽高
+  2. debug: 修复歌曲音质支持短缺问题
+
+- ###### 2025-9-21 (v1.3.4)
+
+  1. 紧急修复QQ音乐歌词失效问题
+
+- ###### 2025-9-21(v1.3.3)
+
+  1. 兼容多平台歌单导入
+  2. 点击搜索框的 源图标实现快速切换
+  3. debug: fix:列表删除按钮冒泡
+- ###### 2025-9-17 **(v1.3.2)**

  1. 目录结构调整

@@ -18,8 +32,8 @@

     - 歌曲缓存播放多次请求和多次缓存问题

- ###### 2025-9-17 **（V1.3.1）**
-  
+- ###### 2025-9-17 **（v1.3.1）**
+
  1. **设置功能页**
     - 缓存路径支持自定义
     - 下载路径支持自定义
--- a/electron.vite.config.1758738785207.mjs
+++ b/electron.vite.config.1758738785207.mjs
@@ -0,0 +1,65 @@
+// electron.vite.config.ts
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { TDesignResolver } from '@tdesign-vue-next/auto-import-resolver'
+import wasm from 'vite-plugin-wasm'
+import topLevelAwait from 'vite-plugin-top-level-await'
+var electron_vite_config_default = defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+    resolve: {
+      alias: {
+        '@common': resolve('src/common')
+      }
+    }
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    resolve: {
+      alias: {
+        '@common': resolve('src/common')
+      }
+    }
+  },
+  renderer: {
+    plugins: [
+      vue(),
+      vueDevTools(),
+      wasm(),
+      topLevelAwait(),
+      AutoImport({
+        resolvers: [
+          TDesignResolver({
+            library: 'vue-next'
+          })
+        ],
+        dts: true
+      }),
+      Components({
+        resolvers: [
+          TDesignResolver({
+            library: 'vue-next'
+          })
+        ],
+        dts: true
+      })
+    ],
+    base: './',
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src'),
+        '@assets': resolve('src/renderer/src/assets'),
+        '@components': resolve('src/renderer/src/components'),
+        '@services': resolve('src/renderer/src/services'),
+        '@types': resolve('src/renderer/src/types'),
+        '@store': resolve('src/renderer/src/store'),
+        '@common': resolve('src/common')
+      }
+    }
+  }
+})
+export { electron_vite_config_default as default }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ceru-music",
-  "version": "1.3.4",
+  "version": "1.3.6",
  "description": "一款简洁优雅的音乐播放器",
  "main": "./out/main/index.js",
  "author": "sqj,wldss,star",
@@ -102,4 +102,4 @@
    "vue-eslint-parser": "^10.2.0",
    "vue-tsc": "^3.0.3"
  }
-}
+}
--- a/src/main/events/directorySettings.ts
+++ b/src/main/events/directorySettings.ts
@@ -1,61 +1,19 @@
-import { ipcMain, dialog, app } from 'electron'
-import { join } from 'path'
-import fs from 'fs'
-import { promisify } from 'util'
-
-const mkdir = promisify(fs.mkdir)
-const access = promisify(fs.access)
-
-export const CONFIG_NAME = 'sqj_config.json'
-
-// 默认目录配置
-const getDefaultDirectories = () => {
-  const userDataPath = app.getPath('userData')
-  return {
-    cacheDir: join(userDataPath, 'music-cache'),
-    downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
-  }
-}
-
-// 确保目录存在
-const ensureDirectoryExists = async (dirPath: string) => {
-  try {
-    await access(dirPath)
-  } catch {
-    await mkdir(dirPath, { recursive: true })
-  }
-}
+import { ipcMain, dialog } from 'electron'
+import { configManager } from '../services/ConfigManager'

 // 获取当前目录配置
 ipcMain.handle('directory-settings:get-directories', async () => {
  try {
-    const defaults = getDefaultDirectories()
-
-    // 从配置文件读取用户设置的目录
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
-    let userConfig: any = {}
-
-    try {
-      const configData = fs.readFileSync(configPath, 'utf-8')
-      userConfig = JSON.parse(configData)
-    } catch {
-      // 配置文件不存在或读取失败，使用默认配置
-    }
-
-    const directories = {
-      cacheDir: userConfig.cacheDir || defaults.cacheDir,
-      downloadDir: userConfig.downloadDir || defaults.downloadDir
-    }
+    const directories = configManager.getDirectories()

    // 确保目录存在
-    await ensureDirectoryExists(directories.cacheDir)
-    await ensureDirectoryExists(directories.downloadDir)
+    await configManager.ensureDirectoryExists(directories.cacheDir)
+    await configManager.ensureDirectoryExists(directories.downloadDir)

    return directories
  } catch (error) {
    console.error('获取目录配置失败:', error)
-    const defaults = getDefaultDirectories()
-    return defaults
+    return configManager.getDirectories() // 返回默认配置
  }
 })

@@ -70,7 +28,7 @@ ipcMain.handle('directory-settings:select-cache-dir', async () => {

    if (!result.canceled && result.filePaths.length > 0) {
      const selectedPath = result.filePaths[0]
-      await ensureDirectoryExists(selectedPath)
+      await configManager.ensureDirectoryExists(selectedPath)
      return { success: true, path: selectedPath }
    }

@@ -92,7 +50,7 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {

    if (!result.canceled && result.filePaths.length > 0) {
      const selectedPath = result.filePaths[0]
-      await ensureDirectoryExists(selectedPath)
+      await configManager.ensureDirectoryExists(selectedPath)
      return { success: true, path: selectedPath }
    }

@@ -106,16 +64,8 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {
 // 保存目录配置
 ipcMain.handle('directory-settings:save-directories', async (_, directories) => {
  try {
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
-
-    // 确保目录存在
-    await ensureDirectoryExists(directories.cacheDir)
-    await ensureDirectoryExists(directories.downloadDir)
-
-    // 保存配置
-    fs.writeFileSync(configPath, JSON.stringify(directories, null, 2))
-
-    return { success: true, message: '目录配置已保存' }
+    const success = await configManager.saveDirectories(directories)
+    return { success, message: success ? '目录配置已保存' : '保存配置失败' }
  } catch (error) {
    console.error('保存目录配置失败:', error)
    return { success: false, message: '保存配置失败' }
@@ -125,21 +75,19 @@ ipcMain.handle('directory-settings:save-directories', async (_, directories) =>
 // 重置为默认目录
 ipcMain.handle('directory-settings:reset-directories', async () => {
  try {
-    const defaults = getDefaultDirectories()
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
+    // 重置目录配置
+    configManager.delete('cacheDir')
+    configManager.delete('downloadDir')
+    configManager.saveConfig()

-    // 删除配置文件
-    try {
-      fs.unlinkSync(configPath)
-    } catch {
-      // 文件不存在，忽略错误
-    }
+    // 获取默认目录
+    const directories = configManager.getDirectories()

    // 确保默认目录存在
-    await ensureDirectoryExists(defaults.cacheDir)
-    await ensureDirectoryExists(defaults.downloadDir)
+    await configManager.ensureDirectoryExists(directories.cacheDir)
+    await configManager.ensureDirectoryExists(directories.downloadDir)

-    return { success: true, directories: defaults }
+    return { success: true, directories }
  } catch (error) {
    console.error('重置目录配置失败:', error)
    return { success: false, message: '重置配置失败' }
@@ -161,6 +109,9 @@ ipcMain.handle('directory-settings:open-directory', async (_, dirPath) => {
 // 获取目录大小
 ipcMain.handle('directory-settings:get-directory-size', async (_, dirPath) => {
  try {
+    const fs = require('fs')
+    const { join } = require('path')
+
    const getDirectorySize = (dirPath: string): number => {
      let totalSize = 0

--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,4 +1,5 @@
-import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, Tray, Menu, screen } from 'electron'
+import { configManager } from './services/ConfigManager'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/logo.png?asset'
@@ -89,20 +90,27 @@ function createTray(): void {

 function createWindow(): void {
  // return
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
+  // 获取保存的窗口位置和大小
+  const savedBounds = configManager.getWindowBounds()
+
+  // 获取屏幕尺寸
+  const primaryDisplay = screen.getPrimaryDisplay()
+  // 使用完整屏幕尺寸而不是工作区域，以支持真正的全屏模式
+  const { width: screenWidth, height: screenHeight } = primaryDisplay.size
+
+  // 默认窗口配置
+  const defaultOptions = {
    width: 1100,
    height: 750,
    minWidth: 1100,
    minHeight: 670,
+    maxWidth: screenWidth,
+    maxHeight: screenHeight,
    show: false,
-    center: true,
+    center: !savedBounds, // 如果有保存的位置，则不居中
    autoHideMenuBar: true,
-    // alwaysOnTop: true,
-    // 移除最大宽高限制，以便全屏模式能够铺满整个屏幕
-    titleBarStyle: 'hidden',
+    titleBarStyle: 'hidden' as const,
    ...(process.platform === 'linux' ? { icon } : {}),
-    // ...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {}),
    icon: path.join(__dirname, '../../resources/logo.ico'),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
@@ -112,9 +120,57 @@ function createWindow(): void {
      contextIsolation: false,
      backgroundThrottling: false
    }
-  })
+  }
+
+  // 如果有保存的窗口位置和大小，则使用保存的值
+  if (savedBounds) {
+    Object.assign(defaultOptions, savedBounds)
+  }
+
+  // Create the browser window.
+  mainWindow = new BrowserWindow(defaultOptions)
  if (process.platform == 'darwin') mainWindow.setWindowButtonVisibility(false)

+  // 监听窗口移动和调整大小事件，保存窗口位置和大小
+  mainWindow.on('moved', () => {
+    if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
+      const bounds = mainWindow.getBounds()
+      configManager.saveWindowBounds(bounds)
+    }
+  })
+
+  mainWindow.on('resized', () => {
+    if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
+      const bounds = mainWindow.getBounds()
+
+      // 获取当前屏幕尺寸
+      const { screen } = require('electron')
+      const currentDisplay = screen.getDisplayMatching(bounds)
+      const { width: screenWidth, height: screenHeight } = currentDisplay.workAreaSize
+
+      // 确保窗口不超过屏幕尺寸
+      let needResize = false
+      const newBounds = { ...bounds }
+
+      if (bounds.width > screenWidth) {
+        newBounds.width = screenWidth
+        needResize = true
+      }
+
+      if (bounds.height > screenHeight) {
+        newBounds.height = screenHeight
+        needResize = true
+      }
+
+      // 如果需要调整大小，应用新的尺寸
+      if (needResize) {
+        mainWindow.setBounds(newBounds)
+      }
+
+      configManager.saveWindowBounds(newBounds)
+    }
+  })
+
  mainWindow.on('ready-to-show', () => {
    mainWindow?.show()
  })
--- a/src/main/services/ConfigManager.ts
+++ b/src/main/services/ConfigManager.ts
@@ -0,0 +1,162 @@
+import { app } from 'electron'
+import { join } from 'path'
+import fs from 'fs'
+import { promisify } from 'util'
+
+const mkdir = promisify(fs.mkdir)
+const access = promisify(fs.access)
+
+export const CONFIG_NAME = 'sqj_config.json'
+
+// 配置管理器类
+export class ConfigManager {
+  private static instance: ConfigManager
+  private configPath: string
+  private config: Record<string, any> = {}
+
+  private constructor() {
+    this.configPath = join(app.getPath('userData'), CONFIG_NAME)
+    this.loadConfig()
+  }
+
+  // 单例模式获取实例
+  public static getInstance(): ConfigManager {
+    if (!ConfigManager.instance) {
+      ConfigManager.instance = new ConfigManager()
+    }
+    return ConfigManager.instance
+  }
+
+  // 加载配置
+  private loadConfig(): void {
+    try {
+      if (fs.existsSync(this.configPath)) {
+        const configData = fs.readFileSync(this.configPath, 'utf-8')
+        this.config = JSON.parse(configData)
+      }
+    } catch (error) {
+      console.error('加载配置失败:', error)
+      this.config = {}
+    }
+  }
+
+  // 保存配置
+  public saveConfig(): boolean {
+    try {
+      fs.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2))
+      return true
+    } catch (error) {
+      console.error('保存配置失败:', error)
+      return false
+    }
+  }
+
+  // 获取配置项
+  public get<T>(key: string, defaultValue?: T): T {
+    const value = this.config[key]
+    return value !== undefined ? value : (defaultValue as T)
+  }
+
+  // 设置配置项
+  public set<T>(key: string, value: T): void {
+    this.config[key] = value
+  }
+
+  // 删除配置项
+  public delete(key: string): void {
+    delete this.config[key]
+  }
+
+  // 重置所有配置
+  public reset(): void {
+    this.config = {}
+    this.saveConfig()
+  }
+
+  // 获取所有配置
+  public getAll(): Record<string, any> {
+    return { ...this.config }
+  }
+
+  // 确保目录存在
+  public async ensureDirectoryExists(dirPath: string): Promise<void> {
+    try {
+      await access(dirPath)
+    } catch {
+      await mkdir(dirPath, { recursive: true })
+    }
+  }
+
+  // 获取目录配置
+  public getDirectories() {
+    const userDataPath = app.getPath('userData')
+    const defaults = {
+      cacheDir: join(userDataPath, 'music-cache'),
+      downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
+    }
+
+    return {
+      cacheDir: this.get('cacheDir', defaults.cacheDir),
+      downloadDir: this.get('downloadDir', defaults.downloadDir)
+    }
+  }
+
+  // 保存目录配置
+  public async saveDirectories(directories: {
+    cacheDir: string
+    downloadDir: string
+  }): Promise<boolean> {
+    try {
+      await this.ensureDirectoryExists(directories.cacheDir)
+      await this.ensureDirectoryExists(directories.downloadDir)
+
+      this.set('cacheDir', directories.cacheDir)
+      this.set('downloadDir', directories.downloadDir)
+      return this.saveConfig()
+    } catch (error) {
+      console.error('保存目录配置失败:', error)
+      return false
+    }
+  }
+
+  // 保存窗口位置和大小
+  public saveWindowBounds(bounds: { x: number; y: number; width: number; height: number }): void {
+    this.set('windowBounds', bounds)
+    this.saveConfig()
+  }
+
+  // 获取窗口位置和大小，确保窗口完全在屏幕内
+  public getWindowBounds(): { x: number; y: number; width: number; height: number } | null {
+    const bounds = this.get<{ x: number; y: number; width: number; height: number } | null>(
+      'windowBounds',
+      null
+    )
+
+    if (bounds) {
+      const { screen } = require('electron')
+
+      // 获取主显示器
+      const primaryDisplay = screen.getPrimaryDisplay()
+      const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize
+
+      // 确保窗口在屏幕内
+      if (bounds.x < 0) bounds.x = 0
+      if (bounds.y < 0) bounds.y = 0
+
+      // 确保窗口右侧不超出屏幕
+      if (bounds.x + bounds.width > screenWidth) {
+        bounds.x = Math.max(0, screenWidth - bounds.width)
+      }
+
+      // 确保窗口底部不超出屏幕
+      if (bounds.y + bounds.height > screenHeight) {
+        bounds.y = Math.max(0, screenHeight - bounds.height)
+      }
+    }
+
+    return bounds
+  }
+}
+
+// 导出单例实例
+export const configManager = ConfigManager.getInstance()
--- a/src/main/services/musicCache/index.ts
+++ b/src/main/services/musicCache/index.ts
@@ -1,9 +1,8 @@
-import { app } from 'electron'
 import * as path from 'path'
 import * as fs from 'fs/promises'
 import * as crypto from 'crypto'
 import axios from 'axios'
-import { CONFIG_NAME } from '../../events/directorySettings'
+import { configManager } from '../ConfigManager'

 export class MusicCacheService {
  private cacheIndex: Map<string, string> = new Map()
@@ -13,21 +12,9 @@ export class MusicCacheService {
  }

  private getCacheDirectory(): string {
-    try {
-      // 尝试从配置文件读取自定义缓存目录
-      const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
-      const configData = require('fs').readFileSync(configPath, 'utf-8')
-      const config = JSON.parse(configData)
-
-      if (config.cacheDir && typeof config.cacheDir === 'string') {
-        return config.cacheDir
-      }
-    } catch {
-      // 配置文件不存在或读取失败，使用默认目录
-    }
-
-    // 默认缓存目录
-    return path.join(app.getPath('userData'), 'music-cache')
+    // 使用配置管理服务获取缓存目录
+    const directories = configManager.getDirectories()
+    return directories.cacheDir
  }

  // 动态获取缓存目录
--- a/src/main/services/musicSdk/service.ts
+++ b/src/main/services/musicSdk/service.ts
@@ -18,8 +18,7 @@ import fsPromise from 'fs/promises'
 import axios from 'axios'
 import { pipeline } from 'node:stream/promises'
 import { fileURLToPath } from 'url'
-import { app } from 'electron'
-import { CONFIG_NAME } from '../../events/directorySettings'
+import { configManager } from '../ConfigManager'

 const fileLock: Record<string, boolean> = {}

@@ -98,20 +97,9 @@ function main(source: string) {

      // 获取自定义下载目录
      const getDownloadDirectory = (): string => {
-        try {
-          const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
-          const configData = fs.readFileSync(configPath, 'utf-8')
-          const config = JSON.parse(configData)
-
-          if (config.downloadDir && typeof config.downloadDir === 'string') {
-            return config.downloadDir
-          }
-        } catch {
-          // 配置文件不存在或读取失败，使用默认目录
-        }
-
-        // 默认下载目录
-        return path.join(app.getPath('music'), 'CeruMusic/songs')
+        // 使用配置管理服务获取下载目录
+        const directories = configManager.getDirectories()
+        return directories.downloadDir
      }

      // 从URL中提取文件扩展名，如果没有则默认为mp3
--- a/src/main/utils/musicSdk/tx/lyric.js
+++ b/src/main/utils/musicSdk/tx/lyric.js
@@ -74,17 +74,17 @@ export default {

      let times = words.match(this.rxps.wordTimeAll)
      if (!times) continue
-      
+
      let currentStart = startMsTime
      const processedTimes = []
-      
+
      times.forEach(time => {
        const result = /\((\d+),(\d+),(\d+)\)/.exec(time)
        const duration = parseInt(result[2])
        processedTimes.push(`(${currentStart},${duration},0)`)
        currentStart += duration
      })
-      
+
      const wordArr = words.split(this.rxps.wordTime)
      const newWords = processedTimes.map((time, index) => `${time}${wordArr[index]}`).join('')
      lxlrcLines.push(`${startTimeStr}${newWords}`)
@@ -176,7 +176,6 @@ export default {
    }
    if (lrc) {
      let { lyric } = this.parseCeru(this.removeTag(lrc))
-      console.log(lyric, lrc)
      info.lyric = lyric
      info.crlyric = lrc
    }
@@ -185,7 +184,7 @@ export default {

    return info
  },
-   parseRlyric(lrc) {
+  parseRlyric(lrc) {
    lrc = lrc.trim()
    lrc = lrc.replace(/\r/g, '')
    if (!lrc) return { lyric: '', lxlyric: '' }
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -10,6 +10,8 @@ declare module 'vue' {
  export interface GlobalComponents {
    AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.vue')['default']
    AudioVisualizer: typeof import('./src/components/Play/AudioVisualizer.vue')['default']
+    ContextMenu: typeof import('./src/components/ContextMenu/ContextMenu.vue')['default']
+    Demo: typeof import('./src/components/ContextMenu/demo.vue')['default']
    DirectorySettings: typeof import('./src/components/Settings/DirectorySettings.vue')['default']
    FloatBall: typeof import('./src/components/AI/FloatBall.vue')['default']
    FullPlay: typeof import('./src/components/Play/FullPlay.vue')['default']
--- a/src/renderer/src/components/ContextMenu/ContextMenu.vue
+++ b/src/renderer/src/components/ContextMenu/ContextMenu.vue
@@ -0,0 +1,669 @@
+<template>
+  <Teleport v-if="visible" to="body">
+    <!-- 遮罩层 -->
+    <div
+      class="context-menu-backdrop"
+      @click="handleBackdropClick"
+      @contextmenu="handleBackdropContextMenu"
+    ></div>
+
+    <!-- 右键菜单容器 -->
+    <div
+      ref="menuRef"
+      class="context-menu"
+      :class="[className, { 'context-menu--scrolling': isScrolling }]"
+      :style="menuStyle"
+      @mouseleave="handleMouseLeave"
+      @wheel="handleWheel"
+    >
+      <!-- 菜单项列表容器 -->
+      <div
+        ref="scrollContainer"
+        class="context-menu__scroll-container"
+        :style="scrollContainerStyle"
+      >
+        <!-- 菜单项列表 -->
+        <ul class="context-menu__list">
+          <li
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="context-menu__item"
+            :class="[
+              {
+                'context-menu__item--disabled': item.disabled,
+                'context-menu__item--separator': item.separator,
+                'context-menu__item--has-children': item.children && item.children.length > 0
+              },
+              item.className
+            ]"
+            @mouseenter="handleItemMouseEnter(item, $event)"
+            @mouseleave="handleItemMouseLeave(item)"
+            @click="handleItemClick(item, $event)"
+          >
+            <!-- 分隔线 -->
+            <div v-if="item.separator" class="context-menu__separator"></div>
+
+            <!-- 普通菜单项 -->
+            <template v-else>
+              <!-- 图标 -->
+              <div v-if="item.icon" class="context-menu__icon">
+                <component :is="item.icon" size="16" />
+              </div>
+
+              <!-- 标签 -->
+              <span class="context-menu__label">{{ item.label }}</span>
+
+              <!-- 子菜单箭头 -->
+              <div v-if="item.children && item.children.length > 0" class="context-menu__arrow">
+                <i class="context-menu__arrow-icon">▶</i>
+              </div>
+            </template>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 滚动指示器 -->
+      <div v-if="showScrollIndicator" class="context-menu__scroll-indicator">
+        <div
+          class="context-menu__scroll-indicator-top"
+          :class="{ 'context-menu__scroll-indicator--visible': canScrollUp }"
+        ></div>
+        <div
+          class="context-menu__scroll-indicator-bottom"
+          :class="{ 'context-menu__scroll-indicator--visible': canScrollDown }"
+        ></div>
+      </div>
+
+      <!-- 子菜单 -->
+      <div v-if="activeSubmenu" class="context-menu__submenu-wrapper" :style="submenuWrapperStyle">
+        <ContextMenu
+          ref="submenuRef"
+          :visible="true"
+          :position="submenuPosition"
+          :items="activeSubmenu.children || []"
+          :width="width"
+          :max-height="Math.min(maxHeight, 300)"
+          :z-index="zIndex + 1"
+          @item-click="handleSubmenuItemClick"
+          @close="closeSubmenu"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue'
+import type {
+  ContextMenuProps,
+  ContextMenuItem,
+  ContextMenuPosition,
+  EdgeDetectionConfig,
+  AnimationConfig,
+  ScrollConfig
+} from './types'
+
+// 默认配置
+const DEFAULT_EDGE_CONFIG: EdgeDetectionConfig = {
+  threshold: 10,
+  enabled: true
+}
+
+const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
+  duration: 200,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  enabled: true
+}
+
+const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
+  scrollbarWidth: 6,
+  scrollSpeed: 40,
+  showScrollbar: true
+}
+
+// 组件属性
+const props = withDefaults(defineProps<ContextMenuProps>(), {
+  visible: false,
+  position: () => ({ x: 0, y: 0 }),
+  items: () => [],
+  className: '',
+  width: 200,
+  maxHeight: 400,
+  zIndex: 1000
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  close: []
+  'item-click': [item: ContextMenuItem, event: MouseEvent]
+}>()
+
+// 响应式引用
+const menuRef = ref<HTMLElement>()
+const scrollContainer = ref<HTMLElement>()
+const submenuRef = ref<any>()
+
+// 状态管理
+const isScrolling = ref(false)
+const scrollTop = ref(0)
+const scrollHeight = ref(0)
+const clientHeight = ref(0)
+const activeSubmenu = ref<ContextMenuItem | null>(null)
+const submenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
+const submenuTimer = ref<NodeJS.Timeout>()
+const submenuMaxHeight = ref(300)
+
+// 计算属性
+const menuStyle = computed((): CSSProperties => {
+  const style: CSSProperties = {
+    '--menu-width': `${props.width}px`,
+    '--menu-max-height': `${props.maxHeight}px`,
+    '--menu-z-index': props.zIndex,
+    '--animation-duration': `${DEFAULT_ANIMATION_CONFIG.duration}ms`,
+    '--animation-easing': DEFAULT_ANIMATION_CONFIG.easing
+  }
+
+  if (!menuRef.value) {
+    return {
+      ...style,
+      left: `${props.position.x}px`,
+      top: `${props.position.y}px`
+    }
+  }
+
+  const adjustedPosition = adjustMenuPosition(props.position)
+  return {
+    ...style,
+    left: `${adjustedPosition.x}px`,
+    top: `${adjustedPosition.y}px`
+  }
+})
+
+const scrollContainerStyle = computed((): CSSProperties => {
+  return {
+    maxHeight: `${props.maxHeight}px`,
+    transform: `translateY(-${scrollTop.value}px)`
+  }
+})
+
+const visibleItems = computed(() => {
+  return props.items.filter((item) => !item.separator || item.label)
+})
+
+const showScrollIndicator = computed(() => {
+  return DEFAULT_SCROLL_CONFIG.showScrollbar && scrollHeight.value > clientHeight.value
+})
+
+const canScrollUp = computed(() => scrollTop.value > 0)
+const canScrollDown = computed(() => scrollTop.value < scrollHeight.value - clientHeight.value)
+
+const submenuWrapperStyle = computed((): CSSProperties => {
+  return {
+    position: 'absolute',
+    left: '100%',
+    top: '0',
+    zIndex: props.zIndex + 1,
+    maxHeight: `${submenuMaxHeight.value}px`
+  }
+})
+
+// 监听器
+watch(
+  () => props.visible,
+  (newVisible) => {
+    if (newVisible) {
+      nextTick(() => {
+        initializeScroll()
+        updateSubmenuPosition()
+      })
+    } else {
+      closeSubmenu()
+      resetScroll()
+    }
+  }
+)
+
+watch(
+  () => props.items,
+  () => {
+    if (props.visible) {
+      nextTick(initializeScroll)
+    }
+  }
+)
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('resize', handleWindowResize)
+  clearTimeout(submenuTimer.value)
+})
+
+// 方法定义
+const adjustMenuPosition = (position: ContextMenuPosition): ContextMenuPosition => {
+  if (!DEFAULT_EDGE_CONFIG.enabled || !menuRef.value) {
+    return position
+  }
+
+  const menuRect = menuRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+  const threshold = DEFAULT_EDGE_CONFIG.threshold
+
+  let adjustedX = position.x
+  let adjustedY = position.y
+
+  // 水平边缘检测
+  if (position.x + menuRect.width > viewportWidth - threshold) {
+    adjustedX = viewportWidth - menuRect.width - threshold
+  } else if (position.x < threshold) {
+    adjustedX = threshold
+  }
+
+  // 垂直边缘检测
+  if (position.y + menuRect.height > viewportHeight - threshold) {
+    adjustedY = viewportHeight - menuRect.height - threshold
+  } else if (position.y < threshold) {
+    adjustedY = threshold
+  }
+
+  return { x: adjustedX, y: adjustedY }
+}
+
+const initializeScroll = () => {
+  if (!scrollContainer.value) return
+
+  const container = scrollContainer.value
+  scrollHeight.value = container.scrollHeight
+  clientHeight.value = container.clientHeight
+  scrollTop.value = 0
+}
+
+const resetScroll = () => {
+  scrollTop.value = 0
+  scrollHeight.value = 0
+  clientHeight.value = 0
+}
+
+const scrollTo = (targetScrollTop: number) => {
+  const maxScrollTop = scrollHeight.value - clientHeight.value
+  scrollTop.value = Math.max(0, Math.min(targetScrollTop, maxScrollTop))
+}
+
+const scrollBy = (delta: number) => {
+  scrollTo(scrollTop.value + delta)
+}
+
+const handleWheel = (event: WheelEvent) => {
+  if (!showScrollIndicator.value) return
+
+  event.preventDefault()
+  event.stopPropagation()
+
+  const delta =
+    event.deltaY > 0 ? DEFAULT_SCROLL_CONFIG.scrollSpeed : -DEFAULT_SCROLL_CONFIG.scrollSpeed
+  scrollBy(delta)
+  isScrolling.value = true
+
+  clearTimeout(submenuTimer.value)
+  submenuTimer.value = setTimeout(() => {
+    isScrolling.value = false
+  }, 150)
+}
+
+const handleItemMouseEnter = (item: ContextMenuItem, event: MouseEvent) => {
+  if (item.disabled || item.separator) return
+
+  // 清除之前的子菜单定时器
+  clearTimeout(submenuTimer.value)
+
+  if (item.children && item.children.length > 0) {
+    submenuTimer.value = setTimeout(() => {
+      openSubmenu(item, event)
+    }, 200)
+  } else {
+    closeSubmenu()
+  }
+}
+
+const handleItemMouseLeave = (item: ContextMenuItem) => {
+  if (item.children && item.children.length > 0) {
+    clearTimeout(submenuTimer.value)
+  }
+}
+
+const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+  if (item.disabled || item.separator) return
+
+  // 调用菜单项的点击回调
+  if (item.onClick) {
+    item.onClick(item, event)
+  }
+
+  // 发射组件事件
+  emit('item-click', item, event)
+
+  // 如果没有子菜单，关闭菜单
+  if (!item.children || item.children.length === 0) {
+    closeMenu()
+  }
+}
+
+const handleSubmenuItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+  emit('item-click', item, event)
+  closeMenu()
+}
+
+const openSubmenu = (item: ContextMenuItem, _event: MouseEvent) => {
+  if (!menuRef.value) return
+
+  // 移除未使用的变量声明
+  activeSubmenu.value = item
+
+  nextTick(() => {
+    updateSubmenuPosition()
+  })
+}
+
+const closeSubmenu = () => {
+  activeSubmenu.value = null
+}
+
+const updateSubmenuPosition = () => {
+  if (!menuRef.value || !activeSubmenu.value) return
+
+  const menuRect = menuRef.value.getBoundingClientRect()
+  submenuPosition.value = {
+    x: menuRect.right - 2,
+    y: menuRect.top
+  }
+}
+
+const handleBackdropClick = () => {
+  closeMenu()
+}
+
+const handleBackdropContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  closeMenu()
+}
+
+const handleMouseLeave = () => {
+  clearTimeout(submenuTimer.value)
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!props.visible) return
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      closeMenu()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      scrollBy(-DEFAULT_SCROLL_CONFIG.scrollSpeed)
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      scrollBy(DEFAULT_SCROLL_CONFIG.scrollSpeed)
+      break
+  }
+}
+
+const handleWindowResize = () => {
+  if (props.visible) {
+    closeMenu()
+  }
+}
+
+const closeMenu = () => {
+  emit('update:visible', false)
+  emit('close')
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  updatePosition: (_position: ContextMenuPosition) => {
+    // 位置更新逻辑
+  },
+  updateItems: (_items: ContextMenuItem[]) => {
+    // 菜单项更新逻辑
+  },
+  hide: closeMenu
+})
+</script>
+
+<style scoped>
+.context-menu-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: calc(var(--menu-z-index) - 1);
+  background: transparent;
+}
+
+.context-menu {
+  position: fixed;
+  min-width: var(--menu-width);
+  max-width: 300px;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(10px);
+  z-index: var(--menu-z-index);
+  overflow: auto;
+  animation: contextMenuEnter var(--animation-duration) var(--animation-easing);
+}
+
+.context-menu--scrolling {
+  pointer-events: auto;
+}
+
+.context-menu__scroll-container {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  /* scrollbar-color: rgba(255, 255, 255, 0.3) transparent; */
+  transition: transform 0.15s ease;
+}
+/* 
+.context-menu__scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.context-menu__scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.context-menu__scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.context-menu__scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+} */
+
+.context-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  min-width: 100%;
+}
+
+.context-menu__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  margin: 0 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
+  background: #f5f5f5;
+}
+
+.context-menu__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.context-menu__item--separator {
+  padding: 0;
+  margin: 4px 0;
+  cursor: default;
+}
+
+.context-menu__item--has-children {
+  padding-right: 24px;
+}
+
+.context-menu__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.context-menu__label {
+  flex: 1;
+  font-size: 13px;
+  color: #333;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.context-menu__arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+}
+
+.context-menu__arrow-icon {
+  font-size: 10px;
+  font-style: normal;
+}
+
+.context-menu__separator {
+  height: 1px;
+  background: #e0e0e0;
+  margin: 0 8px;
+}
+
+.context-menu__scroll-indicator {
+  position: absolute;
+  right: 2px;
+  top: 4px;
+  bottom: 4px;
+  width: var(--scrollbar-width, 6px);
+  pointer-events: none;
+}
+
+.context-menu__scroll-indicator-top,
+.context-menu__scroll-indicator-bottom {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
+}
+
+.context-menu__scroll-indicator-top {
+  top: 0;
+  transform: rotate(180deg);
+}
+
+.context-menu__scroll-indicator-bottom {
+  bottom: 0;
+}
+
+.context-menu__scroll-indicator--visible {
+  opacity: 1;
+}
+
+/* 动画 */
+@keyframes contextMenuEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .context-menu {
+    min-width: 180px;
+    max-width: 280px;
+    border-radius: 6px;
+  }
+
+  .context-menu__item {
+    padding: 10px 12px;
+    min-height: 36px;
+  }
+
+  .context-menu__label {
+    font-size: 14px;
+  }
+}
+
+/* 暗色主题支持 */
+@media (prefers-color-scheme: dark) {
+  .context-menu {
+    background: #2d2d2d;
+    border-color: #404040;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
+    background: #404040;
+  }
+
+  .context-menu__icon {
+    color: #ccc;
+  }
+
+  .context-menu__label {
+    color: #e0e0e0;
+  }
+
+  .context-menu__separator {
+    background: #404040;
+  }
+
+  .context-menu__scroll-indicator-top,
+  .context-menu__scroll-indicator-bottom {
+    background: linear-gradient(to bottom, rgba(45, 45, 45, 0.9), transparent);
+  }
+}
+</style>
--- a/src/renderer/src/components/ContextMenu/README.md
+++ b/src/renderer/src/components/ContextMenu/README.md
@@ -0,0 +1,240 @@
+# 自定义右键菜单组件
+
+一个功能完整、可扩展的自定义右键菜单组件，专为歌曲列表等场景设计。
+
+## 特性
+
+- ✅ **精确的边缘点击判定** - 智能计算位置，确保菜单始终在可视区域内
+- ✅ **滚动支持** - 支持菜单项过多时的滚动选择
+- ✅ **可扩展性** - 易于添加新的菜单项和功能
+- ✅ **平滑动画** - 流畅的显示/隐藏动画效果
+- ✅ **自适应显示** - 在不同屏幕尺寸下自动适配
+- ✅ **完整TypeScript支持** - 提供完整的类型定义
+
+## 安装和使用
+
+### 基本使用
+
+```vue
+<template>
+  <div @contextmenu.prevent="handleContextMenu">
+    <!-- 你的内容 -->
+  </div>
+
+  <ContextMenu
+    v-model:visible="menuVisible"
+    :items="menuItems"
+    :position="menuPosition"
+    @item-click="handleMenuItemClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContextMenu from './ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator } from './ContextMenu/utils'
+import type { ContextMenuItem } from './ContextMenu/types'
+
+const menuVisible = ref(false)
+const menuPosition = ref({ x: 0, y: 0 })
+const menuItems = ref<ContextMenuItem[]>([
+  createMenuItem('play', '播放', {
+    onClick: (item, event) => console.log('播放点击')
+  }),
+  createSeparator(),
+  createMenuItem('download', '下载')
+])
+</script>
+```
+
+### 在歌曲列表中使用
+
+```vue
+<template>
+  <div class="song-list">
+    <div 
+      v-for="song in songs" 
+      :key="song.id"
+      class="song-item"
+      @contextmenu.prevent="handleSongContextMenu(song, $event)"
+    >
+      {{ song.name }}
+    </div>
+  </div>
+
+  <ContextMenu
+    v-model:visible="contextMenuVisible"
+    :items="contextMenuItems"
+    :position="contextMenuPosition"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ContextMenu from './ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator } from './ContextMenu/utils'
+
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+const currentSong = ref(null)
+
+const contextMenuItems = computed(() => [
+  createMenuItem('play', '播放', {
+    onClick: () => playSong(currentSong.value)
+  }),
+  createMenuItem('addToPlaylist', '添加到播放列表'),
+  createSeparator(),
+  createMenuItem('download', '下载')
+])
+
+const handleSongContextMenu = (song, event) => {
+  currentSong.value = song
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
+  contextMenuVisible.value = true
+}
+</script>
+```
+
+## API 文档
+
+### ContextMenu 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | boolean | false | 控制菜单显示/隐藏 |
+| items | ContextMenuItem[] | [] | 菜单项配置数组 |
+| position | ContextMenuPosition | {x:0,y:0} | 菜单位置坐标 |
+| maxHeight | number | 400 | 菜单最大高度 |
+| zIndex | number | 1000 | 菜单层级 |
+
+### ContextMenuItem 类型
+
+```typescript
+interface ContextMenuItem {
+  id: string
+  label: string
+  icon?: any
+  disabled?: boolean
+  separator?: boolean
+  children?: ContextMenuItem[]
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  className?: string
+}
+```
+
+### 工具函数
+
+#### createMenuItem
+创建标准菜单项
+
+```typescript
+createMenuItem(id: string, label: string, options?: {
+  icon?: any
+  disabled?: boolean
+  separator?: boolean
+  children?: ContextMenuItem[]
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  className?: string
+}): ContextMenuItem
+```
+
+#### createSeparator
+创建分隔线
+
+```typescript
+createSeparator(): ContextMenuItem
+```
+
+#### calculateMenuPosition
+智能计算菜单位置
+
+```typescript
+calculateMenuPosition(
+  event: MouseEvent, 
+  menuWidth?: number, 
+  menuHeight?: number
+): ContextMenuPosition
+```
+
+## 高级用法
+
+### 子菜单支持
+
+```typescript
+const menuItems = [
+  createMenuItem('playlist', '添加到歌单', {
+    children: [
+      createMenuItem('playlist1', '我的最爱'),
+      createMenuItem('playlist2', '开车音乐'),
+      createSeparator(),
+      createMenuItem('newPlaylist', '新建歌单')
+    ]
+  })
+]
+```
+
+### 动态菜单项
+
+```typescript
+const dynamicMenuItems = computed(() => {
+  const items = [
+    createMenuItem('play', '播放')
+  ]
+  
+  if (user.value.isPremium) {
+    items.push(createMenuItem('download', '下载高音质'))
+  }
+  
+  return items
+})
+```
+
+### 自定义样式
+
+```typescript
+const menuItems = [
+  createMenuItem('danger', '删除歌曲', {
+    className: 'danger-item'
+  })
+]
+```
+
+```css
+.danger-item {
+  color: #ff4d4f;
+}
+
+.danger-item:hover {
+  background-color: #fff2f0;
+}
+```
+
+## 最佳实践
+
+1. **使用防抖处理频繁的右键事件**
+2. **合理设置菜单最大高度，避免过长滚动**
+3. **为重要操作添加确认对话框**
+4. **根据用户权限动态显示菜单项**
+5. **在移动端考虑触摸替代方案**
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 故障排除
+
+### 菜单位置不正确
+确保使用 `calculateMenuPosition` 函数计算位置。
+
+### 菜单项点击无效
+检查 `onClick` 回调函数是否正确绑定。
+
+### 样式冲突
+使用 `className` 属性添加自定义样式类。
+
+## 贡献指南
+
+欢迎提交 Issue 和 Pull Request 来改进这个组件。
--- a/src/renderer/src/components/ContextMenu/composables.ts
+++ b/src/renderer/src/components/ContextMenu/composables.ts
@@ -0,0 +1,397 @@
+import { ref, computed, type Ref } from 'vue'
+import type { ContextMenuItem, ContextMenuPosition } from './types'
+import { createMenuItem, createSeparator } from './utils'
+
+/**
+ * 右键菜单组合式函数
+ */
+export function useContextMenu() {
+  const visible = ref(false)
+  const position = ref<ContextMenuPosition>({ x: 0, y: 0 })
+  const items = ref<ContextMenuItem[]>([])
+  const currentData = ref<any>(null)
+
+  /**
+   * 显示菜单
+   */
+  const show = (event: MouseEvent, menuItems: ContextMenuItem[], data?: any) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    position.value = {
+      x: event.clientX,
+      y: event.clientY
+    }
+
+    items.value = menuItems
+    currentData.value = data
+    visible.value = true
+  }
+
+  /**
+   * 隐藏菜单
+   */
+  const hide = () => {
+    visible.value = false
+    currentData.value = null
+  }
+
+  /**
+   * 更新菜单位置
+   */
+  const updatePosition = (newPosition: ContextMenuPosition) => {
+    position.value = newPosition
+  }
+
+  /**
+   * 更新菜单项
+   */
+  const updateItems = (newItems: ContextMenuItem[]) => {
+    items.value = newItems
+  }
+
+  /**
+   * 处理菜单项点击
+   */
+  const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+    if (item.onClick) {
+      item.onClick(item, event)
+    }
+    hide()
+  }
+
+  return {
+    // 状态
+    visible: computed(() => visible.value),
+    position: computed(() => position.value),
+    items: computed(() => items.value),
+    currentData: computed(() => currentData.value),
+
+    // 方法
+    show,
+    hide,
+    updatePosition,
+    updateItems,
+    handleItemClick
+  }
+}
+
+/**
+ * 歌曲相关的右键菜单配置
+ */
+export function useSongContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示歌曲右键菜单
+   */
+  const showSongMenu = (
+    event: MouseEvent,
+    song: any,
+    options?: {
+      showPlay?: boolean
+      showAddToPlaylist?: boolean
+      showDownload?: boolean
+      showAddToSongList?: boolean
+      playlists?: any[]
+      onPlay?: (song: any) => void
+      onAddToPlaylist?: (song: any) => void
+      onDownload?: (song: any) => void
+      onAddToSongList?: (song: any, playlist: any) => void
+    }
+  ) => {
+    const {
+      showPlay = true,
+      showAddToPlaylist = true,
+      showDownload = true,
+      showAddToSongList = true,
+      playlists = [],
+      onPlay,
+      onAddToPlaylist,
+      onDownload,
+      onAddToSongList
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 播放
+    if (showPlay) {
+      menuItems.push(
+        createMenuItem('play', '播放', {
+          onClick: () => onPlay?.(song)
+        })
+      )
+    }
+
+    // 添加到播放列表
+    if (showAddToPlaylist) {
+      menuItems.push(
+        createMenuItem('addToPlaylist', '添加到播放列表', {
+          onClick: () => onAddToPlaylist?.(song)
+        })
+      )
+    }
+
+    // 添加到歌单（如果有歌单）
+    if (showAddToSongList && playlists.length > 0) {
+      menuItems.push(
+        createMenuItem('addToSongList', '加入歌单', {
+          children: playlists.map((playlist) =>
+            createMenuItem(`playlist_${playlist.id}`, playlist.name, {
+              onClick: () => onAddToSongList?.(song, playlist)
+            })
+          )
+        })
+      )
+    }
+
+    // 分隔线
+    if (menuItems.length > 0) {
+      menuItems.push(createSeparator())
+    }
+
+    // 下载
+    if (showDownload) {
+      menuItems.push(
+        createMenuItem('download', '下载', {
+          onClick: () => onDownload?.(song)
+        })
+      )
+    }
+
+    show(event, menuItems, song)
+  }
+
+  return {
+    ...rest,
+    showSongMenu,
+    hide
+  }
+}
+
+/**
+ * 列表项右键菜单配置
+ */
+export function useListItemContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示列表项右键菜单
+   */
+  const showListItemMenu = (
+    event: MouseEvent,
+    item: any,
+    options?: {
+      showEdit?: boolean
+      showDelete?: boolean
+      showCopy?: boolean
+      showProperties?: boolean
+      onEdit?: (item: any) => void
+      onDelete?: (item: any) => void
+      onCopy?: (item: any) => void
+      onProperties?: (item: any) => void
+    }
+  ) => {
+    const {
+      showEdit = true,
+      showDelete = true,
+      showCopy = false,
+      showProperties = false,
+      onEdit,
+      onDelete,
+      onCopy,
+      onProperties
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 编辑
+    if (showEdit) {
+      menuItems.push(
+        createMenuItem('edit', '编辑', {
+          onClick: () => onEdit?.(item)
+        })
+      )
+    }
+
+    // 复制
+    if (showCopy) {
+      menuItems.push(
+        createMenuItem('copy', '复制', {
+          onClick: () => onCopy?.(item)
+        })
+      )
+    }
+
+    // 分隔线
+    if (menuItems.length > 0 && (showDelete || showProperties)) {
+      menuItems.push(createSeparator())
+    }
+
+    // 删除
+    if (showDelete) {
+      menuItems.push(
+        createMenuItem('delete', '删除', {
+          onClick: () => onDelete?.(item)
+        })
+      )
+    }
+
+    // 属性
+    if (showProperties) {
+      menuItems.push(
+        createMenuItem('properties', '属性', {
+          onClick: () => onProperties?.(item)
+        })
+      )
+    }
+
+    show(event, menuItems, item)
+  }
+
+  return {
+    ...rest,
+    showListItemMenu,
+    hide
+  }
+}
+
+/**
+ * 文本选择右键菜单配置
+ */
+export function useTextSelectionContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示文本选择右键菜单
+   */
+  const showTextSelectionMenu = (
+    event: MouseEvent,
+    selectedText: string,
+    options?: {
+      showCopy?: boolean
+      showSearch?: boolean
+      showTranslate?: boolean
+      onCopy?: (text: string) => void
+      onSearch?: (text: string) => void
+      onTranslate?: (text: string) => void
+    }
+  ) => {
+    const {
+      showCopy = true,
+      showSearch = true,
+      showTranslate = false,
+      onCopy,
+      onSearch,
+      onTranslate
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 复制
+    if (showCopy) {
+      menuItems.push(
+        createMenuItem('copy', '复制', {
+          onClick: () => onCopy?.(selectedText)
+        })
+      )
+    }
+
+    // 搜索
+    if (showSearch) {
+      menuItems.push(
+        createMenuItem('search', '搜索', {
+          onClick: () => onSearch?.(selectedText)
+        })
+      )
+    }
+
+    // 翻译
+    if (showTranslate) {
+      menuItems.push(
+        createMenuItem('translate', '翻译', {
+          onClick: () => onTranslate?.(selectedText)
+        })
+      )
+    }
+
+    show(event, menuItems, selectedText)
+  }
+
+  return {
+    ...rest,
+    showTextSelectionMenu,
+    hide
+  }
+}
+
+/**
+ * 创建可复用的菜单配置
+ */
+export function createMenuConfig<T = any>(config: {
+  items: ContextMenuItem[]
+  onItemClick?: (item: ContextMenuItem, data: T, event: MouseEvent) => void
+  onShow?: (data: T) => void
+  onHide?: () => void
+}) {
+  const { items, onItemClick, onShow, onHide } = config
+
+  return {
+    items: ref([...items]),
+
+    show: (_event: MouseEvent, data: T) => {
+      onShow?.(data)
+    },
+
+    handleItemClick: (item: ContextMenuItem, event: MouseEvent, data: T) => {
+      onItemClick?.(item, data, event)
+    },
+
+    hide: () => {
+      onHide?.()
+    }
+  }
+}
+
+/**
+ * 菜单项可见性控制
+ */
+export function useMenuVisibility<T extends ContextMenuItem>(
+  items: Ref<T[]>,
+  predicate: (item: T) => boolean
+) {
+  const visibleItems = computed(() => items.value.filter(predicate))
+
+  const hasVisibleItems = computed(() => visibleItems.value.length > 0)
+
+  return {
+    visibleItems,
+    hasVisibleItems
+  }
+}
+
+/**
+ * 菜单项动态启用/禁用控制
+ */
+export function useMenuItemsState<T extends ContextMenuItem>(
+  items: Ref<T[]>,
+  getState: (item: T) => { disabled?: boolean; visible?: boolean }
+) {
+  const processedItems = computed(() =>
+    items.value
+      .map((item) => {
+        const state = getState(item)
+        return {
+          ...item,
+          disabled: state.disabled ?? item.disabled,
+          // 如果visible为false，完全移除该项
+          ...(state.visible === false ? { _hidden: true } : {})
+        }
+      })
+      .filter((item) => !(item as any)._hidden)
+  )
+
+  return {
+    processedItems
+  }
+}
--- a/src/renderer/src/components/ContextMenu/demo.vue
+++ b/src/renderer/src/components/ContextMenu/demo.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="demo-container">
+    <h1>右键菜单组件演示</h1>
+
+    <!-- 测试区域 -->
+    <div class="test-area">
+      <div
+        class="test-box"
+        style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px"
+        @contextmenu.prevent="handleContextMenu($event)"
+      >
+        <p>在此区域右键点击测试菜单</p>
+        <p>菜单项数量：{{ menuItems.length }}</p>
+      </div>
+    </div>
+
+    <!-- 右键菜单 -->
+    <ContextMenu
+      v-model:visible="menuVisible"
+      :position="menuPosition"
+      :items="menuItems"
+      :max-height="200"
+      @item-click="handleMenuItemClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContextMenu from './ContextMenu.vue'
+import type { ContextMenuItem } from './types'
+
+const menuVisible = ref(false)
+const menuPosition = ref({ x: 0, y: 0 })
+
+// 创建大量菜单项用于测试滚动
+const menuItems = ref<ContextMenuItem[]>([
+  {
+    id: 'play',
+    label: '播放',
+    icon: '▶'
+  },
+  {
+    id: 'pause',
+    label: '暂停',
+    icon: '⏸'
+  },
+  {
+    id: 'separator-1',
+    separator: true
+  },
+  {
+    id: 'add-to-playlist',
+    label: '添加到播放列表',
+    icon: '➕'
+  },
+  {
+    id: 'remove-from-playlist',
+    label: '从播放列表移除',
+    icon: '➖'
+  },
+  {
+    id: 'separator-2',
+    separator: true
+  },
+  {
+    id: 'download',
+    label: '下载歌曲',
+    icon: '⬇️'
+  },
+  {
+    id: 'share',
+    label: '分享',
+    icon: '↗️'
+  },
+  {
+    id: 'separator-3',
+    separator: true
+  },
+  {
+    id: 'info',
+    label: '歌曲信息',
+    icon: 'ℹ️'
+  },
+  {
+    id: 'edit-tags',
+    label: '编辑标签',
+    icon: '✏️'
+  },
+  {
+    id: 'separator-4',
+    separator: true
+  },
+  {
+    id: 'rate-1',
+    label: '评分：★☆☆☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-2',
+    label: '评分：★★☆☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-3',
+    label: '评分：★★★☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-4',
+    label: '评分：★★★★☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-5',
+    label: '评分：★★★★★',
+    icon: '⭐'
+  },
+  {
+    id: 'separator-5',
+    separator: true
+  },
+  {
+    id: 'create-station',
+    label: '创建电台',
+    icon: '📻'
+  },
+  {
+    id: 'similar-songs',
+    label: '相似歌曲',
+    icon: '🎵'
+  },
+  {
+    id: 'separator-6',
+    separator: true
+  },
+  {
+    id: 'copy-link',
+    label: '复制链接',
+    icon: '🔗'
+  },
+  {
+    id: 'properties',
+    label: '属性',
+    icon: '📋'
+  },
+  {
+    id: 'separator-7',
+    separator: true
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    icon: '🗑️',
+    className: 'danger'
+  }
+])
+
+const handleContextMenu = (event: MouseEvent) => {
+  menuPosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  }
+  menuVisible.value = true
+}
+
+const handleMenuItemClick = (item: ContextMenuItem) => {
+  console.log('菜单项点击:', item.label)
+  // 这里可以添加具体的菜单项处理逻辑
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.test-area {
+  margin: 20px 0;
+}
+
+.test-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.test-box:hover {
+  background-color: #f5f5f5;
+}
+
+.danger {
+  color: #ff4444 !important;
+}
+</style>
--- a/src/renderer/src/components/ContextMenu/index.ts
+++ b/src/renderer/src/components/ContextMenu/index.ts
@@ -0,0 +1,4 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export * from './types'
+export * from './utils'
+export * from './composables'
--- a/src/renderer/src/components/ContextMenu/types.ts
+++ b/src/renderer/src/components/ContextMenu/types.ts
@@ -0,0 +1,101 @@
+/**
+ * 右键菜单位置类型定义
+ */
+export interface ContextMenuPosition {
+  x: number
+  y: number
+}
+
+/**
+ * 右键菜单项类型定义
+ */
+export interface ContextMenuItem {
+  /** 菜单项唯一标识 */
+  id: string
+  /** 显示文本 */
+  label?: string
+  /** 图标组件 */
+  icon?: any
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示分隔线 */
+  separator?: boolean
+  /** 子菜单项 */
+  children?: ContextMenuItem[]
+  /** 点击回调函数 */
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  /** 自定义CSS类名 */
+  className?: string
+}
+
+/**
+ * 右键菜单配置属性
+ */
+export interface ContextMenuProps {
+  /** 是否显示菜单 */
+  visible: boolean
+  /** 菜单位置 */
+  position: ContextMenuPosition
+  /** 菜单项列表 */
+  items: ContextMenuItem[]
+  /** 自定义CSS类名 */
+  className?: string
+  /** 菜单宽度 */
+  width?: number
+  /** 最大高度（超出时显示滚动条） */
+  maxHeight?: number
+  /** 菜单层级 */
+  zIndex?: number
+  /** 关闭菜单回调 */
+  onClose?: () => void
+  /** 菜单项点击回调 */
+  onItemClick?: (item: ContextMenuItem, event: MouseEvent) => void
+}
+
+/**
+ * 边缘检测配置
+ */
+export interface EdgeDetectionConfig {
+  /** 距离边缘的阈值（像素） */
+  threshold: number
+  /** 是否启用边缘检测 */
+  enabled: boolean
+}
+
+/**
+ * 动画配置
+ */
+export interface AnimationConfig {
+  /** 动画持续时间（毫秒） */
+  duration: number
+  /** 动画缓动函数 */
+  easing: string
+  /** 是否启用动画 */
+  enabled: boolean
+}
+
+/**
+ * 滚动配置
+ */
+export interface ScrollConfig {
+  /** 滚动条宽度 */
+  scrollbarWidth: number
+  /** 滚动速度 */
+  scrollSpeed: number
+  /** 是否显示滚动条 */
+  showScrollbar: boolean
+}
+
+/**
+ * 右键菜单实例方法
+ */
+export interface ContextMenuInstance {
+  /** 显示菜单 */
+  show: (position: ContextMenuPosition, items?: ContextMenuItem[]) => void
+  /** 隐藏菜单 */
+  hide: () => void
+  /** 更新菜单位置 */
+  updatePosition: (position: ContextMenuPosition) => void
+  /** 更新菜单项 */
+  updateItems: (items: ContextMenuItem[]) => void
+}
--- a/src/renderer/src/components/ContextMenu/utils.ts
+++ b/src/renderer/src/components/ContextMenu/utils.ts
@@ -0,0 +1,266 @@
+import type { ContextMenuItem, ContextMenuPosition } from './types'
+
+/**
+ * 创建标准菜单项
+ */
+export function createMenuItem(
+  id: string,
+  label: string,
+  options?: {
+    icon?: any
+    disabled?: boolean
+    separator?: boolean
+    children?: ContextMenuItem[]
+    onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+    className?: string
+  }
+): ContextMenuItem {
+  return {
+    id,
+    label,
+    icon: options?.icon,
+    disabled: options?.disabled || false,
+    separator: options?.separator || false,
+    children: options?.children,
+    onClick: options?.onClick,
+    className: options?.className
+  }
+}
+
+/**
+ * 创建分隔线菜单项
+ */
+export function createSeparator(): ContextMenuItem {
+  return {
+    id: `separator-${Date.now()}`,
+    label: '',
+    separator: true
+  }
+}
+
+/**
+ * 计算菜单位置，确保在可视区域内
+ */
+export function calculateMenuPosition(
+  event: MouseEvent,
+  menuWidth: number = 200,
+  menuHeight: number = 400
+): ContextMenuPosition {
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+  const threshold = 10
+
+  let x = event.clientX
+  let y = event.clientY
+
+  // 水平边缘检测
+  if (x + menuWidth > viewportWidth - threshold) {
+    x = viewportWidth - menuWidth - threshold
+  } else if (x < threshold) {
+    x = threshold
+  }
+
+  // 垂直边缘检测
+  if (y + menuHeight > viewportHeight - threshold) {
+    y = viewportHeight - menuHeight - threshold
+  } else if (y < threshold) {
+    y = threshold
+  }
+
+  return { x, y }
+}
+
+/**
+ * 防抖函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func(...args), delay)
+  }
+}
+
+/**
+ * 节流函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}
+
+/**
+ * 深度克隆菜单项（避免引用问题）
+ */
+export function cloneMenuItem(item: ContextMenuItem): ContextMenuItem {
+  return {
+    ...item,
+    children: item.children ? item.children.map(cloneMenuItem) : undefined
+  }
+}
+
+/**
+ * 扁平化菜单项（用于搜索等功能）
+ */
+export function flattenMenuItems(items: ContextMenuItem[]): ContextMenuItem[] {
+  const result: ContextMenuItem[] = []
+
+  items.forEach((item) => {
+    result.push(item)
+    if (item.children && item.children.length > 0) {
+      result.push(...flattenMenuItems(item.children))
+    }
+  })
+
+  return result
+}
+
+/**
+ * 根据ID查找菜单项
+ */
+export function findMenuItemById(items: ContextMenuItem[], id: string): ContextMenuItem | null {
+  for (const item of items) {
+    if (item.id === id) {
+      return item
+    }
+    if (item.children && item.children.length > 0) {
+      const found = findMenuItemById(item.children, id)
+      if (found) {
+        return found
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * 验证菜单项配置
+ */
+export function validateMenuItem(item: ContextMenuItem): boolean {
+  if (!item.id || typeof item.id !== 'string') {
+    console.warn('菜单项必须包含有效的id字段')
+    return false
+  }
+
+  if (!item.separator && (!item.label || typeof item.label !== 'string')) {
+    console.warn('非分隔线菜单项必须包含有效的label字段')
+    return false
+  }
+
+  if (item.children && !Array.isArray(item.children)) {
+    console.warn('children字段必须是数组')
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 验证菜单项列表
+ */
+export function validateMenuItems(items: ContextMenuItem[]): boolean {
+  if (!Array.isArray(items)) {
+    console.warn('菜单项列表必须是数组')
+    return false
+  }
+
+  return items.every(validateMenuItem)
+}
+
+/**
+ * 过滤可见菜单项（移除禁用项和空分隔线）
+ */
+export function filterVisibleItems(items: ContextMenuItem[]): ContextMenuItem[] {
+  return items.filter((item) => {
+    if (item.disabled) return false
+    if (item.separator && !item.label) return true // 保留纯分隔线
+    return true
+  })
+}
+
+/**
+ * 菜单项排序工具
+ */
+export function sortMenuItems(
+  items: ContextMenuItem[],
+  compareFn?: (a: ContextMenuItem, b: ContextMenuItem) => number
+): ContextMenuItem[] {
+  const sorted = [...items]
+  sorted.sort(
+    compareFn ||
+      ((a, b) => {
+        if (!a.label || !b.label) return 0
+        return a.label.localeCompare(b.label)
+      })
+  )
+
+  // 递归排序子菜单
+  return sorted.map((item) => ({
+    ...item,
+    children: item.children ? sortMenuItems(item.children, compareFn) : undefined
+  }))
+}
+
+/**
+ * 菜单项分组工具
+ */
+export function groupMenuItems(items: ContextMenuItem[], groupSize: number = 5): ContextMenuItem[] {
+  const result: ContextMenuItem[] = []
+  let currentGroup: ContextMenuItem[] = []
+
+  items.forEach((item, index) => {
+    currentGroup.push(item)
+
+    if (currentGroup.length >= groupSize || index === items.length - 1) {
+      if (currentGroup.length > 0) {
+        result.push(...currentGroup)
+        if (index < items.length - 1) {
+          result.push(createSeparator())
+        }
+        currentGroup = []
+      }
+    }
+  })
+
+  return result
+}
+
+/**
+ * 菜单项搜索工具
+ */
+export function searchMenuItems(items: ContextMenuItem[], searchText: string): ContextMenuItem[] {
+  if (!searchText.trim()) return items
+
+  const lowerSearchText = searchText.toLowerCase()
+
+  return items.filter((item) => {
+    if (item.separator) return true
+    if (!item.label) return false
+
+    const matches = item.label.toLowerCase().includes(lowerSearchText)
+
+    if (matches) return true
+
+    if (item.children && item.children.length > 0) {
+      const matchingChildren = searchMenuItems(item.children, searchText)
+      if (matchingChildren.length > 0) {
+        item.children = matchingChildren
+        return true
+      }
+    }
+
+    return false
+  })
+}
--- a/src/renderer/src/components/Music/SongVirtualList.vue
+++ b/src/renderer/src/components/Music/SongVirtualList.vue
@@ -19,6 +19,7 @@
            class="song-item"
            @mouseenter="hoveredSong = song.id || song.songmid"
            @mouseleave="hoveredSong = null"
+            @contextmenu="handleContextMenu($event, song)"
          >
            <!-- 序号或播放状态图标 -->
            <div v-if="showIndex" class="col-index">
@@ -90,12 +91,27 @@
        </div>
      </div>
    </div>
+
+    <!-- 右键菜单 -->
+    <ContextMenu
+      v-model:visible="contextMenuVisible"
+      :position="contextMenuPosition"
+      :items="contextMenuItems"
+      @item-click="handleContextMenuItemClick"
+      @close="closeContextMenu"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
-import { DownloadIcon } from 'tdesign-icons-vue-next'
+import { ref, computed, onMounted, nextTick, toRaw } from 'vue'
+import { DownloadIcon, PlayCircleIcon, AddIcon, FolderIcon } from 'tdesign-icons-vue-next'
+import ContextMenu from '../ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator, calculateMenuPosition } from '../ContextMenu/utils'
+import type { ContextMenuItem, ContextMenuPosition } from '../ContextMenu/types'
+import songListAPI from '@renderer/api/songList'
+import type { SongList } from '@common/types/songList'
+import { MessagePlugin } from 'tdesign-vue-next'

 interface Song {
  id?: number
@@ -142,6 +158,14 @@ const scrollTop = ref(0)
 const visibleStartIndex = ref(0)
 const visibleEndIndex = ref(0)

+// 右键菜单相关状态
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
+const contextMenuSong = ref<Song | null>(null)
+
+// 歌单列表
+const playlists = ref<SongList[]>([])
+
 // 计算总高度
 const totalHeight = computed(() => props.songs.length * itemHeight)

@@ -236,6 +260,119 @@ const onScroll = (event: Event) => {
  emit('scroll', event)
 }

+// 右键菜单项配置
+const contextMenuItems = computed((): ContextMenuItem[] => {
+  const baseItems: ContextMenuItem[] = [
+    createMenuItem('play', '播放', {
+      icon: PlayCircleIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          handlePlay(contextMenuSong.value)
+        }
+      }
+    }),
+    createMenuItem('addToPlaylist', '添加到播放列表', {
+      icon: AddIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          handleAddToPlaylist(contextMenuSong.value)
+        }
+      }
+    })
+  ]
+
+  // 如果有歌单，添加"加入歌单"子菜单
+  if (playlists.value.length > 0) {
+    baseItems.push(
+      createMenuItem('addToSongList', '加入歌单', {
+        icon: FolderIcon,
+        children: playlists.value.map((playlist) =>
+          createMenuItem(`playlist_${playlist.id}`, playlist.name, {
+            onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+              if (contextMenuSong.value) {
+                handleAddToSongList(contextMenuSong.value, playlist)
+              }
+            }
+          })
+        )
+      })
+    )
+  }
+
+  // 添加分隔线
+  baseItems.push(createSeparator())
+
+  baseItems.push(
+    createMenuItem('download', '下载', {
+      icon: DownloadIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          emit('download', contextMenuSong.value)
+        }
+      }
+    })
+  )
+
+  return baseItems
+})
+
+// 处理右键菜单
+const handleContextMenu = (event: MouseEvent, song: Song) => {
+  event.preventDefault()
+  event.stopPropagation()
+
+  // 设置菜单数据
+  contextMenuSong.value = song
+
+  // 使用智能位置计算，确保菜单在可视区域内
+  contextMenuPosition.value = calculateMenuPosition(event, 240, 300)
+
+  // 直接显示菜单
+  contextMenuVisible.value = true
+}
+
+// 处理右键菜单项点击
+const handleContextMenuItemClick = (_item: ContextMenuItem, _event: MouseEvent) => {
+  // 菜单项的 onClick 回调已经在 ContextMenuItem 组件中调用
+  // 这里不需要额外关闭菜单，ContextMenu 组件会处理关闭逻辑
+  // 避免重复关闭导致菜单显示问题
+}
+
+// 关闭右键菜单
+const closeContextMenu = () => {
+  contextMenuVisible.value = false
+  contextMenuSong.value = null
+}
+
+// 加载歌单列表
+const loadPlaylists = async () => {
+  try {
+    const result = await songListAPI.getAll()
+    if (result.success) {
+      playlists.value = result.data || []
+    } else {
+      console.error('加载歌单失败:', result.error)
+    }
+  } catch (error) {
+    console.error('加载歌单失败:', error)
+  }
+}
+
+// 添加歌曲到歌单
+const handleAddToSongList = async (song: Song, playlist: SongList) => {
+  try {
+    const result = await songListAPI.addSongs(playlist.id, [toRaw(song) as any])
+    if (result.success) {
+      MessagePlugin.success(`已将"${song.name}"添加到歌单"${playlist.name}"`)
+    } else {
+      MessagePlugin.error(result.error || '添加到歌单失败')
+    }
+  } catch (error) {
+    console.error('添加到歌单失败:', error)
+    MessagePlugin.error('添加到歌单失败')
+  }
+}
+
 onMounted(() => {
  // 组件挂载后触发一次重新计算
  nextTick(() => {
@@ -245,6 +382,9 @@ onMounted(() => {
      onScroll(event)
    }
  })
+
+  // 加载歌单列表
+  loadPlaylists()
 })
 </script>

--- a/src/renderer/src/components/Play/PlaylistDrawer.vue
+++ b/src/renderer/src/components/Play/PlaylistDrawer.vue
@@ -537,6 +537,33 @@ defineExpose({
  color: #ccc;
 }

+/* 全屏模式下的滚动条样式 - 只显示滑块 */
+.playlist-container .playlist-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(91, 91, 91, 0.3) transparent;
+}
+.playlist-container.full-screen-mode .playlist-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
 .playlist-container.full-screen-mode .playlist-song:hover {
  background-color: rgba(255, 255, 255, 0.1);
 }
@@ -589,7 +616,7 @@ defineExpose({
 .playlist-content {
  flex: 1;
  overflow-y: auto;
-  scrollbar-width: none;
+  // scrollbar-width: none;
  margin: 10px 0;
  padding: 0 8px;
 }
--- a/src/renderer/src/components/layout/HomeLayout.vue
+++ b/src/renderer/src/components/layout/HomeLayout.vue
@@ -95,7 +95,11 @@ const selectSource = (sourceKey: string) => {
  // 自动选择该音源的最高音质
  const sourceDetail = LocalUserDetail.userInfo.supportedSources?.[sourceKey]
  if (sourceDetail && sourceDetail.qualitys && sourceDetail.qualitys.length > 0) {
-    LocalUserDetail.userInfo.selectQuality = sourceDetail.qualitys[sourceDetail.qualitys.length - 1]
+    const currentQuality = LocalUserDetail.userInfo.selectQuality
+    if (!currentQuality || !sourceDetail.qualitys.includes(currentQuality)) {
+      LocalUserDetail.userInfo.selectQuality =
+        sourceDetail.qualitys[sourceDetail.qualitys.length - 1]
+    }
  }

  // 更新音源图标
--- a/src/renderer/src/utils/audio/download.ts
+++ b/src/renderer/src/utils/audio/download.ts
@@ -33,6 +33,48 @@ async function downloadSingleSong(songInfo: MusicItem): Promise<void> {
  try {
    const LocalUserDetail = LocalUserDetailStore()
    let quality = LocalUserDetail.userSource.quality as string
+
+    // 检查是否为特殊音质（高清臻音、全景环绕或超清母带）
+    const isSpecialQuality = ['hires', 'atmos', 'master'].includes(quality)
+
+    // 如果是特殊音质，先尝试获取对应链接
+    if (isSpecialQuality) {
+      try {
+        console.log(`尝试下载特殊音质: ${quality} - ${qualityMap[quality]}`)
+        const tip = MessagePlugin.success('开始下载歌曲：' + songInfo.name)
+
+        const specialResult = await window.api.music.requestSdk('downloadSingleSong', {
+          pluginId: LocalUserDetail.userSource.pluginId?.toString() || '',
+          source: songInfo.source,
+          quality,
+          songInfo: toRaw(songInfo)
+        })
+
+        ;(await tip).close()
+
+        // 如果成功获取特殊音质链接，处理结果并返回
+        if (specialResult && 'error' in specialResult && !specialResult.error) {
+          if (!Object.hasOwn(specialResult, 'path')) {
+            MessagePlugin.info(specialResult.message)
+          } else {
+            await NotifyPlugin.success({
+              title: '下载成功',
+              content: `${specialResult.message} 保存位置: ${specialResult.path}`
+            })
+          }
+          return
+        }
+
+        console.log(`下载${qualityMap[quality]}音质失败，回退到标准逻辑`)
+        // 如果获取特殊音质失败，继续执行原有逻辑
+      } catch (specialError) {
+        console.log(`下载${qualityMap[quality]}音质出错，回退到标准逻辑:`, specialError)
+        // 特殊音质获取失败，继续执行原有逻辑
+      }
+      MessagePlugin.error('下载失败了，向下兼容音质')
+    }
+
+    // 原有逻辑：检查歌曲支持的最高音质
    if (
      qualityKey.indexOf(quality) >
      qualityKey.indexOf(
@@ -41,6 +83,8 @@ async function downloadSingleSong(songInfo: MusicItem): Promise<void> {
    ) {
      quality = (songInfo.types[songInfo.types.length - 1] as unknown as { type: any }).type
    }
+
+    console.log(`使用音质下载: ${quality} - ${qualityMap[quality]}`)
    const tip = MessagePlugin.success('开始下载歌曲：' + songInfo.name)
    const result = await window.api.music.requestSdk('downloadSingleSong', {
      pluginId: LocalUserDetail.userSource.pluginId?.toString() || '',
--- a/src/renderer/src/utils/playlist/playlistManager.ts
+++ b/src/renderer/src/utils/playlist/playlistManager.ts
@@ -37,19 +37,54 @@ export async function getSongRealUrl(song: SongList): Promise<string> {
    const LocalUserDetail = LocalUserDetailStore()
    // 通过统一的request方法获取真实的播放URL
    let quality = LocalUserDetail.userSource.quality as string
+
+    // 检查是否为特殊音质（高清臻音、全景环绕或超清母带）
+    const isSpecialQuality = ['hires', 'atmos', 'master'].includes(quality)
+
+    // 如果是特殊音质，先尝试获取对应链接
+    if (isSpecialQuality) {
+      try {
+        console.log(`尝试获取特殊音质: ${quality} - ${qualityMap[quality]}`)
+        const specialUrlData = await window.api.music.requestSdk('getMusicUrl', {
+          pluginId: LocalUserDetail.userSource.pluginId as unknown as string,
+          source: song.source,
+          songInfo: song as any,
+          quality
+        })
+
+        // 如果成功获取特殊音质链接，直接返回
+        if (
+          typeof specialUrlData === 'string' ||
+          (typeof specialUrlData === 'object' && !specialUrlData.error)
+        ) {
+          console.log(`成功获取${qualityMap[quality]}链接`)
+          return specialUrlData as string
+        }
+
+        console.log(`获取${qualityMap[quality]}链接失败，回退到标准逻辑`)
+        // 如果获取特殊音质失败，继续执行原有逻辑
+      } catch (specialError) {
+        console.log(`获取${qualityMap[quality]}链接出错，回退到标准逻辑:`, specialError)
+        // 特殊音质获取失败，继续执行原有逻辑
+      }
+    }
+
+    // 原有逻辑：检查歌曲支持的最高音质
    if (
      qualityKey.indexOf(quality) >
      qualityKey.indexOf((song.types[song.types.length - 1] as unknown as { type: any }).type)
    ) {
      quality = (song.types[song.types.length - 1] as unknown as { type: any }).type
    }
-    console.log(quality)
+
+    console.log(`使用音质: ${quality} - ${qualityMap[quality]}`)
    const urlData = await window.api.music.requestSdk('getMusicUrl', {
      pluginId: LocalUserDetail.userSource.pluginId as unknown as string,
      source: song.source,
      songInfo: song as any,
      quality
    })
+
    console.log(urlData)
    if (typeof urlData === 'object' && urlData.error) {
      throw new Error(urlData.error)
--- a/src/renderer/src/views/music/search.vue
+++ b/src/renderer/src/views/music/search.vue
@@ -34,6 +34,8 @@ const isPlaying = ref(false)
 const search = searchValue()

 onMounted(async () => {
+  const localUserStore = LocalUserDetailStore()
+
  watch(
    search,
    async () => {
@@ -42,6 +44,17 @@ onMounted(async () => {
    },
    { immediate: true }
  )
+
+  // 监听 userSource 变化，重新加载页面
+  watch(
+    () => localUserStore.userSource,
+    async () => {
+      if (keyword.value.trim()) {
+        await performSearch(true)
+      }
+    },
+    { deep: true }
+  )
 })

 // 执行搜索
--- a/src/renderer/src/views/settings/index.vue
+++ b/src/renderer/src/views/settings/index.vue
@@ -206,19 +206,25 @@ const qualitySliderValue = ref(0)
 const qualityMarks = computed(() => {
  const marks: Record<number, string> = {}
  currentSourceQualities.value.forEach((quality, index) => {
-    marks[index] = getQualityDisplayName(quality)
+    marks[index] = String(getQualityDisplayName(quality))
  })
  return marks
 })

 // 监听当前选择的音质，更新滑块位置
 watch(
-  () => userInfo.value.selectQuality,
-  (newQuality) => {
-    if (newQuality && currentSourceQualities.value.length > 0) {
-      const index = currentSourceQualities.value.indexOf(newQuality)
+  [() => userInfo.value.selectQuality, () => currentSourceQualities.value],
+  ([newQuality, qualities]) => {
+    if (qualities.length > 0 && newQuality) {
+      // 检查当前选择的音质是否在新平台的支持列表中
+      const index = qualities.indexOf(newQuality)
      if (index !== -1) {
        qualitySliderValue.value = index
+      } else {
+        // 如果当前音质不在支持列表中，选择默认音质
+        console.log('当前音质不在支持列表中，选择默认音质')
+        // 选择最高音质
+        userInfo.value.selectQuality = qualities[qualities.length - 1]
      }
    }
  },
@@ -234,7 +240,11 @@ const selectSource = (sourceKey: string) => {
  // 自动选择该音源的最高音质
  const source = userInfo.value.supportedSources?.[sourceKey]
  if (source && source.qualitys && source.qualitys.length > 0) {
-    userInfo.value.selectQuality = source.qualitys[source.qualitys.length - 1]
+    // 检查当前选择的音质是否在新平台的支持列表中
+    const currentQuality = userInfo.value.selectQuality
+    if (!currentQuality || !source.qualitys.includes(currentQuality)) {
+      userInfo.value.selectQuality = source.qualitys[source.qualitys.length - 1]
+    }
  }
 }

@@ -743,7 +753,7 @@ const openLink = (url: string) => {
                    </p>
                  </div>
                </div>
-                <h3 style="margin-top: 2rem">关于我们(菜单)</h3>
+                <h3 style="margin-top: 2rem">关于我们</h3>
                <div class="legal-notice">
                  <div class="notice-item">
                    <h4>😊 时迁酱</h4>
@@ -782,8 +792,8 @@ const openLink = (url: string) => {
                <div class="contact-info">
                  <p>如有技术问题或合作意向（仅限技术交流），请通过以下方式联系：</p>
                  <div class="contact-actions">
-                    <t-button theme="primary" @click="openLink('https://qm.qq.com/q/IDpQnbGd06')">
-                      官方QQ群
+                    <t-button theme="primary" @click="openLink('https://qm.qq.com/q/8c25dPfylG')">
+                      官方QQ群(1057783951)
                    </t-button>
                    <t-button
                      theme="primary"
Author	SHA1	Message	Date
sqj	2473b36928	feat:列表新增右键菜单;fix:播放列表滚动条，搜索页切换源重新加载	2025-09-25 02:43:02 +08:00
sqj	dbba7a3d26	1. 软件启动位置宽高记忆限制软件最大宽高 2. debug: 修复歌曲音质支持短缺问题	2025-09-22 19:36:07 +08:00
sqj	a817865bd8	Merge branch 'main' of https://github.com/timeshiftsauce/CeruMusic	2025-09-22 19:34:58 +08:00
sqj	c4a4d26bd8	1. 软件启动位置宽高记忆限制软件最大宽高 2. debug: 修复歌曲音质支持短缺问题	2025-09-22 19:34:06 +08:00
时迁酱	dfa36d872e	Update README.md	2025-09-22 12:08:35 +08:00
sqj	995859e661	1	2025-09-22 03:54:49 +08:00