feat: 添加帮助按钮和使用说明弹框

index.html

@@ -21,6 +21,12 @@
             <span class="logo">🦙</span>
             <span class="app-title">Metona Ollama</span>
             <span class="app-version">v2.2.0</span>
+            <button class="icon-btn help-btn" id="btnHelp" title="使用帮助">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </button>
         </div>
         <div class="header-right">
             <div class="conn-status pending" id="connStatus" title="连接状态">
@@ -234,6 +240,80 @@
     </div>
 </div>
 
+<!-- ═══════════════ 帮助模态框 ═══════════════ -->
+<div class="modal-overlay" id="helpModal" style="display:none;">
+    <div class="modal">
+        <div class="modal-header">
+            <h3>📖 使用帮助</h3>
+            <button class="icon-btn" id="btnCloseHelp">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="help-section">
+                <h4>🚀 快速开始</h4>
+                <ol>
+                    <li>确保 Ollama 已启动（默认 <code>http://127.0.0.1:11434</code>）</li>
+                    <li>顶部下拉框选择一个模型</li>
+                    <li>输入消息，按 <kbd>Enter</kbd> 发送，<kbd>Shift+Enter</kbd> 换行</li>
+                </ol>
+            </div>
+            <div class="help-section">
+                <h4>💬 聊天功能</h4>
+                <ul>
+                    <li><strong>流式回复</strong> — 实时打字效果，随时点 ■ 停止</li>
+                    <li><strong>Think 推理</strong> — 🧠 按钮开启深度思考（需模型支持）</li>
+                    <li><strong>上下文长度</strong> — 设置中调整 <code>num_ctx</code>，越大记忆越长</li>
+                    <li><strong>系统提示词</strong> — 设置中开启，定义 AI 的角色和行为</li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h4>📎 文件与图片</h4>
+                <ul>
+                    <li><strong>📷 上传图片</strong> — 图标按钮上传，模型需支持 Vision</li>
+                    <li><strong>📄 上传文件</strong> — 支持 50+ 种文本/代码格式，单文件 ≤500KB</li>
+                    <li>文件内容自动以代码块格式发送给模型分析</li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h4>📚 知识库 (RAG)</h4>
+                <ul>
+                    <li>点击顶部 📚 按钮打开知识库管理</li>
+                    <li>创建集合 → 选择嵌入模型（推荐 <code>nomic-embed-text</code> 等）</li>
+                    <li>上传文档，自动分块并生成向量索引</li>
+                    <li>开启 RAG 检索后，聊天时自动检索相关文档注入回答</li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h4>🕐 历史记录</h4>
+                <ul>
+                    <li>所有会话自动保存到浏览器本地（IndexedDB）</li>
+                    <li>点击 🕐 按钮查看、搜索、恢复历史会话</li>
+                    <li>支持导出 <code>.metona</code> 加密备份文件</li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h4>⚙️ 设置</h4>
+                <ul>
+                    <li><strong>服务地址</strong> — 修改 Ollama API 端点</li>
+                    <li><strong>释放显存</strong> — 卸载当前模型，释放 GPU 内存</li>
+                    <li><strong>跨域问题</strong> — 启动 Ollama 时设置 <code>OLLAMA_ORIGINS="*"</code></li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h4>⚡ 快捷键</h4>
+                <table class="help-shortcuts">
+                    <tr><td><kbd>Enter</kbd></td><td>发送消息</td></tr>
+                    <tr><td><kbd>Shift + Enter</kbd></td><td>换行</td></tr>
+                    <tr><td><kbd>Esc</kbd></td><td>关闭弹窗</td></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- ═══════════════ 知识库管理模态框 ═══════════════ -->
 <div class="modal-overlay" id="kbModal" style="display:none;">
     <div class="modal modal-lg">