# @archetypeai/ds-ui-svelte-labs 中文文档 规范地址：https://npmcn.com/package/%40archetypeai/ds-ui-svelte-labs/ 版本：0\.21\.0 npm 元数据更新时间：2026-10-30T15:18:25.570Z 中文译文更新时间：2026-11-06T21:39:48.584Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40archetypeai/ds-ui-svelte-labs 原文对照：https://npmcn.com/package/%40archetypeai/ds-ui-svelte-labs/?lang=original 项目主页：https://github.com/archetypeai/design-system#readme 源码仓库：https://github.com/archetypeai/design-system ## 关键信息（来自 npm 元数据） - 包体积（解压后）：127 kB，93 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：0 个 - peer 依赖：clsx ^2\.0\.0，svelte ^5\.0\.0，bits-ui ^2\.0\.0，d3-scale ^4\.0\.0，d3-shape ^3\.0\.0，layerchart 2\.0\.0-next\.46，tailwindcss ^4\.0\.0，@lucide/svelte \>=0\.500\.0 \<2\.0\.0，tailwind-merge ^3\.0\.0，tailwind-variants ^3\.0\.0，@archetypeai/ds-lib-tokens \>=0\.3\.0 \<1\.0\.0，@archetypeai/ds-ui-svelte-console \>=0\.7\.1 \<1\.0\.0 - 首次发布：2026-06-12T14:28:26.756Z - 最新版本发布：2026-10-30T15:18:25.267Z - 近 30 天下载量：2310（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：21（近 12 个月 21 个） ## 中文简介 Archetype AI 设计系统 Labs Primitives (实验性 0.x 级组成@archetypeai/ds-ui-svelte-console) 设计系统实验室 ## 安装 ```sh npm install @archetypeai/ds-ui-svelte-labs ``` 也可以使用：`pnpm add @archetypeai/ds-ui-svelte-labs`、`yarn add @archetypeai/ds-ui-svelte-labs`、`bun add @archetypeai/ds-ui-svelte-labs` ## README # @archetypeai/ds-ui-svelte-labs (英语) 人工智能设计系统的原始实验室 **实验性0.x级** 在冰冻地上建造 [`@archetypeai/ds-ui-svelte-console`](https://www.npmjs.com/package/@archetypeai/ds-ui-svelte-console) 基础。 Svelte 5 原始人风格与 Tailwind v4 和 `tailwind-variants`,连接到 `@archetypeai/ds-lib-tokens` 主题,构建控制台原始(按钮、卡片、徽章),其中需要稳定的构件。 类型脚本源船为 `.svelte` 文件(没有预编译),因此消费者可以得到完整的类型检查和IDE去定义. 实验室版本为"0.x":破解更改是小版本之间的合同. 证明自己已进入控制台的组件,控制台本身从未改变过以容纳实验室. 像控制台一样,实验室的口味从同一个来源出发有两种方式: - **npm 软件包** (此文档的默认) - 如何应用 **消费** 原始人:他们留在 `node_modules`,导入的每个子路径,按版本起伏更新。 包裹是真理的来源. - **阴影滚动注册** - 原始人如何变得 **修改或延长**: 将原始的可编辑源拖入您的应用程序, 更改它, 然后将更改移植回软件包中 . ## 安装 ```sh npm i @archetypeai/ds-ui-svelte-labs @archetypeai/ds-ui-svelte-console ``` 然后安装所有子路径共享的对等依赖性 : ```sh npm i svelte tailwindcss bits-ui tailwind-variants tailwind-merge clsx @lucide/svelte @archetypeai/ds-lib-tokens ``` ### 异端端依赖性 Chart-family子路径额外要求重可视化同位素,其他子路径永远不会加载(它们被宣布为可选同位素,因此npm不会自动安装它们): | 子路径 | 额外对等器 | | --- | --- | | `primitives/chart` | `layerchart` | | `primitives/scatter-chart` | `layerchart`, (中文(简体) ), `d3-scale` | | `primitives/sensor-chart` | `layerchart`, (中文(简体) ), `d3-scale`, (中文(简体) ), `d3-shape` | ```sh npm i layerchart@2.0.0-next.46 d3-scale d3-shape ``` `layerchart` 被绑定在一个精确的2.0预发版——预发版在构件之间打破API,所以安装被绑定的版本(labs为0.x-churn here is in-contract). ## 尾风 v4 设置( 强制) 尾风 v4 不扫描 `node_modules` 默认。 没有 `@source` 下面指令,本套件的每个类别在消费者建造时间被清洗,部件则不作样式. 在你的消费者 `app.css`,按此顺序: ```css @import 'tailwindcss'; @import '@archetypeai/ds-lib-tokens/theme.css'; @source "../node_modules/@archetypeai/ds-ui-svelte-console/dist"; @source "../node_modules/@archetypeai/ds-ui-svelte-labs/dist"; ``` 秩序事项: - `tailwindcss` 登记引擎. - `@archetypeai/ds-lib-tokens/theme.css` 宣告组件类所消耗的 CSS 变量 . - 两者 `@source` 指令使Tailwind扫描两个包 - 实验室组件构成控制台原始,所以两个干子都必须被扫描. 调整 `@source` 如果您的路径 `app.css` 在别处生活 他们必须下定决心 `dist/` 目录. ## 类型脚本设置 在你的消费者 `tsconfig.json` (或 `jsconfig.json`),设置: ```jsonc { "compilerOptions": { "moduleResolution": "bundler" } } ``` `"node16"` 财务报告和审定财务报表 `"nodenext"` 还有工作 没有这些 `types` 此软件包中的条件 `exports` 地图被绕过,类型返回到 `default` JS文件 编辑功能退化了. ## 使用量 每个原始人都生活在自己的后路 没有枪管 `import { Logo } from '@archetypeai/ds-ui-svelte-labs'` - 子路径保持 `layerchart` 和d3包 出捆 消费者谁从来没有触摸图表原始. ```svelte ``` ## 普通亚道 | 初级 | 导入路径 | | --- | --- | | 光谱Ratio | `@archetypeai/ds-ui-svelte-labs/primitives/aspect-ratio` | | 图表 | `@archetypeai/ds-ui-svelte-labs/primitives/chart` | | 宽度 | `@archetypeai/ds-ui-svelte-labs/primitives/kbd` | | 标记 | `@archetypeai/ds-ui-svelte-labs/primitives/logo` | | 菜单栏 | `@archetypeai/ds-ui-svelte-labs/primitives/menubar` | | 散点图 | `@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart` | | 传感器图 | `@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart` | | 幻灯片 | `@archetypeai/ds-ui-svelte-labs/primitives/slider` | | 切换 | `@archetypeai/ds-ui-svelte-labs/primitives/switch` | | 切换 | `@archetypeai/ds-ui-svelte-labs/primitives/toggle` | | 视频显示器 | `@archetypeai/ds-ui-svelte-labs/primitives/video-player` | 类合并和元素Ref 类型帮助器从控制台再导出 `@archetypeai/ds-ui-svelte-labs/primitives/utils` (单身) `cn`编号 :`twMerge` 实例存在于树上),与实验室域名助手(`healthTier`, (中文(简体) ), `formatMMSS`, (中文(简体) ), `clamp`) (中文(简体) ). ## 标识(原始/日志) 一个组件后面有两个艺术形式. `variant="default"` 是水平单词标记(~5.4:1); `variant="compact"` 是堆叠的社交/avatar 锁(~1.6:1) - 在一个字签会使用的地方 不合适,例如平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面. 两种形式都一样 `size` 缩放 - `sm` | `default` | `lg` 地图到 `h-4` | `h-6` | `h-8` - 说吧 取出它们的宽度 `w-auto`,所以互换变体会改变所渲染的宽度,永远不会改变 高点 因为这样, `compact` 读取小于 `sm`; 首选 `default` 或者说 `lg`,或以 `class`。 。 。 . ```svelte ``` 两种形式都是由 : `currentColor` (单位:千美元)`text-foreground` 默认),所以 他们颠倒主题,接受任何 `text-*` 超过。 无障碍名称是 `"Archetype AI"` 两者;通过 `aria-label` 编号 : `role` 当标记坐落在一个标记旁边时将覆盖 文本标识类型, 否则会双倍通知 . ## 视频播放器(原始/视频播放器) 寻找的赛道作为时间线加倍. `markers` 被命名为窗口 **以秒计** (不计百分比) 以可聚焦点来绘制; 点击一个将它扩展为范围药丸, 寻求其 开始并开始播放。 一个是一次扩张, `bind:activeMarker` 是它的指数,和 通过手擦擦或点击视频表面会崩溃。 一个被扩大,另一个步骤 让开,包括指向事件. ```svelte (hovered = index)} /> ``` `controlsVisibility="always"` 当重播时标记必须保持可点击性时,则需要: 默认 `"auto"` 关闭控制栏, 和标记它,2.5s英寸 对于连接刷子, `highlights` 另一种观点是 `onMarkerHover` 下方报告标记 光标 **键盘焦点**。 。 。 . 两个陷阱 `src` 更改, 两者都从类型签名中隐去: - **一个新的 `src` 重挂载玩家**,而斯维尔特的媒体绑定将您绑定的值写入 新鲜元素——如此重置 `time = 0` 财务报告和审定财务报表 `paused = true` 自己,或者一个僵硬的位置成为 下一个片段的开始. - **`bind:duration` 将上一剪辑的值保存到 `loadedmetadata`。 。 。 .** 从有识之士那里得来的 如果标记几何必须在第一个框上正确,则长度;而 `duration` 每个标记为 0 向左边缘崩溃. 寻找标记还需要一个服务HTTP Range请求的源头——与一个没有, 默默无动于衷 提供一个blob URL的剪辑代替. ## 扩展控制台原始 实验室在不改变控制台的情况下对控制台原始人进行改造,使用这种逃生-抓取梯子(顺序为: 1. `class` 控制台组件的道具覆盖 2. `data-slot` 消费者 CSS 中的属性选择器 3. `tv({ extend })` 在控制台的导出变体集群上 4. 实验室包装组件 此文档是软件包 README (由 `prepack`); 完整的设计系统文件在存储器的 [读取我](https://github.com/archetypeai/design-system)。 。 。 . ## 常见问题 ### @archetypeai/ds-ui-svelte-labs 是什么？ Archetype AI 设计系统 Labs Primitives \(实验性 0\.x 级组成@archetypeai/ds-ui-svelte-console\) 设计系统实验室 ### 如何安装 @archetypeai/ds-ui-svelte-labs？ 在项目目录运行 npm install @archetypeai/ds-ui-svelte-labs，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：clsx（^2\.0\.0）、svelte（^5\.0\.0）、bits-ui（^2\.0\.0）、tailwindcss（^4\.0\.0）、@lucide/svelte（\>=0\.500\.0 \<2\.0\.0）、tailwind-merge（^3\.0\.0）、tailwind-variants（^3\.0\.0）、@archetypeai/ds-lib-tokens（\>=0\.3\.0 \<1\.0\.0）、@archetypeai/ds-ui-svelte-console（\>=0\.7\.1 \<1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @archetypeai/ds-ui-svelte-labs 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @archetypeai/ds-ui-svelte-labs 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @archetypeai/ds-ui-svelte-labs 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @archetypeai/ds-ui-svelte-labs 可以商用吗？ @archetypeai/ds-ui-svelte-labs 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @archetypeai/ds-ui-svelte-labs 的下载量有多少？ 根据 npm 官方下载统计，@archetypeai/ds-ui-svelte-labs 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,310 次，日均约 77 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @archetypeai/ds-ui-svelte-labs 还在维护吗？ 最新版本 0\.21\.0 发布于 2026/10/30（8 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 21 个；首次发布于 2026/06/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。