e2ea309ee6
完整实现 Tauri + Vanilla JS 轻量级截图工具 Phase 1 - 项目搭建 - Tauri 2.x 项目初始化 - Vite 前端项目搭建 - 基础 UI 框架（CSS 变量、组件库） - 构建配置优化 Phase 2 - 核心截图功能 - 全屏/区域/窗口截图 - 截图预览和管理 - 文件命名和缩略图 - 全局快捷键集成 Phase 3 - 上传与存储 - 多图床上传（GitHub/Imgur/自定义） - 配置管理系统 - SQLite 数据库 Phase 4 - OCR 集成 - 云端 OCR（百度/腾讯云） - 插件管理系统 - 本地 OCR 插件（Go） - OCR 结果处理 Phase 5 - AI 分类系统 - Claude/OpenAI API 集成 - Prompt 模板引擎 - 模板管理界面 - 自动分类流程 Phase 6 - 历史记录与管理 - 图库视图（网格/列表） - 搜索与筛选 - 批量操作 - 导出功能（JSON/CSV/ZIP） Phase 7 - 打包与发布 - 多平台构建配置 - CI/CD 工作流 - 图标和资源 - 安装包配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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>
|