248 lines
9.4 KiB
HTML
248 lines
9.4 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>UI 组件测试</title>
|
|||
|
|
<link rel="stylesheet" href="/style.css">
|
|||
|
|
<style>
|
|||
|
|
.test-section {
|
|||
|
|
padding: var(--spacing-2xl);
|
|||
|
|
margin-bottom: var(--spacing-3xl);
|
|||
|
|
}
|
|||
|
|
.test-title {
|
|||
|
|
font-size: var(--font-lg);
|
|||
|
|
font-weight: var(--font-semibold);
|
|||
|
|
margin-bottom: var(--spacing-lg);
|
|||
|
|
padding-bottom: var(--spacing-md);
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
.test-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
margin-bottom: var(--spacing-lg);
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.demo-input {
|
|||
|
|
max-width: 400px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<!-- Header -->
|
|||
|
|
<header class="header">
|
|||
|
|
<div class="logo">
|
|||
|
|
<div class="logo-icon">✂️</div>
|
|||
|
|
<span class="logo-text">CutThink Lite</span>
|
|||
|
|
<span class="logo-version">UI Test</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-actions">
|
|||
|
|
<button class="icon-btn" title="主题切换" onclick="toggleTheme()">🎨</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="main-container">
|
|||
|
|
<!-- Sidebar -->
|
|||
|
|
<aside class="sidebar">
|
|||
|
|
<div class="nav-section">
|
|||
|
|
<div class="nav-section-title">测试</div>
|
|||
|
|
<button class="nav-item active">
|
|||
|
|
<span class="nav-icon">🧪</span>
|
|||
|
|
<span>组件测试</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- Content -->
|
|||
|
|
<main class="content-area">
|
|||
|
|
<!-- Buttons -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">按钮组件</h2>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<button class="btn btn-primary">主要按钮</button>
|
|||
|
|
<button class="btn btn-secondary">次要按钮</button>
|
|||
|
|
<button class="btn btn-danger">危险按钮</button>
|
|||
|
|
<button class="btn btn-success">成功按钮</button>
|
|||
|
|
<button class="btn btn-ghost">幽灵按钮</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<button class="btn btn-primary btn-sm">小按钮</button>
|
|||
|
|
<button class="btn btn-primary">默认按钮</button>
|
|||
|
|
<button class="btn btn-primary btn-lg">大按钮</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<button class="btn btn-icon btn-primary">✓</button>
|
|||
|
|
<button class="btn btn-icon btn-secondary">✂️</button>
|
|||
|
|
<button class="btn btn-icon btn-danger">🗑️</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<button class="btn btn-primary" disabled>禁用状态</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Inputs -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">输入框组件</h2>
|
|||
|
|
<div class="demo-input">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">普通输入框</label>
|
|||
|
|
<input type="text" class="input" placeholder="请输入内容...">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label required">必填项</label>
|
|||
|
|
<input type="text" class="input" placeholder="这是必填项">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">带提示</label>
|
|||
|
|
<input type="text" class="input" placeholder="请输入...">
|
|||
|
|
<div class="form-hint">这是输入框的提示信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">错误状态</label>
|
|||
|
|
<input type="text" class="input" value="错误内容" style="border-color: var(--danger);">
|
|||
|
|
<div class="form-error">这是错误提示信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">禁用状态</label>
|
|||
|
|
<input type="text" class="input" placeholder="禁用的输入框" disabled>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Cards -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">卡片组件</h2>
|
|||
|
|
<div class="grid grid-cols-2" style="max-width: 800px;">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<div class="card-title">📝 普通卡片</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p>这是一个普通的卡片组件，包含头部和主体内容。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<div class="card-title">🎨 带操作卡片</div>
|
|||
|
|
<div class="card-actions">
|
|||
|
|
<button class="btn btn-sm btn-ghost">编辑</button>
|
|||
|
|
<button class="btn btn-sm btn-ghost">删除</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p>卡片头部可以包含操作按钮</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer">
|
|||
|
|
<span class="text-muted">更新于 5 分钟前</span>
|
|||
|
|
<button class="btn btn-sm btn-primary">查看</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Badges & Tags -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">徽章和标签</h2>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<span class="badge badge-primary">主要</span>
|
|||
|
|
<span class="badge badge-success">成功</span>
|
|||
|
|
<span class="badge badge-danger">危险</span>
|
|||
|
|
<span class="badge badge-warning">警告</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<span class="tag">🏷️ 标签一</span>
|
|||
|
|
<span class="tag">🏷️ 标签二 <span class="tag-close">×</span></span>
|
|||
|
|
<span class="tag">🏷️ 可删除的标签 <span class="tag-close">×</span></span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Toast Demo -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">Toast 通知</h2>
|
|||
|
|
<div class="test-row">
|
|||
|
|
<button class="btn btn-primary" onclick="showToast('success')">成功通知</button>
|
|||
|
|
<button class="btn btn-danger" onclick="showToast('danger')">错误通知</button>
|
|||
|
|
<button class="btn btn-warning" style="background: var(--warning); color: white;" onclick="showToast('warning')">警告通知</button>
|
|||
|
|
<button class="btn btn-secondary" onclick="showToast('info')">信息通知</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CSS Variables Test -->
|
|||
|
|
<section class="test-section">
|
|||
|
|
<h2 class="test-title">CSS 变量测试</h2>
|
|||
|
|
<div class="grid grid-cols-2" style="max-width: 600px;">
|
|||
|
|
<div class="card" style="border-color: var(--primary);">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p><strong>Primary:</strong> <span style="color: var(--primary);">var(--primary)</span></p>
|
|||
|
|
<p><strong>Success:</strong> <span style="color: var(--success);">var(--success)</span></p>
|
|||
|
|
<p><strong>Danger:</strong> <span style="color: var(--danger);">var(--danger)</span></p>
|
|||
|
|
<p><strong>Warning:</strong> <span style="color: var(--warning);">var(--warning)</span></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card" style="background: var(--bg-secondary);">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p><strong>Spacing:</strong> xs, sm, md, lg, xl, 2xl, 3xl, 4xl</p>
|
|||
|
|
<p><strong>Radius:</strong> xs, sm, md, lg, xl, full</p>
|
|||
|
|
<p><strong>Shadows:</strong> sm, md, lg, xl</p>
|
|||
|
|
<p><strong>Z-index:</strong> 1000-1070</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function showToast(type) {
|
|||
|
|
const messages = {
|
|||
|
|
success: { title: '操作成功', message: '您的操作已成功完成！' },
|
|||
|
|
danger: { title: '操作失败', message: '发生错误，请重试。' },
|
|||
|
|
warning: { title: '警告提示', message: '请注意检查您的输入。' },
|
|||
|
|
info: { title: '信息提示', message: '这是一条普通的通知消息。' }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const msg = messages[type];
|
|||
|
|
const icons = {
|
|||
|
|
success: '✅',
|
|||
|
|
danger: '❌',
|
|||
|
|
warning: '⚠️',
|
|||
|
|
info: 'ℹ️'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Create toast
|
|||
|
|
let container = document.querySelector('.toast-container');
|
|||
|
|
if (!container) {
|
|||
|
|
container = document.createElement('div');
|
|||
|
|
container.className = 'toast-container';
|
|||
|
|
document.body.appendChild(container);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toast = document.createElement('div');
|
|||
|
|
toast.className = `toast toast-${type}`;
|
|||
|
|
toast.innerHTML = `
|
|||
|
|
<span class="toast-icon">${icons[type]}</span>
|
|||
|
|
<div class="toast-content">
|
|||
|
|
<div class="toast-title">${msg.title}</div>
|
|||
|
|
<div class="toast-message">${msg.message}</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="toast-close" onclick="this.parentElement.remove()">×</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
container.appendChild(toast);
|
|||
|
|
|
|||
|
|
// Auto remove
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.style.animation = 'slideOutRight 0.3s ease-out forwards';
|
|||
|
|
setTimeout(() => toast.remove(), 300);
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleTheme() {
|
|||
|
|
document.body.classList.toggle('theme-dark');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|