feat: select of fonts

package.json

@@ -27,6 +27,7 @@
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "pretty-bytes": "^6.1.1",
+    "subsetted-fonts": "^1.0.4",
     "theme-change": "^2.5.0",
     "uuid": "^11.0.3",
     "vite-plugin-pwa": "^0.21.1",

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { theme } from './store/settings'
+import { computed, onMounted, ref } from 'vue'
+import { FONTS } from './config'
+import { font, theme } from './store/settings'
 import { activeBackend } from './store/setup'
 import Home from './views/HomePage.vue'
 import SetupPage from './views/SetupPage.vue'
@@ -14,12 +15,19 @@ onMounted(() => {
     metaThemeColor.setAttribute('content', themeColor)
   }
 })
+
+const fontClassMap = {
+  [FONTS.MI_SANS]: 'font-MiSans',
+  [FONTS.SARASA_UI]: 'font-SarasaUI',
+  [FONTS.PING_FANG]: 'font-PingFang',
+}
+const fontClassName = computed(() => fontClassMap[font.value])
 </script>
 
 <template>
   <div
     ref="app"
-    class="font-twemoji flex h-dvh w-screen overflow-x-hidden bg-base-100"
+    :class="`flex h-dvh w-screen overflow-x-hidden bg-base-100 ${fontClassName}`"
     :data-theme="theme"
   >
     <SetupPage v-if="!activeBackend"></SetupPage>

src/assets/main.css

@@ -6,7 +6,3 @@
   font-family: 'NotoEmoji';
   src: url('./NotoColorEmoji-flagsonly.ttf') format('truetype');
 }
-
-:root {
-  font-family: 'MiSans', 'NotoEmoji', 'system-ui';
-}

src/config/index.ts

@@ -4,6 +4,12 @@ export enum LANG {
   ZH_CN = 'zh-CN',
 }
 
+export enum FONTS {
+  MI_SANS = 'MiSans',
+  SARASA_UI = 'SarasaUi',
+  PING_FANG = 'PingFang',
+}
+
 export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Details = 'details',
   Close = 'close',

src/i18n/en.ts

@@ -92,6 +92,7 @@ export default {
     'Quick filtering allows one-click exclusion of connections matching proxy chains, host, or destination IPs using regular expressions.',
   lowLatencyDesc: 'Yellow threshold',
   mediumLatencyDesc: 'Red threshold',
+  fonts: 'Fonts',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }

src/i18n/zh.ts

@@ -91,6 +91,7 @@ export default {
   quickFilterTip: '快速过滤使用正则表达式进行匹配，支持一键排除符合代理链、主机或目标 IP 的连接。',
   lowLatencyDesc: '黄色的阈值',
   mediumLatencyDesc: '红色的阈值',
+  fonts: '字体',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }

src/main.ts

@@ -1,8 +1,9 @@
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import 'misans/lib/Normal/MiSans-Bold.min.css'
-import 'misans/lib/Normal/MiSans-Medium.min.css'
+import 'subsetted-fonts/MiSans-VF/MiSans-VF.css'
+import 'subsetted-fonts/PingFangSC-Regular/PingFangSC-Regular.css'
+import 'subsetted-fonts/SarasaUiSC-Regular/SarasaUiSC-Regular.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/main.css'

src/store/settings.ts

@@ -1,10 +1,17 @@
-import { CONNECTIONS_TABLE_ACCESSOR_KEY, LANG, PROXY_PREVIEW_TYPE, PROXY_SORT_TYPE } from '@/config'
+import {
+  CONNECTIONS_TABLE_ACCESSOR_KEY,
+  FONTS,
+  LANG,
+  PROXY_PREVIEW_TYPE,
+  PROXY_SORT_TYPE,
+} from '@/config'
 import { useStorage } from '@vueuse/core'
 
 // global
 export const theme = useStorage<string>('config/theme', 'default')
 export const language = useStorage<LANG>('config/language', LANG.EN_US)
 export const isSiderbarCollapsed = useStorage('config/is-sidebar-collapsed', true)
+export const font = useStorage<FONTS>('config/font', FONTS.MI_SANS)
 
 // proxies
 export const showGlobalProxy = useStorage('config/show-global-proxy', true)

src/views/SettingsPage.vue

@@ -48,6 +48,20 @@
             />
           </select>
         </div>
+        <div class="flex items-center gap-2">
+          {{ $t('fonts') }}:
+          <select
+            class="select select-bordered select-sm w-48"
+            v-model="font"
+          >
+            <option
+              v-for="opt in Object.values(FONTS)"
+              :key="opt"
+              :value="opt"
+              :label="opt"
+            />
+          </select>
+        </div>
         <div class="grid max-w-screen-md grid-cols-2 gap-2 sm:grid-cols-4">
           <template v-if="!isSingBox">
             <button
@@ -264,12 +278,13 @@ import {
 import BackendSwitch from '@/components/settings/BackendSwitch.vue'
 import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
 import TableSettings from '@/components/settings/TableSettings.vue'
-import { LANG, PROXY_PREVIEW_TYPE } from '@/config'
+import { FONTS, LANG, PROXY_PREVIEW_TYPE } from '@/config'
 import { i18n } from '@/i18n'
 import { configs, updateConfigs } from '@/store/config'
 import {
   automaticDisconnection,
   compactConnectionCard,
+  font,
   language,
   lowLatency,
   mediumLatency,

tailwind.config.ts

@@ -14,7 +14,14 @@ export default {
       'xl': '1280px',
       '2xl': '1536px',
       '3xl': '1800px',
-    }
+    },
+    extend: {
+      fontFamily: {
+        MiSans: ['MiSans-VF', 'NotoEmoji', 'system-ui'],
+        SarasaUI: ['SarasaUiSC-Regular', 'NotoEmoji', 'system-ui'],
+        PingFang: ['PingFangSC-Regular', 'NotoEmoji', 'system-ui'],
+      },
+    },
   },
   daisyui: {
     themes: true,