Orderly Network：SDK 页面组件

预构建的全功能页面组件，用于构建完整的去中心化交易所。这些组件开箱即用地处理响应式设计（桌面端/移动端）、状态管理和用户界面。

使用场景

• - 快速构建完整的去中心化交易所
• 使用预构建、生产就绪的页面
• 实现标准去中心化交易所页面（交易、投资组合、市场）
• 需要开箱即用的响应式布局

前置条件

• - 已安装 Orderly SDK 包（@orderly.network/trading、@orderly.network/portfolio、@orderly.network/markets）
• 已配置提供者（参见 orderly-sdk-dex-architecture）
• 已设置路由（React Router）

概览

组件	包	描述
TradingPage	@orderly.network/trading	完整的交易界面，包含图表、订单簿、持仓
OverviewModule.OverviewPage

@orderly.network/portfolio | 投资组合仪表盘，包含资产、业绩 | | PositionsModule.PositionsPage | @orderly.network/portfolio | 持仓列表，包含历史记录、强平记录 | | OrdersModule.OrdersPage | @orderly.network/portfolio | 订单列表（未成交、待处理、已成交） | | AssetsModule.AssetsPage | @orderly.network/portfolio | 资产余额、充值/提现 | | HistoryModule.HistoryPage | @orderly.network/portfolio | 交易历史、资金费用、结算 | | MarketsHomePage | @orderly.network/markets | 市场列表，包含统计数据 | | LeaderboardPage | @orderly.network/trading-leaderboard | 交易竞赛排行榜 | | TradingRewardsPage | @orderly.network/trading-rewards | 奖励计划页面 | | Dashboard | @orderly.network/affiliate | 联盟/推荐仪表盘 |

1. TradingPage

主要的交易界面，包含 TradingView 图表、订单簿、订单录入、持仓和订单。

导入

tsx
import { TradingPage } from @orderly.network/trading;

属性

tsx
interface TradingPageProps {
// 必需：交易对（例如 PERPETHUSDC）
symbol: string;

// 用户更改交易对时的回调
onSymbolChange?: (symbol: API.Symbol) => void;

// TradingView 图表配置
tradingViewConfig: {
scriptSRC?: string; // TradingView 库路径
librarypath: string; // chartinglibrary 文件夹路径
customCssUrl?: string; // 图表的自定义 CSS
colorConfig?: {
chartBG?: string;
upColor?: string;
downColor?: string;
pnlUpColor?: string;
pnlDownColor?: string;
};
};

// 盈亏分享配置
sharePnLConfig?: {
backgroundImages?: string[]; // 分享卡的背景图片
color?: string;
profitColor?: string;
lossColor?: string;
brandColor?: string;
};

// 禁用特定功能
disableFeatures?: TradingFeatures[];

// 使用自定义组件覆盖特定区域
overrideFeatures?: Record;
}

enum TradingFeatures {
Sider = sider,
TopNavBar = topNavBar,
Footer = footer,
Header = header,
Kline = kline,
OrderBook = orderBook,
TradeHistory = tradeHistory,
Positions = positions,
Orders = orders,
}

使用示例

tsx
import { useCallback, useState } from react;
import { useNavigate, useParams } from react-router-dom;
import { TradingPage } from @orderly.network/trading;
import { API } from @orderly.network/types;

export default function TradingRoute() {
const { symbol: paramSymbol } = useParams();
const [symbol, setSymbol] = useState(paramSymbol || PERPETHUSDC);
const navigate = useNavigate();

const onSymbolChange = useCallback(
(data: API.Symbol) => {
setSymbol(data.symbol);
navigate(/perp/${data.symbol});
},
[navigate]
);

return (
symbol={symbol}
onSymbolChange={onSymbolChange}
tradingViewConfig={{
scriptSRC: /tradingview/chartinglibrary/chartinglibrary.js,
librarypath: /tradingview/chartinglibrary/,
}}
sharePnLConfig={{
backgroundImages: [/pnl-bg-1.png, /pnl-bg-2.png],
}}
/>
);
}

TradingView 设置

1. 1. 从 TradingView 下载 charting library
2. 放置在 public/tradingview/charting_library/ 目录下
3. 在 tradingViewConfig 中配置路径

2. 投资组合页面

投资组合按模块组织，每个模块包含一个完整的页面组件。

导入

tsx
import {
OverviewModule,
PositionsModule,
OrdersModule,
AssetsModule,
HistoryModule,
} from @orderly.network/portfolio;

OverviewModule.OverviewPage

投资组合概览，包含资产摘要、业绩图表和近期活动。

tsx
interface OverviewPageProps {
hideAffiliateCard?: boolean; // 隐藏联盟推广卡片
hideTraderCard?: boolean; // 隐藏交易者统计卡片
}

// 使用
import { OverviewModule } from @orderly.network/portfolio;

function PortfolioOverview() {
return ;
}

包含的区域：

• - 资产摘要小部件
• 资产配置图表
• 业绩指标
• 资金费用历史
• 分红历史

PositionsModule.PositionsPage

当前和历史持仓，包含强平历史。

tsx
import { PositionsModule } from @orderly.network/portfolio;

function PositionsRoute() {
return ;
}

包含的标签页：

• - 持仓（当前未平仓持仓）
• 持仓历史
• 强平历史

OrdersModule.OrdersPage

订单管理，包含未成交、待处理和已成交订单。

tsx
interface OrdersPageProps {
sharePnLConfig?: SharePnLConfig; // 用于分享已平仓盈亏
}

import { OrdersModule } from @orderly.network/portfolio;

function OrdersRoute() {
return (
sharePnLConfig={{
backgroundImages: [/pnl-bg-1.png],
}}
/>
);
}

功能：

• - 未成交订单，支持取消
• 待处理订单（止盈/止损）
• 订单历史，支持下载

AssetsModule.AssetsPage

资产管理，包含充值/提现功能。

tsx
import { AssetsModule } from @orderly.network/portfolio;

function AssetsRoute() {
return ;
}

功能：

• - USDC 余额显示
• 充值/提现按钮
• 跨链转账
• 交易历史

HistoryModule.HistoryPage

完整的交易和转账历史。

tsx
import { HistoryModule } from @orderly.network/portfolio;

function HistoryRoute() {
return ;
}

包含的标签页：

• - 交易历史
• 资金费用支付
• 结算

完整的投资组合布局

tsx
import { Outlet, NavLink } from react-router-dom;
import {
OverviewModule,
PositionsModule,
OrdersModule,
AssetsModule,
HistoryModule,
} from @orderly.network/portfolio;

// 带导航的投资组合布局
function PortfolioLayout() {
return (

);
}

// 路由配置
const portfolioRoutes = [
{
path: portfolio,
element: ,
children