Skip to content

Commit 21b2fc0

Browse files
algerkongalgerkong
committed
feat: 优化移动端界面设计以及歌词界面设计 添加播放模式选择
1 parent 155bdf2 commit 21b2fc0

File tree

22 files changed

+1473
-135
lines changed

22 files changed

+1473
-135
lines changed

‎electron.vite.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default defineConfig({
3939
],
4040
publicDir: resolve('resources'),
4141
server: {
42+
host: '0.0.0.0',
4243
proxy: {
4344
// with options
4445
[process.env.VITE_API_LOCAL as string]: {

‎src/i18n/lang/en-US/settings.ts

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -168,42 +168,57 @@ export default {
168168
},
169169
lyricSettings: {
170170
title: 'Lyric Settings',
171+
tabs: {
172+
display: 'Display',
173+
interface: 'Interface',
174+
typography: 'Typography',
175+
mobile: 'Mobile'
176+
},
171177
pureMode: 'Pure Mode',
172178
hideCover: 'Hide Cover',
173179
centerDisplay: 'Center Display',
174180
showTranslation: 'Show Translation',
181+
hideLyrics: 'Hide Lyrics',
175182
hidePlayBar: 'Hide Play Bar',
176-
fontSize: 'Font Size',
177-
letterSpacing: 'Letter Spacing',
178-
lineHeight: 'Line Height',
183+
hideMiniPlayBar: 'Hide Mini Play Bar',
179184
backgroundTheme: 'Background Theme',
185+
themeOptions: {
186+
default: 'Default',
187+
light: 'Light',
188+
dark: 'Dark'
189+
},
190+
fontSize: 'Font Size',
180191
fontSizeMarks: {
181192
small: 'Small',
182193
medium: 'Medium',
183194
large: 'Large'
184195
},
196+
letterSpacing: 'Letter Spacing',
185197
letterSpacingMarks: {
186198
compact: 'Compact',
187199
default: 'Default',
188200
loose: 'Loose'
189201
},
202+
lineHeight: 'Line Height',
190203
lineHeightMarks: {
191204
compact: 'Compact',
192205
default: 'Default',
193206
loose: 'Loose'
194207
},
195-
themeOptions: {
208+
mobileLayout: 'Mobile Layout',
209+
layoutOptions: {
196210
default: 'Default',
197-
light: 'Light',
198-
dark: 'Dark'
211+
ios: 'iOS Style',
212+
android: 'Android Style'
199213
},
200-
hideMiniPlayBar: 'Hide Mini Play Bar',
201-
hideLyrics: 'Hide Lyrics',
202-
tabs: {
203-
interface: 'Interface',
204-
display: 'Display',
205-
typography: 'Typography'
206-
}
214+
mobileCoverStyle: 'Cover Style',
215+
coverOptions: {
216+
record: 'Record',
217+
square: 'Square',
218+
full: 'Full Screen'
219+
},
220+
lyricLines: 'Lyric Lines',
221+
mobileUnavailable: 'This setting is only available on mobile devices'
207222
},
208223
shortcutSettings: {
209224
title: 'Shortcut Settings',

‎src/i18n/lang/zh-CN/player.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
playFailed: '当前歌曲播放失败，播放下一首',
1717
playMode: {
1818
sequence: '顺序播放',
19-
loop: '循环播放',
19+
loop: '单曲循环',
2020
random: '随机播放'
2121
},
2222
fullscreen: {

‎src/i18n/lang/zh-CN/settings.ts

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -167,19 +167,33 @@ export default {
167167
portNumber: '请输入有效的端口号(1-65535)'
168168
},
169169
lyricSettings: {
170-
title: '页面设置',
170+
title: '歌词设置',
171+
tabs: {
172+
display: '显示',
173+
interface: '界面',
174+
typography: '文字',
175+
mobile: '移动端'
176+
},
171177
pureMode: '纯净模式',
172178
hideCover: '隐藏封面',
173179
centerDisplay: '居中显示',
174180
showTranslation: '显示翻译',
181+
hideLyrics: '隐藏歌词',
175182
hidePlayBar: '隐藏播放栏',
183+
hideMiniPlayBar: '隐藏迷你播放栏',
184+
backgroundTheme: '背景主题',
185+
themeOptions: {
186+
default: '默认',
187+
light: '亮色',
188+
dark: '暗色'
189+
},
176190
fontSize: '字体大小',
177191
fontSizeMarks: {
178192
small: '小',
179193
medium: '中',
180194
large: '大'
181195
},
182-
letterSpacing: '文字间距',
196+
letterSpacing: '字间距',
183197
letterSpacingMarks: {
184198
compact: '紧凑',
185199
default: '默认',
@@ -191,19 +205,20 @@ export default {
191205
default: '默认',
192206
loose: '宽松'
193207
},
194-
backgroundTheme: '背景主题',
195-
themeOptions: {
208+
mobileLayout: '移动端布局',
209+
layoutOptions: {
196210
default: '默认',
197-
light: '亮色',
198-
dark: '暗色'
211+
ios: 'iOS风格',
212+
android: '安卓风格'
199213
},
200-
hideMiniPlayBar: '隐藏迷你播放栏',
201-
hideLyrics: '隐藏歌词',
202-
tabs: {
203-
interface: '界面',
204-
typography: '文字',
205-
display: '显示'
206-
}
214+
mobileCoverStyle: '封面样式',
215+
coverOptions: {
216+
record: '唱片',
217+
square: '方形',
218+
full: '全屏'
219+
},
220+
lyricLines: '歌词行数',
221+
mobileUnavailable: '此设置仅在移动端可用'
207222
},
208223
shortcutSettings: {
209224
title: '快捷键设置',

‎src/locale/zh-CN.json

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"settings": {
3+
"lyricSettings": {
4+
"title": "歌词设置",
5+
"tabs": {
6+
"display": "显示",
7+
"interface": "界面",
8+
"typography": "文字",
9+
"mobile": "移动端"
10+
},
11+
"pureMode": "纯净模式",
12+
"hideCover": "隐藏封面",
13+
"centerDisplay": "居中显示",
14+
"showTranslation": "显示翻译",
15+
"hideLyrics": "隐藏歌词",
16+
"hidePlayBar": "隐藏播放栏",
17+
"hideMiniPlayBar": "隐藏迷你播放栏",
18+
"backgroundTheme": "背景主题",
19+
"themeOptions": {
20+
"default": "默认",
21+
"light": "亮色",
22+
"dark": "暗色"
23+
},
24+
"fontSize": "字体大小",
25+
"fontSizeMarks": {
26+
"small": "小",
27+
"medium": "中",
28+
"large": "大"
29+
},
30+
"letterSpacing": "字间距",
31+
"letterSpacingMarks": {
32+
"compact": "紧凑",
33+
"default": "默认",
34+
"loose": "宽松"
35+
},
36+
"lineHeight": "行高",
37+
"lineHeightMarks": {
38+
"compact": "紧凑",
39+
"default": "默认",
40+
"loose": "宽松"
41+
},
42+
"mobileLayout": "移动端布局",
43+
"layoutOptions": {
44+
"default": "默认",
45+
"ios": "iOS风格",
46+
"android": "安卓风格"
47+
},
48+
"mobileCoverStyle": "封面样式",
49+
"coverOptions": {
50+
"record": "唱片",
51+
"square": "方形",
52+
"full": "全屏"
53+
},
54+
"lyricLines": "歌词行数",
55+
"mobileUnavailable": "此设置仅在移动端可用"
56+
}
57+
}
58+
}

‎src/renderer/components/lyric/LyricSettings.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,47 @@
114114
</div>
115115
</div>
116116
</n-tab-pane>
117+
118+
<!-- 移动端设置 -->
119+
<n-tab-pane :name="'mobile'" :tab="t('settings.lyricSettings.tabs.mobile')">
120+
<div class="tab-content" v-if="isMobile">
121+
<div class="section-title">{{ t('settings.lyricSettings.mobileLayout') }}</div>
122+
<n-radio-group v-model:value="config.mobileLayout" name="mobileLayout" class="mb-4">
123+
<n-space>
124+
<n-radio value="default">{{ t('settings.lyricSettings.layoutOptions.default') }}</n-radio>
125+
<n-radio value="ios">{{ t('settings.lyricSettings.layoutOptions.ios') }}</n-radio>
126+
<n-radio value="android">{{ t('settings.lyricSettings.layoutOptions.android') }}</n-radio>
127+
</n-space>
128+
</n-radio-group>
129+
130+
<div class="section-title">{{ t('settings.lyricSettings.mobileCoverStyle') }}</div>
131+
<n-radio-group v-model:value="config.mobileCoverStyle" name="mobileCoverStyle" class="mb-4">
132+
<n-space>
133+
<n-radio value="record">{{ t('settings.lyricSettings.coverOptions.record') }}</n-radio>
134+
<n-radio value="square">{{ t('settings.lyricSettings.coverOptions.square') }}</n-radio>
135+
<n-radio value="full">{{ t('settings.lyricSettings.coverOptions.full') }}</n-radio>
136+
</n-space>
137+
</n-radio-group>
138+
139+
<div class="slider-item">
140+
<span>{{ t('settings.lyricSettings.lyricLines') }}</span>
141+
<n-slider
142+
v-model:value="config.mobileShowLyricLines"
143+
:step="1"
144+
:min="1"
145+
:max="5"
146+
:marks="{
147+
1: '1',
148+
3: '3',
149+
5: '5'
150+
}"
151+
/>
152+
</div>
153+
</div>
154+
<div v-else class="mobile-unavailable">
155+
{{ t('settings.lyricSettings.mobileUnavailable') }}
156+
</div>
157+
</n-tab-pane>
117158
</n-tabs>
118159
</div>
119160
</div>
@@ -124,6 +165,7 @@ import { onMounted, ref, watch } from 'vue';
124165
import { useI18n } from 'vue-i18n';
125166
126167
import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
168+
import { isMobile } from '@/utils';
127169
128170
const { t } = useI18n();
129171
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
@@ -253,4 +295,8 @@ defineExpose({
253295
color: var(--text-color-active) !important;
254296
@apply text-xs;
255297
}
298+
299+
.mobile-unavailable {
300+
@apply text-center py-4 text-gray-500 text-sm;
301+
}
256302
</style>

0 commit comments

Comments
 (0)