Spaces:

Maynor996
/

test

No application file

App Files Files Community

test / index.html

Maynor996

Upload 7 files

75c689e verified 4 months ago

raw

history blame contribute delete

93.5 kB

	<!DOCTYPE html>
	<html lang="zh-CN" data-theme="light">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Business Gemini Pool 管理控制台</title>
	<style>
	/* [OPTIMIZATION] 1. 全局样式优化与变量调整 */
	:root {
	/* 核心颜色保持不变 */
	--primary: #4285f4;
	--primary-hover: #3367d6;
	--primary-light: rgba(66, 133, 244, 0.1);
	--success: #34a853;
	--success-light: rgba(52, 168, 83, 0.1);
	--danger: #ea4335;
	--danger-light: rgba(234, 67, 53, 0.1);
	--warning: #fbbc04;
	--warning-light: rgba(251, 188, 4, 0.1);

	/* [NEW] 引入更精细的变量控制 */
	--radius-sm: 6px;
	--radius-md: 12px; /* 增大圆角，更柔和 */
	--radius-lg: 16px;
	--transition-ease: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* [NEW] 现代化的缓动函数 */

	--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* [NEW] 引入更适合UI的字体 */
	}

	/* [OPTIMIZATION] 2. Light & Dark Theme 优化，增强对比度和质感 */
	[data-theme="light"] {
	--bg-color: #f7f8fc; /* 更柔和的背景色 */
	--card-bg: #ffffff;
	--text-main: #1f2328;
	--text-muted: #656d76;
	--border: #e4e7eb; /* 更浅的边框色 */
	--hover-bg: #f2f3f5;
	--input-bg: #ffffff;
	--shadow-sm: 0 1px 2px 0 rgba(27, 31, 35, 0.04);
	--shadow-md: 0 4px 8px 0 rgba(27, 31, 35, 0.06), 0 1px 2px 0 rgba(27, 31, 35, 0.05); /* 更柔和的阴影 */
	--shadow-lg: 0 10px 20px 0 rgba(27, 31, 35, 0.07), 0 3px 6px 0 rgba(27, 31, 35, 0.05);
	}

	[data-theme="dark"] {
	--bg-color: #1a1b1e;
	--card-bg: #242528;
	--text-main: #e8eaed;
	--text-muted: #9aa0a6;
	--border: #3a3c40;
	--hover-bg: #303134;
	--input-bg: #2f3033;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.15);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: var(--font-main);
	background-color: var(--bg-color);
	color: var(--text-main);
	min-height: 100vh;
	transition: background-color 0.3s, color 0.3s;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px; /* 增加页面内边距 */
	}

	/* [OPTIMIZATION] 3. Header 重新设计，更简洁大气 */
	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	/* 移除背景和阴影，使其融入页面 */
	}

	.header-left { display: flex; align-items: center; gap: 16px; }

	.logo {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, #4285f4, #34a853, #fbbc04, #ea4335);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 22px;
	transform: rotate(-10deg); /* [NEW] 增加一点趣味性 */
	transition: var(--transition-ease);
	}
	.logo:hover { transform: rotate(0deg) scale(1.05); }

	.header h1 {
	font-size: 26px; /* 增大标题字号 */
	font-weight: 600;
	color: var(--text-main);
	}

	.header h1 span {
	color: var(--text-muted);
	font-weight: 400;
	font-size: 16px;
	margin-left: 10px;
	}

	.header-right { display: flex; align-items: center; gap: 16px; }

	.status-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--success-light);
	border: 1px solid rgba(52, 168, 83, 0.2);
	border-radius: 50px; /* 改为胶囊形状 */
	font-size: 14px;
	color: var(--success);
	font-weight: 500;
	}
	.status-indicator::before {
	content: ''; width: 8px; height: 8px;
	background: var(--success); border-radius: 50%;
	animation: pulse 2s infinite;
	}
	@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.9); } }

	.theme-toggle {
	width: 44px; height: 44px; border: 1px solid var(--border);
	background: var(--card-bg); border-radius: var(--radius-md);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	font-size: 20px; transition: var(--transition-ease);
	}
	.theme-toggle:hover { background: var(--hover-bg); border-color: var(--primary); transform: translateY(-2px); }

	/* [OPTIMIZATION] 4. Tabs 重新设计，更现代、更 subtle */
	.tabs {
	display: flex;
	gap: 16px;
	border-bottom: 1px solid var(--border); /* 底部线条导航 */
	margin-bottom: 32px;
	}
	.tab {
	padding: 14px 4px; /* 减少水平padding，通过gap控制间距 */
	border: none; border-bottom: 2px solid transparent;
	background: transparent; color: var(--text-muted);
	font-size: 15px; font-weight: 500;
	cursor: pointer; border-radius: 0;
	transition: var(--transition-ease);
	display: flex; align-items: center; justify-content: center;
	gap: 8px;
	}
	.tab:hover { color: var(--primary); }
	.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
	.tab-icon { font-size: 20px; }


	/* Status Badge */
	.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	}

	.badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	}

	.badge-success {
	background: var(--success-light);
	color: var(--success);
	}

	.badge-success::before {
	background: var(--success);
	}

	.badge-danger {
	background: var(--danger-light);
	color: var(--danger);
	}

	.badge-danger::before {
	background: var(--danger);
	}

	.cooldown-hint {
	display: block;
	color: var(--text-muted);
	font-size: 12px;
	margin-top: 4px;
	}

	.log-level-control {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 6px 10px;
	}
	.log-level-control label {
	font-size: 12px;
	color: var(--text-muted);
	}
	.log-level-select {
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text-main);
	border-radius: var(--radius-sm);
	padding: 6px 8px;
	}

	.token-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	}
	.token-input {
	flex: 1;
	min-width: 240px;
	}

	.badge-warning {
	background: var(--warning-light);
	color: #b06000;
	}

	.badge-warning::before {
	background: var(--warning);
	}

	/* [OPTIMIZATION] 5. 动画效果增强 */
	.tab-content { display: none; }
	.tab-content.active { display: block; animation: contentFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
	@keyframes contentFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

	/* [OPTIMIZATION] 6. Card 样式优化 */
	.card {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border);
	margin-bottom: 32px;
	overflow: hidden;
	transition: var(--transition-ease);
	}
	.card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-lg); }

	.card-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 24px; border-bottom: 1px solid var(--border);
	}
	.card-title {
	font-size: 18px; font-weight: 600; color: var(--text-main);
	display: flex; align-items: center; gap: 12px;
	}
	.card-title-icon { font-size: 22px; color: var(--text-muted); }
	.card-body { padding: 24px; }

	/* [OPTIMIZATION] 7. Button 样式优化 */
	.btn {
	padding: 10px 20px; border: none; border-radius: var(--radius-md);
	cursor: pointer; font-size: 14px; font-weight: 500;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: var(--transition-ease); text-decoration: none;
	}
	.btn:disabled { opacity: 0.5; cursor: not-allowed; }
	.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
	.btn-primary { background: var(--primary); color: white; }
	.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

	.btn-outline {
	background: transparent; color: var(--text-muted);
	border: 1px solid var(--border);
	}
	.btn-outline:hover:not(:disabled) { border-color: var(--text-main); color: var(--text-main); }
	/* 其他按钮颜色保持 */
	.btn-success { background: var(--success-light); color: var(--success); border: 1px solid rgba(52, 168, 83, 0.2); }
	.btn-success:hover:not(:disabled) { background: var(--success); color: white; border-color: var(--success); }
	.btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(234, 67, 53, 0.2); }
	.btn-danger:hover:not(:disabled) { background: var(--danger); color: white; border-color: var(--danger); }

	.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-sm); }
	.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
	.btn-warning { background: #fff3cd; color: #856404; border: 1px solid rgba(133, 100, 4, 0.2); }
	.btn-warning:hover:not(:disabled) { background: #ffc107; color: #212529; border-color: #ffc107; }

	/* [OPTIMIZATION] 8. Table 样式优化，增强可读性 */
	.table-container { overflow-x: auto; }
	table { width: 100%; border-collapse: collapse; }
	th {
	text-align: left; padding: 16px 24px; font-size: 13px;
	font-weight: 500; color: var(--text-muted); text-transform: uppercase;
	letter-spacing: 0.5px; background: transparent; /* 移除背景色 */
	border-bottom: 2px solid var(--border); /* 加粗底部边框 */
	}
	td {
	padding: 18px 24px; border-bottom: 1px solid var(--border);
	font-size: 14px; color: var(--text-main);
	transition: background-color 0.2s;
	}
	tr:last-child td { border-bottom: none; }
	tr:hover td { background: var(--hover-bg); }

	/* [OPTIMIZATION] 9. Form 样式优化 */
	.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	}
	.form-group label,
	.form-label {
	display: block;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-main);
	letter-spacing: 0.2px;
	}
	.form-group input, .form-group textarea, .form-group select,
	.form-input,
	.form-textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text-main);
	font-size: 14px;
	transition: var(--transition-ease);
	box-sizing: border-box;
	line-height: 1.5;
	}
	.form-textarea {
	min-height: 90px;
	resize: vertical;
	font-family: inherit;
	}
	.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light), 0 1px 2px rgba(0,0,0,0.05) inset;
	}
	.form-group input:disabled {
	background: var(--hover-bg);
	color: var(--text-muted);
	cursor: not-allowed;
	}
	.form-group small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-muted);
	}
	.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	}

	/* Settings Section 样式 */
	.settings-section {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	margin-bottom: 28px;
	}
	.settings-section:last-child {
	margin-bottom: 0;
	}
	.settings-section h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-main);
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	}
	.settings-section .form-group {
	margin-bottom: 24px;
	}
	.settings-section .form-group:last-of-type {
	margin-bottom: 20px;
	}

	/* [OPTIMIZATION] 10. Modal 动画与样式优化 */
	.modal {
	display: flex; /* 改为flex，便于控制 */
	align-items: center; justify-content: center;
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px);
	z-index: 1000; opacity: 0; visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	}
	.modal.show { opacity: 1; visibility: visible; }
	.modal-content {
	background: var(--card-bg); border-radius: var(--radius-lg);
	width: 600px; max-width: 90vw; max-height: 90vh;
	overflow-y: auto; box-shadow: var(--shadow-lg);
	transform: translateY(20px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.modal.show .modal-content { transform: translateY(0) scale(1); }
	.modal-header { padding: 24px; border-bottom: 1px solid var(--border); }
	.modal-header h3 { font-size: 20px; font-weight: 600; display: inline-block; }
	.modal-close {
	width: 36px; height: 36px; border: none; background: transparent;
	color: var(--text-muted); cursor: pointer; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; transition: var(--transition-ease);
	float: right;
	}
	.modal-close:hover { background: var(--hover-bg); color: var(--text-main); transform: rotate(90deg); }
	.modal-body { padding: 24px; }
	.modal-footer {
	display: flex; justify-content: flex-end; gap: 12px;
	padding: 20px 24px; border-top: 1px solid var(--border);
	background: var(--hover-bg);
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
	}


	/* [OPTIMIZATION] 11. Stats Card 优化 */
	.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
	}
	.stat-card {
	background: var(--card-bg); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: 24px;
	display: flex; flex-direction: column; /* 垂直布局 */
	align-items: flex-start; gap: 16px;
	transition: var(--transition-ease);
	/* [NEW] 入场动画 */
	opacity: 0;
	transform: translateY(20px);
	animation: fadeIn-up 0.5s ease-out forwards;
	}
	/* [NEW] Staggered Animation for Stats Cards */
	.stat-card:nth-child(1) { animation-delay: 0.1s; }
	.stat-card:nth-child(2) { animation-delay: 0.2s; }
	.stat-card:nth-child(3) { animation-delay: 0.3s; }
	.stat-card:nth-child(4) { animation-delay: 0.4s; }

	@keyframes fadeIn-up {
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary); }

	.stat-info-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
	.stat-info-top p { font-size: 14px; font-weight: 500; color: var(--text-muted); }

	.stat-icon {
	width: 40px; height: 40px; border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center; font-size: 20px;
	}

	.stat-info-bottom h3 { font-size: 32px; font-weight: 600; color: var(--text-main); }
	.stat-icon.blue { background: var(--primary-light); color: var(--primary); }
	.stat-icon.green { background: var(--success-light); color: var(--success); }
	.stat-icon.red { background: var(--danger-light); color: var(--danger); }
	.stat-icon.yellow { background: var(--warning-light); color: #b06000; }

	/* 其他样式保持或微调 */
	.badge {
	padding: 5px 12px; border-radius: 50px;
	font-size: 12px; font-weight: 500;
	}
	.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
	.empty-state-icon { font-size: 56px; margin-bottom: 20px; opacity: 0.4; }

	.toast {
	position: fixed; bottom: 32px; left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: var(--card-bg); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: 16px 24px;
	box-shadow: var(--shadow-lg); min-width: 320px;
	z-index: 2000; opacity: 0; visibility: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex; align-items: center; gap: 12px;
	}
	.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

	/* [NEW] SVG Icon Styles */
	.icon {
	width: 1em;
	height: 1em;
	stroke-width: 2;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

	/* Responsive */
	@media (max-width: 768px) {
	.container { padding: 24px 16px; }
	.header { flex-direction: column; gap: 24px; text-align: center; }
	.tabs {
	gap: 8px;
	/* [NEW] 允许在移动端横向滚动 */
	overflow-x: auto;
	white-space: nowrap;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	}
	.tabs::-webkit-scrollbar { display: none; } /* Chrome, Safari, and Opera */
	.tab { flex-shrink: 0; }
	.form-row { grid-template-columns: 1fr; }
	.stats-grid { gap: 16px; }
	}
	</style>
	</head>
	<body>
	<!-- [NEW] SVG Icon Definitions -->
	<svg width="0" height="0" style="display: none;">
	<symbol id="icon-users" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></symbol>
	<symbol id="icon-robot" viewBox="0 0 24 24"><path d="M12 8V4H8"></path><rect x="4" y="12" width="16" height="8" rx="2"></rect><path d="M2 12h20"></path><path d="M12 12V8a4 4 0 0 0-4-4"></path></symbol>
	<symbol id="icon-settings" viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 0 2l-.15.08a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l-.22-.38a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1 0-2l.15-.08a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></symbol>
	<symbol id="icon-server" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></symbol>
	<symbol id="icon-list" viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></symbol>
	<symbol id="icon-plus" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></symbol>
	<symbol id="icon-check" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></symbol>
	<symbol id="icon-x" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol>
	<symbol id="icon-refresh" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></symbol>
	<symbol id="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></symbol>
	<symbol id="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></symbol>
	<symbol id="icon-message" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></symbol>
	<symbol id="icon-play" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></symbol>
	<symbol id="icon-pause" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></symbol>
	<symbol id="icon-zap" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></symbol>
	<symbol id="icon-key" viewBox="0 0 24 24"><path d="M21 2l-2 2"></path><path d="M9 6l-2 2"></path><circle cx="7.5" cy="15.5" r="5.5"></circle><path d="M21 2l-9.6 9.6"></path><path d="M15.5 7.5l3 3"></path><path d="M16 13l-3-3"></path></symbol>
	</svg>

	<div class="container">
	<!-- Header -->
	<header class="header">
	<div class="header-left">
	<div class="logo">G</div>
	<h1>Business Gemini Pool <span>管理控制台</span></h1>
	</div>
	<div class="header-right">
	<div class="status-indicator" id="serviceStatus">服务运行中</div>
	<div class="log-level-control">
	<label for="logLevelSelect">日志</label>
	<select id="logLevelSelect" class="log-level-select" onchange="updateLogLevel(this.value)">
	<option value="DEBUG">DEBUG</option>
	<option value="INFO" selected>INFO</option>
	<option value="ERROR">ERROR</option>
	</select>
	</div>
	<button class="btn btn-outline" id="loginButton" style="padding: 8px 12px;" onclick="showLoginModal()">登录</button>
	<a href="chat_history.html" class="btn btn-primary" style="padding: 8px 16px; font-size: 14px; text-decoration: none; display: flex; align-items: center; gap: 6px;" title="进入在线对话">
	<svg class="icon" style="width: 16px; height: 16px;"><use xlink:href="#icon-message"></use></svg>
	在线对话
	</a>
	<button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
	<span id="themeIconContainer">
	<svg class="icon"><use xlink:href="#icon-sun"></use></svg>
	</span>
	</button>
	</div>
	</header>

	<!-- Tabs -->
	<div class="tabs">
	<button class="tab active" onclick="switchTab('accounts')">
	<svg class="icon tab-icon"><use xlink:href="#icon-users"></use></svg>
	账号管理
	</button>
	<button class="tab" onclick="switchTab('models')">
	<svg class="icon tab-icon"><use xlink:href="#icon-robot"></use></svg>
	模型管理
	</button>
	<button class="tab" onclick="switchTab('settings')">
	<svg class="icon tab-icon"><use xlink:href="#icon-settings"></use></svg>
	系统设置
	</button>
	<button class="tab" onclick="switchTab('tokens')">
	<svg class="icon tab-icon"><use xlink:href="#icon-key"></use></svg>
	Token 管理
	</button>
	</div>

	<!-- 账号管理 -->
	<div id="accounts" class="tab-content active">
	<!-- Stats -->
	<div class="stats-grid">
	<div class="stat-card">
	<div class="stat-info-top">
	<p>总账号数</p>
	<div class="stat-icon blue"><svg class="icon"><use xlink:href="#icon-users"></use></svg></div>
	</div>
	<div class="stat-info-bottom">
	<h3 id="totalAccounts">0</h3>
	</div>
	</div>
	<div class="stat-card">
	<div class="stat-info-top">
	<p>可用账号</p>
	<div class="stat-icon green"><svg class="icon"><use xlink:href="#icon-check"></use></svg></div>
	</div>
	<div class="stat-info-bottom">
	<h3 id="availableAccounts">0</h3>
	</div>
	</div>
	<div class="stat-card">
	<div class="stat-info-top">
	<p>不可用账号</p>
	<div class="stat-icon red"><svg class="icon"><use xlink:href="#icon-x"></use></svg></div>
	</div>
	<div class="stat-info-bottom">
	<h3 id="unavailableAccounts">0</h3>
	</div>
	</div>
	<div class="stat-card">
	<div class="stat-info-top">
	<p>当前轮训索引</p>
	<div class="stat-icon yellow"><svg class="icon"><use xlink:href="#icon-refresh"></use></svg></div>
	</div>
	<div class="stat-info-bottom">
	<h3 id="currentIndex">0</h3>
	</div>
	</div>
	</div>

	<div class="card">
	<div class="card-header">
	<div class="card-title">
	<svg class="icon card-title-icon"><use xlink:href="#icon-list"></use></svg>
	账号列表
	</div>
	<button class="btn btn-primary" onclick="showAddAccountModal()">
	<svg class="icon"><use xlink:href="#icon-plus"></use></svg>
	添加账号
	</button>
	</div>
	<div class="table-container">
	<table id="accountsTable">
	<thead>
	<tr>
	<th>序号</th>
	<th>Team ID</th>
	<th>csesidx</th>
	<th>User Agent</th>
	<th>状态</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody id="accountsTableBody"></tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- 模型管理 (HTML结构类似，图标已替换) -->
	<div id="models" class="tab-content">
	<div class="card">
	<div class="card-header">
	<div class="card-title">
	<svg class="icon card-title-icon"><use xlink:href="#icon-robot"></use></svg>
	模型列表
	</div>
	<button class="btn btn-primary" onclick="showAddModelModal()">
	<svg class="icon"><use xlink:href="#icon-plus"></use></svg>
	添加模型
	</button>
	</div>
	<div class="table-container">
	<table id="modelsTable">
	<thead>
	<tr>
	<th>模型ID</th>
	<th>名称</th>
	<th>描述</th>
	<th>上下文长度</th>
	<th>最大Token</th>
	<th>状态</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody id="modelsTableBody"></tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- 系统设置 (HTML结构类似，图标已替换) -->
	<div id="settings" class="tab-content">
	<div class="card">
	<div class="card-header">
	<div class="card-title">
	<svg class="icon card-title-icon"><use xlink:href="#icon-settings"></use></svg>
	系统配置
	</div>
	</div>
	<div class="card-body">
	<form id="settingsForm">
	<div class="settings-section">
	<h3>代理设置</h3>
	<div class="form-group">
	<label class="form-label" for="proxyUrl">代理地址</label>
	<input type="text" class="form-input" id="proxyUrl" placeholder="http://127.0.0.1:7890">
	<small>用于访问Google API的代理服务器地址</small>
	<div class="proxy-status" id="proxyStatus"></div>
	</div>
	<div class="form-group">
	<label class="form-label" for="imageOutputMode">图片输出模式</label>
	<select class="form-input" id="imageOutputMode">
	<option value="url">图片URL（默认）</option>
	<option value="base64">Base64 Data URL</option>
	</select>
	<small>控制聊天接口返回的图片是以URL形式还是以 data:image/...;base64,... 形式输出</small>
	</div>
	<div style="display: flex; gap: 12px;">
	<button type="button" class="btn btn-outline" onclick="testProxy()">
	测试代理
	</button>
	<button type="button" class="btn btn-primary" onclick="saveSettings()">
	保存设置
	</button>
	</div>
	</div>

	<div class="settings-section">
	<h3><svg class="icon" style="width: 1em; height: 1em; vertical-align: -2px; margin-right: 8px;"><use xlink:href="#icon-server"></use></svg>服务信息</h3>
	<div class="form-row">
	<div class="form-group">
	<label class="form-label">服务端口</label>
	<input type="text" class="form-input" value="8000" disabled>
	</div>
	<div class="form-group">
	<label class="form-label">API地址</label>
	<input type="text" class="form-input" value="http://localhost:8000/v1" disabled>
	</div>
	</div>
	</div>

	<div class="settings-section">
	<h3>配置文件</h3>
	<div class="form-group">
	<label class="form-label" for="configJson">当前配置 (JSON)</label>
	<textarea class="form-textarea" id="configJson" rows="15" readonly></textarea>
	<small>配置文件路径: business_gemini_session.json</small>
	</div>
	<div style="display: flex; gap: 12px; flex-wrap: wrap;">
	<button type="button" class="btn btn-outline" onclick="refreshConfig()">
	刷新配置
	</button>
	<button type="button" class="btn btn-outline" onclick="downloadConfig()">
	下载配置
	</button>
	<button type="button" class="btn btn-primary" onclick="uploadConfig()">
	导入配置
	</button>
	<input type="file" id="configFileInput" accept=".json" style="display: none;" onchange="handleConfigUpload(event)">
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>

	<!-- Token 管理 -->
	<div id="tokens" class="tab-content">
	<div class="card">
	<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
	<div class="card-title" style="display:flex; align-items:center; gap:8px;">
	<svg class="icon card-title-icon"><use xlink:href="#icon-key"></use></svg>
	Token 管理
	</div>
	<div class="token-actions">
	<input id="manualToken" class="form-input token-input" placeholder="手动输入 Token（留空自动生成）">
	<button class="btn btn-outline" type="button" onclick="generateToken()">生成 Token</button>
	<button class="btn btn-primary" type="button" onclick="addToken()">添加 Token</button>
	</div>
	</div>
	<table class="table">
	<thead>
	<tr>
	<th style="width:70%;">Token</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody id="tokensTableBody">
	<tr><td colspan="2" class="empty-state">加载中...</td></tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- 模态框 (已优化关闭按钮) -->
	<div class="modal" id="addAccountModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>添加账号</h3>
	<button class="modal-close" onclick="closeModal('addAccountModal')" title="关闭">×</button>
	</div>
	<!-- Modal Body and Footer ... (No functional changes needed) -->
	<div class="modal-body">
	<div class="form-group">
	<label class="form-label" for="newAccountJson">粘贴账号JSON（可直接复制工具输出）</label>
	<textarea class="form-textarea" id="newAccountJson" placeholder='{"team_id":"...","secure_c_ses":"...","host_c_oses":"...","csesidx":"...","user_agent":"..."}' rows="4"></textarea>
	<div style="display:flex; gap:8px; margin-top:8px;">
	<button class="btn btn-outline btn-sm" type="button" onclick="parseAccountJson()">解析填充</button>
	<button class="btn btn-outline btn-sm" type="button" onclick="pasteAccountJson()">从剪贴板读取并填充</button>
	</div>
	</div>
	<div class="form-group">
	<label class="form-label" for="newTeamId">Team ID</label>
	<input type="text" class="form-input" id="newTeamId" placeholder="输入Team ID">
	</div>
	<div class="form-group">
	<label class="form-label" for="newSecureCses">Cookie中的__Secure-C_SES</label>
	<textarea class="form-textarea" id="newSecureCses" placeholder="输入Cookie中的__Secure-C_SES" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="newHostCoses">Cookie中的__Host-C_OSES</label>
	<textarea class="form-textarea" id="newHostCoses" placeholder="输入Cookie中的__Host-C_OSES" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="newCsesidx">CSESIDX</label>
	<input type="text" class="form-input" id="newCsesidx" placeholder="输入CSESIDX">
	</div>
	<div class="form-group">
	<label class="form-label" for="newUserAgent">User Agent</label>
	<input type="text" class="form-input" id="newUserAgent" placeholder="输入User Agent">
	</div>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('addAccountModal')">取消</button>
	<button class="btn btn-primary" onclick="saveNewAccount()">保存</button>
	</div>
	</div>
	</div>
	<!-- 编辑账号模态框 -->
	<div class="modal" id="editAccountModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>编辑账号</h3>
	<button class="modal-close" onclick="closeModal('editAccountModal')" title="关闭">×</button>
	</div>
	<div class="modal-body">
	<input type="hidden" id="editAccountId">
	<div class="form-group">
	<label class="form-label" for="editTeamId">Team ID</label>
	<input type="text" class="form-input" id="editTeamId" placeholder="输入Team ID">
	</div>
	<div class="form-group">
	<label class="form-label" for="editSecureCses">Cookie中的__Secure-C_SES</label>
	<textarea class="form-textarea" id="editSecureCses" placeholder="输入Secure C Ses" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="editHostCoses">Cookie中的__Host-C_OSES</label>
	<textarea class="form-textarea" id="editHostCoses" placeholder="输入Host C Oses" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="editCsesidx">CSESIDX</label>
	<input type="text" class="form-input" id="editCsesidx" placeholder="输入CSESIDX">
	</div>
	<div class="form-group">
	<label class="form-label" for="editUserAgent">User Agent</label>
	<input type="text" class="form-input" id="editUserAgent" placeholder="输入User Agent">
	</div>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('editAccountModal')">取消</button>
	<button class="btn btn-primary" onclick="updateAccount()">保存</button>
	</div>
	</div>
	</div>

	<!-- 刷新Cookie模态框 -->
	<div class="modal" id="refreshCookieModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>刷新账号Cookie</h3>
	<button class="modal-close" onclick="closeModal('refreshCookieModal')" title="关闭">×</button>
	</div>
	<div class="modal-body">
	<input type="hidden" id="refreshAccountId">
	<p class="text-muted" style="margin-bottom: 16px;">请输入新的Cookie值来刷新账号认证信息。刷新后将清除JWT缓存。</p>
	<div class="form-group">
	<label class="form-label" for="refreshSecureCses">Cookie中的__Secure-C_SES <span style="color: var(--danger);">*</span></label>
	<textarea class="form-textarea" id="refreshSecureCses" placeholder="输入新的__Secure-C_SES值" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="refreshHostCoses">Cookie中的__Host-C_OSES <span style="color: var(--danger);">*</span></label>
	<textarea class="form-textarea" id="refreshHostCoses" placeholder="输入新的__Host-C_OSES值" rows="3"></textarea>
	</div>
	<div class="form-group">
	<label class="form-label" for="refreshCsesidx">CSESIDX (可选)</label>
	<input type="text" class="form-input" id="refreshCsesidx" placeholder="输入CSESIDX值">
	</div>
	<div class="form-group">
	<label class="form-label">从JSON粘贴 (可选)</label>
	<textarea class="form-textarea" id="refreshCookieJson" placeholder="粘贴Cookie JSON数据" rows="3"></textarea>
	<div style="display:flex; gap:8px; margin-top:8px;">
	<button class="btn btn-outline btn-sm" type="button" onclick="parseRefreshCookieJson()">解析填充</button>
	<button class="btn btn-outline btn-sm" type="button" onclick="pasteRefreshCookieJson()">📋 粘贴并解析</button>
	</div>
	</div>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('refreshCookieModal')">取消</button>
	<button class="btn btn-primary" onclick="refreshAccountCookie()">刷新Cookie</button>
	</div>
	</div>
	</div>

	<!-- 添加模型模态框 -->
	<div class="modal" id="addModelModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>添加模型</h3>
	<button class="modal-close" onclick="closeModal('addModelModal')" title="关闭">×</button>
	</div>
	<div class="modal-body">
	<div class="form-row">
	<div class="form-group">
	<label class="form-label" for="newModelId">模型ID</label>
	<input type="text" class="form-input" id="newModelId" placeholder="如: gemini-pro">
	</div>
	<div class="form-group">
	<label class="form-label" for="newModelName">模型名称</label>
	<input type="text" class="form-input" id="newModelName" placeholder="如: Gemini Pro">
	</div>
	</div>
	<div class="form-group">
	<label class="form-label" for="newModelDesc">描述</label>
	<input type="text" class="form-input" id="newModelDesc" placeholder="模型描述">
	</div>
	<div class="form-row">
	<div class="form-group">
	<label class="form-label" for="newContextLength">上下文长度</label>
	<input type="number" class="form-input" id="newContextLength" value="32768">
	</div>
	<div class="form-group">
	<label class="form-label" for="newMaxTokens">最大Token</label>
	<input type="number" class="form-input" id="newMaxTokens" value="8192">
	</div>
	</div>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('addModelModal')">取消</button>
	<button class="btn btn-primary" onclick="saveNewModel()">保存</button>
	</div>
	</div>
	</div>

	<!-- 登录模态框 -->
	<div class="modal" id="loginModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>管理员登录</h3>
	<button class="modal-close" onclick="closeModal('loginModal')" title="关闭">×</button>
	</div>
	<div class="modal-body">
	<div class="form-group">
	<label class="form-label" for="loginPassword">后台密码</label>
	<input type="password" class="form-input" id="loginPassword" placeholder="输入后台密码">
	</div>
	<p class="text-muted" style="font-size: 12px;">首次登录将设置当前密码为后台密码。</p>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('loginModal')">取消</button>
	<button class="btn btn-primary" onclick="submitLogin()">登录</button>
	</div>
	</div>
	</div>

	<!-- 编辑模型模态框 -->
	<div class="modal" id="editModelModal">
	<div class="modal-content">
	<div class="modal-header">
	<h3>编辑模型</h3>
	<button class="modal-close" onclick="closeModal('editModelModal')" title="关闭">×</button>
	</div>
	<div class="modal-body">
	<input type="hidden" id="editModelOriginalId">
	<div class="form-row">
	<div class="form-group">
	<label class="form-label" for="editModelId">模型ID</label>
	<input type="text" class="form-input" id="editModelId" placeholder="如: gemini-pro" readonly style="background-color: var(--bg-tertiary); cursor: not-allowed;">
	</div>
	<div class="form-group">
	<label class="form-label" for="editModelName">模型名称</label>
	<input type="text" class="form-input" id="editModelName" placeholder="如: Gemini Pro">
	</div>
	</div>
	<div class="form-group">
	<label class="form-label" for="editModelDesc">描述</label>
	<input type="text" class="form-input" id="editModelDesc" placeholder="模型描述">
	</div>
	<div class="form-row">
	<div class="form-group">
	<label class="form-label" for="editContextLength">上下文长度</label>
	<input type="number" class="form-input" id="editContextLength">
	</div>
	<div class="form-group">
	<label class="form-label" for="editMaxTokens">最大Token</label>
	<input type="number" class="form-input" id="editMaxTokens">
	</div>
	</div>
	</div>
	<div class="modal-footer">
	<button class="btn btn-outline" onclick="closeModal('editModelModal')">取消</button>
	<button class="btn btn-primary" onclick="updateModel()">保存</button>
	</div>
	</div>
	</div>


	<!-- Toast通知 -->
	<div id="toastContainer" class="toast-container">
	<!-- Toasts will be injected here by JS -->
	</div>
	<div class="toast" id="toast"></div>

	<script>
	// [OPTIMIZATION] 1. 脚本微调以适应新的图标
	function updateThemeIcon(theme) {
	const iconContainer = document.getElementById('themeIconContainer');
	if (iconContainer) {
	const iconId = theme === 'dark' ? 'icon-sun' : 'icon-moon';
	iconContainer.innerHTML = `<svg class="icon"><use xlink:href="#${iconId}"></use></svg>`;
	}
	}

	// [OPTIMIZATION] 2. 改进Toast通知
	let toastTimeout;
	function showToast(message, type = 'info') {
	const toast = document.getElementById('toast');
	if (!toast) return;

	let icon = '';
	let borderType = type; // 'success', 'error', 'info'
	switch(type) {
	case 'success':
	icon = '<svg class="icon" style="color: var(--success);"><use xlink:href="#icon-check"></use></svg>';
	break;
	case 'error':
	icon = '<svg class="icon" style="color: var(--danger);"><use xlink:href="#icon-x"></use></svg>';
	break;
	default:
	icon = '<svg class="icon" style="color: var(--primary);"><use xlink:href="#icon-server"></use></svg>';
	borderType = 'primary';
	break;
	}

	toast.innerHTML = `${icon} <span class="toast-message">${message}</span>`;
	toast.className = `toast show`;
	toast.style.borderLeft = `4px solid var(--${borderType})`;

	clearTimeout(toastTimeout);
	toastTimeout = setTimeout(() => {
	toast.classList.remove('show');
	}, 3500);
	}

	// =======================================================
	// [FULL SCRIPT] 以下是完整的、未删减的功能性 JavaScript 代码
	// =======================================================

	// API 基础 URL
	const API_BASE = '.';

	// 全局数据缓存
	let accountsData = [];
	let modelsData = [];
	let configData = {};
	let currentEditAccountId = null;
	let currentEditModelId = null;
	const ADMIN_TOKEN_KEY = 'admin_token';
	let tokensData = [];

	// --- 初始化 ---
	document.addEventListener('DOMContentLoaded', () => {
	initTheme();
	loadAllData();
	setInterval(checkServerStatus, 30000); // 每30秒检查一次服务状态
	updateLoginButton();
	});

	// --- 核心加载与渲染 ---
	async function loadAllData() {
	await Promise.all([
	loadAccounts(),
	loadModels(),
	loadConfig(),
	checkServerStatus(),
	loadLogLevel(),
	loadTokens()
	]);
	}

	function getAuthHeaders() {
	const token = localStorage.getItem(ADMIN_TOKEN_KEY);
	return token ? { 'X-Admin-Token': token } : {};
	}

	function updateLoginButton() {
	const token = localStorage.getItem(ADMIN_TOKEN_KEY);
	const btn = document.getElementById('loginButton');
	if (!btn) return;
	if (token) {
	btn.textContent = '注销';
	btn.disabled = false;
	btn.classList.remove('btn-disabled');
	btn.title = '注销登录';
	btn.onclick = logoutAdmin;
	} else {
	btn.textContent = '登录';
	btn.disabled = false;
	btn.classList.remove('btn-disabled');
	btn.title = '管理员登录';
	btn.onclick = showLoginModal;
	}
	}

	async function apiFetch(url, options = {}) {
	const headers = Object.assign({}, options.headers \|\| {}, getAuthHeaders());
	const res = await fetch(url, { ...options, headers });
	if (res.status === 401 \|\| res.status === 403) {
	showLoginModal();
	updateLoginButton();
	throw new Error('需要登录');
	}
	return res;
	}

	// --- 主题控制 ---
	function initTheme() {
	const savedTheme = localStorage.getItem('theme') \|\| 'light';
	document.documentElement.setAttribute('data-theme', savedTheme);
	updateThemeIcon(savedTheme);
	}

	function toggleTheme() {
	const current = document.documentElement.getAttribute('data-theme');
	const newTheme = current === 'dark' ? 'light' : 'dark';
	document.documentElement.setAttribute('data-theme', newTheme);
	localStorage.setItem('theme', newTheme);
	updateThemeIcon(newTheme);
	}

	// --- 标签页控制 ---
	function switchTab(tabName) {
	document.querySelectorAll('.tab').forEach(btn => btn.classList.remove('active'));
	document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

	const tabBtn = document.querySelector(`[onclick="switchTab('${tabName}')"]`);
	const tabContent = document.getElementById(tabName);

	if (tabBtn) tabBtn.classList.add('active');
	if (tabContent) tabContent.classList.add('active');
	}

	// --- 状态检查 ---
	async function checkServerStatus() {
	const indicator = document.getElementById('serviceStatus');
	if (!indicator) return;
	try {
	const res = await apiFetch(`${API_BASE}/api/status`);
	console.log('Server Status Response:', res);
	if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
	const data = await res.json();
	indicator.textContent = '服务运行中';
	indicator.classList.remove('offline');
	indicator.title = '服务连接正常 - ' + new Date().toLocaleString();
	} catch (e) {
	indicator.textContent = '服务离线';
	indicator.classList.add('offline');
	indicator.title = '无法连接到后端服务';
	}
	}

	// --- 账号管理 (Accounts) ---
	async function loadAccounts() {
	try {
	const res = await apiFetch(`${API_BASE}/api/accounts`);
	const data = await res.json();
	accountsData = data.accounts \|\| [];
	document.getElementById('currentIndex').textContent = data.current_index \|\| 0;
	renderAccounts();
	updateAccountStats();
	} catch (e) {
	showToast('加载账号列表失败: ' + e.message, 'error');
	}
	}

	function renderAccounts() {
	const tbody = document.getElementById('accountsTableBody');
	if (!tbody) return;

	if (accountsData.length === 0) {
	tbody.innerHTML = `<tr><td colspan="6" class="empty-state">
	<div class="empty-state-icon"><svg class="icon"><use xlink:href="#icon-users"></use></svg></div>
	<h3>暂无账号</h3><p>点击 "添加账号" 按钮来创建一个。</p>
	</td></tr>`;
	return;
	}

	tbody.innerHTML = accountsData.map((acc, index) => `
	<tr>
	<td>${index + 1}</td>
	<td><code>${acc.team_id \|\| '-'}</code></td>
	<td><code>${acc.csesidx \|\| '-'}</code></td>
	<td title="${acc.user_agent}">${acc.user_agent ? acc.user_agent.substring(0, 30) + '...' : '-'}</td>
	<td>
	<span class="badge ${acc.available ? 'badge-success' : 'badge-danger'}">${acc.available ? '可用' : '不可用'}</span>
	${renderNextRefresh(acc)}
	</td>
	<td style="white-space: nowrap;">
	<button class="btn btn-sm ${acc.enabled !== false ? 'btn-warning' : 'btn-success'} btn-icon" onclick="toggleAccount(${acc.id})" title="${acc.enabled !== false ? '停用' : '启用'}"><svg class="icon" style="width:16px; height:16px;"><use xlink:href="#icon-${acc.enabled !== false ? 'pause' : 'play'}"></use></svg></button>
	<button class="btn btn-sm btn-outline btn-icon" onclick="testAccount(${acc.id})" title="测试连接"><svg class="icon" style="width:16px; height:16px;"><use xlink:href="#icon-zap"></use></svg></button>
	<button class="btn btn-sm btn-outline btn-icon" onclick="showRefreshCookieModal(${acc.id})" title="刷新Cookie"><svg class="icon" style="width:16px; height:16px;"><use xlink:href="#icon-refresh"></use></svg></button>
	<button class="btn btn-sm btn-outline btn-icon" onclick="showEditAccountModal(${acc.id})" title="编辑"><svg class="icon" style="width:16px; height:16px;"><use xlink:href="#icon-settings"></use></svg></button>
	<button class="btn btn-sm btn-danger btn-icon" onclick="deleteAccount(${acc.id})" title="删除"><svg class="icon" style="width:16px; height:16px;"><use xlink:href="#icon-x"></use></svg></button>
	</td>
	</tr>
	`).join('');
	}

	function updateAccountStats() {
	document.getElementById('totalAccounts').textContent = accountsData.length;
	document.getElementById('availableAccounts').textContent = accountsData.filter(a => a.available).length;
	document.getElementById('unavailableAccounts').textContent = accountsData.length - accountsData.filter(a => a.available).length;
	}

	function renderNextRefresh(acc) {
	if (!acc \|\| !acc.cooldown_until) return '';
	const now = Date.now();
	const ts = acc.cooldown_until * 1000;
	if (ts <= now) return '';
	const next = new Date(ts);
	const remaining = Math.max(0, ts - now);
	const minutes = Math.floor(remaining / 60000);
	const label = minutes >= 60
	? `${Math.floor(minutes / 60)}小时${minutes % 60}分`
	: `${minutes}分`;
	return `<span class="cooldown-hint">下次恢复: ${next.toLocaleString()}（约${label}）</span>`;
	}

	function showAddAccountModal() {
	// 清空表单字段
	document.getElementById('newAccountJson').value = '';
	document.getElementById('newTeamId').value = '';
	document.getElementById('newSecureCses').value = '';
	document.getElementById('newHostCoses').value = '';
	document.getElementById('newCsesidx').value = '';
	document.getElementById('newUserAgent').value = '';
	openModal('addAccountModal');
	}

	function showEditAccountModal(id) {
	const acc = accountsData.find(a => a.id === id);
	if (!acc) return;

	document.getElementById('editAccountId').value = id;
	document.getElementById('editTeamId').value = acc.team_id \|\| '';
	document.getElementById('editSecureCses').value = acc.secure_c_ses \|\| '';
	document.getElementById('editHostCoses').value = acc.host_c_oses \|\| '';
	document.getElementById('editCsesidx').value = acc.csesidx \|\| '';
	document.getElementById('editUserAgent').value = acc.user_agent ? acc.user_agent.replace('...', '') : '';

	openModal('editAccountModal');
	}

	async function updateAccount() {
	const id = document.getElementById('editAccountId').value;
	const account = {};

	const teamId = document.getElementById('editTeamId').value;
	const secureCses = document.getElementById('editSecureCses').value;
	const hostCoses = document.getElementById('editHostCoses').value;
	const csesidx = document.getElementById('editCsesidx').value;
	const userAgent = document.getElementById('editUserAgent').value;

	if (teamId) account.team_id = teamId;
	if (secureCses) account.secure_c_ses = secureCses;
	if (hostCoses) account.host_c_oses = hostCoses;
	if (csesidx) account.csesidx = csesidx;
	if (userAgent) account.user_agent = userAgent;

	try {
	const res = await apiFetch(`${API_BASE}/api/accounts/${id}`, {
	method: 'PUT',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(account)
	});
	const data = await res.json();

	if (data.success) {
	showToast('账号更新成功', 'success');
	closeModal('editAccountModal');
	loadAccounts();
	} else {
	showToast('更新失败: ' + (data.error \|\| '未知错误'), 'error');
	}
	} catch (e) {
	showToast('更新失败: ' + e.message, 'error');
	}
	}

	async function saveNewAccount() {
	const teamId = document.getElementById('newTeamId').value;
	const secureCses = document.getElementById('newSecureCses').value;
	const hostCoses = document.getElementById('newHostCoses').value;
	const csesidx = document.getElementById('newCsesidx').value;
	const userAgent = document.getElementById('newUserAgent').value;

	try {
	const res = await apiFetch(`${API_BASE}/api/accounts`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
	team_id: teamId,
	"secure_c_ses": secureCses,
	"host_c_oses": hostCoses,
	"csesidx": csesidx,
	"user_agent": userAgent })
	});
	const data = await res.json();
	if (!res.ok \|\| data.error) throw new Error(data.error \|\| data.detail \|\| '添加失败');
	showToast('账号添加成功!', 'success');
	closeModal('addAccountModal');
	loadAccounts();
	} catch (e) {
	showToast('添加失败: ' + e.message, 'error');
	}
	}

	function parseAccountJson(text) {
	const textarea = document.getElementById('newAccountJson');
	const raw = (typeof text === 'string' ? text : textarea.value \|\| '').trim();
	if (!raw) {
	showToast('请先粘贴账号JSON', 'warning');
	return;
	}
	let acc;
	try {
	const parsed = JSON.parse(raw);
	acc = Array.isArray(parsed) ? parsed[0] : parsed;
	if (!acc \|\| typeof acc !== 'object') throw new Error('格式不正确');
	} catch (err) {
	showToast('解析失败: ' + err.message, 'error');
	return;
	}

	document.getElementById('newTeamId').value = acc.team_id \|\| '';
	document.getElementById('newSecureCses').value = acc.secure_c_ses \|\| '';
	document.getElementById('newHostCoses').value = acc.host_c_oses \|\| '';
	document.getElementById('newCsesidx').value = acc.csesidx \|\| '';
	document.getElementById('newUserAgent').value = acc.user_agent \|\| '';
	showToast('已填充账号信息', 'success');
	}

	async function pasteAccountJson() {
	try {
	if (!navigator.clipboard \|\| !navigator.clipboard.readText) {
	showToast('当前环境不支持剪贴板API，请使用HTTPS或手动粘贴', 'warning');
	return;
	}
	const text = await navigator.clipboard.readText();
	document.getElementById('newAccountJson').value = text;
	parseAccountJson(text);
	} catch (e) {
	showToast('无法读取剪贴板: ' + e.message, 'error');
	}
	}

	async function deleteAccount(id) {
	if (!confirm('确定要删除这个账号吗？')) return;
	try {
	const res = await apiFetch(`${API_BASE}/api/accounts/${id}`, { method: 'DELETE' });
	if (!res.ok) throw new Error((await res.json()).detail);
	showToast('账号删除成功!', 'success');
	loadAccounts();
	} catch (e) {
	showToast('删除失败: ' + e.message, 'error');
	}
	}

	async function testAccount(id) {
	showToast(`正在测试账号ID: ${id}...`, 'info');
	try {
	const res = await apiFetch(`${API_BASE}/api/accounts/${id}/test`);
	const data = await res.json();
	if (res.ok && data.success) {
	showToast(`账号 ${id} 测试成功!`, 'success');
	} else {
	throw new Error(data.detail \|\| '未知错误');
	}
	loadAccounts();
	} catch (e) {
	showToast(`账号 ${id} 测试失败: ${e.message}`, 'error');
	}
	}

	async function toggleAccount(id) {
	const acc = accountsData.find(a => a.id === id);
	const action = acc && acc.enabled !== false ? '停用' : '启用';
	try {
	const res = await apiFetch(`${API_BASE}/api/accounts/${id}/toggle`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' }
	});
	const data = await res.json();
	if (res.ok && data.success) {
	showToast(`账号 ${id} ${action}成功!`, 'success');
	loadAccounts();
	} else {
	throw new Error(data.error \|\| data.detail \|\| '未知错误');
	}
	} catch (e) {
	showToast(`账号 ${id} ${action}失败: ${e.message}`, 'error');
	}
	}

	/**
	* 显示刷新Cookie的模态框
	* @param {number} id - 账号ID
	*/
	function showRefreshCookieModal(id) {
	const acc = accountsData.find(a => a.id === id);
	if (!acc) {
	showToast('账号不存在', 'error');
	return;
	}

	document.getElementById('refreshAccountId').value = id;
	document.getElementById('refreshSecureCses').value = '';
	document.getElementById('refreshHostCoses').value = '';
	document.getElementById('refreshCsesidx').value = '';
	document.getElementById('refreshCookieJson').value = '';

	openModal('refreshCookieModal');
	}

	/**
	* 从JSON解析并填充刷新Cookie表单
	* @param {string} text - JSON字符串
	*/
	function parseRefreshCookieJson(text) {
	const textarea = document.getElementById('refreshCookieJson');
	const raw = (typeof text === 'string' ? text : textarea.value \|\| '').trim();
	if (!raw) {
	showToast('请先粘贴Cookie JSON', 'warning');
	return;
	}
	let acc;
	try {
	const parsed = JSON.parse(raw);
	acc = Array.isArray(parsed) ? parsed[0] : parsed;
	if (!acc \|\| typeof acc !== 'object') throw new Error('格式不正确');
	} catch (err) {
	showToast('解析失败: ' + err.message, 'error');
	return;
	}

	document.getElementById('refreshSecureCses').value = acc.secure_c_ses \|\| '';
	document.getElementById('refreshHostCoses').value = acc.host_c_oses \|\| '';
	document.getElementById('refreshCsesidx').value = acc.csesidx \|\| '';
	showToast('已填充Cookie信息', 'success');
	}

	/**
	* 从剪贴板粘贴并解析刷新Cookie JSON
	*/
	async function pasteRefreshCookieJson() {
	try {
	if (!navigator.clipboard \|\| !navigator.clipboard.readText) {
	showToast('当前环境不支持剪贴板API，请使用HTTPS或手动粘贴', 'warning');
	return;
	}
	const text = await navigator.clipboard.readText();
	document.getElementById('refreshCookieJson').value = text;
	parseRefreshCookieJson(text);
	} catch (e) {
	showToast('无法读取剪贴板: ' + e.message, 'error');
	}
	}

	/**
	* 刷新账号Cookie
	* 调用后端API更新账号的Cookie信息
	*/
	async function refreshAccountCookie() {
	const id = document.getElementById('refreshAccountId').value;
	const secureCses = document.getElementById('refreshSecureCses').value.trim();
	const hostCoses = document.getElementById('refreshHostCoses').value.trim();
	const csesidx = document.getElementById('refreshCsesidx').value.trim();

	// 验证必填字段
	if (!secureCses \|\| !hostCoses) {
	showToast('secure_c_ses 和 host_c_oses 为必填项', 'warning');
	return;
	}

	try {
	const res = await apiFetch(`${API_BASE}/api/accounts/${id}/refresh-cookie`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
	secure_c_ses: secureCses,
	host_c_oses: hostCoses,
	csesidx: csesidx \|\| undefined
	})
	});
	const data = await res.json();

	if (res.ok && data.success) {
	showToast('Cookie刷新成功!', 'success');
	closeModal('refreshCookieModal');
	loadAccounts();
	} else {
	throw new Error(data.error \|\| data.detail \|\| '未知错误');
	}
	} catch (e) {
	showToast('Cookie刷新失败: ' + e.message, 'error');
	}
	}

	// --- 模型管理 (Models) ---
	async function loadModels() {
	try {
	const res = await apiFetch(`${API_BASE}/api/models`);
	const data = await res.json();
	modelsData = data.models \|\| [];
	renderModels();
	} catch (e) {
	showToast('加载模型列表失败: ' + e.message, 'error');
	}
	}

	function escapeHtml(str) {
	if (!str) return '';
	return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
	}

	function renderModels() {
	const tbody = document.getElementById('modelsTableBody');
	if (!tbody) return;
	if (modelsData.length === 0) {
	tbody.innerHTML = `<tr><td colspan="7" class="empty-state">
	<div class="empty-state-icon"><svg class="icon"><use xlink:href="#icon-robot"></use></svg></div>
	<h3>暂无模型</h3><p>点击 "添加模型" 按钮来创建一个。</p>
	</td></tr>`;
	return;
	}
	tbody.innerHTML = modelsData.map((model, index) => {
	const safeId = escapeHtml(model.id);
	const safeName = escapeHtml(model.name);
	const safeDesc = escapeHtml(model.description);
	return `
	<tr>
	<td><code>${safeId}</code></td>
	<td>${safeName}</td>
	<td title="${safeDesc}">${model.description ? safeDesc.substring(0, 40) + '...' : ''}</td>
	<td>${model.context_length}</td>
	<td>${model.max_tokens}</td>
	<td><span class="badge ${model.is_public ? 'badge-success' : 'badge-warning'}">${model.is_public ? '公共' : '私有'}</span></td>
	<td>
	<button class="btn btn-sm btn-outline btn-icon" onclick="showEditModelModalByIndex(${index})" title="编辑">✏️</button>
	<button class="btn btn-sm btn-danger btn-icon" onclick="deleteModelByIndex(${index})" title="删除">🗑️</button>
	</td>
	</tr>
	`;
	}).join('');
	}

	function showAddModelModal() {
	openModal('addModelModal');
	}

	function showEditModelModalByIndex(index) {
	const model = modelsData[index];
	if (!model) return;

	document.getElementById('editModelOriginalId').value = model.id;
	document.getElementById('editModelId').value = model.id;
	document.getElementById('editModelName').value = model.name \|\| '';
	document.getElementById('editModelDesc').value = model.description \|\| '';
	document.getElementById('editContextLength').value = model.context_length \|\| '';
	document.getElementById('editMaxTokens').value = model.max_tokens \|\| '';

	openModal('editModelModal');
	}

	async function updateModel() {
	const originalId = document.getElementById('editModelOriginalId').value;
	const model = {
	name: document.getElementById('editModelName').value,
	description: document.getElementById('editModelDesc').value,
	context_length: parseInt(document.getElementById('editContextLength').value) \|\| 32000,
	max_tokens: parseInt(document.getElementById('editMaxTokens').value) \|\| 8096
	};

	try {
	const res = await apiFetch(`${API_BASE}/api/models/${encodeURIComponent(originalId)}`, {
	method: 'PUT',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(model)
	});
	const data = await res.json();

	if (data.success) {
	showToast('模型更新成功', 'success');
	closeModal('editModelModal');
	loadModels();
	} else {
	showToast('更新失败: ' + (data.error \|\| '未知错误'), 'error');
	}
	} catch (e) {
	showToast('更新失败: ' + e.message, 'error');
	}
	}

	/**
	* 保存新模型
	* 从添加模型模态框获取数据并调用API创建新模型
	*/
	async function saveNewModel() {
	const modelId = document.getElementById('newModelId').value.trim();
	const modelName = document.getElementById('newModelName').value.trim();
	const modelDesc = document.getElementById('newModelDesc').value.trim();
	const contextLength = parseInt(document.getElementById('newContextLength').value) \|\| 32000;
	const maxTokens = parseInt(document.getElementById('newMaxTokens').value) \|\| 8096;

	// 验证必填字段
	if (!modelId) {
	showToast('请输入模型ID', 'warning');
	return;
	}
	if (!modelName) {
	showToast('请输入模型名称', 'warning');
	return;
	}

	const model = {
	id: modelId,
	name: modelName,
	description: modelDesc,
	context_length: contextLength,
	max_tokens: maxTokens
	};

	try {
	const res = await apiFetch(`${API_BASE}/api/models`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(model)
	});
	const data = await res.json();

	if (res.ok && (data.success \|\| !data.error)) {
	showToast('模型添加成功', 'success');
	closeModal('addModelModal');
	// 清空表单
	document.getElementById('newModelId').value = '';
	document.getElementById('newModelName').value = '';
	document.getElementById('newModelDesc').value = '';
	document.getElementById('newContextLength').value = '';
	document.getElementById('newMaxTokens').value = '';
	loadModels();
	} else {
	throw new Error(data.error \|\| '添加失败');
	}
	} catch (e) {
	showToast('添加模型失败: ' + e.message, 'error');
	}
	}

	/**
	* 删除模型
	* @param {string} id - 模型ID
	*/
	async function deleteModelByIndex(index) {
	const model = modelsData[index];
	if (!model) return;
	const id = model.id;
	if (!confirm(`确定要删除模型 "${id}" 吗？此操作不可恢复。`)) {
	return;
	}

	try {
	const res = await apiFetch(`${API_BASE}/api/models/${encodeURIComponent(id)}`, {
	method: 'DELETE'
	});
	const data = await res.json();

	if (res.ok && (data.success \|\| !data.error)) {
	showToast('模型删除成功', 'success');
	loadModels();
	} else {
	throw new Error(data.error \|\| '删除失败');
	}
	} catch (e) {
	showToast('删除模型失败: ' + e.message, 'error');
	}
	}

	// --- 系统设置 (Settings) ---
	async function loadConfig() {
	try {
	const res = await apiFetch(`${API_BASE}/api/config`);
	configData = await res.json();
	document.getElementById('proxyUrl').value = configData.proxy \|\| '';
	const imageModeSelect = document.getElementById('imageOutputMode');
	if (imageModeSelect) {
	const mode = (configData.image_output_mode \|\| 'url');
	imageModeSelect.value = mode === 'base64' ? 'base64' : 'url';
	}
	document.getElementById('configJson').value = JSON.stringify(configData, null, 2);
	} catch (e) {
	showToast('加载配置失败: ' + e.message, 'error');
	}
	}

	async function loadLogLevel() {
	try {
	const res = await apiFetch(`${API_BASE}/api/logging`);
	const data = await res.json();
	const select = document.getElementById('logLevelSelect');
	if (select && data.level) {
	select.value = data.level;
	}
	} catch (e) {
	console.warn('日志级别加载失败', e);
	}
	}

	async function updateLogLevel(level) {
	try {
	const res = await apiFetch(`${API_BASE}/api/logging`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ level })
	});
	const data = await res.json();
	if (!res.ok \|\| data.error) {
	throw new Error(data.error \|\| '设置失败');
	}
	showToast(`日志级别已切换为 ${data.level}`, 'success');
	} catch (e) {
	showToast('日志级别设置失败: ' + e.message, 'error');
	}
	}

	// --- Token 管理 ---
	async function loadTokens() {
	try {
	const res = await apiFetch(`${API_BASE}/api/tokens`);
	const data = await res.json();
	tokensData = data.tokens \|\| [];
	renderTokens();
	} catch (e) {
	showToast('加载 Token 失败: ' + e.message, 'error');
	}
	}

	function renderTokens() {
	const tbody = document.getElementById('tokensTableBody');
	if (!tbody) return;
	if (!tokensData.length) {
	tbody.innerHTML = `<tr><td colspan="2" class="empty-state">暂无 Token</td></tr>`;
	return;
	}
	tbody.innerHTML = tokensData.map(token => `
	<tr>
	<td><code>${token}</code></td>
	<td style="white-space: nowrap;">
	<button class="btn btn-outline btn-sm" data-token="${token}" onclick="copyToken(this.dataset.token)" title="复制Token">复制</button>
	<button class="btn btn-danger btn-sm" data-token="${token}" onclick="deleteToken(this.dataset.token)" title="删除Token">删除</button>
	</td>
	</tr>
	`).join('');
	}

	async function addToken() {
	const manual = document.getElementById('manualToken').value.trim();
	try {
	const res = await apiFetch(`${API_BASE}/api/tokens`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(manual ? { token: manual } : {})
	});
	const data = await res.json();
	if (!res.ok \|\| data.error) throw new Error(data.error \|\| '创建失败');
	document.getElementById('manualToken').value = data.token;
	showToast('Token 创建成功', 'success');
	loadTokens();
	} catch (e) {
	showToast('创建 Token 失败: ' + e.message, 'error');
	}
	}

	function generateToken() {
	if (window.crypto && crypto.randomUUID) {
	document.getElementById('manualToken').value = crypto.randomUUID().replace(/-/g, '');
	} else {
	document.getElementById('manualToken').value = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
	}
	}

	async function deleteToken(token) {
	if (!confirm('确定删除该 Token 吗？')) return;
	try {
	const res = await apiFetch(`${API_BASE}/api/tokens/${token}`, { method: 'DELETE' });
	const data = await res.json();
	if (!res.ok \|\| data.error) throw new Error(data.error \|\| '删除失败');
	showToast('Token 删除成功', 'success');
	loadTokens();
	} catch (e) {
	showToast('删除 Token 失败: ' + e.message, 'error');
	}
	}

	function copyToken(token) {
	if (!token) {
	showToast('无效的 Token', 'warning');
	return;
	}
	if (navigator.clipboard && navigator.clipboard.writeText) {
	navigator.clipboard.writeText(token).then(() => {
	showToast('已复制', 'success');
	}).catch(() => {
	fallbackCopy(token);
	});
	} else {
	fallbackCopy(token);
	}
	}

	function fallbackCopy(text) {
	try {
	const textarea = document.createElement('textarea');
	textarea.value = text;
	document.body.appendChild(textarea);
	textarea.select();
	document.execCommand('copy');
	document.body.removeChild(textarea);
	showToast('已复制', 'success');
	} catch (err) {
	showToast('复制失败', 'error');
	}
	}

	function logoutAdmin() {
	localStorage.removeItem(ADMIN_TOKEN_KEY);
	document.cookie = 'admin_token=; Max-Age=0; path=/';
	showToast('已注销', 'success');
	updateLoginButton();
	}

	function showLoginModal() {
	document.getElementById('loginPassword').value = '';
	openModal('loginModal');
	}

	async function submitLogin() {
	const pwd = document.getElementById('loginPassword').value;
	if (!pwd) {
	showToast('请输入密码', 'warning');
	return;
	}
	try {
	const res = await fetch(`${API_BASE}/api/auth/login`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ password: pwd })
	});
	const data = await res.json();
	if (!res.ok \|\| data.error) {
	throw new Error(data.error \|\| '登录失败');
	}
	localStorage.setItem(ADMIN_TOKEN_KEY, data.token);
	showToast('登录成功', 'success');
	closeModal('loginModal');
	loadAllData();
	updateLoginButton();
	} catch (e) {
	showToast('登录失败: ' + e.message, 'error');
	}
	}

	async function saveSettings() {
	const proxyUrl = document.getElementById('proxyUrl').value;
	const imageModeSelect = document.getElementById('imageOutputMode');
	const imageOutputMode = imageModeSelect ? imageModeSelect.value : 'url';
	try {
	const res = await apiFetch(`${API_BASE}/api/config`, {
	method: 'PUT',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ proxy: proxyUrl, image_output_mode: imageOutputMode })
	});
	if (!res.ok) throw new Error((await res.json()).detail);
	showToast('设置保存成功!', 'success');
	loadConfig();
	} catch (e) {
	showToast('保存失败: ' + e.message, 'error');
	}
	}

	async function testProxy() {
	const proxyUrl = document.getElementById('proxyUrl').value;
	const proxyStatus = document.getElementById('proxyStatus');
	proxyStatus.textContent = '测试中...';
	proxyStatus.style.color = 'var(--text-muted)';
	try {
	const res = await apiFetch(`${API_BASE}/api/proxy/test`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ proxy: proxyUrl })
	});
	const data = await res.json();
	if (res.ok && data.success) {
	proxyStatus.textContent = `测试成功! (${data.delay_ms}ms)`;
	proxyStatus.style.color = 'var(--success)';
	} else {
	throw new Error(data.detail);
	}
	} catch (e) {
	proxyStatus.textContent = `测试失败: ${e.message}`;
	proxyStatus.style.color = 'var(--danger)';
	}
	}

	function refreshConfig() {
	loadConfig();
	showToast('配置已刷新', 'info');
	}

	function downloadConfig() {
	const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(configData, null, 2));
	const downloadAnchorNode = document.createElement('a');
	downloadAnchorNode.setAttribute("href", dataStr);
	downloadAnchorNode.setAttribute("download", "business_gemini_session.json");
	document.body.appendChild(downloadAnchorNode);
	downloadAnchorNode.click();
	downloadAnchorNode.remove();
	showToast('配置文件已开始下载', 'success');
	}

	function uploadConfig() {
	document.getElementById('configFileInput').click();
	}

	function handleConfigUpload(event) {
	const file = event.target.files[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = async (e) => {
	try {
	const newConfig = JSON.parse(e.target.result);
	const res = await apiFetch(`${API_BASE}/api/config/import`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(newConfig)
	});
	if (!res.ok) throw new Error((await res.json()).detail);
	showToast('配置导入成功!', 'success');
	loadAllData();
	} catch (err) {
	showToast('导入失败: ' + err.message, 'error');
	}
	};
	reader.readAsText(file);
	}

	// --- 模态框控制 ---
	function openModal(modalId) {
	const modal = document.getElementById(modalId);
	if (modal) modal.classList.add('show');
	}

	function closeModal(modalId) {
	const modal = document.getElementById(modalId);
	if (modal) modal.classList.remove('show');
	}

	document.querySelectorAll('.modal').forEach(modal => {
	modal.addEventListener('click', (e) => {
	if (e.target.classList.contains('modal')) {
	closeModal(modal.id);
	}
	});
	});
	</script>

	</body>
	</html>