<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易终端 - OpenClaw</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #0f1419;
            color: #e6e6e6;
            line-height: 1.6;
        }
        .header {
            background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
            padding: 15px 30px;
            border-bottom: 1px solid #2d3a4a;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 { font-size: 20px; font-weight: 600; color: #00d4aa; }
        .nav-links { display: flex; gap: 20px; align-items: center; }
        .nav-links a { color: #8b9aad; text-decoration: none; font-weight: 500; font-size: 14px; }
        .nav-links a:hover, .nav-links a.active { color: #00d4aa; }
        .trading-mode {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #1a2332;
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #2d3a4a;
        }
        .mode-label { font-size: 12px; color: #8b9aad; }
        .mode-switch {
            position: relative;
            width: 60px;
            height: 26px;
            background: #2d3a4a;
            border-radius: 13px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .mode-switch.active { background: #00d4aa; }
        .mode-switch::after {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: #fff;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
        }
        .mode-switch.active::after { transform: translateX(34px); }
        .mode-text { font-size: 12px; font-weight: 600; }
        .mode-text.paper { color: #00d4aa; }
        .mode-text.live { color: #ff4444; }
        .container { padding: 20px 30px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
        .main-content { display: flex; flex-direction: column; gap: 20px; }
        .sidebar { display: flex; flex-direction: column; gap: 20px; }
        .card { background: #1a2332; border-radius: 12px; border: 1px solid #2d3a4a; overflow: hidden; }
        .card-header { background: #222d3d; padding: 12px 20px; border-bottom: 1px solid #2d3a4a; display: flex; justify-content: space-between; align-items: center; }
        .card-title { font-size: 14px; font-weight: 600; color: #fff; }
        .card-body { padding: 15px 20px; }
        .market-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .symbol-selector { display: flex; align-items: center; gap: 10px; }
        .symbol-selector select {
            background: #0f1419;
            border: 1px solid #2d3a4a;
            border-radius: 6px;
            padding: 8px 12px;
            color: #e6e6e6;
            font-size: 14px;
            cursor: pointer;
        }
        .price-display { text-align: right; }
        .price-main { font-size: 28px; font-weight: 700; color: #fff; }
        .price-change { font-size: 14px; margin-top: 2px; }
        .price-change.up { color: #00d4aa; }
        .price-change.down { color: #ff4444; }
        .chart-container { height: 400px; position: relative; }
        .orderbook { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2d3a4a; }
        .orderbook-side { background: #1a2332; }
        .orderbook-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 8px 12px;
            background: #222d3d;
            font-size: 11px;
            color: #8b9aad;
            text-transform: uppercase;
        }
        .orderbook-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            position: relative;
        }
        .orderbook-row:hover { background: #2d3a4a; }
        .orderbook-row .price { font-weight: 600; }
        .orderbook-row.ask .price { color: #ff4444; }
        .orderbook-row.bid .price { color: #00d4aa; }
        .orderbook-depth {
            position: absolute;
            top: 0;
            height: 100%;
            opacity: 0.15;
        }
        .orderbook-depth.ask { right: 0; background: #ff4444; }
        .orderbook-depth.bid { left: 0; background: #00d4aa; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; font-size: 12px; color: #8b9aad; margin-bottom: 5px; text-transform: uppercase; }
        .form-group input, .form-group select {
            width: 100%;
            background: #0f1419;
            border: 1px solid #2d3a4a;
            border-radius: 6px;
            padding: 10px 12px;
            color: #e6e6e6;
            font-size: 14px;
        }
        .order-type-tabs { display: flex; gap: 5px; margin-bottom: 15px; }
        .tab-btn {
            flex: 1;
            padding: 10px;
            background: #0f1419;
            border: 1px solid #2d3a4a;
            border-radius: 6px;
            color: #8b9aad;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .tab-btn:hover { background: #2d3a4a; }
        .tab-btn.active { background: #00d4aa; color: #0f1419; font-weight: 600; }
        .side-selector { display: flex; gap: 10px; margin-bottom: 15px; }
        .side-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .side-btn.buy { background: rgba(0, 212, 170, 0.2); color: #00d4aa; border: 1px solid #00d4aa; }
        .side-btn.buy:hover, .side-btn.buy.active { background: #00d4aa; color: #0f1419; }
        .side-btn.sell { background: rgba(255, 68, 68, 0.2); color: #ff4444; border: 1px solid #ff4444; }
        .side-btn.sell:hover, .side-btn.sell.active { background: #ff4444; color: #fff; }
        .btn-submit {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
        }
        .btn-submit.buy { background: #00d4aa; color: #0f1419; }
        .btn-submit.buy:hover { background: #00b894; }
        .btn-submit.sell { background: #ff4444; color: #fff; }
        .btn-submit.sell:hover { background: #cc3333; }
        .account-info { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .info-item { background: #0f1419; padding: 12px; border-radius: 8px; }
        .info-label { font-size: 11px; color: #8b9aad; text-transform: uppercase; margin-bottom: 4px; }
        .info-value { font-size: 16px; font-weight: 600; color: #fff; }
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #2d3a4a; }
        .data-table th { background: #222d3d; font-size: 11px; color: #8b9aad; text-transform: uppercase; }
        .data-table tr:hover { background: #222d3d; }
        .badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
        .badge-pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
        .badge-filled { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
        .badge-cancelled { background: rgba(255, 68, 68, 0.15); color: #ff4444; }
        .side-buy { color: #00d4aa; font-weight: 600; }
        .side-sell { color: #ff4444; font-weight: 600; }
        .btn-small { padding: 5px 10px; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; }
        .btn-cancel { background: #ff4444; color: #fff; }
        .btn-cancel:hover { background: #cc3333; }
        .pnl-positive { color: #00d4aa; }
        .pnl-negative { color: #ff4444; }
        .tabs { display: flex; gap: 5px; border-bottom: 1px solid #2d3a4a; padding: 0 20px; }
        .tab { padding: 12px 20px; color: #8b9aad; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; }
        .tab:hover { color: #e6e6e6; }
        .tab.active { color: #00d4aa; border-bottom-color: #00d4aa; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .notification { position: fixed; top: 80px; right: 20px; padding: 15px 20px; border-radius: 8px; color: #fff; font-weight: 500; z-index: 1000; animation: slideIn 0.3s ease-out; }
        .notification.success { background: #00d4aa; }
        .notification.error { background: #ff4444; }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @media (max-width: 1200px) { .container { grid-template-columns: 1fr; } }
    </style>
</head>
<body>
    <div class="header">
        <div style="display: flex; align-items: center; gap: 30px;">
            <h1>📈 OpenClaw 交易终端</h1>
            <div class="nav-links">
                <a href="/">仪表盘</a>
                <a href="/orders">订单</a>
                <a href="/trading" class="active">交易</a>
                <a href="/config">配置</a>
                <a href="/exchanges">交易所</a>
            </div>
        </div>
        <div class="trading-mode">
            <span class="mode-label">交易模式</span>
            <div class="mode-switch" id="modeSwitch" onclick="toggleTradingMode()"></div>
            <span class="mode-text paper" id="modeText">模拟交易</span>
        </div>
    </div>

    <div class="container">
        <div class="main-content">
            <!-- 行情图表 -->
            <div class="card">
                <div class="card-header">
                    <div class="market-header" style="width: 100%;">
                        <div class="symbol-selector">
                            <select id="symbolSelect" onchange="changeSymbol()">
                                <option value="BTC/USDT">BTC/USDT</option>
                                <option value="ETH/USDT">ETH/USDT</option>
                                <option value="BNB/USDT">BNB/USDT</option>
                                <option value="SOL/USDT">SOL/USDT</option>
                            </select>
                            <select id="timeframeSelect">
                                <option value="1m">1分钟</option>
                                <option value="5m">5分钟</option>
                                <option value="15m" selected>15分钟</option>
                                <option value="1h">1小时</option>
                                <option value="4h">4小时</option>
                                <option value="1d">1天</option>
                            </select>
                        </div>
                        <div class="price-display">
                            <div class="price-main" id="currentPrice">--</div>
                            <div class="price-change" id="priceChange">--</div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="priceChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 订单和持仓 -->
            <div class="card">
                <div class="tabs">
                    <div class="tab active" onclick="switchTab('orders')">当前委托</div>
                    <div class="tab" onclick="switchTab('positions')">持仓</div>
                    <div class="tab" onclick="switchTab('history')">成交历史</div>
                </div>
                <div class="tab-content active" id="ordersTab">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>交易对</th>
                                <th>方向</th>
                                <th>类型</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>已成交</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="ordersTableBody">
                            <tr><td colspan="9" style="text-align: center; color: #8b9aad; padding: 30px;">暂无订单</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-content" id="positionsTab">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>交易对</th>
                                <th>方向</th>
                                <th>数量</th>
                                <th>开仓价</th>
                                <th>标记价</th>
                                <th>未实现盈亏</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="positionsTableBody">
                            <tr><td colspan="7" style="text-align: center; color: #8b9aad; padding: 30px;">暂无持仓</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-content" id="historyTab">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>交易对</th>
                                <th>方向</th>
                                <th>成交价格</th>
                                <th>数量</th>
                                <th>手续费</th>
                                <th>实现盈亏</th>
                            </tr>
                        </thead>
                        <tbody id="historyTableBody">
                            <tr><td colspan="7" style="text-align: center; color: #8b9aad; padding: 30px;">暂无成交</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="sidebar">
            <!-- 订单簿 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">订单簿</span>
                </div>
                <div class="card-body" style="padding: 0;">
                    <div class="orderbook">
                        <div class="orderbook-side">
                            <div class="orderbook-header">
                                <span>价格</span>
                                <span>数量</span>
                            </div>
                            <div id="asksList"></div>
                        </div>
                        <div class="orderbook-side">
                            <div class="orderbook-header">
                                <span>价格</span>
                                <span>数量</span>
                            </div>
                            <div id="bidsList"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 账户信息 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">账户</span>
                </div>
                <div class="card-body">
                    <div class="account-info">
                        <div class="info-item">
                            <div class="info-label">可用余额</div>
                            <div class="info-value" id="availableBalance">--</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">持仓价值</div>
                            <div class="info-value" id="positionValue">--</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">未实现盈亏</div>
                            <div class="info-value" id="unrealizedPnl">--</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">总权益</div>
                            <div class="info-value" id="totalEquity">--</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 下单面板 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">下单</span>
                </div>
                <div class="card-body">
                    <div class="order-type-tabs">
                        <button class="tab-btn active" onclick="setOrderType('limit')">限价</button>
                        <button class="tab-btn" onclick="setOrderType('market')">市价</button>
                    </div>
                    <div class="side-selector">
                        <button class="side-btn buy active" onclick="setSide('buy')">买入</button>
                        <button class="side-btn sell" onclick="setSide('sell')">卖出</button>
                    </div>
                    <div class="form-group">
                        <label>价格 (USDT)</label>
                        <input type="number" id="orderPrice" step="0.01" placeholder="0.00">
                    </div>
                    <div class="form-group">
                        <label>数量</label>
                        <input type="number" id="orderAmount" step="0.0001" placeholder="0.00">
                    </div>
                    <div class="form-group">
                        <label>预估金额</label>
                        <input type="text" id="orderTotal" readonly placeholder="-- USDT" style="background: #1a2332;">
                    </div>
                    <button class="btn-submit buy" id="submitBtn" onclick="submitOrder()">买入 BTC</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/trading.js"></script>
</body>
</html>
