@cniot/mdd-editor 0.2.0-beta.9 → 0.3.1

package/src/toolbar.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { Dialog, CnIcon, CnButton, CnTooltip, CnDrawer, CnTab, CnTabItem, CnCard } from '@cainiaofe/cn-ui';
 import MDDRenderEngine, { JSONWatch } from '@cniot/mdd-render-engine';
-import Monaco from '@src/components/ajax-schema-form/monaco';
+import Monaco from '$src/components/ajax-schema-form/monaco';
+import LocalAIDrawer from '$src/ai/LocalAIDrawer';
 
-import { EVENT_KEY } from '@src/common/const';
+import { EVENT_KEY } from '$src/common/const';
 
 import './index.less';
 
-const isDebug = window?.location?.search?.indexOf('debug') >= 0;
+// window.localStorage.__l4_location_search_debug__ = true; // 调试使用
+// window.localStorage.__l4_ftp_filter_expand__ = true; // 调试使用
+const isDebug =
+  window?.location?.search?.indexOf('debug') >= 0 || window.localStorage?.__l4_location_search_debug__ === 'true';
 
 /**
  * 顶部操作区
@@ -21,18 +25,36 @@ const isDebug = window?.location?.search?.indexOf('debug') >= 0;
  * }
  */
 export default function Toolbar(props) {
-  const { schema, scriptInfo = { script: '', style: '' }, showScript, scriptTopButtons } = props;
+  const {
+    schema,
+    scriptInfo = { script: '', style: '' },
+    showScript,
+    scriptTopButtons,
+    aiBridge = true,
+    pageMeta,
+    onSchemaApplied,
+  } = props;
   const [fullscreen, setFullscreen] = React.useState(false);
   const [codeVisible, setCodeVisible] = React.useState(false);
   const [schemaVisible, setSchemaVisible] = React.useState(false);
+  const [aiVisible, setAiVisible] = React.useState(false);
+  const [scriptEditorInfo, setScriptEditorInfo] = React.useState(scriptInfo);
+  const [schemaEditorCode, setSchemaEditorCode] = React.useState(
+    JSON.stringify(schema?.getAllJSON() || {}, null, 2),
+  );
 
-  const scriptRef = React.useRef(scriptInfo);
-  const schemaRef = React.useRef(JSON.stringify(schema?.getAllJSON() || {}, null, 2));
+  const scriptRef = React.useRef(scriptEditorInfo);
+  const schemaRef = React.useRef(schemaEditorCode);
 
   const editorHeight = 'calc(100vh - 146px)';
 
   const scriptChange = (scriptChangeCode) => {
-    scriptRef.current.script = scriptChangeCode; // 缓存脚本
+    const nextScriptInfo = {
+      script: scriptChangeCode,
+      style: scriptRef.current.style,
+    };
+    scriptRef.current = nextScriptInfo; // 缓存脚本
+    setScriptEditorInfo(nextScriptInfo);
     schema.emit(EVENT_KEY.SCRIPT_UPDATE, {
       script: scriptChangeCode,
       style: scriptRef.current.style,
@@ -40,11 +62,13 @@ export default function Toolbar(props) {
   };
 
   const styleChange = (styleChangeCode) => {
-    scriptRef.current.style = styleChangeCode; // 缓存样式
-    schema.emit(EVENT_KEY.SCRIPT_UPDATE, {
+    const nextScriptInfo = {
       script: scriptRef.current.script,
       style: styleChangeCode,
-    });
+    };
+    scriptRef.current = nextScriptInfo; // 缓存样式
+    setScriptEditorInfo(nextScriptInfo);
+    schema.emit(EVENT_KEY.SCRIPT_UPDATE, nextScriptInfo);
   };
 
   // schema change
@@ -52,6 +76,15 @@ export default function Toolbar(props) {
     schema.emit(EVENT_KEY.SCHEMA_UPDATE_FORCE, newSchemaCode);
   };
 
+  const onLocalAIApply = ({ schemaJson, scriptInfo: nextScriptInfo }) => {
+    scriptRef.current = nextScriptInfo;
+    setScriptEditorInfo(nextScriptInfo);
+    const nextSchemaCode = JSON.stringify(schemaJson || schema?.getAllJSON() || {}, null, 2);
+    schemaRef.current = nextSchemaCode;
+    setSchemaEditorCode(nextSchemaCode);
+    onSchemaApplied?.();
+  };
+
   return (
     <div>
       <div className="mdd-editor-toolbar">
@@ -77,7 +110,6 @@ export default function Toolbar(props) {
             脚本
           </CnTooltip>
         )}
-
         <CnTooltip
           trigger={
             <CnButton text onClick={() => setFullscreen(true)}>
@@ -87,6 +119,17 @@ export default function Toolbar(props) {
         >
           预览
         </CnTooltip>
+        {aiBridge !== false && (
+          <CnTooltip
+            trigger={
+              <CnButton type="primary" size="small" className="mdd-editor-ai-button" onClick={() => setAiVisible(true)}>
+                本地 AI
+              </CnButton>
+            }
+          >
+            本地 AI
+          </CnTooltip>
+        )}
       </div>
       <Dialog v2 title="预览" width="90vw" visible={fullscreen} onClose={() => setFullscreen(false)} footer={false}>
         <MDDRenderEngine
@@ -99,6 +142,24 @@ export default function Toolbar(props) {
           }
         />
       </Dialog>
+      {aiVisible && (
+        <CnDrawer
+          title="本地 AI 工作区"
+          width="720px"
+          footer={false}
+          visible={aiVisible}
+          onClose={() => setAiVisible(false)}
+        >
+          <LocalAIDrawer
+            schema={schema}
+            scriptInfo={scriptEditorInfo}
+            pageMeta={pageMeta}
+            bridgeConfig={aiBridge}
+            onApply={onLocalAIApply}
+          />
+        </CnDrawer>
+      )}
+
       {/*  代码编辑  */}
       <CnDrawer
         title="脚本编辑"
@@ -121,7 +182,7 @@ export default function Toolbar(props) {
               <Monaco
                 defaultLanguage="javascript"
                 height={editorHeight}
-                defaultValue={scriptInfo.script}
+                value={scriptEditorInfo.script}
                 onChange={scriptChange}
               />
             </CnTabItem>
@@ -129,7 +190,7 @@ export default function Toolbar(props) {
               <Monaco
                 defaultLanguage="less"
                 height={editorHeight}
-                defaultValue={scriptInfo.style}
+                value={scriptEditorInfo.style}
                 onChange={styleChange}
               />
             </CnTabItem>
@@ -164,9 +225,10 @@ export default function Toolbar(props) {
           <Monaco
             defaultLanguage="json"
             height={editorHeight}
-            defaultValue={schemaRef.current}
+            value={schemaEditorCode}
             onChange={(v) => {
               schemaRef.current = v;
+              setSchemaEditorCode(v);
             }}
           />
         </CnCard>

package/src/utils/buildFieldsToCompJson.js

@@ -1,6 +1,6 @@
-import { SWAGGER_DT } from '@src/common/const';
-import { calcWordWidth } from '@src/utils';
-import { propFields } from '@src/common/comp-schema/fields/propFields';
+import { SWAGGER_DT } from '$src/common/const';
+import { calcWordWidth } from '$src/utils';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 // 不生成字段 黑名单
 const REMOVE_FIELDS_NAME = ['page', 'pageSize', 'pageNo', 'currentPage', 'userContext'];

package/src/utils/persistentStorage.js

@@ -1,5 +1,5 @@
 // 用于LS储存
-import { PERSISTENT_STORE_LS_KEY } from '@src/common/const';
+import { PERSISTENT_STORE_LS_KEY } from '$src/common/const';
 
 class PersistentStorage {
   constructor() {

package/src/utils/swagger/api2SchemaFromSwagger.js

@@ -1,8 +1,8 @@
 import merge from 'lodash/merge';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import jsonSchemaRefParser from '@src/utils/jsonSchemaRefParser';
-import { getDefaultFomrLabelAlign } from '@src/utils';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import jsonSchemaRefParser from '$src/utils/jsonSchemaRefParser';
+import { getDefaultFomrLabelAlign } from '$src/utils';
 
 /** 将swaggerjson 转换成前端能用的swagger对象 */
 export function getSwaggerInfoFromJson(swaggerJson) {
@@ -186,14 +186,14 @@ export function api2SchemaFromSwaggerApiInfo(api, schemaType, apiInfo, extraSche
         },
         tree: false,
         showIndex: false,
-        hideCommonToolbar: false,
+        hideCommonToolbar: true,
       },
       headerToolbar: [],
     };
-  } else if (schemaType === 'blocks-table') {
+  } else if (schemaType?.startsWith('blocks-')) {
     result.type = 'blocks';
     result.body = {
-      type: 'blocks-table',
+      type: schemaType,
       blocks: [],
     };
   }