# @codeatlasdev/ui 中文文档

规范地址：https://npmcn.com/package/%40codeatlasdev/ui/

版本：4\.6\.0
npm 元数据更新时间：2026-10-25T22:42:59.511Z
中文译文更新时间：2026-11-10T06:14:40.098Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40codeatlasdev/ui
原文对照：https://npmcn.com/package/%40codeatlasdev/ui/?lang=original
项目主页：https://github.com/codeatlasdev/ui#readme
源码仓库：https://github.com/codeatlasdev/ui

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

- 包体积（解压后）：11.6 MB，1675 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：5 个
- peer 依赖：astro ^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0，shiki ^4\.0\.0，svelte ^5\.33\.0，echarts ^6\.0\.0，axe-core ^4\.0\.0，mapbox-gl ^3\.0\.0，png-to-ico ^3\.0\.0，typescript \>=5\.0\.0，maplibre-gl ^5\.0\.0 \|\| ^6\.0\.0，@deck\.gl/core ~9\.4\.0，@sveltejs/kit ^2\.12\.0 \|\| ^3\.0\.0，@deck\.gl/mapbox ~9\.4\.0，@resvg/resvg-js ^2\.6\.0，@deck\.gl/maplibre ~9\.4\.0，@tanstack/svelte-table ^9\.2\.4
- 首次发布：2026-09-26T16:35:29.367Z
- 最新版本发布：2026-10-25T22:42:59.153Z
- 近 30 天下载量：4098（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

斯维尔特5UI框架. DX第一,AI准备。 构建零CSS决定的完整接口.

## 安装

```sh
npm install @codeatlasdev/ui
```

也可以使用：`pnpm add @codeatlasdev/ui`、`yarn add @codeatlasdev/ui`、`bun add @codeatlasdev/ui`

## README

# @ codeatlasdev/ ui

### 整个屏幕不是按钮.

svelte 5 —— 一个主题对象 —— 您的代理人已经知道

[![npm](https://img.shields.io/npm/v/@codeatlasdev/ui?style=flat-square&label=npm&color=111)](https://www.npmjs.com/package/@codeatlasdev/ui) [![svelte 5](https://img.shields.io/badge/svelte-5_runes-111?style=flat-square)](https://svelte.dev/) [![license](https://img.shields.io/npm/l/@codeatlasdev/ui?style=flat-square&color=111)](https://github.com/codeatlasdev/ui/blob/main/LICENSE)

**[现场演示](https://ui.codeatlas.com.br/)** • 妇女 [文档](https://ui.codeatlas.com.br/docs/) • 妇女 [主题编辑器](https://ui.codeatlas.com.br/theme/) • 妇女 [更改日志](https://ui.codeatlas.com.br/changelog/)

  

```sh
bunx @codeatlasdev/ui init --write
```

这就是设置。 主题、 暗模式、 错误的页面、 不显示白色闪光。 斯维特基特或天体.

  

## 12行的整页

```svelte
<AppList title="Users" data={users} searchKeys={['name', 'email']}>
  {#snippet children(list)}
    <SimpleTable responsive="cards">
      <thead><tr><th>User</th><th>Role</th></tr></thead>
      <tbody>
        {#each list.rows as u (u.id)}
          <tr><td><UserCell name={u.name} email={u.email} /></td><td>{u.role}</td></tr>
        {/each}
      </tbody>
    </SimpleTable>
  {/snippet}
</AppList>
```

搜索“ pagination ” 的空状态 **0 个**

  

## 一个六分之一的品牌

```ts
export const theme = defineTheme({
  presets: [{ id: 'acme', color: '#2563eb' }],
  defaultPreset: 'acme',
});
```

每一个标志都来自它, 光和黑暗, 在第一帧. 想要一种感觉吗? `designStyle('swiss')`, (中文(简体) ), `'brutalism'`, (中文(简体) ), `'sketchbook'`, (中文(简体) ), `'liquid'` (玻璃一)... 相同的组件,新的语言.

  

## 为什么它会不同

|  |  |
| --- | --- |
| 🧱 **页面,不是砖头** | `AppList` `AppForm` `AppSettings` `AppShellLayout` `AuthLayout` `DocsShell` |
| 🎨 **向下移动** | 组件中没有原始 px, 如果有人溜进来, 将失败 |
| 🪟 **样式是主题键** | `defaultStyle` 选取固体(默认)、平地、平地、平地、陶土、粘土、被霜冻、玻璃等; `<Surface material="auto">` 跟着它 |
| 🧭 **真实层** | 本地语言 `<dialog>` + popover上层, 无 z 指数战争 |
| ♿ **无聊的东西,保证** | aa/aa对比,44px触摸目标,无侧道滚动. 测试 |
| 🤖 **代理本土** | 技能, `llms.txt` 和一个 MCP 服务器 (`ca-ui-mcp`) 生成自代码 |

  

## 里面的东西

**版式** `Box` `Flex` `Stack` `Grid` `Container` `Section` `Surface` `Card` **弹壳** `AppShellLayout` `PageShell` `MobilePane` `StickyActions` `DocsShell` **投入** `Button` `TextField` `Select` `Combobox` `DatePicker` `PinInput` `MoneyInput` . **覆盖** `Dialog` `AlertDialog` `Sheet` `Drawer` `Popover` `Tooltip` `CommandPalette` **数据** `DataTable` `SimpleTable` `KpiGrid` `LiveList` + 8个图表(`/charts`(中文(简体) ) **塞尔维亚** `Seo`, json- ld, sitemap, 生成的外观 + og 图像 (`/seo`, (中文(简体) ), `/vite`(中文(简体) )

重件是选入 : `/charts` 需求 `echarts`, (中文(简体) ), `/table` 需求 `@tanstack/svelte-table`, (中文(简体) ), `/code` 需求 `shiki`。 。 。 .

  

## 黑进去

```sh
git clone https://github.com/codeatlasdev/ui && cd ui
bun install && bun dev     # lib watcher + docs site, one command
```

[捐款](https://github.com/codeatlasdev/ui/blob/main/CONTRIBUTING.md) • 妇女 [行为守则](https://github.com/codeatlasdev/ui/blob/main/CODE_OF_CONDUCT.md) • 妇女 [警卫](https://github.com/codeatlasdev/ui/blob/main/SECURITY.md) 麻省理工学院

  

感谢我们的主要支持者 **法比奥·恩里克·阿劳霍** (单位:千美元)[@FabioHaraujo (英语)](https://github.com/FabioHAraujo)和 **理查德森·道格拉斯** (单位:千美元)[@Richards0nd (英语)](https://github.com/Richards0nd)) (中文(简体) )

(单位:千美元) [代码图集](https://codeatlas.com.br/)

## 常见问题

### @codeatlasdev/ui 是什么？

斯维尔特5UI框架\. DX第一,AI准备。 构建零CSS决定的完整接口\.

### 如何安装 @codeatlasdev/ui？

在项目目录运行 npm install @codeatlasdev/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.33\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 ca-ui-mcp、codeatlas-ui，可以用 npx ca-ui-mcp 直接运行。

### @codeatlasdev/ui 支持 TypeScript 吗？

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

### @codeatlasdev/ui 支持 ESM 还是 CommonJS？

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

### @codeatlasdev/ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @codeatlasdev/ui 可以商用吗？

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

### @codeatlasdev/ui 的下载量有多少？

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

### @codeatlasdev/ui 还在维护吗？

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