Merge pull request #11 from lowcoding/v1.7.0

✨ feat: 实现 amis copy，注册 runScript 动作，优化交互

Author: wjkang

package.json

@@ -3,7 +3,7 @@
 	"displayName": "lowcode",
 	"description": "lowcode tool, support ChatGPT",
 	"author": "wjkang <[email protected]>",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"icon": "asset/icon.png",
 	"publisher": "wjkang",
 	"repository": "https://github.com/lowcoding/lowcode-vscode",

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Button, Space, message } from 'antd';
 import { MessageType } from 'antd/lib/message';
 import { render } from 'amis';
@@ -7,8 +7,16 @@ import './helper.css';
 // import 'amis/lib/helper.css';
 import 'amis/sdk/iconfont.css';
 import axios from 'axios';
+import {
+  ListenerAction,
+  ListenerContext,
+  registerAction,
+  RendererAction,
+  RendererEvent,
+} from 'amis-core';
 import RunScript from '../RunScript';
 import { useState } from '@/hooks/useImmer';
+import { runScript } from '@/webview/service';
 
 const request: { count: number; hideLoading?: MessageType } = {
   count: 0,
@@ -27,6 +35,44 @@ interface IProps {
   onFormChange: (values: object) => void;
 }
 
+// 动作定义
+interface IRunScriptAction extends ListenerAction {
+  actionType: 'runScript';
+  args: {
+    method: string; // 动作参数1
+    params: string; // 动作参数2
+  };
+}
+
+const componentData = {
+  model: {},
+  materialPath: '',
+  privateMaterials: false,
+};
+export class RunScriptAction implements RendererAction {
+  // @ts-ignore
+  run(
+    action: IRunScriptAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>,
+  ) {
+    const props = renderer.props;
+    const { method, params } = action.args;
+    runScript({
+      script: method,
+      params,
+      model: componentData.model,
+      materialPath: componentData.materialPath,
+      privateMaterials: componentData.privateMaterials,
+      createBlockPath: localStorage.getItem('selectedFolder') || undefined,
+    });
+  }
+}
+
+// 注册自定义动作
+// @ts-ignore
+registerAction('runScript', new RunScriptAction());
+
 export default (props: IProps) => {
   const [scriptModalVisible, setScriptModalVisible] = useState(false);
   const [model, setModel] = useState({} as object);
@@ -134,8 +180,17 @@ export default (props: IProps) => {
     },
     isCancel: (value: any) => axios.isCancel(value),
     useMobileUI: false,
+    copy: (contents: string, options?: any) => {
+      navigator.clipboard.writeText(contents);
+      message.success('已复制到剪贴板');
+    },
   };
 
+  useEffect(() => {
+    componentData.model = model;
+    componentData.materialPath = props.path;
+  }, [model, props.path]);
+
   const handleOpenRunScriptModal = () => {
     const values = amisScoped.current
       .getComponentByName('page.form')

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

@@ -34,7 +34,7 @@ const RunScript: React.FC<IProps> = (props) => {
       model: props.model,
       materialPath: props.materialPath,
       privateMaterials: props.privateMaterials,
-      createBlockPath: localStorage.getItem('selectedFolder'),
+      createBlockPath: localStorage.getItem('selectedFolder') || undefined,
     })
       .then((result) => {
         props.onOk(result);

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

@@ -4,6 +4,7 @@ import { callVscode } from '@/webview';
 
 interface Iprops {
   visible: boolean;
+  loading?: boolean;
   onCancel: () => void;
   onOk: (path: string, createPath: string[]) => void;
 }
@@ -34,7 +35,12 @@ const formatTreeData = (node: OriDirectoryTreeNode) => {
   return formatedNode;
 };
 
-const SelectDirectory: React.FC<Iprops> = ({ visible, onOk, onCancel }) => {
+const SelectDirectory: React.FC<Iprops> = ({
+  visible,
+  onOk,
+  onCancel,
+  loading,
+}) => {
   const [tree, setTree] = useState<DirectoryTreeNode[]>([]);
   const [formData, setFormData] = useState<{
     path: string;
@@ -65,8 +71,12 @@ const SelectDirectory: React.FC<Iprops> = ({ visible, onOk, onCancel }) => {
       okText="确定"
       cancelText="关闭"
       onCancel={() => {
+        if (loading) {
+          return;
+        }
         onCancel();
       }}
+      okButtonProps={{ loading }}
       onOk={() => {
         if (!formData.path) {
           message.error('未选择目录');

webview-react/src/pages/blocks/Detail/index.tsx

@@ -155,18 +155,21 @@ export default () => {
       />
       <SelectDirectory
         visible={model.directoryModalVsible}
+        loading={model.loading}
         onCancel={() => {
           model.setDirectoryModalVsible(false);
         }}
         onOk={(path, createPath = []) => {
-          model.setDirectoryModalVsible(false);
+          model.setLoding(true);
           genCodeByBlockMaterial({
             material: model.selectedMaterial.name,
             model: model.selectedMaterial.model,
             path,
             createPath,
             privateMaterials: model.selectedMaterial.privateMaterials,
           }).then(() => {
+            model.setDirectoryModalVsible(false);
+            model.setLoding(false);
             message.success('生成成功');
           });
         }}

webview-react/src/pages/blocks/Detail/model.ts

@@ -23,6 +23,7 @@ export const useModel = () => {
   const [directoryModalVsible, setDirectoryModalVsible] = useState(false);
   const [jsonToTsModalVisble, setJsonToTsModalVisble] = useState(false);
   const [scriptModalVisible, setScriptModalVisible] = useState(false);
+  const [loading, setLoding] = useState(false);
 
   return {
     selectedMaterial,
@@ -39,6 +40,8 @@ export const useModel = () => {
     setJsonToTsModalVisble,
     scriptModalVisible,
     setScriptModalVisible,
+    loading,
+    setLoding,
   };
 };