# @g4ai/ds 中文文档

规范地址：https://npmcn.com/package/%40g4ai/ds/

版本：0\.14\.1
npm 元数据更新时间：2026-11-15T22:25:19.037Z
中文译文更新时间：2026-11-15T20:23:36.957Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40g4ai/ds
原文对照：https://npmcn.com/package/%40g4ai/ds/?lang=original
项目主页：https://gestao-quatro-ponto-zero.github.io/G4OS-DS/
源码仓库：https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS

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

- 包体积（解压后）：15.3 MB，1183 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0，eslint \>=9\.0\.0，react-dom ^18\.2\.0 \|\| ^19\.0\.0，tailwindcss ^4\.3\.0，lucide-react \>=1\.45\.0，@base-ui/react ^1\.8\.0
- 首次发布：2026-10-01T02:31:18.856Z
- 最新版本发布：2026-11-15T22:25:18.459Z
- 近 30 天下载量：14503（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 25 个）

## 中文简介

设计系统G4 OS:指使,组件 React (Base UI + Tailwind v4),gráficos e groupos de tela para construir CRM,ATS,ERP e qualquer produto.

## 安装

```sh
npm install @g4ai/ds
```

也可以使用：`pnpm add @g4ai/ds`、`yarn add @g4ai/ds`、`bun add @g4ai/ds`

## README

# G4OS-DS 系统

[![npm](https://img.shields.io/npm/v/%40g4ai%2Fds.svg?color=202124)](https://www.npmjs.com/package/@g4ai/ds) [![CI](https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS/actions/workflows/ci.yml/badge.svg)](https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS/actions/workflows/ci.yml) [![license](https://img.shields.io/badge/license-MIT-b9915b.svg)](https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS/blob/main/LICENSE)

**站点电子文档ação:** [https://gestao-quatro-ponto-zero.github.io/G4OS-DS/ 互联网档案馆的存檔,存档日期2013-12-12](https://gestao-quatro-ponto-zero.github.io/G4OS-DS/) • 妇女 **无 :** [`@g4ai/ds`](https://www.npmjs.com/package/@g4ai/ds)

设计系统 **等离子体 G4 OS** ——CRM,ATS,ERP,Franchiro,IA,门户网站 do cliente,produto SaaS ——相机语言视觉:

-   **键** (原始内容存档于2013-10-12). emtários, com **特玛·埃斯库罗** 电子 **马尔卡斯德客户端e** (原始内容存档于2018-10-25). trocando só variáveis.
-   **构成部分**:回放19 (compatível com 18.2+) + Base UI + Tailwind v4,em português, acessíveis, responsivos. Gráficos em SVG sem dependência. 中国植物物种信息数据库.
-   **布洛克斯语Name**: 85+ telas confletas (dashboards, 管道, registros, listas, IA, 登录, configurações) para copiar e trocar os dados.
-   **Feito 准代理人**:服务员MCP, `llms.txt`时 `ai/` 克洛德密码.

## 安装

Requisitos: 反应出18.2+ou 19, Tailwind CSS 4, Node 20+ ()[反应 18](https://npmcn.com/package/%40g4ai/ds/docs/guias/instalacao.md#react-18)) (中文(简体) ).

```bash
pnpm add @g4ai/ds @base-ui/react lucide-react        # ou npm i / yarn add
pnpm add -D tailwindcss @tailwindcss/postcss         # Vite: @tailwindcss/vite
npx g4os-ds doctor                                    # confere React, Tailwind, CSS, tema e fonte
npx g4os-ds init                                      # auditoria contínua: config, scripts ds:*, CI (ver "Qualidade")
```

```css
/* app/globals.css (Next) ou src/index.css (Vite) */
@import "tailwindcss";
@import "@g4ai/ds/styles.css";   /* tokens, temas, componentes; já traz os @source do DS */
```

O pacote publica JavaScript compilado (ESM com) (英语) `"use client"`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}E tipos, junto com o CSS e o código-fonte que o Tailwindle lê. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我需要你帮助 诺·普里西萨德 `transpilePackages` nem 外加插件 .

### Next.js (App路由器) (英语)

```tsx
// app/layout.tsx
import { themeScript } from "@g4ai/ds";
import { DsSetup } from "@/lib/ds";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" className="ds-app" data-theme="system" suppressHydrationWarning>
      <head><script dangerouslySetInnerHTML={{ __html: themeScript }} /></head>
      <body><DsSetup />{children}</body>
    </html>
  );
}
```

```tsx
// lib/ds.tsx — registra o Link do Next nos componentes com href
"use client";
import Link from "next/link";
import { setLinkComponent } from "@g4ai/ds";
setLinkComponent(Link);
export function DsSetup() { return null; }
```

启动压缩器 : [`templates/next-app`](https://npmcn.com/package/%40g4ai/ds/templates/next-app) - 圭亚那: [文档/guas/下册](https://npmcn.com/package/%40g4ai/ds/docs/guias/next.md)。 。 。 .

### 维特

```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { themeScript } from "@g4ai/ds/lib/theme";

// Aplica o tema salvo antes da primeira pintura (sem piscar).
const dsTheme = { name: "ds-theme", transformIndexHtml: () => [{ tag: "script", children: themeScript, injectTo: "head-prepend" as const }] };

export default defineConfig({ plugins: [react(), tailwindcss(), dsTheme] });
```

```html
<!-- index.html -->
<html lang="pt-BR" class="ds-app" data-theme="system">
```

贵亚: [文件/guias/vite.md](https://npmcn.com/package/%40g4ai/ds/docs/guias/vite.md)。 。 。 .

### 用户

```tsx
import { AppShell, Sidebar, Page, PageHeading, KpiGrid, KpiCard, ChartCard, AreaChart, formatCurrency } from "@g4ai/ds";
```

帕雷·来萨·马·德多拉(Para começar uma tela, compie o groupo mais parecido de) `node_modules/@g4ai/ds/src/blocks/` (你做现场,aba) **科迪戈语Name**{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}那就叫爸爸们.

## Tema, 暗模式 e marca

```html
<html data-theme="dark">                <!-- light | dark | system; ThemeToggle/useTheme trocam e salvam -->
<html data-brand="g4os">    <!-- presets de marca; ou o seu [data-brand="acme"] com --ds-primary… -->
<html data-type="editorial">            <!-- presets de tipografia -->
```

Marca de cliente com contexte AA (claro e escuro):技能 技术 `ds-theme`ferramenta MCP (英语) `theme_from_colors` 尔 [文件/基金/temas-e-dark-mode.md](https://npmcn.com/package/%40g4ai/ds/docs/fundamentos/temas-e-dark-mode.md)。 。 。 .

## Usar 连锁店 IA

**MCP 磁共振** (Claude Code, Codex, Cursor, VS Code, 双子座CLI, Zed, Windsurf, pi, qulquer clientee MCP). Roda local, lê an versão instalada do DS, sem rede: 互联网档案馆的存檔,存档日期2013-12-02., p

```bash
claude mcp add g4os-ds -- npx -y @g4ai/ds mcp     # Claude Code
codex mcp add g4os-ds -- npx -y @g4ai/ds mcp      # Codex
```

```json
// Cursor, Claude Desktop, Windsurf, Gemini CLI… · VS Code (.vscode/mcp.json) usa "servers" no lugar de "mcpServers"
{ "mcpServers": { "g4os-ds": { "command": "npx", "args": ["-y", "@g4ai/ds", "mcp"] } } }
```

Config de cada 客户端, Windows, modo HTTP (`npx -y @g4ai/ds mcp --http`e 问题: [文件/吉亚斯/mcp.md](https://npmcn.com/package/%40g4ai/ds/docs/guias/mcp.md)。 。 。 .

费拉门塔斯: `search`, (中文(简体) ), `get_component`, (中文(简体) ), `list_blocks`, (中文(简体) ), `get_block`, (中文(简体) ), `get_guide`, (中文(简体) ), `get_tokens`, (中文(简体) ), `theme_from_colors`, (中文(简体) ), `audit`, (中文(简体) ), `doctor`。提示: `criar-tela`, (中文(简体) ), `revisar-tela`, (中文(简体) ), `adaptar-projeto`。 。 。 .

**网页** (段落代理 que só leem URLs):

-   [https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms.txt 互联网档案馆的存檔,存档日期2013-12-02](https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms.txt) ——í地
-   [https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms-full.txt (中文(简体) )](https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms-full.txt) - 拖地纳姆·阿尔基沃
-   `…/ai/core.md`, (中文(简体) ), `…/ai/components/<módulo>.md`, (中文(简体) ), `…/ai/blocks/<slug>.md`, (中文(简体) ), `…/ai/manifest.json`, (中文(简体) ), `…/docs/…`

**没有直肠**数字 : `node_modules/@g4ai/ds/ai/core.md` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}一个港 科尔 [`templates/AGENTS.snippet.md`](https://npmcn.com/package/%40g4ai/ds/templates/AGENTS.snippet.md) 没有 `AGENTS.md`编号 :`CLAUDE.md` 做应用.

**插件执行 Claude 代码** (技术) `g4os-ds`, (中文(简体) ), `ds-create`, (中文(简体) ), `ds-migrate`, (中文(简体) ), `ds-review`, (中文(简体) ), `ds-theme`:

```text
/plugin marketplace add Gestao-Quatro-Ponto-Zero/G4OS-DS
/plugin install g4os-ds@g4os
```

Depois peça (英语) _"Adapte este projeto ao G4OS-DS" (英语)_, (中文(简体) ), _"请使用tela de pedidos com o 设计系统"_, (中文(简体) ), _(原始内容存档于2018-10-21) (英语). Revise esta tela_, (中文(简体) ), _"Tema do cliente Acme, azul #0b5cff" (英语)_贵亚: [文件/guas/usar-com-ia.md](https://npmcn.com/package/%40g4ai/ds/docs/guias/usar-com-ia.md) 没有网站: **吉亚斯·德·伊阿代理人**。 。 。 .

## 资格:审计员,英特克

如DS(托肯斯、Tipografia、página Anatomia、comosição de parties、acessibilidade、格式化escrita pt-BR、进口、React) 等。 Um motor só, usado pelo CLI, pelo插件 ESLint, pelo CI e pela 工具 `audit` 做磁共振 吉娅·康普莱托: [文件/guias/auditoria.md](https://npmcn.com/package/%40g4ai/ds/docs/guias/auditoria.md)。 。 。 .

```bash
npx g4os-ds init                      # g4os-ds.config.json + scripts ds:* + workflow de CI (--eslint, --hook lefthook, --baseline)
npx g4os-ds doctor                    # pré-requisitos: React 18.2+/19, Tailwind v4, ordem do CSS, tema, fonte, React duplicado
npx g4os-ds audit                     # o que foge do DS, com a troca sugerida
npx g4os-ds audit --fix               # aplica as trocas seguras (bg-white→bg-surface, rounded-[12px]→rounded-card…)
npx g4os-ds audit --changed           # só o que mudou (--staged no pre-commit, --since origin/main no PR)
npx g4os-ds audit --baseline          # projeto legado: só achado novo falha
npx g4os-ds audit --format sarif      # também: pretty, json, markdown, github (anotações no PR)
npx g4os-ds rules                     # lista as 47 regras
```

```js
// eslint.config.mjs: as mesmas regras no editor e no `eslint .`
import g4osDs from "@g4ai/ds/eslint";
export default [/* …sua config */ g4osDs.configs.recommended];
```

退出代码 : `0` ok \\fn微软雅黑okay \\fn微软雅黑okay \\fn方正黑体简体\\fs18\\b1\\bord1\\shad1\\3ch2f2f2f}美国海军陆战队 `1` 阿查多斯克法尔姆 `2` (原始内容存档于2018-09-21). woro de uso/ config. 行动: `// g4os-ds-disable-next-line <regra> -- motivo`。 。 。 .

(原始内容存档于2018-10-26) (中文(中国大陆) ). Regras de anatomia e comosção pegam o que deixa uma muma migrada "esquisita" mesmo com 0 错误:copo centralizado fora do eixo do título (中文)`page-width-wrapper`(botão desabilitado apagado por 包装纸)`disabled-wrapper`(原始内容存档于2017-09-29) (中文(简体) ). ). . `field-double-label`),可控结(`raw-input`, (中文(简体) ), `Select` por linha (英语:`select-per-row`), texto em inglês ou"com supesso!" (中文(简体) )`english-copy`, (中文(简体) ), `copy-tone`) (中文(简体) ). (原始内容存档于2018-10-21) (英语). Para medir se agentes de IA acertam com essas instruel'es, há um eval em `scripts/eval/` (单位:千美元)[旧相机 IA](https://npmcn.com/package/%40g4ai/ds/docs/guias/usar-com-ia.md#medir-se-os-agentes-acertam-eval)) (中文(简体) ).

## 国 际

```bash
npx g4os-ds init                      # prepara o projeto (config, scripts, CI)
npx g4os-ds doctor                    # o projeto pode usar o DS?
npx g4os-ds audit [pastas]            # auditoria (--fix, --format, --changed, --baseline)
npx g4os-ds rules                     # regras, categorias e gravidades
npx g4os-ds guide                     # imprime o caminho do guia ai/core.md
npx g4os-ds mcp                       # servidor MCP (stdio; --http para Streamable HTTP)
```

## 阿图利扎尔·德·万索

```bash
pnpm up @g4ai/ds                      # ou npm i @g4ai/ds@latest
npx g4os-ds audit --fix               # troca nomes renomeados e o que for seguro; aponta regras novas
```

莱亚 [变化](https://npmcn.com/package/%40g4ai/ds/CHANGELOG.md) (原始内容存档于2018-06-26) (英语). Couring a sua versão e a nova: cada entrada diz o que o app precisa fazer. 雷诺梅亚斯相机 `ai/renames.json`; 相机插件, peça _"承认o@g4ai/ds e ajusteo o código"_ (技能) `ds-migrate`(原始内容存档于2018-10-25). Modo atualização. 塞吉摩斯语Name [交换器](https://semver.org/lang/pt-BR/): equanto estiversmos em (英语) `0.x`泥地克克克克克克克克克克克克克克克克克克克克克 **小声** e vem com"como偏头痛".

## 文件

| 段落 | 翁德 |
| --- | --- |
| 电子组合组件 | [站点](https://gestao-quatro-ponto-zero.github.io/G4OS-DS/) (⌘克公交Tudo) |
| 安装电子配置器 | [因斯特拉索](https://npmcn.com/package/%40g4ai/ds/docs/guias/instalacao.md) • 妇女 [下一个](https://npmcn.com/package/%40g4ai/ds/docs/guias/next.md) • 妇女 [维特](https://npmcn.com/package/%40g4ai/ds/docs/guias/vite.md) • 妇女 [页:1](https://npmcn.com/package/%40g4ai/ds/docs/guias/shadcn.md) |
| 释迦牟尼佛活佛 | [偏头痛](https://npmcn.com/package/%40g4ai/ds/docs/guias/migracao.md) |
| 蒙塔尔电话 | [帕吉纳岛](https://npmcn.com/package/%40g4ai/ds/docs/padroes/anatomia-de-pagina.md) • 妇女 [父亲](https://npmcn.com/package/%40g4ai/ds/docs/padroes) • 妇女 [集团](https://npmcn.com/package/%40g4ai/ds/ai/blocks) |
| (原始内容存档于2018-07-26) (英语). Montar um app inteiro | [收视率](https://npmcn.com/package/%40g4ai/ds/docs/receitas):客户关系管理、苯丙胺类兴奋剂、企业资源规划、财务罗、门户服务 |
| 基金 | [符号](https://npmcn.com/package/%40g4ai/ds/docs/fundamentos/tokens.md) • 妇女 [temas e 暗模式](https://npmcn.com/package/%40g4ai/ds/docs/fundamentos/temas-e-dark-mode.md) • 妇女 [埃斯克里亚语name](https://npmcn.com/package/%40g4ai/ds/docs/fundamentos/escrita.md) |
| Pessoas e 代理 | [一般事务人员(其他职等)](https://npmcn.com/package/%40g4ai/ds/AGENTS.md) |

## 构成部分

Todos 导出多 `@g4ai/ds` (你波多罗: `@g4ai/ds/components/<arquivo>`) (中文(简体) ).

| 法米利亚 | 阿尔基沃 | 导出a |
| --- | --- | --- |
| **初级** | `primitives` | `Button`, (中文(简体) ), `IconButton`, (中文(简体) ), `buttonClass`, (中文(简体) ), `FilterChip`, (中文(简体) ), `Badge`, (中文(简体) ), `Dot`, (中文(简体) ), `CriticalFlag`, (中文(简体) ), `Avatar`, (中文(简体) ), `AvatarGroup`, (中文(简体) ), `EntityMark`, (中文(简体) ), `Card`, (中文(简体) ), `LinkedCard`, (中文(简体) ), `CardAction`, (中文(简体) ), `Section`, (中文(简体) ), `Field`, (中文(简体) ), `FactLine`, (中文(简体) ), `Metric`, (中文(简体) ), `StatGrid`, (中文(简体) ), `StatCell`, (中文(简体) ), `Meter`, (中文(简体) ), `Empty`, (中文(简体) ), `Page`, (中文(简体) ), `Kbd`, (中文(简体) ), `DsLink`, (中文(简体) ), `setLinkComponent`, (中文(简体) ), `Tone`, (中文(简体) ), `toneDot`, (中文(简体) ), `toneText` |
| **福尔图拉斯基地** | `forms` | `FieldBlock`, (中文(简体) ), `FieldGrid`, (中文(简体) ), `fieldClass`, (中文(简体) ), `areaClass`, (中文(简体) ), `Select`, (中文(简体) ), `Combobox`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Switch`, (中文(简体) ), `SearchInput` |
| **坎波斯语Name** | `inputs` | `TextField`, (中文(简体) ), `TextareaField`, (中文(简体) ), `PasswordField`, (中文(简体) ), `passwordStrength`, (中文(简体) ), `NumberField`, (中文(简体) ), `CurrencyField`, (中文(简体) ), `MaskedField`, (中文(简体) ), `masks`, (中文(简体) ), `applyMask`, (中文(简体) ), `OtpInput`, (中文(简体) ), `TagInput`, (中文(简体) ), `Slider`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `ChoiceCards`, (中文(简体) ), `ToggleGroup`, (中文(简体) ), `FileDropzone`, (中文(简体) ), `Rating`, (中文(简体) ), `InlineEdit` |
| **数据** | `date-picker` | `DatePicker`, (中文(简体) ), `toDate`, (中文(简体) ), `toIso`, (中文(简体) ), `formatIsoDate` |
| **导航** | `navigation` | `Sidebar`, (中文(简体) ), `ProductMark`, (中文(简体) ), `SyncStatus`, (中文(简体) ), `PageHeading`, (中文(简体) ), `StickyHeader`, (中文(简体) ), `Breadcrumb`, (中文(简体) ), `ContextBar`, (中文(简体) ), `Tabs`, (中文(简体) ), `SegmentedControl`, (中文(简体) ), `ActionMenu`, (中文(简体) ), `actionMenuTriggerClass` |
| **版式** | `layout` | `AppShell`, (中文(简体) ), `ShellBanner`, (中文(简体) ), `EntityHeader`, (中文(简体) ), `SplitLayout`, (中文(简体) ), `ReadingColumn` |
| **雷科利维** | `disclosure` | `Accordion`, (中文(简体) ), `Collapsible`, (中文(简体) ), `TreeView`, (中文(简体) ), `DescriptionToggle` |
| **苏布雷波西岛** | `overlays` | `Modal`, (中文(简体) ), `ConfirmDialog`, (中文(简体) ), `Drawer`, (中文(简体) ), `Popover`, (中文(简体) ), `popupClass` |
| **索布雷波西( Sobreposi) 额外项目** | `overlays-extra` | `Tooltip`, (中文(简体) ), `TooltipGroup`, (中文(简体) ), `HoverCard`, (中文(简体) ), `Menu`, (中文(简体) ), `ContextMenu`, (中文(简体) ), `Sheet`, (中文(简体) ), `CommandPalette`, (中文(简体) ), `useCommandShortcut`, (中文(简体) ), `Lightbox` |
| **反馈** | `feedback` | `notify`, (中文(简体) ), `Toaster`, (中文(简体) ), `Callout`, (中文(简体) ), `useOperation`, (中文(简体) ), `OperationButton`, (中文(简体) ), `OperationFeedback`, (中文(简体) ), `UncertainFailure`, (中文(简体) ), `Skeleton` |
| **埃斯塔多斯** | `states` | `StateView`, (中文(简体) ), `NotFoundState`, (中文(简体) ), `ErrorState`, (中文(简体) ), `ForbiddenState`, (中文(简体) ), `OfflineState`, (中文(简体) ), `MaintenanceState`, (中文(简体) ), `SuccessState`, (中文(简体) ), `LoadingState`, (中文(简体) ), `LoadingOverlay`, (中文(简体) ), `Spinner`, (中文(简体) ), `Banner`, (中文(简体) ), `InlineMessage`, (中文(简体) ), `AlertCard`, (中文(简体) ), `CountBadge`, (中文(简体) ), `NotificationDot` |
| **状况e 进展o** | `status` | `StatusLabel`, (中文(简体) ), `HealthDot`, (中文(简体) ), `StatusBar`, (中文(简体) ), `Stepper`, (中文(简体) ), `NextStep`, (中文(简体) ), `Timeline`, (中文(简体) ), `statusColor`, (中文(简体) ), `statusLabel`, (中文(简体) ), `statusOrder` |
| **科尔什** | `collections` | `TableToolbar`, (中文(简体) ), `FacetFilter`, (中文(简体) ), `DataTable`, (中文(简体) ), `Column`, (中文(简体) ), `DisplayControls`, (中文(简体) ), `DensityControl`, (中文(简体) ), `useCollectionDisplay`, (中文(简体) ), `ListPanel`, (中文(简体) ), `ListRow`, (中文(简体) ), `KanbanBoard`, (中文(简体) ), `KanbanColumn`, (中文(简体) ), `KanbanCard`, (中文(简体) ), `collectionThresholds` |
| **塔贝拉岛** | `data` | `useSort`, (中文(简体) ), `SortHeader`, (中文(简体) ), `useSelection`, (中文(简体) ), `selectionColumn`, (中文(简体) ), `BulkBar`, (中文(简体) ), `usePagination`, (中文(简体) ), `Pagination`, (中文(简体) ), `PropertyList` |
| **管道** | `pipeline` | `StagePath`, (中文(简体) ), `RecordCard` |
| **盘子** | `dashboard` | `KpiCard`, (中文(简体) ), `KpiGrid`, (中文(简体) ), `Delta`, (中文(简体) ), `ChartCard`, (中文(简体) ), `GoalMeter`, (中文(简体) ), `CompareStat`, (中文(简体) ), `ActivityFeed`, (中文(简体) ), `Leaderboard` |
| **格拉菲科斯语Name** | `charts` | `AreaChart`, (中文(简体) ), `LineChart`, (中文(简体) ), `BarChart`, (中文(简体) ), `Sparkline`, (中文(简体) ), `BarList`, (中文(简体) ), `DonutChart`, (中文(简体) ), `FunnelChart`, (中文(简体) ), `CalendarHeatmap`, (中文(简体) ), `ProgressRing`, (中文(简体) ), `ChartTooltip`, (中文(简体) ), `ChartLegend`, (中文(简体) ), `chartColor` |
| **格拉菲科斯·阿万萨多斯** | `charts-advanced` | `Treemap`, (中文(简体) ), `WaterfallChart`, (中文(简体) ), `ScatterChart`, (中文(简体) ), `RadarChart`, (中文(简体) ), `GaugeChart`, (中文(简体) ), `BulletChart`, (中文(简体) ), `SankeyChart`, (中文(简体) ), `HeatmapMatrix`, (中文(简体) ), `ComboChart`, (中文(简体) ), `ProportionBar`, (中文(简体) ), `GanttChart` |
| **米迪亚-孔图多** | `media` | `Carousel`, (中文(简体) ), `SlideDeck`, (中文(简体) ), `Slide`, (中文(简体) ), `SlideTitle`, (中文(简体) ), `SlideBullets`, (中文(简体) ), `SlideSplit`, (中文(简体) ), `SlideStat`, (中文(简体) ), `SlideQuote`, (中文(简体) ), `SlideCanvas`, (中文(简体) ), `ImageGallery`, (中文(简体) ), `AspectFrame`, (中文(简体) ), `FileCard`, (中文(简体) ), `FileIcon`, (中文(简体) ), `formatBytes` |
| **乌蒂利塔里奥斯** | `lib/*` | `cn`, (中文(简体) ), `formatCurrency`, (中文(简体) ), `formatNumber`, (中文(简体) ), `formatPercent`, (中文(简体) ), `formatDelta`, (中文(简体) ), `formatCompact`, (中文(简体) ), `formatDate`, (中文(简体) ), `formatRelative`, (中文(简体) ), `normalize`, (中文(简体) ), `plural`, (中文(简体) ), `initials`, (中文(简体) ), `usePortalContainer`, (中文(简体) ), `tokens` |

Exemplos vivos, regres e道具 : [站点](https://gestao-quatro-ponto-zero.github.io/G4OS-DS/) 尔 `ai/components/<arquivo>.md`。列表a [`src/index.ts`](https://npmcn.com/package/%40g4ai/ds/src/index.ts)。 。 。 .

## 布洛克斯语Name

阿尔基沃斯 `src/blocks/` (também no pacote: m: `node_modules/@g4ai/ds/src/blocks/`) (中文(简体) ). 卡达集团 `@g4ai/ds`funciona de 320 a 1440 px e explica o (英语) **猜谜游戏** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}哦! {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}哦 `ai/blocks/<slug>.md`。 。 。 .

| 分类 | 实例 |
| --- | --- |
| 萨萨 | `saas-dashboard`, (中文(简体) ), `saas-customers`, (中文(简体) ), `saas-plans`, (中文(简体) ), `saas-usage`, (中文(简体) ), `saas-analytics`, (中文(简体) ), `saas-mrr-bridge`, (中文(简体) ), `saas-retention`, (中文(简体) ), `saas-journey`, (中文(简体) ), `saas-unit-economics`, (中文(简体) ), `saas-regions`, (中文(简体) ), `saas-explore`, (中文(简体) ), `saas-usage-horizon` |
| 客户关系管理 | `crm-sales-dashboard`, (中文(简体) ), `crm-pipeline`, (中文(简体) ), `crm-leads`, (中文(简体) ), `crm-quotes`, (中文(简体) ), `crm-deal`, (中文(简体) ), `crm-contacts` |
| 苯丙胺类兴奋剂 | `ats-dashboard`, (中文(简体) ), `ats-jobs`, (中文(简体) ), `ats-pipeline`, (中文(简体) ), `ats-candidate`, (中文(简体) ), `ats-requisitions`, (中文(简体) ), `ats-reports` |
| 企业资源规划 | `erp-dashboard`, (中文(简体) ), `erp-orders`, (中文(简体) ), `erp-products`, (中文(简体) ), `erp-purchase-orders`, (中文(简体) ), `erp-receiving`, (中文(简体) ), `erp-shipping`, (中文(简体) ), `erp-invoice` |
| Serviços(保留机构) | `srv-dashboard`, (中文(简体) ), `srv-work-orders`, (中文(简体) ), `srv-work-order`, (中文(简体) ), `srv-contracts`, (中文(简体) ), `srv-invoices`, (中文(简体) ), `srv-billing` |
| 财务罗 | `fin-dashboard`, (中文(简体) ), `fin-cashflow`, (中文(简体) ), `fin-receivables`, (中文(简体) ), `fin-bank-accounts`, (中文(简体) ), `fin-dre`, (中文(简体) ), `fin-reconciliation` |
| 对比度 | `clm-dashboard`, (中文(简体) ), `clm-contracts`, (中文(简体) ), `clm-contract`, (中文(简体) ), `clm-approvals`, (中文(简体) ), `clm-obligations` |
| 社区 | `comms-home`, (中文(简体) ), `comms-announcement`, (中文(简体) ), `comms-channels`, (中文(简体) ), `comms-people`, (中文(简体) ), `comms-surveys` |
| 内审 | `ai-agents-dashboard`, (中文(简体) ), `ai-agents`, (中文(简体) ), `ai-agent`, (中文(简体) ), `ai-runs`, (中文(简体) ), `ai-approvals`, (中文(简体) ), `ai-agent-evals`, (中文(简体) ), `ai-agent-run`, (中文(简体) ), `ai-workspace`, (中文(简体) ), `ai-chat`, (中文(简体) ), `ai-answer`, (中文(简体) ), `ai-delegate`, (中文(简体) ), `ai-codex` |
| 阿普利卡索 | `app-command-palette`, (中文(简体) ), `app-notifications`, (中文(简体) ), `app-file-manager`, (中文(简体) ), `app-error-pages`, (中文(简体) ), `app-presentation`, (中文(简体) ), `app-help-center`, (中文(简体) ), `app-legal` |
| 上船时的装备 | `auth-login`, (中文(简体) ), `auth-otp`, (中文(简体) ), `settings-organization`, (中文(简体) ), `settings-roles`, (中文(简体) ), `settings-team`, (中文(简体) ), `settings-billing`, (中文(简体) ), `settings-storage`, (中文(简体) ), `onboarding-wizard`, (中文(简体) ), `onboarding-intro` |

Catálogo completo com objetivo de cada um: Catálogo completo com com objetivo de cada um: Catálogo completo com com com com objetivo de cada um: Catálogo com com com com com com com com objetivo de cada : ada: Catálogo : o: o: Ctálogo 取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 [ai/llms.txt (韩语)](https://npmcn.com/package/%40g4ai/ds/ai/llms.txt) 尔 `list_blocks` 没有MCP。 精准集团 usar por tipo de app: [一般事务人员(其他职等)](https://npmcn.com/package/%40g4ai/ds/AGENTS.md#qual-bloco-usar)。 。 。 .

## 阴影/ ii e 第21次dev

(原始内容存档于2018-09-26) (英语). Para o que o DS não tem, traga do shadcn/ui do 21st.dev e strime `@g4ai/ds/shadcn.css`: 瓦里亚维斯在用"花"来表示代号 科利索斯语`bg-accent`, (中文(简体) ), `bg-muted`e 核对表: [文件/调查表/影印本](https://npmcn.com/package/%40g4ai/ds/docs/guias/shadcn.md)。 。 。 .

## 联系人

```bash
git clone https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS.git && cd G4OS-DS
npm ci
npm run showcase:watch                # site local em showcase/dist
npm run check                         # tokens + tipos + lint + ai/ em dia + auditoria + testes (critério de pronto)
npx changeset                         # descreve a mudança: patch, minor ou major
```

**科莫·赛·马·韦相:** o PR com 改变 entra na `main` o GitHub 活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口 **"范克兰克"(德語:Versão de lançamento),又译"兰克兰克"** ao mesclar esse PR, o pacote é publicado nonpm automament (信任出版,com出处). 宁古埃姆·罗达 `npm publish` à. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 共和党 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}一个卡达推拿 `main`。 。 。 .

豪华相接: [捐款额](https://npmcn.com/package/%40g4ai/ds/CONTRIBUTING.md) • 反 " técnicos " (构件、集团、página do site): [页:1](https://npmcn.com/package/%40g4ai/ds/docs/guias/contribuir.md)。 。 。 .

| 科曼多语Name | 法兹 |
| --- | --- |
| `npm run check` | 符号 CSS + TS + TypeScript + ESLint + `ai/` eM dia + 审计师 do próprio DS + 测试 do lint e do MCP |
| `npm run lint` | ESLint( typescript- eslint、 钩子、 jsx- a11y e 插件) `@g4ai/ds/eslint`(中文(简体) ) |
| `npm run audit:self` | `g4os-ds audit` 计划 `src/`, (中文(简体) ), `templates/` 电子 `showcase/` |
| `npm run test:lint` | (原始内容存档于2019-09-21) (中文(中国大陆) ). design de cada regra, Rule Tester do ESLint, config, basin, formatos,,,, `init` 电子 `doctor` |
| `npm run build` | 马皮拉 `dist/` (o que vai para o npm) (英语: |
| `npm run ai:build` | 重现 `ai/` (基亚代理) |
| `npm run showcase` | compila o site e service em http://localhost:4173 互联网档案馆的存檔,存档日期2011-12-03 |
| `npm run showcase:watch` | (原始内容存档于2017-03-31) (英语). recompila o site a cada mudança |

## 马帕确实重新保有

```
src/           styles/ (tokens, temas, componentes, shadcn.css) · tokens/ · lib/ · components/ · blocks/ · index.ts
showcase/      site de documentação (main.tsx, kit.tsx, pages/*.tsx, build.mjs → também gera llms.txt)
docs/          fundamentos · padroes · receitas · guias
ai/            gerado: core.md · tokens.md · components/*.md · blocks/*.md · manifest.json · llms.txt · renames.json
scripts/       cli.mjs (g4os-ds audit | doctor | init | rules | guide | mcp) · lint/ (regras, motor, formatos, plugin ESLint) · mcp.mjs · build-ai-docs.mjs
plugin/        plugin do Claude Code (skills) · .claude-plugin/marketplace.json
templates/     next-app (starter) · AGENTS.snippet.md
AGENTS.md      regras obrigatórias e qual bloco usar · CHANGELOG.md  o que mudou e o que o app precisa fazer
```

## 语法

科迪戈・索布 [麻省理工](https://npmcn.com/package/%40g4ai/ds/LICENSE). Os nomes e marcas "G4","G4 OS" e "G4 Educação" não são cobertos pela licença: ao usar o DS em outro produto, trouque a marca (英语:`ProductMark`(原始内容存档于2013-10-12). nome do produto. pela sua.

## 常见问题

### @g4ai/ds 是什么？

设计系统G4 OS:指使,组件 React \(Base UI \+ Tailwind v4\),gráficos e groupos de tela para construir CRM,ATS,ERP e qualquer produto\.

### 如何安装 @g4ai/ds？

在项目目录运行 npm install @g4ai/ds，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0 \|\| ^19\.0\.0）、react-dom（^18\.2\.0 \|\| ^19\.0\.0）、tailwindcss（^4\.3\.0）、lucide-react（\>=1\.45\.0）、@base-ui/react（^1\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 g4os-ds，可以用 npx g4os-ds 直接运行。

### @g4ai/ds 支持 TypeScript 吗？

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

### @g4ai/ds 支持 ESM 还是 CommonJS？

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

### @g4ai/ds 需要什么版本的 Node\.js？

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

### @g4ai/ds 可以商用吗？

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

### @g4ai/ds 的下载量有多少？

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

### @g4ai/ds 还在维护吗？

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