Spaces:

xcolorday
/

cror

Paused

App Files Files Community

cror / static /logs.html

xcolorday

Upload 442 files

6b356c4 verified 9 months ago

Raw

History Blame Contribute Delete

73.4 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/x-icon" href="data:image/x-icon;," />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>请求日志查看</title>
	<!-- 引入共享样式 -->
	<link rel="stylesheet" href="/static/shared-styles.css" />
	<script src="/static/shared.js"></script>
	<style>
	/* 筛选面板样式 */
	.filter-panel {
	background: var(--card-background);
	padding: 20px;
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing);
	border: 1px solid var(--border-color);
	}

	.filter-section {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
	}

	.filter-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
	}

	.filter-section h3 {
	margin: 0 0 15px 0;
	color: var(--primary-color);
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	}

	.filter-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	}

	.filter-group label {
	font-size: 13px;
	color: var(--text-secondary);
	}

	.filter-group input[type="datetime-local"],
	.filter-group input[type="text"],
	.filter-group input[type="number"],
	.filter-group select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background: var(--card-background);
	color: var(--text-primary);
	font-size: 14px;
	}

	.filter-group input:focus,
	.filter-group select:focus {
	border-color: var(--primary-color);
	outline: none;
	}

	.range-input {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.range-input input {
	flex: 1;
	}

	.filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	}

	/* 创建正确的堆叠上下文 */
	.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: var(--spacing);
	}

	.stat-card {
	background: var(--card-background);
	padding: 20px;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all var(--transition-fast);
	border: 1px solid var(--border-color);
	}

	.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	}

	.stat-card h4 {
	margin: 0 0 8px 0;
	color: var(--primary-color);
	}

	.stat-value {
	font-size: 28px;
	font-weight: 600;
	color: var(--primary-color);
	margin-top: 4px;
	}

	.refresh-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	}

	.auto-refresh {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--card-background);
	padding: 8px 16px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	}

	.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	overflow-y: hidden;
	}

	.modal-content {
	background-color: var(--card-background);
	margin: 5% auto;
	padding: 20px;
	border-radius: var(--border-radius);
	width: 90%;
	max-width: 800px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}

	.modal-header {
	position: sticky;
	top: 0;
	background: var(--card-background);
	z-index: 10;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	}

	.modal-header h3 {
	margin: 0;
	flex-grow: 1;
	}

	#conversation-content-container {
	flex: 1;
	overflow-y: auto;
	margin: 0 -20px;
	padding: 20px;
	}

	.close {
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	padding: 5px 10px;
	}

	.close:hover {
	color: var(--primary-color);
	}

	.info-button {
	padding: 6px 12px;
	font-size: 14px;
	border-radius: var(--border-radius);
	transition: all var(--transition-fast);
	background: var(--primary-color-alpha);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	}

	.info-button:hover {
	background: var(--primary-color);
	color: white;
	}

	.message-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	margin: 0;
	border: 1px solid var(--border-color);
	}

	.message-table th,
	.message-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	transition: background-color var(--transition-fast);
	}

	.message-table td {
	word-break: break-word;
	}

	.message-table td:nth-child(2) {
	max-width: 600px;
	}

	.message-table td:first-child {
	width: 80px;
	white-space: nowrap;
	}

	.usage-progress-container {
	margin: 16px 0;
	height: 8px;
	background-color: var(--border-color);
	border-radius: 4px;
	overflow: hidden;
	}

	.usage-progress-bar {
	height: 100%;
	width: 0%;
	transition: width 0.3s ease;
	background-color: var(--primary-color);
	border-radius: 4px;
	}

	.usage-progress-bar.low {
	background-color: #4caf50;
	}

	.usage-progress-bar.medium {
	background-color: #ff9800;
	}

	.usage-progress-bar.high {
	background-color: #f44336;
	}

	/* Token 信息和对话预览的通用样式 */
	.token-info-tooltip {
	position: relative;
	display: inline-block;
	}

	.token-info-tooltip .tooltip-content {
	visibility: hidden;
	position: absolute;
	z-index: 1002;
	background-color: var(--card-background);
	color: var(--text-primary);
	padding: 12px 15px;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	width: 280px;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 8px);
	opacity: 0;
	transition:
	opacity 0.3s,
	visibility 0.3s;
	text-align: left;
	line-height: 1.6;
	border: 1px solid var(--border-color);
	pointer-events: none;
	}

	.token-info-tooltip:hover .tooltip-content {
	visibility: visible;
	opacity: 1;
	}

	.token-info-tooltip .tooltip-content::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border-width: 8px;
	border-style: solid;
	border-color: var(--card-background) transparent transparent transparent;
	}

	.token-info-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100%;
	width: 100%;
	height: 10px;
	background: transparent;
	}

	.token-info-tooltip .tooltip-info-row {
	display: flex;
	justify-content: space-between;
	margin: 2px 0;
	}

	.token-info-tooltip .tooltip-info-row .label {
	color: var(--text-secondary);
	margin-right: 10px;
	}

	.token-info-tooltip .tooltip-info-row .value {
	font-weight: 500;
	word-break: break-word;
	}

	.token-info-container {
	flex: 1;
	overflow-y: auto;
	margin: 0 -20px;
	padding: 20px;
	}

	/* 对话预览特定样式 */
	.prompt-preview .tooltip-content {
	width: 320px;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
	white-space: pre-wrap;
	word-break: break-word;
	}

	.prompt-preview .tooltip-content .message-meta {
	font-size: 0.8em;
	color: var(--text-secondary);
	padding: 0;
	margin: 0 0 4px 0;
	}

	.prompt-preview .tooltip-content .last-message {
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--text-primary);
	margin: 0;
	padding: 0;
	white-space: pre-wrap;
	word-break: break-word;
	}

	.prompt-preview .tooltip-content::-webkit-scrollbar {
	width: 6px;
	}

	.prompt-preview .tooltip-content::-webkit-scrollbar-thumb {
	background-color: var(--border-color);
	border-radius: 3px;
	}

	.prompt-preview .tooltip-content::-webkit-scrollbar-track {
	background-color: var(--card-background);
	}

	/* 优化表格样式 */
	.table-container {
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid var(--border-color);
	}

	#logsTable {
	position: relative;
	z-index: 1;
	}

	#logsTable th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--primary-color);
	white-space: nowrap;
	transition: background-color 0.2s ease;
	}

	#logsTable td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	transition: background-color var(--transition-fast);
	}

	#logsTable tr:hover td {
	background-color: var(--hover-color, rgba(0, 0, 0, 0.02));
	}

	.modal-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.danger-button {
	padding: 6px 12px;
	font-size: 14px;
	border-radius: var(--border-radius);
	background: var(--error-color-alpha);
	color: var(--error-color);
	border: 1px solid var(--error-color);
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-right: 8px;
	}

	.danger-button:hover {
	background: var(--error-color);
	color: white;
	}

	.warning-button {
	padding: 6px 12px;
	font-size: 14px;
	border-radius: var(--border-radius);
	background: rgba(255, 193, 7, 0.1);
	color: #e8a400;
	border: 1px solid #e8a400;
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-right: 8px;
	}

	.warning-button:hover {
	background: #e8a400;
	color: white;
	}

	.success-button {
	padding: 6px 12px;
	font-size: 14px;
	border-radius: var(--border-radius);
	background: rgba(76, 175, 80, 0.1);
	color: #4caf50;
	border: 1px solid #4caf50;
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-right: 8px;
	}

	.success-button:hover {
	background: #4caf50;
	color: white;
	}

	/* 图表样式 */
	.chart-container {
	background: var(--card-background);
	padding: 20px;
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing);
	border: 1px solid var(--border-color);
	height: 300px;
	}

	/* 添加菜单切换样式 */
	.tab-menu {
	display: flex;
	margin-bottom: 15px;
	}

	.tab-button {
	padding: 8px 16px;
	background: var(--card-background);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	cursor: pointer;
	transition: all var(--transition-fast);
	font-size: 14px;
	}

	.tab-button:first-child {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	}

	.tab-button:last-child {
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	.tab-button.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	}

	.tab-content {
	display: none;
	}

	.tab-content.active {
	display: block;
	}

	.delay-chart-container {
	height: 200px;
	margin-bottom: 20px;
	}

	.delay-table-container {
	max-height: none;
	overflow-y: visible;
	}

	.pagination-container {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.pagination-info {
	flex: 1;
	}

	.pagination-controls {
	display: flex;
	gap: 10px;
	align-items: center;
	}

	.page-jumper {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 15px;
	}

	.page-input {
	width: 60px;
	padding: 5px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	text-align: center;
	}

	.page-input:focus {
	border-color: var(--primary-color);
	outline: none;
	}

	.page-go-btn {
	padding: 5px 10px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	background: var(--card-background);
	cursor: pointer;
	transition: all var(--transition-fast);
	}

	.page-go-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	}

	/* 响应式样式 */
	@media (max-width: 768px) {
	.filter-grid {
	grid-template-columns: 1fr;
	}

	.stats-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	}

	.stat-card {
	padding: 16px;
	}

	.stat-value {
	font-size: 24px;
	}

	.modal-content {
	margin: 2% auto;
	width: 95%;
	padding: 16px;
	}

	.chart-container {
	height: 200px;
	padding: 16px;
	}

	.modal-header {
	flex-direction: column;
	align-items: flex-start;
	}

	.tab-menu {
	width: 100%;
	}

	.tab-button {
	flex: 1;
	}
	}
	</style>
	</head>

	<body>
	<h1>请求日志查看</h1>

	<div class="container">
	<div class="form-group">
	<label>认证令牌:</label>
	<input type="password" id="authToken" placeholder="输入 AUTH_TOKEN" />
	</div>

	<!-- 新的筛选面板 -->
	<div class="filter-panel">
	<!-- 时间范围筛选 -->
	<div class="filter-section">
	<h3>📅 时间范围</h3>
	<div class="filter-grid">
	<div class="filter-group">
	<label for="fromDate">开始时间</label>
	<input type="datetime-local" id="fromDate" />
	</div>
	<div class="filter-group">
	<label for="toDate">结束时间</label>
	<input type="datetime-local" id="toDate" />
	</div>
	</div>
	<div style="margin-top: 10px">
	<label
	style="
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	color: var(--text-secondary);
	"
	>快速选择</label
	>
	<div class="button-group" style="justify-content: flex-start">
	<button
	onclick="setTimeRange('1h')"
	style="padding: 6px 12px; font-size: 14px"
	>
	最近1小时
	</button>
	<button
	onclick="setTimeRange('24h')"
	style="padding: 6px 12px; font-size: 14px"
	>
	最近24小时
	</button>
	<button
	onclick="setTimeRange('7d')"
	style="padding: 6px 12px; font-size: 14px"
	>
	最近7天
	</button>
	<button
	onclick="setTimeRange('30d')"
	style="padding: 6px 12px; font-size: 14px"
	>
	最近30天
	</button>
	</div>
	</div>
	</div>

	<!-- 用户筛选 -->
	<div class="filter-section">
	<h3>👤 用户筛选</h3>
	<div class="filter-grid">
	<div class="filter-group">
	<label for="userId">用户ID</label>
	<input type="text" id="userId" placeholder="精确匹配用户ID" />
	</div>
	<div class="filter-group">
	<label for="email">邮箱</label>
	<input type="text" id="email" placeholder="支持部分匹配" />
	</div>
	<div class="filter-group">
	<label for="membershipType">会员类型</label>
	<select id="membershipType">
	<option value="">全部</option>
	<option value="free">免费</option>
	<option value="free_trial">试用</option>
	<option value="pro">专业版</option>
	<option value="enterprise">企业版</option>
	</select>
	</div>
	</div>
	</div>

	<!-- 模型筛选 -->
	<div class="filter-section">
	<h3>🤖 模型筛选</h3>
	<div class="filter-grid">
	<div class="filter-group">
	<label for="model">模型名称</label>
	<input type="text" id="model" placeholder="支持部分匹配" />
	</div>
	<div class="filter-group">
	<label for="includeModels">包含模型</label>
	<input
	type="text"
	id="includeModels"
	placeholder="逗号分隔，如: gpt-4,claude"
	/>
	</div>
	<div class="filter-group">
	<label for="excludeModels">排除模型</label>
	<input
	type="text"
	id="excludeModels"
	placeholder="逗号分隔，如: gpt-3.5,dall-e"
	/>
	</div>
	</div>
	</div>

	<!-- 性能筛选 -->
	<div class="filter-section">
	<h3>📊 性能筛选</h3>
	<div class="filter-grid">
	<div class="filter-group">
	<label>耗时范围（秒）</label>
	<div class="range-input">
	<input
	type="number"
	id="minTotalTime"
	placeholder="最小"
	step="0.1"
	min="0"
	/>
	<span>~</span>
	<input
	type="number"
	id="maxTotalTime"
	placeholder="最大"
	step="0.1"
	min="0"
	/>
	</div>
	</div>
	<div class="filter-group">
	<label>Tokens范围</label>
	<div class="range-input">
	<input
	type="number"
	id="minTokens"
	placeholder="最小"
	min="0"
	/>
	<span>~</span>
	<input
	type="number"
	id="maxTokens"
	placeholder="最大"
	min="0"
	/>
	</div>
	</div>
	</div>
	</div>

	<!-- 其他选项 -->
	<div class="filter-section">
	<h3>🔧 其他选项</h3>
	<div class="filter-grid">
	<div class="filter-group">
	<label for="status">状态</label>
	<select id="status">
	<option value="">全部</option>
	<option value="pending">处理中</option>
	<option value="success">成功</option>
	<option value="failure">失败</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="stream">流式响应</label>
	<select id="stream">
	<option value="">全部</option>
	<option value="true">是</option>
	<option value="false">否</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="hasError">包含错误</label>
	<select id="hasError">
	<option value="">全部</option>
	<option value="true">是</option>
	<option value="false">否</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="hasChain">包含对话</label>
	<select id="hasChain">
	<option value="">全部</option>
	<option value="true">是</option>
	<option value="false">否</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="hasUsage">包含用量</label>
	<select id="hasUsage">
	<option value="">全部</option>
	<option value="true">是</option>
	<option value="false">否</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="reverse">排序方式</label>
	<select id="reverse">
	<option value="false">从旧到新</option>
	<option value="true" selected>从新到旧</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="pageSize">每页显示</label>
	<select id="pageSize">
	<option value="10">10 条</option>
	<option value="20" selected>20 条</option>
	<option value="50">50 条</option>
	<option value="100">100 条</option>
	</select>
	</div>
	<div class="filter-group">
	<label for="errorText">错误信息</label>
	<input type="text" id="errorText" placeholder="支持部分匹配" />
	</div>
	</div>
	</div>

	<!-- 筛选操作按钮 -->
	<div class="filter-actions">
	<button onclick="resetFilters()">重置</button>
	<button onclick="applyFilters()">应用筛选</button>
	</div>
	</div>

	<div class="refresh-container">
	<div class="button-group">
	<button onclick="fetchLogs()">刷新日志</button>
	<button onclick="exportLogs()" style="margin-left: 10px">
	导出数据
	</button>
	</div>
	<div class="auto-refresh">
	<input type="checkbox" id="autoRefresh" checked />
	<label for="autoRefresh">自动刷新 (60秒)</label>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="stats-grid">
	<div class="stat-card">
	<h4>总请求数</h4>
	<div id="totalRequests" class="stat-value">-</div>
	</div>
	<div class="stat-card">
	<h4>成功请求</h4>
	<div id="successRequests" class="stat-value">-</div>
	</div>
	<div class="stat-card">
	<h4>失败请求</h4>
	<div id="failureRequests" class="stat-value">-</div>
	</div>
	<div class="stat-card">
	<h4>最后更新</h4>
	<div id="lastUpdate" class="stat-value">-</div>
	</div>
	</div>

	<!-- 添加图表容器 -->
	<div class="chart-container">
	<canvas id="requestsChart"></canvas>
	</div>

	<div class="table-container">
	<table id="logsTable">
	<thead>
	<tr>
	<th>序号</th>
	<th>时间</th>
	<th>模型</th>
	<th>Token信息</th>
	<th>对话</th>
	<th>用时</th>
	<th>输入/输出</th>
	<th>流式</th>
	<th>状态</th>
	<th>错误信息</th>
	</tr>
	</thead>
	<tbody id="logsBody"></tbody>
	</table>
	</div>

	<!-- 分页控件 -->
	<div class="pagination-container">
	<div class="pagination-info">
	共 <span id="totalRecords">0</span> 条记录，每页
	<input
	type="number"
	id="customPageSize"
	class="page-input"
	min="5"
	max="100"
	value="20"
	/>
	条
	<button class="page-go-btn" onclick="changePageSize()">应用</button>
	</div>
	<div class="pagination-controls">
	<button id="prevPage" onclick="changePage(-1)" disabled>
	« 上一页
	</button>
	<span id="currentPage">第 1 页</span>
	<button id="nextPage" onclick="changePage(1)" disabled>
	下一页 »
	</button>
	<div class="page-jumper">
	跳转到第
	<input
	type="number"
	id="pageNumberInput"
	class="page-input"
	min="1"
	value="1"
	/>
	页
	<button class="page-go-btn" onclick="jumpToPage()">GO</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Token详情模态框 -->
	<div id="tokenModal" class="modal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>Token 详细信息</h3>
	<span class="close">×</span>
	</div>
	<div class="token-info-container">
	<table class="message-table">
	<tbody>
	<tr>
	<td>Token</td>
	<td id="modalToken">-</td>
	</tr>
	<tr>
	<td>Checksum</td>
	<td id="modalChecksum">-</td>
	</tr>
	<tr>
	<td>Client Key</td>
	<td id="modalClientKey">-</td>
	</tr>
	<tr>
	<td>Config Version</td>
	<td id="modalConfigVersion">-</td>
	</tr>
	<tr>
	<td>Session ID</td>
	<td id="modalSessionId">-</td>
	</tr>
	<tr>
	<td>Proxy</td>
	<td id="modalProxy">-</td>
	</tr>
	<tr>
	<td>Timezone</td>
	<td id="modalTimezone">-</td>
	</tr>
	<tr>
	<td>Email</td>
	<td id="modalEmail">-</td>
	</tr>
	<tr>
	<td>Name</td>
	<td id="modalName">-</td>
	</tr>
	<tr>
	<td>Updated At</td>
	<td id="modalUpdatedAt">-</td>
	</tr>
	<tr>
	<td>Member Type</td>
	<td id="modalMemberType">-</td>
	</tr>
	<tr>
	<td>Payment ID</td>
	<td id="modalPaymentId">-</td>
	</tr>
	<tr>
	<td>Trial Days</td>
	<td id="modalTrialDays">-</td>
	</tr>
	</tbody>
	</table>
	<div id="usageProgressContainer"></div>
	</div>
	</div>
	</div>

	<!-- 对话详情模态框 -->
	<div id="conversationModal" class="modal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>对话详情</h3>
	<div class="tab-menu">
	<button id="tab-prompt" class="tab-button active">对话内容</button>
	<button id="tab-think" class="tab-button">思考过程</button>
	<button id="tab-delays" class="tab-button">延迟分析</button>
	</div>
	<span class="close">×</span>
	</div>
	<div id="conversation-content-container">
	<div id="dialogContent" class="tab-content active"></div>
	<div id="thinkContent" class="tab-content">
	<pre id="thinkText"></pre>
	</div>
	<div id="delaysContent" class="tab-content">
	<div class="delay-chart-container">
	<canvas id="delayChart"></canvas>
	</div>
	<div class="delay-table-container">
	<table id="delaysTable" class="message-table">
	<thead>
	<tr>
	<th>序号</th>
	<th>文本块</th>
	<th>延迟时间(s)</th>
	<th>速率(字符/秒)</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 引入Chart.js -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>

	<script>
	// 全局变量
	let currentPageIndex = 0;
	let pageSize = 20;
	let totalRecords = 0;
	let currentFilters = {};
	let refreshInterval = null;
	let requestsChart = null;

	// 初始化变量
	let currentTokenDetails = {};

	// Token信息缓存
	let tokenInfoCache = {};
	let allTokensLoaded = false; // 标记是否已加载所有token信息

	// 更新统计信息
	function updateStats(data) {
	// 计算各种统计
	const totalRequests = data.total \|\| 0;
	const successRequests = data.logs.filter(
	(log) => log.status === "success",
	).length;
	const failureRequests = data.logs.filter(
	(log) => log.status === "failure",
	).length;

	// 更新统计卡片
	document.getElementById("totalRequests").textContent =
	totalRequests.toLocaleString();
	document.getElementById("successRequests").textContent =
	successRequests.toLocaleString();
	document.getElementById("failureRequests").textContent =
	failureRequests.toLocaleString();
	document.getElementById("lastUpdate").textContent =
	new Date().toLocaleTimeString("zh-CN");
	}

	// 显示Token详情模态框
	async function showTokenModal(tokenInfo) {
	const modal = document.getElementById("tokenModal");

	// 如果有key，优先从缓存获取详细信息
	if (tokenInfo.key && tokenInfoCache[tokenInfo.key]) {
	// 使用缓存的数据
	tokenInfo = { ...tokenInfo, ...tokenInfoCache[tokenInfo.key] };
	}

	// 设置基础信息
	document.getElementById("modalToken").textContent =
	tokenInfo.primary_token \|\| "-";

	// 处理checksum
	if (tokenInfo.checksum) {
	document.getElementById("modalChecksum").textContent = `${
	tokenInfo.checksum.first \|\| "-"
	} / ${tokenInfo.checksum.second \|\| "-"}`;
	} else {
	document.getElementById("modalChecksum").textContent = "-";
	}

	// 设置其他字段
	document.getElementById("modalClientKey").textContent =
	tokenInfo.client_key \|\| "-";
	document.getElementById("modalConfigVersion").textContent =
	tokenInfo.config_version \|\| "-";
	document.getElementById("modalSessionId").textContent =
	tokenInfo.session_id \|\| "-";
	document.getElementById("modalProxy").textContent =
	tokenInfo.proxy \|\| "-";
	document.getElementById("modalTimezone").textContent =
	tokenInfo.timezone \|\| "-";

	// 处理用户信息
	if (tokenInfo.user) {
	document.getElementById("modalEmail").textContent =
	tokenInfo.user.email \|\| "-";
	document.getElementById("modalName").textContent =
	tokenInfo.user.name \|\| "-";
	document.getElementById("modalUpdatedAt").textContent = tokenInfo.user
	.updated_at
	? new Date(tokenInfo.user.updated_at).toLocaleString()
	: "-";
	} else {
	document.getElementById("modalEmail").textContent = "-";
	document.getElementById("modalName").textContent = "-";
	document.getElementById("modalUpdatedAt").textContent = "-";
	}

	// 处理Stripe信息
	if (tokenInfo.stripe) {
	document.getElementById("modalMemberType").textContent =
	formatMembershipType(tokenInfo.stripe.membership_type);
	document.getElementById("modalPaymentId").textContent =
	tokenInfo.stripe.payment_id \|\| "-";
	document.getElementById("modalTrialDays").textContent =
	tokenInfo.stripe.days_remaining_on_trial > 0
	? `${tokenInfo.stripe.days_remaining_on_trial}天`
	: "-";
	} else {
	document.getElementById("modalMemberType").textContent = "-";
	document.getElementById("modalPaymentId").textContent = "-";
	document.getElementById("modalTrialDays").textContent = "-";
	}

	// 处理使用量信息
	const container = document.getElementById("usageProgressContainer");
	container.innerHTML = "";

	if (tokenInfo.usage) {
	const models = {
	Premium: tokenInfo.usage.premium,
	Standard: tokenInfo.usage.standard,
	};

	Object.entries(models).forEach(([modelName, modelData]) => {
	if (modelData) {
	const div = document.createElement("div");
	div.style.marginTop = "10px";

	const label = document.createElement("strong");
	label.textContent = `${modelName} 使用量: `;
	div.appendChild(label);

	const text = document.createElement("span");
	if (modelData.max_requests) {
	const percentage = (
	(modelData.num_requests / modelData.max_requests) *
	100
	).toFixed(1);
	text.textContent = `${modelData.num_requests}/${modelData.max_requests} 请求 (${percentage}%), ${modelData.num_tokens} tokens`;

	const progressDiv = document.createElement("div");
	progressDiv.className = "usage-progress-container";
	const colorClass =
	percentage < 50 ? "low" : percentage < 80 ? "medium" : "high";
	progressDiv.innerHTML = `<div class="usage-progress-bar ${colorClass}" style="width: ${percentage}%"></div>`;
	div.appendChild(text);
	div.appendChild(progressDiv);
	} else {
	text.textContent = `${modelData.num_requests} 请求, ${modelData.num_tokens} tokens`;
	div.appendChild(text);
	}

	container.appendChild(div);
	}
	});
	}

	modal.style.display = "block";
	}

	// 格式化简单Token信息用于tooltip
	function formatSimpleTokenInfo(tokenInfo) {
	if (!tokenInfo) return "无Token信息";

	// 如果有key，优先从缓存获取完整信息
	let fullTokenInfo = tokenInfo;
	if (tokenInfo.key && tokenInfoCache[tokenInfo.key]) {
	fullTokenInfo = { ...tokenInfo, ...tokenInfoCache[tokenInfo.key] };
	}

	const rows = [];

	if (fullTokenInfo.key) {
	rows.push(["Key", fullTokenInfo.key]);
	}

	if (fullTokenInfo.user) {
	rows.push(["邮箱", fullTokenInfo.user.email \|\| "-"]);
	if (fullTokenInfo.user.name) {
	rows.push(["用户名", fullTokenInfo.user.name]);
	}
	}

	if (fullTokenInfo.stripe) {
	rows.push([
	"会员类型",
	formatMembershipType(fullTokenInfo.stripe.membership_type),
	]);
	}

	if (fullTokenInfo.usage?.premium) {
	const premium = fullTokenInfo.usage.premium;
	const usage = premium.max_requests
	? `${premium.num_requests}/${premium.max_requests}`
	: `${premium.num_requests}`;
	rows.push(["Premium使用", usage]);
	}

	if (rows.length === 0) {
	return "无详细信息";
	}

	return rows
	.map(
	([label, value]) =>
	`<div class="tooltip-info-row"><span class="label">${label}:</span><span class="value">${value}</span></div>`,
	)
	.join("");
	}

	// 设置时间范围快速选择
	function setTimeRange(range) {
	const now = new Date();
	const toDate = now.toISOString().slice(0, 16); // YYYY-MM-DDTHH:mm
	let fromDate;

	switch (range) {
	case "1h":
	fromDate = new Date(now - 60 * 60 * 1000)
	.toISOString()
	.slice(0, 16);
	break;
	case "24h":
	fromDate = new Date(now - 24 * 60 * 60 * 1000)
	.toISOString()
	.slice(0, 16);
	break;
	case "7d":
	fromDate = new Date(now - 7 * 24 * 60 * 60 * 1000)
	.toISOString()
	.slice(0, 16);
	break;
	case "30d":
	fromDate = new Date(now - 30 * 24 * 60 * 60 * 1000)
	.toISOString()
	.slice(0, 16);
	break;
	}

	document.getElementById("fromDate").value = fromDate;
	document.getElementById("toDate").value = toDate;

	// 自动应用筛选
	applyFilters();
	}

	function initChart() {
	const ctx = document.getElementById("requestsChart").getContext("2d");
	requestsChart = new Chart(ctx, {
	type: "line",
	data: {
	labels: [],
	datasets: [
	{
	label: "每小时请求数",
	data: [],
	borderColor: "rgb(75, 192, 192)",
	tension: 0.1,
	fill: false,
	},
	],
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: {
	beginAtZero: true,
	ticks: {
	stepSize: 10,
	},
	},
	},
	plugins: {
	title: {
	display: true,
	text: "24小时请求统计",
	},
	},
	},
	});
	}

	// 更新图表数据
	function updateChart(data) {
	if (!requestsChart) {
	initChart();
	}

	// 按小时统计请求数量
	const hourlyStats = new Map();
	const now = new Date();
	const past24Hours = new Date(now - 24 * 60 * 60 * 1000);

	// 初始化24小时的时间段
	for (let i = 0; i < 24; i++) {
	const hour = new Date(now - i * 60 * 60 * 1000);
	const hourKey = hour.toLocaleString("zh-CN", {
	month: "numeric",
	day: "numeric",
	hour: "numeric",
	});
	hourlyStats.set(hourKey, 0);
	}

	// 统计每小时的请求数
	data.logs.forEach((log) => {
	const logTime = new Date(log.timestamp);
	if (logTime >= past24Hours) {
	const hourKey = logTime.toLocaleString("zh-CN", {
	month: "numeric",
	day: "numeric",
	hour: "numeric",
	});
	if (hourlyStats.has(hourKey)) {
	hourlyStats.set(hourKey, hourlyStats.get(hourKey) + 1);
	}
	}
	});

	// 转换为图表数据
	const sortedHours = Array.from(hourlyStats.keys()).reverse();
	const counts = sortedHours.map((hour) => hourlyStats.get(hour));

	requestsChart.data.labels = sortedHours;
	requestsChart.data.datasets[0].data = counts;
	requestsChart.update();
	}

	async function updateTable(data) {
	const tbody = document.getElementById("logsBody");
	updateStats(data);
	updateChart(data);

	// 更新总记录数和分页信息
	totalRecords = data.total;
	document.getElementById("totalRecords").textContent = totalRecords;
	updatePaginationControls();

	// 收集所有的token keys
	const tokenKeys = new Set();
	data.logs.forEach((log) => {
	if (log.token_info && log.token_info.key) {
	tokenKeys.add(log.token_info.key);
	}
	});

	// 如果还没有加载过所有token信息，则加载并等待完成
	if (!allTokensLoaded && tokenKeys.size > 0) {
	await loadAllTokenInfo(Array.from(tokenKeys));
	}

	tbody.innerHTML = data.logs
	.map((log) => {
	// 准备数据属性
	let attributes = {};

	// 处理 prompt 属性
	if (log.chain && typeof log.chain.prompt === "string") {
	try {
	const promptJson = JSON.stringify(log.chain.prompt);
	const escapedPrompt = escapeHtml(promptJson);
	attributes.prompt = `data-prompt='${escapedPrompt}'`;
	} catch (e) {
	console.error(
	"Failed to process prompt data:",
	e,
	log.chain.prompt,
	);
	}
	}

	// 处理 think 属性
	if (log.chain && typeof log.chain.think === "string") {
	try {
	const thinkJson = JSON.stringify(log.chain.think);
	const escapedThink = escapeHtml(thinkJson);
	attributes.think = `data-think='${escapedThink}'`;
	} catch (e) {
	console.error(
	"Failed to process think data:",
	e,
	log.chain.think,
	);
	}
	}

	// 处理 delays 属性
	if (
	log.chain &&
	Array.isArray(log.chain.delays) &&
	log.chain.delays.length === 2 &&
	typeof log.chain.delays[0] === "string" &&
	Array.isArray(log.chain.delays[1])
	) {
	try {
	const delaysJson = JSON.stringify(log.chain.delays);
	const escapedDelays = escapeHtml(delaysJson);
	attributes.delays = `data-delays='${escapedDelays}'`;
	} catch (e) {
	console.error(
	"Failed to stringify delays data:",
	e,
	log.chain.delays,
	);
	}
	}

	// 组合所有属性
	const allAttributes = Object.values(attributes).join(" ");

	return `<tr>
	<td>${log.id}</td>
	<td>${new Date(log.timestamp).toLocaleString()}</td>
	<td>${log.model}</td>
	<td><div class="token-info-tooltip"><button class="info-button" onclick='showTokenModal(${JSON.stringify(
	log.token_info,
	)})'>查看详情<div class="tooltip-content">${formatSimpleTokenInfo(
	log.token_info,
	)}</div></button></div></td>
	<td>${
	log.chain
	? `<div class="token-info-tooltip prompt-preview"><button class="info-button view-conversation" ${allAttributes}>查看对话<div class="tooltip-content">${formatDialogPreview(
	JSON.stringify(log.chain.prompt \|\| ""),
	)}</div></button></div>`
	: "-"
	}</td>
	<td>${formatTiming(log.timing.total)}</td>
	<td>${formatUsage(log.chain?.usage)}</td>
	<td>${log.stream ? "是" : "否"}</td>
	<td>${log.status}</td>
	<td>${
	typeof log.error === "string" ? log.error : (log.error?.error ?? "-")
	}</td>
	</tr>`;
	})
	.join("");

	// 添加事件监听器
	tbody.querySelectorAll(".view-conversation").forEach((button) => {
	button.addEventListener("click", function () {
	const prompt = this.hasAttribute("data-prompt")
	? JSON.parse(this.dataset.prompt)
	: "";
	const think = this.hasAttribute("data-think")
	? JSON.parse(this.dataset.think)
	: "";
	const delays = this.hasAttribute("data-delays")
	? JSON.parse(this.dataset.delays)
	: [];

	showConversationModal(prompt, think, delays);
	});
	});
	}

	function formatTiming(total) {
	return `${total.toFixed(2)}s`;
	}

	function formatDialogPreview(promptStr) {
	try {
	const messages = parsePrompt(promptStr);
	if (!messages \|\| messages.length === 0) {
	return "无对话内容";
	}

	// 获取最后一条消息
	const lastMessage = messages[messages.length - 1];
	const roleLabels = {
	system: "系统",
	user: "用户",
	assistant: "助手",
	};

	return `<div class="message-meta">最后一条消息 (${
	roleLabels[lastMessage.role] \|\| lastMessage.role
	}):</div><div class="last-message">${lastMessage.content
	.replace(/&/g, "&")
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/\n/g, "<br>")}</div>`;
	} catch (e) {
	console.error("预览对话内容失败:", e);
	return "无法解析对话内容";
	}
	}

	// 更新分页控件状态
	function updatePaginationControls() {
	const prevPageBtn = document.getElementById("prevPage");
	const nextPageBtn = document.getElementById("nextPage");
	const currentPageSpan = document.getElementById("currentPage");
	const pageNumberInput = document.getElementById("pageNumberInput");
	const customPageSize = document.getElementById("customPageSize");

	// 计算总页数
	const totalPages = Math.ceil(totalRecords / pageSize) \|\| 1;

	// 禁用或启用上一页按钮
	prevPageBtn.disabled = currentPageIndex <= 0;

	// 禁用或启用下一页按钮（如果当前页是最后一页或没有足够的记录）
	const hasMorePages = (currentPageIndex + 1) * pageSize < totalRecords;
	nextPageBtn.disabled = !hasMorePages;

	// 更新当前页显示
	currentPageSpan.textContent = `第 ${
	currentPageIndex + 1
	} 页 / 共 ${totalPages} 页`;

	// 同步输入框数值
	pageNumberInput.value = currentPageIndex + 1;
	pageNumberInput.max = totalPages;
	customPageSize.value = pageSize;
	}

	// 切换页码
	function changePage(delta) {
	currentPageIndex += delta;
	if (currentPageIndex < 0) currentPageIndex = 0;

	fetchLogs();
	}

	// 跳转到指定页
	function jumpToPage() {
	const pageNumberInput = document.getElementById("pageNumberInput");
	const pageNumber = parseInt(pageNumberInput.value);
	const totalPages = Math.ceil(totalRecords / pageSize) \|\| 1;

	if (isNaN(pageNumber) \|\| pageNumber < 1) {
	showGlobalMessage("请输入有效的页码", true);
	pageNumberInput.value = currentPageIndex + 1;
	return;
	}

	if (pageNumber > totalPages) {
	showGlobalMessage(`页码超出范围，最大页码为 ${totalPages}`, true);
	pageNumberInput.value = totalPages;
	return;
	}

	currentPageIndex = pageNumber - 1;
	fetchLogs();
	}

	// 更改每页显示数量
	function changePageSize() {
	const customPageSize = document.getElementById("customPageSize");
	const newPageSize = parseInt(customPageSize.value);

	if (isNaN(newPageSize) \|\| newPageSize < 5 \|\| newPageSize > 100) {
	showGlobalMessage("每页显示数量必须在5-100之间", true);
	customPageSize.value = pageSize;
	return;
	}

	// 重置到第一页并使用新的pageSize
	currentPageIndex = 0;
	pageSize = newPageSize;
	fetchLogs();
	}

	// 获取时间范围筛选
	function getTimeRangeFilter() {
	const fromDate = document.getElementById("fromDate").value;
	const toDate = document.getElementById("toDate").value;

	const filter = {};

	if (fromDate) {
	// 转换为RFC3339格式
	filter.from_date = new Date(fromDate).toISOString();
	}

	if (toDate) {
	filter.to_date = new Date(toDate).toISOString();
	}

	return filter;
	}

	// 获取用户筛选
	function getUserFilter() {
	const filter = {};

	const userId = document.getElementById("userId").value.trim();
	if (userId) filter.user_id = userId;

	const email = document.getElementById("email").value.trim();
	if (email) filter.email = email;

	const membership = document.getElementById("membershipType").value;
	if (membership) filter.membership_type = membership;

	return filter;
	}

	// 获取模型筛选
	function getModelFilter() {
	const filter = {};

	const model = document.getElementById("model").value.trim();
	if (model) filter.model = model;

	const includeModels = document
	.getElementById("includeModels")
	.value.trim();
	if (includeModels) {
	filter.include_models = includeModels
	.split(",")
	.map((m) => m.trim())
	.filter((m) => m);
	}

	const excludeModels = document
	.getElementById("excludeModels")
	.value.trim();
	if (excludeModels) {
	filter.exclude_models = excludeModels
	.split(",")
	.map((m) => m.trim())
	.filter((m) => m);
	}

	return filter;
	}

	// 获取性能筛选
	function getPerformanceFilter() {
	const filter = {};

	const minTime = parseFloat(
	document.getElementById("minTotalTime").value,
	);
	if (!isNaN(minTime)) filter.min_total_time = minTime;

	const maxTime = parseFloat(
	document.getElementById("maxTotalTime").value,
	);
	if (!isNaN(maxTime)) filter.max_total_time = maxTime;

	const minTokens = parseInt(document.getElementById("minTokens").value);
	if (!isNaN(minTokens)) filter.min_tokens = minTokens;

	const maxTokens = parseInt(document.getElementById("maxTokens").value);
	if (!isNaN(maxTokens)) filter.max_tokens = maxTokens;

	return filter;
	}

	// 获取其他筛选
	function getOtherFilters() {
	const filter = {};

	const status = document.getElementById("status").value;
	if (status) filter.status = status;

	const stream = document.getElementById("stream").value;
	if (stream) filter.stream = stream === "true";

	const hasError = document.getElementById("hasError").value;
	if (hasError) filter.has_error = hasError === "true";

	const hasChain = document.getElementById("hasChain").value;
	if (hasChain) filter.has_chain = hasChain === "true";

	const hasUsage = document.getElementById("hasUsage").value;
	if (hasUsage) filter.has_usage = hasUsage === "true";

	const error = document.getElementById("errorText").value.trim();
	if (error) filter.error = error;

	return filter;
	}

	// 应用筛选条件
	function applyFilters() {
	// 重置到第一页
	currentPageIndex = 0;

	// 更新每页显示数量
	const pageSizeSelect = document.getElementById("pageSize");
	if (pageSizeSelect) {
	pageSize = parseInt(pageSizeSelect.value);
	// 同步自定义输入框
	document.getElementById("customPageSize").value = pageSize;
	}

	// 获取筛选后的数据
	fetchLogs();
	}

	// 重置筛选条件
	function resetFilters() {
	// 重置所有输入框
	document.getElementById("fromDate").value = "";
	document.getElementById("toDate").value = "";
	document.getElementById("userId").value = "";
	document.getElementById("email").value = "";
	document.getElementById("membershipType").value = "";
	document.getElementById("model").value = "";
	document.getElementById("includeModels").value = "";
	document.getElementById("excludeModels").value = "";
	document.getElementById("minTotalTime").value = "";
	document.getElementById("maxTotalTime").value = "";
	document.getElementById("minTokens").value = "";
	document.getElementById("maxTokens").value = "";
	document.getElementById("status").value = "";
	document.getElementById("stream").value = "";
	document.getElementById("hasError").value = "";
	document.getElementById("hasChain").value = "";
	document.getElementById("hasUsage").value = "";
	document.getElementById("reverse").value = "false";
	document.getElementById("pageSize").value = "20";
	document.getElementById("errorText").value = "";

	// 重置页码
	currentPageIndex = 0;
	pageSize = 20;

	// 刷新数据
	fetchLogs();
	}

	async function fetchLogs() {
	// 构建查询参数
	const query = {
	// 分页参数
	limit: pageSize,
	offset: currentPageIndex * pageSize,
	reverse: document.getElementById("reverse").value === "true",

	// 时间范围
	...getTimeRangeFilter(),

	// 用户筛选
	...getUserFilter(),

	// 模型筛选
	...getModelFilter(),

	// 性能筛选
	...getPerformanceFilter(),

	// 其他筛选
	...getOtherFilters(),
	};

	// 发送请求到新的API端点
	const data = await makeAuthenticatedRequest("/logs/get", {
	body: JSON.stringify({ query }),
	});

	if (data) {
	updateTable(data);
	showGlobalMessage("日志获取成功");
	}
	}

	// 获取Token详细信息
	async function fetchTokenDetails(tokens) {
	const data = await makeAuthenticatedRequest("/logs/tokens/get", {
	body: JSON.stringify(tokens),
	});

	if (data) {
	return data.tokens;
	}

	return null;
	}

	// 批量加载所有Token信息到缓存
	async function loadAllTokenInfo(tokenKeys) {
	if (tokenKeys.length === 0) return;

	console.log(`正在加载 ${tokenKeys.length} 个token的详细信息...`);

	try {
	const detailsData = await fetchTokenDetails(tokenKeys);
	if (detailsData) {
	// 将所有token信息存入缓存
	Object.entries(detailsData).forEach(([key, info]) => {
	tokenInfoCache[key] = info;
	});

	allTokensLoaded = true;
	console.log(
	`成功加载 ${Object.keys(detailsData).length} 个token的详细信息`,
	);
	showGlobalMessage(
	`已缓存 ${Object.keys(detailsData).length} 个Token信息`,
	);
	}
	} catch (error) {
	console.error("加载Token信息失败:", error);
	}
	}

	// 导出日志数据
	async function exportLogs() {
	// 获取当前筛选条件下的所有数据
	const query = {
	// 不限制数量，导出所有数据
	limit: 10000,
	offset: 0,
	reverse: document.getElementById("reverse").value === "true",

	// 时间范围
	...getTimeRangeFilter(),

	// 用户筛选
	...getUserFilter(),

	// 模型筛选
	...getModelFilter(),

	// 性能筛选
	...getPerformanceFilter(),

	// 其他筛选
	...getOtherFilters(),
	};

	const data = await makeAuthenticatedRequest("/logs/get", {
	method: "POST",
	body: JSON.stringify({ query }),
	});

	if (data) {
	// 创建CSV格式的数据
	const csvContent = createCSVFromLogs(data.logs);

	// 下载CSV文件
	const blob = new Blob([csvContent], {
	type: "text/csv;charset=utf-8;",
	});
	const link = document.createElement("a");
	const url = URL.createObjectURL(blob);
	link.setAttribute("href", url);
	link.setAttribute("download", `logs_${new Date().toISOString()}.csv`);
	link.style.visibility = "hidden";
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);

	showGlobalMessage(`成功导出 ${data.logs.length} 条日志记录`);
	}
	}

	// 创建CSV内容
	function createCSVFromLogs(logs) {
	const headers = [
	"ID",
	"时间",
	"模型",
	"Token Key",
	"用户邮箱",
	"会员类型",
	"耗时(秒)",
	"输入Tokens",
	"输出Tokens",
	"流式",
	"状态",
	"错误信息",
	];

	const rows = logs.map((log) => {
	const tokenInfo = log.token_info \|\| {};
	const stripe = tokenInfo.stripe \|\| {};
	const usage = log.chain?.usage \|\| {};
	const user = tokenInfo.user \|\| {};

	return [
	log.id,
	new Date(log.timestamp).toLocaleString(),
	log.model,
	tokenInfo.key \|\| "-",
	user.email \|\| "-",
	stripe.membership_type \|\| "-",
	log.timing.total.toFixed(2),
	usage.input \|\| 0,
	usage.output \|\| 0,
	log.stream ? "是" : "否",
	log.status,
	typeof log.error === "string" ? log.error : log.error?.error \|\| "-",
	];
	});

	// 转换为CSV格式
	const csvRows = [headers, ...rows].map((row) =>
	row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","),
	);

	return csvRows.join("\n");
	}

	// 自动刷新控制
	document
	.getElementById("autoRefresh")
	.addEventListener("change", function (e) {
	if (e.target.checked) {
	refreshInterval = setInterval(fetchLogs, 60000);
	} else {
	clearInterval(refreshInterval);
	}
	});

	// 页面加载完成后自动获取日志
	document.addEventListener("DOMContentLoaded", () => {
	const authToken = getAuthToken();
	if (authToken) {
	document.getElementById("authToken").value = authToken;

	// 设置默认页大小
	pageSize = parseInt(
	document.getElementById("pageSize").value \|\| "20",
	);
	document.getElementById("customPageSize").value = pageSize;

	fetchLogs();
	}
	// 启动自动刷新
	refreshInterval = setInterval(fetchLogs, 60000);

	// 添加页码输入框回车键支持
	document
	.getElementById("pageNumberInput")
	.addEventListener("keyup", function (event) {
	if (event.key === "Enter") {
	jumpToPage();
	}
	});

	// 添加页面大小输入框回车键支持
	document
	.getElementById("customPageSize")
	.addEventListener("keyup", function (event) {
	if (event.key === "Enter") {
	changePageSize();
	}
	});
	});

	// 初始化 token 处理
	initializeTokenHandling("authToken");

	// 添加清理逻辑
	window.addEventListener("beforeunload", () => {
	if (refreshInterval) {
	clearInterval(refreshInterval);
	}
	});

	// 添加模态框关闭逻辑
	document.querySelectorAll(".modal .close").forEach((closeBtn) => {
	closeBtn.onclick = function () {
	this.closest(".modal").style.display = "none";
	};
	});

	window.onclick = function (event) {
	if (event.target.classList.contains("modal")) {
	event.target.style.display = "none";
	}
	};

	/**
	* 解析对话内容
	* @param {string} promptStr - 原始prompt字符串
	* @returns {Array<{role: string, content: string}>} 解析后的对话数组
	*/
	function parsePrompt(promptStr) {
	if (!promptStr) return [];

	// 尝试解析JSON格式的prompt
	try {
	const parsed = JSON.parse(promptStr);

	// 如果是已解析的格式
	if (Array.isArray(parsed)) {
	return parsed.map((msg) => ({
	role: msg.role,
	content: msg.content,
	}));
	}
	} catch (e) {
	// 如果解析JSON失败，说明是原始字符串格式，使用原来的解析逻辑
	}

	const messages = [];
	const lines = promptStr.split("\n");
	let currentRole = "";
	let currentContent = "";

	const roleMap = {
	BEGIN_SYSTEM: "system",
	BEGIN_USER: "user",
	BEGIN_ASSISTANT: "assistant",
	};

	for (let i = 0; i < lines.length; i++) {
	const line = lines[i];

	// 检查是否是角色标记行
	let foundRole = false;
	for (const [marker, role] of Object.entries(roleMap)) {
	if (line.includes(marker)) {
	// 保存之前的消息（如果有）
	if (currentRole && currentContent.trim()) {
	messages.push({
	role: currentRole,
	content: currentContent.trim(),
	});
	}
	// 设置新角色
	currentRole = role;
	currentContent = "";
	foundRole = true;
	break;
	}
	}

	// 如果不是角色标记行且不是END标记行，则添加到当前内容
	if (!foundRole && !line.includes("END_")) {
	currentContent += line + "\n";
	}
	}

	// 添加最后一条消息
	if (currentRole && currentContent.trim()) {
	messages.push({
	role: currentRole,
	content: currentContent.trim(),
	});
	}

	return messages;
	}

	function escapeHtml(content) {
	// 先转义HTML特殊字符
	const escaped = content
	.replace(/&/g, "&")
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/"/g, """)
	.replace(/'/g, "'");
	return escaped;
	}

	function escapeHtmlAndControlChars(content) {
	// 先转义HTML特殊字符
	let escaped = content
	.replace(/&/g, "&")
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/"/g, """)
	.replace(/'/g, "'");

	// 然后转义控制字符
	escaped = escaped
	.replace(/\\/g, "\\\\")
	.replace(/\n/g, "\\n")
	.replace(/\t/g, "\\t")
	.replace(/\r/g, "\\r");

	return escaped;
	}

	/**
	* 格式化对话内容为HTML表格
	* @param {Array<{role: string, content: string}>} messages - 对话消息数组
	* @returns {string} HTML表格字符串
	*/
	function formatPromptToTable(messages) {
	if (!messages \|\| messages.length === 0) {
	return "<p>无对话内容</p>";
	}

	const roleLabels = {
	system: "系统",
	user: "用户",
	assistant: "助手",
	};

	return `<table class="message-table"><thead><tr><th>角色</th><th>内容</th></tr></thead><tbody>${messages
	.map(
	(msg) =>
	`<tr><td>${roleLabels[msg.role] \|\| msg.role}</td><td>${escapeHtml(
	msg.content,
	).replace(/\n/g, "<br>")}</td></tr>`,
	)
	.join("")}</tbody></table>`;
	}

	/**
	* 显示对话详情弹窗
	* @param {string} promptStr - 对话提示字符串
	* @param {string} thinkStr - 思考过程字符串
	* @param {Array} delaysTuple - 延迟数据数组
	*/
	function showConversationModal(promptStr, thinkStr, delaysTuple) {
	try {
	const modal = document.getElementById("conversationModal");
	const dialogContent = document.getElementById("dialogContent");
	const thinkContent = document.getElementById("thinkContent");
	const delaysContent = document.getElementById("delaysContent");
	const tabPrompt = document.getElementById("tab-prompt");
	const tabThink = document.getElementById("tab-think");
	const tabDelays = document.getElementById("tab-delays");
	const delaysTableBody = document.querySelector("#delaysTable tbody");
	const delayChartContainer = document.querySelector(
	".delay-chart-container",
	);

	if (
	!modal \|\|
	!dialogContent \|\|
	!thinkContent \|\|
	!delaysContent \|\|
	!tabPrompt \|\|
	!tabThink \|\|
	!tabDelays \|\|
	!delaysTableBody \|\|
	!delayChartContainer
	) {
	console.error("Modal elements not found");
	return;
	}

	// 处理 Prompt
	try {
	const messages = parsePrompt(promptStr);
	dialogContent.innerHTML = formatPromptToTable(messages);
	} catch (e) {
	console.error("解析 Prompt 数据失败:", e);
	dialogContent.innerHTML = "<p>无法加载对话内容。</p>";
	}

	// 处理思考过程
	if (thinkStr && typeof thinkStr === "string") {
	document.getElementById("thinkText").textContent = thinkStr;
	tabThink.style.display = "";
	} else {
	document.getElementById("thinkText").textContent = "无思考过程";
	tabThink.style.display = "none";
	}

	// 处理 Delays
	delaysTableBody.innerHTML = "";
	delayChartContainer.innerHTML = '<canvas id="delayChart"></canvas>';

	let fullText = "";
	let delayPoints = [];
	let chartDataPoints = [{ time: 0, chars: 0, text: "" }];

	if (delaysTuple) {
	if (
	Array.isArray(delaysTuple) &&
	delaysTuple.length === 2 &&
	typeof delaysTuple[0] === "string" &&
	Array.isArray(delaysTuple[1])
	) {
	fullText = delaysTuple[0];
	delayPoints = delaysTuple[1];
	} else {
	console.warn("Delays data format is incorrect:", delaysTuple);
	}
	}

	if (delayPoints.length > 0) {
	const textChars = Array.from(fullText);
	let currentIndex = 0;
	let totalChars = 0;
	let totalTime = 0;

	delayPoints.forEach(([length, deltaTime], index) => {
	if (
	typeof length !== "number" \|\|
	typeof deltaTime !== "number" \|\|
	length < 0 \|\|
	deltaTime < 0
	) {
	console.warn(
	`Skipping invalid delay point at index ${index}:`,
	[length, deltaTime],
	);
	return;
	}

	const chunkChars = textChars.slice(currentIndex, currentIndex + length);
	const chunkText = chunkChars.join('');
	currentIndex += length;
	totalChars += length;
	totalTime += deltaTime;

	const rate = deltaTime > 0 ? length / deltaTime : Infinity;
	const avgRate = totalTime > 0 ? totalChars / totalTime : Infinity;

	const row = document.createElement("tr");
	row.innerHTML = `
	<td>${index + 1}</td>
	<td>${escapeHtmlAndControlChars(chunkText)}</td>
	<td>${deltaTime.toFixed(3)}</td>
	<td>${isFinite(rate) ? rate.toFixed(1) : "N/A"} (平均: ${
	isFinite(avgRate) ? avgRate.toFixed(1) : "N/A"
	})</td>
	`;
	delaysTableBody.appendChild(row);

	chartDataPoints.push({
	time: totalTime,
	chars: totalChars,
	text: chunkText,
	});
	});

	initDelayChart(chartDataPoints);
	tabDelays.style.display = "";
	} else {
	delaysTableBody.innerHTML =
	'<tr><td colspan="4">无延迟数据</td></tr>';
	delayChartContainer.innerHTML =
	'<div style="text-align: center; padding: 20px;">无延迟数据可供分析</div>';
	tabDelays.style.display = "none";
	}

	// 设置标签页
	tabPrompt.onclick = () => setActiveTab("prompt");
	tabThink.onclick = () => setActiveTab("think");
	tabDelays.onclick = () => setActiveTab("delays");

	setActiveTab("prompt");
	modal.style.display = "block";
	} catch (e) {
	console.error("显示对话详情失败:", e);
	}
	}

	/**
	* 设置当前活动标签页
	* @param {string} tabName - 标签页名称 ('prompt' 或 'delays')
	*/
	function setActiveTab(tabName) {
	const dialogContent = document.getElementById("dialogContent");
	const thinkContent = document.getElementById("thinkContent");
	const delaysContent = document.getElementById("delaysContent");
	const tabPrompt = document.getElementById("tab-prompt");
	const tabThink = document.getElementById("tab-think");
	const tabDelays = document.getElementById("tab-delays");

	if (
	!dialogContent \|\|
	!thinkContent \|\|
	!delaysContent \|\|
	!tabPrompt \|\|
	!tabThink \|\|
	!tabDelays
	) {
	console.error("Tab elements not found");
	return;
	}

	if (tabName === "prompt") {
	dialogContent.classList.add("active");
	thinkContent.classList.remove("active");
	delaysContent.classList.remove("active");
	tabPrompt.classList.add("active");
	tabThink.classList.remove("active");
	tabDelays.classList.remove("active");
	} else if (tabName === "think") {
	dialogContent.classList.remove("active");
	thinkContent.classList.add("active");
	delaysContent.classList.remove("active");
	tabPrompt.classList.remove("active");
	tabThink.classList.add("active");
	tabDelays.classList.remove("active");
	} else {
	dialogContent.classList.remove("active");
	thinkContent.classList.remove("active");
	delaysContent.classList.add("active");
	tabPrompt.classList.remove("active");
	tabThink.classList.remove("active");
	tabDelays.classList.add("active");
	}
	}

	/**
	* 初始化延迟图表
	* @param {Array<{time: number, chars: number, text: string}>} chartDataPoints - 包含累计时间和字符数以及块文本的数据点数组
	*/
	function initDelayChart(chartDataPoints) {
	if (!chartDataPoints \|\| chartDataPoints.length <= 1) {
	const container = document.querySelector(".delay-chart-container");
	if (container) {
	container.innerHTML =
	'<div style="text-align: center; padding: 20px;">延迟数据不足，无法绘制图表</div>';
	}
	return;
	}

	const ctx = document.getElementById("delayChart");
	if (!ctx) {
	console.error("找不到图表canvas元素");
	return;
	}

	const existingChart = Chart.getChart(ctx);
	if (existingChart) {
	existingChart.destroy();
	}

	const maxPoints = 100;
	let sampledPoints = chartDataPoints;

	if (chartDataPoints.length > maxPoints) {
	sampledPoints = [];
	const interval = (chartDataPoints.length - 2) / (maxPoints - 2);

	sampledPoints.push(chartDataPoints[0]);

	for (let i = 1; i < maxPoints - 1; i++) {
	const rawIndex = Math.round(i * interval);
	const actualIndex = Math.min(
	rawIndex + 1,
	chartDataPoints.length - 2,
	);
	sampledPoints.push(chartDataPoints[actualIndex]);
	}

	sampledPoints.push(chartDataPoints[chartDataPoints.length - 1]);
	}

	new Chart(ctx, {
	type: "line",
	data: {
	datasets: [
	{
	label: "累计输出字符数",
	data: sampledPoints.map((point) => ({
	x: point.time,
	y: point.chars,
	})),
	borderColor: "rgb(75,192,192)",
	backgroundColor: "rgba(75,192,192,0.2)",
	tension: 0.1,
	fill: true,
	pointRadius: 3,
	pointHoverRadius: 5,
	},
	],
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	title: {
	display: true,
	text: "字符输出进度",
	},
	tooltip: {
	callbacks: {
	title: function (context) {
	const pointIndex = context[0].dataIndex;
	if (pointIndex < sampledPoints.length) {
	return `用时: ${sampledPoints[pointIndex].time.toFixed(
	1,
	)}秒`;
	}
	return "";
	},
	label: function (context) {
	const pointIndex = context.dataIndex;
	if (pointIndex < sampledPoints.length) {
	const point = sampledPoints[pointIndex];
	const prevPoint =
	pointIndex > 0
	? sampledPoints[pointIndex - 1]
	: { time: 0, chars: 0, text: "" };

	const deltaTime = point.time - prevPoint.time;
	const deltaChars = point.chars - prevPoint.chars;
	const currentRate =
	deltaTime > 0
	? (deltaChars / deltaTime).toFixed(1)
	: "N/A";
	const avgRate =
	point.time > 0
	? (point.chars / point.time).toFixed(1)
	: "N/A";

	const chunkText = point.text \|\| "";

	return [
	`累计字符: ${point.chars}`,
	`平均速率: ${avgRate} 字符/秒`,
	`当前块速率: ${currentRate} 字符/秒`,
	`当前块文本: ${escapeHtmlAndControlChars(
	chunkText.length > 50
	? chunkText.substring(0, 50) + "..."
	: chunkText,
	)}`,
	];
	}
	return "";
	},
	},
	},
	},
	scales: {
	y: {
	beginAtZero: true,
	title: {
	display: true,
	text: "累计字符数",
	},
	},
	x: {
	type: "linear",
	beginAtZero: true,
	title: {
	display: true,
	text: "累计用时（秒）",
	},
	ticks: {
	callback: function (value) {
	return value.toFixed(1) + "s";
	},
	},
	},
	},
	},
	});
	}

	/**
	* 格式化使用量信息
	* @param {Object} usage - 使用量对象 { input: number, output: number }
	* @returns {string} 格式化后的字符串
	*/
	function formatUsage(usage) {
	if (!usage) return "-";
	return `${usage.input} / ${usage.output}`;
	}
	</script>
	</body>
	</html>