vite-plugin-automock 1.0.0

package/dist/index.js

@@ -0,0 +1,3239 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/mockFileUtils.ts
+var mockFileUtils_exports = {};
+__export(mockFileUtils_exports, {
+  DEFAULT_CONFIG: () => DEFAULT_CONFIG,
+  buildMockIndex: () => buildMockIndex,
+  parseMockModule: () => parseMockModule,
+  saveMockData: () => saveMockData,
+  writeMockFile: () => writeMockFile
+});
+function toPosixPath(p) {
+  return p.replace(/\\/g, "/");
+}
+var import_path, import_fs_extra, import_prettier, DEFAULT_CONFIG, isBinaryResponse, isBufferTextLike, getFileExtension, saveMockData, recursiveReadAllFiles, buildMockIndex, parseMockModule, writeMockFile;
+var init_mockFileUtils = __esm({
+  "src/mockFileUtils.ts"() {
+    "use strict";
+    import_path = __toESM(require("path"));
+    import_fs_extra = __toESM(require("fs-extra"));
+    import_prettier = __toESM(require("prettier"));
+    DEFAULT_CONFIG = {
+      enable: true,
+      data: null,
+      delay: 0,
+      status: 200
+    };
+    isBinaryResponse = (contentType, data) => {
+      if (!contentType) return false;
+      const binaryTypes = [
+        "application/octet-stream",
+        "application/pdf",
+        "application/zip",
+        "application/x-zip-compressed",
+        "application/vnd.ms-excel",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "application/msword",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "application/vnd.ms-powerpoint",
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        "image/",
+        "video/",
+        "audio/"
+      ];
+      return binaryTypes.some((type) => contentType.toLowerCase().includes(type)) || !isBufferTextLike(data);
+    };
+    isBufferTextLike = (buffer) => {
+      try {
+        const sample = buffer.slice(0, 100);
+        const text = sample.toString("utf8");
+        const nullBytes = [...sample].filter((b) => b === 0).length;
+        const controlChars = [...sample].filter(
+          (b) => b < 32 && b !== 9 && b !== 10 && b !== 13
+        ).length;
+        return nullBytes === 0 && controlChars < 5;
+      } catch {
+        return false;
+      }
+    };
+    getFileExtension = (contentType, url) => {
+      const mimeMap = {
+        "application/json": "json",
+        "application/pdf": "pdf",
+        "application/zip": "zip",
+        "application/vnd.ms-excel": "xls",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+        "application/msword": "doc",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+        "application/vnd.ms-powerpoint": "ppt",
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+        "image/jpeg": "jpg",
+        "image/png": "png",
+        "image/gif": "gif",
+        "text/plain": "txt",
+        "text/html": "html",
+        "text/css": "css",
+        "application/javascript": "js",
+        "text/xml": "xml"
+      };
+      if (contentType && mimeMap[contentType.toLowerCase()]) {
+        return mimeMap[contentType.toLowerCase()];
+      }
+      try {
+        const urlObj = new URL(url, "http://localhost");
+        const fileName = urlObj.searchParams.get("file_name");
+        if (fileName) {
+          const extensionMatch = fileName.match(/\.([a-zA-Z0-9]+)$/);
+          if (extensionMatch) {
+            return extensionMatch[1];
+          }
+        }
+      } catch (error) {
+      }
+      return "bin";
+    };
+    saveMockData = async (url, method, data, rootDir, statusCode, contentType) => {
+      try {
+        const absoluteRootDir = import_path.default.isAbsolute(rootDir) ? rootDir : import_path.default.resolve(process.cwd(), rootDir);
+        let pathname;
+        let search;
+        try {
+          if (url.startsWith("http")) {
+            const urlObj = new URL(url);
+            pathname = urlObj.pathname;
+            search = urlObj.search;
+          } else {
+            const urlObj = new URL(url, "http://localhost");
+            pathname = urlObj.pathname;
+            search = urlObj.search;
+          }
+        } catch (error) {
+          const [pathPart, ...searchPart] = url.split("?");
+          pathname = pathPart;
+          search = searchPart.length > 0 ? "?" + searchPart.join("?") : "";
+        }
+        const filePath = import_path.default.join(
+          absoluteRootDir,
+          pathname.replace(/^\//, ""),
+          method.toLowerCase() + ".js"
+        );
+        const dir = import_path.default.dirname(filePath);
+        import_fs_extra.default.ensureDirSync(dir);
+        const isBuffer = Buffer.isBuffer(data);
+        const binaryData = isBuffer ? data : Buffer.from(data || "");
+        const isBinary = isBinaryResponse(contentType, binaryData);
+        if (isBinary) {
+          const extension = getFileExtension(contentType, url);
+          const binaryFilePath = filePath.replace(/\.js$/, "." + extension);
+          if (import_fs_extra.default.existsSync(binaryFilePath)) {
+            return null;
+          }
+          import_fs_extra.default.writeFileSync(binaryFilePath, binaryData);
+          const configContent = `/**
+ * Mock data for ${pathname} (${method.toUpperCase()})${search || ""}
+ * @description ${pathname}${search || ""} - Binary file (${extension})
+ * Generated at ${(/* @__PURE__ */ new Date()).toISOString()}
+ */
+export default {
+  enable: false,
+  data: {
+    __binaryFile: '${extension}',
+    __originalPath: '${pathname}',
+    __originalQuery: '${search}',
+    __originalUrl: '${pathname}${search || ""}',
+    __contentType: '${contentType}',
+    __fileSize: ${binaryData.length}
+  },
+  delay: 0,
+  status: ${statusCode || 200}
+}`;
+          try {
+            const formattedCode = await import_prettier.default.format(configContent, {
+              parser: "babel"
+            });
+            import_fs_extra.default.writeFileSync(filePath, formattedCode, "utf-8");
+          } catch (error) {
+            import_fs_extra.default.writeFileSync(filePath, configContent, "utf-8");
+          }
+          return filePath;
+        } else {
+          if (import_fs_extra.default.existsSync(filePath)) {
+            return null;
+          }
+          const dataStr = isBuffer ? data.toString("utf8") : data || "";
+          let jsonData;
+          if (!dataStr || dataStr.trim() === "") {
+            jsonData = {
+              error: true,
+              message: `Empty response (${statusCode || "unknown status"})`,
+              status: statusCode || 404,
+              data: null
+            };
+          } else {
+            try {
+              jsonData = JSON.parse(dataStr);
+              if (statusCode && statusCode >= 400) {
+                if (typeof jsonData === "object" && jsonData !== null) {
+                  jsonData = {
+                    ...jsonData,
+                    __mockStatusCode: statusCode,
+                    __isErrorResponse: true
+                  };
+                } else {
+                  jsonData = {
+                    originalData: jsonData,
+                    __mockStatusCode: statusCode,
+                    __isErrorResponse: true
+                  };
+                }
+              }
+            } catch {
+              jsonData = {
+                error: true,
+                message: `Non-JSON response (${statusCode || "unknown status"})`,
+                status: statusCode || 404,
+                data: dataStr,
+                __mockStatusCode: statusCode,
+                __isErrorResponse: true
+              };
+            }
+          }
+          const content = `/**
+ * Mock data for ${pathname} (${method.toUpperCase()})${search || ""}
+ * @description ${pathname}${search || ""}
+ * Generated at ${(/* @__PURE__ */ new Date()).toISOString()}
+ */
+export default {
+  enable: false,
+  data: ${JSON.stringify(jsonData)},
+  delay: 0,
+  status: ${statusCode || 200}
+}`;
+          try {
+            const formattedCode = await import_prettier.default.format(content, {
+              parser: "babel"
+            });
+            import_fs_extra.default.writeFileSync(filePath, formattedCode, "utf-8");
+            return filePath;
+          } catch (error) {
+            import_fs_extra.default.writeFileSync(filePath, content, "utf-8");
+            return filePath;
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to save mock data for ${url}:`, error);
+        console.error(
+          `URL details: url=${url}, method=${method}, statusCode=${statusCode}, contentType=${contentType}`
+        );
+        throw error;
+      }
+    };
+    recursiveReadAllFiles = (dir) => {
+      if (!import_fs_extra.default.existsSync(dir)) return [];
+      const files = [];
+      try {
+        const list = import_fs_extra.default.readdirSync(dir);
+        list.forEach((file) => {
+          const filePath = import_path.default.join(dir, file);
+          const stat = import_fs_extra.default.statSync(filePath);
+          if (stat.isDirectory()) {
+            files.push(...recursiveReadAllFiles(filePath));
+          } else {
+            files.push(filePath);
+          }
+        });
+      } catch (error) {
+        console.error(`Error reading directory ${dir}:`, error);
+      }
+      return files;
+    };
+    buildMockIndex = (mockDir) => {
+      const mockFileMap = /* @__PURE__ */ new Map();
+      if (!import_fs_extra.default.existsSync(mockDir)) {
+        import_fs_extra.default.ensureDirSync(mockDir);
+        return mockFileMap;
+      }
+      const files = recursiveReadAllFiles(mockDir);
+      files.forEach((filePath) => {
+        if (!filePath.endsWith(".js")) {
+          return;
+        }
+        try {
+          const relativePath = import_path.default.relative(mockDir, filePath);
+          const method = import_path.default.basename(filePath, ".js");
+          const dirPath = import_path.default.dirname(relativePath);
+          const urlPath = "/" + toPosixPath(dirPath);
+          const absolutePath = import_path.default.isAbsolute(filePath) ? filePath : import_path.default.resolve(process.cwd(), filePath);
+          const key = `${urlPath}/${method}.js`.toLowerCase();
+          mockFileMap.set(key, absolutePath);
+        } catch (error) {
+          console.error(`\u274C [automock] \u5904\u7406\u6587\u4EF6\u5931\u8D25 ${filePath}:`, error);
+        }
+      });
+      return mockFileMap;
+    };
+    parseMockModule = async (filePath) => {
+      const absolutePath = import_path.default.isAbsolute(filePath) ? filePath : import_path.default.resolve(process.cwd(), filePath);
+      if (!import_fs_extra.default.existsSync(absolutePath)) {
+        throw new Error(`Mock file does not exist: ${absolutePath}`);
+      }
+      const content = import_fs_extra.default.readFileSync(absolutePath, "utf-8");
+      const headerCommentMatch = content.match(/^(\/\*\*[\s\S]*?\*\/)/);
+      const headerComment = headerCommentMatch ? headerCommentMatch[1] : void 0;
+      let description;
+      if (headerComment) {
+        const descMatch = headerComment.match(/@description\s+(.+?)(?:\n|\*\/)/s);
+        if (descMatch) {
+          description = descMatch[1].trim();
+        }
+      }
+      const { default: mockModule } = await import(`${absolutePath}?t=${Date.now()}`);
+      const exportedConfig = typeof mockModule === "function" ? mockModule() : mockModule;
+      const hasDynamicData = typeof exportedConfig?.data === "function";
+      const config = {
+        ...DEFAULT_CONFIG,
+        ...exportedConfig ?? {}
+      };
+      const serializable = !hasDynamicData;
+      const dataObj = typeof config.data === "object" && config.data !== null ? config.data : null;
+      const isBinary = dataObj !== null && "__binaryFile" in dataObj;
+      return {
+        config,
+        serializable,
+        hasDynamicData,
+        headerComment,
+        description,
+        dataText: isBinary ? `/* Binary file: ${dataObj?.__binaryFile} */` : serializable ? JSON.stringify(config.data ?? null, null, 2) : "/* data is generated dynamically and cannot be edited here */",
+        isBinary
+      };
+    };
+    writeMockFile = async (filePath, mockInfo) => {
+      const absolutePath = import_path.default.isAbsolute(filePath) ? filePath : import_path.default.resolve(process.cwd(), filePath);
+      let header = mockInfo.headerComment || "";
+      if (mockInfo.description !== void 0) {
+        if (header) {
+          if (/@description/.test(header)) {
+            header = header.replace(
+              /@description\s+.+?(?=\n|\*\/)/s,
+              `@description ${mockInfo.description}`
+            );
+          } else {
+            header = header.replace(
+              /\*\//,
+              ` * @description ${mockInfo.description}
+ */`
+            );
+          }
+        }
+      }
+      const content = header ? `${header}
+` : "";
+      const finalContent = `${content}export default ${JSON.stringify(mockInfo.config, null, 2)}
+`;
+      try {
+        const formattedCode = await import_prettier.default.format(finalContent, {
+          parser: "babel"
+        });
+        import_fs_extra.default.writeFileSync(absolutePath, formattedCode, "utf-8");
+      } catch (error) {
+        console.error("Error formatting code with prettier:", error);
+        import_fs_extra.default.writeFileSync(absolutePath, finalContent, "utf-8");
+      }
+    };
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  automock: () => automock2,
+  buildMockIndex: () => buildMockIndex,
+  bundleMockFiles: () => bundleMockFiles,
+  createMockInterceptor: () => createMockInterceptor,
+  initMockInterceptor: () => initMockInterceptor,
+  initMockInterceptorForPureHttp: () => initMockInterceptorForPureHttp,
+  isMockEnabled: () => isMockEnabled,
+  loadMockData: () => loadMockData,
+  parseMockModule: () => parseMockModule,
+  registerHttpInstance: () => registerHttpInstance,
+  saveMockData: () => saveMockData,
+  setMockEnabled: () => setMockEnabled,
+  writeMockBundle: () => writeMockBundle,
+  writeMockFile: () => writeMockFile
+});
+module.exports = __toCommonJS(index_exports);
+var import_path5 = __toESM(require("path"));
+var import_fs_extra4 = __toESM(require("fs-extra"));
+
+// src/middleware.ts
+var import_chokidar = __toESM(require("chokidar"));
+var import_lodash = __toESM(require("lodash.debounce"));
+var import_path3 = __toESM(require("path"));
+var import_fs_extra2 = __toESM(require("fs-extra"));
+var import_http = __toESM(require("http"));
+var import_https = __toESM(require("https"));
+init_mockFileUtils();
+
+// src/inspector.ts
+var import_path2 = __toESM(require("path"));
+init_mockFileUtils();
+var DEFAULT_ROUTE = "/__mock/";
+function ensureTrailingSlash(route) {
+  return route.endsWith("/") ? route : `${route}/`;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function normalizeInspectorConfig(input) {
+  if (input === false || input === void 0) {
+    return { route: DEFAULT_ROUTE, enableToggle: true };
+  }
+  if (input === true) {
+    return { route: DEFAULT_ROUTE, enableToggle: true };
+  }
+  return {
+    route: ensureTrailingSlash(input.route ?? DEFAULT_ROUTE),
+    enableToggle: input.enableToggle ?? true
+  };
+}
+function createInspectorHandler(options) {
+  if (!options.inspector) {
+    return null;
+  }
+  const inspectorConfig = normalizeInspectorConfig(options.inspector);
+  const inspectorRoute = ensureTrailingSlash(inspectorConfig.route);
+  return async (req, res) => {
+    if (!req.url) {
+      return false;
+    }
+    const url = new URL(req.url, "http://localhost");
+    if (!url.pathname.startsWith(inspectorRoute)) {
+      return false;
+    }
+    await handleInspectorRequest({
+      req,
+      res,
+      mockDir: options.mockDir,
+      inspectorRoute,
+      apiPrefix: options.apiPrefix,
+      inspectorConfig,
+      getMockFileMap: options.getMockFileMap
+    });
+    return true;
+  };
+}
+async function handleInspectorRequest(context) {
+  const { req, res, inspectorRoute } = context;
+  const url = new URL(req.url || inspectorRoute, "http://localhost");
+  const normalizedRoute = ensureTrailingSlash(inspectorRoute);
+  if (url.pathname === normalizedRoute.slice(0, -1) || url.pathname === normalizedRoute) {
+    await serveInspectorHtml(context);
+    return;
+  }
+  const relativePath = url.pathname.startsWith(normalizedRoute) ? url.pathname.slice(normalizedRoute.length) : null;
+  if (relativePath && relativePath.startsWith("api/")) {
+    await handleInspectorApi({ ...context, pathname: relativePath.slice(4) });
+    return;
+  }
+  res.statusCode = 404;
+  res.end("Not Found");
+}
+async function serveInspectorHtml({
+  res,
+  inspectorRoute,
+  apiPrefix,
+  inspectorConfig
+}) {
+  const routeJson = JSON.stringify(ensureTrailingSlash(inspectorRoute));
+  const allowToggleJson = JSON.stringify(inspectorConfig.enableToggle);
+  const apiPrefixEscaped = escapeHtml(apiPrefix);
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Mock Inspector</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+    :root {
+      --bg-primary: #ffffff;
+      --bg-secondary: #f9fafb;
+      --bg-tertiary: #f3f4f6;
+      --bg-hover: #e5e7eb;
+      --border-color: #e5e7eb;
+      --border-subtle: #f3f4f6;
+      --text-primary: #111827;
+      --text-secondary: #4b5563;
+      --text-muted: #9ca3af;
+      --accent-indigo: #6366f1;
+      --accent-indigo-light: #e0e7ff;
+      --accent-indigo-hover: #4f46e5;
+      --accent-emerald: #10b981;
+      --accent-emerald-light: #d1fae5;
+      --accent-amber: #f59e0b;
+      --accent-amber-light: #fef3c7;
+      --accent-rose: #ef4444;
+      --accent-rose-light: #fee2e2;
+      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 25%, #fdf4ff 50%, #ecfdf5 75%, #f0fdf4 100%);
+      color: var(--text-primary);
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Multiple ambient gradient orbs */
+    body::before {
+      content: '';
+      position: fixed;
+      top: -15%;
+      right: -10%;
+      width: 60vw;
+      height: 60vw;
+      background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.15) 30%, transparent 70%);
+      filter: blur(100px);
+      pointer-events: none;
+      z-index: 0;
+      animation: float 20s ease-in-out infinite;
+    }
+
+    body::after {
+      content: '';
+      position: fixed;
+      bottom: -15%;
+      left: -10%;
+      width: 50vw;
+      height: 50vw;
+      background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(34, 197, 94, 0.12) 30%, transparent 70%);
+      filter: blur(100px);
+      pointer-events: none;
+      z-index: 0;
+      animation: float 25s ease-in-out infinite reverse;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      33% { transform: translate(30px, -30px) scale(1.05); }
+      66% { transform: translate(-20px, 20px) scale(0.95); }
+    }
+
+    /* Page load animation */
+    @keyframes fadeSlideIn {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    body > * {
+      animation: fadeSlideIn 0.3s ease-out backwards;
+    }
+
+    header {
+      padding: 1rem 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(238, 242, 255, 0.75) 50%, rgba(250, 245, 255, 0.85) 100%);
+      backdrop-filter: blur(20px);
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+      box-shadow: 0 4px 30px rgba(99, 102, 241, 0.1);
+    }
+
+    header h1 {
+      font-size: 1.1rem;
+      margin: 0;
+      font-weight: 600;
+      color: var(--text-primary);
+      letter-spacing: -0.01em;
+      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: var(--sidebar-width, 380px) 4px 1fr;
+      background: transparent;
+      min-height: 0;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+    }
+
+    aside {
+      background: linear-gradient(180deg, rgba(238, 242, 255, 0.5) 0%, rgba(250, 245, 255, 0.4) 50%, rgba(236, 253, 245, 0.5) 100%);
+      backdrop-filter: blur(15px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-width: 200px;
+      max-width: 800px;
+      height: 100%;
+      border-right: 1px solid rgba(99, 102, 241, 0.15);
+    }
+
+    aside::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    aside::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    aside::-webkit-scrollbar-thumb {
+      background: var(--border-color);
+      border-radius: 3px;
+    }
+
+    aside::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    .resizer {
+      background: var(--border-color);
+      cursor: col-resize;
+      position: relative;
+      user-select: none;
+      transition: all 0.2s ease;
+    }
+
+    .resizer:hover,
+    .resizer.active {
+      background: var(--accent-indigo);
+    }
+
+    .resizer::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 3px;
+      height: 32px;
+      background: var(--text-muted);
+      border-radius: 2px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .resizer:hover::after,
+    .resizer.active::after {
+      opacity: 1;
+      background: white;
+    }
+
+    .global-controls {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border-color);
+      display: flex;
+      gap: 0.5rem;
+      background: var(--bg-secondary);
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .global-controls .secondary {
+      flex: 1;
+      padding: 0.45rem 0.65rem;
+      font-size: 0.7rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.3rem;
+      font-weight: 500;
+    }
+
+    .global-controls .secondary:hover {
+      background: var(--accent-indigo-light);
+      border-color: var(--accent-indigo);
+      color: var(--accent-indigo);
+    }
+
+    /* Tree view styles */
+    .tree-node {
+      user-select: none;
+    }
+
+    .tree-node-content {
+      display: flex;
+      align-items: center;
+      padding: 0.4rem 0.6rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border-bottom: 1px solid var(--border-subtle);
+      position: relative;
+    }
+
+    .tree-node-content::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      border-radius: var(--radius-sm);
+    }
+
+    .tree-node-content:hover::before {
+      opacity: 1;
+    }
+
+    .tree-node-content > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .tree-node-content.selected {
+      background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(236, 72, 153, 0.15) 100%);
+      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
+    }
+
+    .tree-expand-icon {
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.25rem;
+      transition: transform 0.2s ease;
+      cursor: pointer;
+      color: var(--text-muted);
+      font-size: 0.65rem;
+    }
+
+    .tree-expand-icon.expanded {
+      transform: rotate(90deg);
+    }
+
+    .tree-expand-icon.hidden {
+      visibility: hidden;
+    }
+
+    .tree-node-checkbox {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      margin-right: 0.5rem;
+      border: 2px solid var(--border-color);
+      border-radius: 4px;
+      background: var(--bg-primary);
+      position: relative;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+    }
+
+    .tree-node-checkbox:hover {
+      border-color: var(--accent-emerald);
+    }
+
+    .tree-node-checkbox:checked {
+      background: var(--bg-primary);
+      border-color: var(--accent-emerald);
+    }
+
+    .tree-node-checkbox:checked::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 6px;
+      border: solid var(--accent-emerald);
+      border-width: 0 2px 2px 0;
+      transform: translate(-50%, -60%) rotate(45deg);
+    }
+
+    .tree-node-checkbox:indeterminate {
+      background: var(--bg-primary);
+      border-color: var(--accent-emerald);
+    }
+
+    .tree-node-checkbox:indeterminate::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 8px;
+      height: 2px;
+      background: var(--accent-emerald);
+      transform: translate(-50%, -50%);
+    }
+
+    .tree-node-label {
+      flex: 1;
+      font-size: 0.82rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .tree-node-label.folder {
+      font-weight: 600;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .tree-node-label.folder .tree-node-count {
+      flex-shrink: 0;
+    }
+
+    .tree-node-label.file {
+      color: var(--text-secondary);
+    }
+
+    .tree-node-method {
+      font-size: 0.65rem;
+      padding: 0.15rem 0.45rem;
+      border-radius: var(--radius-sm);
+      margin-right: 0.4rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+
+    .tree-node-method.get {
+      background: linear-gradient(135deg, var(--accent-emerald-light) 0%, rgba(16, 185, 129, 0.15) 100%);
+      color: #047857;
+      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
+    }
+
+    .tree-node-method.post {
+      background: linear-gradient(135deg, var(--accent-amber-light) 0%, rgba(245, 158, 11, 0.15) 100%);
+      color: #b45309;
+      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
+    }
+
+    .tree-node-method.put {
+      background: linear-gradient(135deg, var(--accent-indigo-light) 0%, rgba(99, 102, 241, 0.15) 100%);
+      color: #4338ca;
+      box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
+    }
+
+    .tree-node-method.delete {
+      background: linear-gradient(135deg, var(--accent-rose-light) 0%, rgba(239, 68, 68, 0.15) 100%);
+      color: #b91c1c;
+      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
+    }
+
+    .tree-node-method.patch {
+      background: linear-gradient(135deg, #ede9fe 0%, rgba(139, 92, 246, 0.15) 100%);
+      color: #7c3aed;
+      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);
+    }
+
+    .tree-children {
+      padding-left: 1rem;
+      display: none;
+    }
+
+    .tree-children.expanded {
+      display: block;
+    }
+
+    .tree-node-count {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      margin-left: 0.4rem;
+    }
+
+    .tree-node-delete {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      margin-left: auto;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      color: var(--accent-rose);
+      font-size: 0.85rem;
+      transition: all 0.15s ease;
+      user-select: none;
+    }
+
+    .tree-node-delete:hover {
+      background: var(--accent-rose-light);
+    }
+
+    .tree-node-content:hover .tree-node-delete {
+      display: flex;
+    }
+
+    #mock-details {
+      height: calc(100% - 60px);
+    }
+
+    section {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(238, 242, 255, 0.5) 50%, rgba(250, 245, 255, 0.6) 100%);
+      backdrop-filter: blur(15px);
+      padding: 1.5rem;
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      height: 100%;
+    }
+
+    section::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    section::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    section::-webkit-scrollbar-thumb {
+      background: var(--border-color);
+      border-radius: 3px;
+    }
+
+    section::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    section > h3 {
+      margin: 0;
+      flex-shrink: 0;
+      color: var(--text-primary);
+      font-size: 0.85rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    section .data-container {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: flex-start;
+      flex-shrink: 0;
+    }
+
+    .controls h2 {
+      width: 100%;
+      margin: 0 0 0.75rem 0;
+      font-size: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .controls label input[type="text"] {
+      padding: 0.4rem 0.6rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-color);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      font-family: inherit;
+      font-size: 0.8rem;
+      outline: none;
+      transition: all 0.15s ease;
+    }
+
+    .controls label input[type="text"]:focus {
+      border-color: var(--accent-indigo);
+      box-shadow: 0 0 0 3px var(--accent-indigo-light);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      border-radius: var(--radius-sm);
+      padding: 0.25rem 0.65rem;
+      font-size: 0.65rem;
+      font-weight: 600;
+      background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #f472b6 100%);
+      color: white;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+    }
+
+    textarea {
+      width: 100%;
+      flex: 1;
+      min-height: 300px;
+      font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
+      font-size: 0.82rem;
+      padding: 1rem;
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      resize: none;
+      background: var(--bg-secondary);
+      color: var(--text-primary);
+      overflow-y: auto;
+      outline: none;
+      transition: all 0.15s ease;
+      line-height: 1.6;
+    }
+
+    textarea:focus {
+      border-color: var(--accent-indigo);
+      box-shadow: 0 0 0 3px var(--accent-indigo-light);
+    }
+
+    label {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    input[type="number"] {
+      width: 90px;
+      padding: 0.35rem 0.5rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-color);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      font-family: inherit;
+      font-size: 0.8rem;
+      outline: none;
+      transition: all 0.15s ease;
+    }
+
+    input[type="number"]:focus {
+      border-color: var(--accent-indigo);
+      box-shadow: 0 0 0 3px var(--accent-indigo-light);
+    }
+
+    .actions {
+      display: flex;
+      gap: 0.75rem;
+      flex-shrink: 0;
+      margin-top: 0.5rem;
+    }
+
+    button.primary {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius-md);
+      border: none;
+      cursor: pointer;
+      font-weight: 500;
+      font-family: inherit;
+      font-size: 0.8rem;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      position: relative;
+      overflow: hidden;
+    }
+
+    button.primary::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    button.primary:hover::before {
+      opacity: 1;
+    }
+
+    button.primary .btn-icon {
+      color: white;
+    }
+
+    button.primary:hover {
+      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
+      box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
+      transform: translateY(-2px);
+    }
+
+    button.secondary {
+      background: var(--bg-primary);
+      color: var(--text-secondary);
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border-color);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.8rem;
+      transition: all 0.15s ease;
+    }
+
+    button.secondary:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    /* Button icons */
+    .btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      font-weight: 300;
+      line-height: 1;
+    }
+
+    .btn-icon-check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.85rem;
+      font-weight: 600;
+      line-height: 1;
+      color: var(--accent-emerald);
+    }
+
+    .btn-icon-cross {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.85rem;
+      font-weight: 600;
+      line-height: 1;
+      color: var(--accent-rose);
+    }
+
+    /* Detail panel checkbox */
+    #toggle-enable {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      border: 2px solid var(--border-color);
+      border-radius: 4px;
+      background: var(--bg-primary);
+      position: relative;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+    }
+
+    #toggle-enable:hover {
+      border-color: var(--accent-emerald);
+    }
+
+    #toggle-enable:checked {
+      background: var(--bg-primary);
+      border-color: var(--accent-emerald);
+    }
+
+    #toggle-enable:checked::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 6px;
+      border: solid var(--accent-emerald);
+      border-width: 0 2px 2px 0;
+      transform: translate(-50%, -60%) rotate(45deg);
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      gap: 0.5rem;
+      height: 100%;
+      font-size: 0.85rem;
+    }
+
+    pre {
+      background: var(--bg-secondary);
+      padding: 1rem;
+      border-radius: var(--radius-md);
+      font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
+      overflow: auto;
+      flex: 1;
+      margin: 0;
+      min-height: 300px;
+      color: var(--text-primary);
+      font-size: 0.82rem;
+      line-height: 1.6;
+      border: 1px solid var(--border-color);
+    }
+
+    textarea.error {
+      border-color: var(--accent-rose);
+      box-shadow: 0 0 0 3px var(--accent-rose-light);
+    }
+
+    /* Modal styles */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%);
+      backdrop-filter: blur(8px);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    .modal-overlay.show {
+      display: flex;
+      animation: modalFadeIn 0.2s ease-out;
+    }
+
+    @keyframes modalFadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .modal {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 242, 255, 0.9) 50%, rgba(250, 245, 255, 0.95) 100%);
+      backdrop-filter: blur(25px);
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      border-radius: var(--radius-lg);
+      padding: 2rem;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: 0 25px 50px rgba(139, 92, 246, 0.25), 0 0 100px rgba(236, 72, 153, 0.15);
+      animation: modalSlideUp 0.3s ease-out;
+      position: relative;
+    }
+
+    .modal::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3), rgba(59, 130, 246, 0.3));
+      border-radius: calc(var(--radius-lg) + 2px);
+      z-index: -1;
+      opacity: 0.5;
+    }
+
+    @keyframes modalSlideUp {
+      from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .modal h2 {
+      margin: 0 0 1.5rem 0;
+      color: var(--text-primary);
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+
+    .modal .form-group {
+      margin-bottom: 1.25rem;
+    }
+
+    .modal .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+      color: var(--text-primary);
+      font-size: 0.8rem;
+    }
+
+    .modal .form-group input,
+    .modal .form-group select,
+    .modal .form-group textarea {
+      width: 100%;
+      padding: 0.6rem;
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-sm);
+      font-size: 0.85rem;
+      font-family: inherit;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      outline: none;
+      transition: all 0.15s ease;
+    }
+
+    .modal .form-group input:focus,
+    .modal .form-group select:focus,
+    .modal .form-group textarea:focus {
+      border-color: var(--accent-indigo);
+      box-shadow: 0 0 0 3px var(--accent-indigo-light);
+    }
+
+    .modal .form-group textarea {
+      min-height: 100px;
+      font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
+      font-size: 0.8rem;
+    }
+
+    .modal .form-group small {
+      display: block;
+      margin-top: 0.35rem;
+      color: var(--text-muted);
+      font-size: 0.7rem;
+    }
+
+    .modal .form-actions {
+      display: flex;
+      gap: 1rem;
+      justify-content: flex-end;
+      margin-top: 1.5rem;
+    }
+
+    /* Animation delays for stagger effect */
+    header { animation-delay: 0.05s; }
+    main { animation-delay: 0.1s; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Mock Inspector</h1>
+    <span class="badge">${apiPrefixEscaped}</span>
+    <button id="new-api-btn" class="primary" style="margin-left: auto;"><span class="btn-icon">+</span> New API</button>
+  </header>
+  <main>
+    <aside id="sidebar">
+      <div class="global-controls">
+        <button id="enable-all" class="secondary"><span class="btn-icon-check">\u2713</span> \u5F00\u542F\u6240\u6709</button>
+        <button id="disable-all" class="secondary"><span class="btn-icon-cross">\u2717</span> \u5173\u95ED\u6240\u6709</button>
+      </div>
+      <ul id="mock-list"></ul>
+    </aside>
+    <div class="resizer" id="resizer"></div>
+    <section>
+      <div id="mock-details" class="empty">
+        <p>Select a mock entry to inspect</p>
+      </div>
+    </section>
+  </main>
+  
+  <div id="new-api-modal" class="modal-overlay">
+    <div class="modal">
+      <h2><span class="btn-icon">+</span> New API Mock</h2>
+      <form id="new-api-form">
+        <div class="form-group">
+          <label for="new-api-method">HTTP Method</label>
+          <select id="new-api-method" required>
+            <option value="get">GET</option>
+            <option value="post">POST</option>
+            <option value="put">PUT</option>
+            <option value="delete">DELETE</option>
+            <option value="patch">PATCH</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="new-api-path">API Path (without prefix)</label>
+          <input type="text" id="new-api-path" placeholder="/users/list" required />
+          <small style="color: rgba(15, 23, 42, 0.6); font-size: 0.85rem;">\u4F8B\u5982\uFF1A/users/list \u6216 /api/items</small>
+        </div>
+        <div class="form-group">
+          <label for="new-api-description">Description (Optional)</label>
+          <input type="text" id="new-api-description" placeholder="\u4F8B\u5982\uFF1A\u7528\u6237\u5217\u8868\u63A5\u53E3" />
+        </div>
+        <div class="form-group">
+          <label for="new-api-data">Response Data (JSON)</label>
+          <textarea id="new-api-data" placeholder='{ "code": 200, "data": [] }'>{ "code": 200, "data": [] }</textarea>
+        </div>
+        <div class="form-actions">
+          <button type="button" id="cancel-new-api">Cancel</button>
+          <button type="submit" class="primary">Create</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  
+  <script>
+    const inspectorRoute = ${routeJson};
+    const apiBase = (inspectorRoute.endsWith('/') ? inspectorRoute.slice(0, -1) : inspectorRoute) + '/api';
+    const allowToggle = ${allowToggleJson};
+
+    function escapeHtml(value) {
+      if (value == null) return '';
+      return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    // Tree data structure conversion
+    function buildMockTree(mocks) {
+      const root = { id: 'root', name: 'root', type: 'folder', children: [], checked: false, indeterminate: false };
+
+      mocks.forEach(mock => {
+        // Parse the file path to build tree structure
+        // Example: "automock/api/v1/asset-groups/prod-db-redis/put.js"
+        const parts = mock.file.split('/').filter(p => p);
+        let currentNode = root;
+
+        parts.forEach((part, index) => {
+          const isFile = part.endsWith('.js') || part.endsWith('.ts');
+          const nodeName = isFile ? part.replace(/.(js|ts)$/, '') : part;
+          const nodeId = parts.slice(0, index + 1).join('/');
+
+          let childNode = currentNode.children.find(child => child.name === nodeName);
+
+          if (!childNode) {
+            childNode = {
+              id: nodeId,
+              name: nodeName,
+              type: isFile ? 'file' : 'folder',
+              level: index,
+              children: [],
+              checked: false,
+              indeterminate: false
+            };
+
+            if (isFile) {
+              childNode.mockInfo = mock;
+            }
+
+            currentNode.children.push(childNode);
+          }
+
+          currentNode = childNode;
+        });
+      });
+
+      // Initialize checked state based on mock.config.enable
+      function initCheckedState(node) {
+        if (node.type === 'file' && node.mockInfo) {
+          node.checked = node.mockInfo.config.enable || false;
+          node.indeterminate = false;
+        }
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(initCheckedState);
+        }
+      }
+
+      initCheckedState(root);
+
+      // Calculate parent states
+      function updateParentStates(node) {
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(updateParentStates);
+
+          const allChecked = node.children.every(child => child.checked && !child.indeterminate);
+          const someChecked = node.children.some(child => child.checked || child.indeterminate);
+
+          node.checked = allChecked;
+          node.indeterminate = !allChecked && someChecked;
+        }
+      }
+
+      updateParentStates(root);
+
+      return root.children;
+    }
+
+    // Get all leaf node (file) keys under a node
+    function getAllFileKeys(node) {
+      if (node.type === 'file') {
+        return [node.mockInfo?.key].filter(Boolean);
+      }
+
+      if (node.children && node.children.length > 0) {
+        const keys = [];
+        node.children.forEach(child => {
+          keys.push(...getAllFileKeys(child));
+        });
+        return keys;
+      }
+
+      return [];
+    }
+
+    // Update tree node state recursively
+    function updateTreeNodeState(node, checked, updateChildren = true) {
+      if (updateChildren && node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          updateTreeNodeState(child, checked, true);
+        });
+      }
+
+      node.checked = checked;
+      node.indeterminate = false;
+    }
+
+    // Update parent states bottom-up
+    function updateParentNodeState(node, tree) {
+      // Find parent node
+      function findParent(n, targetId, parent = null) {
+        if (n.id === targetId) return parent;
+        if (n.children) {
+          for (const child of n.children) {
+            const result = findParent(child, targetId, n);
+            if (result) return result;
+          }
+        }
+        return null;
+      }
+
+      const parent = findParent({ children: tree }, node.id);
+
+      if (parent) {
+        const allChecked = parent.children.every(child => child.checked && !child.indeterminate);
+        const someChecked = parent.children.some(child => child.checked || child.indeterminate);
+
+        parent.checked = allChecked;
+        parent.indeterminate = !allChecked && someChecked;
+
+        updateParentNodeState(parent, tree);
+      }
+    }
+
+    // Render tree node recursively
+    function renderTreeNode(node, level = 0, expandedNodes = new Set()) {
+      const hasChildren = node.children && node.children.length > 0;
+      const isExpanded = expandedNodes.has(node.id);
+      const paddingLeft = level * 1.2 + 0.5;
+
+      let html = '<div class="tree-node" data-node-id="' + escapeHtml(node.id) + '" data-node-type="' + node.type + '">';
+
+      // Node content
+      html += '<div class="tree-node-content" style="padding-left: ' + paddingLeft + 'rem">';
+
+      // Expand/collapse icon
+      if (hasChildren) {
+        html += '<span class="tree-expand-icon' + (isExpanded ? ' expanded' : '') + '">\u25B6</span>';
+      } else {
+        html += '<span class="tree-expand-icon hidden"></span>';
+      }
+
+      // Checkbox
+      const checkedAttr = node.checked ? 'checked' : '';
+      const indeterminateAttr = node.indeterminate ? 'data-indeterminate="true"' : '';
+      html += '<input type="checkbox" class="tree-node-checkbox" ' + checkedAttr + ' ' + indeterminateAttr + ' />';
+
+      // Node label
+      if (node.type === 'file' && node.mockInfo) {
+        const mock = node.mockInfo;
+        const methodClass = mock.method?.toLowerCase() || 'get';
+        html += '<span class="tree-node-method ' + methodClass + '">' + escapeHtml(mock.method?.toUpperCase() || 'GET') + '</span>';
+        html += '<span class="tree-node-label file" title="' + escapeHtml(mock.path) + '">' + escapeHtml(mock.path) + '</span>';
+        if (mock.description) {
+          html += '<span class="tree-node-count" title="' + escapeHtml(mock.description) + '">' + escapeHtml(mock.description) + '</span>';
+        }
+        // Delete button (only for files)
+        html += '<span class="tree-node-delete" data-mock-key="' + escapeHtml(mock.key) + '" data-is-folder="false" title="\u5220\u9664\u6B64 Mock">\u2715</span>';
+      } else {
+        const fileCount = getAllFileKeys(node);
+        const fileKeysJson = JSON.stringify(fileCount);
+        // Put count inside the label to avoid layout shift when delete button appears
+        html += '<span class="tree-node-label folder">' + escapeHtml(node.name) + ' <span class="tree-node-count">(' + fileCount.length + ')</span></span>';
+        // Delete button for folders
+        html += '<span class="tree-node-delete" data-mock-keys="' + escapeHtml(fileKeysJson) + '" data-is-folder="true" data-folder-name="' + escapeHtml(node.name) + '" title="\u5220\u9664\u6B64\u6587\u4EF6\u5939\u53CA\u6240\u6709 Mock">\u2715</span>';
+      }
+
+      html += '</div>';
+
+      // Children container
+      if (hasChildren) {
+        html += '<div class="tree-children' + (isExpanded ? ' expanded' : '') + '">';
+        node.children.forEach(child => {
+          html += renderTreeNode(child, level + 1, expandedNodes);
+        });
+        html += '</div>';
+      }
+
+      html += '</div>';
+
+      return html;
+    }
+
+    // Find node by id in tree
+    function findNodeById(nodes, id) {
+      for (const node of nodes) {
+        if (node.id === id) return node;
+        if (node.children) {
+          const found = findNodeById(node.children, id);
+          if (found) return found;
+        }
+      }
+      return null;
+    }
+
+    // Toggle tree node expand/collapse
+    function toggleTreeNodeExpand(nodeId) {
+      const nodeEl = document.querySelector('.tree-node[data-node-id="' + nodeId + '"]');
+      if (!nodeEl) return;
+
+      const childrenEl = nodeEl.querySelector('.tree-children');
+      const iconEl = nodeEl.querySelector('.tree-expand-icon');
+
+      if (childrenEl && iconEl && !iconEl.classList.contains('hidden')) {
+        const isExpanded = childrenEl.classList.contains('expanded');
+        if (isExpanded) {
+          childrenEl.classList.remove('expanded');
+          iconEl.classList.remove('expanded');
+        } else {
+          childrenEl.classList.add('expanded');
+          iconEl.classList.add('expanded');
+        }
+      }
+    }
+
+    function renderToggleSection(mock) {
+      if (!allowToggle) {
+        return '';
+      }
+      const checked = mock.config.enable ? 'checked' : '';
+      return (
+        '<label>' +
+        '<input type="checkbox" id="toggle-enable" ' + checked + ' />' +
+        'Enable' +
+        '</label>'
+      );
+    }
+
+    function renderDataSection(mock) {
+      if (mock.editable) {
+        return '<div class="data-container"><textarea id="data-editor"></textarea><div class="actions"><button class="primary" id="save-btn">Save</button></div></div>';
+      }
+      return '<div class="data-container"><pre id="data-preview"></pre></div>';
+    }
+
+    async function fetchMocks() {
+      try {
+        const res = await fetch(apiBase + '/list');
+        if (!res.ok) {
+          throw new Error('HTTP ' + res.status + ': ' + res.statusText);
+        }
+        const data = await res.json();
+        return data.mocks || [];
+      } catch (error) {
+        console.error('[Inspector] Failed to fetch mocks:', error);
+        return [];
+      }
+    }
+
+    function renderMockList(mocks, preserveExpandedState = false) {
+      const list = document.getElementById('mock-list');
+      if (!list) {
+        console.error('[Inspector] Element #mock-list not found!');
+        return;
+      }
+
+      // Save current expanded state if requested
+      let savedExpandedNodes = new Set();
+      if (preserveExpandedState) {
+        list.querySelectorAll('.tree-children.expanded').forEach(el => {
+          const parentNode = el.closest('.tree-node');
+          if (parentNode) {
+            savedExpandedNodes.add(parentNode.dataset.nodeId);
+          }
+        });
+      }
+
+      list.innerHTML = '';
+      if (!mocks || mocks.length === 0) {
+        console.warn('[Inspector] No mocks to display');
+        list.innerHTML = '<div style="padding: 1rem; color: #999;">No mock files found</div>';
+        return;
+      }
+
+      // Build tree structure
+      const tree = buildMockTree(mocks);
+
+      // Use saved expanded state or expand first level by default
+      const expandedNodes = savedExpandedNodes.size > 0 ? savedExpandedNodes : new Set();
+      if (expandedNodes.size === 0) {
+        tree.forEach(node => {
+          if (node.type === 'folder') {
+            expandedNodes.add(node.id);
+          }
+        });
+      }
+
+      let treeHtml = '';
+      tree.forEach(node => {
+        const nodeHtml = renderTreeNode(node, 0, expandedNodes);
+        treeHtml += nodeHtml;
+      });
+
+      list.innerHTML = treeHtml;
+
+      // Attach event listeners
+      attachTreeEventListeners();
+    }
+
+    // Attach event listeners for tree interactions
+    function attachTreeEventListeners() {
+      const list = document.getElementById('mock-list');
+      if (!list) return;
+
+      // Handle expand/collapse clicks
+      list.querySelectorAll('.tree-expand-icon').forEach(icon => {
+        icon.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const nodeEl = icon.closest('.tree-node');
+          if (nodeEl) {
+            const nodeId = nodeEl.dataset.nodeId;
+            toggleTreeNodeExpand(nodeId);
+          }
+        });
+      });
+
+      // Handle checkbox clicks
+      list.querySelectorAll('.tree-node-checkbox').forEach(checkbox => {
+        checkbox.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const nodeEl = checkbox.closest('.tree-node');
+          if (!nodeEl) return;
+
+          const nodeId = nodeEl.dataset.nodeId;
+          const nodeType = nodeEl.dataset.nodeType;
+          const checked = checkbox.checked;
+
+          // Get current tree data
+          const tree = buildMockTree(currentMocks);
+
+          // Find and update node
+          const node = findNodeById(tree, nodeId);
+          if (node) {
+            // Update children
+            updateTreeNodeState(node, checked, true);
+            // Update parents
+            updateParentNodeState(node, tree);
+
+            // Apply changes to all affected file nodes
+            const affectedKeys = getAllFileKeys(node);
+            await Promise.all(affectedKeys.map(key => toggleMockEnable(key, checked)));
+
+            // Re-render tree with preserved expanded state
+            renderMockList(currentMocks, true);
+          }
+        });
+      });
+
+      // Handle node content clicks (for selection)
+      list.querySelectorAll('.tree-node-content').forEach(content => {
+        content.addEventListener('click', (e) => {
+          // Don't select if clicking on checkbox or expand icon
+          if (e.target.classList.contains('tree-node-checkbox') ||
+              e.target.classList.contains('tree-expand-icon')) {
+            return;
+          }
+
+          const nodeEl = content.closest('.tree-node');
+          if (!nodeEl) return;
+
+          const nodeId = nodeEl.dataset.nodeId;
+          const nodeType = nodeEl.dataset.nodeType;
+
+          // Remove previous selection
+          document.querySelectorAll('.tree-node-content.selected').forEach(el => {
+            el.classList.remove('selected');
+          });
+
+          // Add selection to current node
+          content.classList.add('selected');
+
+          // For file nodes, select the mock
+          if (nodeType === 'file') {
+            const tree = buildMockTree(currentMocks);
+            const node = findNodeById(tree, nodeId);
+            if (node && node.mockInfo) {
+              selectMock(node.mockInfo.key, content);
+            }
+          }
+        });
+      });
+
+      // Set indeterminate state for checkboxes
+      list.querySelectorAll('.tree-node-checkbox[data-indeterminate="true"]').forEach(cb => {
+        cb.indeterminate = true;
+      });
+
+      // Handle delete button clicks
+      list.querySelectorAll('.tree-node-delete').forEach(deleteBtn => {
+        deleteBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+
+          // Check if user has chosen "never ask again"
+          const skipConfirm = localStorage.getItem('mockInspector_skipDeleteConfirm') === 'true';
+
+          const isFolder = deleteBtn.dataset.isFolder === 'true';
+          let confirmMessage = '';
+          let keysToDelete = [];
+
+          if (isFolder) {
+            // Folder deletion
+            const folderName = deleteBtn.dataset.folderName || '';
+            const keysJson = deleteBtn.dataset.mockKeys || '[]';
+            keysToDelete = JSON.parse(keysJson);
+            confirmMessage = '\u786E\u5B9A\u8981\u5220\u9664\u6587\u4EF6\u5939 "' + folderName + '" \u53CA\u5176\u5305\u542B\u7684 ' + keysToDelete.length + ' \u4E2A Mock \u6587\u4EF6\u5417\uFF1F\u6B64\u64CD\u4F5C\u4E0D\u53EF\u64A4\u9500\u3002';
+          } else {
+            // Single file deletion
+            const mockKey = deleteBtn.dataset.mockKey;
+            if (!mockKey) return;
+            keysToDelete = [mockKey];
+            confirmMessage = '\u786E\u5B9A\u8981\u5220\u9664\u8FD9\u4E2A Mock \u6570\u636E\u5417\uFF1F\u6B64\u64CD\u4F5C\u4E0D\u53EF\u64A4\u9500\u3002';
+          }
+
+          // If user chose "never ask again", delete directly
+          if (skipConfirm) {
+            await performDelete(keysToDelete);
+            return;
+          }
+
+          // Otherwise, show custom confirmation dialog
+          showDeleteConfirmDialog(confirmMessage, keysToDelete);
+        });
+      });
+
+      // Custom delete confirmation dialog
+      function showDeleteConfirmDialog(message, keysToDelete) {
+        const modal = document.getElementById('delete-confirm-modal');
+        const messageEl = document.getElementById('delete-confirm-message');
+        const neverAskCheckbox = document.getElementById('delete-never-ask');
+        const confirmBtn = document.getElementById('delete-confirm-btn');
+        const cancelBtn = document.getElementById('delete-cancel-btn');
+
+        messageEl.textContent = message;
+        neverAskCheckbox.checked = false;
+        modal.classList.add('show');
+
+        // Remove old event listeners
+        const newConfirmBtn = confirmBtn.cloneNode(true);
+        const newCancelBtn = cancelBtn.cloneNode(true);
+        confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
+        cancelBtn.parentNode.replaceChild(newCancelBtn, cancelBtn);
+
+        // Confirm button handler
+        newConfirmBtn.addEventListener('click', async () => {
+          // Save preference if "never ask again" is checked
+          if (neverAskCheckbox.checked) {
+            localStorage.setItem('mockInspector_skipDeleteConfirm', 'true');
+          }
+          modal.classList.remove('show');
+          await performDelete(keysToDelete);
+        });
+
+        // Cancel button handler
+        newCancelBtn.addEventListener('click', () => {
+          modal.classList.remove('show');
+        });
+
+        // Close on overlay click
+        modal.addEventListener('click', (e) => {
+          if (e.target === modal) {
+            modal.classList.remove('show');
+          }
+        });
+      }
+
+      // Perform the actual deletion
+      async function performDelete(keysToDelete) {
+        try {
+          // Delete all keys (either single file or entire folder)
+          const deletePromises = keysToDelete.map(key =>
+            fetch(apiBase + '/delete?key=' + encodeURIComponent(key), {
+              method: 'DELETE'
+            })
+          );
+
+          const results = await Promise.all(deletePromises);
+
+          // Check if any deletion failed
+          const failedDeletions = results.filter(res => !res.ok);
+          if (failedDeletions.length > 0) {
+            const errors = await Promise.all(failedDeletions.map(res => res.json()));
+            throw new Error(errors.map(e => e.error).join(', '));
+          }
+
+          // Refresh the list
+          currentMocks = await fetchMocks();
+          renderMockList(currentMocks, true);
+
+          // Clear details panel if any deleted mock was selected
+          if (keysToDelete.includes(window.currentKey)) {
+            window.currentKey = null;
+            document.getElementById('mock-details').innerHTML = '<p>Select a mock entry to inspect</p>';
+            document.getElementById('mock-details').className = 'empty';
+          }
+        } catch (error) {
+          alert('\u5220\u9664\u5931\u8D25: ' + error.message);
+        }
+      }
+    }
+
+    function renderDetails(mock) {
+      const container = document.getElementById('mock-details');
+      if (!mock) {
+        container.className = 'empty';
+        container.innerHTML = '<p>Select a mock entry to inspect</p>';
+        return;
+      }
+
+      container.className = '';
+      container.innerHTML = [
+        '<div style="display: flex; flex-direction: column; height: 100%;">',
+        '  <div class="controls">',
+        '    <h2>',
+        '      <span class="badge">' + escapeHtml(mock.method.toUpperCase()) + '</span>',
+        '      ' + escapeHtml(mock.path),
+        '    </h2>',
+        '    <label style="flex: 1;" >',
+        '      Desc: ',
+        '      <input type="text" id="description-input" placeholder="\u4F8B\u5982\uFF1A\u7528\u6237\u5217\u8868\u63A5\u53E3" value="' + escapeHtml(mock.description || '') + '" style="width: 100%; margin-top: 0.25rem;" />',
+        '    </label>',
+        '    <label>Delay <input type="number" id="delay-input" value="' + mock.config.delay + '" min="0" step="50" /> ms</label>',
+        '    <label>Status <input type="number" id="status-input" value="' + mock.config.status + '" min="100" max="599" /></label>',
+        '    ' + renderToggleSection(mock),
+        '  </div>',
+        '  <h3>Response Data</h3>',
+        '  ' + renderDataSection(mock),
+        '</div>'
+      ].join('\\n');
+
+      const descriptionInput = document.getElementById('description-input');
+      if (descriptionInput) {
+        descriptionInput.addEventListener('change', () => updateDescription(descriptionInput.value));
+      }
+
+      if (allowToggle) {
+        const enableToggle = document.getElementById('toggle-enable');
+        if (enableToggle) {
+          enableToggle.addEventListener('change', () => updateConfig({ enable: enableToggle.checked }));
+        }
+      }
+
+      const delayInput = document.getElementById('delay-input');
+      if (delayInput) {
+        delayInput.addEventListener('change', () => updateConfig({ delay: Number(delayInput.value) || 0 }));
+      }
+
+      const statusInput = document.getElementById('status-input');
+      if (statusInput) {
+        statusInput.addEventListener('change', () => updateConfig({ status: Number(statusInput.value) || 200 }));
+      }
+
+      if (mock.editable) {
+        const textarea = document.getElementById('data-editor');
+        if (textarea) {
+          textarea.value = mock.dataText || '';
+          const saveBtn = document.getElementById('save-btn');
+          if (saveBtn) {
+            saveBtn.addEventListener('click', async () => {
+              try {
+                const raw = textarea.value || 'null';
+                const parsed = JSON.parse(raw);
+                await updateConfig({ data: parsed });
+                textarea.classList.remove('error');
+              } catch (err) {
+                textarea.classList.add('error');
+                alert('Invalid JSON: ' + err.message);
+              }
+            });
+          }
+        }
+      } else {
+        const pre = document.getElementById('data-preview');
+        if (pre) {
+          pre.textContent = mock.dataText || '';
+        }
+      }
+    }
+
+    let currentMocks = [];
+
+    async function updateConfig(partial) {
+      if (!window.currentKey) return;
+      if (!allowToggle && 'enable' in partial) {
+        delete partial.enable;
+      }
+      const res = await fetch(apiBase + '/update', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key: window.currentKey, config: partial })
+      });
+      const data = await res.json();
+      const updated = data.mock;
+      const index = currentMocks.findIndex((item) => item.key === window.currentKey);
+      if (index >= 0) {
+        currentMocks[index] = updated;
+        renderDetails(updated);
+      }
+    }
+
+    async function updateDescription(description) {
+      if (!window.currentKey) return;
+      try {
+        const res = await fetch(apiBase + '/update', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key: window.currentKey, description: description })
+        });
+        const data = await res.json();
+        const updated = data.mock;
+        const index = currentMocks.findIndex((item) => item.key === window.currentKey);
+        if (index >= 0) {
+          currentMocks[index] = updated;
+          renderDetails(updated);
+          // \u91CD\u65B0\u6E32\u67D3\u5217\u8868\u4EE5\u66F4\u65B0\u663E\u793A
+          renderMockList(currentMocks, true);
+        }
+      } catch (error) {
+        console.error('[Inspector] Failed to update description:', error);
+        alert('\u66F4\u65B0\u63CF\u8FF0\u5931\u8D25: ' + error.message);
+      }
+    }
+
+    async function selectMock(key, button) {
+      window.currentKey = key;
+      document.querySelectorAll('aside button').forEach((btn) => btn.classList.remove('active'));
+      button.classList.add('active');
+      const res = await fetch(apiBase + '/detail?key=' + encodeURIComponent(key));
+      const data = await res.json();
+      const mock = data.mock;
+      const index = currentMocks.findIndex((item) => item.key === key);
+      if (index >= 0) {
+        currentMocks[index] = mock;
+      }
+      renderDetails(mock);
+    }
+
+    async function toggleMockEnable(key, enable) {
+      try {
+        const res = await fetch(apiBase + '/update', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key: key, config: { enable: enable } })
+        });
+        const data = await res.json();
+        const updated = data.mock;
+        const index = currentMocks.findIndex((item) => item.key === key);
+        if (index >= 0) {
+          currentMocks[index] = updated;
+          // \u5982\u679C\u5F53\u524D\u6B63\u5728\u67E5\u770B\u8FD9\u4E2A mock\uFF0C\u66F4\u65B0\u8BE6\u60C5
+          if (window.currentKey === key) {
+            renderDetails(updated);
+          }
+        }
+      } catch (error) {
+        console.error('[Inspector] Failed to toggle mock:', error);
+        alert('\u66F4\u65B0\u5931\u8D25: ' + error.message);
+      }
+    }
+
+    function startEditDescription(li, mock) {
+      // \u6E05\u7A7A li \u5185\u5BB9\uFF0C\u521B\u5EFA\u7F16\u8F91\u6846
+      li.innerHTML = '';
+      
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'description-edit';
+      input.value = mock.description || '';
+      input.placeholder = '\u8F93\u5165\u4E1A\u52A1\u63CF\u8FF0\uFF0C\u4F8B\u5982\uFF1A\u7528\u6237\u5217\u8868\u63A5\u53E3';
+      
+      const saveEdit = async () => {
+        const newDescription = input.value.trim();
+        try {
+          const res = await fetch(apiBase + '/update', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ key: mock.key, description: newDescription })
+          });
+          const data = await res.json();
+          const updated = data.mock;
+          const index = currentMocks.findIndex((item) => item.key === mock.key);
+          if (index >= 0) {
+            currentMocks[index] = updated;
+          }
+          // \u91CD\u65B0\u6E32\u67D3\u5217\u8868
+          renderMockList(currentMocks, true);
+          // \u5982\u679C\u5F53\u524D\u6B63\u5728\u67E5\u770B\u8FD9\u4E2A mock\uFF0C\u66F4\u65B0\u8BE6\u60C5
+          if (window.currentKey === mock.key) {
+            renderDetails(updated);
+          }
+        } catch (error) {
+          console.error('[Inspector] Failed to update description:', error);
+          alert('\u66F4\u65B0\u5931\u8D25: ' + error.message);
+          renderMockList(currentMocks, true);
+        }
+      };
+      
+      input.addEventListener('blur', saveEdit);
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          saveEdit();
+        } else if (e.key === 'Escape') {
+          renderMockList(currentMocks, true);
+        }
+      });
+      
+      li.appendChild(input);
+      input.focus();
+      input.select();
+    }
+
+    async function enableAllMocks() {
+      const promises = currentMocks.map(mock => 
+        toggleMockEnable(mock.key, true)
+      );
+      await Promise.all(promises);
+      // \u91CD\u65B0\u83B7\u53D6\u5217\u8868\u4EE5\u66F4\u65B0 UI
+      currentMocks = await fetchMocks();
+      renderMockList(currentMocks, true);
+    }
+
+    async function disableAllMocks() {
+      const promises = currentMocks.map(mock => 
+        toggleMockEnable(mock.key, false)
+      );
+      await Promise.all(promises);
+      // \u91CD\u65B0\u83B7\u53D6\u5217\u8868\u4EE5\u66F4\u65B0 UI
+      currentMocks = await fetchMocks();
+      renderMockList(currentMocks, true);
+    }
+
+    // Initialize sidebar resizer functionality
+    function initSidebarResizer() {
+      const sidebar = document.getElementById('sidebar');
+      const resizer = document.getElementById('resizer');
+      const main = document.querySelector('main');
+
+      if (!sidebar || !resizer || !main) {
+        console.warn('[Inspector] Sidebar resizer elements not found');
+        return;
+      }
+
+      // Load saved width from localStorage
+      const savedWidth = localStorage.getItem('mockInspectorSidebarWidth');
+      if (savedWidth) {
+        const width = Math.max(200, Math.min(800, parseInt(savedWidth, 10)));
+        main.style.setProperty('--sidebar-width', width + 'px');
+      }
+
+      let isResizing = false;
+      let startX = 0;
+      let startWidth = 0;
+
+      resizer.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+        resizer.classList.add('active');
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        e.preventDefault();
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!isResizing) return;
+
+        const deltaX = e.clientX - startX;
+        const newWidth = Math.max(200, Math.min(800, startWidth + deltaX));
+        main.style.setProperty('--sidebar-width', newWidth + 'px');
+      });
+
+      document.addEventListener('mouseup', () => {
+        if (isResizing) {
+          isResizing = false;
+          resizer.classList.remove('active');
+          document.body.style.cursor = '';
+          document.body.style.userSelect = '';
+
+          // Save width to localStorage
+          const currentWidth = sidebar.offsetWidth;
+          localStorage.setItem('mockInspectorSidebarWidth', currentWidth.toString());
+        }
+      });
+
+      // Touch support for mobile devices
+      resizer.addEventListener('touchstart', (e) => {
+        const touch = e.touches[0];
+        isResizing = true;
+        startX = touch.clientX;
+        startWidth = sidebar.offsetWidth;
+        resizer.classList.add('active');
+        e.preventDefault();
+      }, { passive: false });
+
+      document.addEventListener('touchmove', (e) => {
+        if (!isResizing) return;
+
+        const touch = e.touches[0];
+        const deltaX = touch.clientX - startX;
+        const newWidth = Math.max(200, Math.min(800, startWidth + deltaX));
+        main.style.setProperty('--sidebar-width', newWidth + 'px');
+      }, { passive: false });
+
+      document.addEventListener('touchend', () => {
+        if (isResizing) {
+          isResizing = false;
+          resizer.classList.remove('active');
+
+          // Save width to localStorage
+          const currentWidth = sidebar.offsetWidth;
+          localStorage.setItem('mockInspectorSidebarWidth', currentWidth.toString());
+        }
+      });
+    }
+
+    async function bootstrap() {
+      // Initialize sidebar resizer
+      initSidebarResizer();
+
+      try {
+        currentMocks = await fetchMocks();
+        renderMockList(currentMocks, true);
+        
+        // \u7ED1\u5B9A\u5168\u5C40\u63A7\u5236\u6309\u94AE
+        const enableAllBtn = document.getElementById('enable-all');
+        const disableAllBtn = document.getElementById('disable-all');
+        if (enableAllBtn) {
+          enableAllBtn.addEventListener('click', async () => {
+            enableAllBtn.disabled = true;
+            enableAllBtn.textContent = '\u5904\u7406\u4E2D...';
+            await enableAllMocks();
+            enableAllBtn.disabled = false;
+            enableAllBtn.textContent = '\u2713 \u5F00\u542F\u6240\u6709';
+          });
+        }
+        if (disableAllBtn) {
+          disableAllBtn.addEventListener('click', async () => {
+            disableAllBtn.disabled = true;
+            disableAllBtn.textContent = '\u5904\u7406\u4E2D...';
+            await disableAllMocks();
+            disableAllBtn.disabled = false;
+            disableAllBtn.textContent = '\u2717 \u5173\u95ED\u6240\u6709';
+          });
+        }
+        
+        // \u7ED1\u5B9A\u65B0\u5EFAAPI\u6309\u94AE
+        const newApiBtn = document.getElementById('new-api-btn');
+        const newApiModal = document.getElementById('new-api-modal');
+        const newApiForm = document.getElementById('new-api-form');
+        const cancelNewApi = document.getElementById('cancel-new-api');
+        
+        if (newApiBtn && newApiModal) {
+          newApiBtn.addEventListener('click', () => {
+            newApiModal.classList.add('show');
+            document.getElementById('new-api-path').focus();
+          });
+        }
+        
+        if (cancelNewApi && newApiModal) {
+          cancelNewApi.addEventListener('click', () => {
+            newApiModal.classList.remove('show');
+            newApiForm.reset();
+          });
+        }
+        
+        // \u70B9\u51FB\u80CC\u666F\u5173\u95ED\u6A21\u6001\u6846
+        if (newApiModal) {
+          newApiModal.addEventListener('click', (e) => {
+            if (e.target === newApiModal) {
+              newApiModal.classList.remove('show');
+              newApiForm.reset();
+            }
+          });
+        }
+        
+        // \u5904\u7406\u8868\u5355\u63D0\u4EA4
+        if (newApiForm) {
+          newApiForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const method = document.getElementById('new-api-method').value;
+            const path = document.getElementById('new-api-path').value.trim();
+            const description = document.getElementById('new-api-description').value.trim();
+            const dataText = document.getElementById('new-api-data').value.trim();
+            
+            if (!path) {
+              alert('\u8BF7\u8F93\u5165 API \u8DEF\u5F84');
+              return;
+            }
+            
+            // \u9A8C\u8BC1JSON
+            let data;
+            try {
+              data = JSON.parse(dataText || '{}');
+            } catch (err) {
+              alert('Response Data \u4E0D\u662F\u6709\u6548\u7684 JSON: ' + err.message);
+              return;
+            }
+            
+            // \u53D1\u9001\u521B\u5EFA\u8BF7\u6C42
+            try {
+              const submitBtn = newApiForm.querySelector('button[type="submit"]');
+              const originalText = submitBtn.textContent;
+              submitBtn.disabled = true;
+              submitBtn.textContent = 'Creating...';
+              
+              const res = await fetch(apiBase + '/create', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  method: method,
+                  path: path,
+                  description: description || path,
+                  data: data
+                })
+              });
+              
+              const result = await res.json();
+              
+              if (!res.ok) {
+                throw new Error(result.error || 'Failed to create API');
+              }
+              
+              // \u5173\u95ED\u6A21\u6001\u6846
+              newApiModal.classList.remove('show');
+              newApiForm.reset();
+              
+              // \u5237\u65B0\u5217\u8868
+              currentMocks = await fetchMocks();
+              renderMockList(currentMocks, true);
+              
+              // \u81EA\u52A8\u9009\u4E2D\u65B0\u521B\u5EFA\u7684 API
+              if (result.mock && result.mock.key) {
+                const button = document.querySelector('aside button[data-key="' + result.mock.key + '"]');
+                if (button) {
+                  await selectMock(result.mock.key, button);
+                }
+              }
+              
+              alert('\u2705 API Mock \u521B\u5EFA\u6210\u529F\uFF01');
+              
+              submitBtn.disabled = false;
+              submitBtn.textContent = originalText;
+            } catch (err) {
+              alert('\u521B\u5EFA\u5931\u8D25: ' + err.message);
+              const submitBtn = newApiForm.querySelector('button[type="submit"]');
+              submitBtn.disabled = false;
+              submitBtn.textContent = 'Create';
+            }
+          });
+        }
+      } catch (error) {
+        console.error('[Inspector] Bootstrap failed:', error);
+      }
+    }
+
+    bootstrap();
+  </script>
+
+  <!-- Delete Confirmation Modal -->
+  <div id="delete-confirm-modal" class="modal-overlay">
+    <div class="modal" style="max-width: 400px;">
+      <h2><span class="btn-icon-cross" style="color: var(--accent-rose);">!</span> \u786E\u8BA4\u5220\u9664</h2>
+      <p id="delete-confirm-message" style="margin-bottom: 1rem; color: var(--text-secondary);"></p>
+      <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; cursor: pointer; user-select: none;">
+        <input type="checkbox" id="delete-never-ask" style="flex-shrink: 0;" />
+        <span>\u4E0D\u518D\u63D0\u9192</span>
+      </label>
+      <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
+        <button id="delete-cancel-btn" class="secondary">\u53D6\u6D88</button>
+        <button id="delete-confirm-btn" class="primary" style="background: var(--accent-rose);">\u5220\u9664</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>`;
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
+  res.end(html);
+}
+async function handleInspectorApi({
+  res,
+  req,
+  pathname,
+  mockDir,
+  apiPrefix,
+  inspectorConfig,
+  getMockFileMap
+}) {
+  try {
+    const mockFileMap = getMockFileMap();
+    if (pathname === "list") {
+      const list = await Promise.all(
+        Array.from(mockFileMap.entries()).map(async ([key, filePath]) => {
+          const info = await parseMockModule(filePath);
+          return {
+            key,
+            file: import_path2.default.relative(mockDir, filePath),
+            method: key.split("/").pop()?.replace(/\.js$/, "") ?? "get",
+            path: key.replace(/\/[^/]+\.js$/, ""),
+            config: info.config,
+            editable: info.serializable,
+            description: info.description,
+            dataText: info.dataText
+          };
+        })
+      );
+      sendJson(res, { mocks: list });
+      return;
+    }
+    if (pathname === "detail") {
+      const url = new URL(req.url || "", "http://localhost");
+      const key = url.searchParams.get("key");
+      if (!key) {
+        sendJson(res, { error: "Missing key" }, 400);
+        return;
+      }
+      const filePath = mockFileMap.get(key);
+      if (!filePath) {
+        sendJson(res, { error: "Mock not found" }, 404);
+        return;
+      }
+      const info = await parseMockModule(filePath);
+      sendJson(res, {
+        mock: {
+          key,
+          file: import_path2.default.relative(mockDir, filePath),
+          method: key.split("/").pop()?.replace(/\.js$/, "") ?? "get",
+          path: key.replace(/\/[^/]+\.js$/, ""),
+          config: info.config,
+          editable: info.serializable,
+          description: info.description,
+          dataText: info.dataText
+        }
+      });
+      return;
+    }
+    if (pathname === "update") {
+      if (req.method !== "POST") {
+        sendJson(res, { error: "Method not allowed" }, 405);
+        return;
+      }
+      const body = await readBody(req);
+      let payload;
+      try {
+        payload = JSON.parse(body);
+      } catch (error) {
+        sendJson(res, { error: "Invalid JSON body" }, 400);
+        return;
+      }
+      const { key, config, description } = payload || {};
+      if (!key) {
+        sendJson(res, { error: "Invalid payload: missing key" }, 400);
+        return;
+      }
+      const filePath = mockFileMap.get(key);
+      if (!filePath) {
+        sendJson(res, { error: "Mock not found" }, 404);
+        return;
+      }
+      const info = await parseMockModule(filePath);
+      let nextConfig = info.config;
+      if (config && typeof config === "object") {
+        if (!inspectorConfig.enableToggle && config.enable !== void 0) {
+          delete config.enable;
+        }
+        nextConfig = {
+          ...info.config,
+          ...config
+        };
+      }
+      const nextDescription = description !== void 0 ? description : info.description;
+      await writeMockFile(filePath, {
+        headerComment: info.headerComment,
+        config: nextConfig,
+        description: nextDescription
+      });
+      const updatedInfo = await parseMockModule(filePath);
+      sendJson(res, {
+        mock: {
+          key,
+          file: import_path2.default.relative(mockDir, filePath),
+          method: key.split("/").pop()?.replace(/\.js$/, "") ?? "get",
+          path: key.replace(/\/[^/]+\.js$/, ""),
+          config: updatedInfo.config,
+          editable: updatedInfo.serializable,
+          description: updatedInfo.description,
+          dataText: updatedInfo.dataText
+        }
+      });
+      return;
+    }
+    if (pathname === "create") {
+      if (req.method !== "POST") {
+        sendJson(res, { error: "Method not allowed" }, 405);
+        return;
+      }
+      const body = await readBody(req);
+      let payload;
+      try {
+        payload = JSON.parse(body);
+      } catch (error) {
+        sendJson(res, { error: "Invalid JSON body" }, 400);
+        return;
+      }
+      const { method, path: apiPath, description, data } = payload || {};
+      if (!method || !apiPath) {
+        sendJson(
+          res,
+          { error: "Invalid payload: missing method or path" },
+          400
+        );
+        return;
+      }
+      const { saveMockData: saveMockData2 } = await Promise.resolve().then(() => (init_mockFileUtils(), mockFileUtils_exports));
+      const fullUrl = apiPrefix + apiPath;
+      try {
+        let dataToSave;
+        if (typeof data === "object" && data !== null) {
+          dataToSave = JSON.stringify(data, null, 2);
+        } else {
+          dataToSave = typeof data === "string" ? data : "";
+        }
+        await saveMockData2(
+          fullUrl,
+          method.toLowerCase(),
+          dataToSave,
+          mockDir,
+          200
+        );
+        const { buildMockIndex: buildMockIndex2 } = await Promise.resolve().then(() => (init_mockFileUtils(), mockFileUtils_exports));
+        const newMockFileMap = await buildMockIndex2(mockDir);
+        for (const [key2, value] of newMockFileMap.entries()) {
+          mockFileMap.set(key2, value);
+        }
+        const key = apiPath + "/" + method.toLowerCase() + ".js";
+        const filePath = mockFileMap.get(key);
+        if (!filePath) {
+          sendJson(
+            res,
+            { error: "Mock file created but not found in map" },
+            500
+          );
+          return;
+        }
+        const info = await parseMockModule(filePath);
+        sendJson(res, {
+          success: true,
+          mock: {
+            key,
+            file: import_path2.default.relative(mockDir, filePath),
+            method: method.toLowerCase(),
+            path: apiPath,
+            config: info.config,
+            editable: info.serializable,
+            description: info.description,
+            dataText: info.dataText
+          }
+        });
+        return;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        sendJson(res, { error: "Failed to create mock: " + errorMessage }, 500);
+        return;
+      }
+    }
+    if (pathname === "delete") {
+      const url = new URL(req.url || "", "http://localhost");
+      const key = url.searchParams.get("key");
+      if (!key) {
+        sendJson(res, { error: "Missing key" }, 400);
+        return;
+      }
+      const filePath = mockFileMap.get(key);
+      if (!filePath) {
+        sendJson(res, { error: "Mock not found" }, 404);
+        return;
+      }
+      const { unlink, rm } = await import("fs/promises");
+      const { stat } = await import("fs/promises");
+      try {
+        const stats = await stat(filePath);
+        if (stats.isDirectory()) {
+          await rm(filePath, { recursive: true, force: true });
+          for (const [mapKey, mapPath] of mockFileMap.entries()) {
+            if (mapPath.startsWith(filePath + import_path2.default.sep) || mapPath === filePath) {
+              mockFileMap.delete(mapKey);
+            }
+          }
+        } else {
+          await unlink(filePath);
+          mockFileMap.delete(key);
+        }
+        sendJson(res, { success: true });
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        sendJson(res, { error: "Failed to delete: " + errorMessage }, 500);
+      }
+      return;
+    }
+    sendJson(res, { error: "Unknown inspector endpoint" }, 404);
+  } catch (error) {
+    console.error("\u274C [automock] Inspector request failed:", error);
+    sendJson(res, { error: "Inspector failed" }, 500);
+  }
+}
+function sendJson(res, payload, status = 200) {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json; charset=utf-8");
+  res.end(JSON.stringify(payload));
+}
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf-8")));
+    req.on("error", reject);
+  });
+}
+
+// src/middleware.ts
+function automock(options) {
+  const {
+    mockDir: configMockDir = import_path3.default.join(process.cwd(), "mock"),
+    apiPrefix = "/api",
+    pathRewrite = (p) => p,
+    proxyBaseUrl,
+    inspector = false
+  } = options;
+  const mockDir = import_path3.default.isAbsolute(configMockDir) ? configMockDir : import_path3.default.resolve(process.cwd(), configMockDir);
+  if (!import_fs_extra2.default.existsSync(mockDir)) {
+    try {
+      import_fs_extra2.default.ensureDirSync(mockDir);
+      console.log(`\u2705 [automock] Mock directory created: ${mockDir}`);
+    } catch (error) {
+      console.error(`\u274C [automock] \u521B\u5EFA Mock \u76EE\u5F55\u5931\u8D25: ${mockDir}`, error);
+    }
+  }
+  let watcher;
+  return {
+    name: "vite-plugin-automock",
+    config() {
+    },
+    configureServer(server) {
+      let mockFileMap = buildMockIndex(mockDir);
+      console.log(`\u2705 [automock] Loaded ${mockFileMap.size} mock files`);
+      const rebuildMockFileMap = (0, import_lodash.default)(() => {
+        mockFileMap = buildMockIndex(mockDir);
+      }, 200);
+      watcher = import_chokidar.default.watch(mockDir, {
+        ignoreInitial: true,
+        persistent: true,
+        depth: 30
+      });
+      watcher.on("add", () => rebuildMockFileMap());
+      watcher.on("unlink", () => rebuildMockFileMap());
+      server.httpServer?.on("close", () => {
+        watcher?.close();
+      });
+      const inspectorHandler = createInspectorHandler({
+        inspector,
+        apiPrefix,
+        mockDir,
+        getMockFileMap: () => mockFileMap
+      });
+      if (inspector) {
+        const inspectorConfig = normalizeInspectorConfig(inspector);
+        server.httpServer?.once("listening", () => {
+          setTimeout(() => {
+            const address = server.httpServer?.address();
+            if (address && typeof address === "object") {
+              const protocol = server.config.server.https ? "https" : "http";
+              const host = address.address === "::" || address.address === "0.0.0.0" ? "localhost" : address.address;
+              const port = address.port;
+              const inspectorUrl = `${protocol}://${host}:${port}${inspectorConfig.route}`;
+              console.log(
+                `  \u279C  \x1B[36mMock Inspector\x1B[0m: \x1B[1m${inspectorUrl}\x1B[0m`
+              );
+            }
+          }, 100);
+        });
+      }
+      server.middlewares.use(
+        async (req, res, next) => {
+          if (inspectorHandler && req.url) {
+            const handled = await inspectorHandler(req, res);
+            if (handled) {
+              return;
+            }
+          }
+          if (!req.url?.startsWith(apiPrefix)) {
+            return next();
+          }
+          const method = (req.method || "GET").toLowerCase();
+          const urlObj = new URL(req.url, "http://localhost");
+          const pathname = urlObj.pathname;
+          const key = `${pathname}/${method}.js`.toLowerCase();
+          const isExist = mockFileMap.has(key);
+          if (isExist) {
+            try {
+              const mockFilePath = mockFileMap.get(key);
+              const absolutePath = import_path3.default.isAbsolute(mockFilePath) ? mockFilePath : import_path3.default.resolve(process.cwd(), mockFilePath);
+              if (!import_fs_extra2.default.existsSync(absolutePath)) {
+                throw new Error(`Mock file does not exist: ${absolutePath}`);
+              }
+              const { default: mockModule } = await import(`${absolutePath}?t=${Date.now()}`);
+              const mockResult = typeof mockModule.data === "function" ? mockModule.data() : mockModule;
+              const {
+                enable = true,
+                data,
+                delay = 0,
+                status = 200
+              } = mockResult || {};
+              if (enable) {
+                setTimeout(() => {
+                  const isBinaryMock = data?.__binaryFile;
+                  if (isBinaryMock) {
+                    const binaryFilePath = absolutePath.replace(
+                      /\.js$/,
+                      "." + data.__binaryFile
+                    );
+                    if (import_fs_extra2.default.existsSync(binaryFilePath)) {
+                      try {
+                        const binaryData = import_fs_extra2.default.readFileSync(binaryFilePath);
+                        const contentType = data.__contentType || "application/octet-stream";
+                        res.setHeader("Content-Type", contentType);
+                        res.setHeader("Content-Length", binaryData.length);
+                        res.setHeader("X-Mock-Response", "true");
+                        res.setHeader("X-Mock-Source", "vite-plugin-automock");
+                        res.setHeader("X-Mock-Binary-File", "true");
+                        res.statusCode = status;
+                        res.end(binaryData);
+                      } catch (error) {
+                        console.error(
+                          "\u274C [automock] \u8BFB\u53D6\u4E8C\u8FDB\u5236mock\u6587\u4EF6\u5931\u8D25:",
+                          error
+                        );
+                        res.statusCode = 500;
+                        res.end(
+                          JSON.stringify({
+                            error: "Failed to read binary mock file"
+                          })
+                        );
+                      }
+                    } else {
+                      console.error(
+                        "\u274C [automock] \u4E8C\u8FDB\u5236mock\u6587\u4EF6\u4E0D\u5B58\u5728:",
+                        binaryFilePath
+                      );
+                      res.statusCode = 404;
+                      res.end(
+                        JSON.stringify({ error: "Binary mock file not found" })
+                      );
+                    }
+                  } else {
+                    res.setHeader(
+                      "Content-Type",
+                      "application/json; charset=utf-8"
+                    );
+                    res.setHeader("X-Mock-Response", "true");
+                    res.setHeader("X-Mock-Source", "vite-plugin-automock");
+                    res.statusCode = status;
+                    res.end(
+                      typeof data === "string" ? data : JSON.stringify(data)
+                    );
+                  }
+                }, delay);
+                return;
+              }
+            } catch (error) {
+              console.error(`\u274C [automock] \u52A0\u8F7D mock \u6587\u4EF6\u5931\u8D25:`, error);
+            }
+          }
+          const shouldSaveMockData = !isExist;
+          if (!proxyBaseUrl) {
+            res.statusCode = 404;
+            res.end(
+              JSON.stringify({
+                error: "No mock found and proxyBaseUrl not configured"
+              })
+            );
+            return;
+          }
+          try {
+            let sendProxyRequest2 = function(body) {
+              const targetUrlObj = new URL(proxyBaseUrl);
+              const proxyOptions = {
+                method: req.method,
+                headers: {
+                  ...req.headers,
+                  host: targetUrlObj.host
+                  // Override Host header with target server's host
+                },
+                rejectUnauthorized: false
+              };
+              const proxyReq = client.request(
+                targetUrl,
+                proxyOptions,
+                (proxyRes) => {
+                  const contentType = proxyRes.headers["content-type"];
+                  const chunks = [];
+                  proxyRes.on("data", (chunk) => {
+                    chunks.push(chunk);
+                  });
+                  proxyRes.on("end", async () => {
+                    try {
+                      const responseData = Buffer.concat(chunks);
+                      if (shouldSaveMockData) {
+                        try {
+                          console.log(
+                            `\u{1F504} [automock] \u5C1D\u8BD5\u4FDD\u5B58 mock: ${req.url} -> ${pathname}`
+                          );
+                          const savedFilePath = await saveMockData(
+                            req.url,
+                            method,
+                            responseData,
+                            mockDir,
+                            proxyRes.statusCode,
+                            contentType
+                          );
+                          if (savedFilePath) {
+                            console.log(
+                              `\u2705 [automock] \u5DF2\u4FDD\u5B58 mock: ${pathname}`
+                            );
+                            mockFileMap = buildMockIndex(mockDir);
+                          } else {
+                            console.log(
+                              `\u2139\uFE0F [automock] mock \u6587\u4EF6\u5DF2\u5B58\u5728\uFF0C\u8DF3\u8FC7: ${pathname}`
+                            );
+                          }
+                        } catch (saveError) {
+                          console.error(
+                            "\u274C [automock] \u4FDD\u5B58 mock \u5931\u8D25:",
+                            saveError
+                          );
+                        }
+                      }
+                      res.writeHead(
+                        proxyRes.statusCode || 200,
+                        proxyRes.headers
+                      );
+                      res.end(responseData);
+                    } catch (error) {
+                      console.error("\u274C [automock] \u5904\u7406\u54CD\u5E94\u5931\u8D25:", error);
+                      res.writeHead(
+                        proxyRes.statusCode || 200,
+                        proxyRes.headers
+                      );
+                      res.end(Buffer.concat(chunks));
+                    }
+                  });
+                }
+              );
+              proxyReq.on("error", (err) => {
+                console.error("\u274C [automock] \u4EE3\u7406\u8BF7\u6C42\u5931\u8D25:", err);
+                res.statusCode = 500;
+                res.end(JSON.stringify({ error: err.message }));
+              });
+              if (body && (req.method === "POST" || req.method === "PUT" || req.method === "PATCH")) {
+                proxyReq.write(body);
+              }
+              proxyReq.end();
+            };
+            var sendProxyRequest = sendProxyRequest2;
+            const targetUrl = proxyBaseUrl + pathRewrite(req.url || "");
+            const client = targetUrl.startsWith("https") ? import_https.default : import_http.default;
+            if (req.method === "POST" || req.method === "PUT" || req.method === "PATCH") {
+              let bodyStr = "";
+              req.on("data", (chunk) => {
+                bodyStr += chunk.toString();
+              });
+              req.on("end", () => {
+                sendProxyRequest2(bodyStr);
+              });
+            } else {
+              sendProxyRequest2();
+            }
+          } catch (error) {
+            console.error("\u274C [automock] \u4EE3\u7406\u8BF7\u6C42\u5F02\u5E38:", error);
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: "Internal server error" }));
+          }
+        }
+      );
+    },
+    closeBundle() {
+      watcher?.close();
+    },
+    transform() {
+      return null;
+    }
+  };
+}
+
+// src/mockBundler.ts
+var import_path4 = __toESM(require("path"));
+var import_fs_extra3 = __toESM(require("fs-extra"));
+init_mockFileUtils();
+var DEFAULT_BUNDLE_OPTIONS = {
+  includeDisabled: true,
+  log: true
+};
+async function bundleMockFiles(options) {
+  const opts = { ...DEFAULT_BUNDLE_OPTIONS, ...options };
+  const { mockDir, log } = opts;
+  if (!import_fs_extra3.default.existsSync(mockDir)) {
+    if (log) {
+      console.log(`[mock-bundler] Mock directory does not exist: ${mockDir}`);
+    }
+    return {};
+  }
+  const mockFileMap = buildMockIndex(mockDir);
+  const bundle = {};
+  let bundledCount = 0;
+  let skippedCount = 0;
+  for (const [key, filePath] of mockFileMap) {
+    try {
+      const mockInfo = await parseMockModule(filePath);
+      if (!mockInfo.serializable) {
+        skippedCount++;
+        if (log) {
+          console.log(`[mock-bundler] Skipping non-serializable mock: ${key}`);
+        }
+        continue;
+      }
+      bundle[key] = {
+        enable: mockInfo.config.enable,
+        data: mockInfo.config.data,
+        delay: mockInfo.config.delay,
+        status: mockInfo.config.status,
+        isBinary: mockInfo.isBinary
+      };
+      bundledCount++;
+    } catch (error) {
+      if (log) {
+        console.error(`[mock-bundler] Failed to bundle mock ${key}:`, error);
+      }
+    }
+  }
+  if (log) {
+    console.log(`[mock-bundler] Bundled ${bundledCount} mocks, skipped ${skippedCount} non-serializable mocks`);
+  }
+  return bundle;
+}
+function writeMockBundle(bundle, outputPath) {
+  const outputDir = import_path4.default.dirname(outputPath);
+  if (!import_fs_extra3.default.existsSync(outputDir)) {
+    import_fs_extra3.default.ensureDirSync(outputDir);
+  }
+  import_fs_extra3.default.writeFileSync(
+    outputPath,
+    JSON.stringify(bundle, null, 2),
+    "utf-8"
+  );
+}
+
+// src/index.ts
+init_mockFileUtils();
+init_mockFileUtils();
+
+// src/client/interceptor.ts
+var import_meta = {};
+function getEnvVar(name) {
+  if (typeof import_meta !== "undefined" && import_meta.env) {
+    return import_meta.env[name];
+  }
+  if (typeof process !== "undefined" && process.env) {
+    return process.env[name];
+  }
+  return void 0;
+}
+var MockInterceptor = class {
+  options;
+  constructor(options) {
+    this.options = options;
+  }
+  /**
+   * Check if mock is enabled
+   */
+  isEnabled() {
+    if (window.__MOCK_ENABLED__ !== void 0) {
+      return window.__MOCK_ENABLED__;
+    }
+    if (typeof this.options.enabled === "function") {
+      return this.options.enabled();
+    }
+    return this.options.enabled ?? false;
+  }
+  /**
+   * Find matching mock data for the request
+   * Supports both formats:
+   * - "GET /api/v1/asset/xxx" (HTTP method + URL)
+   * - "/api/v1/asset/xxx/get.js" (File path format from automock plugin)
+   */
+  findMock(url, method) {
+    const methodUpper = method.toUpperCase();
+    const methodLower = method.toLowerCase();
+    const httpMethodKey = `${methodUpper} ${url}`;
+    if (this.options.mockData[httpMethodKey]) {
+      return this.options.mockData[httpMethodKey];
+    }
+    const filePathKey = `${url}/${methodLower}.js`;
+    if (this.options.mockData[filePathKey]) {
+      return this.options.mockData[filePathKey];
+    }
+    return null;
+  }
+  /**
+   * Determine if request should be mocked
+   */
+  shouldMock(url, method) {
+    if (!this.isEnabled()) {
+      return false;
+    }
+    const mock = this.findMock(url, method);
+    return mock !== null && mock.enable;
+  }
+  /**
+   * Get mock data for request
+   */
+  getMock(url, method) {
+    if (!this.shouldMock(url, method)) {
+      return null;
+    }
+    return this.findMock(url, method);
+  }
+  /**
+   * Setup axios interceptor
+   */
+  setupAxios(axiosInstance) {
+    axiosInstance.interceptors.request.use(
+      async (config) => {
+        const url = config.url || "";
+        const method = config.method?.toUpperCase() || "GET";
+        const mock = this.getMock(url, method);
+        if (mock) {
+          this.options.onMockHit?.(url, method, mock);
+          config.adapter = async () => {
+            const { data, delay = 0, status = 200 } = mock;
+            if (delay > 0) {
+              await new Promise((resolve) => setTimeout(resolve, delay));
+            }
+            return {
+              data,
+              status,
+              statusText: "OK",
+              headers: {},
+              config
+            };
+          };
+        } else {
+          const reason = !this.isEnabled() ? "Mock disabled globally" : "No matching mock found or mock disabled";
+          this.options.onBypass?.(url, method, reason);
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+  }
+};
+function createMockInterceptor(options) {
+  return new MockInterceptor(options);
+}
+async function loadMockData() {
+  try {
+    const response = await fetch("/mock-data.json");
+    if (!response.ok) {
+      console.warn(
+        "[MockInterceptor] Failed to load mock-data.json:",
+        response.statusText
+      );
+      return {};
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.warn("[MockInterceptor] Failed to load mock-data.json:", error);
+    return {};
+  }
+}
+async function initMockInterceptor(axiosInstance) {
+  const mockData = await loadMockData();
+  if (!axiosInstance) {
+    throw new Error(
+      "[MockInterceptor] axiosInstance is required. Please provide an axios instance."
+    );
+  }
+  const isEnvEnabled = getEnvVar("VITE_USE_MOCK") === "true";
+  const interceptor = createMockInterceptor({
+    mockData,
+    enabled: isEnvEnabled,
+    onMockHit: (url, method) => {
+      console.log(`[MOCK HIT] ${method} ${url}`);
+    },
+    onBypass: (url, method, reason) => {
+      console.log(`[MOCK BYPASS] ${method} ${url} - ${reason}`);
+    }
+  });
+  interceptor.setupAxios(axiosInstance);
+}
+function setMockEnabled(enabled) {
+  window.__MOCK_ENABLED__ = enabled;
+}
+function isMockEnabled() {
+  return !!window.__MOCK_ENABLED__;
+}
+var httpInstanceRef;
+function registerHttpInstance(http2) {
+  httpInstanceRef = http2;
+}
+async function initMockInterceptorForPureHttp() {
+  if (!httpInstanceRef) {
+    throw new Error(
+      "[MockInterceptor] http instance not registered. Call registerHttpInstance(http) first."
+    );
+  }
+  const mockData = await loadMockData();
+  const isEnvEnabled = getEnvVar("VITE_USE_MOCK") === "true";
+  const interceptor = createMockInterceptor({
+    mockData,
+    enabled: isEnvEnabled,
+    onMockHit: (url, method) => {
+      console.log(`[MOCK HIT] ${method} ${url}`);
+    },
+    onBypass: (url, method, reason) => {
+      console.log(`[MOCK BYPASS] ${method} ${url} - ${reason}`);
+    }
+  });
+  interceptor.setupAxios(httpInstanceRef.constructor.axiosInstance);
+}
+
+// src/index.ts
+function automock2(options = {}) {
+  const {
+    bundleMockData = true,
+    bundleOutputPath = "public/mock-data.json",
+    ...pluginOptions
+  } = options;
+  const basePlugin = automock(pluginOptions);
+  let cachedBundle = null;
+  return {
+    ...basePlugin,
+    name: "vite-plugin-automock-with-bundle",
+    buildEnd: async () => {
+      if (bundleMockData && pluginOptions.productionMock !== false) {
+        try {
+          const mockDir = pluginOptions.mockDir || import_path5.default.join(process.cwd(), "mock");
+          if (!import_fs_extra4.default.existsSync(mockDir)) {
+            console.log("[automock] Mock directory not found, skipping bundle generation");
+            console.log("[automock] Using existing mock-data.json if present");
+            return;
+          }
+          const mockFileMap = buildMockIndex(mockDir);
+          if (mockFileMap.size === 0) {
+            console.log("[automock] No mock files found, skipping bundle generation");
+            return;
+          }
+          cachedBundle = await bundleMockFiles({ mockDir });
+          const outputPath = import_path5.default.join(process.cwd(), bundleOutputPath);
+          writeMockBundle(cachedBundle, outputPath);
+          console.log(`[automock] Mock bundle written to: ${outputPath}`);
+        } catch (error) {
+          console.error("[automock] Failed to bundle mock data:", error);
+        }
+      }
+    },
+    writeBundle: async () => {
+      const outputPath = import_path5.default.join(process.cwd(), bundleOutputPath);
+      if (!import_fs_extra4.default.existsSync(outputPath) && cachedBundle) {
+        console.log("[automock] Re-writing mock bundle in writeBundle...");
+        writeMockBundle(cachedBundle, outputPath);
+      }
+    },
+    closeBundle: async () => {
+      const outputPath = import_path5.default.join(process.cwd(), bundleOutputPath);
+      if (!import_fs_extra4.default.existsSync(outputPath) && cachedBundle) {
+        console.log("[automock] Re-writing mock bundle in closeBundle...");
+        writeMockBundle(cachedBundle, outputPath);
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  automock,
+  buildMockIndex,
+  bundleMockFiles,
+  createMockInterceptor,
+  initMockInterceptor,
+  initMockInterceptorForPureHttp,
+  isMockEnabled,
+  loadMockData,
+  parseMockModule,
+  registerHttpInstance,
+  saveMockData,
+  setMockEnabled,
+  writeMockBundle,
+  writeMockFile
+});
+//# sourceMappingURL=index.js.map