NezhaJSONTools/alert.html at main · zealmult/NezhaJSONTools · 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
<!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);">notifications_active</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 active">Alert</a>
            <a href="traffic.html" class="nav-item">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">

            <!-- Alert Rules Card -->
            <section class="md-card">
                <div class="card-header">
                    <div class="card-title">
                        <span class="material-symbols-outlined">add_alert</span>
                        警报规则配置
                    </div>
                </div>

                <div class="form-content">
                    <div class="form-grid">
                        <div class="md-text-field full-width">
                            <select id="alertType" onchange="updateAlertRule()">
                                <option value="cpu">CPU 使用率 (cpu)</option>
                                <option value="gpu">GPU 使用率 (gpu)</option>
                                <option value="memory">内存使用率 (memory)</option>
                                <option value="swap">Swap 使用率 (swap)</option>
                                <option value="disk">磁盘使用率 (disk)</option>
                                <option value="net_in_speed">入站网速 (net_in_speed)</option>
                                <option value="net_out_speed">出站网速 (net_out_speed)</option>
                                <option value="net_all_speed">双向网速 (net_all_speed)</option>
                                <option value="transfer_in">入站流量 (transfer_in)</option>
                                <option value="transfer_out">出站流量 (transfer_out)</option>
                                <option value="transfer_all">双向流量 (transfer_all)</option>
                                <option value="offline">离线监控 (offline)</option>
                                <option value="load1">Load 1 (load1)</option>
                                <option value="load5">Load 5 (load5)</option>
                                <option value="load15">Load 15 (load15)</option>
                                <option value="process_count">进程数 (process_count)</option>
                                <option value="tcp_conn_count">TCP 连接数 (tcp_conn_count)</option>
                                <option value="udp_conn_count">UDP 连接数 (udp_conn_count)</option>
                                <option value="temperature_max">最高温度 (temperature_max)</option>
                            </select>
                            <label>规则类型</label>
                        </div>

                        <div class="md-text-field">
                            <input type="number" id="alertMin" oninput="updateAlertRule()">
                            <label>最小值 (Min)</label>
                        </div>

                        <div class="md-text-field">
                            <input type="number" id="alertMax" oninput="updateAlertRule()">
                            <label>最大值 (Max)</label>
                        </div>

                        <div class="md-text-field">
                            <input type="number" id="alertDuration" value="10" oninput="updateAlertRule()">
                            <label>持续时间 (秒)</label>
                        </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="alertCover" onchange="updateAlertRule()">
                                <span class="slider"></span>
                            </label>
                            <span>覆盖原有规则 (Cover)</span>
                        </div>

                        <div class="md-text-field full-width">
                            <input type="text" id="alertIgnore" placeholder="例如: 3,4" oninput="updateAlertRule()">
                            <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="copyAlertCode(event)">
                            <span class="material-symbols-outlined">content_copy</span>
                            复制
                        </button>
                    </div>
                </div>
                <div class="code-container">
                    <textarea id="alertJson" 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="alert.js"></script>
</body>
</html>