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

feat: 添加置顶置底导航按钮

Browse Source
This commit is contained in:
hubian
2026-04-26 17:16:38 +08:00
parent 7977057be5
commit 05e900c5af
3 changed files with 71 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
www/app.js
View File

@@ -179,6 +179,7 @@ function openConversation(id) {
<!-- 功能开关栏 --> <!-- 功能开关栏 -->
<div class="feature-bar"> <div class="feature-bar">
<div class="feature-left">
<button class="feature-btn thinking-btn ${enableThinking ? 'active' : ''}" id="thinkingBtn"> <button class="feature-btn thinking-btn ${enableThinking ? 'active' : ''}" id="thinkingBtn">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
<span>深度思考</span> <span>深度思考</span>
@@ -188,6 +189,15 @@ function openConversation(id) {
<span>联网搜索</span> <span>联网搜索</span>
</button> </button>
</div> </div>
<div class="feature-right">
<button class="feature-btn nav-btn" id="scrollTopBtn" title="回到顶部">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
</button>
<button class="feature-btn nav-btn" id="scrollBottomBtn" title="回到底部">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
</button>
</div>
</div>
<div class="input-area"> <div class="input-area">
<button class="attach-btn" id="attachBtn" title="上传文件"> <button class="attach-btn" id="attachBtn" title="上传文件">
@@ -264,6 +274,32 @@ function openConversation(id) {
}); });
} }
// 绑定置顶置底按钮事件
const scrollTopBtn = document.getElementById('scrollTopBtn');
const scrollBottomBtn = document.getElementById('scrollBottomBtn');
if (scrollTopBtn) {
scrollTopBtn.addEventListener('click', () => {
if (messagesContainer) {
messagesContainer.scrollTo({
top: 0,
behavior: 'smooth'
});
}
});
}
if (scrollBottomBtn) {
scrollBottomBtn.addEventListener('click', () => {
if (messagesContainer) {
messagesContainer.scrollTo({
top: messagesContainer.scrollHeight,
behavior: 'smooth'
});
}
});
}
// 绑定输入事件 // 绑定输入事件
userInput.addEventListener('keydown', handleKeyDown); userInput.addEventListener('keydown', handleKeyDown);
userInput.addEventListener('input', (e) => autoResize(e.target)); userInput.addEventListener('input', (e) => autoResize(e.target));

6
www/index.html
View File

@@ -8,12 +8,12 @@
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<title>AI助手</title> <title>AI助手</title>
<link rel="stylesheet" href="style.css?v=2.3.0"> <link rel="stylesheet" href="style.css?v=2.3.1">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="marked.min.js?v=2.3.0"></script> <script src="marked.min.js?v=2.3.1"></script>
<script src="app.js?v=2.3.0"></script> <script src="app.js?v=2.3.1"></script>
</body> </body>
</html> </html>

24
www/style.css
View File

@@ -585,12 +585,24 @@ body {
/* 功能开关栏 */ /* 功能开关栏 */
.feature-bar { .feature-bar {
display: flex; display: flex;
justify-content: space-between;
align-items: center;
gap: 8px; gap: 8px;
padding: 8px 16px; padding: 8px 16px;
background: rgba(255,255,255,0.95); background: rgba(255,255,255,0.95);
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
.feature-left {
display: flex;
gap: 8px;
}
.feature-right {
display: flex;
gap: 4px;
}
.feature-btn { .feature-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -620,6 +632,18 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
/* 导航按钮样式 */
.nav-btn {
padding: 6px 8px;
min-width: 32px;
}
.nav-btn:hover {
background: var(--primary);
border-color: var(--primary);
color: white;
}
/* 思考内容块 */ /* 思考内容块 */
.thinking-block { .thinking-block {
margin-bottom: 12px; margin-bottom: 12px;