coder/ai-chat-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 快捷语句添加按钮固定左侧，支持鼠标滚轮横向滚动

Browse Source
This commit is contained in:
hubian
2026-04-12 20:24:06 +08:00
parent c6f157aa97
commit 7d6a345a7d
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
templates/index.html
View File

@@ -77,12 +77,13 @@
.send-btn:disabled { background: #ccc; cursor: not-allowed; }
/* 快捷语句 - 横向扁平 */
.quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; overflow-x: auto; padding: 4px 0; }
.quick-phrases-bar::-webkit-scrollbar { height: 4px; }
.quick-phrases-bar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.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; }
.quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
.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; }
.add-phrase-btn:hover { background: #e8e8e8; }
.phrase-list { display: flex; gap: 6px; flex: 1; }
.phrase-list-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.phrase-list-wrapper::-webkit-scrollbar { height: 4px; }
.phrase-list-wrapper::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.phrase-list { display: flex; gap: 6px; padding: 4px 0; }
.phrase-tag { padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 16px; cursor: pointer; font-size: 13px; color: #333; white-space: nowrap; transition: all 0.2s; position: relative; }
.phrase-tag:hover { background: #e8f5e9; border-color: #10a37f; }
.phrase-tag .tag-delete { display: none; margin-left: 6px; color: #999; }
@@ -135,7 +136,9 @@
</div>
<div class="quick-phrases-bar">
<button class="add-phrase-btn" onclick="showAddPhraseModal()"><i class="ri-add-line"></i> 添加</button>
<div class="phrase-list" id="quickPhrasesList"></div>
<div class="phrase-list-wrapper" id="phraseListWrapper" onwheel="scrollPhrases(event)">
<div class="phrase-list" id="quickPhrasesList"></div>
</div>
</div>
</div>
</div>
@@ -414,6 +417,13 @@
renderQuickPhrases();
}
// 鼠标滚轮横向滚动
function scrollPhrases(e) {
const wrapper = document.getElementById('phraseListWrapper');
wrapper.scrollLeft += e.deltaY;
e.preventDefault();
}
function showAddPhraseModal() {
document.getElementById('phraseModal').classList.add('show');
document.getElementById('newPhraseInput').value = '';