feat: support more languages for the guide page

Author: sheepzh

package.json

@@ -31,15 +31,15 @@
         "@crowdin/crowdin-api-client": "^1.51.1",
         "@emotion/babel-plugin": "^11.13.5",
         "@emotion/css": "^11.13.5",
-        "@rsdoctor/rspack-plugin": "^1.4.0",
+        "@rsdoctor/rspack-plugin": "^1.5.0",
         "@rspack/cli": "^1.7.2",
         "@rspack/core": "^1.7.2",
         "@swc/core": "^1.15.8",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.33",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.0.7",
+        "@types/node": "^25.0.8",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",

src/pages/app/Layout/menu/Nav.tsx

@@ -14,7 +14,7 @@ import Flex from '@pages/components/Flex'
 import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMenu, ElMenuItem, useNamespace } from "element-plus"
 import { defineComponent, h, onBeforeMount, ref, watch } from "vue"
 import { useRouter } from "vue-router"
-import { type MenuItem, NAV_MENUS } from "./item"
+import { type MenuItem, navMenus } from "./item"
 import { handleClick, initTitle } from "./route"
 import { colorMenu } from './style'
 
@@ -42,12 +42,13 @@ const useStyle = () => {
     return { containerCls, menuWrapperCls }
 }
 
-const findTitle = (routePath: string): string => {
-    const title = NAV_MENUS.find(v => routePath === v.route)?.title
+const findTitle = (routePath: string, menus: MenuItem[]): string => {
+    const title = menus.find(v => routePath === v.route)?.title
     return title ? t(title) : ''
 }
 
 const _default = defineComponent<{}>(() => {
+    const menus = navMenus()
     const router = useRouter()
     const title = ref('')
     const [showMenu, , closeMenu, toggleMenu] = useSwitch(false)
@@ -58,7 +59,7 @@ const _default = defineComponent<{}>(() => {
 
     const syncRouter = () => {
         const route = router.currentRoute.value
-        route && (title.value = findTitle(route.path))
+        route && (title.value = findTitle(route.path, menus))
     }
 
     watch(router.currentRoute, syncRouter)
@@ -86,7 +87,7 @@ const _default = defineComponent<{}>(() => {
             </Flex>
             <div class={menuWrapperCls} v-show={showMenu.value}>
                 <ElMenu>
-                    {NAV_MENUS.map(item => (
+                    {menus.map(item => (
                         <ElMenuItem
                             index={item.index ?? item.route ?? item.href}
                             onClick={() => handleItemClick(item)}

src/pages/app/Layout/menu/Side.tsx

@@ -16,7 +16,7 @@ import { colorVariant } from '@pages/util/style'
 import { ElCollapseTransition, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElScrollbar, ElText, ElTooltip, useNamespace } from "element-plus"
 import { defineComponent, h, nextTick, onMounted, type Ref, ref, type StyleValue, watch } from "vue"
 import { type Router, useRouter } from "vue-router"
-import { MENU_GROUPS, type MenuItem } from "./item"
+import { menuGroups, type MenuItem } from "./item"
 import { handleClick, initTitle } from "./route"
 import { colorMenu } from './style'
 
@@ -83,6 +83,7 @@ const _default = defineComponent(() => {
         tooltipVisible, setTooltipVisible,
     } = useCollapseState()
     const cls = useStyle()
+    const menus = menuGroups()
 
     return () => (
         <Flex
@@ -101,8 +102,8 @@ const _default = defineComponent(() => {
                     } satisfies StyleValue}
                 >
                     {collapsed.value
-                        ? MENU_GROUPS.flatMap(g => g.children).map(item => renderItem(item, router, curr))
-                        : MENU_GROUPS.map(({ children, title }) => (
+                        ? menus.flatMap(g => g.children).map(item => renderItem(item, router, curr))
+                        : menus.map(({ children, title }) => (
                             <ElMenuItemGroup title={t(title)}>
                                 {children.map(item => renderItem(item, router, curr))}
                             </ElMenuItemGroup>

src/pages/app/Layout/menu/item.ts

@@ -39,7 +39,7 @@ export type MenuGroup = Omit<MenuItem, 'href' | 'route'> & {
 /**
  * Menu items
  */
-export const MENU_GROUPS: MenuGroup[] = [{
+export const menuGroups = (): MenuGroup[] => [{
     title: msg => msg.menu.data,
     index: 'data',
     icon: Histogram,
@@ -121,4 +121,4 @@ export const MENU_GROUPS: MenuGroup[] = [{
     }]
 }]
 
-export const NAV_MENUS: MenuItem[] = MENU_GROUPS.flatMap(g => g.children || []).filter(m => m.mobile)
+export const navMenus = (): MenuItem[] => menuGroups().flatMap(g => g.children || []).filter(m => m.mobile)

src/pages/app/Layout/menu/route.ts

@@ -2,7 +2,7 @@ import { createTabAfterCurrent } from "@api/chrome/tab"
 import { type I18nKey, t } from "@app/locale"
 import { type Ref } from "vue"
 import { type Router } from "vue-router"
-import { type MenuItem, MENU_GROUPS } from "./item"
+import { type MenuItem, menuGroups } from "./item"
 
 function openMenu(route: string, title: I18nKey, router: Router) {
     const currentPath = router.currentRoute.value?.path
@@ -27,7 +27,7 @@ export function handleClick(menuItem: MenuItem, router: Router, currentActive?:
 export async function initTitle(router: Router) {
     await router.isReady()
     const currentPath = router.currentRoute.value.path
-    for (const group of MENU_GROUPS) {
+    for (const group of menuGroups()) {
         for (const { route, title } of group.children) {
             const docTitle = route === currentPath && t(title)
             if (docTitle) {

src/util/constant/url.ts

@@ -78,7 +78,11 @@ export function getAppPageUrl(route?: string, query?: any): string {
 }
 
 export const HOMEPAGE = "https://www.wfhg.cc"
-const HOMEPAGE_LOCALES: timer.Locale[] = ["zh_CN", "zh_TW", "en"]
+const HOMEPAGE_LOCALES: timer.Locale[] = [
+    "zh_CN", "zh_TW", "en",
+    "ja", "de", "ru",
+    "fr", "es", "pt_PT",
+]
 
 export function getHomepageWithLocale(): string {
     const homepageLocale: timer.Locale = HOMEPAGE_LOCALES.includes(locale) ? locale : "en"