# jiayou191-project

**Repository Path**: xu_li_han/jiayou191-project

## Basic Information

- **Project Name**: jiayou191-project
- **Description**: 123456789432
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-20
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vue 3 + TypeScript + Vite

cnpm install
cnpm run dev

## Build

cnpm run build

## 多语言

多语言文件在 `third-repos\GaiA7_Multilingualism_Doc` 目录下，其中 `GaiA7_多语言翻译对照表.i18n.xlsx` 为实际使用的文件，该文件在 `main.ts` 引入，`rollup-plugins/excel-i18n` 插件会将其转为内部使用的对象。该插件在项目根目录下，不需要安装，`vite.config.ts` 里引入配置一下就行。

`third-repos\GaiA7_Multilingualism_Doc` 目录下还有个与 excel 同名的 json 文件，这个文件是插件转换时自动生成的，方便开发时查看，所以如果要修改/添加翻译内容，请在 excel 文件修改。

GaiA7_Multilingualism_Doc 是一个独立的 git repo，修改完 excel 记得在当前目录提交到 git。

package.json 里的 dev 和 build 命令会先执行 prepare.js 脚本，自动拉取 GaiA7_Multilingualism_Doc master 分支代码，所以不需要手动获取最新的翻译，只需要执行 dev 命令就可以。

此外，目前登录页的翻译不在 excel 里，而是通过 excel-i18n 插件的 override 配置项设置的。

关于页面翻译的方式，目前存在多种。

第一种是直接用 $t 或者 useI18n hook 里的 t 进行翻译，但这种需要写完整的 key 字符串，比如：testOverview.name 这种。虽然 useI18n 可以设置前缀，但也不会对 key 进行处理，比如带有空格、括号等字符的 key（其实不影响使用）。

第二种是 useI18n 结合 src/utils/tool.ts 里的 safeTranslate 写一个函数进行翻译。

```
const { t } = useI18n()
const safeT = (key: string, prefix = 'Library') =>
  safeTranslate({ t, key, prefix, format: true })
```

这种方式会对 key 进行处理，去除空格、小括号里内容等。

第三种是用 src/store/setting.ts 里提供的对应方法。

```
const { generalT, testConfigurationT } = useSettingStore()
```

这种其实是对第二种的封装。

建议第三种或者第一种 useI18n 指定前缀的方式。反正对于需要参数的条文来说也没法用第三种。

element plus 自身的多语言在 src/App.vue 里通过 el-config-provider 提供。

## 多主题

多主题的颜色设置在 src/assets/element/element-plus-variables.scss 文件里，比如：

```
--text-color  正常字
--sub-text-color  二级字
--el-color-primary-light-1 选中色
--el-fill-color    hover色
--background-color 背景色
--background-color-feng 缝隙的颜色
```

## 组件库

项目里用了 antd 和 element plus 两个组件库。虽然 UI 是根据 antd 设计的，但目前主用 element plus。两个框架算是互补，比如 element plus 的 collapse 和 antd 的不一样。antd 的表单 label 不方便设置到上方，select 组件不方便设置 prefix。

## 通信

### 服务端

前端与服务端通信采用 http 形式。

### UE

前端与 UE 通信采用 websocket。

### SimCore

前端与 SimCore 通信采用 websocket

## 其他

- 测试登录账号：

  账号：trial001.gaia

  密码：test12345