blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改国际化包管理方式

Browse Source
This commit is contained in:
ray_wuhao 2023-04-24 13:57:45 +08:00
parent 30ae11a8a9
commit 660311a7ec
39 changed files with 349 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -16,9 +16,6 @@ dist/
visualizer.*
# Editor directories and files
.vscode
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo

2
.vscode/extensions.json vendored
View File

@ -1,3 +1,3 @@
{
"recommendations": ["Vue.volar"]
"recommendations": ["vue.volar", "lokalise.i18n-ally"]
}

11
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"i18n-ally.localesPaths": ["src/locales/lang"],
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
"i18n-ally.enabledParsers": ["json"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue", "react"]
}

1
CHANGELOG.md
View File

@ -12,6 +12,7 @@
- 手动补充 AppRouteRecordRaw、AppRouteMeta 类型
- 重新拆分 Layout 入口文件
- 重新指定组件暴露方法、属性
- 修改国际化管理方式，现在支持自动合并管理与结合 i18n-ally 使用。并且支持 unplugin-vue-i18n 构建，提高性能
## 3.1.7

11
auto-imports.d.ts vendored
View File

@ -50,8 +50,6 @@ declare global {
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@ -83,7 +81,6 @@ declare global {
const refThrottled: typeof import('@vueuse/core')['refThrottled']
const refWithControl: typeof import('@vueuse/core')['refWithControl']
const resolveComponent: typeof import('vue')['resolveComponent']
const resolveDirective: typeof import('vue')['resolveDirective']
const resolveRef: typeof import('@vueuse/core')['resolveRef']
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
const setActivePinia: typeof import('pinia')['setActivePinia']
@ -115,12 +112,10 @@ declare global {
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs']
@ -132,7 +127,6 @@ declare global {
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
const useCached: typeof import('@vueuse/core')['useCached']
const useClipboard: typeof import('@vueuse/core')['useClipboard']
const useCloned: typeof import('@vueuse/core')['useCloned']
const useColorMode: typeof import('@vueuse/core')['useColorMode']
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
const useCounter: typeof import('@vueuse/core')['useCounter']
@ -183,7 +177,6 @@ declare global {
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
const useLink: typeof import('vue-router')['useLink']
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@ -209,14 +202,11 @@ declare global {
const useParallax: typeof import('@vueuse/core')['useParallax']
const usePermission: typeof import('@vueuse/core')['usePermission']
const usePointer: typeof import('@vueuse/core')['usePointer']
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
const usePrevious: typeof import('@vueuse/core')['usePrevious']
const useRafFn: typeof import('@vueuse/core')['useRafFn']
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@ -230,7 +220,6 @@ declare global {
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
const useShare: typeof import('@vueuse/core')['useShare']
const useSlots: typeof import('vue')['useSlots']
const useSorted: typeof import('@vueuse/core')['useSorted']
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
const useStepper: typeof import('@vueuse/core')['useStepper']

48
locales/en-US.json
View File

@ -1,48 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "Home",
"Rely": "Rely",
"RelyAbout": "Rely About",
"Error": "Error Page",
"Echart": "Chart",
"scrollReveal": "Scroll Reveal",
"Axios": "Axios Request",
"Table": "Table",
"MultiMenu": "MultiMenu",
"Doc": "Doc",
"DocLocal": "Doc (China)",
"Office": "Office",
"Office_Document": "Document",
"Office_Presentation": "Presentation",
"Office_Spreadsheet": "Spreadsheet"
},
"LayoutHeaderTooltipOptions": {
"Reload": "Reload Current Page",
"Lock": "Lock",
"Setting": "Setting",
"Github": "Github",
"FullScreen": "Full Screen",
"CancelFullScreen": "Cancel Full Screen",
"Search": "Search"
},
"LayoutHeaderSettingOptions": {
"Title": "Configuration",
"ThemeOptions": {
"Title": "Theme",
"Dark": "Dark",
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
},
"InterfaceDisplay": "Interface Display"
},
"LoginModule": {
"Register": "Register",
"Signin": "Signin",
"QRCodeSignin": "QRCode Signin",
"NamePlaceholder": "please enter user name",
"PasswordPlaceholder": "please enter password",
"Login": "Login",
"Name": "User Name",
"Password": "User Password"
}
}

41
locales/system-one/en-US.json
View File

@ -1,41 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "Home",
"Rely": "Rely",
"RelyAbout": "Rely About",
"Error": "Error Page",
"Echart": "Chart",
"scrollReveal": "Scroll Reveal",
"Axios": "Axios Request",
"Table": "Table",
"MultiMenu": "MultiMenu",
"Doc": "Doc",
"DocLocal": "Doc (China)"
},
"LayoutHeaderTooltipOptions": {
"Reload": "Reload Current Page",
"Lock": "Lock",
"Setting": "Setting",
"Github": "Github",
"FullScreen": "Full Screen",
"CancelFullScreen": "Cancel Full Screen"
},
"LayoutHeaderSettingOptions": {
"Title": "Configuration",
"ThemeOptions": {
"Title": "Theme",
"Dark": "Dark",
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
}
},
"LoginModule": {
"Register": "Register",
"Signin": "Signin",
"NamePlaceholder": "please enter user name",
"PasswordPlaceholder": "please enter password",
"Login": "Login",
"Name": "User Name",
"Password": "User Password"
}
}

41
locales/system-one/zh-CN.json
View File

@ -1,41 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "首页",
"Rely": "依赖项",
"RelyAbout": "关于",
"Error": "错误页",
"Echart": "可视化",
"scrollReveal": "滚动动画",
"Axios": "请求",
"Table": "表格",
"MultiMenu": "多级菜单",
"Doc": "文档",
"DocLocal": "文档 (国内地址)"
},
"LayoutHeaderTooltipOptions": {
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
"Github": "Github",
"FullScreen": "全屏",
"CancelFullScreen": "退出全屏"
},
"LayoutHeaderSettingOptions": {
"Title": "项目配置",
"ThemeOptions": {
"Title": "主题",
"Dark": "暗色",
"Light": "明亮",
"PrimaryColorConfig": "主题色"
}
},
"LoginModule": {
"Register": "注册",
"Signin": "登陆",
"NamePlaceholder": "请输入用户名",
"PasswordPlaceholder": "请输入密码",
"Login": "登 陆",
"Name": "用户名",
"Password": "密码"
}
}

41
locales/system-two/en-US.json
View File

@ -1,41 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "Home",
"Rely": "Rely",
"RelyAbout": "Rely About",
"Error": "Error Page",
"Echart": "Chart",
"scrollReveal": "Scroll Reveal",
"Axios": "Axios Request",
"Table": "Table",
"MultiMenu": "MultiMenu",
"Doc": "Doc",
"DocLocal": "Doc (China)"
},
"LayoutHeaderTooltipOptions": {
"Reload": "Reload Current Page",
"Lock": "Lock",
"Setting": "Setting",
"Github": "Github",
"FullScreen": "Full Screen",
"CancelFullScreen": "Cancel Full Screen"
},
"LayoutHeaderSettingOptions": {
"Title": "Configuration",
"ThemeOptions": {
"Title": "Theme",
"Dark": "Dark",
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
}
},
"LoginModule": {
"Register": "Register",
"Signin": "Signin",
"NamePlaceholder": "please enter user name",
"PasswordPlaceholder": "please enter password",
"Login": "Login",
"Name": "User Name",
"Password": "User Password"
}
}

41
locales/system-two/zh-CN.json
View File

@ -1,41 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "首页",
"Rely": "依赖项",
"RelyAbout": "关于",
"Error": "错误页",
"Echart": "可视化",
"scrollReveal": "滚动动画",
"Axios": "请求",
"Table": "表格",
"MultiMenu": "多级菜单",
"Doc": "文档",
"DocLocal": "文档 (国内地址)"
},
"LayoutHeaderTooltipOptions": {
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
"Github": "Github",
"FullScreen": "全屏",
"CancelFullScreen": "退出全屏"
},
"LayoutHeaderSettingOptions": {
"Title": "项目配置",
"ThemeOptions": {
"Title": "主题",
"Dark": "暗色",
"Light": "明亮",
"PrimaryColorConfig": "主题色"
}
},
"LoginModule": {
"Register": "注册",
"Signin": "登陆",
"NamePlaceholder": "请输入用户名",
"PasswordPlaceholder": "请输入密码",
"Login": "登 陆",
"Name": "用户名",
"Password": "密码"
}
}

48
locales/zh-CN.json
View File

@ -1,48 +0,0 @@
{
"GlobalMenuOptions": {
"Dashboard": "首页",
"Rely": "依赖项",
"RelyAbout": "关于",
"Error": "错误页",
"Echart": "可视化",
"scrollReveal": "滚动动画",
"Axios": "请求",
"Table": "表格",
"MultiMenu": "多级菜单",
"Doc": "文档",
"DocLocal": "文档 (国内地址)",
"Office": "办公",
"Office_Document": "文档",
"Office_Presentation": "演示",
"Office_Spreadsheet": "表格"
},
"LayoutHeaderTooltipOptions": {
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
"Github": "Github",
"FullScreen": "全屏",
"CancelFullScreen": "退出全屏",
"Search": "搜索"
},
"LayoutHeaderSettingOptions": {
"Title": "项目配置",
"ThemeOptions": {
"Title": "主题",
"Dark": "暗色",
"Light": "明亮",
"PrimaryColorConfig": "主题色"
},
"InterfaceDisplay": "界面显示"
},
"LoginModule": {
"Register": "注册",
"Signin": "登陆",
"QRCodeSignin": "扫码登陆",
"NamePlaceholder": "请输入用户名",
"PasswordPlaceholder": "请输入密码",
"Login": "登 陆",
"Name": "用户名",
"Password": "密码"
}
}

2
src/components/RayGlobalProvider/index.tsx
View File

@ -10,7 +10,7 @@ import {
} from 'naive-ui'
import { useSetting } from '@/store'
import { naiveLocales } from '@/language/index'
import { naiveLocales } from '@/locales/index'
const GlobalProvider = defineComponent({
name: 'GlobalProvider',

22
src/components/RayIcon/index.tsx
View File

@ -54,7 +54,10 @@ const RayIcon = defineComponent({
default: false,
},
},
setup(props) {
emits: ['click'],
setup(props, ctx) {
const emit = ctx.emit
const modelColor = computed(() => props.color)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const cssVars = computed(() => {
@ -75,17 +78,28 @@ const RayIcon = defineComponent({
return cssVar
})
const handleClick = () => {
emit('click')
}
return {
modelColor,
symbolId,
cssVars,
handleClick,
}
},
render() {
return (
<span class={['ray-icon', this.customClassName]} style={[this.cssVars]}>
<svg rayIconAttribute="ray-icon" ariaHidden={true}>
<use xlink:href={this.symbolId} fill={this.modelColor} />
<span
class={['ray-icon', this.customClassName]}
style={[this.cssVars]}
onClick={this.handleClick.bind(this)}
>
<svg
{...({ rayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
>
<use {...{ 'xlink:href': this.symbolId }} fill={this.modelColor} />
</svg>
</span>
)

117
src/language/index.ts
View File

@ -1,117 +0,0 @@
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2022-12-08
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
/**
*
* 注册 `vue-i18n`
*
* 预设 `localeLanguage` 作为缓存 `key`
*
* 预设中文作为基础语言
*
* `naive ui` 语言包切换
*
* 注意:
* - 因使用 `i18n` 提供虚拟文件注入缘故, 每次修改 `locales` 中的文件后, 需要重启项目
* - 建议按照主流约定语言包命名
*/
import { createI18n } from 'vue-i18n'
import { naiveLocales } from './language'
import { getCache } from '@use-utils/cache'
import { forIn, merge } from 'lodash-es'
export { naiveLocales, localOptions } from './language'
import type { App } from 'vue'
import type { I18n } from 'vue-i18n'
export let i18n: I18n
/**
*
* @returns 整合后的语言包
*
* @remark 自动归并 locales 下所有 json 语言包, 需要注意语言包名称问题(必须统一)
* @remark 注意 key 的重复问题, 如果需要多模块区分语言包, 则需要保证 key 的唯一性, 否则会被覆盖
* @remark 使用该方法会导致子包中的路径不能使用 i18n ally 语法提示
*/
export const getMatchLanguageModule = () => {
const msg = {}
const reg = /([^\\/]+)\.json$/i
try {
const modules = import.meta.glob('../../locales/**', {
eager: true,
as: 'raw',
})
const moduleKeys = Object.keys(modules)
moduleKeys.forEach((curr) => {
const k = curr.match(reg)?.[1] as string // 当前语言包类型(zh-CN, en-US...)
const content = JSON.parse(modules[curr]) // 当前语言包内容
msg[k] = merge({}, msg[k])
forIn(content, (value, ckey) => {
msg[k][ckey] = merge(msg[k][ckey], value)
})
})
} catch (e) {
console.error(e)
}
return msg
}
/**
*
* @returns 获取当前环境默认语言
*
* @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
*/
export const getDefaultLocal = () => {
const catchLanguage = getCache('localeLanguage', 'localStorage')
const locale: string = catchLanguage !== 'no' ? catchLanguage : 'zh-CN'
return locale
}
export const setupI18n = (app: App<Element>) => {
const locale = getDefaultLocal()
const i18nInstance = createI18n({
locale,
allowComposition: true,
messages: getMatchLanguageModule(),
legacy: false,
sync: true,
})
i18n = i18nInstance
app.use(i18nInstance)
}
/**
*
* @returns 当前环境语言组件库语言包
*
* @remark 获取默认语言包
*/
export const getDefaultNaiveLocal = () => {
const local = getDefaultLocal()
return naiveLocales(local)
}

4
src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx
View File

@ -90,8 +90,8 @@ const ThemeSwitch = defineComponent({
),
default: () =>
this.themeValue
? t('LayoutHeaderSettingOptions.ThemeOptions.Dark')
: t('LayoutHeaderSettingOptions.ThemeOptions.Light'),
? t('headerSettingOptions.ThemeOptions.Dark')
: t('headerSettingOptions.ThemeOptions.Light'),
}}
</NTooltip>
</NSpace>

10
src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
View File

@ -13,7 +13,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
import { useSwatchesColorOptions } from './hook'
import { useSetting } from '@/store'
import { useI18n } from '@/language/useI18n'
import { useI18n } from '@/locales/useI18n'
import type { PropType } from 'vue'
@ -75,14 +75,14 @@ const SettingDrawer = defineComponent({
placement={this.placement}
width={this.width}
>
<NDrawerContent title={t('LayoutHeaderSettingOptions.Title')}>
<NDrawerContent title={t('headerSettingOptions.Title')}>
<NSpace class="setting-drawer__space" vertical>
<NDivider titlePlacement="center">
{t('LayoutHeaderSettingOptions.ThemeOptions.Title')}
{t('headerSettingOptions.ThemeOptions.Title')}
</NDivider>
<ThemeSwitch />
<NDivider titlePlacement="center">
{t('LayoutHeaderSettingOptions.ThemeOptions.PrimaryColorConfig')}
{t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
</NDivider>
<NColorPicker
swatches={useSwatchesColorOptions()}
@ -90,7 +90,7 @@ const SettingDrawer = defineComponent({
onUpdateValue={this.changePrimaryColor.bind(this)}
/>
<NDivider titlePlacement="center">
{t('LayoutHeaderSettingOptions.InterfaceDisplay')}
{t('headerSettingOptions.InterfaceDisplay')}
</NDivider>
<NDescriptions labelPlacement="left" column={1}>
<NDescriptionsItem label="多标签">

26
src/layout/components/SiderBar/index.tsx
View File

@ -20,11 +20,11 @@ import GlobalSeach from './components/GlobalSeach/index'
import { useSetting } from '@/store'
import { useSignin } from '@/store'
import { localOptions } from '@/language/index'
import { localOptions } from '@/locales/index'
import { useAvatarOptions } from './hook'
import { getCache } from '@/utils/cache'
import screenfull from 'screenfull'
import { useI18n } from '@/language/useI18n'
import { useI18n } from '@/locales/useI18n'
import type { IconEventMapOptions, IconEventMap } from './type'
@ -57,43 +57,43 @@ const SiderBar = defineComponent({
*
* 顶部左边操作栏
*/
const leftIconOptions = [
const leftIconOptions = computed(() => [
{
name: 'reload',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Reload',
tooltip: t('headerTooltip.Reload'),
},
]
])
/**
*
* 顶部右边提示框操作栏
*/
const rightTooltipIconOptions = [
const rightTooltipIconOptions = computed(() => [
{
name: 'search',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Search',
tooltip: t('headerTooltip.Search'),
eventKey: 'search',
},
{
name: 'fullscreen',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.FullScreen',
tooltip: t('headerTooltip.FullScreen'),
eventKey: 'screen',
},
{
name: 'github',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Github',
tooltip: t('headerTooltip.Github'),
eventKey: 'github',
},
{
name: 'setting',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Setting',
tooltip: t('headerTooltip.Setting'),
eventKey: 'setting',
},
]
])
const iconEventMap: IconEventMapOptions = {
reload: () => {
changeSwitcher(false, 'reloadRouteSwitch')
@ -178,7 +178,7 @@ const SiderBar = defineComponent({
onClick={this.handleIconClick.bind(this, curr.name)}
/>
),
default: () => this.t(curr.tooltip),
default: () => curr.tooltip,
}}
</NTooltip>
))}
@ -192,7 +192,7 @@ const SiderBar = defineComponent({
{this.rightTooltipIconOptions.map((curr) => (
<RayTooltipIcon
iconName={curr.name}
tooltipText={this.t(curr.tooltip)}
tooltipText={curr.tooltip}
onClick={this.handleIconClick.bind(this, curr.name)}
/>
))}

32
src/locales/helper.ts Normal file
View File

@ -0,0 +1,32 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { set } from 'lodash-es'
import type { Recordable } from '@/types/type-utils'
export const mergeMessage = (langs: Record<string, any>, prefix = 'lang') => {
const langsGather: Recordable = {}
Object.keys(langs).forEach((key) => {
const langFileModule = langs[key].default
let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
const lastIndex = fileName.lastIndexOf('.')
fileName = fileName.substring(0, lastIndex)
const keyList = fileName.split('/')
const moduleName = keyList.shift()
const objKey = keyList.join('.')
if (moduleName) {
if (objKey) {
set(langsGather, moduleName, langsGather[moduleName] || {})
set(langsGather[moduleName], objKey, langFileModule)
} else {
set(langsGather, moduleName, langFileModule || {})
}
}
})
return langsGather
}

90
src/locales/index.ts Normal file
View File

@ -0,0 +1,90 @@
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2022-12-08
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
/**
*
* 注册 `vue-i18n`
*
* 预设 `localeLanguage` 作为缓存 `key`
*
* 预设中文作为基础语言
*
* `naive ui` 语言包切换
*
* 注意:
* - 因使用 `i18n` 提供虚拟文件注入缘故, 每次修改 `locales` 中的文件后, 需要重启项目
* - 建议按照主流约定语言包命名
*/
import { createI18n } from 'vue-i18n'
import { localOptions } from './language'
import { getCache } from '@use-utils/cache'
export { naiveLocales, localOptions } from './language'
import type { App } from 'vue'
import type { I18n } from 'vue-i18n'
export let i18n: I18n
/**
*
* @returns 获取当前环境默认语言
*
* @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
*/
export const getDefaultLocal = () => {
const catchLanguage = getCache('localeLanguage', 'localStorage')
const locale: string = catchLanguage !== 'no' ? catchLanguage : 'zh-CN'
return locale
}
/** 获取所有语言 */
const getAppLocales = async () => {
const message = {}
for (const curr of localOptions) {
const msg = await import(`./lang/${curr.key}.ts`)
message[curr.key] = msg.default?.message ?? {}
}
return message
}
/** 创建 i18n 实例 */
const createI18nOptions = async () => {
const locale = getDefaultLocal()
const message = await getAppLocales()
const i18nInstance = createI18n({
legacy: false,
locale,
messages: message,
sync: true,
missingWarn: false,
silentFallbackWarn: true,
})
return i18nInstance
}
/** 注册 i18n */
export const setupI18n = async (app: App<Element>) => {
const i18nInstance = await createI18nOptions()
i18n = i18nInstance
app.use(i18nInstance)
}

11
src/locales/lang/en-US.ts Normal file
View File

@ -0,0 +1,11 @@
import { mergeMessage } from '@/locales/helper'
const modules = import.meta.glob('./en-US/**/*.json', {
eager: true,
})
export default {
message: {
...mergeMessage(modules, 'en-US'),
},
}

10
src/locales/lang/en-US/headerSettingOptions.json Normal file
View File

@ -0,0 +1,10 @@
{
"Title": "Configuration",
"ThemeOptions": {
"Title": "Theme",
"Dark": "Dark",
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
},
"InterfaceDisplay": "Display"
}

9
src/locales/lang/en-US/headerTooltip.json Normal file
View File

@ -0,0 +1,9 @@
{
"Reload": "Reload Current Page",
"Lock": "Lock",
"Setting": "Setting",
"Github": "Github",
"FullScreen": "Full Screen",
"CancelFullScreen": "Cancel Full Screen",
"Search": "Search"
}

17
src/locales/lang/en-US/menu.json Normal file
View File

@ -0,0 +1,17 @@
{
"Dashboard": "Home",
"Rely": "Rely",
"RelyAbout": "Rely About",
"Error": "Error Page",
"Echart": "Chart",
"scrollReveal": "Scroll Reveal",
"Axios": "Axios Request",
"Table": "Table",
"MultiMenu": "MultiMenu",
"Doc": "Doc",
"DocLocal": "Doc (China)",
"Office": "Office",
"Office_Document": "Document",
"Office_Presentation": "Presentation",
"Office_Spreadsheet": "Spreadsheet"
}

10
src/locales/lang/en-US/setting.json Normal file
View File

@ -0,0 +1,10 @@
{
"Title": "Configuration",
"ThemeOptions": {
"Title": "Theme",
"Dark": "Dark",
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
},
"InterfaceDisplay": "Interface Display"
}

10
src/locales/lang/en-US/views/login/index.json Normal file
View File

@ -0,0 +1,10 @@
{
"Register": "Register",
"Signin": "Signin",
"QRCodeSignin": "QRCode Signin",
"NamePlaceholder": "please enter user name",
"PasswordPlaceholder": "please enter password",
"Login": "Login",
"Name": "User Name",
"Password": "User Password"
}

11
src/locales/lang/zh-CN.ts Normal file
View File

@ -0,0 +1,11 @@
import { mergeMessage } from '@/locales/helper'
const modules = import.meta.glob('./zh-CN/**/*.json', {
eager: true,
})
export default {
message: {
...mergeMessage(modules, 'zh-CN'),
},
}

10
src/locales/lang/zh-CN/headerSettingOptions.json Normal file
View File

@ -0,0 +1,10 @@
{
"Title": "项目配置",
"ThemeOptions": {
"Title": "主题",
"Dark": "暗色",
"Light": "明亮",
"PrimaryColorConfig": "主题色"
},
"InterfaceDisplay": "界面显示"
}

9
src/locales/lang/zh-CN/headerTooltip.json Normal file
View File

@ -0,0 +1,9 @@
{
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
"Github": "Github",
"FullScreen": "全屏",
"CancelFullScreen": "退出全屏",
"Search": "搜索"
}

17
src/locales/lang/zh-CN/menu.json Normal file
View File

@ -0,0 +1,17 @@
{
"Dashboard": "首页",
"Rely": "依赖项",
"RelyAbout": "关于",
"Error": "错误页",
"Echart": "可视化",
"scrollReveal": "滚动动画",
"Axios": "请求",
"Table": "表格",
"MultiMenu": "多级菜单",
"Doc": "文档",
"DocLocal": "文档 (国内地址)",
"Office": "办公",
"Office_Document": "文档",
"Office_Presentation": "演示",
"Office_Spreadsheet": "表格"
}

10
src/locales/lang/zh-CN/setting.json Normal file
View File

@ -0,0 +1,10 @@
{
"Title": "项目配置",
"ThemeOptions": {
"Title": "主题",
"Dark": "暗色",
"Light": "明亮",
"PrimaryColorConfig": "主题色"
},
"InterfaceDisplay": "界面显示"
}

10
src/locales/lang/zh-CN/views/login/index.json Normal file
View File

@ -0,0 +1,10 @@
{
"Register": "注册",
"Signin": "登陆",
"QRCodeSignin": "扫码登陆",
"NamePlaceholder": "请输入用户名",
"PasswordPlaceholder": "请输入密码",
"Login": "登 陆",
"Name": "用户名",
"Password": "密码"
}

0
src/language/language.ts → src/locales/language.ts
View File

25
src/language/useI18n.ts → src/locales/useI18n.ts
View File

@ -1,5 +1,8 @@
import { i18n } from './index'
import type { WritableComputedRef } from 'vue'
import type { useI18n as _useI18n } from 'vue-i18n'
const getI18nKey = (namespace: string | undefined, key: string) => {
if (!namespace) {
return key
@ -13,17 +16,7 @@ const getI18nKey = (namespace: string | undefined, key: string) => {
}
export const useI18n = (namespace?: string) => {
const normalFunc = {
t: (key: string) => {
return getI18nKey(namespace, key)
},
}
if (!i18n) {
return normalFunc
}
const { t, ...methods } = i18n.global
const { t, locale, ...methods } = i18n.global
const overridesTFunc = (key: string, ...args: any[]) => {
if (!key) {
@ -38,11 +31,15 @@ export const useI18n = (namespace?: string) => {
return (t as any)(getI18nKey(namespace, key), ...args)
}
const overrideLocaleFunc = (lang: string) => {
const localeRef = locale as WritableComputedRef<string>
localeRef.value = lang
}
return {
...methods,
t: overridesTFunc,
locale: overrideLocaleFunc,
}
}
/** 配合 i18n ally 插件提示使用 */
export const t = (key: string) => key

12
src/main.ts
View File

@ -15,16 +15,16 @@ import {
permissionRouter,
} from './router/index'
import { setupStore } from './store/index'
import { setupI18n } from './language/index'
import { setupI18n } from './locales/index'
/**
*
* 普通应用注册方法
*/
const setupTemplate = () => {
const setupTemplate = async () => {
const app = createApp(App)
setupI18n(app)
await setupI18n(app)
setupStore(app)
@ -42,13 +42,13 @@ const setupTemplate = () => {
* 作为 `wujie-micro` 子应用注册应用方法
* 注意: 此处的 `instance` 名称不可以写为 `app`
*/
const setupWujieTemplate = () => {
const setupWujieTemplate = async () => {
let instance: AppType<Element>
window.__WUJIE_MOUNT = () => {
window.__WUJIE_MOUNT = async () => {
instance = createApp(App)
setupI18n(instance)
await setupI18n(instance)
setupStore(instance)

6
src/store/modules/menu/index.ts
View File

@ -28,7 +28,7 @@ import RayIcon from '@/components/RayIcon/index'
import { getCache, setCache } from '@/utils/cache'
import { validRole } from '@/router/basic'
import { parse, matchMenuOption, updateDocumentTitle } from './helper'
import { useI18n } from '@/language/useI18n'
import { useI18n } from '@/locales/useI18n'
import type { MenuOption } from 'naive-ui'
import type { RouteMeta } from 'vue-router'
@ -173,9 +173,7 @@ export const useMenu = defineStore(
/** 设置 label, i18nKey 优先级最高 */
const label = computed(() =>
meta?.i18nKey
? t(`GlobalMenuOptions.${meta!.i18nKey}`)
: meta?.noLocalTitle,
meta?.i18nKey ? t(`menu.${meta!.i18nKey}`) : meta?.noLocalTitle,
)
/** 拼装菜单项 */
const route = {

8
src/store/modules/setting.ts
View File

@ -1,7 +1,8 @@
import { getDefaultLocal } from '@/language/index'
import { getDefaultLocal } from '@/locales/index'
import { setCache } from '@use-utils/cache'
import { set } from 'lodash-es'
import { addClass, removeClass, colorToRgba } from '@/utils/element'
import { useI18n } from '@/locales/useI18n'
import type { ConditionalPick } from '@/types/type-utils'
import type { GlobalThemeOverrides } from 'naive-ui'
@ -24,7 +25,7 @@ export const useSetting = defineStore(
const {
appPrimaryColor: { primaryColor },
} = __APP_CFG__ // 默认主题色
const { locale } = useI18n()
const { t, locale } = useI18n()
const settingState = reactive<SettingState>({
drawerPlacement: 'right' as NaiveDrawerPlacement,
@ -45,7 +46,8 @@ export const useSetting = defineStore(
/** 修改当前语言 */
const updateLocale = (key: string) => {
locale.value = key
locale(key)
settingState.localeLanguage = key
setCache('localeLanguage', key, 'localStorage')

16
src/views/login/components/Signin/index.tsx
View File

@ -3,7 +3,7 @@ import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
import { setCache } from '@/utils/cache'
import { useSpin } from '@/spin'
import { useSignin } from '@/store'
import { useI18n } from '@/language/useI18n'
import { useI18n } from '@/locales/useI18n'
import type { FormInst } from 'naive-ui'
@ -31,12 +31,12 @@ const Signin = defineComponent({
const rules = {
name: {
required: true,
message: t('LoginModule.NamePlaceholder'),
message: t('views.login.index.NamePlaceholder'),
trigger: ['blur', 'input'],
},
pwd: {
required: true,
message: t('LoginModule.PasswordPlaceholder'),
message: t('views.login.index.PasswordPlaceholder'),
trigger: ['blur', 'input'],
},
}
@ -78,17 +78,17 @@ const Signin = defineComponent({
return (
<NForm model={this.signinForm} ref="loginFormRef" rules={this.rules}>
<NFormItem label={t('LoginModule.Name')} path="name">
<NFormItem label={t('views.login.index.Name')} path="name">
<NInput
v-model:value={this.signinForm.name}
placeholder={t('LoginModule.NamePlaceholder')}
placeholder={t('views.login.index.NamePlaceholder')}
/>
</NFormItem>
<NFormItem label={t('LoginModule.Password')} path="pwd">
<NFormItem label={t('views.login.index.Password')} path="pwd">
<NInput
v-model:value={this.signinForm.pwd}
type="password"
placeholder={t('LoginModule.PasswordPlaceholder')}
placeholder={t('views.login.index.PasswordPlaceholder')}
/>
</NFormItem>
<NButton
@ -96,7 +96,7 @@ const Signin = defineComponent({
type="primary"
onClick={this.handleLogin.bind(this)}
>
{t('LoginModule.Login')}
{t('views.login.index.Login')}
</NButton>
</NForm>
)

13
src/views/login/index.tsx
View File

@ -20,8 +20,8 @@ import RayLink from '@/components/RayLink/index'
import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
import { useSetting } from '@/store'
import { localOptions } from '@/language/index'
import { useI18n } from '@/language/useI18n'
import { localOptions } from '@/locales/index'
import { useI18n } from '@/locales/useI18n'
const Login = defineComponent({
name: 'Login',
@ -122,17 +122,20 @@ const Login = defineComponent({
{{
default: () => (
<>
<NTabPane tab={t('LoginModule.Signin')} name="signin">
<NTabPane
tab={t('views.login.index.Signin')}
name="signin"
>
<Signin />
</NTabPane>
<NTabPane
tab={t('LoginModule.Register')}
tab={t('views.login.index.Register')}
name="register"
>
<Register />
</NTabPane>
<NTabPane
tab={t('LoginModule.QRCodeSignin')}
tab={t('views.login.index.QRCodeSignin')}
name="qrcodeSignin"
>
<QRCodeSignin />

2
tsconfig.json
View File

@ -10,7 +10,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM", "es5", "es6", "dom.iterable"],
"lib": ["ESNext", "DOM", "es5", "es6", "dom.iterable", "es2022"],
"skipLibCheck": true,
"baseUrl": "./",
"paths": {