mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
149 lines
4.2 KiB
Vue
149 lines
4.2 KiB
Vue
<template>
|
|
<ExtraOptionsPanel
|
|
ref="extraOptionsPanel"
|
|
class="custom-font-family-extra-options-panel"
|
|
:class="{ peek: isPeeking }"
|
|
:init-data="initData"
|
|
>
|
|
<template #input0>
|
|
<TextArea v-model="inputFontFamily" />
|
|
</template>
|
|
</ExtraOptionsPanel>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { TextArea } from '@/ui'
|
|
import ExtraOptionsPanel from './ExtraOptionsPanel.vue'
|
|
import { getComponentSettings } from '@/core/settings'
|
|
import { Toast } from '@/core/toast'
|
|
import { delay } from '@/core/utils'
|
|
import { useScopedConsole } from '@/core/utils/log'
|
|
import { fontFamilyDefaultValue } from '../font-family-default-value'
|
|
import { ExtraOptionsPanelInitData } from './extra-options-panel'
|
|
|
|
const initData: ExtraOptionsPanelInitData = {
|
|
header: {
|
|
title: {
|
|
text: '自定义字体',
|
|
icon: 'mdi-format-font',
|
|
},
|
|
actions: [
|
|
{
|
|
id: 0,
|
|
title: '重置面板中的所有选项为默认值',
|
|
icon: 'mdi-cog-sync-outline',
|
|
actionClassNameSuffix: 'reset',
|
|
},
|
|
{
|
|
id: 1,
|
|
title: '透视',
|
|
icon: 'mdi-eye-outline',
|
|
actionClassNameSuffix: 'peek',
|
|
},
|
|
],
|
|
},
|
|
content: {
|
|
options: [
|
|
{
|
|
id: 0,
|
|
title: '自定义字体',
|
|
description: '输入需要设置的字体,不同字体之间必须以英文逗号分隔',
|
|
inputClassNameSuffix: 'input-font-family',
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
const console = useScopedConsole('自定义字体')
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ExtraOptionsPanel,
|
|
TextArea,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isPeeking: false,
|
|
isMouseOverPeekIcon: false,
|
|
initData,
|
|
// 设置 inputFontFamily 初始值为组件 fontFamily 选项的值
|
|
inputFontFamily: getComponentSettings('customFontFamily').options.fontFamily,
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
// 监听 inputFontFamily 修改动作,实时修改组件 fontFamily 选项为 inputFontFamily 修改后的新值,并拥有 1000ms 防抖
|
|
inputFontFamily: lodash.debounce(value => {
|
|
getComponentSettings('customFontFamily').options.fontFamily = value
|
|
}, 1000),
|
|
|
|
async isMouseOverPeekIcon(value: boolean) {
|
|
if (!value) {
|
|
this.isPeeking = false
|
|
return
|
|
}
|
|
if (value) {
|
|
await delay(200)
|
|
}
|
|
if (this.isMouseOverPeekIcon) {
|
|
this.isPeeking = true
|
|
}
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
// 当在 v-for 中使用模板引用时,相应的引用中包含的值是一个数组
|
|
// 但 ref 数组并不保证与源数组相同的顺序,所以统一命名且不加用以区分的后缀,仅靠数组选择元素是不现实的
|
|
// https://cn.vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for
|
|
|
|
const action0Reset = this.$refs.extraOptionsPanel.$refs.action0[0].$el as HTMLElement
|
|
action0Reset.addEventListener('click', this.confirmResetOptions)
|
|
|
|
const action1Peek = this.$refs.extraOptionsPanel.$refs.action1[0].$el as HTMLElement
|
|
action1Peek.addEventListener('mouseover', this.setIsMouseOverPeekIconToTrue)
|
|
action1Peek.addEventListener('mouseout', this.setIsMouseOverPeekIconToFalse)
|
|
},
|
|
|
|
methods: {
|
|
toggleDisplay() {
|
|
this.$refs.extraOptionsPanel.popupOpen = !this.$refs.extraOptionsPanel.popupOpen
|
|
},
|
|
|
|
setIsMouseOverPeekIconToTrue() {
|
|
this.isMouseOverPeekIcon = true
|
|
},
|
|
|
|
setIsMouseOverPeekIconToFalse() {
|
|
this.isMouseOverPeekIcon = false
|
|
},
|
|
|
|
confirmResetOptions() {
|
|
if (confirm('确定将面板中的所有选项重置为默认值吗?')) {
|
|
this.resetOptions()
|
|
}
|
|
},
|
|
|
|
resetOptions() {
|
|
getComponentSettings('customFontFamily').options.fontFamily = fontFamilyDefaultValue
|
|
this.inputFontFamily = fontFamilyDefaultValue
|
|
Toast.success('字体设置面板中的所有选项已成功被重置为默认值', '自定义字体', 2000)
|
|
console.log('字体设置面板中的所有选项已成功被重置为默认值')
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.custom-font-family-extra-options-panel {
|
|
&.peek {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
> .be-eop-content > .be-eop-c-option > .be-eop-c-o-input.input-input-font-family > .be-text-area {
|
|
min-height: 160px;
|
|
}
|
|
}
|
|
</style>
|