Skip to content

Commit 8b536f6

Browse files
ztygodfu050409
ztygod
and
fu050409
authored
docs(readme): add zh_CN readme file (#37)
readme-zh --------- Co-authored-by: 苏向夜 <[email protected]>
1 parent 8044b1e commit 8b536f6

File tree

2 files changed

+251
-5
lines changed

2 files changed

+251
-5
lines changed

‎README.md‎

Lines changed: 112 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,128 @@
1-
# MateChat React
1+
<div align="center">
2+
<h1>MateChat React</h1>
3+
</div>
24

3-
MateChat React is the React version of [MateChat](https://gitcode.com/DevCloudFE/MateChat), a front-end AI scenario solution UI library based on Huawei DevUI Design.
5+
<div align="center">
46

5-
## Installation
7+
MateChat React is the React version of [MateChat](https://github.com/DevCloudFE/MateChat), a front-end AI scenario solution UI library based on Huawei DevUI Design.
8+
9+
10+
[![npm Version](https://img.shields.io/npm/v/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)
11+
[![npm Downloads](https://img.shields.io/npm/dm/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)
12+
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
13+
14+
</div>
15+
16+
<div align="center">
17+
18+
[English](./README.md) | [简体中文](./README.zh-CN.md)
19+
20+
</div>
21+
22+
---
23+
24+
## Introduction
25+
26+
**MateChat React** is a React component library designed for AI-driven interfaces, such as chat assistants, prompt tools, agent frameworks, and more. It is the React version of [MateChat](https://github.com/DevCloudFE/MateChat), offering consistent features and styles.
27+
28+
MateChat is based on [Huawei DevUI Design](https://devui.design/), offering a modern visual language, consistent user experience, and excellent scalability.
29+
30+
## Features
31+
32+
- 🧠 Built for AI interaction and prompt use-cases
33+
- 🎨 Based on DevUI design system
34+
- ⚛️ Fully typed React + TypeScript components
35+
- 🌗 Built-in light/dark theme switching
36+
- 🔌 Highly customizable & flexible
37+
38+
---
39+
40+
## Quick Start
641

742
```bash
8-
npm install --save @matechat/react
9-
# or
43+
# npm
44+
npm install @matechat/react
45+
46+
# or pnpm
1047
pnpm add @matechat/react
1148
```
1249

50+
```tsx
51+
import { Bubble } from '@matechat/react';
52+
import avatar from './avatar.png';
53+
54+
export default function BubbleDemo() {
55+
return (
56+
<div className="bubble-chat">
57+
<div className="bubble-row left">
58+
<img src={avatar} alt="Bot" className="avatar" />
59+
<Bubble text="Hello, how can I help you?" />
60+
</div>
61+
<div className="bubble-row right">
62+
<Bubble text="I want to know the product features!" />
63+
<img src={avatar} alt="User" className="avatar" />
64+
</div>
65+
<div className="bubble-row left">
66+
<img src={avatar} alt="Bot" className="avatar" />
67+
<Bubble text="OK, please wait..." isPending />
68+
</div>
69+
</div>
70+
);
71+
}
72+
```
73+
74+
---
75+
76+
## Development
77+
78+
```bash
79+
git clone https://github.com/matechat/matechat-react.git
80+
cd matechat-react
81+
pnpm install
82+
pnpm dev
83+
```
84+
85+
Build the library:
86+
87+
```bash
88+
pnpm build
89+
```
90+
91+
---
92+
1393
## Documentation
1494

1595
The documentation is still in progress, but you can feel free to create a new issue in [GitCode](https://gitcode.com/DevCloudFE/MateChat/issues) or [GitHub](https://github.com/DevCloudFE/MateChat/issues) to submit your questions or suggestions. This project is still under development, so the documentation is not complete yet, some features may change in the future.
1696

1797
For more information, please track the progress in [#4](https://github.com/DevCloudFE/matechat-react/issues/4) and [#5](https://github.com/DevCloudFE/MateChat/issues/5).
1898

99+
100+
101+
102+
103+
## Star History
104+
105+
[![Star History Chart](https://api.star-history.com/svg?repos=DevCloudFE/matechat-react&type=Date)](https://www.star-history.com/#DevCloudFE/matechat-react&Date)
106+
107+
---
108+
109+
## Contribution
110+
111+
We welcome all kinds of contributions:
112+
113+
* File issues for bugs or features
114+
* Create pull requests
115+
* Help with documentation or translations
116+
117+
118+
**Contributors:**
119+
120+
<a href="https://github.com/DevCloudFE/matechat-react/graphs/contributors">
121+
<img src="https://contrib.rocks/image?repo=DevCloudFE/matechat-react" />
122+
</a>
123+
124+
---
125+
19126
## Contact Us
20127

21128
| MateChat React Chat Group | SOA Chat Group |

‎README.zh-CN.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<div align="center">
2+
<h1>MateChat React</h1>
3+
</div>
4+
5+
<div align="center">
6+
7+
MateChat React 是 [MateChat](https://github.com/DevCloudFE/MateChat) 的 React 版本，
8+
它是一个基于华为 DevUI 设计的前端 AI 场景解决方案 UI 库。
9+
10+
11+
[![npm Version](https://img.shields.io/npm/v/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)
12+
[![npm Downloads](https://img.shields.io/npm/dm/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)
13+
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
14+
15+
</div>
16+
17+
<div align="center">
18+
19+
[English](./README.md) | [简体中文](./README.zh-CN.md)
20+
21+
</div>
22+
23+
---
24+
25+
## 介绍
26+
27+
**MateChat React** 是一个专为 AI 场景打造的 React 组件库，适用于聊天助手、提示工程工具、Agent 框架等场景。 这是 [MateChat](https://github.com/DevCloudFE/MateChat) 的 React 版本，保持一致的功能与风格。
28+
29+
MateChat 基于 [华为 DevUI Design](https://devui.design/)，提供现代视觉语言、一致的用户体验以及良好的可扩展性。
30+
31+
---
32+
33+
## 特性
34+
35+
- 🧠 为 AI 交互和提示工程设计
36+
- 🎨 基于 DevUI 设计体系
37+
- ⚛️ 完全基于 TypeScript 类型支持
38+
- 🌗 内置浅色/深色主题切换
39+
- 🔌 高度可定制与灵活性
40+
41+
---
42+
43+
## 快速开始
44+
45+
```bash
46+
# npm
47+
npm install @matechat/react
48+
49+
# or pnpm
50+
pnpm add @matechat/react
51+
```
52+
53+
```tsx
54+
import { Bubble } from '@matechat/react';
55+
import avatar from './avatar.png';
56+
57+
export default function BubbleDemo() {
58+
return (
59+
<div className="bubble-chat">
60+
<div className="bubble-row left">
61+
<img src={avatar} alt="Bot" className="avatar" />
62+
<Bubble text="您好，请问有什么可以帮您？" />
63+
</div>
64+
<div className="bubble-row right">
65+
<Bubble text="我想了解一下产品功能！" />
66+
<img src={avatar} alt="User" className="avatar" />
67+
</div>
68+
<div className="bubble-row left">
69+
<img src={avatar} alt="Bot" className="avatar" />
70+
<Bubble text="好的，请稍等..." isPending />
71+
</div>
72+
</div>
73+
);
74+
}
75+
```
76+
77+
78+
## 本地开发
79+
80+
```bash
81+
git clone https://github.com/matechat/matechat-react.git
82+
cd matechat-react
83+
pnpm install
84+
pnpm dev
85+
```
86+
87+
构建组件库：
88+
89+
```bash
90+
pnpm build
91+
```
92+
93+
---
94+
95+
## 文档
96+
97+
文档仍在完善中，如果有任何疑问或建议，欢迎在 [GitCode](https://gitcode.com/DevCloudFE/MateChat/issues) 或 [GitHub](https://github.com/DevCloudFE/MateChat/issues) 提 issue。
98+
由于项目仍在开发中，部分功能和文档可能会有调整。
99+
100+
可关注进展：[#4](https://github.com/DevCloudFE/matechat-react/issues/4) 和 [#5](https://github.com/DevCloudFE/MateChat/issues/5)。
101+
102+
---
103+
104+
## Star 趋势
105+
106+
[![Star History Chart](https://api.star-history.com/svg?repos=DevCloudFE/matechat-react\&type=Date)](https://www.star-history.com/#DevCloudFE/matechat-react&Date)
107+
108+
---
109+
110+
## 如何贡献
111+
112+
我们欢迎各种形式的贡献：
113+
114+
* 提交 bug 或需求 issue
115+
* 创建 pull request
116+
* 帮助完善文档或翻译
117+
118+
**贡献者：**
119+
120+
<a href="https://github.com/DevCloudFE/matechat-react/graphs/contributors">
121+
<img src="https://contrib.rocks/image?repo=DevCloudFE/matechat-react" />
122+
</a>
123+
124+
---
125+
126+
## 联系我们
127+
128+
| MateChat React 技术交流群 | SOA 技术交流群 |
129+
| :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: |
130+
| [<img alt="MateChat React Chat Group" src="./assets/matechat-react-qq-group.jpg" />](https://qm.qq.com/q/aMLehEXzBm) | [<img alt="SOA Chat Group" src="./assets/soa-qq-group.jpg" />](https://qm.qq.com/q/lOocKriX74) |
131+
132+
---
133+
134+
## License
135+
136+
该项目已获得 [MIT 许可](./LICENSE).
137+
138+
139+

0 commit comments

Comments
 (0)