fix(plugin-workflow): fix style details (#6240)

* fix(plugin-workflow): fix style details

* fix(plugin-workflow): revert node id back due to e2e fails

packages/plugins/@nocobase/plugin-workflow-parallel/src/client/ParallelInstruction.tsx

@@ -109,6 +109,8 @@ export default class extends Instruction {
                         padding-top: 2em;
 
                         > button {
+                          line-height: 1;
+
                           .anticon {
                             transform: rotate(45deg);
                           }
@@ -140,6 +142,7 @@ export default class extends Instruction {
               className={css`
                 position: relative;
                 top: 1em;
+                line-height: 1;
                 transform-origin: center;
                 transform: rotate(45deg);
 

packages/plugins/@nocobase/plugin-workflow/src/client/components/DrawerDescription.tsx

@@ -43,7 +43,7 @@ const useStyles = createStyles(({ css, token }) => {
 });
 
 export function DrawerDescription(props) {
-  const { label, title, description } = props;
+  const { label, title, icon, description } = props;
   const { styles } = useStyles();
 
   return (
@@ -51,7 +51,9 @@ export function DrawerDescription(props) {
       <dl>
         <dt>{label}</dt>
         <dd>
-          <Tag style={{ background: 'none' }}>{title}</Tag>
+          <Tag icon={icon} style={{ background: 'none' }}>
+            {title}
+          </Tag>
         </dd>
       </dl>
       {description ? <p>{description}</p> : null}

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx

@@ -697,6 +697,7 @@ export function NodeDefaultView(props) {
                               'x-component-props': {
                                 label: lang('Node type'),
                                 title: instruction.title,
+                                icon: instruction.icon,
                                 description: instruction.description,
                               },
                             },

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

@@ -256,7 +256,7 @@ const useStyles = createStyles(({ css, token }) => {
       position: relative;
       width: 16em;
       background: ${token.colorBgContainer};
-      padding: 1em;
+      padding: 0.75em;
       box-shadow: ${token.boxShadowTertiary};
       border-radius: ${token.borderRadiusLG}px;
       cursor: pointer;
@@ -266,7 +266,7 @@ const useStyles = createStyles(({ css, token }) => {
         box-shadow: ${token.boxShadow};
 
         .workflow-node-remove-button {
-          display: block;
+          opacity: 1;
         }
       }
 
@@ -275,11 +275,10 @@ const useStyles = createStyles(({ css, token }) => {
       }
 
       .workflow-node-remove-button {
-        display: none;
-        position: absolute;
-        right: 0;
-        top: 0;
+        opacity: 0;
         color: ${token.colorText};
+        font-size: ${token.fontSizeIcon}px;
+        line-height: 1em;
 
         &[disabled] {
           display: none;
@@ -325,9 +324,6 @@ const useStyles = createStyles(({ css, token }) => {
 
     nodeJobButtonClass: css`
       display: flex;
-      position: absolute;
-      top: 0;
-      right: 0;
       justify-content: center;
       align-items: center;
       color: ${token.colorTextLightSolid};
@@ -335,19 +331,27 @@ const useStyles = createStyles(({ css, token }) => {
 
     nodeHeaderClass: css`
       display: flex;
+      justify-content: space-between;
+      align-items: center;
       margin-bottom: 0.5em;
 
       .workflow-node-actions {
-        position: relative;
       }
     `,
 
     nodeMetaClass: css`
       flex-grow: 1;
+      display: flex;
+      align-items: center;
+
+      .ant-tag {
+        max-width: 10em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
       .workflow-node-id {
         color: ${token.colorTextDescription};
-
         &:before {
           content: '#';
         }