feat: 侧边栏和顶部按钮栏固定显示

- 侧边栏固定在左侧(position: fixed)
- 顶部按钮栏固定在顶部(position: sticky)
- 主内容区留出侧边栏空间(margin-left: 200px)
- 滚动页面时侧边栏和顶部栏保持不动
This commit is contained in:
2026-04-21 22:12:03 +08:00
parent 16ed5459fa
commit ccbd24be11

View File

@@ -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;">