hotent-portal

Hotent的门户框架

国际化实现方案

概述

本项目支持多语言国际化，默认支持中文简体、繁体中文和英文三种语言。国际化实现基于 Vue 的 i18n 插件，通过 t 函数进行文本翻译。

国际化文件结构

国际化文件位于 src/locale 目录下：

• index.js: 国际化核心实现，提供 t 函数用于翻译
• format.js: 提供字符串格式化功能
• lang/: 语言文件目录
  • zh-CN.js: 中文简体
  • zh-TW.js: 繁体中文
  • en.js: 英文

使用方法

1. 在模板中使用

在 Vue 模板中，使用 $t 函数进行翻译：

<template>
  <div>{{ $t('hp.common.save') }}</div>
</template>

2. 在 JavaScript 中使用

在 JavaScript 代码中，导入 t 函数并使用：

import { t } from '@/locale'

export default {
  data() {
    return {
      title: t('hp.customTitleTodo.defaultTitle')
    }
  }
}

3. 带参数的翻译

对于需要动态内容的翻译，可以使用格式化功能：

// 在语言文件中定义
// "limitCountTip": "最多允许上传{limit}张图片"

// 在代码中使用
this.$t('hp.picture.limitCountTip', { limit: 5 })

添加新的翻译

1. 在 src/locale/lang/zh-CN.js 中添加中文简体翻译
2. 在 src/locale/lang/zh-TW.js 中添加繁体中文翻译
3. 在 src/locale/lang/en.js 中添加英文翻译

翻译文件的结构是一个嵌套的对象，使用点号分隔的路径来访问特定的翻译项。

切换语言

系统默认使用中文简体，可以通过以下方式切换语言：

import { use } from '@/locale'
import zhTW from '@/locale/lang/zh-TW'
import en from '@/locale/lang/en'

// 切换到繁体中文
use(zhTW)

// 切换到英文
use(en)

国际化内容范围

系统需要国际化的内容包括：

1. 栏目内固定的内容
2. 列表列名
3. 二级页面列表固定文字内容
4. 按钮名称
5. 提示信息
6. 错误信息
7. 系统默认文本

注意事项

1. 所有硬编码的文本都应该使用国际化函数替换
2. 确保所有语言文件中都有对应的翻译项
3. 对于动态内容，使用参数化的翻译
4. 保持翻译文件的结构一致性