wargerm 0.4.8 → 0.4.11

package/dist/components/Card/index.d.ts

@@ -1,12 +1,22 @@
-import { FC } from 'react';
+import React from 'react';
 import { ReactNode } from 'react';
+interface IsliderTabs {
+    tabs: Array<string>;
+    direction: 'left' | 'right';
+    defaultValue?: number;
+    className?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    components: Array<ReactNode>;
+}
 declare type Props = {
     title: ReactNode;
     className: string;
     headerTail?: ReactNode;
     headerCenter?: ReactNode;
     children?: ReactNode;
+    sliderTabs?: IsliderTabs;
     style?: Record<string, string>;
 };
-declare const Index: FC<Props>;
-export default Index;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export default _default;

package/dist/components/VideoPlayer/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type propsType = {
+    footer?: boolean;
+    style?: {
+        height: number | string;
+        width: number | string;
+    };
+    config?: Object;
+    url?: string[];
+};
+export default function VideoPlayer({ footer, style, config, url, }: propsType): JSX.Element;
+export {};

package/dist/components/VideoPlayer/xgplayer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Xgplay({ config, type }: any): JSX.Element;

package/dist/index.css

@@ -6,15 +6,18 @@
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
+  cursor: pointer;
 }
 ::-webkit-scrollbar-track {
-  background: hsla(0, 0%, 100%, 0.1);
-  -webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(36, 36, 36, 0.1);
 }
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  background: hsla(0, 0%, 100%, 0.1);
   border-radius: 4px;
-  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(0, 0, 0, 0.2);
@@ -233,7 +236,6 @@
   background-color: transparent;
 }
 [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
-  background-color: #192335;
   border-top: 1px solid rgba(118, 214, 255, 0.4);
   border-bottom: 1px solid rgba(118, 214, 255, 0.4);
   border-radius: 0px;
@@ -266,26 +268,10 @@
 }
 [data-prefers-color='dark'] .th .fixedLeft.td,
 [data-prefers-color='dark'] .th .fixedRight.td {
-  background: #192235;
-  transition: all 0.3s;
-}
-[data-prefers-color='dark'] .tr .fixedLeft,
-[data-prefers-color='dark'] .tr .fixedRight {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-  z-index: 3 !important;
-}
-[data-prefers-color='dark'] .tr .fixedLeft.td,
-[data-prefers-color='dark'] .tr .fixedRight.td {
-  background: #233b62;
+  background-color: #192547;
   transition: all 0.3s;
 }
-[data-prefers-color='dark'] .fixedRight {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-  z-index: 3 !important;
-}
-[data-prefers-color='dark'] .fixedRight.td:after {
+[data-prefers-color='dark'] .th .fixedRight:first-child:after {
   box-shadow: inset -10px 0 8px -8px #00000026;
   position: absolute;
   top: 0;
@@ -297,8 +283,7 @@
   content: '';
   pointer-events: none;
 }
-[data-prefers-color='dark'] .fixedLeft .th.td:after,
-[data-prefers-color='dark'] .fixedLeft .tr.td:after {
+[data-prefers-color='dark'] .th .fixedLeft:last-child:after {
   box-shadow: inset -10px 0 8px -8px #00000026;
   position: absolute;
   top: 0;
@@ -310,6 +295,20 @@
   content: '';
   pointer-events: none;
 }
+[data-prefers-color='dark'] .tr .fixedLeft,
+[data-prefers-color='dark'] .tr .fixedRight {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+  z-index: 3 !important;
+}
+[data-prefers-color='dark'] .tr .fixedLeft.td,
+[data-prefers-color='dark'] .tr .fixedRight.td {
+  background: #233b62;
+  transition: all 0.3s;
+}
+[data-prefers-color='dark'] .th .fixedRight:nth-of-type(1) {
+  background: red !important;
+}
 [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   background-color: transparent;
   color: #4383a4;
@@ -654,7 +653,7 @@
 }
 [data-prefers-color='dark'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -1059,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   transform: translate(-124px, -63px);
   padding: 12px 6px;
 }
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs {
+  position: absolute;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
+  right: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
+  left: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
+  transform: skewy(-45deg);
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
+  -ms-writing-mode: tb-lr;
+      writing-mode: vertical-lr;
+  position: relative;
+  margin-bottom: 2px;
+  cursor: pointer;
+  padding: 10px 2px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: skewy(45deg);
+  left: 0;
+  top: 0;
+  background: rgba(81, 190, 246, 0.28);
+  border: 2px solid #51bef6;
+  transition: background 0.3s ease;
+  z-index: -1;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
+  background: #51bef6;
+  border: none;
+}
 [data-prefers-color='dark'] .card-container .container-in::before {
   content: '';
   position: absolute;
@@ -1316,6 +1354,61 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='dark'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[data-prefers-color='dark'] .row {
+  height: calc(100% -30px);
+}
+[data-prefers-color='dark'] .camera {
+  border: 1px solid #216fa3;
+}
+[data-prefers-color='dark'] .camera:hover {
+  border: 1px solid red;
+}
+[data-prefers-color='dark'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='dark'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='dark'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='dark'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[data-prefers-color='dark'] .btnbox:hover {
+  background: #0f6ab7;
+}
 
 /* Color
 ----------------------- */
@@ -1783,7 +1876,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 }
 [data-prefers-color='light'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -2633,6 +2726,61 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-input-number-handler-down-inner {
   color: #708191;
 }
+[data-prefers-color='light'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='light'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[data-prefers-color='light'] .row {
+  height: calc(100% -30px);
+}
+[data-prefers-color='light'] .camera {
+  border: 1px solid #216fa3;
+}
+[data-prefers-color='light'] .camera:hover {
+  border: 1px solid red;
+}
+[data-prefers-color='light'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='light'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='light'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='light'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[data-prefers-color='light'] .btnbox:hover {
+  background: #0f6ab7;
+}
 
 .frame {
   width: 40px;

package/dist/index.d.ts

@@ -26,3 +26,4 @@ export { default as ModalForm } from './components/ModalForm';
 export { default as TabelCard } from './components/TabelCard';
 export { default as Cascader } from './components/Cascader';
 export { default as WebsocketHeart } from './components/WebsocketHeart';
+export { default as VideoPlayer } from './components/VideoPlayer';

package/dist/index.esm.css

@@ -6,15 +6,18 @@
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
+  cursor: pointer;
 }
 ::-webkit-scrollbar-track {
-  background: hsla(0, 0%, 100%, 0.1);
-  -webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(36, 36, 36, 0.1);
 }
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  background: hsla(0, 0%, 100%, 0.1);
   border-radius: 4px;
-  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(0, 0, 0, 0.2);
@@ -233,7 +236,6 @@
   background-color: transparent;
 }
 [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
-  background-color: #192335;
   border-top: 1px solid rgba(118, 214, 255, 0.4);
   border-bottom: 1px solid rgba(118, 214, 255, 0.4);
   border-radius: 0px;
@@ -266,26 +268,10 @@
 }
 [data-prefers-color='dark'] .th .fixedLeft.td,
 [data-prefers-color='dark'] .th .fixedRight.td {
-  background: #192235;
-  transition: all 0.3s;
-}
-[data-prefers-color='dark'] .tr .fixedLeft,
-[data-prefers-color='dark'] .tr .fixedRight {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-  z-index: 3 !important;
-}
-[data-prefers-color='dark'] .tr .fixedLeft.td,
-[data-prefers-color='dark'] .tr .fixedRight.td {
-  background: #233b62;
+  background-color: #192547;
   transition: all 0.3s;
 }
-[data-prefers-color='dark'] .fixedRight {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-  z-index: 3 !important;
-}
-[data-prefers-color='dark'] .fixedRight.td:after {
+[data-prefers-color='dark'] .th .fixedRight:first-child:after {
   box-shadow: inset -10px 0 8px -8px #00000026;
   position: absolute;
   top: 0;
@@ -297,8 +283,7 @@
   content: '';
   pointer-events: none;
 }
-[data-prefers-color='dark'] .fixedLeft .th.td:after,
-[data-prefers-color='dark'] .fixedLeft .tr.td:after {
+[data-prefers-color='dark'] .th .fixedLeft:last-child:after {
   box-shadow: inset -10px 0 8px -8px #00000026;
   position: absolute;
   top: 0;
@@ -310,6 +295,20 @@
   content: '';
   pointer-events: none;
 }
+[data-prefers-color='dark'] .tr .fixedLeft,
+[data-prefers-color='dark'] .tr .fixedRight {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+  z-index: 3 !important;
+}
+[data-prefers-color='dark'] .tr .fixedLeft.td,
+[data-prefers-color='dark'] .tr .fixedRight.td {
+  background: #233b62;
+  transition: all 0.3s;
+}
+[data-prefers-color='dark'] .th .fixedRight:nth-of-type(1) {
+  background: red !important;
+}
 [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   background-color: transparent;
   color: #4383a4;
@@ -654,7 +653,7 @@
 }
 [data-prefers-color='dark'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -1059,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   transform: translate(-124px, -63px);
   padding: 12px 6px;
 }
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs {
+  position: absolute;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
+  right: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
+  left: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
+  transform: skewy(-45deg);
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
+  -ms-writing-mode: tb-lr;
+      writing-mode: vertical-lr;
+  position: relative;
+  margin-bottom: 2px;
+  cursor: pointer;
+  padding: 10px 2px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: skewy(45deg);
+  left: 0;
+  top: 0;
+  background: rgba(81, 190, 246, 0.28);
+  border: 2px solid #51bef6;
+  transition: background 0.3s ease;
+  z-index: -1;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
+  background: #51bef6;
+  border: none;
+}
 [data-prefers-color='dark'] .card-container .container-in::before {
   content: '';
   position: absolute;
@@ -1316,6 +1354,61 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='dark'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[data-prefers-color='dark'] .row {
+  height: calc(100% -30px);
+}
+[data-prefers-color='dark'] .camera {
+  border: 1px solid #216fa3;
+}
+[data-prefers-color='dark'] .camera:hover {
+  border: 1px solid red;
+}
+[data-prefers-color='dark'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='dark'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='dark'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='dark'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[data-prefers-color='dark'] .btnbox:hover {
+  background: #0f6ab7;
+}
 
 /* Color
 ----------------------- */
@@ -1783,7 +1876,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 }
 [data-prefers-color='light'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -2633,6 +2726,61 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-input-number-handler-down-inner {
   color: #708191;
 }
+[data-prefers-color='light'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='light'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[data-prefers-color='light'] .row {
+  height: calc(100% -30px);
+}
+[data-prefers-color='light'] .camera {
+  border: 1px solid #216fa3;
+}
+[data-prefers-color='light'] .camera:hover {
+  border: 1px solid red;
+}
+[data-prefers-color='light'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='light'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='light'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='light'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[data-prefers-color='light'] .btnbox:hover {
+  background: #0f6ab7;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import 'antd/es/dropdown/style';
 import _Dropdown from 'antd/es/dropdown';
 import 'antd/es/menu/style';
 import _Menu from 'antd/es/menu';
-import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
+import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef } from 'react';
 import { createFromIconfontCN, SearchOutlined, ReloadOutlined, CloseCircleOutlined, PlusOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
@@ -41,13 +41,16 @@ import _Cascader from 'antd/es/cascader';
 import cloneDeep from 'lodash/cloneDeep';
 import CountUp from 'react-countup';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import SwiperCore, { Pagination, Navigation, Autoplay } from 'swiper';
+import SwiperCore, { Pagination, Navigation, Autoplay, Virtual } from 'swiper';
 import 'antd/es/breadcrumb/style';
 import _Breadcrumb from 'antd/es/breadcrumb';
 import ReactDOM from 'react-dom';
 import 'antd/es/modal/style';
 import _Modal from 'antd/es/modal';
 import ProTable from '@ant-design/pro-table';
+import Player from 'xgplayer';
+import FlvPlayer from 'xgplayer-flv.js';
+import HlsJsPlayer from 'xgplayer-hls.js';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -460,8 +463,8 @@ WButton.defaultProps = {};
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
- * @LastEditTime: 2021-09-09 15:57:23
- * @LastEditors: lijin
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
  * @Description:
  * @FilePath: \wargerm\src\IconFont\index.tsx
  * 可以输入预定的版权声明、个性签名、空行等
@@ -473,7 +476,7 @@ WButton.defaultProps = {};
 // <IconFont type='icon-demo' className='xxx-xxx' />
 
 var index = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2720974_ec0fzxnc7ul.js'
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
 var WInput = function WInput(props) {
@@ -8532,7 +8535,7 @@ Table.defaultProps = {
 var _excluded$8 = ["height", "width", "count", "style", "numberStyle"],
     _excluded2$2 = ["count", "numberCount", "width", "height", "marginRight"];
 
-var Number = function Number(_ref) {
+var Number$1 = function Number(_ref) {
   var height = _ref.height,
       width = _ref.width,
       _ref$count = _ref.count,
@@ -8654,7 +8657,7 @@ var Number = function Number(_ref) {
   })))));
 };
 
-Number.defaultProps = {
+Number$1.defaultProps = {
   width: 28,
   height: 40
 };
@@ -8691,7 +8694,7 @@ var Index$7 = function Index(props) {
       display: 'flex'
     }
   }, numberList.map(function (res, index) {
-    return /*#__PURE__*/React.createElement(Number, _objectSpread2({
+    return /*#__PURE__*/React.createElement(Number$1, _objectSpread2({
       key: index,
       width: width,
       height: height,
@@ -8886,7 +8889,7 @@ var Index$9 = function Index(_ref) {
 
 var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
-SwiperCore.use([Pagination, Navigation, Autoplay]);
+SwiperCore.use([Pagination, Navigation, Autoplay, Virtual]);
 
 var Index$a = function Index(props) {
   var data = props.data,
@@ -9575,9 +9578,9 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
+var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
-var Index$c = function Index(_ref) {
+var Index$c = function Index(_ref, ref) {
   var _classNames;
 
   var title = _ref.title,
@@ -9585,8 +9588,20 @@ var Index$c = function Index(_ref) {
       className = _ref$className === void 0 ? 'default' : _ref$className,
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
+      sliderTabs = _ref.sliderTabs,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
+  useImperativeHandle(ref, function () {
+    return {
+      activeTab: activeTab
+    };
+  });
+
+  var _useState = useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
   return /*#__PURE__*/React.createElement("div", _objectSpread2({
     className: classnames((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
   }, props), /*#__PURE__*/React.createElement("div", {
@@ -9601,10 +9616,20 @@ var Index$c = function Index(_ref) {
     className: "dot"
   }), title), headerCenter, headerTail), /*#__PURE__*/React.createElement("div", {
     className: "body"
-  }, props.children))));
+  }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
+    className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
+  }, sliderTabs.tabs.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tab ".concat(index == activeTab ? 'active' : '', "  ").concat(sliderTabs.tabClassName || '', "  ").concat(sliderTabs.activeTabClassName || '')
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setActiveTab(index);
+      }
+    }, item));
+  }))));
 };
 
-Index$c.defaultProps = {};
+var index$1 = /*#__PURE__*/forwardRef(Index$c);
 
 var controlShow = function controlShow(f1, f2, value, timer) {
   f1(value);
@@ -10637,6 +10662,21 @@ var TabelCard = function TabelCard(props, ref) {
     actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : _actionRef$current7.reload();
   };
 
+  useEffect(function () {
+    var _searchFormRef$curren, _searchFormRef$curren2;
+
+    if ((_searchFormRef$curren = searchFormRef.current) === null || _searchFormRef$curren === void 0 ? void 0 : (_searchFormRef$curren2 = _searchFormRef$curren.form) === null || _searchFormRef$curren2 === void 0 ? void 0 : _searchFormRef$curren2.getFieldsValue) {
+      var _searchFormRef$curren3, _searchFormRef$curren4;
+
+      var obj = filterObj((_searchFormRef$curren3 = searchFormRef.current) === null || _searchFormRef$curren3 === void 0 ? void 0 : (_searchFormRef$curren4 = _searchFormRef$curren3.form) === null || _searchFormRef$curren4 === void 0 ? void 0 : _searchFormRef$curren4.getFieldsValue()) || {};
+      (columns || []).filter(function (c) {
+        return c.notInitialValueInSearch;
+      }).forEach(function (item) {
+        delete obj[item.dataIndex];
+      });
+      setFormSearch(obj);
+    }
+  }, [columns]);
   var formSearchColumn = columns || [];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalForm$1, _objectSpread2(_objectSpread2({
     ref: modalFormRef,
@@ -10770,13 +10810,13 @@ var TabelCard = function TabelCard(props, ref) {
       return obj;
     }),
     search: false,
-    pagination: pagination || {
+    pagination: pagination !== null && pagination !== void 0 ? pagination : {
       pageSize: 20
     }
   }, extraProps)));
 };
 
-var index$1 = /*#__PURE__*/React.forwardRef(TabelCard);
+var index$2 = /*#__PURE__*/React.forwardRef(TabelCard);
 
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
@@ -10940,4 +10980,199 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, Index$c as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$1 as TabelCard, Table, Index$6 as TreeSelect, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+var player = null;
+function Xgplay(_ref) {
+  var config = _ref.config,
+      type = _ref.type;
+  var ref = useRef(null);
+  useEffect(function () {
+    player = new HlsJsPlayer(_objectSpread2({
+      el: ref.current,
+      width: '100%',
+      height: '100%',
+      autoplay: true,
+      isLive: true,
+      autoplayMuted: true
+    }, config));
+
+    if (type.indexOf('hls') !== -1) {
+      player = new HlsJsPlayer(_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    } else if (type.indexOf('flv') !== -1) {
+      player = new FlvPlayer(_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    } else if (type.indexOf('mp4') !== -1) {
+      player = new Player(_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    }
+
+    return function () {
+      player = null;
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      overflow: 'hidden'
+    }
+  });
+}
+
+/*
+ * @Author: lijin
+ * @Date: 2021-08-04 16:24:47
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
+ * @Description:
+ * @FilePath: \wargerm\src\IconFont\index.tsx
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+// iconFontScriptUrl 修改成自己的iconfont图标项目地址
+// 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
+// 使用：
+// import IconFont from '@/components/IconFont';
+// <IconFont type='icon-demo' className='xxx-xxx' />
+
+var IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
+});
+
+function VideoPlayer(_ref) {
+  var _ref$footer = _ref.footer,
+      footer = _ref$footer === void 0 ? true : _ref$footer,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {
+    width: 400,
+    height: 400
+  } : _ref$style,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? [] : _ref$url;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      colCountKey = _useState2[0],
+      setColCountKey = _useState2[1];
+
+  var _useState3 = useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      colNumber = _useState4[0],
+      setColNumber = _useState4[1];
+
+  var domRef = useRef(null);
+  var contentRef = useRef(null);
+
+  var renderDom = function renderDom() {
+    var arr = new Array(colCountKey * colNumber);
+    return arr.fill('').map(function (item, index) {
+      return /*#__PURE__*/React.createElement(_Col, {
+        span: 24 / colCountKey,
+        key: index,
+        className: "camera",
+        style: {
+          height: (Number(style.height) - 30) / colNumber
+        }
+      }, url[index] ? /*#__PURE__*/React.createElement(Xgplay, {
+        type: url[index],
+        config: _objectSpread2({
+          url: url[index]
+        }, config)
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: "empty",
+        onDoubleClick: function onDoubleClick() {
+          var _domRef$current;
+
+          var fullscreenElement = document.fullscreenElement;
+          fullscreenElement ? exitFullscreen() : requestFullScreen(domRef === null || domRef === void 0 ? void 0 : (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.childNodes[index]);
+        }
+      }));
+    });
+  };
+
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+
+  function requestFullScreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } //FireFox
+    else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } //Chrome等
+    else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } //IE11
+    else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: style,
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement(_Row, {
+    ref: domRef
+  }, renderDom()), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "tools"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(1);
+      setColCountKey(1);
+    }
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "top",
+    title: '1x1布局'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-dantupailie"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(2);
+      setColCountKey(2);
+    }
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "top",
+    title: '2x2布局'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-split-screen-compare-full"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(3);
+      setColCountKey(3);
+    }
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "top",
+    title: '3x3布局'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-all-full",
+    style: {
+      fontSize: 21
+    }
+  })))) : null));
+}
+
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };

package/dist/index.js

@@ -52,6 +52,9 @@ var ReactDOM = require('react-dom');
 require('antd/es/modal/style');
 var _Modal = require('antd/es/modal');
 var ProTable = require('@ant-design/pro-table');
+var Player = require('xgplayer');
+var FlvPlayer = require('xgplayer-flv.js');
+var HlsJsPlayer = require('xgplayer-hls.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -83,6 +86,9 @@ var _Breadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(_Breadcrumb);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var _Modal__default = /*#__PURE__*/_interopDefaultLegacy(_Modal);
 var ProTable__default = /*#__PURE__*/_interopDefaultLegacy(ProTable);
+var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
+var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
+var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -495,8 +501,8 @@ WButton.defaultProps = {};
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
- * @LastEditTime: 2021-09-09 15:57:23
- * @LastEditors: lijin
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
  * @Description:
  * @FilePath: \wargerm\src\IconFont\index.tsx
  * 可以输入预定的版权声明、个性签名、空行等
@@ -508,7 +514,7 @@ WButton.defaultProps = {};
 // <IconFont type='icon-demo' className='xxx-xxx' />
 
 var index = icons.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2720974_ec0fzxnc7ul.js'
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
 var WInput = function WInput(props) {
@@ -8567,7 +8573,7 @@ Table.defaultProps = {
 var _excluded$8 = ["height", "width", "count", "style", "numberStyle"],
     _excluded2$2 = ["count", "numberCount", "width", "height", "marginRight"];
 
-var Number = function Number(_ref) {
+var Number$1 = function Number(_ref) {
   var height = _ref.height,
       width = _ref.width,
       _ref$count = _ref.count,
@@ -8689,7 +8695,7 @@ var Number = function Number(_ref) {
   })))));
 };
 
-Number.defaultProps = {
+Number$1.defaultProps = {
   width: 28,
   height: 40
 };
@@ -8726,7 +8732,7 @@ var Index$7 = function Index(props) {
       display: 'flex'
     }
   }, numberList.map(function (res, index) {
-    return /*#__PURE__*/React__default['default'].createElement(Number, _objectSpread2({
+    return /*#__PURE__*/React__default['default'].createElement(Number$1, _objectSpread2({
       key: index,
       width: width,
       height: height,
@@ -8921,7 +8927,7 @@ var Index$9 = function Index(_ref) {
 
 var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
-SwiperCore__default['default'].use([SwiperCore.Pagination, SwiperCore.Navigation, SwiperCore.Autoplay]);
+SwiperCore__default['default'].use([SwiperCore.Pagination, SwiperCore.Navigation, SwiperCore.Autoplay, SwiperCore.Virtual]);
 
 var Index$a = function Index(props) {
   var data = props.data,
@@ -9610,9 +9616,9 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
+var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
-var Index$c = function Index(_ref) {
+var Index$c = function Index(_ref, ref) {
   var _classNames;
 
   var title = _ref.title,
@@ -9620,8 +9626,20 @@ var Index$c = function Index(_ref) {
       className = _ref$className === void 0 ? 'default' : _ref$className,
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
+      sliderTabs = _ref.sliderTabs,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
+  React.useImperativeHandle(ref, function () {
+    return {
+      activeTab: activeTab
+    };
+  });
+
+  var _useState = React.useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
     className: classnames__default['default']((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
   }, props), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -9636,10 +9654,20 @@ var Index$c = function Index(_ref) {
     className: "dot"
   }), title), headerCenter, headerTail), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "body"
-  }, props.children))));
+  }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
+  }, sliderTabs.tabs.map(function (item, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "tab ".concat(index == activeTab ? 'active' : '', "  ").concat(sliderTabs.tabClassName || '', "  ").concat(sliderTabs.activeTabClassName || '')
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      onClick: function onClick() {
+        return setActiveTab(index);
+      }
+    }, item));
+  }))));
 };
 
-Index$c.defaultProps = {};
+var index$1 = /*#__PURE__*/React.forwardRef(Index$c);
 
 var controlShow = function controlShow(f1, f2, value, timer) {
   f1(value);
@@ -10672,6 +10700,21 @@ var TabelCard = function TabelCard(props, ref) {
     actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : _actionRef$current7.reload();
   };
 
+  React.useEffect(function () {
+    var _searchFormRef$curren, _searchFormRef$curren2;
+
+    if ((_searchFormRef$curren = searchFormRef.current) === null || _searchFormRef$curren === void 0 ? void 0 : (_searchFormRef$curren2 = _searchFormRef$curren.form) === null || _searchFormRef$curren2 === void 0 ? void 0 : _searchFormRef$curren2.getFieldsValue) {
+      var _searchFormRef$curren3, _searchFormRef$curren4;
+
+      var obj = filterObj((_searchFormRef$curren3 = searchFormRef.current) === null || _searchFormRef$curren3 === void 0 ? void 0 : (_searchFormRef$curren4 = _searchFormRef$curren3.form) === null || _searchFormRef$curren4 === void 0 ? void 0 : _searchFormRef$curren4.getFieldsValue()) || {};
+      (columns || []).filter(function (c) {
+        return c.notInitialValueInSearch;
+      }).forEach(function (item) {
+        delete obj[item.dataIndex];
+      });
+      setFormSearch(obj);
+    }
+  }, [columns]);
   var formSearchColumn = columns || [];
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ModalForm$1, _objectSpread2(_objectSpread2({
     ref: modalFormRef,
@@ -10805,13 +10848,13 @@ var TabelCard = function TabelCard(props, ref) {
       return obj;
     }),
     search: false,
-    pagination: pagination || {
+    pagination: pagination !== null && pagination !== void 0 ? pagination : {
       pageSize: 20
     }
   }, extraProps)));
 };
 
-var index$1 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
+var index$2 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
 
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
@@ -10975,10 +11018,205 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
+var player = null;
+function Xgplay(_ref) {
+  var config = _ref.config,
+      type = _ref.type;
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    player = new HlsJsPlayer__default['default'](_objectSpread2({
+      el: ref.current,
+      width: '100%',
+      height: '100%',
+      autoplay: true,
+      isLive: true,
+      autoplayMuted: true
+    }, config));
+
+    if (type.indexOf('hls') !== -1) {
+      player = new HlsJsPlayer__default['default'](_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    } else if (type.indexOf('flv') !== -1) {
+      player = new FlvPlayer__default['default'](_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    } else if (type.indexOf('mp4') !== -1) {
+      player = new Player__default['default'](_objectSpread2({
+        el: ref.current,
+        width: '100%',
+        height: '100%',
+        autoplay: true,
+        isLive: true,
+        autoplayMuted: true
+      }, config));
+    }
+
+    return function () {
+      player = null;
+    };
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: ref,
+    style: {
+      overflow: 'hidden'
+    }
+  });
+}
+
+/*
+ * @Author: lijin
+ * @Date: 2021-08-04 16:24:47
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
+ * @Description:
+ * @FilePath: \wargerm\src\IconFont\index.tsx
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+// iconFontScriptUrl 修改成自己的iconfont图标项目地址
+// 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
+// 使用：
+// import IconFont from '@/components/IconFont';
+// <IconFont type='icon-demo' className='xxx-xxx' />
+
+var IconFont = icons.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
+});
+
+function VideoPlayer(_ref) {
+  var _ref$footer = _ref.footer,
+      footer = _ref$footer === void 0 ? true : _ref$footer,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {
+    width: 400,
+    height: 400
+  } : _ref$style,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? [] : _ref$url;
+
+  var _useState = React.useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      colCountKey = _useState2[0],
+      setColCountKey = _useState2[1];
+
+  var _useState3 = React.useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      colNumber = _useState4[0],
+      setColNumber = _useState4[1];
+
+  var domRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+
+  var renderDom = function renderDom() {
+    var arr = new Array(colCountKey * colNumber);
+    return arr.fill('').map(function (item, index) {
+      return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], {
+        span: 24 / colCountKey,
+        key: index,
+        className: "camera",
+        style: {
+          height: (Number(style.height) - 30) / colNumber
+        }
+      }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay, {
+        type: url[index],
+        config: _objectSpread2({
+          url: url[index]
+        }, config)
+      }) : /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "empty",
+        onDoubleClick: function onDoubleClick() {
+          var _domRef$current;
+
+          var fullscreenElement = document.fullscreenElement;
+          fullscreenElement ? exitFullscreen() : requestFullScreen(domRef === null || domRef === void 0 ? void 0 : (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.childNodes[index]);
+        }
+      }));
+    });
+  };
+
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+
+  function requestFullScreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } //FireFox
+    else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } //Chrome等
+    else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } //IE11
+    else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    }
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: style,
+    ref: contentRef
+  }, /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], {
+    ref: domRef
+  }, renderDom()), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "tools"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(1);
+      setColCountKey(1);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
+    placement: "top",
+    title: '1x1布局'
+  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
+    type: "icon-dantupailie"
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(2);
+      setColCountKey(2);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
+    placement: "top",
+    title: '2x2布局'
+  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
+    type: "icon-split-screen-compare-full"
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "btnbox",
+    onClick: function onClick() {
+      setColNumber(3);
+      setColCountKey(3);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
+    placement: "top",
+    title: '3x3布局'
+  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
+    type: "icon-all-full",
+    style: {
+      fontSize: 21
+    }
+  })))) : null));
+}
+
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
-exports.Card = Index$c;
+exports.Card = index$1;
 exports.Cascader = WCascader;
 exports.Checkbox = Index$3;
 exports.CountUp = Index$8;
@@ -10995,9 +11233,10 @@ exports.Radio = Index$2;
 exports.Select = Select;
 exports.Swiper = Index$a;
 exports.Switch = WSwitch;
-exports.TabelCard = index$1;
+exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
+exports.VideoPlayer = VideoPlayer;
 exports.WDatePicker = Index$5;
 exports.WForm = WForm$1;
 exports.WebsocketHeart = WebsocketHeart;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.8",
+  "version": "0.4.11",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -51,7 +51,12 @@
     "animate.css": "^4.1.1",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
-    "swiper": "^6.7.0"
+    "swiper": "^6.7.0",
+    "xgplayer": "^2.31.6",
+    "xgplayer-flv": "^2.5.1",
+    "xgplayer-flv.js": "^2.3.0",
+    "xgplayer-hls": "^2.5.2",
+    "xgplayer-hls.js": "^2.6.1"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.2.0",