hz4th_coder/project-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hubian
2026-04-23 16:56:57 +08:00
parent f8a32ab6be
commit 8579d58890
2 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;