feat: 右下角添加到顶/到底导航按钮

2026-04-20 12:12:44 +08:00
parent 14f39c8954
commit cb93b8e3e2
10 changed files with 29449 additions and 255 deletions
--- a/app.py
+++ b/app.py
@@ -270,6 +270,12 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .type-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
+        /* 导航按钮样式 */
+        .nav-buttons { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
+        .nav-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; background: #334155; border: 1px solid #475569; }
+        .nav-btn:hover { background: #475569; transform: scale(1.1); }
+        .nav-btn i { font-size: 20px; color: #94a3b8; }
+        .nav-btn:hover i { color: #f1f5f9; }
    </style>
 </head>
 <body class="min-h-screen text-gray-100">
@@ -424,6 +430,16 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
        </div>
    </div>

+    <!-- 导航按钮 -->
+    <div class="nav-buttons">
+        <button onclick="scrollToTop()" class="nav-btn" title="回到顶部">
+            <i class="ri-arrow-up-line"></i>
+        </button>
+        <button onclick="scrollToBottom()" class="nav-btn" title="滚动到底部">
+            <i class="ri-arrow-down-line"></i>
+        </button>
+    </div>
+
    <script>
        let projects = [];
        let currentFilter = 'all';
@@ -822,6 +838,14 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
            }
        }

+        function scrollToTop() {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+
+        function scrollToBottom() {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        }
+
        // 连接状态检查
        let connectionOk = true;