feat: ✨ 标题样式跟随主题，设置文本颜色会覆盖主题的标题颜色 #96

src/store/globalConfig.ts

@@ -18,7 +18,7 @@ export const useGlobalConfig = defineStore('global', {
                     cardColor: '#ff79c6',
                     cardWidth: 140,
                     cardHeight: 200,
-                    textColor: '#ffffff',
+                    textColor: '#00000000',
                     luckyCardColor: '#ECB1AC',
                     textSize: 30,
                     patternColor: '#1b66c9',
@@ -280,7 +280,7 @@ export const useGlobalConfig = defineStore('global', {
                     cardColor: '#ff79c6',
                     cardWidth: 140,
                     cardHeight: 200,
-                    textColor: '#ffffff',
+                    textColor: '#00000000',
                     luckyCardColor: '#ECB1AC',
                     textSize: 30,
                     patternColor: '#1b66c9',

src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue

@@ -83,6 +83,11 @@ const patternColorValue = defineModel<string>('patternColorValue')
       <div class="flex flex-col items-center max-w-xs gap-1 form-control">
         <label class="label">
           <span class="label-text">{{ t('table.textColor') }}</span>
+          <div class="tooltip" data-tip="设置文本颜色会覆盖标题样式">
+            <button class="btn btn-circle hover:bg-base-300">
+              ?
+            </button>
+          </div>
         </label>
         <ColorPicker v-model="textColorValue" v-model:pure-color="textColorValue" />
       </div>

src/views/Demo/index.vue

@@ -1,25 +1,29 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
-import { Switch } from '@/components/ui/switch'
-
-const checked = ref(true)
 </script>
 
 <template>
-  <fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
-    <legend class="fieldset-legend">
-      Login options
-    </legend>
-    <label class="label">
-      <input type="checkbox" :checked="checked" class="toggle border">
-      Remember me
-    </label>
-  </fieldset>
   <div>
-    <Switch class="cursor-pointer" />
+    <h2 class="text-3xl animate-pulse bg-linear-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
+      两京一十三省
+    </h2>
+
+    <h2>两京一十三省</h2>
+
+    <h2>两京一十三省</h2>
+
+    <h2>两京一十三省</h2>
+
+    <h2>两京一十三省</h2>
+
+    <h2>两京一十三省</h2>
+
+    <h2>两京一十三省</h2>
   </div>
 </template>
 
 <style lang='scss' scoped>
-
+.dark-title {
+  color: red;
+}
 </style>

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

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
+import type { CSSProperties } from 'vue'
 import { computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
-
 import { useRouter } from 'vue-router'
+import { rgbToHex } from '@/utils/color'
 
 interface Props {
   textSize: number
@@ -18,24 +19,21 @@ interface Props {
 const props = defineProps<Props>()
 const router = useRouter()
 const { tableData, textSize, textColor, topTitle, setDefaultPersonList, titleFont, titleFontSyncGlobal } = toRefs(props)
-
+const isTextColor = computed(() => {
+  return rgbToHex(textColor.value) !== '#00000000'
+})
 const titleStyle = computed(() => {
-  const baseStyle = {
+  const style: CSSProperties = {
     fontSize: `${textSize.value * 1.5}px`,
-    color: textColor.value,
+  }
+  if (!titleFontSyncGlobal.value) {
+    style.fontFamily = titleFont.value
+  }
+  if (isTextColor.value) {
+    style.color = textColor.value
   }
 
-  if (titleFontSyncGlobal.value) {
+  return style
-    return {
-      ...baseStyle,
-    }
-  }
-  else {
-    return {
-      ...baseStyle,
-      fontFamily: titleFont.value,
-    }
-  }
 })
 const { t } = useI18n()
 </script>
@@ -43,7 +41,8 @@ const { t } = useI18n()
 <template>
   <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"
+      class="pt-12 m-0 mb-12 tracking-wide text-center leading-12"
+      :class="{ 'animate-pulse bg-linear-to-r from-primary via-secondary to-accent bg-clip-text text-transparent': !isTextColor }"
       :style="titleStyle"
     >
       {{ topTitle }}