feat: 支持选择歌词 (#383)

Author: maotoumao

res/lang/en-US.json

@@ -168,7 +168,8 @@
         "download_lyric": "Download Lyrics",
         "more_actions": "More Actions",
         "search_and_replace": "Search & Replace Lyrics",
-        "source_info": "Lyrics from {{platform}} - {{title}}{{artist}}"
+        "source_info": "Lyrics from {{platform}} - {{title}}{{artist}}",
+        "select_mode": "Select Mode"
     },
     "media": {
         "unknown_title": "Untitled",

res/lang/zh-CN.json

@@ -168,7 +168,8 @@
         "download_lyric": "下载歌词",
         "more_actions": "更多操作",
         "search_and_replace": "搜索并替换歌词",
-        "source_info": "歌词来自 {{platform}} - {{title}}{{artist}}"
+        "source_info": "歌词来自 {{platform}} - {{title}}{{artist}}",
+        "select_mode": "选择模式"
     },
     "media": {
         "unknown_title": "未命名",

res/lang/zh-TW.json

@@ -168,7 +168,8 @@
         "download_lyric": "下載歌詞",
         "more_actions": "更多操作",
         "search_and_replace": "搜尋並替換歌詞",
-        "source_info": "歌詞來自 {{platform}} - {{title}}{{artist}}"
+        "source_info": "歌詞來自 {{platform}} - {{title}}{{artist}}",
+        "select_mode": "選擇模式"
     },
     "media": {
         "unknown_title": "無標題",

src/renderer/mainWindow/components/layout/FullscreenPlayer/LyricPanel.tsx

@@ -16,6 +16,8 @@ interface LyricPanelProps {
     fontScale: number;
     /** 是否显示翻译 */
     showTranslation: boolean;
+    /** 是否处于文本选择模式 */
+    isSelectable: boolean;
 }
 
 /** 活跃行基准字号 (px) — 对标设计稿 32px */
@@ -32,13 +34,20 @@ const USER_SCROLL_PAUSE = 4000;
 const prefersReducedMotion =
     typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-const LyricPanel = memo(function LyricPanel({ fontScale, showTranslation }: LyricPanelProps) {
+const LyricPanel = memo(function LyricPanel({
+    fontScale,
+    showTranslation,
+    isSelectable,
+}: LyricPanelProps) {
     const { t } = useTranslation();
     const lyricState = useLyric();
     const containerRef = useRef<HTMLDivElement>(null);
     const activeIndexRef = useRef<number>(-1);
     const isInitialRef = useRef(true);
 
+    const isSelectableRef = useRef(false);
+    isSelectableRef.current = isSelectable;
+
     // 拖拽滚动状态
     const dragState = useRef({
         isDragging: false,
@@ -96,8 +105,10 @@ const LyricPanel = memo(function LyricPanel({ fontScale, showTranslation }: Lyri
         });
     }, [activeIndex]);
 
-    /** 拖拽开始 */
+    /** 拖拽开始（文本选择模式下跳过） */
     const handlePointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+        if (isSelectableRef.current) return;
+
         const container = containerRef.current;
         if (!container) return;
 
@@ -111,8 +122,10 @@ const LyricPanel = memo(function LyricPanel({ fontScale, showTranslation }: Lyri
         wasDraggedRef.current = false;
     }, []);
 
-    /** 拖拽移动 */
+    /** 拖拽移动（文本选择模式下跳过） */
     const handlePointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+        if (isSelectableRef.current) return;
+
         const state = dragState.current;
         if (!state.isDragging) return;
 
@@ -159,10 +172,9 @@ const LyricPanel = memo(function LyricPanel({ fontScale, showTranslation }: Lyri
         [pauseAutoScroll],
     );
 
-    /** 点击歌词行跳转播放位置（拖拽时不触发） */
+    /** 双击歌词行跳转播放位置（拖拽或文本选择模式下不触发） */
     const handleLyricClick = useCallback((item: IParsedLrcItem) => {
-        console.log('点击歌词行', item);
-        if (wasDraggedRef.current) return;
+        if (wasDraggedRef.current || isSelectableRef.current) return;
         trackPlayer.seekTo(item.time);
     }, []);
 
@@ -191,7 +203,7 @@ const LyricPanel = memo(function LyricPanel({ fontScale, showTranslation }: Lyri
     return (
         <div
             ref={containerRef}
-            className="l-fullscreen-player__lyric-scroll"
+            className={`l-fullscreen-player__lyric-scroll${isSelectable ? ' is-selectable' : ''}`}
             onPointerDown={handlePointerDown}
             onPointerMove={handlePointerMove}
             onPointerUp={handlePointerUp}

src/renderer/mainWindow/components/layout/FullscreenPlayer/index.scss

@@ -220,6 +220,16 @@
         &.is-dragging {
             cursor: grabbing;
         }
+
+        &.is-selectable {
+            user-select: text;
+            cursor: text;
+
+            ::selection {
+                background-color: var(--color-fill-brand);
+                color: var(--color-text-on-brand);
+            }
+        }
         // 顶部/底部渐变遮罩
         mask-image: linear-gradient(
             to bottom,

src/renderer/mainWindow/components/layout/FullscreenPlayer/index.tsx

@@ -5,7 +5,7 @@
 import { useState, useEffect, useCallback, useRef, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ChevronDown, MoreHorizontal, Languages } from 'lucide-react';
+import { ChevronDown, MoreHorizontal, Languages, TextCursorInput } from 'lucide-react';
 import { DesktopLyric } from '@renderer/common/icons';
 import { useAtomValue } from 'jotai/react';
 import { useTranslation } from 'react-i18next';
@@ -45,6 +45,7 @@ const FullscreenPlayer = memo(function FullscreenPlayer() {
     const [showTranslation, setShowTranslation] = useState(
         () => syncKV.get('player.showLyricTranslation') ?? true,
     );
+    const [isSelectable, setIsSelectable] = useState(false);
 
     // Escape 关闭
     useEffect(() => {
@@ -63,6 +64,7 @@ const FullscreenPlayer = memo(function FullscreenPlayer() {
     useEffect(() => {
         if (!open) {
             setSettingsOpen(false);
+            setIsSelectable(false);
         }
     }, [open]);
 
@@ -104,6 +106,10 @@ const FullscreenPlayer = memo(function FullscreenPlayer() {
         handleShowTranslationChange(!showTranslation);
     }, [showTranslation, handleShowTranslationChange]);
 
+    const handleSelectableToggle = useCallback(() => {
+        setIsSelectable((prev) => !prev);
+    }, []);
+
     return createPortal(
         <AnimatePresence>
             {open && (
@@ -193,10 +199,24 @@ const FullscreenPlayer = memo(function FullscreenPlayer() {
                                 <LyricPanel
                                     fontScale={fontScale}
                                     showTranslation={showTranslation}
+                                    isSelectable={isSelectable}
                                 />
 
                                 {/* 右下角工具栏：翻译 / 桌面歌词 / 设置 */}
                                 <div className="l-fullscreen-player__settings-anchor">
+                                    <button
+                                        className={cn(
+                                            'l-fullscreen-player__tool-btn',
+                                            isSelectable && 'is-active',
+                                        )}
+                                        type="button"
+                                        title={t('lyric.select_mode')}
+                                        aria-label={t('lyric.select_mode')}
+                                        aria-pressed={isSelectable}
+                                        onClick={handleSelectableToggle}
+                                    >
+                                        <TextCursorInput size={16} />
+                                    </button>
                                     <button
                                         className={cn(
                                             'l-fullscreen-player__tool-btn',