feat: 设置标题字体与全局字体同步 #96

src/views/Home/components/HeaderTitle/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useRouter } from 'vue-router'
@@ -11,11 +11,32 @@ interface Props {
   tableData: any[]
   setDefaultPersonList: () => void
   isInitialDone: boolean
+  titleFont: string
+  titleFontSyncGlobal: boolean
 }
 
 const props = defineProps<Props>()
 const router = useRouter()
-const { tableData, textSize, textColor, topTitle, setDefaultPersonList } = toRefs(props)
+const { tableData, textSize, textColor, topTitle, setDefaultPersonList, titleFont, titleFontSyncGlobal } = toRefs(props)
+
+const titleStyle = computed(() => {
+  const baseStyle = {
+    fontSize: `${textSize.value * 1.5}px`,
+    color: textColor.value,
+  }
+
+  if (titleFontSyncGlobal.value) {
+    return {
+      ...baseStyle,
+    }
+  }
+  else {
+    return {
+      ...baseStyle,
+      fontFamily: titleFont.value,
+    }
+  }
+})
 const { t } = useI18n()
 </script>
 
@@ -23,7 +44,7 @@ const { t } = useI18n()
   <div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
     <h2
       class="pt-12 m-0 mb-12 tracking-wide text-center leading-12 header-title"
-      :style="{ fontSize: `${textSize * 1.5}px`, color: textColor }"
+      :style="titleStyle"
     >
       {{ topTitle }}
     </h2>

src/views/Home/index.vue

@@ -9,7 +9,7 @@ import { useViewModel } from './useViewModel'
 import 'vue-toast-notification/dist/theme-sugar.css'
 
 const viewModel = useViewModel()
-const { setDefaultPersonList, tableData, currentStatus, enterLottery, stopLottery, containerRef, startLottery, continueLottery, quitLottery, isInitialDone } = viewModel
+const { setDefaultPersonList, tableData, currentStatus, enterLottery, stopLottery, containerRef, startLottery, continueLottery, quitLottery, isInitialDone, titleFont, titleFontSyncGlobal } = viewModel
 const globalConfig = useStore().globalConfig
 
 const { getTopTitle: topTitle, getTextColor: textColor, getTextSize: textSize, getBackground: homeBackground } = storeToRefs(globalConfig)
@@ -23,6 +23,8 @@ const { getTopTitle: topTitle, getTextColor: textColor, getTextSize: textSize, g
     :top-title="topTitle"
     :set-default-person-list="setDefaultPersonList"
     :is-initial-done="isInitialDone"
+    :title-font="titleFont"
+    :title-font-sync-global="titleFontSyncGlobal"
   />
   <div id="container" ref="containerRef" class="3dContainer">
     <OptionButton

src/views/Home/useViewModel.ts

@@ -26,7 +26,7 @@ export function useViewModel() {
         getNotThisPrizePersonList: notThisPrizePersonList,
     } = storeToRefs(personConfig)
     const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
-    const { getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
+    const { getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar, getTitleFont: titleFont, getTitleFontSyncGlobal: titleFontSyncGlobal } = storeToRefs(globalConfig)
     // three初始值
     const ballRotationY = ref(0)
     const containerRef = ref<HTMLElement>()
@@ -636,5 +636,7 @@ export function useViewModel() {
         tableData,
         currentStatus,
         isInitialDone,
+        titleFont,
+        titleFontSyncGlobal,
     }
 }