@cniot/mdd-editor 0.3.0 → 0.3.1

package/build/index.es.js

@@ -30059,7 +30059,18 @@ function FtpBuild({ schema, moduleMap }) {
 }
 const DEFAULT_BRIDGE_URL = "http://127.0.0.1:17678";
 const trimEndSlash = (value = "") => value.replace(/\/+$/, "");
+const RELAY_CHANNEL = "mdd-ai-bridge";
+const isLoopbackURL = (value = "") => /^http:\/\/(127(?:\.\d{1,3}){3}|localhost)(?::\d+)?/i.test(value);
+function shouldUseBridgeRelay(baseURL) {
+  return typeof window !== "undefined" && !window.isSecureContext && isLoopbackURL(baseURL);
+}
+function createRequestId() {
+  return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
 async function request(baseURL, path, options = {}) {
+  if (shouldUseBridgeRelay(baseURL)) {
+    return requestViaRelay(baseURL, path, options);
+  }
   const res = await fetch(`${trimEndSlash(baseURL)}${path}`, {
     ...options,
     headers: {
@@ -30079,6 +30090,79 @@ async function request(baseURL, path, options = {}) {
   }
   return data;
 }
+function requestViaRelay(baseURL, path, options = {}) {
+  const relayURL = `${trimEndSlash(baseURL)}/relay`;
+  const requestId = createRequestId();
+  const relayWindow = window.open(
+    relayURL,
+    "mdd-ai-bridge-relay",
+    "width=520,height=320,menubar=no,toolbar=no,location=no,status=no"
+  );
+  if (!relayWindow) {
+    throw new Error("\u6D4F\u89C8\u5668\u62E6\u622A\u4E86\u672C\u5730 Bridge \u7A97\u53E3\uFF0C\u8BF7\u5141\u8BB8\u5F39\u7A97\u540E\u91CD\u8BD5");
+  }
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let ready = false;
+    const cleanup = () => {
+      window.removeEventListener("message", handleMessage);
+      clearTimeout(timeoutTimer);
+      clearTimeout(fallbackTimer);
+    };
+    const postRequest = () => {
+      relayWindow.postMessage(
+        {
+          channel: RELAY_CHANNEL,
+          type: "request",
+          id: requestId,
+          path,
+          options
+        },
+        trimEndSlash(baseURL)
+      );
+    };
+    const finish = (callback, value) => {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      callback(value);
+    };
+    const handleMessage = (event) => {
+      var _a2;
+      if (event.origin !== trimEndSlash(baseURL))
+        return;
+      if (event.source !== relayWindow)
+        return;
+      const message = event.data || {};
+      if (message.channel !== RELAY_CHANNEL)
+        return;
+      if (message.type === "ready" && !ready) {
+        ready = true;
+        postRequest();
+        return;
+      }
+      if (message.type !== "response" || message.id !== requestId)
+        return;
+      if (!message.ok) {
+        finish(
+          reject,
+          new Error(((_a2 = message.data) == null ? void 0 : _a2.message) || `\u8BF7\u6C42\u672C\u5730 AI Bridge \u5931\u8D25: ${message.status || 0}`)
+        );
+        return;
+      }
+      finish(resolve, message.data);
+    };
+    const timeoutTimer = setTimeout(() => {
+      finish(reject, new Error("\u672C\u5730 AI Bridge relay \u54CD\u5E94\u8D85\u65F6\uFF0C\u8BF7\u786E\u8BA4\u670D\u52A1\u5DF2\u542F\u52A8"));
+    }, 3e4);
+    const fallbackTimer = setTimeout(() => {
+      if (!ready)
+        postRequest();
+    }, 500);
+    window.addEventListener("message", handleMessage);
+  });
+}
 function normalizeBridgeConfig(config2) {
   if (config2 === false) {
     return {
@@ -30402,6 +30486,10 @@ function LocalAIDrawer(props) {
     }
   };
   React$1.useEffect(() => {
+    if (shouldUseBridgeRelay(baseURL)) {
+      setStatus("\u70B9\u51FB\u6309\u94AE\u540E\u901A\u8FC7\u672C\u5730 relay \u8FDE\u63A5");
+      return;
+    }
     checkHealth();
   }, []);
   return /* @__PURE__ */ React$1.createElement("div", {
@@ -30447,7 +30535,7 @@ function LocalAIDrawer(props) {
     className: "mdd-local-ai-title"
   }, "\u4F7F\u7528\u65B9\u5F0F"), /* @__PURE__ */ React$1.createElement("div", {
     className: "mdd-local-ai-tips"
-  }, /* @__PURE__ */ React$1.createElement("div", null, "1. \u9996\u6B21\u4F7F\u7528\u5148\u5168\u5C40\u5B89\u88C5\uFF1Anpm i -g @cniot/mdd-ai-bridge\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "2. \u5B89\u88C5\u540E\u5728\u4EFB\u610F\u76EE\u5F55\u8FD0\u884C\uFF1Amdd-ai-bridge\u3002\u4E5F\u53EF\u4EE5\u76F4\u63A5\u8FD0\u884C\uFF1Anpx @cniot/mdd-ai-bridge\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "3. \u70B9\u51FB\u201C\u53D1\u9001\u5230\u672C\u5730 AI\u201D\uFF0C\u5F53\u524D\u9875\u9762\u4F1A\u5199\u5165\u672C\u5730\u5DE5\u4F5C\u533A\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "4. \u7528 Cursor\u3001Qoder\u3001Codex CLI \u7B49\u5DE5\u5177\u6253\u5F00\u76EE\u5F55\u5E76\u4FEE\u6539\u6587\u4EF6\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "5. \u70B9\u51FB\u201C\u540C\u6B65\u672C\u5730\u4FEE\u6539\u201D\uFF0C\u786E\u8BA4\u9884\u89C8\u540E\u7EE7\u7EED\u4F7F\u7528\u539F\u4FDD\u5B58\u6309\u94AE\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "\u672C\u5730\u5DE5\u4F5C\u533A\u9ED8\u8BA4\u5728 ~/.mdd-ai-workspace\u3002"))));
+  }, /* @__PURE__ */ React$1.createElement("div", null, "1. \u9996\u6B21\u4F7F\u7528\u5148\u5168\u5C40\u5B89\u88C5\uFF1Anpm i -g @cniot/mdd-ai-bridge\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "2. \u5B89\u88C5\u540E\u5728\u4EFB\u610F\u76EE\u5F55\u8FD0\u884C\uFF1Amdd-ai-bridge\u3002\u4E5F\u53EF\u4EE5\u76F4\u63A5\u8FD0\u884C\uFF1Anpx @cniot/mdd-ai-bridge\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "3. \u70B9\u51FB\u201C\u53D1\u9001\u5230\u672C\u5730 AI\u201D\uFF0C\u5F53\u524D\u9875\u9762\u4F1A\u5199\u5165\u672C\u5730\u5DE5\u4F5C\u533A\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "4. \u7528 Cursor\u3001Qoder\u3001Codex CLI \u7B49\u5DE5\u5177\u6253\u5F00\u76EE\u5F55\u5E76\u4FEE\u6539\u6587\u4EF6\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "5. \u70B9\u51FB\u201C\u540C\u6B65\u672C\u5730\u4FEE\u6539\u201D\uFF0C\u786E\u8BA4\u9884\u89C8\u540E\u7EE7\u7EED\u4F7F\u7528\u539F\u4FDD\u5B58\u6309\u94AE\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "\u7EBF\u4E0A HTTP \u9875\u9762\u4F1A\u81EA\u52A8\u6253\u5F00\u672C\u5730 Bridge relay \u7A97\u53E3\uFF0C\u8BF7\u5141\u8BB8\u6D4F\u89C8\u5668\u5F39\u7A97\u3002"), /* @__PURE__ */ React$1.createElement("div", null, "\u672C\u5730\u5DE5\u4F5C\u533A\u9ED8\u8BA4\u5728 ~/.mdd-ai-workspace\u3002"))));
 }
 var index = "";
 const isDebug = ((_b = (_a = window == null ? void 0 : window.location) == null ? void 0 : _a.search) == null ? void 0 : _b.indexOf("debug")) >= 0 || ((_c = window.localStorage) == null ? void 0 : _c.__l4_location_search_debug__) === "true";
@@ -30986,7 +31074,7 @@ function getDefaultIndexStyle() {
   `;
 }
 const name = "@cniot/mdd-editor";
-const version = "0.3.0";
+const version = "0.3.1";
 const description = "\u6A21\u578B\u9A71\u52A8\u7F16\u8F91\u5668";
 const scripts = {
   build: "vite build"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cniot/mdd-editor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "模型驱动编辑器",
   "scripts": {
     "build": "vite build"

package/src/ai/LocalAIDrawer.jsx

@@ -8,6 +8,7 @@ import {
   openPageWorkspace,
   pullPage,
   pushPage,
+  shouldUseBridgeRelay,
 } from './bridgeClient';
 import { buildPageIR, getPageCode } from './pageIR';
 import { EVENT_KEY } from '$src/common/const';
@@ -152,6 +153,10 @@ export default function LocalAIDrawer(props) {
   };
 
   React.useEffect(() => {
+    if (shouldUseBridgeRelay(baseURL)) {
+      setStatus('点击按钮后通过本地 relay 连接');
+      return;
+    }
     checkHealth();
   }, []);
 
@@ -203,6 +208,7 @@ export default function LocalAIDrawer(props) {
           <div>3. 点击“发送到本地 AI”，当前页面会写入本地工作区。</div>
           <div>4. 用 Cursor、Qoder、Codex CLI 等工具打开目录并修改文件。</div>
           <div>5. 点击“同步本地修改”，确认预览后继续使用原保存按钮。</div>
+          <div>线上 HTTP 页面会自动打开本地 Bridge relay 窗口，请允许浏览器弹窗。</div>
           <div>本地工作区默认在 ~/.mdd-ai-workspace。</div>
         </div>
       </CnCard>

package/src/ai/bridgeClient.js

@@ -1,8 +1,23 @@
 export const DEFAULT_BRIDGE_URL = 'http://127.0.0.1:17678';
 
 const trimEndSlash = (value = '') => value.replace(/\/+$/, '');
+const RELAY_CHANNEL = 'mdd-ai-bridge';
+
+const isLoopbackURL = (value = '') => /^http:\/\/(127(?:\.\d{1,3}){3}|localhost)(?::\d+)?/i.test(value);
+
+export function shouldUseBridgeRelay(baseURL) {
+  return typeof window !== 'undefined' && !window.isSecureContext && isLoopbackURL(baseURL);
+}
+
+function createRequestId() {
+  return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
 
 async function request(baseURL, path, options = {}) {
+  if (shouldUseBridgeRelay(baseURL)) {
+    return requestViaRelay(baseURL, path, options);
+  }
+
   const res = await fetch(`${trimEndSlash(baseURL)}${path}`, {
     ...options,
     headers: {
@@ -25,6 +40,83 @@ async function request(baseURL, path, options = {}) {
   return data;
 }
 
+function requestViaRelay(baseURL, path, options = {}) {
+  const relayURL = `${trimEndSlash(baseURL)}/relay`;
+  const requestId = createRequestId();
+  const relayWindow = window.open(
+    relayURL,
+    'mdd-ai-bridge-relay',
+    'width=520,height=320,menubar=no,toolbar=no,location=no,status=no',
+  );
+
+  if (!relayWindow) {
+    throw new Error('浏览器拦截了本地 Bridge 窗口，请允许弹窗后重试');
+  }
+
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let ready = false;
+
+    const cleanup = () => {
+      window.removeEventListener('message', handleMessage);
+      clearTimeout(timeoutTimer);
+      clearTimeout(fallbackTimer);
+    };
+
+    const postRequest = () => {
+      relayWindow.postMessage(
+        {
+          channel: RELAY_CHANNEL,
+          type: 'request',
+          id: requestId,
+          path,
+          options,
+        },
+        trimEndSlash(baseURL),
+      );
+    };
+
+    const finish = (callback, value) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      callback(value);
+    };
+
+    const handleMessage = (event) => {
+      if (event.origin !== trimEndSlash(baseURL)) return;
+      if (event.source !== relayWindow) return;
+      const message = event.data || {};
+      if (message.channel !== RELAY_CHANNEL) return;
+
+      if (message.type === 'ready' && !ready) {
+        ready = true;
+        postRequest();
+        return;
+      }
+
+      if (message.type !== 'response' || message.id !== requestId) return;
+      if (!message.ok) {
+        finish(
+          reject,
+          new Error(message.data?.message || `请求本地 AI Bridge 失败: ${message.status || 0}`),
+        );
+        return;
+      }
+      finish(resolve, message.data);
+    };
+
+    const timeoutTimer = setTimeout(() => {
+      finish(reject, new Error('本地 AI Bridge relay 响应超时，请确认服务已启动'));
+    }, 30000);
+    const fallbackTimer = setTimeout(() => {
+      if (!ready) postRequest();
+    }, 500);
+
+    window.addEventListener('message', handleMessage);
+  });
+}
+
 export function normalizeBridgeConfig(config) {
   if (config === false) {
     return {