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

src/components/Ellipsis/index.less

@@ -1,10 +1,11 @@
 .ellipsis-warp {
   position: relative;
   width: 100%;
+  white-space: normal;
 }
 
 .ellipsis-max {
-  position: fixed;
+  position: absolute;
   top: -9999999999px;
   left: 0;
   z-index: -200;

src/components/Ellipsis/index.tsx

@@ -1,16 +1,23 @@
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { unmountComponentAtNode } from 'react-dom';
 import { useSize } from 'ahooks';
 import Style from './index.less';
 import classnames from 'classnames';
 import { Tooltip } from 'antd';
+import type { TooltipProps } from 'antd';
 
 interface EllipsisProps {
-  title?: string;
+  title?: string | number;
   maxWidth?: string | number;
-  titleStyle?: CSSStyleSheet;
+  /**
+   * 用于max-width的情况
+   */
+  limitWidth?: number;
+  style?: React.CSSProperties;
+  titleStyle?: React.CSSProperties;
   titleClassName?: string;
   showToolTip?: boolean;
+  tooltip?: Omit<TooltipProps, 'title'>;
   /**
    * @default 1
    */
@@ -21,25 +28,43 @@ export default (props: EllipsisProps) => {
   const parentNode = useRef<HTMLDivElement | null>(null);
   const extraNode = useRef<HTMLDivElement | null>(null);
   const titleNode = useRef<HTMLDivElement | null>(null);
-  const parentSize = useSize(parentNode.current);
   const extraSize = useSize(extraNode.current);
   const [isEllipsis, setIsEllipsis] = useState(false);
   // const [show, setShow] = useState(false);
 
   useEffect(() => {
-    if (extraSize.width && parentSize.width) {
-      if (extraSize.width > parentSize.width * (props.row || 1)) {
-        setIsEllipsis(true);
-      } else {
-        setIsEllipsis(false);
-      }
-      if (extraNode.current) {
-        unmountComponentAtNode(extraNode.current);
-        extraNode.current.innerHTML = '';
-        extraNode.current.setAttribute('style', 'display: none');
+    if (extraNode.current && props.title) {
+      extraNode.current.innerHTML = props.title as string;
+      extraNode.current.setAttribute('style', 'display: block');
+    }
+  }, [props.title, extraNode.current]);
+
+  useEffect(() => {
+    if (extraNode.current && parentNode.current) {
+      const extraWidth = window.getComputedStyle(extraNode.current).getPropertyValue('width');
+      const parentWidth = window.getComputedStyle(parentNode.current).getPropertyValue('width');
+      const extraWidthNumber = extraWidth ? Number(extraWidth.replace('px', '')) : 0;
+      const parentWidthNumber = parentWidth ? Number(parentWidth.replace('px', '')) : 0;
+
+      // console.log(extraWidthNumber, parentWidthNumber, props.title)
+      if (extraWidthNumber && parentWidthNumber) {
+        const _width = props.limitWidth
+          ? props.limitWidth * (props.row || 1)
+          : parentWidthNumber * (props.row || 1);
+        console.log(extraSize.width, _width, props.title);
+        if (extraWidthNumber >= _width) {
+          setIsEllipsis(true);
+        } else {
+          setIsEllipsis(false);
+        }
+        if (extraNode.current) {
+          unmountComponentAtNode(extraNode.current);
+          extraNode.current.innerHTML = '';
+          extraNode.current.setAttribute('style', 'display: none');
+        }
       }
     }
-  }, [props.title, extraSize]);
+  }, [extraSize, extraNode.current]);
 
   const ellipsisTitleClass = `ellipsis-${props.row || 1}`;
 
@@ -59,14 +84,16 @@ export default (props: EllipsisProps) => {
   );
 
   return (
-    <div className={Style['ellipsis-warp']} ref={parentNode}>
+    <div className={Style['ellipsis-warp']} style={props.style} ref={parentNode}>
       {isEllipsis && props.showToolTip !== false ? (
-        <Tooltip title={props.title}>{ellipsisNode}</Tooltip>
+        <Tooltip {...props.tooltip} title={props.title}>
+          {ellipsisNode}
+        </Tooltip>
       ) : (
         ellipsisNode
       )}
       <div
-        className={classnames(props.titleClassName, Style['ellipsis-max'])}
+        className={classnames(props.titleClassName?.replace('ellipsis', ''), Style['ellipsis-max'])}
         style={{ ...props.titleStyle, width: 'max-content !important' }}
         ref={extraNode}
       >

src/components/ProTableCard/CardItems/noticeConfig.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { imgMap, typeList } from './noticeTemplate';
-import { Tooltip } from 'antd';
 
 export interface NoticeCardProps extends ConfigItem {
   detail?: React.ReactNode;
@@ -20,24 +19,30 @@ export default (props: NoticeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip placement="topLeft" title={props.name}>
-                {props.name}
-              </Tooltip>
-            </span>
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip placement="topLeft" 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'}>{typeList[props.type][props.provider] || '暂无'}</div>
+              <Ellipsis
+                title={typeList[props.type][props.provider] || '暂无'}
+                titleClassName={'ellipsis'}
+              />
+              {/*<div className={'ellipsis'}>{typeList[props.type][props.provider] || '暂无'}</div>*/}
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>
-                <Tooltip placement="topLeft" title={props.description}>
-                  {props.description}
-                </Tooltip>
-              </div>
+              <Ellipsis title={props.description} titleClassName={'ellipsis'} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip placement="topLeft" title={props.description}>*/}
+              {/*    {props.description}*/}
+              {/*  </Tooltip>*/}
+              {/*</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/noticeTemplate.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 NoticeCardProps extends TemplateItem {
   detail?: React.ReactNode;
@@ -65,24 +64,27 @@ export default (props: NoticeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>
-              <Tooltip placement="topLeft" title={props.name}>
-                {props.name}
-              </Tooltip>
-            </span>
+            {/*<span className={'card-item-header-name ellipsis'}>*/}
+            {/*  <Tooltip placement="topLeft" 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'}>{typeList[props.type][props.provider] || '暂无'}</div>
+              <Ellipsis title={typeList[props.type][props.provider] || '暂无'} />
+              {/*<div className={'ellipsis'}>{typeList[props.type][props.provider] || '暂无'}</div>*/}
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>
-                <Tooltip placement="topLeft" title={props.description}>
-                  {props.description}
-                </Tooltip>
-              </div>
+              <Ellipsis tooltip={{ placement: 'topLeft' }} title={props.description} />
+              {/*<div className={'ellipsis'}>*/}
+              {/*  <Tooltip placement="topLeft" title={props.description}>*/}
+              {/*    {props.description}*/}
+              {/*  </Tooltip>*/}
+              {/*</div>*/}
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/product.tsx

@@ -2,10 +2,9 @@ import React, { useState } from 'react';
 import type { ProductItem } from '@/pages/device/Product/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 import { useIntl } from 'umi';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
-import { Tooltip } from 'antd';
 import { CheckOutlined } from '@ant-design/icons';
 
 export interface ProductCardProps extends Partial<ProductItem> {
@@ -74,11 +73,7 @@ export const ExtraProductCard = (props: ProductCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <div className={'card-item-header-name'}>
-              <Tooltip title={props.name}>
-                <div className={'ellipsis'}>{props.name}</div>
-              </Tooltip>
-            </div>
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content-items'} style={{ display: 'flex', gap: 12 }}>
             {props.content}
@@ -86,25 +81,20 @@ export const ExtraProductCard = (props: ProductCardProps) => {
           <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>
             {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'} />
               </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>
             )}
           </div>
@@ -141,16 +131,16 @@ 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>
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
           </div>
           <div className={'card-item-content'}>
             <div>
               <label>设备类型</label>
-              <div className={'ellipsis'}>{props?.deviceType?.text}</div>
+              <Ellipsis title={props?.deviceType?.text} titleClassName={'ellipsis'} />
             </div>
             <div>
               <label>接入方式</label>
-              <div className={'ellipsis'}>{props.protocolName || '未接入'}</div>
+              <Ellipsis title={props.protocolName || '未接入'} titleClassName={'ellipsis'} />
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/protocol.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { ProtocolItem } from '@/pages/link/Protocol/typings';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
-import { Col, Row, Tooltip } from 'antd';
+import { Col, Row } from 'antd';
 
 export interface ProcotolCardProps extends ProtocolItem {
   detail?: React.ReactNode;
@@ -32,24 +32,26 @@ export default (props: ProcotolCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <Tooltip title={props.name}>
-              <span className={'card-item-header-name ellipsis'}>{props.name}</span>
-            </Tooltip>
+            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
+            {/*<Tooltip title={props.name}>*/}
+            {/*  <span className={'card-item-header-name ellipsis'}>{props.name}</span>*/}
+            {/*</Tooltip>*/}
           </div>
           <Row gutter={24}>
             <Col span={12}>
               <div>
                 <div style={{ color: 'rgba(0, 0, 0, 0.75)', fontSize: 12 }}>ID</div>
-                <div
-                  style={{
-                    width: '100%',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                    textOverflow: 'ellipsis',
-                  }}
-                >
-                  <Tooltip title={props.id}>{props.id}</Tooltip>
-                </div>
+                {/*<div*/}
+                {/*  style={{*/}
+                {/*    width: '100%',*/}
+                {/*    overflow: 'hidden',*/}
+                {/*    whiteSpace: 'nowrap',*/}
+                {/*    textOverflow: 'ellipsis',*/}
+                {/*  }}*/}
+                {/*>*/}
+                {/*  <Tooltip title={props.id}>{props.id}</Tooltip>*/}
+                {/*</div>*/}
+                <Ellipsis title={props.id} />
               </div>
             </Col>
             <Col span={12}>

src/components/ProTableCard/CardItems/ruleInstance.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableCard } from '@/components';
+import { Ellipsis, TableCard } from '@/components';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 import '@/style/common.less';
 import type { InstanceItem } from '@/pages/rule-engine/Instance/typings';
@@ -30,7 +30,8 @@ export default (props: RuleInstanceCardProps) => {
         </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'}>{props.description}</div>
         </div>

src/components/SearchComponent/index.tsx

@@ -550,22 +550,28 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
       setExpand(false);
       handleForm(true);
     }
-
+    const params = new URLSearchParams(_location.search);
+    params.delete('q');
+    params.delete('target');
     if (
       (value.terms1 && value.terms1.length && value.terms1?.some((item) => item.value)) ||
       (value.terms2 && value.terms2.length && value.terms2?.some((item) => item.value))
     ) {
       if (type) {
+        params.append('q', JSON.stringify(value));
+        if (props.target) {
+          params.append('target', props.target);
+        }
         _history.push({
           hash: _location.hash,
-          search: `q=${JSON.stringify(value)}&target=${props.target}`,
+          search: '?' + params.toString(),
         });
         // setUrl({ q: JSON.stringify(value), target: props.target });
       }
     } else {
       _history.push({
         hash: _location.hash,
-        search: '?',
+        search: '?' + params.toString(),
       });
     }
     onSearch({ terms: _temp });

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

@@ -15,7 +15,7 @@ import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import encodeQuery from '@/utils/encodeQuery';
 import MetadataMap from '@/pages/device/Instance/Detail/MetadataMap';
 import SystemConst from '@/utils/const';
-import { PermissionButton } from '@/components';
+import { Ellipsis, PermissionButton } from '@/components';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { onlyMessage } from '@/utils/util';
 import Parsing from '../../Instance/Detail/Parsing';
@@ -308,8 +308,9 @@ const ProductDetail = observer(() => {
                     type: 'and',
                   };
                   if (url) {
-                    console.log(`${url}?q=${JSON.stringify(searchParams)}`);
-                    history.push(`${url}?q=${JSON.stringify(searchParams)}`);
+                    const params = new URLSearchParams();
+                    params.append('q', JSON.stringify(searchParams));
+                    history.push(`${url}?${params.toString()}`);
                   }
                 }}
               >
@@ -320,11 +321,17 @@ const ProductDetail = observer(() => {
         </Spin>
       }
       title={
-        <Tooltip placement="topLeft" title={productModel.current?.name}>
-          <div className="ellipsis" style={{ maxWidth: 250 }}>
-            {productModel.current?.name}
-          </div>
-        </Tooltip>
+        <Ellipsis
+          title={productModel.current?.name}
+          tooltip={{ placement: 'topLeft' }}
+          style={{ maxWidth: 250 }}
+          limitWidth={250}
+        />
+        // <Tooltip placement="topLeft" title={productModel.current?.name}>
+        //   <div className="ellipsis" style={{ maxWidth: 250 }}>
+        //     {productModel.current?.name}
+        //   </div>
+        // </Tooltip>
       }
       subTitle={
         permission.update ? (

src/pages/notice/Template/Detail/index.tsx

@@ -1371,7 +1371,7 @@ const Detail = observer(() => {
             </Form>
           </Col>
           <Col span={12} push={2}>
-            {docMap[id][provider]}
+            {docMap?.[id]?.[provider]}
           </Col>
         </Row>
       </Card>

src/pages/notice/Template/index.tsx

@@ -235,6 +235,7 @@ const Template = observer(() => {
               isPermission={templatePermission.add}
               onClick={() => {
                 state.current = undefined;
+                console.log(id);
                 history.push(getMenuPathByParams(MENUS_CODE['notice/Template/Detail'], id));
               }}
               key="button"