Gauss

Appearance

国际化 ​

框架内部集成 vue-i18n，可直接使用国际化的能力。

具体使用 参考。

配置 ​

定义国际化文件。

src/locales/zh.ts

js
import { defineLocale } from '@gauss/flux'

export default defineLocale({
    siteTitle: 'Gauss',
})
import { defineLocale } from '@gauss/flux'

export default defineLocale({
    siteTitle: 'Gauss',
})

src/locales/en.ts

js
import { defineLocale } from '@gauss/flux'

export default defineLocale({
    siteTitle: 'Gauss',
})
import { defineLocale } from '@gauss/flux'

export default defineLocale({
    siteTitle: 'Gauss',
})

main.ts

js
import { createFlux } from '@gauss/flux'
import zh from './locales/zh'
import en from './locales/en'

const flux = createFlux({
    ...
    i18nOptions: {
        messages: {
            zh,
            en,
        }
    },
})
import { createFlux } from '@gauss/flux'
import zh from './locales/zh'
import en from './locales/en'

const flux = createFlux({
    ...
    i18nOptions: {
        messages: {
            zh,
            en,
        }
    },
})

使用 ​

vue
<template>
    <div>{{ $t('siteTitle') }}</div>
</template>

<script setup>
import { watch } from 'vue'
import { useI18n } from '@gauss/flux'
const { t, locale } = useI18n()
console.log(t('siteTitle'))

watch(
    () => locale.value,
    () => {
        // TODO，国际化切换时处理
    },
)
</script>
<template>
    <div>{{ $t('siteTitle') }}</div>
</template>

<script setup>
import { watch } from 'vue'
import { useI18n } from '@gauss/flux'
const { t, locale } = useI18n()
console.log(t('siteTitle'))

watch(
    () => locale.value,
    () => {
        // TODO，国际化切换时处理
    },
)
</script>

框架国际化字段 ​

您可以修改定义文件来覆盖框架本身的国际化字段。

zh ​

ts
export default {
    pageTitle: {
        login: '登录',
        autoLogin: '自动登录',
    },
    login: {
        welcome: '你好，欢迎回来',
        submitTxt: '登录',
        uid: '用户名',
        password: '密码',
        rememberMe: '记住我',
        rules: {
            uid: '请输入用户名',
            password: '请输入密码',
        },
        errorMsg: '服务端出错',
    },
    auth: {
        message: '您暂无权限访问，请重新登录',
    },
    autoLoginFailed: {
        title: '提示',
        message: '授权登录编码失败，请重试!',
        confirmButtonText: '跳转登录页',
        cancelButtonText: '返回',
    },
}
export default {
    pageTitle: {
        login: '登录',
        autoLogin: '自动登录',
    },
    login: {
        welcome: '你好，欢迎回来',
        submitTxt: '登录',
        uid: '用户名',
        password: '密码',
        rememberMe: '记住我',
        rules: {
            uid: '请输入用户名',
            password: '请输入密码',
        },
        errorMsg: '服务端出错',
    },
    auth: {
        message: '您暂无权限访问，请重新登录',
    },
    autoLoginFailed: {
        title: '提示',
        message: '授权登录编码失败，请重试!',
        confirmButtonText: '跳转登录页',
        cancelButtonText: '返回',
    },
}

en ​

ts
export default {
    pageTitle: {
        login: 'Login',
        autoLogin: 'Auto Login',
    },
    login: {
        welcome: 'Hello, welcome back',
        submitTxt: 'Log in',
        uid: 'Username',
        password: 'Password',
        rememberMe: 'Remember Me',
        rules: {
            uid: 'Please enter your username',
            password: 'Please enter your password',
        },
        errorMsg: 'Server error',
    },
    auth: {
        message: 'You do not have permission to access, please login again',
    },
    autoLoginFailed: {
        title: 'Tips',
        message: 'Authorization login code failed. Please try again!',
        confirmButtonText: 'Jump to Login',
        cancelButtonText: 'Back',
    },
}
export default {
    pageTitle: {
        login: 'Login',
        autoLogin: 'Auto Login',
    },
    login: {
        welcome: 'Hello, welcome back',
        submitTxt: 'Log in',
        uid: 'Username',
        password: 'Password',
        rememberMe: 'Remember Me',
        rules: {
            uid: 'Please enter your username',
            password: 'Please enter your password',
        },
        errorMsg: 'Server error',
    },
    auth: {
        message: 'You do not have permission to access, please login again',
    },
    autoLoginFailed: {
        title: 'Tips',
        message: 'Authorization login code failed. Please try again!',
        confirmButtonText: 'Jump to Login',
        cancelButtonText: 'Back',
    },
}

Copyright © 2023-present Gauss