mirror of
https://github.com/zhinianboke/xianyu-auto-reply.git
synced 2025-08-02 04:27:36 +08:00
251 lines
9.0 KiB
HTML
251 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>状态显示测试</title>
|
|
<link href="static/lib/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
<link href="static/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
min-width: 2rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.status-badge.enabled {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
.status-badge.disabled {
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
.status-toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
}
|
|
|
|
.status-toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.status-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.status-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .status-slider {
|
|
background-color: #10b981;
|
|
}
|
|
|
|
input:checked + .status-slider:before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.demo-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h1 class="mb-4">账号状态显示测试</h1>
|
|
|
|
<div class="demo-section">
|
|
<h3>修改前 vs 修改后对比</h3>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>修改前（带文字）</h5>
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<label class="status-toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge enabled">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
启用
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-3">
|
|
<label class="status-toggle">
|
|
<input type="checkbox">
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge disabled">
|
|
<i class="bi bi-x-circle-fill"></i>
|
|
禁用
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>修改后（仅图标）</h5>
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<label class="status-toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge enabled">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-3">
|
|
<label class="status-toggle">
|
|
<input type="checkbox">
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge disabled">
|
|
<i class="bi bi-x-circle-fill"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>表格中的效果预览</h3>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>账号ID</th>
|
|
<th>状态</th>
|
|
<th>默认回复</th>
|
|
<th>AI回复</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>测试账号001</td>
|
|
<td>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label class="status-toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge enabled">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-success">启用</span></td>
|
|
<td><span class="badge bg-primary">AI启用</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>测试账号002</td>
|
|
<td>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label class="status-toggle">
|
|
<input type="checkbox">
|
|
<span class="status-slider"></span>
|
|
</label>
|
|
<span class="status-badge disabled">
|
|
<i class="bi bi-x-circle-fill"></i>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-secondary">禁用</span></td>
|
|
<td><span class="badge bg-secondary">AI禁用</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary" disabled>
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>优势说明</h3>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>✅ 修改后的优势</h5>
|
|
<ul class="list-unstyled">
|
|
<li>✓ 界面更简洁</li>
|
|
<li>✓ 节省空间</li>
|
|
<li>✓ 图标直观易懂</li>
|
|
<li>✓ 视觉焦点更集中</li>
|
|
<li>✓ 现代化设计风格</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5>🎨 设计细节</h5>
|
|
<ul class="list-unstyled">
|
|
<li>• 图标居中对齐</li>
|
|
<li>• 徽章尺寸优化</li>
|
|
<li>• 颜色保持一致</li>
|
|
<li>• 响应式设计</li>
|
|
<li>• 无障碍访问友好</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h5><i class="bi bi-info-circle me-2"></i>说明</h5>
|
|
<p class="mb-0">
|
|
状态栏现在只显示图标，不显示"启用"/"禁用"文字。
|
|
绿色勾号表示启用状态，红色叉号表示禁用状态。
|
|
鼠标悬停时可以显示提示信息。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/lib/bootstrap/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 添加提示信息
|
|
document.querySelectorAll('.status-badge').forEach(badge => {
|
|
const isEnabled = badge.classList.contains('enabled');
|
|
badge.title = isEnabled ? '账号已启用' : '账号已禁用';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|