# @duskmoon-dev/components 中文文档
规范地址：https://npmcn.com/package/%40duskmoon-dev/components/
版本：0\.6\.4
npm 元数据更新时间：2026-11-12T16:08:34.214Z
中文译文更新时间：2026-11-13T01:57:17.829Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/components
原文对照：https://npmcn.com/package/%40duskmoon-dev/components/?lang=original
项目主页：https://github.com/duskmoon-dev/duskmoon-react#readme
源码仓库：https://github.com/duskmoon-dev/duskmoon-react
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：4.1 MB，563 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=19\.0\.0，lexical 0\.53\.0，react-dom \>=19\.0\.0，@lexical/history 0\.53\.0，@duskmoon-dev/core \>=1\.21\.5，@lexical/plain-text 0\.53\.0
- 首次发布：2026-06-11T09:55:58.765Z
- 最新版本发布：2026-11-12T16:08:33.241Z
- 近 30 天下载量：2502（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）
## 中文简介
黄昏月回放组件包.
## 安装
```sh
npm install @duskmoon-dev/components
```
也可以使用：`pnpm add @duskmoon-dev/components`、`yarn add @duskmoon-dev/components`、`bun add @duskmoon-dev/components`
## README
# @ duskmoon- dev/ 组件
黄昏月回放组件包.
## 安装
```bash
bun add @duskmoon-dev/components @duskmoon-dev/core react react-dom
```
在您的应用程序中导入样式表一次 :
```tsx
import "@duskmoon-dev/components/styles.css";
```
## 特征
- **反应19准备**: 组件和示例针对当前 React 运行时间.
- **先输入脚本**:公用道具和助手API有申报.
- **模块导出**: 从根包或组件子路径导入.
- **黄昏月亮造型**: 组件类别和CSS由 `@duskmoon-dev/core`。 。 。 .
## 使用量
```tsx
import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";
export default function MyComponent() {
return ;
}
```
根导入也得到支持:
```tsx
import { Button, DmTable, theme } from "@duskmoon-dev/components";
```
## 公众表面
- 79个标准部件,如 `Button`, (中文(简体) ), `Chat`, (中文(简体) ), `OtpInput`, (中文(简体) ), `Swap`, (中文(简体) ), `Fab`, (中文(简体) ), `Megamenu`, (中文(简体) ), `ConsolePage`, (中文(简体) ), `Table`, (中文(简体) ), `Modal`, (中文(简体) ), `Select`,以及 `Typography`。 。 。 .
- 21 DuskMoon工作流程组件,例如 `DmLayout`, (中文(简体) ), `DmSearch`, (中文(简体) ), `DmTable`, (中文(简体) ), `DmProTable`,以及 `DmToolbar`。 。 。 .
- 13个基础设施出口,包括: `theme`, (中文(简体) ), `version`, (中文(简体) ), `unstableSetRender`, (中文(简体) ), `GetProps`, (中文(简体) ), `GetRef`,以及 DuskMoon 主题助手.
- 组件子路径导出如下 `@duskmoon-dev/components/{component-id}`, (中文(简体) ), 比如说 `@duskmoon-dev/components/date-picker`。 。 。 .
`OtpInput` 使用一个带有装饰槽的本地输入. `Swap` 使用本地语言 复选框. `Fab`, (中文(简体) ), `Megamenu`移动菜单 `ConsolePage` 使用该 浏览器的"Popover API"用于开机,"逃生"解职,以及焦点恢复. 这些组成部分要求 `@duskmoon-dev/core` 1.20.0或较新.
`Form.Item` 将其标签与单一儿童控制联系起来 现有儿童 `id`对于复合控制,通过 `htmlFor` 目标 控制系统 `id`。 。 。 . `Badge appearance="outline"` 输出两者 `badge-outlined` 财务报告和审定财务报表 支持对象 `badge-outline` 别名.
`Chat.Scroll` 提供有粘接回放铁路的固定高度记录. 配对助手行和指示按钮,时间档为 1–24;用户行 不需要勾选. `Chat.Status` 财务报告和审定财务报表 `Chat.Actions` 接受普通内容和 按钮召回,所以应用程序拥有生成状态和度量. 这个 聊天文件包括RTL、活状态、工具状态、消息动作和核心 1.20.6 代理,队列和长信息合同. 使用 `Chat.Agent` 与 `Chat.Content` 用于未装箱的助手回答。 土著群体活动 `Chat.Work`, (中文(简体) ), `Chat.WorkSummary` 财务报告和审定财务报表 `Chat.WorkBody` 披露,保留最终 回答他们。 使用用户信息 `Chat placement="end"` 财务报告和审定财务报表 `Chat.Bubble`· ; 选择加入 `collapsible` 用于自动六行测量、调整大小/文本更新, 无障碍扩展和重点清理。 包裹现在需要核心1.21.1, 提供了共享的编译器编辑器、附件、建议和状态部分.
`Chat.InputArea` 附加受控 `Chat.Queue` 改为本地 `Chat.ComposerForm`, (中文(简体) ), `Chat.ComposerInput`, (中文(简体) ), `Chat.ComposerActions` 财务报告和审定财务报表 `Chat.ComposerHint` 原始的 原始的 原始的 队列项目稳定 `id`编号 :`text` 价值和价值 选项 `{ src, alt }` 附录. `onSteer` 财务报告和审定财务报表 `onRemove` 请求申请 动作; 元件从不在本地调队。 供应 `pendingIds` 等待期间 只有在成功后才承认和更新项目。 删除后恢复焦点 一个焦点行,并在申请状态区域中一次宣布队列变化. 应用程序拥有 Enter/Shift+ Enter/stering, IME 守护, 运输, 订购 和失败政策。 互动文件显示了这些实际状态变化.
现有控制 `Chat.Composer` 保留其参考文献、附件和 完成 API 、 修订安全同步的草稿清除和 Cmd/Ctrl+ 输入 以普通格式提交 Enter for new lines。 使用本地作曲原创 当需要提交表格和参考文献的“从输入到排队”合同时. 供应 `scope={{ contextKey, conversationId }}` 重用 作曲器时 寄存器或对话框: 逾期接受或错误 范围无法清除当前草案或调用其错误处理器。 待录取 叶可编辑. 主机仍然拥有被控制的草稿和文件.
作曲者动作使用可访问名称的图标按钮和 `title` 两者中的提示 排布图. `attachLabel`, (中文(简体) ), `sendLabel` 财务报告和审定财务报表 `stopLabel` 自定义这些名称和提示. 附件重试/取消/删除和默认队列动作遵循相同的模式 . 共享作曲作曲编曲为0.5rem.
设定 `compact` 打开 `Chat.Composer`, (中文(简体) ), `ChatSessionComposer` 或者说 `RichChatComposer` 带有无障碍图标按钮和水平条的紧凑工具栏 简单的现成图像缩略图。 混合文件、准备、错误和自定义 附件渲染器保留整行。 默认的包装布局仍然保留 可用。 通过主机所属设置编译 `children`,使用 Core 本地语言 `popover chat-composer-menu` 当需要配置菜单时. 契约 `+` 打开文件的本地添加菜单, 明确的草稿保存/ 重新装入 和可选 `addMenu` 内容。 常规保存/接纳状态不发布 添加行数。 它的主按钮发送合格草稿或停止运行回合 当无法提交时;默认布局保留单独的控制.
根状和 `/chat` 导出还提供独立编辑器 `ComposerDocument`, (中文(简体) ), `ComposerDraft`、提交/接收、提供者、附件和队列类型. `readComposerDocument` 财务报告和审定财务报表 `readComposerDraft` 保存不兼容的输入 复原; `snapshotComposerDocument` 财务报告和审定财务报表 `snapshotComposerSubmission` 验证, 复制并冻结便携式JSON. `exportComposerText` 财务报告和审定财务报表 `exportComposerMarkdown` 项目参考文献 `plainText` 并保留引号归属。 无效 快照抛出而不是默默地丢弃未支持的字段 。 可移植 实例公布于 `@duskmoon-dev/components/chat/contracts.v1.json`。 。 。 . `ChatSessionComposer` 使用带有受控制语义文件的合同, 应用程序拥有 `ComposerSessionHost`、范围和钥匙草稿。 原画 字符串/ 基于文件 `Chat.Composer` 现有参考文献 召回电话。 可选编辑器单独导入:
```tsx
import { useState } from "react";
import type {
ComposerDocumentUpdate,
ComposerScope,
ComposerSessionHost,
} from "@duskmoon-dev/components/chat";
import { RichChatComposer } from "@duskmoon-dev/components/chat/rich";
export function PromptBox({
host,
scope,
}: {
host: ComposerSessionHost;
scope: ComposerScope;
}) {
const [value, setValue] = useState({
document: { schemaVersion: 1, content: [{ type: "text", text: "" }] },
revision: 0,
origin: "replace",
originId: "initial-draft",
});
return (
);
}
```
使用 `ChatSessionComposer` 从根或 `/chat` 仅限文本的相同道具 语义作稿. RichChatComposer 只能从 `/chat/rich`保留 消费者中同样直接导入Lexical的单相容的Lexical运行时间; 普通根和 `/chat` 进口不会初始化.
每一个回声 `onDocumentChange` 更新情况不变。 丰富的编辑器保留选择 并取消回声; 明确替换、恢复、范围开关和清晰操作 重设其历史. 重载还原语义内容, 而不是取消历史 。 参考文件 插入引用、引用、文本和请求的命令,而不披露Lexical. 引用和引用是原子学. 声称的命令身份与 可编辑技能文本。 丰富的副本/剪接包括便携式语义内容和平面 文本; 丰富的粘贴创建了新的出现 ID, 而外部粘贴则使用纯 语句。 混合文件/文本粘贴通过共享保存文本并验证文件 拾取/粘贴/投放政策。 不支持的内容留作回收之用 如果编辑器无法装入或草稿不兼容,则会静静地平地.
保留 `host.recovery = createComposerRecoveryOwner()` 编辑器挂载外 一辈子 待决和未知的企图保留了完全不可更改的划界案 快照和身份证 经接受的及时报告实际提交和持续; 一个被接受的命令返回一个结果,而不要求队列的即时或转动. 未知结果保存草稿:使用 `host.reconcile` 在任何时间之前 明确 `host.authorizeRetry` 同样的快照。 录取尚未完成 生成。 停车是分开的 `onStop` 动作,在文件时仍然可用 正在筹备或接收。 主机能力决定哪个活动回合 意图和控制是可用的.
可选 `attachmentOptions` 校验和准备每个文件发生, 使用 取消、进展、失败和重试。 只允许手柄输入一个 提交; 运行时间 `File` 对象和预览 URL 远离已保存的文档. 恢复的文件需要重新附加, 除非主机明确确认手柄 复原。 稳定的可选 `draftAdapter` 装入范围草案并支持明确 保存草稿; 存储耐用性、 保留和与其他作者的协调 属于应用程序。 UI 从未自动覆盖不兼容 存储内容.
`providers` 提供同步候选人范围、已停用的原因、目录 钻入/启动动作。 在紧凑模式下,结果在本地打开 弹出在作曲家上方,有分组行,键盘导航,过滤和 当地解雇。 可选提供者 `icon` 财务报告和审定财务报表 `sourceLabel` 装饰行; 它们从未输入便携式文件或呈件。 使用线索 `/` 提供者 技能和命令: 技能插入可编辑的指令, 富人声称 命令在提交前保留其身份,以及 `invoke` 动作呼叫 `onProviderInvoke` 独立。 纯编辑器支持文本技能和主机 引用;声称的命令需要富人编辑. 主机决定并授权引用, 引用出处、命令和附件控件;便携式有效性不是 授权. `ChatAuthoritativeQueue` 作出确认的预测和请求 编辑/删除/促进突变。 应用犬类预测 `onProjection`;乐观的点击不能确认成员或顺序. `ComposerSettings` 同样,在主机确认之前,对数值进行控制 并应用请求。 主机拥有运输,模型执行,上传, 专一、坚持和执行政策。 Chat 文档包括 具有真实本地状态过渡的交互式假主机实例; 它们的内存 存储幸存的编辑器只重新挂载,不提出持久交货要求.
### 设置菜单、上下文和时间表批准
核心 **1.21.5或更新** 需要时间。 从包根导入这些 API 或 `@duskmoon-dev/components/chat`; 导入 `@duskmoon-dev/components/styles.css` 用于完整的 Core 和 React 样式表.
`ComposerSettings variant="menu"` 使用相同的序列化请求、修订、, 中止并承认协议为默认选择的演示文稿 。 选择 接受元数据 `description`, (中文(简体) ), `tone="warning"` 财务报告和审定财务报表 `icon`。一个 `ordered` 设置 选择一个范围,并要求更改指针/键释放; `defaultValue` 启用重置 . `groups` 组合 `settingIds` 在扳机下, 可选 `nestedSettingIds` 财务报告和审定财务报表 `appearance="access" | "model"`数值 仍由东道方控制,包括拒绝或陈旧的承认. 菜单在选择后关闭; 状态反馈仍然在它们之外宣布 .
两者 `Chat.Composer` 财务报告和审定财务报表 `ChatSessionComposer` 接受 `context`,第一个 在作曲家内部 编曲 `Chat.ComposerContext`, (中文(简体) ), `Chat.ComposerContextItem`, (中文(简体) ), `Chat.ComposerContextEnd` 财务报告和审定财务报表 `Chat.ComposerConnection` 在这里。 项目接受 `icon` 和可选 `action` 需要无障碍 `label` 财务报告和审定财务报表 `onClick`。 。 。 . 连接 `state` 实值 `connected`, (中文(简体) ), `connecting` 或者说 `disconnected`· ; `label` 自定义其可见状态。 Core 加入 栏 默认、 紧凑和 幽灵 使用共享套件的作曲面;不需要额外的消费CSS.
地点 `Chat.Request` 旁边 `Chat.Tool` 内部 `Chat.Agent`供应a `title`, (中文(简体) ), 细节和命令 `actions` (单位:千美元)`id`, (中文(简体) ), `label`, (中文(简体) ), `onSelect`选项 `tone="primary" | "danger"`) (中文(简体) ). 主机拥有 `pending` 决定和决定 `state`数字 : `pending`, (中文(简体) ), `approved`, (中文(简体) ), `approved-for-session`, (中文(简体) ), `declined`, (中文(简体) ), `expired` 或者说 `answer-elsewhere`. 只有待决国家采取行动; `pending` 禁用 当他们决定的时候. `explanation` 财务报告和审定财务报表 `statusLabel` 提供主机 环境与本地化状况。 状态更新是礼貌的; 收到的更新永远不会 将焦点移出作曲者。 如果决议删除了重点决定,则焦点 继续按这个要求进行而不滚动.
核心1.21.1仍有已知的月光对比差距,用于中性平面/幽灵 标签([黄昏月桂#78](https://github.com/duskmoon-dev/duskmoonui/issues/78)) (中文(简体) ). 在要求完全调色板无障碍之前,需要上游固定.
现有 `Chat.Bubble streaming` 仍可使用; `Chat.Content streaming` 这是 首选代理演示文稿。 公共Chat API不被删除或贬值.
常规 `Tooltip` 按钮/链接触发器使用本地 `interestfor`,提示弹出器 还有CSS主播 浏览器必须支持这些 API; 没有特性多填充 . 保持必要的帮助内线。 已控制 `open` 使用本地手动弹出器; 非投票儿童保留旧的必备兼容适配器。 自定义 触发组件必须转发 `interestfor`, (中文(简体) ), `style` 财务报告和审定财务报表 `aria-describedby` 让他们自己控制自己 工具提示内容简短且不互动;设置链接, 按钮和确认表。 现有贬值 `arrow` 道具仍被接受;原生地表为无箭.
```tsx
import { Chat } from "@duskmoon-dev/components/chat";
import { useId } from "react";
export function Conversation() {
const replyId = useId();
async function copyReply() {
await navigator.clipboard.writeText("The build passed.");
}
return (
The build passed.
Completed
42 token/s
);
}
```
`Modal` 需要一个具有本地特性的现代浏览器 `