fix: action area (#1188)

Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1188

packages/core/client/src/schema-component/antd/action/Action.Area.style.ts

@@ -1,7 +1,30 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => {
-  return css`
-    padding-top: ${token.padding}px;
-  `;
+  return {
+    container: css`
+      padding-top: ${token.padding}px;
+    `,
+    footer: css`
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      flex-shrink: 0;
+      padding-bottom: ${token.padding}px;
+      border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+      .ant-btn {
+        margin-right: ${token.margin}px;
+      }
+
+      .title {
+        flex: 1;
+        margin: 0;
+        color: rgba(0, 0, 0, 0.88);
+        font-weight: 600;
+        font-size: ${token.fontSizeHeading3}px;
+        line-height: ${token.lineHeightHeading3};
+        padding-right: 24px;
+      }
+    `,
+  };
 });

packages/core/client/src/schema-component/antd/action/Action.Area.tsx

@@ -32,11 +32,13 @@ export const ActionAreaStub = () => {
 
 export const ActionAreaPlayer = ({ children }) => {
   const { visible, setVisible } = useActionContext();
-  const { prevSetVisible, setPrevSetVisible, ref = { current: null } } = useContext(ActionAreaContext);
+  const { prevSetVisible, setPrevSetVisible, ref } = useContext(ActionAreaContext);
   useEffect(() => {
     if (visible) {
       setPrevSetVisible?.(() => {
         prevSetVisible?.(false);
+        // 因为无法判断是不是自己之前的那个 setVisible，如果是同一个 setVisible 那么上面那个设置会导致不显示
+        setVisible(true);
         return setVisible;
       });
     }
@@ -47,22 +49,38 @@ export const ActionAreaPlayer = ({ children }) => {
 
 export const ActionArea: ComposedActionDrawer = observer(
   (props) => {
-    const { footerNodeName = 'Action.Drawer.Footer' } = props;
+    const { footerNodeName = 'ActionArea.Footer' } = props;
     const schema = useFieldSchema();
     const field = useField();
     const { styles } = useStyles();
 
     const Current = () => (
-      <div className={styles}>
-        <RecursionField
-          basePath={field.address}
-          schema={schema}
-          onlyRenderProperties
-          filterProperties={(s) => {
-            return s['x-component'] !== footerNodeName;
-          }}
-        />
-      </div>
+      <>
+        <div className={styles.footer}>
+          <div className="title">
+            <strong>{field.title}</strong>
+          </div>
+          <RecursionField
+            basePath={field.address}
+            schema={schema}
+            onlyRenderProperties
+            filterProperties={(s) => {
+              return s['x-component'] === footerNodeName;
+            }}
+          />
+        </div>
+
+        <div className={styles.container}>
+          <RecursionField
+            basePath={field.address}
+            schema={schema}
+            onlyRenderProperties
+            filterProperties={(s) => {
+              return s['x-component'] !== footerNodeName;
+            }}
+          />
+        </div>
+      </>
     );
 
     return (

packages/plugins/@tachybase/plugin-workflow/src/client/style.tsx

@@ -45,7 +45,7 @@ const useStyles = createStyles(({ css, token }) => {
         overflow-y: scroll;
         padding: 8px;
         background-color: white;
-        width: 800px;
+        width: 600px;
       }
 
       .workflow-canvas-wrapper {