@cloud-app-dev/vidc 2.2.0-alpha.7 → 3.0.0

package/.eslintignore

@@ -2,6 +2,4 @@
 .vscode/
 .cache/
 /node_modules/
-/umd/
-rollup.config.js
-/src/components/LoaderApp/importHtmlEntry
+/umd/

package/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

package/.prettierignore

@@ -5,3 +5,4 @@ package.json
 .umi
 .umi-production
 .umi-test
+.mfsu

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDA5NiIsImV4dCI6MTY1NTI1OTQ3OTYyNSwidWlkIjoiMTAxMDAzMDAwMDAzIiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDEwMDIwMDAwODNdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMTAwMDM1IiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjU0NjU0Njc5NjI1fQ.EE4w6MrRwc-iWpC9nSEmQylaqi-hhi-HAWH-VNBVAbk';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTA3ODE3NDEzOCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MDgxODk3NDEzOH0.5aCna8JWe8ynj9SXuXZ3TMDizpnK7WJFeAgJZhSsRvg';
 
 export default defineConfig({
   title: 'CloudApp VIDC',
@@ -32,68 +32,93 @@ export default defineConfig({
   },
   proxy: {
     '/api': {
-      target: 'http://192.168.100.9:2235',
+      target: 'https://jxsr-eye.antelopecloud.cn/',
       changeOrigin: true,
       onProxyReq(proxyReq: any) {
         proxyReq.setHeader('authorization', token);
       },
     },
   },
-  // mfsu: {
-  //   development: {
-  //     output: './.mfsu/dev',
-  //   },
-  //   production: {
-  //     output: './.mfsu/prod',
-  //   },
-  // },
+  mfsu: {
+    development: {
+      output: './.mfsu/dev',
+    },
+    production: undefined,
+  },
   scripts: ['//at.alicdn.com/t/font_1724012_972m5d05cou.js'],
   styles: [
     `:root{
-      --primary: rgba(18,122,255,1);
-      --primary-light: rgba(59,189,248,1);
-      --primary-dark: rgba(14,110,232,1);
-      --danger: rgba(222,0,0,1);
-      --danger-light: rgba(255,64,64,1);
-      --danger-dark: rgba(163,1,1,1);
-      --success: rgba(5,198,13,1);
-      --success-light: rgba(7,203,45,1);
-      --success-dark: rgba(1,146,27,1);
-      --link: rgba(22,134,229,1);
+      --primary: #248FFA;
+      --primary-light: #248FFA;
+      --primary-dark: #227BD5;
+      --secondary1: #6D8EFB;
+      --secondary1-light: #86A2FF;
+      --secondary1-dark: #5D7FF0;
+      --secondary2: #33AAFF;
+      --secondary2-light: #61BDFF;
+      --secondary2-dark: #2194E5;
+      --secondary3: #F3A75F;
+      --secondary3-light: #F8B578;
+      --secondary3-dark: #DC914C;
+      --danger: #F32D37;
+      --danger-light: #FF4D4F;
+      --danger-dark: #DC1B2A;
+      --warn: #FD8535;
+      --warn-light: #FF9F5E;
+      --warn-dark: #DC1B2A;
+      --success: #35BD77;
+      --success-light: #55C98D;
+      --success-dark: #21965A;
+      --gray1: #FFFFFF;
+      --gray2: #F3F3F3;
+      --gray3: #EEEEEE;
+      --gray4: #E7E7E7;
+      --gray5: #DCDCDC;
+      --gray6: #C5C5C5;
+      --gray7: #A6A6A6;
+      --gray8: #8B8B8B;
+      --gray9: #777777;
+      --gray10: #5E5E5E;
+      --gray11: #4B4B4B;
+      --gray12: #383838;
+      --background: #348fe2;
       --fs: 14px;
       --fs-small: 12px;
-      --fs-large: 14px;
-      --icon: rgba(98,112,139,1);
-      --disabled: rgba(153,153,153,1);
-      --bd-color: #dbe1ea;
+      --fs-large: 20px;
       --color: rgba(0,0,0,1);
       --color-dark: #000000;
       --color-light: rgba(102,102,102,1);
-      --sider-size: 330px;
-      --app-header-color: rgba(0,0,0,1);
-      --app-header-bg: rgba(255,255,255,1);
-      --nav-height: 68px;
-      --nav-bg: linear-gradient(135deg, #5390f0 0%, #488ef0 55%, #3364d2 100%);
-      --nav-sub-bg: #3e80dc;
+      --color-disabled: rgba(0,0,0,0.26);
+      --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
+      --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);
+      --shadow3: 2px 0 10px 0 rgba(0,0,0,0.06);
+      --radius1: 4px;
+      --radius2: 8px;
+      --radius3: 16px;
+      --header-color: #FFFFFF;
+      --header-bg: #348fe2;
+      --header-height: 66px;
+      --nav-height: 66px;
+      --nav-bg: #348fe2;
+      --nav-sub-bg: rgba(255,255,255,1);
       --nav-sub-bg2: rgba(241,244,247,0.8);
-      --nav-item-bg-selected: #86B7FF;
-      --nav-item-color: rgba(255,255,255,1);
-      --nav-item-color-selected: rgba(255,255,255,1);
-      --nav-sub-item-bg-selected: #75AAFB;
-      --nav-sub-item-color-selected: rgba(255,255,255,1);
-      --nav-sub-item-color: rgba(55,66,105,1);
-      --nav-bd-color: rgba(18,122,255,1);
-      --tab-height: 48px;
-      --tab-bg: #dbe1ea;
-      --tab-item-bg: #DADADA;
-      --tab-item-height: 32px;
-      --tab-item-color: rgba(72,83,108,1);
-      --tab-item-selected-bg: #f3f6f9;
-      --tab-item-selected-color: rgba(18,122,255,1);
-      --table-bg: #ffffff;
-      --table-head-bg: rgba(219,225,234,1);
-      --table-bd: rgba(245,245,245,1);
-      --table-row-hover-color: rgba(237,245,250,1);
+      --nav-item-bg-selected: #FFFFFF;
+      --nav-item-color: #FFFFFF;
+      --nav-icon-color: rgba(255, 255, 255, 0.4);
+      --nav-icon-color-selected: #3495EF;
+      --nav-item-bg: #348fe2;
+      --nav-item-color-selected: rgba(0, 0, 0, 0.9);
+      --nav-sub-item-bg-selected: #F3F5F6;
+      --nav-sub-item-color-selected: #348fe2;
+      --nav-sub-item-color: rgba(0, 0, 0, 0.9);
+      --nav-bd-color: rgba(0,0,0,0);
+      --tab-height: 34px;
+      --tab-bg: #348fe2;
+      --tab-item-bg: #348fe2;
+      --tab-item-height: 34px;
+      --tab-item-color: #FFFFFF;
+      --tab-item-selected-bg: #F3F5F6;
+      --tab-item-selected-color: rgba(0, 0, 0, 0.9);
       --drawer-title-height: 48px;
       --drawer-title-bg: rgba(255,255,255,1);
       --drawer-divider-color: rgba(219,225,234,1);
@@ -114,38 +139,13 @@ export default defineConfig({
       --card-bd-color: rgba(219,225,234,1);
       --card-hover-bd-color: rgba(18,122,255,1);
       --card-footer-bg: rgba(219,225,234,1);
-      --content-box-bg: rgba(240,242,245,1);
-      --content-two-column-box-left-bg: rgba(255,255,255,1);
-      --content-two-column-box-right-bg: #f0f2f5;
-      --content-two-column-box-color: rgba(51,51,51,1);
-      --content-info-box-bg: rgba(255,255,255,1);
-      --content-info-box-bd-color: #dbe1ea;
-      --content-info-box-title-bg: rgba(0,0,0,0);
-      --content-info-box-title-bd: rgba(0,0,0,0);
-      --content-info-box-title-height: 40px;
-      --content-list-box-bg: rgba(255,255,255,1);
-      --content-list-box-bd-color: rgba(219,225,234,1);
-      --content-list-box-title-bg: rgba(229,235,241,1);
-      --content-list-box-title-bd: rgba(219,225,234,1);
-      --content-list-box-title-height: 40px;
-      --content-tools-box-bg: rgba(255,255,255,1);
-      --form-redius: 0px;
-      --form-bg: rgba(255,255,255,1);
-      --form-bd: rgba(181,190,207,1);
-      --form-bg-dark: rgba(240,244,245,1);
-      --form-bg-light: rgba(217,223,229,1);
-      --form-divider-color: rgba(219,225,234,1);
+      --content-bg: #ffffff;
       --scrollbar-width: 8px;
       --scrollbar-track-bg: rgba(239,241,244,1);
       --scrollbar-thumb-bg: rgba(185,193,203,1);
       --scrollbar-thumb-hover-bg: rgba(195,209,229,1);
       --scrollbar-track-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.1) inset;
       --scrollbar-thumb-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset;
-      --force-place: rgba(255,187,34,1);
-      --force-device: rgba(185,181,255,1);
-      --force-person: rgba(34,153,255,1);
-      --force-nonVehicle: rgba(255,131,125,1);
-      --force-vehicle: rgba(20,204,143,1);
     }
   `,
   ],

package/es/AppContext/Sync.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { AppContextInterface } from './interface';
+import { AppContextInterface, AppStoreType } from './interface';
 interface ISyncProps {
     stateChange: (options: AppContextInterface) => void;
+    storeChange: (store: AppStoreType) => void;
 }
-declare function Sync({ stateChange }: ISyncProps): JSX.Element;
+declare function Sync({ stateChange, storeChange }: ISyncProps): JSX.Element;
 export default Sync;

package/es/AppContext/Sync.js

@@ -1,9 +1,10 @@
 import _SocketEmitter from "@cloud-app-dev/utils/es/SocketEmitter";
 import React, { useEffect } from 'react';
-import { _LOGIN_STATUS_EVENT_CHANGE_, _OPERATION_EVENT_CHANGE_, _USER_EVENT_CHANGE_ } from './static';
+import { _LOGIN_STATUS_EVENT_CHANGE_, _OPERATION_EVENT_CHANGE_, _USER_EVENT_CHANGE_, _STORE_EVENT_CHANGE_ } from './static';
 
 function Sync(_ref) {
-  var stateChange = _ref.stateChange;
+  var stateChange = _ref.stateChange,
+      storeChange = _ref.storeChange;
 
   /**
    * @description 用户微应用之间的状态同步
@@ -27,18 +28,26 @@ function Sync(_ref) {
       });
     };
 
+    var storeFn = function storeFn(store) {
+      return storeChange(store);
+    };
+
     _SocketEmitter.on(_USER_EVENT_CHANGE_, userFn);
 
     _SocketEmitter.on(_OPERATION_EVENT_CHANGE_, operationFn);
 
     _SocketEmitter.on(_LOGIN_STATUS_EVENT_CHANGE_, statusFn);
 
+    _SocketEmitter.on(_STORE_EVENT_CHANGE_, storeFn);
+
     return function () {
       _SocketEmitter.off(_USER_EVENT_CHANGE_, userFn);
 
       _SocketEmitter.off(_OPERATION_EVENT_CHANGE_, operationFn);
 
       _SocketEmitter.off(_LOGIN_STATUS_EVENT_CHANGE_, statusFn);
+
+      _SocketEmitter.off(_STORE_EVENT_CHANGE_, storeFn);
     };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null);

package/es/AppContext/index.js

@@ -17,12 +17,15 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useCallback, useMemo, useState } from 'react';
 import Sync from './Sync';
 import * as Static from './static';
+import { isEmpty } from 'lodash-es';
 var _USER_SESSION_ = Static._USER_SESSION_,
     _OPERATION_SESSION_ = Static._OPERATION_SESSION_,
     _LOGIN_STATUS_SESSION_ = Static._LOGIN_STATUS_SESSION_,
     _USER_EVENT_CHANGE_ = Static._USER_EVENT_CHANGE_,
     _OPERATION_EVENT_CHANGE_ = Static._OPERATION_EVENT_CHANGE_,
-    _LOGIN_STATUS_EVENT_CHANGE_ = Static._LOGIN_STATUS_EVENT_CHANGE_;
+    _LOGIN_STATUS_EVENT_CHANGE_ = Static._LOGIN_STATUS_EVENT_CHANGE_,
+    _STORE_SESSION_ = Static._STORE_SESSION_,
+    _STORE_EVENT_CHANGE_ = Static._STORE_EVENT_CHANGE_;
 var Context = /*#__PURE__*/React.createContext(null);
 
 function Provider(_ref) {
@@ -31,7 +34,8 @@ function Provider(_ref) {
   var _useState = useState({
     user: _cache.getCache(_USER_SESSION_, 'session') || {},
     operation: _cache.getCache(_OPERATION_SESSION_, 'session') || {},
-    loginStatus: _cache.getCache(_LOGIN_STATUS_SESSION_, 'session') || false
+    loginStatus: _cache.getCache(_LOGIN_STATUS_SESSION_, 'session') || false,
+    store: _cache.getCache(_STORE_SESSION_, 'session') || {}
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -51,7 +55,7 @@ function Provider(_ref) {
 
       _cache.setCache(_USER_SESSION_, newUser, 'session');
 
-      console.warn('AppContext updateUser is run !', user);
+      console.info('AppContext updateUser is run !', user);
     });
   }
 
@@ -69,15 +73,19 @@ function Provider(_ref) {
 
       _cache.setCache(_OPERATION_SESSION_, newOperation, 'session');
 
-      console.warn('AppContext updateOperation is run !', operation);
+      console.info('AppContext updateOperation is run !', operation);
     });
   }
 
   function updateLoginStatus(status) {
+    if (typeof status !== 'boolean') {
+      throw new Error('status type is boolean ！');
+    }
+
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return status !== old.loginStatus ? Object.assign(Object.assign({}, old), {
         loginStatus: status
-      });
+      }) : old;
     });
 
     _nextTick(function () {
@@ -85,7 +93,43 @@ function Provider(_ref) {
 
       _cache.setCache(_LOGIN_STATUS_SESSION_, status, 'session');
 
-      console.warn('AppContext updateLoginStatus is run !', status);
+      console.info('AppContext updateLoginStatus is run !', status);
+    });
+  }
+  /**
+   * @desc 用于全局自定义状态存储，依赖sessionStorage持久化能力，不建议存储大数据量
+   * @param data
+   */
+
+
+  function updateStore() {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    setState(function (old) {
+      var newData = {}; //获取变更项
+
+      for (var key in data) {
+        if (data[key] !== old.store[key]) {
+          newData[key] = data[key];
+        }
+      }
+
+      if (isEmpty(newData)) {
+        return old;
+      }
+
+      var newStore = Object.assign(Object.assign({}, old.store), newData);
+
+      _cache.setCache(_STORE_SESSION_, newStore, 'session');
+
+      return Object.assign(Object.assign({}, old), {
+        store: newStore
+      });
+    });
+
+    _nextTick(function () {
+      _SocketEmitter.emit(_STORE_EVENT_CHANGE_, data);
+
+      console.info('AppContext updateStore is run !', data);
     });
   }
 
@@ -94,20 +138,30 @@ function Provider(_ref) {
       return Object.assign(Object.assign({}, old), options);
     });
   }, []);
+  var storeChange = useCallback(function (store) {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        store: Object.assign(Object.assign({}, old.store), store)
+      });
+    });
+  }, []);
   var providerValue = useMemo(function () {
     return {
       user: state.user,
       operation: state.operation,
       loginStatus: state.loginStatus,
+      store: state.store,
       updateUser: updateUser,
       updateOperation: updateOperation,
-      updateLoginStatus: updateLoginStatus
+      updateLoginStatus: updateLoginStatus,
+      updateStore: updateStore
     };
   }, [state.user, state.operation, state.loginStatus]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: providerValue
   }, children, /*#__PURE__*/React.createElement(Sync, {
-    stateChange: stateChange
+    stateChange: stateChange,
+    storeChange: storeChange
   }));
 }
 

package/es/AppContext/interface.d.ts

@@ -22,11 +22,20 @@ export type OperationInfoType = {
   [key: string]: any;
 };
 
-export interface AppContextInterface {
+export type AppStoreType = {
+  [key: string]: any;
+};
+
+export interface IProviderState {
   user: UserInfoType;
   operation: OperationInfoType;
   loginStatus: boolean;
+  store: AppStoreType;
+}
+
+export interface AppContextInterface extends IProviderState {
   updateUser: (user: UserInfoType) => void;
   updateOperation: (user: OperationInfoType) => void;
   updateLoginStatus: (status: boolean) => void;
+  updateStore: (data: { [key: string]: any }) => void;
 }

package/es/AppContext/static.d.ts

@@ -1,6 +1,8 @@
 export declare const _USER_EVENT_CHANGE_ = "_USER_EVENT_CHANGE_";
 export declare const _OPERATION_EVENT_CHANGE_ = "_OPERATION_EVENT_CHANGE_";
 export declare const _LOGIN_STATUS_EVENT_CHANGE_ = "_LOGIN_STATUS_EVENT_CHANGE_";
+export declare const _STORE_EVENT_CHANGE_ = "_STORE_EVENT_CHANGE_";
 export declare const _USER_SESSION_ = "_USER_SESSION_";
 export declare const _OPERATION_SESSION_ = "_OPERATION_SESSION_";
 export declare const _LOGIN_STATUS_SESSION_ = "_LOGIN_STATUS_SESSION_";
+export declare const _STORE_SESSION_ = "_STORE_SESSION_";

package/es/AppContext/static.js

@@ -4,8 +4,12 @@ export var _OPERATION_EVENT_CHANGE_ = '_OPERATION_EVENT_CHANGE_'; //应用系统
 
 export var _LOGIN_STATUS_EVENT_CHANGE_ = '_LOGIN_STATUS_EVENT_CHANGE_'; //登录状态变化
 
+export var _STORE_EVENT_CHANGE_ = '_STORE_EVENT_CHANGE_'; //登录状态变化
+
 export var _USER_SESSION_ = '_USER_SESSION_'; //用户信息 缓存key
 
 export var _OPERATION_SESSION_ = '_OPERATION_SESSION_'; //应用系统信息 缓存key
 
-export var _LOGIN_STATUS_SESSION_ = '_LOGIN_STATUS_SESSION_'; //登录状态 缓存key
+export var _LOGIN_STATUS_SESSION_ = '_LOGIN_STATUS_SESSION_'; //登录状态 缓存key
+
+export var _STORE_SESSION_ = '_STORE_SESSION_'; //登录状态 缓存key

package/es/Box/InfoBox/index.css

@@ -5,11 +5,10 @@
   flex-direction: column;
 }
 .info-box-layout .info-box-title-wrapper {
-  background-color: var(--content-info-box-title-bg);
-  border: 1px solid var(--content-info-box-title-bd);
+  background-color: var(--gray2);
+  border: 1px solid var(--gray3);
   border-bottom: none;
-  height: var(--content-info-box-title-height);
-  line-height: var(--content-info-box-title-height);
+  height: 3em;
   min-height: max-content;
   display: flex;
   align-items: center;
@@ -17,7 +16,7 @@
   font-weight: 700;
 }
 .info-box-layout .info-box-content-wrapper {
-  background-color: var(--content-info-box-bg);
-  border: 1px solid var(--content-info-box-bd-color);
+  background-color: var(--gray1);
+  border: 1px solid var(--gray3);
   flex: 1;
 }

package/es/Box/TwoColumnBox/index.css

@@ -2,11 +2,11 @@
   width: 100%;
   height: 100%;
   position: relative;
-  color: var(--content-two-column-box-color);
+  color: var(--color1);
 }
 .two-column-layout-container .two-column-aside {
   transition: width 0.1s ease-in;
-  width: var(--sider-size);
+  width: 30%;
   height: 100%;
   z-index: 9;
   position: absolute;
@@ -20,45 +20,38 @@
   overflow: hidden;
 }
 .two-column-layout-container .two-column-aside .two-colum-left-content {
-  width: var(--sider-size);
+  width: 100%;
   height: 100%;
-  background-color: var(--content-two-column-box-left-bg);
+  background-color: var(--gray1);
 }
 .two-column-layout-container .two-column-aside .left-aside-slider-btn {
   position: absolute;
-  width: 16px;
+  width: 8px;
   height: 20px;
-  right: -16px;
+  right: -8px;
   top: 50%;
   margin-top: -8px;
   font-size: var(--fs-large);
+  background-color: var(--gray5);
   cursor: pointer;
-  background-color: red;
-}
-.two-column-layout-container .two-column-aside .left-aside-slider-btn .anticon {
-  background: var(--content-two-column-box-left-bg);
-  vertical-align: unset;
-  position: relative;
-  z-index: 3;
+  z-index: 9;
 }
 .two-column-layout-container .two-column-aside .left-aside-slider-btn:before,
 .two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
   content: '';
-  width: 100%;
-  height: 100%;
+  width: 1px;
+  height: 16px;
   z-index: 2;
-  background-color: var(--content-two-column-box-left-bg);
+  background-color: var(--gray1);
   position: absolute;
 }
 .two-column-layout-container .two-column-aside .left-aside-slider-btn:before {
-  left: 0;
-  bottom: -10px;
-  transform: skewY(-20deg);
+  left: 2px;
+  bottom: 2px;
 }
 .two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
-  right: 0;
-  top: -10px;
-  transform: skewY(20deg);
+  right: 2px;
+  top: 2px;
 }
 .two-column-layout-container .two-column-aside.hide-left-aside {
   width: 0;
@@ -70,8 +63,8 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  padding-left: var(--sider-size);
-  background-color: var(--content-two-column-box-right-bg);
+  padding-left: 30%;
+  background-color: var(--gray2);
   transition: padding-left 0.3s ease-in-out;
   box-sizing: border-box;
 }

package/es/Box/TwoColumnBox/index.js

@@ -11,7 +11,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import IconFont from '../../IconFont';
 import "./index.css";
 
 function TwoColumnBox(_ref) {
@@ -40,9 +39,7 @@ function TwoColumnBox(_ref) {
       return setCollapsed(!collapsed);
     },
     className: "left-aside-slider-btn"
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: collapsed ? 'icon-S_Arrow_SmallRight' : 'icon-S_Arrow_SmallLeft'
-  }))))), /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "two-column-content"
   }, children));
 }

package/es/Box/index.css

@@ -1,7 +1,7 @@
 .single-column-layout-container {
   width: 100%;
   height: 100%;
-  background-color: var(--content-box-bg);
+  background-color: var(--gray1);
 }
 .single-column-layout-container .single-column-content {
   margin: 0 auto;

package/es/Config/interface.d.ts

@@ -7,8 +7,9 @@ export type AppItemType = {
   icon: string;
   name: string;
   ext?: any;
+  html: string;
+  devHtml?: string;
 };
-
 export type FeatureItemType = {
   id: string;
   appId: string;

package/es/ConfigContext/index.d.ts

@@ -6,7 +6,7 @@ export interface IConfigContextProps {
     root: HTMLElement;
 }
 interface IProviderProps {
-    getContainer: () => HTMLElement;
+    getContainer?: () => HTMLElement;
     children: React.ReactNode;
 }
 declare function Provider({ getContainer, children }: IProviderProps): JSX.Element;

package/es/DomMove/demo.d.ts

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

package/es/DomMove/demo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import DomMove from './index';
+export default function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 800
+    }
+  }, /*#__PURE__*/React.createElement(DomMove, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 30,
+      height: 30,
+      background: 'red'
+    }
+  })));
+}

package/es/DomMove/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PositionType, SizeType } from '../Picture/interface';
+interface IDomMoveProps {
+    children: React.ReactNode;
+    onDrag?: (e: MouseEvent, position: PositionType) => void;
+    onDragChange?: (position: PositionType) => void;
+    onDragEnd?: (e: MouseEvent, position: PositionType) => void;
+    position?: PositionType;
+    size?: SizeType;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    forwordRef?: React.MutableRefObject<any>;
+}
+declare const _default: React.ForwardRefExoticComponent<IDomMoveProps & React.RefAttributes<unknown>>;
+export default _default;