Skip to content

Commit 0f5fbc1

Browse files
authored
Merge pull request #800 from MoYingJi/pr/o
refactor(setting): 优化设置
2 parents 2de3a8b + c915b56 commit 0f5fbc1

10 files changed

Lines changed: 212 additions & 232 deletions

File tree

src/components/Modal/Setting/FontManager.vue

Lines changed: 63 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,32 @@
44
<n-h3 prefix="bar">通用字体</n-h3>
55
<n-card v-if="isElectron" class="set-item">
66
<div class="label">
7-
<n-text class="name">自定义 CSS 字体</n-text>
8-
<n-text class="tip" :depth="3"> 开启后可手动输入字体名称,支持 CSS 字体族 </n-text>
7+
<n-text class="name">字体设置样式</n-text>
8+
<n-text class="tip" :depth="3"> 下面的字体如何显示,如何设置 </n-text>
99
</div>
10-
<n-switch v-model:value="settingStore.useCustomFont" class="set" :round="false" />
10+
<n-select
11+
v-model:value="settingStore.fontSettingStyle"
12+
:options="[
13+
{
14+
label: '自定义 CSS 字体',
15+
value: 'custom',
16+
},
17+
{
18+
label: '多字体备选',
19+
value: 'multi',
20+
},
21+
{
22+
label: '单字体选择',
23+
value: 'single',
24+
},
25+
]"
26+
class="set"
27+
:round="false"
28+
/>
1129
</n-card>
1230
<n-card
1331
class="set-item"
14-
:class="{ 'input-mode': settingStore.useCustomFont || !isElectron }"
32+
:class="{ 'input-mode': isInputMode }"
1533
>
1634
<div class="label">
1735
<div style="display: flex; justify-content: space-between; align-items: center">
@@ -34,14 +52,24 @@
3452
</div>
3553
<n-flex align="center">
3654
<s-input
37-
v-if="settingStore.useCustomFont || !isElectron"
55+
v-if="settingStore.fontSettingStyle === 'custom' || !isElectron"
3856
v-model:value="settingStore.globalFont"
3957
:update-value-on-input="false"
4058
placeholder="输入字体名称"
4159
class="set"
4260
/>
4361
<n-select
44-
v-else
62+
v-else-if="settingStore.fontSettingStyle === 'multi'"
63+
:value="settingStore.globalFont.split(',').map(s => s.trim())"
64+
:on-update-value="(value: Array<string>) => settingStore.globalFont = value.join(', ')"
65+
:options="getOptions('globalFont')"
66+
class="set"
67+
filterable
68+
multiple
69+
tag
70+
/>
71+
<n-select
72+
v-else-if="settingStore.fontSettingStyle === 'single'"
4573
v-model:value="settingStore.globalFont"
4674
:options="getOptions('globalFont')"
4775
class="set"
@@ -54,7 +82,7 @@
5482
<n-h3 prefix="bar">桌面歌词</n-h3>
5583
<n-card
5684
class="set-item"
57-
:class="{ 'input-mode': settingStore.useCustomFont }"
85+
:class="{ 'input-mode': isInputMode }"
5886
>
5987
<div class="label">
6088
<div class="label-header">
@@ -82,15 +110,25 @@
82110
</div>
83111
<n-flex align="center">
84112
<s-input
85-
v-if="settingStore.useCustomFont"
113+
v-if="settingStore.fontSettingStyle === 'custom'"
86114
v-model:value="desktopLyricConfig.fontFamily"
87115
:update-value-on-input="false"
88116
placeholder="输入字体名称"
89117
class="set"
90118
@change="saveDesktopLyricConfig"
91119
/>
92120
<n-select
93-
v-else
121+
v-else-if="settingStore.fontSettingStyle === 'multi'"
122+
:value="desktopLyricConfig.fontFamily.split(',').map(s => s.trim())"
123+
:on-update-value="(value: Array<string>) => desktopLyricConfig.fontFamily = value.join(', ')"
124+
:options="getOptions('desktop')"
125+
class="set"
126+
filterable
127+
multiple
128+
tag
129+
/>
130+
<n-select
131+
v-else-if="settingStore.fontSettingStyle === 'single'"
94132
v-model:value="desktopLyricConfig.fontFamily"
95133
:options="getOptions('desktop')"
96134
class="set"
@@ -106,7 +144,7 @@
106144
v-for="font in lyricFontConfigs"
107145
:key="font.keySetting"
108146
class="set-item"
109-
:class="{ 'input-mode': settingStore.useCustomFont || !isElectron }"
147+
:class="{ 'input-mode': isInputMode }"
110148
>
111149
<div class="label">
112150
<div class="label-header">
@@ -129,14 +167,24 @@
129167
</div>
130168
<n-flex align="center">
131169
<s-input
132-
v-if="settingStore.useCustomFont || !isElectron"
170+
v-if="settingStore.fontSettingStyle === 'custom' || !isElectron"
133171
v-model:value="settingStore[font.keySetting]"
134172
:update-value-on-input="false"
135173
placeholder="输入字体名称"
136174
class="set"
137175
/>
138176
<n-select
139-
v-else
177+
v-else-if="settingStore.fontSettingStyle === 'multi'"
178+
:value="settingStore[font.keySetting].split(',').map(s => s.trim())"
179+
:on-update-value="(value: Array<string>) => settingStore[font.keySetting] = value.join(', ')"
180+
:options="getOptions(font.keySetting)"
181+
class="set"
182+
filterable
183+
multiple
184+
tag
185+
/>
186+
<n-select
187+
v-else-if="settingStore.fontSettingStyle === 'single'"
140188
v-model:value="settingStore[font.keySetting]"
141189
:options="getOptions(font.keySetting)"
142190
class="set"
@@ -165,6 +213,9 @@ const systemFonts = ref<SelectOption[]>([]);
165213
// 桌面歌词配置
166214
const desktopLyricConfig = reactive<LyricConfig>({ ...defaultDesktopLyricConfig });
167215
216+
// 是否为输入模式
217+
const isInputMode = computed(() => settingStore.fontSettingStyle !== "single" || !isElectron);
218+
168219
// 获取下拉选项
169220
const getOptions = (key: string) => {
170221
const isGlobal = key === "globalFont";

src/components/Setting/SettingItemRenderer.vue

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
class="set"
5454
:round="false"
5555
:disabled="isDisabled"
56-
:title="resolve(props.item.title)"
56+
:title="title"
5757
v-bind="item.componentProps"
5858
/>
5959

@@ -64,7 +64,7 @@
6464
:options="normalizedOptions"
6565
class="set"
6666
:disabled="isDisabled"
67-
:title="resolve(props.item.title)"
67+
:title="title"
6868
v-bind="item.componentProps"
6969
/>
7070

@@ -77,7 +77,7 @@
7777
:max="resolve(item.max)"
7878
:step="resolve(item.step)"
7979
:disabled="isDisabled"
80-
:title="resolve(props.item.title)"
80+
:title="title"
8181
v-bind="item.componentProps"
8282
>
8383
<template #prefix v-if="item.prefix">{{ resolve(item.prefix) }}</template>
@@ -93,7 +93,7 @@
9393
:type="item.componentProps?.type || 'text'"
9494
:show-password-on="item.componentProps?.showPasswordOn"
9595
:disabled="isDisabled"
96-
:title="resolve(props.item.title)"
96+
:title="title"
9797
v-bind="item.componentProps"
9898
>
9999
<template #prefix v-if="item.prefix">{{ resolve(item.prefix) }}</template>
@@ -111,7 +111,7 @@
111111
:marks="item.marks"
112112
:format-tooltip="item.formatTooltip"
113113
:disabled="isDisabled"
114-
:title="resolve(props.item.title)"
114+
:title="title"
115115
v-bind="item.componentProps"
116116
/>
117117

@@ -123,7 +123,7 @@
123123
secondary
124124
@click="handleAction"
125125
:disabled="isDisabled"
126-
:title="resolve(props.item.title)"
126+
:title="title"
127127
v-bind="item.componentProps"
128128
>
129129
{{ resolve(item.buttonLabel) || "配置" }}
@@ -137,7 +137,7 @@
137137
:show-alpha="item.componentProps?.showAlpha ?? false"
138138
:modes="item.componentProps?.modes ?? ['hex']"
139139
:disabled="isDisabled"
140-
:title="resolve(props.item.title)"
140+
:title="title"
141141
@complete="handleAction"
142142
/>
143143

@@ -195,38 +195,18 @@ const baseModelValue = computed({
195195
},
196196
});
197197
198-
// 基础禁用状态
199-
const baseDisabled = computed(() => {
200-
if (props.item.disabled === undefined) return false;
201-
if (typeof props.item.disabled === "function") return props.item.disabled();
202-
return toValue(props.item.disabled);
203-
});
204-
205198
// 强制显示条件判断
206199
const isForcedConditionMet = computed(() => {
207200
if (!props.item.forceIf) return false;
208-
const condition = props.item.forceIf.condition;
209-
if (typeof condition === "function") {
210-
return condition();
211-
}
212-
return unref(condition);
213-
});
214-
215-
// 强制显示的值
216-
const forcedValue = computed(() => {
217-
if (!props.item.forceIf) return undefined;
218-
const val = props.item.forceIf.forcedValue;
219-
if (typeof val === "function") {
220-
return (val as any)();
221-
}
222-
return unref(val);
201+
return toValue(props.item.forceIf.condition);
223202
});
224203
225204
// 最终使用的 modelValue
226205
const modelValue = computed({
227206
get: () => {
228207
if (isForcedConditionMet.value) {
229-
return forcedValue.value;
208+
const forcedValueRef = props.item.forceIf!.forcedValue;
209+
if (forcedValueRef !== undefined) return toValue(forcedValueRef);
230210
}
231211
return baseModelValue.value;
232212
},
@@ -239,10 +219,29 @@ const modelValue = computed({
239219
},
240220
});
241221
242-
// 最终使用的禁用状态
222+
// 禁用状态
243223
const isDisabled = computed(() => {
244224
if (isForcedConditionMet.value) return true;
245-
return baseDisabled.value;
225+
if (props.item.disabled === undefined) return false;
226+
return toValue(props.item.disabled);
227+
});
228+
229+
// 描述内容
230+
const descriptionContent = computed(() => {
231+
if (isForcedConditionMet.value) {
232+
const forcedDescriptionRef = props.item.forceIf!.forcedDescription;
233+
if (forcedDescriptionRef !== undefined) return toValue(forcedDescriptionRef);
234+
}
235+
return toValue(props.item.description);
236+
});
237+
238+
// 鼠标悬停提示
239+
const title = computed(() => {
240+
if (isForcedConditionMet.value) {
241+
const forcedTitleRef = props.item.forceIf!.forcedTitle;
242+
if (forcedTitleRef !== undefined) return toValue(forcedTitleRef);
243+
}
244+
return toValue(props.item.title);
246245
});
247246
248247
// 解析子项
@@ -262,32 +261,21 @@ const isChildrenExpanded = computed(() => {
262261
// 判断是否显示
263262
const isShow = (childItem: SettingItem) => {
264263
if (childItem.show === undefined) return true;
265-
if (typeof childItem.show === "function") return childItem.show();
266264
return toValue(childItem.show);
267265
};
268266
269267
// 判断额外按钮是否显示
270268
const isExtraButtonShow = (action: any) => {
271269
if (action.show === undefined) return true;
272-
if (typeof action.show === "function") return action.show();
273270
return toValue(action.show);
274271
};
275272
276273
// 规范化选项数据
277274
const normalizedOptions = computed(() => {
278275
if (!props.item.options) return [];
279-
if (typeof props.item.options === "function") return props.item.options();
280276
return toValue(props.item.options);
281277
});
282278
283-
// 解析描述内容
284-
const descriptionContent = computed(() => {
285-
if (isRef(props.item.description)) {
286-
return props.item.description.value;
287-
}
288-
return props.item.description;
289-
});
290-
291279
// 获取属性值
292280
const resolve = toValue;
293281

src/components/Setting/config/appearance.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,7 @@ export const useAppearanceSettings = (): SettingConfig => {
4949
key: "themeMode",
5050
label: "主题模式",
5151
type: "select",
52-
description: () =>
53-
statusStore.themeBackgroundMode === "image" ||
54-
statusStore.themeBackgroundMode === "video"
55-
? "请关闭自定义背景后调节"
56-
: "调整全局主题明暗模式",
52+
description: "调整全局主题明暗模式",
5753
options: [
5854
{ label: "跟随系统", value: "auto" },
5955
{ label: "浅色模式", value: "light" },
@@ -65,7 +61,8 @@ export const useAppearanceSettings = (): SettingConfig => {
6561
}),
6662
forceIf: {
6763
condition: () => statusStore.isCustomBackground,
68-
forcedValue: () => settingStore.themeMode,
64+
forcedValue: "auto",
65+
forcedDescription: "请关闭自定义背景后调节",
6966
},
7067
},
7168
{
@@ -371,24 +368,23 @@ export const useAppearanceSettings = (): SettingConfig => {
371368
forceIf: {
372369
condition: () => isLogin() !== 1,
373370
forcedValue: false,
371+
forcedTitle: "请先正常登录",
374372
},
375373
},
376374
{
377375
key: "showSpectrums",
378376
label: "音乐频谱",
379377
type: "switch",
380378
show: isElectron,
381-
description:
382-
settingStore.playbackEngine === "mpv"
383-
? "MPV 引擎暂不支持显示音乐频谱"
384-
: "开启音乐频谱会影响性能或增加内存占用,如遇问题请关闭",
379+
description: "开启音乐频谱会影响性能或增加内存占用,如遇问题请关闭",
385380
value: computed({
386381
get: () => settingStore.showSpectrums,
387382
set: (v) => (settingStore.showSpectrums = v),
388383
}),
389384
forceIf: {
390385
condition: () => settingStore.playbackEngine === "mpv",
391386
forcedValue: false,
387+
forcedDescription: "MPV 引擎暂不支持显示音乐频谱",
392388
},
393389
},
394390
],

src/components/Setting/config/local.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ export const useLocalSettings = (): SettingConfig => {
431431
label: "下载时另存逐字歌词文件",
432432
type: "switch",
433433
tags: [{ text: "Beta", type: "warning" }],
434-
description: "在有条件时保存独立的 YRC/TTML 逐字歌词文件(源文件仍内嵌LRC)",
434+
description: "在有条件时保存独立的 YRC/TTML 逐字歌词文件(源文件仍内嵌 LRC)",
435435
disabled: computed(() => !settingStore.downloadMeta || !settingStore.downloadLyric),
436436
value: computed({
437437
get: () => settingStore.downloadMakeYrc,

0 commit comments

Comments
 (0)