style: optimize button style for no-permission state (#6552)

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

@@ -17,7 +17,12 @@ import { ComposedAction } from './types';
 export const ActionLink: ComposedAction = withDynamicSchemaProps(
   observer((props: any) => {
     return (
-      <Action {...props} component={props.component || 'a'} className={classnames('nb-action-link', props.className)} />
+      <Action
+        {...props}
+        component={props.component || 'a'}
+        className={classnames('nb-action-link', props.className)}
+        isLink
+      />
     );
   }),
   { displayName: 'ActionLink' },

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

@@ -247,7 +247,6 @@ const InternalAction: React.FC<InternalActionProps> = observer(function Com(prop
   const aclCtx = useACLActionParamsContext();
   const { run, element, disabled: disableAction } = useAction?.(actionCallback) || ({} as any);
   const disabled = form.disabled || field.disabled || field.data?.disabled || propsDisabled || disableAction;
-
   const buttonStyle = useMemo(() => {
     return {
       ...style,
@@ -538,6 +537,7 @@ const RenderButtonInner = observer(
     Designer: React.ElementType;
     designerProps: any;
     title: string;
+    isLink?: boolean;
   }) => {
     const {
       designable,
@@ -558,6 +558,7 @@ const RenderButtonInner = observer(
       Designer,
       designerProps,
       title,
+      isLink,
       ...others
     } = props;
     const debouncedClick = useCallback(
@@ -583,7 +584,7 @@ const RenderButtonInner = observer(
 
     const actionTitle = title || field?.title;
     const { opacity, ...restButtonStyle } = buttonStyle;
-
+    const linkStyle = isLink && opacity ? { opacity } : undefined;
     return (
       <SortableItem
         role="button"
@@ -592,16 +593,16 @@ const RenderButtonInner = observer(
         onMouseEnter={handleMouseEnter}
         // @ts-ignore
         loading={field?.data?.loading || loading}
-        icon={typeof icon === 'string' ? <Icon style={{ opacity }} type={icon} /> : icon}
+        icon={typeof icon === 'string' ? <Icon type={icon} style={linkStyle} /> : icon}
         disabled={disabled}
-        style={restButtonStyle}
+        style={isLink ? restButtonStyle : buttonStyle}
         onClick={process.env.__E2E__ ? handleButtonClick : debouncedClick} // E2E 中的点击操作都是很快的，如果加上 debounce 会导致 E2E 测试失败
         component={tarComponent || Button}
         className={classnames(componentCls, hashId, className, 'nb-action')}
         type={type === 'danger' ? undefined : type}
       >
         {actionTitle && (
-          <span className={icon ? 'nb-action-title' : null} style={{ opacity }}>
+          <span className={icon ? 'nb-action-title' : null} style={linkStyle}>
             {actionTitle}
           </span>
         )}

packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx

@@ -267,6 +267,13 @@ function FinallyButton({
 }) {
   const { getCollection } = useCollectionManager_deprecated();
   const aclCtx = useACLActionParamsContext();
+  const buttonStyle = useMemo(() => {
+    const shouldApplyOpacity = designable && (field?.data?.hidden || !aclCtx);
+    const opacityValue = componentType !== 'link' ? (shouldApplyOpacity ? 0.1 : 1) : 1;
+    return {
+      opacity: opacityValue,
+    };
+  }, [designable, field?.data?.hidden, aclCtx, componentType]);
 
   if (inheritsCollections?.length > 0) {
     if (!linkageFromForm) {
@@ -276,6 +283,7 @@ function FinallyButton({
           danger={props.danger}
           type={componentType}
           icon={<DownOutlined />}
+          style={{ ...props?.style, ...buttonStyle }}
           buttonsRender={([leftButton, rightButton]) => [
             React.cloneElement(leftButton as React.ReactElement<any, string>, {
               style: props?.style,
@@ -296,7 +304,13 @@ function FinallyButton({
       ) : (
         <Dropdown menu={menu}>
           {
-            <Button aria-label={props['aria-label']} icon={icon} type={componentType} danger={props.danger}>
+            <Button
+              aria-label={props['aria-label']}
+              icon={icon}
+              type={componentType}
+              danger={props.danger}
+              style={{ ...props?.style, ...buttonStyle }}
+            >
               {props.children} <DownOutlined />
             </Button>
           }
@@ -321,6 +335,7 @@ function FinallyButton({
         style={{
           display: !designable && field?.data?.hidden && 'none',
           opacity: designable && field?.data?.hidden && 0.1,
+          ...buttonStyle,
         }}
       >
         {props.children}
@@ -342,7 +357,7 @@ function FinallyButton({
         ...props?.style,
         display: !designable && field?.data?.hidden && 'none',
         opacity: designable && field?.data?.hidden && 0.1,
-        height: '100%',
+        ...buttonStyle,
       }}
     >
       {props.children}