Merge pull request #4585 from Tinhone/improve-custom-font-family

[组件-自定义字体] feat: 改善组件代码和功能

registry/lib/components/style/custom-font-family/data.ts

@@ -0,0 +1,20 @@
+export const fontFamilyDefaultValue =
+  'Microsoft Yahei, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Malgun Gothic'
+
+export const coverOptionsName = [
+  { camel: 'coverOrnament', kebab: 'cover-ornament', display: '装扮字体' },
+  { camel: 'coverFansMedal', kebab: 'cover-fans-medal', display: '粉丝勋章字体' },
+  { camel: 'coverDanmaku', kebab: 'cover-danmaku', display: '弹幕字体' },
+  { camel: 'coverIconFont', kebab: 'cover-icon-font', display: '图标字体' },
+  { camel: 'coverColumn', kebab: 'cover-column', display: '专栏自定义字体' },
+  { camel: 'coverScore', kebab: 'cover-score', display: '评分字体' },
+]
+
+export const coverOptionsDefaultValue = {
+  coverOrnament: false,
+  coverFansMedal: false,
+  coverDanmaku: false,
+  coverIconFont: false,
+  coverColumn: false,
+  coverScore: false,
+}

registry/lib/components/style/custom-font-family/disable-title-punctuation-text-indent.scss

@@ -0,0 +1,26 @@
+$name: 'custom-font-family';
+
+html[#{$name}--options--disable-title-punctuation-text-indent='true']
+  :is(
+    p[title^='「'],
+    p[title^='『'],
+    p[title^='【'],
+    h1[title^='「'],
+    h1[title^='『'],
+    h1[title^='【'],
+    h3[title^='「'],
+    h3[title^='『'],
+    h3[title^='【'],
+    p[title^='～'],
+    h3[title^='～'],
+    p[title^='《'],
+    h3[title^='《'],
+    p[title^='“'],
+    h3[title^='“'],
+    p[title^='～'],
+    h3[title^='～'],
+    p[title^='《'],
+    h3[title^='《']
+  ) {
+  text-indent: initial !important;
+}

registry/lib/components/style/custom-font-family/extra-options/Entry.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="custom-font-family-extra-options-entry">
     <VButton @mouseover="loadPanel()" @click="togglePanelDisplay()">
-      字体设置<VIcon icon="right-arrow" :size="16"></VIcon>
+      更多选项<VIcon icon="right-arrow" :size="16"></VIcon>
     </VButton>
   </div>
 </template>

registry/lib/components/style/custom-font-family/extra-options/Panel.vue

@@ -8,18 +8,24 @@
     <template #input0>
       <TextArea v-model="inputFontFamily" />
     </template>
+
+    <template #input1>
+      <SwitchOptionsMin :options="switchOptionsComponentOptions"></SwitchOptionsMin>
+    </template>
   </ExtraOptionsPanel>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { TextArea } from '@/ui'
+import SwitchOptionsMin from './SwitchOptionsMin.vue'
+import { SwitchMetadataOption } from '@/components/switch-options'
 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 { fontFamilyDefaultValue, coverOptionsName, coverOptionsDefaultValue } from '../data'
 import { ExtraOptionsPanelInitData } from './extra-options-panel'
 
 const initData: ExtraOptionsPanelInitData = {
@@ -51,16 +57,43 @@ const initData: ExtraOptionsPanelInitData = {
         description: '输入需要设置的字体，不同字体之间必须以英文逗号分隔',
         inputClassNameSuffix: 'input-font-family',
       },
+      {
+        id: 1,
+        title: '覆盖选项',
+        description: '下面的元素使用了特殊字体，启用选项后可在对应的元素上应用组件提供的字体设置',
+        inputClassNameSuffix: 'cover-options',
+      },
     ],
   },
 }
 
+const switchOptionsComponentOptions: SwitchMetadataOption<string, string> = {
+  name: 'customFontFamilyCoverOptions',
+  switches: {},
+  radio: false,
+  dimAt: 'notChecked',
+  switchProps: {
+    checkedIcon: 'mdi-checkbox-marked-circle',
+    notCheckedIcon: 'mdi-checkbox-blank-circle-outline',
+  },
+  componentName: 'customFontFamily',
+  optionDisplayName: '自定义字体覆盖选项',
+}
+
+for (const coverOptionName of coverOptionsName) {
+  switchOptionsComponentOptions.switches[coverOptionName.camel] = {
+    displayName: coverOptionName.display,
+    defaultValue: coverOptionsDefaultValue[coverOptionName.camel],
+  }
+}
+
 const console = useScopedConsole('自定义字体')
 
 export default defineComponent({
   components: {
     ExtraOptionsPanel,
     TextArea,
+    SwitchOptionsMin,
   },
 
   data() {
@@ -70,6 +103,7 @@ export default defineComponent({
       initData,
       // 设置 inputFontFamily 初始值为组件 fontFamily 选项的值
       inputFontFamily: getComponentSettings('customFontFamily').options.fontFamily,
+      switchOptionsComponentOptions,
     }
   },
 
@@ -126,10 +160,18 @@ export default defineComponent({
     },
 
     resetOptions() {
+      // 重置字体选项
       getComponentSettings('customFontFamily').options.fontFamily = fontFamilyDefaultValue
       this.inputFontFamily = fontFamilyDefaultValue
-      Toast.success('字体设置面板中的所有选项已成功被重置为默认值', '自定义字体', 2000)
-      console.log('字体设置面板中的所有选项已成功被重置为默认值')
+
+      // 重置覆盖选项
+      for (const coverOptionName of coverOptionsName) {
+        const defaultValue = coverOptionsDefaultValue[coverOptionName.camel]
+        getComponentSettings('customFontFamily').options[coverOptionName.camel] = defaultValue
+      }
+
+      Toast.success('更多选项面板中的所有选项已成功被重置为默认值', '自定义字体', 2000)
+      console.log('更多选项面板中的所有选项已成功被重置为默认值')
     },
   },
 })

registry/lib/components/style/custom-font-family/extra-options/SwitchOptionsMin.vue

@@ -0,0 +1,115 @@
+<!-- 这个 Vue 组件是因为无法正常从 @/components/SwitchOptions.vue 导入 SwitchOptions 组件而新建的 -->
+
+<template>
+  <div class="switch-options-min">
+    <div class="switch-options-min-grid">
+      <component
+        :is="options.radio ? 'RadioButton' : 'CheckBox'"
+        v-for="name of Object.keys(options.switches)"
+        :key="name"
+        :class="{ dim: !(Number(componentOptions[name]) ^ Number(isDimAtChecked)) }"
+        v-bind="mergedSwitchProps"
+        :checked="componentOptions[name]"
+        @change="componentOptions[name] = $event"
+      >
+        <!-- dim 这里原来的写法在使用 export default defineComponent 的情况下会报错，虽然能运行，但还是改了改 -->
+        {{ options.switches[name].displayName }}
+      </component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { CheckBox, RadioButton } from '@/ui'
+import { getComponentSettings } from '@/core/settings'
+
+export default defineComponent({
+  name: 'SwitchOptionsMin',
+
+  components: {
+    CheckBox,
+    RadioButton,
+  },
+
+  props: {
+    options: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    const { componentName } = this.options
+    const componentOptions = getComponentSettings(componentName).options
+    const getIsDimAtChecked = () => {
+      if (this.options.dimAt === 'checked' || this.options.dimAt === undefined) {
+        return true
+      }
+      if (this.options.dimAt === 'notChecked') {
+        return false
+      }
+      return false
+    }
+    const isDimAtChecked = getIsDimAtChecked()
+
+    return {
+      componentOptions,
+      isDimAtChecked,
+    }
+  },
+
+  computed: {
+    mergedSwitchProps() {
+      return {
+        checkedIcon: 'mdi-eye-off-outline',
+        notCheckedIcon: 'mdi-eye-outline',
+        ...this.options.switchProps,
+      }
+    },
+  },
+
+  watch: {
+    options() {
+      this.updateColumnsCount()
+    },
+  },
+
+  mounted() {
+    this.updateColumnsCount()
+  },
+
+  methods: {
+    updateColumnsCount() {
+      const element = this.$el as HTMLElement
+      const columns = Math.ceil(Object.keys(this.options.switches).length / 12)
+      element.style.setProperty('--columns', columns.toString())
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+@import 'common';
+
+.switch-options-min {
+  position: relative;
+  --columns: 1;
+  width: 100%;
+
+  .switch-icon {
+    margin-right: 8px;
+    transform: scale(0.9);
+  }
+
+  .dim {
+    opacity: 0.5;
+  }
+
+  & > &-grid {
+    font-size: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 50%);
+  }
+}
+</style>

registry/lib/components/style/custom-font-family/index.md

@@ -2,6 +2,8 @@
 
 当组件被启用后，几乎所有的元素会立即应用组件提供的字体设置。
 
-而 `覆盖*` 选项相当于一个白名单，使用了特殊字体的元素会被加入其中。默认情况下这些元素不会应用组件提供的字体设置，只有在启用对应的 `覆盖*` 选项后才会应用。
-
-字体设置写法请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family)、默认设置与设置说明。
+选项说明:
+- `禁用标题标点符号缩进`: 在新版视频页中，推荐视频栏中的视频标题，如果首个字符是特定的标点符号，则文本会缩入左侧。这个选项可以禁用这种样式
+- `更多选项`:
+  - `自定义字体`: 设置自定义字体。写法请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family)、默认设置与设置说明。
+  - `覆盖选项`: 相当于一个白名单，使用了特殊字体的元素会被加入其中。默认情况下这些元素不会应用组件提供的字体设置，只有在启用对应的选项后才会应用。