feat: 筛选按钮改为右侧固定导航按钮

This commit is contained in:
2026-04-23 16:50:41 +08:00
parent b2900febf9
commit 56975f9b0d
2 changed files with 52 additions and 26 deletions

36
app.py
View File

@@ -959,6 +959,17 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
.nav-btn:hover { background: #475569; transform: scale(1.1); }
.nav-btn i { font-size: 20px; color: #94a3b8; }
.nav-btn:hover i { color: #f1f5f9; }
.filter-nav { position: fixed; right: 20px; top: 120px; z-index: 100; display: flex; flex-direction: column; gap: 6px; }
.filter-nav-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; background: #1e293b; border: 1px solid #334155; }
.filter-nav-btn:hover { background: #334155; transform: scale(1.1); }
.filter-nav-btn i { font-size: 18px; color: #94a3b8; }
.filter-nav-btn:hover i { color: #f1f5f9; }
.filter-nav-btn.active { background: #3b82f6; border-color: #3b82f6; }
.filter-nav-btn.active i { color: #fff; }
.filter-nav-btn.add-btn { background: #22c55e; border-color: #22c55e; }
.filter-nav-btn.add-btn i { color: #fff; }
.filter-nav-btn.add-btn:hover { background: #16a34a; }
.filter-nav-divider { height: 1px; background: #475569; margin: 4px 8px; }
.tab-btn { border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: #3b82f6; }
.cron-card { transition: all 0.2s; }
@@ -1057,15 +1068,15 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 筛选 -->
<div class="flex gap-2 mb-4 flex-wrap">
<button onclick="filterType('all')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="all">全部</button>
<button onclick="filterType('web')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="web">Web服务</button>
<button onclick="filterType('cli')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="cli">CLI工具</button>
<button onclick="filterType('extension')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="extension">插件</button>
<button onclick="showAddServiceModal()" class="btn bg-green-600 hover:bg-green-700 px-3 py-1 rounded-lg text-sm flex items-center gap-1 ml-2">
<i class="ri-add-circle-line"></i> 新增服务
</button>
<!-- 筛选导航按钮(右侧固定) -->
<div class="filter-nav">
<button onclick="filterType('all')" class="filter-nav-btn" data-type="all" title="全部"><i class="ri-apps-line"></i></button>
<button onclick="filterType('web')" class="filter-nav-btn" data-type="web" title="Web服务"><i class="ri-server-line"></i></button>
<button onclick="filterType('custom')" class="filter-nav-btn" data-type="custom" title="自定义服务"><i class="ri-global-line"></i></button>
<button onclick="filterType('cli')" class="filter-nav-btn" data-type="cli" title="CLI工具"><i class="ri-terminal-box-line"></i></button>
<button onclick="filterType('extension')" class="filter-nav-btn" data-type="extension" title="插件"><i class="ri-chrome-line"></i></button>
<div class="filter-nav-divider"></div>
<button onclick="showAddServiceModal()" class="filter-nav-btn add-btn" title="新增服务"><i class="ri-add-circle-line"></i></button>
</div>
<!-- 项目列表 -->
@@ -1380,9 +1391,8 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
function filterType(type) {
currentFilter = type;
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.classList.toggle('bg-blue-600', btn.dataset.type === type);
btn.classList.toggle('bg-gray-700', btn.dataset.type !== type);
document.querySelectorAll('.filter-nav-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.type === type);
});
renderProjects();
}
@@ -2126,6 +2136,8 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
// 初始化
loadProjects();
// 默认选中"全部"筛选按钮
document.querySelector('.filter-nav-btn[data-type="all"]')?.classList.add('active');
let refreshIntervalMs = parseInt(localStorage.getItem('refreshInterval') || '30') * 1000;
document.getElementById('refreshInterval').value = refreshIntervalMs / 1000;

View File

@@ -1,8 +1,8 @@
[2026-04-23 12:56:53] ==================================================
[2026-04-23 12:56:53] 项目服务管理面板 v2.0.0 启动
[2026-04-23 12:56:53] 访问地址: http://localhost:19013
[2026-04-23 12:56:53] 进程PID: 1025674
[2026-04-23 12:56:53] ==================================================
[2026-04-23 16:49:38] ==================================================
[2026-04-23 16:49:38] 项目服务管理面板 v2.0.0 启动
[2026-04-23 16:49:38] 访问地址: http://localhost:19013
[2026-04-23 16:49:38] 进程PID: 1115919
[2026-04-23 16:49:38] ==================================================
* Serving Flask app 'app'
* Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
@@ -10,12 +10,26 @@ WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://127.0.0.1:19013
* Running on http://192.168.2.17:19013
Press CTRL+C to quit
127.0.0.1 - - [23/Apr/2026 12:56:55] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 12:56:55] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 12:56:57] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 12:56:59] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 12:57:00] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 12:57:00] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 12:57:02] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 12:57:02] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 12:57:03] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:49:48] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:49:49] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:49:58] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:49:59] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:06] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:07] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:08] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:09] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:16] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:18] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:19] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:27] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:28] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:29] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:33] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:50:34] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:36] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:36] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:37] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:50:38] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:50:38] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:50:39] "GET /api/projects HTTP/1.1" 200 -