Homelab/frontend/index.html at main · ghzhost/Homelab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Homelab</title>
<link rel="stylesheet" href="/static/vendor/leaflet/leaflet.css?v=1.9.4">
<link rel="stylesheet" href="/static/app.css?v=0.5.0-6">
</head>
<body>
<div class="wrap">
  <header>
    <div class="brand">
      <h1>Homelab</h1>
      <span class="sub" id="siteName"></span>
    </div>
    <nav>
      <button class="on" data-tab="overview">总览</button>
      <button data-tab="security">安全中心</button>
      <button data-tab="firewall">防火墙</button>
      <button data-tab="conns">连接</button>
      <button data-tab="ports">端口</button>
      <button data-tab="history">历史</button>
      <button data-tab="containers">容器</button>
      <button data-tab="settings">设置</button>
    </nav>
    <!-- 节点切换。只在配了节点时出现，单机部署看不到这个控件 -->
    <select id="nodePick" class="nodepick hide" title="切换查看的机器"></select>
    <div class="status"><span class="pulse" id="pulse"></span><span id="updated">连接中…</span></div>
  </header>

  <div id="demoBar" class="demobar hide">
    <b>演示模式</b>
    <span>页面上的所有数据都是仿真的，不来自任何真实机器。封禁、重启容器等操作
      会真的生效并反映在界面上，但只改内存状态，每小时重置一次。</span>
    <a href="https://github.com/mxx1111/Homelab" target="_blank" rel="noopener">
      在自己的机器上部署 →</a>
  </div>

  <div id="alertbar" class="alertbar"></div>

  <!-- 总览 -->
  <div id="overview">
    <section id="overviewSecurity" class="overview-security">
      <div class="overview-security-head">
        <div>
          <div class="eyebrow"><span class="dot info"></span>安全态势</div>
          <h2 id="overviewSecurityTitle">正在核查防护状态</h2>
          <p id="overviewSecurityNote">汇总 CrowdSec、节点防护与公网资产</p>
        </div>
        <button class="btn ghost" data-open-security>进入安全中心</button>
      </div>
      <div class="overview-security-body">
        <div>
          <div class="security-kpis" id="overviewSecurityKpis"></div>
          <div class="overview-attack-list" id="overviewAttackList"></div>
        </div>
        <div class="overview-map-wrap">
          <div class="overview-map" id="overviewMiniMap"></div>
          <div class="overview-map-caption">24 小时攻击来源概览 · 详细地图可在安全中心查看</div>
        </div>
      </div>
    </section>
    <div id="overviewCards" class="overview-cards"></div>
  </div>

  <!-- 防火墙 -->
  <div id="firewall" class="hide">
    <div class="grid">
      <!-- 操作区静态渲染，不参与轮询重绘，否则输入到一半会被清掉 -->
      <div class="card full flat">
        <h2><span class="dot info"></span>封禁操作</h2>
        <div id="fwOff" class="callout hide"></div>
        <div class="form">
          <input class="ip" id="banIp" placeholder="IP 或网段，如 1.2.3.4 / 1.2.3.0/24"
                 autocomplete="off" spellcheck="false">
          <select id="banDur"></select>
          <input class="why" id="banWhy" placeholder="备注（可选）" autocomplete="off">
          <button class="btn" id="banBtn">封禁</button>
        </div>
        <div class="form hide" id="tokenRow" style="margin-top:10px">
          <input id="tokenIn" type="password" placeholder="操作令牌" autocomplete="off"
                 style="flex:1; min-width:180px">
          <button class="btn ghost" id="tokenSave">记住</button>
        </div>
        <div class="note" id="fwNote"></div>
      </div>

      <div class="card full flat" id="fwNodes"></div>

      <div class="card span2" id="fwTop"></div>
      <div class="card" id="fwStat"></div>
      <div class="card span2" id="fwGeo"></div>
      <div class="card" id="fwAsn"></div>
      <div class="card span2" id="fwSources"></div>
      <div class="card" id="fwScenarios"></div>

      <div class="card full flat">
        <h2><span class="dot ok"></span>白名单
          <span class="right">命中即自动解封，不改 CrowdSec 配置</span></h2>
        <div class="form">
          <input class="ip" id="wlIp" placeholder="IP 或网段，如 1.2.3.4 / 1.2.3.0/24"
                 autocomplete="off" spellcheck="false">
          <input class="why" id="wlNote" placeholder="备注（如：公司出口 IP）" autocomplete="off">
          <button class="btn ghost" id="wlBtn">加入白名单</button>
        </div>
        <div id="wlList" style="margin-top:12px"></div>
      </div>

      <div class="card full flat">
        <h2><span class="dot"></span>封禁列表</h2>
        <div class="filters">
          <input id="fwSearch" placeholder="搜索 IP、场景、AS…" autocomplete="off">
          <button class="chip on" data-kind="all">全部</button>
          <button class="chip" data-kind="manual">手动</button>
          <button class="chip" data-kind="detected">自动检出</button>
          <button class="chip" data-kind="community">社区黑名单</button>
        </div>
        <div class="scroll" id="fwList"></div>
      </div>
    </div>
  </div>

  <!-- 安全中心：聚合现有端口、节点、CrowdSec 与 1Panel WAF，不替代各自管理面 -->
  <div id="security" class="hide">
    <div class="callout" id="secMode">
      <b>安全模式</b>　默认只读观察。临时封禁走 CrowdSec，带健康检查、流水和回滚；
      不直接改 iptables，也不修改 1Panel WAF。
    </div>
    <div class="filters">
      <button class="chip" data-sec-range="24">24 小时</button>
      <button class="chip on" data-sec-range="168">7 天</button>
      <button class="chip" data-sec-range="720">30 天</button>
      <button class="btn sm ghost" id="secRefresh">立即核查</button>
      <span class="note" id="secUpdated" style="margin:0"></span>
    </div>
    <div class="grid cols4">
      <div class="card flat" id="secCoverage"></div>
      <div class="card flat span2" id="secPipeline"></div>
      <div class="card flat" id="secAppsec"></div>
    </div>
    <div class="section"><h3>攻击态势</h3><i class="rule"></i>
      <span class="meta">可缩放、拖动，不上传攻击 IP</span></div>
    <div class="card flat secmap-card">
      <h2><span class="dot info"></span>攻击来源与当前封禁
        <span class="right" id="secMapMeta"></span></h2>
      <div class="secmap-toolbar">
        <div class="map-switch" role="group" aria-label="地图范围">
          <button class="chip on" data-sec-map="world">世界地图</button>
          <button class="chip" data-sec-map="china">中国地图</button>
        </div>
        <span class="note" id="secMapHint">滚轮或双指缩放，拖动地图查看</span>
      </div>
      <div class="secmap-layout">
        <div class="secmap" id="secMap"></div>
        <div class="secmap-rank" id="secMapRank"></div>
      </div>
      <div class="note" id="secMapNote"></div>
    </div>
    <div class="section"><h3>覆盖缺口</h3><i class="rule"></i></div>
    <div class="card flat"><div class="scroll" id="secIssues"></div></div>
    <div class="section"><h3>事件中心</h3><i class="rule"></i>
      <span class="meta">按攻击源跨机器聚合</span></div>
    <div class="card flat"><div class="scroll tall" id="secIncidents"></div></div>
    <div class="section"><h3>安全变更</h3><i class="rule"></i>
      <span class="meta">仅显示由本面板发起的变更</span></div>
    <div class="card flat"><div class="scroll" id="secChanges"></div></div>
  </div>

  <!-- 连接 -->
  <div id="conns" class="hide">
    <div class="grid summary-grid">
      <div class="card" id="connStat"></div>
      <div class="card span2" id="connPorts"></div>
      <div class="card full flat">
        <h2><span class="dot"></span>活跃连接
          <span class="right" id="connNote"></span></h2>
        <div class="filters">
          <input id="connSearch" placeholder="搜索 IP、端口、服务、国家…" autocomplete="off">
          <button class="chip on" data-conn="external">仅外网</button>
          <button class="chip" data-conn="inbound">入站</button>
          <button class="chip" data-conn="outbound">出站</button>
          <button class="chip" data-conn="all">全部</button>
        </div>
        <div class="scroll tall" id="connList"></div>
      </div>
    </div>
  </div>

  <!-- 端口 -->
  <div id="ports" class="hide">
    <div class="grid summary-grid">
      <div class="card" id="portStat"></div>
      <div class="card span2" id="portPublic"></div>
      <div class="card full flat">
        <h2><span class="dot"></span>全部监听端口</h2>
        <div class="filters">
          <input id="portSearch" placeholder="搜索端口、服务名…" autocomplete="off">
          <button class="chip on" data-plevel="all">全部</button>
          <button class="chip" data-plevel="public">公网暴露</button>
          <button class="chip" data-plevel="lan">内网可达</button>
          <button class="chip" data-plevel="safe">仅本机</button>
        </div>
        <div class="scroll tall" id="portList"></div>
      </div>
    </div>
  </div>

  <!-- 历史 -->
  <div id="history" class="hide">
    <div class="filters">
      <button class="chip" data-range="6">6 小时</button>
      <button class="chip on" data-range="24">24 小时</button>
      <button class="chip" data-range="168">7 天</button>
      <button class="chip" data-range="720">30 天</button>
    </div>

    <!-- 三个区块各自成行。混在一个 grid 里的话，卡片数量凑不满整行时
         下一块的内容会被 dense 回填上来，排版就散了 -->
    <div class="section"><h3>趋势</h3><i class="rule"></i>
      <span class="meta" id="histSpan"></span></div>
    <div class="grid cols4" id="histCharts"></div>

    <div class="section"><h3>记录</h3><i class="rule"></i></div>
    <div class="grid cols2">
      <div class="card flat">
        <h2><span class="dot"></span>事件时间线</h2>
        <div class="scroll fixed"><div class="timeline" id="histEvents"></div></div>
      </div>
      <div class="card flat">
        <h2><span class="dot"></span>操作审计
          <span class="right">
            <button class="chip on" data-audit="all">全部</button>
            <button class="chip" data-audit="failed">仅失败</button>
          </span></h2>
        <div class="scroll fixed" id="auditList"></div>
      </div>
    </div>

    <div class="section"><h3>统计</h3><i class="rule"></i></div>
    <div class="grid cols4">
      <!-- 这四张内容量接近，不加 .top，让底边对齐 -->
      <div class="card flat" id="histGrowth"></div>
      <div class="card flat" id="auditStat"></div>
      <div class="card flat" id="banStat"></div>
      <div class="card flat" id="histNote"></div>
    </div>
  </div>

  <!-- 容器 -->
  <div id="containers" class="hide">
    <div class="grid">
      <div class="card full flat">
        <h2><span class="dot"></span>容器管理
          <span class="right" id="ctrNote"></span></h2>
        <div class="scroll tall" id="ctrList"></div>
      </div>
      <div class="card full flat">
        <h2><span class="dot"></span>快照
          <span class="right">保留最近 <input id="snapKeep" type="number" value="10"
            min="1" max="200" style="width:64px; padding:4px 8px; font-size:12.5px">
            个</span></h2>
        <div id="snapList"></div>
      </div>
    </div>
  </div>

  <!-- 设置 -->
  <div id="settings" class="hide">
    <div class="grid">
      <div class="card full flat">
        <h2><span class="dot info"></span>告警总开关
          <span class="right" id="setNotify"></span></h2>
        <div id="setGlobal"></div>
      </div>
      <div class="card full flat">
        <h2><span class="dot"></span>告警规则</h2>
        <div id="setRules"></div>
        <div class="form" style="margin-top:14px">
          <button class="btn" id="setSave">保存</button>
          <button class="btn ghost" id="setReset">恢复默认</button>
          <span class="note" id="setHint" style="margin:0"></span>
        </div>
      </div>
      <div class="card full flat">
        <h2><span class="dot"></span>已忽略的告警
          <span class="right">忽略后不再显示，也不再推送</span></h2>
        <div id="setMuted"></div>
      </div>
      <div class="card full flat" id="setAuth"></div>
    </div>
  </div>
</div>

<!-- 节点视图下不适用的页签显示这个，而不是覆盖页签自身的 innerHTML——
     那样会毁掉 #history 等页签里的静态结构，切回本机时就填不回数据了 -->
<div id="nodeNotice" class="grid hide"></div>

<div id="toasts"></div>
<div id="modal"></div>

<!-- 登录遮罩。默认隐藏，接口返回 401 或启动查到未登录时才显示 -->
<div id="loginWall" class="modal hide">
  <form class="modal-box login" id="loginForm" autocomplete="on">
    <h3>Homelab</h3>
    <p class="note" style="margin:0 0 4px">面板可以操作所有接入节点的防火墙，需要登录</p>
    <input id="loginUser" name="username" placeholder="用户名" autocomplete="username"
           autocapitalize="off" spellcheck="false" required>
    <input id="loginPass" name="password" type="password" placeholder="密码"
           autocomplete="current-password" required>
    <div class="err hide" id="loginErr"></div>
    <button class="btn" type="submit" id="loginBtn">登录</button>
  </form>
</div>

<script src="/static/vendor/leaflet/leaflet.js?v=1.9.4"></script>
<script src="/static/app.js?v=0.5.0-6"></script>
</body>
</html>