Optimize style of select

Author: sheepzh

src/app/components/option/components/popup.ts

@@ -9,6 +9,7 @@ import { unref, UnwrapRef } from "vue"
 
 import { ElDivider, ElInputNumber, ElOption, ElSelect, ElSwitch } from "element-plus"
 import { t } from "@app/locale"
+import { I18nKey, t as t_ } from "@i18n"
 import { defineComponent, h, reactive } from "vue"
 import optionService from "@service/option-service"
 import { renderOptionItem, tagText } from "../common"
@@ -18,6 +19,36 @@ import { ALL_DIMENSIONS } from "@util/stat"
 import { locale } from "@i18n"
 import { rotate } from "@util/array"
 
+type LocaleStyle = {
+    durationSelectWidth: number
+    typeSelectWidth: number
+}
+
+const STYLES: Messages<LocaleStyle> = {
+    zh_CN: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 80,
+    },
+    en: {
+        typeSelectWidth: 115,
+        durationSelectWidth: 110
+    },
+    ja: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 105,
+    },
+    pt_PT: {
+        typeSelectWidth: 155,
+        durationSelectWidth: 120,
+    },
+    zh_TW: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 80,
+    },
+}
+
+const tStyle = (key: I18nKey<LocaleStyle>) => t_(STYLES, { key })
+
 const mergeDomain = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSwitch, {
     modelValue: option.defaultMergeDomain,
     onChange: (newVal: boolean) => {
@@ -41,7 +72,7 @@ const typeOptions = () => ALL_DIMENSIONS.map(item => h(ElOption, { value: item,
 const typeSelect = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSelect, {
     modelValue: option.defaultType,
     size: 'small',
-    style: { width: '120px' },
+    style: { width: `${tStyle(m => m.typeSelectWidth)}px` },
     onChange: (val: timer.stat.Dimension) => {
         option.defaultType = val
         optionService.setPopupOption(unref(option))
@@ -52,7 +83,7 @@ const durationOptions = () => ALL_POPUP_DURATION.map(item => h(ElOption, { value
 const durationSelect = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSelect, {
     modelValue: option.defaultDuration,
     size: 'small',
-    style: { width: t(msg => msg.option.popup.durationWidth) },
+    style: { width: `${tStyle(m => m.durationSelectWidth)}px` },
     onChange: (val: PopupDuration) => {
         option.defaultDuration = val
         optionService.setPopupOption(unref(option))

src/i18n/message/app/option-resource.json

@@ -8,7 +8,6 @@
             "defaultMergeDomain": "{input} 打开时合并子域名",
             "defaultDisplay": "打开时显示 {duration} {type}",
             "displaySiteName": "{input}  显示时是否使用 {siteName} 来代替域名",
-            "durationWidth": "80px",
             "weekStart": "每周的第一天 {input}",
             "weekStartAsNormal": "按照惯例"
         },
@@ -107,7 +106,6 @@
             "defaultMergeDomain": "{input} 打開時合併子域名",
             "defaultDisplay": "打開時顯示 {duration} {type}",
             "displaySiteName": "{input}  顯示時是否使用 {siteName} 來代替域名",
-            "durationWidth": "80px",
             "weekStart": "每週的第一天 {input}",
             "weekStartAsNormal": "按照慣例"
         },
@@ -193,7 +191,6 @@
             "defaultMergeDomain": "{input} Whether to merge subdomains on open",
             "defaultDisplay": "Show {duration} {type} on open",
             "displaySiteName": "{input}  Whether to display {siteName} instead of URL",
-            "durationWidth": "110px",
             "weekStart": "The first day for each week {input}",
             "weekStartAsNormal": "As Normal"
         },
@@ -293,7 +290,6 @@
             "defaultMergeDomain": "{input} オープン時にサブドメインをマージ",
             "defaultDisplay": "開くと {duration} {type} が表示されます",
             "displaySiteName": "{input}  ホストの代わりに {siteName} を表示するかどうか",
-            "durationWidth": "100px",
             "weekStart": "週の最初の日 {input}",
             "weekStartAsNormal": "いつものように"
         },

src/i18n/message/app/option.ts

@@ -16,7 +16,6 @@ export type OptionMessage = {
         defaultMergeDomain: string
         defaultDisplay: string
         displaySiteName: string
-        durationWidth: string
         weekStart: string
         weekStartAsNormal: string
     }