lowcoding · wjkang · Aug 13, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 13, 2023
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
 	"displayName": "lowcode",
 	"description": "lowcode tool, support ChatGPT",
 	"author": "wjkang <[email protected]>",
-	"version": "1.4.11",
+	"version": "1.5.0",
 	"icon": "asset/icon.png",
 	"publisher": "wjkang",
 	"repository": "https://github.com/lowcoding/lowcode-vscode",

diff --git a/src/utils/generate.ts b/src/utils/generate.ts
@@ -18,6 +18,7 @@ import { getInnerLibs } from './lib';
 import { getOutputChannel } from './outputChannel';
 import { getLastAcitveTextEditor } from '../context';
 import { getSyncFolder } from './config';
+import { createChatCompletionForScript } from './openai';
 
 export const genCodeByBlock = async (data: {
   material: string;
@@ -58,12 +59,14 @@ export const genCodeByBlock = async (data: {
         }
       });
     }
-    const scriptFile = path.join(tempWorkPath, 'script/index.js');
+    const scriptFile = path.join(block, 'script/index.js'); // 不能使用临时目录里的文件，会导致 ts-node 报错
     const hook = {
       beforeCompile: (context: any) =>
         <object | undefined>Promise.resolve(undefined),
       afterCompile: (context: any) =>
         <object | undefined>Promise.resolve(undefined),
+      complete: (context: any) =>
+        <object | undefined>Promise.resolve(undefined),
     };
     if (fs.existsSync(scriptFile)) {
       delete eval('require').cache[eval('require').resolve(scriptFile)];
@@ -74,6 +77,9 @@ export const genCodeByBlock = async (data: {
       if (script.afterCompile) {
         hook.afterCompile = script.afterCompile;
       }
+      if (script.complete) {
+        hook.complete = script.complete;
+      }
     }
     const context = {
       model: data.model,
@@ -82,6 +88,11 @@ export const genCodeByBlock = async (data: {
       env: getEnv(),
       libs: getInnerLibs(),
       outputChannel: getOutputChannel(),
+      log: getOutputChannel(),
+      createBlockPath: path
+        .join(data.path, ...data.createPath)
+        .replace(/\\/g, '/'),
+      createChatCompletion: createChatCompletionForScript,
     };
     data.model = {
       ...data.model,
@@ -106,6 +117,7 @@ export const genCodeByBlock = async (data: {
       path.join(tempWorkPath, 'src'),
       path.join(data.path, ...data.createPath),
     );
+    await hook.complete(context);
     fs.removeSync(tempWorkPath);
   } catch (ex: any) {
     fs.remove(tempWorkPath);
@@ -182,6 +194,8 @@ export const genCodeBySnippet = async (data: {
     env: getEnv(),
     libs: getInnerLibs(),
     outputChannel: getOutputChannel(),
+    log: getOutputChannel(),
+    createChatCompletion: createChatCompletionForScript,
     code: '',
   };
   const extendModel = await hook.beforeCompile(context);

diff --git a/src/utils/openai.ts b/src/utils/openai.ts
@@ -1,5 +1,6 @@
 import * as https from 'https';
 import { TextDecoder } from 'util';
+import { getChatGPTConfig } from './config';
 
 export const createChatCompletion = (options: {
   apiKey: string;
@@ -104,3 +105,19 @@ export const createChatCompletion = (options: {
     request.write(JSON.stringify(body));
     request.end();
   });
+
+export const createChatCompletionForScript = (options: {
+  messages: { role: 'system' | 'user' | 'assistant'; content: string }[];
+  handleChunk?: (data: { text?: string; hasMore: boolean }) => void;
+}) => {
+  const config = getChatGPTConfig();
+  return createChatCompletion({
+    hostname: config.hostname,
+    apiPath: config.apiPath,
+    apiKey: config.apiKey,
+    model: config.model,
+    messages: options.messages,
+    maxTokens: config.maxTokens,
+    handleChunk: options.handleChunk,
+  });
+};
diff --git a/src/webview/controllers/script.ts b/src/webview/controllers/script.ts
@@ -6,10 +6,12 @@ import { IMessage } from '../type';
 import { getEnv, rootPath } from '../../utils/vscodeEnv';
 import { getInnerLibs } from '../../utils/lib';
 import { getOutputChannel } from '../../utils/outputChannel';
+import { createChatCompletionForScript } from '../../utils/openai';
 
 export const runScript = async (
   message: IMessage<{
     materialPath: string;
+    createBlockPath?: string;
     script: string;
     params: string;
     model: object;
@@ -28,6 +30,9 @@ export const runScript = async (
         env: getEnv(),
         libs: getInnerLibs(),
         outputChannel: getOutputChannel(),
+        log: getOutputChannel(),
+        createBlockPath: message.data.createBlockPath,
+        createChatCompletion: createChatCompletionForScript,
       };
       const extendModel = await script[message.data.script](context);
       return extendModel;

diff --git a/webview-react/src/components/AmisComponent/index.tsx b/webview-react/src/components/AmisComponent/index.tsx
@@ -165,7 +165,7 @@ export default (props: IProps) => {
       <br></br>
       <Space>
         <Button type="primary" size="small" onClick={handleOpenRunScriptModal}>
-          执行脚本设置模板数据
+          执行脚本
         </Button>
         <Button
           type="primary"

diff --git a/webview-react/src/components/FormilyComponent/index.tsx b/webview-react/src/components/FormilyComponent/index.tsx
@@ -148,7 +148,7 @@ export default (props: IProps) => {
             setScriptModalVisible(true);
           }}
         >
-          执行脚本设置模板数据
+          执行脚本
         </Button>
         <Button
           type="primary"

diff --git a/webview-react/src/components/HeaderControl/index.tsx b/webview-react/src/components/HeaderControl/index.tsx
@@ -18,7 +18,7 @@ import { getSchemaWebUrl } from '@/utils/schema';
 import ConfigSyncFolder from './components/ConfigSyncFolder';
 
 export default () => {
-  const { tab, setTab } = useModel('tab');
+  const { tab } = useModel('tab');
   const presenter = usePresenter();
   const { model } = presenter;
   const menu = (
@@ -34,7 +34,6 @@ export default () => {
       <Menu.Item
         key="1"
         onClick={() => {
-          setTab('empty');
           history.push('/snippets/add/10086');
         }}
       >

diff --git a/webview-react/src/components/RunScript/index.tsx b/webview-react/src/components/RunScript/index.tsx
@@ -34,6 +34,7 @@ const RunScript: React.FC<IProps> = (props) => {
       model: props.model,
       materialPath: props.materialPath,
       privateMaterials: props.privateMaterials,
+      createBlockPath: localStorage.getItem('selectedFolder'),
     })
       .then((result) => {
         props.onOk(result);

diff --git a/webview-react/src/pages/blocks/Detail/index.tsx b/webview-react/src/pages/blocks/Detail/index.tsx
@@ -39,7 +39,7 @@ export default () => {
                       model.setScriptModalVisible(true);
                     }}
                   >
-                    执行脚本设置模板数据
+                    执行脚本
                   </Button>
                   <Button
                     type="primary"

diff --git a/webview-react/src/pages/blocks/List/index.tsx b/webview-react/src/pages/blocks/List/index.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { Input, Row, message, Select } from 'antd';
+import { Input, Row, message, Select, Empty, Space, Button } from 'antd';
 import styles from './index.less';
-import { genCodeByBlockMaterial } from '@/webview/service';
+import {
+  executeVscodeCommand,
+  genCodeByBlockMaterial,
+} from '@/webview/service';
 import SelectDirectory from '@/components/SelectDirectory';
 import { usePresenter } from './presenter';
 import BlockItem from './components/BlockItem';
@@ -45,7 +48,7 @@ export default () => {
         </div>
       </div>
       <Row gutter={[16, 16]}>
-        {model.materials.map((s) => (
+        {model.materials?.map((s) => (
           <BlockItem
             key={s.id}
             blockItem={s}
@@ -56,6 +59,28 @@ export default () => {
           ></BlockItem>
         ))}
       </Row>
+      {model.materials?.length === 0 && (
+        <Empty
+          image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+          imageStyle={{
+            height: 60,
+          }}
+          description={
+            <span>暂无数据，可点击上面更多菜单，选择创建区块模板</span>
+          }
+        >
+          <Button
+            type="primary"
+            onClick={() => {
+              executeVscodeCommand({
+                command: 'lowcode.openDownloadMaterials',
+              });
+            }}
+          >
+            下载物料
+          </Button>
+        </Empty>
+      )}
       <SelectDirectory
         visible={model.directoryModalVsible}
         onCancel={() => {

diff --git a/webview-react/src/pages/blocks/List/model.ts b/webview-react/src/pages/blocks/List/model.ts
@@ -2,27 +2,28 @@ import { useState } from '@/hooks/useImmer';
 
 export const useModel = () => {
   const [materials, setMaterials] = useState<
-    {
-      path: string;
-      name: string;
-      model: object;
-      schema: object;
-      preview: {
-        title?: string;
-        description?: string;
-        img?: string[];
-        category?: string[];
-      };
-      template: string;
-      privateMaterials?: boolean;
-      id: number;
-    }[]
-  >([]);
+    | {
+        path: string;
+        name: string;
+        model: object;
+        schema: object;
+        preview: {
+          title?: string;
+          description?: string;
+          img?: string[];
+          category?: string[];
+        };
+        template: string;
+        privateMaterials?: boolean;
+        id: number;
+      }[]
+    | undefined
+  >(undefined);
   const [oriMaterials, setOriMaterials] = useState<typeof materials>([]);
 
-  const [selectedMaterial, setSelectedMaterial] = useState<typeof materials[0]>(
-    { schema: {}, model: {} } as any,
-  );
+  const [selectedMaterial, setSelectedMaterial] = useState<
+    NonNullable<typeof materials>[0]
+  >({ schema: {}, model: {} } as any);
 
   const [directoryModalVsible, setDirectoryModalVsible] = useState(false);
 

diff --git a/webview-react/src/pages/downloadMaterials/model.ts b/webview-react/src/pages/downloadMaterials/model.ts
@@ -3,7 +3,8 @@ import { IDownloadMaterialsResult } from '@/webview/service';
 
 export const useModel = () => {
   const [tab, setTab] = useState<'blocks' | 'snippets'>('snippets');
-  const [downloadMaterialsVisible, setDownloadMaterialsVisible] = useState(false);
+  const [downloadMaterialsVisible, setDownloadMaterialsVisible] =
+    useState(true);
 
   const [materials, setMaterials] = useState<IDownloadMaterialsResult>({
     blocks: [],

diff --git a/webview-react/src/pages/snippets/Detail/index.tsx b/webview-react/src/pages/snippets/Detail/index.tsx
@@ -54,7 +54,7 @@ export default () => {
                       model.setScriptModalVisible(true);
                     }}
                   >
-                    执行脚本设置模板数据
+                    执行脚本
                   </Button>
                   <Button
                     type="primary"

diff --git a/webview-react/src/pages/snippets/List/index.tsx b/webview-react/src/pages/snippets/List/index.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { Input, Row, Select } from 'antd';
+import { history } from 'umi';
+import { Button, Empty, Input, Row, Select, Space } from 'antd';
 import styles from './index.less';
 import { usePresenter } from './presenter';
 import SnippetItem from './components/SnippetItem';
+import { executeVscodeCommand } from '@/webview/service';
 
 const Search = Input.Search;
 
@@ -44,10 +46,40 @@ export default () => {
         </div>
       </div>
       <Row gutter={[16, 16]}>
-        {model.materials.map((s) => (
+        {model.materials?.map((s) => (
           <SnippetItem snippetItem={s} key={s.id}></SnippetItem>
         ))}
       </Row>
+      {model.materials?.length === 0 && (
+        <Empty
+          image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+          imageStyle={{
+            height: 60,
+          }}
+          description={<span>暂无数据</span>}
+        >
+          <Space>
+            <Button
+              type="primary"
+              onClick={() => {
+                history.push('/snippets/add/10086');
+              }}
+            >
+              添加代码片段
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                executeVscodeCommand({
+                  command: 'lowcode.openDownloadMaterials',
+                });
+              }}
+            >
+              下载物料
+            </Button>
+          </Space>
+        </Empty>
+      )}
     </div>
   );
 };
diff --git a/webview-react/src/pages/snippets/List/model.ts b/webview-react/src/pages/snippets/List/model.ts
@@ -2,22 +2,23 @@ import { useState } from '@/hooks/useImmer';
 
 export const useModel = () => {
   const [materials, setMaterials] = useState<
-    {
-      path: string;
-      name: string;
-      model: object;
-      schema: object;
-      preview: {
-        title?: string;
-        description?: string;
-        img?: string[];
-        category?: string[];
-      };
-      template: string;
-      privateMaterials?: boolean;
-      id: number;
-    }[]
-  >([]);
+    | {
+        path: string;
+        name: string;
+        model: object;
+        schema: object;
+        preview: {
+          title?: string;
+          description?: string;
+          img?: string[];
+          category?: string[];
+        };
+        template: string;
+        privateMaterials?: boolean;
+        id: number;
+      }[]
+    | undefined
+  >(undefined);
   const [oriMaterials, setOriMaterials] = useState<typeof materials>([]);
 
   const [categoryList, setCategoryList] = useState<string[]>([]);

diff --git a/webview-react/src/webview/service.ts b/webview-react/src/webview/service.ts
@@ -533,6 +533,7 @@ export function runScript(data: {
   params: string;
   model: object;
   privateMaterials?: boolean;
+  createBlockPath?: string;
 }) {
   return request<object>({
     cmd: 'runScript',