|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html> |
3 | 3 | <head> |
| 4 | + <meta charset="utf-8"> |
4 | 5 | <title>日志阅读</title> |
5 | 6 | <style> |
6 | 7 | html, body { |
|
40 | 41 | display: inline-block; |
41 | 42 | color: #0ba9b9; |
42 | 43 | border: 1px solid #0ba9b9; |
43 | | - opacity: 0.5; |
44 | 44 | background: transparent; |
45 | 45 | cursor: pointer; |
46 | 46 | outline: none; |
47 | | - transition: all ease .1s; |
| 47 | + transition: background ease .15s, color ease .15s; |
48 | 48 | } |
49 | 49 | #panel fieldset button:hover { |
50 | | - opacity: 1; |
| 50 | + background: #0ba9b9; |
| 51 | + color: #152d30; |
| 52 | + } |
| 53 | + #panel fieldset button:active { |
| 54 | + transform: translate(1px, 1px); |
51 | 55 | } |
52 | 56 | #panel fieldset textarea { |
53 | 57 | width: 100%; |
|
95 | 99 | .type.ERROR { |
96 | 100 | background: rgb(107, 35, 35); |
97 | 101 | } |
| 102 | + .type.SYSTEM { |
| 103 | + background: rgb(80, 14, 80); |
| 104 | + } |
98 | 105 | .path { |
99 | 106 | color: #777; |
100 | 107 | } |
|
144 | 151 | document.body.onclick = e => handleJsonClick(e.target); |
145 | 152 | loadValue(includeInput); |
146 | 153 | loadValue(excludeInput); |
| 154 | + autoGrow(includeInput); |
| 155 | + autoGrow(excludeInput); |
147 | 156 | connect(); |
148 | 157 | requestAnimationFrame(autoRender); |
149 | 158 |
|
150 | 159 | function connect() { |
151 | | - appendMessage('[INFO] WebSocket connecting...'); |
| 160 | + appendMessage('[INFO] WebSocket connecting...', true); |
152 | 161 | ws = new WebSocket('ws://' + location.host); |
153 | 162 | install(); |
154 | 163 | function install() { |
|
169 | 178 | } |
170 | 179 | function open() { |
171 | 180 | connected = true; |
172 | | - appendMessage('[INFO] WebSocket connected!'); |
| 181 | + appendMessage('[INFO] WebSocket connected!', true); |
173 | 182 | } |
174 | 183 | function close() { |
175 | 184 | connected = false; |
176 | | - appendMessage('[INFO] WebSocket closed! Trying to reconnect in 1 sec.'); |
| 185 | + appendMessage('[INFO] WebSocket closed! Trying to reconnect in 1 sec.', true); |
177 | 186 | reconnect(); |
178 | 187 | } |
179 | 188 | function error() { |
180 | 189 | connected = false; |
181 | | - appendMessage('[ERROR] WebSocket error! Trying to reconnect in 1 sec.'); |
| 190 | + appendMessage('[ERROR] WebSocket error! Trying to reconnect in 1 sec.', true); |
182 | 191 | reconnect(); |
183 | 192 | } |
184 | 193 | function message(e) { |
185 | 194 | appendMessage(e.data) |
186 | 195 | } |
187 | 196 | }; |
188 | 197 |
|
189 | | - function appendMessage(content) { |
| 198 | + function appendMessage(content, system = false) { |
190 | 199 | const id = nextMessageId++; |
191 | 200 | const element = document.createElement('p'); |
192 | 201 | element.setAttribute('data-message-id', id); |
|
195 | 204 | id, |
196 | 205 | content, |
197 | 206 | element, |
| 207 | + system, |
198 | 208 | }); |
199 | 209 | const shouldScroll = isScrollOnBottom(); |
200 | 210 | while (messages.length > MAX_MESSAGE_COUNT) { |
|
247 | 257 | const keywords = message.keywords; |
248 | 258 | let content = message.content; |
249 | 259 | let html = content; |
| 260 | + |
250 | 261 | // 实体转换 |
251 | 262 | html = html.replace(/\</g, '<'); |
252 | 263 | html = html.replace(/\>/g, '>'); |
|
294 | 305 | + html.substr(end + 1); |
295 | 306 | } |
296 | 307 |
|
| 308 | + // 系统消息 |
| 309 | + if (message.system) { |
| 310 | + html = '<span class="type SYSTEM">SYSTEM</span>' + html; |
| 311 | + } |
| 312 | + |
297 | 313 | message.element.innerHTML = html; |
298 | 314 | return message; |
299 | 315 | } |
|
318 | 334 | content.indexOf(condition) > -1; |
319 | 335 |
|
320 | 336 | return messages.filter(message => { |
| 337 | + if (message.system) return true; |
321 | 338 | const content = message.content; |
322 | 339 | message.keywords = null; |
323 | 340 | if (includes.length) { |
|
363 | 380 |
|
364 | 381 | function handleTextAreaInput(textField) { |
365 | 382 | saveValue(textField); |
| 383 | + autoGrow(textField); |
| 384 | + } |
| 385 | + |
| 386 | + function autoGrow(textField) { |
366 | 387 | if (textField.clientHeight < textField.scrollHeight) { |
367 | 388 | textField.style.height = textField.scrollHeight + "px"; |
368 | 389 | if (textField.clientHeight < textField.scrollHeight) { |
|
0 commit comments