whistle.mockbubu 2.2.4 → 2.2.5

package/lib/uiServer/router/files/match-version-router.js

@@ -32,7 +32,7 @@ module.exports = (router) => {
   // 新增匹配规则
   router.post('/cgi-bin/mockbubu/add-match-version', wrapRouteHandler(async (ctx) => {
     const { groupManager } = ctx
-    const { url, name, description = '' } = ctx.request.body || {}
+    const { url, name, description = '', content } = ctx.request.body || {}
 
     validateRequiredParams({ url, name }, ['url', 'name'])
 
@@ -42,7 +42,7 @@ module.exports = (router) => {
       name,
       description,
       conditions: [], // 新规则默认空条件（兜底匹配）
-      content: {},
+      content: content || {},
       priority: 0,
     })
 

package/package.json

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

package/public/js/app.js

@@ -2317,6 +2317,24 @@ const __default__ = {
     const fullScreenEditorRef = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)(null);
     const versionNameInput = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)(null);
     const matchRuleNameInput = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)(null);
+    const tabsAreaRef = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)(null);
+    const tabsFade = (0,vue__WEBPACK_IMPORTED_MODULE_12__.reactive)({
+      top: false,
+      bottom: false
+    });
+    let tabsFadePending = false;
+    const updateTabsFade = () => {
+      if (tabsFadePending) return;
+      tabsFadePending = true;
+      requestAnimationFrame(() => {
+        const el = tabsAreaRef.value;
+        if (el) {
+          tabsFade.top = el.scrollTop > 2;
+          tabsFade.bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2;
+        }
+        tabsFadePending = false;
+      });
+    };
     const responseList = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)([]);
     const currentFile = (0,vue__WEBPACK_IMPORTED_MODULE_12__.ref)({
       content: {}
@@ -2504,8 +2522,10 @@ const __default__ = {
 
         // 后端返回的数据已经包含 type, name, content, updateTime
         // 只需添加 filename 字段用于兼容前端现有逻辑
+        // 冻结每项的 content，阻止 Vue 2 对大对象进行深度响应式处理，避免主线程卡死
         versionList.forEach(item => {
           item.filename = item.name;
+          item.content = Object.freeze(item.content || {});
         });
 
         // 直接替换列表数据
@@ -2516,11 +2536,19 @@ const __default__ = {
         // 否则选中对应的版本
         const targetName = mockVersion.value || 'source';
         const currentFileData = versionList.find(item => item.name === targetName);
+
+        // 选中项需要深拷贝一份可编辑副本（frozen 对象不可直接编辑）
         if (currentFileData) {
-          currentFile.value = currentFileData;
+          currentFile.value = {
+            ...currentFileData,
+            content: JSON.parse(JSON.stringify(currentFileData.content))
+          };
         } else {
-          // 如果找不到目标版本，默认选中第一个（通常是 source）
-          currentFile.value = versionList[0] || {};
+          const first = versionList[0];
+          currentFile.value = first ? {
+            ...first,
+            content: JSON.parse(JSON.stringify(first.content))
+          } : {};
         }
         console.log('[ResponsePanel] 获取版本列表成功:', {
           total: versionList.length,
@@ -2533,24 +2561,9 @@ const __default__ = {
         throw err;
       });
     };
-
-    /**
-     * 从已有版本名中计算下一个 v{n} 编号（历史最大编号+1，不与现有名重复）
-     */
-    const nextVersionName = () => {
-      const existing = new Set(responseList.value.map(item => item.filename));
-      let max = 0;
-      responseList.value.forEach(item => {
-        const m = /^v(\d+)$/.exec(item.filename);
-        if (m) max = Math.max(max, parseInt(m[1], 10));
-      });
-      let n = max + 1;
-      while (existing.has(`v${n}`)) n++;
-      return `v${n}`;
-    };
     const onCreate = () => {
       versionModal.status = 'create';
-      versionModal.name = nextVersionName();
+      versionModal.name = '';
       versionModal.description = '';
       versionModal.editingVersion = null;
       versionModal.visible = true;
@@ -2733,11 +2746,11 @@ const __default__ = {
             console.error('[ResponsePanel] 解析版本数据失败:', error);
             return;
           }
-          console.log('[ResponsePanel] 解析后的版本列表:', versionList);
 
-          // 添加 filename 字段
+          // 冻结 content，防止 Vue 2 深度 observe 大对象阻塞主线程
           versionList.forEach(item => {
             item.filename = item.name;
+            item.content = Object.freeze(item.content || {});
           });
 
           // 更新列表
@@ -2848,8 +2861,10 @@ const __default__ = {
     };
     const selectFile = item => {
       const tempEffect = currentFile.value.effect;
+      // content 可能是 frozen 对象，深拷贝一份可编辑副本
       currentFile.value = {
         ...item,
+        content: JSON.parse(JSON.stringify(item.content || {})),
         effect: tempEffect
       };
       const versionName = item.type === 'history' ? item.filename : '';
@@ -3300,14 +3315,30 @@ const __default__ = {
       matchRuleChanged.value = false;
     };
 
-    /** 条件编辑区更新 */
-    const handleConditionsChange = newConditions => {
+    /** 条件编辑区更新 — 直接自动保存，无需手动点保存 */
+    const handleConditionsChange = async newConditions => {
       if (!currentMatchRule.value) return;
       currentMatchRule.value = {
         ...currentMatchRule.value,
         conditions: newConditions
       };
-      matchRuleChanged.value = true;
+      const res = await (0,_service__WEBPACK_IMPORTED_MODULE_11__.updateMatchVersion)({
+        url: props.api.name,
+        matchVersionId: currentMatchRule.value.id,
+        conditions: newConditions,
+        content: currentMatchRule.value.content
+      });
+      if (res.code !== 200) {
+        element_ui_lib_message__WEBPACK_IMPORTED_MODULE_2___default().error(res.msg || '条件保存失败');
+      } else {
+        const idx = matchRuleList.value.findIndex(r => r.id === currentMatchRule.value.id);
+        if (idx > -1) {
+          matchRuleList.value[idx] = {
+            ...matchRuleList.value[idx],
+            conditions: newConditions
+          };
+        }
+      }
     };
 
     /** 匹配规则 JSON 编辑器内容变更 */
@@ -3353,10 +3384,16 @@ const __default__ = {
         return;
       }
       if (matchRuleModal.status === 'create') {
+        // 已保存文件：responseList 在条件匹配模式下未加载，先补一次
+        if (props.api.id && !responseList.value.length) {
+          await getHistoryVersions();
+        }
+        const sourceItem = responseList.value.find(item => item.type === 'source') || getSourceVersion();
         const res = await (0,_service__WEBPACK_IMPORTED_MODULE_11__.addMatchVersion)({
           url: props.api.name,
           name: matchRuleModal.name.trim(),
-          description: matchRuleModal.description
+          description: matchRuleModal.description,
+          content: sourceItem?.content ? JSON.parse(JSON.stringify(sourceItem.content)) : {}
         });
         if (res.code !== 200) {
           element_ui_lib_message__WEBPACK_IMPORTED_MODULE_2___default().error(res.msg || '创建失败');
@@ -3487,6 +3524,11 @@ const __default__ = {
       immediate: true
     });
 
+    // tabs 列表变化后重新计算遮罩状态
+    (0,vue__WEBPACK_IMPORTED_MODULE_12__.watch)([responseList, matchRuleList], () => {
+      (0,vue__WEBPACK_IMPORTED_MODULE_12__.nextTick)(updateTabsFade);
+    });
+
     // 移除 watch(date)，避免轮询时不必要的 API 调用
     // date 变化由 watch(name) 统一处理
     // watch(date, () => {
@@ -3535,6 +3577,10 @@ const __default__ = {
       fullScreenEditorRef,
       versionNameInput,
       matchRuleNameInput,
+      tabsAreaRef,
+      tabsFade,
+      tabsFadePending,
+      updateTabsFade,
       responseList,
       currentFile,
       hasJsonError,
@@ -3557,7 +3603,6 @@ const __default__ = {
       activeEditorContent,
       getSourceVersion,
       getHistoryVersions,
-      nextVersionName,
       onCreate,
       onEditVersion,
       handleDialogOpened,
@@ -4155,7 +4200,7 @@ const __default__ = {
       const [ca, cb, cc] = parse(pluginVersion.value);
       return la > ca || la === ca && lb > cb || la === ca && lb === cb && lc > cc;
     });
-    const updateCmd = (0,vue__WEBPACK_IMPORTED_MODULE_16__.computed)(() => `npm install -g whistle.mockbubu --registry https://registry.npmjs.org`);
+    const updateCmd = (0,vue__WEBPACK_IMPORTED_MODULE_16__.computed)(() => `w2 install whistle.mockbubu --registry=https://registry.npmjs.org/`);
 
     // 获取插件版本号
     const fetchPluginVersion = async () => {
@@ -5302,7 +5347,7 @@ var render = function render() {
         placeholder: "参数名"
       },
       on: {
-        input: _setup.emitChange
+        blur: _setup.emitChange
       },
       model: {
         value: cond.key,
@@ -5320,7 +5365,7 @@ var render = function render() {
         placeholder: "参数值"
       },
       on: {
-        input: _setup.emitChange
+        blur: _setup.emitChange
       },
       model: {
         value: cond.value,
@@ -5777,6 +5822,8 @@ var render = function render() {
     staticClass: "response-panel"
   }, [_c("div", {
     staticClass: "response-panel__header"
+  }, [_c("div", {
+    staticClass: "response-panel__header-toolbar"
   }, [_setup.props.api ? _c("div", {
     staticClass: "response-panel__mode-selector"
   }, [_c("div", {
@@ -5816,7 +5863,37 @@ var render = function render() {
         return _setup.switchMode("match");
       }
     }
-  }, [_vm._v(" 条件匹配 ")])]) : _vm._e()]) : _vm._e(), _setup.mockMode === "version" ? [_vm._l(_setup.responseList, function (item, index) {
+  }, [_vm._v(" 条件匹配 ")])]) : _vm._e()]) : _vm._e(), _setup.mockMode === "version" ? _c("div", {
+    staticClass: "response-panel__add-btn",
+    on: {
+      click: _setup.onCreate
+    }
+  }, [_c("i", {
+    staticClass: "el-icon-plus"
+  }), _c("span", [_vm._v("新增版本")])]) : _vm._e(), _setup.mockMode === "match" ? _c("div", {
+    staticClass: "response-panel__add-btn",
+    on: {
+      click: _setup.onCreateMatchRule
+    }
+  }, [_c("i", {
+    staticClass: "el-icon-plus"
+  }), _c("span", [_vm._v("新增规则")])]) : _vm._e(), _setup.mockMode === "version" && _setup.responseList.length > 1 ? _c("span", {
+    staticClass: "response-panel__version-count"
+  }, [_vm._v(" " + _vm._s(_setup.responseList.length - 1) + " 个版本 ")]) : _vm._e(), _setup.mockMode === "match" && _setup.matchRuleList.length > 0 ? _c("span", {
+    staticClass: "response-panel__version-count"
+  }, [_vm._v(" " + _vm._s(_setup.matchRuleList.length) + " 条规则 ")]) : _vm._e()]), _c("div", {
+    staticClass: "response-panel__tabs-wrapper",
+    class: {
+      "has-top-fade": _setup.tabsFade.top,
+      "has-bottom-fade": _setup.tabsFade.bottom
+    }
+  }, [_setup.mockMode === "version" ? _c("div", {
+    ref: "tabsAreaRef",
+    staticClass: "response-panel__tabs-area",
+    on: {
+      scroll: _setup.updateTabsFade
+    }
+  }, _vm._l(_setup.responseList, function (item, index) {
     return _c("div", {
       key: `${item.type}-${item.filename}`,
       staticClass: "response-panel__tab",
@@ -5874,20 +5951,13 @@ var render = function render() {
         }
       }
     }) : _vm._e()], 1);
-  }), _c("div", {
-    staticClass: "response-panel__add-btn",
+  }), 0) : _vm._e(), _setup.mockMode === "match" ? _c("div", {
+    ref: "tabsAreaRef",
+    staticClass: "response-panel__tabs-area",
     on: {
-      click: _setup.onCreate
+      scroll: _setup.updateTabsFade
     }
-  }, [_c("el-tooltip", {
-    attrs: {
-      effect: "dark",
-      content: "Add response version",
-      placement: "top"
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-plus"
-  })])], 1)] : _vm._e(), _setup.mockMode === "match" ? [_vm._l(_setup.matchRuleList, function (item, index) {
+  }, _vm._l(_setup.matchRuleList, function (item, index) {
     return _c("div", {
       key: item.id,
       staticClass: "response-panel__tab",
@@ -5931,20 +6001,7 @@ var render = function render() {
         }
       }
     })], 1);
-  }), _c("div", {
-    staticClass: "response-panel__add-btn",
-    on: {
-      click: _setup.onCreateMatchRule
-    }
-  }, [_c("el-tooltip", {
-    attrs: {
-      effect: "dark",
-      content: "新增匹配规则",
-      placement: "top"
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-plus"
-  })])], 1)] : _vm._e()], 2), _c("div", {
+  }), 0) : _vm._e()])]), _c("div", {
     staticClass: "response-panel__content"
   }, [_setup.mockMode === "match" && _setup.currentMatchRule ? _c(_setup.MatchConditionEditor, {
     attrs: {
@@ -6046,7 +6103,22 @@ var render = function render() {
     staticClass: "response-panel__readonly-badge"
   }, [_c("i", {
     staticClass: "el-icon-lock"
-  }), _c("span", [_vm._v("只读模式")])]) : _vm._e()], 1), _setup.mockMode === "version" ? _c(_setup.Editor, {
+  }), _c("span", [_vm._v("只读模式")])]) : _vm._e(), (_setup.mockMode === "match" ? _setup.currentMatchRule && _setup.matchRuleChanged : !_setup.isSourceReadonly && _setup.currentFile.effect && (_setup.currentFile.type === "history" || _vm.api.mock)) ? _c("div", {
+    staticClass: "response-panel__save-inline"
+  }, [_setup.hasJsonError ? _c("span", {
+    staticClass: "response-panel__error-text-inline"
+  }, [_vm._v("JSON 格式错误")]) : _vm._e(), _c("el-button", {
+    attrs: {
+      size: "mini",
+      type: "primary",
+      disabled: _setup.hasJsonError
+    },
+    on: {
+      click: _setup.handleUpdate
+    }
+  }, [_vm._v(" 保存 ")]), _c("span", {
+    staticClass: "response-panel__effect-dot"
+  })], 1) : _vm._e()], 1), _setup.mockMode === "version" ? _c(_setup.Editor, {
     key: `editor-${_setup.currentFile.filename}-${_setup.isSourceReadonly}`,
     ref: "editRef",
     attrs: {
@@ -6100,22 +6172,7 @@ var render = function render() {
       },
       expression: "currentMatchRule.content"
     }
-  }) : _vm._e(), (_setup.mockMode === "match" ? _setup.currentMatchRule && _setup.matchRuleChanged : !_setup.isSourceReadonly && _setup.currentFile.effect && (_setup.currentFile.type === "history" || _vm.api.mock)) ? _c("div", {
-    staticClass: "response-panel__save"
-  }, [_setup.hasJsonError ? _c("span", {
-    staticClass: "response-panel__error-text"
-  }, [_vm._v("JSON 格式错误，无法保存")]) : _c("span", {
-    staticClass: "response-panel__effect-icon"
-  }), _c("el-button", {
-    attrs: {
-      size: "small",
-      type: "primary",
-      disabled: _setup.hasJsonError
-    },
-    on: {
-      click: _setup.handleUpdate
-    }
-  }, [_vm._v(" 保存 ")])], 1) : _vm._e()], 1), _c("el-dialog", {
+  }) : _vm._e()], 1), _c("el-dialog", {
     attrs: {
       visible: _setup.versionModal.visible,
       width: "min(500px, 92vw)",
@@ -7905,7 +7962,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_pnpm_css_loader_6_11_0_webpack_5_100_2_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_pnpm_css_loader_6_11_0_webpack_5_100_2_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".mock-container[data-v-d97322d2] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.mock-container__content[data-v-d97322d2] {\n  position: relative;\n  padding-bottom: 16px;\n  background-image: linear-gradient(0deg, var(--mb-accent-blue) 0, var(--mb-accent-blue) 16px, transparent 100%);\n  display: flex;\n  flex: 1;\n  border: 1px solid var(--mb-border-color-light);\n  border-left: none;\n  overflow: hidden;\n}\n.mock-container__toolbar[data-v-d97322d2] {\n  width: 48px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 16px;\n  gap: 8px;\n  background: var(--mb-bg-base);\n  border-right: 1px solid var(--mb-border-color-deep);\n  z-index: 10;\n  overflow: visible;\n}\n.mock-container__list-badge[data-v-d97322d2] {\n  line-height: 1;\n  overflow: visible;\n}\n.mock-container__detail-wrapper[data-v-d97322d2] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.mock-container__current-url[data-v-d97322d2] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  padding: 5px 10px 5px 12px;\n  background: var(--mb-bg-mantle);\n  border-bottom: 1px solid var(--mb-border-color);\n  min-height: 30px;\n  flex-shrink: 0;\n}\n.mock-container__current-url-copy[data-v-d97322d2] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mb-text-muted);\n  transition: color 0.15s, background 0.15s;\n}\n.mock-container__current-url-copy[data-v-d97322d2]:hover {\n  color: var(--mb-accent-blue);\n  background: var(--mb-bg-surface);\n}\n.mock-container__current-url-copy .el-icon-link[data-v-d97322d2] {\n  font-size: 13px;\n}\n.mock-container__current-url-scroll[data-v-d97322d2] {\n  flex: 1;\n  min-width: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-align: left;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar {\n  height: 3px;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar-thumb {\n  background: var(--mb-border-color-deep);\n  border-radius: 2px;\n}\n.mock-container__current-url-text[data-v-d97322d2] {\n  display: inline-block;\n  font-size: 12px;\n  color: var(--mb-text-secondary);\n  white-space: nowrap;\n  font-family: 'SF Mono', 'Consolas', monospace;\n  line-height: 20px;\n}\n.mock-container__list-overlay[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9;\n}\n.mock-container__backdrop[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n}\n.mock-container__list-panel[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 48px;\n  bottom: 0;\n  width: 70%;\n  max-width: calc(100% - 48px);\n  background: var(--mb-bg-base);\n  display: flex;\n  flex-direction: column;\n  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\n  overflow: hidden;\n  z-index: 1;\n}\n.mock-container__list-panel-body[data-v-d97322d2] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n}\n.mock-container__list-panel-body .request-list[data-v-d97322d2] {\n  width: 100%;\n}\n.mock-container__disabled-overlay[data-v-d97322d2] {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  background: var(--mb-disabled-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.mock-container__disabled-card[data-v-d97322d2] {\n  background: var(--mb-disabled-card-bg);\n  border-radius: 16px;\n  padding: 40px 48px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  min-width: 260px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n}\n.mock-container__disabled-icon[data-v-d97322d2] {\n  font-size: 36px;\n  color: #888;\n  line-height: 1;\n  margin-bottom: 4px;\n}\n.mock-container__disabled-title[data-v-d97322d2] {\n  font-size: 18px;\n  font-weight: 600;\n  color: #fff;\n}\n.mock-container__disabled-desc[data-v-d97322d2] {\n  font-size: 13px;\n  color: #aaa;\n  text-align: center;\n}\n.mock-container__disabled-btn[data-v-d97322d2] {\n  margin-top: 8px;\n  border-radius: 8px;\n  padding: 10px 32px;\n  font-size: 15px;\n  font-weight: 500;\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".mock-container[data-v-d97322d2] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.mock-container__content[data-v-d97322d2] {\n  position: relative;\n  padding-bottom: 16px;\n  background-image: linear-gradient(0deg, var(--mb-accent-blue) 0, var(--mb-accent-blue) 16px, transparent 100%);\n  display: flex;\n  flex: 1;\n  border: 1px solid var(--mb-border-color-light);\n  border-left: none;\n  overflow: hidden;\n}\n.mock-container__toolbar[data-v-d97322d2] {\n  width: 48px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 16px;\n  gap: 8px;\n  background: var(--mb-bg-base);\n  border-right: 1px solid var(--mb-border-color-deep);\n  z-index: 10;\n  overflow: visible;\n}\n.mock-container__list-badge[data-v-d97322d2] {\n  line-height: 1;\n  overflow: visible;\n}\n.mock-container__detail-wrapper[data-v-d97322d2] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.mock-container__current-url[data-v-d97322d2] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  padding: 5px 10px 5px 12px;\n  background: var(--mb-bg-mantle);\n  border-bottom: 1px solid var(--mb-border-color);\n  min-height: 30px;\n  flex-shrink: 0;\n}\n.mock-container__current-url-copy[data-v-d97322d2] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mb-text-muted);\n  transition: color 0.15s, background 0.15s;\n}\n.mock-container__current-url-copy[data-v-d97322d2]:hover {\n  color: var(--mb-accent-blue);\n  background: var(--mb-bg-surface);\n}\n.mock-container__current-url-copy .el-icon-link[data-v-d97322d2] {\n  font-size: 13px;\n}\n.mock-container__current-url-scroll[data-v-d97322d2] {\n  flex: 1;\n  min-width: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-align: left;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar {\n  height: 3px;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar-track {\n  background: transparent;\n}\n.mock-container__current-url-scroll[data-v-d97322d2]::-webkit-scrollbar-thumb {\n  background: var(--mb-border-color-deep);\n  border-radius: 2px;\n}\n.mock-container__current-url-text[data-v-d97322d2] {\n  display: inline-block;\n  font-size: 12px;\n  color: var(--mb-text-secondary);\n  white-space: nowrap;\n  font-family: 'SF Mono', 'Consolas', monospace;\n  line-height: 20px;\n}\n.mock-container__list-overlay[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9;\n}\n.mock-container__backdrop[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n}\n.mock-container__list-panel[data-v-d97322d2] {\n  position: absolute;\n  top: 0;\n  left: 48px;\n  bottom: 0;\n  width: 85%;\n  max-width: calc(100% - 48px);\n  background: var(--mb-bg-base);\n  display: flex;\n  flex-direction: column;\n  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\n  overflow: hidden;\n  z-index: 1;\n}\n.mock-container__list-panel-body[data-v-d97322d2] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n}\n.mock-container__list-panel-body .request-list[data-v-d97322d2] {\n  width: 100%;\n}\n.mock-container__disabled-overlay[data-v-d97322d2] {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  background: var(--mb-disabled-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.mock-container__disabled-card[data-v-d97322d2] {\n  background: var(--mb-disabled-card-bg);\n  border-radius: 16px;\n  padding: 40px 48px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  min-width: 260px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n}\n.mock-container__disabled-icon[data-v-d97322d2] {\n  font-size: 36px;\n  color: #888;\n  line-height: 1;\n  margin-bottom: 4px;\n}\n.mock-container__disabled-title[data-v-d97322d2] {\n  font-size: 18px;\n  font-weight: 600;\n  color: #fff;\n}\n.mock-container__disabled-desc[data-v-d97322d2] {\n  font-size: 13px;\n  color: #aaa;\n  text-align: center;\n}\n.mock-container__disabled-btn[data-v-d97322d2] {\n  margin-top: 8px;\n  border-radius: 8px;\n  padding: 10px 32px;\n  font-size: 15px;\n  font-weight: 500;\n}\n", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -8049,7 +8106,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_pnpm_css_loader_6_11_0_webpack_5_100_2_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_pnpm_css_loader_6_11_0_webpack_5_100_2_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".response-panel[data-v-c23cd6a6] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.response-panel__header[data-v-c23cd6a6] {\n  display: flex;\n  flex-wrap: wrap;\n  background-color: var(--mb-bg-base);\n}\n.response-panel__tab[data-v-c23cd6a6] {\n  position: relative;\n  cursor: pointer;\n  height: 24px;\n  padding: 0px 10px;\n  font-size: 12px;\n  line-height: 24px;\n  color: var(--mb-text-secondary);\n  font-weight: 500;\n  background-color: var(--mb-bg-mantle);\n  border-right: 1px solid var(--mb-border-color-light);\n  border-bottom: 1px solid var(--mb-border-color-light);\n}\n.response-panel__tab[data-v-c23cd6a6]:hover:not(.response-panel__tab--selected) {\n  background-color: var(--mb-hover-bg);\n  color: var(--mb-text-primary);\n}\n.response-panel__tab--selected[data-v-c23cd6a6] {\n  background-color: var(--mb-accent-blue);\n  color: #fff;\n  border-bottom-color: var(--mb-accent-blue);\n}\n.response-panel__tab--selected .response-panel__source-tab[data-v-c23cd6a6] {\n  color: rgba(255, 255, 255, 0.95);\n}\n.response-panel__tab--selected .response-panel__edit-btn[data-v-c23cd6a6],\n.response-panel__tab--selected .response-panel__delete-btn[data-v-c23cd6a6] {\n  color: rgba(255, 255, 255, 0.6);\n}\n.response-panel__tab--selected .response-panel__edit-btn[data-v-c23cd6a6]:hover,\n.response-panel__tab--selected .response-panel__delete-btn[data-v-c23cd6a6]:hover {\n  color: #fff;\n}\n.response-panel__source-tab[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mb-tag-amber);\n  font-weight: 600;\n}\n.response-panel__source-tab i[data-v-c23cd6a6] {\n  font-size: 14px;\n}\n.response-panel__tab-text[data-v-c23cd6a6] {\n  display: inline-block;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n.response-panel__edit-btn[data-v-c23cd6a6] {\n  margin-left: 8px;\n  color: var(--mb-text-muted);\n}\n.response-panel__edit-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-blue);\n}\n.response-panel__delete-btn[data-v-c23cd6a6] {\n  margin-left: 8px;\n  color: var(--mb-text-muted);\n}\n.response-panel__delete-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-red);\n}\n.response-panel__add-btn[data-v-c23cd6a6] {\n  cursor: pointer;\n  line-height: 24px;\n  padding: 0px 10px;\n  color: var(--mb-text-muted);\n  font-weight: 500;\n  background-color: var(--mb-bg-mantle);\n  border-right: 1px solid var(--mb-border-color-light);\n  border-bottom: 1px solid var(--mb-border-color-light);\n}\n.response-panel__add-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-blue);\n  background-color: var(--mb-hover-bg);\n}\n.response-panel__content[data-v-c23cd6a6] {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n}\n.response-panel__toolbar[data-v-c23cd6a6] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mb-bg-surface);\n  border-bottom: 1px solid var(--mb-border-color);\n  overflow-x: scroll;\n}\n.response-panel__toolbar .el-button[data-v-c23cd6a6] {\n  margin: 0;\n}\n.response-panel__readonly-badge[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: auto;\n  padding: 4px 12px;\n  background-color: var(--mb-bg-mantle);\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mb-text-muted);\n  font-weight: 500;\n  height: 24px;\n  overflow: hidden;\n}\n.response-panel__readonly-badge i[data-v-c23cd6a6] {\n  font-size: 12px;\n}\n.response-panel__alert[data-v-c23cd6a6] {\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mb-accent-yellow);\n}\n.response-panel__save[data-v-c23cd6a6] {\n  position: absolute;\n  top: 100px;\n  right: 20px;\n}\n.response-panel__effect-icon[data-v-c23cd6a6] {\n  position: absolute;\n  top: -5px;\n  right: -5px;\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 6px;\n  background-color: var(--mb-accent-red);\n}\n.response-panel__error-text[data-v-c23cd6a6] {\n  position: absolute;\n  top: -30px;\n  right: 0;\n  color: var(--mb-accent-red);\n  font-size: 12px;\n  white-space: nowrap;\n}\n.response-panel__dialog[data-v-c23cd6a6] {\n  display: flex;\n  align-items: center;\n}\n.response-panel__dialog-label[data-v-c23cd6a6] {\n  white-space: nowrap;\n}\n.response-panel__mode-selector[data-v-c23cd6a6] {\n  position: relative;\n  flex-shrink: 0;\n  margin-right: 4px;\n}\n.response-panel__mode-btn[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 24px;\n  padding: 0 10px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mb-text-secondary);\n  background-color: var(--mb-bg-mantle);\n  border-right: 1px solid var(--mb-border-color-light);\n  border-bottom: 1px solid var(--mb-border-color-light);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.response-panel__mode-btn .el-icon-arrow-down[data-v-c23cd6a6] {\n  font-size: 10px;\n  transition: transform 0.2s;\n}\n.response-panel__mode-btn .el-icon-arrow-down.is-rotate[data-v-c23cd6a6] {\n  transform: rotate(180deg);\n}\n.response-panel__mode-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-blue);\n  background-color: var(--mb-hover-bg);\n}\n.response-panel__mode-overlay[data-v-c23cd6a6] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 99;\n}\n.response-panel__mode-dropdown[data-v-c23cd6a6] {\n  position: absolute;\n  top: 24px;\n  left: 0;\n  z-index: 100;\n  min-width: 100px;\n  background-color: var(--mb-bg-overlay);\n  border: 1px solid var(--mb-border-color-deep);\n  border-radius: 0 0 4px 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.response-panel__mode-option[data-v-c23cd6a6] {\n  padding: 6px 14px;\n  font-size: 12px;\n  color: var(--mb-text-secondary);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.response-panel__mode-option[data-v-c23cd6a6]:hover {\n  background-color: var(--mb-bg-surface);\n  color: var(--mb-accent-blue);\n}\n.response-panel__mode-option.is-active[data-v-c23cd6a6] {\n  color: var(--mb-accent-blue);\n  font-weight: 600;\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".response-panel[data-v-c23cd6a6] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.response-panel__header[data-v-c23cd6a6] {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mb-bg-mantle);\n  flex-shrink: 0;\n}\n.response-panel__header-toolbar[data-v-c23cd6a6] {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  height: 34px;\n  border-bottom: 1px solid var(--mb-border-color);\n  padding: 0 4px 0 0;\n}\n.response-panel__version-count[data-v-c23cd6a6] {\n  margin-left: 6px;\n  font-size: 11px;\n  color: var(--mb-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n.response-panel__tabs-wrapper[data-v-c23cd6a6] {\n  position: relative;\n}\n.response-panel__tabs-wrapper[data-v-c23cd6a6]::before,\n.response-panel__tabs-wrapper[data-v-c23cd6a6]::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 36px;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.response-panel__tabs-wrapper[data-v-c23cd6a6]::before {\n  top: 0;\n  background: linear-gradient(var(--mb-bg-mantle), transparent);\n}\n.response-panel__tabs-wrapper[data-v-c23cd6a6]::after {\n  bottom: 0;\n  background: linear-gradient(transparent, var(--mb-bg-mantle));\n}\n.response-panel__tabs-wrapper.has-top-fade[data-v-c23cd6a6]::before {\n  opacity: 1;\n}\n.response-panel__tabs-wrapper.has-bottom-fade[data-v-c23cd6a6]::after {\n  opacity: 1;\n}\n.response-panel__tabs-area[data-v-c23cd6a6] {\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  gap: 5px;\n  min-width: 0;\n  padding: 5px 8px;\n  max-height: calc((30px + 5px) * 3 + 5px);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.response-panel__tabs-area[data-v-c23cd6a6]::-webkit-scrollbar {\n  width: 3px;\n}\n.response-panel__tabs-area[data-v-c23cd6a6]::-webkit-scrollbar-thumb {\n  background: var(--mb-border-color-deep);\n  border-radius: 2px;\n}\n.response-panel__tab[data-v-c23cd6a6] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n  height: 26px;\n  padding: 0 10px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mb-text-secondary);\n  background-color: var(--mb-bg-base);\n  border: 1px solid var(--mb-border-color-deep);\n  border-radius: 5px;\n  white-space: nowrap;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n.response-panel__tab[data-v-c23cd6a6]:hover:not(.response-panel__tab--selected) {\n  color: var(--mb-accent-blue);\n  border-color: var(--mb-accent-blue);\n  background-color: var(--mb-accent-blue-bg);\n}\n.response-panel__tab--selected[data-v-c23cd6a6] {\n  background-color: var(--mb-accent-blue);\n  color: #fff;\n  font-weight: 600;\n  border-color: var(--mb-accent-blue);\n}\n.response-panel__tab--selected .response-panel__source-tab[data-v-c23cd6a6] {\n  color: #fff;\n}\n.response-panel__tab--selected .response-panel__edit-btn[data-v-c23cd6a6],\n.response-panel__tab--selected .response-panel__delete-btn[data-v-c23cd6a6] {\n  color: rgba(255, 255, 255, 0.7);\n  opacity: 1;\n}\n.response-panel__tab--selected .response-panel__edit-btn[data-v-c23cd6a6]:hover,\n.response-panel__tab--selected .response-panel__delete-btn[data-v-c23cd6a6]:hover {\n  color: #fff;\n}\n.response-panel__source-tab[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  color: var(--mb-tag-amber);\n  font-weight: 600;\n}\n.response-panel__source-tab i[data-v-c23cd6a6] {\n  font-size: 13px;\n}\n.response-panel__tab-text[data-v-c23cd6a6] {\n  display: inline-block;\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n.response-panel__edit-btn[data-v-c23cd6a6] {\n  font-size: 11px;\n  color: var(--mb-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s, color 0.12s;\n}\n.response-panel__edit-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-blue);\n}\n.response-panel__delete-btn[data-v-c23cd6a6] {\n  font-size: 11px;\n  color: var(--mb-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s, color 0.12s;\n}\n.response-panel__delete-btn[data-v-c23cd6a6]:hover {\n  color: var(--mb-accent-red);\n}\n.response-panel__tab:hover .response-panel__edit-btn[data-v-c23cd6a6],\n.response-panel__tab:hover .response-panel__delete-btn[data-v-c23cd6a6] {\n  opacity: 1;\n}\n.response-panel__add-btn[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  cursor: pointer;\n  height: 24px;\n  padding: 0 10px;\n  margin: 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mb-accent-blue);\n  background-color: var(--mb-accent-blue-bg);\n  border: 1px solid var(--mb-accent-blue);\n  border-radius: 4px;\n  transition: background-color 0.15s, color 0.15s;\n}\n.response-panel__add-btn i[data-v-c23cd6a6] {\n  font-size: 12px;\n}\n.response-panel__add-btn[data-v-c23cd6a6]:hover {\n  color: #fff;\n  background-color: var(--mb-accent-blue);\n}\n.response-panel__content[data-v-c23cd6a6] {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n}\n.response-panel__toolbar[data-v-c23cd6a6] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mb-bg-surface);\n  border-bottom: 1px solid var(--mb-border-color);\n  overflow-x: auto;\n}\n.response-panel__toolbar > *[data-v-c23cd6a6] {\n  flex-shrink: 0;\n}\n.response-panel__toolbar .el-button[data-v-c23cd6a6] {\n  margin: 0;\n}\n.response-panel__readonly-badge[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: auto;\n  padding: 4px 12px;\n  background-color: var(--mb-bg-mantle);\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mb-text-muted);\n  font-weight: 500;\n  height: 24px;\n  overflow: hidden;\n}\n.response-panel__readonly-badge i[data-v-c23cd6a6] {\n  font-size: 12px;\n}\n.response-panel__alert[data-v-c23cd6a6] {\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mb-accent-yellow);\n}\n.response-panel__save-inline[data-v-c23cd6a6] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.response-panel__save-inline .el-button[data-v-c23cd6a6] {\n  margin: 0;\n}\n.response-panel__effect-dot[data-v-c23cd6a6] {\n  position: absolute;\n  top: -3px;\n  right: -3px;\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--mb-accent-red);\n  pointer-events: none;\n}\n.response-panel__error-text-inline[data-v-c23cd6a6] {\n  color: var(--mb-accent-red);\n  font-size: 11px;\n  white-space: nowrap;\n}\n.response-panel__dialog[data-v-c23cd6a6] {\n  display: flex;\n  align-items: center;\n}\n.response-panel__dialog-label[data-v-c23cd6a6] {\n  white-space: nowrap;\n}\n.response-panel__mode-selector[data-v-c23cd6a6] {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 8px;\n  border-right: 1px solid var(--mb-border-color);\n}\n.response-panel__mode-btn[data-v-c23cd6a6] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  height: 24px;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #d97706;\n  background-color: #fff8ee;\n  border: 1px solid #f59e0b;\n  border-radius: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  transition: color 0.15s, border-color 0.15s, background-color 0.15s;\n}\n.response-panel__mode-btn .el-icon-arrow-down[data-v-c23cd6a6] {\n  font-size: 12px;\n  color: #d97706;\n  font-weight: 900;\n  transition: transform 0.2s;\n}\n.response-panel__mode-btn .el-icon-arrow-down.is-rotate[data-v-c23cd6a6] {\n  transform: rotate(180deg);\n}\n.response-panel__mode-btn[data-v-c23cd6a6]:hover {\n  color: #92400e;\n  border-color: #d97706;\n  background-color: #fef3c7;\n}\n.response-panel__mode-overlay[data-v-c23cd6a6] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 99;\n}\n.response-panel__mode-dropdown[data-v-c23cd6a6] {\n  position: absolute;\n  top: calc(100% + 2px);\n  left: 8px;\n  z-index: 100;\n  min-width: 100px;\n  background-color: var(--mb-bg-overlay);\n  border: 1px solid var(--mb-border-color-deep);\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n}\n.response-panel__mode-option[data-v-c23cd6a6] {\n  padding: 6px 14px;\n  font-size: 12px;\n  color: var(--mb-text-secondary);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.response-panel__mode-option[data-v-c23cd6a6]:hover {\n  background-color: var(--mb-bg-surface);\n  color: var(--mb-accent-blue);\n}\n.response-panel__mode-option.is-active[data-v-c23cd6a6] {\n  color: var(--mb-accent-blue);\n  font-weight: 600;\n}\n", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);