-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathtraffic.html
More file actions
172 lines (154 loc) · 8.17 KB
/
traffic.html
File metadata and controls
172 lines (154 loc) · 8.17 KB
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
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流量监控 - Nezha JSON Tools</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
<!-- App Bar -->
<header class="app-bar">
<div class="app-title">
<span class="material-symbols-outlined" style="color: var(--ios-color-primary);">monitoring</span>
Nezha JSON Tools
</div>
<nav class="nav-segmented">
<a href="index.html" class="nav-item">Config</a>
<a href="alert.html" class="nav-item">Alert</a>
<a href="traffic.html" class="nav-item active">Traffic</a>
</nav>
<div class="app-actions">
<button class="md-btn icon-only" id="themeToggleBtn" onclick="toggleTheme()" title="切换主题">
<span class="material-symbols-outlined">light_mode</span>
</button>
</div>
</header>
<!-- Main Container -->
<main class="main-container">
<!-- Left Panel: Forms -->
<div class="left-panel">
<!-- Traffic Rules Card -->
<section class="md-card">
<div class="card-header">
<div class="card-title">
<span class="material-symbols-outlined">timeline</span>
流量监控配置
</div>
</div>
<div class="form-content">
<div class="form-grid">
<div class="md-text-field full-width">
<select id="ruleType" onchange="updateTrafficRule()">
<option value="transfer_in_cycle">入站流量 (transfer_in_cycle)</option>
<option value="transfer_out_cycle" selected>出站流量 (transfer_out_cycle)</option>
<option value="transfer_all_cycle">双向流量 (transfer_all_cycle)</option>
</select>
<label>规则类型</label>
</div>
<!-- 最小值及单位 -->
<div class="input-group full-width" style="display: grid; grid-template-columns: 1fr 100px; gap: 16px;">
<div class="md-text-field" style="margin-bottom: 0;">
<input type="number" id="minValue" oninput="updateTrafficRule()">
<label>最小值 (Min)</label>
</div>
<div class="md-text-field" style="margin-bottom: 0;">
<select id="minUnit" onchange="updateTrafficRule()">
<option value="1">B</option>
<option value="1024">KB</option>
<option value="1048576">MB</option>
<option value="1073741824" selected>GB</option>
<option value="1099511627776">TB</option>
</select>
<label>单位</label>
</div>
</div>
<!-- 最大值及单位 -->
<div class="input-group full-width" style="display: grid; grid-template-columns: 1fr 100px; gap: 16px;">
<div class="md-text-field" style="margin-bottom: 0;">
<input type="number" id="maxValue" oninput="updateTrafficRule()">
<label>最大值 (Max)</label>
</div>
<div class="md-text-field" style="margin-bottom: 0;">
<select id="maxUnit" onchange="updateTrafficRule()">
<option value="1">B</option>
<option value="1024">KB</option>
<option value="1048576">MB</option>
<option value="1073741824" selected>GB</option>
<option value="1099511627776">TB</option>
</select>
<label>单位</label>
</div>
</div>
<div class="md-text-field full-width">
<input type="datetime-local" id="cycleStart" onchange="updateTrafficRule()">
<label>周期开始时间</label>
</div>
<div class="input-group full-width" style="display: grid; grid-template-columns: 1fr 120px; gap: 16px;">
<div class="md-text-field" style="margin-bottom: 0;">
<input type="number" id="cycleInterval" value="1" oninput="updateTrafficRule()">
<label>周期数量</label>
</div>
<div class="md-text-field" style="margin-bottom: 0;">
<select id="cycleUnit" onchange="updateTrafficRule()">
<option value="hour">hour</option>
<option value="day">day</option>
<option value="week">week</option>
<option value="month" selected>month</option>
<option value="year">year</option>
</select>
<label>单位</label>
</div>
</div>
<div class="md-switch-wrapper" style="justify-content: flex-start; gap: 12px; align-self: center;">
<label class="md-switch" style="transform: scale(0.8);">
<input type="checkbox" id="cover" onchange="updateTrafficRule()">
<span class="slider"></span>
</label>
<span>覆盖原有规则 (Cover)</span>
</div>
<div class="md-text-field full-width">
<input type="text" id="ignoreList" placeholder="例如: 3,4" oninput="updateTrafficRule()">
<label>忽略服务器 ID (逗号分隔)</label>
</div>
</div>
</div>
</section>
</div>
<!-- Right Panel: Preview & Code -->
<div class="right-panel">
<section class="md-card">
<div class="card-header">
<div class="card-title">
<span class="material-symbols-outlined">data_object</span>
JSON 配置
</div>
<div class="app-actions">
<button class="md-btn filled" onclick="copyTrafficCode(event)">
<span class="material-symbols-outlined">content_copy</span>
复制
</button>
</div>
</div>
<div class="code-container">
<textarea id="trafficJson" class="code-textarea" spellcheck="false"></textarea>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer>
<p>
Powered by <a href="https://github.com/zealmult/NezhaJSONTools" target="_blank">NezhaJSONTools</a>
</p>
</footer>
<!-- Toast -->
<div id="toast" class="md-snackbar">
复制成功！
</div>
<script src="script.js"></script>
<script src="traffic.js"></script>
</body>
</html>