feat: tip组件封装

.umirc.js

@@ -92,6 +92,7 @@ export default {
           'ExportExcel',
           'DatePickerCustom',
           'LoadBox',
+          'TipTool',
         ],
       },
       {

package.json

@@ -88,7 +88,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
-    "lerna": "^3.20.2",
+    "lerna": "^3.22.1",
     "lerna-changelog": "^1.0.1",
     "less-loader": "^8.0.0",
     "lint-staged": "^10.0.2",
@@ -300,5 +300,6 @@
       "webpack": false,
       "running": false
     }
-  ]
+  ],
+  "name": "wisdom-components"
 }

packages/base-components/TipTool/README.md

+# `TipTool`
+
+> TODO: description
+
+## Usage
+
+```
+const tipTool = require('./index');
+
+// TODO: DEMONSTRATE API
+```

packages/base-components/TipTool/package.json

+{
+  "name": "@wisdom-components/tiptool",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "qinwenhai <939637841@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}

packages/base-components/TipTool/src/TipTool.md

+---
+title: TipTool - TipTool UI组件
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# TipTool 面板
+
+## 代码演示
+
+<code src="./demos/index.js">
+
+## content
+
+| 参数                   | 说明       | 类型   | 默认值 |
+| ---------------------- | ---------- | ------ | ------ |
+| style                  | tip 框大小 | object |        |
+| style.minWidth         | 最小宽度   | string | 600px  |
+| style.minHeight        | 最小高度   | string | 300px  |
+| style.maxWidth         | 最大宽度   | string | 800px  |
+| style.maxHeight        | 最大高度   | string | 400px  |
+| dataList               | 数据集合   | object |        |
+| dataList.headerSetting | 头部数据   | object | -      |
+| dataList.leftSetting   | 中部数据   | array  | -      |
+| dataList.events        | 事件       | object | -      |
+
+## 事件
+
+| 名称         | 描述         |
+| ------------ | ------------ |
+| scaleChange  | 缩放         |
+| windowChange | 窗口大小调整 |
+| smallChange  | 窗口最小化   |
+| tipClose     | 关闭         |

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

+import TipTool from '../index';
+import _ from 'lodash';
+export default () => {
+  const style = {
+    minWidth: '600px',
+    minHeight: '300px',
+    maxWidth: '800px',
+    maxHeight: '400px',
+  };
+  const scaleChange = () => {
+    console.log('缩放');
+  };
+  const windowChange = ({ name }) => {
+    console.log('窗口大小', name);
+  };
+  const smallChange = ({ flag }) => {
+    console.log('最小化', flag);
+  };
+  const tipClose = () => {
+    console.log('关闭');
+  };
+  const dataList = {
+    headerSetting: {
+      layerName: '德玛西亚',
+      oid: '4152',
+    },
+    leftSetting: [
+      {
+        name: 'dataList',
+        active: true,
+        data: {
+          attributes: {
+            DMAID: '',
+            OID: 5776,
+            code: 'f7c433f9-c1d9-4106-b419-a1aac5e8e8e8',
+            create_user: ' ',
+            from_code: 'b354c3ab-2f85-4d37-b7bb-1bbb8effc67e',
+            from_layer: '水库',
+            geom: null,
+            guid: '',
+            modify_user: '',
+            to_code: '{cc856577-67f1-41d2-b14d-1758876906ad}',
+            to_layer: '节点',
+            主流系数: 0,
+            余氯: 0,
+            初始状态: 'Open',
+            单位水损: 0,
+            备注: '',
+            局损系数: 0,
+            描述: '',
+            摩阻系数: 130,
+            标签: '',
+            水质: 0,
+            流速: 0,
+            流量: 0,
+            漏水量: 0,
+            状态: '',
+            用水量: 0,
+            管壁系数: 0,
+            管径: 1200,
+            管材: 'PE',
+            管长: 4048.862944,
+            组分类型: '0水库原水管',
+            终止节点: 'JD10823',
+            编号: 'GD5776',
+            起始节点: 'RE7',
+          },
+          fields: [
+            {
+              name: 'OID',
+              type: 'civFieldTypeOID',
+              alias: 'OID',
+              nullable: false,
+              editable: false,
+              domain: null,
+              visible: false,
+              editType: null,
+              editTypeConfig: null,
+              defaultValue: null,
+              collectable: false,
+              editTypeMobile: null,
+              mappingField: null,
+            },
+            {
+              name: 'geom',
+              type: 'civFieldTypeMultiLineString',
+              alias: 'geom',
+              length: 8,
+              nullable: false,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'code',
+              type: 'civFieldTypeString',
+              alias: 'code',
+              length: 256,
+              nullable: false,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'from_code',
+              type: 'civFieldTypeString',
+              alias: 'from_code',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'from_layer',
+              type: 'civFieldTypeString',
+              alias: 'from_layer',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'to_code',
+              type: 'civFieldTypeString',
+              alias: 'to_code',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'to_layer',
+              type: 'civFieldTypeString',
+              alias: 'to_layer',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '管长',
+              type: 'civFieldTypeDouble',
+              alias: '管长',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '管径',
+              type: 'civFieldTypeInteger',
+              alias: '管径',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '管材',
+              type: 'civFieldTypeString',
+              alias: '管材',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'create_user',
+              type: 'civFieldTypeString',
+              alias: 'create_user',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'modify_user',
+              type: 'civFieldTypeString',
+              alias: 'modify_user',
+              length: 256,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'create_time',
+              type: 'civFieldTypeDateTime',
+              alias: 'create_time',
+              length: 16,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'modify_time',
+              type: 'civFieldTypeDateTime',
+              alias: 'modify_time',
+              length: 16,
+              nullable: true,
+              editable: false,
+              domain: {},
+              visible: false,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: false,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '编号',
+              type: 'civFieldTypeString',
+              alias: '编号',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '起始节点',
+              type: 'civFieldTypeString',
+              alias: '起始节点',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '终止节点',
+              type: 'civFieldTypeString',
+              alias: '终止节点',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '描述',
+              type: 'civFieldTypeString',
+              alias: '描述',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '摩阻系数',
+              type: 'civFieldTypeDouble',
+              alias: '摩阻系数',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '局损系数',
+              type: 'civFieldTypeDouble',
+              alias: '局损系数',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '初始状态',
+              type: 'civFieldTypeString',
+              alias: '初始状态',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '主流系数',
+              type: 'civFieldTypeDouble',
+              alias: '主流系数',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '管壁系数',
+              type: 'civFieldTypeDouble',
+              alias: '管壁系数',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: 'DMAID',
+              type: 'civFieldTypeString',
+              alias: 'DMAID',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '流量',
+              type: 'civFieldTypeDouble',
+              alias: '流量',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '流速',
+              type: 'civFieldTypeDouble',
+              alias: '流速',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '单位水损',
+              type: 'civFieldTypeDouble',
+              alias: '单位水损',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '状态',
+              type: 'civFieldTypeString',
+              alias: '状态',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '水质',
+              type: 'civFieldTypeDouble',
+              alias: '水质',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '组分类型',
+              type: 'civFieldTypeString',
+              alias: '组分类型',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '余氯',
+              type: 'civFieldTypeDouble',
+              alias: '余氯',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '备注',
+              type: 'civFieldTypeString',
+              alias: '备注',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '标签',
+              type: 'civFieldTypeString',
+              alias: '标签',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: 'guid',
+              type: 'civFieldTypeString',
+              alias: 'guid',
+              length: 256,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '埋设时间',
+              type: 'civFieldTypeDateTime',
+              alias: '埋设时间',
+              length: 16,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '',
+              defaultValue: '',
+              collectable: true,
+              editTypeMobile: '',
+              mappingField: '',
+            },
+            {
+              name: '漏水量',
+              type: 'civFieldTypeDouble',
+              alias: '漏水量',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+            {
+              name: '用水量',
+              type: 'civFieldTypeDouble',
+              alias: '用水量',
+              length: 8,
+              nullable: true,
+              editable: true,
+              domain: {},
+              visible: true,
+              editType: '',
+              editTypeConfig: '{}',
+              defaultValue: '{"Expression": "", "ApplyOnUpdate": false}',
+              collectable: true,
+              editTypeMobile: '文本',
+              mappingField: '',
+            },
+          ],
+        },
+      },
+      {
+        name: 'media',
+        active: true,
+        data: [],
+      },
+    ],
+    events: {
+      scaleChange,
+      windowChange,
+      smallChange,
+      tipClose,
+    },
+  };
+  return (
+    <div>
+      <TipTool style={style} dataList={dataList} />
+    </div>
+  );
+};
+
+//分类可见与不可见属性的数组
+export const getVisibleAttribues = function (attribuesArr, fields) {
+  var attrs = [];
+  fields.forEach(function (item, i, arr) {
+    attribuesArr.forEach(function (attr, index) {
+      if (i == 0) {
+        attrs[index] = {
+          show: {},
+          hide: {},
+          fields: [],
+        };
+      }
+      // 属性值
+      var attrValue = attr[item.name];
+      if (_.isUndefined(attrValue) || _.isNull(attrValue)) {
+        attrValue = '';
+      }
+
+      // 界面展示值-处理后的
+      var handleValue = attrValue;
+      if (handleValue == '') {
+        handleValue = '--';
+      }
+      if (item.visible) {
+        attrs[index]['show'][item.alias] = [attrValue, handleValue, item.name, item];
+        attrs[index]['fields'].push(item.alias);
+      } else {
+        attrs[index]['hide'][item.alias] = attrValue;
+      }
+    });
+  });
+  attrsFieldHandle(attrs);
+  return attrs;
+};
+//字段类型读取
+function attrsFieldHandle(attrs) {
+  attrs.forEach((item) => {
+    var showFieldObj = item['show'];
+    for (var k in showFieldObj) {
+      var testField = showFieldObj[k][0];
+      if (typeof testField == 'number') {
+        if (Number.isInteger(testField)) showFieldObj[k][1] = testField;
+        else showFieldObj[k][1] = Number(testField.toFixed(3));
+      }
+    }
+  });
+}

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

+import {
+  CloseOutlined,
+  PlusCircleOutlined,
+  ZoomOutOutlined,
+  MinusCircleOutlined,
+  MinusOutlined,
+  MonitorOutlined,
+} from '@ant-design/icons';
+import { useState } from 'react';
+import './index.less';
+const Header = (props) => {
+  const [showIcon, setShowIcon] = useState(true);
+  const [windowStatus, setWindowStatus] = useState(true);
+  const { headerSetting, events, changeStyle, changeScale } = props;
+  const { scaleChange, windowChange, smallChange, tipClose } = events;
+  const getWinChange = (icon) => {
+    let name;
+    setShowIcon(!icon);
+    showIcon ? (name = 'large') : (name = 'middle');
+    changeStyle({ name });
+    windowChange({ name });
+  };
+  const getWindowStatus = (flag) => {
+    setWindowStatus(flag);
+    changeScale(flag);
+    smallChange({ flag });
+  };
+  const iconStyle = () => {
+    if (windowStatus) {
+      return {
+        icon: { display: 'inline-block' },
+        other: { width: '70%' },
+        header: { width: '30%' },
+      };
+    } else {
+      return { icon: { display: 'none' }, other: { width: '0%' }, header: { width: '100%' } };
+    }
+  };
+  return (
+    <div className="Tiphead">
+      <div
+        onClick={getWindowStatus.bind(this, true)}
+        className="TipheadTitle"
+        style={iconStyle().header}
+      >
+        <span>{headerSetting.layerName}</span>
+        <span>-</span>
+        <span>{headerSetting.oid}</span>
+      </div>
+
+      <div className="iconList" style={iconStyle().other}>
+        <div style={iconStyle().icon}>
+          <span className="icons" title="缩放" onClick={scaleChange}>
+            <ZoomOutOutlined />
+            <span className="words">缩放至</span>
+          </span>
+          <span className="icons" onClick={getWinChange.bind(this, showIcon)}>
+            {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
+          </span>
+          <span className="icons" onClick={getWindowStatus.bind(this, false)}>
+            <MinusOutlined />
+          </span>
+        </div>
+        <span className="icons" onClick={tipClose}>
+          <CloseOutlined />
+        </span>
+      </div>
+    </div>
+  );
+};
+export { Header };

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

+.icons {
+  margin-right: 10px;
+  margin-right: 8px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}
+.Tiphead {
+  display: flex;
+  width: 100%;
+  min-height: 45px;
+  background-color: #001529;
+  .TipheadTitle {
+    cursor: pointer;
+  }
+  > div:nth-child(1) {
+    display: flex;
+    align-items: center;
+    width: 30%;
+    overflow: hidden;
+    color: white;
+    font-size: 20px;
+    white-space: nowrap;
+    text-indent: 5px;
+    text-overflow: ellipsis;
+  }
+  .iconList {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 70%;
+  }
+}
+.words {
+  font-size: 16px;
+  vertical-align: text-bottom;
+}

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

+import React, { useContext, useState } from 'react';
+import { Header } from './header';
+import { LeftList } from './leftList';
+import './index.less';
+
+const TipTool = (props) => {
+  const { style } = props;
+  const { leftSetting, headerSetting, events } = props.dataList;
+  const data = [
+    {
+      name: 'middle',
+      width: style.minWidth ?? '200px',
+      height: style.minHeight ?? '40px',
+      active: true,
+    },
+    {
+      name: 'large',
+      width: style.maxWidth ?? '200px',
+      height: style.maxHeight ?? '40px',
+      active: false,
+    },
+  ];
+  const scale = {
+    name: 'small',
+    width: '200px',
+    height: '40px',
+    active: true,
+  };
+  const [styleState, setStyleState] = useState(data);
+  const [styleScale, setScaleState] = useState(scale);
+  const changeStyle = ({ name, flag }) => {
+    let data = styleState.slice();
+    data.map((item) => {
+      if (name == item.name) {
+        item.active = true;
+      } else {
+        item.active = false;
+      }
+    });
+    setStyleState(data);
+  };
+
+  const changeScale = (flag) => {
+    let obj = { ...styleScale };
+    obj.active = flag;
+    setScaleState(obj);
+  };
+
+  const computedStyle = () => {
+    if (!styleScale.active) {
+      return { width: styleScale.width, height: styleScale.height };
+    } else {
+      return styleState
+        .filter((item) => item.active)
+        .map(({ width, height }) => {
+          return { width, height };
+        })[0];
+    }
+  };
+  const displayComput = () => {
+    if (styleScale.active) {
+      return { display: 'inline-block' };
+    } else {
+      return { display: 'none' };
+    }
+  };
+  return (
+    <div className="Tipwripconter" style={computedStyle()}>
+      <Header
+        headerSetting={headerSetting}
+        events={events}
+        changeStyle={changeStyle}
+        changeScale={changeScale}
+      />
+      <div className="TipAll" style={displayComput()}>
+        <div className="Tipconter">
+          <div className="Tipleft">
+            <LeftList leftSetting={leftSetting} />
+          </div>
+        </div>
+        <div className="tipfooter"></div>
+      </div>
+    </div>
+  );
+};
+
+export default TipTool;

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

+.Tipwripconter {
+  width: 100%;
+  height: 100%;
+  .TipAll {
+    height: 100%;
+  }
+  .Tipconter {
+    display: flex;
+    width: 100%;
+    height: 85%;
+    background-color: white;
+    .Tipleft {
+      width: 100%;
+      height: 100%;
+      background-color: #f5f6f7;
+    }
+  }
+  .tipfooter {
+    position: relative;
+    width: 100%;
+    height: 10px;
+    .tipfooterar {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      margin: auto;
+      background-color: 'red';
+      border: 10px solid white;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+}

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';
+const { TabPane } = Tabs;
+const LeftList = (props) => {
+  const { leftSetting } = props;
+  return (
+    <div className="ullist">
+      <Tabs tabPosition="left">
+        {leftSetting.map((item, index) => {
+          if (!item.active) return;
+          if (item.name == 'dataList') {
+            return (
+              <TabPane
+                tab={
+                  <div>
+                    <FileTextOutlined />
+                  </div>
+                }
+                key={index}
+              >
+                <TableContent data={item.data} />
+              </TabPane>
+            );
+          } else if (item.name == 'media') {
+            return (
+              <TabPane
+                tab={
+                  <div>
+                    <PlaySquareOutlined />
+                  </div>
+                }
+                key="2"
+              >
+                多媒体
+              </TabPane>
+            );
+          }
+        })}
+      </Tabs>
+    </div>
+  );
+};
+export { LeftList };

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

+.ullist {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-content-holder {
+      background-color: #fff;
+    }
+  }
+  .ant-tabs-tab {
+    display: flex;
+    justify-content: center;
+  }
+  .ant-tabs-tab .anticon {
+    margin-right: 0px;
+    font-size: 16px;
+  }
+  .ant-tabs-left > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
+    padding-left: 0;
+  }
+  .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+    margin: 5px 0 0 0;
+  }
+  .ant-tabs-tab-active {
+    background-color: #ebf3fe;
+  }
+  .ant-tabs-content {
+    height: 100%;
+  }
+}

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

+import './index.less';
+import { getVisibleAttribues } from '../demos';
+const TableContent = (props) => {
+  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">
+          <span>属性列表</span>
+        </div>
+        <div className="contaner">
+          <ul>
+            {Object.getOwnPropertyNames(tableArr).map((key, index) => {
+              return (
+                <li key={index}>
+                  <span title={key}>{key}</span>
+                  <span title={tableArr[key][1]}>{tableArr[key][1]}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div className="footer"></div>
+      </div>
+    </div>
+  );
+};
+export { TableContent };

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;
+}
+
+.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 {
+  width: 100%;
+  height: 100%;
+  .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 10%;
+    margin-bottom: 5px;
+    padding-left: 15px;
+    font-size: 16px;
+  }
+  .contaner {
+    width: 100%;
+    height: 90%;
+    overflow: scroll;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin: 0;
+      padding: 0 15px;
+      list-style: none;
+      li {
+        display: flex;
+        width: 50%;
+        line-height: 30px;
+        border-bottom: 1px solid #ccc;
+        > span:nth-child(1) {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-align: center;
+          text-overflow: ellipsis;
+          background-color: #f2f5fc;
+        }
+        > span:nth-child(2) {
+          flex: 2;
+          padding-left: 5px;
+        }
+        &:nth-child(1) {
+          border-top: 1px solid #ccc;
+        }
+        &:nth-child(2) {
+          border-top: 1px solid #ccc;
+        }
+        &:nth-child(2n) {
+          border-right: 1px solid #ccc;
+        }
+        &:nth-child(2n + 1) {
+          border-right: 1px solid #ccc;
+          border-left: 1px solid #ccc;
+        }
+      }
+    }
+  }
+}