✨鉴权按钮的封装优化

src/components/AuthButton/index.tsx

@@ -1,67 +1,25 @@
 import React, { ReactNode } from "react";
-import { Button } from "antd";
+import { Button, ButtonProps } from "antd";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 
-type Props = {
+// 定义一个接口继承,过滤重复的字段id
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+// 过滤接口 ButtonProps 里面的字段id,使用自己定义的 id
+interface Props extends Omit<ButtonProps, "id"> {
   children?: ReactNode;
   id: number;
-  danger?: boolean; //设置危险按钮
-  block?: boolean; //将按钮宽度调整为其父宽度的选项
-  disabled?: boolean; //设置按钮失效状态
-  ghost?: boolean; //幽灵属性，使按钮背景透明
-  href?: string; //点击跳转的地址，指定此属性 button 的行为和 a 链接一致
-  htmlType?: "button" | "submit" | "reset" | undefined; //设置 button 原生的 type 值，可选值请参考 HTML 标准
-  icon?: ReactNode; //设置按钮的图标组件
-  loading?: boolean | { delay: number }; //设置按钮载入状态
-  shape?: "default" | "circle" | "round"; //设置按钮形状
-  size?: "large" | "middle" | "small"; //设置按钮大小
-  target?: string; //相当于 a 链接的 target 属性，href 存在时生效
-  type?: "primary" | "ghost" | "dashed" | "link" | "text" | "default"; //设置按钮类型
-  onClick?: () => void; //点击按钮时的回调
-};
-
-// console.log('有权限的按钮集合',buttonArr);
+  [x: string]: any;
+}
 
-function AuthButton({
-  children,
-  id,
-  danger = false,
-  block = false,
-  disabled = false,
-  ghost = false,
-  href,
-  htmlType = "button",
-  icon,
-  loading = false,
-  shape = "default",
-  size = "middle",
-  target,
-  type = "default",
-  onClick,
-}: Props) {
+function AuthButton({ children, id, ...rest }: Props) {
   const buttonArr = useSelector(
     (state: RootState) => state.loginStore.authButtonArr
   );
 
-  return buttonArr.some((v: any) => v.id === id) || id === -1 ? (
-    <Button
-      danger={danger}
-      block={block}
-      disabled={disabled}
-      ghost={ghost}
-      href={href}
-      htmlType={htmlType}
-      icon={icon}
-      loading={loading}
-      shape={shape}
-      size={size}
-      target={target}
-      type={type}
-      onClick={onClick}
-    >
-      {children}
-    </Button>
+  return buttonArr.some((v: any) => v.id === id) ? (
+    <Button {...rest}>{children}</Button>
   ) : null;
 }
 

src/pages/ObjectSon/Object2/LookObject2/table.tsx

@@ -1,8 +1,7 @@
-import AuthButton from "@/components/AuthButton";
 import { RootState } from "@/store";
 import { getObj2LogListAPI } from "@/store/action/object2";
 import { logTypeObj, logTypeOpenObj } from "@/utils/dataChange";
-import { Table } from "antd";
+import { Button, Table } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -87,16 +86,15 @@ function LookObject2Log({ id }: Props) {
               falg = true;
           });
           return falg ? (
-            <AuthButton
-              id={-1}
+            <Button
               type="text"
               danger
               onClick={() => openURL(logTypeOpenObj[item.type] + item.id)}
             >
               查看
-            </AuthButton>
+            </Button>
           ) : (
-            "-"
+            <span>&emsp; - </span>
           );
         },
       },