# @besaitech/ng-design-system 中文文档

规范地址：https://npmcn.com/package/%40besaitech/ng-design-system/

版本：0\.0\.84
npm 元数据更新时间：2026-11-05T12:03:23.809Z
中文译文更新时间：2026-11-07T23:29:23.795Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40besaitech/ng-design-system
原文对照：https://npmcn.com/package/%40besaitech/ng-design-system/?lang=original

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

- 包体积（解压后）：4.5 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：@angular/core ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0，@angular/forms ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0，@angular/common ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0，@angular/router ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0，@angular/platform-browser ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0
- 首次发布：2026-08-31T19:16:17.602Z
- 最新版本发布：2026-11-05T12:03:23.562Z
- 近 30 天下载量：4495（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：56（近 12 个月 56 个）

## 中文简介

可重复使用 **角数 20** 组件库`sds-` 前缀) **尾风 CSS v4**,基于Saitech视觉语言. 按钮,输入,选择,表格,分页,手风琴,取枣器,电话输入,外加应用外壳(上行+侧栏).

## 安装

```sh
npm install @besaitech/ng-design-system
```

也可以使用：`pnpm add @besaitech/ng-design-system`、`yarn add @besaitech/ng-design-system`、`bun add @besaitech/ng-design-system`

## README

# @besaitech/ng-design-system (英语)

可重复使用 **角数 20** 组件库`sds-` 前缀) **尾风 CSS v4**,基于 (原始内容存档于2017-10-21). Saitech视觉语言. 按钮,输入,选择,表格,标签,手风琴,一个取枣器, 电话输入,加上应用程序外壳(上行+侧行).

> **重要内容:** 组件的样式为存在 Tailwind 工具类 _在其模板中_ —— 说 软件包有 **没有** 舰只编译 CSS. 您的应用程序必须运行 Tailwind v4, 扫描此软件包,以及 定义设计符 (参见 [尾风设置](https://npmcn.com/package/%40besaitech/ng-design-system/#readme-3-tailwind-v4-setup)) (中文(简体) ). 没有这个步骤 组件变为无样式.

* * *

## 所需资源

-   角质 **20.3+, 21.x或22.x** (单位:千美元)`@angular/common`, (中文(简体) ), `core`, (中文(简体) ), `forms`, (中文(简体) ), `platform-browser`, (中文(简体) ), `router`(中文(简体) )
-   尾风 CSS **页:1** 在消费应用中

* * *

## 1\. 安装

```bash
npm install @besaitech/ng-design-system
```

公共npm登记——无 `.npmrc`,不需要瞄准镜映射和读取符号.

## 2\. 牵引装置

角对等依赖关系( E)`@angular/common`, (中文(简体) ), `core`, (中文(简体) ), `forms`,)已经存在于任何 角20.3+ / 21/ 22 应用. 如果你还没有Tailwind,添加它作为一个 dev依赖:

```bash
npm install -D tailwindcss @tailwindcss/postcss
```

## 3\. 尾风v4设置

这是让组件看起来正确的步骤。 尾风v4是CSS第一——没有 `tailwind.config.js`。 。 。 .

**a. 注册 PostCSS 插件.** 创建 `.postcssrc.json` 在您的工程根 :

```json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}
```

**b. 导入 Tailwind,扫描库并定义符号** 在您的全局样式表 (单位:千美元)`src/styles.css`) (中文(简体) ). 这个 `@source` 线条是告诉 Tailwind 生成所使用的工具类 _内部_ 图书馆,以及 `@theme` 块定义这些类所指的颜色/辐射 -- **两者都需要**数字 :

```css
@import "tailwindcss";

/* Generate the utilities used inside @besaitech/ng-design-system templates.
   Path is relative to THIS file (src/styles.css → ../node_modules). */
@source "../node_modules/@besaitech/ng-design-system";

/* Tokens. BOTH imports are required, and both must come AFTER the tailwindcss import —
   Tailwind v4 processes @theme in imported files and later declarations win.
   base.css = surfaces, ink, accents, status, radius, layout vars (15 tokens).
   The brand preset = the 11 --color-brand-* steps, and nothing else. */
@import "@besaitech/ng-design-system/themes/base.css";
@import "@besaitech/ng-design-system/themes/saitech.css";  /* blues */
/* @import "@besaitech/ng-design-system/themes/belvigo.css";   black */
/* @import "@besaitech/ng-design-system/themes/belvigo-emerald.css";   emerald (Belvigo merchant);
   keeps green primary fills in dark mode through the --sds-dark-* hooks listed in base.css */

/* Override any base default in your own @theme afterwards, e.g. the typeface. */
@theme {
  /* Neutrals / surfaces (already provided by base.css — shown for reference) */
  --color-canvas: #f5f6f8;
  --color-surface: #ffffff;
  --color-muted: #f8f9fb;
  --color-border: #e6e9f0;
  --color-ink: #1b2440;
  --color-ink-soft: #5b6577;
  --color-ink-faint: #8a93a6;

  /* Accent icon-tiles (foreground + soft background) */
  --color-accent-blue: #2f6bd4;
  --color-accent-blue-soft: #e8effb;
  --color-accent-green: #1f9d57;
  --color-accent-green-soft: #e6f5ec;
  --color-accent-amber: #e0902a;
  --color-accent-amber-soft: #fdf0dd;
  --color-accent-red: #df4f6b;
  --color-accent-red-soft: #fde7ec;
  --color-accent-indigo: #6c5ce7;
  --color-accent-indigo-soft: #ece9fb;

  /* Status */
  --color-success: #27c06b;
  --color-warning: #f3b73c;
  --color-danger: #df4f6b;

  /* Radius */
  --radius-control: 0.5rem;
  --radius-card: 0.75rem;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Layout dimensions used by <sds-shell> / <sds-sidebar> / <sds-topbar>.
   Only needed if you use the layout components. */
@layer base {
  :root {
    --sds-topbar-h: 64px;
    --sds-sidebar-w: 256px;
    --sds-sidebar-w-collapsed: 76px;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-canvas);
    color: var(--color-ink);
  }
}
```

> 为什么 `@source`尾风 v4 忽略 `node_modules` 默认。 明确 `@source` 重新包含 这个软件包,所以被烤成其所编译的模板的类产生了真正的CSS. 如果组件显示 上行(或错误的相对路径)几乎总是原因.

## 4\. 使用组件

所有组件都是 **独立** ——将您需要的直接导入到组件的 `imports`数字 :

```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SdsButton, SdsInput, SdsIcon } from '@besaitech/ng-design-system';

@Component({
  selector: 'app-member-form',
  imports: [FormsModule, SdsButton, SdsInput, SdsIcon],
  template: `
    <sds-input label="Nom" [(ngModel)]="name" leadingIcon="search" clearable />

    <sds-button variant="primary" (click)="save()">
      <sds-icon sdsIconLeading name="user-plus" [size]="18" />
      Créer un membre
    </sds-button>
  `,
})
export class MemberForm {
  name = '';
  save() {/* ... */}
}
```

表格控件( E)`sds-input`, (中文(简体) ), `sds-textarea`, (中文(简体) ), `sds-select`, (中文(简体) ), `sds-multi-select`, (中文(简体) ), `sds-toggle-switch`, (中文(简体) ), `sds-date-picker`, (中文(简体) ), `sds-phone-input`执行 `ControlValueAccessor`,所以他们与两者合作 模板驱动 (`[(ngModel)]`)和反应性(`formControlName`(d) 表格.

* * *

## 组件目录

导入名称为 `Sl…` 类; 标记选择符为 `sds-…`。 。 。 .

**控件原始( R)**

| 构成部分 | 选择器 | 页:1 |
| --- | --- | --- |
| `SdsButton` | `<sds-button>` | `variant` (小学), `size`, (中文(简体) ), `loading`, (中文(简体) ), `block`, (中文(简体) ), `iconOnly`· ; `[sdsIconLeading]`编号 :`[sdsIconTrailing]` 插槽 |
| `SdsInput` | `<sds-input>` | CVA (英语). `label`, (中文(简体) ), `hint`, (中文(简体) ), `error`, (中文(简体) ), `size`, (中文(简体) ), `appearance` (默认为-on-brand), `leading/trailingIcon`, (中文(简体) ), `clearable`, (中文(简体) ), `required`, (中文(简体) ), `invalid`, (中文(简体) ), `inputId` |
| `SdsTextarea` | `<sds-textarea>` | CVA (英语). 自动增长, `label`, (中文(简体) ), `hint`, (中文(简体) ), `error`, (中文(简体) ), `required` |
| `SdsTimeInput` | `<sds-time-input>` | CVA 每日时间, 24小时, 值 `"HH:mm"` 无效; `minuteStep`, (中文(简体) ), `clearable`, (中文(简体) ), `withSeconds` |
| `SdsChipGroup` 编号 : `SdsChip` | `<sds-chip-group>` 编号 : `<sds-chip>` | 过滤/选择芯片: 1 或 `multiple` 计数的, `[(value)]` 或 CVA; 单切换芯片 `[(selected)]` |
| `SdsToggleSwitch` | `<sds-toggle-switch>` | CVA 布尔切换 |
| `SdsSelect` | `<sds-select>` | CVA 单选下拉 |
| `SdsMultiSelect` | `<sds-multi-select>` | CVA 多选择芯片; `(opened)` 编号 : `(closed)` (内容选择) |
| `SdsDatePicker` 编号 : `SdsCalendar` | `<sds-date-picker>` 编号 : `<sds-calendar>` | CVA 日期字段 + popover 日历 (`date-utils` 帮助者) |
| `SdsDateRangePicker` 编号 : `SdsRangeCalendar` | `<sds-date-range-picker>` 编号 : `<sds-range-calendar>` | 范围字段:预设列+两个月范围日历,待应用后再行; `[(value)]` 是一个 `SdsDateRange | null` (单位:千美元)`{ start, end }`,结束包容性); `(presetSelect)` 释放预设的 id; 助手 `sdsLastDays(n)`, (中文(简体) ), `sdsLastMonths(n)`, (中文(简体) ), `formatDateRange()` |
| `SdsPhoneInput` | `<sds-phone-input>` | 带国家选择器的 CVA 电话字段(`phone-countries`(中文(简体) ) |
| `SdsIcon` | `<sds-icon>` | 内置- SVG 图标; `name`, (中文(简体) ), `size`, (中文(简体) ), `strokeWidth`, (中文(简体) ), `filled` |
| `SdsAvatar` | `<sds-avatar>` | 图像、缩写或 `fallbackIcon` + 状态点; `shape` (圆-圆-平方), `decorative`; 有损坏的图像倒回 |
| `SdsBadge` | `<sds-badge>` | 避孕药; `variant`, (中文(简体) ), `dot` |
| `SdsCard` | `<sds-card>` | 地表容器; `variant`, (中文(简体) ), `interactive`, (中文(简体) ), `padding` |

**复合**

| 构成部分 | 选择器 |
| --- | --- |
| 标签 | `<sds-tabs>` • 妇女 `<sds-tab-list>` • 妇女 `<sds-tab>` • 妇女 `<sds-tab-panels>` • 妇女 `<sds-tab-panel>` —— 说 `controlled` + 键 `(tabSelect)` 用于查询段落/保护标签; 面板可选; `<sds-tab-list [ariaLabel]>` |
| 手风琴 | `<sds-accordion>` • 妇女 `<sds-accordion-panel>` • 妇女 `<sds-accordion-header>` • 妇女 `<sds-accordion-content>` |
| 图表 | `<sds-table>` • 妇女 `ng-template[sdsCell]` • 妇女 `[sdsHeader]` • 妇女 `[sdsRowExpansion]` • 妇女 `[sdsTableEmpty]` —— 说 `rowClickable`, (中文(简体) ), `[rowClass]` |
| 缓冲器 | `<sds-paginator>` |

**版式** (使用从第3步起的设计符号/布局 vars)

| 构成部分 | 选择器 | 页:1 |
| --- | --- | --- |
| `SdsShell` | `<sds-shell>` | 上行+侧行+可滚动内容; `[sdsTopbar]`编号 :`[sdsSidebar]` 插槽 |
| `SdsTopbar` | `<sds-topbar>` | `appName`, (中文(简体) ), `user`, (中文(简体) ), `(logout)`· ; `[sdsLogo]` 插槽 |
| `SdsSidebar` + 键 `SdsNavGroup` + 键 `SdsNavItem` | `<sds-sidebar>` . | 折叠式导航铁路; 通过根提供倒塌状态 `SidebarStore`; 项目导出 `routerLink` 或者说 `<button>` |

**图表** (D3是数学的,Angular是SVG的,所以是OnPush,SSR安全并用活物来表示) a 包括: **二级进入点**, (中文(简体) ), `@besaitech/ng-design-system/charts`数字 :

```ts
import { SdsLineChart, SdsKpi, SdsChartSeries } from '@besaitech/ng-design-system/charts'; // components + chart data types
import { provideSdsCharts, SdsChartLabels } from '@besaitech/ng-design-system';            // config + strings (root)
```

根入为一单元:无论应用程序在任何地方——甚至在懒惰的路线上——都使用它 应用程序的初始块。 在自己的条目中保留图表(和d3)让捆绑者把它们留在 吸引他们的页面的懒散块。 配置( E)`provideSdsCharts`, (中文(简体) ), `SDS_CHART_CONFIG`, (中文(简体) ), `SdsChartConfig`, (中文(简体) ), `SdsChartLabels`, (中文(简体) ), `SDS_CHART_LABELS_EN` 和标签文本类型)留在根中—— 它很小,没有d3,所以 `app.config` 它可以提供热心 而不拉出图表。 自兹 0.0.68 根不再再出口图表组件或图表类型.

| 构成部分 | 选择器 | 页:1 |
| --- | --- | --- |
| `SdsLineChart` | `<sds-line-chart>` | 时间 / 数字 / 类别 x; 多序列, `area`, (中文(简体) ), `stack` (被打...%), `curve`日志 `yScale`, (中文(简体) ), `annotations`虚幻的预测系列, `endLabels`,横线工具提示 |
| `SdsBarChart` | `<sds-bar-chart>` | `orientation`, (中文(简体) ), `stack`负数, `showValues`, (中文(简体) ), `sort`, (中文(简体) ), `barColor`, (中文(简体) ), `highlight`组合 `type: 'line'` 系列 |
| `SdsScatterChart` | `<sds-scatter-chart>` | `x`编号 :`y`, 泡泡( 泡泡) `size`, (中文(简体) ), `group`, (中文(简体) ), `trendline`,日志/时间轴,最接近点盘旋 |
| `SdsDonutChart` | `<sds-donut-chart>` | 甜甜圈 馅饼 `half`; 尾部折叠为"其他"过去 `maxSlices`; 中心总和/盘旋切片(`centerLabel=""` 隐藏中心读出) |
| `SdsHeatmap` | `<sds-heatmap>` | 两个绝对的暗淡x一个措施; `scheme` 相继出现分歧, `showValues` |
| `SdsTreemap` | `<sds-treemap>` | 嵌入 `{ name, value?, children? }`; 分支颜色, 点击到分区面包屑b |
| `SdsSparkline` | `<sds-sparkline>` | 字长行 区域 栏; `band`, (中文(简体) ), `reference`, (中文(简体) ), `showMinMax` |
| `SdsKpi` | `<sds-kpi>` | 站牌: 值, 变化 vs `previous` (好/坏通过) `upIsGood`),可选火花线 `trend` |

每个图表通过访问者读取平行(一个属性名或 `(row, i) => value`),所以API数据 不重塑的地圖; 有交互式的传说( 颜色跟随系列, 绝不是其等级), a 键盘导航工具提示,一个数据表双(`tableToggle`, (中文(简体) ), `loading` / 空状态,和 a `(pointClick)` 输出。 颜色来自色盲安全 `--sds-chart-1…8` 插槽数 `base.css` (覆盖预设中的任何插槽). 设置全应用程序默认值一次 :

```ts
providers: [provideSdsCharts({ locale: 'fr-FR', labels: CHART_LABELS_FR })]
// or, switching live with the app language (both functions are read inside computed()s):
providers: [provideSdsCharts({ locale: () => lang(), labels: () => chartLabelsFor(lang()) })]
```

**图表字符串.** 每个内置字符串——空状态,表格切换和页眉,工具提示行 口语摘要、角色描述、韩国新闻社的变换句子 `SdsChartLabels` 键带有 英语默认值( N)`SDS_CHART_LABELS_EN`) (中文(简体) ). 翻译一次 `provideSdsCharts({ labels })` 联合国 `Partial<SdsChartLabels>`,在英文默认值后合并;参数化的为函数 (单位:千美元)`sliceCount(n)`, (中文(简体) ), `gridSize(rows, columns)`, (中文(简体) ), `labelValue(label, value)`, (中文(简体) ), `zoomedTo(path)`, (中文(简体) ), `versus(y, x)`, (中文(简体) ), `sparklineSummary({ label, first, last, min, max, count })`, (中文(简体) ), `kpiChange({ direction, delta, period, good })`,.) 逐图输入(`emptyText`, (中文(简体) ), `otherLabel`, (中文(简体) ), `centerLabel`, (中文(简体) ), `valueLabel`, (中文(简体) ), `rootLabel`, (中文(简体) ), `sizeLabel`)仍然为一个图表赢得;未设置(`null`(中文(简体) ) 它们会回到配置的标签.

```html
<sds-line-chart
  heading="Admissions"
  [data]="rows"
  x="date"
  [series]="[{ key: 'urgences', label: 'Urgences' }, { key: 'programmees', label: 'Programmées' }]"
  [annotations]="[{ type: 'line', value: 150, label: 'Capacité' }]"
/>
```

自定义工具提示正文 : `<ng-template sdsChartTooltip let-tip>…</ng-template>` 在任何图表中.

**丰富文本** (Tiptap / ProseMiror)——一个 **二级进入点**, (中文(简体) ), `@besaitech/ng-design-system/rich-text`, (中文(简体) ), 基于与图表相同的原因:ProseMirror留在编辑丰富文本的页面的懒散块.

```ts
import { SdsRichTextEditor, SDS_RICH_TEXT_LABELS } from '@besaitech/ng-design-system/rich-text';
```

| 构成部分 | 选择器 | 页:1 |
| --- | --- | --- |
| `SdsRichTextEditor` | `<sds-rich-text-editor>` | 超过 HTML 字符串的 CVA (`''` 当是空的. `[tools]` (标题、粗体、斜体、下划线、罢工、列表、引文、链接、表格、分页、清晰、撤销/重写)是工具栏和计划; `rows` 编号 : `maxRows`, (中文(简体) ), `maxLength` +计数器, `label`, (中文(简体) ), `hint`, (中文(简体) ), `error`, (中文(简体) ), `invalid`, (中文(简体) ), `required`, (中文(简体) ), `readonly`, (中文(简体) ), `disabled`, (中文(简体) ), `appearance` (默认-填充), `contentLanguage` (抽查语言); `focus()`, (中文(简体) ), `insertText(text)` |
| `SdsLocalizedRichTextEditor` | `<sds-localized-rich-text-editor>` | CVA 超过一个 `SdsLocalizedValue` (单位:千美元)`{ fr: '<p>…</p>', de: … }`比如说 `sds-localized-input`数字 : `languages`, (中文(简体) ), `currentLanguage`, (中文(简体) ), `requiredLanguages`,工具栏末尾有已填入 / 需要 / 缺失点的切换器,空译被浏览。 下方各有一个编辑器——取消、注意和检查每个语言的拼写。 与上文相同的丰富文本输入(`maxLength` (每个语言) |
| `SdsRichTextToolbarEnd` | `[sdsRichTextToolbarEnd]` | 标记工具栏末尾预测的内容(插入 `readonly`: 一个语言切换器,“插入变量”按钮调用 `editor.insertText(…)` |

释放的 HTML 通过构造是干净的 : 没有内线样式, 在启用的工具之外没有任何内容, 以及链接 限于http(s)、mailto、电话、站点路径和主机(`sdsSafeHref`与 `rel="noopener noreferrer nofollow"` ——在显示时仍保存有HTML. 表格保存为空 (无) `<colgroup>`,没有内含宽度)。 当装入的 HTML 持有内容时, 工具无法保存(`<img>`, (中文(简体) ), `<iframe>`页:1 没有表格 `table` 工具...),在任何人编辑前在字段名称下警告它——保存编辑会 放下枪 QQ/Ctrl+K 打开 链接字段,而不传递给全应用程序的QQ调色板。 字符串默认为英语: 翻译它们 每个实例 `[labels]` 联合国 `Partial<SdsRichTextLabels>`或应用宽度 `{ provide: SDS_RICH_TEXT_LABELS, useValue: { bold: 'Gras', … } }`。 。 。 .

```html
<sds-rich-text-editor
  label="Présentation"
  [tools]="['heading2', 'bold', 'italic', 'bulletList', 'orderedList', 'link', 'undo', 'redo']"
  [maxLength]="2000"
  formControlName="description"
/>
```

## 主题交叉应用首选项( C)

`SdsThemeService` 持有该人的 **模式** —— 说 `'system' | 'light' | 'dark'`,坚持 `localStorage` 下级 `sds-theme` - 并把它解决给画 **主题** (单位:千美元)`light`编号 :`dark`(三); `system` 跟着操作系统直播. `toggle()` 编号 : `setTheme()` 设置一个明确的主题, `setMode('system')` 回到跟踪操作系统.

一个产品的Apps在互相链接时可以在URL中携带人物的语言和主题,所以 打开匹配的页面。 发送侧 :

```ts
import { appendUiPrefs } from '@besaitech/ng-design-system';

appendUiPrefs('https://auth.example/continue#token=abc', { lang: translate.getCurrentLang(), theme: theme.mode() });
// → https://auth.example/continue?lang=fr&theme=dark#token=abc
```

永远不要把它们放入一个被嵌入的重定向服务器匹配的精确位置( N)`return_to`, (中文(简体) ), `redirect_uri`)——附后 外部 URL 。 接收侧: 内含脚本 `<head>` 联 合 国 `index.html` 应用、坚持和剥去 **在第一次油漆之前** (没有闪出,也没有导入根部的此库). `LANG_KEY` 应用程序是自己的 语言存储密钥; 保存 `LANGS` 与应用程序的语言同步. `readUiPrefs` 编号 : `stripUiPrefs` 一样 代码和测试的逻辑.

```html
<script>
  (function () {
    var LANG_KEY = 'app.lang', LANGS = ['en', 'fr', 'nl'], THEME_KEY = 'sds-theme', MODES = ['system', 'light', 'dark'];
    var url = new URL(location.href), q = url.searchParams, lang = q.get('lang'), mode = q.get('theme');
    try {
      if (LANGS.indexOf(lang) >= 0) localStorage.setItem(LANG_KEY, lang);
      if (MODES.indexOf(mode) >= 0) localStorage.setItem(THEME_KEY, mode);
    } catch (e) {}
    try { lang = localStorage.getItem(LANG_KEY) || lang; mode = localStorage.getItem(THEME_KEY) || mode; } catch (e) {}
    if (LANGS.indexOf(lang) >= 0) document.documentElement.lang = lang;
    var dark = mode === 'dark' || (mode !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
    document.documentElement.classList.toggle('dark', dark);
    document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
    if (q.has('lang') || q.has('theme')) {
      q.delete('lang'); q.delete('theme');
      history.replaceState(history.state, '', url.pathname + url.search + url.hash);
    }
  })();
</script>
```

## 标签语言( L)

图书馆的船 **没有自己的翻译**每一个可见或口语串——占位符, 空状态、 校验信件和可访问的仅图标按钮名称 – 是使用 a 一个 **英语默认** (自0.0.54起;更早的发布默认了一些组件为法语). 应用程序 服务于一种以上语言的,约束其翻译,例如:. `<sds-select [placeholder]="'common.select' | translate" [clearLabel]="'common.clear' | translate" />`。 。 。 . 地方意识部分 `locale` 输入 : `sds-date-picker`编号 :`sds-calendar` (每月和平日名称, 默认 `en-GB`, (中文(简体) ), `sds-input-number` 财务报告和审定财务报表 `sds-table` (数目/货币格式), `sds-phone-input` (国家名称通过 `Intl.DisplayNames`; 空 = 内置英文名.

* * *

## 解决问题

| 症状 | 原因/ 固定 |
| --- | --- |
| `403 insufficient_scope` | 托肯不见了 `read_package_registry` 范围 |
| 组件变成无样式 | 失踪/不正确 `@source` 线条,或者没有导入主题预设(步骤 3b) |
| 品牌颜色错误/ 没有 | 主题预设在导入前 `@import "tailwindcss"`所以它已经覆没了 |
| `sds-icon` 显示无 | 这个 `name` ;通过 `SdsIconName` 类型 |

## 版本

塞姆维尔。 工作空间发布每个版本 `npm run release:lib` (弹出-建) (原始内容存档于2017-03-25). Publishing. 在你的应用中刻意地打出一个版本.

## 常见问题

### @besaitech/ng-design-system 是什么？

可重复使用 角数 20 组件库sds- 前缀\) 尾风 CSS v4,基于Saitech视觉语言\. 按钮,输入,选择,表格,分页,手风琴,取枣器,电话输入,外加应用外壳\(上行\+侧栏\)\.

### 如何安装 @besaitech/ng-design-system？

在项目目录运行 npm install @besaitech/ng-design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）、@angular/forms（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）、@angular/common（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）、@angular/router（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）、@angular/platform-browser（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @besaitech/ng-design-system 支持 TypeScript 吗？

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

### @besaitech/ng-design-system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @besaitech/ng-design-system 可以商用吗？

@besaitech/ng-design-system 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @besaitech/ng-design-system 的下载量有多少？

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

### @besaitech/ng-design-system 还在维护吗？

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