fix(DeviceCard): 删除属性children

src/components/ProTableCard/CardItems/device.tsx

@@ -3,49 +3,15 @@ import React from 'react';
 import type { DeviceInstance } from '@/pages/device/Instance/typings';
 import { BadgeStatus } from '@/components';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-// import classNames from 'classnames';
 import '../index.less';
 
 export interface DeviceCardProps extends DeviceInstance {
   actions?: React.ReactNode[];
   avatarSize?: number;
-  children: React.ReactNode;
 }
 
 export default (props: DeviceCardProps) => {
-  // const [maskShow, setMaskShow] = useState(false)
-  //
-  // const maskClassName = classNames('card-mask', { show: maskShow })
   return (
-    // <div className={'iot-card'}>
-    //   <div className={'card-warp'}>
-    //     <div
-    //       className={'card-content'}
-    //       onMouseEnter={() => {setMaskShow(true)}}
-    //       onMouseLeave={() => {setMaskShow(false)}}
-    //     >
-    //       {
-    //         props.children
-    //       }
-    //       <div
-    //         className={
-    //           classNames(
-    //             'card-state',
-    //             {
-    //
-    //             }
-    //           )
-    //         }
-    //       >
-    //         <div className={'card-state-content'}></div>
-    //       </div>
-    //     </div>
-    //     <div className={maskClassName}></div>
-    //   </div>
-    //   <div className={'card-tools'}>
-    //
-    //   </div>
-    // </div>
     <Card style={{ width: '100%' }} cover={null} actions={props.actions}>
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>

src/components/ProTableCard/TableCard.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+
+/**
+ * 状态色
+ */
+export enum StatusColorEnum {
+  'success' = 'success',
+  'error' = 'error',
+  'processing' = 'processing',
+  'warning' = 'warning',
+  'default' = 'default',
+}
+
+export type StatusColorType = keyof typeof StatusColorEnum;
+
+export interface TableCardProps {
+  status?: string | number;
+  statusNames?: Record<string | number, StatusColorType>;
+  children?: React.ReactNode;
+}
+
+export default (props: TableCardProps) => {
+  const [maskShow, setMaskShow] = useState(false);
+
+  const maskClassName = classNames('card-mask', { show: maskShow });
+
+  const handleStatusColor = (): StatusColorType | undefined => {
+    if ('statusNames' in props && props.status) {
+      return props.statusNames![props.status];
+    }
+    return StatusColorEnum['default'];
+  };
+
+  return (
+    <div className={'iot-card'}>
+      <div className={'card-warp'}>
+        <div
+          className={'card-content'}
+          onMouseEnter={() => {
+            setMaskShow(true);
+          }}
+          onMouseLeave={() => {
+            setMaskShow(false);
+          }}
+        >
+          {props.children}
+          <div className={classNames('card-state', handleStatusColor())}>
+            <div className={'card-state-content'}></div>
+          </div>
+        </div>
+        <div className={maskClassName}></div>
+      </div>
+      <div className={'card-tools'}></div>
+    </div>
+  );
+};