chore: tip样式统一处理

packages/base-components/TipTool/src/header/index.js

@@ -4,13 +4,16 @@ import {
   ZoomOutOutlined,
   MinusCircleOutlined,
   MinusOutlined,
-  MonitorOutlined,
 } from '@ant-design/icons';
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigProvider } from 'antd';
 import './index.less';
 const Header = (props) => {
   const [showIcon, setShowIcon] = useState(true);
   const [windowStatus, setWindowStatus] = useState(true);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('panda-gis-tipHeader');
   const { headerSetting, events, changeStyle, changeScale } = props;
   const { scaleChange, windowChange, smallChange, tipClose } = events;
   const getWinChange = (icon) => {
@@ -37,10 +40,10 @@ const Header = (props) => {
     }
   };
   return (
-    <div className="Tiphead">
+    <div className={classNames(`${prefixCls}-Tiphead`)}>
       <div
         onClick={getWindowStatus.bind(this, true)}
-        className="TipheadTitle"
+        className={classNames(`${prefixCls}-TipheadTitle`)}
         style={iconStyle().header}
       >
         <span>{headerSetting.layerName}</span>
@@ -48,20 +51,26 @@ const Header = (props) => {
         <span>{headerSetting.oid}</span>
       </div>
 
-      <div className="iconList" style={iconStyle().other}>
+      <div className={classNames(`${prefixCls}-iconList`)} style={iconStyle().other}>
         <div style={iconStyle().icon}>
-          <span className="icons" title="缩放" onClick={scaleChange}>
+          <span className={classNames(`${prefixCls}-icons`)} title="缩放" onClick={scaleChange}>
             <ZoomOutOutlined />
-            <span className="words">缩放至</span>
+            <span className={classNames(`${prefixCls}-words`)}>缩放至</span>
           </span>
-          <span className="icons" onClick={getWinChange.bind(this, showIcon)}>
+          <span
+            className={classNames(`${prefixCls}-icons`)}
+            onClick={getWinChange.bind(this, showIcon)}
+          >
             {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
           </span>
-          <span className="icons" onClick={getWindowStatus.bind(this, false)}>
+          <span
+            className={classNames(`${prefixCls}-icons`)}
+            onClick={getWindowStatus.bind(this, false)}
+          >
             <MinusOutlined />
           </span>
         </div>
-        <span className="icons" onClick={tipClose}>
+        <span className={classNames(`${prefixCls}-icons`)} onClick={tipClose}>
           <CloseOutlined />
         </span>
       </div>

packages/base-components/TipTool/src/header/index.less

-.icons {
+@import '~antd/es/style/themes/default';
+@panda-gis-tipHeader-prefix-cls: ~'@{ant-prefix}-panda-gis-tipHeader';
+
+.@{panda-gis-tipHeader-prefix-cls} {
+  &-icons {
     margin-right: 10px;
     margin-right: 8px;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
-}
-.Tiphead {
+  }
+  &-Tiphead {
     display: flex;
     width: 100%;
     min-height: 45px;
     background-color: #001529;
-  .TipheadTitle {
-    cursor: pointer;
-  }
     > div:nth-child(1) {
       display: flex;
       align-items: center;
@@ -24,14 +25,18 @@
       text-indent: 5px;
       text-overflow: ellipsis;
     }
-  .iconList {
+  }
+  &-iconList {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 70%;
   }
-}
-.words {
+  &-TipheadTitle {
+    cursor: pointer;
+  }
+  &-words {
     font-size: 16px;
     vertical-align: text-bottom;
+  }
 }

packages/base-components/TipTool/src/index.js

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigProvider } from 'antd';
 import { Header } from './header';
 import { LeftList } from './leftList';
 import './index.less';
@@ -6,7 +8,8 @@ import './index.less';
 const TipTool = (props) => {
   const { style } = props;
   const { leftSetting, headerSetting, events } = props.dataList;
-
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('panda-gis-tip');
   const data = [
     {
       name: 'middle',
@@ -67,20 +70,20 @@ const TipTool = (props) => {
     }
   };
   return (
-    <div className="Tipwripconter" style={computedStyle()}>
+    <div className={classNames(`${prefixCls}-Tipwripconter`)} style={computedStyle()}>
       <Header
         headerSetting={headerSetting}
         events={events}
         changeStyle={changeStyle}
         changeScale={changeScale}
       />
-      <div className="TipAll" style={displayComput()}>
-        <div className="Tipconter">
-          <div className="Tipleft">
+      <div className={classNames(`${prefixCls}-TipAll`)} style={displayComput()}>
+        <div className={classNames(`${prefixCls}-Tipconter`)}>
+          <div className={classNames(`${prefixCls}-Tipleft`)}>
             <LeftList leftSetting={leftSetting} />
           </div>
         </div>
-        <div className="tipfooter"></div>
+        <div className={classNames(`${prefixCls}-tipfooter`)}></div>
       </div>
     </div>
   );

packages/base-components/TipTool/src/index.less

-.Tipwripconter {
+@import '~antd/es/style/themes/default';
+@panda-gis-tip-prefix-cls: ~'@{ant-prefix}-panda-gis-tip';
+
+.@{panda-gis-tip-prefix-cls} {
+  &-Tipwripconter {
     width: 100%;
     height: 100%;
-  .TipAll {
+  }
+  &-TipAll {
     height: 100%;
   }
-  .Tipconter {
+  &-Tipconter {
     display: flex;
     width: 100%;
     height: 85%;
     background-color: white;
-    .Tipleft {
+    &-Tipleft {
       width: 100%;
       height: 100%;
       background-color: #f5f6f7;
     }
   }
-  .tipfooter {
+  &-tipfooter {
     position: relative;
     width: 100%;
     height: 10px;
-    .tipfooterar {
+    &-tipfooterar {
       right: 0;
       bottom: 0;
       left: 0;

packages/base-components/TipTool/src/leftList/index.js

 import './index.less';
 import { FileTextOutlined, PlaySquareOutlined } from '@ant-design/icons';
 import { TableContent } from '../tableContent';
-import { Tabs } from 'antd';
+import { Tabs, ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
 const { TabPane } = Tabs;
 const LeftList = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('panda-gis-tipLeft');
   const { leftSetting } = props;
   return (
-    <div className="ullist">
+    <div className={classNames(`${prefixCls}-ullist`)}>
       <Tabs tabPosition="left">
         {leftSetting.map((item, index) => {
           if (!item.active) return;

packages/base-components/TipTool/src/leftList/index.less

-.ullist {
+@import '~antd/es/style/themes/default';
+@panda-gis-tipLeft-prefix-cls: ~'@{ant-prefix}-panda-gis-tipLeft';
+
+.@{panda-gis-tipLeft-prefix-cls} {
+  &-ullist {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -32,4 +36,5 @@
     .ant-tabs-content {
       height: 100%;
     }
+  }
 }

packages/base-components/TipTool/src/tableContent/index.js

 import './index.less';
 import { getVisibleAttribues } from '../demos';
+import classNames from 'classnames';
+import { ConfigProvider } from 'antd';
+import React, { useContext } from 'react';
 const TableContent = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('panda-gis-tipContent');
   const { data } = props;
   const handleData = () => {
     return getVisibleAttribues([data.attributes], data.fields);
   };
   let tableArr = handleData()[0].show;
   return (
-    <div className="contentAll">
-      <div className="wriper">
-        <div className="header">
+    <div className={classNames(`${prefixCls}-contentAll`)}>
+      <div className={classNames(`${prefixCls}-wriper`)}>
+        <div className={classNames(`${prefixCls}-header`)}>
           <span>属性列表</span>
         </div>
-        <div className="contaner">
+        <div className={classNames(`${prefixCls}-contaner`)}>
           <ul>
             {Object.getOwnPropertyNames(tableArr).map((key, index) => {
               return (
@@ -24,7 +29,7 @@ const TableContent = (props) => {
             })}
           </ul>
         </div>
-        <div className="footer"></div>
+        <div className={classNames(`${prefixCls}-foot`)}></div>
       </div>
     </div>
   );

packages/base-components/TipTool/src/tableContent/index.less

-.wriper .contaner::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-.wriper .contaner::-webkit-scrollbar-thumb {
-  background: #1685ff;
-  border-radius: 10px;
-}
+@import '~antd/es/style/themes/default';
+@panda-gis-tipContent-prefix-cls: ~'@{ant-prefix}-panda-gis-tipContent';
 
-.wriper .contaner::-webkit-scrollbar-track {
-  background: #2c4154;
-  border-radius: 10px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-}
-.contentAll {
-  width: 100%;
-  height: 100%;
-}
-.wriper {
+.@{panda-gis-tipContent-prefix-cls} {
+  &-contentAll {
     width: 100%;
     height: 100%;
-  .header {
+  }
+  &-header {
     display: flex;
     align-items: center;
     width: 100%;
@@ -29,7 +15,24 @@
     padding-left: 15px;
     font-size: 16px;
   }
-  .contaner {
+  &-contaner::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  &-contaner::-webkit-scrollbar-thumb {
+    background: #1685ff;
+    border-radius: 10px;
+  }
+  &-contaner::-webkit-scrollbar-track {
+    background: #2c4154;
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+  &-wriper {
+    width: 100%;
+    height: 100%;
+  }
+  &-contaner {
     width: 100%;
     height: 90%;
     overflow: scroll;