@szc-ft/mcp-szcd-client 0.19.1 → 0.20.0

package/lib/browser-engine.js

@@ -19,6 +19,7 @@ export class BrowserEngine {
         this.page = null;
         this.mode = null;        // 'connect' | 'launch'
         this.ownedBrowser = false; // launch 模式为 true，决定关闭时是否 kill
+        this._activeFrame = null;  // 当前活跃 iframe 上下文（微前端场景）
     }
 
     /**
@@ -160,6 +161,23 @@ export class BrowserEngine {
         }
     }
 
+    /**
+     * 安全执行 page/frame evaluate，捕获重定向导致的 context destroyed 错误
+     */
+    async safeEval(fn, ...args) {
+        const target = this._activeFrame || this.page;
+        try {
+            return await target.evaluate(fn, ...args);
+        } catch (err) {
+            if (err.message.includes("Not attached") || err.message.includes("Execution context")) {
+                // 重定向后 page/frame 可能已失效，重新获取
+                this._activeFrame = null;
+                return await this.page.evaluate(fn, ...args);
+            }
+            throw err;
+        }
+    }
+
     /**
      * 步骤分发
      */
@@ -173,6 +191,10 @@ export class BrowserEngine {
             case "waitFor":      return this._waitFor(step);
             case "evaluate":     return this._evaluate(step);
             case "checkElement": return this._checkElement(step);
+            case "findPage":     return this._findPage(step);
+            case "findFrame":    return this._findFrame(step);
+            case "loginWait":    return this._loginWait(step);
+            case "aiAssert":     return this._aiAssert(step, context);
             default:
                 throw new Error(`Unknown step type: ${step.type}`);
         }
@@ -180,11 +202,26 @@ export class BrowserEngine {
 
     async _navigate(step) {
         const start = Date.now();
-        await this.page.goto(step.url, {
-            waitUntil: step.waitUntil || "networkidle2",
-            timeout: step.timeout || 30000,
-        });
-        const title = await this.page.title();
+        // 微前端/SSO 重定向链场景：用 domcontentloaded 避免 page 对象被销毁
+        const waitUntil = step.waitUntil || (step.allowRedirects ? "domcontentloaded" : "networkidle2");
+        try {
+            await this.page.goto(step.url, {
+                waitUntil,
+                timeout: step.timeout || 30000,
+            });
+        } catch (err) {
+            // 重定向链可能触发超时，但页面可能已加载
+            if (err.name === "TimeoutError" && step.allowRedirects) {
+                // 忽略超时，页面可能正在重定向中
+            } else {
+                throw err;
+            }
+        }
+        // 重定向后等待页面稳定
+        if (step.allowRedirects) {
+            await new Promise((r) => setTimeout(r, step.redirectWait || 5000));
+        }
+        const title = await this.safeEval(() => document.title).catch(() => "");
         return {
             url: this.page.url(),
             title,
@@ -238,32 +275,58 @@ export class BrowserEngine {
     }
 
     async _click(step) {
-        const selector = step.selector;
-        await this.page.waitForSelector(selector, { timeout: step.timeout || 5000 });
+        const target = this._activeFrame || this.page;
+        const selector = this._resolveSelector(step.selector);
+
+        // iframe 内使用 evaluate 点击（坐标点击无法到达 iframe 内容）
+        if (this._activeFrame) {
+            const clicked = await this.safeEval((sel) => {
+                const el = document.querySelector(sel);
+                if (!el) return { found: false };
+                el.click();
+                return { found: true, tagName: el.tagName };
+            }, selector);
+            if (!clicked.found) {
+                // 回退：模糊匹配
+                const fuzzyResult = await this.safeEval((sel) => {
+                    const base = sel.replace(/\[class\*="([^"]+)"\]/, "$1").replace(/[.#]/, "");
+                    const el = [...document.querySelectorAll("*")].find(e =>
+                        (e.className || "").includes(base)
+                    );
+                    if (el) { el.click(); return { found: true, tagName: el.tagName, matchedClass: el.className } ; }
+                    return { found: false };
+                }, selector);
+                if (!fuzzyResult.found) throw new Error(`Element not found in frame: ${selector}`);
+                return { clicked: true, selector, ...fuzzyResult, fuzzyMatch: true };
+            }
+            return { clicked: true, selector, ...clicked };
+        }
 
+        // 主页面：标准 puppeteer 点击
+        await target.waitForSelector(selector, { timeout: step.timeout || 5000 }).catch(() => {});
         if (step.waitForNavigation) {
             await Promise.all([
                 this.page.waitForNavigation({ timeout: 10000 }),
-                this.page.click(selector),
+                target.click(selector),
             ]);
         } else {
-            await this.page.click(selector);
+            await target.click(selector);
         }
-
-        const tagName = await this.page.$eval(selector, (el) => el.tagName).catch(() => "unknown");
+        const tagName = await target.$eval(selector, (el) => el.tagName).catch(() => "unknown");
         return { clicked: true, selector, tagName };
     }
 
     async _type(step) {
-        const selector = step.selector;
-        await this.page.waitForSelector(selector, { timeout: step.timeout || 5000 });
+        const target = this._activeFrame || this.page;
+        const selector = this._resolveSelector(step.selector);
+        await target.waitForSelector(selector, { timeout: step.timeout || 5000 });
 
         if (step.clear) {
-            await this.page.click(selector, { clickCount: 3 });
+            await target.click(selector, { clickCount: 3 });
         }
 
-        await this.page.type(selector, step.text);
-        const value = await this.page.$eval(selector, (el) => el.value).catch(() => "");
+        await target.type(selector, step.text);
+        const value = await target.$eval(selector, (el) => el.value).catch(() => "");
         return { typed: true, selector, value };
     }
 
@@ -287,15 +350,187 @@ export class BrowserEngine {
     }
 
     async _evaluate(step) {
-        const result = await this.page.evaluate(step.expression);
+        const result = await this.safeEval(step.expression);
         return { result };
     }
 
+    /**
+     * 查找微前端 iframe（wujie/qiankun/single-spa 等）
+     */
+    async _findFrame(step) {
+        const frames = this.page.frames();
+        let matched = null;
+        let matchReason = "";
+
+        if (step.urlIncludes) {
+            matched = frames.find((f) => f.url().includes(step.urlIncludes));
+            if (matched) matchReason = `url contains "${step.urlIncludes}"`;
+        } else if (step.urlRegex) {
+            const re = new RegExp(step.urlRegex);
+            matched = frames.find((f) => re.test(f.url()));
+            if (matched) matchReason = `url matches /${step.urlRegex}/`;
+        } else if (step.titleIncludes) {
+            // 按页面标题查找 iframe
+            for (const f of frames) {
+                try {
+                    const title = await f.evaluate(() => document.title).catch(() => "");
+                    if (title && title.includes(step.titleIncludes)) {
+                        matched = f;
+                        matchReason = `title contains "${step.titleIncludes}"`;
+                        break;
+                    }
+                } catch { /* context destroyed, skip */ }
+            }
+        } else if (step.contentIncludes) {
+            // 按页面内容查找 iframe（查找包含指定文本的 iframe）
+            for (const f of frames) {
+                try {
+                    const has = await f.evaluate((text) =>
+                        document.body?.innerText?.includes(text) || false,
+                        step.contentIncludes
+                    ).catch(() => false);
+                    if (has) {
+                        matched = f;
+                        matchReason = `body contains "${step.contentIncludes}"`;
+                        break;
+                    }
+                } catch { /* context destroyed, skip */ }
+            }
+        } else if (step.frameIndex !== undefined) {
+            matched = frames[step.frameIndex];
+            if (matched) matchReason = `frameIndex ${step.frameIndex}`;
+        }
+
+        if (!matched) {
+            // 收集各 frame 的标题以便调试
+            const frameInfos = [];
+            for (const f of frames) {
+                try {
+                    const title = await f.evaluate(() => document.title).catch(() => "");
+                    frameInfos.push({ url: f.url(), title: title || "(empty)" });
+                } catch {
+                    frameInfos.push({ url: f.url(), title: "(error)" });
+                }
+            }
+            return {
+                found: false,
+                totalFrames: frames.length,
+                frames: frameInfos,
+                error: "No matching frame found",
+            };
+        }
+
+        this._activeFrame = matched;
+        return {
+            found: true,
+            frameUrl: matched.url(),
+            matchedBy: matchReason,
+            totalFrames: frames.length,
+        };
+    }
+
+    /**
+     * 查找已打开的标签页（connect 模式，端口可变场景）
+     */
+    async _findPage(step) {
+        const pages = await this.browser.pages();
+        let matched = null;
+        let matchReason = "";
+
+        if (step.urlIncludes) {
+            matched = pages.find((p) => p.url().includes(step.urlIncludes));
+            if (matched) matchReason = `url contains "${step.urlIncludes}"`;
+        } else if (step.urlRegex) {
+            const re = new RegExp(step.urlRegex);
+            matched = pages.find((p) => re.test(p.url()));
+            if (matched) matchReason = `url matches /${step.urlRegex}/`;
+        } else if (step.titleIncludes) {
+            for (const p of pages) {
+                try {
+                    const title = await p.title();
+                    if (title && title.includes(step.titleIncludes)) {
+                        matched = p;
+                        matchReason = `title contains "${step.titleIncludes}"`;
+                        break;
+                    }
+                } catch { /* page may be closed */ }
+            }
+        }
+
+        if (!matched) {
+            const pageInfos = await Promise.all(
+                pages.map(async (p) => {
+                    try {
+                        return { url: p.url(), title: (await p.title()) || "(empty)" };
+                    } catch {
+                        return { url: p.url(), title: "(error)" };
+                    }
+                })
+            );
+            return {
+                found: false,
+                totalPages: pages.length,
+                pages: pageInfos,
+                error: "No matching page/tab found",
+            };
+        }
+
+        this.page = matched;
+        this._activeFrame = null; // 重置 frame 上下文
+        if (step.viewport) {
+            await this.page.setViewport(step.viewport);
+        }
+        return {
+            found: true,
+            url: matched.url(),
+            title: await matched.title().catch(() => ""),
+            matchedBy: matchReason,
+            totalPages: pages.length,
+        };
+    }
+
+    /**
+     * 等待登录完成（SSO 重定向场景）
+     * 轮询检测登录页是否消失
+     */
+    async _loginWait(step) {
+        const timeout = step.timeout || 120000;
+        const interval = step.interval || 3000;
+        const loginSelector = step.loginSelector || 'input[type="password"]';
+        const startTime = Date.now();
+
+        // 检测当前是否在登录页
+        const isLoginPage = async () => {
+            return this.safeEval((sel) => !!document.querySelector(sel), loginSelector).catch(() => false);
+        };
+
+        let loggedIn = !(await isLoginPage());
+        while (!loggedIn && Date.now() - startTime < timeout) {
+            await new Promise((r) => setTimeout(r, interval));
+            loggedIn = !(await isLoginPage());
+        }
+
+        const elapsed = Date.now() - startTime;
+        if (!loggedIn) {
+            return { loggedIn: false, elapsed, error: "Login timeout" };
+        }
+
+        // 登录后等待页面稳定
+        await new Promise((r) => setTimeout(r, step.postLoginWait || 5000));
+        return {
+            loggedIn: true,
+            elapsed,
+            currentUrl: this.page.url(),
+        };
+    }
+
     async _checkElement(step) {
-        const selector = step.selector;
+        const selector = this._resolveSelector(step.selector);
         const expect = step.expect || {};
 
-        const info = await this.page.evaluate((sel) => {
+        // 在 frame 内使用 safeEval，主页面也使用 safeEval 防止 context destroyed
+        const info = await this.safeEval((sel) => {
+            // 支持 CSS Modules 模糊匹配：[class*=xxx]
             const els = document.querySelectorAll(sel);
             return {
                 count: els.length,
@@ -339,6 +574,56 @@ export class BrowserEngine {
         };
     }
 
+    /**
+     * 解析选择器：自动处理 CSS Modules 哈希类名
+     * 如果 selector 以 ~ 开头，转换为 [class*=xxx] 模糊匹配
+     */
+    /**
+     * AI 语义断言：截图并标记需要视觉审查
+     * 执行器只负责截图，判断由 Agent 或 MCP 服务端 VLM 完成
+     */
+    async _aiAssert(step, context) {
+        const fs = await import("node:fs");
+        const path = await import("node:path");
+        const outputDir = context.outputDir || "/tmp";
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+
+        const filename = step.filename || `ai-assert-${Date.now()}.png`;
+        const filepath = path.join(outputDir, filename);
+
+        await this.page.screenshot({
+            path: filepath,
+            fullPage: step.fullPage !== false,
+        });
+
+        return {
+            screenshotPath: filepath,
+            assertion: step.assertion,
+            needsVisualReview: true,
+            reviewHint: "请通过以下方式验证此截图：\n" +
+                "1. 如果你能读取图片 → 直接查看截图文件判断是否满足断言\n" +
+                "2. 如果 MCP 服务器可用 → 上传截图后调用 assert_page_screenshot 工具\n" +
+                "3. 降级方案 → 使用 checkElement 步骤做 DOM 级替代验证",
+        };
+    }
+
+    _resolveSelector(selector) {
+        if (!selector) return selector;
+        // ~.editKnowledge → [class*="editKnowledge"]
+        if (selector.startsWith("~.")) {
+            const base = selector.slice(2);
+            return `[class*="${base}"]`;
+        }
+        // ~#editKnowledge → [id*="editKnowledge"]
+        if (selector.startsWith("~#")) {
+            const base = selector.slice(2);
+            return `[id*="${base}"]`;
+        }
+        return selector;
+    }
+
     /**
      * 关闭浏览器
      * connect 模式: disconnect（不关闭用户浏览器）
@@ -361,44 +646,26 @@ export class BrowserEngine {
 }
 
 /**
- * 动态加载 puppeteer-core，缺失时自动安装
+ * 动态加载 puppeteer-core，从共享缓存目录加载，缺失时自动安装
  */
 async function loadPuppeteer() {
-    // 首次尝试直接加载
+    const { ensureSharedDeps, loadFromShared } = await import("./shared-deps.js");
+
+    // 1. 尝试从项目本地 node_modules 加载（开发环境或已手动安装）
     try {
         const mod = await import("puppeteer-core");
         return mod.default || mod;
     } catch {
-        // 未安装，尝试自动安装
+        // 本地未安装
     }
 
-    process.stderr.write("[browser-engine] puppeteer-core 未安装，正在自动安装...\n");
-    const { execSync } = await import("node:child_process");
-
-    const mirrorFlag = "--sharp_binary_host=https://npmmirror.com/mirrors/sharp";
-    const packages = "puppeteer-core pixelmatch pngjs sharp";
-
-    try {
-        execSync(`npm install --no-save ${mirrorFlag} ${packages}`, {
-            stdio: "inherit",
-            timeout: 120000,
-        });
-    } catch (installErr) {
-        const error = new Error(
-            `浏览器测试依赖安装失败。请手动执行：\n` +
-            `  npm install puppeteer-core pixelmatch pngjs sharp --sharp_binary_host=https://npmmirror.com/mirrors/sharp\n` +
-            `原始错误：${installErr.message}`
-        );
-        error.code = "DEPENDENCY_INSTALL_FAILED";
-        throw error;
-    }
+    // 2. 确保共享缓存已安装，然后从共享目录加载
+    await ensureSharedDeps();
 
-    // 安装成功，重新加载
     try {
-        const mod = await import("puppeteer-core");
-        return mod.default || mod;
+        return loadFromShared("puppeteer-core");
     } catch (err) {
-        const error = new Error(`puppeteer-core 安装后仍无法加载：${err.message}`);
+        const error = new Error(`puppeteer-core 加载失败：${err.message}`);
         error.code = "DEPENDENCY_MISSING";
         throw error;
     }

package/lib/shared-deps.js

@@ -0,0 +1,97 @@
+/**
+ * 共享依赖加载器
+ *
+ * 浏览器自动化依赖（puppeteer-core, pixelmatch, pngjs, sharp）
+ * 安装到 ~/.szcd-mcp/deps/node_modules/，所有项目共享复用。
+ * 首次使用时自动安装，后续直接加载。
+ */
+
+import { createRequire } from "node:module";
+import { homedir } from "node:os";
+import path from "node:path";
+import fs from "node:fs";
+
+/** 共享缓存目录 */
+const SHARED_DEPS_DIR = path.join(homedir(), ".szcd-mcp", "deps");
+
+/** 需要共享安装的包列表 */
+const PACKAGES = ["puppeteer-core", "pixelmatch", "pngjs", "sharp"];
+
+/** 标记文件，存在表示依赖已安装 */
+const INSTALLED_MARKER = path.join(SHARED_DEPS_DIR, ".installed");
+
+/**
+ * 从共享缓存目录加载模块
+ * @param {string} moduleName - 模块名
+ * @returns {*} 模块导出
+ */
+export function loadFromShared(moduleName) {
+    const require_ = createRequire(path.join(SHARED_DEPS_DIR, "node_modules", "_"));
+    return require_(moduleName);
+}
+
+/**
+ * 确保共享依赖已安装，未安装则自动安装
+ * @returns {Promise<void>}
+ */
+export async function ensureSharedDeps() {
+    // 检查标记文件
+    if (fs.existsSync(INSTALLED_MARKER)) {
+        // 快速验证：puppeteer-core 目录是否存在
+        const pcoreDir = path.join(SHARED_DEPS_DIR, "node_modules", "puppeteer-core");
+        if (fs.existsSync(pcoreDir)) {
+            return; // 已安装
+        }
+    }
+
+    process.stderr.write("[shared-deps] 首次使用浏览器测试功能，正在安装共享依赖...\n");
+    process.stderr.write(`[shared-deps] 安装目录: ${SHARED_DEPS_DIR}\n`);
+
+    // 确保目录存在
+    fs.mkdirSync(SHARED_DEPS_DIR, { recursive: true });
+
+    // 初始化 package.json（如果不存在）
+    const pkgPath = path.join(SHARED_DEPS_DIR, "package.json");
+    if (!fs.existsSync(pkgPath)) {
+        fs.writeFileSync(pkgPath, JSON.stringify({
+            name: "szcd-mcp-shared-deps",
+            version: "1.0.0",
+            private: true,
+        }, null, 2));
+    }
+
+    // 安装依赖
+    const { execSync } = await import("node:child_process");
+    const pkgList = PACKAGES.join(" ");
+    const mirrorFlag = "--sharp_binary_host=https://npmmirror.com/mirrors/sharp";
+    const registryFlag = "--registry=https://npmmirror.com";
+
+    try {
+        execSync(`npm install ${registryFlag} ${mirrorFlag} ${pkgList}`, {
+            cwd: SHARED_DEPS_DIR,
+            stdio: "inherit",
+            timeout: 180000,
+        });
+    } catch (err) {
+        throw new Error(
+            `浏览器测试依赖安装失败。请手动执行：\n` +
+            `  cd ${SHARED_DEPS_DIR} && npm install ${pkgList}\n` +
+            `原始错误：${err.message}`
+        );
+    }
+
+    // 写入标记文件
+    fs.writeFileSync(INSTALLED_MARKER, new Date().toISOString());
+    process.stderr.write("[shared-deps] 共享依赖安装完成！后续所有项目将复用此安装。\n");
+}
+
+/**
+ * 检查共享依赖是否已安装
+ * @returns {boolean}
+ */
+export function isSharedDepsInstalled() {
+    return fs.existsSync(INSTALLED_MARKER) &&
+        fs.existsSync(path.join(SHARED_DEPS_DIR, "node_modules", "puppeteer-core"));
+}
+
+export { SHARED_DEPS_DIR, PACKAGES };

package/lib/visual-compare.js

@@ -7,7 +7,7 @@
  * - 三色 diff 图输出（红=真实差异，黄=抗锯齿，蓝=轻微色差）
  * - 自动 resize 设计稿到截图尺寸
  *
- * 依赖（optionalDependencies）：
+ * 依赖从共享缓存加载（~/.szcd-mcp/deps/）：
  * - sharp: 图片处理和 resize
  * - pixelmatch: 像素对比
  * - pngjs: PNG 编解码
@@ -15,6 +15,7 @@
 
 import fs from "node:fs";
 import path from "node:path";
+import { ensureSharedDeps, loadFromShared } from "./shared-deps.js";
 
 /**
  * 全局视觉对比
@@ -26,9 +27,11 @@ import path from "node:path";
  * @returns {Promise<object>} 对比结果
  */
 export async function compareDesign(screenshotPath, designImagePath, options = {}) {
-    const sharp = (await import("sharp")).default;
-    const pixelmatch = (await import("pixelmatch")).default;
-    const { PNG } = await import("pngjs");
+    // 确保共享依赖已安装，然后加载
+    await ensureSharedDeps();
+    const sharp = loadFromShared("sharp");
+    const pixelmatch = loadFromShared("pixelmatch");
+    const { PNG } = loadFromShared("pngjs");
 
     // 1. 读取图片元数据
     const screenshotMeta = await sharp(screenshotPath).metadata();

package/local-browser-executor.js

@@ -12,6 +12,7 @@
  *   --output     结果输出文件路径（默认 stdout）
  *   --cdp-url    Chrome DevTools Protocol URL（默认自动检测 localhost:9222）
  *   --page-url   连接已有 Chrome 时的目标页面 URL
+ *   --base-url   基础 URL，替换计划中的 {{baseUrl}} 占位符
  *
  * 退出码：
  *   0 - 全部步骤执行成功
@@ -50,6 +51,9 @@ function parseArgs() {
             case "--page-url":
                 parsed.pageUrl = args[++i];
                 break;
+            case "--base-url":
+                parsed.baseUrl = args[++i];
+                break;
             case "--help":
             case "-h":
                 printHelp();
@@ -73,19 +77,27 @@ function printHelp() {
   --output <path>     结果输出文件路径（默认 stdout）
   --cdp-url <url>     Chrome DevTools Protocol URL（默认 http://localhost:9222）
   --page-url <url>    目标页面 URL（connect 模式时匹配标签页）
+  --base-url <url>    基础 URL，替换计划中的 {{baseUrl}} 占位符
   -h, --help          显示帮助
 `);
 }
 
 function loadPlan(args) {
+    let raw;
     if (args.planJson) {
-        return JSON.parse(args.planJson);
+        raw = args.planJson;
+    } else if (args.planFile) {
+        raw = fs.readFileSync(args.planFile, "utf8");
+    } else {
+        throw new Error("必须提供 --plan 或 --plan-file 参数");
     }
-    if (args.planFile) {
-        const content = fs.readFileSync(args.planFile, "utf8");
-        return JSON.parse(content);
+
+    // 模板变量替换：{{baseUrl}} → --base-url 参数值
+    if (args.baseUrl) {
+        raw = raw.replace(/\{\{baseUrl\}\}/g, args.baseUrl);
     }
-    throw new Error("必须提供 --plan 或 --plan-file 参数");
+
+    return JSON.parse(raw);
 }
 
 // ==================== 执行引擎 ====================

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@szc-ft/mcp-szcd-client",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "MCP client for szcd component library - auto-configures AI coding tools with MCP server, skills, agents and commands",
     "keywords": [
         "mcp",
@@ -57,12 +57,6 @@
     "dependencies": {
         "@modelcontextprotocol/sdk": "^1.29.0"
     },
-    "optionalDependencies": {
-        "puppeteer-core": "^22.15.0",
-        "pixelmatch": "^5.3.0",
-        "pngjs": "^7.0.0",
-        "sharp": "^0.33.5"
-    },
     "repository": {
         "type": "git",
         "url": "git+https://github.com/szc-ft/mcp-szcd.git"

package/qwen-extension/agents/szcd-component-expert.md

@@ -135,6 +135,14 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - API 路径从代码中的接口调用读取
 - checkElement 的 expect 从代码逻辑推断（columns 数量、数据行数等）
 - 有设计稿时添加 compare 步骤，无设计稿时跳过
+- 需要语义级验证时添加 `aiAssert` 步骤（如布局结构、内容正确性、功能完整性）
+- `aiAssert` 截图后：如果你能读图则直接判断；否则上传截图调用 `assert_page_screenshot` 工具；都不可用则降级为 `checkElement`
+
+**微前端场景特别注意**：
+- 端口可变，**不要硬编码 URL**。用 `findPage` 按路径/标题发现标签页，或用 `{{baseUrl}}` 模板变量 + `--base-url` 运行时传入
+- 子应用在 iframe 内，用 `findFrame` 定位（优先 `contentIncludes` 按内容发现），后续步骤自动在 iframe 内执行
+- CSS Modules 哈希类名用 `~.className` 语法模糊匹配
+- 详见 `local-browser-test` skill 的「微前端测试指南」章节
 
 ### 步骤7：收集用户反馈（必做，质量闭环）