fix: 修复问题

JackySoft · Nov 6, 2024 · 6d27f8e · 6d27f8e
1 parent 731bb7c
commit 6d27f8e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 36 deletions.
diff --git a/packages/admin/src/pages/page/index.tsx b/packages/admin/src/pages/page/index.tsx
@@ -8,12 +8,17 @@ import { message } from '@/utils/AntdGlobal';
 import { getPageDetail } from '@/api/index';
 import locale from 'antd/locale/zh_CN';
 import 'dayjs/locale/zh-cn';
+import { ComItemType, ConfigType } from '@materials/types/index';
 export default function () {
   const [theme, setTheme] = useState('');
+  const [pageData, setPageData] = useState<{ config: ConfigType; elements: ComItemType[] }>();
   const { id, env } = useParams();
-  const savePageInfo = usePageStore(
+  const { savePageInfo, clearPageInfo } = usePageStore(
     useShallow((state) => {
-      return state.savePageInfo;
+      return {
+        savePageInfo: state.savePageInfo,
+        clearPageInfo: state.clearPageInfo,
+      };
     }),
   );
   const navigate = useNavigate();
@@ -32,6 +37,7 @@ export default function () {
             console.info('【json数据】', res.page_data);
             message.error('页面数据格式错误，请检查');
           }
+          clearPageInfo();
           savePageInfo({
             pageId: res.id,
             pageName: res.name,
@@ -42,6 +48,7 @@ export default function () {
             prd_publish_id: res.prd_publish_id,
             ...pageData,
           });
+          setPageData(pageData);
           setTheme(pageData.config.props.theme || '#1677ff');
         })
         .catch(() => {
@@ -62,7 +69,7 @@ export default function () {
         },
       }}
     >
-      <Page />
+      <Page config={pageData?.config} elements={pageData?.elements} />
     </ConfigProvider>
   );
 }
diff --git a/packages/admin/src/pages/project/index.tsx b/packages/admin/src/pages/project/index.tsx
@@ -6,10 +6,12 @@ import { message } from '@/utils/AntdGlobal';
 import NotFound from './notFound';
 import Page from '@marsview/materials/Page/Page';
 import { useShallow } from 'zustand/react/shallow';
+import { ComItemType, ConfigType } from '@materials/types/index';
 
 export default function () {
-  const { projectId, env, pageId } = useParams();
+  const [pageData, setPageData] = useState<{ config: ConfigType; elements: ComItemType[] }>();
   const [notFound, setNotFound] = useState(false);
+  const { projectId, env, pageId } = useParams();
   const { savePageInfo, clearPageInfo } = usePageStore(
     useShallow((state) => {
       return {
@@ -19,7 +21,6 @@ export default function () {
     }),
   );
   useEffect(() => {
-    clearPageInfo();
     getPageDetail(env as string, Number(pageId))
       .then((res: any) => {
         let pageData: any = {};
@@ -30,18 +31,20 @@ export default function () {
           console.info('【json数据】', res.page_data);
           message.error('页面数据格式错误，请检查');
         }
+        clearPageInfo();
         savePageInfo({
           pageId: res.id,
           pageName: res.name,
           remark: res.remark,
           ...pageData,
         });
+        setPageData(pageData);
         setNotFound(false);
       })
       .catch(() => {
         setNotFound(true);
       });
   }, [projectId, pageId]);
 
-  return <>{notFound ? <NotFound /> : <Page />}</>;
+  return <>{notFound ? <NotFound /> : <Page config={pageData?.config} elements={pageData?.elements} />}</>;
 }
diff --git a/packages/editor/src/pages/home/lib/components/InitValue.ts b/packages/editor/src/pages/home/lib/components/InitValue.ts
@@ -4,9 +4,11 @@
 
 // 默认组件代码
 export const defaultReactCode = `/**
-* 支持React、Antd、dayjs 等插件使用，需要从window对象中导入：
-* eg: const { Button } = window.antd;
+* 支持React、Antd、dayjs、Plots 等插件使用，需要从window对象中导入：
+* 例如: 
+* const { Button } = window.antd;
 * const { useEffect,useState } = window.React;
+* const { Line } = window.Plots;
 */
 export default ({ id, type, config, onClick }, ref) => {
   const { Button } = window.antd;
@@ -97,16 +99,7 @@ export default {
       name: '点击事件',
     },
   ],
-  methods: [
-    {
-      name: 'startLoading',
-      title: '开始loading',
-    },
-    {
-      name: 'endLoading',
-      title: '结束loading',
-    },
-  ],
+  methods: [],
 };   
 `;
 

diff --git a/packages/editor/src/pages/home/lib/components/ReactEditor.tsx b/packages/editor/src/pages/home/lib/components/ReactEditor.tsx
@@ -4,6 +4,7 @@ import * as prettier from 'prettier';
 import parserJavaScript from 'prettier/parser-babel';
 import { useDebounceFn } from 'ahooks';
 import * as antd from 'antd';
+import * as Plots from '@ant-design/plots';
 import { Spin, Splitter } from 'antd';
 import dayjs from 'dayjs';
 import { useKeyPress } from 'ahooks';
@@ -30,6 +31,7 @@ export default forwardRef((_: any, ref: any) => {
     window.React = window.React || React;
     window.dayjs = window.dayjs || dayjs;
     window.antd = window.antd || antd;
+    window.Plots = window.Plots || Plots;
   }
 
   // 初始化代码

diff --git a/packages/materials/Page/Page.tsx b/packages/materials/Page/Page.tsx
@@ -1,32 +1,21 @@
-import React, { useEffect } from 'react';
-import { useShallow } from 'zustand/react/shallow';
+import { memo, useEffect } from 'react';
 import MarsRender from '@materials/MarsRender/MarsRender';
-import { usePageStore } from '@materials/stores/pageStore';
 import { handleActionFlow } from '@materials/utils/action';
+import { ComItemType, ConfigType } from '@materials/types/index';
 
 /**
  * @param props 组件本身属性
  * @param style 组件样式
  * @returns
  */
-const Page: React.FC = () => {
-  // 页面组件
-  const { config, elements } = usePageStore(
-    useShallow((state) => {
-      return {
-        config: state.page.config,
-        elements: state.page.elements,
-      };
-    }),
-  );
-
+const Page = ({ config, elements }: { config?: ConfigType; elements?: ComItemType[] }) => {
   useEffect(() => {
-    config.events?.forEach((event) => {
+    config?.events?.forEach((event: any) => {
       if (event.actions?.length > 0) {
         handleActionFlow(event.actions, {});
       }
     });
-  }, [config.events]);
-  return <div style={config.style}>{<MarsRender elements={elements || []} />}</div>;
+  }, [config?.events]);
+  return <div style={config?.style}>{<MarsRender elements={elements || []} />}</div>;
 };
-export default Page;
+export default memo(Page);