feat: 1

src/global.less

@@ -131,12 +131,11 @@ ol {
 }
 
 .ant-pro-page-container-children-content {
-  // height: calc(100vh - 122px);
+  // height: calc(100vh - 138px);
   margin: 0 24px 0;
 }
 
 .dn-app {
-  height: calc(100vh - 122px);
   .dn-main-panel-header {
     padding: 5px 0;
   }
@@ -146,7 +145,16 @@ ol {
 
   .dn-main-panel-container.root {
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 138px);
+    .dn-resource.expand {
+      background: #f5f7fa;
+    }
+  }
+  .dn-component-tree {
+    background: #f5f7fa;
+    .dn-designable-form {
+      padding: 24px 0;
+    }
   }
 }
 // .dn-resource.expand .dn-resource-content {

src/pages/Schema/Base/components/Designable/index.tsx

@@ -31,9 +31,7 @@ import {
   TimePicker,
   Switch
 } from './antd'
-import { connect, useLocation, useRequest } from 'umi'
-import { updateSchema } from '@/services/api/schema'
-import { message } from 'antd'
+import { connect, useLocation } from 'umi'
 
 GlobalRegistry.registerDesignerLocales({
   'zh-CN': {
@@ -51,21 +49,6 @@ const Designable: FC<DesignableProps> = ({ base, title }) => {
     state: { columnType }
   } = useLocation()
 
-  const { run: tryUpdateSchema } = useRequest(updateSchema, {
-    manual: true,
-    onSuccess: result => {
-      message.success('更新成功')
-      // console.log(genRef.current?.getValue())
-      dispatch({
-        type: 'schemaBase/changeSchemaByColumnType',
-        payload: {
-          columnType,
-          schema: result.schema
-        }
-      })
-    }
-  })
-
   const engine = useMemo(
     () =>
       createDesigner({
@@ -85,15 +68,12 @@ const Designable: FC<DesignableProps> = ({ base, title }) => {
     []
   )
 
-  console.log(base[columnType])
-
   return (
     <Designer engine={engine} position="relative">
       <StudioPanel
         logo={<span className="text-base font-medium">{title}</span>}
         actions={
           <ActionsWidget
-            updateAction={tryUpdateSchema}
             schema={{
               form: {
                 labelCol: 6,

src/pages/Schema/Base/components/Designable/service/schema.ts

@@ -7,14 +7,10 @@ export const saveSchema = (designer: Engine) => {
     'formily-schema',
     JSON.stringify(transformToSchema(designer.getCurrentTree()))
   )
-  console.log(JSON.stringify(transformToSchema(designer.getCurrentTree())))
-
   message.success('Save Success')
 }
 
 export const loadInitialSchema = (designer: Engine, schema: string) => {
-  console.log(typeof schema)
-
   try {
     designer.setCurrentTree(transformToTreeNode(schema))
   } catch {}

src/pages/Schema/Base/components/Designable/widgets/ActionsWidget.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect } from 'react'
-import { Space, Button } from 'antd'
+import { Space, Button, message } from 'antd'
 import { useDesigner, TextWidget } from '@designable/react'
 import { GlobalRegistry } from '@designable/core'
 import { observer } from '@formily/react'
 import { loadInitialSchema } from '../service'
-import { useHistory, useLocation } from 'umi'
+import { useDispatch, useHistory, useLocation, useRequest } from 'umi'
 import { transformToSchema } from '@designable/formily-transformer'
+import { updateSchema } from '@/services/api/schema'
 
-export const ActionsWidget = observer(({ updateAction, schema }) => {
+export const ActionsWidget = observer(({ schema }) => {
   const history = useHistory()
   const designer = useDesigner()
   const {
@@ -17,9 +18,23 @@ export const ActionsWidget = observer(({ updateAction, schema }) => {
     schema && loadInitialSchema(designer, schema)
     GlobalRegistry.setDesignerLanguage('zh-cn')
   }, [schema])
+  const dispatch = useDispatch()
+  const { run: tryUpdateSchema } = useRequest(updateSchema, {
+    manual: true,
+    onSuccess: result => {
+      message.success('更新成功')
+      dispatch({
+        type: 'schemaBase/changeSchemaByColumnType',
+        payload: {
+          columnType,
+          schema: result.schema
+        }
+      })
+    }
+  })
 
   const saveSchema = () => {
-    updateAction({
+    tryUpdateSchema({
       columnType,
       schema: transformToSchema(designer.getCurrentTree()).schema
     })