You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
11 KiB
263 lines
11 KiB
(function (global) {
|
|
'use strict';
|
|
|
|
/**
|
|
* 控制台面板（壳侧）：DevTools 风格渲染；原始 console 仍在游戏页输出。
|
|
* @constructor
|
|
*/
|
|
function ConsolePanel() {
|
|
this.el = null;
|
|
this.list = null;
|
|
this.filter = 'all';
|
|
this.query = '';
|
|
this.buffer = [];
|
|
this.capacity = 500;
|
|
this._bridge = null;
|
|
this._expanded = {};
|
|
this._onListClick = this._onListClick.bind(this);
|
|
}
|
|
|
|
ConsolePanel.prototype.setBridge = function (bridge) {
|
|
this._bridge = bridge;
|
|
};
|
|
|
|
ConsolePanel.prototype.mount = function () {
|
|
var self = this;
|
|
var root = document.createElement('div');
|
|
root.className = 'pw-panel-inner pw-console';
|
|
root.innerHTML =
|
|
'<div class="pw-panel-head">' +
|
|
'<span class="pw-panel-title">控制台</span>' +
|
|
'<div class="pw-panel-tools">' +
|
|
'<select id="pw-console-level" class="pw-select">' +
|
|
'<option value="all">全部级别</option>' +
|
|
'<option value="log">日志</option>' +
|
|
'<option value="info">信息</option>' +
|
|
'<option value="warn">警告</option>' +
|
|
'<option value="error">错误</option>' +
|
|
'<option value="debug">调试</option>' +
|
|
'</select>' +
|
|
'<input id="pw-console-q" class="pw-input" placeholder="过滤" style="width:100px" />' +
|
|
'<button type="button" id="pw-console-clear" class="pw-btn">清空</button>' +
|
|
'</div></div>' +
|
|
'<div class="pw-panel-body pw-console-list" id="pw-console-list"></div>';
|
|
this.el = root;
|
|
this.list = root.querySelector('#pw-console-list');
|
|
this.list.addEventListener('click', this._onListClick);
|
|
root.querySelector('#pw-console-level').addEventListener('change', function (ev) {
|
|
self.filter = ev.target.value;
|
|
self.render();
|
|
});
|
|
root.querySelector('#pw-console-q').addEventListener('input', function (ev) {
|
|
self.query = ev.target.value || '';
|
|
self.render();
|
|
});
|
|
root.querySelector('#pw-console-clear').addEventListener('click', function () {
|
|
self.buffer.length = 0;
|
|
self._expanded = {};
|
|
self.render();
|
|
});
|
|
return root;
|
|
};
|
|
|
|
/**
|
|
* @param {Array} items Agent 序列化后的富日志
|
|
*/
|
|
ConsolePanel.prototype.applyBatch = function (items) {
|
|
if (!items || !items.length) return;
|
|
for (var i = 0; i < items.length; i++) {
|
|
var it = items[i];
|
|
var key = it.level + '|' + (it.plain || '');
|
|
var last = this.buffer.length ? this.buffer[this.buffer.length - 1] : null;
|
|
if (last && last._key === key) {
|
|
last.count = (last.count || 1) + 1;
|
|
} else {
|
|
it.count = 1;
|
|
it._key = key;
|
|
if (!it.children) it.children = {};
|
|
this.buffer.push(it);
|
|
}
|
|
}
|
|
while (this.buffer.length > this.capacity) {
|
|
var removed = this.buffer.shift();
|
|
if (removed) delete this._expanded[removed.id];
|
|
}
|
|
this.render();
|
|
};
|
|
|
|
ConsolePanel.prototype._onListClick = function (ev) {
|
|
var toggle = ev.target.closest && ev.target.closest('[data-expand]');
|
|
if (!toggle) return;
|
|
var oid = toggle.getAttribute('data-oid');
|
|
if (!oid) return;
|
|
var self = this;
|
|
var open = !this._expanded[oid];
|
|
this._expanded[oid] = open;
|
|
if (open && this._bridge) {
|
|
this._bridge.call('console.inspect', { oid: oid, path: '' }).then(function (res) {
|
|
self._storeChildren(oid, res && res.props);
|
|
self.render();
|
|
}).catch(function () {
|
|
self.render();
|
|
});
|
|
} else {
|
|
this.render();
|
|
}
|
|
};
|
|
|
|
ConsolePanel.prototype._storeChildren = function (oid, props) {
|
|
if (!props) return;
|
|
for (var i = 0; i < this.buffer.length; i++) {
|
|
var item = this.buffer[i];
|
|
if (!item.children) item.children = {};
|
|
item.children[oid] = props;
|
|
}
|
|
};
|
|
|
|
ConsolePanel.prototype.render = function () {
|
|
if (!this.list) return;
|
|
var q = this.query.toLowerCase();
|
|
var html = '';
|
|
var any = false;
|
|
for (var i = 0; i < this.buffer.length; i++) {
|
|
var item = this.buffer[i];
|
|
if (this.filter !== 'all' && item.level !== this.filter) continue;
|
|
if (q && String(item.plain || '').toLowerCase().indexOf(q) < 0) continue;
|
|
any = true;
|
|
html += this._renderRow(item);
|
|
}
|
|
this.list.innerHTML = any ? html : '<div class="pw-console-empty">暂无日志（打开本面板后开始捕获；原始输出仍在浏览器控制台）</div>';
|
|
this.list.scrollTop = this.list.scrollHeight;
|
|
};
|
|
|
|
ConsolePanel.prototype._renderRow = function (item) {
|
|
var icon = '';
|
|
if (item.level === 'warn') icon = '<span class="pw-console-icon pw-console-icon-warn" title="warning"></span>';
|
|
else if (item.level === 'error') icon = '<span class="pw-console-icon pw-console-icon-error" title="error"></span>';
|
|
else if (item.level === 'info') icon = '<span class="pw-console-icon pw-console-icon-info" title="info"></span>';
|
|
|
|
var body = this._renderParts(item.parts || [], item);
|
|
var count = item.count > 1
|
|
? '<span class="pw-console-count">' + item.count + '</span>'
|
|
: '';
|
|
return (
|
|
'<div class="pw-console-row level-' + item.level + '">' +
|
|
icon + count +
|
|
'<div class="pw-console-msg">' + body + '</div>' +
|
|
'</div>'
|
|
);
|
|
};
|
|
|
|
ConsolePanel.prototype._renderParts = function (parts, item) {
|
|
var html = '';
|
|
for (var i = 0; i < parts.length; i++) {
|
|
if (i) html += ' ';
|
|
html += this._renderPart(parts[i], item);
|
|
}
|
|
return html;
|
|
};
|
|
|
|
ConsolePanel.prototype._renderPart = function (part, item) {
|
|
if (!part) return '';
|
|
var kind = part.kind;
|
|
if (kind === 'styled') {
|
|
var css = sanitizeCss(part.css || '');
|
|
var styleAttr = css ? ' style="' + escapeAttr(css) + '"' : '';
|
|
return '<span class="pw-v-fmt"' + styleAttr + '>' + escapeHtml(part.text || '') + '</span>';
|
|
}
|
|
if (kind === 'text') return '<span class="pw-v-text">' + escapeHtml(part.text || '') + '</span>';
|
|
if (kind === 'string') return '<span class="pw-v-string">"' + escapeHtml(part.text || '') + '"</span>';
|
|
if (kind === 'number' || kind === 'bigint') {
|
|
return '<span class="pw-v-number">' + escapeHtml(String(part.value)) + (kind === 'bigint' ? 'n' : '') + '</span>';
|
|
}
|
|
if (kind === 'boolean') return '<span class="pw-v-boolean">' + String(part.value) + '</span>';
|
|
if (kind === 'null') return '<span class="pw-v-null">null</span>';
|
|
if (kind === 'undefined') return '<span class="pw-v-undefined">undefined</span>';
|
|
if (kind === 'symbol') return '<span class="pw-v-symbol">' + escapeHtml(part.text || '') + '</span>';
|
|
if (kind === 'function') {
|
|
return '<span class="pw-v-function">ƒ ' + escapeHtml(part.name || 'anonymous') + '()</span>';
|
|
}
|
|
if (kind === 'error') {
|
|
var stack = part.stack ? '<pre class="pw-console-stack">' + escapeHtml(part.stack) + '</pre>' : '';
|
|
return '<span class="pw-v-error">' + escapeHtml((part.name || 'Error') + ': ' + (part.message || '')) + '</span>' + stack;
|
|
}
|
|
if (kind === 'object') return this._renderObject(part, item);
|
|
return '<span class="pw-v-text">' + escapeHtml(part.plain || '') + '</span>';
|
|
};
|
|
|
|
ConsolePanel.prototype._renderObject = function (part, item) {
|
|
return this._renderPartNested(part, item);
|
|
};
|
|
|
|
ConsolePanel.prototype._renderPartNested = function (part, item) {
|
|
if (!part) return '';
|
|
if (part.kind !== 'object') return this._renderPart(part, item);
|
|
var oid = part.oid;
|
|
var open = !!this._expanded[oid];
|
|
var head =
|
|
'<span class="pw-console-toggle' + (open ? ' open' : '') + '" data-expand="' + escapeAttr(oid) +
|
|
'" data-oid="' + escapeAttr(oid) + '">' +
|
|
'<span class="pw-console-caret"></span>' +
|
|
'<span class="pw-v-object">' + escapeHtml(part.preview || part.ctor || 'Object') + '</span>' +
|
|
'</span>';
|
|
if (!open) return head;
|
|
var props = (item.children && item.children[oid]) || [];
|
|
var rows = '';
|
|
for (var i = 0; i < props.length; i++) {
|
|
var pr = props[i];
|
|
if (pr.key === '…') {
|
|
rows += '<div class="pw-console-prop"><span class="pw-v-muted">…</span></div>';
|
|
continue;
|
|
}
|
|
rows +=
|
|
'<div class="pw-console-prop">' +
|
|
'<span class="pw-v-key">' + escapeHtml(pr.key) + '</span>' +
|
|
'<span class="pw-v-muted">: </span>' +
|
|
this._renderPartNested(pr.part, item) +
|
|
'</div>';
|
|
}
|
|
return head + '<div class="pw-console-children">' + rows + '</div>';
|
|
};
|
|
|
|
function sanitizeCss(css) {
|
|
if (typeof css !== 'string' || !css) return '';
|
|
if (/url\s*\(|expression\s*\(|javascript:|@import|behavior\s*:/i.test(css)) return '';
|
|
var allow = {
|
|
color: 1, background: 1, 'background-color': 1, 'font-weight': 1,
|
|
'font-style': 1, 'font-size': 1, 'text-decoration': 1, 'text-shadow': 1,
|
|
'line-height': 1, opacity: 1,
|
|
};
|
|
var parts = css.split(';');
|
|
var out = [];
|
|
for (var i = 0; i < parts.length; i++) {
|
|
var p = parts[i].trim();
|
|
if (!p) continue;
|
|
var colon = p.indexOf(':');
|
|
if (colon <= 0) continue;
|
|
var prop = p.slice(0, colon).trim().toLowerCase();
|
|
var val = p.slice(colon + 1).trim();
|
|
if (!allow[prop] || !val) continue;
|
|
if (/url\s*\(|expression|javascript:/i.test(val)) continue;
|
|
out.push(prop + ': ' + val);
|
|
}
|
|
return out.join('; ');
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
function escapeAttr(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
global.PWConsolePanel = ConsolePanel;
|
|
})(window);
|
|
|