Compare commits

...

7 Commits

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
sqj
34fb0f7c2f fix:qqLyric 2025-09-22 03:41:08 +08:00
45 changed files with 3496 additions and 28334 deletions

View File

@@ -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

File diff suppressed because one or more lines are too long

View File

@@ -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"
}
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -1,3 +0,0 @@
{
"type": "module"
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -1,7 +0,0 @@
{
"version": 3,
"sources": [],
"sourcesContent": [],
"mappings": "",
"names": []
}

View File

@@ -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

View File

@@ -1,7 +0,0 @@
{
"version": 3,
"sources": [],
"sourcesContent": [],
"mappings": "",
"names": []
}

242
CONTEXT_MENU_COMPLETE.md Normal file
View File

@@ -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 项目中,可以在本地音乐页面体验完整功能。通过测试页面可以验证各种边界情况和高级功能的表现。

View File

@@ -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**:用于构建跨平台桌面应用

View File

@@ -8,4 +8,5 @@
- [ ] ai功能完善
- [ ] 支持歌词隐藏
- [x] 兼容多平台歌单导入
- [x] 软件能不能记住上次打开的窗口大小,每次都要手动拉

View File

@@ -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,7 +32,7 @@
- 歌曲缓存播放多次请求和多次缓存问题
- ###### 2025-9-17 **V1.3.1**
- ###### 2025-9-17 **v1.3.1**
1. **设置功能页**
- 缓存路径支持自定义

View File

@@ -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 }

View File

@@ -1,6 +1,6 @@
{
"name": "ceru-music",
"version": "1.3.3",
"version": "1.3.6",
"description": "一款简洁优雅的音乐播放器",
"main": "./out/main/index.js",
"author": "sqj,wldss,star",
@@ -8,7 +8,7 @@
"homepage": "https://ceru.docs.shiqianjiang.cn",
"scripts": {
"format": "prettier --write .",
"lint": "eslint --cache . --fix",
"lint": "eslint --cache . --fix && yarn typecheck",
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
"typecheck": "yarn run typecheck:node && yarn run typecheck:web",

View File

@@ -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

View File

@@ -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()
})

View File

@@ -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()

View File

@@ -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
}
// 动态获取缓存目录

View File

@@ -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

View File

@@ -1,10 +1,29 @@
import qrcDecrypt from './qrc-decrypt'
import { httpFetch } from '../../request'
import getMusicInfo from './musicInfo'
const songIdMap = new Map()
const promises = new Map()
const decode = qrcDecrypt()
export default {
rxps: {
info: /^{"/,
lineTime: /^\[(\d+),\d+\]/,
lineTime2: /^\[([\d:.]+)\]/,
wordTime: /\(\d+,\d+,\d+\)/,
wordTimeAll: /(\(\d+,\d+,\d+\))/g,
timeLabelFixRxp: /(?:\.0+|0+)$/,
},
msFormat(timeMs) {
if (Number.isNaN(timeMs)) return ''
let ms = timeMs % 1000
timeMs /= 1000
let m = parseInt(timeMs / 60).toString().padStart(2, '0')
timeMs %= 60
let s = parseInt(timeMs).toString().padStart(2, '0')
return `[${m}:${s}.${String(ms).padStart(3, '0')}]`
},
successCode: 0,
async getSongId({ songId, songmid }) {
if (songId) return songId
@@ -17,6 +36,184 @@ export default {
promises.delete(songmid)
return info.songId
},
removeTag(str) {
return str.replace(/^[\S\s]*?LyricContent="/, '').replace(/"\/>[\S\s]*?$/, '')
},
parseCeru(lrc) {
lrc = lrc.trim()
lrc = lrc.replace(/\r/g, '')
if (!lrc) return { lyric: '', lxlyric: '' }
const lines = lrc.split('\n')
const lxlrcLines = []
const lrcLines = []
for (let line of lines) {
line = line.trim()
let result = this.rxps.lineTime.exec(line)
if (!result) {
if (line.startsWith('[offset')) {
lxlrcLines.push(line)
lrcLines.push(line)
continue
}
if (this.rxps.lineTime2.test(line)) {
// lxlrcLines.push(line)
lrcLines.push(line)
}
continue
}
const startMsTime = parseInt(result[1])
const startTimeStr = this.msFormat(startMsTime)
if (!startTimeStr) continue
let words = line.replace(this.rxps.lineTime, '')
lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
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}`)
}
return {
lyric: lrcLines.join('\n'),
lxlyric: lxlrcLines.join('\n'),
}
},
getIntv(interval) {
if (!interval) return 0
if (!interval.includes('.')) interval += '.0'
let arr = interval.split(/:|\./)
while (arr.length < 3) arr.unshift('0')
const [m, s, ms] = arr
return parseInt(m) * 3600000 + parseInt(s) * 1000 + parseInt(ms)
},
fixRlrcTimeTag(rlrc, lrc) {
// console.log(lrc)
// console.log(rlrc)
const rlrcLines = rlrc.split('\n')
let lrcLines = lrc.split('\n')
// let temp = []
let newLrc = []
rlrcLines.forEach((line) => {
const result = this.rxps.lineTime2.exec(line)
if (!result) return
const words = line.replace(this.rxps.lineTime2, '')
if (!words.trim()) return
const t1 = this.getIntv(result[1])
while (lrcLines.length) {
const lrcLine = lrcLines.shift()
const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
if (!lrcLineResult) continue
const t2 = this.getIntv(lrcLineResult[1])
if (Math.abs(t1 - t2) < 100) {
newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
break
}
// temp.push(line)
}
// lrcLines = [...temp, ...lrcLines]
// temp = []
})
return newLrc.join('\n')
},
fixTlrcTimeTag(tlrc, lrc) {
// console.log(lrc)
// console.log(tlrc)
const tlrcLines = tlrc.split('\n')
let lrcLines = lrc.split('\n')
// let temp = []
let newLrc = []
tlrcLines.forEach((line) => {
const result = this.rxps.lineTime2.exec(line)
if (!result) return
const words = line.replace(this.rxps.lineTime2, '')
if (!words.trim()) return
let time = result[1]
if (time.includes('.')) {
time += ''.padStart(3 - time.split('.')[1].length, '0')
}
const t1 = this.getIntv(time)
while (lrcLines.length) {
const lrcLine = lrcLines.shift()
const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
if (!lrcLineResult) continue
const t2 = this.getIntv(lrcLineResult[1])
if (Math.abs(t1 - t2) < 100) {
newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
break
}
// temp.push(line)
}
// lrcLines = [...temp, ...lrcLines]
// temp = []
})
return newLrc.join('\n')
},
parse(lrc, tlrc, rlrc) {
const info = {
lyric: '',
tlyric: '',
rlyric: '',
crlyric: '',
}
if (lrc) {
let { lyric } = this.parseCeru(this.removeTag(lrc))
info.lyric = lyric
info.crlyric = lrc
}
if (rlrc) info.rlyric = this.fixRlrcTimeTag(this.parseRlyric(this.removeTag(rlrc)), info.lyric)
if (tlrc) info.tlyric = this.fixTlrcTimeTag(tlrc, info.lyric)
return info
},
parseRlyric(lrc) {
lrc = lrc.trim()
lrc = lrc.replace(/\r/g, '')
if (!lrc) return { lyric: '', lxlyric: '' }
const lines = lrc.split('\n')
const lrcLines = []
for (let line of lines) {
line = line.trim()
let result = this.rxps.lineTime.exec(line)
if (!result) continue
const startMsTime = parseInt(result[1])
const startTimeStr = this.msFormat(startMsTime)
if (!startTimeStr) continue
let words = line.replace(this.rxps.lineTime, '')
lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
}
return lrcLines.join('\n')
},
parseLyric(lrc, tlrc, rlrc) {
return this.parse(
decode(lrc),
decode(tlrc),
decode(rlrc)
)
},
getLyric(mInfo, retryNum = 0) {
if (retryNum > 3) return Promise.reject(new Error('Get lyric failed'))

View File

@@ -0,0 +1,522 @@
import zlib from 'zlib'
export default () => {
const ENCRYPT = 1
const DECRYPT = 0
const sbox = [
// sbox1
[
14, 4, 13, 1, 2, 15, 11, 8, 3, 10, 6, 12, 5, 9, 0, 7, 0, 15, 7, 4, 14, 2, 13, 1, 10, 6, 12,
11, 9, 5, 3, 8, 4, 1, 14, 8, 13, 6, 2, 11, 15, 12, 9, 7, 3, 10, 5, 0, 15, 12, 8, 2, 4, 9, 1,
7, 5, 11, 3, 14, 10, 0, 6, 13
],
// sbox2
[
15, 1, 8, 14, 6, 11, 3, 4, 9, 7, 2, 13, 12, 0, 5, 10, 3, 13, 4, 7, 15, 2, 8, 15, 12, 0, 1, 10,
6, 9, 11, 5, 0, 14, 7, 11, 10, 4, 13, 1, 5, 8, 12, 6, 9, 3, 2, 15, 13, 8, 10, 1, 3, 15, 4, 2,
11, 6, 7, 12, 0, 5, 14, 9
],
// sbox3
[
10, 0, 9, 14, 6, 3, 15, 5, 1, 13, 12, 7, 11, 4, 2, 8, 13, 7, 0, 9, 3, 4, 6, 10, 2, 8, 5, 14,
12, 11, 15, 1, 13, 6, 4, 9, 8, 15, 3, 0, 11, 1, 2, 12, 5, 10, 14, 7, 1, 10, 13, 0, 6, 9, 8, 7,
4, 15, 14, 3, 11, 5, 2, 12
],
// sbox4
[
7, 13, 14, 3, 0, 6, 9, 10, 1, 2, 8, 5, 11, 12, 4, 15, 13, 8, 11, 5, 6, 15, 0, 3, 4, 7, 2, 12,
1, 10, 14, 9, 10, 6, 9, 0, 12, 11, 7, 13, 15, 1, 3, 14, 5, 2, 8, 4, 3, 15, 0, 6, 10, 10, 13,
8, 9, 4, 5, 11, 12, 7, 2, 14
],
// sbox5
[
2, 12, 4, 1, 7, 10, 11, 6, 8, 5, 3, 15, 13, 0, 14, 9, 14, 11, 2, 12, 4, 7, 13, 1, 5, 0, 15,
10, 3, 9, 8, 6, 4, 2, 1, 11, 10, 13, 7, 8, 15, 9, 12, 5, 6, 3, 0, 14, 11, 8, 12, 7, 1, 14, 2,
13, 6, 15, 0, 9, 10, 4, 5, 3
],
// sbox6
[
12, 1, 10, 15, 9, 2, 6, 8, 0, 13, 3, 4, 14, 7, 5, 11, 10, 15, 4, 2, 7, 12, 9, 5, 6, 1, 13, 14,
0, 11, 3, 8, 9, 14, 15, 5, 2, 8, 12, 3, 7, 0, 4, 10, 1, 13, 11, 6, 4, 3, 2, 12, 9, 5, 15, 10,
11, 14, 1, 7, 6, 0, 8, 13
],
// sbox7
[
4, 11, 2, 14, 15, 0, 8, 13, 3, 12, 9, 7, 5, 10, 6, 1, 13, 0, 11, 7, 4, 9, 1, 10, 14, 3, 5, 12,
2, 15, 8, 6, 1, 4, 11, 13, 12, 3, 7, 14, 10, 15, 6, 8, 0, 5, 9, 2, 6, 11, 13, 8, 1, 4, 10, 7,
9, 5, 0, 15, 14, 2, 3, 12
],
// sbox8
[
13, 2, 8, 4, 6, 15, 11, 1, 10, 9, 3, 14, 5, 0, 12, 7, 1, 15, 13, 8, 10, 3, 7, 4, 12, 5, 6, 11,
0, 14, 9, 2, 7, 11, 4, 1, 9, 12, 14, 2, 0, 6, 10, 13, 15, 3, 5, 8, 2, 1, 14, 7, 4, 10, 8, 13,
15, 12, 9, 0, 3, 5, 6, 11
]
]
/**
* 从 Buffer 中提取指定位置的位,并左移指定偏移量
* @param {Buffer} a - Buffer
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum(a, b, c) {
const byteIndex = Math.floor(b / 32) * 4 + 3 - Math.floor((b % 32) / 8)
const bitInByte = 7 - (b % 8)
const bit = (a[byteIndex] >> bitInByte) & 1
return bit << c
}
/**
* 从整数中提取指定位置的位,并左移指定偏移量
* @param {number} a - 整数
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum_intr(a, b, c) {
return (((a >>> (31 - b)) & 1) << c) | 0
}
/**
* 从整数中提取指定位置的位,并右移指定偏移量
* @param {number} a - 整数
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum_intl(a, b, c) {
return (((a << b) & 0x80000000) >>> c) | 0
}
/**
* 对输入整数进行位运算,重新组合位
* @param {number} a - 整数
* @returns {number} 重新组合后的位
*/
function sbox_bit(a) {
return (a & 32) | ((a & 31) >> 1) | ((a & 1) << 4) | 0
}
/**
* 初始置换
* @param {Buffer} input_data - 输入 Buffer
* @returns {[number, number]} 初始置换后的两个32位整数
*/
function initial_permutation(input_data) {
const s0 =
bitnum(input_data, 57, 31) |
bitnum(input_data, 49, 30) |
bitnum(input_data, 41, 29) |
bitnum(input_data, 33, 28) |
bitnum(input_data, 25, 27) |
bitnum(input_data, 17, 26) |
bitnum(input_data, 9, 25) |
bitnum(input_data, 1, 24) |
bitnum(input_data, 59, 23) |
bitnum(input_data, 51, 22) |
bitnum(input_data, 43, 21) |
bitnum(input_data, 35, 20) |
bitnum(input_data, 27, 19) |
bitnum(input_data, 19, 18) |
bitnum(input_data, 11, 17) |
bitnum(input_data, 3, 16) |
bitnum(input_data, 61, 15) |
bitnum(input_data, 53, 14) |
bitnum(input_data, 45, 13) |
bitnum(input_data, 37, 12) |
bitnum(input_data, 29, 11) |
bitnum(input_data, 21, 10) |
bitnum(input_data, 13, 9) |
bitnum(input_data, 5, 8) |
bitnum(input_data, 63, 7) |
bitnum(input_data, 55, 6) |
bitnum(input_data, 47, 5) |
bitnum(input_data, 39, 4) |
bitnum(input_data, 31, 3) |
bitnum(input_data, 23, 2) |
bitnum(input_data, 15, 1) |
bitnum(input_data, 7, 0) |
0
const s1 =
bitnum(input_data, 56, 31) |
bitnum(input_data, 48, 30) |
bitnum(input_data, 40, 29) |
bitnum(input_data, 32, 28) |
bitnum(input_data, 24, 27) |
bitnum(input_data, 16, 26) |
bitnum(input_data, 8, 25) |
bitnum(input_data, 0, 24) |
bitnum(input_data, 58, 23) |
bitnum(input_data, 50, 22) |
bitnum(input_data, 42, 21) |
bitnum(input_data, 34, 20) |
bitnum(input_data, 26, 19) |
bitnum(input_data, 18, 18) |
bitnum(input_data, 10, 17) |
bitnum(input_data, 2, 16) |
bitnum(input_data, 60, 15) |
bitnum(input_data, 52, 14) |
bitnum(input_data, 44, 13) |
bitnum(input_data, 36, 12) |
bitnum(input_data, 28, 11) |
bitnum(input_data, 20, 10) |
bitnum(input_data, 12, 9) |
bitnum(input_data, 4, 8) |
bitnum(input_data, 62, 7) |
bitnum(input_data, 54, 6) |
bitnum(input_data, 46, 5) |
bitnum(input_data, 38, 4) |
bitnum(input_data, 30, 3) |
bitnum(input_data, 22, 2) |
bitnum(input_data, 14, 1) |
bitnum(input_data, 6, 0) |
0
return [s0, s1]
}
/**
* 逆初始置换
* @param {number} s0 - 32位整数
* @param {number} s1 - 32位整数
* @returns {Buffer} 逆初始置换后的 Buffer
*/
function inverse_permutation(s0, s1) {
const data = Buffer.alloc(8)
data[3] =
bitnum_intr(s1, 7, 7) |
bitnum_intr(s0, 7, 6) |
bitnum_intr(s1, 15, 5) |
bitnum_intr(s0, 15, 4) |
bitnum_intr(s1, 23, 3) |
bitnum_intr(s0, 23, 2) |
bitnum_intr(s1, 31, 1) |
bitnum_intr(s0, 31, 0) |
0
data[2] =
bitnum_intr(s1, 6, 7) |
bitnum_intr(s0, 6, 6) |
bitnum_intr(s1, 14, 5) |
bitnum_intr(s0, 14, 4) |
bitnum_intr(s1, 22, 3) |
bitnum_intr(s0, 22, 2) |
bitnum_intr(s1, 30, 1) |
bitnum_intr(s0, 30, 0) |
0
data[1] =
bitnum_intr(s1, 5, 7) |
bitnum_intr(s0, 5, 6) |
bitnum_intr(s1, 13, 5) |
bitnum_intr(s0, 13, 4) |
bitnum_intr(s1, 21, 3) |
bitnum_intr(s0, 21, 2) |
bitnum_intr(s1, 29, 1) |
bitnum_intr(s0, 29, 0) |
0
data[0] =
bitnum_intr(s1, 4, 7) |
bitnum_intr(s0, 4, 6) |
bitnum_intr(s1, 12, 5) |
bitnum_intr(s0, 12, 4) |
bitnum_intr(s1, 20, 3) |
bitnum_intr(s0, 20, 2) |
bitnum_intr(s1, 28, 1) |
bitnum_intr(s0, 28, 0) |
0
data[7] =
bitnum_intr(s1, 3, 7) |
bitnum_intr(s0, 3, 6) |
bitnum_intr(s1, 11, 5) |
bitnum_intr(s0, 11, 4) |
bitnum_intr(s1, 19, 3) |
bitnum_intr(s0, 19, 2) |
bitnum_intr(s1, 27, 1) |
bitnum_intr(s0, 27, 0) |
0
data[6] =
bitnum_intr(s1, 2, 7) |
bitnum_intr(s0, 2, 6) |
bitnum_intr(s1, 10, 5) |
bitnum_intr(s0, 10, 4) |
bitnum_intr(s1, 18, 3) |
bitnum_intr(s0, 18, 2) |
bitnum_intr(s1, 26, 1) |
bitnum_intr(s0, 26, 0) |
0
data[5] =
bitnum_intr(s1, 1, 7) |
bitnum_intr(s0, 1, 6) |
bitnum_intr(s1, 9, 5) |
bitnum_intr(s0, 9, 4) |
bitnum_intr(s1, 17, 3) |
bitnum_intr(s0, 17, 2) |
bitnum_intr(s1, 25, 1) |
bitnum_intr(s0, 25, 0) |
0
data[4] =
bitnum_intr(s1, 0, 7) |
bitnum_intr(s0, 0, 6) |
bitnum_intr(s1, 8, 5) |
bitnum_intr(s0, 8, 4) |
bitnum_intr(s1, 16, 3) |
bitnum_intr(s0, 16, 2) |
bitnum_intr(s1, 24, 1) |
bitnum_intr(s0, 24, 0) |
0
return data
}
/**
* Triple-DES F函数
* @param {number} state - 输入
* @param {number[]} key - 密钥
* @returns {number} 输出
*/
function f(state, key) {
state = state | 0
const t1 =
bitnum_intl(state, 31, 0) |
(((state & 0xf0000000) >>> 1) | 0) |
bitnum_intl(state, 4, 5) |
bitnum_intl(state, 3, 6) |
(((state & 0x0f000000) >>> 3) | 0) |
bitnum_intl(state, 8, 11) |
bitnum_intl(state, 7, 12) |
(((state & 0x00f00000) >>> 5) | 0) |
bitnum_intl(state, 12, 17) |
bitnum_intl(state, 11, 18) |
(((state & 0x000f0000) >>> 7) | 0) |
bitnum_intl(state, 16, 23) |
0
const t2 =
bitnum_intl(state, 15, 0) |
(((state & 0x0000f000) << 15) | 0) |
bitnum_intl(state, 20, 5) |
bitnum_intl(state, 19, 6) |
(((state & 0x00000f00) << 13) | 0) |
bitnum_intl(state, 24, 11) |
bitnum_intl(state, 23, 12) |
(((state & 0x000000f0) << 11) | 0) |
bitnum_intl(state, 28, 17) |
bitnum_intl(state, 27, 18) |
(((state & 0x0000000f) << 9) | 0) |
bitnum_intl(state, 0, 23) |
0
const _lrgstate = [
(t1 >>> 24) & 0xff,
(t1 >>> 16) & 0xff,
(t1 >>> 8) & 0xff,
(t2 >>> 24) & 0xff,
(t2 >>> 16) & 0xff,
(t2 >>> 8) & 0xff
]
const lrgstate = _lrgstate.map((val, i) => val ^ key[i])
const newState =
(sbox[0][sbox_bit(lrgstate[0] >>> 2)] << 28) |
(sbox[1][sbox_bit(((lrgstate[0] & 0x03) << 4) | (lrgstate[1] >>> 4))] << 24) |
(sbox[2][sbox_bit(((lrgstate[1] & 0x0f) << 2) | (lrgstate[2] >>> 6))] << 20) |
(sbox[3][sbox_bit(lrgstate[2] & 0x3f)] << 16) |
(sbox[4][sbox_bit(lrgstate[3] >>> 2)] << 12) |
(sbox[5][sbox_bit(((lrgstate[3] & 0x03) << 4) | (lrgstate[4] >>> 4))] << 8) |
(sbox[6][sbox_bit(((lrgstate[4] & 0x0f) << 2) | (lrgstate[5] >>> 6))] << 4) |
sbox[7][sbox_bit(lrgstate[5] & 0x3f)] |
0
return (
bitnum_intl(newState, 15, 0) |
bitnum_intl(newState, 6, 1) |
bitnum_intl(newState, 19, 2) |
bitnum_intl(newState, 20, 3) |
bitnum_intl(newState, 28, 4) |
bitnum_intl(newState, 11, 5) |
bitnum_intl(newState, 27, 6) |
bitnum_intl(newState, 16, 7) |
bitnum_intl(newState, 0, 8) |
bitnum_intl(newState, 14, 9) |
bitnum_intl(newState, 22, 10) |
bitnum_intl(newState, 25, 11) |
bitnum_intl(newState, 4, 12) |
bitnum_intl(newState, 17, 13) |
bitnum_intl(newState, 30, 14) |
bitnum_intl(newState, 9, 15) |
bitnum_intl(newState, 1, 16) |
bitnum_intl(newState, 7, 17) |
bitnum_intl(newState, 23, 18) |
bitnum_intl(newState, 13, 19) |
bitnum_intl(newState, 31, 20) |
bitnum_intl(newState, 26, 21) |
bitnum_intl(newState, 2, 22) |
bitnum_intl(newState, 8, 23) |
bitnum_intl(newState, 18, 24) |
bitnum_intl(newState, 12, 25) |
bitnum_intl(newState, 29, 26) |
bitnum_intl(newState, 5, 27) |
bitnum_intl(newState, 21, 28) |
bitnum_intl(newState, 10, 29) |
bitnum_intl(newState, 3, 30) |
bitnum_intl(newState, 24, 31) |
0
)
}
/**
* TripleDES 加密/解密算法 (单块)
* @param {Buffer} input_data - 输入 Buffer
* @param {number[][]} key - 密钥
* @returns {Buffer} 加/解密后的 Buffer
*/
function crypt(input_data, key) {
let [s0, s1] = initial_permutation(input_data)
for (let idx = 0; idx < 15; idx++) {
const previous_s1 = s1
s1 = (f(s1, key[idx]) ^ s0) | 0
s0 = previous_s1
}
s0 = (f(s1, key[15]) ^ s0) | 0
return inverse_permutation(s0, s1)
}
/**
* TripleDES 密钥扩展算法
* @param {Buffer} key - 密钥
* @param {number} mode - 模式 (ENCRYPT/DECRYPT)
* @returns {number[][]} 密钥扩展
*/
function key_schedule(key, mode) {
const schedule = Array.from({ length: 16 }, () => Array(6).fill(0))
const key_rnd_shift = [1, 1, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 1]
const key_perm_c = [
56, 48, 40, 32, 24, 16, 8, 0, 57, 49, 41, 33, 25, 17, 9, 1, 58, 50, 42, 34, 26, 18, 10, 2, 59,
51, 43, 35
]
const key_perm_d = [
62, 54, 46, 38, 30, 22, 14, 6, 61, 53, 45, 37, 29, 21, 13, 5, 60, 52, 44, 36, 28, 20, 12, 4,
27, 19, 11, 3
]
const key_compression = [
13, 16, 10, 23, 0, 4, 2, 27, 14, 5, 20, 9, 22, 18, 11, 3, 25, 7, 15, 6, 26, 19, 12, 1, 40, 51,
30, 36, 46, 54, 29, 39, 50, 44, 32, 47, 43, 48, 38, 55, 33, 52, 45, 41, 49, 35, 28, 31
]
let c = 0,
d = 0
for (let i = 0; i < 28; i++) {
c |= bitnum(key, key_perm_c[i], 31 - i)
d |= bitnum(key, key_perm_d[i], 31 - i)
}
c = c | 0
d = d | 0
for (let i = 0; i < 16; i++) {
const shift = key_rnd_shift[i]
c = (((c << shift) | (c >>> (28 - shift))) & 0xfffffff0) | 0
d = (((d << shift) | (d >>> (28 - shift))) & 0xfffffff0) | 0
const togen = mode === DECRYPT ? 15 - i : i
schedule[togen] = Array(6).fill(0)
for (let j = 0; j < 24; j++) {
schedule[togen][Math.floor(j / 8)] |= bitnum_intr(c, key_compression[j], 7 - (j % 8))
}
for (let j = 24; j < 48; j++) {
schedule[togen][Math.floor(j / 8)] |= bitnum_intr(d, key_compression[j] - 27, 7 - (j % 8))
}
}
return schedule
}
/**
* TripleDES 密钥设置
* @param {Buffer} key - 密钥
* @param {number} mode - 模式
* @returns {number[][][]} 密钥设置
*/
function tripledes_key_setup(key, mode) {
if (mode === ENCRYPT) {
return [
key_schedule(key.slice(0, 8), ENCRYPT),
key_schedule(key.slice(8, 16), DECRYPT),
key_schedule(key.slice(16, 24), ENCRYPT)
]
}
return [
key_schedule(key.slice(16, 24), DECRYPT),
key_schedule(key.slice(8, 16), ENCRYPT),
key_schedule(key.slice(0, 8), DECRYPT)
]
}
/**
* TripleDES 加密/解密算法 (完整)
* @param {Buffer} data - 输入 Buffer
* @param {number[][][]} key - 密钥
* @returns {Buffer} 加/解密后的 Buffer
*/
function tripledes_crypt(data, key) {
let result = data
for (let i = 0; i < 3; i++) {
result = crypt(result, key[i])
}
return result
}
/**
* QRC解密主函数
* @param {string | Buffer} encrypted_qrc - 加密的QRC内容 (十六进制字符串或Buffer)
* @returns {string} 解密后的UTF-8字符串
*/
function qrc_decrypt(encrypted_qrc) {
if (!encrypted_qrc) {
return ''
}
let input_buffer
if (typeof encrypted_qrc === 'string') {
input_buffer = Buffer.from(encrypted_qrc, 'hex')
} else if (Buffer.isBuffer(encrypted_qrc)) {
input_buffer = encrypted_qrc
} else {
throw new Error('无效的加密数据类型')
}
try {
const decrypted_chunks = []
const key = Buffer.from('!@#)(*$%123ZXC!@!@#)(NHL')
const schedule = tripledes_key_setup(key, DECRYPT)
for (let i = 0; i < input_buffer.length; i += 8) {
const chunk = input_buffer.slice(i, i + 8)
if (chunk.length < 8) {
// 如果最后一块不足8字节DES无法处理但QRC格式应该是8的倍数
// 这里可以根据实际情况决定如何处理,例如抛出错误或填充
// 根据原始代码行为这里假设输入总是8字节的倍数
console.warn('警告: 数据末尾存在不足8字节的块可能导致解密不完整。')
continue
}
decrypted_chunks.push(tripledes_crypt(chunk, schedule))
}
const data = Buffer.concat(decrypted_chunks)
const decompressed = zlib.unzipSync(data)
return decompressed.toString('utf-8')
} catch (e) {
throw new Error(`解密失败: ${e.message}`)
}
}
// 导出主函数
return qrc_decrypt
}

View File

@@ -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']
@@ -26,19 +28,28 @@ declare module 'vue' {
ShaderBackground: typeof import('./src/components/Play/ShaderBackground.vue')['default']
SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
TAlert: typeof import('tdesign-vue-next')['Alert']
TAside: typeof import('tdesign-vue-next')['Aside']
TBadge: typeof import('tdesign-vue-next')['Badge']
TButton: typeof import('tdesign-vue-next')['Button']
TCard: typeof import('tdesign-vue-next')['Card']
TContent: typeof import('tdesign-vue-next')['Content']
TDialog: typeof import('tdesign-vue-next')['Dialog']
TDivider: typeof import('tdesign-vue-next')['Divider']
TDropdown: typeof import('tdesign-vue-next')['Dropdown']
TForm: typeof import('tdesign-vue-next')['Form']
TFormItem: typeof import('tdesign-vue-next')['FormItem']
ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
TIcon: typeof import('tdesign-vue-next')['Icon']
TImage: typeof import('tdesign-vue-next')['Image']
TInput: typeof import('tdesign-vue-next')['Input']
TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
TLayout: typeof import('tdesign-vue-next')['Layout']
TLoading: typeof import('tdesign-vue-next')['Loading']
TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
TSlider: typeof import('tdesign-vue-next')['Slider']
TSwitch: typeof import('tdesign-vue-next')['Switch']
TTag: typeof import('tdesign-vue-next')['Tag']
TTextarea: typeof import('tdesign-vue-next')['Textarea']
TTooltip: typeof import('tdesign-vue-next')['Tooltip']
UpdateExample: typeof import('./src/components/UpdateExample.vue')['default']

View File

@@ -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>

View File

@@ -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 来改进这个组件。

View File

@@ -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
}
}

View File

@@ -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>

View File

@@ -0,0 +1,4 @@
export { default as ContextMenu } from './ContextMenu.vue'
export * from './types'
export * from './utils'
export * from './composables'

View File

@@ -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
}

View File

@@ -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
})
}

View File

@@ -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>

View File

@@ -16,7 +16,12 @@ import { shouldUseBlackText } from '@renderer/utils/color/contrastColor'
import { ControlAudioStore } from '@renderer/store/ControlAudio'
import { Fullscreen1Icon, FullscreenExit1Icon, ChevronDownIcon } from 'tdesign-icons-vue-next'
// 直接从包路径导入,避免 WebAssembly 导入问题
import { parseYrc, parseLrc, parseTTML } from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
import {
parseYrc,
parseLrc,
parseTTML,
parseQrc
} from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
import _ from 'lodash'
import { storeToRefs } from 'pinia'
@@ -151,7 +156,11 @@ watch(
if (lyricData.crlyric) {
// 使用逐字歌词
lyricText = lyricData.crlyric
parsedLyrics = parseYrc(lyricText)
if (source === 'tx') {
parsedLyrics = parseQrc(lyricText)
} else {
parsedLyrics = parseYrc(lyricText)
}
console.log(`使用${source}逐字歌词`, parsedLyrics)
} else if (lyricData.lyric) {
lyricText = lyricData.lyric

View File

@@ -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;
}

View File

@@ -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]
}
}
// 更新音源图标

View File

@@ -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() || '',

View File

@@ -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)

View File

@@ -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 }
)
})
// 执行搜索

View File

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