@cniot/mdd-editor 0.3.9 → 0.3.10

package/src/ai/LocalAIDrawer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CnButton, CnCard, CnMessage as Message, Input } from '@cainiaofe/cn-ui';
+import { CnButton, CnCard, CnMessage as Message, Dialog, Input } from '@cainiaofe/cn-ui';
 import {
   DEFAULT_BRIDGE_URL,
   getPageStatus,
@@ -17,7 +17,11 @@ 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 DEFAULT_MAIN_PROJECT_PATH = '/Users/caoruiqi/Documents/code/owtb/tms-mach36';
+const MAIN_PROJECT_PATH_STORAGE_KEY = 'mdd-local-ai-i18n-main-project-path';
 const trimEndSlash = (value = '') => value.replace(/\/+$/, '');
+const hasChineseText = (value = '') => /[\u4e00-\u9fff]/.test(String(value));
+const hasLetterText = (value = '') => /[a-zA-Z]/.test(String(value));
 
 const parseSchema = (value) => {
   if (!value) return null;
@@ -306,6 +310,184 @@ const collectLinkedPageReferences = ({ schemaJson, scriptInfo, rootCode, extraSo
   return mergeL4References([...schemaReferences, ...scriptReferences, ...extraReferences], rootCode);
 };
 
+const I18N_SCHEMA_FIELDS = new Set([
+  'label',
+  'tooltip',
+  'title',
+  'placeholder',
+  'children',
+  'text',
+  'submitText',
+  'resetText',
+  'cancelText',
+  'secondConfirmTitle',
+  'secondConfirmContent',
+  'emptyText',
+  'moreText',
+]);
+
+const createI18nSchemaCandidates = (value, path = '$', candidates = []) => {
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => createI18nSchemaCandidates(item, `${path}[${index}]`, candidates));
+    return candidates;
+  }
+  if (!value || typeof value !== 'object') return candidates;
+
+  Object.keys(value).forEach((key) => {
+    const nextPath = `${path}.${key}`;
+    const item = value[key];
+    if (typeof item === 'string' && I18N_SCHEMA_FIELDS.has(key) && (hasChineseText(item) || hasLetterText(item))) {
+      candidates.push({
+        path: nextPath,
+        field: key,
+        text: item,
+      });
+    }
+    createI18nSchemaCandidates(item, nextPath, candidates);
+  });
+  return candidates;
+};
+
+const createScriptI18nPreview = (script = '') => {
+  const seen = new Set();
+  const stringLikePattern = /(['"`])(?:(?!\1).)*[\u4e00-\u9fffA-Za-z](?:(?!\1).)*\1/;
+  return String(script)
+    .split('\n')
+    .map((line, index) => ({
+      lineNumber: index + 1,
+      line: line.trim(),
+    }))
+    .filter((item) => stringLikePattern.test(item.line))
+    .filter((item) => hasChineseText(item.line) || hasLetterText(item.line))
+    .filter((item) => {
+      const key = item.line;
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    })
+    .slice(0, 40);
+};
+
+const formatI18nCandidateList = (items = []) => {
+  if (!items.length) return '- 暂未在编辑器当前 schema 中预扫到 label/tooltip 等文案，请仍然完整检查 mdd.schema.json。';
+  return items
+    .slice(0, 80)
+    .map((item) => `- ${item.path} (${item.field}): ${item.text}`)
+    .join('\n');
+};
+
+const formatScriptPreviewList = (items = []) => {
+  if (!items.length) return '- 暂未在编辑器当前 script 中预扫到明显文案行，请仍然完整检查 mdd.script.jsx。';
+  return items.map((item) => `- L${item.lineNumber}: ${item.line}`).join('\n');
+};
+
+const formatLinkedI18nWorkspaceList = ({ linkedPages = {}, syncLinkedPages = false }) => {
+  if (!syncLinkedPages) {
+    return '本次未开启递归子页面，只处理当前 L4 页面。';
+  }
+  const pages = linkedPages?.pages || [];
+  const failed = linkedPages?.failed || [];
+  const syncedText = pages.length
+    ? pages
+        .map((page) => `- ${page.name || '未命名页面'} (${page.code})：${page.dir}`)
+        .join('\n')
+    : '- 未发现已同步的关联子页面。';
+  const failedText = failed.length
+    ? `\n\n递归扫描中有以下关联页面未能同步，请不要修改这些页面，最后报告给用户：\n${failed
+        .map((page) => `- ${page.name || '未命名页面'} (${page.code})：${page.reason || '未能自动同步'}`)
+        .join('\n')}`
+    : '';
+  return `本次已开启递归子页面，请同时处理当前页面和以下已同步的关联 L4 页面。每个页面目录都包含 mdd.schema.json 和 mdd.script.jsx：\n${syncedText}${failedText}`;
+};
+
+const buildL4I18nPrompt = ({
+  pageCode,
+  workspacePath,
+  mainProjectPath,
+  schemaJson,
+  scriptInfo,
+  linkedPages,
+  syncLinkedPages,
+}) => {
+  const normalizedProjectPath = trimEndSlash(mainProjectPath || '');
+  const schemaCandidates = createI18nSchemaCandidates(schemaJson);
+  const scriptPreview = createScriptI18nPreview(scriptInfo);
+  const linkedWorkspaceText = formatLinkedI18nWorkspaceList({
+    linkedPages,
+    syncLinkedPages,
+  });
+
+  return `你现在要为一个 MDD L4 页面做多语言同步。请直接修改本地文件，不要只给建议。
+
+当前 L4 页面：
+- 页面 Code：${pageCode}
+- L4 工作区：${workspacePath}
+- Schema 文件：${workspacePath}/mdd.schema.json
+- Script 文件：${workspacePath}/mdd.script.jsx
+
+递归子页面：
+${linkedWorkspaceText}
+
+主工程：
+- 工程根目录：${normalizedProjectPath}
+- 英文词条：${normalizedProjectPath}/src/i18n/strings/en-US.json
+- 越南语词条：${normalizedProjectPath}/src/i18n/strings/vi-VN.json
+
+目标：
+1. 扫描当前 L4 页面${syncLinkedPages ? '以及上面列出的所有已同步关联子 L4 页面' : ''}的 mdd.schema.json，处理所有面向用户展示的文案，不限中文；英文 UI 文案也必须处理。重点包括 label、tooltip，也包括 title、placeholder、children、text、submitText、resetText、cancelText、secondConfirmTitle、secondConfirmContent 等同类字段。
+2. 英文 label/tooltip 也属于需要同步的文案，例如 ResourceId、ResourceName、Status、id、edit template、enable、disable、edit、Add template 等，都要作为 i18n key 去检查 en-US.json 和 vi-VN.json。
+3. 扫描当前 L4 页面${syncLinkedPages ? '以及上面列出的所有已同步关联子 L4 页面' : ''}的 mdd.script.jsx，找出 JSX、弹窗、按钮、消息提示、表格列、选项、错误提示等用户可见硬编码文案。中文、英文、英文短语、数字/英文混合短语都算用户可见文案。
+4. 对 mdd.script.jsx 中未国际化的用户可见硬编码文案，引入并使用 $i18n 包裹。若文件还没有 import，请添加：
+   import $i18n from '@src/i18n';
+   使用方式为 $i18n.get('文案 key')。不要处理注释、日志、接口字段名、对象 key、路径、埋点 code、非用户可见文本。
+5. mdd.schema.json 中的 label/tooltip 等 key 通常由 MDD 渲染引擎自动 i18n.tr 处理，原则上保留 schema 原始文案 key，不要为了国际化随意改 schema 结构；只需要为这些 key 补齐主工程翻译词条。
+6. 将所有需要翻译的文案 key 去重后，同步到主工程的 en-US.json 和 vi-VN.json：
+   - JSON 是扁平 key/value 格式，key 保持原文，不管原文是中文还是英文。
+   - 如果 key 已存在，必须跳过，不覆盖已有翻译。
+   - 如果 key 不存在，两个文件都要新增。
+   - 对英文 key：en-US.json 的 value 可以使用更规范的英文展示文案，例如 ResourceId 可写为 Resource ID、enable 可写为 Enable；vi-VN.json 的 value 必须翻译成越南语。
+   - 对中文 key：en-US.json 翻译成英文，vi-VN.json 翻译成越南语。
+   - 保持 JSON 合法、格式稳定，尽量维持原文件缩进和排序风格。
+7. i18n JSON 文件可能非常大，不要用 cat、sed 大段打印或把完整文件读进对话上下文。请优先用脚本精确查重和增量写入，例如：
+   node - <<'NODE'
+   const fs = require('fs');
+   const files = [
+     '${normalizedProjectPath}/src/i18n/strings/en-US.json',
+     '${normalizedProjectPath}/src/i18n/strings/vi-VN.json',
+   ];
+   const keys = [
+     // 在这里填入从 L4 页面收集并去重后的候选 key
+   ];
+   for (const file of files) {
+     const json = JSON.parse(fs.readFileSync(file, 'utf8'));
+     const missing = keys.filter((key) => !Object.prototype.hasOwnProperty.call(json, key));
+     console.log(file, 'missing:', missing);
+   }
+   NODE
+   如果需要写入，也请用类似脚本读取 JSON 对象、只给 missing key 赋值、再 JSON.stringify(data, null, 2) 写回；写入前后只输出新增数量和新增 key 列表，不要输出完整 JSON。
+8. 翻译要求：
+   - 英文使用简洁准确的后台/物流系统 UI 文案，按钮短语首字母大写即可，不要机械直译。
+   - 越南语使用自然的越南语业务系统文案，保留变量占位符、数字、标点和专有名词。
+   - 带 {0}、{name}、\${value}、%s 等占位符的文案，翻译后必须完整保留占位符。
+9. 完成后请自检：
+   - 所有被处理页面的 mdd.schema.json 都是合法 JSON。
+   - en-US.json、vi-VN.json 是合法 JSON。
+   - 所有被处理页面的 mdd.script.jsx 都没有破坏 React/JSX 语法。
+   - 没有重复 key，没有覆盖已有 key。
+
+编辑器预扫到的当前页面 schema 候选文案如下，包含中文和英文；请以实际文件为准再完整补充，不要因为文案是英文就跳过：
+${formatI18nCandidateList(schemaCandidates)}
+
+编辑器预扫到的当前页面 script 候选行如下，请以实际文件为准识别真正的用户可见文案，不要因为文案是英文就跳过：
+${formatScriptPreviewList(scriptPreview)}
+
+请现在开始修改这些文件，并在最后输出：
+- 每个 L4 页面分别包裹了哪些文案
+- en-US.json 新增了多少条
+- vi-VN.json 新增了多少条
+- 是否有跳过的已存在 key`;
+};
+
 const createLinkedPageExtraSources = (data = {}, prefix = 'payload') => {
   const sourceFields = [
     'schemaInfo',
@@ -452,6 +634,10 @@ const normalizeLinkedPagePayload = (reference, pageData) => {
 };
 
 const buildLinkedPagePayload = async (payload, config) => {
+  if (!config?.syncLinkedPages) {
+    return payload;
+  }
+
   const rootSchemaJson = parseSchema(payload.schemaInfo) || {};
   const resolver = getLinkedPageResolver(config);
   let rootPageData = null;
@@ -621,6 +807,14 @@ export default function LocalAIDrawer(props) {
   const [lastSummary, setLastSummary] = React.useState('');
   const [pullError, setPullError] = React.useState(null);
   const [lastDiffSummary, setLastDiffSummary] = React.useState(null);
+  const [syncLinkedPages, setSyncLinkedPages] = React.useState(false);
+  const [i18nDialogVisible, setI18nDialogVisible] = React.useState(false);
+  const [i18nMainProjectPath, setI18nMainProjectPath] = React.useState(() => {
+    if (typeof window === 'undefined') return DEFAULT_MAIN_PROJECT_PATH;
+    return window.localStorage?.getItem(MAIN_PROJECT_PATH_STORAGE_KEY) || DEFAULT_MAIN_PROJECT_PATH;
+  });
+  const [i18nPrompt, setI18nPrompt] = React.useState('');
+  const [i18nWorkspaceInfo, setI18nWorkspaceInfo] = React.useState(null);
 
   const schemaJson = schema?.getAllJSON?.() || {};
   const pageCode = getPageCode(schemaJson, pageMeta);
@@ -684,6 +878,29 @@ export default function LocalAIDrawer(props) {
     [expectedWorkspacePath, pageCode],
   );
 
+  const currentI18nPrompt = React.useMemo(
+    () =>
+      buildL4I18nPrompt({
+        pageCode,
+        workspacePath: i18nWorkspaceInfo?.dir || workspacePath || expectedWorkspacePath,
+        mainProjectPath: i18nMainProjectPath,
+        schemaJson,
+        scriptInfo: scriptInfo?.script || '',
+        linkedPages: i18nWorkspaceInfo?.linkedPages,
+        syncLinkedPages,
+      }),
+    [
+      expectedWorkspacePath,
+      i18nMainProjectPath,
+      i18nWorkspaceInfo,
+      pageCode,
+      schemaJson,
+      scriptInfo,
+      syncLinkedPages,
+      workspacePath,
+    ],
+  );
+
   const handleCopy = React.useCallback(async (text, successText) => {
     try {
       await copyText(text);
@@ -719,7 +936,10 @@ export default function LocalAIDrawer(props) {
     setPullError(null);
     setLastDiffSummary(null);
     try {
-      const payload = await buildLinkedPagePayload(getPayload(), config);
+      const payload = await buildLinkedPagePayload(getPayload(), {
+        ...config,
+        syncLinkedPages,
+      });
       const res = await pushPage(baseURL, pageCode, payload);
       setWorkspacePath(res?.dir || '');
       setBridgeInfo((prev) => ({
@@ -728,7 +948,7 @@ export default function LocalAIDrawer(props) {
       }));
       setStatus('已同步到本地');
       setLastSummary(createLinkedPushSummary(res, pageCode));
-      if (res?.linkedPages?.totalReferences > 0) {
+      if (syncLinkedPages && res?.linkedPages?.totalReferences > 0) {
         Message.success(
           `已发送到本地 AI 工作区，扫描到直接子 L4 页面 ${res.linkedPages.directCount || 0} 个，递归共 ${res.linkedPages.totalReferences} 个`,
         );
@@ -742,6 +962,80 @@ export default function LocalAIDrawer(props) {
     }
   };
 
+  const ensureCurrentWorkspace = async () => {
+    const statusRes = await getPageStatus(baseURL, pageCode);
+    if (statusRes?.exists && !syncLinkedPages) {
+      return {
+        ...statusRes,
+        created: false,
+        recursiveSynced: false,
+      };
+    }
+
+    const payload = await buildLinkedPagePayload(getPayload(), {
+      ...config,
+      syncLinkedPages,
+    });
+    const pushRes = await pushPage(baseURL, pageCode, payload);
+    return {
+      ...(pushRes || {}),
+      exists: true,
+      created: !statusRes?.exists,
+      recursiveSynced: syncLinkedPages,
+      dir: pushRes?.dir,
+    };
+  };
+
+  const handleI18nConfirm = async () => {
+    const mainProjectPath = trimEndSlash(i18nMainProjectPath || '');
+    if (!mainProjectPath || !mainProjectPath.startsWith('/')) {
+      Message.error('请输入主工程本地绝对路径');
+      return;
+    }
+
+    setLoadingAction('i18n');
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage?.setItem(MAIN_PROJECT_PATH_STORAGE_KEY, mainProjectPath);
+      }
+      const workspaceInfo = await ensureCurrentWorkspace();
+      setWorkspacePath(workspaceInfo?.dir || workspacePath);
+      setI18nWorkspaceInfo(workspaceInfo);
+      const prompt = buildL4I18nPrompt({
+        pageCode,
+        workspacePath: workspaceInfo?.dir || workspacePath || expectedWorkspacePath,
+        mainProjectPath,
+        schemaJson,
+        scriptInfo: scriptInfo?.script || '',
+        linkedPages: workspaceInfo?.linkedPages,
+        syncLinkedPages,
+      });
+      setI18nPrompt(prompt);
+      setLastSummary(
+        workspaceInfo?.recursiveSynced
+          ? `已按递归模式同步当前 L4 页面和关联子页面，请复制多语言提示词交给本地 AI 执行`
+          : workspaceInfo?.created
+            ? '已先把当前 L4 页面同步到本地工作区，请复制多语言提示词交给本地 AI 执行'
+            : '当前 L4 页面本地工作区已存在，请复制多语言提示词交给本地 AI 执行',
+      );
+      Message.success(
+        workspaceInfo?.recursiveSynced
+          ? '已递归同步 L4 工作区并生成提示词'
+          : workspaceInfo?.created
+            ? '已同步当前 L4 工作区并生成提示词'
+            : '已生成 L4 多语言提示词',
+      );
+    } catch (e) {
+      Message.error(e.message || '生成 L4 多语言提示词失败');
+    } finally {
+      setLoadingAction('');
+    }
+  };
+
+  const handleCopyI18nPrompt = React.useCallback(() => {
+    handleCopy(i18nPrompt || currentI18nPrompt, '已复制 L4 多语言提示词');
+  }, [currentI18nPrompt, handleCopy, i18nPrompt]);
+
   const handlePull = async () => {
     setLoadingAction('pull');
     setPullError(null);
@@ -923,6 +1217,26 @@ export default function LocalAIDrawer(props) {
           <CnButton loading={loadingAction === 'rollback'} onClick={handleRollback}>
             回滚上次更改
           </CnButton>
+          <CnButton loading={loadingAction === 'i18n'} onClick={() => setI18nDialogVisible(true)}>
+            同步L4多语言
+          </CnButton>
+        </div>
+        <div className="mdd-local-ai-sync-options">
+          <button
+            type="button"
+            className={`mdd-local-ai-switch${syncLinkedPages ? ' is-checked' : ''}`}
+            role="switch"
+            aria-checked={syncLinkedPages}
+            onClick={() => setSyncLinkedPages((value) => !value)}
+          >
+            <span className="mdd-local-ai-switch-track">
+              <span className="mdd-local-ai-switch-handle" />
+            </span>
+            <span className="mdd-local-ai-switch-text">
+              <strong>递归同步子页面</strong>
+              <span>{syncLinkedPages ? '已开启，会扫描并同步关联 L4 页面' : '已关闭，只同步当前页面'}</span>
+            </span>
+          </button>
         </div>
         <div className="mdd-local-ai-action-notice">
           “同步本地修改”只会同步当前页面的本地变更；如果关联子 L4 页面也在本地改过，请打开对应子页面的 L4 地址，分别执行“同步本地修改”并在页面上点击保存。
@@ -1046,6 +1360,114 @@ export default function LocalAIDrawer(props) {
           <div>本地工作区默认在 ~/.mdd-ai-workspace。</div>
         </div>
       </CnCard>
+
+      <Dialog
+        v2
+        centered
+        visible={i18nDialogVisible}
+        title="同步 L4 多语言"
+        width="960px"
+        footer={false}
+        onClose={() => setI18nDialogVisible(false)}
+        onCancel={() => setI18nDialogVisible(false)}
+      >
+        <div className="mdd-local-ai-i18n-dialog">
+          <div className="mdd-local-ai-i18n-hero">
+            <div>
+              <div className="mdd-local-ai-i18n-kicker">Local AI i18n task</div>
+              <div className="mdd-local-ai-i18n-title">生成本地 AI 多语言任务</div>
+              <div className="mdd-local-ai-i18n-desc">
+                {syncLinkedPages
+                  ? '已开启递归子页面，会先同步当前页面和关联 L4 页面，再生成多页面多语言提示词。'
+                  : '先确认当前 L4 工作区已同步，再让本地 AI 补齐主工程英文和越南语词条。'}
+              </div>
+              <div className="mdd-local-ai-i18n-langs">
+                <span>English</span>
+                <span>Tiếng Việt</span>
+                {syncLinkedPages ? <span>递归 L4</span> : null}
+              </div>
+            </div>
+            <span className="mdd-local-ai-i18n-code">{pageCode}</span>
+          </div>
+
+          <div className="mdd-local-ai-i18n-card">
+            <div className="mdd-local-ai-i18n-field">
+              <div className="mdd-local-ai-i18n-field-head">
+                <label>主工程 tms-mach36 本地绝对路径</label>
+                <span>用于定位 src/i18n/strings</span>
+              </div>
+              <Input
+                value={i18nMainProjectPath}
+                onChange={setI18nMainProjectPath}
+                placeholder={DEFAULT_MAIN_PROJECT_PATH}
+                className="mdd-local-ai-i18n-input"
+              />
+            </div>
+          </div>
+
+          <div className="mdd-local-ai-i18n-paths">
+            <div>
+              <span>L4 工作区</span>
+              <strong>{i18nWorkspaceInfo?.dir || workspacePath || expectedWorkspacePath}</strong>
+            </div>
+            <div>
+              <span>英文词条</span>
+              <strong>{`${trimEndSlash(i18nMainProjectPath || DEFAULT_MAIN_PROJECT_PATH)}/src/i18n/strings/en-US.json`}</strong>
+            </div>
+            <div>
+              <span>越南语词条</span>
+              <strong>{`${trimEndSlash(i18nMainProjectPath || DEFAULT_MAIN_PROJECT_PATH)}/src/i18n/strings/vi-VN.json`}</strong>
+            </div>
+          </div>
+
+          {i18nWorkspaceInfo ? (
+            <div className={`mdd-local-ai-i18n-state${i18nWorkspaceInfo.created ? ' is-created' : ''}`}>
+              {i18nWorkspaceInfo.recursiveSynced
+                ? `已按递归模式同步当前页面和 ${i18nWorkspaceInfo.linkedPages?.syncedCount || 0} 个关联 L4 页面${
+                    i18nWorkspaceInfo.linkedPages?.failedCount
+                      ? `，另有 ${i18nWorkspaceInfo.linkedPages.failedCount} 个关联页面需要处理`
+                      : ''
+                  }。`
+                : i18nWorkspaceInfo.created
+                  ? '当前 L4 页面此前未同步，已先发送到本地 AI 工作区。'
+                  : '当前 L4 页面本地工作区已存在，请打开该目录让本地 AI 执行提示词。'}
+            </div>
+          ) : (
+            <div className="mdd-local-ai-i18n-checklist">
+              <div>检查当前 L4 工作区是否存在</div>
+              <div>{syncLinkedPages ? '递归同步当前页面和关联 L4 页面' : '未同步时自动发送当前页面到本地 AI'}</div>
+              <div>{syncLinkedPages ? '生成覆盖父子页面的提示词并去重同步词条' : '生成提示词并要求本地 AI 去重写入 en-US.json 和 vi-VN.json'}</div>
+            </div>
+          )}
+
+          {i18nPrompt ? (
+            <div className="mdd-local-ai-i18n-prompt">
+              <div className="mdd-local-ai-i18n-prompt-head">
+                <span>给本地 AI 的提示词</span>
+                <CnButton size="small" onClick={handleCopyI18nPrompt}>
+                  复制提示词
+                </CnButton>
+              </div>
+              <pre>{i18nPrompt}</pre>
+            </div>
+          ) : null}
+
+          <div className="mdd-local-ai-i18n-footer">
+            <CnButton onClick={() => setI18nDialogVisible(false)}>取消</CnButton>
+            <CnButton loading={loadingAction === 'open'} onClick={handleOpen}>
+              打开 L4 工作区
+            </CnButton>
+            <CnButton type="primary" loading={loadingAction === 'i18n'} onClick={handleI18nConfirm}>
+              {i18nPrompt ? '重新生成提示词' : '确定并生成提示词'}
+            </CnButton>
+            {i18nPrompt ? (
+              <CnButton type="primary" onClick={handleCopyI18nPrompt}>
+                复制提示词
+              </CnButton>
+            ) : null}
+          </div>
+        </div>
+      </Dialog>
     </div>
   );
 }