@cloud-app-dev/vidc 2.2.0-alpha.8 → 3.0.1

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/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;

package/es/DomMove/index.js

@@ -0,0 +1,145 @@
+import _useEventListener from "ahooks/es/useEventListener";
+import _useUpdate from "ahooks/es/useUpdate";
+import _useSize from "ahooks/es/useSize";
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { getPosition, getMouseXY } from './utils';
+
+function DomMove(_ref) {
+  var onDrag = _ref.onDrag,
+      position = _ref.position,
+      className = _ref.className,
+      size = _ref.size,
+      children = _ref.children,
+      onDragChange = _ref.onDragChange,
+      onDragEnd = _ref.onDragEnd,
+      forwordRef = _ref.forwordRef;
+  var dragRef = useRef(null);
+  var ref = useRef({
+    position: {
+      x: 0,
+      y: 0
+    },
+    DA: {
+      x: 0,
+      y: 0
+    },
+    isDrag: false,
+    deviation: {
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    }
+  });
+  var reSize = _useSize(dragRef) || {};
+
+  var update = _useUpdate();
+
+  var updatePosition = function updatePosition(_ref2) {
+    var x = _ref2.x,
+        y = _ref2.y;
+    ref.current.position = {
+      x: x,
+      y: y
+    };
+    update();
+    onDragChange && onDragChange({
+      x: x,
+      y: y
+    });
+  };
+
+  useEffect(function () {
+    var offset = getPosition(dragRef === null || dragRef === void 0 ? void 0 : dragRef.current);
+    ref.current.deviation = {
+      offsetX: offset.left,
+      offsetY: offset.top,
+      width: reSize.width,
+      height: reSize.height
+    };
+  }, [reSize.width, reSize.height]);
+  useImperativeHandle(forwordRef, function () {
+    return {
+      updatePosition: updatePosition
+    };
+  }, []);
+
+  _useEventListener('mousemove', function (event) {
+    if (ref.current.isDrag) {
+      // let maxX, maxY;
+      var moveX, moveY;
+
+      var _getMouseXY = getMouseXY(event),
+          _x = _getMouseXY.x,
+          _y = _getMouseXY.y;
+
+      moveX = _x - ref.current.deviation.offsetX;
+      moveY = _y - ref.current.deviation.offsetY; // 计算可移动位置的大小， 保证元素不会超过可移动范围
+      // maxX = document.documentElement.clientWidth - this.deviation.width;
+      // maxY = document.documentElement.clientHeight - this.deviation.height;
+      // min方法保证不会超过右边界，max保证不会超过左边界
+      // moveX = Math.min(Math.max(0, moveX), maxX);
+      // moveY = Math.min(Math.max(0, moveY), maxY);
+
+      var _position = {
+        x: moveX,
+        y: moveY
+      };
+      onDrag ? onDrag(event, _position) : updatePosition(_position);
+    }
+  }, {
+    target: document.body
+  });
+
+  _useEventListener('mouseup', function (event) {
+    ref.current.isDrag = false;
+    onDragEnd && onDragEnd(event, ref.current.position);
+  }, {
+    target: document.body
+  });
+
+  _useEventListener('mousedown', function (event) {
+    var _getMouseXY2 = getMouseXY(event),
+        x = _getMouseXY2.x,
+        y = _getMouseXY2.y;
+
+    ref.current.deviation.offsetX = x - ref.current.position.x;
+    ref.current.deviation.offsetY = y - ref.current.position.y;
+    ref.current.isDrag = true;
+  }, {
+    target: dragRef
+  });
+
+  var _ref3 = onDrag ? {
+    x: position.x,
+    y: position.y
+  } : {
+    x: ref.current.position.x,
+    y: ref.current.position.y
+  },
+      x = _ref3.x,
+      y = _ref3.y;
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragRef,
+    className: "drag-move-Content ".concat(className),
+    style: {
+      transform: "translate(".concat(x, "px,").concat(y, "px)"),
+      width: size.width,
+      height: size.height
+    }
+  }, children);
+}
+
+DomMove.defaultProps = {
+  className: '',
+  size: {
+    width: '100%',
+    height: '100%'
+  }
+};
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DomMove, Object.assign({}, props, {
+    forwordRef: ref
+  }));
+});

package/es/DomMove/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function getPosition(obj: any): {
+    left: any;
+    top: any;
+};
+export declare function getMouseXY(e: MouseEvent): {
+    x: number;
+    y: number;
+};

package/es/{Picture/component/MoveContent → DomMove}/utils.js

@@ -16,4 +16,23 @@ export function getPosition(obj) {
     left: l,
     top: t
   };
+} // 函数用于获取鼠标的位置
+
+export function getMouseXY(e) {
+  var x = 0,
+      y = 0;
+  e = e || window.event;
+
+  if (e.pageX) {
+    x = e.pageX;
+    y = e.pageY;
+  } else {
+    x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
+    y = e.clientY + document.body.scrollTop - document.body.clientTop;
+  }
+
+  return {
+    x: x,
+    y: y
+  };
 }

package/es/Drawer/index.d.ts

@@ -1,7 +1,7 @@
-import { DrawerProps } from './interface';
+import { IDrawerProps } from './interface';
 import React from 'react';
 import './index.less';
-declare function Drawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: DrawerProps): JSX.Element;
+declare function Drawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: IDrawerProps): JSX.Element;
 declare namespace Drawer {
     var defaultProps: {
         getContainer: boolean;