feat: 多语言

cole · cole · commit 6aeebba04bbd · 2024-07-27T23:52:47.000+08:00
diff --git a/packages/_utils/hooks/useGlobalProperties.js b/packages/_utils/hooks/useGlobalProperties.js
@@ -0,0 +1,11 @@
+import { getCurrentInstance } from 'vue'
+
+function useGlobalProperties () {
+    const instance = getCurrentInstance()
+    if (!instance) {
+        throw new Error(`no instance found`)
+    }
+    return instance.appContext.config.globalProperties
+}
+
+export default useGlobalProperties
diff --git a/packages/form/layouts/drawer-form/index.jsx b/packages/form/layouts/drawer-form/index.jsx
@@ -75,7 +75,6 @@ export default defineComponent({
                 ...attrs,
                 ...pick(props, Object.keys(Drawer.props)),
                 ...extraProps,
-                // headerStyle: { paddingBlock: '14px' },
                 open: unref(sOpen),
                 onClose: onCancel,
                 onAfterOpenChange: onAfterClose
diff --git a/packages/table/components/density/index.jsx b/packages/table/components/density/index.jsx
@@ -1,12 +1,14 @@
 import { defineComponent, unref } from 'vue'
-import { Menu } from 'ant-design-vue'
+import { Menu, theme } from 'ant-design-vue'
 import { useSharedContext } from '../../hooks/useSharedContext'
 import { useLocaleReceiver } from '../../../locale-provider'
 
 export default defineComponent({
     inheritAttrs: false,
     props: { ...Menu.props },
     setup (props, { attrs }) {
+        const { token } = theme.useToken()
+
         const { t } = useLocaleReceiver(['Table', 'toolbar'])
         const { tableSize, setTableSize } = useSharedContext()
 
@@ -18,10 +20,12 @@ export default defineComponent({
         }
 
         return () => {
+            const { fontSize } = unref(token)
+
             const menuProps = {
                 ...attrs,
                 ...props,
-                style: { width: '88px' },
+                style: { minWidth: `${fontSize * 7}px` },
                 selectedKeys: [unref(tableSize)],
                 onClick: onMenuClick
             }
diff --git a/src/App.jsx b/src/App.jsx
@@ -31,12 +31,12 @@ export default defineComponent({
         })
 
         return () => {
-            const { antd, comps } = unref(localeMessage)
+            const { antd, packages } = unref(localeMessage)
             const { darkAlgorithm, compactAlgorithm } = theme
 
             return (
                 <ConfigProvider theme={{ algorithm: [] }} locale={antd}>
-                    <LocaleProvider locale={comps}>
+                    <LocaleProvider locale={packages}>
                         <RouterView/>
                     </LocaleProvider>
                 </ConfigProvider>
diff --git a/src/config/index.js b/src/config/index.js
@@ -3,7 +3,6 @@ export const HOME_NAME = 'HomeIndex'
 // 登录页 (路由的拦截)
 export const LOGIN_NAME = 'Login'
 
-
 // iconfont 的在线地址 src/components/icon/IconFont.jsx
 export const scriptUrl = ''
 
diff --git a/src/css/mixin.scss b/src/css/mixin.scss
@@ -37,7 +37,7 @@ $font-size: 14px;
 // 圆角
 $border-radius: 4px;
 
-// 设置宽高 $width $height=$width
+// 设置宽高 $width $height:$width
 @mixin size($width, $height: $width) {
     width: $width;
     height: $height;
@@ -65,12 +65,12 @@ $border-radius: 4px;
 // flex $justify-content: null, $align-items: null
 @mixin flex($align-items: null, $justify-content: null) {
     display: flex;
-    @if ($justify-content != "" and $justify-content != null) {
-        justify-content: $justify-content;
-    }
     @if ($align-items != "" and $align-items != null) {
         align-items: $align-items;
     }
+    @if ($justify-content != "" and $justify-content != null) {
+        justify-content: $justify-content;
+    }
 }
 
 // 绝对定位 $position, $top: null, $right: null, $bottom: null, $left: null
@@ -90,7 +90,7 @@ $border-radius: 4px;
     }
 }
 
-// 扩展点击区域
+// 扩展点击区域 $v: 10px
 @mixin extend-click($v: 10px) {
     position: relative;
     &:before {
@@ -105,7 +105,7 @@ $border-radius: 4px;
     -webkit-overflow-scrolling: touch;
 }
 
-// translate 未知宽高 水平垂直居中
+// translate 未知宽高水平垂直居中 $direction: both
 @mixin center-translate($direction: both) {
     position: absolute;
     @if ($direction == both) {
@@ -124,7 +124,7 @@ $border-radius: 4px;
     }
 }
 
-// 多行超出设置点点点
+// 多行超出设置点点点 $v: 1
 @mixin box-clamp($v: 1) {
     overflow: hidden;
     display: -webkit-box;
@@ -140,7 +140,7 @@ $border-radius: 4px;
     overflow: hidden;
 }
 
-// 圆形
+// 圆形 $size: 12px
 @mixin circle($size: 12px) {
     border-radius: 50%;
     width: $size;
diff --git a/src/layout/compatible/tags/index.jsx b/src/layout/compatible/tags/index.jsx
@@ -4,9 +4,10 @@ import { CloseCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/ic
 import TagNode from './Node'
 import useShowTitle from '../../hooks/useShowTitle'
 import { omitNil } from '@utils/util'
-import { isString } from 'lodash-es'
+import useGlobalProperties from '@utils/hooks/useGlobalProperties'
 import { useConfigInject } from '@utils/extend'
 import useStyle from './style'
+import { isString } from 'lodash-es'
 
 export default defineComponent({
     props: {
@@ -36,6 +37,7 @@ export default defineComponent({
         const { prefixCls } = useConfigInject('pro-layout-tags', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
         const { token } = theme.useToken()
+        const { $t } = useGlobalProperties()
 
         const popupContainer = ref(null)
         let tagRefsMap = {}
@@ -194,12 +196,12 @@ export default defineComponent({
             const dropdownSlots = {
                 overlay: () => {
                     return (
-                        <Menu selectedKeys={[]}>
+                        <Menu class={`${prefixCls.value}-menu`} selectedKeys={[]}>
                             <Menu.Item onClick={onMenuClose.bind(null, 'all')}>
-                                关闭所有
+                                {$t ? $t('layout.tags.closeAll') : '关闭所有'}
                             </Menu.Item>
                             <Menu.Item onClick={onMenuClose.bind(null, 'others')}>
-                                关闭其他
+                                {$t ? $t('layout.tags.closeOthers') : '关闭其他'}
                             </Menu.Item>
                         </Menu>
                     )
diff --git a/src/layout/compatible/tags/style/index.js b/src/layout/compatible/tags/style/index.js
@@ -1,7 +1,7 @@
 import { genComponentStyleHook, mergeToken } from '@utils/extend'
 
 function genBaseStyle (token) {
-    const { componentCls, iconCls, tagsHeight, tagsButtonWidth, tagsCloseRight } = token
+    const { componentCls, iconCls, tagsHeight, tagsButtonWidth, tagsCloseRight, tagsMenuMinWidth } = token
     return {
         [componentCls]: {
             position: 'relative',
@@ -76,6 +76,10 @@ function genBaseStyle (token) {
                         transition: 'left .3s ease'
                     }
                 }
+            },
+            [`${componentCls}-menu`]: {
+                minWidth: tagsMenuMinWidth,
+                whiteSpace: 'nowrap'
             }
         }
     }
@@ -85,11 +89,13 @@ export default genComponentStyleHook('ProLayoutTags', (token) => {
     const tagsHeight = token.controlHeight + token.sizeXXS * 2
     const tagsButtonWidth = Math.ceil(tagsHeight * 0.65)
     const tagsCloseRight = 6
+    const tagsMenuMinWidth = token.fontSize * 7
 
     const tagsToken = mergeToken(token, {
         tagsHeight,
         tagsButtonWidth,
-        tagsCloseRight
+        tagsCloseRight,
+        tagsMenuMinWidth
     })
     return [genBaseStyle(tagsToken)]
 })
diff --git a/src/layout/components/avatar/index.jsx b/src/layout/components/avatar/index.jsx
@@ -2,6 +2,7 @@ import { defineComponent, unref } from 'vue'
 import { Avatar, Dropdown, Menu, theme } from 'ant-design-vue'
 import { LoginOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue'
 import { useAppInstance } from '@/useAppInstance'
+import useGlobalProperties from '@utils/hooks/useGlobalProperties'
 import { useConfigInject } from '@utils/extend'
 import useStyle from './style'
 
@@ -11,6 +12,7 @@ export default defineComponent({
         const { prefixCls } = useConfigInject('pro-avatar', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
         const { token } = theme.useToken()
+        const { $t } = useGlobalProperties()
 
         const { onLogout } = useAppInstance()
 
@@ -33,21 +35,21 @@ export default defineComponent({
                                 key={'center'}
                                 v-slots={{ icon: () => <UserOutlined/> }}
                             >
-                                个人中心
+                                {$t ? $t('layout.navbar.profile') : '个人中心'}
                             </Menu.Item>
                             <Menu.Item
                                 key={'settings'}
                                 v-slots={{ icon: () => <SettingOutlined/> }}
                             >
-                                个人设置
+                                {$t ? $t('layout.navbar.settings') : '个人设置'}
                             </Menu.Item>
                             <Menu.Divider/>
                             <Menu.Item
                                 key={'logout'}
                                 onClick={handleLogout}
                                 v-slots={{ icon: () => <LoginOutlined/> }}
                             >
-                                退出登录
+                                {$t ? $t('layout.navbar.logout') : '退出登录'}
                             </Menu.Item>
                         </Menu>
                     )
diff --git a/src/layout/components/language/index.jsx b/src/layout/components/language/index.jsx
@@ -1,34 +1,28 @@
-import { defineComponent, getCurrentInstance } from 'vue'
+import { defineComponent } from 'vue'
 import { Dropdown, Menu } from 'ant-design-vue'
 import { GlobalOutlined } from '@ant-design/icons-vue'
 import { useAppInstance } from '@/useAppInstance'
-import { map } from 'lodash-es'
 import { localCache, LOCALE__LOCAL } from '@/utils/storage'
+import useGlobalProperties from '@utils/hooks/useGlobalProperties'
 import { useConfigInject } from '@utils/extend'
 import useStyle from './style'
+import { map } from 'lodash-es'
 
 export default defineComponent({
     inheritAttrs: false,
     setup (props, { attrs }) {
         const { prefixCls } = useConfigInject('pro-language', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
 
-        const { setLocale } = useAppInstance()
         // 需要修改为不需要依赖 useI18n 的方式
         // 并且不干涉 layout 的逻辑
-        const { appContext } = getCurrentInstance()
-        const { globalProperties } = appContext ? appContext.config : {}
-        const { $i18n = { locale: 'zh-CN' } } = globalProperties || {}
+        const { $i18n = { locale: 'zh-CN' } } = useGlobalProperties()
+        const { setLocale } = useAppInstance()
 
         const language = navigator.language
         const localeLang = (language === 'zh-CN' || language === 'en-US') ? language : false
         const lang = localCache.get(LOCALE__LOCAL) || localeLang || 'zh-CN'
 
-        const langList = {
-            'zh-CN': '语言',
-            'en-US': 'Lang'
-        }
-
         const localeList = {
             'zh-CN': '中文简体',
             'en-US': 'English'
diff --git a/src/layout/hooks/useShowTitle.js b/src/layout/hooks/useShowTitle.js
@@ -1,20 +1,13 @@
-import { getCurrentInstance } from 'vue'
-import { isFunction } from 'lodash-es'
+import useGlobalProperties from '@utils/hooks/useGlobalProperties'
 
 function useShowTitle () {
-    /**
-     * 判断有没有安装 i18n
-     * 即使不使用 i18n ,也不用修改这部分代码了
-     */
-    const { appContext } = getCurrentInstance()
-    const { globalProperties } = appContext ? appContext.config : {}
-    const { $t, $te } = globalProperties || {}
+    const { $t, $te } = useGlobalProperties()
 
     const prefix = 'routes.'
 
     function showTitle (route) {
         const { title } = route.meta || {}
-        if (isFunction($t) && isFunction($te) && route.name) {
+        if ($t && $te && route.name) {
             const key = prefix + route.name
             return $te(key) ? $t(key) : (title || route.name)
         }
diff --git a/src/locale/en-US/index.js b/src/locale/en-US/index.js
@@ -1,12 +1,15 @@
 import antd from 'ant-design-vue/es/locale/en_US'
+import packages from '@packages/locale-provider/lang/en-US'
 import dayjs from 'dayjs/locale/en'
-import comps from '@packages/locale-provider/lang/en-US'
+// --
 import routes from './routes'
+import layout from './layout'
 
 export default {
     locale: 'en-US',
     antd: antd,
+    packages: packages,
     dayjs: dayjs,
-    comps: comps,
-    routes: routes
+    routes: routes,
+    layout: layout
 }
diff --git a/src/locale/en-US/layout.js b/src/locale/en-US/layout.js
@@ -0,0 +1,11 @@
+export default {
+    navbar: {
+        profile: 'Profile',
+        settings: 'Settings',
+        logout: 'Sign out'
+    },
+    tags: {
+        closeAll: 'Close All',
+        closeOthers: 'Close Other'
+    }
+}
diff --git a/src/locale/zh-CN/index.js b/src/locale/zh-CN/index.js
@@ -1,12 +1,15 @@
 import antd from 'ant-design-vue/es/locale/zh_CN'
+import packages from '@packages/locale-provider/lang/zh-CN'
 import dayjs from 'dayjs/locale/zh-cn'
-import comps from '@packages/locale-provider/lang/zh-CN'
+// --
 import routes from './routes'
+import layout from './layout'
 
 export default {
     locale: 'zh-CN',
     antd: antd,
+    packages: packages,
     dayjs: dayjs,
-    comps: comps,
-    routes: routes
+    routes: routes,
+    layout: layout
 }
diff --git a/src/locale/zh-CN/layout.js b/src/locale/zh-CN/layout.js
@@ -0,0 +1,11 @@
+export default {
+    navbar: {
+        profile: '个人中心',
+        settings: '个人设置',
+        logout: '退出登录'
+    },
+    tags: {
+        closeAll: '关闭所有',
+        closeOthers: '关闭其他'
+    }
+}
