feat: semi

Author: sheepzh

src/pages/app/components/HelpUs/MemberList.tsx

@@ -9,8 +9,7 @@ import { getMembers } from "@api/crowdin"
 import { t } from "@app/locale"
 import { useRequest } from "@hooks"
 import Box from "@pages/components/Box"
-import Flex from "@pages/components/Flex"
-import { ElDivider } from "element-plus"
+import { ElDivider, ElSpace } from "element-plus"
 import { defineComponent } from "vue"
 
 const _default = defineComponent(() => {
@@ -21,10 +20,7 @@ const _default = defineComponent(() => {
     return () => (
         <Box marginTop={10}>
             <ElDivider>{t(msg => msg.helpUs.contributors)}</ElDivider>
-            <Flex
-                wrap gap={15} justify="space-around"
-                marginInline="auto" paddingBlock={5}
-            >
+            <ElSpace wrap>
                 {list.value?.map(({ avatarUrl, username }, idx, arr) => (
                     <a
                         href={`https://crowdin.com/profile/${username}`}
@@ -39,7 +35,7 @@ const _default = defineComponent(() => {
                         />
                     </a>
                 ))}
-            </Flex>
+            </ElSpace>
         </Box>
     )
 })

src/pages/app/components/Option/components/LimitOption/index.tsx

@@ -7,6 +7,7 @@
 import { t } from "@app/locale"
 import { processVerification } from "@app/util/limit"
 import { Edit } from "@element-plus/icons-vue"
+import { locale } from '@i18n'
 import { defaultDailyLimit } from "@util/constant/option"
 import { ElButton, ElInput, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
 import { defineComponent, type StyleValue } from "vue"
@@ -61,6 +62,13 @@ const confirm4Strict = async (): Promise<void> => {
     })
 }
 
+const LEVEL_SELECT_WIDTH: Messages<number> = {
+    en: 330,
+    uk: 330,
+    zh_CN: 210,
+    zh_TW: 210,
+}
+
 const _default = defineComponent((_, ctx) => {
     const { option } = useOption<timer.option.LimitOption>({ defaultValue: defaultDailyLimit, copy })
     const { verified, verify } = useVerify(option)
@@ -118,12 +126,12 @@ const _default = defineComponent((_, ctx) => {
         />
         <OptionItem
             label={msg => msg.option.dailyLimit.level.label}
-            defaultValue={t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel])}
+            defaultValue={msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel]}
         >
             <ElSelect
                 modelValue={option.limitLevel}
                 size="small"
-                class='option-daily-limit-level-select'
+                style={{ '--el-select-width': `${LEVEL_SELECT_WIDTH[locale] ?? 370}px` }}
                 onChange={handleLevelChange}
             >
                 {ALL_LEVEL.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level[item])} />)}

src/pages/app/components/Option/components/LimitOption/limit-option.sass

@@ -5,15 +5,3 @@
             display: none
         .el-message-box__message
             flex: 1
-
-.option-daily-limit-level-select>.el-select__wrapper
-    width: 100% !important
-
-.option-daily-limit-level-select
-    width: 370px !important
-html[data-locale="en"],html[data-locale="uk"]
-    .option-daily-limit-level-select
-        width: 330px !important
-html[data-locale="zh_CN"],html[data-locale="zh_TW"]
-    .option-daily-limit-level-select
-        width: 210px !important

src/pages/app/components/Option/style.sass

@@ -42,7 +42,6 @@
                 display: inline-flex
                 height: 28px
                 min-width: 120px
-                width: 120px
                 .el-select__wrapper
                     width: 100%
             .el-date-editor--time

src/pages/app/components/RuleMerge/ItemList.tsx

@@ -8,8 +8,7 @@
 import { t } from "@app/locale"
 import mergeRuleDatabase from "@db/merge-rule-database"
 import { useManualRequest, useRequest } from "@hooks"
-import Flex from "@pages/components/Flex"
-import { ElMessage, ElMessageBox } from "element-plus"
+import { ElMessage, ElMessageBox, ElSpace } from "element-plus"
 import { defineComponent, ref } from "vue"
 import AddButton from './components/AddButton'
 import Item, { type ItemInstance } from './components/Item'
@@ -70,7 +69,7 @@ const _default = defineComponent(() => {
     }
 
     return () => (
-        <Flex gap={10} wrap justify="space-between">
+        <ElSpace size="small">
             {items.value?.map((item, idx) =>
                 <Item
                     ref={() => itemRefs.value[idx]}
@@ -81,7 +80,7 @@ const _default = defineComponent(() => {
                 />
             )}
             <AddButton onSave={handleAdd} />
-        </Flex>
+        </ElSpace>
     )
 })
 

src/pages/app/components/Whitelist/WhitePanel/index.tsx

@@ -5,9 +5,8 @@
  * https://opensource.org/licenses/MIT
  */
 import { t } from "@app/locale"
-import Flex from "@pages/components/Flex"
 import whitelistService from "@service/whitelist/service"
-import { ElMessage, ElMessageBox } from "element-plus"
+import { ElMessage, ElMessageBox, ElSpace } from "element-plus"
 import { defineComponent, onBeforeMount, reactive } from "vue"
 import AddButton from './AddButton'
 import WhiteItem from './WhiteItem'
@@ -64,7 +63,7 @@ const _default = defineComponent(() => {
     }
 
     return () => (
-        <Flex gap={10} wrap justify="space-between">
+        <ElSpace size="small">
             {whitelist.map((white, index) => (
                 <WhiteItem
                     white={white}
@@ -73,7 +72,7 @@ const _default = defineComponent(() => {
                 />
             ))}
             <AddButton onSave={handleAdd} />
-        </Flex>
+        </ElSpace>
     )
 })