mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-07-12 05:07:31 +08:00
fix(lyric): 桌面歌词三处 UI 问题(主题色重置/延迟控件遮挡/锁图标淡出)
- 主题色面板新增'恢复默认'按钮,接入已有 resetThemeColor(此前设置自定义 主题色后无任何入口可关闭,#591) - 全屏歌词页的歌词延迟调整控件 bottom 从 16px 提至 96px,越过钉底的 PlayBar(80px, z-index 9999),不再被遮挡无法点击(#592) - 锁定态锁图标增加空闲淡出:无鼠标活动 2.5s 后隐藏并恢复点击穿透, mousemove(forward:true 转发)即重新唤出,移出窗口立即隐藏(#606) Closes #591 Closes #592 Closes #606
This commit is contained in:
@@ -400,6 +400,7 @@ export default {
|
|||||||
themeColor: {
|
themeColor: {
|
||||||
title: 'Lyric Theme Color',
|
title: 'Lyric Theme Color',
|
||||||
presetColors: 'Preset Colors',
|
presetColors: 'Preset Colors',
|
||||||
|
reset: 'Reset to Default',
|
||||||
customColor: 'Custom Color',
|
customColor: 'Custom Color',
|
||||||
preview: 'Preview',
|
preview: 'Preview',
|
||||||
previewText: 'Lyric Effect',
|
previewText: 'Lyric Effect',
|
||||||
|
|||||||
@@ -399,6 +399,7 @@ export default {
|
|||||||
themeColor: {
|
themeColor: {
|
||||||
title: '歌詞テーマカラー',
|
title: '歌詞テーマカラー',
|
||||||
presetColors: 'プリセットカラー',
|
presetColors: 'プリセットカラー',
|
||||||
|
reset: 'デフォルトに戻す',
|
||||||
customColor: 'カスタムカラー',
|
customColor: 'カスタムカラー',
|
||||||
preview: 'プレビュー効果',
|
preview: 'プレビュー効果',
|
||||||
previewText: '歌詞効果',
|
previewText: '歌詞効果',
|
||||||
|
|||||||
@@ -400,6 +400,7 @@ export default {
|
|||||||
themeColor: {
|
themeColor: {
|
||||||
title: '가사 테마 색상',
|
title: '가사 테마 색상',
|
||||||
presetColors: '미리 설정된 색상',
|
presetColors: '미리 설정된 색상',
|
||||||
|
reset: '기본값으로 복원',
|
||||||
customColor: '사용자 정의 색상',
|
customColor: '사용자 정의 색상',
|
||||||
preview: '미리보기 효과',
|
preview: '미리보기 효과',
|
||||||
previewText: '가사 효과',
|
previewText: '가사 효과',
|
||||||
|
|||||||
@@ -396,6 +396,7 @@ export default {
|
|||||||
themeColor: {
|
themeColor: {
|
||||||
title: '歌词主题色',
|
title: '歌词主题色',
|
||||||
presetColors: '预设颜色',
|
presetColors: '预设颜色',
|
||||||
|
reset: '恢复默认',
|
||||||
customColor: '自定义颜色',
|
customColor: '自定义颜色',
|
||||||
preview: '预览效果',
|
preview: '预览效果',
|
||||||
previewText: '歌词效果',
|
previewText: '歌词效果',
|
||||||
|
|||||||
@@ -387,6 +387,7 @@ export default {
|
|||||||
themeColor: {
|
themeColor: {
|
||||||
title: '歌詞主題色',
|
title: '歌詞主題色',
|
||||||
presetColors: '預設顏色',
|
presetColors: '預設顏色',
|
||||||
|
reset: '恢復預設',
|
||||||
customColor: '自訂顏色',
|
customColor: '自訂顏色',
|
||||||
preview: '預覽效果',
|
preview: '預覽效果',
|
||||||
previewText: '歌詞效果',
|
previewText: '歌詞效果',
|
||||||
|
|||||||
@@ -48,7 +48,8 @@ const { t } = useI18n();
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.lyric-correction {
|
.lyric-correction {
|
||||||
@apply absolute right-0 bottom-4 flex flex-col items-center space-y-1 z-50 select-none transition-opacity duration-200 opacity-0 pointer-events-none;
|
/* bottom 需越过全屏态下钉底的 PlayBar(h-20=80px, z-index:9999),否则被遮挡无法点击(#592) */
|
||||||
|
@apply absolute right-0 bottom-24 flex flex-col items-center space-y-1 z-50 select-none transition-opacity duration-200 opacity-0 pointer-events-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lyric-correction-btn {
|
.lyric-correction-btn {
|
||||||
|
|||||||
@@ -7,8 +7,14 @@
|
|||||||
>
|
>
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<span class="panel-title">{{ t('settings.themeColor.title') }}</span>
|
<span class="panel-title">{{ t('settings.themeColor.title') }}</span>
|
||||||
<div class="close-button" @click="handleClose">
|
<div class="header-actions">
|
||||||
<i class="ri-close-line"></i>
|
<div class="reset-button" :title="t('settings.themeColor.reset')" @click="handleReset">
|
||||||
|
<i class="ri-arrow-go-back-line"></i>
|
||||||
|
<span>{{ t('settings.themeColor.reset') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="close-button" @click="handleClose">
|
||||||
|
<i class="ri-close-line"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -111,6 +117,7 @@ interface Props {
|
|||||||
interface Emits {
|
interface Emits {
|
||||||
(e: 'colorChange', _color: string): void;
|
(e: 'colorChange', _color: string): void;
|
||||||
(e: 'close'): void;
|
(e: 'close'): void;
|
||||||
|
(e: 'reset'): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -160,6 +167,12 @@ const handleClose = () => {
|
|||||||
emit('close');
|
emit('close');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 恢复默认:关闭自定义主题色(#591 此前设置后无任何入口可关闭)
|
||||||
|
const handleReset = () => {
|
||||||
|
showColorPicker.value = false;
|
||||||
|
emit('reset');
|
||||||
|
};
|
||||||
|
|
||||||
const handlePresetColorSelect = (color: LyricThemeColor) => {
|
const handlePresetColorSelect = (color: LyricThemeColor) => {
|
||||||
const colorValue = getColorValue(color);
|
const colorValue = getColorValue(color);
|
||||||
const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
|
const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
|
||||||
@@ -301,6 +314,35 @@ watch(
|
|||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|||||||
@@ -95,6 +95,7 @@
|
|||||||
:theme="lyricSetting.theme"
|
:theme="lyricSetting.theme"
|
||||||
@color-change="handleColorChange"
|
@color-change="handleColorChange"
|
||||||
@close="handleThemeColorPanelClose"
|
@close="handleThemeColorPanelClose"
|
||||||
|
@reset="handleThemeColorReset"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 歌词显示区域 -->
|
<!-- 歌词显示区域 -->
|
||||||
@@ -365,6 +366,36 @@ const clearHideTimer = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 锁定态下锁图标空闲自动淡出(#606):
|
||||||
|
// 光标在窗口内且无活动 2.5s 后隐藏并恢复点击穿透;再次移动鼠标即重新唤出
|
||||||
|
const LOCKED_CONTROLS_HIDE_DELAY = 2500;
|
||||||
|
|
||||||
|
const scheduleLockedControlsHide = () => {
|
||||||
|
clearHideTimer();
|
||||||
|
hideControlsTimer = window.setTimeout(() => {
|
||||||
|
hideControlsTimer = null;
|
||||||
|
if (lyricSetting.value.isLock) {
|
||||||
|
isHovering.value = false;
|
||||||
|
windowData.electron.ipcRenderer.send('set-ignore-mouse', true);
|
||||||
|
}
|
||||||
|
}, LOCKED_CONTROLS_HIDE_DELAY);
|
||||||
|
};
|
||||||
|
|
||||||
|
const showLockedControls = () => {
|
||||||
|
if (!lyricSetting.value.isLock) return;
|
||||||
|
if (!isHovering.value) {
|
||||||
|
isHovering.value = true;
|
||||||
|
windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
|
||||||
|
}
|
||||||
|
scheduleLockedControlsHide();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击穿透开启时主进程以 forward:true 转发 mousemove,可用于重新唤出锁图标
|
||||||
|
const handleLockedMouseMove = () => {
|
||||||
|
if (!lyricSetting.value.isLock) return;
|
||||||
|
showLockedControls();
|
||||||
|
};
|
||||||
|
|
||||||
// 处理鼠标进入窗口
|
// 处理鼠标进入窗口
|
||||||
const handleMouseEnter = () => {
|
const handleMouseEnter = () => {
|
||||||
if (lyricSetting.value.isLock) {
|
if (lyricSetting.value.isLock) {
|
||||||
@@ -396,6 +427,7 @@ const handleMouseLeave = () => {
|
|||||||
watch(
|
watch(
|
||||||
() => lyricSetting.value.isLock,
|
() => lyricSetting.value.isLock,
|
||||||
(newLock: boolean) => {
|
(newLock: boolean) => {
|
||||||
|
clearHideTimer();
|
||||||
if (newLock) {
|
if (newLock) {
|
||||||
isHovering.value = false;
|
isHovering.value = false;
|
||||||
// 锁定时自动关闭主题色面板
|
// 锁定时自动关闭主题色面板
|
||||||
@@ -410,10 +442,12 @@ onMounted(() => {
|
|||||||
if (lyricSetting.value.isLock) {
|
if (lyricSetting.value.isLock) {
|
||||||
isHovering.value = false;
|
isHovering.value = false;
|
||||||
}
|
}
|
||||||
|
document.addEventListener('mousemove', handleLockedMouseMove);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearHideTimer();
|
clearHideTimer();
|
||||||
|
document.removeEventListener('mousemove', handleLockedMouseMove);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 计算歌词滚动位置
|
// 计算歌词滚动位置
|
||||||
@@ -788,10 +822,18 @@ onMounted(() => {
|
|||||||
removeMousePresenceListener = window.ipcRenderer.on(
|
removeMousePresenceListener = window.ipcRenderer.on(
|
||||||
'lyric-mouse-presence',
|
'lyric-mouse-presence',
|
||||||
(isInside: boolean) => {
|
(isInside: boolean) => {
|
||||||
isHovering.value = isInside;
|
|
||||||
|
|
||||||
if (lyricSetting.value.isLock) {
|
if (lyricSetting.value.isLock) {
|
||||||
windowData.electron.ipcRenderer.send('set-ignore-mouse', !isInside);
|
if (isInside) {
|
||||||
|
// 进入窗口:显示锁图标并启动空闲淡出定时器(#606)
|
||||||
|
showLockedControls();
|
||||||
|
} else {
|
||||||
|
// 离开窗口:立即隐藏并恢复点击穿透
|
||||||
|
clearHideTimer();
|
||||||
|
isHovering.value = false;
|
||||||
|
windowData.electron.ipcRenderer.send('set-ignore-mouse', true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
isHovering.value = isInside;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -849,7 +891,13 @@ const handleThemeColorPanelClose = () => {
|
|||||||
showThemeColorPanel.value = false;
|
showThemeColorPanel.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 导出重置函数以供将来使用
|
// 面板"恢复默认":关闭自定义主题色并收起面板(#591)
|
||||||
|
const handleThemeColorReset = () => {
|
||||||
|
resetThemeColor();
|
||||||
|
showThemeColorPanel.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置主题色到默认(主题色面板"恢复默认"按钮调用)
|
||||||
const resetThemeColor = () => {
|
const resetThemeColor = () => {
|
||||||
// 重置到默认颜色
|
// 重置到默认颜色
|
||||||
const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
|
const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
|
||||||
|
|||||||
Reference in New Issue
Block a user