fix(plugin-workflow): fix styles (#2316)

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

@@ -5,7 +5,6 @@ const useStyles = genStyleHook('nb-action', (token) => {
 
   return {
     [componentCls]: {
-      '.renderButton': {
       position: 'relative',
       '&:hover': { '> .general-schema-designer': { display: 'block' } },
       '&.nb-action-link': {
@@ -44,13 +43,6 @@ const useStyles = genStyleHook('nb-action', (token) => {
         },
       },
     },
-
-      '.popover': {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        width: '100%',
-      },
-    },
   };
 });
 

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

@@ -1,4 +1,5 @@
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
+import { lodash } from '@nocobase/utils';
 import { App, Button, Popover } from 'antd';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
@@ -21,7 +22,6 @@ import { ActionContextProvider } from './context';
 import { useA } from './hooks';
 import { ComposedAction } from './types';
 import { linkageAction } from './utils';
-import { lodash } from '@nocobase/utils';
 
 export const Action: ComposedAction = observer(
   (props: any) => {
@@ -105,7 +105,7 @@ export const Action: ComposedAction = observer(
             }
           }}
           component={tarComponent || Button}
-          className={classnames('renderButton', className)}
+          className={classnames(componentCls, hashId, className)}
           type={props.type === 'danger' ? undefined : props.type}
         >
           {actionTitle}
@@ -115,7 +115,6 @@ export const Action: ComposedAction = observer(
     };
 
     return wrapSSR(
-      <div className={`${componentCls} ${hashId}`}>
       <ActionContextProvider
         button={renderButton()}
         visible={visible}
@@ -131,8 +130,7 @@ export const Action: ComposedAction = observer(
         {!popover && renderButton()}
         {!popover && <div onClick={(e) => e.stopPropagation()}>{props.children}</div>}
         {element}
-        </ActionContextProvider>
-      </div>,
+      </ActionContextProvider>,
     );
   },
   { displayName: 'Action' },
@@ -160,7 +158,17 @@ Action.Popover = observer(
 
 Action.Popover.Footer = observer(
   (props) => {
-    return <div className="popover">{props.children}</div>;
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          width: '100%',
+        }}
+      >
+        {props.children}
+      </div>
+    );
   },
   { displayName: 'Action.Popover.Footer' },
 );

packages/plugins/workflow/src/client/nodes/index.tsx

@@ -441,10 +441,25 @@ export function NodeDefaultView(props) {
                       'x-component': 'fieldset',
                       'x-component-props': {
                         className: css`
+                          .ant-input,
                           .ant-select,
                           .ant-cascader-picker,
                           .ant-picker,
                           .ant-input-number,
+                          .ant-input-affix-wrapper {
+                            &:not(.full-width) {
+                              width: auto;
+                              min-width: 6em;
+                            }
+                          }
+                          .ant-input-affix-wrapper {
+                            &:not(.full-width) {
+                              .ant-input {
+                                width: auto;
+                                min-width: 6em;
+                              }
+                            }
+                          }
                         `,
                       },
                       properties: instruction.fieldset,

packages/plugins/workflow/src/client/style.tsx

@@ -96,7 +96,7 @@ const useStyles = createStyles(({ css, token }) => {
         bottom: 0;
         left: calc(50% - 0.5px);
         width: 1px;
-        background-color: ${token.colorBorder};
+        background-color: ${token.colorBgLayout};
       }
     `,
 
@@ -220,7 +220,9 @@ const useStyles = createStyles(({ css, token }) => {
         font-weight: bold;
 
         &:not(:focus) {
-          transition: background-color 0.3s ease, border-color 0.3s ease;
+          transition:
+            background-color 0.3s ease,
+            border-color 0.3s ease;
           border-color: ${token.colorBorderBg};
           background-color: ${token.colorBgContainerDisabled};
 
@@ -254,7 +256,7 @@ const useStyles = createStyles(({ css, token }) => {
       right: 1em;
       justify-content: center;
       align-items: center;
-      color: ${token.colorText};
+      color: ${token.colorTextLightSolid};
 
       &[type='button'] {
         border: none;
@@ -327,6 +329,7 @@ const useStyles = createStyles(({ css, token }) => {
         top: calc(1.5em - 1px);
         line-height: 1em;
         color: ${token.colorTextSecondary};
+        background-color: ${token.colorBgLayout};
         padding: 1px;
       }
     `,