feat: 连接状态移到侧边栏标题后面,点击标题回到首页
This commit is contained in:
1819
logs/app.log
1819
logs/app.log
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user