= [];
+ // If the table is configured with selectable (select row mode) add a checkbox at the head of the line alone
+ if (this.selectable) {
+ let tblBox = document.createElement('div');
+ tblBox.style.display = 'flex';
+ tblBox.style.justifyContent = 'center';
+ tblBox.style.alignItems = 'center';
+ tblBox.classList.add('td');
+ let checkbox = document.createElement('lit-checkbox');
+ checkbox.classList.add('row-checkbox');
+ checkbox.onchange = (e: any) => {
+ // Checkbox checking affects whether the div corresponding to the row has a checked attribute for marking
+ if (e.detail.checked) {
+ tblRowElement.setAttribute('checked', '');
+ } else {
+ tblRowElement.removeAttribute('checked');
+ }
+ };
+ this.getWheelStatus(tblBox);
+ tblBox.appendChild(checkbox);
+ tblRowElement.appendChild(tblBox);
+ }
+ this.tableColumns!.forEach((tblColumn) => {
+ let dataIndex = tblColumn.getAttribute('data-index') || '1';
+ gridTemplateColumns.push(tblColumn.getAttribute('width') || '1fr');
+ if (tblColumn.template) {
+ // If you customize the rendering, you get the nodes from the template
+ // @ts-ignore
+ let cloneNode = tblColumn.template.render(rowData).content.cloneNode(true);
+ let tblCustomDiv = document.createElement('div');
+ tblCustomDiv.classList.add('td');
+ tblCustomDiv.style.wordBreak = 'break-all';
+ tblCustomDiv.style.whiteSpace = 'pre-wrap';
+ tblCustomDiv.style.justifyContent = tblColumn.getAttribute('align') || '';
+ if (tblColumn.hasAttribute('fixed')) {
+ this.fixed(tblCustomDiv, tblColumn.getAttribute('fixed') || '', '#ffffff');
+ }
+ this.getWheelStatus(tblCustomDiv);
+ tblCustomDiv.append(cloneNode);
+ tblRowElement.append(tblCustomDiv);
+ } else {
+ let tblDiv = document.createElement('div');
+ tblDiv.classList.add('td');
+ tblDiv.style.wordBreak = 'break-all';
+ tblDiv.style.whiteSpace = 'pre-wrap';
+ tblDiv.title = rowData[dataIndex];
+ tblDiv.style.justifyContent = tblColumn.getAttribute('align') || '';
+ if (tblColumn.hasAttribute('fixed')) {
+ this.fixed(tblDiv, tblColumn.getAttribute('fixed') || '', '#ffffff');
+ }
+ this.getWheelStatus(tblDiv);
+ tblDiv.innerHTML = this.formatName(dataIndex, rowData[dataIndex]);
+ tblRowElement.append(tblDiv);
+ }
+ });
+ if (this.selectable) {
+ // If the table with selection is preceded by a 60px column
+ tblRowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');
+ } else {
+ tblRowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');
+ }
+ tblRowElement.onclick = (e) => {
+ this.dispatchEvent(
+ new CustomEvent('row-click', {
+ detail: {
+ rowData,
+ data: rowData,
+ callBack: (isSelected: boolean) => {
+ //是否爲单选
+ if (isSelected) {
+ this.clearAllSelection(rowData);
+ }
+ this.setSelectedRow(rowData.isSelected, [tblRowElement]);
+ },
+ },
+ composed: true,
+ })
+ );
+ };
+ this.normalDs.push(tblRowElement);
+ this.tbodyElement!.append(tblRowElement);
+ });
+ }
+
freshCurrentLine(element: HTMLElement, rowObject: TableRowObject, firstElement?: HTMLElement) {
if (!rowObject) {
if (firstElement) {
@@ -1574,17 +1728,19 @@ export class LitTable extends HTMLElement {
this.setSelectedRow(false, [firstElement]);
}
}
- let dataIndex = this.columns![idx].getAttribute('data-index') || '1';
- let text = this.formatName(dataIndex, rowObject.data[dataIndex]);
- if ((this.columns![idx] as any).template) {
- (child as HTMLElement).innerHTML = '';
- (child as HTMLElement).appendChild(
- (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true)
- );
- (child as HTMLElement).title = text;
- } else {
- (child as HTMLElement).innerHTML = text;
- (child as HTMLElement).title = text;
+ if (idx < this.columns!.length) {
+ let dataIndex = this.columns![idx].getAttribute('data-index') || '1';
+ let text = this.formatName(dataIndex, rowObject.data[dataIndex]);
+ if ((this.columns![idx] as any).template) {
+ (child as HTMLElement).innerHTML = '';
+ (child as HTMLElement).appendChild(
+ (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true)
+ );
+ (child as HTMLElement).title = text;
+ } else {
+ (child as HTMLElement).innerHTML = text;
+ (child as HTMLElement).title = text;
+ }
}
});
if (element.style.display == 'none') {
diff --git a/ide/src/doc/md/quickstart_ability_monitor.md b/ide/src/doc/md/quickstart_ability_monitor.md
index 083c87af83e4a3ada6ea1c95576f9e2055b99511..d43839353e5a2a77b0a3c59d39709e9875aabd57 100644
--- a/ide/src/doc/md/quickstart_ability_monitor.md
+++ b/ide/src/doc/md/quickstart_ability_monitor.md
@@ -93,7 +93,7 @@ Processes History的Tab页如图:
+ Duration:前一次采集到本次采集的时间差。
+ Data Read:从磁盘读取到内存的总字节数。
+ Data Read/sec:每秒从磁盘读取到内存的字节数。
-+ Data Write:从磁盘写入磁盘的总字节数。
++ Data Write:从内存写入磁盘的总字节数。
+ Data Write/sec:每秒从内存写入磁盘的字节数。
+ Reads In:读入的字节数。
+ Reads In/sec:每秒读入的字节数。
diff --git a/ide/src/doc/md/quickstart_hiperf.md b/ide/src/doc/md/quickstart_hiperf.md
index 3c04e187cf51f3f0767b7800697ce39090871c1c..2f3c80bfc25ec28a17e81f5a275a9b49365317fd 100644
--- a/ide/src/doc/md/quickstart_hiperf.md
+++ b/ide/src/doc/md/quickstart_hiperf.md
@@ -27,7 +27,7 @@ HiPerf工具是对系统性能数据进行采样记录,并将采样数据保
+ 黄色区域:辅助信息(Callstack)。
### HiPerf泳道图展示
-Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动都泳道图上,悬浮框会显示CPU的使用量。
+Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动到泳道图上,悬浮框会显示CPU的使用量。

按住w键放大界面,泳道图会出现P的标志,鼠标移动到P图标上,悬浮框会显示每个callstack和调用的深度如下图。

diff --git a/ide/src/doc/quickstart_ability_monitor.html b/ide/src/doc/quickstart_ability_monitor.html
index 2dd87205e40ebae600b16860f6125a727598ca03..b74904ec30e10ca70bcef95eb65ff5c079478bd3 100644
--- a/ide/src/doc/quickstart_ability_monitor.html
+++ b/ide/src/doc/quickstart_ability_monitor.html
@@ -1238,7 +1238,7 @@ Data Read/sec:每秒从磁盘读取到内存的字节数。
-Data Write:从磁盘写入磁盘的总字节数。
+Data Write:从内存写入磁盘的总字节数。
diff --git a/ide/src/doc/quickstart_hiperf.html b/ide/src/doc/quickstart_hiperf.html
index 2fb413788c4c284d88f7f4c05ce687a9b1048ff1..e3aa18119c10a2bec2b13257042c09eba5f8b1da 100644
--- a/ide/src/doc/quickstart_hiperf.html
+++ b/ide/src/doc/quickstart_hiperf.html
@@ -875,7 +875,7 @@ Advance Options:更多的抓取配置项。
- Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动都泳道图上,悬浮框会显示CPU的使用量。
+ Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动到泳道图上,悬浮框会显示CPU的使用量。

按住w键放大界面,泳道图会出现P的标志,鼠标移动到P图标上,悬浮框会显示每个callstack和调用的深度如下图。
diff --git a/ide/src/img/menu-cut.svg b/ide/src/img/menu-cut.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5614cb1143cd836b4fc0bb4a267eb28f7510944d
--- /dev/null
+++ b/ide/src/img/menu-cut.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/ide/src/index.html b/ide/src/index.html
index e73acb40dd8f0ce287e22da7b50926b3b66457ec..3bc659d8e87669891432dc03fd8ae4ef9d526b11 100644
--- a/ide/src/index.html
+++ b/ide/src/index.html
@@ -12,6 +12,7 @@
height: 100%;
margin: 0;
padding: 0;
+ overflow: hidden;
}