fix: 筛选按钮改为顶部横向带文字显示

This commit is contained in:
2026-04-23 16:56:57 +08:00
parent f8a32ab6be
commit 8579d58890
2 changed files with 45 additions and 51 deletions

40
app.py
View File

@@ -935,7 +935,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目服务管理面板 v2.3</title>
<title>项目服务管理面板 v2.4</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
@@ -959,17 +959,12 @@ 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; }
.filter-bar { position: sticky; top: 0; z-index: 50; display: flex; gap: 8px; padding: 12px 0; background: #0f172a; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.filter-bar-btn:hover { background: #334155; color: #f1f5f9; }
.filter-bar-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.filter-bar-btn.add-btn { background: #22c55e; border-color: #22c55e; color: #fff; }
.filter-bar-btn.add-btn:hover { background: #16a34a; }
.tab-btn { border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: #3b82f6; }
.cron-card { transition: all 0.2s; }
@@ -1068,15 +1063,14 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 筛选导航按钮(右侧固定) -->
<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 class="filter-bar">
<button onclick="filterType('all')" class="filter-bar-btn active" data-type="all"><i class="ri-apps-line"></i> 全部</button>
<button onclick="filterType('web')" class="filter-bar-btn" data-type="web"><i class="ri-server-line"></i> Web服务</button>
<button onclick="filterType('custom')" class="filter-bar-btn" data-type="custom"><i class="ri-global-line"></i> 自定义</button>
<button onclick="filterType('cli')" class="filter-bar-btn" data-type="cli"><i class="ri-terminal-box-line"></i> CLI工具</button>
<button onclick="filterType('extension')" class="filter-bar-btn" data-type="extension"><i class="ri-chrome-line"></i> 插件</button>
<button onclick="showAddServiceModal()" class="filter-bar-btn add-btn"><i class="ri-add-circle-line"></i> 新增服务</button>
</div>
<!-- 项目列表 -->
@@ -1391,7 +1385,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
function filterType(type) {
currentFilter = type;
document.querySelectorAll('.filter-nav-btn').forEach(btn => {
document.querySelectorAll('.filter-bar-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.type === type);
});
renderProjects();
@@ -2136,8 +2130,6 @@ 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 16:51:46] ==================================================
[2026-04-23 16:51:46] 项目服务管理面板 v2.0.0 启动
[2026-04-23 16:51:46] 访问地址: http://localhost:19013
[2026-04-23 16:51:46] 进程PID: 1116498
[2026-04-23 16:51:46] ==================================================
[2026-04-23 16:56:14] ==================================================
[2026-04-23 16:56:14] 项目服务管理面板 v2.0.0 启动
[2026-04-23 16:56:14] 访问地址: http://localhost:19013
[2026-04-23 16:56:14] 进程PID: 1118301
[2026-04-23 16:56:14] ==================================================
* 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,25 +10,27 @@ 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
192.168.2.14 - - [23/Apr/2026 16:51:46] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:51:47] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:51:48] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:51:48] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:51:49] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:51:49] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:51:57] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:51:58] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:51:59] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:51:59] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:06] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:52:07] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:07] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:08] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:52:09] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:52:09] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:17] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:18] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:52:19] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:52:19] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:52:20] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:52:22] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:17] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:17] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:18] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:19] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:56:20] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:21] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:22] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:27] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:28] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:29] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:56:30] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:36] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:37] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:56:38] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:38] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:39] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:56:40] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:47] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:48] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:49] "GET /api/projects HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 16:56:50] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:50] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 16:56:52] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 16:56:57] "GET / HTTP/1.1" 200 -