# @dcs-tech/ui 中文文档

规范地址：https://npmcn.com/package/%40dcs-tech/ui/

版本：0\.13\.0
npm 元数据更新时间：2026-11-12T10:41:50.992Z
中文译文更新时间：2026-11-14T13:47:08.453Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：3 MB，519 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-07-31T06:28:52.045Z
- 最新版本发布：2026-11-12T10:41:50.354Z
- 近 30 天下载量：2021（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

反应UI组件库——字段,按钮,工具提示,表格和设计符.

## 安装

```sh
npm install @dcs-tech/ui
```

也可以使用：`pnpm add @dcs-tech/ui`、`yarn add @dcs-tech/ui`、`bun add @dcs-tech/ui`

## README

# @dcs-tech/ui (英语)

反应 UI 组件和设计符号——窗体字段、按钮、工具提示、弹出和 原始布局,基于一个共享控制表面,所以每个控制都同意 大小、间隔和状态.

## 安装

```bash
npm i @dcs-tech/ui react react-dom
```

反应 `>=18` 是一个对等依赖 。 您的应用程序会带它自己的副本 .

## 使用

```tsx
import { Button, Input, Select, Suggest, Tooltip, Typography } from '@dcs-tech/ui';
import '@dcs-tech/ui/style.css';   // tokens + component CSS, import once at the root

export const Example = () => (
  <>
    <Input label="Party name" tooltip="Legal name as printed on the invoice" />
    <Select label="Material" options={[{ name: 'Cotton', value: 'cotton' }]} search group />
    <Tooltip content="Deletes this row"><Button color="error">Delete</Button></Tooltip>
    <Typography variant="body1" truncate={{ lines: 2 }}>Long text…</Typography>
  </>
);
```

## 里面有什么东西

-   **字段** - 输入、选择、建议、日期选择器(一天、范围或 `picker="month"` 编号 : `"year"`),复选框,收音机,开关,芯片输入(包括自由文本) `tags`),所有共享一个 控制表面、6步大小和1个状态模型
-   **图像** ——"图像选取器","图像选取器","图像选取器","图像编辑器"(剪接,缩放,旋转, 直线,翻转;每个工具都可以被允许或限制). `prepareImage` 应用相同的 无 UI 转换
-   **重叠** - 对话(`useDialog()` 以证实; `DialogHost` 如果您没有使用 `UIProvider`, (中文(简体) ), 翻接、倒下梅努、土司
-   **初级** 按钮、打字、工具提示、警报(全页) `banner` 表单)
-   **导航** - 链接(`as` 使用路由器的链接, Pagination, CommandPalette Trigger, Page 进度(由 `active`), NavList(用于 页面内)
-   **版式** ——可折叠,菲尔德Wrapper
-   **名单** —— 重排列表( 拖放到重排: 活起行幻灯片, 有鼠标、 触摸或键盘)
-   **复合材料** - 窗体、字段、可编辑表
-   **数据** 数据表(客户数据或服务器) `dataSource`: 视图、搜索、过滤器、, 排序、 分组、 列选择器、 表格 / 牌 / 分割布局, `toolbarActions`,选择+批量 动作(表格报告 `onRun` 返回,如果它不返回,则不返回),带有图表的页眉/页脚摘要,导出为 xlsx / pdf / csv / html / json / xml)和图 (图, 列图, BarList, Donut, 进步, 传奇, 图表表,行图,漏斗,高地,树图,... 有图片菜单)
-   **滚动** 一个滚动条规则( 稀释, 隐藏到需要时) `style.css`边 逐渐消失(`.scroll-fade-x` 编号 : `.scroll-fade-y`和 `ScrollStrip` 用于标签/芯片行. `UIProvider` 启动它的倾听者;没有它,就挂起它 `<ScrollRule />` 一次
-   **键** ——可变主题: `--primary-hue: 211` 重新插入整个调色板 从一个数字键入轻而暗的主题 `data-theme`

### 数据表和图表

```tsx
import { DataTable, Donut, type DataTableView } from '@dcs-tech/ui';

const view: DataTableView<Order> = {
  id: 'all', rowKey: 'id',
  columns: [
    { key: 'customer', header: 'Customer' },
    { key: 'amount', header: 'Amount', type: 'number', align: 'right', summable: true },
  ],
  export: { quick: { filename: 'Orders' } },
};

<DataTable data={orders} views={[view]} tableId="orders" />;          // client mode
<DataTable dataSource={source} views={[view]} tableId="orders" />;    // server mode
<Donut ariaLabel="By status" slices={[{ key: 'a', label: 'Open', value: 12, slot: 1 }]} />;
```

表格的运行时间依赖关系( E)`@tanstack/react-table`, (中文(简体) ), `@tanstack/react-virtual`, (中文(简体) ), `@tanstack/match-sorter-utils`, (中文(简体) ), `exceljs` 财务报告和审定财务报表 `pdfmake` — 装入第一个 PDF 导出) 安装软件包。 图标是图书馆自己的(`IconFilter`, (中文(简体) ), `filterIcon`,(...):这个 没有图标依赖.

## 文件和背景工作者

导出(数据表、图表图像、你自己的报告)通过一个文件引擎运行 `UIProvider` 准备 Excel 和 PDF 文件构建于 a **背景工作者**这么大 导出不冻结页面.

工人船作为自己的档案和进口品 `exceljs` 财务报告和审定财务报表 `pdfmake` 按软件包名称,所以 **您的捆绑者必须把它当作一个工人入口**数字 :

-   **维特** 财务报告和审定财务报表 **网页包装 5**:没什么可做的. 他们跟随包裹 `new Worker(new URL(…, import.meta.url))` 把工人捆起来.
    
-   **还有什么**:从 `@dcs-tech/ui/file-worker` 用你的捆绑机来交 转到引擎 :
    
    ```ts
    // file.worker.ts — bundled by your setup as a module worker
    import '@dcs-tech/ui/file-worker';
    ```
    
    ```tsx
    <UIProvider fileEngine={{ createWorker: () => new Worker('/assets/file.worker.js', { type: 'module' }) }}>
    ```
    

如果工人无法启动,则引擎在主线上建立相同的文件取而代之. `fileEngine={{ workers: 'off' }}` 总是使用主线. 大型 PDF 字体( 脚本字体) 引擎上,所以他们到达每个工人一次: `fileEngine={{ pdfFonts: { fonts, vfs } }}`。 。 。 .

## 表格验证

`Form` 用任意 [标准Schema](https://standardschema.dev/) 图书馆——Zod 3.24+, Varibot 1+, ArkType 2+, YAP 1.7+ — 无适配器:

```tsx
import { z } from 'zod'

<Form fields={fields} defaultData={data} validation={{ schema: z.object({ name: z.string().min(1, 'Required') }), validateOnBlur: true }} />
```

错误按每期路径键( Q)`address.city`) (中文(简体) ). 只留下一个字段检查; a 提交失败 。 对于其他计划(例如1.7前的YP), 通过 `validate: (schema, data) => ({ valid, errors })` 和以前一样 形式上的话(投降,重设, 其出错的土司)来自: `UIProvider labels.form`。 。 。 .

## 他们

每个颜色,大小和间隔值都是CSS自定义属性. 盖上它们 `:root` 导入样式表后 :

```css
:root { --primary-hue: 264; }          /* retints the entire theme */
:root { --border-radius-sm: 4px; }
```

## 大小和变体

`size` 在所有控件上统一: `xxs | xs | small | medium | large | xl`。 。 。 .

`variant` 每个家庭 `outlined | filled | standard | underlined` 用于文本 字段,则, `outlined | filled | standard` 用于复选框和无线电,没有用于切换.

### 字段宽度

一个文本字段可以填充其母给出的空间,最高可达320px. `width` 更改:

| `width` | 球场是 |
| --- | --- |
| 未给出 | 最多320px的可用空间 |
| `"full"` | 整行,无限制 |
| `"auto"` | 内容广泛 |
| `240`, (中文(简体) ), `"15rem"` | 确切地说,从不比其父母宽 |

在表格单元格中(`layout="cell"`栏决定和 `width` 被忽略。 与 `layout="horizontal"` 它显示控件大小; 标签保留其列.

### 列表宽度

选择或建议列表符合其内容: 绝不比其字段更窄, 最多320px( 选择) 或 480px (Suggest),并总是在屏幕上. `listWidth="field"` 让它正好是球场的宽度.

### 图标大小

仅使用图标的按钮或侧边栏会用图标大小 `--icon-size-xxs` . `--icon-size-xl` 符号,以下 `--ui-scale`覆盖它们 `:root` 以修改整个应用程序的图标大小。 一个 图标 `size` 留着吧.

### 对话框宽度

`Dialog` 带 `size="sm | md | lg | xl | full"` (420 / 560 / 720 / 960 px / 整体) 窗口)。 对于任何其他宽度, 设置 `--dialog-width`它是支持的方式,它获胜 结束 `size`数字 :

```tsx
<Dialog open title="Wide" style={{ '--dialog-width': '840px' } as React.CSSProperties} />
```

```css
.invoice-dialog { --dialog-width: min(1100px, 95vw); }  /* <Dialog className="invoice-dialog"> */
```

用于侧面或上下页(`placement`它设置面板的宽度或最大宽度.

## 许可证

2026 Noyyal技术公司。 版权所有.

## 常见问题

### @dcs-tech/ui 是什么？

反应UI组件库——字段,按钮,工具提示,表格和设计符\.

### 如何安装 @dcs-tech/ui？

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

### @dcs-tech/ui 支持 TypeScript 吗？

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

### @dcs-tech/ui 支持 ESM 还是 CommonJS？

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

### @dcs-tech/ui 可以商用吗？

@dcs-tech/ui 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @dcs-tech/ui 的下载量有多少？

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

### @dcs-tech/ui 还在维护吗？

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