# @cloud-ru/ds-uikit-product-quota 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-quota/

版本：2\.1\.0
npm 元数据更新时间：2026-11-11T15:07:17.651Z
中文译文更新时间：2026-11-11T19:06:15.813Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-uikit-product-quota
原文对照：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-quota/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-quota
源码仓库：https://github.com/cloud-ru-tech/snack-v2

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

- 包体积（解压后）：584 kB，183 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：17 个
- 首次发布：2026-08-18T12:41:55.993Z
- 最新版本发布：2026-11-11T15:07:17.347Z
- 近 30 天下载量：4640（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：147（近 12 个月 147 个）

## 中文简介

QQ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 卡牌 {} 装入/ 错误 .

## 安装

```sh
npm install @cloud-ru/ds-uikit-product-quota
```

也可以使用：`pnpm add @cloud-ru/ds-uikit-product-quota`、`yarn add @cloud-ru/ds-uikit-product-quota`、`bun add @cloud-ru/ds-uikit-product-quota`

## README

# 配额

`@cloud-ru/ds-uikit-product-quota` -=YTET -伊甸园字幕组=- 翻译: 卡牌 {} 装入/ 错误 .

Пакет `@cloud-ru/ds-uikit-product-quota` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `QuotaItem` (单位:千美元)`name`, (中文(简体) ), `limit`, (中文(简体) ), `usage`, (中文(简体) ), `remains`, (中文(简体) ), `unitDisplayName`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你应该知道 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你应该知道.

-   ****配额**** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   ****配额WidgetMini**** -=ytet -伊甸园字幕组=- 翻译:.
-   ****配额元件卡**** -=ytet -伊甸园字幕组=- 翻译: `loading` 编号 : `noData`。 。 。 .

Карточки `QuotaWidget` и `QuotaWidgetMini` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `QuotaWidgetCard`; исчерпанные(квоты`remains <= 0`)"#############################################################################################################################################################################################################################################################.

Отдельно ****配额窗口**** . . . . . `QuotaWidget` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我还不知道你是谁 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}.

## Установка

```bash
pnpm add @cloud-ru/ds-uikit-product-quota
```

```ts
import { QuotaWidget, QuotaWidgetMini, QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota'
```

## 图片

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `Quota` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}"产品UI Kit".

## 配额

\-=YTET -伊甸园字幕组=- 翻译:.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你还好吧 **`Dropdown`** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 **`QuotaWidgetCard`**. . . . . . . `quotasUrl`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你还不知道吗 `canEditQuota`) (中文(简体) ).

### Когда

-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}################################# ######################################################################################################################################################################################################.
    
-   {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎么样.
    
-   Узкий:
    
    -   используйте **`QuotaWidgetMini`**。 。 。 .
-   说吧
    
    -   используйте **`QuotaWidgetCard`**。 。 。 .
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `PortalContextProvider` - контент рендерится портал `Dropdown`。 。 。 .
    
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎么样.
    
-   ✅ `error` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `onRefresh` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080} - \\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080} - \\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}.
    
-   ❌ `error` без `onRefresh` {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}你觉得呢.
    

### Анатомия

#### Триггер

`Button view='function'` # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #`remains <= 0`) (中文(简体) ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `buttonProps` (单位:千美元)`size`, (中文(简体) ), `appearance`, (中文(简体) ), `label`, (中文(简体) ), `fullWidth`, (中文(简体) ), `disabled`, (中文(简体) ), `className`) (中文(简体) ).

#### Шапка

-   `projectName` ——название.
-   `quotasUrl` + 键 `onQuotasUrlClick` - ссылка страницу квот квот квот.
-   `canEditQuota` + 键 `onIncreaseQuotaClick` - 。 。 。 。 .

#### Список

Сетка `QuotaWidgetCard`。 。 `disableSorting`(笑声)

-   `loading` - 骨架 - 骨架 - 骨架.
-   `error` . . . . `onRefresh`) (中文(简体) ).

#### Контент,без `QuotaWidgetContent`

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `Dropdown`. Нужен `sideBlock` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `BottomSheet`{\\fn方正准圆简体\\fs12\\1cHC9ECC4}我.. `QuotaWidget`。 。 。 .

移动 `QuotaWidget` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我被困住了 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我被困住了 `title` и `footer` листа,чтобы也. 说吧

-   `hideMobileHeader` . . . . .
-   `hideMobileIncreaseButton` . . . . . .

腾讯动漫. {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪################################## ##################################################################################################################################################################################################.

### Примеры

#### Базовый

计数器 ========

```tsx
import { QuotaItem, QuotaWidget } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTAS: QuotaItem[] = [
  { name: 'vCPU', limit: 100, usage: 42, remains: 58, unitDisplayName: 'cores' },
  { name: 'RAM', limit: 256, usage: 230, remains: 26, unitDisplayName: 'GB' },
  { name: 'SSD', limit: 1000, usage: 1000, remains: 0, unitDisplayName: 'GB' },
  { name: 'Public IP', limit: 10, usage: 9, remains: 1, unitDisplayName: 'pcs' },
];

export function QuotaWidgetBasic() {
  const [loading, setLoading] = useState(false);

  const reload = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 800);
  };

  return (
    // В продукте виджет живёт у правого края страницы — dropdown прижат к правому краю триггера
    <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
      <QuotaWidget
        quotas={QUOTAS}
        projectName='ml-platform-production'
        quotasUrl='#'
        canEditQuota={false}
        loading={loading}
        error={false}
        onRefresh={reload}
      />
    </div>
  );
}
```

#### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

出错 QQ; 重新装入 {}

```tsx
import { QuotaItem, QuotaWidget } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTAS: QuotaItem[] = [
  { name: 'vCPU', limit: 100, usage: 42, remains: 58, unitDisplayName: 'cores' },
  { name: 'RAM', limit: 256, usage: 230, remains: 26, unitDisplayName: 'GB' },
];

export function QuotaWidgetError() {
  const [error, setError] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleRefresh = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setError(false);
    }, 800);
  };

  return (
    // В продукте виджет живёт у правого края страницы — dropdown прижат к правому краю триггера
    <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
      <QuotaWidget
        quotas={QUOTAS}
        projectName='ml-platform-production'
        quotasUrl='#'
        canEditQuota={false}
        loading={loading}
        error={error}
        onRefresh={handleRefresh}
      />
    </div>
  );
}
```

### 道具

#### 配额

**配额窗口**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `buttonProps` | `ButtonProps` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `canEditQuota` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `data-test-id` | `string` | —— 说 |  |
| `disableSorting` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `error` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `loading` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onIncreaseQuotaClick` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onQuotasUrlClick` | `(() => void)` | —— 说 | Колбек:"也 |
| `onRefresh` | `() => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onWidgetOpen` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `projectName` | `string` | —— 说 | Название,по也 |
| `quotas` | `QuotaItem` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `quotasUrl` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `skeletonRowCount` | `number` | `4` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.  
\- Строка ряд: две (桌面-дропдаун) даёт (:,  
\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `QuotaWidgetMini`) — — — — —— —— (中文(简体) ). |

##### 相关类型

**定额项目**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `limit` | `number` | —— 说 | Лимит |
| `name` | `string` | —— 说 | Название |
| `remains` | `number` | —— 说 | Остаток |
| `unitDisplayName` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `usage` | `number` | —— 说 | Потребление |

#### 配额窗口

**配额 Widget 配置方案**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `canEditQuota` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `data-test-id` | `string` | —— 说 |  |
| `disableSorting` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `error` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `hideMobileHeader` | `boolean` | `false` | \# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #`title` (原始内容存档于2018-07-29). Otter Sheet.  
腾讯网. |
| `hideMobileIncreaseButton` | `boolean` | `false` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`footer` (原始内容存档于2016-10-12). qq.  
腾讯网. |
| `loading` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onIncreaseQuotaClick` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onQuotasUrlClick` | `(() => void)` | —— 说 | Колбек:"也 |
| `onRefresh` | `() => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onWidgetOpen` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `projectName` | `string` | —— 说 | Название,по也 |
| `quotas` | `QuotaItem` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `quotasUrl` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `skeletonRowCount` | `number` | `4` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.  
\- Строка ряд: две (桌面-дропдаун) даёт (:,  
\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `QuotaWidgetMini`) — — — — —— —— (中文(简体) ). |

##### 相关类型

**定额项目**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `limit` | `number` | —— 说 | Лимит |
| `name` | `string` | —— 说 | Название |
| `remains` | `number` | —— 说 | Остаток |
| `unitDisplayName` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `usage` | `number` | —— 说 | Потребление |

### Смотри

-   **配额WidgetMini** -=ytet -伊甸园字幕组=- 翻译:.
-   **配额元件卡** - 。 。 。 。 .
-   **下坠** - 。 。 。 。 .

## 配额WidgetMini

\[永久失效連結\] 腾讯网.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **`Accordion`**:======================================================================================================================================================================================= -====================================================================== **`QuotaWidgetCard`** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎样.

### Когда

-   {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪## ## ## ## # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #.
    
-   移动/适应布局' .
    
-   Шапка:
    
    -   используйте **`QuotaWidget`**。 。 。 .
-   ✅ `defaultExpanded`,"квоты","ключевой"等.
    
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我被控制着 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我被控制着.
    

### Анатомия

#### Заголовок

`Accordion.CollapseBlockSecondary`: 标题. . `Counter appearance='critical'` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `loading` 编号 : `error`),则"-" `projectName` 切开.

#### Содержимое

-   Вертикальный `QuotaWidgetCard`; исчерпанные; квоты; начало`disableSorting` (原始内容存档于2016-10-12). qq.
-   `loading` - 骨架; `error` . . . . `onRefresh`) (中文(简体) ).
-   Кнопка(«Увеличить)`canEditQuota`, (中文(简体) ), `onIncreaseQuotaClick`) (中文(简体) ).

### Примеры

#### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

默认扩展 + 计数器 + + + + + + + + +

```tsx
import { QuotaItem, QuotaWidgetMini } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTAS: QuotaItem[] = [
  { name: 'SSD', limit: 1000, usage: 1000, remains: 0, unitDisplayName: 'GB' },
  { name: 'RAM', limit: 256, usage: 230, remains: 26, unitDisplayName: 'GB' },
  { name: 'vCPU', limit: 100, usage: 42, remains: 58, unitDisplayName: 'cores' },
];

export function QuotaWidgetMiniExpanded() {
  const [loading, setLoading] = useState(false);

  const reload = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 800);
  };

  return (
    <QuotaWidgetMini
      quotas={QUOTAS}
      projectName='ml-platform-production'
      canEditQuota={false}
      defaultExpanded
      loading={loading}
      error={false}
      onRefresh={reload}
    />
  );
}
```

### 道具

**配额WidgetMiniProps**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `canEditQuota` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `data-test-id` | `string` | —— 说 |  |
| `defaultExpanded` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `disableSorting` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `error` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `loading` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onIncreaseQuotaClick` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onRefresh` | `() => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onWidgetOpen` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `projectName` | `string` | —— 说 | Название,по也 |
| `quotas` | `QuotaItem` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `skeletonRowCount` | `number` | `4` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.  
\- Строка ряд: две (桌面-дропдаун) даёт (:,  
\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `QuotaWidgetMini`) — — — — —— —— (中文(简体) ). |

##### 相关类型

**定额项目**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `limit` | `number` | —— 说 | Лимит |
| `name` | `string` | —— 说 | Название |
| `remains` | `number` | —— 说 | Остаток |
| `unitDisplayName` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `usage` | `number` | —— 说 | Потребление |

### Смотри

-   **配额** {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}你觉得呢.
-   **配额元件卡** - 。 。 。 。 .
-   **手风琴** - 。 。 。 。 .

## 配额元件卡

\-=YTET -伊甸园字幕组=- 翻译:.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `QuotaItem`: название, остаток :, **`ProgressBar`** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得怎样 **`Tooltip`** с. Используется **`QuotaWidget`** и **`QuotaWidgetMini`**{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.

### Когда

-   {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢.
    
-   Собственная,не也 `QuotaWidget` 编号 : `QuotaWidgetMini`。 。 。 .
    
-   说吧
    
    -   используйте **`QuotaWidget`** или **`QuotaWidgetMini`**。 。 。 .
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `PortalContextProvider` - 工具提示 \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\.
    
-   ❌ `noData` без `onRefresh` . . . . .
    

### Анатомия

#### Прогресс

Цвет `ProgressBar` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢`usage / limit`:

-   `< 70%` - 额...
-   `70–90%` - 额...
-   `>= 90%` - ; `remains <= 0` квота.

#### Состояния

-   `loading` 骨架 骨架 骨架.
-   `noData` —— 说 `InfoBlock` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`onRefresh`) (中文(简体) ).

### Примеры

#### Уровни

Зелёный,жёлтый,красный也

```tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';

export function QuotaCardLevels() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <QuotaWidgetCard quota={{ name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' }} />
      <QuotaWidgetCard quota={{ name: 'RAM', limit: 100, usage: 75, remains: 25, unitDisplayName: 'GB' }} />
      <QuotaWidgetCard quota={{ name: 'vCPU', limit: 100, usage: 95, remains: 5, unitDisplayName: 'cores' }} />
      <QuotaWidgetCard quota={{ name: 'SSD', limit: 100, usage: 100, remains: 0, unitDisplayName: 'GB' }} />
    </div>
  );
}
```

#### 正在装入

```tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';

export function QuotaCardLoading() {
  return (
    <QuotaWidgetCard loading quota={{ name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' }} />
  );
}
```

#### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

无数据QQInfoBlock;在新鲜的QQ上=====

```tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTA = { name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' };

export function QuotaCardNoData() {
  const [noData, setNoData] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleRefresh = () => {
    setLoading(true);
    setNoData(false);
    setTimeout(() => setLoading(false), 800);
  };

  return <QuotaWidgetCard quota={QUOTA} noData={noData} loading={loading} onRefresh={handleRefresh} />;
}
```

### 道具

**配额窗口CardProps**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `data-test-id` | `string` | —— 说 |  |
| `loading` | `boolean` | `false` | QQ (图: 装入=真实) |
| `noData` | `boolean` | `false` | (图:无数据=真实) |
| `onRefresh` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你应该知道 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我该做什么 |
| `quota` | `QuotaItem` | —— 说 | Отображаемая |

##### 相关类型

**定额项目**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `limit` | `number` | —— 说 | Лимит |
| `name` | `string` | —— 说 | Название |
| `remains` | `number` | —— 说 | Остаток |
| `unitDisplayName` | `string` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `usage` | `number` | —— 说 | Потребление |

### Смотри

-   **配额** - 。 。 。 。 .
-   **配额WidgetMini** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   **进度栏** - 。 。 。 。 .

## 常见问题

### @cloud-ru/ds-uikit-product-quota 是什么？

QQ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 卡牌 \{\} 装入/ 错误 \.

### 如何安装 @cloud-ru/ds-uikit-product-quota？

在项目目录运行 npm install @cloud-ru/ds-uikit-product-quota，或使用 pnpm add / yarn add / bun add。

### @cloud-ru/ds-uikit-product-quota 支持 TypeScript 吗？

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

### @cloud-ru/ds-uikit-product-quota 支持 ESM 还是 CommonJS？

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

### @cloud-ru/ds-uikit-product-quota 可以商用吗？

@cloud-ru/ds-uikit-product-quota 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-uikit-product-quota 的下载量有多少？

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

### @cloud-ru/ds-uikit-product-quota 还在维护吗？

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