perf(console): add savePoint

package.json

@@ -54,8 +54,8 @@
   "devDependencies": {
     "@types/react": "^17",
     "@types/react-dom": "^17",
-    "@yuntijs/lint": "^1.5.2",
-    "@yuntijs/ui": "^1.0.0-beta.8",
+    "@yuntijs/lint": "^1.7.1",
+    "@yuntijs/ui": "^1.0.0-beta.63",
     "commitlint": "^18",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",

packages/confirm/package.json

@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@alilc/lowcode-datasource-engine": "^1.0.0",
-    "@formily/antd": "^2.1.4",
     "@formily/core": "^2.1.4",
     "@formily/react": "^2.1.4",
     "@tenx-ui/form-helper": "^0.0.2",

packages/console/.pnpmfile.cjs

@@ -7,7 +7,7 @@ function readPackage(pkg, context) {
   if (pkg.name === '@umijs/max') {
     pkg.dependencies = {
       ...pkg.dependencies,
-      "antd": "^5.1.5",
+      "antd": "^5.20.0",
     }
   }
 

packages/console/config/config.local.ts

@@ -11,7 +11,8 @@
  */
 import { defineConfig } from '@umijs/max';
 
-const yuntiServer = 'http://localhost:8034/';
+// const yuntiServer = 'http://localhost:8034/';
+const yuntiServer = 'http://yunti.botnow.cn/';
 
 export default defineConfig({
   proxy: {

packages/console/package.json

@@ -37,27 +37,27 @@
     "@alilc/lowcode-shell": "^1.2.3",
     "@alilc/lowcode-utils": "^1.2.3",
     "@ant-design/icons": "^4.8.0",
-    "@ant-design/pro-card": "^2.5.2",
-    "@ant-design/pro-layout": "^7.15.2",
-    "@ant-design/pro-list": "^2.5.2",
+    "@ant-design/pro-card": "^2.8.7",
+    "@ant-design/pro-layout": "^7.19.12",
+    "@ant-design/pro-list": "^2.5.66",
     "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@formily/antd": "3.0.0-alpha.2",
+    "@formily/antd-v5": "^1.2.2",
     "@formily/core": "^2.1.4",
-    "@formily/react": "^2.1.4",
+    "@formily/react": "^2.3.2",
     "@tenx-ui/auth-utils": "^0.0.1",
     "@tenx-ui/bff-client": "^0.1.2",
     "@tenx-ui/form-helper": "^0.0.2",
     "@tenx-ui/icon": "^2.4.13",
     "@tenx-ui/icon-materials": "^0.1.2",
     "@tenx-ui/materials": "1.5.31",
     "@tenx-ui/utils": "^2.3.1",
-    "@umijs/max": "^4.0.90",
+    "@umijs/max": "^4.3.11",
     "@yunti/lowcode-datasource-axios-handler": "^1.0.1",
     "@yunti/lowcode-plugin-code-generator": "^2.3.0",
     "@yuntijs/request": "^1.2.0",
-    "@yuntijs/ui-lowcode-materials": "^1.3.0",
+    "@yuntijs/ui-lowcode-materials": "^1.12.0",
     "@yuntijs/yunti-bff-sdk": "^1.0.6",
-    "antd": "^5.15.4",
+    "antd": "^5.20.0",
     "antd-token-previewer": "1.1.0",
     "change-case": "^4.1.2",
     "classnames": "^2.3.2",

packages/console/src/components/ChangeLocale/index.tsx

@@ -37,16 +37,16 @@ export const setLang = (v: string) => {
 const ChangeLocale = () => {
   const langInfo = getLangInfo();
   return (
-    <Tooltip title={langInfo.tooltip}>
+    <Tooltip title={langInfo?.tooltip}>
       <Button
         onClick={() => {
-          setLang(langInfo.change);
+          setLang(langInfo?.change);
           window.location.reload();
         }}
         size="large"
         type="text"
       >
-        {langInfo.text}
+        {langInfo?.text}
       </Button>
     </Tooltip>
   );

packages/console/src/components/Designer/components/Preview/parse-assets.ts

@@ -36,7 +36,7 @@ function genLowcodeComp(
         libraryMap,
         projectSchema: schema as unknown as DesignerProjectSchema,
         rendererName: 'LowCodeRenderer',
-        locale: getLangInfo().i18nKey,
+        locale: getLangInfo()?.i18nKey,
         messages: schema?.i18n || {},
         schema: schema?.componentsTree?.[0],
         components,

packages/console/src/components/Designer/components/Preview/renderer.tsx

@@ -85,7 +85,7 @@ const Renderer: React.FC<RendererProps> = (props: RendererProps) => {
             }
             return createElement(Comp, viewProps, children);
           }}
-          locale={getLangInfo().i18nKey}
+          locale={getLangInfo()?.i18nKey}
           messages={projectSchema?.i18n || {}}
           schema={schema}
         />

packages/console/src/components/Designer/plugins/plugin-config-i18n/pane/index.tsx

@@ -1,5 +1,5 @@
 import { event, project } from '@alilc/lowcode-engine';
-import { ArrayTable, Editable, FormButtonGroup, FormItem, Input, Submit } from '@formily/antd';
+import { ArrayTable, Editable, FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5';
 import { ArrayField, createForm, onFormInputChange } from '@formily/core';
 import { FormProvider, createSchemaField } from '@formily/react';
 import { Input as AntdInput, Space, message } from 'antd';

packages/console/src/components/Designer/plugins/plugin-git-commit/index.tsx

@@ -31,6 +31,7 @@ export const PluginGitCommit = (
           icon: <BranchesOutlined className="icon" style={{ fontSize: '20px' }} />,
           description: pluginTitle,
           align: 'bottom',
+          ctx,
         },
         content: injectPaneProps(GitCommitPane),
       });

packages/console/src/components/Designer/plugins/plugin-git-commit/pane/index.tsx

@@ -1,3 +1,4 @@
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 import { Typography as Tpy } from '@tenx-ui/materials';
 import {
   Avatar,
@@ -30,6 +31,7 @@ export interface GitCommit {
 }
 
 export interface GitCommitPaneInjectProps {
+  ctx: IPublicModelPluginContext;
   /** 提交列表 */
   commits: GitCommit[];
   /** 首次加载 loading */
@@ -44,6 +46,8 @@ export interface GitCommitPaneInjectProps {
   hasNextPage: boolean;
   /** 提交输入框的空白提示 */
   commitInputPlaceholder?: string;
+  /** 保存 schema 的函数 */
+  saveSchema?: () => Promise<void>;
 }
 
 export type InjectGitCommitPanePropsFunc = (pane: React.FC) => React.FC<GitCommitPaneInjectProps>;
@@ -57,13 +61,15 @@ const { Text, Paragraph } = Typography;
 export const GitCommitPane: React.FC<GitCommitPaneInjectProps> = props => {
   const [form] = Form.useForm();
   const {
+    ctx,
     commits,
     loading,
     doCommit,
     loadMore,
     loadMoreLoading,
     hasNextPage,
     commitInputPlaceholder,
+    saveSchema,
   } = props;
   const [btnLoading, setBtnLoading] = React.useState(false);
   const submitCommit = async () => {
@@ -74,12 +80,19 @@ export const GitCommitPane: React.FC<GitCommitPaneInjectProps> = props => {
       return;
     }
     setBtnLoading(true);
+    const lowcodeHistory = ctx.project.getCurrentDocument()?.history;
+    const isSavePoint = lowcodeHistory?.isSavePoint();
+    // 如果存在未保存的内容，则先保存
+    if (isSavePoint) {
+      await saveSchema();
+      lowcodeHistory?.savePoint();
+    }
     try {
       await doCommit(message);
       form.resetFields();
       msg.success('提交成功');
     } catch {
-      //
+      msg.warning('提交失败');
     } finally {
       setBtnLoading(false);
     }

packages/console/src/components/Designer/plugins/plugin-save/content.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@alifd/next';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
+import { Badge } from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+interface SavePluginContentProps {
+  ctx: IPublicModelPluginContext;
+}
+export const SavePluginContent: React.FC<SavePluginContentProps> = ({ ctx }) => {
+  const { event, hotkey, project } = ctx;
+
+  const doc = useMemo(() => project.getCurrentDocument(), [project]);
+
+  const [isSavePoint, setIsSavePoint] = useState(false);
+
+  const save = useCallback(() => {
+    // 抛出一个 save 事件，让业务自己去实现
+    event.emit('save');
+    // 创建一个保存点，用于检查是否有未保存的更改
+    doc?.history.savePoint();
+    setIsSavePoint(false);
+  }, [doc?.history, event]);
+
+  useEffect(() => {
+    const checkIsSavePointTimeout = setInterval(
+      () => setIsSavePoint(doc?.history.isSavePoint()),
+      2000
+    );
+
+    return () => {
+      clearInterval(checkIsSavePointTimeout);
+    };
+  }, [doc?.history]);
+
+  useEffect(() => {
+    hotkey.bind('command+s', e => {
+      e.preventDefault();
+      save();
+    });
+  }, [hotkey, save]);
+
+  return (
+    <Badge color="orange" dot={isSavePoint} styles={{ indicator: { width: 10, height: 10 } }}>
+      <Button
+        onClick={e => {
+          e.preventDefault();
+          save();
+        }}
+        type="primary"
+      >
+        保存
+      </Button>
+    </Badge>
+  );
+};

packages/console/src/components/Designer/plugins/plugin-save/index.tsx

@@ -1,7 +1,8 @@
 // import { Button } from 'antd';
-import { Button } from '@alifd/next';
 import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
+import { SavePluginContent } from './content';
+
 const pluginName = 'PluginSave';
 export const PluginSave = (ctx: IPublicModelPluginContext) => {
   return {
@@ -13,30 +14,15 @@ export const PluginSave = (ctx: IPublicModelPluginContext) => {
     },
     // 插件的初始化函数，在引擎初始化之后会立即调用
     init() {
-      const { event, skeleton, hotkey } = ctx;
+      const { skeleton } = ctx;
       skeleton.add({
         name: pluginName,
         area: 'topArea',
         type: 'Widget',
         props: {
           align: 'right',
         },
-        content: (
-          <Button
-            onClick={e => {
-              e.preventDefault();
-              // 抛出一个 save 事件，让业务自己去实现
-              event.emit('save');
-            }}
-            type="primary"
-          >
-            保存
-          </Button>
-        ),
-      });
-      hotkey.bind('command+s', e => {
-        e.preventDefault();
-        event.emit('save');
+        content: <SavePluginContent ctx={ctx} />,
       });
     },
   };

packages/console/src/pages/ComponentDesigner/utils/injectPaneProps.tsx

@@ -8,6 +8,7 @@ import { PreviewModalInjectProps } from '@/components/Designer/plugins/plugin-pr
 import { getTreeById, initSdk, useSdk } from '@/utils';
 
 import { PaneInjectProps, PaneInjectPropsKeys } from '../../../components/Designer/type';
+import { saveSchema } from './helper';
 
 export const injectPaneProps = (
   Pane: React.FC<PaneInjectProps>,
@@ -84,7 +85,8 @@ export const injectPaneProps = (
 export const injectGitCommitPaneProps = (Pane: React.FC<GitCommitPaneInjectProps>) => {
   const PropsProviderWrapper: React.FC = props => {
     const { componentId } = useMatch({ path: 'design/components/:componentId' })?.params || {};
-    const sdk = useSdk({ tree: getTreeById(componentId) });
+    const tree = getTreeById(componentId);
+    const sdk = useSdk({ tree });
     const res = sdk.useGetComponentCommitsInfinite(
       (pageIndex, previousData) => {
         if (previousData && !previousData?.component?.commits?.hasNextPage) {
@@ -109,6 +111,7 @@ export const injectGitCommitPaneProps = (Pane: React.FC<GitCommitPaneInjectProps
       loadMoreLoading: !lastPaginedData,
       hasNextPage: hasNextPage === undefined ? true : hasNextPage,
       commitInputPlaceholder: `请填写提交信息，默认会带上 'Update component component-xxxxx: ' 的前缀 '`,
+      saveSchema,
     };
     return <Pane {...props} {...injectProps} />;
   };

packages/console/src/pages/PageDesigner/utils/injectPaneProps.tsx

@@ -8,6 +8,7 @@ import { PreviewModalInjectProps } from '@/components/Designer/plugins/plugin-pr
 import { getTreeById, initSdk, useSdk } from '@/utils';
 
 import { PaneInjectProps, PaneInjectPropsKeys } from '../../../components/Designer/type';
+import { saveSchema } from './helper';
 
 export const injectPaneProps = (
   Pane: React.FC<PaneInjectProps>,
@@ -82,7 +83,8 @@ export const injectPaneProps = (
 export const injectGitCommitPaneProps = (Pane: React.FC<GitCommitPaneInjectProps>) => {
   const PropsProviderWrapper: React.FC = props => {
     const { appId, pageId } = useMatch({ path: 'design/apps/:appId/pages/:pageId' })?.params || {};
-    const sdk = useSdk({ tree: getTreeById(appId) });
+    const tree = getTreeById(appId);
+    const sdk = useSdk({ tree });
     const res = sdk.useGetPageCommitsInfinite(
       (pageIndex, previousData) => {
         if (previousData && !previousData?.page?.commits?.hasNextPage) {
@@ -106,6 +108,7 @@ export const injectGitCommitPaneProps = (Pane: React.FC<GitCommitPaneInjectProps
       loadMore: () => setSize(size + 1),
       loadMoreLoading: !lastPaginedData,
       hasNextPage: hasNextPage === undefined ? true : hasNextPage,
+      saveSchema,
     };
     return <Pane {...props} {...injectProps} />;
   };