feat: 优化歌词组件和移动端界面设计

This commit is contained in:
alger
2025-06-07 22:30:39 +08:00
parent 6f1909a028
commit 934580552d
12 changed files with 85 additions and 136 deletions
@@ -114,47 +114,6 @@
</div>
</div>
</n-tab-pane>
<!-- 移动端设置 -->
<n-tab-pane :name="'mobile'" :tab="t('settings.lyricSettings.tabs.mobile')">
<div class="tab-content" v-if="isMobile">
<div class="section-title">{{ t('settings.lyricSettings.mobileLayout') }}</div>
<n-radio-group v-model:value="config.mobileLayout" name="mobileLayout" class="mb-4">
<n-space>
<n-radio value="default">{{ t('settings.lyricSettings.layoutOptions.default') }}</n-radio>
<n-radio value="ios">{{ t('settings.lyricSettings.layoutOptions.ios') }}</n-radio>
<n-radio value="android">{{ t('settings.lyricSettings.layoutOptions.android') }}</n-radio>
</n-space>
</n-radio-group>
<div class="section-title">{{ t('settings.lyricSettings.mobileCoverStyle') }}</div>
<n-radio-group v-model:value="config.mobileCoverStyle" name="mobileCoverStyle" class="mb-4">
<n-space>
<n-radio value="record">{{ t('settings.lyricSettings.coverOptions.record') }}</n-radio>
<n-radio value="square">{{ t('settings.lyricSettings.coverOptions.square') }}</n-radio>
<n-radio value="full">{{ t('settings.lyricSettings.coverOptions.full') }}</n-radio>
</n-space>
</n-radio-group>
<div class="slider-item">
<span>{{ t('settings.lyricSettings.lyricLines') }}</span>
<n-slider
v-model:value="config.mobileShowLyricLines"
:step="1"
:min="1"
:max="5"
:marks="{
1: '1',
3: '3',
5: '5'
}"
/>
</div>
</div>
<div v-else class="mobile-unavailable">
{{ t('settings.lyricSettings.mobileUnavailable') }}
</div>
</n-tab-pane>
</n-tabs>
</div>
</div>
@@ -165,7 +124,6 @@ import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
import { isMobile } from '@/utils';
const { t } = useI18n();
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });