更新字体设置,支持最多设置两种字体,并调整选择组件宽度

This commit is contained in:
lyswhut
2025-11-23 10:20:27 +08:00
parent 2bd54673de
commit be4bca2c15
3 changed files with 19 additions and 3 deletions

View File

@@ -22,6 +22,7 @@
- 调换「歌词翻译」与「歌词罗马音」的位置,现在歌词罗马音在歌词翻译的上方展示
*若你想要恢复以前的行为,可以开启「调换歌词翻译与歌词罗马音位置」选项*
- 更新代理配置规则,现在不启用代理时,图片、音频加载将不再走系统代理 (#2382 @Folltoshe)
- 字体设置可以最多设置两种字体([any-listen#82](https://github.com/any-listen/any-listen/issues/82)
### 其他

View File

@@ -120,7 +120,7 @@ export default {
display: inline-block;
font-size: 12px;
position: relative;
width: 300px;
width: var(--selection-width, 300px);
&.active {
.label {

View File

@@ -68,8 +68,10 @@ dd
dd
h3#basic_font {{ $t('setting__basic_font') }}
div
base-selection.gap-teft(:list="fontList" :model-value="appSetting['common.font']" item-key="id" item-name="label" @update:model-value="updateSetting({'common.font': $event})")
div(style="--selection-width: 12rem;")
base-selection.gap-left(:list="fontList" :model-value="fonts[0]" item-key="id" item-name="label" @update:model-value="updateFonts($event, fonts[1])")
base-selection.gap-left(v-if="fonts[0]" :list="fontList" :model-value="fonts[1]" item-key="id" item-name="label" @update:model-value="updateFonts(fonts[0], $event)")
//- base-selection.gap-teft(:list="fontList" :model-value="appSetting['common.font']" item-key="id" item-name="label" @update:model-value="updateSetting({'common.font': $event})")
dd
h3#basic_lang {{ $t('setting__basic_lang') }}
@@ -300,6 +302,17 @@ export default {
systemFontList.value = fonts.map(f => ({ id: f, label: f.replace(/(^"|"$)/g, '') }))
})
const fonts = computed(() => {
if (!appSetting['common.font']) return ['', '']
let [f1 = '', f2 = ''] = appSetting['common.font'].split(',')
return [f1.trim(), f2.trim()]
})
const updateFonts = (font1, font2) => {
let font = []
if (font1) font.push(font1)
if (font2) font.push(font2)
updateSetting({ 'common.font': font.join(', ') })
}
const fontSizeList = computed(() => {
return [
{ id: 14, label: t('setting__basic_font_size_14px') },
@@ -319,6 +332,8 @@ export default {
autoTheme,
showAllTheme,
themeList,
fonts,
updateFonts,
// currentStting,
// themes,
// themeClassName,