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>
|