whistle.mockbubu 2.2.7 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mockbubu",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "mock response data",
   "scripts": {
     "lint": "eslint . --ext .js",

package/public/js/app.js

@@ -1466,8 +1466,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/esnext.iterator.for-each.js */ "./node_modules/.pnpm/core-js@3.8.3/node_modules/core-js/modules/esnext.iterator.for-each.js");
 /* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var monaco_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! monaco-editor */ "include-loader!./node_modules/.pnpm/monaco-editor@0.55.1/node_modules/monaco-editor/esm/vs/editor/editor.main.js");
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue */ "./node_modules/.pnpm/vue@2.7.14/node_modules/vue/dist/vue.runtime.esm.js");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! vue */ "./node_modules/.pnpm/vue@2.7.14/node_modules/vue/dist/vue.runtime.esm.js");
 /* harmony import */ var _utils_monaco_previews__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/monaco-previews */ "./src/utils/monaco-previews.js");
+/* harmony import */ var _utils_monaco_fast_paste__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/monaco-fast-paste */ "./src/utils/monaco-fast-paste.js");
+
 
 
 
@@ -1507,16 +1509,18 @@ const __default__ = {
     function getMonacoTheme() {
       return document.documentElement.getAttribute('data-theme') === 'dark' ? 'vs-dark' : 'vs';
     }
-    const monacoRef = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(null);
-    const monacoInstance = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(null);
-    const error = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(false);
-    const internalChange = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(false);
-    const showScrollTop = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(false);
-    const scrollTimer = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(null);
-    const isButtonHovered = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(false);
-    const lastScrollTime = (0,vue__WEBPACK_IMPORTED_MODULE_4__.ref)(0);
+    const monacoRef = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(null);
+    const monacoInstance = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(null);
+    const error = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(false);
+    const internalChange = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(false);
+    const showScrollTop = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(false);
+    const scrollTimer = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(null);
+    const isButtonHovered = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(false);
+    const lastScrollTime = (0,vue__WEBPACK_IMPORTED_MODULE_5__.ref)(0);
     let previewTimer = null;
     let themeObserver = null;
+    let contentChangeTimer = null;
+    let fastPasteHandle = null;
     function applyPreviews(editorInstance) {
       if (!editorInstance) return;
       if (previewTimer) clearTimeout(previewTimer);
@@ -1564,23 +1568,51 @@ const __default__ = {
           enabled: 'on'
         }
       });
-      monacoInstance.value.onDidChangeModelContent(() => {
-        if (internalChange.value) return;
-        const raw = monacoInstance.value.getValue();
-        try {
-          const jsonData = JSON.parse(raw);
-          error.value = false;
-          internalChange.value = true;
-          emit('json-change', jsonData);
-          emit('input', jsonData);
-          (0,vue__WEBPACK_IMPORTED_MODULE_4__.nextTick)(() => {
-            internalChange.value = false;
-          });
-        } catch (e) {
-          error.value = true;
-          emit('has-error', e);
+
+      // ─── 安装大内容快速粘贴优化（独立模块） ─────────────────────────────────────
+      fastPasteHandle = (0,_utils_monaco_fast_paste__WEBPACK_IMPORTED_MODULE_4__.installFastPaste)(monacoInstance.value, {
+        isReadOnly: () => props.readOnly,
+        onContentChange: raw => {
+          try {
+            const jsonData = JSON.parse(raw);
+            error.value = false;
+            internalChange.value = true;
+            emit('json-change', jsonData);
+            emit('input', jsonData);
+            (0,vue__WEBPACK_IMPORTED_MODULE_5__.nextTick)(() => {
+              internalChange.value = false;
+            });
+          } catch (err) {
+            error.value = true;
+            emit('has-error', err);
+          }
+          applyPreviews(monacoInstance.value);
         }
-        applyPreviews(monacoInstance.value);
+      });
+
+      // ─── 常规内容变更处理 ────────────────────────────────────────────────────────
+      monacoInstance.value.onDidChangeModelContent(() => {
+        if (internalChange.value || fastPasteHandle?.isPasting) return;
+        // 防抖：避免连续编辑时频繁触发 JSON.parse + Vue 响应式更新
+        if (contentChangeTimer) clearTimeout(contentChangeTimer);
+        contentChangeTimer = setTimeout(() => {
+          if (!monacoInstance.value) return;
+          const raw = monacoInstance.value.getValue();
+          try {
+            const jsonData = JSON.parse(raw);
+            error.value = false;
+            internalChange.value = true;
+            emit('json-change', jsonData);
+            emit('input', jsonData);
+            (0,vue__WEBPACK_IMPORTED_MODULE_5__.nextTick)(() => {
+              internalChange.value = false;
+            });
+          } catch (e) {
+            error.value = true;
+            emit('has-error', e);
+          }
+          applyPreviews(monacoInstance.value);
+        }, 300);
       });
       monacoInstance.value.onDidScrollChange(() => {
         lastScrollTime.value = Date.now();
@@ -1608,6 +1640,11 @@ const __default__ = {
         themeObserver = null;
       }
       if (previewTimer) clearTimeout(previewTimer);
+      if (contentChangeTimer) clearTimeout(contentChangeTimer);
+      if (fastPasteHandle) {
+        fastPasteHandle.dispose();
+        fastPasteHandle = null;
+      }
       if (monacoInstance.value) {
         (monacoInstance.value._imageWidgets || []).forEach(w => monacoInstance.value.removeContentWidget(w));
         if (monacoInstance.value._colorDecIds?.length) {
@@ -1680,34 +1717,32 @@ const __default__ = {
     });
 
     // ─── 生命周期 ─────────────────────────────────────────────
-    (0,vue__WEBPACK_IMPORTED_MODULE_4__.onMounted)(() => {
+    (0,vue__WEBPACK_IMPORTED_MODULE_5__.onMounted)(() => {
       initMonaco();
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_4__.onBeforeUnmount)(() => {
+    (0,vue__WEBPACK_IMPORTED_MODULE_5__.onBeforeUnmount)(() => {
       destroyMonaco();
       if (scrollTimer.value) clearTimeout(scrollTimer.value);
     });
 
     // ─── 监听外部 value 变化 ──────────────────────────────────
-    (0,vue__WEBPACK_IMPORTED_MODULE_4__.watch)(() => props.value, async val => {
+    (0,vue__WEBPACK_IMPORTED_MODULE_5__.watch)(() => props.value, async val => {
       if (internalChange.value) return;
       if (monacoInstance.value) {
         const str = valueToString(val);
         if (str !== monacoInstance.value.getValue()) {
           internalChange.value = true;
           monacoInstance.value.setValue(str);
-          await (0,vue__WEBPACK_IMPORTED_MODULE_4__.nextTick)();
+          await (0,vue__WEBPACK_IMPORTED_MODULE_5__.nextTick)();
           internalChange.value = false;
           applyPreviews(monacoInstance.value);
         }
         error.value = false;
       }
-    }, {
-      deep: true
     });
 
     // 只读状态变化时动态更新
-    (0,vue__WEBPACK_IMPORTED_MODULE_4__.watch)(() => props.readOnly, val => {
+    (0,vue__WEBPACK_IMPORTED_MODULE_5__.watch)(() => props.readOnly, val => {
       monacoInstance.value?.updateOptions({
         readOnly: val
       });
@@ -1727,6 +1762,8 @@ const __default__ = {
       lastScrollTime,
       previewTimer,
       themeObserver,
+      contentChangeTimer,
+      fastPasteHandle,
       applyPreviews,
       localeMap,
       valueToString,
@@ -11843,6 +11880,173 @@ function createSingletonHook(hook) {
 
 /***/ }),
 
+/***/ "./src/utils/monaco-fast-paste.js":
+/*!****************************************!*\
+  !*** ./src/utils/monaco-fast-paste.js ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   installFastPaste: function() { return /* binding */ installFastPaste; }
+/* harmony export */ });
+/* harmony import */ var monaco_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! monaco-editor */ "include-loader!./node_modules/.pnpm/monaco-editor@0.55.1/node_modules/monaco-editor/esm/vs/editor/editor.main.js");
+/**
+ * Monaco 大文本粘贴优化模块
+ *
+ * 解决 Monaco standalone 版本粘贴大文本时的性能问题。
+ * 原因：Monaco 的 executeEdits 对大文本做 piece tree 增量操作 + 同步 tokenization，
+ *       导致 3.5MB 文本粘贴耗时 20s+。
+ * 方案：拦截粘贴事件，用 model.setValue() 直接重建 buffer（毫秒级），
+ *       并提供自定义 undo/redo 栈弥补 setValue 丢失原生 undo 的问题。
+ */
+
+
+// 超过此行数时启用快速粘贴
+const FAST_PASTE_LINE_THRESHOLD = 10000;
+
+/**
+ * 为 Monaco 编辑器实例安装快速粘贴优化
+ * @param {object} editor - Monaco editor 实例
+ * @param {object} options
+ * @param {Function} options.onContentChange - 内容变更后的回调，参数为 model.getValue()
+ * @param {Function} [options.isReadOnly] - 返回当前是否只读
+ * @returns {{ dispose: Function }} 调用 dispose() 移除所有监听
+ */
+function installFastPaste(editor, {
+  onContentChange,
+  isReadOnly
+}) {
+  const undoStack = [];
+  let redoStack = [];
+  let isPasting = false;
+
+  /**
+   * 执行 setValue 并通知外部
+   */
+  function setValueAndNotify(model, newText) {
+    isPasting = true;
+    model.setValue(newText);
+    isPasting = false;
+    // 切 plaintext 阻止 setValue 后的同步 tokenization，延迟恢复
+    monaco_editor__WEBPACK_IMPORTED_MODULE_0__.editor.setModelLanguage(model, 'plaintext');
+    setTimeout(() => {
+      monaco_editor__WEBPACK_IMPORTED_MODULE_0__.editor.setModelLanguage(model, 'json');
+    }, 50);
+    // 通知外部
+    setTimeout(() => {
+      onContentChange?.(model.getValue());
+    }, 100);
+  }
+
+  // ─── document 级 paste 拦截 ─────────────────────────────────────────
+  const handlePaste = e => {
+    if (!editor || isReadOnly?.()) return;
+    if (!editor.hasTextFocus()) return;
+    const model = editor.getModel();
+    if (!model) return;
+    const clipText = e.clipboardData?.getData('text/plain');
+    const t0 = performance.now();
+    if (!clipText || clipText.length < 500) return;
+    const oldLineCount = model.getLineCount();
+    const newLineCount = clipText.split('\n').length;
+    // 旧内容 和 即将粘贴的新内容 行数均超过设定值时触发
+    const shouldUseFastPaste = oldLineCount > FAST_PASTE_LINE_THRESHOLD && newLineCount > FAST_PASTE_LINE_THRESHOLD;
+    if (!shouldUseFastPaste) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const selection = editor.getSelection();
+
+    // 保存旧内容到 undo 栈
+    const t1 = performance.now();
+    const oldText = model.getValue();
+    undoStack.push(oldText);
+    redoStack = [];
+
+    // 拼接新文本
+    const startOffset = model.getOffsetAt(selection.getStartPosition());
+    const endOffset = model.getOffsetAt(selection.getEndPosition());
+    const newText = oldText.substring(0, startOffset) + clipText + oldText.substring(endOffset);
+    const t2 = performance.now();
+
+    // setValue
+    isPasting = true;
+    model.setValue(newText);
+    const t3 = performance.now();
+
+    // 设置光标
+    const cursorOffset = startOffset + clipText.length;
+    const cursorPos = model.getPositionAt(cursorOffset);
+    editor.setPosition(cursorPos);
+    editor.revealPosition(cursorPos);
+    isPasting = false;
+
+    // 切 plaintext 阻止同步 tokenization
+    monaco_editor__WEBPACK_IMPORTED_MODULE_0__.editor.setModelLanguage(model, 'plaintext');
+    const t4 = performance.now();
+    console.log(`[FastPaste] ✅ 完成! chars=${clipText.length}, oldLines=${oldLineCount}, newLines=${newLineCount}, ` + `拼接=${(t2 - t1).toFixed(1)}ms, setValue=${(t3 - t2).toFixed(1)}ms, ` + `总耗时=${(t4 - t0).toFixed(1)}ms`);
+
+    // 延迟恢复 JSON（只 tokenize 可视区）
+    setTimeout(() => {
+      monaco_editor__WEBPACK_IMPORTED_MODULE_0__.editor.setModelLanguage(model, 'json');
+    }, 50);
+
+    // 延迟通知外部
+    setTimeout(() => {
+      onContentChange?.(model.getValue());
+    }, 300);
+  };
+  document.addEventListener('paste', handlePaste, true);
+
+  // ─── 自定义 undo/redo（先走 Monaco 内部，空了再走自定义栈）──────────
+  const undoDisposable = editor.addCommand(monaco_editor__WEBPACK_IMPORTED_MODULE_0__.KeyMod.CtrlCmd | monaco_editor__WEBPACK_IMPORTED_MODULE_0__.KeyCode.KeyZ, () => {
+    const model = editor.getModel();
+    if (!model) return;
+
+    // 先尝试 Monaco 内部 undo
+    const before = model.getValue();
+    editor.trigger('keyboard', 'undo', null);
+    const after = model.getValue();
+    if (before !== after) return;
+
+    // Monaco undo stack 已空，从自定义栈恢复
+    if (undoStack.length > 0) {
+      redoStack.push(before);
+      setValueAndNotify(model, undoStack.pop());
+    }
+  });
+  const redoDisposable = editor.addCommand(monaco_editor__WEBPACK_IMPORTED_MODULE_0__.KeyMod.CtrlCmd | monaco_editor__WEBPACK_IMPORTED_MODULE_0__.KeyMod.Shift | monaco_editor__WEBPACK_IMPORTED_MODULE_0__.KeyCode.KeyZ, () => {
+    const model = editor.getModel();
+    if (!model) return;
+
+    // 先尝试 Monaco 内部 redo
+    const before = model.getValue();
+    editor.trigger('keyboard', 'redo', null);
+    const after = model.getValue();
+    if (before !== after) return;
+
+    // Monaco redo stack 已空，从自定义栈恢复
+    if (redoStack.length > 0) {
+      undoStack.push(before);
+      setValueAndNotify(model, redoStack.pop());
+    }
+  });
+
+  // ─── 返回 isPasting 状态的 getter + dispose ─────────────────────────
+  return {
+    /** 当前是否在执行快速粘贴（外部 onDidChangeModelContent 应跳过） */
+    get isPasting() {
+      return isPasting;
+    },
+    dispose() {
+      document.removeEventListener('paste', handlePaste, true);
+    }
+  };
+}
+
+/***/ }),
+
 /***/ "./src/utils/monaco-previews.js":
 /*!**************************************!*\
   !*** ./src/utils/monaco-previews.js ***!