@cniot/mdd-editor 0.3.3 → 0.3.5

package/src/ai/LocalAIDrawer.jsx

@@ -8,6 +8,7 @@ import {
   openPageWorkspace,
   pullPage,
   pushPage,
+  rollbackPage,
   shouldUseBridgeRelay,
 } from './bridgeClient';
 import { buildPageIR, getPageCode } from './pageIR';
@@ -16,6 +17,7 @@ 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 trimEndSlash = (value = '') => value.replace(/\/+$/, '');
 
 const parseSchema = (value) => {
   if (!value) return null;
@@ -100,11 +102,84 @@ const getChangeTypeText = (type) => {
   }
 };
 
+const TOKEN_PATTERN =
+  /(\/\/.*|\/\*.*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\b(?:async|await|break|case|catch|class|const|default|else|export|false|finally|for|from|function|if|import|let|new|null|return|switch|throw|true|try|undefined|var|while)\b|\b\d+(?:\.\d+)?\b|[#.][a-zA-Z_-][\w-]*|@[a-zA-Z-]+|[{}()[\],;:])/g;
+
+const getTokenClassName = (token, language) => {
+  if (/^\/\//.test(token) || /^\/\*/.test(token)) return 'tok-comment';
+  if (/^["'`]/.test(token)) return language === 'json' && token.endsWith('"') ? 'tok-string' : 'tok-string';
+  if (/^\d/.test(token)) return 'tok-number';
+  if (/^(#|\.|@)/.test(token)) return 'tok-selector';
+  if (/^[{}()[\],;:]$/.test(token)) return 'tok-punc';
+  return 'tok-keyword';
+};
+
+const renderHighlightedCode = (line = '', language = 'text') => {
+  if (!line) return <span className="tok-empty">&nbsp;</span>;
+  const nodes = [];
+  let lastIndex = 0;
+  let match = TOKEN_PATTERN.exec(line);
+  while (match) {
+    if (match.index > lastIndex) {
+      nodes.push(line.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    nodes.push(
+      <span className={getTokenClassName(token, language)} key={`${match.index}-${token}`}>
+        {token}
+      </span>,
+    );
+    lastIndex = match.index + token.length;
+    match = TOKEN_PATTERN.exec(line);
+  }
+  if (lastIndex < line.length) {
+    nodes.push(line.slice(lastIndex));
+  }
+  TOKEN_PATTERN.lastIndex = 0;
+  return nodes;
+};
+
+function SideBySideDiff({ files = [] }) {
+  if (!files.length) return null;
+  return (
+    <div className="mdd-local-ai-side-diff">
+      {files.map((file) => (
+        <div className="mdd-local-ai-side-file" key={file.fileName}>
+          <div className="mdd-local-ai-side-file-head">
+            <span>{file.fileName}</span>
+            <span>
+              -{file.stats?.removed || 0} / +{file.stats?.added || 0}
+            </span>
+          </div>
+          <div className="mdd-local-ai-side-grid">
+            <div className="mdd-local-ai-side-col-head">上次发送</div>
+            <div className="mdd-local-ai-side-col-head">本地修改</div>
+            {(file.rows || []).map((row, index) => (
+              <React.Fragment key={`${file.fileName}-${index}`}>
+                <div className={`mdd-local-ai-side-cell is-before is-${row.type}`}>
+                  <span className="mdd-local-ai-side-line">{row.before?.lineNumber || ''}</span>
+                  <code>{renderHighlightedCode(row.before?.content || '', file.language)}</code>
+                </div>
+                <div className={`mdd-local-ai-side-cell is-after is-${row.type}`}>
+                  <span className="mdd-local-ai-side-line">{row.after?.lineNumber || ''}</span>
+                  <code>{renderHighlightedCode(row.after?.content || '', file.language)}</code>
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 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;
+  const diffFiles = diffSummary.diffFiles || [];
+  const hasDetail =
+    schemaChanges.length > 0 || diffSummary.script?.changed || diffSummary.style?.changed || diffText || diffFiles.length;
   if (!hasDetail) return null;
 
   return (
@@ -149,7 +224,8 @@ function PullDiffDetail({ diffSummary }) {
           </div>
         ) : null}
 
-        {diffText ? <pre className="mdd-local-ai-diff-pre">{diffText}</pre> : null}
+        {diffFiles.length ? <SideBySideDiff files={diffFiles} /> : null}
+        {!diffFiles.length && diffText ? <pre className="mdd-local-ai-diff-pre">{diffText}</pre> : null}
       </div>
     </details>
   );
@@ -301,6 +377,38 @@ export default function LocalAIDrawer(props) {
     }
   };
 
+  const handleRollback = async () => {
+    const confirmed = window.confirm(
+      '确认回滚到上次“发送到本地 AI”时的线上基线吗？回滚会先更新当前编辑器内容，确认预览后还需要使用原保存按钮提交到线上。',
+    );
+    if (!confirmed) return;
+
+    setLoadingAction('rollback');
+    setPullError(null);
+    try {
+      const res = await rollbackPage(baseURL, pageCode);
+      const nextSchema = parseSchema(res?.schemaInfo);
+      const nextScriptInfo = {
+        script: res?.scriptInfo || '',
+        style: res?.style || '',
+      };
+      applySchemaToEditor(schema, nextSchema);
+      schema.emit(EVENT_KEY.SCRIPT_UPDATE, nextScriptInfo);
+      onApply?.({
+        schemaJson: nextSchema,
+        scriptInfo: nextScriptInfo,
+        raw: res,
+      });
+      setLastSummary(res?.summary || '已回滚到上次发送到本地 AI 时的基线');
+      setLastDiffSummary(null);
+      Message.success('已回滚上次 AI 修改，请预览后保存');
+    } catch (e) {
+      Message.error(e.message || '回滚上次更改失败');
+    } finally {
+      setLoadingAction('');
+    }
+  };
+
   const handleStatus = async () => {
     setLoadingAction('status');
     try {
@@ -329,6 +437,10 @@ export default function LocalAIDrawer(props) {
     }
   };
 
+  const handleOpenBridgeHome = React.useCallback(() => {
+    window.open(`${trimEndSlash(baseURL)}/`, '_blank', 'noopener,noreferrer');
+  }, [baseURL]);
+
   React.useEffect(() => {
     if (shouldUseBridgeRelay(baseURL)) {
       setStatus('点击按钮后通过本地 relay 连接');
@@ -339,53 +451,86 @@ export default function LocalAIDrawer(props) {
 
   return (
     <div className="mdd-local-ai">
-      <CnCard className="mdd-local-ai-card">
-        <div className="mdd-local-ai-row">
-          <span className="mdd-local-ai-label">Bridge</span>
-          <Input
-            size="small"
-            value={baseURL}
-            onChange={setBaseURL}
-            placeholder={DEFAULT_BRIDGE_URL}
-            style={{ width: 320 }}
-          />
+      <CnCard className="mdd-local-ai-card mdd-local-ai-hero">
+        <div className="mdd-local-ai-hero-head">
+          <div>
+            <div className="mdd-local-ai-heading">本地 AI 工作区</div>
+            <div className="mdd-local-ai-subtitle">把当前页面同步成本地文件，再交给 Cursor、Qoder、Codex CLI 修改。</div>
+          </div>
+          <span className={bridgeInfo?.version ? 'mdd-local-ai-status is-ready' : 'mdd-local-ai-status'}>
+            {bridgeInfo?.version ? `Bridge v${bridgeInfo.version}` : status}
+          </span>
+        </div>
+
+        <div className="mdd-local-ai-bridge-row">
+          <div className="mdd-local-ai-field">
+            <span className="mdd-local-ai-label">Bridge 地址</span>
+            <Input
+              size="small"
+              value={baseURL}
+              onChange={setBaseURL}
+              placeholder={DEFAULT_BRIDGE_URL}
+              className="mdd-local-ai-input"
+            />
+          </div>
           <CnButton size="small" loading={loadingAction === 'health'} onClick={checkHealth}>
             检测连接
           </CnButton>
+          <CnButton size="small" onClick={handleOpenBridgeHome}>
+            访问本地 AI 主页
+          </CnButton>
         </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 className="mdd-local-ai-meta-item">
+            <span>状态</span>
+            <strong>{status}</strong>
+          </div>
+          <div className="mdd-local-ai-meta-item">
+            <span>页面</span>
+            <strong>{pageCode}</strong>
+          </div>
+          <div className="mdd-local-ai-meta-item mdd-local-ai-meta-path">
+            <span>目录</span>
+            <strong>{workspacePath || expectedWorkspacePath}</strong>
+          </div>
         </div>
       </CnCard>
 
-      <div className="mdd-local-ai-actions">
-        <CnButton type="primary" loading={loadingAction === 'push'} onClick={handlePush}>
-          发送到本地 AI
-        </CnButton>
-        <CnButton loading={loadingAction === 'pull'} onClick={handlePull}>
-          同步本地修改
-        </CnButton>
-        <CnButton loading={loadingAction === 'status'} onClick={handleStatus}>
-          查看状态
-        </CnButton>
-        <CnButton loading={loadingAction === 'open'} onClick={handleOpen}>
-          打开目录
-        </CnButton>
+      <div className="mdd-local-ai-section">
+        <div className="mdd-local-ai-section-title">工作区操作</div>
+        <div className="mdd-local-ai-actions">
+          <CnButton type="primary" loading={loadingAction === 'push'} onClick={handlePush}>
+            发送到本地 AI
+          </CnButton>
+          <CnButton loading={loadingAction === 'pull'} onClick={handlePull}>
+            同步本地修改
+          </CnButton>
+          <CnButton loading={loadingAction === 'status'} onClick={handleStatus}>
+            查看状态
+          </CnButton>
+          <CnButton loading={loadingAction === 'open'} onClick={handleOpen}>
+            打开目录
+          </CnButton>
+          <CnButton loading={loadingAction === 'rollback'} onClick={handleRollback}>
+            回滚上次更改
+          </CnButton>
+        </div>
       </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 className="mdd-local-ai-section">
+        <div className="mdd-local-ai-section-title">辅助操作</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>
       </div>
 
       {lastSummary ? <div className="mdd-local-ai-summary">{lastSummary}</div> : null}

package/src/ai/bridgeClient.js

@@ -207,6 +207,12 @@ export function pullPage(baseURL, code) {
   });
 }
 
+export function rollbackPage(baseURL, code) {
+  return request(baseURL, `/pages/${encodeURIComponent(code)}/rollback`, {
+    method: 'POST',
+  });
+}
+
 export function getPageStatus(baseURL, code) {
   return request(baseURL, `/pages/${encodeURIComponent(code)}/status`, {
     method: 'GET',