trs-ui-web

trs-ui-web

• TRS 前端低代码 PC 组件库（基于ant-design-vue进行二次开发）
• 知识库

技术栈

• Vue3
• Ant-design-vue3
• TypeScript
• Vite4

安装

npm install trs-ui-web --save-dev

快速上手

import { createApp } from 'vue'
import App from './App.vue'
// 引入组件
import Antd from 'ant-design-vue'
import trsuiweb from 'trs-ui-web'
// 引入样式
import 'ant-design-vue/dist/antd.css'
import 'trs-ui-web/lib/style.css'
// 注册组件
const app = createApp(App).use(Antd).use(trsuiweb)
app.mount('#app')

国际化（中英文切换）

设计说明

• TrsConfigProvider 内部已兼容并透传 ant-design-vue 的 a-config-provider。
• 第三方项目在 App.vue 只需要包裹 TrsConfigProvider，并传入 antd locale 对象。
• Ant 组件文案与 trs-ui-web 自定义文案会随同一个 locale 源实时切换。

第三方项目接入模板（可直接复制）

main.ts：

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import trsUiWeb from 'trs-ui-web'
import App from './App.vue'

createApp(App).use(Antd).use(trsUiWeb).mount('#app')

App.vue：

<template>
	<TrsConfigProvider :locale="antdLocale">
		<router-view />
	</TrsConfigProvider>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import enUS from 'ant-design-vue/es/locale/en_US'

const currentLang = ref<'zh-CN' | 'en-US'>('zh-CN')

const antdLocale = computed(() => {
	return currentLang.value === 'zh-CN' ? zhCN : enUS
})
</script>

与 vue-i18n 联动（可选）

如果你的业务项目使用 vue-i18n，也可以透传翻译函数：

<template>
	<TrsConfigProvider
		:locale="antdLocale"
		:t="(key, params) => $t('trsUiWeb.' + key, params)"
	>
		<router-view />
	</TrsConfigProvider>
</template>

组件库导出能力

• TrsConfigProvider：用于在组件树内响应式设置 trs-ui-web 文案语言。
• trsZhCN / trsEnUS：组件库内置语言包。
• mergeLocaleMessages：可增量覆盖组件库默认文案。
• setLocale / getLocale：编程式设置与读取当前语言。

回归用例

国际化切换回归步骤见：test/i18n-regression.md

i18n 工具命令

# 一键扫描+替换+清单刷新（推荐）
npm run i18n:fix

浏览器支持

由于 Vue 3 不再支持 IE，所以组件库也不支持 IE 浏览器。

Chrome	Edge	Firefox	Safari
71+	80+	78+	12.1+

目录结构

trs-ui-web
├─ .husky                  // commit提交规范配置 
├─ config                  
│  ├─ base.config.ts       // 服务构建基础配置
│  ├─ dev.config.ts        // 本地服务启动配置
│  ├─ gen-themes.js        // 组件的动态主题样式打包
│  ├─ gen-types.js         // types类型声明打包
│  ├─ gulpfile.js          // 在线文档的主题样式打包
│  ├─ iconInit.js          // 获取iconfont中的字体图标
│  ├─ prod.com.config.ts   // 库模式打包
│  ├─ prod.doc.config.ts   // 在线文档打包
│  └─ utils.ts             // README文档解析、高亮配置
├─ packages                 
│  ├─ components            // 公用组件
│  ├─ style 
│  │  ├─ common.less        // 公用样式
│  │  ├─ index.less         // 样式入口文件
│  │  └─ trs-ui-reset       // 组件样式
│  │     └─ button.less
│  ├─ theme                 // 组件主题：暗黑、浅色
│  │  ├─ dark.less
│  │  └─ default.less
│  ├─ utils   
│  │  ├─ common.ts           // 组件公共ts声明
│  │  ├─ public.ts           // 组件公共方法
│  └─ widget  
│     ├─ Button              // 每个组件单独文件夹
│     │  ├─ index.ts         // 局部注册
│     │  └─ index.vue        // 模板文件
│     ├─ component.ts        // 导出所有组件
│     ├─ index.d.ts          // 全局声明
│     └─ index.ts            // 全局注册
├─ src                       // 在线文档
│  ├─ App.vue               
│  ├─ assets
│  ├─ axios
│  │  ├─ axios.ts
│  │  └─ interceptors.ts
│  ├─ components              // 公用组件
│  ├─ docs                    // 组件文档，每个组件单独文件夹
│  │  └─ Button
│  │     └─ README.md
│  ├─ main.ts
│  ├─ router                  
│  │  ├─ index.ts
│  │  └─ routerConfig
│  │     ├─ base.component.ts            // 基础组件路由
│  │     ├─ container.component.ts       // 复合组件路由
│  │     ├─ data.component.ts            // 数据展示组件路由
│  │     ├─ form.component.ts            // 数据录入组件路由
│  │     ├─ index.ts
│  │     └─ intro.component.ts           // 文档基础介绍路由
│  ├─ style
│  ├─ utils
│  │  └─ common.ts
│  └── views
│     ├─ index.vue
│     ├─ trsForm.vue                       // 表单复合组件示例页面
│     └─ trsTable.vue                      // 常规列表复合组件示例页面
├─ tsc                                     // 打包ts声明文件
├─ .cz-config.js                           // commit提交类型配置
├─ .eslintrc.cjs                           // ESLint配置文件
├─ .gitignore                              // git提交忽略配置
├─ .release-it.json                        // 组件库发版配置
├─ CHANGELOG.md                            // 更新日志
├─ commitlint.config.js                    // commit提交错误拦截配置
├─ Dockerfile                              // Jenkins部署镜像
├─ prettier.config.js                      // Prettier配置
├─ CHANGELOG.md                            // 更新日志
├─ .eslintrc.cjs                           // ESLint配置文件
├─ .cz-config.js                           // commit提交类型配置
├─ tsconfig.config.json                    // ts类型声明生成配置
└─ tsconfig.json                           // ts类型校验

项目基础设置

支持的 node 版本：>=16.0.0，推荐使用最新稳定node版本

npm install

本地服务

npm run dev

线上环境

npm run build

ESLint检查

npm run lint

node包构建

npm run build:com

node包发版

npm run release