| <!doctype html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <link rel="icon" type="image/x-icon" href="/web/favicon.ico"> |
| <link rel="apple-touch-icon" href="/web/apple-touch-icon.png"> |
| <link rel="manifest" href="/web/manifest.json"> |
| <meta name="theme-color" content="#3b82f6"> |
| <title data-i18n="trend.title">请求趋势 - Claude Code & Codex Proxy</title> |
| <link rel="stylesheet" href="/web/assets/css/styles.css?v=__VERSION__"> |
| <link rel="stylesheet" href="/web/assets/css/channels.css?v=__VERSION__"> |
| <script defer src="/web/assets/locales/zh-CN.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/locales/en.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/i18n.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/echarts.min.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/template-engine.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/date-range-selector.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/filter-state.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/filter-query.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/page-filters.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/ui.js?v=__VERSION__"></script> |
| <script defer src="/web/assets/js/trend.js?v=__VERSION__"></script> |
| </head> |
| <body class="trend-page"> |
| <div class="app-container"> |
| |
| <main class="main-content"> |
| <div class="content-area"> |
| <div data-page-filters="trend"></div> |
|
|
| |
| <section class="mb-8 trend-chart-section"> |
| <div class="glass-card trend-chart-card"> |
| <div class="flex justify-between items-center mb-6 trend-chart-header"> |
| <h3 class="text-xl font-semibold trend-chart-title"> |
| <svg class="inline-block w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4"/> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 21l4-4 4 4"/> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18"/> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/> |
| </svg> |
| <span data-i18n="trend.chartTitle">请求趋势图表</span> |
| </h3> |
| |
| |
| <div class="flex items-center trend-chart-toolbar gap-space-3 flex-wrap"> |
| |
| <div class="toggle-group" id="trend-type-group"> |
| <div class="toggle-btn" data-type="count" data-i18n="trend.typeCount">调用次数</div> |
| <div class="toggle-btn" data-type="rpm" data-i18n="trend.typeRpm">RPM</div> |
| <div class="toggle-btn active" data-type="first_byte" data-i18n="trend.typeFirstByte">首字响应</div> |
| <div class="toggle-btn" data-type="duration" data-i18n="trend.typeDuration">总耗时</div> |
| <div class="toggle-btn" data-type="tokens" data-i18n="trend.typeTokens">Token用量</div> |
| <div class="toggle-btn" data-type="cost" data-i18n="trend.typeCost">费用消耗</div> |
| </div> |
| |
| <div class="channel-filter-container"> |
| <button class="btn btn-secondary btn-sm" id="btn-channel-filter-toggle" type="button"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"/> |
| </svg> |
| <span data-i18n="trend.channelFilter">渠道筛选</span> |
| </button> |
| <div class="channel-filter-dropdown hidden" id="channel-filter-dropdown"> |
| <div class="filter-header"> |
| <span data-i18n="trend.selectChannels">选择渠道</span> |
| <div class="filter-actions"> |
| <button class="filter-action" id="btn-select-all-channels" type="button" data-i18n="common.selectAll">全选</button> |
| <button class="filter-action" id="btn-clear-all-channels" type="button" data-i18n="common.clear">清空</button> |
| </div> |
| </div> |
| <div class="filter-content" id="channel-filter-list"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="chart-container"> |
| <div class="chart-loading" id="chart-loading"> |
| <div class="loading-spinner"></div> |
| <div data-i18n="trend.loading">正在加载趋势数据...</div> |
| </div> |
| <div class="chart-error hidden" id="chart-error"> |
| <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.864-.833-2.634 0L4.18 16.5c-.77.833.192 2.5 1.732 2.5z"/> |
| </svg> |
| <div class="error-title" data-i18n="trend.loadFailed">加载失败</div> |
| <div class="error-message" data-i18n="trend.checkNetwork">请检查网络连接或重试</div> |
| </div> |
| |
| <div id="chart" class="w-full h-full hidden"></div> |
| </div> |
|
|
| |
| <div class="chart-info"> |
| <div class="info-item"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| </svg> |
| <span id="bucket-interval">数据更新间隔：--</span> |
| </div> |
| <div class="info-item"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> |
| </svg> |
| <span id="data-timerange">1小时数据展示</span> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
| </div> |
|
|
|
|
| |
| <template id="tpl-channel-filter-item"> |
| <div class="channel-filter-item"> |
| <div class="channel-checkbox {{checkedClass}}"></div> |
| <div class="channel-color-indicator" style="background-color: {{color}}"></div> |
| <div class="channel-name">{{displayName}}</div> |
| </div> |
| </template> |
|
|
| </body> |
| </html> |
|
|
