fix: 替换需要修改的的沈略号组件

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

@@ -37,7 +37,6 @@
 
       .header {
         .access-title {
-          width: calc(100% - 70px);
           font-weight: 700;
           font-size: 18px;
         }
@@ -81,19 +80,19 @@
 
         .procotol {
           .desc {
-            width: 100%;
-            overflow: hidden;
+            //width: 100%;
+            //overflow: hidden;
             color: #666;
             font-weight: 400;
             font-size: 12px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+            //white-space: nowrap;
+            //text-overflow: ellipsis;
           }
         }
       }
 
       .desc {
-        width: 100%;
+        //width: 100%;
         margin-right: 10px;
         margin-bottom: 10px;
         color: #666;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import { Badge, Tooltip } from 'antd';
 import type { AccessItem } from '@/pages/link/AccessConfig/typings';
@@ -40,10 +40,13 @@ export default (props: AccessConfigCardProps) => {
         </div>
         <div className="card">
           <div className="header">
-            <div className="access-title ellipsis">
-              <Tooltip placement="topLeft" title={props.name}>
-                {props.name}
-              </Tooltip>
+            {/*<div className="access-title ellipsis">*/}
+            {/*  <Tooltip placement="topLeft" title={props.name}>*/}
+            {/*    {props.name}*/}
+            {/*  </Tooltip>*/}
+            {/*</div>*/}
+            <div style={{ width: 'calc(100% - 70px)' }} className={'access-title'}>
+              <Ellipsis title={props.name} />
             </div>
           </div>
           {(props.protocolDetail?.name || props?.channelInfo?.name) && (
@@ -79,34 +82,50 @@ export default (props: AccessConfigCardProps) => {
                 <div className="procotol">
                   <div className="subTitle">协议</div>
                   <div className="desc">
-                    <Tooltip placement="topLeft" title={props.protocolDetail?.name}>
-                      {props.protocolDetail?.name}
-                    </Tooltip>
+                    <Ellipsis
+                      title={props.protocolDetail?.name}
+                      tooltip={{ placement: 'topLeft' }}
+                    />
+                    {/*<Tooltip placement="topLeft" title={props.protocolDetail?.name}>*/}
+                    {/*  {props.protocolDetail?.name}*/}
+                    {/*</Tooltip>*/}
                   </div>
                 </div>
               )}
             </div>
           )}
-          <div className="desc ellipsis">
-            {!!props?.description ? (
-              <Tooltip placement="topLeft" title={props?.description}>
-                {props?.description}
-              </Tooltip>
-            ) : (
-              <Tooltip
-                placement="topLeft"
-                title={
-                  (Store.get('access-providers') || []).find((i: any) => i?.id === props?.provider)
+          <Ellipsis
+            title={
+              !!props?.description
+                ? props?.description
+                : (Store.get('access-providers') || []).find((i: any) => i?.id === props?.provider)
                     ?.description
-                }
-              >
-                {
-                  (Store.get('access-providers') || []).find((i: any) => i?.id === props?.provider)
-                    ?.description
-                }
-              </Tooltip>
-            )}
-          </div>
+            }
+            tooltip={{
+              placement: 'topLeft',
+            }}
+            titleClassName={'desc'}
+          />
+          {/*<div className="desc ellipsis">*/}
+          {/*  {!!props?.description ? (*/}
+          {/*    <Tooltip placement="topLeft" title={props?.description}>*/}
+          {/*      {props?.description}*/}
+          {/*    </Tooltip>*/}
+          {/*  ) : (*/}
+          {/*    <Tooltip*/}
+          {/*      placement="topLeft"*/}
+          {/*      title={*/}
+          {/*        (Store.get('access-providers') || []).find((i: any) => i?.id === props?.provider)*/}
+          {/*          ?.description*/}
+          {/*      }*/}
+          {/*    >*/}
+          {/*      {*/}
+          {/*        (Store.get('access-providers') || []).find((i: any) => i?.id === props?.provider)*/}
+          {/*          ?.description*/}
+          {/*      }*/}
+          {/*    </Tooltip>*/}
+          {/*  )}*/}
+          {/*</div>*/}
         </div>
       </div>
       <div className={'checked-icon'}>

src/components/ProTableCard/CardItems/AlarmConfig.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { PermissionButton, TableCard } from '@/components';
+import { Ellipsis, PermissionButton, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { Tooltip } from 'antd';
 import { Store } from 'jetlinks-store';
 import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { useHistory } from 'umi';
@@ -36,9 +35,10 @@ export default (props: AlarmConfigProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip title={props?.name}>{props?.name}</Tooltip>
-            </span>
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip title={props?.name}>{props?.name}</Tooltip>*/}
+            {/*</span>*/}
+            <Ellipsis title={props?.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>
@@ -64,19 +64,26 @@ export default (props: AlarmConfigProps) => {
             </div>
             <div>
               <label>告警级别</label>
-              <div className={'ellipsis'}>
-                <Tooltip
-                  title={
-                    (Store.get('default-level') || []).find(
-                      (item: any) => item?.level === props?.level,
-                    )?.title || props?.level
-                  }
-                >
-                  {(Store.get('default-level') || []).find(
+              <Ellipsis
+                title={
+                  (Store.get('default-level') || []).find(
                     (item: any) => item?.level === props?.level,
-                  )?.title || props?.level}
-                </Tooltip>
-              </div>
+                  )?.title || props?.level
+                }
+              />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip*/}
+              {/*    title={*/}
+              {/*      (Store.get('default-level') || []).find(*/}
+              {/*        (item: any) => item?.level === props?.level,*/}
+              {/*      )?.title || props?.level*/}
+              {/*    }*/}
+              {/*  >*/}
+              {/*    {(Store.get('default-level') || []).find(*/}
+              {/*      (item: any) => item?.level === props?.level,*/}
+              {/*    )?.title || props?.level}*/}
+              {/*  </Tooltip>*/}
+              {/*</div>*/}
             </div>
           </div>
         </div>

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import './index.less';
-import { Tooltip } from 'antd';
 
 export interface StreamCardProps extends StreamItem {
   detail?: React.ReactNode;
@@ -27,30 +26,34 @@ export default (props: StreamCardProps) => {
         </div>
         <div className="card">
           <div className="header">
-            <div className="stream-title ellipsis">
-              <Tooltip title={props.name}>{props.name}</Tooltip>
-            </div>
+            {/*<div className="stream-title ellipsis">*/}
+            {/*  <Tooltip title={props.name}>{props.name}</Tooltip>*/}
+            {/*</div>*/}
+            <Ellipsis title={props?.name} titleClassName={'stream-title'} />
           </div>
           <div className="container">
             <div>
               <label>服务商</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props?.provider}>{props?.provider}</Tooltip>
-              </div>
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props?.provider}>{props?.provider}</Tooltip>*/}
+              {/*</div>*/}
+              <Ellipsis title={props?.provider} titleClassName={'stream-title'} />
             </div>
             <div>
               <label>RTP IP</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props?.configuration?.rtpIp}>{props?.configuration?.rtpIp}</Tooltip>
-              </div>
+              <Ellipsis title={props?.configuration?.rtpIp} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props?.configuration?.rtpIp}>{props?.configuration?.rtpIp}</Tooltip>*/}
+              {/*</div>*/}
             </div>
             <div>
               <label>API HOST</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props?.configuration?.apiHost}>
-                  {props?.configuration?.apiHost}
-                </Tooltip>
-              </div>
+              <Ellipsis title={props?.configuration?.apiHost} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props?.configuration?.apiHost}>*/}
+              {/*    {props?.configuration?.apiHost}*/}
+              {/*  </Tooltip>*/}
+              {/*</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/aliyun.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { StatusColorEnum } from '@/components/BadgeStatus';
@@ -31,16 +31,19 @@ export default (props: AliyunCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props?.name}</span>
+            <Ellipsis title={props?.name} titleClassName={'card-item-header-name'} />
+            {/*<span className={'card-item-header-name ellipsis'}>{props?.name}</span>*/}
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>网桥产品</label>
-              <div className={'ellipsis'}>{props?.bridgeProductName || ''}</div>
+              <Ellipsis title={props?.bridgeProductName || ''} />
+              {/*<div className={'ellipsis'}>{props?.bridgeProductName || ''}</div>*/}
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>{props?.description || ''}</div>
+              <Ellipsis title={props?.description || ''} />
+              {/*<div className={'ellipsis'}>{props?.description || ''}</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/cascade.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CascadeItem } from '@/pages/media/Cascade/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { Badge } from 'antd';
@@ -32,21 +32,26 @@ export default (props: CascadeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props.name}</span>
+            {/*<span className={'card-item-header-name ellipsis'}>{props.name}</span>*/}
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div>通道数量： {props?.count || 0}</div>
           <div style={{ display: 'flex', width: '100%' }}>
             <Badge status={props.onlineStatus?.value === 'offline' ? 'error' : 'success'} />
-            <div
-              style={{
-                width: '90%',
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              sip:{props.sipConfigs[0]?.sipId}@{props.sipConfigs[0]?.hostAndPort}
-            </div>
+            {/*<div*/}
+            {/*  style={{*/}
+            {/*    width: '90%',*/}
+            {/*    overflow: 'hidden',*/}
+            {/*    whiteSpace: 'nowrap',*/}
+            {/*    textOverflow: 'ellipsis',*/}
+            {/*  }}*/}
+            {/*>*/}
+            {/*  sip:{props.sipConfigs[0]?.sipId}@{props.sipConfigs[0]?.hostAndPort}*/}
+            {/*</div>*/}
+            <Ellipsis
+              title={`sip:${props.sipConfigs[0]?.sipId}@${props.sipConfigs[0]?.hostAndPort}`}
+              maxWidth={'90%'}
+            />
           </div>
         </div>
       </div>

src/components/ProTableCard/CardItems/device.tsx

@@ -5,7 +5,6 @@ import { TableCard, Ellipsis } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { CheckOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
 
 export interface DeviceCardProps extends Partial<DeviceInstance> {
   detail?: React.ReactNode;
@@ -72,25 +71,31 @@ export const ExtraDeviceCard = (props: DeviceCardProps) => {
           <div className={'card-item-content-flex'}>
             <div className={'flex-auto'}>
               <label>ID</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props.id}>{props.id || ''}</Tooltip>
-              </div>
+              <Ellipsis title={props.id || ''} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props.id}>{props.id || ''}</Tooltip>*/}
+              {/*</div>*/}
             </div>
             {props.cardType === 'bind' ? (
               <div className={'flex-auto'}>
                 <label>说明</label>
-                <Tooltip title={props.describe}>
-                  <div className={'ellipsis'}>{props.describe}</div>
-                </Tooltip>
+                <Ellipsis title={props.describe || ''} titleClassName={'ellipsis'} />
+                {/*<Tooltip title={props.describe}>*/}
+                {/*  <div className={'ellipsis'}>{props.describe}</div>*/}
+                {/*</Tooltip>*/}
               </div>
             ) : (
               <div className={'flex-auto'}>
                 <label>资产权限</label>
-                <div className={'ellipsis'}>
-                  <Tooltip title={handlePermissionsMap(props.grantedPermissions)}>
-                    {handlePermissionsMap(props.grantedPermissions)}
-                  </Tooltip>
-                </div>
+                <Ellipsis
+                  title={handlePermissionsMap(props.grantedPermissions)}
+                  titleClassName={'ellipsis'}
+                />
+                {/*<div className={'ellipsis'}>*/}
+                {/*  <Tooltip title={handlePermissionsMap(props.grantedPermissions)}>*/}
+                {/*    {handlePermissionsMap(props.grantedPermissions)}*/}
+                {/*  </Tooltip>*/}
+                {/*</div>*/}
               </div>
             )}
           </div>
@@ -129,11 +134,16 @@ export default (props: DeviceCardProps) => {
           <div className={'card-item-content'}>
             <div>
               <label>设备类型</label>
-              <div className={'ellipsis'}>{props.deviceType ? props.deviceType.text : ''}</div>
+              <Ellipsis
+                title={props.deviceType ? props.deviceType.text : ''}
+                titleClassName={'ellipsis'}
+              />
+              {/*<div className={'ellipsis'}>{props.deviceType ? props.deviceType.text : ''}</div>*/}
             </div>
             <div>
               <label>产品名称</label>
-              <div className={'ellipsis'}>{props.productName || ''}</div>
+              <Ellipsis title={props.productName} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>{props.productName || ''}</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/duerOs.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
-import { Tooltip } from 'antd';
 import { DuerOSItem } from '@/pages/cloud/DuerOS/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 
@@ -34,24 +33,27 @@ export default (props: DuerOSProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip title={props?.name} placement="topLeft">
-                {props?.name}
-              </Tooltip>
-            </span>
+            <Ellipsis title={props?.name} titleClassName={'card-item-header-name'} />
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip title={props?.name} placement="topLeft">*/}
+            {/*    {props?.name}*/}
+            {/*  </Tooltip>*/}
+            {/*</span>*/}
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>产品</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props?.productName || ''}>{props?.productName || ''}</Tooltip>
-              </div>
+              <Ellipsis title={props?.productName || ''} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props?.productName || ''}>{props?.productName || ''}</Tooltip>*/}
+              {/*</div>*/}
             </div>
             <div>
               <label>设备类型</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props.applianceType?.text}>{props.applianceType?.text}</Tooltip>
-              </div>
+              <Ellipsis title={props.applianceType?.text} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props.applianceType?.text}>{props.applianceType?.text}</Tooltip>*/}
+              {/*</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/mediaDevice.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { DeviceItem } from '@/pages/media/Device/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 
@@ -33,24 +33,29 @@ export default (props: ProductCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props.name}</span>
+            {/*<span className={'card-item-header-name ellipsis'}>{props.name}</span>*/}
+            <Ellipsis title={props?.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>厂商</label>
-              <div className={'ellipsis'}>{props.manufacturer || ''}</div>
+              <Ellipsis title={props?.manufacturer} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>{props.manufacturer || ''}</div>*/}
             </div>
             <div>
               <label>通道数量</label>
-              <div className={'ellipsis'}>{props.channelNumber || 0}</div>
+              <Ellipsis title={props?.channelNumber} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>{props.channelNumber || 0}</div>*/}
             </div>
             <div>
               <label>型号</label>
-              <div className={'ellipsis'}>{props.model || ''}</div>
+              <Ellipsis title={props?.model} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>{props.model || ''}</div>*/}
             </div>
             <div>
               <label>接入方式</label>
-              <div className={'ellipsis'}>{props.provider || ''}</div>
+              <Ellipsis title={props?.provider} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>{props.provider || ''}</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/networkCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { NetworkItem } from '@/pages/link/Type/typings';
@@ -64,16 +64,18 @@ export default (props: NoticeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip title={props.name}>{props.name}</Tooltip>
-            </span>
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip title={props.name}>{props.name}</Tooltip>*/}
+            {/*</span>*/}
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>类型</label>
-              <div className={'ellipsis'}>
-                <Tooltip title={props?.type}>{props.type}</Tooltip>
-              </div>
+              <Ellipsis title={props?.type} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip title={props?.type}>{props.type}</Tooltip>*/}
+              {/*</div>*/}
             </div>
             <div>
               <label>详情</label>

src/components/ProTableCard/CardItems/scene.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
-import { Tooltip } from 'antd';
 
 export interface DeviceCardProps extends SceneItem {
   tools: React.ReactNode[];
@@ -37,18 +36,21 @@ export default (props: DeviceCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip title={props.name}>{props.name}</Tooltip>
-            </span>
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip title={props.name}>{props.name}</Tooltip>*/}
+            {/*</span>*/}
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>触发方式</label>
-              <div className={'ellipsis'}>{TriggerWayType[props.triggerType]}</div>
+              <Ellipsis title={TriggerWayType[props.triggerType]} />
+              {/*<div className={'ellipsis'}>{TriggerWayType[props.triggerType]}</div>*/}
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>{props.description || ''}</div>
+              <Ellipsis title={props.description} />
+              {/*<div className={'ellipsis'}>{props.description || ''}</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/index.less

@@ -46,7 +46,6 @@
           margin-bottom: 12px;
 
           .card-item-header-name {
-            max-width: 100%;
             font-weight: bold;
             font-size: 16px;
           }
@@ -81,7 +80,6 @@
           }
 
           .ellipsis {
-            max-width: 70%;
             font-weight: bold;
             font-size: 14px;
           }

src/pages/device/Instance/Detail/Info/index.tsx

@@ -1,4 +1,4 @@
-import { Card, Descriptions, Tooltip } from 'antd';
+import { Card, Descriptions } from 'antd';
 import { InstanceModel } from '@/pages/device/Instance';
 import moment from 'moment';
 import { observer } from '@formily/react';
@@ -10,7 +10,7 @@ import { useState } from 'react';
 import type { DeviceInstance } from '../../typings';
 import { EditOutlined } from '@ant-design/icons';
 import Tags from '@/pages/device/Instance/Detail/Tags';
-import { PermissionButton } from '@/components';
+import { Ellipsis, PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
 
 const Info = observer(() => {
@@ -47,11 +47,17 @@ const Info = observer(() => {
               defaultMessage: '设备ID',
             })}
           >
-            <Tooltip placement="topLeft" title={InstanceModel.detail?.id}>
-              <div className="ellipsis" style={{ maxWidth: 250 }}>
-                {InstanceModel.detail?.id}
-              </div>
-            </Tooltip>
+            <Ellipsis
+              title={InstanceModel.detail?.id}
+              tooltip={{ placement: 'topLeft' }}
+              style={{ maxWidth: 250 }}
+              limitWidth={250}
+            />
+            {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.id}>*/}
+            {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+            {/*    {InstanceModel.detail?.id}*/}
+            {/*  </div>*/}
+            {/*</Tooltip>*/}
           </Descriptions.Item>
           <Descriptions.Item
             label={intl.formatMessage({
@@ -59,18 +65,30 @@ const Info = observer(() => {
               defaultMessage: '产品名称',
             })}
           >
-            <Tooltip placement="topLeft" title={InstanceModel.detail?.productName}>
-              <div className="ellipsis" style={{ maxWidth: 250 }}>
-                {InstanceModel.detail?.productName}
-              </div>
-            </Tooltip>
+            <Ellipsis
+              title={InstanceModel.detail?.productName}
+              tooltip={{ placement: 'topLeft' }}
+              style={{ maxWidth: 250 }}
+              limitWidth={250}
+            />
+            {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.productName}>*/}
+            {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+            {/*    {InstanceModel.detail?.productName}*/}
+            {/*  </div>*/}
+            {/*</Tooltip>*/}
           </Descriptions.Item>
           <Descriptions.Item label={'产品分类'}>
-            <Tooltip placement="topLeft" title={InstanceModel.detail?.classifiedName}>
-              <div className="ellipsis" style={{ maxWidth: 250 }}>
-                {InstanceModel.detail?.classifiedName}
-              </div>
-            </Tooltip>
+            <Ellipsis
+              title={InstanceModel.detail?.classifiedName}
+              tooltip={{ placement: 'topLeft' }}
+              style={{ maxWidth: 250 }}
+              limitWidth={250}
+            />
+            {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.classifiedName}>*/}
+            {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+            {/*    {InstanceModel.detail?.classifiedName}*/}
+            {/*  </div>*/}
+            {/*</Tooltip>*/}
           </Descriptions.Item>
           <Descriptions.Item
             label={intl.formatMessage({
@@ -129,11 +147,17 @@ const Info = observer(() => {
               defaultMessage: '说明',
             })}
           >
-            <Tooltip placement="topLeft" title={InstanceModel.detail?.description}>
-              <div className="ellipsis" style={{ maxWidth: 250 }}>
-                {InstanceModel.detail?.description}
-              </div>
-            </Tooltip>
+            <Ellipsis
+              title={InstanceModel.detail?.description}
+              tooltip={{ placement: 'topLeft' }}
+              style={{ maxWidth: 250 }}
+              limitWidth={250}
+            />
+            {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.description}>*/}
+            {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+            {/*    {InstanceModel.detail?.description}*/}
+            {/*  </div>*/}
+            {/*</Tooltip>*/}
           </Descriptions.Item>
         </Descriptions>
         <Config />

src/pages/device/Instance/Detail/index.tsx

@@ -23,7 +23,7 @@ import { Store } from 'jetlinks-store';
 import SystemConst from '@/utils/const';
 import { getMenuPathByCode, getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
-import { PermissionButton } from '@/components';
+import { Ellipsis, PermissionButton } from '@/components';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import Service from '@/pages/device/Instance/service';
 import useLocation from '@/hooks/route/useLocation';
@@ -297,11 +297,17 @@ const InstanceDetail = observer(() => {
       content={
         <Descriptions size="small" column={4}>
           <Descriptions.Item label={'ID'}>
-            <Tooltip placement="topLeft" title={InstanceModel.detail?.id}>
-              <div className="ellipsis" style={{ maxWidth: 250 }}>
-                {InstanceModel.detail?.id}
-              </div>
-            </Tooltip>
+            <Ellipsis
+              title={InstanceModel.detail?.id}
+              tooltip={{ placement: 'topLeft' }}
+              style={{ maxWidth: 250 }}
+              limitWidth={250}
+            />
+            {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.id}>*/}
+            {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+            {/*    {InstanceModel.detail?.id}*/}
+            {/*  </div>*/}
+            {/*</Tooltip>*/}
           </Descriptions.Item>
           <Descriptions.Item label={'所属产品'}>
             <PermissionButton
@@ -322,20 +328,32 @@ const InstanceDetail = observer(() => {
                 }
               }}
             >
-              <div className="ellipsis" style={{ width: 250 }}>
-                {InstanceModel.detail?.productName}
-              </div>
+              <Ellipsis
+                title={InstanceModel.detail?.productName}
+                tooltip={{ placement: 'topLeft' }}
+                style={{ maxWidth: 250 }}
+                limitWidth={250}
+              />
+              {/*<div className="ellipsis" style={{ width: 250 }}>*/}
+              {/*  {InstanceModel.detail?.productName}*/}
+              {/*</div>*/}
             </PermissionButton>
           </Descriptions.Item>
         </Descriptions>
       }
       title={
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Tooltip placement="topLeft" title={InstanceModel.detail?.name}>
-            <div className="ellipsis" style={{ maxWidth: 250 }}>
-              {InstanceModel.detail?.name}
-            </div>
-          </Tooltip>
+          {/*<Tooltip placement="topLeft" title={InstanceModel.detail?.name}>*/}
+          {/*  <div className="ellipsis" style={{ maxWidth: 250 }}>*/}
+          {/*    {InstanceModel.detail?.name}*/}
+          {/*  </div>*/}
+          {/*</Tooltip>*/}
+          <Ellipsis
+            title={InstanceModel.detail?.name}
+            tooltip={{ placement: 'topLeft' }}
+            style={{ maxWidth: 250 }}
+            limitWidth={250}
+          />
           <Divider type="vertical" />
           <Space>
             {deviceStatus.get(InstanceModel.detail?.state?.value)}

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

@@ -27,6 +27,7 @@ import { onlyMessage } from '@/utils/util';
 import Driver from 'driver.js';
 import 'driver.js/dist/driver.min.css';
 import './index.less';
+import { Ellipsis } from '@/components';
 
 const componentMap = {
   string: 'Input',
@@ -597,23 +598,36 @@ const Access = () => {
                   }
                 />
                 <div className={styles.context}>
-                  <Tooltip placement="topLeft" title={access?.name}>
-                    <div className="ellipsis-70">{access?.name}</div>
-                  </Tooltip>
+                  {/*<Tooltip placement="topLeft" title={access?.name}>*/}
+                  {/*  <div className="ellipsis-70">{access?.name}</div>*/}
+                  {/*</Tooltip>*/}
+                  <Ellipsis
+                    title={access?.name}
+                    tooltip={{ placement: 'topLeft' }}
+                    maxWidth={'70%'}
+                  />
                 </div>
                 <div className={styles.context}>
-                  <Tooltip
-                    placement="topLeft"
+                  {/*<Tooltip*/}
+                  {/*  placement="topLeft"*/}
+                  {/*  title={*/}
+                  {/*    access?.description ||*/}
+                  {/*    dataSource.find((item) => item?.id === access?.provider)?.description*/}
+                  {/*  }*/}
+                  {/*>*/}
+                  {/*  <div className="ellipsis-70">*/}
+                  {/*    {access?.description ||*/}
+                  {/*      dataSource.find((item) => item?.id === access?.provider)?.description}*/}
+                  {/*  </div>*/}
+                  {/*</Tooltip>*/}
+                  <Ellipsis
                     title={
                       access?.description ||
                       dataSource.find((item) => item?.id === access?.provider)?.description
                     }
-                  >
-                    <div className="ellipsis-70">
-                      {access?.description ||
-                        dataSource.find((item) => item?.id === access?.provider)?.description}
-                    </div>
-                  </Tooltip>
+                    tooltip={{ placement: 'topLeft' }}
+                    maxWidth={'70%'}
+                  />
                 </div>
               </div>
 

src/pages/device/Product/Detail/BaseInfo/index.tsx

@@ -1,11 +1,11 @@
 import { productModel, service } from '@/pages/device/Product';
-import { Button, Descriptions, Tooltip } from 'antd';
+import { Button, Descriptions } from 'antd';
 import { useState } from 'react';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { EditOutlined } from '@ant-design/icons';
 import { getDateFormat } from '@/utils/util';
 import Save from '@/pages/device/Product/Save';
-import { PermissionButton } from '@/components';
+import { Ellipsis, PermissionButton } from '@/components';
 
 // const componentMap = {
 //   string: 'Input',
@@ -172,11 +172,17 @@ const BaseInfo = (props: BaseInfoProps) => {
         bordered
       >
         <Descriptions.Item label={'ID'}>
-          <Tooltip placement="topLeft" title={productModel.current?.id}>
-            <div className="ellipsis-70" style={{ width: 300 }}>
-              {productModel.current?.id}
-            </div>
-          </Tooltip>
+          <Ellipsis
+            title={productModel.current?.id}
+            tooltip={{ placement: 'topLeft' }}
+            maxWidth={'90%'}
+            style={{ width: 300 }}
+          />
+          {/*<Tooltip placement="topLeft" title={productModel.current?.id}>*/}
+          {/*  <div className="ellipsis-70" style={{ width: 300 }}>*/}
+          {/*    {productModel.current?.id}*/}
+          {/*  </div>*/}
+          {/*</Tooltip>*/}
         </Descriptions.Item>
         <Descriptions.Item
           label={intl.formatMessage({
@@ -184,11 +190,17 @@ const BaseInfo = (props: BaseInfoProps) => {
             defaultMessage: '产品分类',
           })}
         >
-          <Tooltip placement="topLeft" title={productModel.current?.classifiedName}>
-            <div className="ellipsis-70" style={{ width: 300 }}>
-              {productModel.current?.classifiedName}
-            </div>
-          </Tooltip>
+          <Ellipsis
+            title={productModel.current?.classifiedName}
+            tooltip={{ placement: 'topLeft' }}
+            maxWidth={'90%'}
+            style={{ width: 300 }}
+          />
+          {/*<Tooltip placement="topLeft" title={productModel.current?.classifiedName}>*/}
+          {/*  <div className="ellipsis-70" style={{ width: 300 }}>*/}
+          {/*    {productModel.current?.classifiedName}*/}
+          {/*  </div>*/}
+          {/*</Tooltip>*/}
         </Descriptions.Item>
         <Descriptions.Item
           label={intl.formatMessage({

src/pages/link/AccessConfig/Detail/Access/index.less

@@ -20,7 +20,7 @@
 }
 
 .title {
-  width: 100%;
+  width: calc(100% - 88px);
   overflow: hidden;
   font-weight: 800;
   white-space: nowrap;
@@ -28,14 +28,10 @@
 }
 
 .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;
 }
 
 .cardContent {

src/pages/link/AccessConfig/Detail/Access/index.tsx

@@ -8,7 +8,7 @@ import ReactMarkdown from 'react-markdown';
 import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { CheckOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import TitleComponent from '@/components/TitleComponent';
-import { PermissionButton } from '@/components';
+import { Ellipsis, PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
 import { descriptionList, MetworkTypeMapping, ProcotoleMapping } from './data';
@@ -314,9 +314,10 @@ const Access = (props: Props) => {
                       }}
                     >
                       <div className={styles.title}>
-                        <Tooltip placement="topLeft" title={item.name}>
-                          {item.name}
-                        </Tooltip>
+                        <Ellipsis title={item.name} tooltip={{ placement: 'topLeft' }} />
+                        {/*<Tooltip placement="topLeft" title={item.name}>*/}
+                        {/*  {item.name}*/}
+                        {/*</Tooltip>*/}
                       </div>
                       <div className={styles.cardContent}>
                         <Tooltip
@@ -354,14 +355,20 @@ const Access = (props: Props) => {
                             ))}
                           </div>
                         </Tooltip>
-                        <div className={styles.desc}>
-                          <Tooltip
-                            placement="topLeft"
-                            title={item?.description || descriptionList[props.provider?.id]}
-                          >
-                            {item?.description || descriptionList[props.provider?.id]}
-                          </Tooltip>
-                        </div>
+                        <Ellipsis
+                          title={item?.description || descriptionList[props.provider?.id]}
+                          tooltip={{ placement: 'topLeft' }}
+                          titleClassName={styles.desc}
+                        />
+                        {/*<div className={styles.desc}>*/}
+                        {/*  <Tooltip*/}
+                        {/*    placement="topLeft"*/}
+                        {/*    title={item?.description || descriptionList[props.provider?.id]}*/}
+                        {/*  >*/}
+                        {/*    {item?.description || descriptionList[props.provider?.id]}*/}
+                        {/*  </Tooltip>*/}
+                        {/*  */}
+                        {/*</div>*/}
                       </div>
                       <div className={styles.checkedIcon}>
                         <div>