feat: settings panel menu i18n

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -17,7 +17,6 @@ import Background from './components/Background.vue'
 // 导入设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
@@ -35,9 +34,6 @@ const handleRecover = () => {
 const handelCloseSettingsPanel = () => {
   emits('close', false)
 }
-
-// menu 被激活后的样式
-const activeClass = computed(() => (isShowPageWidth.value ? 'active' : ''))
 </script>
 
 <template>
@@ -61,13 +57,13 @@ const activeClass = computed(() => (isShowPageWidth.value ? 'active' : ''))
             :class="isShowPageWidth ? 'active' : ''"
             @click="isShowPageWidth = true"
           >
-            页面宽度
+            {{ $tm('header.settings.width') }}
           </span>
           <span
             :class="isShowPageWidth ? '' : 'active'"
             @click="isShowPageWidth = false"
           >
-            字体设置
+            {{ $tm('header.settings.font') }}
           </span>
         </div>
 
@@ -164,6 +160,7 @@ const activeClass = computed(() => (isShowPageWidth.value ? 'active' : ''))
       font-size: 15px;
       justify-content: center;
       color: var(--kungalgame-blue-4);
+      transition: all 0.2s;
       &:nth-child(1) {
         border-right: 1px solid var(--kungalgame-blue-4);
       }

src/components/setting-panel/components/Font.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 // 全局消息组件（顶部）
 import message from '@/components/alert/Message'
@@ -26,15 +26,17 @@ const handleSetFont = () => {
   <!-- 设置某些页面的宽度 -->
   <div class="font">
     <div class="title">
-      <span>字体设置</span>
-      <span v-if="!showKUNGalgameFontStyle">默认</span>
-      <span v-else-if="showKUNGalgameFontStyle">
+      <span>{{ $tm('header.settings.font') }}</span>
+      <span v-if="showKUNGalgameFontStyle === 'system-ui'">
+        {{ $tm('header.settings.default') }}
+      </span>
+      <span v-else-if="showKUNGalgameFontStyle !== 'system-ui'">
         {{ showKUNGalgameFontStyle }}
       </span>
     </div>
     <div class="font-input">
       <input
-        placeholder="请在这里输入字体的名字"
+        :placeholder="`${$tm('header.settings.fontInput')}`"
         type="text"
         v-model="font"
         required

src/language/en.ts

@@ -10,6 +10,9 @@ export default {
       name: 'Settings',
       mode: 'Mode',
       language: 'Language',
+      font: 'Font Style',
+      default: 'System Default',
+      fontInput: 'Input font name here',
       width: 'Page Width',
       background: 'Background Setting',
       preset: 'Use our preset background',

src/language/zh.ts

@@ -10,7 +10,10 @@ export default {
       name: '设置面板',
       mode: '模式切换',
       language: '网站语言设置',
-      width: '页面宽度设置',
+      font: '字体样式',
+      default: '系统默认',
+      fontInput: '请在这里输入字体的名字',
+      width: '页面宽度',
       background: '背景设置',
       preset: '点击使用我们预设的背景',
       custom: '自定义背景',

src/store/modules/settings.ts

@@ -40,7 +40,7 @@ export const useKUNGalgameSettingsStore = defineStore({
       Technique: 90,
       ThanksList: 90,
     },
-    showKUNGalgameFontStyle: '',
+    showKUNGalgameFontStyle: 'system-ui',
     showKUNGalgameBackground: 'none',
     showKUNGalgameCustomBackground: '',
 
@@ -61,7 +61,7 @@ export const useKUNGalgameSettingsStore = defineStore({
     setKUNGalgameSettingsRecover() {
       this.$reset()
       this.setKUNGalgameTheme('')
-      this.setKUNGalgameFontStyle('')
+      this.setKUNGalgameFontStyle('system-ui')
     },
   },
 })

src/styles/reset.css

@@ -23,7 +23,8 @@
   scrollbar-width: none; /* Firefox 64+ */
 }
 
-/* 这些元素默认不会继承字体，字体设置会出问题 */
-button {
+/* button, input, select, textarea 元素默认不会继承字体，字体设置会出问题 */
+button,
+select {
   font-family: inherit;
 }