fix(all): 新增icon-v2图标合集, 修改material算法配置组件

feat: 添加新icon

See merge request web-project/zhst-lambo!70

.dumi/global.less

@@ -16,7 +16,7 @@
 
 #root .dumi-default-sidebar {
   width: 188px;
-  overflow-y: hidden;
+  overflow-y: scroll;
   /* stylelint-disable-next-line rule-empty-line-before */
   &:hover {
     overflow-y: auto;

.dumirc.ts

@@ -19,6 +19,7 @@ export default defineConfig({
     '@zhst/slave': path.join(__dirname, 'packages/slave/src'),
     '@zhst/material': path.join(__dirname, 'packages/material/src'),
     '@zhst/icon': path.join(__dirname, 'packages/icon/src'),
+    '@zhst/icon-v2': path.join(__dirname, 'packages/icon-v2/src'),
     '@zhst/map': path.join(__dirname, 'packages/map/src'),
   },
   resolve: {
@@ -34,6 +35,7 @@ export default defineConfig({
       { type: 'slave', dir: 'packages/slave/src' },
       { type: 'material', dir: 'packages/material/src' },
       { type: 'icon', dir: 'packages/icon/src' },
+      { type: 'icon-v2', dir: 'packages/icon-v2/src' },
       { type: 'map', dir: 'packages/map/src' },
     ],
   },

.fatherrc.ts

@@ -1,5 +1,15 @@
-import { defineConfig } from 'father';
+import { defineConfig } from 'father-plugin-less';
 
 export default defineConfig({
   // more father config: https://github.com/umijs/father/blob/master/docs/config.md
+  esm: {
+    output: 'es',
+    ignores: ['**/demo/*', 'src/**/demo/*'],
+    transformer: 'babel',
+  },
+  cjs: {
+    output: 'lib',
+    ignores: ['**/demo/*', 'src/**/demo/*'],
+    transformer: 'babel',
+  },
 });

.gitignore

@@ -9,6 +9,10 @@ vueuse
 /temp
 packages/**/es
 packages/**/lib
+**/es
+**/lib
+**/**/es
+**/**/lib
 /es
 /lib
 pnpm-lock.yaml

package.json

@@ -61,6 +61,7 @@
     "dumi": "^2.2.13",
     "eslint": "^8.23.0",
     "father": "^4.1.0",
+    "father-plugin-less": "^0.0.2",
     "husky": "^8.0.1",
     "lerna": "^8.0.0",
     "lint-staged": "^13.0.3",
@@ -82,5 +83,12 @@
   },
   "authors": [
     "dev<710328466@qq.com>"
-  ]
+  ],
+  "dependencies": {
+    "@ant-design/happy-work-theme": "^1.0.0",
+    "@zhst/meta": "workspace:^",
+    "rc-rate": "~2.12.0",
+    "react-fast-marquee": "^1.6.4",
+    "react-infinite-scroll-component": "^6.1.0"
+  }
 }

packages/biz/.fatherrc.ts

@@ -1,13 +1,20 @@
-import { defineConfig } from 'father';
+import { defineConfig } from 'father-plugin-less';
 
 export default defineConfig({
   // more father config: https://github.com/umijs/father/blob/master/docs/config.md
   esm: {
     output: 'es',
-    ignores: ['**/demo/*', 'src/**/demo/*']
+    ignores: ['**/demo/*', 'src/**/demo/*'],
+    transformer: 'babel',
   },
   cjs: {
     output: 'lib',
-    ignores: ['**/demo/*', 'src/**/demo/*']
+    ignores: ['**/demo/*', 'src/**/demo/*'],
+    transformer: 'babel',
   },
+  lessInBabel: {
+    modifyVars: {
+    },
+  },
+  plugins: ['father-plugin-less'],
 });

packages/biz/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @zhst/biz
 
+## 0.34.0
+
+### Minor Changes
+
+- feat(material,biz,meta): 修改算法配置物料,树组件业务传参,修复大图组件 od 变化不重新渲染
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.30.0
+
+## 0.33.2
+
+### Patch Changes
+
+- 修改穿梭框不能修改宽度
+
+## 0.33.1
+
+### Patch Changes
+
+- 修改穿梭框不能修改宽度 bug
+
+## 0.33.0
+
+### Minor Changes
+
+- feat(biz): 修改穿梭框的样式和注释
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.29.0
+
+## 0.32.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.28.0
+
+## 0.32.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/icon@0.8.0
+  - @zhst/meta@0.27.1
+
+## 0.32.0
+
+### Minor Changes
+
+- zhst/biz 废弃 tree 组件
+
+## 0.31.0
+
+### Minor Changes
+
+- 修改 less to css 配置
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/func@0.17.0
+  - @zhst/hooks@0.15.0
+  - @zhst/icon@0.7.0
+  - @zhst/meta@0.27.0
+
+## 0.30.0
+
+### Minor Changes
+
+- 新增 zhst/biz 的大图组件 v2,修改其它包打包样式文件为 css
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.14.0
+  - @zhst/icon@0.6.0
+  - @zhst/meta@0.26.0
+
+## 0.29.0
+
+### Minor Changes
+
+- zhst/biz: 添加 treePanel 的一些例子,修复一些 ts 报错
+
+## 0.28.0
+
+### Minor Changes
+
+- zhst/biz: 新增树面板
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.25.0
+
+## 0.27.0
+
+### Minor Changes
+
+- zhst/meta 全量迁移 antd-5.17.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.24.0
+
 ## 0.26.0
 
 ### Minor Changes

packages/biz/es/BigImageModal/BigImageModal.js

@@ -1,270 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-// @ts-nocheck
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { ConfigProvider, Descriptions, Modal, Tabs, CropperImage, AttachImage, VideoPlayer, BtnGroup, RelatedImage } from '@zhst/meta';
-import classNames from 'classnames';
-import { get, isEmpty, pick } from '@zhst/func';
-import Navigation from "./components/navigation";
-import CombineImage from "./components/CombineImage";
-import "./index.less";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var DescriptionsItem = Descriptions.Item;
-export var componentPrefix = 'zhst-image';
-
-// 对比图模式、场景图模式、视频模式
-
-var initialStyle = {
-  fontSize: '12px'
-};
-var BigImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$title = props.title,
-    title = _props$title === void 0 ? '-' : _props$title,
-    width = props.width,
-    open = props.open,
-    children = props.children,
-    onCancel = props.onCancel,
-    activeTab = props.activeTab,
-    _props$attributeList = props.attributeList,
-    attributeList = _props$attributeList === void 0 ? [] : _props$attributeList,
-    _props$isRelated = props.isRelated,
-    isRelated = _props$isRelated === void 0 ? false : _props$isRelated,
-    _props$tabs = props.tabs,
-    tabs = _props$tabs === void 0 ? {} : _props$tabs,
-    _props$footer = props.footer,
-    footer = _props$footer === void 0 ? null : _props$footer,
-    _props$dataSource = props.dataSource,
-    dataSource = _props$dataSource === void 0 ? {} : _props$dataSource,
-    onTabChange = props.onTabChange,
-    compareImageProps = props.compareImageProps,
-    showNavigation = props.showNavigation,
-    modalProps = props.modalProps,
-    cropperImageProps = props.cropperImageProps,
-    prevButtonProps = props.prevButtonProps,
-    onPrevButtonClick = props.onPrevButtonClick,
-    onNextButtonClick = props.onNextButtonClick,
-    nextButtonProps = props.nextButtonProps,
-    tabsProps = props.tabsProps,
-    btnGroupProps = props.btnGroupProps,
-    descriptionsProps = props.descriptionsProps,
-    relatedImageProps = props.relatedImageProps,
-    theme = props.theme;
-  var combineImageRef = useRef(null);
-  var videoPlayerRef = useRef(null);
-  var modalRef = useRef(null);
-
-  // ========================== 头切换 =========================
-  var _useState = useState(activeTab || get(tabsProps, 'data[0].key')),
-    _useState2 = _slicedToArray(_useState, 2),
-    tab = _useState2[0],
-    setTab = _useState2[1];
-  var _useState3 = useState('related'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeKey = _useState4[0],
-    setActiveKey = _useState4[1];
-
-  // ========================= 预览切换下标 =========================
-  var _useState5 = useState('auto'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    cropType = _useState6[0],
-    setCropType = _useState6[1];
-  var cropBtnDataSource = [{
-    key: 'close',
-    icon: 'icon-danchuangguanbi',
-    title: '退出'
-  }, {
-    key: 'auto',
-    icon: 'icon-zidong',
-    title: '智能框选'
-  }, {
-    key: 'custom',
-    icon: 'icon-shoudong',
-    title: '手动框选'
-  }];
-  var handleCropBtnClick = function handleCropBtnClick(v) {
-    setCropType(v);
-  };
-  var defaultTabsProps = !isEmpty(tabs) ? tabs : {
-    items: [{
-      label: '对比图模式',
-      key: 'COMPATER',
-      children: /*#__PURE__*/_jsx(CombineImage, _objectSpread({
-        ref: combineImageRef,
-        data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score')
-      }, compareImageProps))
-    }, {
-      label: '场景图模式',
-      key: 'NORMAL',
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'center',
-          width: '100%'
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          style: {
-            width: '85%',
-            height: '500px'
-          },
-          children: /*#__PURE__*/_jsxs(CropperImage, _objectSpread(_objectSpread({
-            type: "rect",
-            odList: get(dataSource, 'odRect', [])
-          }, cropperImageProps), {}, {
-            children: [!(cropperImageProps !== null && cropperImageProps !== void 0 && cropperImageProps.editAble) && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(AttachImage, {
-                data: [{
-                  label: '测试',
-                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
-                }]
-              }), /*#__PURE__*/_jsx("div", {
-                style: {
-                  position: 'absolute',
-                  right: '24px',
-                  bottom: '24px',
-                  fontSize: '18px',
-                  color: 'red',
-                  cursor: 'default'
-                },
-                children: "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.score).toFixed(2))
-              })]
-            }), (cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.showEditTools) && /*#__PURE__*/_jsx(BtnGroup, _objectSpread({
-              circle: true,
-              style: {
-                position: 'absolute',
-                top: 0,
-                right: 0
-              },
-              dataSource: cropBtnDataSource,
-              onClick: handleCropBtnClick,
-              selectKey: cropType
-            }, btnGroupProps))]
-          }))
-        })
-      })
-    }]
-  };
-
-  // 暴露 ref 实例
-  useImperativeHandle(ref, function () {
-    return {
-      ref: ref,
-      tab: tab,
-      setTab: setTab,
-      modalRef: modalRef,
-      activeKey: activeKey,
-      setActiveKey: setActiveKey,
-      videoPlayerRef: videoPlayerRef,
-      combineImageRef: combineImageRef
-    };
-  });
-  return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
-    destroyOnClose: true,
-    width: width,
-    open: open,
-    ref: modalRef,
-    footer: footer,
-    className: componentPrefix,
-    title: title,
-    onCancel: onCancel
-  }, modalProps), {}, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: {
-        marginTop: '16px'
-      },
-      children: [/*#__PURE__*/_jsx(ConfigProvider, {
-        theme: _objectSpread({
-          token: {
-            colorTextSecondary: 'rgba(0,0,0,0.45)'
-          },
-          components: {
-            Descriptions: {
-              titleMarginBottom: '20px',
-              viewBg: '#f6f6f6',
-              titleColor: 'rgba(0,0,0,0.45)',
-              colorTextLabel: 'rgba(0,0,0,0.45)',
-              contentColor: 'rgba(0,0,0,0.88)'
-            }
-          }
-        }, theme),
-        children: attributeList.map(function (descriptions) {
-          var _descriptions$childre;
-          return /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
-            title: /*#__PURE__*/_jsx("p", {
-              style: {
-                margin: '12px 0 0',
-                fontSize: initialStyle.fontSize
-              },
-              children: descriptions.title
-            }),
-            column: 8,
-            style: {
-              padding: '0 64px'
-            }
-          }, descriptionsProps), {}, {
-            children: descriptions === null || descriptions === void 0 || (_descriptions$childre = descriptions.children) === null || _descriptions$childre === void 0 ? void 0 : _descriptions$childre.map(function (item) {
-              return /*#__PURE__*/_jsx(DescriptionsItem, {
-                label: item.label,
-                span: 1,
-                contentStyle: {
-                  fontSize: initialStyle.fontSize
-                },
-                labelStyle: {
-                  fontSize: initialStyle.fontSize
-                },
-                children: item.children
-              }, item.key);
-            })
-          }), descriptions.title);
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: classNames("".concat(componentPrefix, "-view-container")),
-        children: [/*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
-          activeKey: tab,
-          centered: true,
-          destroyInactiveTabPane: true,
-          onChange: function onChange(v) {
-            setTab(function (pre) {
-              onTabChange === null || onTabChange === void 0 || onTabChange(v, pre);
-              return v;
-            });
-          },
-          tabBarStyle: {
-            fontSize: '18px',
-            fontWeight: 'bold'
-          }
-        }, defaultTabsProps), tabsProps)), tab === 'VIDEO' && /*#__PURE__*/_jsx(VideoPlayer, {
-          ref: videoPlayerRef,
-          url: dataSource === null || dataSource === void 0 ? void 0 : dataSource.flvUrl
-        }), /*#__PURE__*/_jsx(Navigation, _objectSpread({
-          className: classNames("".concat(componentPrefix, "-view-container__nav"), (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--left")),
-          prev: true,
-          show: showNavigation,
-          onClick: onPrevButtonClick
-        }, prevButtonProps)), /*#__PURE__*/_jsx(Navigation, _objectSpread({
-          className: classNames("".concat(componentPrefix, "-view-container__nav"), (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--right")),
-          next: true,
-          show: showNavigation,
-          onClick: onNextButtonClick
-        }, nextButtonProps)), isRelated && /*#__PURE__*/_jsx("div", {
-          style: {
-            margin: '24px 0'
-          },
-          children: /*#__PURE__*/_jsx(RelatedImage, _objectSpread({}, relatedImageProps))
-        })]
-      })]
-    }), children]
-  }));
-});
-export default BigImageModal;

packages/biz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/biz",
-  "version": "0.26.0",
+  "version": "0.34.0",
   "description": "业务库",
   "keywords": [
     "business",
@@ -35,6 +35,7 @@
     "registry": "http://10.0.0.77:4874"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.9",
     "@zhst/types": "workspace:^"
   },
   "dependencies": {

packages/biz/src/BigImage/BigImage.tsx

@@ -0,0 +1,304 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import {
+  ConfigProvider,
+  Descriptions,
+  CropperImage,
+  AttachImage,
+  VideoPlayer,
+  RelatedImage,
+  Radio,
+  Tooltip,
+  Button,
+  Tabs
+} from '@zhst/meta';
+import classNames from 'classnames'
+import { IconFont } from '@zhst/icon'
+import { BigImageProps, BigImageRef } from './interface'
+import CombineImage from './components/CombineImage'
+import './index.less'
+
+const DescriptionsItem = Descriptions.Item
+
+export const componentPrefix = 'zhst-big-image'
+
+const initialStyle ={
+  fontSize: '12px'
+}
+
+const BigImage = forwardRef<BigImageRef, BigImageProps>((props, ref) => {
+  const {
+    // ------------ 通用配置 -------------------
+    type,
+    viewHeight,
+    width = '100%',
+    children,
+    // ------------ 顶部按钮 -----------------
+    topButtonRender,
+    // ------------ 描述 -----------------
+    descriptionList = [],
+    showDescription,
+    // ------------- tab 导航 ----------------
+    customTabBarExtraContent,
+    tabProps,
+    onTabChange,
+    // ------------- 场景图 -------------
+    cropperImageProps = {
+      cropButtonList: []
+    },
+    // ----------------- 对比图 ---------------------
+    combineImageProps,
+    // ------------ 视频模式 -----------------
+    videoProps,
+    // ------------ view 操作按钮 -----------------
+    showModeChange,
+    modeButtonGroupProps,
+    viewTopModeButtonList = [
+      {
+        key: 'image',
+        label: '图片'
+      },
+      {
+        key: 'video',
+        label: '视频'
+      }
+    ],
+    // ------------------ 翻页 ----------------------
+    showNavigation,
+    prevButtonProps,
+    onPrevButtonClick,
+    onNextButtonClick,
+    nextButtonProps,
+    // ------------------ 人脸碰撞模型 -----------------
+    relatedImageProps,
+    isRelated = false,
+    theme,
+  } = props
+  const combineImageRef = useRef<any>(null)
+  const videoPlayerRef = useRef<any>(null)
+  const cropperImageRef = useRef<any>(null)
+
+  cropperImageProps.cropButtonList = cropperImageProps?.cropButtonList || [
+    {
+      key: 'auto',
+      icon: <IconFont icon='icon-zidong' />,
+      label: '智能框选',
+    },
+    {
+      key: 'custom',
+      icon: <IconFont icon='icon-shoudong' />,
+      label: '手动框选',
+    }
+  ];
+
+  // ------------------- 初始化模式 ----------------------
+  const initMode = (type: BigImageProps['type'] = 'normal') => {
+    switch (type) {
+      case 'compater':
+        return (
+          <CombineImage
+            // @ts-ignore
+            ref={combineImageRef}
+            height={viewHeight}
+            {...combineImageProps}
+          />
+        )
+      case 'normal':
+        return (
+          <div style={{ height: viewHeight, width: '100%' }}>
+            <CropperImage
+              ref={cropperImageRef}
+              type='rect'
+              // @ts-ignore
+              height={viewHeight}
+              {...cropperImageProps}
+            >
+              {/* // ------------ 显示条件：当不为编辑状态，并且有图片值 ----------------- */}
+              {!cropperImageProps?.editAble && cropperImageProps?.attachImageData && (
+                <>
+                  <AttachImage
+                    data={cropperImageProps?.attachImageData}
+                    {...cropperImageProps?.attachImageProps}
+                  />
+                  <div
+                    style={{
+                      position: 'absolute',
+                      right: '4px',
+                      bottom: '4px',
+                      fontSize: '18px',
+                      color: 'red',
+                      cursor: 'default'
+                    }}
+                  >{`人脸质量分：${(Number(cropperImageProps?.score) as number).toFixed(2)}`}</div>
+                </>
+              )}
+              {/* // ------------ 场景图绘制工具栏 ----------------- */}
+              {cropperImageProps?.showEditTools && (
+                <div className={`${componentPrefix}-view-cropper-btn`}>
+                  <Radio.Group
+                    className={`${componentPrefix}-view-cropper-btn-group`}
+                    size="small"
+                    buttonStyle='solid'
+                    // @ts-ignore
+                    onChange={cropperImageProps?.onCropperTypeChange}
+                    {...cropperImageProps.btnGroupProps}
+                  >
+                    {cropperImageProps?.cropButtonList?.map(btn => (
+                      <Tooltip key={btn.key} title={btn.label}>
+                        {/* @ts-ignore */}
+                        <Radio.Button value={btn.key}{...btn.props}><div  className={`${componentPrefix}-view-cropper-btn-group-radio`}>{btn.icon} {btn.label}</div></Radio.Button>
+                      </Tooltip>
+                    ))}
+                  </Radio.Group>
+                  <Button onClick={cropperImageProps?.onExitEdit} className={`${componentPrefix}-view-cropper-btn_close`} type="primary" size="small" icon={<IconFont icon="icon-danchuangguanbi" />} />
+                </div>
+              )}
+            </CropperImage>
+          </div>
+        )
+      case 'video':
+        return (
+          // @ts-ignore
+          <VideoPlayer ref={videoPlayerRef} height={viewHeight} {...videoProps} />
+        )
+    }
+  }
+
+  // 暴露 ref 实例
+  useImperativeHandle(ref, () => ({
+    // @ts-ignore
+    cropperImageRef: cropperImageRef?.current,
+    videoPlayerRef: videoPlayerRef?.current,
+    combineImageRef: combineImageRef?.current,
+  }));
+
+  return (
+    <div
+      className={classNames(`${componentPrefix}-view`)}
+      style={{ width: `${parseInt(width as string)}px` }}
+    >
+      <div className={classNames(`${componentPrefix}-view-btns`)}>
+        {topButtonRender}
+      </div>
+      {showDescription && (
+        <div
+          className={classNames(`${componentPrefix}-view-desc`)}
+        >
+          <ConfigProvider
+            theme={{
+              components: {
+                Descriptions: {
+                  viewBg: '#f6f6f6',
+                  colorBgLayout:'#ccc',
+                  titleColor: 'rgba(0,0,0,0.45)',
+                  colorTextLabel: 'rgba(0,0,0,0.45)',
+                  contentColor: 'rgba(0,0,0,0.88)',
+                },
+              },
+              ...theme
+            }}
+          >
+            {descriptionList.map(descriptions => (
+              <Descriptions
+                key={descriptions.title}
+                title={descriptions.showTitle && descriptions.title}
+                column={8}
+                {...descriptions.props}
+              >
+                {descriptions?.children?.map(item => (
+                  <DescriptionsItem
+                    key={item.key}
+                    label={item.label}
+                    span={1}
+                    contentStyle={{ fontSize: initialStyle.fontSize }}
+                    labelStyle={{ fontSize: initialStyle.fontSize }}
+                  >{item.children}</DescriptionsItem>
+                ))}
+              </Descriptions>
+            ))}
+          </ConfigProvider>
+        </div>
+      )}
+      <Tabs
+        tabBarExtraContent={customTabBarExtraContent}
+        onChange={onTabChange}
+        items={[
+          {
+            label: `场景图`,
+            key: '1',
+          },
+          {
+            label: `对比图`,
+            key: '2',
+          }
+        ]}
+        {...tabProps}
+      />
+      <div
+        className={classNames(`${componentPrefix}-view-container`)}
+      >
+        {/* ---------------- view 视图左上角导航按钮 ------------------ */}
+        {showModeChange && (
+          <div
+            className={classNames(`${componentPrefix}-view-container-modeNav`)}
+          >
+            <Radio.Group
+              buttonStyle='solid'
+              size='small'
+              {...modeButtonGroupProps}
+            >
+              {viewTopModeButtonList?.map(btn => (
+                <Tooltip key={btn.key} title={btn.tooltipTxt}>
+                  {/* @ts-ignore */}
+                  <Radio.Button  value={btn.key} {...btn.props}>{btn.icon} {btn.label}</Radio.Button>
+                </Tooltip>
+              ))}
+            </Radio.Group>
+          </div>
+        )}
+        {/* --------------------------------- 视频播放模式 --------------------------------- */}
+        {initMode(type)}
+        {/* 切换按钮组件 */}
+        {/* ----------------------------------- 上一张按钮 ---------------------------------- */}
+        {showNavigation && (
+          <Button
+            className={classNames(
+              `${componentPrefix}-view-container-nav`,
+              `${componentPrefix}-view-container-nav_left`
+            )}
+            icon={<IconFont icon="icon-qiehuanzuo" />}
+            type="primary"
+            // style={{ backgroundColor: 'rgba(255,255,255,0.8)' }}
+            shape='circle'
+            onClick={onPrevButtonClick}
+            {...prevButtonProps}
+          />
+        )}
+        {/* ----------------------------------- 下一张按钮 ---------------------------------- */}
+        {showNavigation && (
+          <Button
+            className={classNames(
+              `${componentPrefix}-view-container-nav`,
+              `${componentPrefix}-view-container-nav_right`
+            )}
+            icon={<IconFont icon="icon-qiehuanyou" />}
+            type="primary"
+            // style={{ backgroundColor: 'rgba(255,255,255,0.8)' }}
+            shape='circle'
+            onClick={onNextButtonClick}
+            {...nextButtonProps}
+          />
+        )}
+      </div>
+      {/* ----------------------------------- 人脸碰撞组件 ---------------------------------- */}
+      {isRelated && (
+        // @ts-ignore
+        <RelatedImage
+          {...relatedImageProps}
+        />
+      )}
+      {children}
+    </div>
+  )
+})
+
+export default BigImage

packages/biz/src/BigImage/components/CombineImage/index.less

@@ -0,0 +1,3 @@
+.zhst-big-image-combime-image {
+  background-color: #f7f7f7;
+}

packages/biz/src/BigImage/components/CombineImage/index.tsx

@@ -0,0 +1,82 @@
+
+import React, { FC, useRef, forwardRef, useImperativeHandle } from 'react';
+import { CompareImage, Flex, Progress, ProgressProps, CompareImageProps } from '@zhst/meta'
+import './index.less'
+
+export interface ComBineImageProps {
+  height?: string | number
+  data: {
+    imgSummary: string;
+    compaterImage: string;
+    imageKey: string;
+    score: number;
+  }
+  prevDisable?: boolean;
+  nextDisable?: boolean;
+  onPre?: () => void;
+  onNext?: () => void;
+  openRoll?: boolean
+  targetImageProps?: CompareImageProps
+  sourceImageProps?: CompareImageProps
+}
+
+const conicColors: ProgressProps['strokeColor'] = {
+  '0%': '#42E2AC',
+  '50%': '#DFAF2E',
+  '100%': '#F95C55',
+};
+
+const componentName = 'zhst-big-image-combime-image'
+
+const ComBineImage: FC<ComBineImageProps> = forwardRef((props, ref) => {
+  const {
+    height,
+    data,
+    prevDisable,
+    nextDisable,
+    onNext,
+    onPre,
+    openRoll
+  } = props
+  const { imgSummary, compaterImage, score } = data
+  const targetImageRef = useRef(null)
+  const compareImageRef = useRef(null)
+
+  useImperativeHandle(ref, () => ({
+    compareImageRef,
+    targetImageRef
+  }));
+
+  return (
+    <Flex className={componentName} justify='space-between' align='center' >
+      <CompareImage
+        ref={targetImageRef}
+        height={height as string}
+        width="400px"
+        preDisable={prevDisable}
+        nextDisable={nextDisable}
+        onNext={onNext}
+        onPre={onPre}
+        showScore={false}
+        openRoll={openRoll}
+        url={imgSummary}
+        label="目标图"
+        {...props.targetImageProps}
+      />
+      <Progress type="circle" size={72} strokeWidth={6} percent={Number(score || 0)} strokeColor={conicColors} />
+      <CompareImage
+        ref={compareImageRef}
+        width="400px"
+        height={height as string}
+        url={compaterImage}
+        openRoll={false}
+        score={score}
+        label="预警图"
+        labelColor='#FA5852'
+        {...props.sourceImageProps}
+      />
+    </Flex>
+  )
+})
+
+export default ComBineImage

packages/biz/src/BigImage/components/navigation/index.less

@@ -0,0 +1,44 @@
+.zhst-image__nav {
+  position: absolute;
+  display: flex;
+  width: 48px;
+  height: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 0;
+
+  &>button {
+    & span {
+      display: flex;
+    }
+  }
+
+  :global {
+    i:hover {
+      color: #fff !important;
+    }
+  }
+
+  &--disable {
+    :global {
+      i {
+        color: #f0f0f0;
+        cursor: not-allowed !important;
+      }
+    }
+  }
+
+  &--hide {
+    display: none;
+  }
+
+  &-prev {
+    left: 12px;
+  }
+
+  &-next {
+    right: 12px;
+  }
+}

packages/biz/src/BigImage/components/navigation/index.tsx

@@ -0,0 +1,40 @@
+// !! 已废弃
+import * as React from 'react';
+import classnames from 'classnames';
+import { Button } from '@zhst/meta';
+import { IconFont } from '@zhst/icon'
+import './index.less';
+
+const componentName = `zhst-image__nav`;
+
+const Navigation: React.FC<{
+  show?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  prev?: boolean;
+  next?: boolean;
+  disabled?: boolean;
+  className?: string;
+  color?: string;
+  hoverColor?: string;
+}> = (props) => {
+  const { show, prev, next, disabled, onClick, className, color } = props;
+
+  return (
+    <div
+      className={classnames(
+        `${componentName}`,
+        prev && `${componentName}-prev`,
+        next && `${componentName}-next`,
+        disabled && `${componentName}--disable`,
+        !show && `${componentName}--hide`,
+        className
+      )}
+    >
+      <Button type="text" disabled={disabled} shape='circle' onClick={onClick}>
+        <IconFont size={28} color={color} icon={prev ? 'icon-qiehuanzuo' : 'icon-qiehuanyou'} />
+      </Button>
+    </div>
+  );
+};
+
+export default Navigation;

packages/biz/src/BigImage/demo/index.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BigImage } from '@zhst/biz'
+import { Space, Switch } from '@zhst/meta'
+import { pick, get } from '@zhst/func'
+import { BIG_IMAGE_DATA, attributeList } from '../mock'
+import Img from './imgs/photo-1503185912284-5271ff81b9a8.webp'
+
+const BigModal = (props: any) => {
+  const {
+  } = props
+  const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
+  const [showDesc, setShowDesc] = useState(true)
+  const [type, setType] = useState('normal')
+  const modalRef = useRef(null)
+
+  return (
+    <div style={{ padding: '32px', border: '1px solid #09f' }}>
+      <Space>
+        <span>显示属性：<Switch value={showDesc} onChange={e => setShowDesc(pre => !pre)} /></span>
+      </Space>
+      <BigImage
+        type={type}
+        ref={modalRef}
+        width={896}
+        viewHeight={'440px'}
+        showModeChange
+        onTabChange={(newVal) => setType(newVal === '1'? 'normal': 'compater')}
+        // ------------ 属性列表 -----------------
+        showDescription={showDesc}
+        descriptionList={attributeList}
+        // ------------ 图片/视频切换 -----------------
+        viewTopModeButtonList={[
+          {
+            key: 'image',
+            label: '图片'
+          },
+          {
+            key: 'video',
+            label: '视频'
+          }
+        ]}
+        modeButtonGroupProps={{
+          defaultValue: 'image',
+          onChange: e => console.log('模式切换', e)
+        }}
+        // ------------ 导航功能 -----------------
+        showNavigation
+        onPrevButtonClick={val => console.log('pre', val)}
+        onNextButtonClick={val => console.log('next', val)}
+        // ------------ 场景图功能 -----------------
+        cropperImageProps={{
+          url: Img,
+          score: 50,
+          odList: get(dataSource, 'odRect', []),
+          attachImageData: get(dataSource, 'attachImg', []),
+        }}
+        // ------------ 对比图模式 -----------------
+        combineImageProps={{
+          data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
+        }}
+        // ------------ 视频模块 -----------------
+        videoProps={{
+          url: get(dataSource, 'flvUrl', '')
+        }}
+      >
+      </BigImage>
+    </div>
+  )
+}
+
+export default BigModal

packages/biz/src/BigImage/demo/oldData.tsx

@@ -0,0 +1,128 @@
+// @ts-nocheck
+import React, { useState } from 'react';
+import { BigImageModal } from '@zhst/biz'
+import { Button, DescriptionsProps } from '@zhst/meta'
+import { IMAGE_DATA, BIG_IMAGE_DATA } from '../mock'
+import bigImageModalAdapter from '../util/bigImageModalAdapter'
+import { get } from '@zhst/func';
+
+const descriptionList: DescriptionsProps['items'] = [
+  {
+    title: '人员属性',
+    children: [
+      {
+        key: '1',
+        label: '性别',
+        children: '男',
+      },
+      {
+        key: '2',
+        label: '年龄',
+        children: '成年',
+      },
+      {
+        key: '3',
+        label: '帽子',
+        children: '无',
+      },
+      {
+        key: '4',
+        label: '上身颜色',
+        children: '灰',
+      },
+      {
+        key: '5',
+        label: '下身颜色',
+        children: '蓝色',
+      },
+      {
+        key: '6',
+        label: '附着物',
+        children: '无',
+      },
+      {
+        key: '7',
+        label: '骑行',
+        children: '否',
+      },
+    ]
+  }
+];
+
+// 适配器，适配老接口
+const NewImageModal = bigImageModalAdapter(BigImageModal, {
+  oldMode: true
+})
+
+const BigModal = (props) => {
+  const {
+    onClose,
+    isArchiveDetail = false,
+    specialTitle = '对比图2',
+    transformPropFunc,
+    screenshotButtonRender,
+    showLowFaceTip = false
+  } = props
+  const [visible, setVisible] = useState(false)
+  const [selectIndex, setSelectIndex] = useState(0)
+  const [dataSource, setDataSource] = useState(IMAGE_DATA.dataSource)
+  const [dataSources, setDataSources] = useState(IMAGE_DATA.dataSource)
+  const [selectItem, setSelectItem] = useState({})
+
+  return (
+    <div>
+      <Button onClick={() => setVisible(true)} >查看大图</Button>
+      <NewImageModal
+        title="查看大图"
+        dataSource={dataSource}
+        imageData={dataSource}
+        width={1098}
+        onClose={() => onClose}
+        descriptionConfig={{ data: descriptionList }}
+        visible={visible}
+        isArchiveDetail={isArchiveDetail}
+        ToolProps={{
+          // renderLeft: leftOperateBar({ disableBtn, onActionClick: onBigImageActionClick }),
+          // renderRight: rightOperateBar({
+          //   disableBtn,
+          //   onActionClick: onBigImageActionClick,
+          //   isArchiveDetail,
+          // }),
+          // renderVideoBtn: !disableBtn.includes(OPT['PLAY_VIDEO']),
+          // disableVideo: disableVideo,
+        }}
+        selectIndex={selectIndex}
+        onSelectIndexChange={(index: number) => {
+          index > 0 && index < dataSources.length && setSelectIndex(index);
+        }}
+        // tabsFilter={tabsFilter}
+        specialTitle={specialTitle}
+        transformPropFunc={async (item: any) => {
+          let bigImageInfo = !!transformPropFunc && (await transformPropFunc(item));
+          setSelectItem({ ...bigImageInfo });
+          return { ...bigImageInfo };
+        }}
+        screenshotButtonRender={screenshotButtonRender}
+        //@ts-ignore
+        transformVideoPropFunc={async (item) => {
+          const { maxDuration: duration = 20 } = item || {};
+          const time = get(item, 'timestamp');
+          const cameraId = get(item, 'cameraId');
+          const { url: flvUrl } = {
+            url: 'url',
+            downloadUrl: 'url',
+          };
+          return {
+            flvUrl,
+            maxDuration: duration,
+          };
+        }}
+        nullDialogProp={{
+          emptyText: showLowFaceTip ? '目标图人脸质量较低，暂无聚类数据' : '暂无数据',
+        }}
+      />
+    </div>
+  )
+}
+
+export default BigModal

packages/biz/src/BigImage/demo/withEdit.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BigImage } from '@zhst/biz'
+import { Space, Switch, Button } from '@zhst/meta'
+import { pick, get } from '@zhst/func'
+import { BIG_IMAGE_DATA, attributeList } from '../mock'
+import Img from './imgs/photo-1503185912284-5271ff81b9a8.webp'
+
+const testOd = [
+  {
+    "id": "456",
+    "x": 0.58543766,
+    "y": 0.3203356,
+    "w": 0.052037954,
+    "h": 0.2664015
+  }
+]
+
+const BigModal = (props: any) => {
+  const {
+  } = props
+  const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
+  const [showDesc, setShowDesc] = useState(true)
+  const [editAble, setEditAble] = useState(false)
+  const [odList, setOdList] = useState(get(dataSource, 'odRect', []))
+  const [type, setType] = useState('normal')
+  const bigImageRef = useRef(null)
+
+  return (
+    <div style={{ padding: '32px', border: '1px solid #09f' }}>
+      <Space>
+        <span>显示属性：<Switch value={showDesc} onChange={e => setShowDesc(pre => !pre)} /></span>
+        <span>打开编辑模式：<Switch value={editAble} onChange={e => setEditAble(pre => !pre)} /></span>
+        <Button onClick={() => setOdList(testOd)}>修改Od</Button>
+      </Space>
+      <BigImage
+        type={type}
+        ref={bigImageRef}
+        width={896}
+        viewHeight={'440px'}
+        showModeChange
+        onTabChange={(newVal) => setType(newVal === '1'? 'normal': 'compater')}
+        // ------------ 属性列表 -----------------
+        showDescription={showDesc}
+        descriptionList={attributeList}
+        // ------------ 图片/视频切换 -----------------
+        viewTopModeButtonList={[
+          {
+            key: 'image',
+            label: '图片'
+          },
+          {
+            key: 'video',
+            label: '视频'
+          }
+        ]}
+        modeButtonGroupProps={{
+          defaultValue: 'image',
+          onChange: e => console.log('模式切换', e)
+        }}
+        // ------------ 导航功能 -----------------
+        showNavigation
+        onPrevButtonClick={val => console.log('pre', val)}
+        onNextButtonClick={val => console.log('next', val)}
+        // ------------ 场景图功能 -----------------
+        cropperImageProps={{
+          editAble,
+          url: Img,
+          score: 50,
+          odList: odList,
+          showEditTools: editAble,
+          attachImageData: get(dataSource, 'attachImg', []),
+          onCropperTypeChange: v => console.log('框选模式', v),
+          onExitEdit: () => setEditAble(pre => !pre)
+        }}
+        // ------------ 对比图模式 -----------------
+        combineImageProps={{
+          data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
+        }}
+        // ------------ 视频模块 -----------------
+        videoProps={{
+          url: get(dataSource, 'flvUrl', '')
+        }}
+      >
+      </BigImage>
+    </div>
+  )
+}
+
+export default BigModal

packages/biz/src/BigImage/demo/withRelatedImage.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BigImage } from '@zhst/biz'
+import { Button, Space, Switch } from '@zhst/meta'
+import { pick, get } from '@zhst/func'
+import { BIG_IMAGE_DATA, attributeList, RELATED_IMAGES } from '../mock'
+
+const BigModal = (props: any) => {
+  const {
+  } = props
+  const [visible, setVisible] = useState(true)
+  const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
+  const [selectedItemKey, setSelectedItemKey] = useState()
+  const [showFaceModel, setShowFaceModel] = useState(true)
+  const [type, setType] = useState('normal')
+  const modalRef = useRef(null)
+
+  return (
+    <div style={{ padding: '32px', border: '1px solid #09f' }}>
+      <Space>
+        <span>显示人脸碰撞模型：<Switch value={showFaceModel} onChange={e => setShowFaceModel(pre => !pre)} /></span>
+      </Space>
+      <BigImage
+        type={type}
+        open={visible}
+        ref={modalRef}
+        viewHeight={'440px'}
+        width={896}
+        onCancel={() => setVisible(false)}
+        showModeChange
+        onTabChange={(newVal, oldVal) => setType(newVal === '1'? 'normal': 'compater')}
+        // ------------ 图片/视频切换 -----------------
+        viewTopModeButtonList={[
+          {
+            key: 'image',
+            label: '图片'
+          },
+          {
+            key: 'video',
+            label: '视频'
+          }
+        ]}
+        modeButtonGroupProps={{
+          defaultValue: 'image',
+          onChange: e => console.log('模式切换', e)
+        }}
+        // ------------ 场景图功能 -----------------
+        cropperImageProps={{
+          url: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
+          score: 50,
+          odList: get(dataSource, 'odRect', []),
+          attachImageData: get(dataSource, 'attachImg', []),
+        }}
+        // ------------ 对比图模式 -----------------
+        combineImageProps={{
+          data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
+        }}
+        // ------------ 视频模块 -----------------
+        videoProps={{
+          url: get(dataSource, 'flvUrl', '')
+        }}
+        // ------------ 人脸碰撞模型 -----------------
+        isRelated={showFaceModel}
+        relatedImageProps={{
+          activeTab: 'related',
+          selectedItemKey,
+          data: RELATED_IMAGES,
+          onCancel: () => console.log('取消关联'),
+          onConnect: () => console.log('关联'),
+          onTabChange: (newVal, oldVal) => console.log('tab切换', newVal, oldVal),
+          onItemSelected: (item) => setSelectedItemKey(item.key)
+        }}
+      >
+      </BigImage>
+    </div>
+  )
+}
+
+export default BigModal

packages/biz/src/BigImage/index.less

@@ -0,0 +1,132 @@
+.zhst-big-image {
+  .zhst-dialog-content {
+    box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
+  }
+
+  .zhst-tabs .zhst-tabs-nav-wrap {
+    background-color: #f6f6f6;
+  }
+
+  &-view {
+    &-btns {
+      margin-bottom: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+    &-desc {
+      margin-bottom: 16px;
+      padding: 16px 16px 0 16px;
+      background-color: #f7f7f7;
+      .zhst-descriptions-header {
+        margin-bottom: 8px;
+      }
+      .zhst-descriptions-title {
+        font-size: 14px;
+      }
+    }
+    // ------------ tab -----------------
+    .zhst-tabs-nav {
+      margin-bottom: 8px;
+      .zhst-tabs-tab {
+        &:not(:first-child) {
+          margin-left: 24px;
+        }
+        padding: 0;
+        padding-bottom: 4px;
+      }
+      &::before {
+        display: none;
+      }
+    }
+    &-container {
+      position: relative;
+      min-height: 440px;
+      width: 100%;
+      margin-bottom: 16px;
+      font-size: 0;
+      &-modeNav {
+        padding: 2px;
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        z-index: 10;
+        border-radius: 4px;
+      }
+      &__nav {
+        position: absolute;
+        z-index: 99;
+        top: 50%;
+        width: 40px !important;
+        height: 40px !important;
+        background: #d9d9d9;
+        border-radius: 100%;
+        cursor: pointer;
+        transform: translateY(-50%);
+
+        &>button {
+          display: flex;
+          align-items: center;
+          color: #fff !important;
+        }
+
+        &--disabled {
+          opacity: 0.3;
+
+          &>button {
+            color: #fff !important;
+          }
+        }
+      }
+
+      &__nav:hover {
+        background: #09f;
+        color: #fff !important;
+      }
+      // ------------ 导航 -----------------
+      &-nav {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: rgba(255, 255, 255, 0.8);
+        &:hover {
+          opacity: 0.8;
+          background-color: rgba(255, 255, 255, 0.8)!important;
+        }
+        &_left {
+          left: 8px;
+        }
+        &_right {
+          right: 8px;
+        }
+      }
+    }
+    // ------------ 场景图 -----------------
+    &-cropper-btn {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      &_close {
+        margin-left: 4px;
+        vertical-align: top;
+      }
+      &-group {
+        .zhst-radio-button-wrapper {
+          display: inline-flex;
+          font-size: 12px;
+          color: #191919;
+          background-color: rgba(255, 255, 255, 0.8)
+        }
+        &-radio {
+          display: inline-flex;
+          align-items: center;
+          .anticon {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+

packages/biz/src/BigImage/index.md

@@ -0,0 +1,96 @@
+---
+group: 进阶组件
+category: Components
+subtitle: 大图组件
+toc: content
+title: BigImage 大图组件
+---
+
+## 大图弹框
+
+<code src="./demo/index.tsx">基本</code>
+<code src="./demo/withRelatedImage.tsx">人脸碰撞模型</code>
+<code src="./demo/withEdit.tsx">编辑模式</code>
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| type | 当前模式 | 'compater'、'normal'、'video' | - |  |
+| viewHeight | 视图高度 | string、number | - |  |
+| width | 宽度 | string、number | - |  |
+| showDescription | 描述列表显示\隐藏 | boolean | false |  |
+| descriptionsProps | 描述列表透传 |  | antd - DescriptionsProps |  |
+| descriptionList | 描述列表数据(见下文) |  | IDescriptionList |  |
+| topButtonRender | 顶部按钮 |  | ReactNode、string |  |
+| customTabBarExtraContent | 自定义tab尾部导航插槽 |  | ReactNode、 string |  |
+| onTabChange | tab事件监听 |  | antd - TabsProps['onChange'] |  |
+| tabProps | tab透传 |  | antd - TabsProps |  |
+| showModeChange | 是否显示模式切换按钮 |  | boolean |  |
+| viewTopModeButtonList | 模式切换按钮列表 |  | TypeRadio[] |  |
+| modeButtonGroupProps | 模式切换按钮组透传 | RadioGroupProps | - |  |
+| isRelated | 人脸碰撞模型显示\隐藏 | boolean |  |  |
+| relatedImageProps | 人脸碰撞模型透传 | zhst/meta - RelatedImageProps |  |  |
+| cropperImageProps | 场景图模式透传 | ICropperImageProps |  |  |
+| combineImageProps | 对比图模式透传 | ComBineImageProps |  |  |
+| videoProps | 视频模式透传 | videoProps |  |  |
+| showNavigation | 是否展示导航 | boolean |  |  |
+| prevButtonProps | 前翻箭头透传 | prevButtonProps |  |  |
+| onPrevButtonClick | 前翻箭头点击事件 | () => void; |  |  |
+| nextButtonProps | 下翻箭头透传 | () => void; |  |  |
+| onNextButtonClick | 下翻箭头点击事件 | () => void; |  |  |
+| children |  | ReactNode |  |  |
+
+### IDescriptionList
+
+```ts
+interface IDescriptionList {
+  title: string;
+  showTitle?: boolean;
+  props?: DescriptionsProps
+  children: DescriptionsProps['items']
+}[]
+```
+
+### 
+
+```ts
+interface ICropperImageProps extends CropperImageProps {
+  showEditTools?: boolean       // 是否展示编辑按钮
+  editAble?: boolean            // 是否开启编辑模式
+  score?: string | number       // 分数
+  btnGroupProps?: BtnGroupProps;     // crop 场景图模式下的按钮拓展
+  cropButtonList?: TypeRadio[]     // 编辑按钮列表
+  onCropperTypeChange?: (type: RadioProps['onChange']) => void
+  onExitEdit?: ButtonProps['onClick']     // 退出编辑模式
+  attachImageData?: AttachImageProps['data']    // 左下角预览图
+  attachImageProps?: AttachImageProps  // 左下角预览图透传
+}
+```
+
+## 设计方案
+
+结合当下的业务场景，目前大图组件有三种模式
+
+1. 场景图模式
+    - 
+2. 对比图模式
+3. 视频模式
+
+场景图和视频模式，支持用户编辑圈选
+
+三种模式状态下，都会有外层模块的嵌套，目前有以下几种：
+
+1. 描述模块
+2. 顶部拓展
+    - 目前仅支持自定义
+    - 默认下边间距 16px
+3. tabs 切换
+    - 默认下间距：16px
+    - 支持自定义文案
+    - 支持自定义数量
+    - 支持后方插槽
+4. 人脸碰撞模型
+    - 支持用户自定义传入数据
+
+本来想通过插件的形式按需加载

packages/biz/src/BigImage/index.tsx

@@ -0,0 +1,5 @@
+import BigImage from "./BigImage";
+
+export type { BigImageProps, BigImageRef } from './interface'
+
+export default BigImage

packages/biz/src/BigImage/interface.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react'
+import {
+  ButtonProps,
+  RadioProps,
+  RadioGroupProps,
+  VideoViewProps,
+  DescriptionsProps,
+  TabsProps,
+  RelatedImageProps,
+  BtnGroupProps,
+  CropperImageProps,
+  VideoViewRef,
+  AttachImageProps
+} from '@zhst/meta'
+import { ComBineImageProps } from './components/CombineImage'
+
+export type TypeRadio = {
+  label?: string;
+  key: string;
+  tooltipTxt?: string;
+  onClick?: ButtonProps['onClick']
+  icon?: ReactNode | string;
+  props?: ButtonProps
+}
+
+type TypePlugin = 'compater' | 'normal' | 'video' | 'faceMode'
+
+export interface BigImageProps {
+  type?: TypePlugin // 当前 tab
+  viewHeight?: string | number;
+  width?: string | number
+  typePlugins?: TypePlugin[]     // TODO: 开启插件类型
+  // ------------ 描述列表 -----------------
+  showDescription?: boolean;
+  descriptionsProps?: DescriptionsProps
+  descriptionList?: {
+    title: string;
+    showTitle?: boolean;
+    props?: DescriptionsProps
+    children: DescriptionsProps['items']
+  }[]
+  // ------------------ 顶部按钮列表
+  topButtonRender?: ReactNode | string
+  // ---------------- Tabs 导航 ------------------
+  customTabBarExtraContent?: string | ReactNode
+  onTabChange?: TabsProps['onChange']
+  tabProps?: TabsProps
+  // ------------ 图片 ｜ 视频切换导航 -----------------
+  showModeChange?: boolean
+  viewTopModeButtonList?: TypeRadio[]
+  modeButtonGroupProps?: RadioGroupProps
+  // ----------------- 人脸碰转 -----------------
+  isRelated?: boolean   // 人脸碰撞功能打开
+  relatedImageProps?: RelatedImageProps
+  // -------------------------- crop 场景图模式 -----------------------
+  cropperImageProps?: CropperImageProps & {
+    showEditTools?: boolean
+    editAble?: boolean
+    score?: string | number
+    btnGroupProps?: BtnGroupProps;     // crop 场景图模式下的按钮拓展
+    cropButtonList?: TypeRadio[]
+    onCropperTypeChange?: (type: RadioProps['onChange']) => void
+    onExitEdit?: ButtonProps['onClick']
+    attachImageData?: AttachImageProps['data']
+    attachImageProps?: AttachImageProps
+  }
+  // -------------------- 对比图模式 -------------------------
+  combineImageProps?: ComBineImageProps
+  // ------------ 导航 -----------------
+  showNavigation?: boolean    // 是否展示导航箭头
+  prevButtonProps?: any;
+  onPrevButtonClick?: () => void;
+  nextButtonProps?: any
+  onNextButtonClick?: () => void;
+  theme?: any
+  children?: React.ReactNode
+  // ------------ 视频模式 -----------------
+  videoProps?: VideoViewProps
+}
+
+export interface BigImageRef {
+  videoPlayerRef: VideoViewRef
+  combineImageRef: any
+}

packages/biz/src/BigImage/mock.ts

@@ -0,0 +1,293 @@
+// @ts-nocheck
+import imageUrl from './demo/imgs/photo-1503185912284-5271ff81b9a8.webp'
+
+export const IMAGE_DATA = {
+    "enAbleDeleteFeature": true,
+    "tabsFilter": [
+        "COMPATER",
+        "NORMAL"
+    ],
+    "selectIndex": 4,
+    "disableBtn": [
+        0,
+        1,
+        4,
+        20
+    ],
+    "dataSource": {
+      "objectId": "1742110565582518272",
+      "condition": {
+          "featureInfo": null,
+          "featureData": "AAAAAAAAAAAAAAAAAAAAAAA==",
+          "imageData": "",
+          "alg": "VERSION_REID_HEAD_ATTR",
+          "rect": {
+              "x": 0.271875,
+              "y": 0.32222223,
+              "w": 0.2859375,
+              "h": 0.67777777
+          },
+          "objectImageUrl": "singer-20240102/1/129529/1742047651878156288.jpg",
+          "srcImageUrl": "singer-20240102/1/129529/1742047652511496192.jpg"
+      },
+      "score": 0.7163062,
+      "timestamp": 1704186491979,
+      "deviceId": "129533",
+      "id": "129533",
+      "name": "4楼门口过道人脸",
+      "dirid": "0",
+      "status": "1",
+      "longitude": 120.125,
+      "latitude": 30.280500411987305,
+      "caseId": "0",
+      "caseGroup": "",
+      "isDeleted": "DEVICEMANAGER_BOOL_DEFAULT",
+      "objectIndex": {
+          "objectId": "1742110565582518272",
+          "solutionId": "1",
+          "deviceId": "129533",
+          "fragmentId": "0"
+      },
+      "objectType": "OBJECT_TYPE_PEDESTRAIN",
+      "isObjectTrack": true,
+      "pathId": "1742110532019697664",
+      "frameInfo": {
+          "frameId": "0",
+          "frameTimestamp": "1704186491979",
+          "width": 0,
+          "height": 0,
+          "originWidth": 1920,
+          "originHeight": 1080,
+          "offsetTime": "24714687",
+          "skipNumber": "0"
+      },
+      "level": 1,
+      "bboxInFrame": {
+          "x": 0.603125,
+          "y": 0.3314815,
+          "w": 0.0578125,
+          "h": 0.2712963
+      },
+      "bboxExtInFrame": {
+          "x": 0.546875,
+          "y": 0.2638889,
+          "w": 0.17135416,
+          "h": 0.40648147
+      },
+      "objectImageKey": "",
+      "objectExtImageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565582518272.jpg",
+      "frameImageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565603489792.jpg",
+      "confidence": 0.817271,
+      "sourceObjectId": "1742110565603489792",
+      "storeTimestamp": "0",
+      "gbNumber": "",
+      "qualityScore": 0,
+      "subObjectCount": 1,
+      "subObjectType": [
+          "OBJECT_TYPE_FACE"
+      ],
+      "subObjectIds": [
+          "1742110532015503360"
+      ],
+      "solutionId": "1",
+      "fragmentId": "0",
+      "contrastKey": "singer-20240102/1/129533/1742110565582518272.jpg",
+      "compaterImages": [
+          "http://10.0.0.7:30003/file/singer-20240102/1/129529/1742047651878156288.jpg"
+      ],
+      "imgSummary": "singer-20240102/1/129533/1742110565582518272.jpg",
+      "imageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565582518272.jpg",
+      "srcImageUrl": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565603489792.jpg",
+      "algorithmVersion": "VERSION_REID_HEAD_ATTR",
+      "cameraId": "129533",
+      "cameraName": "4楼门口过道人脸"
+    },
+    "isArchiveDetail": false,
+    "ToolProps": {
+        "renderVideoBtn": true,
+        "disableVideo": false
+    },
+    "specialTitle": ""
+}
+
+export const RELATED_IMAGES = [
+  { key: '123', url: imageUrl },
+  { key: '22', url: imageUrl },
+  { key: '22122333', url: imageUrl },
+  { key: '2212243', url: imageUrl },
+  { key: '224523433', url: imageUrl },
+  { key: '224235453', url: imageUrl },
+  { key: '245423', url: imageUrl },
+  { key: '224233543', url: imageUrl },
+  { key: '22452343', url: imageUrl },
+  { key: '22323243', url: imageUrl },
+  { key: '2236456', url: imageUrl },
+  { key: '224563', url: imageUrl },
+  { key: '24565423', url: imageUrl },
+  { key: '245645623', url: imageUrl },
+  { key: '2456435623', url: imageUrl },
+  { key: '2323', url: imageUrl }
+]
+
+export const BIG_IMAGE_DATA = {
+  imageKey: imageUrl,
+  imgSummary: imageUrl,
+  flvUrl: 'ws://10.0.0.120:9033/flv/HaikangNvr/45.flv?ip=10.0.2.103&stime=1712539148&etime=1712539168',
+  compaterImage: imageUrl,
+  odRect: [
+    {
+      id: '123',
+      "x":0.5445312,
+      "y":0.19166666,
+      "w":0.08671875,
+      "h":0.40138888
+    },
+    {
+      "id": "123",
+      "x": 0.5519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    },
+    {
+      "id": "456",
+      "x": 0.58543766,
+      "y": 0.3203356,
+      "w": 0.052037954,
+      "h": 0.2664015
+    }
+  ],
+  attachImg: [
+    {
+      "url": imageUrl,
+      "label": "形体"
+    },{
+      "url": imageUrl,
+      "label": "人脸"
+    }
+  ],
+  score: 60,   // 人脸质量分
+  showScore: true,   // 人脸质量分
+  cameraPosition: 'string', // 摄像头位置
+  time: '2022-01-01', // 摄像头拍摄时间
+  objects:  [
+    {
+        "objectIndex": {
+            "objectId": "1746832189053474816",
+            "solutionId": "0",
+            "deviceId": "0",
+            "fragmentId": "0"
+        },
+        "objectType": "OBJECT_TYPE_PEDESTRAIN",
+        "sourceObjectId": "0",
+        "level": 0,
+        "confidence": 0.881164,
+        "frameInfo": {
+            "frameId": "0",
+            "frameTimestamp": "1705312223057",
+            "width": 0,
+            "height": 0,
+            "originWidth": 0,
+            "originHeight": 0,
+            "offsetTime": "0",
+            "skipNumber": "0"
+        },
+        "infoOnSource": {
+            "bboxInFrame": {
+                "bboxRatio": {
+                    "x": 0.61418945,
+                    "y": 0.34309354,
+                    "w": 0.067661405,
+                    "h": 0.34659258
+                },
+            },
+            "countInSource": 0,
+            "indexInSource": 0
+        },
+        "qualityScore": 0,
+    }
+  ]
+}
+
+export const attributeList = [
+  {
+    title: '人员属性',
+    children: [
+      {
+        key: '1',
+        label: '性别',
+        children: '男',
+      },
+      {
+        key: '2',
+        label: '年龄',
+        children: '成年',
+      },
+      {
+        key: '3',
+        label: '帽子',
+        children: '无',
+      },
+      {
+        key: '4',
+        label: '上身颜色',
+        children: '灰',
+      },
+      {
+        key: '5',
+        label: '下身颜色',
+        children: '蓝色',
+      },
+      {
+        key: '6',
+        label: '附着物',
+        children: '无',
+      },
+      {
+        key: '7',
+        label: '骑行',
+        children: '否',
+      },
+    ]
+  },
+  {
+    title: '社区规范',
+    children: [
+      {
+        key: '1',
+        label: '性别',
+        children: '男',
+      },
+      {
+        key: '2',
+        label: '年龄',
+        children: '成年',
+      },
+      {
+        key: '3',
+        label: '帽子',
+        children: '无',
+      },
+      {
+        key: '4',
+        label: '上身颜色',
+        children: '灰',
+      },
+      {
+        key: '5',
+        label: '下身颜色',
+        children: '蓝色',
+      },
+      {
+        key: '6',
+        label: '附着物',
+        children: '无',
+      },
+      {
+        key: '7',
+        label: '骑行',
+        children: '否',
+      },
+    ]
+  }
+];

packages/biz/src/BigImage/util/bigImageModalAdapter.tsx

@@ -0,0 +1,195 @@
+/**
+ * 适配老的大屏组件数据格式传入
+ */
+import React, { } from 'react';
+import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect, IScreenshotButtonProp } from '@zhst/types'
+import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta'
+
+export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK';
+export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
+
+export interface CarouselProps {
+  hasPre?: boolean;
+  hasNext?: boolean;
+  selectIndex: number;
+  setSelectIndex: React.Dispatch<React.SetStateAction<number>>;
+  dataSource: Array<{
+    key: string;
+    url: string;
+  }>;
+}
+
+export type ISelectItem = Partial<Omit<ImgViewProps, 'screenshotButtonRender'>> &
+  Partial<Omit<VideoViewProps, 'screenshotButtonRender'>>;
+
+/**
+ * 描述列表 description
+ */
+export interface HeaderProps {
+  value: TAB_TYPE;
+  onChange: (type: TAB_TYPE) => void;
+  tabsFilter: TAB_TYPE[];
+}
+
+export interface ParamProps {
+  tab: string;
+  selectItem: ISelectItem;
+  imgViewRef: React.MutableRefObject<ImgViewRef>;
+  VideoViewRef: React.MutableRefObject<VideoViewRef>;
+  model: MODEL_TYPE;
+  setModel: React.Dispatch<React.SetStateAction<MODEL_TYPE>>;
+  /* 可观测值 */
+  scale$: number;
+  showCrop$: boolean;
+}
+
+/**
+ * 工具栏
+ */
+export interface ToolProps {
+  renderRight?: (props: ParamProps) => React.ReactNode;
+  renderLeft?: (props: ParamProps) => React.ReactNode;
+  renderVideoBtn?: boolean;
+  param: ParamProps;
+  disableVideo: boolean;
+}
+
+
+export interface BigImageData {
+  //imageKey 小图
+  extendRectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
+  rectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
+  attachImg: { url: string; label: '形体' | '人脸' }[];
+  odRect: Rect;
+  compaterImages: string[]  // 目标图列表
+  constractKey: string;   // 当前比较中的目标图
+  frameImageKey: string;  // 场景图
+  imageKey?: string; // 大图
+  imgSummary: string; // 摘要图
+  objectExtImageKey: string; //比对到的目标图扩展图 === imgSummary
+
+  attributeList: { label: string; list: any[] }[];
+  archiveImages?: any;
+  spaceName: string;
+
+  objectIndex?: {
+    deviceId: string;
+    fragmentId: string;
+    objectId: string;
+    solutionId: string;
+  }
+
+  objectType: ObjectType;
+  objectId: string; //这张摘要本身的Id
+  bodyObjectId?: string;
+  faceObjectId?: string; //这张摘要下的人脸Id(如果有)
+  sourceObjectId?: string; //这张摘要上游的形体Id(如果有)
+  cameraId: string;
+  cameraName: string;
+  selectIndex: number;
+  humanProperty: HumanProperty;
+  qualityScore?: number;    //人脸质量分
+  score: number;     //  相似度
+  timestamp: string;
+  bodyImageUrl: string;
+  faceImageUrl: string;
+  algorithmVersion: AlgorithmVersionStr;
+
+  bodySpaceName: string;
+  faceSpaceName: string;
+  position: {
+    lat: number
+    lng: number
+  }
+
+  solutionId?: string;
+  [index: string]: any;
+}
+
+
+interface IOldImageData {
+  visible?: boolean;    // 显示隐藏弹框
+  defaultModel?: MODEL_TYPE;    //  视频模式 | 图片模式
+  onClose?: () => void;  // 关闭弹框
+  isLoading?: boolean;  // 是否加载中
+  hasPre?: boolean;  // 向前翻页
+  hasNext?: boolean;   // 向后翻页
+  selectIndex?: number;   // 选中的数据（dataSource为数组情况下）
+  onSelectIndexChange?: (i: number) => void;   // 修改当前下标
+  dataSource: BigImageData[];    // 数据1
+  dataSources: BigImageData[];   // 数据2
+  relatedData?: BigImageData[];  // 数据3
+  transformPropFunc: (item: any) => ISelectItem;  // 格式化数据方法
+  transformVideoPropFunc: (
+    item: ISelectItem
+  ) => Promise<Omit<VideoViewProps, 'screenshotButtonRender'>>;   // 视频模式格式化数据方法
+  screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => React.ReactElement;
+  showTool?: boolean;    // 是否显示底部菜单
+  showCarousel?: boolean;   //
+  imgViewProp?: Partial<ImgViewProps>;   // 图片模式的配置
+  videoViewProp?: Partial<VideoViewProps>;  // 视频模式的配置
+  ToolProps?: Partial<ToolProps>;    // 底部菜单的配置
+  nullDialogProp?: {
+    emptyText?: string;
+  };    // 暂无数据的配置
+  showHeader?: boolean;    // 是否显示 description
+  tabsFilter?: TAB_TYPE[];  // tabs 过滤
+  useVirtual?: boolean;    // 是否显示虚拟
+  loadNext?: (i: number) => Promise<void>;   // 下一个
+  loadPre?: (i: number) => Promise<void>;   // 前一个
+  children: React.ReactNode;   // 子元素
+  title?: string;   // 标题
+  specialTitle?: string;   // 对比图模式下标题
+  isRelated?: boolean;
+  carouselProp?: Partial<CarouselProps>;
+}
+
+
+export interface ImageModalDataProps {
+  targetData: BigImageData[]
+  compactData: BigImageData[]
+}
+
+export interface ModalAdapterConfigProps {
+  oldMode?: boolean; // 是否是老模式
+}
+
+/**
+ * 兼容老数据格式
+ * @param _data 老数据格式
+ * @returns newData
+ */
+const translateOldImageData = (_data: IOldImageData) => {
+  return {
+    ..._data,
+    open: _data.visible,
+    onCancel: _data.onClose
+  }
+}
+
+/**
+ * 大图组件适配器，兼容老接口
+ * @param Cmp 大图组件
+ * @param config 额外配置
+ * @returns 大图组件
+ */
+const adapter = (Cmp: any, config: ModalAdapterConfigProps): any => {
+  const { oldMode = false } = config
+
+  return (props: IOldImageData) => {
+    const newProps = oldMode ? translateOldImageData(props) : props
+    console.log('adapter----适配数据', props, newProps)
+
+    // 该属性已经废弃
+    delete newProps.visible
+
+    return (
+      <Cmp
+        {...newProps}
+      />
+    )
+  }
+}
+
+
+export default adapter

packages/biz/src/BigImage/util/interface.ts

@@ -0,0 +1,36 @@
+export interface IBigImageModalData {
+  imageKey?: string     // 目标图
+  imgSummary?: string   // 大图
+  flvUrl?: string       // 视频链接
+  compaterImages?: string[]   // 对比图
+  odRect?: {          // od 框数据
+    "x": number
+    "y": number
+    "w": number
+    "h": number
+    [key: string]: string | number;   // 拓展参数
+  }[],
+  attachImg?: {          // 小图，只有在场景图模式生效（人脸、形体）
+    "url": string
+    "label": string
+    [key: string]: string
+  }[],
+  score?: number | string   // 人脸质量分
+  showScore?: boolean   // 人脸质量分
+  cameraPosition?: string // 摄像头位置
+  time?: string // 摄像头拍摄时间
+  objects: {             // 拓展参数、可以自由支配
+    objectIndex: {
+      [key: string]: any
+    },
+    objectType: string
+    sourceObjectId: string
+    level: number
+    confidence: number
+    infoOnSource: {
+      [key: string]: any
+    },
+    qualityScore: number
+    [key: string]: any
+  }[]
+}

packages/biz/src/Demo/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import { Button } from '@zhst/meta'
-import { useThrottleFn } from '@zhst/hooks'
-
-export default () => {
-
-  const { run } = useThrottleFn(() => console.log('123'))
-
-  return (
-    <Button onClick={() => run()} >测试</Button>
-  )
-}

packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx

@@ -3,7 +3,7 @@ import { IRecord } from '../../../WarningRecordCard';
 import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal';
 import WarningRecordCard from '../../../WarningRecordCard';
 import ViewLargerImageModal from '../../../ViewLargerImageModal';
-import { Empty, Space, Spin } from 'antd';
+import { Empty, Space, Spin } from '@zhst/meta';
 import { pxToRem } from '@zhst/func'
 import { LoadingOutlined } from '@ant-design/icons';
 import "./index.less"

packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import VideoPlayerCard from '../../../VideoPlayerCard';
 import { VideoPlayerCardProps } from '../../../VideoPlayerCard';
-import { Row, Col, Segmented, theme } from 'antd';
+import { Row, Col, Segmented, theme } from '@zhst/meta';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { pxToRem } from '@zhst/func'
 import './index.less'

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react';
-import { Modal, ModalProps, Space, SpaceProps, theme } from 'antd';
+import { Modal, ModalProps, Space, SpaceProps, theme } from '@zhst/meta';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ConfigProvider, CropperImage } from '@zhst/meta';
 

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Space, Divider, CardProps, theme } from 'antd';
+import { Card, Space, Divider, CardProps, theme } from '@zhst/meta';
 import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import { ConfigProvider, CropperImage } from '@zhst/meta';

packages/biz/src/boxSelectTree/boxSelectTree.tsx

@@ -4,6 +4,7 @@ import BoxPanel from './components/boxPanel';
 import type { BoxPanelProps } from './components/boxPanel';
 import './index.less'
 import classNames from 'classnames';
+
 export interface BoxSelectTreeProps extends BoxPanelProps {
   onTabChange?: (e: any) => void
   tabsProps?: TabsProps

packages/biz/src/boxSelectTree/components/boxPanel/index.tsx

@@ -1,9 +1,10 @@
 import React, { FC, useState, useContext, ReactNode } from 'react';
 import { ModalFormProps } from '@ant-design/pro-components'
-import { Input, Dropdown } from 'antd'
 import {
   ButtonProps,
   ConfigProvider,
+  Input,
+  Dropdown,
   Tooltip,
   Button,
   Divider,

packages/biz/src/boxSelectTree/demo/basic.tsx

@@ -17,7 +17,6 @@ const demo = () => {
   }
 
   const onBoxBatchDelete = () => {
-    console.log('盒子批量删除', checkedKeys)
     modal.warning({
       content: (
         <div>

packages/biz/src/index.tsx

@@ -1,9 +1,13 @@
 export { default as BigImageModal } from './BigImageModal'
 export type { BigImageModalProps } from './BigImageModal'
+export { default as BigImage } from './BigImage'
+export type { BigImageProps, BigImageRef } from './BigImage'
 export { default as BoxSelectTree } from './boxSelectTree'
 export type { BoxSelectTreeProps } from './boxSelectTree'
 export { default as Tree } from './tree'
 export type { BoxTreeProps, TreeData } from './tree'
+export { default as TreePanel } from './treePanel'
+export type { TreePanelProps } from './treePanel'
 export { default as TreeTransfer } from './treeTransfer'
 export type { TreeTransferProps } from './treeTransfer'
 export { default as TreeTransferModal } from './treeTransferModal'

packages/biz/src/infiniteList/InfiniteList.tsx

@@ -3,10 +3,9 @@
  */
 
 import React, { forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useRef } from 'react'
-import { ConfigProvider } from '@zhst/meta';
+import { ConfigProvider, Spin, SpinProps } from '@zhst/meta';
 import classNames from 'classnames';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { Spin, SpinProps } from 'antd';
 import { useSize } from '@zhst/hooks';
 import './index.less'
 

packages/biz/src/odModal/OdModal.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
-import { Button, Modal, ModalProps, Select, SelectProps, Space, theme } from 'antd';
+import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps, Button, Modal, ModalProps, Select, SelectProps, Space, theme } from '@zhst/meta'
-import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps } from '@zhst/meta'
 import { IconFont } from '@zhst/icon'
 import classNames from 'classnames';
 import './index.less'

packages/biz/src/tree/index.tsx

@@ -1,8 +1,9 @@
-import { TreeDataNode } from 'antd';
+// !! 该组件已被废弃
+import { DataNode } from '@zhst/meta';
 import BoxTree from './boxTree';
 
-export interface TreeData extends TreeDataNode {
+export interface TreeData extends DataNode {
-  children?: TreeDataNode['children'] & {
+  children?: DataNode['children'] & {
     isCamera?: boolean
     /**
      * 0-失败  1-成功  2-进行中  3-未知

packages/biz/src/treePanel/TreePanel.tsx

@@ -0,0 +1,269 @@
+import React, { FC, useContext, ReactNode } from 'react';
+import {
+  ConfigProvider,
+  Input,
+  Dropdown,
+  Tooltip,
+  Button,
+  DataNode as TreeDataNode,
+  Tree as BoxTree,
+  TreeProps as BoxTreeProps,
+  TreeProps,
+  InputProps,
+  DropDownProps,
+  SelectProps,
+  Select
+} from '@zhst/meta';
+import { IconFont } from '@zhst/icon';
+import classNames from 'classnames';
+import './index.less'
+import { ButtonProps } from 'antd';
+
+export interface IOption {
+  type?: ButtonProps['type'] & 'dropdown';
+  label: string
+  key: string
+  icon?: string | ReactNode
+  disabled?: boolean;
+  showTooltip?: boolean;
+  onClick?: () => void
+  className?: string;
+  dropdownConfig?: DropDownProps
+}
+
+export interface ITag {
+  label: string
+  value: string
+  icon?: ReactNode
+  parentNode?: string
+  children?: ITag[]
+}
+
+export interface TreePanelProps {
+  treeType?: 'directory' | 'normal'
+  searchInputProps?: InputProps
+  showOptions?: boolean
+  showSelectBar?: boolean  // 显示搜索框
+  filterSelectProps?: SelectProps
+  onSelect?: SelectProps['onChange']
+  treeProps?: Partial<BoxTreeProps>
+  data: TreeDataNode[]
+  onSearch?: (e: any) => void
+  onItemCheck?: TreeProps['onCheck']
+  onItemSelect?: TreeProps['onSelect']
+  customImport?: ReactNode | string          // 自定义搜索栏边上的过滤图标
+  extra?: ReactNode | string             // 搜索栏下面的插槽
+  prefixCls?: string
+  showSearchBar?: boolean     // 是否显示搜索栏
+  noFilter?: boolean           // 是否显示搜索拓展 icon
+  filterList?: IOption[]
+  optionList?: IOption[]
+  showTagPanel?: boolean       // 标签插槽
+  tagList?: ITag[]         // 标签列表
+  tagExpandAll?: boolean   // 展开所有
+  onTagCheck?: (value: string, tag: ITag) => void;
+  checkedTags?: string[]
+  onResetTags?: () => void
+  onTagExpand?: (e: any) => void
+  tagFootRender?: ReactNode
+}
+
+const { ConfigContext } = ConfigProvider
+const { DirectoryTree } = BoxTree
+
+const TreePanel: FC<TreePanelProps> = (props) => {
+  const {
+    treeType = 'directory',
+    searchInputProps,
+    showOptions = true,
+    showSelectBar,
+    filterSelectProps,
+    extra,
+    noFilter,
+    data = [],
+    treeProps,
+    onSelect,
+    onSearch,
+    onItemCheck,
+    onItemSelect,
+    showSearchBar = true,
+    optionList = [],
+    filterList = [],
+    showTagPanel,
+    tagList,
+    tagExpandAll,
+    onTagExpand,
+    checkedTags = [],
+    onTagCheck,
+    onResetTags,
+    tagFootRender,
+    prefixCls: customizePrefixCls,
+    customImport: customFilter
+  } = props
+
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('biz-tree-panel', customizePrefixCls);
+  const CurrentTree = treeType === 'directory' ? DirectoryTree : BoxTree
+
+  /**
+   * 初始化拓展 filter
+   * @param _list
+   * @returns
+   */
+  const initFilter = (_list?: TreePanelProps['filterList']) => {
+    const WithDropdown = (dom: ReactNode, isShow?: boolean,  _config?: DropDownProps) => {
+      if (!isShow) {
+        return dom
+      }
+
+      return (
+        <Dropdown placement="bottomLeft" arrow {..._config}>
+          {dom}
+        </Dropdown>
+      )
+    }
+
+    return _list?.map(item => (
+      <Tooltip
+        title={item.label}
+        open={item.showTooltip}
+      >
+        {WithDropdown(
+          <Button className={classNames(componentName + '-search-btns-btn')} type={item.type} onClick={item.onClick} icon={item.icon} {...item} />,
+          item.type === 'dropdown',
+          item.dropdownConfig
+        )}
+      </Tooltip>
+    ))
+  }
+
+  /**
+   * 初始化拓展 filter
+   * @param _list
+   * @returns
+   */
+  const initOptions = (_list?: TreePanelProps['optionList']) => {
+    return _list?.map((item, idx) => (
+      <>
+        {/* @ts-ignore */}
+        <div key={idx} className={classNames(componentName + '-btns-btn')}>
+          {item.icon}
+          <span onClick={item.onClick} className={classNames(componentName + '-btns-btn-label', item.className)}>{item.label}</span>
+        </div>
+        {idx % 2 !== 0 && (<br/>)}
+      </>
+    ))
+  }
+
+  /**
+   * 初始化标签面板
+   * @param _tagList
+   * @param sort 是否分类
+   * @returns
+   */
+  const initTagPanel = (_tagList: TreePanelProps['tagList'], sort?: boolean) => {
+    // 正常标签渲染
+    const commonTag = (_tagProps: ITag) => (
+      <span
+        className={classNames(
+          componentName + '-tags-tag_common',
+          {[componentName + '-tags-tag_checked']: checkedTags.includes(_tagProps.value)}
+        )}
+        key={_tagProps.value}
+        onClick={() => onTagCheck?.(_tagProps.value, _tagProps)}
+      >{_tagProps.label}</span>
+    )
+    // 包装父级标签
+    const _withFather = (tag: ITag) => (
+      <div key={tag.value}>
+        <span className={classNames(componentName + '-tags-tag')}>{tag.label}</span>
+        {tag.children?.map?.(_tag => commonTag(_tag))}
+      </div>
+    )
+
+    return _tagList?.map(tag => {
+      if (tag.children?.length && sort) {
+        return _withFather(tag)
+      } else {
+        return commonTag(tag)
+      }
+    })
+  }
+
+  return (
+    <div className={componentName}>
+      {/* 搜索栏 */}
+      {showSearchBar && (
+        <div className={classNames(componentName + '-search')}>
+          <Input
+            className={classNames(componentName + '-search-input')}
+            onChange={(e) => onSearch?.(e)}
+            placeholder='请输入盒子名称'
+            {...searchInputProps}
+          />
+        </div>
+      )}
+      {/* 搜索栏 */}
+      {showSelectBar && (
+        <div className={classNames(componentName + '-search')}>
+          <Select
+            className={classNames(componentName + '-search-input')}
+            onChange={onSelect}
+            {...filterSelectProps}
+          />
+          {customFilter || (!noFilter && (
+            <div
+              className={classNames(componentName + '-search-btns')}
+            >
+              {/* @ts-ignore */}
+              {initFilter(filterList)}
+            </div>
+          ))}
+        </div>
+      )}
+      {showTagPanel && (
+        <div className={classNames(componentName + '-tags')}>
+          <div className={classNames(componentName + '-tags-title')}>
+            标签
+            <div
+              className={classNames(
+                componentName + '-tags-tag_option',
+              )}
+            >
+              {tagExpandAll && (
+                <span
+                  className={classNames(componentName + '-tags-tag_option-btn')}
+                  onClick={onResetTags}
+                >重置</span>
+              )}
+              <span
+                className={classNames(componentName + '-tags-tag_option-btn')}
+                onClick={onTagExpand}
+              >{tagExpandAll ? '收起' : '展开'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
+            </div>
+          </div>
+          {initTagPanel(tagList, tagExpandAll)}
+          {tagFootRender}
+        </div>
+      )}
+      {/* 默认操作按钮 */}
+      {showOptions && (
+        <div className={classNames(componentName + '-btns')}>
+          {initOptions(optionList)}
+        </div>
+      )}
+      {extra}
+      <CurrentTree
+        className={classNames(componentName + '-tree')}
+        treeData={data}
+        showIcon={false}
+        blockNode
+        onSelect={onItemSelect}
+        onCheck={onItemCheck}
+        {...treeProps}
+      />
+    </div>
+  )
+}
+
+export default TreePanel

packages/biz/src/treePanel/demo/basic.tsx

@@ -0,0 +1,90 @@
+import React, {} from 'react';
+import { TreePanel } from '@zhst/biz';
+import { Badge, Checkbox } from '@zhst/meta'
+import { boxDataSource } from './mock'
+import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
+
+const demo = () => {
+  return (
+    <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
+      <TreePanel
+        data={boxDataSource}
+        showSelectBar
+        filterList={[
+          {
+            label: '过滤',
+            key: 'multi',
+            icon: <FilterOutlined />,
+            type: 'dropdown',
+            showTooltip: false,
+            dropdownConfig: {
+              menu: {
+                // 自定义返回项
+                _internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
+                  return (
+                    <div>
+                      {originNode}
+                    </div>
+                  )
+                },
+                selectable: true,
+                items: [
+                  {
+                    label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
+                    key: 'all',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    icon: <Badge status="success" />,
+                    label: '多选1',
+                    key: 'multi1',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    label: '多选2',
+                    icon: <Badge status='error' />,
+                    key: 'multi2',
+                  },
+                ],
+              }
+            }
+          },
+          {
+            label: '过滤',
+            key: 'ee',
+            icon: <FilterOutlined />,
+            showTooltip: false,
+          },
+        ]}
+        extra={(
+          <div style={{ border: '1px solid red' }}>
+            <span><Checkbox>全选</Checkbox></span>
+            <a style={{ float: 'right', color: '#09f' }} >批量操作</a>
+          </div>
+        )}
+        optionList={[
+          {
+            label: '导入盒子',
+            key: 'import',
+            icon: <ImportOutlined />,
+          },
+          {
+            label: '新建组',
+            key: 'add',
+            icon: <FolderAddOutlined />,
+          },
+          {
+            label: '删除',
+            key: 'del',
+            icon: <CloseCircleOutlined />,
+            props: {
+              danger: true
+            }
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/treePanel/demo/mock.tsx

@@ -0,0 +1,54 @@
+import { TreeData } from "@zhst/biz";
+
+export const boxDataSource: TreeData[] = [
+  {
+    title: '全部盒子',
+    key: '0-0',
+    children: [
+      {
+        title: '盒子组1',
+        key: '0-0-0',
+        children: [
+          {
+            title: '摄像头1',
+            key: '0-0-0-0',
+            isCamera: true
+          },
+          {
+            title: '摄像头2',
+            key: '0-0-0-1',
+            isCamera: true
+          },
+        ],
+      },
+      {
+        title: '盒子组2',
+        key: '0-0-1',
+        children: [
+          {
+            title: '摄像头4',
+            key: '0-0-1-0',
+            isCamera: true
+          }
+        ],
+      },
+    ],
+  },
+];
+
+
+export const treeData: TreeData[] = [
+  { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+  { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+  { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+  {
+    key: '0-1-3',
+    title: '分组0-1-3',
+    isLeaf: false,
+    children: [
+      { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true, isCamera: true },
+      { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true, isCamera: true },
+      { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true, isCamera: true },
+    ],
+  },
+];

packages/biz/src/treePanel/demo/normal.tsx

@@ -0,0 +1,24 @@
+import React, { useState, useRef } from 'react';
+import { TreePanel } from '@zhst/biz';
+import { boxDataSource } from './mock'
+
+const demo = () => {
+
+  return (
+    <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
+      <TreePanel
+        data={boxDataSource}
+        treeType='normal'
+        showSelectBar
+        filterSelectProps={{
+          placeholder: '请输入',
+          options: [
+            { label: '测试', key: '123', value: 'test' }
+          ]
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/treePanel/demo/withTags.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useRef } from 'react';
+import { TreePanel } from '@zhst/biz';
+import { Badge, Checkbox } from '@zhst/meta'
+import { treeData, boxDataSource } from './mock'
+import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
+
+const demo = () => {
+  const [checkedTags, setCheckedTags] = useState<string[]>([]);
+  const [tagExpandAll, setTagExpandAll] = useState(false);
+  const [showTagPanel, setShowTagPanel] = useState(true);
+
+
+  return (
+    <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
+      <TreePanel
+        data={boxDataSource}
+        showTagPanel={showTagPanel}
+        tagExpandAll={tagExpandAll}
+        showSelectBar
+        onTagCheck={(value) => setCheckedTags(pre => {
+          if (pre.includes(value)) {
+            return pre.filter(item => item !== value)
+          } else {
+            return [...pre, value]
+          }
+        })}
+        onResetTags={() => setCheckedTags([])}
+        checkedTags={checkedTags}
+        filterList={[
+          {
+            label: '过滤',
+            key: 'multi',
+            icon: <FilterOutlined />,
+            type: 'dropdown',
+            showTooltip: false,
+            dropdownConfig: {
+              menu: {
+                // 自定义返回项
+                _internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
+                  return (
+                    <div>
+                      {originNode}
+                    </div>
+                  )
+                },
+                selectable: true,
+                items: [
+                  {
+                    label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
+                    key: 'all',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    icon: <Badge status="success" />,
+                    label: '多选1',
+                    key: 'multi1',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    label: '多选2',
+                    icon: <Badge status='error' />,
+                    key: 'multi2',
+                  },
+                ],
+              }
+            }
+          },
+        ]}
+        extra={(
+          <div>
+            <span><Checkbox>全选</Checkbox></span>
+            <a style={{ float: 'right', color: '#09f' }} >批量操作</a>
+          </div>
+        )}
+        optionList={[
+          {
+            label: '导入盒子',
+            key: 'import',
+            icon: <ImportOutlined />,
+          },
+          {
+            label: '新建组',
+            key: 'add',
+            icon: <FolderAddOutlined />,
+          },
+          {
+            label: '删除',
+            key: 'del',
+            icon: <CloseCircleOutlined />,
+            props: {
+              danger: true
+            }
+          },
+        ]}
+        tagList={[
+          {
+            label: '标签组1',
+            value: '1',
+            children: [
+              {
+                label: '标签1-1',
+                value: '1-1',
+              },
+              {
+                label: '标签1-2',
+                value: '1-2',
+              }
+            ]
+          },
+          {
+            label: '标签组2',
+            value: '2',
+            children: [
+              {
+                label: '标签2-1',
+                value: '2-1',
+              },
+              {
+                label: '标签2-2',
+                value: '2-2',
+              }
+            ]
+          },
+        ]
+      }
+        onTagExpand={() => {
+          setTagExpandAll(pre => !pre)
+          setCheckedTags([])
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/treePanel/index.less

@@ -0,0 +1,131 @@
+.zhst-biz-tree-panel {
+  &-search {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+
+    &-input {
+      flex: 1;
+    }
+
+    &-btns {
+      flex: none;
+      &-btn {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &-btns {
+    &-btn {
+      margin-right: 16px;
+      margin-bottom: 12px;
+      display: inline-block;
+      cursor: pointer;
+      font-size: 14px;
+      transition: .3s ease all;
+      &:hover {
+        opacity: 0.7;
+      }
+      &-label {
+        margin-left: 4px;
+      }
+    }
+
+    &-common {
+      flex: 1;
+      padding: 4px 8px;
+    }
+
+    &-import {
+      padding: 4px 8px;
+    }
+  }
+
+  &-tags {
+    margin-bottom: 12px;
+    position: relative;
+    height: 100%;
+    padding: 12px;
+    font-size: 0;
+    border-radius: 4px;
+    background-color: #f7f7f7;
+
+    &-title {
+      font-size: 12px;
+      color: #595959;
+      line-height: 20px;
+      font-weight: 500;
+      &::after {
+        position: absolute;
+        content: '';
+        clear: both;
+      }
+    }
+
+    &-tag {
+      margin-right: 8px;
+      font-weight: bold;
+      color: #595959;
+      font-size: 14px;
+      transition:.3s ease all;
+
+      &_common {
+        margin-top: 6px;
+        display: inline-block;
+        margin-right: 8px;
+        padding: 2px 8px;
+        font-size: 12px;
+        cursor: pointer;
+        color: #191919;
+        background-color: #EBEBEB;
+        transition: .3s ease all;
+        border-radius: 3px;
+        box-sizing: content-box;
+
+        &:hover {
+          color: #fff;
+          background-color: #09f;
+          opacity: 0.7;
+        }
+      }
+
+      &_checked {
+        color: #fff;
+        background-color: #09f;
+      }
+
+      &_fz12 {
+        font-size: 12px;
+      }
+
+      &_option {
+        float: right;
+        &-btn {
+          margin-left: 12px;
+          color: #09f;
+          cursor: pointer;
+          transition: .3s ease all;
+          &:hover {
+            opacity: 0.7;
+          }
+        }
+        &::after {
+          position: absolute;
+          content: '';
+          clear: both;
+        }
+      }
+
+      &_absolute {
+        position: absolute;
+        top: 12px;
+        right: 0;
+      }
+    }
+  }
+
+  &-tree {
+    padding: 8px 0;
+  }
+}

packages/biz/src/treePanel/index.md

@@ -0,0 +1,82 @@
+---
+category: Components
+title: TreePanel 树面板
+toc: content
+demo:
+  cols: 2
+group:
+  title: 数据展示
+---
+
+## 代码演示
+
+<code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/normal.tsx">普通树</code>
+<code src="./demo/withTags.tsx">标签面板</code>
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| treeType | 树的类型 | 'directory' 'normal' | directory | --- |
+| searchInputProps | antd-inputProps | --- | --- | --- |
+| showOptions | --- | boolean | --- | --- |
+| treeProps | --- | antd-treeProps | --- | --- |
+| data | --- | TreeDataNode[] | [] | --- |
+| onSearch | --- | (e: any) => void | - | --- |
+| onItemCheck | --- | TreeProps['onCheck'] | - | --- |
+| onItemSelect | --- | TreeProps['onSelect'] | - | --- |
+| customImport | 自定义搜索栏边上的过滤图标 | ReactNode 、string | - | --- |
+| extra | 数组件上方插槽 | ReactNode 、string | --- | --- |
+| prefixCls | class前缀，用于覆盖class | string | --- | --- |
+| showSelectBar | 显示搜索框 | boolean | false | --- |
+| filterSelectProps | 搜索框 | antd-SelectProps | - | --- |
+| showSearchBar | 显示搜索框 | boolean | false | --- |
+| noFilter | 是否显示搜索拓展 | boolean | false | --- |
+| filterList | 过滤插槽列表 | IOption[] | [] | --- |
+| optionList | 操作按钮列表 | IOption[] | [] | --- |
+| showTagPanel | 显示标签插槽 | boolean | false | --- |
+| tagList | 标签列表 | ITag[] | [] | --- |
+| onSelect | 搜索选中事件 | SelectProps['onChange'] | - | --- |
+| tagExpandAll | 标签展开状态 | boolean | false | --- |
+| onTagCheck | 标签点击事件 | (value: string, tag: ITag) => void; | false | --- |
+| checkedTags | 标签选中状态 | string[] | [] | --- |
+| onResetTags | 重置标签事件 | () => void | - | --- |
+| onTagExpand | 标签展开事件 | (e: any) => void | - | --- |
+| tagFootRender | 标签展开状态 | ReactNode， string | false | --- |
+
+### IOption
+
+```ts
+interface IOption {
+  label: string
+  key: string
+  icon?: string | ReactNode
+  disabled?: boolean;
+  showTooltip?: boolean;
+  onClick?: () => void
+  className?: string;
+  dropdownConfig?: DropDownProps
+}
+```
+
+### ITag
+
+```ts
+interface ITag {
+  label: string
+  value: string
+  icon?: ReactNode
+  parentNode?: string
+  children?: ITag[]
+}
+```
+
+## 组件设计
+
+该组件包含以下功能：
+
+1. 顶部按钮支持
+2. 输入框单行展示
+3. 选择框和筛选框同一行
+4. 按钮列表

packages/biz/src/treePanel/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * Created by jiangzhixiong on 2024/06/04
+ */
+import TreePanel from './TreePanel'
+export type { TreePanelProps } from './TreePanel'
+
+export default TreePanel

packages/biz/src/treeTransfer/TreeTransfer.tsx

@@ -1,27 +1,84 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
-import { Button, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
+import { Button, Input, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
-import { Input } from 'antd'
 import { IconFont } from '@zhst/icon'
 import './index.less'
 
-const componentName = 'zhst-biz-treeTransfer'
+const { ConfigContext } = ConfigProvider
 
 export interface TreeTransferProps {
+  customizePrefixCls?: string
+  /**
+   * @description 自定义标题
+   * @array []
+   */
   titles?: string[] | ReactNode[]
+  /**
+   * @description 边框
+   */
+  bordered?: boolean
+  /**
+   * @description
+   * 树的数据结构 ，参考antd-treeData
+   */
   dataSource: TreeDataNode[]
+  /**
+   * @description 树的透传参数
+   */
   treeProps?: TreeProps
+  /**
+   * 是否显示左侧树面板的搜索
+   */
   showLeftSearch?: boolean
+  /**
+   * @description 搜索的透传
+   */
   searchInputProps?: InputProps
+  /**
+   * @description 选中的对象
+   */
   targetItems: TreeDataNode[];
+  /**
+   * @description 选中对象的id
+   */
   checkedKeys: string[];
+  /**
+   * @description 是否显示搜索框边上的过滤条件
+   */
   showFilter?: boolean;
+  /**
+   * @description 是否显示左侧看板底部渲染
+   */
   showLeftPanelFooter?: boolean;
+  /**
+   * @description 左侧看板底部渲染
+   */
   leftPanelFooterRender?: ReactNode | string;
+  /**
+   * @description 是否显示右侧看板底部渲染
+   */
   showRightPanelFooter?: boolean;
+  /**
+   * 右侧看板底部渲染
+   * @param events
+   * @returns
+   */
   rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
+  /**
+   * @description 左侧看板宽度
+   */
   leftPanelWidth?: string | number;
+  /**
+   * @description 右侧看板宽度
+   */
   rightPanelWidth?: string | number;
+  /**
+   * @description 左侧看板滚动高度
+   */
   leftPanelScrollY?: number;
+  /**
+   * @description 右侧看板滚动高度
+   */
+  middleIcon?: ReactNode | string
   rightPanelScrollY?: number;
   tabsItems?: TabsProps['items']
   showLeftTabs?: boolean
@@ -44,20 +101,23 @@ export interface TreeTransferProps {
 
 const { useToken } = theme
 
-const TreeTransfer: React.FC<TreeTransferProps> = ({
+const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('biz-treeTransfer', props.customizePrefixCls);
+  const {
     dataSource,
     treeProps,
     titles = ['可选择的范围', '已选择的范围'],
+    bordered,
     searchInputProps,
     showLeftSearch = true,
     leftPanelScrollY = 300,
-  treeBackgroundColor = '#FCFCFC',
     leftPanelWidth = 500,
     rightPanelScrollY = 422,
     rightPanelWidth = 300,
     targetItems = [],
     checkedKeys = [],
-  showFilter = true,
+    showFilter = false,
     showLeftPanelFooter,
     showRightPanelFooter = true,
     customLeftPanelContent,
@@ -65,6 +125,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
     rightPanelFooterRender,
     showLeftTabs,
     leftTabsProps,
+    middleIcon,
     activeTabKey,
     tabsItems = [
       {
@@ -88,19 +149,27 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
     onSearch,
     onOk,
     onReset
-}) => {
+  } = props
-
   const { token } = useToken()
 
   return (
     <div className={componentName}>
       <div className={`${componentName}-left`}
-        style={{ width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth }}
+        style={{
+          width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth,
+          border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
+        }}
       >
         <div
           className={`${componentName}-left_card`}
+          style={{ backgroundColor: token.colorBgContainer }}
         >
-          <div className={`${componentName}-left_card_title`}>{titles?.[0]}</div>
+          <div
+            className={`${componentName}-left_card_title`}
+            style={{ backgroundColor: '#f7f7f7' }}
+          >
+            {titles?.[0]}
+          </div>
           {showLeftTabs && (
             <Tabs
               activeKey={activeTabKey}
@@ -132,16 +201,6 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
             </div>
           )}
           {customLeftPanelContent?.(dataSource) || (
-            <ConfigProvider
-              theme={{
-                components: {
-                  // @ts-ignore
-                  Tree: {
-                    colorBgContainer: treeBackgroundColor
-                  }
-                }
-              }}
-            >
             <Tree
               className={`${componentName}-left_card-tree`}
               blockNode
@@ -153,7 +212,6 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
               onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
               {...treeProps}
             />
-            </ConfigProvider>
           )}
           {showLeftPanelFooter && (
             <div className={`${componentName}-left_card-footer`}>
@@ -163,15 +221,22 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
         </div>
       </div>
       <div className={`${componentName}-middle`}>
-        <IconFont icon="icon-zhankai" />
+        {middleIcon || <IconFont icon="icon-zhankai" />}
       </div>
       <div className={`${componentName}-right`}
-        style={{ width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth }}
+        style={{
+          width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth,
+          border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
+        }}
       >
         <div
           className={`${componentName}-right_card`}
+          style={{ backgroundColor: token.colorBgContainer }}
         >
-          <div className={`${componentName}-right_card_title`} >{titles?.[1]}</div>
+          <div
+            className={`${componentName}-right_card_title`}
+            style={{ backgroundColor: '#f7f7f7' }}
+          >{titles?.[1]}</div>
           <div
             className={`${componentName}-right_card__items`}
             style={{ height: typeof rightPanelScrollY === 'number' ? rightPanelScrollY + 'px' : rightPanelScrollY}}

packages/biz/src/treeTransfer/demo/mingmou.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys = [] }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => _key !== key)
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <div style={{ padding: 24 }}>
+      <TreeTransfer
+        leftPanelWidth={800}
+        rightPanelWidth={500}
+        bordered
+        titles={[
+          <div style={{ textAlign: 'left' }}>可选择的范围(123)</div>,
+          (
+            <div onClick={onReset} style={{ textAlign: 'left' }}>已选范围(123)<a style={{ float: 'right' }}>清空</a></div>
+          ),
+        ]}
+        showRightPanelFooter={false}
+        dataSource={boxDataSource}
+        targetItems={targetItems}
+        checkedKeys={checkedKeys}
+        onTreeCheck={onTreeCheck}
+        onItemDelete={onItemDelete}
+        onOk={onOk}
+        onReset={onReset}
+        searchInputProps={{
+          onChange: e => console.log('123123')
+        }}
+      />
+    </div>
+  )
+};
+
+export default App;

packages/biz/src/treeTransfer/index.less

@@ -2,6 +2,8 @@
   display: flex;
   align-items: center;
   &-left {
+    border-radius: 8px;
+    overflow: hidden;
     &_card {
       display: flex;
       flex-direction: column;
@@ -33,13 +35,17 @@
 
       &_search {
         display: flex;
-        margin: 8px;
+        margin: 16px 20px;
         &_input {
-          margin-right: 8px;
+          flex: 1;
+        }
+        &_filters {
+          margin-left: 8px;
         }
       }
 
       &-tree {
+        margin: 0 20px;
       }
 
       &-footer {
@@ -60,6 +66,8 @@
   }
 
   &-right {
+    border-radius: 8px;
+    overflow: hidden;
     &_card {
       position: relative;
       min-height: 544px;
@@ -74,10 +82,8 @@
 
       &__items {
         width: 100%;
-        height: calc(100% - 105px);
         font-size: 14px;
         overflow-y: scroll;
-        max-height: 422px;
         box-sizing: border-box;
 
         &::-webkit-scrollbar {

packages/biz/src/treeTransfer/index.md

@@ -16,6 +16,7 @@ group:
 <code src="./demo/withFilter.tsx">加载filter按钮</code>
 <code src="./demo/withMap.tsx">和地图组件搭配使用</code>
 <code src="./demo/withModal.tsx">和Modal组合使用</code>
+<code src="./demo/mingmou.tsx">明眸同款</code>
 
 ## API
 

packages/biz/src/treeTransferModal/TreeTransferModal.tsx

@@ -1,17 +1,16 @@
 import React, { FC, useState } from 'react';
-import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
+import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, DataNode, TreeProps } from '@zhst/meta';
 import TreeTransfer from '../treeTransfer';
 import { TreeTransferProps } from '../treeTransfer'
 
 export interface TreeTransferModalProps {
-  dataSource: TreeDataNode[]
+  dataSource: DataNode[]
   treeProps?: TreeProps
-  targetItems: TreeDataNode[];
+  targetItems: DataNode[];
   checkedKeys: string[];
   onTreeSelect?: TreeProps['onSelect']
   onTreeCheck?: TreeProps['onCheck']
   onItemDelete?: TreeTransferProps['onItemDelete']
-  onChange?: TransferProps['onChange'];
   onOk?: (data: any) => void;
   onReset?: () => void;
   open?: boolean

packages/constants/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zhst/biz
 
+## 0.7.0
+
+### Minor Changes
+
+- 修改 less to css 配置
+
 ## 0.6.2
 
 ### Patch Changes

packages/constants/es/base/index.js

@@ -1,30 +0,0 @@
-export var OBJECT_GRNER_THRESHOLD = 0.8; //目标图判断性别阈值
-export var OBJECT_AGE_TYPE_THRESHOLD = 0.5; //目标图判断年龄段阈值
-export var MODE_KEY = 'test_mode';
-//业务约定
-export var SEARCH_IMG_COUNT = 10; //检索图片的最大个数
-export var GLOBAL_IS_ITEM_NUMBER_SHOW = false; //是否展示索引
-export var publicPath = 'hummingbird';
-export var ENTER_CIRCLE = 'MONITORTYPE_ENTER_CIRCLE';
-export var OUT_CIRCLE = 'MONITORTYPE_OUT_CIRCLE';
-export var TEMP = 'MONITORTYPE_TEMP';
-export var GLOBAL_IS_BOX_VMS_SHOW = true; //是否展示盒子vms
-
-export var BODY_SEARCH_THRESHOID = 0.45; //形体检索阈值
-export var RECORD_VERSION = '3.0.0'; //保存记录的版本号
-
-export var DeviceTab = {
-  EMPTY: 0,
-  REAL_CAMERA: 1,
-  PREPROCESS_CAMERA: 2,
-  //摄像头列表
-  TAG_CAMERA: 3,
-  //预案列表
-  HISTORY_VIDEO_GROUP: 4,
-  //录像回放
-  VIRTUAL_CAMERA: 5,
-  //离线视频
-  REAL_CAMERA_NOFACE: 6,
-  REAL_CAMERA_ONLYFACE: 7,
-  REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8 // 只有普通摄像头，没有人脸、没有盒子、直连
-};

packages/constants/es/camera/index.js

@@ -1 +0,0 @@
-export var TYPE = '';

packages/constants/es/index.js

@@ -1,3 +0,0 @@
-export * from "./camera";
-export * from "./base";
-export * from "./user";

packages/constants/es/user/index.js

@@ -1 +0,0 @@
-export default {};

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/constants",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "常量库",
   "keywords": [
     "constants",

packages/func/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @zhst/utils
 
+## 0.17.0
+
+### Minor Changes
+
+- 修改 less to css 配置
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/request@0.17.0
+
 ## 0.16.1
 
 ### Patch Changes

packages/func/es/camera/constants.d.ts

@@ -1,41 +0,0 @@
-/**
- * 设备类型枚举
- */
-export declare const DeviceType: {
-    VMS: string;
-    DIR: string;
-    CAMERA: string;
-};
-export declare const LOCAL_KEY = "local";
-export declare const DIRE_CONNECT_KEY = "direconnect";
-export declare const BOX_LIST_KEY = "boxlist";
-export declare enum VmsplatformOpt {
-    VMSPLATFORMOPT_ID = 0,
-    VMSPLATFORMOPT_PLATFORMNAME = 1,
-    VMSPLATFORMOPT_PLUGINNAME = 2,
-    VMSPLATFORMOPT_IP = 3,
-    VMSPLATFORMOPT_PORT = 4,
-    VMSPLATFORMOPT_USERNAME = 5,
-    VMSPLATFORMOPT_PASSWORD = 6
-}
-export declare enum OPT {
-    OR = 0,
-    AND = 1,
-    ORNOT = 2,
-    ANDNOT = 3
-}
-export declare enum DevicemanagerCameraType {
-    DEVICEMANAGER_CAMERA_TYPE_DEFAULT = 0,
-    DEVICEMANAGER_CAMERA_TYPE_NORMAL = 1,
-    DEVICEMANAGER_CAMERA_TYPE_1400 = 97,
-    DEVICEMANAGER_CAMERA_TYPE_DHGRABBER = 98,
-    DEVICEMANAGER_CAMERA_TYPE_HKGRABBER = 99,
-    DEVICEMANAGER_CAMERA_TYPE_LOCAL = 100
-}
-export declare const BOX_DIRECONNECT_PLATFORM_FILTER: {
-    filtervmsplatformList: {
-        opt: OPT;
-        vmsplatformOpt: VmsplatformOpt;
-        value: string;
-    }[];
-};

packages/func/es/camera/constants.js

@@ -1,50 +0,0 @@
-/**
- * 设备类型枚举
- */
-export var DeviceType = {
-  VMS: 'vms',
-  DIR: 'dir',
-  CAMERA: 'camera'
-};
-export var LOCAL_KEY = 'local'; //离线摄像头key 约定
-export var DIRE_CONNECT_KEY = 'direconnect';
-export var BOX_LIST_KEY = 'boxlist';
-export var VmsplatformOpt = /*#__PURE__*/function (VmsplatformOpt) {
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_ID"] = 0] = "VMSPLATFORMOPT_ID";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PLATFORMNAME"] = 1] = "VMSPLATFORMOPT_PLATFORMNAME";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PLUGINNAME"] = 2] = "VMSPLATFORMOPT_PLUGINNAME";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_IP"] = 3] = "VMSPLATFORMOPT_IP";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PORT"] = 4] = "VMSPLATFORMOPT_PORT";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_USERNAME"] = 5] = "VMSPLATFORMOPT_USERNAME";
-  VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PASSWORD"] = 6] = "VMSPLATFORMOPT_PASSWORD";
-  return VmsplatformOpt;
-}({});
-export var OPT = /*#__PURE__*/function (OPT) {
-  OPT[OPT["OR"] = 0] = "OR";
-  OPT[OPT["AND"] = 1] = "AND";
-  OPT[OPT["ORNOT"] = 2] = "ORNOT";
-  OPT[OPT["ANDNOT"] = 3] = "ANDNOT";
-  return OPT;
-}({});
-export var DevicemanagerCameraType = /*#__PURE__*/function (DevicemanagerCameraType) {
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_DEFAULT"] = 0] = "DEVICEMANAGER_CAMERA_TYPE_DEFAULT";
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_NORMAL"] = 1] = "DEVICEMANAGER_CAMERA_TYPE_NORMAL";
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_1400"] = 97] = "DEVICEMANAGER_CAMERA_TYPE_1400";
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_DHGRABBER"] = 98] = "DEVICEMANAGER_CAMERA_TYPE_DHGRABBER";
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_HKGRABBER"] = 99] = "DEVICEMANAGER_CAMERA_TYPE_HKGRABBER";
-  DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_LOCAL"] = 100] = "DEVICEMANAGER_CAMERA_TYPE_LOCAL";
-  return DevicemanagerCameraType;
-}({});
-
-// 盒子 直连 平台
-export var BOX_DIRECONNECT_PLATFORM_FILTER = {
-  filtervmsplatformList: [{
-    opt: OPT.OR,
-    vmsplatformOpt: VmsplatformOpt.VMSPLATFORMOPT_PLATFORMNAME,
-    value: 'direconnect'
-  }, {
-    opt: OPT.OR,
-    vmsplatformOpt: VmsplatformOpt.VMSPLATFORMOPT_PLATFORMNAME,
-    value: 'boxlist'
-  }]
-};

packages/func/es/camera/index.d.ts

@@ -1,40 +0,0 @@
-import { DevicemanagerCameraType } from './constants';
-export declare const isFaceCamera: (type: DevicemanagerCameraType) => boolean;
-/**
- *
- * @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
- * @param isId
- */
-export declare function getDeviceType(value: {
-    [x: string]: any;
-    id: any;
-} | string): any;
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param id  设备id
- * @param type  设备类型
- */
-export declare function deviceIDToDeviceKey(id: any, type: string, vmsId?: any): string;
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param item  camera/vms/dirs
- */
-export declare function deviceToDeviceKey(item: {
-    [x: string]: any;
-    id: any;
-}): string;
-/**
- * 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
- * @param deviceKey 设备树的id
- */
-export declare function deviceKeyToDeviceId(deviceKey: {
-    split: (arg0: string) => [any, any];
-}): any;
-export declare const getVmsIdByDeviceId: (key: string) => string;
-/**
- * 通过设备id或设备key在树里面找摄像头
- * @param ids cameraId
- * @param deviceTree 树
- * @param type "id" | "key"
- */
-export declare const findCamerasByInDeviceTree: (ids: never[] | undefined, deviceTree: any, type?: string) => any[];

packages/func/es/camera/index.js

@@ -1,142 +0,0 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { get, has, isString } from 'lodash-es';
-import { loop } from "../utils";
-import { DevicemanagerCameraType, DeviceType } from "./constants";
-export var isFaceCamera = function isFaceCamera(type) {
-  return [DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_1400, DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_HKGRABBER, DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_DHGRABBER].includes(type);
-};
-
-/**
- *
- * @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
- * @param isId
- */
-export function getDeviceType(value) {
-  var type;
-  var isDeviceKey = isString(value);
-  if (isDeviceKey) {
-    type = value.split('_')[0];
-  } else {
-    if (has(value, 'longitude')) {
-      type = DeviceType['CAMERA'];
-    }
-    if (has(value, 'ip')) {
-      type = DeviceType['VMS'];
-    }
-    if (!type) {
-      type = DeviceType['DIR'];
-    }
-  }
-  return type;
-}
-
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param id  设备id
- * @param type  设备类型
- */
-export function deviceIDToDeviceKey(id, type, vmsId) {
-  if (type == DeviceType['DIR']) {
-    return "".concat(type, "_").concat(id, "_").concat(vmsId);
-  } else {
-    return "".concat(type, "_").concat(id);
-  }
-}
-
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param item  camera/vms/dirs
- */
-export function deviceToDeviceKey(item) {
-  var deviceKey = '';
-  var type = getDeviceType(item);
-  if (!type) {
-    console.error('device type is null!');
-  }
-  switch (type) {
-    case DeviceType['DIR']:
-      {
-        var dirId = item['dirid'] || item['dirId'];
-        if (!dirId && dirId !== 0) {
-          console.error('dirId type is null!');
-        }
-        var vmsId = get(item, 'extendInfo.vmsPlatformId');
-        if (!vmsId && vmsId !== 0) {
-          console.error('vmsId type is null!');
-        }
-        deviceKey = "".concat(type, "_").concat(dirId, "_").concat(vmsId);
-      }
-      break;
-    case DeviceType['VMS']:
-      deviceKey = "".concat(type, "_").concat(item['id']);
-      break;
-    case DeviceType['CAMERA']:
-      {
-        var _vmsId = get(item, 'extendInfo.vmsPlatformId');
-        if (!_vmsId && _vmsId !== 0) {
-          console.error('vmsId type is null!');
-        }
-        deviceKey = "".concat(type, "_").concat(item.id);
-      }
-      break;
-  }
-  return deviceKey;
-}
-
-/**
- * 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
- * @param deviceKey 设备树的id
- */
-export function deviceKeyToDeviceId(deviceKey) {
-  var _deviceKey$split = deviceKey.split('_'),
-    _deviceKey$split2 = _slicedToArray(_deviceKey$split, 2),
-    type = _deviceKey$split2[0],
-    id = _deviceKey$split2[1];
-  return type === DeviceType['DIR'] ? id : Number(id);
-}
-export var getVmsIdByDeviceId = function getVmsIdByDeviceId(key) {
-  var type = getDeviceType(key);
-  var vmsId = '';
-  switch (type) {
-    case DeviceType['CAMERA']:
-    case DeviceType['DIR']:
-      vmsId = key.split('_')[2];
-      break;
-    case DeviceType['VMS']:
-      vmsId = key.split('_')[1];
-      break;
-  }
-  if (!vmsId) {
-    console.error('vmsid is null!');
-  }
-  return vmsId;
-};
-
-/**
- * 通过设备id或设备key在树里面找摄像头
- * @param ids cameraId
- * @param deviceTree 树
- * @param type "id" | "key"
- */
-export var findCamerasByInDeviceTree = function findCamerasByInDeviceTree() {
-  var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var deviceTree = arguments.length > 1 ? arguments[1] : undefined;
-  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'id';
-  var cameraInfoList = [];
-  var _ids = ids.map(function (v) {
-    return String(v);
-  }); //都转string在做判断 保证格式一致
-  loop(deviceTree, function (item) {
-    var isCamera = getDeviceType(get(item, 'key', '')) === DeviceType['CAMERA'];
-    var isMatch = type === 'key' ? _ids.includes(get(item, 'key')) : _ids.includes("".concat(get(item, 'origin.id')));
-    if (isCamera && isMatch) {
-      cameraInfoList.push(item);
-    }
-  });
-  return cameraInfoList;
-};

packages/func/es/file/index.d.ts

@@ -1,80 +0,0 @@
-export declare type Rect = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};
-/**
- *
- * @param url 需要转为图片的链接
- * @returns 图片的 dom
- */
-export declare const urlToImg: (url: string) => Promise<HTMLImageElement>;
-export declare const base64DecodeImageKey: (base64ImgKey: string) => string;
-/**
- * 通过url获取图片的base64字符串
- * @param src 图片链接
- * @param outputFormat 图片格式
- * @returns base64 @string
- */
-export declare const getBase64ByUrl: (src: string | URL, outputFormat?: string) => Promise<unknown>;
-/**
- * 把文件转base64
- * @param file @file 文件
- * @returns @string
- */
-export declare const fileToBase64: (file: any) => Promise<string>;
-/**
- *
- * @param image @file 图片文件
- * @param width @number 宽度
- * @param height @number  高度
- * @returns  @string base64
- */
-export declare const getBase64Image: (image: any, width?: any, height?: any) => string;
-/**
- * 通过图片获取base64
- * @param src 图片地址
- * @returns @string
- */
-export declare const getBase64ByImage: (src: string) => Promise<unknown>;
-/**
- * url转base64
- * @param {String} url - url地址
- */
-export declare const urlToBase64V2: (url: string) => Promise<unknown>;
-/**
- * base64转Blob
- * @param {String} base64 - base64
- */
-export declare function base64toBlob(base64: string): Blob | undefined;
-/**
- * 图片集打包压缩下载
- * 1. url -> base64 -> blob
- * 2. 将blob加入jsZip文件夹内，用file-saver保存
- * @param {Array<{url:string,name:string}>} imgDataList
- * @param {string} zipName
- */
-export declare const downloadPackageImages: (imgDataList: string | any[], zipName: string) => Promise<void>;
-export declare function getFileSize(size: number): string;
-export declare const dataURLToBlob: (dataurl: string) => Blob;
-/**
- * key 转 http 链接
- * @param originImgkey 图片的值 ，可以是 base64 也可以是 http链接
- * @param host 图片的域值
- * @returns {string}
- */
-export declare const generateImg: (imgKey: string, host?: string) => string;
-/**
- * 获取指定字符串后面的部分
- * @param imageKey v1_开头的字符串
- * @returns
- */
-export declare const getImageKey: (imageKey: string, preFix?: string) => string;
-/**
- * 获取图片
- * @param img 图片的url链接
- * @param odRect
- * @returns file
- */
-export declare const getFileByRect: (img: string, odRect: Rect) => Promise<File>;

packages/func/es/index.d.ts

@@ -1,10 +0,0 @@
-export * from 'lodash-es';
-export * from './file';
-export * from './map';
-export * from './performance';
-export * from './string';
-export * from './number';
-export * from './time';
-export * from './utils';
-export * from './camera';
-export * from './math';

packages/func/es/index.js

@@ -1,10 +0,0 @@
-export * from 'lodash-es';
-export * from "./file";
-export * from "./map";
-export * from "./performance";
-export * from "./string";
-export * from "./number";
-export * from "./time";
-export * from "./utils";
-export * from "./camera";
-export * from "./math";

packages/func/es/map/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * 获取经纬信息
- * @param lngLat 位置信息
- * @returns @object { long, lat }
- */
-export declare const fixedLngLat: (lngLat?: string) => string;
-export declare const transformLngLat: (lngLat?: string) => {
-    longitude: number;
-    latitude: number;
-} | null;

packages/func/es/map/index.js

@@ -1,32 +0,0 @@
-/**
- * 获取经纬信息
- * @param lngLat 位置信息
- * @returns @object { long, lat }
- */
-export var fixedLngLat = function fixedLngLat(lngLat) {
-  if (!lngLat) {
-    return '';
-  }
-  var lngLatArr = lngLat.split(',');
-  var longitude = Number(lngLatArr[0]).toFixed(6);
-  var latitude = Number(lngLatArr[1]).toFixed(6);
-  if (lngLatArr.length < 2) {
-    return '';
-  }
-  return "".concat(longitude, ",").concat(latitude);
-};
-export var transformLngLat = function transformLngLat(lngLat) {
-  if (lngLat) {
-    var lngLatArr = lngLat ? lngLat.split(',') : [];
-    var longitude = Number(lngLatArr[0]);
-    var latitude = Number(lngLatArr[1]);
-    if (lngLatArr.length < 2) {
-      return null;
-    }
-    return {
-      longitude: longitude,
-      latitude: latitude
-    };
-  }
-  return null;
-};

packages/func/es/math/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: {};
-export default _default;

packages/func/es/math/index.js

@@ -1 +0,0 @@
-export default {};

packages/func/es/number/index.d.ts

@@ -1,14 +0,0 @@
-/**
- * 设置数据的精度
- * @param originNumber
- * @param accuracy 精度 以原点为中心向左为正，向右为负，
- * @param isCeil 是否为向上取整
- * @returns number
- */
-export declare const setNumberAccuracy: (originNumber: number, accuracy?: number, isCeil?: boolean) => number;
-/**
- * 获取数字
- * @param number 需要校验的数值
- * @returns @number
- */
-export declare const toRealNumber: (number: any) => any;

packages/func/es/number/index.js

@@ -1,38 +0,0 @@
-/**
- * 设置数据的精度
- * @param originNumber
- * @param accuracy 精度 以原点为中心向左为正，向右为负，
- * @param isCeil 是否为向上取整
- * @returns number
- */
-export var setNumberAccuracy = function setNumberAccuracy(originNumber) {
-  var accuracy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var isCeil = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  if (originNumber === 0) {
-    return 0;
-  }
-  var returnData = 0;
-  if (isCeil) {
-    returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
-  } else {
-    returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
-  }
-  //设置精度
-  if (accuracy < 0) {
-    returnData = Number(returnData.toFixed(-accuracy));
-  } else {
-    returnData = Number(returnData.toFixed(0));
-  }
-  return returnData;
-};
-
-/**
- * 获取数字
- * @param number 需要校验的数值
- * @returns @number
- */
-export var toRealNumber = function toRealNumber(number) {
-  if (isNaN(number) || number === Infinity) {
-    return 0;
-  } else return number;
-};

packages/func/es/performance/index.d.ts

@@ -1 +0,0 @@
-export declare const speedConvert: (bps: number, contertUnit?: number) => string;

packages/func/es/performance/index.js

@@ -1,14 +0,0 @@
-// 1.bps KB/s or MB/s or GB/s  2.保留两位小数  3.默认是bps
-export var speedConvert = function speedConvert(bps) {
-  var contertUnit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
-  if (bps === undefined) return "0KB/s";
-  var byte = bps / contertUnit;
-  if (bps > 1024 * 1024 * 1024) {
-    return "".concat((byte / 1024 / 1024 / 1024).toFixed(2), "GB/s");
-  } else if (byte > 1024 * 1024) {
-    return "".concat((byte / 1024 / 1024).toFixed(2), "MB/s");
-  } else if (byte > 1024) {
-    return "".concat((byte / 1024).toFixed(2), "KB/s");
-  }
-  return "".concat(byte, "KB/s");
-};

packages/func/es/string/index.js

@@ -1,105 +0,0 @@
-///<summary>获得字符串实际长度，中文2，英文1</summary>
-///<param name="str">要获得长度的字符串</param>
-export var getStrLength = function getStrLength(str) {
-  var realLength = 0,
-    len = str.length,
-    charCode = -1;
-  for (var i = 0; i < len; i++) {
-    charCode = str.charCodeAt(i);
-    if (charCode >= 0 && charCode <= 128) realLength += 1;else realLength += 2;
-  }
-  return realLength;
-};
-
-//js截取字符串，中英文都能用
-//如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。
-//字符串，长度
-
-/**
- * js截取字符串，中英文都能用
- * @param str：需要截取的字符串
- * @param len: 需要截取的长度
- */
-export var cutStr = function cutstr(str, len) {
-  var str_length = 0;
-  var str_len = 0;
-  var str_cut = new String();
-  str_len = str.length;
-  for (var i = 0; i < str_len; i++) {
-    var a = str.charAt(i);
-    str_length++;
-    if (escape(a).length > 4) {
-      //中文字符的长度经编码之后大于4
-      str_length++;
-    }
-    str_cut = str_cut.concat(a);
-    if (str_length >= len) {
-      str_cut = str_cut.concat('...');
-      return str_cut;
-    }
-  }
-  //如果给定字符串小于指定长度，则返回源字符串；
-  if (str_length < len) {
-    return str;
-  }
-};
-
-/**
- * 查看字符串是否为可访问链接
- * @param str 待检查链接
- * @returns
- */
-export var isUrl = function isUrl(str) {
-  try {
-    new URL(str);
-    return true;
-  } catch (err) {
-    return false;
-  }
-};
-
-/**
- * 通过url获取值
- * @param key 想要获取的值
- * @param url 需要截取的链接
- */
-export var getValueByUrl = function getValueByUrl(key, str) {
-  var result = null;
-  if (isUrl(str)) {
-    result = new URL(str).searchParams.get(key);
-  } else {
-    result = new URLSearchParams(str.indexOf('?') > -1 ? str : "?".concat(str)).get(key);
-  }
-  return result;
-};
-
-/**
- * 行内px 转 rem
- * @param value px像素
- * @param rootFontSize 根元素大小: 默认16px
- */
-export var pxToRem = function pxToRem(value, rootFontSize) {
-  var fontSize = rootFontSize || 80 || parseFloat(document.documentElement.style.fontSize);
-  var valueArr = value.split(' ');
-  return valueArr.filter(function (o) {
-    return o;
-  }).map(function (val) {
-    return parseFloat(val) / fontSize + 'rem';
-  }).join(' ');
-};
-
-/**
- * 跳转到指定URL
- * @param to 跳转的url
- * @returns URL
- */
-export var jumpTo = function jumpTo(to) {
-  var from = location.origin + location.pathname;
-  // 检查是否为url，并且跑出错误
-  if (!isUrl(to)) {
-    throw Error("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u94FE\u63A5\uFF0C\u4EE5http(s)://\u5F00\u5934\uFF01'");
-  }
-  var _targetUrl = new URL(to);
-  _targetUrl.searchParams.set('from', from);
-  return _targetUrl;
-};

packages/func/es/time/index.d.ts

@@ -1,11 +0,0 @@
-export declare const formateDuration: (diff: number) => string;
-export declare function generateTime(): {
-    startDateTime: number;
-    endDateTime: number;
-};
-/**
- * 格式化时间为 00:00
- * @param seconds 时间，单位秒
- * @returns
- */
-export declare function formatDurationTime(seconds: number): string;

packages/func/es/time/index.js

@@ -1,57 +0,0 @@
-//时间差计算
-
-import dayjs from "dayjs";
-
-/*
- * startDate==>开始时间
- * endDate==>结束时间
- * 事例：diffTime(data.createTime,new Date())
- *
- * */
-export var formateDuration = function formateDuration(diff) {
-  //计算出相差天数
-  var days = Math.floor(diff / (24 * 3600 * 1000));
-
-  //计算出小时数
-  var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
-  var hours = Math.floor(leave1 / (3600 * 1000));
-  //计算相差分钟数
-  var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
-  var minutes = Math.floor(leave2 / (60 * 1000));
-
-  //计算相差秒数
-  var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
-  var seconds = Math.round(leave3 / 1000);
-  var returnStr = seconds + '秒';
-  if (minutes > 0) {
-    returnStr = minutes + '分'; //+ returnStr;
-  }
-  if (hours > 0) {
-    returnStr = hours + '小时'; // + returnStr;
-  }
-  if (days > 0) {
-    returnStr = days + '天'; //+ returnStr;
-  }
-  return returnStr;
-};
-
-//检索默认时间
-export function generateTime() {
-  var endDateTime = dayjs().endOf('day').unix();
-  var startDateTime = dayjs().startOf('day').unix();
-  return {
-    startDateTime: startDateTime,
-    endDateTime: endDateTime
-  };
-}
-
-/**
- * 格式化时间为 00:00
- * @param seconds 时间，单位秒
- * @returns
- */
-export function formatDurationTime(seconds) {
-  var minutes = Math.floor(seconds / 60) || 0;
-  var remainingSeconds = Math.floor(seconds % 60);
-  return (minutes < 10 ? "0".concat(minutes) : minutes) + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
-}

packages/func/es/utils/index.d.ts

@@ -1,36 +0,0 @@
-export { default as isChrome } from './isChrome';
-export declare const matchS3Prefix: (str: string) => boolean;
-/**
- * 通过文件名获取文件类型
- * @param fileName 文件名称
- * @returns 文件类型
- */
-export declare const getFileSuffix: (fileName: string) => string;
-/**
- * 通过类型获取文件名
- * @param type 类型
- * @returns
- */
-export declare const getImageSuffixByFileType: (type: string) => string;
-export declare function getChromeVersion(): number | false;
-export declare const nextTick: (func: (value: void) => void | PromiseLike<void>) => void;
-export declare const loop: (items: string | any[], callback: (arg0: any) => any) => void;
-export declare const addEventListenerWrapper: (target: any, eventType: string, cb: any, option?: any) => {
-    remove: () => void;
-};
-/**
- * Get transforms base on the given object.
- * @param {Object} obj - The target object.
- * @returns {string} A string contains transform values.
- */
-export declare function getTransforms({ rotate, scaleX, scaleY, translateX, translateY, }: {
-    rotate?: number;
-    scaleX?: number;
-    scaleY?: number;
-    translateX?: number;
-    translateY?: number;
-}): {
-    WebkitTransform: string;
-    msTransform: string;
-    transform: string;
-};

packages/func/es/utils/index.js

@@ -1,144 +0,0 @@
-import { isNumber } from 'lodash-es';
-import ReactDOM from 'react-dom';
-export { default as isChrome } from "./isChrome";
-export var matchS3Prefix = function matchS3Prefix(str) {
-  return /^v[0-9]_/.test(str);
-};
-
-/**
- * 通过文件名获取文件类型
- * @param fileName 文件名称
- * @returns 文件类型
- */
-export var getFileSuffix = function getFileSuffix(fileName) {
-  var splitArr = fileName.split('.');
-  return splitArr.length < 2 ? '' : splitArr[splitArr.length - 1];
-};
-
-/**
- * 通过类型获取文件名
- * @param type 类型
- * @returns
- */
-export var getImageSuffixByFileType = function getImageSuffixByFileType(type) {
-  var imageSuffix = '';
-  switch (type) {
-    case 'jpeg':
-      {
-        imageSuffix = '.jpg';
-        break;
-      }
-    case 'gif':
-      {
-        imageSuffix = '.gif';
-        break;
-      }
-    case 'png':
-      {
-        imageSuffix = '.png';
-        break;
-      }
-    case 'vnd.wap.wbmp':
-      {
-        imageSuffix = '.wbmp';
-        break;
-      }
-    case 'x-up-wpng':
-      {
-        imageSuffix = '.wpng';
-        break;
-      }
-    case 'nbmp':
-      {
-        imageSuffix = '.nbmp';
-        break;
-      }
-  }
-  return imageSuffix;
-};
-
-// 获取谷歌浏览器版本
-export function getChromeVersion() {
-  var arr = navigator.userAgent.split(' ');
-  var chromeVersion = '';
-  for (var i = 0; i < arr.length; i++) {
-    if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
-  }
-  if (chromeVersion) {
-    return Number(chromeVersion.split('/')[1].split('.')[0]);
-  } else {
-    return false;
-  }
-}
-export var nextTick = function nextTick(func) {
-  if (queueMicrotask) {
-    queueMicrotask(func);
-    return;
-  }
-  Promise.resolve().then(func);
-};
-export var loop = function loop(items, callback) {
-  for (var i = 0; i < items.length; i++) {
-    var element = items[i];
-    var isBreak = callback(element);
-    if (isBreak) {
-      return;
-    }
-    if (element['children']) {
-      loop(element['children'], callback);
-    }
-  }
-};
-export var addEventListenerWrapper = function addEventListenerWrapper(target, eventType, cb, option) {
-  /* eslint camelcase: 2 */
-  var callback = ReactDOM.unstable_batchedUpdates ? function run(e) {
-    ReactDOM.unstable_batchedUpdates(cb, e);
-  } : cb;
-  if (target.addEventListener) {
-    target.addEventListener(eventType, callback, option);
-  }
-  return {
-    remove: function remove() {
-      if (target.removeEventListener) {
-        target.removeEventListener(eventType, callback);
-      }
-    }
-  };
-};
-
-/**
- * Get transforms base on the given object.
- * @param {Object} obj - The target object.
- * @returns {string} A string contains transform values.
- */
-export function getTransforms(_ref) {
-  var rotate = _ref.rotate,
-    scaleX = _ref.scaleX,
-    scaleY = _ref.scaleY,
-    translateX = _ref.translateX,
-    translateY = _ref.translateY;
-  var values = [];
-  if (isNumber(translateX) && translateX !== 0) {
-    values.push("translateX(".concat(translateX, "px)"));
-  }
-  if (isNumber(translateY) && translateY !== 0) {
-    values.push("translateY(".concat(translateY, "px)"));
-  }
-
-  // Rotate should come first before scale to match orientation transform
-  if (isNumber(rotate) && rotate !== 0) {
-    values.push("rotate(".concat(rotate, "deg)"));
-  }
-  if (isNumber(scaleX) && scaleX !== 1) {
-    values.push("scaleX(".concat(scaleX, ")"));
-  }
-  if (isNumber(scaleY) && scaleY !== 1) {
-    values.push("scaleY(".concat(scaleY, ")"));
-  }
-  var transform = values.length ? values.join(' ') : 'none';
-  return {
-    WebkitTransform: transform,
-    msTransform: transform,
-    transform: transform
-  };
-}

packages/func/es/utils/isChrome.d.ts

@@ -1,3 +0,0 @@
-export declare const isBrowser: boolean;
-declare const isChrome: () => boolean;
-export default isChrome;

packages/func/es/utils/isChrome.js

@@ -1,17 +0,0 @@
-export var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-var isChrome = function isChrome() {
-  var winNav = isBrowser && window.navigator;
-  var vendorName = winNav && (winNav === null || winNav === void 0 ? void 0 : winNav.vendor);
-  var userAgent = winNav && winNav.userAgent;
-
-  //@ts-ignore
-  var isChromium = isBrowser && typeof chrome !== 'undefined';
-
-  //@ts-ignore
-  var isOpera = isBrowser && typeof opr !== 'undefined';
-  var isIEedge = userAgent && userAgent.indexOf('Edge') > -1;
-  var isIOSChrome = !!(userAgent && userAgent.match('CriOS'));
-  var isDesktopChrome = isChromium && vendorName === 'Google Inc.' && !isOpera && !isIEedge;
-  return isIOSChrome || isDesktopChrome;
-};
-export default isChrome;

packages/func/lib/camera/constants.d.ts

@@ -1,41 +0,0 @@
-/**
- * 设备类型枚举
- */
-export declare const DeviceType: {
-    VMS: string;
-    DIR: string;
-    CAMERA: string;
-};
-export declare const LOCAL_KEY = "local";
-export declare const DIRE_CONNECT_KEY = "direconnect";
-export declare const BOX_LIST_KEY = "boxlist";
-export declare enum VmsplatformOpt {
-    VMSPLATFORMOPT_ID = 0,
-    VMSPLATFORMOPT_PLATFORMNAME = 1,
-    VMSPLATFORMOPT_PLUGINNAME = 2,
-    VMSPLATFORMOPT_IP = 3,
-    VMSPLATFORMOPT_PORT = 4,
-    VMSPLATFORMOPT_USERNAME = 5,
-    VMSPLATFORMOPT_PASSWORD = 6
-}
-export declare enum OPT {
-    OR = 0,
-    AND = 1,
-    ORNOT = 2,
-    ANDNOT = 3
-}
-export declare enum DevicemanagerCameraType {
-    DEVICEMANAGER_CAMERA_TYPE_DEFAULT = 0,
-    DEVICEMANAGER_CAMERA_TYPE_NORMAL = 1,
-    DEVICEMANAGER_CAMERA_TYPE_1400 = 97,
-    DEVICEMANAGER_CAMERA_TYPE_DHGRABBER = 98,
-    DEVICEMANAGER_CAMERA_TYPE_HKGRABBER = 99,
-    DEVICEMANAGER_CAMERA_TYPE_LOCAL = 100
-}
-export declare const BOX_DIRECONNECT_PLATFORM_FILTER: {
-    filtervmsplatformList: {
-        opt: OPT;
-        vmsplatformOpt: VmsplatformOpt;
-        value: string;
-    }[];
-};

packages/func/lib/camera/constants.js

@@ -1,90 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/camera/constants.ts
-var constants_exports = {};
-__export(constants_exports, {
-  BOX_DIRECONNECT_PLATFORM_FILTER: () => BOX_DIRECONNECT_PLATFORM_FILTER,
-  BOX_LIST_KEY: () => BOX_LIST_KEY,
-  DIRE_CONNECT_KEY: () => DIRE_CONNECT_KEY,
-  DeviceType: () => DeviceType,
-  DevicemanagerCameraType: () => DevicemanagerCameraType,
-  LOCAL_KEY: () => LOCAL_KEY,
-  OPT: () => OPT,
-  VmsplatformOpt: () => VmsplatformOpt
-});
-module.exports = __toCommonJS(constants_exports);
-var DeviceType = {
-  VMS: "vms",
-  DIR: "dir",
-  CAMERA: "camera"
-};
-var LOCAL_KEY = "local";
-var DIRE_CONNECT_KEY = "direconnect";
-var BOX_LIST_KEY = "boxlist";
-var VmsplatformOpt = /* @__PURE__ */ ((VmsplatformOpt2) => {
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_ID"] = 0] = "VMSPLATFORMOPT_ID";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PLATFORMNAME"] = 1] = "VMSPLATFORMOPT_PLATFORMNAME";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PLUGINNAME"] = 2] = "VMSPLATFORMOPT_PLUGINNAME";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_IP"] = 3] = "VMSPLATFORMOPT_IP";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PORT"] = 4] = "VMSPLATFORMOPT_PORT";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_USERNAME"] = 5] = "VMSPLATFORMOPT_USERNAME";
-  VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PASSWORD"] = 6] = "VMSPLATFORMOPT_PASSWORD";
-  return VmsplatformOpt2;
-})(VmsplatformOpt || {});
-var OPT = /* @__PURE__ */ ((OPT2) => {
-  OPT2[OPT2["OR"] = 0] = "OR";
-  OPT2[OPT2["AND"] = 1] = "AND";
-  OPT2[OPT2["ORNOT"] = 2] = "ORNOT";
-  OPT2[OPT2["ANDNOT"] = 3] = "ANDNOT";
-  return OPT2;
-})(OPT || {});
-var DevicemanagerCameraType = /* @__PURE__ */ ((DevicemanagerCameraType2) => {
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_DEFAULT"] = 0] = "DEVICEMANAGER_CAMERA_TYPE_DEFAULT";
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_NORMAL"] = 1] = "DEVICEMANAGER_CAMERA_TYPE_NORMAL";
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_1400"] = 97] = "DEVICEMANAGER_CAMERA_TYPE_1400";
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_DHGRABBER"] = 98] = "DEVICEMANAGER_CAMERA_TYPE_DHGRABBER";
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_HKGRABBER"] = 99] = "DEVICEMANAGER_CAMERA_TYPE_HKGRABBER";
-  DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_LOCAL"] = 100] = "DEVICEMANAGER_CAMERA_TYPE_LOCAL";
-  return DevicemanagerCameraType2;
-})(DevicemanagerCameraType || {});
-var BOX_DIRECONNECT_PLATFORM_FILTER = {
-  filtervmsplatformList: [
-    {
-      opt: 0 /* OR */,
-      vmsplatformOpt: 1 /* VMSPLATFORMOPT_PLATFORMNAME */,
-      value: "direconnect"
-    },
-    {
-      opt: 0 /* OR */,
-      vmsplatformOpt: 1 /* VMSPLATFORMOPT_PLATFORMNAME */,
-      value: "boxlist"
-    }
-  ]
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  BOX_DIRECONNECT_PLATFORM_FILTER,
-  BOX_LIST_KEY,
-  DIRE_CONNECT_KEY,
-  DeviceType,
-  DevicemanagerCameraType,
-  LOCAL_KEY,
-  OPT,
-  VmsplatformOpt
-});

packages/func/lib/camera/index.d.ts

@@ -1,40 +0,0 @@
-import { DevicemanagerCameraType } from './constants';
-export declare const isFaceCamera: (type: DevicemanagerCameraType) => boolean;
-/**
- *
- * @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
- * @param isId
- */
-export declare function getDeviceType(value: {
-    [x: string]: any;
-    id: any;
-} | string): any;
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param id  设备id
- * @param type  设备类型
- */
-export declare function deviceIDToDeviceKey(id: any, type: string, vmsId?: any): string;
-/**
- * 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
- * @param item  camera/vms/dirs
- */
-export declare function deviceToDeviceKey(item: {
-    [x: string]: any;
-    id: any;
-}): string;
-/**
- * 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
- * @param deviceKey 设备树的id
- */
-export declare function deviceKeyToDeviceId(deviceKey: {
-    split: (arg0: string) => [any, any];
-}): any;
-export declare const getVmsIdByDeviceId: (key: string) => string;
-/**
- * 通过设备id或设备key在树里面找摄像头
- * @param ids cameraId
- * @param deviceTree 树
- * @param type "id" | "key"
- */
-export declare const findCamerasByInDeviceTree: (ids: never[] | undefined, deviceTree: any, type?: string) => any[];

packages/func/lib/camera/index.js

@@ -1,143 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/camera/index.ts
-var camera_exports = {};
-__export(camera_exports, {
-  deviceIDToDeviceKey: () => deviceIDToDeviceKey,
-  deviceKeyToDeviceId: () => deviceKeyToDeviceId,
-  deviceToDeviceKey: () => deviceToDeviceKey,
-  findCamerasByInDeviceTree: () => findCamerasByInDeviceTree,
-  getDeviceType: () => getDeviceType,
-  getVmsIdByDeviceId: () => getVmsIdByDeviceId,
-  isFaceCamera: () => isFaceCamera
-});
-module.exports = __toCommonJS(camera_exports);
-var import_lodash_es = require("lodash-es");
-var import_utils = require("../utils");
-var import_constants = require("./constants");
-var isFaceCamera = (type) => {
-  return [
-    import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_1400,
-    import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_HKGRABBER,
-    import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_DHGRABBER
-  ].includes(type);
-};
-function getDeviceType(value) {
-  let type;
-  let isDeviceKey = (0, import_lodash_es.isString)(value);
-  if (isDeviceKey) {
-    type = value.split("_")[0];
-  } else {
-    if ((0, import_lodash_es.has)(value, "longitude")) {
-      type = import_constants.DeviceType["CAMERA"];
-    }
-    if ((0, import_lodash_es.has)(value, "ip")) {
-      type = import_constants.DeviceType["VMS"];
-    }
-    if (!type) {
-      type = import_constants.DeviceType["DIR"];
-    }
-  }
-  return type;
-}
-function deviceIDToDeviceKey(id, type, vmsId) {
-  if (type == import_constants.DeviceType["DIR"]) {
-    return `${type}_${id}_${vmsId}`;
-  } else {
-    return `${type}_${id}`;
-  }
-}
-function deviceToDeviceKey(item) {
-  let deviceKey = "";
-  let type = getDeviceType(item);
-  if (!type) {
-    console.error("device type is null!");
-  }
-  switch (type) {
-    case import_constants.DeviceType["DIR"]:
-      {
-        let dirId = item["dirid"] || item["dirId"];
-        if (!dirId && dirId !== 0) {
-          console.error("dirId type is null!");
-        }
-        let vmsId = (0, import_lodash_es.get)(item, "extendInfo.vmsPlatformId");
-        if (!vmsId && vmsId !== 0) {
-          console.error("vmsId type is null!");
-        }
-        deviceKey = `${type}_${dirId}_${vmsId}`;
-      }
-      break;
-    case import_constants.DeviceType["VMS"]:
-      deviceKey = `${type}_${item["id"]}`;
-      break;
-    case import_constants.DeviceType["CAMERA"]:
-      {
-        let vmsId = (0, import_lodash_es.get)(item, "extendInfo.vmsPlatformId");
-        if (!vmsId && vmsId !== 0) {
-          console.error("vmsId type is null!");
-        }
-        deviceKey = `${type}_${item.id}`;
-      }
-      break;
-  }
-  return deviceKey;
-}
-function deviceKeyToDeviceId(deviceKey) {
-  let [type, id] = deviceKey.split("_");
-  return type === import_constants.DeviceType["DIR"] ? id : Number(id);
-}
-var getVmsIdByDeviceId = (key) => {
-  const type = getDeviceType(key);
-  let vmsId = "";
-  switch (type) {
-    case import_constants.DeviceType["CAMERA"]:
-    case import_constants.DeviceType["DIR"]:
-      vmsId = key.split("_")[2];
-      break;
-    case import_constants.DeviceType["VMS"]:
-      vmsId = key.split("_")[1];
-      break;
-  }
-  if (!vmsId) {
-    console.error("vmsid is null!");
-  }
-  return vmsId;
-};
-var findCamerasByInDeviceTree = (ids = [], deviceTree, type = "id") => {
-  let cameraInfoList = [];
-  let _ids = ids.map((v) => String(v));
-  (0, import_utils.loop)(deviceTree, (item) => {
-    let isCamera = getDeviceType((0, import_lodash_es.get)(item, "key", "")) === import_constants.DeviceType["CAMERA"];
-    let isMatch = type === "key" ? _ids.includes((0, import_lodash_es.get)(item, "key")) : _ids.includes(`${(0, import_lodash_es.get)(item, "origin.id")}`);
-    if (isCamera && isMatch) {
-      cameraInfoList.push(item);
-    }
-  });
-  return cameraInfoList;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  deviceIDToDeviceKey,
-  deviceKeyToDeviceId,
-  deviceToDeviceKey,
-  findCamerasByInDeviceTree,
-  getDeviceType,
-  getVmsIdByDeviceId,
-  isFaceCamera
-});

packages/func/lib/file/index.d.ts

@@ -1,80 +0,0 @@
-export declare type Rect = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};
-/**
- *
- * @param url 需要转为图片的链接
- * @returns 图片的 dom
- */
-export declare const urlToImg: (url: string) => Promise<HTMLImageElement>;
-export declare const base64DecodeImageKey: (base64ImgKey: string) => string;
-/**
- * 通过url获取图片的base64字符串
- * @param src 图片链接
- * @param outputFormat 图片格式
- * @returns base64 @string
- */
-export declare const getBase64ByUrl: (src: string | URL, outputFormat?: string) => Promise<unknown>;
-/**
- * 把文件转base64
- * @param file @file 文件
- * @returns @string
- */
-export declare const fileToBase64: (file: any) => Promise<string>;
-/**
- *
- * @param image @file 图片文件
- * @param width @number 宽度
- * @param height @number  高度
- * @returns  @string base64
- */
-export declare const getBase64Image: (image: any, width?: any, height?: any) => string;
-/**
- * 通过图片获取base64
- * @param src 图片地址
- * @returns @string
- */
-export declare const getBase64ByImage: (src: string) => Promise<unknown>;
-/**
- * url转base64
- * @param {String} url - url地址
- */
-export declare const urlToBase64V2: (url: string) => Promise<unknown>;
-/**
- * base64转Blob
- * @param {String} base64 - base64
- */
-export declare function base64toBlob(base64: string): Blob | undefined;
-/**
- * 图片集打包压缩下载
- * 1. url -> base64 -> blob
- * 2. 将blob加入jsZip文件夹内，用file-saver保存
- * @param {Array<{url:string,name:string}>} imgDataList
- * @param {string} zipName
- */
-export declare const downloadPackageImages: (imgDataList: string | any[], zipName: string) => Promise<void>;
-export declare function getFileSize(size: number): string;
-export declare const dataURLToBlob: (dataurl: string) => Blob;
-/**
- * key 转 http 链接
- * @param originImgkey 图片的值 ，可以是 base64 也可以是 http链接
- * @param host 图片的域值
- * @returns {string}
- */
-export declare const generateImg: (imgKey: string, host?: string) => string;
-/**
- * 获取指定字符串后面的部分
- * @param imageKey v1_开头的字符串
- * @returns
- */
-export declare const getImageKey: (imageKey: string, preFix?: string) => string;
-/**
- * 获取图片
- * @param img 图片的url链接
- * @param odRect
- * @returns file
- */
-export declare const getFileByRect: (img: string, odRect: Rect) => Promise<File>;

packages/func/lib/file/index.js

@@ -1,308 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/file/index.ts
-var file_exports = {};
-__export(file_exports, {
-  base64DecodeImageKey: () => base64DecodeImageKey,
-  base64toBlob: () => base64toBlob,
-  dataURLToBlob: () => dataURLToBlob,
-  downloadPackageImages: () => downloadPackageImages,
-  fileToBase64: () => fileToBase64,
-  generateImg: () => generateImg,
-  getBase64ByImage: () => getBase64ByImage,
-  getBase64ByUrl: () => getBase64ByUrl,
-  getBase64Image: () => getBase64Image,
-  getFileByRect: () => getFileByRect,
-  getFileSize: () => getFileSize,
-  getImageKey: () => getImageKey,
-  urlToBase64V2: () => urlToBase64V2,
-  urlToImg: () => urlToImg
-});
-module.exports = __toCommonJS(file_exports);
-var import_base_64 = __toESM(require("base-64"));
-var import_jszip = __toESM(require("jszip"));
-var import_file_saver = __toESM(require("file-saver"));
-var import_utils = require("../utils");
-var import_lodash_es = require("lodash-es");
-var urlToImg = (url) => {
-  const resImage = new Promise((resolve) => {
-    const image = new Image();
-    image.crossOrigin = "";
-    image.src = url;
-    image.onload = () => {
-      resolve(image);
-    };
-  });
-  return resImage;
-};
-var base64DecodeImageKey = (base64ImgKey) => {
-  let tempStr = base64ImgKey;
-  if ((0, import_utils.matchS3Prefix)(tempStr)) {
-    tempStr = tempStr.replace(/^v[0-9]_/, "");
-    tempStr = import_base_64.default.decode(tempStr);
-  }
-  const [bucket, ...pathArr] = tempStr.split("_");
-  return tempStr = `${bucket}/${pathArr.join("_")}`;
-};
-var getBase64ByUrl = function(src, outputFormat = "image/png") {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", src, true);
-    xhr.responseType = "arraybuffer";
-    xhr.onload = function(e) {
-      if (Number(xhr.status) === 200) {
-        const uInt8Array = new Uint8Array(xhr.response);
-        let i = uInt8Array.length;
-        const binaryString = new Array(i);
-        while (i--) {
-          binaryString[i] = String.fromCharCode(uInt8Array[i]);
-        }
-        const data = binaryString.join("");
-        const base64 = window.btoa(data);
-        const dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
-        resolve(dataUrl);
-      } else {
-        reject(e);
-      }
-    };
-    xhr.onerror = (e) => {
-      reject(e);
-    };
-    xhr.send();
-  });
-};
-var fileToBase64 = (file) => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = function(e) {
-      resolve(e == null ? void 0 : e.target.result);
-    };
-    reader.onerror = function(e) {
-      reject(e);
-    };
-  });
-};
-var getBase64Image = (image, width, height) => {
-  const canvas = document.createElement("canvas");
-  canvas.width = width !== void 0 ? width : image.width;
-  canvas.height = height !== void 0 ? height : image.height;
-  const ctx = canvas.getContext("2d");
-  ctx == null ? void 0 : ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-  const ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
-  const dataURL = canvas.toDataURL("image/" + ext);
-  return dataURL;
-};
-var getBase64ByImage = function(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    const timestamp = (/* @__PURE__ */ new Date()).getTime();
-    const imgUrl = src + "?" + timestamp;
-    image.src = imgUrl;
-    image.onload = function() {
-      function getBase64Image2(img) {
-        const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        const ctx = canvas.getContext("2d");
-        ctx == null ? void 0 : ctx.drawImage(img, 0, 0, img.width, img.height);
-        const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
-        const dataURL = canvas.toDataURL("image/" + ext);
-        return dataURL;
-      }
-      const base64 = getBase64Image2(image);
-      resolve(base64);
-    };
-    image.onerror = (e) => {
-      reject(e);
-    };
-  });
-};
-var urlToBase64V2 = (url) => {
-  return new Promise((resolve, reject) => {
-    let image = new Image();
-    image.onload = function() {
-      var _a;
-      let canvas = document.createElement("canvas");
-      canvas.width = image.naturalWidth;
-      canvas.height = image.naturalHeight;
-      (_a = canvas == null ? void 0 : canvas.getContext("2d")) == null ? void 0 : _a.drawImage(image, 0, 0);
-      let result = canvas.toDataURL("image/png");
-      resolve(result);
-    };
-    const imgUrl = url;
-    image.setAttribute("crossOrigin", "Anonymous");
-    image.src = imgUrl;
-    image.onerror = () => {
-      reject(new Error("Images fail to load"));
-    };
-  }).catch((error) => {
-    throw new Error(error);
-  });
-};
-function base64toBlob(base64) {
-  if (!base64) return;
-  var arr = base64.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new Blob([u8arr], { type: mime });
-}
-var downloadPackageImages = async (imgDataList, zipName) => {
-  let imgDataDownLoadList = [];
-  let imgBlobList = [];
-  let imageSuffix = [];
-  let zip = new import_jszip.default();
-  let img = zip.folder(zipName);
-  try {
-    for (let i2 = 0; i2 < imgDataList.length; i2++) {
-      let src = imgDataList[i2].url;
-      let suffix = src.substring(src.lastIndexOf("."));
-      let base64ByUrl = await urlToBase64V2(imgDataList[i2].url);
-      if (!base64ByUrl) continue;
-      let blob = base64toBlob(base64ByUrl);
-      imgDataDownLoadList.push(imgDataList[i2]);
-      imgBlobList.push(blob);
-      imageSuffix.push(suffix);
-    }
-    if (imgBlobList.length === 0) throw new Error("The number of pictures is zero !");
-    if (imgBlobList.length > 0) {
-      for (var i = 0; i < imgBlobList.length; i++) {
-        img == null ? void 0 : img.file(
-          imgDataDownLoadList[i].name + (0, import_lodash_es.get)(imageSuffix, `.${i}`, imageSuffix[0]),
-          // @ts-ignore
-          imgBlobList[i],
-          {
-            base64: true
-          }
-        );
-      }
-    }
-    zip.generateAsync({ type: "blob" }).then(function(content) {
-      import_file_saver.default.saveAs(content, zipName + ".zip");
-    });
-  } catch (error) {
-    throw new Error(error);
-  }
-};
-function getFileSize(size) {
-  if (!size) return "";
-  var num = 1024;
-  if (size < num) return size + "B";
-  if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K";
-  if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + "M";
-  if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + "G";
-  return (size / Math.pow(num, 4)).toFixed(2) + "T";
-}
-var dataURLToBlob = (dataurl) => {
-  const arr = dataurl.split(",");
-  const mime = arr[0].match(/:(.*?);/)[1];
-  const bstr = atob(arr[1]);
-  let n = bstr.length;
-  const u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new Blob([u8arr], { type: mime });
-};
-var generateImg = (_imgKey, host = "http://10.0.0.120") => {
-  let imgKey = _imgKey;
-  let imgUrl = "";
-  if (!imgKey) return "";
-  if (/(http|https):\/\/([\w.]+\/?)\S*/ig.test(imgKey)) {
-    return imgKey;
-  }
-  try {
-    if ((0, import_utils.matchS3Prefix)(imgKey)) {
-      imgKey = base64DecodeImageKey(imgKey);
-      if (imgKey.endsWith("/")) {
-        const i = imgKey.substring(0, imgKey.length - 1);
-        imgKey = i;
-      }
-    }
-    imgUrl = `${host}/file/${imgKey}`;
-    if (_imgKey.includes("v3")) {
-      imgUrl = `${host}/minio/${imgKey}`;
-    }
-  } catch (error) {
-    console.error(error);
-    imgUrl = "";
-  }
-  return imgUrl;
-};
-var getImageKey = (imageKey, preFix) => {
-  const splitIndex = preFix || "v1_";
-  if (imageKey.startsWith(splitIndex)) {
-    return window.atob(imageKey.split(splitIndex)[1]).replace("_", "/");
-  } else {
-    return imageKey;
-  }
-};
-var getFileByRect = async (img, odRect) => {
-  var _a;
-  let image;
-  if ((0, import_lodash_es.isString)(img)) {
-    const url = generateImg(img);
-    image = await urlToImg(url);
-  } else {
-    image = img;
-  }
-  const commonCanvas = document.createElement("canvas");
-  commonCanvas.width = odRect.w * image.width;
-  commonCanvas.height = odRect.h * image.height;
-  commonCanvas.style.display = "none";
-  document.body.appendChild(commonCanvas);
-  const commonCtx = commonCanvas.getContext("2d");
-  commonCtx == null ? void 0 : commonCtx.translate(-odRect.x * image.width, -odRect.y * image.height);
-  commonCtx == null ? void 0 : commonCtx.drawImage(image, 0, 0);
-  const base64 = commonCanvas.toDataURL("image/jpeg");
-  const blobData = dataURLToBlob(base64);
-  (_a = commonCanvas.parentNode) == null ? void 0 : _a.removeChild(commonCanvas);
-  const file = new window.File([blobData], `${(/* @__PURE__ */ new Date()).getTime()}`, {
-    type: "image/jpeg"
-  });
-  return file;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  base64DecodeImageKey,
-  base64toBlob,
-  dataURLToBlob,
-  downloadPackageImages,
-  fileToBase64,
-  generateImg,
-  getBase64ByImage,
-  getBase64ByUrl,
-  getBase64Image,
-  getFileByRect,
-  getFileSize,
-  getImageKey,
-  urlToBase64V2,
-  urlToImg
-});

packages/func/lib/index.d.ts

@@ -1,10 +0,0 @@
-export * from 'lodash-es';
-export * from './file';
-export * from './map';
-export * from './performance';
-export * from './string';
-export * from './number';
-export * from './time';
-export * from './utils';
-export * from './camera';
-export * from './math';

packages/func/lib/index.js

@@ -1,41 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var src_exports = {};
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("lodash-es"), module.exports);
-__reExport(src_exports, require("./file"), module.exports);
-__reExport(src_exports, require("./map"), module.exports);
-__reExport(src_exports, require("./performance"), module.exports);
-__reExport(src_exports, require("./string"), module.exports);
-__reExport(src_exports, require("./number"), module.exports);
-__reExport(src_exports, require("./time"), module.exports);
-__reExport(src_exports, require("./utils"), module.exports);
-__reExport(src_exports, require("./camera"), module.exports);
-__reExport(src_exports, require("./math"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("lodash-es"),
-  ...require("./file"),
-  ...require("./map"),
-  ...require("./performance"),
-  ...require("./string"),
-  ...require("./number"),
-  ...require("./time"),
-  ...require("./utils"),
-  ...require("./camera"),
-  ...require("./math")
-});

packages/func/lib/map/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * 获取经纬信息
- * @param lngLat 位置信息
- * @returns @object { long, lat }
- */
-export declare const fixedLngLat: (lngLat?: string) => string;
-export declare const transformLngLat: (lngLat?: string) => {
-    longitude: number;
-    latitude: number;
-} | null;

packages/func/lib/map/index.js

@@ -1,54 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/map/index.ts
-var map_exports = {};
-__export(map_exports, {
-  fixedLngLat: () => fixedLngLat,
-  transformLngLat: () => transformLngLat
-});
-module.exports = __toCommonJS(map_exports);
-var fixedLngLat = (lngLat) => {
-  if (!lngLat) {
-    return "";
-  }
-  const lngLatArr = lngLat.split(",");
-  const longitude = Number(lngLatArr[0]).toFixed(6);
-  const latitude = Number(lngLatArr[1]).toFixed(6);
-  if (lngLatArr.length < 2) {
-    return "";
-  }
-  return `${longitude},${latitude}`;
-};
-var transformLngLat = (lngLat) => {
-  if (lngLat) {
-    const lngLatArr = lngLat ? lngLat.split(",") : [];
-    const longitude = Number(lngLatArr[0]);
-    const latitude = Number(lngLatArr[1]);
-    if (lngLatArr.length < 2) {
-      return null;
-    }
-    return { longitude, latitude };
-  }
-  return null;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  fixedLngLat,
-  transformLngLat
-});

packages/func/lib/math/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: {};
-export default _default;

packages/func/lib/math/index.js

@@ -1,25 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/math/index.ts
-var math_exports = {};
-__export(math_exports, {
-  default: () => math_default
-});
-module.exports = __toCommonJS(math_exports);
-var math_default = {};

packages/func/lib/number/index.d.ts

@@ -1,14 +0,0 @@
-/**
- * 设置数据的精度
- * @param originNumber
- * @param accuracy 精度 以原点为中心向左为正，向右为负，
- * @param isCeil 是否为向上取整
- * @returns number
- */
-export declare const setNumberAccuracy: (originNumber: number, accuracy?: number, isCeil?: boolean) => number;
-/**
- * 获取数字
- * @param number 需要校验的数值
- * @returns @number
- */
-export declare const toRealNumber: (number: any) => any;

packages/func/lib/number/index.js

@@ -1,52 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/number/index.ts
-var number_exports = {};
-__export(number_exports, {
-  setNumberAccuracy: () => setNumberAccuracy,
-  toRealNumber: () => toRealNumber
-});
-module.exports = __toCommonJS(number_exports);
-var setNumberAccuracy = (originNumber, accuracy = 0, isCeil = true) => {
-  if (originNumber === 0) {
-    return 0;
-  }
-  let returnData = 0;
-  if (isCeil) {
-    returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
-  } else {
-    returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
-  }
-  if (accuracy < 0) {
-    returnData = Number(returnData.toFixed(-accuracy));
-  } else {
-    returnData = Number(returnData.toFixed(0));
-  }
-  return returnData;
-};
-var toRealNumber = (number) => {
-  if (isNaN(number) || number === Infinity) {
-    return 0;
-  } else return number;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  setNumberAccuracy,
-  toRealNumber
-});

packages/func/lib/performance/index.d.ts

@@ -1 +0,0 @@
-export declare const speedConvert: (bps: number, contertUnit?: number) => string;