lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-17 02:07:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 更新 eslint 和 prettier 配置 格式化代码

Browse Source
This commit is contained in:
alger
2025-07-23 23:54:35 +08:00
parent d1f5c8af84
commit c08c2cbf19
134 changed files with 3887 additions and 3301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/lyric/LyricCorrectionControl.vue
+9 -9
View File
@@ -1,21 +1,19 @@
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { defineEmits, defineProps } from 'vue';
import { useI18n } from 'vue-i18n';
const props = defineProps<{
correctionTime: number
correctionTime: number;
}>();
const emit = defineEmits<{
(e: 'adjust', delta: number): void
(e: 'adjust', delta: number): void;
}>();
const { t } = useI18n();
</script>
<template>
<div
class="lyric-correction"
>
<div class="lyric-correction">
<n-tooltip placement="right">
<template #trigger>
<div
@@ -28,7 +26,9 @@ const { t } = useI18n();
</template>
<span>{{ t('player.subtractCorrection', { num: 0.2 }) }}</span>
</n-tooltip>
<span class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl">
<span
class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl"
>
{{ props.correctionTime > 0 ? '+' : '' }}{{ props.correctionTime.toFixed(1) }}s
</span>
<n-tooltip placement="right">
@@ -55,9 +55,9 @@ const { t } = useI18n();
@apply w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-neutral-800 border border-white/20 dark:border-neutral-700/40 shadow-md backdrop-blur-2xl cursor-pointer transition-all duration-150 text-gray-700 dark:text-gray-200 hover:bg-green-500/80 hover:text-white hover:border-green-400/60 active:scale-95 bg-opacity-40 dark:hover:bg-green-500/80 dark:hover:text-white dark:hover:border-green-400/60 dark:hover:bg-opacity-40;
}
.mobile{
.mobile {
.lyric-correction {
@apply opacity-100;
}
}
</style>
</style>
src/renderer/components/lyric/MusicFull.vue
+6 -6
View File
@@ -72,7 +72,7 @@
v-if="!config.hideMiniPlayBar"
class="mt-4"
:pure-mode-enabled="config.pureModeEnabled"
:isDark=" textColors.theme === 'dark'"
:isDark="textColors.theme === 'dark'"
/>
</div>
</div>
@@ -135,7 +135,7 @@
</div>
</div>
<!-- 歌词右下角矫正按钮组件 -->
<LyricCorrectionControl
<lyric-correction-control
v-if="!isMobile"
:correction-time="correctionTime"
@adjust="adjustCorrectionTime"
@@ -151,19 +151,19 @@ import { useDebounceFn } from '@vueuse/core';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
import LyricSettings from '@/components/lyric/LyricSettings.vue';
import SimplePlayBar from '@/components/player/SimplePlayBar.vue';
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
import {
adjustCorrectionTime,
artistList,
correctionTime,
lrcArray,
nowIndex,
playMusic,
setAudioTime,
textColors,
useLyricProgress,
correctionTime,
adjustCorrectionTime
useLyricProgress
} from '@/hooks/MusicHook';
import { useArtist } from '@/hooks/useArtist';
import { usePlayerStore } from '@/store/modules/player';
src/renderer/components/lyric/MusicFullMobile.vue
+280 -249
View File
File diff suppressed because it is too large Load Diff
src/renderer/components/lyric/MusicFullWrapper.vue
+3 -2
View File
@@ -4,9 +4,10 @@
<script setup lang="ts">
import { computed } from 'vue';
import { isMobile } from '@/utils';
import MusicFull from '@/components/lyric/MusicFull.vue';
import MusicFullMobile from '@/components/lyric/MusicFullMobile.vue';
import { isMobile } from '@/utils';
// 根据当前设备类型选择需要显示的组件
const componentToUse = computed(() => {
@@ -18,4 +19,4 @@ const musicFullRef = ref<InstanceType<typeof MusicFull>>();
defineExpose({
musicFullRef
});
</script>
</script>
src/renderer/components/lyric/ThemeColorPanel.vue
+37 -33
View File
@@ -44,7 +44,11 @@
class="color-preview"
:style="{ backgroundColor: currentColor }"
@click="showColorPicker = !showColorPicker"
:title="showColorPicker ? t('settings.themeColor.tooltips.closeColorPicker') : t('settings.themeColor.tooltips.openColorPicker')"
:title="
showColorPicker
? t('settings.themeColor.tooltips.closeColorPicker')
: t('settings.themeColor.tooltips.openColorPicker')
"
>
<i class="ri-palette-line"></i>
</div>
@@ -70,7 +74,7 @@
</div>
</div>
</div>
<!-- 颜色选择器（展开时显示） -->
<div v-if="showColorPicker" class="color-picker-dropdown">
<n-color-picker
@@ -86,16 +90,16 @@
</template>
<script setup lang="ts">
import { NColorPicker } from 'naive-ui';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { NColorPicker } from 'naive-ui';
import {
getLyricThemeColors,
getPresetColorValue,
validateColor,
type LyricThemeColor,
optimizeColorForTheme,
type LyricThemeColor
validateColor
} from '@/utils/linearColor';
interface Props {
@@ -105,7 +109,7 @@ interface Props {
}
interface Emits {
(e: 'colorChange', color: string): void;
(e: 'colorChange', _color: string): void;
(e: 'close'): void;
}
@@ -160,7 +164,7 @@ const handlePresetColorSelect = (color: LyricThemeColor) => {
const colorValue = getColorValue(color);
const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
emit('colorChange', optimizedColor);
// 更新输入框和选择器
colorInput.value = optimizedColor;
pickerColor.value = optimizedColor;
@@ -253,31 +257,31 @@ watch(
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.hidden {
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px) scale(0.95);
pointer-events: none;
}
&.visible {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
}
// 小屏幕适配
@media (max-width: 520px) {
min-width: calc(100vw - 40px);
left: 20px;
transform: none;
&.hidden {
transform: translateY(-10px) scale(0.95);
}
&.visible {
transform: translateY(0) scale(1);
}
@@ -289,14 +293,14 @@ watch(
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.panel-title {
font-size: 13px;
font-weight: 600;
color: var(--text-color);
opacity: 0.9;
}
.close-button {
width: 24px;
height: 24px;
@@ -307,12 +311,12 @@ watch(
border-radius: 6px;
color: var(--text-color);
transition: all 0.2s ease;
&:hover {
background: rgba(255, 255, 255, 0.15);
color: #ff6b6b;
}
i {
font-size: 14px;
}
@@ -325,7 +329,7 @@ watch(
align-items: center;
gap: 16px;
}
.section-label {
font-size: 11px;
font-weight: 500;
@@ -334,7 +338,7 @@ watch(
margin-bottom: 6px;
text-align: center;
}
.divider {
width: 1px;
height: 40px;
@@ -347,7 +351,7 @@ watch(
.preset-colors {
display: flex;
gap: 6px;
.color-dot {
width: 24px;
height: 24px;
@@ -358,17 +362,17 @@ watch(
display: flex;
align-items: center;
justify-content: center;
&:hover {
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
}
&.active {
border-color: var(--text-color);
box-shadow: 0 0 0 2px var(--control-bg);
}
i {
color: white;
font-size: 10px;
@@ -384,7 +388,7 @@ watch(
display: flex;
gap: 8px;
align-items: center;
.color-preview {
width: 24px;
height: 24px;
@@ -395,19 +399,19 @@ watch(
align-items: center;
justify-content: center;
transition: all 0.2s ease;
&:hover {
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}
i {
color: white;
font-size: 12px;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
}
.color-input {
width: 80px;
height: 24px;
@@ -420,12 +424,12 @@ watch(
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
outline: none;
transition: all 0.2s ease;
&:focus {
border-color: var(--highlight-color, rgba(255, 255, 255, 0.4));
background: rgba(255, 255, 255, 0.12);
}
&::placeholder {
color: rgba(255, 255, 255, 0.4);
}
@@ -441,7 +445,7 @@ watch(
line-height: 1.2;
white-space: nowrap;
transition: all 0.2s ease;
&:hover {
transform: scale(1.02);
}
@@ -455,7 +459,7 @@ watch(
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
:deep(.n-color-picker) {
width: 100%;
}
@@ -466,15 +470,15 @@ watch(
.compact-layout {
flex-direction: column;
gap: 12px;
.divider {
width: 100%;
height: 1px;
}
}
.preset-section .preset-colors {
justify-content: center;
}
}
</style>
</style>