style(config): move console panel to bottom left sidebar area

This commit is contained in:
jocayn
2026-06-13 17:40:37 +08:00
parent e48f52fc29
commit 8ffb56d0ad
+43 -34
View File
@@ -92,6 +92,12 @@
align-items: start; align-items: start;
} }
.sidebar-wrapper {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar { .sidebar {
background: var(--bg-card); background: var(--bg-card);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@@ -473,7 +479,6 @@
/* Logger Terminal */ /* Logger Terminal */
.console-panel { .console-panel {
margin-top: 2rem;
background: #090d16; background: #090d16;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px; border-radius: 16px;
@@ -482,8 +487,8 @@
.console-header { .console-header {
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
padding: 0.75rem 1.5rem; padding: 0.6rem 1rem;
font-size: 0.8rem; font-size: 0.78rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
@@ -494,15 +499,16 @@
} }
.console-logs { .console-logs {
padding: 1rem 1.5rem; padding: 0.8rem 1rem;
height: 120px; height: 180px;
overflow-y: auto; overflow-y: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.8rem;
color: #a78bfa; color: #a78bfa;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
word-break: break-all;
} }
.log-line { .log-line {
@@ -667,21 +673,37 @@
<!-- Content Layout --> <!-- Content Layout -->
<div class="layout"> <div class="layout">
<!-- Sidebar Navigation --> <!-- Sidebar and Console Wrapper -->
<nav class="sidebar"> <div class="sidebar-wrapper">
<button class="nav-btn active" onclick="switchTab('subs')" id="btn-tab-subs"> <!-- Sidebar Navigation -->
<i data-lucide="link"></i>订阅源管理 <nav class="sidebar">
</button> <button class="nav-btn active" onclick="switchTab('subs')" id="btn-tab-subs">
<button class="nav-btn" onclick="switchTab('proxies')" id="btn-tab-proxies"> <i data-lucide="link"></i>订阅源管理
<i data-lucide="shield"></i>代理节点列表 </button>
</button> <button class="nav-btn" onclick="switchTab('proxies')" id="btn-tab-proxies">
<button class="nav-btn" onclick="switchTab('dns')" id="btn-tab-dns"> <i data-lucide="shield"></i>代理节点列表
<i data-lucide="globe"></i>DNS 规则配置 </button>
</button> <button class="nav-btn" onclick="switchTab('dns')" id="btn-tab-dns">
<button class="nav-btn" onclick="switchTab('history')" id="btn-tab-history"> <i data-lucide="globe"></i>DNS 规则配置
<i data-lucide="history"></i>生成历史记录 </button>
</button> <button class="nav-btn" onclick="switchTab('history')" id="btn-tab-history">
</nav> <i data-lucide="history"></i>生成历史记录
</button>
</nav>
<!-- Console Terminal -->
<div class="console-panel">
<div class="console-header">
<span>控制台日志</span>
<button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="clearLogs()">
清空
</button>
</div>
<div class="console-logs" id="console-logs">
<div class="log-line log-info">系统初始化完成。请添加订阅源或拉取配置。</div>
</div>
</div>
</div>
<!-- Main Panel --> <!-- Main Panel -->
<main class="main-content"> <main class="main-content">
@@ -782,19 +804,6 @@
</section> </section>
</main> </main>
</div> </div>
<!-- Console Terminal -->
<div class="console-panel">
<div class="console-header">
<span>控制台日志 (Console Logs)</span>
<button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="clearLogs()">
清空日志
</button>
</div>
<div class="console-logs" id="console-logs">
<div class="log-line log-info">系统初始化完成。请添加订阅源或拉取配置。</div>
</div>
</div>
</div> </div>
<!-- Drawer Modal for editing a node's details --> <!-- Drawer Modal for editing a node's details -->