feat: 连接状态移到侧边栏标题后面,点击标题回到首页

This commit is contained in:
2026-04-20 18:24:29 +08:00
parent ca7dc10e92
commit 16ed5459fa
3 changed files with 210 additions and 1702 deletions

View File

@@ -769,36 +769,32 @@ INDEX_TEMPLATE = '''
.sidebar a:hover, .sidebar a.active { background: #495057; color: #fff; }
.content { padding: 20px; }
/* 连接状态指示器 */
/* 连接状态指示器 - inline 显示在标题后面 */
.connection-status {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 9999;
margin-left: 10px;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
transition: all 0.3s ease;
}
.connection-status.online {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
background: rgba(40, 167, 69, 0.2);
color: #28a745;
}
.connection-status.offline {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
background: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
.connection-status.connecting {
background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
color: #333;
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
}
.connection-status .status-icon {
margin-right: 8px;
margin-right: 4px;
}
.connection-status .status-text {
font-size: 14px;
font-weight: 500;
}
.connection-status.offline .status-text {
@@ -809,10 +805,18 @@ INDEX_TEMPLATE = '''
50% { opacity: 0.6; }
}
/* 侧边栏标题可点击 */
.sidebar-title {
cursor: pointer;
}
.sidebar-title:hover {
opacity: 0.8;
}
/* 离线遮罩 */
.offline-overlay {
position: fixed;
top: 40px;
top: 0;
left: 0;
right: 0;
bottom: 0;
@@ -843,10 +847,6 @@ INDEX_TEMPLATE = '''
color: #666;
}
/* 内容区域偏移(为状态栏留空间) */
.content.with-status-bar {
padding-top: 60px;
}
.card { margin-bottom: 8px; transition: transform 0.2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card-body { padding: 8px 12px; }
@@ -872,12 +872,6 @@ INDEX_TEMPLATE = '''
</style>
</head>
<body>
<!-- 连接状态指示器 -->
<div class="connection-status online" id="connectionStatus">
<span class="status-icon"><i class="bi bi-wifi"></i></span>
<span class="status-text">已连接</span>
</div>
<!-- 离线遮罩 -->
<div class="offline-overlay" id="offlineOverlay">
<div class="offline-message">
@@ -893,8 +887,14 @@ INDEX_TEMPLATE = '''
<div class="row">
<!-- 侧边栏 -->
<div class="col-md-2 sidebar p-0">
<div class="p-3 border-bottom border-secondary">
<h5><i class="bi bi-bookmark-star"></i> Xian Favor</h5>
<div class="p-3 border-bottom border-secondary sidebar-title" onclick="goHome()">
<h5>
<i class="bi bi-bookmark-star"></i> Xian Favor
<span class="connection-status online" id="connectionStatus">
<span class="status-icon"><i class="bi bi-wifi"></i></span>
<span class="status-text">已连接</span>
</span>
</h5>
</div>
<nav>
<a href="#" class="active" data-filter="all"><i class="bi bi-inbox"></i> 全部</a>
@@ -917,7 +917,7 @@ INDEX_TEMPLATE = '''
</div>
<!-- 主内容 -->
<div class="col-md-10 content with-status-bar">
<div class="col-md-10 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>
@@ -1574,6 +1574,37 @@ function checkOnlineBeforeAction(actionName) {
return true;
}
// 回到首页(点击标题)
function goHome() {
// 重置过滤条件
currentFilter = { type: '', status: '', starred: null };
currentSort = { sort_by: '', sort_order: '' };
currentPage = 1;
// 清空搜索
document.getElementById('searchInput').value = '';
document.getElementById('typeFilter').value = '';
document.getElementById('sortBy').value = '';
document.getElementById('sortOrder').value = 'desc';
// 如果在特殊视图(回收站、草稿箱),退出
if (trashView) {
trashView = false;
}
if (draftView) {
draftView = false;
currentDraftId = null;
stopAutoSave();
}
// 更新侧边栏选中状态
document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'));
document.querySelector('.sidebar a[data-filter="all"]').classList.add('active');
// 刷新数据
refreshData();
}
function debounce(fn, delay) {
let timer;
return function(...args) {