72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>主题测试</title>
|
|
<link rel="stylesheet" href="frontend/assets/styles.css" />
|
|
<style>
|
|
body { padding: 20px; }
|
|
.test-section { margin: 20px 0; padding: 20px; border: 2px solid var(--border); border-radius: 8px; }
|
|
.theme-toggle { margin-bottom: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="theme-toggle">
|
|
<button class="btn" onclick="toggleTheme()">切换主题</button>
|
|
<span id="current-theme"></span>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>上传日志测试</h3>
|
|
<div id="upload-log">
|
|
<div style="font-weight:600;margin-bottom:8px">上传日志</div>
|
|
<pre style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;max-height:300px;overflow-y:auto;font-size:12px;color:var(--text);white-space:pre-wrap">
|
|
[2024-01-01 10:00:00] 开始上传文件...
|
|
[2024-01-01 10:00:01] 验证文件格式...
|
|
[2024-01-01 10:00:02] 处理数据中...
|
|
[2024-01-01 10:00:03] 成功上传 100 条记录
|
|
[2024-01-01 10:00:04] 完成！
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>日期选择器测试</h3>
|
|
<input type="date" style="padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;outline:none" />
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>卡片测试</h3>
|
|
<div class="card">
|
|
<div style="font-weight:600;margin-bottom:8px">测试卡片</div>
|
|
<p>这是一个测试卡片，用于验证主题颜色是否正确。</p>
|
|
<ul class="list">
|
|
<li><span>项目1</span><span class="badge">标签</span></li>
|
|
<li><span>项目2</span><span class="badge">标签</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const current = html.getAttribute('data-theme');
|
|
const newTheme = current === 'light' ? 'dark' : 'light';
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeDisplay();
|
|
}
|
|
|
|
function updateThemeDisplay() {
|
|
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
document.getElementById('current-theme').textContent = `当前主题: ${current === 'light' ? '浅色' : '深色'}`;
|
|
}
|
|
|
|
// 初始化
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
updateThemeDisplay();
|
|
</script>
|
|
</body>
|
|
</html>
|