<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素截图工具 - 设置</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="popup-container">
<div class="header">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 2C8.45 2 8 2.45 8 3V4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16V3C16 2.45 15.55 2 15 2H9ZM12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="currentColor"/>
</svg>
</div>
<div class="language-selector">
<select id="languageSelect" class="language-select">
</select>
</div>
</div>
<div class="content">
<div class="status-section">
<div class="status-card">
<div class="status-icon">🎯</div>
<div class="status-info">
<h4 data-i18n="status.currentMode">当前默认模式</h4>
<p class="current-mode" id="currentMode">SnapDOM</p>
</div>
</div>
</div>
<div class="config-section">
<div class="section-header">
<h3 data-i18n="ui.defaultCaptureMode">⚙️ 默认截图模式</h3>
<p class="section-desc" data-i18n="ui.defaultCaptureModeDesc">选择点击插件图标时的默认截图方式</p>
</div>
<div class="mode-grid">
<label class="mode-card" data-mode="snapdom">
<input type="radio" name="defaultCaptureMode" value="snapdom" checked>
<div class="mode-content">
<div class="mode-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9M19 9H14V4H19V9Z" fill="currentColor"/>
</svg>
</div>
<div class="mode-details">
<h4 data-i18n="modes.snapdom">SnapDOM</h4>
<p data-i18n="modes.snapdomDesc">高性能，支持SVG渲染</p>
<span class="mode-badge recommended" data-i18n="modes.recommended">推荐</span>
</div>
</div>
</label>
<label class="mode-card" data-mode="html2canvas">
<input type="radio" name="defaultCaptureMode" value="html2canvas">
<div class="mode-content">
<div class="mode-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM17 12L14 9V11H10V13H14V15L17 12Z" fill="currentColor"/>
</svg>
</div>
<div class="mode-details">
<h4 data-i18n="modes.html2canvas">HTML2Canvas</h4>
<p data-i18n="modes.html2canvasDesc">兼容性好，支持复杂样式</p>
</div>
</div>
</label>
<label class="mode-card" data-mode="native">
<input type="radio" name="defaultCaptureMode" value="native">
<div class="mode-content">
<div class="mode-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="currentColor"/>
</svg>
</div>
<div class="mode-details">
<h4 data-i18n="modes.native">原生模式</h4>
<p data-i18n="modes.nativeDesc">使用Chrome API，速度快</p>
</div>
</div>
</label>
</div>
</div>
<div class="action-section">
<button id="startCapture" class="capture-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
</svg>
<span data-i18n="ui.startCapture">开始截图</span>
</button>
<div class="quick-tips">
<div class="tip-item">
<span class="tip-icon">💡</span>
<span class="tip-text" data-i18n="tips.clickIcon">点击插件图标可直接开始截图</span>
</div>
<div class="tip-item">
<span class="tip-icon">⚙️</span>
<span class="tip-text" data-i18n="tips.rightClickMenu">右键菜单中也有"截图设置"选项</span>
</div>
</div>
</div>
<div class="instructions">
<div class="instructions-header" id="instructionsToggle">
<h3 data-i18n="instructions.title">使用说明</h3>
<svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
</svg>
</div>
<div class="instructions-content" id="instructionsContent">
<ol id="instructionSteps">
<li>选择截图模式（原生/HTML2Canvas/SnapDOM）</li>
<li>点击"开始截图"按钮</li>
<li>将鼠标悬停在要截图的元素上</li>
<li>点击选中的元素进行截图</li>
<li>截图将自动保存到下载文件夹</li>
<li>按ESC键可以取消选择</li>
</ol>
<div style="margin-top: 10px; font-size: 12px; color: #666;">
<strong data-i18n="instructions.modeDescription">模式说明：</strong><br>
<div id="modeDetails">
• 原生模式：使用Chrome API，速度快<br>
• HTML2Canvas：兼容性好，支持复杂样式<br>
• SnapDOM：高性能，支持SVG渲染
</div>
</div>
</div>
</div>
</div>
</div>
<script src="lang/index.js"></script>
<script src="popup.js"></script>
</body>
</html>