# @agg-build/ui 中文文档

规范地址：https://npmcn.com/package/%40agg-build/ui/

版本：4\.37\.0
npm 元数据更新时间：2026-11-05T18:58:36.801Z
中文译文更新时间：2026-11-06T09:08:08.880Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40agg-build/ui
原文对照：https://npmcn.com/package/%40agg-build/ui/?lang=original
项目主页：https://docs.agg.market/
源码仓库：https://github.com/Snag-Solutions/Agg

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

- 包体积（解压后）：5 MB，914 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，liveline ^0\.0\.7，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@agg-build/sdk ^4\.37\.0，@agg-build/hooks ^4\.37\.0
- 首次发布：2026-04-27T19:41:58.148Z
- 最新版本发布：2026-11-05T18:58:36.605Z
- 近 30 天下载量：3654（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：93（近 12 个月 93 个）

## 中文简介

预建的 AGG 预测市场聚合器 React 组件库 。 以尾风为主,可主题,有原始,事件表面,交易流量,全页,和模式.

## 安装

```sh
npm install @agg-build/ui
```

也可以使用：`pnpm add @agg-build/ui`、`yarn add @agg-build/ui`、`bun add @agg-build/ui`

## README

# @agg-building/ ui (英语)

预建的 React 组件库 [恶作剧](https://docs.agg.market/) 预测市场 聚会. 基于 Tailwind 的风格,主题 CSS 符号, 以及组合成原始的组件, 事件表面、交易流量、完整页和模式.

看到每个组件都生活在 [AGG 故事书](https://storybook.agg.market/)。 。 。 .

## 这是什么

`@agg-build/ui` 船UI 你必须自己建造: 事件卡、市场细节页、订单 原始图、订货入帐表、押金/提取/登船模式和有意见的页 排布图。 组件建在 [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks) 并期望一个 `<AggProvider>` 在树上 Styling 是 Tailwind v4 + CSS 定制 属性,这样您就可以从自己的样式表中标出所有主题.

此套件有意包含 **没有钱包代码和自动适配器** 模块 连接/ 签名用户界面 居住于 [`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth)继续 `@agg-build/ui` 免费 `wagmi`, (中文(简体) ), `@solana/*`,和相关同行.

## 何时使用此软件包

-   你想要生产准备的AGG 交易UI 没有线从头到尾的每一个视图.
-   你计划把AGG全程带回家 / 活动 / 市场 / 外观 在你的应用程序里.
-   您想要符合主题原始( 按钮、 卡片、 Modal、 Chart、 Tooltip等) 其余的AGG表面.

如果您只需要基本逻辑, 请安装 [`@agg-build/sdk`](https://www.npmjs.com/package/@agg-build/sdk) 财务报告和审定财务报表 [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks) 建立自己的UI.

## 安装

```bash
npm install @agg-build/sdk @agg-build/hooks @agg-build/ui liveline
```

`liveline` 是用来绘制图表的引擎 `Chart` 编号 : `LineChart` 并被宣布为对等者 依赖性.

## 快开始

```tsx
import "@agg-build/ui/styles.css";
import { QueryClient, QueryClientProvider } from "@agg-build/hooks";
import { createAggClient } from "@agg-build/sdk";
import { AggProvider } from "@agg-build/ui";
import { HomePage } from "@agg-build/ui/pages";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market",
});
const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AggProvider
        client={client}
        config={{
          general: { locale: "en-US", theme: "dark" },
          features: { enableAnimations: true, enableLiveUpdates: true, showFeesBreakdown: true },
        }}
      >
        <HomePage withHeader />
      </AggProvider>
    </QueryClientProvider>
  );
}
```

设定 `config.features.enableEventDiscoveryUrlPersistence` 改为 `true` 坚持初级 `HomePage` 章节 `category`,重复 `subcategory`, (中文(简体) ), `venue`,以及 `sort` 浏览器中的过滤器 历史 它默认被禁用, 并保存不相关的查询参数, 如 `search`。 。 。 .

## 样式

在您的应用程序入口处导入默认主题 :

```tsx
import "@agg-build/ui/styles.css";
```

UI级 `AggProvider` 将AGG的土司表面加入到钩子供应商中. 还需要.. 不变 `client` 螺旋桨和 `QueryClientProvider` 上所显祖相. 用 CSS 覆盖主题符号 变量 `.agg-root` 容器(自动应用) `AggProvider`:

```css
.agg-root {
  --agg-color-primary: #ed8200;
  --agg-color-foreground: #1a1a1a;
  --agg-radius-md: 8px;
  --agg-font-family-sans: "Your Font", ui-sans-serif, system-ui, sans-serif;
}
```

您也可以设置 `--agg-font-family-sans` 打开 `:root`; 一个值 `.agg-root` 赢是因为是 距离AGG UI树更近.

与下个.js `next/font`,然后将其映射到 打开 AGG 令牌 `.agg-root`数字 :

```tsx
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function App() {
  return (
    <div className={inter.variable}>
      <QueryClientProvider client={queryClient}>
        <AggProvider client={client}>
          <AggApp />
        </AggProvider>
      </QueryClientProvider>
    </div>
  );
}
```

```css
.agg-root {
  --agg-font-family-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}
```

如果您已经在您的应用程序中使用了 Tailwind v4 并且希望 AGG 预设与您的配置合并, 导入 `@agg-build/ui/tailwind.css` 而不是(或同时) `styles.css`。 。 。 .

## 树摇

从分组子路径导入以保持捆绑的窄度 :

```tsx
// Preferred
import { Button, Card } from "@agg-build/ui/primitives";
import { HomePage, EventMarketPage } from "@agg-build/ui/pages";
import { DepositModal, OnboardingModal } from "@agg-build/ui/modals";
import { PlaceOrder } from "@agg-build/ui/trading";

// Wider than necessary
import { Button } from "@agg-build/ui";
```

## 使用完整页面

这个 `HomePage` 财务报告和审定财务报表 `EventMarketPage` 组件采用合作伙伴拥有的导航回调。 在那个 演示应用软件,我们把他们传送到Next.js `router.push`数字 :

```tsx
"use client";
import { HomePage } from "@agg-build/ui/pages";
import { useRouter } from "next/navigation";

export function Home() {
  const router = useRouter();
  const getMarketHref = (event, market, outcome) =>
    `/events/${event.id}?marketId=${market.id}&outcomeId=${outcome.id}`;
  const getEventHref = (event) => `/events/${event.id}`;

  return (
    <HomePage
      withHeader={false}
      onEventClick={(event) => router.push(getEventHref(event))}
      onMarketClick={(event, market, outcome) => router.push(getMarketHref(event, market, outcome))}
      getEventHref={getEventHref}
      getMarketHref={getMarketHref}
      stickyOrderPanel={{ enabled: true, top: 80 }}
    />
  );
}
```

## 构成部分

### 基础 - `@agg-build/ui/primitives`

| 构成部分 | 说明 |
| --- | --- |
| `AggErrorBoundary` | 边界包装出错 |
| `AggLogo` | AGG 单词标记 |
| `AutocompleteSelect` | 带有同步结果的组合 |
| `Badge` | 状态徽章 |
| `Button` | 基础按钮原始 |
| `Card` | 内容卡 |
| `Chart` | 价格图(基于活线) |
| `CurrencyInput` | 地方意识资金投入 |
| `Footer` | 站点页脚 |
| `Header` | 有搜索的站点头 |
| `Icon` | AGG 图标集 |
| `InlineAlert` | 错误/ 警告内置提醒 |
| `LoadingIcon` | 旋转器 |
| `Modal` | 对话框/模式 |
| `NumberValue` | 格式化动画数字 |
| `RemoteImage` | 带有加载/误入图像 |
| `Search` | 搜索输入 |
| `Select` | 下拉选择 |
| `Skeleton` | 正在装入占位符 |
| `StateMessage` | 空/ 错误状态显示 |
| `SwitchButton` | 二进制切换切换 |
| `Tabs` | 标签导航 |
| `Tooltip` | Hover/ 焦点工具提示 |
| `Typography` | 文本缩放原始 |
| `VenueLogo` | 地点图标/ 标志 |

### 事件—— `@agg-build/ui/events`

| 构成部分 | 说明 |
| --- | --- |
| `EventList` | 网格/预测市场事件清单 |
| `EventListItem` | 单项事件行/牌 |
| `ItemDetails` | 每个市场的细节块 |
| `MarketDetails` | 完整市场细节视图 |
| `Orderbook` | 顺序书深度视图 |

### 贸易 - `@agg-build/ui/trading`

| 构成部分 | 说明 |
| --- | --- |
| `PlaceOrder` | 订单输入表(管理下执行) |
| `Settlement` | 结算状况卡 |
| `SettlementDetails` | 扩大定居点细节 |
| `TradingContext` | 事件/市场/结果选择背景 |

### 页- `@agg-build/ui/pages`

| 构成部分 | 说明 |
| --- | --- |
| `HomePage` | 带有标签、搜索、网格的完整主页 |
| `EventMarketPage` | 全事件/市场细节页 |
| `UserProfilePage` | 有标签的用户配置页面 |
| `LeaderboardPage` | 按 P&L 或音量排列的贸易商领导板 |

### 潮汐计数器.. `@agg-build/ui/modals`

| 构成部分 | 说明 |
| --- | --- |
| `DepositModal` | 存款流量(管理钱包+链) |
| `WithdrawModal` | 撤销流量 |
| `OnboardingModal` | 用户登入流量 |
| `ProfileModal` | 配置文件编辑 + 链接账户 |
| `GeoBlockModal` | 地理限制模式 |
| `GeoBlockBanner` | 持续的地块旗帜 |

### `classNames` 覆盖

大多数组件接受a `classNames` 复合道具使合作伙伴能够瞄准子元素:

```tsx
<Modal.Header
  title="Place order"
  classNames={{
    root: "custom-header",
    title: "custom-title",
    close: "custom-close-btn",
  }}
/>
```

## 主要组件道具

### `HomePage`

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `tabs` | `HomePageTab[]` | 自定义标签 |
| `eventSectionItems` | `HomePageEventSectionItem[]` | 自定义事件段配置 |
| `categoriesLimit` | `number` | 要显示的分类标签的最大数量 |
| `allCategoryTabLabel` | `string` | “ 全部” 分类标签标签 |
| `actions` | `ReactNode` | 标题动作槽( 例如 ), `<ConnectButton />`(中文(简体) ) |
| `withHeader` | `boolean` (默认) `true`(中文(简体) ) | 内置 `Header` 带有搜索+标识 |
| `onEventClick` | `(event) => void` | 点击事件卡时调用 |
| `onMarketClick` | `(event, market, outcome) => void` | 点击结果价格时调用 |
| `getEventHref` | `(event) => string` | 提供 `href` 方便安全部门改革的链接 |
| `getMarketHref` | `(event, market, outcome) => string` | 提供 `href` 市场联系 |
| `stickyOrderPanel` | `{ enabled: boolean; top?: number }` | 滚动时按下命令面板 |
| `classNames` | `HomePageClassNames` | 样式覆盖 |

### `EventMarketPage`

将整个事件页面显示为交易内容。 要求数 `<AggProvider>` 和用途 `EventTradingContext` 内部。 访问选择状态 `useEventTradingContext()` 从 `@agg-build/hooks`。 。 。 .

### `PlaceOrder`

订入表. 内部渲染 `EventMarketPage` 或独立——需要活动 `EventTradingContext` 具有特定市场和结果。 与管理下的执行相结合 钩从 `@agg-build/hooks`。 。 。 .

## 入境点

| 条目 | 目的 |
| --- | --- |
| `@agg-build/ui` | 根导出( 再导出每个子路径) |
| `@agg-build/ui/primitives` | 按钮, Modal, Chart, Tooltip等. |
| `@agg-build/ui/events` | `EventList`, (中文(简体) ), `EventListItem`, (中文(简体) ), `MarketDetails`, (中文(简体) ), `Orderbook` |
| `@agg-build/ui/trading` | `PlaceOrder`, (中文(简体) ), `Settlement`,交易环境公用事业 |
| `@agg-build/ui/pages` | `HomePage`, (中文(简体) ), `EventMarketPage`, (中文(简体) ), `UserProfilePage` |
| `@agg-build/ui/modals` | 交存/退出/登上/备案/GeoBlock模式 |
| `@agg-build/ui/styles.css` | 默认主题样式表( 在应用程序条目中导入一次) |
| `@agg-build/ui/tailwind.css` | 如果你自己运行 Tailwind v4 , 尾风会预设 |

## 同伴依赖关系

-   `@agg-build/sdk`
-   `@agg-build/hooks`
-   `react` ^18.0.0或^19.0
-   `react-dom` ^18.0.0或^19.0
-   `liveline` ^0.0.7 — 绘图引擎 `Chart` 编号 : `LineChart`

不需要钱包包 。 钱包支持的 Auth 住在 [`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth)。 。 。 .

## 链接

-   文 件 - 存档副本 [https://docs.agg.market/ 互联网档案馆的存檔,存档日期2013-12-02](https://docs.agg.market/)
-   童话书—— [https://storybook.agg.market/ 页面存档备份,存于互联网档案馆](https://storybook.agg.market/)
-   Demo app - 软件 [https://demo.agg.market/ 页面存档备份,存于互联网档案馆](https://demo.agg.market/)
-   香草SDK - - 。 [`@agg-build/sdk`](https://www.npmjs.com/package/@agg-build/sdk)
-   反应钩- [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks)
-   连接/ 登录 UX —— [`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth)

## 许可证

麻省理工学院

## 常见问题

### @agg-build/ui 是什么？

预建的 AGG 预测市场聚合器 React 组件库 。 以尾风为主,可主题,有原始,事件表面,交易流量,全页,和模式\.

### 如何安装 @agg-build/ui？

在项目目录运行 npm install @agg-build/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、liveline（^0\.0\.7）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@agg-build/sdk（^4\.37\.0）、@agg-build/hooks（^4\.37\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @agg-build/ui 支持 TypeScript 吗？

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

### @agg-build/ui 支持 ESM 还是 CommonJS？

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

### @agg-build/ui 可以商用吗？

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

### @agg-build/ui 的下载量有多少？

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

### @agg-build/ui 还在维护吗？

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