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

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

Browse Source
This commit is contained in:
hubian
2026-04-23 16:50:41 +08:00
parent b2900febf9
commit 56975f9b0d
2 changed files with 52 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;