congsh/cutThink_lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: CutThenThink v3.0 初始版本

Browse Source 
完整实现 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>
This commit is contained in:
Claude
2026-02-12 18:58:40 +08:00
commit e2ea309ee6
142 changed files with 38818 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
test-components.html Normal file
View File

@@ -0,0 +1,247 @@
<!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>