@cniot/mdd-editor 0.3.0 → 0.3.3

package/src/ai/LocalAIDrawer.jsx

@@ -8,10 +8,15 @@ import {
   openPageWorkspace,
   pullPage,
   pushPage,
+  shouldUseBridgeRelay,
 } from './bridgeClient';
 import { buildPageIR, getPageCode } from './pageIR';
 import { EVENT_KEY } from '$src/common/const';
 
+const MIN_BRIDGE_VERSION = '0.1.4';
+const START_COMMAND = `npm i -g @cniot/mdd-ai-bridge
+mdd-ai-bridge`;
+
 const parseSchema = (value) => {
   if (!value) return null;
   if (typeof value === 'string') {
@@ -33,14 +38,134 @@ const applySchemaToEditor = (schema, schemaJson) => {
   schema.emit(EVENT_KEY.SCHEMA_UPDATE_FORCE, schemaJson);
 };
 
+const compareVersion = (a = '', b = '') => {
+  const left = String(a).split('.').map((item) => Number(item) || 0);
+  const right = String(b).split('.').map((item) => Number(item) || 0);
+  const max = Math.max(left.length, right.length);
+  for (let i = 0; i < max; i += 1) {
+    if ((left[i] || 0) > (right[i] || 0)) return 1;
+    if ((left[i] || 0) < (right[i] || 0)) return -1;
+  }
+  return 0;
+};
+
+const isBridgeVersionReady = (version) => Boolean(version) && compareVersion(version, MIN_BRIDGE_VERSION) >= 0;
+
+const copyText = async (text) => {
+  if (typeof navigator !== 'undefined' && navigator?.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', 'readonly');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+};
+
+const getJsonErrorDetail = (error) => {
+  const jsonError = error?.data?.jsonError;
+  if (jsonError) {
+    return {
+      title: `${jsonError.file || 'JSON'} 解析失败${
+        jsonError.line ? `：第 ${jsonError.line} 行${jsonError.column ? `，第 ${jsonError.column} 列` : ''}` : ''
+      }`,
+      message: jsonError.message || error.message || '',
+      snippet: jsonError.snippet || '',
+    };
+  }
+  return {
+    title: '同步失败',
+    message: error?.message || '同步本地 AI 修改失败',
+    snippet: '',
+  };
+};
+
+const getChangeTypeText = (type) => {
+  switch (type) {
+    case 'added':
+      return '新增';
+    case 'removed':
+      return '删除';
+    case 'type':
+      return '类型变化';
+    case 'changed':
+      return '修改';
+    default:
+      return type || '修改';
+  }
+};
+
+function PullDiffDetail({ diffSummary }) {
+  if (!diffSummary?.hasBaseline) return null;
+  const schemaChanges = diffSummary.schema?.changes || diffSummary.schema?.paths || [];
+  const diffText = diffSummary.diffText || '';
+  const hasDetail = schemaChanges.length > 0 || diffSummary.script?.changed || diffSummary.style?.changed || diffText;
+  if (!hasDetail) return null;
+
+  return (
+    <details className="mdd-local-ai-diff">
+      <summary>查看具体改动与 diff</summary>
+      <div className="mdd-local-ai-diff-content">
+        {schemaChanges.length > 0 ? (
+          <div className="mdd-local-ai-diff-section">
+            <div className="mdd-local-ai-diff-title">Schema 改动位置</div>
+            <ul className="mdd-local-ai-diff-list">
+              {schemaChanges.map((item, index) => {
+                const path = typeof item === 'string' ? item : item.path;
+                const type = typeof item === 'string' ? 'changed' : item.type;
+                return (
+                  <li key={`${path}-${index}`}>
+                    <code>{path}</code>
+                    <span>{getChangeTypeText(type)}</span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ) : null}
+
+        {diffSummary.script?.changed ? (
+          <div className="mdd-local-ai-diff-section">
+            <div className="mdd-local-ai-diff-title">Script 改动</div>
+            <div>{diffSummary.script.message}</div>
+            {diffSummary.script.addedFunctions?.length ? (
+              <div>新增：{diffSummary.script.addedFunctions.join('、')}</div>
+            ) : null}
+            {diffSummary.script.removedFunctions?.length ? (
+              <div>移除：{diffSummary.script.removedFunctions.join('、')}</div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {diffSummary.style?.changed ? (
+          <div className="mdd-local-ai-diff-section">
+            <div className="mdd-local-ai-diff-title">Style 改动</div>
+            <div>{diffSummary.style.message}</div>
+          </div>
+        ) : null}
+
+        {diffText ? <pre className="mdd-local-ai-diff-pre">{diffText}</pre> : null}
+      </div>
+    </details>
+  );
+}
+
 export default function LocalAIDrawer(props) {
   const { schema, scriptInfo, pageMeta = {}, bridgeConfig, onApply } = props;
   const config = normalizeBridgeConfig(bridgeConfig);
   const [baseURL, setBaseURL] = React.useState(config.baseURL || DEFAULT_BRIDGE_URL);
   const [status, setStatus] = React.useState('未连接');
   const [workspacePath, setWorkspacePath] = React.useState('');
+  const [bridgeInfo, setBridgeInfo] = React.useState(null);
   const [loadingAction, setLoadingAction] = React.useState('');
   const [lastSummary, setLastSummary] = React.useState('');
+  const [pullError, setPullError] = React.useState(null);
+  const [lastDiffSummary, setLastDiffSummary] = React.useState(null);
 
   const schemaJson = schema?.getAllJSON?.() || {};
   const pageCode = getPageCode(schemaJson, pageMeta);
@@ -68,13 +193,54 @@ export default function LocalAIDrawer(props) {
     };
   }, [pageCode, pageMeta, schema, scriptInfo]);
 
+  const expectedWorkspacePath = React.useMemo(() => {
+    if (workspacePath) return workspacePath;
+    const root = bridgeInfo?.workspaceRoot || '~/.mdd-ai-workspace';
+    return `${root.replace(/\/$/, '')}/pages/${pageCode}`;
+  }, [bridgeInfo, pageCode, workspacePath]);
+
+  const aiPrompt = React.useMemo(
+    () =>
+      `请帮我修改这个 MDD 页面：
+
+工作区：${expectedWorkspacePath}
+页面 Code：${pageCode}
+
+请先阅读同目录下的 AGENTS.md 和 PROMPT.md，再按需求修改：
+- mdd.schema.json：页面 schema
+- mdd.script.jsx：页面脚本
+- mdd.style.less：页面样式
+
+注意：
+1. 不要修改 page.ir.json / page.meta.json 作为最终结果。
+2. JSON 必须保持合法，尽量只改和需求相关的位置。
+3. MDD hook / engine API 不确定时，先读 context 目录里的 api-cheatsheet.md、engine-runtime.md、hooks-cookbook.md。
+
+我的需求是：`,
+    [expectedWorkspacePath, pageCode],
+  );
+
+  const handleCopy = React.useCallback(async (text, successText) => {
+    try {
+      await copyText(text);
+      Message.success(successText);
+    } catch (e) {
+      Message.error('复制失败，请手动选择复制');
+    }
+  }, []);
+
   const checkHealth = React.useCallback(async () => {
     setLoadingAction('health');
     try {
       const res = await health(baseURL);
-      setStatus(res?.ok ? '已连接' : '连接异常');
-      if (res?.workspaceRoot) {
-        setWorkspacePath(res.workspaceRoot);
+      setBridgeInfo(res || null);
+      if (res?.ok && isBridgeVersionReady(res.version)) {
+        setStatus(`已连接（Bridge v${res.version}）`);
+      } else if (res?.ok) {
+        setStatus(`Bridge 版本偏旧${res?.version ? `（v${res.version}）` : ''}`);
+        setLastSummary(`建议升级本地 bridge 到 ${MIN_BRIDGE_VERSION} 或更高版本：npm i -g @cniot/mdd-ai-bridge@latest`);
+      } else {
+        setStatus('连接异常');
       }
     } catch (e) {
       setStatus('未连接');
@@ -86,9 +252,15 @@ export default function LocalAIDrawer(props) {
 
   const handlePush = async () => {
     setLoadingAction('push');
+    setPullError(null);
+    setLastDiffSummary(null);
     try {
       const res = await pushPage(baseURL, pageCode, getPayload());
       setWorkspacePath(res?.dir || '');
+      setBridgeInfo((prev) => ({
+        ...(prev || {}),
+        workspaceRoot: res?.context?.workspaceRoot || prev?.workspaceRoot,
+      }));
       setStatus('已同步到本地');
       setLastSummary(`已写入本地工作区: ${res?.dir || pageCode}`);
       Message.success('已发送到本地 AI 工作区');
@@ -101,6 +273,7 @@ export default function LocalAIDrawer(props) {
 
   const handlePull = async () => {
     setLoadingAction('pull');
+    setPullError(null);
     try {
       const res = await pullPage(baseURL, pageCode);
       const nextSchema = parseSchema(res?.schemaInfo);
@@ -116,9 +289,13 @@ export default function LocalAIDrawer(props) {
         raw: res,
       });
       setLastSummary(res?.summary || '已从本地工作区同步修改');
+      setLastDiffSummary(res?.diffSummary || null);
       Message.success('已同步本地 AI 修改');
     } catch (e) {
-      Message.error(e.message || '同步本地 AI 修改失败');
+      const detail = getJsonErrorDetail(e);
+      setPullError(detail);
+      setLastDiffSummary(null);
+      Message.error(detail.title || '同步本地 AI 修改失败');
     } finally {
       setLoadingAction('');
     }
@@ -129,6 +306,7 @@ export default function LocalAIDrawer(props) {
     try {
       const res = await getPageStatus(baseURL, pageCode);
       setWorkspacePath(res?.dir || '');
+      setLastDiffSummary(null);
       setLastSummary(res?.exists ? `本地工作区已存在: ${res.dir}` : '本地还没有这个页面的工作区');
       Message.success(res?.exists ? '本地工作区已存在' : '本地工作区不存在');
     } catch (e) {
@@ -152,6 +330,10 @@ export default function LocalAIDrawer(props) {
   };
 
   React.useEffect(() => {
+    if (shouldUseBridgeRelay(baseURL)) {
+      setStatus('点击按钮后通过本地 relay 连接');
+      return;
+    }
     checkHealth();
   }, []);
 
@@ -173,6 +355,7 @@ export default function LocalAIDrawer(props) {
         </div>
         <div className="mdd-local-ai-meta">
           <div>状态：{status}</div>
+          {bridgeInfo?.version ? <div>Bridge 版本：{bridgeInfo.version}</div> : null}
           <div>页面：{pageCode}</div>
           {workspacePath ? <div>目录：{workspacePath}</div> : null}
         </div>
@@ -193,8 +376,30 @@ export default function LocalAIDrawer(props) {
         </CnButton>
       </div>
 
+      <div className="mdd-local-ai-copy-actions">
+        <CnButton size="small" onClick={() => handleCopy(START_COMMAND, '已复制启动命令')}>
+          复制启动命令
+        </CnButton>
+        <CnButton size="small" onClick={() => handleCopy(expectedWorkspacePath, '已复制工作区路径')}>
+          复制工作区路径
+        </CnButton>
+        <CnButton size="small" onClick={() => handleCopy(aiPrompt, '已复制 AI 提示词')}>
+          复制 AI 提示词
+        </CnButton>
+      </div>
+
       {lastSummary ? <div className="mdd-local-ai-summary">{lastSummary}</div> : null}
 
+      <PullDiffDetail diffSummary={lastDiffSummary} />
+
+      {pullError ? (
+        <div className="mdd-local-ai-error">
+          <div className="mdd-local-ai-error-title">{pullError.title}</div>
+          <div className="mdd-local-ai-error-message">{pullError.message}</div>
+          {pullError.snippet ? <pre className="mdd-local-ai-error-snippet">{pullError.snippet}</pre> : null}
+        </div>
+      ) : null}
+
       <CnCard className="mdd-local-ai-card">
         <div className="mdd-local-ai-title">使用方式</div>
         <div className="mdd-local-ai-tips">
@@ -203,6 +408,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,33 @@
 export const DEFAULT_BRIDGE_URL = 'http://127.0.0.1:17678';
 
 const trimEndSlash = (value = '') => value.replace(/\/+$/, '');
+const RELAY_CHANNEL = 'mdd-ai-bridge';
+const relayCacheMap = new Map();
+
+const isLoopbackURL = (value = '') => /^http:\/\/(127(?:\.\d{1,3}){3}|localhost)(?::\d+)?/i.test(value);
+
+export class BridgeRequestError extends Error {
+  constructor(message, options = {}) {
+    super(message);
+    this.name = 'BridgeRequestError';
+    this.status = options.status || 0;
+    this.data = options.data || null;
+  }
+}
+
+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: {
@@ -20,11 +45,130 @@ async function request(baseURL, path, options = {}) {
   }
 
   if (!res.ok) {
-    throw new Error(data?.message || `请求本地 AI Bridge 失败: ${res.status}`);
+    throw new BridgeRequestError(data?.message || `请求本地 AI Bridge 失败: ${res.status}`, {
+      status: res.status,
+      data,
+    });
   }
   return data;
 }
 
+function getRelayCache(baseURL) {
+  const relayOrigin = trimEndSlash(baseURL);
+  const relayURL = `${relayOrigin}/relay`;
+  const cached = relayCacheMap.get(relayOrigin);
+  if (cached?.window && !cached.window.closed) {
+    return cached;
+  }
+
+  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 窗口，请允许弹窗后重试');
+  }
+
+  const next = {
+    origin: relayOrigin,
+    window: relayWindow,
+    ready: false,
+  };
+  relayCacheMap.set(relayOrigin, next);
+  return next;
+}
+
+function requestViaRelay(baseURL, path, options = {}) {
+  const relayCache = getRelayCache(baseURL);
+  const requestId = createRequestId();
+
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let fallbackPosted = false;
+    let readyPosted = false;
+
+    const cleanup = () => {
+      window.removeEventListener('message', handleMessage);
+      clearTimeout(timeoutTimer);
+      clearTimeout(fallbackTimer);
+    };
+
+    const postRequest = (source = 'ready') => {
+      if (source === 'ready') {
+        if (readyPosted) return;
+        readyPosted = true;
+      } else {
+        if (fallbackPosted) return;
+        fallbackPosted = true;
+      }
+      if (!relayCache.window || relayCache.window.closed) {
+        finish(reject, new Error('本地 Bridge relay 窗口已关闭，请重试'));
+        return;
+      }
+      relayCache.window.postMessage(
+        {
+          channel: RELAY_CHANNEL,
+          type: 'request',
+          id: requestId,
+          path,
+          options,
+        },
+        relayCache.origin,
+      );
+    };
+
+    const finish = (callback, value) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      callback(value);
+    };
+
+    const handleMessage = (event) => {
+      if (event.origin !== relayCache.origin) return;
+      if (event.source !== relayCache.window) return;
+      const message = event.data || {};
+      if (message.channel !== RELAY_CHANNEL) return;
+
+      if (message.type === 'ready') {
+        relayCache.ready = true;
+        postRequest('ready');
+        return;
+      }
+
+      if (message.type !== 'response' || message.id !== requestId) return;
+      if (!message.ok) {
+        finish(
+          reject,
+          new BridgeRequestError(
+            message.data?.message || `请求本地 AI Bridge 失败: ${message.status || 0}`,
+            {
+              status: message.status || 0,
+              data: message.data,
+            },
+          ),
+        );
+        return;
+      }
+      finish(resolve, message.data);
+    };
+
+    const timeoutTimer = setTimeout(() => {
+      finish(reject, new Error('本地 AI Bridge relay 响应超时，请确认服务已启动'));
+    }, 30000);
+    const fallbackTimer = setTimeout(() => {
+      if (!relayCache.ready) postRequest('fallback');
+    }, 500);
+
+    window.addEventListener('message', handleMessage);
+    if (relayCache.ready) {
+      setTimeout(() => postRequest('ready'), 0);
+    }
+  });
+}
+
 export function normalizeBridgeConfig(config) {
   if (config === false) {
     return {