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.
156 lines
7.1 KiB
156 lines
7.1 KiB
(function (global) {
|
|
'use strict';
|
|
|
|
/**
|
|
* 资源面板（壳侧）：枚举在 Agent，仅订阅可见时刷新。
|
|
* @constructor
|
|
*/
|
|
function AssetsPanel() {
|
|
this.el = null;
|
|
this._bridge = null;
|
|
this._rows = [];
|
|
this._bundles = [];
|
|
this._bundleFilter = '';
|
|
this._typeFilter = '';
|
|
this._query = '';
|
|
this._sort = 'mem';
|
|
this._selected = null;
|
|
}
|
|
|
|
AssetsPanel.prototype.setBridge = function (bridge) {
|
|
this._bridge = bridge;
|
|
};
|
|
|
|
AssetsPanel.prototype.mount = function () {
|
|
var self = this;
|
|
var root = document.createElement('div');
|
|
root.className = 'pw-panel-inner';
|
|
root.style.height = '100%';
|
|
root.style.display = 'flex';
|
|
root.style.flexDirection = 'column';
|
|
root.innerHTML =
|
|
'<div class="pw-panel-head">' +
|
|
'<span class="pw-panel-title">资源</span>' +
|
|
'<div class="pw-panel-tools">' +
|
|
'<select id="pw-asset-bundle" class="pw-select"><option value="">分包：全部</option></select>' +
|
|
'<select id="pw-asset-type" class="pw-select">' +
|
|
'<option value="">类型：全部</option>' +
|
|
'<option value="Texture2D">纹理 Texture2D</option>' +
|
|
'<option value="SpriteFrame">图集帧 SpriteFrame</option>' +
|
|
'<option value="Prefab">预制体 Prefab</option>' +
|
|
'<option value="sp.SkeletonData">Spine</option>' +
|
|
'<option value="AudioClip">音频</option>' +
|
|
'<option value="JsonAsset">JSON</option>' +
|
|
'<option value="Other">其他</option>' +
|
|
'</select>' +
|
|
'<input id="pw-asset-q" class="pw-input" placeholder="搜索" style="width:90px" />' +
|
|
'<select id="pw-asset-sort" class="pw-select">' +
|
|
'<option value="mem">按内存↓</option>' +
|
|
'<option value="name">按名称</option>' +
|
|
'<option value="ref">按引用↓</option>' +
|
|
'<option value="type">按类型</option>' +
|
|
'</select>' +
|
|
'<button type="button" id="pw-asset-refresh" class="pw-btn">刷新</button>' +
|
|
'</div></div>' +
|
|
'<div class="pw-panel-body">' +
|
|
'<div id="pw-asset-summary" class="pw-summary"></div>' +
|
|
'<div id="pw-asset-bundles" class="pw-muted" style="margin-bottom:6px"></div>' +
|
|
'<div style="display:flex;gap:8px;min-height:0;flex:1">' +
|
|
'<div style="flex:1;overflow:auto;min-width:0"><table class="pw-table" id="pw-asset-table"><thead><tr>' +
|
|
'<th>名称</th><th>类型</th><th>分包</th><th>内存</th><th>引用</th>' +
|
|
'</tr></thead><tbody></tbody></table></div>' +
|
|
'<div style="width:180px;flex-shrink:0"><div class="pw-muted">预览</div><div class="pw-preview-box" id="pw-asset-preview"></div><div id="pw-asset-meta" class="pw-muted" style="margin-top:4px"></div></div>' +
|
|
'</div></div>';
|
|
this.el = root;
|
|
root.querySelector('#pw-asset-bundle').addEventListener('change', function (ev) {
|
|
self._bundleFilter = ev.target.value;
|
|
self.renderList();
|
|
});
|
|
root.querySelector('#pw-asset-type').addEventListener('change', function (ev) {
|
|
self._typeFilter = ev.target.value;
|
|
self.renderList();
|
|
});
|
|
root.querySelector('#pw-asset-q').addEventListener('input', function (ev) {
|
|
self._query = (ev.target.value || '').toLowerCase();
|
|
self.renderList();
|
|
});
|
|
root.querySelector('#pw-asset-sort').addEventListener('change', function (ev) {
|
|
self._sort = ev.target.value;
|
|
self.renderList();
|
|
});
|
|
root.querySelector('#pw-asset-refresh').addEventListener('click', function () {
|
|
if (!self._bridge) return;
|
|
self._bridge.call('assets.list').then(function (d) { self.applyData(d); });
|
|
});
|
|
return root;
|
|
};
|
|
|
|
AssetsPanel.prototype.applyData = function (data) {
|
|
this._rows = (data && data.rows) || [];
|
|
this._bundles = (data && data.bundles) || [];
|
|
var sel = this.el && this.el.querySelector('#pw-asset-bundle');
|
|
if (sel) {
|
|
var cur = this._bundleFilter;
|
|
var html = '<option value="">分包：全部</option>';
|
|
for (var i = 0; i < this._bundles.length; i++) {
|
|
var b = this._bundles[i];
|
|
if (!b) continue;
|
|
html += '<option value="' + escapeAttr(b) + '"' + (b === cur ? ' selected' : '') + '>' + escapeHtml(b) + '</option>';
|
|
}
|
|
sel.innerHTML = html;
|
|
}
|
|
this.renderList();
|
|
};
|
|
|
|
AssetsPanel.prototype.renderList = function () {
|
|
if (!this.el) return;
|
|
var rows = this._rows.slice();
|
|
var q = this._query;
|
|
var bf = this._bundleFilter;
|
|
var tf = this._typeFilter;
|
|
rows = rows.filter(function (r) {
|
|
if (bf && r.bundle !== bf) return false;
|
|
if (tf && tf !== 'Other' && r.type !== tf) return false;
|
|
if (tf === 'Other' && /Texture2D|SpriteFrame|Prefab|SkeletonData|AudioClip|JsonAsset/.test(r.type)) return false;
|
|
if (q && String(r.name).toLowerCase().indexOf(q) < 0 && String(r.type).toLowerCase().indexOf(q) < 0) return false;
|
|
return true;
|
|
});
|
|
var sort = this._sort;
|
|
rows.sort(function (a, b) {
|
|
if (sort === 'name') return String(a.name).localeCompare(String(b.name));
|
|
if (sort === 'type') return String(a.type).localeCompare(String(b.type));
|
|
if (sort === 'ref') return (b.ref || 0) - (a.ref || 0);
|
|
return (b.mem || 0) - (a.mem || 0);
|
|
});
|
|
|
|
var memTotal = 0;
|
|
for (var i = 0; i < this._rows.length; i++) memTotal += this._rows[i].mem || 0;
|
|
var sum = this.el.querySelector('#pw-asset-summary');
|
|
if (sum) {
|
|
sum.innerHTML = '<span>共 <b>' + this._rows.length + '</b> 资源</span><span>筛选 <b>' + rows.length +
|
|
'</b></span><span>估算纹理 <b>' + (Math.round(memTotal * 100) / 100) + ' MB</b></span>';
|
|
}
|
|
var bundlesEl = this.el.querySelector('#pw-asset-bundles');
|
|
if (bundlesEl) bundlesEl.textContent = this._bundles.length ? ('分包：' + this._bundles.join(', ')) : '';
|
|
|
|
var tbody = this.el.querySelector('#pw-asset-table tbody');
|
|
if (!tbody) return;
|
|
var html = '';
|
|
for (var j = 0; j < Math.min(rows.length, 500); j++) {
|
|
var r = rows[j];
|
|
html += '<tr data-i="' + j + '"><td>' + escapeHtml(r.name) + '</td><td>' + escapeHtml(r.type) +
|
|
'</td><td>' + escapeHtml(r.bundle || '-') + '</td><td>' + (r.mem ? r.mem.toFixed(2) + 'MB' : 'n/a') +
|
|
'</td><td>' + (r.ref || 0) + '</td></tr>';
|
|
}
|
|
tbody.innerHTML = html || '<tr><td colspan="5" class="pw-muted">无</td></tr>';
|
|
};
|
|
|
|
function escapeHtml(s) {
|
|
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
function escapeAttr(s) {
|
|
return escapeHtml(s).replace(/"/g, '"');
|
|
}
|
|
|
|
global.PWAssetsPanel = AssetsPanel;
|
|
})(window);
|
|
|