@cniot/mdd-editor 0.3.1 → 0.3.3

package/src/ai/LocalAIDrawer.jsx

@@ -13,6 +13,10 @@ import {
 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') {
@@ -34,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);
@@ -69,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('未连接');
@@ -87,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 工作区');
@@ -102,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);
@@ -117,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('');
     }
@@ -130,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) {
@@ -178,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>
@@ -198,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">

package/src/ai/bridgeClient.js

@@ -2,9 +2,19 @@ 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);
 }
@@ -35,14 +45,22 @@ 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 requestViaRelay(baseURL, path, options = {}) {
-  const relayURL = `${trimEndSlash(baseURL)}/relay`;
-  const requestId = createRequestId();
+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',
@@ -53,9 +71,23 @@ function requestViaRelay(baseURL, path, options = {}) {
     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 ready = false;
+    let fallbackPosted = false;
+    let readyPosted = false;
 
     const cleanup = () => {
       window.removeEventListener('message', handleMessage);
@@ -63,8 +95,19 @@ function requestViaRelay(baseURL, path, options = {}) {
       clearTimeout(fallbackTimer);
     };
 
-    const postRequest = () => {
-      relayWindow.postMessage(
+    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',
@@ -72,7 +115,7 @@ function requestViaRelay(baseURL, path, options = {}) {
           path,
           options,
         },
-        trimEndSlash(baseURL),
+        relayCache.origin,
       );
     };
 
@@ -84,14 +127,14 @@ function requestViaRelay(baseURL, path, options = {}) {
     };
 
     const handleMessage = (event) => {
-      if (event.origin !== trimEndSlash(baseURL)) return;
-      if (event.source !== relayWindow) return;
+      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' && !ready) {
-        ready = true;
-        postRequest();
+      if (message.type === 'ready') {
+        relayCache.ready = true;
+        postRequest('ready');
         return;
       }
 
@@ -99,7 +142,13 @@ function requestViaRelay(baseURL, path, options = {}) {
       if (!message.ok) {
         finish(
           reject,
-          new Error(message.data?.message || `请求本地 AI Bridge 失败: ${message.status || 0}`),
+          new BridgeRequestError(
+            message.data?.message || `请求本地 AI Bridge 失败: ${message.status || 0}`,
+            {
+              status: message.status || 0,
+              data: message.data,
+            },
+          ),
         );
         return;
       }
@@ -110,10 +159,13 @@ function requestViaRelay(baseURL, path, options = {}) {
       finish(reject, new Error('本地 AI Bridge relay 响应超时，请确认服务已启动'));
     }, 30000);
     const fallbackTimer = setTimeout(() => {
-      if (!ready) postRequest();
+      if (!relayCache.ready) postRequest('fallback');
     }, 500);
 
     window.addEventListener('message', handleMessage);
+    if (relayCache.ready) {
+      setTimeout(() => postRequest('ready'), 0);
+    }
   });
 }