@difizen/libro-core 1.0.0 → 1.0.2

package/es/libro-view.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10;
+var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -33,7 +33,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ToTopOutlined } from '@ant-design/icons';
 import { concatMultilineString, copy2clipboard, readFromClipboard } from '@difizen/libro-common';
 import { equals, useInject, inject, transient, BaseView, Slot, view, ViewInstance, ViewManager, ViewOption, Deferred, Disposable, DisposableCollection, Emitter, getOrigin, prop, watch, ConfigurationService, useConfigurationValue } from '@difizen/libro-common/app';
-import { FloatButton, Button, Spin } from 'antd';
+import { l10n } from '@difizen/libro-common/l10n';
+import { FloatButton, Button, Spin, message } from 'antd';
 import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
 import { v4 } from 'uuid';
 import { CellService, EditorCellView, ExecutableCellModel, ExecutableCellView } from "./cell/index.js";
@@ -45,8 +46,9 @@ import { LibroModel } from "./libro-model.js";
 import { NotebookService, notebookViewFactoryId } from "./libro-protocol.js";
 import { LibroService } from "./libro-service.js";
 import { AutoInsertWhenNoCell, EnterEditModeWhenAddCell, HeaderToolbarVisible, RightContentFixed } from "./libro-setting.js";
+import { LibroViewTracker } from "./libro-view-tracker.js";
 import { LibroSlotManager, LibroSlotView } from "./slot/index.js";
-import { useSize } from "./utils/index.js";
+import { useFrameMonitor, useSize } from "./utils/index.js";
 import { VirtualizedManagerHelper } from "./virtualized-manager-helper.js";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -66,6 +68,17 @@ export var LibroContentComponent = /*#__PURE__*/memo(function LibroContentCompon
   var _useConfigurationValu3 = useConfigurationValue(RightContentFixed),
     _useConfigurationValu4 = _slicedToArray(_useConfigurationValu3, 1),
     rightContentFixed = _useConfigurationValu4[0];
+  useFrameMonitor(libroViewContentRef, instance.libroViewTracker.isEnabledSpmReporter, function (payload) {
+    var fpsTracker = instance.libroViewTracker.getOrCreateTrackers({
+      type: 'fps'
+    });
+    fpsTracker['avgFPS'] = payload.summary.avgFPS;
+    fpsTracker['maxFrameTime'] = payload.summary.maxFrameTime;
+    fpsTracker['totalDropped'] = payload.summary.totalDropped;
+    fpsTracker['extra'] = payload.frames;
+    fpsTracker['cells'] = instance.model.cells.length;
+    instance.libroViewTracker.tracker(fpsTracker);
+  });
   var handleScroll = useCallback(function () {
     var _instance$container, _instance$activeCell, _instance$activeCell2, _instance$activeCell3, _activeOutput$outputs, _instance$activeCell4, _libroViewTopRef$curr;
     instance.cellScrollEmitter.fire();
@@ -207,7 +220,7 @@ export var LibroRender = /*#__PURE__*/forwardRef(function LibroRender(props, ref
     children: /*#__PURE__*/_jsx(LibroContentComponent, {})
   });
 });
-export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId), _dec3 = prop(), _dec4 = inject(CellService), _dec5 = inject(LibroService), _dec6 = inject(LibroSlotManager), _dec7 = inject(LibroContextKey), _dec8 = inject(ViewManager), _dec9 = inject(ConfigurationService), _dec10 = prop(), _dec11 = prop(), _dec12 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_BaseView) {
+export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId), _dec3 = prop(), _dec4 = inject(CellService), _dec5 = inject(LibroService), _dec6 = inject(LibroSlotManager), _dec7 = inject(LibroContextKey), _dec8 = inject(LibroViewTracker), _dec9 = inject(ViewManager), _dec10 = inject(ConfigurationService), _dec11 = prop(), _dec12 = prop(), _dec13 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_BaseView) {
   _inherits(LibroView, _BaseView);
   var _super = _createSuper(LibroView);
   function LibroView(_options, collapseServiceFactory, notebookService, virtualizedManagerHelper) {
@@ -233,17 +246,19 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
     _initializerDefineProperty(_this, "libroService", _descriptor3, _assertThisInitialized(_this));
     _initializerDefineProperty(_this, "libroSlotManager", _descriptor4, _assertThisInitialized(_this));
     _initializerDefineProperty(_this, "contextKey", _descriptor5, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "viewManager", _descriptor6, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "configurationService", _descriptor7, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "libroViewTracker", _descriptor6, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "viewManager", _descriptor7, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "configurationService", _descriptor8, _assertThisInitialized(_this));
     _this.virtualizedManager = void 0;
     _this.virtualizedManagerHelper = void 0;
     _this.notebookService = void 0;
     _this.collapseService = void 0;
     _this.isDragging = false;
     _this.clipboard = void 0;
-    _initializerDefineProperty(_this, "collapserVisible", _descriptor8, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "outputsScroll", _descriptor9, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "saving", _descriptor10, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "collapserVisible", _descriptor9, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "outputsScroll", _descriptor10, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "saving", _descriptor11, _assertThisInitialized(_this));
+    _this.options = void 0;
     _this.onSaveEmitter = new Emitter();
     _this.onCellContentChangedEmitter = new Emitter();
     _this.runCellEmitter = new Emitter();
@@ -253,7 +268,19 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
     _this.onViewMount = function () {
       _this.libroService.active = _assertThisInitialized(_this);
       _this.libroSlotManager.setup(_assertThisInitialized(_this));
-
+      if (_this.libroViewTracker.isEnabledSpmReporter) {
+        _this.libroViewTracker.getOrCreateTrackers({
+          id: _this.options.modelId || _this.options.id
+        });
+      }
+      if (_this.model.cells.length > 30 || (_this.options['fileSize'] || 0) / (1024 * 1024) >= 5) {
+        message.warning( /*#__PURE__*/_jsxs("div", {
+          children: [l10n.t('即将打开的文件(内容过大 / cell 过多)，可能会导致操作卡顿，请耐心等待～'), /*#__PURE__*/_jsx(Button, {
+            type: "link",
+            children: l10n.t('我知道了')
+          })]
+        }));
+      }
       // this.libroService.libroPerformanceStatistics.setRenderEnd(new Date());
 
       // console.log(
@@ -320,16 +347,24 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
     };
     _this.addCell = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(option, position) {
-        var cellView;
+        var id, libroTracker, cellView;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _context3.next = 2;
+              if (_this.libroViewTracker.isEnabledSpmReporter && option.id) {
+                id = option.id + _this.id;
+                libroTracker = _this.libroViewTracker.getOrCreateTrackers({
+                  id: id + 'add'
+                });
+                libroTracker['extra'].cellsCount = _this.model.cells.length;
+                libroTracker['extra'].cellOperation = 'add';
+              }
+              _context3.next = 3;
               return _this.getCellViewByOption(option);
-            case 2:
+            case 3:
               cellView = _context3.sent;
               _this.model.addCell(cellView, position);
-            case 4:
+            case 5:
             case "end":
               return _context3.stop();
           }
@@ -341,16 +376,24 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
     }();
     _this.addCellAbove = /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(option, position) {
-        var cellView;
+        var id, libroTracker, cellView;
         return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              _context4.next = 2;
+              if (_this.libroViewTracker.isEnabledSpmReporter && option.id) {
+                id = option.id + _this.id;
+                libroTracker = _this.libroViewTracker.getOrCreateTrackers({
+                  id: id + 'add'
+                });
+                libroTracker['extra'].cellsCount = _this.model.cells.length;
+                libroTracker['extra'].cellOperation = 'add';
+              }
+              _context4.next = 3;
               return _this.getCellViewByOption(option);
-            case 2:
+            case 3:
               cellView = _context4.sent;
               _this.model.addCell(cellView, position, 'above');
-            case 4:
+            case 5:
             case "end":
               return _context4.stop();
           }
@@ -371,6 +414,14 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
       return -1;
     };
     _this.deleteCell = function (cell) {
+      if (_this.libroViewTracker.isEnabledSpmReporter && cell.model.id) {
+        var id = cell.model.id + _this.id;
+        var libroTracker = _this.libroViewTracker.getOrCreateTrackers({
+          id: id + 'delete'
+        });
+        libroTracker['extra'].cellsCount = _this.model.cells.length;
+        libroTracker['extra'].cellOperation = 'delete';
+      }
       var deleteIndex = _this.model.getCells().findIndex(function (item) {
         return equals(item, cell);
       });
@@ -1665,6 +1716,7 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
     if (_options.id) {
       _this.id = _options.id;
     }
+    _this.options = _options;
     _this.notebookService = notebookService;
     _this.model = _this.notebookService.getOrCreateModel(_options);
     _this.collapseService = collapseServiceFactory({
@@ -2052,31 +2104,36 @@ export var LibroView = (_dec = transient(), _dec2 = view(notebookViewFactoryId),
   enumerable: true,
   writable: true,
   initializer: null
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, "viewManager", [_dec8], {
+}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, "libroViewTracker", [_dec8], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, "viewManager", [_dec9], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, "configurationService", [_dec9], {
+}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, "configurationService", [_dec10], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, "collapserVisible", [_dec10], {
+}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, "collapserVisible", [_dec11], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return false;
   }
-}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, "outputsScroll", [_dec11], {
+}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, "outputsScroll", [_dec12], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return false;
   }
-}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, "saving", [_dec12], {
+}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, "saving", [_dec13], {
   configurable: true,
   enumerable: true,
   writable: true,

package/es/utils/index.d.ts

@@ -4,5 +4,18 @@ type Size = {
     height: number;
 };
 export declare function useSize(ref: RefObject<HTMLDivElement>): Size | undefined;
+interface FrameMetrics {
+    timestamp: number;
+    fps: number;
+    frameTime: number;
+    droppedFrames: number;
+}
+export declare const useFrameMonitor: (scrollContainerRef: React.RefObject<HTMLElement>, isEnabledSpmReporter: boolean, onReport?: ((payload: {
+    frames: FrameMetrics[];
+    summary: any;
+}) => void) | undefined) => {
+    frameData: import("react").MutableRefObject<FrameMetrics[]>;
+    reportFrames: () => void;
+};
 export {};
 //# sourceMappingURL=index.d.ts.map

package/es/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9C,wBAAgB,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,GAAG,SAAS,CAuBxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBvC,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9C,wBAAgB,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,GAAG,SAAS,CAuBxE;AAED,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,uBACN,eAAe,CAAC,WAAW,CAAC,wBAC1B,OAAO,wBACR;IAAE,QAAQ,YAAY,EAAE,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,KAAK,IAAI;;;CAiIvE,CAAC"}

package/es/utils/index.js

@@ -1,3 +1,7 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -5,6 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useUnmount } from '@difizen/libro-common/app';
+import { useEffect } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 function useRafState(initialState) {
   var ref = useRef(0);
@@ -50,4 +55,123 @@ export function useSize(ref) {
     };
   }, [ref, setSize]);
   return size;
-}
+}
+export var useFrameMonitor = function useFrameMonitor(scrollContainerRef, isEnabledSpmReporter, onReport) {
+  var frameData = useRef([]);
+  var lastFrameTime = useRef(performance.now());
+  var frameCount = useRef(0);
+  var lastScrollPos = useRef(0);
+  var rafId = useRef();
+  var isMonitoring = useRef(false);
+  // const reportTimeout = useRef<NodeJS.Timeout>();
+  var intervalId = useRef();
+  var scrollDebounceTimer = useRef();
+  var stopFrameCapture = useCallback(function () {
+    if (rafId.current) {
+      cancelAnimationFrame(rafId.current);
+    }
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+    }
+    isMonitoring.current = false;
+    frameCount.current = 0;
+    lastFrameTime.current = performance.now();
+  }, []);
+  var startFrameCapture = useCallback(function () {
+    if (isMonitoring.current) {
+      return;
+    }
+    var calculateFPS = function calculateFPS() {
+      if (!isMonitoring.current) {
+        return;
+      }
+      var now = performance.now();
+      var delta = now - lastFrameTime.current;
+      frameData.current.push({
+        timestamp: now,
+        fps: Math.round(frameCount.current * 1000 / delta),
+        frameTime: delta / frameCount.current,
+        droppedFrames: Math.max(0, Math.floor(delta / 16.67) - frameCount.current)
+      });
+      lastFrameTime.current = now;
+      frameCount.current = 0;
+    };
+    var loop = function loop() {
+      if (isMonitoring.current) {
+        frameCount.current++;
+        rafId.current = requestAnimationFrame(loop);
+      }
+    };
+    isMonitoring.current = true;
+    frameCount.current = 0;
+    lastFrameTime.current = performance.now();
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+    }
+    intervalId.current = setInterval(calculateFPS, 1500); // 每秒生成一个数据点
+    rafId.current = requestAnimationFrame(loop);
+  }, []);
+  var reportFrames = useCallback(function () {
+    if (frameData.current.length === 0) {
+      return;
+    }
+    var send = function send() {
+      var payload = {
+        frames: frameData.current,
+        summary: {
+          avgFPS: frameData.current.reduce(function (a, b) {
+            return a + b.fps;
+          }, 0) / frameData.current.length,
+          maxFrameTime: Math.max.apply(Math, _toConsumableArray(frameData.current.map(function (f) {
+            return f.frameTime;
+          }))),
+          totalDropped: frameData.current.reduce(function (a, b) {
+            return a + b.droppedFrames;
+          }, 0)
+        }
+      };
+      if (onReport) {
+        onReport(payload); // 触发外部回调
+      }
+      frameData.current = [];
+    };
+    requestIdleCallback(send, {
+      timeout: 1000
+    }) || setTimeout(send, 0);
+  }, [onReport]); // 添加 onReport 依赖
+
+  useEffect(function () {
+    if (!isEnabledSpmReporter) {
+      return;
+    }
+    var container = scrollContainerRef.current || window;
+    var handleScroll = function handleScroll() {
+      // const currentScroll =
+      //   (container as Window).scrollY || (container as HTMLElement).scrollTop;
+      var currentScroll = container instanceof Window ? container.scrollY : container.scrollTop;
+      var scrollDelta = Math.abs(currentScroll - lastScrollPos.current);
+      if (scrollDelta > 10) {
+        if (!isMonitoring.current) {
+          startFrameCapture();
+        }
+        clearTimeout(scrollDebounceTimer.current);
+        scrollDebounceTimer.current = setTimeout(function () {
+          stopFrameCapture();
+          reportFrames();
+        }, 2000);
+      }
+      lastScrollPos.current = currentScroll;
+    };
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+      stopFrameCapture();
+    };
+  }, [scrollContainerRef, startFrameCapture, stopFrameCapture, reportFrames, isEnabledSpmReporter]);
+  return {
+    frameData: frameData,
+    reportFrames: reportFrames
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "keywords": [
     "libro",
@@ -34,10 +34,10 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.1.0",
-    "@difizen/libro-code-editor": "^1.0.0",
-    "@difizen/libro-common": "^1.0.0",
-    "@difizen/libro-shared-model": "^1.0.0",
-    "@difizen/libro-virtualized": "^1.0.0",
+    "@difizen/libro-code-editor": "^1.0.2",
+    "@difizen/libro-common": "^1.0.2",
+    "@difizen/libro-shared-model": "^1.0.2",
+    "@difizen/libro-virtualized": "^1.0.2",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "dnd-core": "^16.0.1",

package/src/cell/libro-cell-service.ts

@@ -5,6 +5,7 @@ import { contrib, inject, singleton } from '@difizen/libro-common/app';
 
 import type { CellView, CellModel, CellOptions } from '../libro-protocol.js';
 import { LibroService } from '../libro-service.js';
+import { LibroViewTracker } from '../libro-view-tracker.js';
 
 import type { CellMeta } from './libro-cell-protocol.js';
 import {
@@ -24,6 +25,7 @@ export class LibroCellService implements CellService, ApplicationContribution {
   protected cellTypeToModelContribution: Map<string, CellModelContribution> = new Map();
   protected readonly viewManager: ViewManager;
   protected modelCache: Map<string, Map<string, CellModel>> = new Map();
+  @inject(LibroViewTracker) libroViewTracker: LibroViewTracker;
 
   libroService: LibroService;
   constructor(

package/src/cell/libro-cell-view.tsx

@@ -12,6 +12,7 @@ import type { CellView, NotebookView } from '../libro-protocol.js';
 
 import { CellService } from './libro-cell-protocol.js';
 import type { LibroCell } from './libro-cell-protocol.js';
+import type { LibroCellService } from './libro-cell-service.js';
 import { ExecutableCellModel } from './libro-executable-cell-model.js';
 
 export const LibroCellComponent = React.forwardRef(function LibroCellComponent() {
@@ -83,6 +84,41 @@ export class LibroCellView extends BaseView implements CellView {
     this.cellWatch();
   }
 
+  override onViewMount(): void {
+    const id = this.options.id + this.parent.id + 'add';
+    if (
+      (this.cellService as LibroCellService).libroViewTracker.isEnabledSpmReporter &&
+      this.options.id &&
+      (this.cellService as LibroCellService).libroViewTracker.hasTracker(id)
+    ) {
+      const cellTracker = (
+        this.cellService as LibroCellService
+      ).libroViewTracker.getOrCreateTrackers({
+        id,
+      });
+      cellTracker['endTime'] = Date.now();
+      cellTracker['extra'].cellType = this.model.type;
+      (this.cellService as LibroCellService).libroViewTracker.tracker(cellTracker);
+    }
+  }
+
+  override onViewUnmount(): void {
+    const id = this.model.id + this.parent.id + 'delete';
+    if (
+      (this.cellService as LibroCellService).libroViewTracker.isEnabledSpmReporter &&
+      (this.cellService as LibroCellService).libroViewTracker.hasTracker(id)
+    ) {
+      const cellTracker = (
+        this.cellService as LibroCellService
+      ).libroViewTracker.getOrCreateTrackers({
+        id,
+      });
+      cellTracker['endTime'] = Date.now();
+      cellTracker['extra'].cellType = this.model.type;
+      (this.cellService as LibroCellService).libroViewTracker.tracker(cellTracker);
+    }
+  }
+
   cellWatch() {
     this.toDispose.push(
       watch(this.model, 'value', () => {

package/src/cell/libro-edit-cell-view.tsx

@@ -127,6 +127,30 @@ export abstract class LibroEditorCellView
       if (e.status === 'ready') {
         this.editor = this.editorView!.editor;
         this.afterEditorReady();
+        if (this.parent.libroViewTracker.isEnabledSpmReporter) {
+          if (
+            this.parent.libroViewTracker.hasTracker(
+              this.parent.model.options['modelId'] || this.parent.model.options['id'],
+            )
+          ) {
+            const libroTracker = this.parent.libroViewTracker.getOrCreateTrackers({
+              id:
+                this.parent.model.options['modelId'] || this.parent.model.options['id'],
+            });
+            libroTracker['endTime'] = Date.now();
+            libroTracker['extra'].cellsCount = this.parent.model.cells.length;
+            this.parent.libroViewTracker.tracker(libroTracker);
+          }
+          const id = this.options.id + this.parent.id + 'add';
+          if (this.options.id && this.parent.libroViewTracker.hasTracker(id)) {
+            const cellTracker = this.parent.libroViewTracker.getOrCreateTrackers({
+              id,
+            });
+            cellTracker['endTime'] = Date.now();
+            cellTracker['extra'].cellType = this.model.type;
+            this.parent.libroViewTracker.tracker(cellTracker);
+          }
+        }
       } else if (e.status === 'disposed') {
         this.toDisposeOnEditor.dispose();
       }
@@ -144,6 +168,7 @@ export abstract class LibroEditorCellView
   };
 
   override onViewMount() {
+    super.onViewMount();
     this.createEditor();
     //选中cell时才focus
     if (this.parent.model.active?.id === this.id) {

package/src/command/libro-command-contribution.ts

@@ -9,13 +9,19 @@ import {
 import { equals } from '@difizen/libro-common/app';
 import { v4 } from 'uuid';
 
-import { LibroCellView, ExecutableCellModel, EditorCellView } from '../cell/index.js';
+import {
+  LibroCellView,
+  ExecutableCellModel,
+  EditorCellView,
+  LibroCellService,
+} from '../cell/index.js';
 import type { LibroEditorCellView } from '../cell/index.js';
 import { LibroContextKey } from '../libro-context-key.js';
 import type { LibroModel } from '../libro-model.js';
 import type { CellView, NotebookView } from '../libro-protocol.js';
 import { LibroToolbarArea } from '../libro-protocol.js';
 import { LibroService } from '../libro-service.js';
+import { LibroViewTracker } from '../libro-view-tracker.js';
 import { LibroView } from '../libro-view.js';
 import { SettingsModal } from '../settings/settings-modal.js';
 import { RestartClearOutputModal } from '../toolbar/restart-clear-outputs-modal.js';
@@ -30,7 +36,9 @@ export class LibroCommandContribution implements CommandContribution {
   @inject(ModalService) protected readonly modalService: ModalService;
   @inject(LibroCommandRegister) protected readonly libroCommand: LibroCommandRegister;
   @inject(LibroService) protected readonly libroService: LibroService;
+  @inject(LibroCellService) protected readonly cellService: LibroCellService;
   @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
+  @inject(LibroViewTracker) protected libroViewTracker: LibroViewTracker;
 
   registerCommands(command: CommandRegistry): void {
     this.libroCommand.registerLibroCommand(command, NotebookCommands['EnterEditMode'], {
@@ -250,23 +258,31 @@ export class LibroCommandContribution implements CommandContribution {
           if (!libro || !(libro instanceof LibroView)) {
             return;
           }
-          if (!cell || !(cell instanceof LibroCellView)) {
-            libro.addCell(
-              { id: v4(), cell: { cell_type: 'code', source: '', metadata: {} } },
-              0,
-            );
-          } else {
-            const cellIndex = libro.model.cells.findIndex((item) => equals(item, cell));
-            libro.addCell(
-              {
-                id: v4(),
-                cell: { cell_type: cell.model.type, source: '', metadata: {} },
-              },
-              cellIndex + 1,
-            );
+          const createNewCell = (cellType: string) => ({
+            id: v4(),
+            cell: { cell_type: cellType, source: '', metadata: {} },
+          });
+
+          const newCell =
+            !cell || !(cell instanceof LibroCellView)
+              ? createNewCell('code')
+              : createNewCell(cell.model.type);
+
+          const insertIndex =
+            !cell || !(cell instanceof LibroCellView)
+              ? 0
+              : libro.model.cells.findIndex((item) => equals(item, cell)) + 1;
+
+          libro.addCell(newCell, insertIndex);
+          if (this.libroViewTracker.isEnabledSpmReporter) {
+            const id = newCell.id + libro.id;
+            const libroTracker = this.libroViewTracker.getOrCreateTrackers({
+              id,
+            });
+            libroTracker['extra'].cellsCount = libro.model.cells.length;
+            libroTracker['extra'].cellOperation = 'add';
           }
         },
-        // isVisible: () => false,
         isVisible: (cell, libro, path) => {
           if (!libro || !(libro instanceof LibroView)) {
             return false;
@@ -296,13 +312,11 @@ export class LibroCommandContribution implements CommandContribution {
           }
           const cellIndex = libro.model.cells.findIndex((item) => equals(item, cell));
           if (cellIndex > -1) {
-            libro.addCellAbove(
-              {
-                id: v4(),
-                cell: { cell_type: cell.model.type, source: '', metadata: {} },
-              },
-              cellIndex,
-            );
+            const cellOptions = {
+              id: v4(),
+              cell: { cell_type: cell.model.type, source: '', metadata: {} },
+            };
+            libro.addCellAbove(cellOptions, cellIndex);
           }
         },
         isEnabled: (cell, libro) => {

package/src/index.less

@@ -89,7 +89,7 @@
   border-bottom: 1px solid var(--mana-libro-toptoolbar-border-color);
 
   .libro-header-left {
-    width: 240px;
+    width: 300px;
     flex-shrink: 0;
 
     .mana-toolbar {

package/src/libro-protocol.ts

@@ -39,9 +39,6 @@ export interface NotebookOption extends Options {
   [key: string]: any;
 }
 
-export const PerformaceStatisticOption = Symbol('PerformaceStatisticOption');
-export type PerformaceStatisticOption = Options;
-
 export const ModelFactory = Symbol('ModelFactory');
 export type ModelFactory<T = NotebookOption> = (options: T) => NotebookModel;
 
@@ -58,6 +55,12 @@ export type Options = {
   [key: string]: any;
 };
 
+export interface ITracker {
+  id: string;
+  [key: string]: any;
+  log: () => Record<string, any>;
+}
+
 export interface ScrollParams {
   cellIndex: number;
   cellOffset?: number;