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>
188 lines
6.2 KiB
HTML
188 lines
6.2 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>CutThink Lite</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 应用主容器 -->
|
|
<div class="app-container">
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>CutThink Lite</h1>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<button class="nav-item active" data-view="screenshot">
|
|
<span class="icon">📸</span>
|
|
<span>截图</span>
|
|
</button>
|
|
<button class="nav-item" data-view="gallery">
|
|
<span class="icon">🖼️</span>
|
|
<span>图库</span>
|
|
</button>
|
|
<button class="nav-item" data-view="upload">
|
|
<span class="icon">📤</span>
|
|
<span>上传</span>
|
|
</button>
|
|
<button class="nav-item" data-view="settings">
|
|
<span class="icon">⚙️</span>
|
|
<span>设置</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
<!-- 截图视图 -->
|
|
<section id="view-screenshot" class="view active">
|
|
<div class="screenshot-controls">
|
|
<button id="btn-capture" class="btn btn-primary">
|
|
<span class="icon">📷</span>
|
|
<span>新建截图</span>
|
|
</button>
|
|
<button id="btn-capture-area" class="btn btn-secondary">
|
|
<span class="icon">✂️</span>
|
|
<span>区域截图</span>
|
|
</button>
|
|
<button id="btn-capture-window" class="btn btn-secondary">
|
|
<span class="icon">🪟</span>
|
|
<span>窗口截图</span>
|
|
</button>
|
|
</div>
|
|
<div class="screenshot-preview">
|
|
<div class="placeholder">
|
|
<p>点击上方按钮开始截图</p>
|
|
<small>支持快捷键: Ctrl+Shift+A (截图)</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 图库视图 -->
|
|
<section id="view-gallery" class="view">
|
|
<div class="gallery-header">
|
|
<h2>我的截图</h2>
|
|
<div class="gallery-actions">
|
|
<button class="btn btn-sm">刷新</button>
|
|
<button class="btn btn-sm btn-danger">清空</button>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-grid" id="gallery-grid">
|
|
<!-- 截图画廊项将通过 JS 动态加载 -->
|
|
<div class="placeholder">
|
|
<p>暂无截图</p>
|
|
<small>截图后会自动显示在这里</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 上传视图 -->
|
|
<section id="view-upload" class="view">
|
|
<div class="upload-container">
|
|
<h2>上传截图</h2>
|
|
<div class="upload-area" id="upload-area">
|
|
<div class="upload-placeholder">
|
|
<span class="icon">☁️</span>
|
|
<p>拖拽文件到这里或点击选择</p>
|
|
<small>支持 PNG, JPG, JPEG 格式</small>
|
|
</div>
|
|
</div>
|
|
<div class="upload-options">
|
|
<h3>上传设置</h3>
|
|
<div class="option-group">
|
|
<label>
|
|
<input type="checkbox" checked>
|
|
<span>上传后复制链接</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox">
|
|
<span>自动压缩图片</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 设置视图 -->
|
|
<section id="view-settings" class="view">
|
|
<div class="settings-container">
|
|
<h2>应用设置</h2>
|
|
<div class="settings-section">
|
|
<h3>常规设置</h3>
|
|
<div class="setting-item">
|
|
<label>主题</label>
|
|
<select>
|
|
<option>跟随系统</option>
|
|
<option>浅色</option>
|
|
<option>深色</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>语言</label>
|
|
<select>
|
|
<option>简体中文</option>
|
|
<option>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>截图设置</h3>
|
|
<div class="setting-item">
|
|
<label>默认保存格式</label>
|
|
<select>
|
|
<option>PNG</option>
|
|
<option>JPEG</option>
|
|
<option>WebP</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>
|
|
<input type="checkbox" checked>
|
|
<span>截图时隐藏窗口</span>
|
|
</label>
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>
|
|
<input type="checkbox" checked>
|
|
<span>截图音效</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>快捷键</h3>
|
|
<div class="shortcut-list">
|
|
<div class="shortcut-item">
|
|
<span>新建截图</span>
|
|
<kbd>Ctrl + Shift + A</kbd>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<span>区域截图</span>
|
|
<kbd>Ctrl + Shift + S</kbd>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<span>打开/关闭</span>
|
|
<kbd>Ctrl + Shift + D</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>关于</h3>
|
|
<div class="about-info">
|
|
<p><strong>CutThink Lite</strong></p>
|
|
<p>版本: 0.1.0</p>
|
|
<p>一个轻量级的截图和标注工具</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|