Merge pull request #27 from lowcoding/feat/v1.8.3

✨ feat: 优化交互

Author: wjkang

README.md

@@ -2,7 +2,7 @@
 
 低代码工具，支持 ChatGPT 和其它 LLM
 
-[详细文档](https://lowcoding.gitee.io/)
+[详细文档](https://lowcoding.github.io/)
 
 > 文档不经常更新，新功能使用方法可查看 [releases](https://github.com/lowcoding/lowcode-vscode/releases)
 

package.json

@@ -3,7 +3,7 @@
 	"displayName": "lowcode",
 	"description": "lowcode tool, support ChatGPT and other LLM",
 	"author": "wjkang <ruoxieme@gmail.com>",
-	"version": "1.8.2",
+	"version": "1.8.3",
 	"icon": "asset/icon.png",
 	"publisher": "wjkang",
 	"repository": "https://github.com/lowcoding/lowcode-vscode",
@@ -222,7 +222,7 @@
 		"viewsWelcome": [
 			{
 				"view": "lowcode.welcome",
-				"contents": "[打开文件夹](command:lowcode.openFolderForceNewWindow)\n[创建应用](command:lowcode.openScaffold)\n[ChatGPT](command:lowcode.showChatGPTView)\n[设置](command:lowcode.openConfig)\n查看[文档](https://lowcoding.gitee.io)以学习如何在 VS Code 中如何使用 lowcode。"
+				"contents": "[打开文件夹](command:lowcode.openFolderForceNewWindow)\n[创建应用](command:lowcode.openScaffold)\n[ChatGPT](command:lowcode.showChatGPTView)\n[设置](command:lowcode.openConfig)\n查看[文档](https://lowcoding.github.io/)以学习如何在 VS Code 中如何使用 lowcode。"
 			}
 		],
 		"configuration": {

src/webview/controllers/script.ts

@@ -23,9 +23,11 @@ export const runScript = async (
   if (fs.existsSync(scriptFile)) {
     delete eval('require').cache[eval('require').resolve(scriptFile)];
     const script = eval('require')(scriptFile);
-    if (script[message.data.script]) {
+    if (script[message.data.script] || script.runScript) {
       const context = {
         model: message.data.model,
+        method: message.data.script,
+        script: message.data.script,
         params: message.data.params,
         clipboardImage: message.data.clipboardImage,
         vscode,
@@ -39,7 +41,9 @@ export const runScript = async (
         materialPath: message.data.materialPath,
         activeTextEditor: getLastActiveTextEditor(),
       };
-      const extendModel = await script[message.data.script](context);
+      const extendModel = await (
+        script[message.data.script] || script.runScript
+      )(context);
       return extendModel;
     }
     throw new Error(`方法: ${message.data.script} 不存在`);

webview-react/src/components/AmisComponent/index.tsx

@@ -1,5 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { Button, Space, message } from 'antd';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { message } from 'antd';
 import { MessageType } from 'antd/lib/message';
 import { render } from 'amis';
 import './cxd.css';
@@ -14,7 +19,6 @@ import {
   RendererAction,
   RendererEvent,
 } from 'amis-core';
-import RunScript from '../RunScript';
 import { useState } from '@/hooks/useImmer';
 import { runScript } from '@/webview/service';
 
@@ -25,14 +29,7 @@ const request: { count: number; hideLoading?: MessageType } = {
 
 interface IProps {
   schema: object;
-  scripts?: [
-    {
-      method: string;
-      remark: string;
-    },
-  ];
   path: string;
-  onFormChange: (values: object) => void;
 }
 
 // 动作定义
@@ -74,8 +71,7 @@ export class RunScriptAction implements RendererAction {
 // @ts-ignore
 registerAction('runScript', new RunScriptAction());
 
-export default (props: IProps) => {
-  const [scriptModalVisible, setScriptModalVisible] = useState(false);
+export default forwardRef((props: IProps, ref) => {
   const [model, setModel] = useState({} as object);
   const amisScoped = useRef<any>();
   const env = {
@@ -187,65 +183,41 @@ export default (props: IProps) => {
     },
   };
 
+  useImperativeHandle(ref, () => ({
+    getValues: () => {
+      const component = amisScoped.current.getComponentByName('page.form');
+      if (component) {
+        setModel(component.getValues());
+        return component.getValues();
+      }
+      return {};
+    },
+    setValues: (values: object) => {
+      const component = amisScoped.current.getComponentByName('page.form');
+      if (component) {
+        component.setValues(values);
+      }
+      setModel(values);
+    },
+  }));
+
   useEffect(() => {
     componentData.model = model;
     componentData.materialPath = props.path;
   }, [model, props.path]);
 
-  const handleOpenRunScriptModal = () => {
-    const values = amisScoped.current
-      .getComponentByName('page.form')
-      .getValues();
-    setModel(values);
-    setScriptModalVisible(true);
-  };
-
-  const handleRunScriptResult = (result: object) => {
-    amisScoped.current.getComponentByName('page.form').setValues(result);
-    props.onFormChange(result);
-    setScriptModalVisible(false);
-  };
-
   return (
     <>
       {render(
         props.schema as any,
         {
-          scopeRef: (ref: any) => {
-            amisScoped.current = ref;
+          scopeRef: (scopeRef: any) => {
+            amisScoped.current = scopeRef;
           },
           useMobileUI: false,
         },
         env,
       )}
-      <br></br>
-      <Space>
-        <Button type="primary" size="small" onClick={handleOpenRunScriptModal}>
-          执行脚本
-        </Button>
-        <Button
-          type="primary"
-          size="small"
-          onClick={() => {
-            const values = amisScoped.current
-              .getComponentByName('page.form')
-              .getValues();
-            props.onFormChange(values);
-          }}
-        >
-          生成模板数据
-        </Button>
-      </Space>
-      <RunScript
-        visible={scriptModalVisible}
-        materialPath={props.path}
-        model={model}
-        scripts={props.scripts}
-        onCancel={() => {
-          setScriptModalVisible(false);
-        }}
-        onOk={handleRunScriptResult}
-      />
     </>
   );
-};
+});

webview-react/src/components/FormilyComponent/index.tsx

@@ -1,4 +1,9 @@
-import React, { useEffect, useMemo } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import {
@@ -89,17 +94,11 @@ interface IProps {
     schema: object;
   };
   initialValues: object;
-  scripts?: [
-    {
-      method: string;
-      remark: string;
-    },
-  ];
   path: string;
   onFormChange: (values: object) => void;
 }
 
-export default (props: IProps) => {
+export default forwardRef((props: IProps, ref) => {
   const [init, setInit] = useState(false);
   const [scriptModalVisible, setScriptModalVisible] = useState(false);
   const [model, setModel] = useState({} as object);
@@ -116,6 +115,13 @@ export default (props: IProps) => {
     [],
   );
 
+  useImperativeHandle(ref, () => ({
+    getValues: () => form.values,
+    setValues: (values: object) => {
+      form.setValues(values);
+    },
+  }));
+
   useEffect(() => {
     if (
       props.initialValues &&
@@ -140,7 +146,7 @@ export default (props: IProps) => {
       <Form {...props.schema.form} form={form}>
         <SchemaField schema={props.schema.schema} />
       </Form>
-      <Space>
+      {/* <Space>
         <Button
           type="primary"
           size="small"
@@ -159,8 +165,8 @@ export default (props: IProps) => {
         >
           重新生成模板数据
         </Button>
-      </Space>
-      <RunScript
+      </Space> */}
+      {/* <RunScript
         visible={scriptModalVisible}
         materialPath={props.path}
         model={model}
@@ -169,7 +175,7 @@ export default (props: IProps) => {
           setScriptModalVisible(false);
         }}
         onOk={handleRunScriptResult}
-      />
+      /> */}
     </div>
   );
-};
+});

webview-react/src/components/RunScript/index.tsx

@@ -11,7 +11,15 @@ interface IProps {
   scripts?: [{ method: string; remark: string; readClipboardImage?: boolean }];
   privateMaterials?: boolean;
   onCancel: () => void;
-  onOk: (model: object) => void;
+  onOk: (result: {
+    /** 立即更新 model */
+    updateModelImmediately: boolean;
+    /** 仅更新参数 */
+    onlyUpdateParams: boolean;
+    /** 要更新的参数 */
+    params?: string;
+    model: object;
+  }) => void;
 }
 
 const RunScript: React.FC<IProps> = (props) => {
@@ -21,8 +29,6 @@ const RunScript: React.FC<IProps> = (props) => {
 
   useEffect(() => {
     if (props.visible) {
-      setScript('');
-      setParams('');
       setLoading(false);
     }
   }, [props.visible]);
@@ -40,7 +46,19 @@ const RunScript: React.FC<IProps> = (props) => {
       createBlockPath: localStorage.getItem('selectedFolder') || undefined,
     })
       .then((result) => {
-        props.onOk(result);
+        if (result.model) {
+          if (result.onlyUpdateParams) {
+            setParams(result.params || '');
+          } else {
+            props.onOk(result);
+          }
+        } else {
+          props.onOk({
+            updateModelImmediately: true,
+            onlyUpdateParams: false,
+            model: result, // 旧版本只返回 model
+          });
+        }
       })
       .finally(() => {
         setLoading(false);
@@ -55,17 +73,17 @@ const RunScript: React.FC<IProps> = (props) => {
       maskClosable={false}
       onCancel={props.onCancel}
       onOk={handleOk}
+      okText="确定"
+      cancelText="取消"
     >
       <Form layout="vertical">
         <Form.Item label="方法">
           <Select
-            mode="tags"
             placeholder="请输入或选择"
-            value={script ? [script] : undefined}
+            value={script || undefined}
             onChange={(value) => {
-              setScript(value && value.length ? value[value.length - 1] : '');
+              setScript(value);
             }}
-            notFoundContent={null}
           >
             {props.scripts?.map((item) => (
               <Select.Option value={item.method} key={item.method}>
@@ -77,6 +95,7 @@ const RunScript: React.FC<IProps> = (props) => {
         <Form.Item label="参数">
           <Input.TextArea
             value={params}
+            rows={6}
             onChange={(e) => {
               const value = e.target.value;
               setParams(value);

webview-react/src/components/SelectDirectory/index.tsx

@@ -68,6 +68,7 @@ const SelectDirectory: React.FC<Iprops> = ({
       title="选择模块生成目录"
       visible={visible}
       closable={false}
+      maskClosable={false}
       okText="确定"
       cancelText="关闭"
       onCancel={() => {