Compare commits

..

1 Commits

Author SHA1 Message Date
c21270195a feat: 工具按钮放输入框右边,面板向上弹出 2026-04-14 17:15:56 +08:00

View File

@@ -131,36 +131,37 @@
/* 快捷语句 - 横向扁平 */
.quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
/* 工具折叠面板 */
.tools-collapsible { position: relative; margin-bottom: 8px; }
/* 工具折叠面板 - 放在输入行内 */
.tools-collapsible { position: relative; }
.tools-toggle-btn {
padding: 8px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px;
cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #666;
transition: all 0.2s;
width: 40px; height: 40px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px;
cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666;
transition: all 0.2s; position: relative;
}
.tools-toggle-btn:hover { background: #e8e8e8; border-color: #10a37f; color: #10a37f; }
.tools-toggle-btn.active { background: #e8f5e9; border-color: #10a37f; color: #10a37f; }
.tools-badge {
background: #10a37f; color: white; font-size: 11px; padding: 1px 5px; border-radius: 10px;
min-width: 16px; text-align: center;
position: absolute; top: -4px; right: -4px;
background: #10a37f; color: white; font-size: 10px; padding: 1px 4px; border-radius: 10px;
min-width: 14px; text-align: center;
}
.tools-panel {
display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px;
background: white; border: 1px solid #e0e0e0; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 200px; z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 180px; z-index: 100;
}
.tools-panel.show { display: block; }
.tools-panel-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 500; color: #333;
padding: 10px 14px; border-bottom: 1px solid #eee; font-weight: 500; color: #333; font-size: 13px;
}
.tools-panel-header button { background: none; border: none; color: #999; cursor: pointer; padding: 4px; }
.tools-panel-header button { background: none; border: none; color: #999; cursor: pointer; padding: 2px; }
.tools-panel-header button:hover { color: #666; }
.tools-panel-content { padding: 12px 16px; max-height: 300px; overflow-y: auto; }
.tool-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.tool-item input { width: 16px; height: 16px; }
.tool-item label { cursor: pointer; font-size: 14px; color: #333; display: flex; align-items: center; gap: 6px; }
.tool-item label i { color: #10a37f; }
.tools-panel-content { padding: 10px 14px; max-height: 280px; overflow-y: auto; }
.tool-item { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.tool-item input { width: 14px; height: 14px; }
.tool-item label { cursor: pointer; font-size: 13px; color: #333; display: flex; align-items: center; gap: 4px; }
.tool-item label i { color: #10a37f; font-size: 14px; }
.tool-item.disabled { opacity: 0.5; }
.tool-item.disabled label { color: #999; cursor: not-allowed; }
.add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; flex-shrink: 0; }
@@ -226,29 +227,28 @@
<div class="input-container">
<div class="input-area">
<!-- 工具选择折叠按钮 -->
<div class="tools-collapsible">
<button class="tools-toggle-btn" onclick="toggleToolsPanel()" title="工具设置">
<i class="ri-tools-line"></i>
<span class="tools-badge" id="toolsBadge" style="display:none;">0</span>
</button>
<div class="tools-panel" id="toolsPanel">
<div class="tools-panel-header">
<span>工具设置</span>
<button onclick="toggleToolsPanel()"><i class="ri-close-line"></i></button>
</div>
<div class="tools-panel-content" id="toolsPanelContent"></div>
</div>
<!-- 工具警告提示 -->
<div id="tool-warning-tip" style="display:none;margin-top:8px;padding:8px 12px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:13px;color:#856404;"></div>
</div>
<div class="input-row">
<input type="file" id="fileInput" multiple accept="image/*,.pdf,.txt,.md,.json,.csv,.doc,.docx" style="display:none" onchange="handleFileUpload(event)">
<button class="upload-btn" onclick="document.getElementById('fileInput').click()" title="上传文件"><i class="ri-attachment-2"></i></button>
<textarea id="messageInput" placeholder="输入消息..." rows="1"></textarea>
<!-- 工具按钮放在右边 -->
<div class="tools-collapsible">
<button class="tools-toggle-btn" onclick="toggleToolsPanel()" title="工具设置">
<i class="ri-tools-line"></i>
<span class="tools-badge" id="toolsBadge" style="display:none;">0</span>
</button>
<div class="tools-panel" id="toolsPanel">
<div class="tools-panel-header">
<span>工具设置</span>
<button onclick="toggleToolsPanel()"><i class="ri-close-line"></i></button>
</div>
<div class="tools-panel-content" id="toolsPanelContent"></div>
</div>
</div>
<button class="send-btn" id="sendBtn" onclick="sendMessage()"><i class="ri-send-plane-fill"></i></button>
</div>
<!-- 工具警告提示 -->
<div id="tool-warning-tip" style="display:none;margin-top:4px;padding:6px 10px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:12px;color:#856404;"></div>
<div class="file-preview-area" id="filePreviewArea"></div>
<div class="quick-phrases-bar">
<button class="add-phrase-btn" onclick="showAddPhraseModal()"><i class="ri-add-line"></i> 添加</button>