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

2026-04-26 17:16:38 +08:00
3 changed files with 71 additions and 11 deletions
--- a/www/app.js
+++ b/www/app.js
@@ -179,14 +179,24 @@ function openConversation(id) {

      <!-- 功能开关栏 -->
      <div class="feature-bar">
-        <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>
-          <span>深度思考</span>
-        </button>
-        <button class="feature-btn search-btn ${enableSearch ? 'active' : ''}" id="searchBtn">
-          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
-          <span>联网搜索</span>
-        </button>
+        <div class="feature-left">
+          <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>
+            <span>深度思考</span>
+          </button>
+          <button class="feature-btn search-btn ${enableSearch ? 'active' : ''}" id="searchBtn">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+            <span>联网搜索</span>
+          </button>
+        </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">
@@ -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('input', (e) => autoResize(e.target));
--- a/www/index.html
+++ b/www/index.html
@@ -8,12 +8,12 @@
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <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">
 </head>
 <body>
  <div id="app"></div>
-  <script src="marked.min.js?v=2.3.0"></script>
-  <script src="app.js?v=2.3.0"></script>
+  <script src="marked.min.js?v=2.3.1"></script>
+  <script src="app.js?v=2.3.1"></script>
 </body>
 </html>
--- a/www/style.css
+++ b/www/style.css
@@ -585,12 +585,24 @@ body {
 /* 功能开关栏 */
 .feature-bar {
  display: flex;
+  justify-content: space-between;
+  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid var(--border-color);
 }

+.feature-left {
+  display: flex;
+  gap: 8px;
+}
+
+.feature-right {
+  display: flex;
+  gap: 4px;
+}
+
 .feature-btn {
  display: flex;
  align-items: center;
@@ -620,6 +632,18 @@ body {
  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 {
  margin-bottom: 12px;