<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>CodexManager</title>
      <script type="module" crossorigin src="./assets/index-45LQ769B.js"></script>
      <link rel="stylesheet" crossorigin href="./assets/index-CWes8Luo.css">
    </head>
    <body>
        <div class="app-shell">
            <header id="topNav" class="top-nav">
                <div class="brand">
                    <span class="brand-mark">CM</span>
                    <div class="brand-meta">
                        <h1>CodexManager</h1>
                        <span>账号池 · 用量管理</span>
                    </div>
                </div>
                <nav class="pill-nav">
                    <button id="navDashboard" class="active">仪表盘</button>
                    <button id="navAccounts">账号管理</button>
                    <button id="navApiKeys">平台密钥</button>
                    <button id="navRequestLogs">请求日志</button>
                    <button id="navSettings">设置</button>
                </nav>
            </header>

            <main class="content">
                <section class="page-head">
                    <div class="page-title">
                        <h2 id="pageTitle">仪表盘</h2>
                        <p class="hint">可用状态与用量概览</p>
                    </div>
                    <div class="top-actions">
                        <div class="service-setup">
                            <input
                                id="serviceAddr"
                                type="text"
                                placeholder="端口，如 5050"
                            />
                            <label
                                class="service-toggle-control update-auto-check switch-control"
                                for="serviceToggle"
                            >
                                <input id="serviceToggle" type="checkbox" />
                                <span class="switch-track" aria-hidden="true">
                                    <span class="switch-thumb"></span>
                                </span>
                                <span id="serviceToggleText">未连接</span>
                            </label>
                        </div>
                        <div class="service-meta">
                            <div id="serviceHint" class="hint"></div>
                        </div>
                    </div>
                </section>

                <section
                    id="pageDashboard"
                    class="page active dashboard-compact"
                >
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>总账号数</h3>
                                <div id="metricTotal" class="stat">0</div>
                                <div class="metric-sub">总数</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>可用账号</h3>
                                <div id="metricAvailable" class="stat">0</div>
                                <div class="metric-sub">当前可用</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>不可用账号</h3>
                                <div id="metricUnavailable" class="stat">0</div>
                                <div class="metric-sub">额度不足</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>今日令牌</h3>
                                <div id="metricTodayTokens" class="stat">0</div>
                                <div class="metric-sub">非缓存输入 + 输出</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>缓存令牌</h3>
                                <div id="metricCachedInputTokens" class="stat">
                                    0
                                </div>
                                <div class="metric-sub">输入缓存命中</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>推理令牌</h3>
                                <div
                                    id="metricReasoningOutputTokens"
                                    class="stat"
                                >
                                    0
                                </div>
                                <div class="metric-sub">输出中推理部分</div>
                            </div>
                        </div>
                        <div class="stat-card stat-card-cost">
                            <div class="stat-icon"></div>
                            <div class="stat-body">
                                <h3>预计费用</h3>
                                <div id="metricTodayCost" class="stat">
                                    $0.00
                                </div>
                                <div class="metric-sub">按今日请求估算</div>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-duo">
                        <div id="currentAccountCard" class="card"></div>
                        <div id="recommendations" class="card"></div>
                    </div>
                </section>

                <section id="pageAccounts" class="page">
                    <div id="accountsToolbar" class="accounts-toolbar">
                        <div class="toolbar-left">
                            <div class="search-field">
                                <input
                                    id="accountSearch"
                                    placeholder="搜索账号名 / 编号..."
                                />
                            </div>
                            <div class="search-field">
                                <select
                                    id="accountGroupFilter"
                                    class="inline-select"
                                >
                                    <option value="all">全部分组</option>
                                </select>
                            </div>
                            <div class="segmented">
                                <button id="filterAll" class="active">
                                    全部
                                </button>
                                <button id="filterActive">可用</button>
                                <button id="filterLow">低配额</button>
                            </div>
                        </div>
                        <div class="actions">
                            <div id="accountOps" class="account-ops">
                                <button
                                    id="accountOpsToggle"
                                    class="secondary account-ops-toggle"
                                    type="button"
                                    aria-haspopup="true"
                                    aria-expanded="false"
                                    aria-controls="accountOpsMenu"
                                >
                                    账号操作
                                </button>
                                <div
                                    id="accountOpsMenu"
                                    class="account-ops-menu"
                                    hidden
                                >
                                    <button
                                        id="addAccount"
                                        class="ghost"
                                        type="button"
                                    >
                                        添加账号
                                    </button>
                                    <button
                                        id="importAccounts"
                                        class="secondary"
                                        type="button"
                                    >
                                        导入账号
                                    </button>

                                    <button id="refreshAll" type="button">
                                        刷新所有
                                    </button>
                                    <button
                                        id="removeUnavailableFree"
                                        class="danger"
                                        type="button"
                                    >
                                        一键移除不可用免费账号
                                    </button>
                                    <button
                                        id="exportAccounts"
                                        class="secondary"
                                        type="button"
                                    >
                                        导出用户
                                    </button>
                                </div>
                            </div>
                            <input
                                id="importAccountsInput"
                                type="file"
                                accept=".json,.txt"
                                multiple
                                hidden
                            />
                        </div>
                    </div>

                    <div class="panel">
                        <div class="table-wrap">
                            <table class="data-table account-table">
                                <thead>
                                    <tr>
                                        <th>账号</th>
                                        <th>分组</th>
                                        <th>顺序</th>
                                        <th>可用状态</th>
                                        <th>最近刷新</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="accountRows"></tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <section id="pageApiKeys" class="page">
                    <div class="panel">
                        <div class="panel-header">
                            <div>
                                <h3>平台密钥</h3>
                                <p>创建/管理网关调用所需的 Key</p>
                            </div>
                            <div class="toolbar-actions api-keys-toolbar">
                                <button id="refreshApiModels" class="ghost">
                                    刷新模型
                                </button>
                                <button id="createApiKey" class="secondary">
                                    创建 Key
                                </button>
                            </div>
                        </div>
                        <div class="table-wrap">
                            <table class="data-table api-table">
                                <thead>
                                    <tr>
                                        <th>密钥编号</th>
                                        <th>名称</th>
                                        <th>协议</th>
                                        <th>绑定模型</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="apiKeyRows"></tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <section id="pageRequestLogs" class="page">
                    <div class="panel">
                        <div class="panel-header">
                            <div>
                                <h3>请求日志</h3>
                                <p>追踪每次请求的模型、状态码和错误信息</p>
                            </div>
                            <div class="toolbar-actions">
                                <div class="segmented log-segmented">
                                    <button id="filterLogAll" class="active">
                                        全部
                                    </button>
                                    <button id="filterLog2xx">2xx</button>
                                    <button id="filterLog4xx">4xx</button>
                                    <button id="filterLog5xx">5xx</button>
                                </div>
                                <input
                                    id="requestLogSearch"
                                    placeholder="搜索，支持 方法:GET / 状态:5xx / 密钥:abc"
                                />
                                <button id="clearRequestLogs" class="danger">
                                    清空日志
                                </button>
                                <button
                                    id="refreshRequestLogs"
                                    class="secondary"
                                >
                                    刷新
                                </button>
                            </div>
                        </div>
                        <div class="table-wrap requestlog-wrap">
                            <table class="data-table requestlog-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="requestLogRows"></tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <section id="pageSettings" class="page page-settings-modern">
                    <div class="panel settings-sheet">
                        <div class="settings-grid">
                            <div class="settings-top-grid">
                                <div
                                    class="panel settings-card settings-card-update settings-card-compact"
                                >
                                    <div class="panel-header">
                                        <div>
                                            <h3>更新设置</h3>
                                            <p>自动检查与手动更新</p>
                                        </div>
                                    </div>
                                    <div class="settings-row">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="autoCheckUpdate"
                                        >
                                            <input
                                                id="autoCheckUpdate"
                                                type="checkbox"
                                                checked
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span>自动检查更新</span>
                                        </label>
                                        <button
                                            id="checkUpdate"
                                            class="secondary"
                                            type="button"
                                        >
                                            检查更新
                                        </button>
                                    </div>
                                    <div class="hint">
                                        当前版本：<span
                                            id="updateCurrentVersion"
                                            >--</span
                                        >
                                    </div>
                                    <div id="updateStatusText" class="hint">
                                        尚未检查更新
                                    </div>
                                </div>

                                <div
                                    class="panel settings-card settings-card-gateway settings-card-compact"
                                >
                                    <div class="panel-header">
                                        <div>
                                            <h3>网关策略</h3>
                                            <p>配置请求路由策略</p>
                                        </div>
                                    </div>
                                    <div class="settings-row">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="cpaNoCookieHeaderMode"
                                        >
                                            <input
                                                id="cpaNoCookieHeaderMode"
                                                type="checkbox"
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span
                                                class="settings-switch-text-with-tip"
                                            >
                                                <span>启用请求头收敛策略</span>
                                                <span
                                                    id="cpaNoCookieHeaderModeHint"
                                                    class="settings-inline-tip"
                                                    tabindex="0"
                                                    role="note"
                                                    title="开启后会移除高风险会话头，降低 Cloudflare/WAF 验证命中率。"
                                                    aria-label="请求头收敛策略说明：开启后会移除高风险会话头，降低 Cloudflare/WAF 验证命中率。"
                                                    >?</span
                                                >
                                            </span>
                                        </label>
                                    </div>
                                    <div class="settings-row">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="routeStrategySelect"
                                        >
                                            <span>网关选路策略</span>
                                            <span
                                                id="routeStrategyHint"
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="按账号顺序优先请求，优先使用可用账号（不可用账号不会参与选路）。"
                                                aria-label="网关选路策略说明：按账号顺序优先请求，优先使用可用账号（不可用账号不会参与选路）。"
                                                >?</span
                                            >
                                        </label>
                                        <select
                                            id="routeStrategySelect"
                                            class="inline-select settings-inline-select"
                                        >
                                            <option value="ordered">
                                                顺序优先
                                            </option>
                                            <option value="balanced">
                                                均衡轮询
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div
                                    id="settingsLowTransparencyCard"
                                    class="panel settings-card settings-card-visual settings-card-compact"
                                >
                                    <div class="panel-header">
                                        <div>
                                            <h3>视觉性能</h3>
                                            <p>低端设备可开启，减少特效开销</p>
                                        </div>
                                    </div>
                                    <div class="settings-row">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="lowTransparencyMode"
                                        >
                                            <input
                                                id="lowTransparencyMode"
                                                type="checkbox"
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span>性能模式 / 低透明度</span>
                                        </label>
                                    </div>
                                    <div class="hint">
                                        关闭 blur、backdrop-filter
                                        等高成本效果。
                                    </div>
                                </div>
                            </div>

                            <div class="settings-proxy-strip">
                                <div class="settings-row settings-row-proxy settings-row-actions">
                                    <label
                                        class="hint settings-field-label settings-field-label-with-tip"
                                        for="upstreamProxyUrlInput"
                                    >
                                        <span>OpenAI 上游代理</span>
                                        <span
                                            class="settings-inline-tip"
                                            tabindex="0"
                                            role="note"
                                            title="示例：http://127.0.0.1:7890。留空表示直连上游。"
                                            aria-label="OpenAI 上游代理说明：填写代理地址后，上游请求会通过该代理转发；留空表示直连。"
                                            >?</span
                                        >
                                    </label>
                                    <input
                                        id="upstreamProxyUrlInput"
                                        class="settings-inline-input mono"
                                        type="text"
                                        placeholder="http://127.0.0.1:7890"
                                    />
                                    <button
                                        id="upstreamProxySave"
                                        class="secondary"
                                        type="button"
                                    >
                                        保存代理
                                    </button>
                                    <div id="upstreamProxyHint" class="hint">
                                        保存后立即生效。
                                    </div>
                                </div>
                            </div>

                            <div
                                class="panel settings-card settings-card-background settings-card-background-modern"
                            >
                                <div class="panel-header">
                                    <div>
                                        <h3>后台任务</h3>
                                        <p>轮询线程与 HTTP 参数</p>
                                    </div>
                                </div>
                                <div class="settings-subtitle">
                                    轮询线程（保存后热生效）
                                </div>
                                <div class="settings-poll-grid">
                                    <div class="settings-poll-item">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="backgroundUsagePollingEnabled"
                                        >
                                            <input
                                                id="backgroundUsagePollingEnabled"
                                                type="checkbox"
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span>用量轮询线程</span>
                                        </label>
                                        <div class="settings-interval-field">
                                            <label
                                                class="hint settings-interval-label"
                                                for="backgroundUsagePollIntervalSecs"
                                                >间隔（秒）</label
                                            >
                                            <input
                                                id="backgroundUsagePollIntervalSecs"
                                                class="settings-inline-number"
                                                type="number"
                                                min="1"
                                                step="1"
                                            />
                                        </div>
                                    </div>
                                    <div class="settings-poll-item">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="backgroundGatewayKeepaliveEnabled"
                                        >
                                            <input
                                                id="backgroundGatewayKeepaliveEnabled"
                                                type="checkbox"
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span>网关保活线程</span>
                                        </label>
                                        <div class="settings-interval-field">
                                            <label
                                                class="hint settings-interval-label"
                                                for="backgroundGatewayKeepaliveIntervalSecs"
                                                >间隔（秒）</label
                                            >
                                            <input
                                                id="backgroundGatewayKeepaliveIntervalSecs"
                                                class="settings-inline-number"
                                                type="number"
                                                min="1"
                                                step="1"
                                            />
                                        </div>
                                    </div>
                                    <div class="settings-poll-item">
                                        <label
                                            class="update-auto-check switch-control"
                                            for="backgroundTokenRefreshPollingEnabled"
                                        >
                                            <input
                                                id="backgroundTokenRefreshPollingEnabled"
                                                type="checkbox"
                                            />
                                            <span
                                                class="switch-track"
                                                aria-hidden="true"
                                            >
                                                <span
                                                    class="switch-thumb"
                                                ></span>
                                            </span>
                                            <span>令牌刷新轮询线程</span>
                                        </label>
                                        <div class="settings-interval-field">
                                            <label
                                                class="hint settings-interval-label"
                                                for="backgroundTokenRefreshPollIntervalSecs"
                                                >间隔（秒）</label
                                            >
                                            <input
                                                id="backgroundTokenRefreshPollIntervalSecs"
                                                class="settings-inline-number"
                                                type="number"
                                                min="1"
                                                step="1"
                                            />
                                        </div>
                                    </div>
                                </div>

                                <div class="settings-subtitle">
                                    Worker 参数（重启 service 生效）
                                </div>
                                <div class="hint">
                                    并发线程数按 max(CPU 核心数 × 因子, 最小值)
                                    计算。
                                </div>
                                <div class="settings-workers-grid">
                                    <div class="settings-inline-number-field">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="backgroundUsageRefreshWorkers"
                                        >
                                            <span>用量刷新并发线程数</span>
                                            <span
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="后台刷新账号用量时并行执行的任务线程数。值越大刷新更快，但会占用更多 CPU/网络资源。"
                                                aria-label="用量刷新并发线程数说明：后台刷新账号用量时并行执行的任务线程数，值越大刷新更快，但会占用更多 CPU 和网络资源。"
                                                >?</span
                                            >
                                        </label>
                                        <input
                                            id="backgroundUsageRefreshWorkers"
                                            class="settings-inline-number"
                                            type="number"
                                            min="1"
                                            step="1"
                                        />
                                    </div>
                                    <div class="settings-inline-number-field">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="backgroundHttpWorkerFactor"
                                        >
                                            <span>普通请求并发因子</span>
                                            <span
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="普通 HTTP 请求线程数的倍数因子，最终线程数=max(CPU核心数×因子, 普通请求最小并发)。"
                                                aria-label="普通请求并发因子说明：普通 HTTP 请求线程数的倍数因子，最终线程数等于 max(CPU核心数乘因子, 普通请求最小并发)。"
                                                >?</span
                                            >
                                        </label>
                                        <input
                                            id="backgroundHttpWorkerFactor"
                                            class="settings-inline-number"
                                            type="number"
                                            min="1"
                                            step="1"
                                        />
                                    </div>
                                    <div class="settings-inline-number-field">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="backgroundHttpWorkerMin"
                                        >
                                            <span>普通请求最小并发</span>
                                            <span
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="普通 HTTP 请求线程数的下限。CPU 较少时，仍至少保留这个并发数。"
                                                aria-label="普通请求最小并发说明：普通 HTTP 请求线程数的下限，CPU 较少时仍至少保留这个并发数。"
                                                >?</span
                                            >
                                        </label>
                                        <input
                                            id="backgroundHttpWorkerMin"
                                            class="settings-inline-number"
                                            type="number"
                                            min="1"
                                            step="1"
                                        />
                                    </div>
                                    <div class="settings-inline-number-field">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="backgroundHttpStreamWorkerFactor"
                                        >
                                            <span>流式请求并发因子</span>
                                            <span
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="SSE/流式请求线程数的倍数因子，最终线程数=max(CPU核心数×因子, 流式请求最小并发)。"
                                                aria-label="流式请求并发因子说明：SSE/流式请求线程数的倍数因子，最终线程数等于 max(CPU核心数乘因子, 流式请求最小并发)。"
                                                >?</span
                                            >
                                        </label>
                                        <input
                                            id="backgroundHttpStreamWorkerFactor"
                                            class="settings-inline-number"
                                            type="number"
                                            min="1"
                                            step="1"
                                        />
                                    </div>
                                    <div class="settings-inline-number-field">
                                        <label
                                            class="hint settings-field-label settings-field-label-with-tip"
                                            for="backgroundHttpStreamWorkerMin"
                                        >
                                            <span>流式请求最小并发</span>
                                            <span
                                                class="settings-inline-tip"
                                                tabindex="0"
                                                role="note"
                                                title="流式请求线程数的下限。保证流式对话在高负载时仍有基础并发能力。"
                                                aria-label="流式请求最小并发说明：流式请求线程数的下限，保证流式对话在高负载时仍有基础并发能力。"
                                                >?</span
                                            >
                                        </label>
                                        <input
                                            id="backgroundHttpStreamWorkerMin"
                                            class="settings-inline-number"
                                            type="number"
                                            min="1"
                                            step="1"
                                        />
                                    </div>
                                </div>
                                <div class="settings-row settings-row-actions">
                                    <button
                                        id="backgroundTasksSave"
                                        class="secondary"
                                        type="button"
                                    >
                                        保存配置
                                    </button>
                                    <div id="backgroundTasksHint" class="hint">
                                        保存后会按参数生效。
                                    </div>
                                </div>
                            </div>

                            <div
                                class="panel settings-card settings-card-theme settings-card-compact"
                            >
                                <div class="panel-header">
                                    <div>
                                        <h3>主题设置</h3>
                                        <p>切换界面配色主题</p>
                                    </div>
                                </div>
                                <div class="theme-popover settings-theme">
                                    <div
                                        id="themePanel"
                                        class="theme-panel"
                                        aria-label="主题切换"
                                    ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
        <div id="startupMask" class="startup-mask active" aria-live="polite">
            <div class="startup-mask-card">
                <div class="startup-spinner" aria-hidden="true"></div>
                <strong>正在启动服务</strong>
                <div id="startupMaskText" class="hint">
                    正在连接本地服务并加载页面数据...
                </div>
                <div
                    id="startupMaskDetail"
                    class="startup-mask-detail"
                    hidden
                ></div>
            </div>
        </div>
        <div id="modalAccount" class="modal">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>新增账号</h3>
                </div>
                <div class="modal-body">
                    <label>标签（逗号分隔）</label>
                    <input id="inputTags" placeholder="例如：高频, 团队A" />
                    <label>备注/描述</label>
                    <input id="inputNote" placeholder="例如：主号 / 测试号" />
                    <label>分组</label>
                    <select id="inputGroup">
                        <option value="">请选择</option>
                        <option value="TEAM">团队（TEAM）</option>
                        <option value="PERSONAL">个人（PERSONAL）</option>
                    </select>
                    <div id="loginHint" class="hint">
                        点击登录后会打开浏览器完成授权。
                    </div>
                    <div class="login-url">
                        <input id="loginUrl" class="mono" readonly value="" />
                        <button id="copyLoginUrl" class="secondary">
                            复制链接
                        </button>
                    </div>
                    <label>回调链接（端口占用时可手动解析）</label>
                    <div class="login-url">
                        <input
                            id="manualCallbackUrl"
                            class="mono"
                            placeholder="粘贴回调链接"
                        />
                        <button id="manualCallbackSubmit" class="secondary">
                            解析回调
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="submitLogin">登录授权</button>
                    <button id="cancelLogin" class="secondary">取消</button>
                </div>
            </div>
        </div>

        <div id="modalUsage" class="modal">
            <div class="modal-card">
                <div class="modal-header">
                    <h3 id="usageTitle">用量查询</h3>
                    <button id="closeUsageModal" class="ghost">关闭</button>
                </div>
                <div class="modal-body">
                    <div id="usageProgress" class="progress"></div>
                    <div id="usageDetail" class="hint">等待刷新...</div>
                </div>
                <div class="modal-footer">
                    <button id="refreshUsageSingle">刷新用量</button>
                </div>
            </div>
        </div>

        <div id="modalApiKey" class="modal">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>创建平台密钥</h3>
                </div>
                <div class="modal-body">
                    <label>名称（可选）</label>
                    <input
                        id="inputApiKeyName"
                        placeholder="例如：主机房 / 测试"
                    />
                    <label>协议</label>
                    <select id="inputApiKeyProtocol">
                        <option value="openai_compat">
                            OpenAI 兼容（默认）
                        </option>
                        <option value="azure_openai">Azure OpenAI 兼容</option>
                        <option value="anthropic_native">
                            Claude Code 兼容
                        </option>
                    </select>
                    <div
                        id="apiKeyAzureFields"
                        class="azure-fields-grid"
                        hidden
                    >
                        <div class="modal-field">
                            <label for="inputApiKeyEndpoint">接入地址</label>
                            <input
                                id="inputApiKeyEndpoint"
                                class="mono"
                                placeholder="例如：https://your-resource.openai.azure.com"
                            />
                        </div>
                        <div class="modal-field">
                            <label for="inputApiKeyAzureApiKey">接口密钥</label>
                            <input
                                id="inputApiKeyAzureApiKey"
                                class="mono"
                                placeholder="例如：your-azure-key"
                            />
                        </div>
                    </div>
                    <label>模型配置</label>
                    <select id="inputApiKeyModel">
                        <option value="">跟随请求模型（不覆盖）</option>
                    </select>
                    <label>推理等级</label>
                    <select id="inputApiKeyReasoning">
                        <option value="">跟随请求等级（不覆盖）</option>
                        <option value="low">低</option>
                        <option value="medium">中</option>
                        <option value="high">高</option>
                        <option value="xhigh">极高</option>
                    </select>
                    <label>平台密钥</label>
                    <div class="login-url">
                        <input
                            id="apiKeyValue"
                            class="mono"
                            readonly
                            value=""
                        />
                        <button id="copyApiKey" class="secondary">
                            复制密钥
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="submitApiKey">完成</button>
                    <button id="cancelApiKey" class="secondary">关闭</button>
                </div>
            </div>
        </div>
        <div id="modalConfirm" class="modal">
            <div class="modal-card confirm-card">
                <div class="modal-header">
                    <h3 id="confirmTitle">确认操作</h3>
                </div>
                <div class="modal-body">
                    <p id="confirmMessage">请确认是否继续。</p>
                </div>
                <div class="modal-footer">
                    <button id="confirmOk">确定</button>
                    <button id="confirmCancel" class="secondary">取消</button>
                </div>
            </div>
        </div>
        <div id="appToast" class="app-toast" aria-live="polite"></div>
    </body>
</html>
