# @amauryuh/components 中文文档

规范地址：https://npmcn.com/package/%40amauryuh/components/

版本：0\.14\.0
npm 元数据更新时间：2026-10-28T07:27:39.265Z
中文译文更新时间：2026-11-06T16:02:22.443Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40amauryuh/components
原文对照：https://npmcn.com/package/%40amauryuh/components/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：69.5 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=18，i18next \>=23，react-dom \>=18，tailwindcss ^4，@amauryuh/ui \>=0\.6\.1，react-i18next \>=14
- 首次发布：2026-10-27T09:12:10.274Z
- 最新版本发布：2026-10-28T07:27:39.029Z
- 近 30 天下载量：2803（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

以聊天及其对话列表为起点,为整个特性准备的React组件. 用 Tailwind CSS v4 样式

## 安装

```sh
npm install @amauryuh/components
```

也可以使用：`pnpm add @amauryuh/components`、`yarn add @amauryuh/components`、`bun add @amauryuh/components`

## README

# @ amoryuh/ 组件

整个特性的可制式反应组件,以 [`@amauryuh/ui`](https://www.npmjs.com/package/@amauryuh/ui)'布局和' 风格取自 Tailwind CSS v4 。 开始聊天及其列表 谈话.

## 安装

```sh
npm install @amauryuh/components @amauryuh/ui i18next react-i18next
```

同伴依赖性 : `react` 财务报告和审定财务报表 `react-dom` (18岁以上), `tailwindcss` (v4级), `@amauryuh/ui` (0.6.1+), (中文(简体) ), `i18next` (23+)和(23+) `react-i18next` (14+) (英语).

尾风跳过 `node_modules`,因此在后面导入两个软件包的样式表 尾风:

```css
@import "tailwindcss";
@import "@amauryuh/ui/styles.css";
@import "@amauryuh/components/styles.css";
```

## 聊天

Apple Messages 风格的完整消息应用程序:聊天列表 在边栏, 和开放聊天旁边。 它看起来像消息在 iPhone 在小屏幕上, 和像 Mac 上的信件来自 `md` 起来.

-   **列表 :** 用户的外观和名称,按标题搜索,文件夹标签和每聊天一行 最新消息和一个未读的点(见 [说吧 列表](https://npmcn.com/package/%40amauryuh/components/#readme-chatlist)) (中文(简体) ).
-   **标题栏 :** 移动( 它打开列表) 上的后按钮 avatar和标题,以及缩小日志的搜索.
-   **日志 :** 日线(旧消息的年份),运行时间 每一个发件人发的讯息, 上面有一个尾巴, 引用的答复, 备份、视图计数和“已交付”.
-   **作曲家 :** 字段上方的回复预览。 用单笔答复 emoji对消息的反应代替.
-   **类型 :** 直接聊天、分组和频道(参见 [类型](https://npmcn.com/package/%40amauryuh/components/#readme-types)) (中文(简体) ).
-   **答复:** 悬浮或键盘焦点上的气泡旁的回放按钮, 或者在触摸屏上,左侧是刷子。 点击一个引用跳转到 原创的.
-   **动议 :** 将新信件弹出并推出日志。 日志保留在 最新消息, 除非用户已滚动 .

`Chat` 每次聊天都取出一个后端, 并保留哪个打开 本身:列表的一行打开其聊天,所以后端不依赖 在应用程序的地址或路线。 生来无子,如下所出 准备使用: `Layout` 联 合 国 `@amauryuh/ui`列表中 它的侧边栏和旁边的公开聊天 有孩子,它只提供 州和你们列出部分 [部件](https://npmcn.com/package/%40amauryuh/components/#readme-parts)) (中文(简体) ).

```tsx
import { Chat, type IChat } from "@amauryuh/components";

export default function App() {
  const { conversations, post, react, mute, read } = useMyChats(); // your data

  const backend: IChat = {
    user: { name: "Alex Kim", avatar: "/alex.jpg" },
    chats: conversations.map((c) => ({
      id: c.id,
      info: { type: c.type, title: c.title, muted: c.muted },
      messages: c.messages,
      folders: c.labels, // e.g. ["Work"]
      unread: c.unread,
    })),
    post,
    react,
    mute,
    read,
  };

  return <Chat backend={backend} />;
}
```

### 后端 : `IChat`

普通数据和回调,与打开的聊天方式相同. 继续 从你的状态,例如从套接字或商店。 每个动作 得到它用来聊天的id.

| 外地 |  |
| --- | --- |
| `user` | 使用应用程序的人, `{ name, avatar? }`:列表上方的搜索显示. `avatar` 是一个图片的 URL;没有它,他们的首字母. |
| `chats` | `ChatConversation[]`,下面,按顺序列出. |
| `post(chatId, { content, replyTo })` | 传个消息来. 没有它,每次聊天都是只读的:没有作曲,没有回复. 频道总是只读. |
| `react(chatId, messageId, emoji)` | 切换用户的反应. 用它来回答,一个emoji的反应而不是被发送. |
| `mute(chatId, muted)` | 关闭或打开聊天通知 。 没有它,频道显示没有哑巴按钮. |
| `pin(chatId, pinned)` | 将聊天记录到列表全部标签的顶端, 或打开它 。 有了它,标题栏就有一个左侧的针键来搜索. |
| `read(chatId)` | 当一个未读的聊天在屏幕上(列表之外,或者在列表关闭后在电话上)时调用,并在消息到达时再次调用. 标记它读取,所以它的点消失. |
| `setDraft(chatId, draft)` | 保留聊天未发的回复( N)`{ replyTo?: ChatMessage }`),例如,通过访问; 把它作为聊天的 `draft`没有它,草案就被保存在记忆中. |

`ChatConversation`数字 :

| 外地 |  |
| --- | --- |
| `id` | 聊天中独一无二. |
| `info` | 关于聊天: `ChatInfo`页:1. |
| `messages` | `ChatMessage[]`,最古老的第一。 最新的是列表的预览. |
| `folders` | 其所收取的文件夹,由名取出等. `["Work"]`:列表的分页. |
| `unread` | 有用户没有看到的信息:列表中的点 . |
| `draft` | 未经同意的答复,保留在 `setDraft`。 。 。 . |

`ChatInfo`数字 :

| 外地 |  |
| --- | --- |
| `type` | `"direct"`, (中文(简体) ), `"group"` 或者说 `"channel"`。见 [类型](https://npmcn.com/package/%40amauryuh/components/#readme-types)。 。 。 . |
| `title` | 在列表和标题栏中显示,并有其首字母的外观. |
| `muted` | 通知被关闭:列表中有一个铃声,哑巴按钮主动提出开启. |
| `pinned` | 在列表的"All"分页的首位,其行上有一针;取出一针按钮来解开它. |

`ChatMessage`数字 :

| 外地 |  |
| --- | --- |
| `id`, (中文(简体) ), `content`, (中文(简体) ), `from` | `from` 是发送者的显示名. |
| `own` | 由用户编写:在右边,口音颜色. |
| `time` | ISO 8601 (英语). 驱出昼出时行. |
| `replyTo` | 引用的信息, `{ id?, from, content }`与 `id`将引文跳到原作中. |
| `reactions` | Emoji在气泡的一角亮相. |
| `views` | 信件下的视图计数, 例如一个频道中的帖子 . |

### 类型

这些部分适应 `info.type`数字 :

| 类型 |  |
| --- | --- |
| `direct` | 二人:信息上没有名字或异形. |
| `group` | 每次运行上方的名字,以及旁接他人消息的相声. |
| `channel` | 要读的帖子 有名字 页脚显示一个哑巴按钮而不是作曲家,消息无法被回复. |

将新类型的聊天作为类型添加到软件包中, 因此每个应用程序都会得到 他们.

### 其他道具

-   `children`: 您自己的部件布局 。 没有它, `Chat` 调制 全文 `Layout`。 。 。 .
-   `className`:用于现成 `Layout`带着孩子,把它送给 属于你自己的.
-   `classNames`: 见 [样式](https://npmcn.com/package/%40amauryuh/components/#readme-styling)。 。 。 .

### 翻译

组件使用您的应用程序的 i18 次例通过 `react-i18next`。 。 。 . 软件包从不初始化 i18next 并且不使用本地语: 您的应用程序集 i18 照旧,与 `initReactI18next` 或一个 `I18nextProvider`, (中文(简体) ), 而组件遵循它的语言。 增加翻译 `components` 命名空间( 导出为 `namespace`:

```ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    es: {
      translation: { /* your app's strings */ },
      components: {
        chat: {
          search: "Buscar en el chat",
          views_one: "{{count}} vista",
          views_other: "{{count}} vistas",
          // …
        },
      },
    },
  },
  lng: "es",
  fallbackLng: "es",
});
```

英语是后退。 你留下的每把钥匙都用英语显示, 即使是当你 `fallbackLng` 是另一种语言,所以你可以翻译 只有一些钥匙。 英语不需要资源;为了修改其措辞,添加 `en.components`。其字符串导出为 `en`,例如作为模板. 没有i18next实例,组件显示英语.

日期和数字以 i18next 当前语言格式化, 所以使用 你要的密码,例如. `es-419`。修改语言 (单位:千美元)`i18n.changeLanguage`重新交代聊天内容,包括其日期.

每把钥匙,在下面 `components`数字 :

| 密钥 | 联合国 | 何处 |
| --- | --- | --- |
| `chat.back` | 回来 | 标题栏的后键( 移动) , 打开侧边栏 |
| `chat.search` | 在聊天中搜索 | 搜索按钮和搜索字段的占位符 |
| `chat.closeSearch` | 关闭搜索 | 关闭搜索的按钮 |
| `chat.messages` | 信件 | 日志的可访问名称 |
| `chat.empty` | 还没有消息. | 没有消息时的日志 |
| `chat.noResults` | 搜索时没有匹配的消息 . | 搜索找不到时的日志 |
| `chat.today` | 现在 | 今日消息的日线 |
| `chat.delivered` | 已交付 | 在用户的最新消息下 |
| `chat.views_one`, (中文(简体) ), `chat.views_other` | qqcounter 视图 qqcounter 视图 | 消息视图的可访问名称 。 多元键,有i18next后缀来表示语言(例如. `_many`) (中文(简体) ). |
| `chat.message` | 消息 | 作曲家的占位符和易取的名字 |
| `chat.send` | 发送 | 发送按钮 |
| `chat.reply` | 答复 | 气泡旁边的回扣 |
| `chat.replyTo` | 正在回复 | 作曲家上面的回复预览 |
| `chat.cancelReply` | 取消回复 | 解答的按钮 |
| `chat.mute` | 静音 | 哑巴按钮, 当通知打开时 |
| `chat.unmute` | 释出 | 哑巴按钮,同时关闭通知 |
| `chat.pin` | 键 | 扣子,虽然聊天没有固定 |
| `chat.unpin` | 撤销 | 扣子按钮, 而聊天是固定的 |
| `chat.scrollToBottom` | 滚动到上一封信件 | 滚动到最新消息的按钮 |
| `chatList.search` | 搜索 | 列表的搜索字段 |
| `chatList.folders` | 文件夹 | 文件夹标签的可访问名称 |
| `chatList.all` | 全体 | 第一个文件夹标签, 每次聊天 |
| `chatList.chats` | 聊天 | 列表的可访问名称 |
| `chatList.empty` | 没有聊天匹配. | 搜索或文件夹无结果时的列表 |
| `chatList.unread` | 未读 | 未读取的点名 |
| `chatList.muted` | 静音 | 哑巴图标的可访问名称 |
| `chatList.pinned` | 绑起 | 针头图标的可访问名称 |
| `chatList.yesterday` | 昨日来 | 一行时间昨天的消息 |

要用您的其他密钥进行键入检查, 请在 i18next 中添加命名空间 `CustomTypeOptions`。 。 。 .

### 部件

每一部分均可作为 `Chat.*`。这些部分只需要 `className`数字 : 他们的表率和行为,从四周而来 `Chat`. 以 孩子们, `Chat` 只有供养者,儿童才是布局. `<Chat backend={backend} />` 与下列情况相同:

```tsx
import { Layout } from "@amauryuh/ui";

<Chat backend={backend}>
  <Layout>
    <Layout.Sidebar className="md:w-88">
      <Chat.List />
    </Layout.Sidebar>
    <Chat.Container>
      <Chat.Header />
      <Chat.Messages />
      <Chat.Footer />
      <Chat.ScrollToBottom />
    </Chat.Container>
  </Layout>
</Chat>
```

`Chat.Container` 没有孩子,这四个部分,所以布局 ,例如添加设置按钮 到列表上方栏:

```tsx
<Chat backend={backend}>
  <Layout className="bg-white">
    <Layout.Sidebar className="md:w-88">
      <Chat.List actions={<SettingsButton />} />
    </Layout.Sidebar>
    <Chat.Container />
  </Layout>
</Chat>
```

| 编 |  |
| --- | --- |
| `Chat.List` | 聊天列表为 a `Layout.Sidebar`。见 [说吧 列表](https://npmcn.com/package/%40amauryuh/components/#readme-chatlist)。 。 。 . |
| `Chat.Container` | 公开聊天,a `Layout.Container`儿童是以下部分;没有儿童,他们都是。 每次聊天都打开了新鲜的:它的搜索结束,在它的最新消息下. |
| `Chat.Header` | 标题栏: 后 (移动), 外形和标题, 然后是接针( 有 `pin`)和搜寻. 变成 `Chat.Search` 在搜索时. |
| `Chat.Search` | 搜索场及其关闭按钮. |
| `Chat.Messages` | 容器卷轴体中的日志. |
| `Chat.Footer` | 下边栏 : `Chat.Composer`,或在频道中 `Chat.MuteButton`。边走边搜索. |
| `Chat.Composer` | 字段,发送按钮并回复预览. 在用户无法发布的地方, 显示任何内容 . |
| `Chat.MuteButton` | 关闭或打开通知 `mute` 从后端。 无所取出无所取出. |
| `Chat.ScrollToBottom` | 将用户带回最新消息, 一旦滚动. |

自己的部分可以读取状态:

-   `useChats()`,任何内部 `Chat`数字 : `backend`, (中文(简体) ), `open` (开放) 聊天时, `setOpen(chatId)` 打开另一个,和 `draftOf(chatId)`。 。 。 .
-   `useChatContext()`内部 `Chat.Container`: 打开 `chat`, (中文(简体) ), `canPost`, (中文(简体) ), `post`, (中文(简体) ), `react`, (中文(简体) ), `mute` 财务报告和审定财务报表 `pin` 对于它, `messages` (过滤由 寻找, `search`, (中文(简体) ), `setSearch`, (中文(简体) ), `draft`, (中文(简体) ), `setDraft`, (中文(简体) ), `reply` 财务报告和审定财务报表 `jumpTo`。例如,您自己的脚步可以隐藏在 `search !== null`按钮 `reply(message)`。 。 。 .

### 有远见

`Avatar` 显示图片( e)`src`或者一个名字的首字母在一圈, 就像聊天时的化身一样 它需要没有 `Chat` 围绕它:

```tsx
import { Avatar } from "@amauryuh/components";

<Avatar className="size-9 text-sm" name={user.name} src={user.photo} />
```

### 说吧 列表

后端的聊天,一个 `Layout.Sidebar`它有:

-   **顶端栏 :** 后门的 `user`和他们的名字,在 左边,右边你自己 `actions` (例如设置按钮). 没有两个,没有顶部酒吧.
-   **搜索** 根据标题.
-   **文件夹标签 :** 所有,然后每一个文件夹 聊天的顺序 他们首先出现。 没有聊天的文件夹就藏起来了.
-   **每聊天一行 :** avatar, 标题, 哑音图标, 其最新时间 消息(今天的时间,然后是"昨天", 工作日,白天和 日期)和两行预览. 未读聊天得到点.
-   **锁定聊天** (单位:千美元)`info.pinned`来第一,在后端 命令,在他们的行右侧有一针。 文件夹保存 后端的订单.

一行打开聊天,并关闭移动边栏. 公开聊天是 标记为 `aria-current="page"` 并变出蓝色,两相间 视图。 列表的插槽从 `list`。 。 。 .

### 样式

每个部分有一个带有默认类的插槽(`chatStyles`) (中文(简体) ). 类是 与 `tailwind-merge`,后者获胜:

1.  空档的默认值,
2.  `classNames` 授予 `Chat`按档次,
3.  该部分的自身 `className`。 。 。 .

版式和行为类(弹性、位置、短线、隐藏) 因此,样式可以改变一切,但 设置.

```tsx
<Chat
  backend={backend}
  classNames={{
    bubble: "rounded-lg data-own:bg-emerald-600",
    composer: "rounded-lg bg-slate-100 shadow-none",
  }}
/>

<Chat.Composer className="bg-amber-100" />
```

部分状态在数据属性中,到有Tailwind变体的样式:

| 属性 | 打开 |
| --- | --- |
| `data-own` | `column`, (中文(简体) ), `bubble`, (中文(简体) ), `quote`, (中文(简体) ), `quoteText`, (中文(简体) ), `reactions` |
| `data-last` | `bubble` (最后一次跑道:更紧的一角和一尾,用 `::before`(中文(简体) ) |
| `data-arrived` | `bubble` (刚刚进来;动画) |
| `data-highlighted` | `message` (跳过后) |
| `data-gap="sender" | "reactions"` | `message` (空间在上面) |
| `data-hidden` | `footer` (同时搜索) |

数量 `Chat.List`数字 : `listPanel`, (中文(简体) ), `listHeader`, (中文(简体) ), `listUser`, (中文(简体) ), `listUserAvatar`, (中文(简体) ), `listUserName`, (中文(简体) ), `listSearch`, (中文(简体) ), `listSearchInput`, (中文(简体) ), `listFolders`, (中文(简体) ), `listFolder` (单位:千美元)`data-selected` 以被选中者发誓, `list`, (中文(简体) ), `listRow` (单位:千美元)`aria-current="page"` 在开口的时候, `listRowText`, (中文(简体) ), `listRowTitle`, (中文(简体) ), `listRowMuted`, (中文(简体) ), `listRowTime`, (中文(简体) ), `listRowAvatar`, (中文(简体) ), `listRowChevron`, (中文(简体) ), `listRowPinned`, (中文(简体) ), `listRowPreview`, (中文(简体) ), `listUnread`, (中文(简体) ), `listEmpty` 财务报告和审定财务报表 `avatar`。 。 。 .

数量 `Chat`数字 : `root`, (中文(简体) ), `header`, (中文(简体) ), `headerBar`, (中文(简体) ), `headerActions`, (中文(简体) ), `headerButton`, (中文(简体) ), `headerAvatar`, (中文(简体) ), `title`, (中文(简体) ), `search`, (中文(简体) ), `searchInput`, (中文(简体) ), `messages`, (中文(简体) ), `empty`, (中文(简体) ), `log`, (中文(简体) ), `dayLine`, (中文(简体) ), `message`, (中文(简体) ), `column`, (中文(简体) ), `sender`, (中文(简体) ), `senderAvatar`, (中文(简体) ), `bubble`, (中文(简体) ), `quote`, (中文(简体) ), `quoteAuthor`, (中文(简体) ), `quoteText`, (中文(简体) ), `reactions`, (中文(简体) ), `replyButton`, (中文(简体) ), `swipeHint`, (中文(简体) ), `views`, (中文(简体) ), `delivered`, (中文(简体) ), `footer`, (中文(简体) ), `composer`, (中文(简体) ), `replyPreview`, (中文(简体) ), `replyPreviewTitle`, (中文(简体) ), `replyPreviewText`, (中文(简体) ), `cancelReply`, (中文(简体) ), `input`, (中文(简体) ), `sendButton`, (中文(简体) ), `muteButton`, (中文(简体) ), `scrollToBottom` 财务报告和审定财务报表 `avatar`。 。 。 .

要同时重塑每个部分, 请重新定义您自己的主题变量 `@theme`数字 :

```css
@theme {
  --color-chat-accent: #0a72e8; /* own bubbles, buttons */
  --color-chat-bubble: #e9e9eb; /* other people's bubbles */
  --color-chat-label: #000;
  --color-chat-secondary: #6d6d72;
  --color-chat-separator: #d1d1d6;
  --color-chat-fill: #7676801f; /* search fields, folder tabs */
  --color-chat-panel-top: #f6f6f7; /* the list's panel (md+) */
  --color-chat-panel-bottom: #f1f1f3;
  --color-chat-avatar-top: #b5bacd;
  --color-chat-avatar-bottom: #8a8fa6;
  --text-chat-body: 1.0625rem;
  --text-chat-subhead: 0.9375rem;
  --text-chat-footnote: 0.8125rem;
}
```

到达的动画是 `animate-chat-bubble-in` 财务报告和审定财务报表 `animate-chat-bubble-sent`。它们只在用户不要求时运行 减少运动.

## 常见问题

### @amauryuh/components 是什么？

以聊天及其对话列表为起点,为整个特性准备的React组件\. 用 Tailwind CSS v4 样式

### 如何安装 @amauryuh/components？

在项目目录运行 npm install @amauryuh/components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、i18next（\>=23）、react-dom（\>=18）、tailwindcss（^4）、@amauryuh/ui（\>=0\.6\.1）、react-i18next（\>=14）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @amauryuh/components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @amauryuh/components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @amauryuh/components 可以商用吗？

@amauryuh/components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @amauryuh/components 的下载量有多少？

根据 npm 官方下载统计，@amauryuh/components 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,803 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @amauryuh/components 还在维护吗？

最新版本 0\.14\.0 发布于 2026/10/28（10 天前）；至今共发布 16 个版本，其中过去 12 个月发布了 16 个；首次发布于 2026/10/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。