style: translate more docs for i18n

pull/90/head
moonrailgun 2 years ago
parent de4e918c5c
commit 94f42134d9

@ -1,4 +1,4 @@
{ {
"label": "cli", "label": "Cli",
"position": 40 "position": 40
} }

@ -1,4 +1,4 @@
{ {
"label": "视频会议", "label": "Video Conference",
"position": 60 "position": 60
} }

@ -1,93 +1,98 @@
--- ---
sidebar_position: 10 sidebar_position: 10
title: 声网插件部署指南 title: Agora Plugin Deployment Guide
--- ---
:::info :::info
声网插件需要确保您的 `tailchat` 镜像版本在 1.4.0+ The agora plugin needs to ensure that your `tailchat` image version is 1.4.0+
::: :::
## 在声网平台申请项目 ## Apply for projects on the agora platform
Tailchat 声网集成是依赖声网服务实现的音视频通话功能,因此在使用前需要在声网平台上注册。 The Tailchat agora integration is an audio and video call function that relies on the agora service, so it needs to be registered on the agora platform before use.
声网官方: [https://www.agora.io/](https://www.agora.io/) Agora website: [https://www.agora.io/](https://www.agora.io/)
### 获取配置参数 ### Get configuration parameters
注册完毕后/登录后会自动跳转到控制台。在控制台中可以进行项目配置 After registration/login, it will automatically jump to the console. Project configuration can be done in the console
![](./images/1.png) ![](./images/1.png)
如果没有创建项目则需要先创建项目。如下图所示 If you have not created a project, you need to create a project first. As shown below
![](./images/2.png) ![](./images/2.png)
建议使用安全模式以避免被其他人盗用。 It is recommended to use safe mode to avoid being stolen by others.
接下来我们需要获取一些配置项用于配置`Tailchat`的声网插件。 Next we need to get some configuration items to configure the Tailchat's agora plugin.
![](./images/3.png) ![](./images/3.png)
在项目配置中我们可以获取 `appid` 和`app cert`。这两个分别是我们之后要用到的环境变量 `AGORA_APP_ID``AGORA_APP_CERT` In project configuration we can get `appid` and `app cert`. These two are the environment variables `AGORA_APP_ID` and `AGORA_APP_CERT` that we will use later
### 获取客户凭证 ### Get client credentials
另外我们还需要在右上角的 `RESTful API` 处获得客户的权限, In addition, we also need to obtain the customer's permission at the `RESTful API` in the upper right corner,
操作如图所示: The operation is as shown in the figure:
![](./images/4.png) ![](./images/4.png)
![](./images/5.png) ![](./images/5.png)
这样我们就拿到了另外两个环境变量: `AGORA_CUSTOMER_KEY``AGORA_CUSTOMER_SECRET` In this way we get two other environment variables: `AGORA_CUSTOMER_KEY` and `AGORA_CUSTOMER_SECRET`.
我们初步的准备工作就完成了 Our initial preparations are complete
## 安装插件 ## Install plugin
目前声网插件的服务端插件已经被默认安装,您无需做任何事情。但是为了正常使用需要配置环境变量 At present, the server-side plugin of the Agora plugin has been installed by default, and you do not need to do anything. However, environment variables need to be configured for use.
### 配置环境变量 ### Configure environment variables
配置环境变量请见 [环境变量](../deployment/environment.md) To configure environment variables, see [environment variables](../deployment/environment.md)
声网插件需要环境变量如下: The agora plugin requires environment variables as follows:
- `AGORA_APP_ID`: 声网项目应用id - `AGORA_APP_ID`: the application id of the Agora project
- `AGORA_APP_CERT`: 声网项目证书 - `AGORA_APP_CERT`: AGORA project certificate
- `AGORA_CUSTOMER_KEY`: 声网客户id - `AGORA_CUSTOMER_KEY`: AGORA customer id
- `AGORA_CUSTOMER_SECRET`: 声网客户秘钥 - `AGORA_CUSTOMER_SECRET`: AGORA customer secret key
这些环境变量都可以在上面的教程中获取。 These environment variables can be obtained in the above tutorial.
配置环境变量完毕后即可 After configuring the environment variables, every will be final
## 申请服务状态回调
为了使通话状态能够同步给`Tailchat`, 需要在声网中申请服务端回调。 ## Application service status callback
在项目配置中,我们需要在`服务配置` 中启用`消息通知服务` :::info
you can skip it if you dont need it.
:::
In order to synchronize the call status to `Tailchat`, it is necessary to apply for a server callback in Agora.
In project configuration, we need to enable `Notification Center Service Configuration` in `Service Config`
![](./images/6.png) ![](./images/6.png)
需要订阅以下事件: Need to subscribe to the following events:
- channel create=101 - channel create=101
- channel destroy=102 - channel destroy=102
- broadcaster join channel=103 - broadcaster join channel=103
- broadcaster leave channel=104 - broadcaster leave channel=104
接收服务器 URL 一般为: `https://<YOUR SERVER DOMAIN>/api/plugin:com.msgbyte.agora/webhook`, 其中`<YOUR SERVER DOMAIN>` 换成你的 `Tailchat` 域名。 The receiving server URL is generally: `https://<YOUR SERVER DOMAIN>/api/plugin:com.msgbyte.agora/webhook`, where `<YOUR SERVER DOMAIN>` is replaced with your `Tailchat` domain name.
:::info :::info
声网的服务会对服务器做连通性检查,因此需要配置好环境变量启动服务后再执行本次步骤。 The service of Agora will check the connectivity of the server, so it is necessary to configure the environment variables and start the service before performing this step.
另外声网需要配置`https` 且 `webrtc`服务也依赖`https`, 因此需要确保服务器网关支持`https`协议 In addition, the Agora needs to configure `https` and `webrtc` service also depends on `https`, so you need to ensure that the server gateway supports the `https` protocol
::: :::
配置完成后你会看到如下提示。等待声网工作人员确认完毕后即可生效。 After the configuration is complete, you will see the following prompt. It will take effect after the confirmation of the staff of the agora.
![](./images/7.png) ![](./images/7.png)

@ -1,34 +1,33 @@
--- ---
sidebar_position: 2 sidebar_position: 2
title: 部署视频会议 title: Deploy Tailchat Meeting
--- ---
视频会议服务 `Tailchat Meeting` 可以作为一个独立应用单品存在。在本节中将会讲述如何独立部署 `Tailchat Meeting` The video conferencing service `Tailchat Meeting` can exist as an independent application. In this section, we will describe how to deploy `Tailchat Meeting` independently
以下内容均基于`docker`环境,请确保服务端有 `docker` 最基本程度的环境。 The following content is based on the `docker` environment, please ensure that the server has the most basic `docker` environment.
如果还没有安装 `docker` + `docker-compose` 可以查看文档 [安装docker环境](../deployment/install-docker.md) If you haven't installed `docker` + `docker-compose`, you can check the document [Install docker environment](../deployment/install-docker.md)
## 快速部署 ## Fast deployment
```bash ```bash
git clone https://github.com/msgbyte/tailchat-meeting --depth=1 git clone https://github.com/msgbyte/tailchat-meeting --depth=1
``` ```
> NOTE: Next, the host mode of docker will be used for installation. That means, `docker-compose` will automatically bind the host port
> NOTE: 接下来会使用docker 的 host 模式进行安装。即`docker-compose` 会自动绑定主机端口 The ports that need to be reserved by the server are as follows:
- swag (server gateway, nginx enhanced version, the port can be modified through the configuration file tailchat-meeting/compose/nginx.conf)
需要服务器预留端口如下:
- swag(服务器网关, nginx 强化版, 端口可通过配置文件 tailchat-meeting/compose/nginx.conf 修改)
- 80 - 80
- 443 - 443
- tailchat-meeting - tailchat-meeting
- 13001 - 13001
- 40000-49999(用于RTC服务, 动态占用) - 40000-49999 (for RTC service, dynamic occupancy)
- redis -redis
- 6379 - 6379
**以上端口均会在宿主机上暴露为了服务器安全着想建议配置合适的防火墙策略仅暴露必要的端口443和40000-49999** **The above ports will be exposed on the host machine. For the sake of server security, it is recommended to configure a suitable firewall policy, and only expose the necessary ports 443 and 40000-49999**
```bash ```bash
cd tailchat-meeting/compose cd tailchat-meeting/compose
@ -36,61 +35,62 @@ cp docker-compose.env.example docker-compose.env
vi docker-compose.env vi docker-compose.env
``` ```
修改环境变量。 Modify environment variables.
环境变量如下: The environment variables are as follows:
``` ```
# 内网IP # Internal IP
MEDIASOUP_IP= MEDIASOUP_IP=
# 公网IP # Public IP
MEDIASOUP_ANNOUNCED_IP= MEDIASOUP_ANNOUNCED_IP=
# swag相关 # swag
URL= URL=
SUBDOMAINS= SUBDOMAINS=
TZ=Asia/Shanghai TZ=Asia/Shanghai
``` ```
其中 其中
- 如果仅单机部署的话`MEDIASOUP_IP`和`MEDIASOUP_ANNOUNCED_IP`可以均填写服务器公网ip, **但是对于弹性部署网络的服务商(如国内的腾讯云,阿里云等)必须严格按照注释分别填写内网IP和公网IP**(因为该类服务商提供的外网IP并不是绑定在网卡上的)
- `tailchat-meeting` 基于 webrtc 服务,因此强依赖 https/wss 协议。swag服务可以为您自动申请https证书但是必须得分配一个有效的域名并确保dns指向已经指向到服务器上。 - If you only deploy on a single machine, `MEDIASOUP_IP` and `MEDIASOUP_ANNOUNCED_IP` can both fill in the public network ip of the server, **But for service providers with flexible deployment networks (such as domestic AWS, Tencent Cloud, Alibaba Cloud, etc.) must strictly follow the notes to fill in the internal IP and public network IP** (because the external network IP provided by this type of service provider is not bound to the network card)
- 更多相关的文档可以查看 [README](https://github.com/linuxserver/docker-letsencrypt/blob/master/README.md) - `tailchat-meeting` is based on **webrtc** service, so it strongly depends on https/wss protocol. The swag service can automatically apply for an https certificate for you, but you must assign a valid domain name and ensure that the dns point has been pointed to the server.
- 示例配置: - More related documents can be viewed [README](https://github.com/linuxserver/docker-letsencrypt/blob/master/README.md)
- Sample configuration:
```bash ```bash
URL=meeting.example.com # 这里请填入 URL=meeting.example.com # 这里请填入
SUBDOMAINS= # 该参数用于多域名证书申请,可留空 SUBDOMAINS= # 该参数用于多域名证书申请,可留空
``` ```
修改完毕以后可以直接执行以下命令 After the modification, you can directly execute the following command
```bash ```bash
docker compose up -d docker compose up -d
``` ```
`docker compose` 会自动从网络下载镜像并构建`tailchat-meeting` `docker compose` will automatically download images from the network and build `tailchat-meeting`
构建可能需要花费一定时间和资源。特别是构建前端代码,如果使用的小配置的服务器的话请耐心一点等待。 Building may take time and resources. Especially for building the frontend code, please be patient if you use a server with a low server.
> 实际测试中使用1核2g的小资源服务器耗时参考如下: > In the real world test, the time-consuming reference of a small resource server with 1 core and 2G is as follows:
> - 下载依赖包: 3分钟 > - Download dependencies: 3 minutes
> - 编译前端代码: 5分钟 > - Compile frontend code: 5 minutes
访问 `https://meeting.example.com` 即可看到`tailchat-meeting`的页面 Visit `https://meeting.example.com` to see `tailchat-meeting` page
## 组合使用 ## Combined usage
对于傻瓜式部署来说只需要一键就可以执行。如果已经有现成的网关服务(比如nginx, caddy等)以及redis实例可以有选择的启动服务。 For fool-proof deployment, it only needs one command to execute. If there are ready-made gateway services (such as nginx, caddy, etc.) and redis instances, you can selectively start the services.
: For example:
```bash ```bash
docker compose up tailchat-meeting -d # 仅运行 tailchat-meeting 实例 docker compose up tailchat-meeting -d # Only run the tailchat-meeting instance
``` ```
## 使用host模式的原因 ## Reasons for using host mode
`tailchat-meeting` 核心的RTC服务需要在运行时申请端口但是对于docker来说并不能实现这个功能。而预先申请一定范围的端口绑定即会造成无意义端口的浪费也会在启动时瞬间占据大量资源并把系统打死。 The core RTC service of `tailchat-meeting` needs to apply for a port at runtime, but this function cannot be realized for docker. Pre-applying for a certain range of port bindings will not only waste meaningless ports, but also occupy a lot of resources and kill the system instantly when starting.
**需要注意的是请不要把redis所在的6379端口暴露出去这可能会产生安全隐患。** **It should be noted that please do not expose the 6379 port where redis is located, which may cause security risks. **

@ -1,9 +1,9 @@
--- ---
sidebar_position: 99 sidebar_position: 99
title: SDK设计文档 title: SDK design document
draft: true draft: true
--- ---
## 基本路径 ## base path
用户基本操作路径是: 加入房间 —— 监听变更/推送本地媒体流 —— 离开房间这样完整的生命周期。 The user's basic operation path is: join the room - monitor changes/push local media streams - leave the complete life cycle of the room.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 296 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 138 KiB

@ -1,36 +1,35 @@
--- ---
sidebar_position: 1 sidebar_position: 1
title: 概述 title: Summary
--- ---
`Tailchat` provides two solutions for video and voice calls, you can choose according to the actual situation:
`Tailchat` 提供两套方案用于视频语音通话,可以根据实际情况自行选择: - `tailchat-meeting` self-deploying video conferencing (WIP)
- `tailchat-meeting` 自部署视频会议(WIP) - `agora` Acoustic Network integration, for details, see: [Acoustic Network Plug-in Deployment Guide](./agora.md)
- `agora` 声网集成, 详细说明见: [声网插件部署指南](./agora.md)
## Tailchat Meeting ## Tailchat Meeting
视频会议模块是 `Tailchat` 系列的一套重要组成部分。提供能力如下: The video conferencing module is an important part of the suite of `Tailchat` series. Capabilities are provided as follows:
- 语音通信 - Voice communication
- 视频会话 - Video session
- 屏幕共享 - screen sharing
- 虚拟背景 - virtual background
- 文件传输 - file transfer
- 聊天记录 - chat record
同时 `tailchat-meeting` 还可以作为独立单品存在,无需登录即可快速发起/加入会议 At the same time, `tailchat-meeting` can also exist as an independent product, and you can quickly initiate/join meetings without logging in
### 项目仓库 ### Project repository
- 开源地址: [https://github.com/msgbyte/tailchat-meeting](https://github.com/msgbyte/tailchat-meeting) - Open source address: [https://github.com/msgbyte/tailchat-meeting](https://github.com/msgbyte/tailchat-meeting)
- 开源协议: GPL-3.0 - Open source agreement: Apache 2.0
:::info 开源声明 :::info Open source statement
本项目基于 [edumeet](https://github.com/edumeet/edumeet) 和 [mediasoup](https://github.com/versatica/mediasoup) 进行二次开发而来。 This project is based on secondary development of [edumeet](https://github.com/edumeet/edumeet) and [mediasoup](https://github.com/versatica/mediasoup).
在此基础上进行了功能追加与SDK实现以及代码优化。如果想要找到开源协议更加宽松(MIT + ISC 协议)的实现可以看一下这两个项目 On this basis, function addition, SDK implementation and code optimization were carried out. If you want to find a looser implementation of the open source protocol (MIT + ISC protocol), you can take a look at these two projects
::: :::
### 项目架构 ### Project Architecture
![](/img/architecture/meeting.excalidraw.svg) ![](/img/architecture/meeting.excalidraw.svg)

@ -1,6 +1,6 @@
--- ---
sidebar_position: 3 sidebar_position: 3
title: 插件部署 title: Plugin deployment
--- ---
TODO TODO

@ -1,4 +1,4 @@
{ {
"label": "开发插件", "label": "Develop plugins",
"position": 70 "position": 70
} }

@ -1,4 +1,4 @@
{ {
"label": "API 接口", "label": "API Interface",
"position": 99 "position": 99
} }

@ -3,33 +3,33 @@ sidebar_position: 1
title: "@capital/common" title: "@capital/common"
--- ---
## 注册 ## register
### regGroupPanel ### regGroupPanel
注册群组面板 Register Group Panel
```typescript ```typescript
regGroupPanel({ regGroupPanel({
name: `com.msgbyte.webview/grouppanel`, name: `com.msgbyte.webview/grouppanel`,
label: '网页面板', label: 'web panel',
provider: PLUGIN_NAME, provider: PLUGIN_NAME,
extraFormMeta: [{ type: 'text', name: 'url', label: '网址' }], extraFormMeta: [{ type: 'text', name: 'url', label: 'URL' }],
render: GroupWebPanelRender, render: GroupWebPanelRender,
}); });
``` ```
参数类型: [PluginGroupPanel](#plugingrouppanel) Parameter type: [PluginGroupPanel](#plugingrouppanel)
### regMessageInterpreter ### regMessageInterpreter
注册消息解释器 register message interpreter
```typescript ```typescript
regMessageInterpreter({ regMessageInterpreter({
name: '喵语翻译', name: 'Meow language translation',
explainMessage(message: string) { explainMessage(message: string) {
// 喵语 -> 人话 // Meow -> Human
if (!isMiao(message)) { if (!isMiao(message)) {
return null; return null;
} }
@ -39,13 +39,13 @@ regMessageInterpreter({
}); });
``` ```
参数类型: [PluginMessageInterpreter](#pluginmessageinterpreter) Parameter type: [PluginMessageInterpreter](#pluginmessageinterpreter)
### regMessageRender ### regMessageRender
*注册多个仅生效最后一个* *Multiple registrations only take effect for the last one*
注册消息渲染器, 输入消息文本返回渲染内容 Register a message renderer, enter the message text and return the rendered content
```typescript ```typescript
regMessageRender((message) => { regMessageRender((message) => {
@ -55,27 +55,27 @@ regMessageRender((message) => {
### regChatInputAction ### regChatInputAction
注册聊天输入框操作 Register chat input box operation
```typescript ```typescript
regChatInputAction({ regChatInputAction({
label: '喵言喵语', label: 'Meow words',
onClick: (actions) => { onClick: (actions) => {
openModal(createElement(SendMiaoModal, { actions })); openModal(createElement(SendMiaoModal, { actions }));
}, },
}); });
``` ```
参数类型: [ChatInputAction](#chatinputaction) Parameter Type: [ChatInputAction](#chatinputaction)
### regPluginColorScheme ### regPluginColorScheme
注册插件配色方案/主题 Register plugin color schemes/themes
```typescript ```typescript
regPluginColorScheme({ regPluginColorScheme({
label: 'Miku 葱', label: 'Miku onion',
name: 'light+miku', name: 'light+miku',
}); });
``` ```
@ -87,11 +87,11 @@ regPluginColorScheme({
## 工具函数 ## Utility function
### useGroupPanelParams ### useGroupPanelParams
在`hooks`中获取用户面板相关信息 Get user panel related information in `hooks`
```typescript ```typescript
import { useGroupPanelParams } from '@capital/common'; import { useGroupPanelParams } from '@capital/common';
@ -101,7 +101,7 @@ const { groupId, panelId } = useGroupPanelParams();
### openModal ### openModal
打开一个模态框 open a modal
```typescript ```typescript
openModal( openModal(
@ -110,13 +110,13 @@ openModal(
) )
``` ```
类型: type:
- [ModalProps](#modalprops) - [ModalProps] (#modalprops)
### ModalWrapper ### ModalWrapper
模态框包装器 Modal Wrapper
```jsx ```jsx
<ModalWrapper> <ModalWrapper>
@ -126,7 +126,7 @@ openModal(
### useModalContext ### useModalContext
获取模态框上下文 Get the modal context
```typescript ```typescript
const { closeModal } = useModalContext(); const { closeModal } = useModalContext();
@ -134,7 +134,7 @@ const { closeModal } = useModalContext();
### getGlobalState ### getGlobalState
获取全局 `Redux` 状态上下文 Get the global `Redux` state context
```typescript ```typescript
const state = getGlobalState(); const state = getGlobalState();
@ -142,7 +142,7 @@ const state = getGlobalState();
### getCachedUserInfo ### getCachedUserInfo
获取用户信息, 缓存版本 Get user information, cached version
```typescript ```typescript
const info = getCachedUserInfo(userId); const info = getCachedUserInfo(userId);
@ -150,60 +150,60 @@ const info = getCachedUserInfo(userId);
### getCachedConverseInfo ### getCachedConverseInfo
获取会话信息 Get session information
```typescript ```typescript
const info = getCachedConverseInfo(converseId); const info = getCachedConverseInfo(converseId);
``` ```
## 类型 ## type
### PluginGroupPanel ### PluginGroupPanel
```typescript ```typescript
interface PluginGroupPanel { interface PluginGroupPanel {
/** /**
* 面板唯一标识 * The unique identification of the panel
* @example com.msgbyte.webview/grouppanel * @example com.msgbyte.webview/grouppanel
*/ */
name: string; name: string;
/** /**
* 面板显示名 * panel display name
*/ */
label: string; label: string;
/** /**
* 插件提供者, 用于引导没有安装插件的用户安装插件 * Plug-in provider, used to guide users who have not installed the plug-in to install the plug-in
*/ */
provider: string; provider: string;
/** /**
* 额外的表单数据, 用于创建面板时使用 * Additional form data, used when creating panels
*/ */
extraFormMeta: FastFormFieldMeta[]; extraFormMeta: FastFormFieldMeta[];
/** /**
* 该面板如何渲染 * How the panel is rendered
*/ */
render: React.ComponentType; render: React. ComponentType;
} }
``` ```
### PluginMessageInterpreter ### PluginMessageInterpreter
插件消息解释器 Plugin Message Interpreter
```typescript ```typescript
interface PluginMessageInterpreter { interface PluginMessageInterpreter {
name?: string; name?: string;
explainMessage: (message: string) => React.ReactNode; explainMessage: (message: string) => React. ReactNode;
} }
``` ```
### ChatInputAction ### ChatInputAction
消息输入框操作对象 Message input box operation object
```typescript ```typescript
interface ChatInputAction { interface ChatInputAction {
@ -213,16 +213,16 @@ interface ChatInputAction {
``` ```
### GroupPanel ###GroupPanel
```typescript ```typescript
interface GroupPanel { interface GroupPanel {
id: string; // 在群组中唯一 id: string; // unique in the group
name: string; name: string;
parentId?: string; parentId?: string;
type: GroupPanelType; type: GroupPanelType;
provider?: string; // 面板提供者 provider?: string; // panel provider
pluginPanelName?: string; // 插件面板名 pluginPanelName?: string; // plugin panel name
meta?: Record<string, unknown>; meta?: Record<string, unknown>;
} }
``` ```
@ -236,13 +236,13 @@ interface ModalProps {
onChangeVisible?: (visible: boolean) => void; onChangeVisible?: (visible: boolean) => void;
/** /**
* 是否显示右上角的关闭按钮 * Whether to display the close button in the upper right corner
* @default false * @default false
*/ */
closable?: boolean; closable?: boolean;
/** /**
* 遮罩层是否可关闭 * Whether the mask layer can be closed
*/ */
maskClosable?: boolean; maskClosable?: boolean;
} }

@ -5,18 +5,18 @@ title: "@capital/component"
### Button ### Button
组件来自 [antd](https://ant.design/) Components from [antd](https://ant.design/)
组件文档: [Button](https://ant.design/components/button-cn/) Component Documentation: [Button](https://ant.design/components/button-cn/)
### TextArea ###TextArea
组件来自 [antd](https://ant.design/) Components from [antd](https://ant.design/)
组件文档: [TextArea](https://ant.design/components/input-cn/#components-input-demo-textarea) Component document: [TextArea](https://ant.design/components/input-cn/#components-input-demo-textarea)
### Image ### Image
组件来自 [antd](https://ant.design/) Components from [antd](https://ant.design/)
组件文档: [Image](https://ant.design/components/image-cn/) Component Documentation: [Image](https://ant.design/components/image-cn/)

@ -1,9 +1,9 @@
--- ---
sidebar_position: 3 sidebar_position: 3
title: 全局CSS变量 title: Global CSS Variables
--- ---
- `--tc-primary-color`: 主色调 - `--tc-primary-color`: primary color
- `--tc-background-image`: 背景图片 - `--tc-background-image`: background image
- `--tc-content-background-image`: 内容页背景图片 - `--tc-content-background-image`: content page background image
- `--tc-content-background-image-opacity`: 内容页背景图片透明度,默认 **0.15** - `--tc-content-background-image-opacity`: content page background image opacity, default **0.15**

@ -3,17 +3,17 @@ sidebar_position: 4
title: "data-tc-role" title: "data-tc-role"
--- ---
`Tailchat Role` 是一种通过`data-*`方式来标识DOM的一种方式表明该节点在`Tailchat`中的角色, 开发者可以通过这来找到对应角色的DOM节点 `Tailchat Role` is a way to identify the DOM through `data-*`, indicating the role of the node in `Tailchat`, developers can use this to find the DOM node corresponding to the role
例如: `[data-tc-role=navbar]` Example: `[data-tc-role=navbar]`
- `navbar`: 导航栏 - `navbar`: navigation bar
- `navbar-personal`: 导航栏中的个人主页 - `navbar-personal`: personal homepage in the navbar
- `navbar-groups`: 导航栏中的群组 - `navbar-groups`: Groups in the navbar
- `navbar-settings`: 导航栏中的设置 - `navbar-settings`: settings in the navbar
- `sidebar-personal`: 个人主页中的侧边栏 - `sidebar-personal`: sidebar in personal homepage
- `sidebar-group`: 群组中的侧边栏 - `sidebar-group`: sidebar in group
- `content-personal`: 个人主页中的内容 - `content-personal`: the content of the personal homepage
- `content-group`: 群组页面中的内容 - `content-group`: the content of the group page
- `modal`: 模态框 - `modal`: modal box
- `modal-mask`: 模态框的遮罩层 - `modal-mask`: the mask layer of the modal box

@ -1,20 +1,20 @@
--- ---
sidebar_position: 2 sidebar_position: 2
title: Icon 图标 title: Icon
--- ---
```ts ```ts
import { Icon } from '@capital/component'; import { Icon } from '@capital/component';
``` ```
`tailchat` 的 icon 解决方案来自 `iconify` The icon solution for `tailchat` comes from `iconify`
使用方法很简单: The way of use is very simple:
- 在下述网站中选择想要的图标: [https://icon-sets.iconify.design/](https://icon-sets.iconify.design/) - Select the desired icon from the following website: [https://icon-sets.iconify.design/](https://icon-sets.iconify.design/)
- 复制选中的key。传给 `Icon` 组件, 示例: - Duplicate the selected key. Pass to `Icon` component, example:
```tsx ```tsx
<Icon icon="mdi:account" /> <Icon icon="mdi:account" />
``` ```
推荐使用`mdi`来统一化图标视觉设计: It is recommended to use `mdi` to unify icon visual design:
[https://icon-sets.iconify.design/mdi/](https://icon-sets.iconify.design/mdi/) [https://icon-sets.iconify.design/mdi/](https://icon-sets.iconify.design/mdi/)

@ -1,59 +1,60 @@
--- ---
sidebar_position: 1 sidebar_position: 1
title: 开始开发插件 title: Start developing plugins
--- ---
## 认识 MiniStar ## Learn MiniStar
`MiniStar` 是一套完整的微内核架构开发工具链,`tailchat`的插件架构就是基于 `MiniStar` 进行开发。 `MiniStar` is a complete microkernel architecture development toolchain, and the plugin architecture of `tailchat` is developed based on `MiniStar`.
关于更多的 `MiniStar` 相关问题可以查看 `MiniStar` 的官方文档: [https://ministar.moonrailgun.com/](https://ministar.moonrailgun.com/) Learn more about `MiniStar`, you can check the official documentation of `MiniStar`: [https://ministar.moonrailgun.com/](https://ministar.moonrailgun.com/)
## 创建一个基础项目 ## Create a base project
首先创建一个基本的 npm 项目, 并全局安装 `MiniStar` First, create a basic npm project and install `MiniStar` globally
```bash ```bash
npm install --global mini-star npm install --global mini-star
``` ```
在项目中执行: `ministar createPlugin` 来创建一个基本的插件 Execute: `ministar createPlugin` in the project to create a basic plugin
在项目中执行: `ministar buildPlugin` 来编译插件 Execute: `ministar buildPlugin` in the project to compile the plugin
> 值得一提的是, 虽然 `Tailchat` 并没有强制规定插件命名规范,但是还是推荐使用 `反域名` 的命名方式(类似于java中的包命名), 然后对插件中的部件,使用 `/` 进行分割 > It is worth mentioning that although `Tailchat` does not enforce the naming convention of plugins, it is still recommended to use `anti-domain name` naming method (similar to package naming in java), and then use `/` for the components in the plugin to split
> >
> 如: > such as:
> 插件名: `com.msgbyte.webview`
> >
> 注册内容: `com.msgbyte.webview/grouppanel` > Plugin name: `com.msgbyte.webview`
>
> Registration content: `com.msgbyte.webview/grouppanel`
## 安装插件 ## Install Plugin
### 手动安装插件 ### Manually install plugin
在不经过任何预设的情况下,一个通用的办法是自己构造一个 `manifest` 配置, 然后在 `tailchat` 提供手动安装插件 Tab 中将配置文件粘贴进去安装。 Without any presets, a general method is to construct a `manifest` configuration by yourself, and then paste the configuration file into the tab of `tailchat` to provide manual installation plug-ins for installation.
插件的url路径可以通过 `oss对象存储服务` / `static-server` 等办法代理 The url path of the plugin can be proxied through methods such as `oss object storage service` / `static-server`
一个作为示例的`manifest.json`配置如下: An example `manifest.json` configuration is as follows:
```json ```json
{ {
"label": "网页面板插件", "label": "Web Panel Plugin",
"name": "com.msgbyte.webview", "name": "com.msgbyte.webview",
"url": "/plugins/com.msgbyte.webview/index.js", "url": "/plugins/com.msgbyte.webview/index.js",
"version": "0.0.0", "version": "0.0.0",
"author": "msgbyte", "author": "msgbyte",
"description": "为群组提供创建网页面板的功能", "description": "Provides groups with the ability to create web panels",
"requireRestart": false "requireRestart": false
} }
``` ```
## 其他有用的资源 ## other helpful resources
- 插件化架构内核依赖库 [MiniStar](https://ministar.moonrailgun.com/) - Plugin architecture kernel dependency library [MiniStar](https://ministar.moonrailgun.com/)
- 来自基础项目提供的API: [API 文档](./api/common) - From the API provided by the base project: [API Documentation](./api/common)
- 导出接口源码 - Export interface source code
- [@capital/common](https://github.com/msgbyte/tailchat/blob/master/client/web/src/plugin/common/index.ts) - [@capital/common](https://github.com/msgbyte/tailchat/blob/master/client/web/src/plugin/common/index.ts)
- [@capital/component](https://github.com/msgbyte/tailchat/blob/master/client/web/src/plugin/component/index.tsx) - [@capital/component](https://github.com/msgbyte/tailchat/blob/master/client/web/src/plugin/component/index.tsx)

@ -11,18 +11,6 @@
"message": "插件列表", "message": "插件列表",
"description": "The label for category 插件列表 in sidebar tutorialSidebar" "description": "The label for category 插件列表 in sidebar tutorialSidebar"
}, },
"sidebar.tutorialSidebar.category.视频会议": {
"message": "视频会议",
"description": "The label for category 视频会议 in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.开发插件": {
"message": "开发插件",
"description": "The label for category 开发插件 in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.API 接口": {
"message": "API 接口",
"description": "The label for category API 接口 in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.项目贡献": { "sidebar.tutorialSidebar.category.项目贡献": {
"message": "项目贡献", "message": "项目贡献",
"description": "The label for category 项目贡献 in sidebar tutorialSidebar" "description": "The label for category 项目贡献 in sidebar tutorialSidebar"
@ -39,8 +27,20 @@
"message": "进阶使用", "message": "进阶使用",
"description": "The label for category Advanced Usage in sidebar tutorialSidebar" "description": "The label for category Advanced Usage in sidebar tutorialSidebar"
}, },
"sidebar.tutorialSidebar.category.cli": { "sidebar.tutorialSidebar.category.Cli": {
"message": "命令行终端", "message": "命令行终端",
"description": "The label for category cli in sidebar tutorialSidebar" "description": "The label for category Cli in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Video Conference": {
"message": "视频会议",
"description": "The label for category Video Conference in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Develop plugins": {
"message": "开发插件",
"description": "The label for category Develop plugins in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.API Interface": {
"message": "API 接口",
"description": "The label for category API Interface in sidebar tutorialSidebar"
} }
} }

Loading…
Cancel
Save