From 55236dac98cae9799b8ab5167813291ff979149d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 30 Dec 2022 04:08:50 +0800
Subject: [PATCH] feat(settings): show default font size

---
 components/settings/SettingsFontSize.vue | 3 ++-
 constants/index.ts                       | 1 +
 locales/en-GB.json                       | 1 +
 locales/en-US.json                       | 1 +
 locales/zh-CN.json                       | 1 +
 plugins/setup-font-size.ts               | 9 ++++-----
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index a6dfd711..17419f09 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { DEFAULT_FONT_SIZE } from '~/constants'
 import type { FontSize } from '~/types'
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
@@ -8,7 +9,7 @@ const fontSize = useFontSizeRef()
 <template>
   <select v-model="fontSize">
     <option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
-      {{ size }}
+      {{ `${size}${size === DEFAULT_FONT_SIZE ? $t('settings.interface.default') : ''}` }}
     </option>
   </select>
 </template>
diff --git a/constants/index.ts b/constants/index.ts
index 2b6944cc..becf0d0d 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -2,6 +2,7 @@ export const APP_NAME = 'Elk'
 
 export const DEFAULT_POST_CHARS_LIMIT = 500
 export const DEFAULT_SERVER = 'mas.to'
+export const DEFAULT_FONT_SIZE = 'md'
 
 export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 0da84271..64278932 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "Color Mode",
       "dark_mode": "Dark Mode",
+      "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light Mode"
diff --git a/locales/en-US.json b/locales/en-US.json
index 4a69aa64..ece788ea 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "Color Mode",
       "dark_mode": "Dark Mode",
+      "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light Mode"
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 73a45d9f..265dfbfb 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "颜色",
       "dark_mode": "暗色模式",
+      "default": "（默认）",
       "font_size": "字号",
       "label": "外观",
       "light_mode": "亮色模式"
diff --git a/plugins/setup-font-size.ts b/plugins/setup-font-size.ts
index a25347e7..0819506a 100644
--- a/plugins/setup-font-size.ts
+++ b/plugins/setup-font-size.ts
@@ -1,23 +1,22 @@
 import type { FontSize } from '~/types'
 import { InjectionKeyFontSize } from '~/constants/symbols'
-import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE } from '~/constants'
+import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE, DEFAULT_FONT_SIZE } from '~/constants'
 import { fontSizeMap } from '~/constants/options'
 
 export default defineNuxtPlugin((nuxt) => {
-  const DEFAULT = 'md'
-  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT, maxAge: COOKIE_MAX_AGE })
+  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT_FONT_SIZE, maxAge: COOKIE_MAX_AGE })
   nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
 
   if (!process.server) {
     watchEffect(() => {
-      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT])
+      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE])
     })
   }
   else {
     useHead({
       style: [
         {
-          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT]}; }`,
+          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE]}; }`,
         },
       ],
     })