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>
1165 lines
35 KiB
HTML
1165 lines
35 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>CutThenThink v3.0 - UI Preview</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* Color Palette */
|
|
--primary: #8B6914;
|
|
--primary-hover: #A67C00;
|
|
--primary-light: #F5E6C8;
|
|
--bg-main: #F8F9FA;
|
|
--bg-card: #FFFFFF;
|
|
--bg-sidebar: #FFFFFF;
|
|
--border-color: #E5E7EB;
|
|
--text-primary: #1F2937;
|
|
--text-secondary: #6B7280;
|
|
--text-muted: #9CA3AF;
|
|
--danger: #EF4444;
|
|
--success: #10B981;
|
|
--warning: #F59E0B;
|
|
--info: #3B82F6;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
background: var(--bg-main);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ==================== Header ==================== */
|
|
.header {
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--primary);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logo-version {
|
|
font-size: 11px;
|
|
background: var(--primary-light);
|
|
color: var(--primary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.search-bar {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
margin: 0 24px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 10px 16px 10px 40px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-main);
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-light);
|
|
}
|
|
|
|
.search-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-muted);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: var(--bg-main);
|
|
}
|
|
|
|
/* ==================== Main Container ==================== */
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 61px);
|
|
}
|
|
|
|
/* ==================== Sidebar ==================== */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: var(--bg-sidebar);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 16px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.nav-section-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
padding: 0 12px 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-bottom: 2px;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--bg-main);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--primary-light);
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 18px;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
margin-top: auto;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* ==================== Content Area ==================== */
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* ==================== Screenshot Panel ==================== */
|
|
.screenshot-panel {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 20px;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.btn.secondary {
|
|
background: var(--bg-main);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn.secondary:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.btn.action {
|
|
background: var(--bg-main);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.btn.action:hover:not(:disabled) {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.shortcut {
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
padding: 2px 6px;
|
|
background: rgba(0,0,0,0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.btn.primary .shortcut {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.preview-container {
|
|
background: var(--bg-main);
|
|
border-radius: var(--radius-md);
|
|
aspect-ratio: 16/9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
border: 2px dashed var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-container.has-image {
|
|
border-style: solid;
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.preview-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.placeholder {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.placeholder-icon {
|
|
font-size: 48px;
|
|
opacity: 0.5;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ==================== AI Result Panel ==================== */
|
|
.ai-result {
|
|
background: linear-gradient(135deg, #F5E6C8 0%, #FFF9E6 100%);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px 20px;
|
|
margin-top: 16px;
|
|
border: 1px solid rgba(139, 105, 20, 0.2);
|
|
}
|
|
|
|
.ai-result.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.result-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.field.full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.field .value {
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
background: white;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
border: 1px solid rgba(139, 105, 20, 0.2);
|
|
}
|
|
|
|
.tag-icon {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* ==================== Gallery Section ==================== */
|
|
.gallery-section {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 20px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-tab {
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
background: var(--bg-main);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.filter-tab:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.filter-tab.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.gallery-item {
|
|
background: var(--bg-main);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.gallery-thumb {
|
|
aspect-ratio: 16/10;
|
|
background: linear-gradient(135deg, #E5E7EB 0%, #F3F4F6 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48px;
|
|
}
|
|
|
|
.gallery-thumb.code {
|
|
background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
|
|
color: #60A5FA;
|
|
}
|
|
|
|
.gallery-thumb.document {
|
|
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
|
|
color: #6366F1;
|
|
}
|
|
|
|
.gallery-thumb.chat {
|
|
background: linear-gradient(135deg, #DCFCE7 0%, #D1FAE5 100%);
|
|
color: #10B981;
|
|
}
|
|
|
|
.gallery-thumb.invoice {
|
|
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
|
|
color: #F59E0B;
|
|
}
|
|
|
|
.gallery-info {
|
|
padding: 12px;
|
|
}
|
|
|
|
.gallery-category {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.gallery-time {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.gallery-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.gallery-action {
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.gallery-action:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
/* ==================== Settings Modal ==================== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.modal-close {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
background: var(--bg-main);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-body {
|
|
display: flex;
|
|
height: 500px;
|
|
}
|
|
|
|
.modal-sidebar {
|
|
width: 180px;
|
|
background: var(--bg-main);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
.modal-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.modal-nav-item:hover {
|
|
background: white;
|
|
}
|
|
|
|
.modal-nav-item.active {
|
|
background: white;
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.modal-content {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-input, .form-select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.form-input:focus, .form-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-light);
|
|
}
|
|
|
|
.plugin-card {
|
|
background: var(--bg-main);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.plugin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.plugin-name {
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.plugin-status {
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.plugin-status.installed {
|
|
background: #D1FAE5;
|
|
color: #059669;
|
|
}
|
|
|
|
.plugin-status.not-installed {
|
|
background: #F3F4F6;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.plugin-info {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ==================== Toast Notification ==================== */
|
|
.toast-container {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 2000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.toast {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-md);
|
|
padding: 14px 18px;
|
|
box-shadow: var(--shadow-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 300px;
|
|
border-left: 4px solid var(--primary);
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.toast-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.toast-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.toast-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.toast-message {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ==================== Stats Cards ==================== */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 12px;
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Demo active states */
|
|
.demo-btn {
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<div class="logo-icon">✂️</div>
|
|
<span class="logo-text">CutThenThink</span>
|
|
<span class="logo-version">v3.0</span>
|
|
</div>
|
|
<div class="search-bar">
|
|
<div class="search-wrapper">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" class="search-input" placeholder="搜索截图记录、标签、分类...">
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="icon-btn" title="快捷键设置">⌨️</button>
|
|
<button class="icon-btn" onclick="openSettings()" title="设置">⚙️</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Container -->
|
|
<div class="main-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">主要功能</div>
|
|
<div class="nav-item active">
|
|
<span class="nav-icon">📷</span>
|
|
<span>截图</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">🖼️</span>
|
|
<span>图库</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">☁️</span>
|
|
<span>上传管理</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">智能功能</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">🔍</span>
|
|
<span>OCR 识别</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">🤖</span>
|
|
<span>AI 分类</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">📝</span>
|
|
<span>Prompt 模板</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="nav-item">
|
|
<span class="nav-icon">📊</span>
|
|
<span>统计</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Content Area -->
|
|
<main class="content-area">
|
|
<!-- Screenshot Panel -->
|
|
<section class="screenshot-panel">
|
|
<div class="panel-header">
|
|
<div class="panel-title">📷 截图</div>
|
|
<div style="font-size: 12px; color: var(--text-muted);">
|
|
快捷键: <span style="background: var(--bg-main); padding: 2px 6px; border-radius: 4px;">Ctrl+Shift+A</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<button class="btn primary">
|
|
<span>📷</span>
|
|
<span>截全屏</span>
|
|
<span class="shortcut">Ctrl+Shift+A</span>
|
|
</button>
|
|
<button class="btn secondary">
|
|
<span>⛶</span>
|
|
<span>区域截图</span>
|
|
<span class="shortcut">Ctrl+Shift+R</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="preview-container" id="preview-container">
|
|
<div class="placeholder">
|
|
<div class="placeholder-icon">📷</div>
|
|
<div>请先截图或拖拽图片到此处</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="btn action" disabled>
|
|
<span>☁️</span>
|
|
<span>上传</span>
|
|
</button>
|
|
<button class="btn action" disabled>
|
|
<span>🔍</span>
|
|
<span>OCR识别</span>
|
|
</button>
|
|
<button class="btn action" disabled>
|
|
<span>🤖</span>
|
|
<span>AI分类</span>
|
|
</button>
|
|
<button class="btn action" disabled>
|
|
<span>💾</span>
|
|
<span>保存</span>
|
|
</button>
|
|
<button class="btn action" disabled>
|
|
<span>📋</span>
|
|
<span>复制</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- AI Result Panel (Demo) -->
|
|
<div class="ai-result" id="ai-result" style="display: block;">
|
|
<div class="result-header">
|
|
<span>🤖</span>
|
|
<span>AI 分析结果</span>
|
|
<span style="margin-left: auto; font-size: 12px; opacity: 0.7;">置信度: 95%</span>
|
|
</div>
|
|
<div class="result-content">
|
|
<div class="field">
|
|
<label>分类</label>
|
|
<span class="value">💻 代码片段</span>
|
|
</div>
|
|
<div class="field">
|
|
<label>编程语言</label>
|
|
<span class="value">Rust</span>
|
|
</div>
|
|
<div class="field">
|
|
<label>标签</label>
|
|
<div class="tags">
|
|
<span class="tag"><span class="tag-icon">🏷️</span>Rust</span>
|
|
<span class="tag"><span class="tag-icon">🏷️</span>Tauri</span>
|
|
<span class="tag"><span class="tag-icon">🏷️</span>函数</span>
|
|
</div>
|
|
</div>
|
|
<div class="field full">
|
|
<label>摘要</label>
|
|
<span class="value">Rust OCR 模块的结构体定义和异步识别函数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section class="gallery-section">
|
|
<div class="section-header">
|
|
<div class="section-title">🖼️ 最近记录</div>
|
|
<div class="filter-tabs">
|
|
<div class="filter-tab active">全部</div>
|
|
<div class="filter-tab">文档</div>
|
|
<div class="filter-tab">代码</div>
|
|
<div class="filter-tab">对话</div>
|
|
<div class="filter-tab">发票</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-grid">
|
|
<div class="gallery-item">
|
|
<div class="gallery-thumb code">💻</div>
|
|
<div class="gallery-info">
|
|
<div class="gallery-category">代码片段</div>
|
|
<div class="gallery-time">2 分钟前</div>
|
|
<div class="gallery-actions">
|
|
<span class="gallery-action">🔍</span>
|
|
<span class="gallery-action">📋</span>
|
|
<span class="gallery-action">🗑️</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-thumb document">📄</div>
|
|
<div class="gallery-info">
|
|
<div class="gallery-category">文档资料</div>
|
|
<div class="gallery-time">1 小时前</div>
|
|
<div class="gallery-actions">
|
|
<span class="gallery-action">🔍</span>
|
|
<span class="gallery-action">📋</span>
|
|
<span class="gallery-action">🗑️</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-thumb chat">💬</div>
|
|
<div class="gallery-info">
|
|
<div class="gallery-category">对话记录</div>
|
|
<div class="gallery-time">3 小时前</div>
|
|
<div class="gallery-actions">
|
|
<span class="gallery-action">🔍</span>
|
|
<span class="gallery-action">📋</span>
|
|
<span class="gallery-action">🗑️</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item">
|
|
<div class="gallery-thumb invoice">🧾</div>
|
|
<div class="gallery-info">
|
|
<div class="gallery-category">发票票据</div>
|
|
<div class="gallery-time">昨天</div>
|
|
<div class="gallery-actions">
|
|
<span class="gallery-action">🔍</span>
|
|
<span class="gallery-action">📋</span>
|
|
<span class="gallery-action">🗑️</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="modal-overlay" id="settings-modal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-title">⚙️ 设置</div>
|
|
<button class="modal-close" onclick="closeSettings()">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-sidebar">
|
|
<div class="modal-nav-item active">🎛️ 通用</div>
|
|
<div class="modal-nav-item">🔍 OCR</div>
|
|
<div class="modal-nav-item">🤖 AI</div>
|
|
<div class="modal-nav-item">📝 Prompts</div>
|
|
<div class="modal-nav-item">☁️ 上传</div>
|
|
<div class="modal-nav-item">🧩 插件</div>
|
|
<div class="modal-nav-item">⌨️ 快捷键</div>
|
|
<div class="modal-nav-item">🎨 外观</div>
|
|
</div>
|
|
<div class="modal-content">
|
|
<div class="content-title">🔍 OCR 配置</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">OCR 提供商</label>
|
|
<select class="form-select">
|
|
<option>云端 API (默认)</option>
|
|
<option>本地插件 (需下载)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="plugin-card">
|
|
<div class="plugin-header">
|
|
<div class="plugin-name">
|
|
<span>🧩</span>
|
|
<span>离线 OCR 插件</span>
|
|
</div>
|
|
<span class="plugin-status not-installed">未安装</span>
|
|
</div>
|
|
<div class="plugin-info">
|
|
大小: 约 15MB • 支持中英文混合识别 • 无需网络连接
|
|
</div>
|
|
<button class="btn btn-sm primary">📥 下载离线插件</button>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 24px;">
|
|
<label class="form-label">云端 API 提供商</label>
|
|
<select class="form-select">
|
|
<option>百度 OCR</option>
|
|
<option>阿里云 OCR</option>
|
|
<option>腾讯云 OCR</option>
|
|
<option>其他 API</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">API Key</label>
|
|
<input type="password" class="form-input" placeholder="请输入 API Key">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Secret Key</label>
|
|
<input type="password" class="form-input" placeholder="请输入 Secret Key">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container">
|
|
<div class="toast">
|
|
<span class="toast-icon">✅</span>
|
|
<div class="toast-content">
|
|
<div class="toast-title">截图成功</div>
|
|
<div class="toast-message">已保存到 /Screenshots/screenshot_20250212.png</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openSettings() {
|
|
document.getElementById('settings-modal').classList.add('show');
|
|
}
|
|
|
|
function closeSettings() {
|
|
document.getElementById('settings-modal').classList.remove('show');
|
|
}
|
|
|
|
// Close modal on overlay click
|
|
document.getElementById('settings-modal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeSettings();
|
|
}
|
|
});
|
|
|
|
// Filter tabs interaction
|
|
document.querySelectorAll('.filter-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Nav items interaction
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Modal nav items interaction
|
|
document.querySelectorAll('.modal-nav-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
document.querySelectorAll('.modal-nav-item').forEach(i => i.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|