github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-05 08:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: reduce high-density DOM memory (#404)

Browse Source
This commit is contained in:
SuLea-IT authored and GitHub committed 2026-05-22 14:02:13 +08:00
1 parent 6c83b10b42
commit 64c068bbf5
5 files changed
+408 -219
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+23 -2
View File
@@ -286,6 +286,7 @@ function typeColorClass(t: string): string {
}
const contextCell = ref<{ rowId: number; rowIndex: number; col: number } | null>(null);
const detailCell = ref<{ rowIndex: number; col: number } | null>(null);
const hoveredDetailCell = ref<{ rowIndex: number; col: number } | null>(null);
const showCellDetail = ref(false);
const activeCellDetailTab = ref<CellDetailTab>(defaultCellDetailTab());
const detailWidth = ref(320);
@@ -1734,6 +1735,24 @@ const multiRowCount = computed(() => {
const isMultiRow = computed(() => multiRowCount.value > 1);
function onCellMouseenter(rowIndex: number, visibleColIdx: number, actualColIdx: number) {
hoveredDetailCell.value = { rowIndex, col: actualColIdx };
extendCellSelection(rowIndex, visibleColIdx);
}
function onCellMouseleave(rowIndex: number, actualColIdx: number) {
if (hoveredDetailCell.value?.rowIndex === rowIndex && hoveredDetailCell.value.col === actualColIdx) {
hoveredDetailCell.value = null;
}
}
function cellDetailButtonVisible(rowIndex: number, actualColIdx: number) {
return (
(hoveredDetailCell.value?.rowIndex === rowIndex && hoveredDetailCell.value.col === actualColIdx) ||
(showCellDetail.value && detailCell.value?.rowIndex === rowIndex && detailCell.value.col === actualColIdx)
);
}
function affectedRowIds(): number[] {
if (hasRowSelection.value && selectedRowCount.value > 0) {
return [...selectedRowIds.value];
@@ -4039,7 +4058,8 @@ defineExpose({
'line-through': item.isDeleted,
}"
@mousedown="handleDataCellMousedown(index, visibleColIdx, item.id, $event)"
@mouseenter="extendCellSelection(index, visibleColIdx)"
@mouseenter="onCellMouseenter(index, visibleColIdx, actualColIdx)"
@mouseleave="onCellMouseleave(index, actualColIdx)"
@dblclick="canEditCellItem(item, actualColIdx) && startEdit(item.id, actualColIdx)"
:data-visible-col-index="visibleColIdx"
@contextmenu="onCellContext(item.id, index, actualColIdx, visibleColIdx)"
@@ -4067,7 +4087,8 @@ defineExpose({
<template v-else>
{{ formatCell(item.data[actualColIdx], actualColIdx) }}
<button
class="absolute right-0.5 top-0.5 hidden h-5 w-5 items-center justify-center rounded bg-background/90 text-muted-foreground shadow-sm ring-1 ring-border hover:text-foreground group-hover/cell:flex"
v-if="cellDetailButtonVisible(index, actualColIdx)"
class="absolute right-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded bg-background/90 text-muted-foreground shadow-sm ring-1 ring-border hover:text-foreground"
:title="t('grid.cellDetails')"
@mousedown.stop
@click.stop="showCellDetails(index, actualColIdx)"