feat: 添加虚拟滚动配置功能，移除冗余的 executing 状态设置，修复 sql cell 在虚拟列表下高度计算

HellowVirgil · HellowVirgil · commit 8463dfc55ccf · 2025-11-25T20:29:30.000+08:00
diff --git a/apps/docs/src/lab/index.tsx b/apps/docs/src/lab/index.tsx
@@ -1,11 +1,15 @@
 import { LibroLabModule, AppExtention } from '@difizen/libro-lab';
 
 import { LibroApp } from './app.js';
+import { VirtualizationConfigContribution } from './virtualize-config-contribution.js';
 import './index.less';
 
 const { ManaAppPreset, ManaComponents, ManaModule } = AppExtention;
 
-const BaseModule = ManaModule.create().register(LibroApp);
+const BaseModule = ManaModule.create().register(
+  LibroApp,
+  VirtualizationConfigContribution,
+);
 
 const App = (): JSX.Element => {
   return (
diff --git a/apps/docs/src/lab/virtualize-config-contribution.ts b/apps/docs/src/lab/virtualize-config-contribution.ts
@@ -0,0 +1,23 @@
+import {
+  ApplicationContribution,
+  ConfigurationService,
+} from '@difizen/libro-common/app';
+import { inject, singleton } from '@difizen/libro-common/app';
+import {
+  VirtualizationEnabled,
+  VirtualizationThresholdCellCount,
+  VirtualizationThresholdFileSize,
+} from '@difizen/libro-core';
+import { LibroViewTracker } from '@difizen/libro-core';
+
+@singleton({ contrib: ApplicationContribution })
+export class VirtualizationConfigContribution implements ApplicationContribution {
+  @inject(ConfigurationService) configurationService: ConfigurationService;
+  @inject(LibroViewTracker) protected libroViewTracker: LibroViewTracker;
+
+  async onStart() {
+    this.configurationService.set(VirtualizationEnabled, false);
+    this.configurationService.set(VirtualizationThresholdCellCount, 50);
+    this.configurationService.set(VirtualizationThresholdFileSize, 100 * 1024);
+  }
+}
diff --git a/packages/libro-core/src/components/dnd-component/dnd-list.tsx b/packages/libro-core/src/components/dnd-component/dnd-list.tsx
@@ -174,7 +174,7 @@ export const DndCellsRender = forwardRef<
     // TODO: 类型处理
     const model = libroView.model as any;
     if (model.currentFileContents && model.currentFileContents.size) {
-      size = parseFloat((model.currentFileContents.size / 1048576).toFixed(3)); // 单位MB
+      size = model.currentFileContents.size; // 单位 byte
       path = model.currentFileContents.path || '';
     }
 
diff --git a/packages/libro-core/src/components/dnd-component/virtualized-manager.ts b/packages/libro-core/src/components/dnd-component/virtualized-manager.ts
diff --git a/packages/libro-core/src/libro-setting-contribution.ts b/packages/libro-core/src/libro-setting-contribution.ts
@@ -10,6 +10,9 @@ import {
   LargeOutputDisplay,
   MultiSelectionWhenShiftClick,
   RightContentFixed,
+  VirtualizationEnabled,
+  VirtualizationThresholdCellCount,
+  VirtualizationThresholdFileSize,
 } from './libro-setting.js';
 
 @singleton({ contrib: ConfigurationContribution })
@@ -25,6 +28,9 @@ export class LibroSettingContribution implements ConfigurationContribution {
       MultiSelectionWhenShiftClick,
       RightContentFixed,
       LargeOutputDisplay,
+      VirtualizationEnabled,
+      VirtualizationThresholdCellCount,
+      VirtualizationThresholdFileSize,
     ];
   }
 }
diff --git a/packages/libro-core/src/libro-setting.ts b/packages/libro-core/src/libro-setting.ts
@@ -130,3 +130,40 @@ export const LargeOutputDisplay: ConfigurationNode<boolean> = {
     type: 'boolean',
   },
 };
+
+export const VirtualizationEnabled: ConfigurationNode<boolean> = {
+  id: 'libro.virtualization.enabled',
+  description: l10n.t('是否启用虚拟滚动功能'),
+  title: l10n.t('虚拟滚动'),
+  type: 'checkbox',
+  defaultValue: false,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const VirtualizationThresholdCellCount: ConfigurationNode<number> = {
+  id: 'libro.virtualization.threshold.cellcount',
+  description: l10n.t('启用虚拟滚动所需的cell数量阈值'),
+  title: l10n.t('虚拟滚动 cell 数量阈值'),
+  type: 'input',
+  defaultValue: 50,
+  schema: {
+    type: 'number',
+    minimum: 1,
+    maximum: 1000,
+  },
+};
+
+export const VirtualizationThresholdFileSize: ConfigurationNode<number> = {
+  id: 'libro.virtualization.threshold.filesize',
+  description: l10n.t('启用虚拟滚动所需的文件大小阈值，单位 byte'),
+  title: l10n.t('虚拟滚动文件大小阈值'),
+  type: 'input',
+  defaultValue: 100 * 1024, // 100KB
+  schema: {
+    type: 'number',
+    minimum: 1,
+    maximum: 1024 * 1024 * 1024, // 1GB
+  },
+};
diff --git a/packages/libro-core/src/libro-view.tsx b/packages/libro-core/src/libro-view.tsx
@@ -1045,14 +1045,12 @@ export class LibroView extends BaseView implements NotebookView {
           ExecutableCellModel.is(selectedCell.model)
         ) {
           selectedCell.clearExecution();
-          selectedCell.model.executing = false;
           selectedCell.model.hasOutputHidden = false;
         }
       }
     } else {
       if (ExecutableCellView.is(cell) && ExecutableCellModel.is(cell.model)) {
         cell.clearExecution();
-        cell.model.executing = false;
         cell.model.hasOutputHidden = false;
       }
     }
@@ -1064,7 +1062,6 @@ export class LibroView extends BaseView implements NotebookView {
     for (const cell of this.model.cells) {
       if (ExecutableCellView.is(cell) && ExecutableCellModel.is(cell.model)) {
         cell.clearExecution();
-        cell.model.executing = false;
         cell.model.hasOutputHidden = false;
       }
     }
diff --git a/packages/libro-core/src/virtualized-manager.ts b/packages/libro-core/src/virtualized-manager.ts
@@ -1,7 +1,13 @@
 import { transient, prop, inject } from '@difizen/libro-common/app';
+import { ConfigurationService } from '@difizen/libro-common/app';
 
 import type { NotebookModel } from './libro-protocol.js';
 import { VirtualizedManagerOption } from './libro-protocol.js';
+import {
+  VirtualizationEnabled,
+  VirtualizationThresholdFileSize,
+  VirtualizationThresholdCellCount,
+} from './libro-setting.js';
 
 export interface IVirtualizedManager {
   openVirtualized: (length: number, size?: number, path?: string) => Promise<boolean>;
@@ -18,32 +24,49 @@ export class VirtualizedManager implements IVirtualizedManager {
   isVirtualized = false;
 
   libroModel: NotebookModel;
+  protected configurationService: ConfigurationService;
 
   constructor(
     @inject(VirtualizedManagerOption)
     virtualizedManagerOption: VirtualizedManagerOption,
+    @inject(ConfigurationService) configurationService: ConfigurationService,
   ) {
     this.libroModel = virtualizedManagerOption.libroModel;
+    this.configurationService = configurationService;
   }
 
   /**
    *
    * @param length cell个数
-   * @param size undefined 或者 单位 为B
+   * @param size undefined 或者 number，单位为 byte
    * @returns 是否使用虚拟滚动
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   openVirtualized = async (length: number, size?: number, path?: string) => {
+    // 获取配置项
+    const virtualizationEnabled =
+      await this.configurationService.get(VirtualizationEnabled);
+    const virtualizationThresholdFileSize = await this.configurationService.get(
+      VirtualizationThresholdFileSize,
+    );
+    const virtualizationThresholdCellCount = await this.configurationService.get(
+      VirtualizationThresholdCellCount,
+    );
+
+    if (!virtualizationEnabled) {
+      this.isVirtualized = false;
+      return false;
+    }
+
+    // 如果启用虚拟化，根据阈值判断是否使用虚拟滚动
+    if (
+      length >= virtualizationThresholdCellCount ||
+      (size && size >= virtualizationThresholdFileSize)
+    ) {
+      this.isVirtualized = true;
+      return true;
+    }
+
     this.isVirtualized = false;
     return false;
-    // this.isVirtualized = true;
-    // return true;
-    // if (length > 100 || (size && size > 4)) {
-    //   this.isVirtualized = true;
-    //   return true;
-    // } else {
-    //   this.isVirtualized = false;
-    //   return false;
-    // }
   };
 }
diff --git a/packages/libro-sql-cell/src/libro-sql-cell-view.tsx b/packages/libro-sql-cell/src/libro-sql-cell-view.tsx
@@ -306,7 +306,6 @@ export class LibroSqlCellView extends LibroEditableExecutableCellView {
         this.codeEditorManager.getUserEditorConfig(this.model);
       const codeHeight = countLines(this.model.value) * lineHeight!;
       const editorPadding = paddingTop + paddingBottom;
-
       const scrollbarHeight = 12;
 
       // TODO: 滚动条有条件显示
@@ -391,10 +390,17 @@ export class LibroSqlCellView extends LibroEditableExecutableCellView {
   }
 
   override onViewResize = (size: ViewSize): void => {
-    // 把 header 部分高度也放在这部分，用来撑开高度
-    if (size.height) {
-      this.editorAreaHeight = size.height + 36;
+    // 只有在编辑器未加载或加载中时才更新 editorAreaHeight
+    if (
+      this.editorStatus === EditorStatus.NOTLOADED ||
+      this.editorStatus === EditorStatus.LOADING
+    ) {
+      // 把 header 部分高度也放在这部分，用来撑开高度
+      if (size.height) {
+        this.editorAreaHeight = size.height + 36;
+      }
     }
+    // 编辑器已加载后，高度由 ResizeObserver 等机制自动管理
   };
 
   handleDbChange(value: string) {

Original file line number	Diff line number	Diff line change
`@@ -174,7 +174,7 @@ export const DndCellsRender = forwardRef<`
`174`	`174`	`// TODO: 类型处理`
`175`	`175`	`const model = libroView.model as any;`
`176`	`176`	`if (model.currentFileContents && model.currentFileContents.size) {`
`177`		`- size = parseFloat((model.currentFileContents.size / 1048576).toFixed(3)); // 单位MB`
	`177`	`+ size = model.currentFileContents.size; // 单位 byte`
`178`	`178`	`path = model.currentFileContents.path \|\| '';`
`179`	`179`	`}`
`180`	`180`
Original file line number	Diff line number	Diff line change
`@@ -1045,14 +1045,12 @@ export class LibroView extends BaseView implements NotebookView {`
`1045`	`1045`	`ExecutableCellModel.is(selectedCell.model)`
`1046`	`1046`	`) {`
`1047`	`1047`	`selectedCell.clearExecution();`
`1048`		`- selectedCell.model.executing = false;`
`1049`	`1048`	`selectedCell.model.hasOutputHidden = false;`
`1050`	`1049`	`}`
`1051`	`1050`	`}`
`1052`	`1051`	`} else {`
`1053`	`1052`	`if (ExecutableCellView.is(cell) && ExecutableCellModel.is(cell.model)) {`
`1054`	`1053`	`cell.clearExecution();`
`1055`		`- cell.model.executing = false;`
`1056`	`1054`	`cell.model.hasOutputHidden = false;`
`1057`	`1055`	`}`
`1058`	`1056`	`}`
`@@ -1064,7 +1062,6 @@ export class LibroView extends BaseView implements NotebookView {`
`1064`	`1062`	`for (const cell of this.model.cells) {`
`1065`	`1063`	`if (ExecutableCellView.is(cell) && ExecutableCellModel.is(cell.model)) {`
`1066`	`1064`	`cell.clearExecution();`
`1067`		`- cell.model.executing = false;`
`1068`	`1065`	`cell.model.hasOutputHidden = false;`
`1069`	`1066`	`}`
`1070`	`1067`	`}`