fix: 设备接入配置样式修改

src/components/ProTableCard/CardItems/AccessConfig/index.less

@@ -1,3 +1,5 @@
+@import '~antd/es/style/themes/default.less';
+
 .tableCardDisabled {
   width: 100%;
   background: url('/images/access-config-diaabled.png') no-repeat;
@@ -10,6 +12,10 @@
   background-size: 100% 100%;
 }
 
+.active {
+  border: 1px solid @primary-color-active;
+}
+
 .context-access {
   display: flex;
   width: 100%;
@@ -20,7 +26,7 @@
     margin-left: 20px;
     .header {
       .title {
-        width: 90%;
+        width: 70%;
         overflow: hidden;
         font-weight: 700;
         font-size: 18px;
@@ -31,7 +37,7 @@
         display: none;
       }
       .desc {
-        width: 100%;
+        width: 70%;
         margin-top: 10px;
         overflow: hidden;
         color: #666;
@@ -45,7 +51,7 @@
     .container {
       display: flex;
       width: 100%;
-      height: 80px;
+      min-height: 50px;
       margin-top: 10px;
 
       .server,
@@ -54,19 +60,32 @@
         margin-right: 10px;
         .subTitle {
           width: 100%;
+          margin-bottom: 5px;
           overflow: hidden;
           color: rgba(0, 0, 0, 0.75);
           font-size: 12px;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
-        p {
+        .subItem {
           width: 100%;
+          height: 20px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
       }
+      .procotol {
+        .desc {
+          width: 100%;
+          overflow: hidden;
+          color: #666;
+          font-weight: 400;
+          font-size: 12px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
     }
   }
 }

src/components/ProTableCard/CardItems/AccessConfig/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 import { TableCard } from '@/components';
 import '@/style/common.less';
-import { Badge } from 'antd';
+import { Badge, Tooltip } from 'antd';
 import type { AccessItem } from '@/pages/link/AccessConfig/typings';
 import './index.less';
 
@@ -10,6 +10,8 @@ export interface AccessConfigCardProps extends AccessItem {
   detail?: React.ReactNode;
   actions?: React.ReactNode[];
   avatarSize?: number;
+  showTool?: boolean;
+  activeStyle?: string;
 }
 
 const defaultImage = require('/public/images/device-access.png');
@@ -25,7 +27,9 @@ export default (props: AccessConfigCardProps) => {
         enabled: StatusColorEnum.processing,
         disabled: StatusColorEnum.error,
       }}
+      showTool={props.showTool}
       contentClassName={props.state.value === 'disabled' ? 'tableCardDisabled' : 'tableCardEnabled'}
+      className={props.activeStyle}
     >
       <div className="context-access">
         <div>
@@ -33,23 +37,23 @@ export default (props: AccessConfigCardProps) => {
         </div>
         <div className="card">
           <div className="header">
-            <div className="title">{props.name || '--'}</div>
+            <div className="title">
+              <Tooltip title={props.name}>{props.name || '--'}</Tooltip>
+            </div>
             <div className="desc">{props.description || '--'}</div>
           </div>
           <div className="container">
             <div className="server">
               <div className="subTitle">{props?.channelInfo?.name || '--'}</div>
-              <div style={{ width: '100%' }}>
-                {props.channelInfo?.addresses.map((i: any, index: number) => (
-                  <p key={i.address + `_address${index}`}>
-                    <Badge color={i.health === -1 ? 'red' : 'green'} text={i.address} />
-                  </p>
-                ))}
-              </div>
+              {props.channelInfo?.addresses.slice(0, 2).map((i: any, index: number) => (
+                <div className="subItem" key={i.address + `_address${index}`}>
+                  <Badge color={i.health === -1 ? 'red' : 'green'} text={i.address} />
+                </div>
+              ))}
             </div>
             <div className="procotol">
               <div className="subTitle">{props?.protocolDetail?.name || '--'}</div>
-              <p>{props.protocolDetail?.description || '--'}</p>
+              <div className="desc">{props.protocolDetail?.description || '--'}</div>
             </div>
           </div>
         </div>

src/pages/device/Product/Detail/Access/AccessConfig/index.less

@@ -1,109 +1,3 @@
-// .box {
-//   display: flex;
-//   justify-content: space-between;
-// }
-
-// .images {
-//   width: 64px;
-//   height: 64px;
-//   color: white;
-//   font-size: 18px;
-//   line-height: 64px;
-//   text-align: center;
-//   background: linear-gradient(
-//     128.453709216706deg,
-//     rgba(255, 255, 255, 1) 4%,
-//     rgba(113, 187, 255, 1) 43%,
-//     rgba(24, 144, 255, 1) 100%
-//   );
-//   border: 1px solid rgba(242, 242, 242, 1);
-//   border-radius: 50%;
-// }
-
-// .content {
-//   display: flex;
-//   flex-direction: column;
-//   width: calc(100% - 80px);
-// }
-
-// .top {
-//   display: flex;
-// }
-
-// .desc {
-//   width: 100%;
-//   margin-top: 10px;
-//   overflow: hidden;
-//   color: rgba(0, 0, 0, 0.55);
-//   font-weight: 400;
-//   font-size: 13px;
-//   white-space: nowrap;
-//   text-overflow: ellipsis;
-// }
-
-.context {
-  display: flex;
-  width: 100%;
-
-  .card {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-left: 10px;
-
-    .header {
-      .title {
-        width: 90%;
-        overflow: hidden;
-        font-weight: 700;
-        font-size: 18px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
-      .desc {
-        width: 100%;
-        margin-top: 10px;
-        overflow: hidden;
-        color: #666;
-        font-weight: 400;
-        font-size: 12px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .container {
-      display: flex;
-      width: 100%;
-      height: 80px;
-      margin-top: 10px;
-
-      .server,
-      .procotol {
-        width: calc(50% - 20px);
-        margin-right: 10px;
-
-        .subTitle {
-          width: 100%;
-          overflow: hidden;
-          color: rgba(0, 0, 0, 0.75);
-          font-size: 12px;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        p {
-          width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-}
-
 :global {
   .ant-pagination-item {
     display: none;

src/pages/device/Product/Detail/Access/AccessConfig/index.tsx

@@ -1,15 +1,13 @@
 import { useEffect, useState } from 'react';
-import { Badge, Button, Col, message, Modal, Pagination, Row } from 'antd';
+import { Button, Col, message, Modal, Pagination, Row } from 'antd';
 import { service } from '@/pages/link/AccessConfig';
 import { productModel } from '@/pages/device/Product';
 import SearchComponent from '@/components/SearchComponent';
 import type { ProColumns } from '@jetlinks/pro-table';
 import styles from './index.less';
 import Service from '@/pages/device/Product/service';
-import { TableCard } from '@/components';
-import { StatusColorEnum } from '@/components/BadgeStatus';
 
-const defaultImage = require('/public/images/device-access.png');
+import AccessConfigCard from '@/components/ProTableCard/CardItems/AccessConfig';
 
 interface Props {
   close: () => void;
@@ -145,51 +143,15 @@ const AccessConfig = (props: Props) => {
           <Col
             key={item.name}
             span={12}
-            // style={{
-            //   width: '100%',
-            //   borderColor: currrent?.id === item.id ? 'var(--ant-primary-color-active)' : 'red',
-            // }}
             onClick={() => {
               setCurrrent(item);
             }}
           >
-            <TableCard
-              showMask={false}
-              status={item.state.value}
-              statusText={item.state.text}
-              statusNames={{
-                enabled: StatusColorEnum.processing,
-                disabled: StatusColorEnum.error,
-              }}
-            >
-              <div className={styles.context}>
-                <div>
-                  <img width={88} height={88} src={defaultImage} alt={''} />
-                </div>
-                <div className={styles.card}>
-                  <div className={styles.header}>
-                    <div className={styles.title}>{item.name || '--'}</div>
-                    <div className={styles.desc}>{item.description || '--'}</div>
-                  </div>
-                  <div className={styles.container}>
-                    <div className={styles.server}>
-                      <div className={styles.subTitle}>{item?.channelInfo?.name || '--'}</div>
-                      <div style={{ width: '100%' }}>
-                        {item.channelInfo?.addresses.map((i: any) => (
-                          <p key={i.address}>
-                            <Badge color={i.health === -1 ? 'red' : 'green'} text={i.address} />
-                          </p>
-                        ))}
-                      </div>
-                    </div>
-                    <div className={styles.procotol}>
-                      <div className={styles.subTitle}>{item?.protocolDetail?.name || '--'}</div>
-                      <p>{item.protocolDetail?.description || '--'}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </TableCard>
+            <AccessConfigCard
+              {...item}
+              showTool={false}
+              activeStyle={currrent?.id === item.id ? 'active' : ''}
+            />
           </Col>
         ))}
       </Row>