From ccbd24be115c3737a6b77ddc4b66b35514a992a3 Mon Sep 17 00:00:00 2001
From: hubian <908234780@qq.com>
Date: Tue, 21 Apr 2026 22:12:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=8C=89=E9=92=AE=E6=A0=8F=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧边栏固定在左侧（position: fixed）
- 顶部按钮栏固定在顶部（position: sticky）
- 主内容区留出侧边栏空间（margin-left: 200px）
- 滚动页面时侧边栏和顶部栏保持不动
---
 xian_favor/api.py | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/xian_favor/api.py b/xian_favor/api.py
index 7e25a44..d6544c2 100644
--- a/xian_favor/api.py
+++ b/xian_favor/api.py
@@ -764,10 +764,38 @@ INDEX_TEMPLATE = '''
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
     <style>
         body { background: #f8f9fa; }
-        .sidebar { height: 100vh; background: #343a40; color: #fff; }
+        /* 侧边栏固定在左侧 */
+        .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            width: 200px;
+            background: #343a40;
+            color: #fff;
+            z-index: 1000;
+            overflow-y: auto;
+        }
         .sidebar a { color: #adb5bd; text-decoration: none; padding: 10px 20px; display: block; }
         .sidebar a:hover, .sidebar a.active { background: #495057; color: #fff; }
-        .content { padding: 20px; }
+        
+        /* 主内容区留出侧边栏空间 */
+        .content {
+            margin-left: 200px;
+            padding: 20px;
+            padding-top: 0; /* 顶部按钮栏有 sticky，这里去掉顶部 padding */
+        }
+        
+        /* 顶部操作栏固定在主内容区顶部 */
+        .top-bar {
+            position: sticky;
+            top: 0;
+            background: #f8f9fa;
+            padding: 15px 20px;
+            margin: -20px -20px 20px -20px;
+            z-index: 100;
+            border-bottom: 1px solid #dee2e6;
+        }
         
         /* 连接状态指示器 - inline 显示在标题后面 */
         .connection-status {
@@ -886,7 +914,7 @@ INDEX_TEMPLATE = '''
 <div class="container-fluid">
     <div class="row">
         <!-- 侧边栏 -->
-        <div class="col-md-2 sidebar p-0">
+        <div class="sidebar p-0">
             <div class="p-3 border-bottom border-secondary sidebar-title" onclick="goHome()">
                 <h5>
                     <i class="bi bi-bookmark-star"></i> Xian Favor
@@ -917,7 +945,7 @@ INDEX_TEMPLATE = '''
         </div>
         
         <!-- 主内容 -->
-        <div class="col-md-10 content">
+        <div class="content">
             <!-- 提醒栏 -->
             <div id="reminderBar" class="alert alert-warning alert-dismissible fade show mb-3" style="display:none;" role="alert">
                 <i class="bi bi-bell-fill"></i> 
@@ -929,7 +957,7 @@ INDEX_TEMPLATE = '''
             </div>
             
             <!-- 顶部操作栏 -->
-            <div class="d-flex justify-content-between align-items-center mb-4">
+            <div class="top-bar d-flex justify-content-between align-items-center">
                 <div class="d-flex gap-2">
                     <input type="text" id="searchInput" class="form-control" placeholder="搜索..." style="width: 300px;">
                     <select id="typeFilter" class="form-select" style="width: 120px;">