shen/Snap-Solver
1
0
Fork 0
mirror of https://github.com/Zippland/Snap-Solver.git synced 2026-02-17 08:29:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化界面样式，添加Markdown解析和代码高亮功能，移除不必要的按钮和事件，简化状态指示器，增强思考过程的动态效果。

Browse Source
This commit is contained in:
Zylan
2025-04-02 12:52:37 +08:00
parent 24285dff0c
commit cb01415e25
3 changed files with 1072 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
templates/index.html
View File

@@ -21,6 +21,11 @@
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<!-- 添加Markdown解析库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- 添加代码高亮库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/highlight.min.js"></script>
</head>
<body class="app-container">
<header class="app-header">
@@ -28,6 +33,9 @@
<h1>Snap Solver</h1>
<div id="connectionStatus" class="status disconnected">未连接</div>
<div class="header-buttons">
<button id="captureBtn" class="btn-icon capture-btn-highlight" title="截图" disabled>
<i class="fas fa-camera"></i>
</button>
<button id="themeToggle" class="btn-icon" title="切换主题">
<i class="fas fa-moon"></i>
</button>
@@ -53,24 +61,10 @@
<main class="app-main">
<div class="content-panel">
<div class="capture-section">
<div class="toolbar">
<div class="toolbar-buttons">
<div class="button-group">
<button id="captureBtn" class="btn-primary" disabled>
<i class="fas fa-camera"></i>
<span>截图</span>
</button>
<button id="cropBtn" class="btn-secondary hidden">
<i class="fas fa-crop"></i>
<span>裁剪</span>
</button>
</div>
</div>
</div>
<div id="emptyState" class="empty-state">
<i class="fas fa-camera-retro"></i>
<h3>准备好开始了吗？</h3>
<p>点击"截图"按钮捕获屏幕，然后使用AI分析图像或提取文本。您可以截取数学题、代码或任何需要帮助的内容。</p>
<p>点击顶部状态栏的"相机"图标捕获屏幕，然后使用AI分析图像或提取文本。您可以截取数学题、代码或任何需要帮助的内容。</p>
<p class="star-prompt">如果觉得好用，别忘了给项目点个 Star ⭐</p>
</div>
<div id="imagePreview" class="image-preview hidden">
@@ -79,44 +73,43 @@
</div>
<div class="analysis-button">
<div class="button-group">
<button id="sendToClaude" class="btn-primary hidden">
<button id="sendToClaude" class="btn-action hidden">
<i class="fas fa-robot"></i>
<span>发送图片至AI</span>
<span>发送至AI</span>
</button>
<button id="extractText" class="btn-primary hidden">
<button id="extractText" class="btn-action hidden">
<i class="fas fa-font"></i>
<span>提取图中文本</span>
<span>提取文本</span>
</button>
</div>
</div>
<div id="textEditor" class="text-editor hidden">
<textarea id="extractedText" rows="4" placeholder="提取的文本将显示在这里..."></textarea>
<button id="sendExtractedText" class="btn-primary">
<i class="fas fa-paper-plane"></i>
<span>发送文本至AI</span>
</button>
</div>
<textarea id="extractedText" class="extracted-text-area hidden" rows="6" placeholder="提取的文本将显示在这里..."></textarea>
<button id="sendExtractedText" class="btn-action send-text-btn hidden">
<i class="fas fa-paper-plane"></i>
<span>发送文本至AI</span>
</button>
</div>
</div>
<div id="claudePanel" class="claude-panel hidden">
<div class="panel-header">
<div class="header-title">
<h2>分析结果</h2>
<div class="analysis-status">
<div class="status-light"></div>
<h2><i class="fas fa-chart-bar"></i> 分析结果</h2>
<div class="analysis-indicator">
<div class="progress-line"></div>
<div class="status-text">准备中</div>
</div>
</div>
<button class="btn-icon" id="closeClaudePanel">
<button class="btn-icon" id="closeClaudePanel" title="关闭分析结果">
<i class="fas fa-times"></i>
</button>
</div>
<div id="thinkingSection" class="thinking-section hidden">
<div class="thinking-header" id="thinkingToggle">
<div class="thinking-header" id="thinkingToggle" title="点击查看AI思考过程">
<div class="thinking-title">
<i class="fas fa-brain"></i>
<h3>AI思考过程 <span class="thinking-hint">(点击展开/折叠)</span></h3>
<h3>思考过程<span class="dots-animation"></span></h3>
</div>
<button class="toggle-btn">
<i class="fas fa-chevron-down"></i>