Support Arabic

Author: sheepzh

package.json

@@ -27,13 +27,13 @@
         "@babel/plugin-transform-modules-commonjs": "^7.25.7",
         "@babel/preset-env": "^7.25.8",
         "@crowdin/crowdin-api-client": "^1.37.1",
-        "@types/chrome": "0.0.277",
+        "@types/chrome": "0.0.278",
         "@types/copy-webpack-plugin": "^10.1.0",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^4.9.22",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.13",
-        "@types/node": "^22.7.5",
+        "@types/node": "^22.7.6",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -46,21 +46,21 @@
         "eslint": "^9.12.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
-        "html-webpack-plugin": "^5.6.0",
+        "html-webpack-plugin": "^5.6.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "mini-css-extract-plugin": "^2.9.1",
         "postcss": "^8.4.47",
         "postcss-loader": "^8.1.1",
         "postcss-rtlcss": "^5.5.0",
-        "sass": "^1.79.5",
+        "sass": "^1.80.2",
         "sass-loader": "^16.0.2",
         "style-loader": "^4.0.0",
         "ts-jest": "^29.2.5",
         "ts-loader": "^9.5.1",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
-        "tslib": "^2.7.0",
+        "tslib": "^2.8.0",
         "typescript": "5.6.3",
         "url-loader": "^4.1.1",
         "webpack": "^5.95.0",

public/app.html

@@ -256,8 +256,12 @@ async function buildProjectTranslation(this: CrowdinClient, branchId: number) {
         skipUntranslatedStrings: true,
     })
     const buildId = buildRes?.data?.id
-    const res = await this.crowdin.translationsApi.downloadTranslations(PROJECT_ID, buildId)
-    return res?.data?.url
+    while (true) {
+        // Wait finished
+        const res = await this.crowdin.translationsApi.downloadTranslations(PROJECT_ID, buildId)
+        const url = res?.data?.url
+        if (url) return url
+    }
 }
 
 /**

public/side.html

@@ -17,7 +17,7 @@ export type ItemSet = {
     [path: string]: string
 }
 
-export const ALL_CROWDIN_LANGUAGES = ['zh-TW', 'ja', 'pt-PT', 'uk', 'es-ES', 'de', 'fr', 'ru'] as const
+export const ALL_CROWDIN_LANGUAGES = ['zh-TW', 'ja', 'pt-PT', 'uk', 'es-ES', 'de', 'fr', 'ru', 'ar'] as const
 
 /**
  * The language code of crowdin
@@ -38,6 +38,7 @@ export const ALL_TRANS_LOCALES: timer.Locale[] = [
     'de',
     'fr',
     'ru',
+    'ar',
 ]
 
 const CROWDIN_I18N_MAP: Record<CrowdinLanguage, timer.Locale> = {
@@ -49,6 +50,7 @@ const CROWDIN_I18N_MAP: Record<CrowdinLanguage, timer.Locale> = {
     de: 'de',
     fr: 'fr',
     ru: 'ru',
+    ar: 'ar',
 }
 
 const I18N_CROWDIN_MAP: Record<timer.OptionalLocale, CrowdinLanguage> = {
@@ -60,6 +62,7 @@ const I18N_CROWDIN_MAP: Record<timer.OptionalLocale, CrowdinLanguage> = {
     de: 'de',
     fr: 'fr',
     ru: 'ru',
+    ar: 'ar',
 }
 
 export const crowdinLangOf = (locale: timer.Locale) => I18N_CROWDIN_MAP[locale]
@@ -143,7 +146,7 @@ export async function mergeMessage(
                 const pathSeg = path.split('.')
                 fillItem(pathSeg, 0, newMessage, text)
             })
-        existMessages[locale] = newMessage
+        Object.entries(newMessage).length && (existMessages[locale] = newMessage)
     })
 
     const newFileContent = JSON.stringify(existMessages, null, 4)

script/crowdin/client.ts

@@ -51,7 +51,7 @@ const _default = defineComponent(() => {
 
     return () => (
         <div class="menu-container">
-            <ElMenu defaultActive={currentActive.value}>
+            <ElMenu defaultActive={currentActive.value} style={{ border: 'none' }}>
                 {MENUS.map(menu => <ElMenuItemGroup title={t(menu.title)}>
                     {menu.children.map(item => renderMenuLeaf(item, router, currentActive))}
                 </ElMenuItemGroup>)}

script/crowdin/common.ts

@@ -2,7 +2,15 @@
     .el-aside
         width: 240px
         .el-menu
+            height: 100%
+            padding-top: 10px
             padding-bottom: 10px
+            .el-menu-item
+                font-family: Roboto,San Francisco,Helvetica Neue,Helvetica,Arial,PingFangSC-Light,Hiragina Sans GB,WenQuanYi Micro Hei,microsoft yahei ui,microsoft yahei,sans-serif
+                .el-icon
+                    font-size: 18px !important
+            .el-menu-item.is-active
+                background: var(--el-menu-item-active-bg-color)
         .menu-container
             min-height: 100vh
             background-color: var(--el-menu-bg-color)

src/app/Layout/menu/Side.tsx

@@ -5,14 +5,14 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElOption, ElSelect, ElTag } from "element-plus"
-import { type PropType, watch, defineComponent } from "vue"
-import statService, { HostSet } from "@service/stat-service"
-import siteService from "@service/site-service"
-import { t } from "@app/locale"
 import TimeFormatFilterItem from "@app/components/common/TimeFormatFilterItem"
-import { labelOfHostInfo } from "../util"
+import { t } from "@app/locale"
 import { useRequest, useState } from "@hooks"
+import siteService from "@service/site-service"
+import statService, { HostSet } from "@service/stat-service"
+import { ElOption, ElSelect, ElTag } from "element-plus"
+import { defineComponent, type PropType, watch } from "vue"
+import { labelOfHostInfo } from "../util"
 
 const calcUniqueKey = ({ host, virtual, merged }: timer.site.SiteInfo) => `${host}${virtual ? 1 : 0}${merged ? 1 : 0}`
 
@@ -81,9 +81,9 @@ const _default = defineComponent({
     setup(props, ctx) {
         const defaultSite: timer.site.SiteKey = props.site
         const [domainKey, setDomainKey] = useState(defaultSite ? calcKey(defaultSite) : '')
-        const { data: trendDomainOptions, loading: trendSearching, refresh: searchRemote } = useRequest<string, timer.site.SiteInfo[]>(
+        const { data: trendDomainOptions, loading: trendSearching, refresh: searchRemote } = useRequest<[string], timer.site.SiteInfo[]>(
             fetchDomain,
-            { defaultValue: defaultSite ? [defaultSite] : [], manual: true }
+            { defaultValue: defaultSite ? [defaultSite] : [], manual: true },
         )
         const [timeFormat, setTimeFormat] = useState(props.timeFormat)
         watch(domainKey, () => ctx.emit('siteChange', calcSite(domainKey.value)))

src/app/Layout/style.sass

@@ -42,7 +42,7 @@ const fetchData = async (): Promise<BizOption> => {
 }
 
 const _default = defineComponent(() => {
-    const { data } = useRequest<void, BizOption>(fetchData)
+    const { data } = useRequest(fetchData)
     const { elRef } = useEcharts(Wrapper, data)
 
     return () => (

src/app/components/Analysis/components/AnalysisFilter.tsx

@@ -52,6 +52,7 @@ const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
     de: 250,
     fr: 230,
     ru: 240,
+    ar: 220,
 }
 
 const _default = defineComponent({