orderly-sdk-page-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orderly Network: SDK Page Components

Orderly Network：SDK页面组件

Pre-built, full-featured page components for building a complete DEX. These components handle responsive design (desktop/mobile), state management, and UI out of the box.

用于构建完整DEX的预构建、全功能页面组件。这些组件开箱即用地支持响应式设计（桌面/移动端）、状态管理和UI界面。

When to Use

适用场景

Building a complete DEX quickly
Using pre-built, production-ready pages
Implementing standard DEX pages (trading, portfolio, markets)
Need responsive layouts out of the box

快速构建完整的DEX
使用预构建的生产级页面
实现标准DEX页面（交易、投资组合、市场）
需要开箱即用的响应式布局

Prerequisites

前置条件

Orderly SDK packages installed (

@orderly.network/trading

@orderly.network/portfolio

@orderly.network/markets

)

Providers configured (see
```
orderly-sdk-dex-architecture
```
)
Router set up (React Router)

已安装Orderly SDK包（

@orderly.network/trading

、

@orderly.network/portfolio

、

@orderly.network/markets

）

已配置Providers（参考
```
orderly-sdk-dex-architecture
```
）
已设置路由（React Router）

Overview

概览

Component	Package	Description
`TradingPage`	`@orderly.network/trading`	Full trading interface with chart, orderbook, positions
`OverviewModule.OverviewPage`	`@orderly.network/portfolio`	Portfolio dashboard with assets, performance
`PositionsModule.PositionsPage`	`@orderly.network/portfolio`	Positions list with history, liquidations
`OrdersModule.OrdersPage`	`@orderly.network/portfolio`	Orders list (open, pending, filled)
`AssetsModule.AssetsPage`	`@orderly.network/portfolio`	Asset balances, deposit/withdraw
`HistoryModule.HistoryPage`	`@orderly.network/portfolio`	Trade history, funding, settlements
`MarketsHomePage`	`@orderly.network/markets`	Markets listing with stats
`LeaderboardPage`	`@orderly.network/trading-leaderboard`	Trading competition leaderboard
`TradingRewardsPage`	`@orderly.network/trading-rewards`	Rewards program page
`Dashboard`	`@orderly.network/affiliate`	Affiliate/referral dashboard

组件	包路径	描述
`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

The main trading interface with TradingView chart, orderbook, order entry, positions, and orders.

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

Import

导入

tsx

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

tsx

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

Props

属性

tsx

interface TradingPageProps {
  // Required: Trading symbol (e.g., "PERP_ETH_USDC")
  symbol: string;

  // Callback when user changes symbol
  onSymbolChange?: (symbol: API.Symbol) => void;

  // TradingView chart configuration
  tradingViewConfig: {
    scriptSRC?: string; // Path to TradingView library
    library_path: string; // Path to charting_library folder
    customCssUrl?: string; // Custom CSS for chart
    colorConfig?: {
      chartBG?: string;
      upColor?: string;
      downColor?: string;
      pnlUpColor?: string;
      pnlDownColor?: string;
    };
  };

  // PnL sharing configuration
  sharePnLConfig?: {
    backgroundImages?: string[]; // Background images for share cards
    color?: string;
    profitColor?: string;
    lossColor?: string;
    brandColor?: string;
  };

  // Disable specific features
  disableFeatures?: TradingFeatures[];

  // Override specific sections with custom components
  overrideFeatures?: Record<TradingFeatures, ReactNode>;
}

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

tsx

interface TradingPageProps {
  // 必填：交易对符号（例如："PERP_ETH_USDC"）
  symbol: string;

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

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

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

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

  // 用自定义组件覆盖特定区域
  overrideFeatures?: Record<TradingFeatures, ReactNode>;
}

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

Usage Example

使用示例

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 || 'PERP_ETH_USDC');
  const navigate = useNavigate();

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

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

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 || 'PERP_ETH_USDC');
  const navigate = useNavigate();

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

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

TradingView Setup

TradingView设置

Download TradingView charting library from TradingView
Place in
```
public/tradingview/charting_library/
```
Configure paths in
```
tradingViewConfig
```

从TradingView下载图表库
将其放置在
```
public/tradingview/charting_library/
```
目录下
在
```
tradingViewConfig
```
中配置路径

2. Portfolio Pages

2. 投资组合页面

Portfolio is organized into modules, each containing a complete page component.

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

Import

导入

tsx

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

tsx

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

OverviewModule.OverviewPage

Portfolio overview with assets summary, performance chart, and recent activity.

tsx

interface OverviewPageProps {
  hideAffiliateCard?: boolean; // Hide affiliate promotion card
  hideTraderCard?: boolean; // Hide trader stats card
}

// Usage
import { OverviewModule } from '@orderly.network/portfolio';

function PortfolioOverview() {
  return <OverviewModule.OverviewPage hideAffiliateCard={false} hideTraderCard={false} />;
}

Sections included:

Asset summary widget
Asset allocation chart
Performance metrics
Funding history
Distribution history

包含资产汇总、业绩图表和近期活动的投资组合概览页面。

tsx

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

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

function PortfolioOverview() {
  return <OverviewModule.OverviewPage hideAffiliateCard={false} hideTraderCard={false} />;
}

包含的区域：

资产汇总组件
资产分配图表
业绩指标
资金费用历史
分红历史

PositionsModule.PositionsPage

Current and historical positions with liquidation history.

tsx

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

function PositionsRoute() {
  return <PositionsModule.PositionsPage />;
}

Tabs included:

Positions (current open positions)
Position History
Liquidation History

包含当前和历史持仓以及清算记录的页面。

tsx

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

function PositionsRoute() {
  return <PositionsModule.PositionsPage />;
}

包含的标签页：

持仓（当前未平仓持仓）
持仓历史
清算历史

OrdersModule.OrdersPage

Order management with open, pending, and filled orders.

tsx

interface OrdersPageProps {
  sharePnLConfig?: SharePnLConfig; // For sharing closed PnL
}

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

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

Features:

Open orders with cancel functionality
Pending orders (TP/SL)
Order history with download

包含未成交、待处理和已成交订单的订单管理页面。

tsx

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

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

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

功能：

可取消的未成交订单
待处理订单（止盈/止损）
可下载的订单历史

AssetsModule.AssetsPage

Asset management with deposit/withdraw functionality.

tsx

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

function AssetsRoute() {
  return <AssetsModule.AssetsPage />;
}

Features:

USDC balance display
Deposit/withdraw buttons
Cross-chain transfers
Transaction history

包含存币/提币功能的资产管理页面。

tsx

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

function AssetsRoute() {
  return <AssetsModule.AssetsPage />;
}

功能：

USDC余额展示
存币/提币按钮
跨链转账
交易历史

HistoryModule.HistoryPage

Complete trade and transaction history.

tsx

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

function HistoryRoute() {
  return <HistoryModule.HistoryPage />;
}

Tabs included:

Trade history
Funding payments
Settlements

包含完整交易和交易记录的页面。

tsx

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

function HistoryRoute() {
  return <HistoryModule.HistoryPage />;
}

包含的标签页：

交易历史
资金费用支付记录
结算记录

Complete Portfolio Layout

完整投资组合布局

tsx

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

// Portfolio layout with navigation
function PortfolioLayout() {
  return (
    <div className="portfolio-container">
      <nav className="portfolio-nav">
        <NavLink to="/portfolio">Overview</NavLink>
        <NavLink to="/portfolio/positions">Positions</NavLink>
        <NavLink to="/portfolio/orders">Orders</NavLink>
        <NavLink to="/portfolio/assets">Assets</NavLink>
        <NavLink to="/portfolio/history">History</NavLink>
      </nav>
      <main className="portfolio-content">
        <Outlet />
      </main>
    </div>
  );
}

// Router configuration
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: <PortfolioLayout />,
    children: [
      { index: true, element: <OverviewModule.OverviewPage /> },
      { path: 'positions', element: <PositionsModule.PositionsPage /> },
      { path: 'orders', element: <OrdersModule.OrdersPage /> },
      { path: 'assets', element: <AssetsModule.AssetsPage /> },
      { path: 'history', element: <HistoryModule.HistoryPage /> },
    ],
  },
];

tsx

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

// 带导航的投资组合布局
function PortfolioLayout() {
  return (
    <div className="portfolio-container">
      <nav className="portfolio-nav">
        <NavLink to="/portfolio">概览</NavLink>
        <NavLink to="/portfolio/positions">持仓</NavLink>
        <NavLink to="/portfolio/orders">订单</NavLink>
        <NavLink to="/portfolio/assets">资产</NavLink>
        <NavLink to="/portfolio/history">历史记录</NavLink>
      </nav>
      <main className="portfolio-content">
        <Outlet />
      </main>
    </div>
  );
}

// 路由配置
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: <PortfolioLayout />,
    children: [
      { index: true, element: <OverviewModule.OverviewPage /> },
      { path: 'positions', element: <PositionsModule.PositionsPage /> },
      { path: 'orders', element: <OrdersModule.OrdersPage /> },
      { path: 'assets', element: <AssetsModule.AssetsPage /> },
      { path: 'history', element: <HistoryModule.HistoryPage /> },
    ],
  },
];

3. MarketsHomePage

Markets overview with all trading pairs, stats, and funding rates.

包含所有交易对、统计数据和资金费率的市场概览页面。

Import

导入

tsx

import { MarketsHomePage } from '@orderly.network/markets';

tsx

import { MarketsHomePage } from '@orderly.network/markets';

Props

属性

tsx

interface MarketsHomePageProps {
  // Current symbol (for highlighting)
  symbol?: string;

  // Callback when user clicks a symbol
  onSymbolChange?: (symbol: API.Symbol) => void;

  // Funding comparison configuration
  comparisonProps?: {
    exchanges?: string[]; // Exchanges to compare funding rates
  };

  // Custom class name
  className?: string;
}

tsx

interface MarketsHomePageProps {
  // 当前交易对（用于高亮）
  symbol?: string;

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

  // 资金费率对比配置
  comparisonProps?: {
    exchanges?: string[]; // 用于对比资金费率的交易所
  };

  // 自定义类名
  className?: string;
}

Usage

使用示例

tsx

import { useNavigate } from 'react-router-dom';
import { MarketsHomePage } from '@orderly.network/markets';

function MarketsRoute() {
  const navigate = useNavigate();

  return (
    <MarketsHomePage
      onSymbolChange={(symbol) => navigate(`/perp/${symbol.symbol}`)}
      comparisonProps={{
        exchanges: ['binance', 'okx', 'bybit'],
      }}
    />
  );
}

Tabs included:

Markets (all trading pairs with 24h stats)
Funding (funding rate comparison across exchanges)

tsx

import { useNavigate } from 'react-router-dom';
import { MarketsHomePage } from '@orderly.network/markets';

function MarketsRoute() {
  const navigate = useNavigate();

  return (
    <MarketsHomePage
      onSymbolChange={(symbol) => navigate(`/perp/${symbol.symbol}`)}
      comparisonProps={{
        exchanges: ['binance', 'okx', 'bybit'],
      }}
    />
  );
}

包含的标签页：

市场（包含24小时统计数据的所有交易对）
资金费率（跨交易所的资金费率对比）

4. LeaderboardPage

Trading competition leaderboard with campaigns and rankings.

包含活动和排名的交易竞赛排行榜页面。

Import

导入

tsx

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

tsx

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

Usage

使用示例

tsx

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

function LeaderboardRoute() {
  return <LeaderboardPage hideCampaignsBanner={false} />;
}

Sections included:

Active campaigns banner
Rewards summary
General leaderboard rankings
Campaign-specific leaderboards
Trading rules

tsx

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

function LeaderboardRoute() {
  return <LeaderboardPage hideCampaignsBanner={false} />;
}

包含的区域：

活跃活动横幅
奖励汇总
总排行榜
活动专属排行榜
交易规则

5. Router Setup

5. 路由设置

Complete Router Example

完整路由示例

tsx

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from './App';

// Lazy load pages for better performance
const TradingPage = lazy(() => import('./pages/Trading').then((m) => ({ default: m.default })));
const PortfolioOverview = lazy(() =>
  import('@orderly.network/portfolio').then((m) => ({
    default: m.OverviewModule.OverviewPage,
  }))
);
const MarketsPage = lazy(() =>
  import('@orderly.network/markets').then((m) => ({
    default: m.MarketsHomePage,
  }))
);
const LeaderboardPage = lazy(() =>
  import('@orderly.network/trading-leaderboard').then((m) => ({
    default: m.LeaderboardPage,
  }))
);

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Navigate to="/perp/PERP_ETH_USDC" /> },
      {
        path: 'perp/:symbol',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <TradingPage />
          </Suspense>
        ),
      },
      {
        path: 'portfolio',
        children: [{ index: true, element: <PortfolioOverview /> }],
      },
      { path: 'markets', element: <MarketsPage /> },
      { path: 'leaderboard', element: <LeaderboardPage /> },
    ],
  },
]);

tsx

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from './App';

// 懒加载页面以优化性能
const TradingPage = lazy(() => import('./pages/Trading').then((m) => ({ default: m.default })));
const PortfolioOverview = lazy(() =>
  import('@orderly.network/portfolio').then((m) => ({
    default: m.OverviewModule.OverviewPage,
  }))
);
const MarketsPage = lazy(() =>
  import('@orderly.network/markets').then((m) => ({
    default: m.MarketsHomePage,
  }))
);
const LeaderboardPage = lazy(() =>
  import('@orderly.network/trading-leaderboard').then((m) => ({
    default: m.LeaderboardPage,
  }))
);

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Navigate to="/perp/PERP_ETH_USDC" /> },
      {
        path: 'perp/:symbol',
        element: (
          <Suspense fallback={<div>加载中...</div>}>
            <TradingPage />
          </Suspense>
        ),
      },
      {
        path: 'portfolio',
        children: [{ index: true, element: <PortfolioOverview /> }],
      },
      { path: 'markets', element: <MarketsPage /> },
      { path: 'leaderboard', element: <LeaderboardPage /> },
    ],
  },
]);

6. Customizing Pages

6. 自定义页面

Disable Features

禁用功能

tsx

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  disableFeatures={[TradingFeatures.Footer, TradingFeatures.SlippageSetting]}
/>;

tsx

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  disableFeatures={[TradingFeatures.Footer, TradingFeatures.SlippageSetting]}
/>;

Override Sections

覆盖区域

tsx

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  overrideFeatures={{
    [TradingFeatures.Header]: <CustomHeader />,
    [TradingFeatures.Footer]: <CustomFooter />,
  }}
/>;

tsx

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  overrideFeatures={{
    [TradingFeatures.Header]: <CustomHeader />,
    [TradingFeatures.Footer]: <CustomFooter />,
  }}
/>;

Custom Styling

自定义样式

All components accept

className

prop and use Tailwind classes with

oui-

prefix:

tsx

<MarketsHomePage className="custom-markets-page" />

css

.custom-markets-page {
  --oui-color-primary: #7b61ff;
}

所有组件都接受

className

属性，并使用带

oui-

前缀的Tailwind类：

tsx

<MarketsHomePage className="custom-markets-page" />

css

.custom-markets-page {
  --oui-color-primary: #7b61ff;
}

7. Responsive Design

7. 响应式设计

All page components automatically handle desktop and mobile layouts:

Desktop: Full multi-panel layouts
Mobile: Stacked layouts with bottom navigation, sheets for detail views

tsx

import { useScreen } from '@orderly.network/ui';

function MyPage() {
  const { isMobile, isTablet, isDesktop } = useScreen();

  return isMobile ? <MobileView /> : <DesktopView />;
}

所有页面组件自动适配桌面和移动端布局：

桌面端：全多面板布局
移动端：堆叠布局，底部导航，详情页使用弹窗

tsx

import { useScreen } from '@orderly.network/ui';

function MyPage() {
  const { isMobile, isTablet, isDesktop } = useScreen();

  return isMobile ? <MobileView /> : <DesktopView />;
}

Installation

安装

bash

npm install @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/trading-leaderboard \
            @orderly.network/affiliate

bash

npm install @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/trading-leaderboard \
            @orderly.network/affiliate

Best Practices

最佳实践

Lazy load pages for better initial bundle size
Persist symbol in localStorage for user convenience
Handle symbol changes with URL updates for bookmarkable pages
Configure TradingView with custom colors matching your theme
Provide share backgrounds for PnL sharing feature
Use Suspense boundaries for smooth loading states

懒加载页面以优化初始包体积
持久化交易对到localStorage以提升用户体验
通过URL更新处理交易对切换，支持页面书签
配置TradingView使用与主题匹配的自定义颜色
为PnL分享功能提供背景图片
使用Suspense边界实现流畅的加载状态

orderly-sdk-page-components

Original

Translation

Orderly Network: SDK Page Components

Orderly Network：SDK页面组件

When to Use

适用场景

Prerequisites

前置条件

Overview

概览

1. TradingPage

1. TradingPage

Import

导入

Props

属性

Usage Example

使用示例

TradingView Setup

TradingView设置

2. Portfolio Pages

2. 投资组合页面

Import

导入

OverviewModule.OverviewPage

OverviewModule.OverviewPage

PositionsModule.PositionsPage

PositionsModule.PositionsPage

OrdersModule.OrdersPage

OrdersModule.OrdersPage

AssetsModule.AssetsPage

AssetsModule.AssetsPage

HistoryModule.HistoryPage

HistoryModule.HistoryPage

Complete Portfolio Layout

完整投资组合布局

3. MarketsHomePage

3. MarketsHomePage

Import

导入

Props

属性

Usage

使用示例

4. LeaderboardPage

4. LeaderboardPage

Import

导入

Usage

使用示例

5. Router Setup

5. 路由设置

Complete Router Example

完整路由示例

6. Customizing Pages

6. 自定义页面

Disable Features

禁用功能

Override Sections

覆盖区域

Custom Styling

自定义样式

7. Responsive Design

7. 响应式设计

Installation

安装

Best Practices

最佳实践

Related Skills

相关技能