@cloud-app-dev/vidc 3.1.0 → 3.1.2

package/es/Modal/index.d.ts

@@ -1,7 +1,7 @@
-import { ModalProps } from './interface';
+import { IModalProps } from './interface';
 import React from 'react';
 import './index.less';
-declare function Modal({ children, className, style, getContainer, ...props }: ModalProps): JSX.Element;
+declare function Modal({ children, className, style, getContainer, ...props }: IModalProps): JSX.Element;
 declare namespace Modal {
     var defaultProps: {
         className: string;

package/es/Modal/index.js

@@ -19,7 +19,6 @@ import { __rest } from "tslib";
 import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import CC from '../ConfigContext';
-import ConfigContext from '../ConfigContext';
 import "./index.css";
 
 function Modal(_a) {
@@ -88,7 +87,7 @@ function useModal() {
     }, /*#__PURE__*/React.createElement(Modal, {
       okText: "\u786E\u5B9A",
       cancelText: "\u53D6\u6D88",
-      visible: state.visible,
+      open: state.visible,
       onOk: state.onOk,
       onCancel: close,
       destroyOnClose: true,
@@ -122,11 +121,6 @@ function useModal() {
 }
 
 var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
-  var context = useContext(ConfigContext.Context);
-  var root = useMemo(function () {
-    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
-  }, [context === null || context === void 0 ? void 0 : context.root]);
-
   var _useState3 = useState({
     content: null,
     visible: false,
@@ -165,16 +159,13 @@ var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
   return /*#__PURE__*/React.createElement(Modal, {
     okText: "\u786E\u5B9A",
     cancelText: "\u53D6\u6D88",
-    visible: state.visible,
+    open: state.visible,
     onOk: state.onOk,
     onCancel: close,
     destroyOnClose: true,
     title: state.title,
     width: state.width,
-    className: state.className,
-    getContainer: function getContainer() {
-      return root;
-    }
+    className: state.className
   }, state.content);
 });
 Modal.info = _Modal.info;

package/es/Modal/interface.d.ts

@@ -1,326 +1,10 @@
+import { ModalProps, ModalFuncProps } from 'antd/lib/modal/Modal';
 import * as React from 'react';
 
 declare type getContainerFunc = () => HTMLElement;
 
-export interface ModalProps {
-  /**
-   * @description 对话框是否可见
-   * @default -
-   */
-  visible?: boolean;
-
-  /**
-   * @description 确定按钮 loading
-   * @default false
-   */
-  confirmLoading?: boolean;
-
-  /**
-   * @description 标题
-   * @default -
-   */
-  title?: React.ReactNode | string;
-
-  /**
-   * @description 是否显示右上角的关闭按钮
-   * @default true
-   */
-  closable?: boolean;
-
-  /**
-   * @description 点击确定回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onOk?: (e: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * @description 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * @description 点Modal 完全关闭后的回调
-   * @type function
-   * @default -
-   */
-  afterClose?: () => void;
-
-  /**
-   * @description 垂直居中展示 Modal
-   * @default false
-   */
-  centered?: boolean;
-
-  /**
-   * @description 宽度
-   * @default 416
-   */
-  width?: string | number;
-
-  /**
-   * @description 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
-   * @default (确定取消按钮)
-   */
-  footer?: React.ReactNode;
-
-  /**
-   * @description 确认按钮文字
-   * @default 确定
-   */
-  okText?: React.ReactNode;
-
-  /**
-   * @description 确认按钮类型
-   * @default primary
-   */
-  okType?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
-
-  /**
-   * @description 取消按钮文字
-   * @default 取消
-   */
-  cancelText?: React.ReactNode;
-
-  /**
-   * @description 点击蒙层是否允许关闭
-   * @default true
-   */
-  maskClosable?: boolean;
-
-  /**
-   * @description 强制渲染 Modal
-   * @default false
-   */
-  forceRender?: boolean;
-
-  /**
-   * @description 确认按钮props
-   * @type Object
-   * @default -
-   */
-  okButtonProps?: any;
-
-  /**
-   * @description 取消按钮props
-   * @type Object
-   * @default -
-   */
-  cancelButtonProps?: any;
-
-  /**
-   * @description 关闭时销毁 Modal 里的子元素
-   * @default false
-   */
-  destroyOnClose?: boolean;
-
-  /**
-   * @description 可用于设置浮层的样式，调整浮层位置等
-   * @default -
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * @description 对话框外层容器的类名
-   * @default -
-   */
-  wrapClassName?: string;
-
-  /**
-   * @description mask动画
-   * @default -
-   */
-  maskTransitionName?: string;
-
-  /**
-   * @description 动画
-   * @default -
-   */
-  transitionName?: string;
-
-  /**
-   * @description 容器类名
-   * @default -
-   */
-  className?: string;
-
-  /**
-   * @description 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom
-   * @default body
-   */
-  getContainer?: string | HTMLElement | getContainerFunc | false | null;
-
-  /**
-   * @description 设置 Modal 的 z-index
-   * @default 1000
-   */
-  zIndex?: number;
-
-  /**
-   * @description Modal body 样式
-   * @default -
-   */
-  bodyStyle?: React.CSSProperties;
-
-  /**
-   * @description 遮罩样式
-   * @default -
-   */
-  maskStyle?: React.CSSProperties;
-
-  /**
-   * @description 是否展示遮罩
-   * @default true
-   */
-  mask?: boolean;
-
-  /**
-   * @description 是否支持键盘 esc 关闭
-   * @default true
-   */
-  keyboard?: boolean;
-
-  /**
-   * @description 自定义关闭图标
-   * @default -
-   */
-  closeIcon?: React.ReactNode;
-
-  children: React.ReactNode;
-}
-export interface ModalFuncProps {
-  /**
-   * @description 容器类名
-   * @default -
-   */
-  className?: string;
-
-  /**
-   * @description 标题
-   * @default -
-   */
-  title?: React.ReactNode;
-
-  /**
-   * @description 内容
-   * @default -
-   */
-  content?: React.ReactNode;
-
-  /**
-   * @description 点击确定回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onOk?: (...args: any[]) => any;
-
-  /**
-   * @description 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onCancel?: (...args: any[]) => any;
-
-  /**
-   * @description 确认按钮props(antd ButtonProps)
-   * @type Object
-   * @default -
-   */
-  okButtonProps?: any;
-
-  /**
-   * @description 取消按钮props(antd ButtonProps)
-   * @type Object
-   * @default -
-   */
-  cancelButtonProps?: any;
-
-  /**
-   * @description 垂直居中展示 Modal
-   * @default false
-   */
-  centered?: boolean;
-
-  /**
-   * @description 宽度
-   * @default 416
-   */
-  width?: string | number;
-
-  /**
-   * @description 确认按钮文字
-   * @default 确定
-   */
-  okText?: React.ReactNode;
-
-  /**
-   * @description 确认按钮类型
-   * @default primary
-   */
-  okType?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
-
-  /**
-   * @description 取消按钮文字
-   * @default 取消
-   */
-  cancelText?: React.ReactNode;
-
-  /**
-   * @description 自定义图标
-   * @default <QuestionCircle />
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * @description 是否展示遮罩
-   * @default true
-   */
-  mask?: boolean;
-
-  /**
-   * @description 点击蒙层是否允许关闭
-   * @default true
-   */
-  maskClosable?: boolean;
-
-  /**
-   * @description 设置 Modal 的 z-index
-   * @default 1000
-   */
-  zIndex?: number;
-
-  /**
-   * @description 用于设置浮层的样式，调整浮层位置等
-   * @default -
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * @description 遮罩样式
-   * @default -
-   */
-  maskStyle?: React.CSSProperties;
-
-  /**
-   * @description 是否支持键盘 esc 关闭
-   * @default true
-   */
-  keyboard?: boolean;
-
-  /**
-   * @description 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom
-   * @default body
-   */
-  getContainer?: string | HTMLElement | getContainerFunc | false | null;
-
-  /**
-   * @description 指定自动获得焦点的按钮
-   * @default ok
-   */
-  autoFocusButton?: null | 'ok' | 'cancel';
-}
+export interface IModalProps extends ModalProps {}
+export interface IModalFuncProps extends ModalFuncProps {}
 export declare type ModalFunc = (props: ModalFuncProps) => {
   destroy: () => void;
   update: (newConfig: ModalFuncProps) => void;

package/es/ThemeAntd/demo.css

@@ -0,0 +1,16 @@
+.theme-antd-demo {
+  color: #fff;
+  background-color: #0f2e61;
+  padding: 40px;
+  --form-bg: #1d4788;
+  --form-bd: rgba(255, 255, 255, 0.3);
+  --form-active-bg: #e8b127;
+  --table-bg: #0f2e61;
+  --table-bd: rgba(255, 255, 255, 0.3);
+  --table-head-bg: #1d4788;
+  --table-row-hover-color: #1d4788;
+  --radius1: 4px;
+}
+.theme-antd-demo a {
+  color: inherit;
+}

package/es/ThemeAntd/demo.d.ts

@@ -1,2 +1,3 @@
+import './demo.less';
 declare const App: () => JSX.Element;
 export default App;

package/es/ThemeAntd/demo.js

@@ -1,3 +1,5 @@
+import "antd/lib/table/style";
+import _Table from "antd/lib/table";
 import "antd/lib/button/style";
 import _Button from "antd/lib/button";
 import "antd/lib/pagination/style";
@@ -16,13 +18,18 @@ import "antd/lib/input/style";
 import _Input from "antd/lib/input";
 import "antd/lib/config-provider/style";
 import _ConfigProvider from "antd/lib/config-provider";
-import React from 'react';
+import React, { useRef } from 'react';
 import ThemeAntd from '.';
+import "./demo.css";
 
 var App = function App() {
+  var ref = useRef();
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: "cloudapp"
-  }, /*#__PURE__*/React.createElement(ThemeAntd, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input, {
+  }, /*#__PURE__*/React.createElement(ThemeAntd, null, /*#__PURE__*/React.createElement("div", {
+    className: "theme-antd-demo",
+    ref: ref
+  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input, {
     placeholder: "\u6587\u672C\u8F93\u5165",
     prefix: /*#__PURE__*/React.createElement("div", null, "111"),
     suffix: /*#__PURE__*/React.createElement("div", null, "2222")
@@ -33,7 +40,10 @@ var App = function App() {
   })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input.TextArea, {
     placeholder: "\u591A\u884C\u6587\u672C\u8F93\u5165"
   })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Select, {
-    placeholder: "\u9009\u62E9\u8F93\u5165"
+    placeholder: "\u9009\u62E9\u8F93\u5165",
+    getPopupContainer: function getPopupContainer() {
+      return ref.current;
+    }
   }, /*#__PURE__*/React.createElement(_Select.Option, {
     value: 1
   }, "\u9009\u98791"), /*#__PURE__*/React.createElement(_Select.Option, {
@@ -46,7 +56,15 @@ var App = function App() {
     value: 1
   }, "\u9009\u98791"), /*#__PURE__*/React.createElement(_Checkbox, {
     value: 2
-  }, "\u9009\u98792"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker, null)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker.RangePicker, null)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Pagination, {
+  }, "\u9009\u98792"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker, {
+    getPopupContainer: function getPopupContainer() {
+      return ref.current;
+    }
+  })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker.RangePicker, {
+    getPopupContainer: function getPopupContainer() {
+      return ref.current;
+    }
+  })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Pagination, {
     total: 100
   })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Button, null, "\u6309\u94AE1"), /*#__PURE__*/React.createElement("span", {
     style: {
@@ -54,7 +72,31 @@ var App = function App() {
     }
   }), /*#__PURE__*/React.createElement(_Button, {
     type: "primary"
-  }, "\u6309\u94AE2")))));
+  }, "\u6309\u94AE2")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Table, {
+    columns: [{
+      title: '姓名',
+      dataIndex: 'name'
+    }, {
+      title: '年龄',
+      dataIndex: 'age'
+    }, {
+      title: '性别',
+      dataIndex: 'sex'
+    }],
+    dataSource: [{
+      name: '张三',
+      sex: '男',
+      age: 20
+    }, {
+      name: '李四',
+      sex: '男',
+      age: 20
+    }, {
+      name: '王五',
+      sex: '男',
+      age: 20
+    }]
+  })))));
 };
 
 export default App;

package/es/ThemeAntd/index.css

@@ -1,5 +1,5 @@
 div .cloudapp-btn {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
 }
 div .cloudapp-btn:hover,
 div .cloudapp-btn:focus {
@@ -52,7 +52,7 @@ div .cloudapp-checkbox-checked .cloudapp-checkbox-inner {
   background-color: var(--form-active-bg);
 }
 div .cloudapp-checkbox-inner {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
@@ -84,7 +84,7 @@ div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner {
 }
 div .cloudapp-tree-checkbox-inner {
   border-color: var(--form-bd);
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
 }
 div .cloudapp-tree-checkbox-wrapper:hover .cloudapp-tree-checkbox-inner,
 div .cloudapp-tree-checkbox:hover .cloudapp-tree-checkbox-inner,
@@ -120,7 +120,7 @@ div .cloudapp-form-item {
 }
 div .cloudapp-input {
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
@@ -138,7 +138,7 @@ div .cloudapp-input-focused {
 div .cloudapp-input-affix-wrapper {
   background-color: var(--form-bg);
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
 }
 div .cloudapp-input-affix-wrapper:hover {
@@ -157,7 +157,7 @@ div .cloudapp-input[disabled] {
 }
 div .cloudapp-input-number {
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
@@ -170,7 +170,7 @@ div .cloudapp-input-number-focused {
   box-shadow: unset;
 }
 div .cloudapp-input-number-handler-wrap {
-  border-radius: 0 var(--redius1) var(---redius1) 0;
+  border-radius: 0 var(--radius1) var(---redius1) 0;
   background-color: var(--form-bg);
   color: inherit;
 }
@@ -189,12 +189,12 @@ div .cloudapp-pagination-prev,
 div .cloudapp-pagination-next,
 div .cloudapp-pagination-jump-prev,
 div .cloudapp-pagination-jump-next {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   line-height: 28px;
 }
 div .cloudapp-pagination-prev .cloudapp-pagination-item-link,
 div .cloudapp-pagination-next .cloudapp-pagination-item-link {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
@@ -203,21 +203,19 @@ div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp
   color: var(--form-active-bg);
 }
 div .cloudapp-pagination-item {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
+div .cloudapp-pagination-item a {
+  color: inherit;
+}
 div .cloudapp-pagination-item-active {
   border-color: var(--form-active-bg);
-  background-color: var(--form-active-bg);
-}
-div .cloudapp-pagination-item-active a {
-  color: #fff;
 }
 div .cloudapp-pagination-item:focus,
 div .cloudapp-pagination-item:hover {
   border-color: var(--form-active-bg);
-  background-color: var(--form-active-bg);
 }
 div .cloudapp-pagination-item:focus a,
 div .cloudapp-pagination-item:hover a {
@@ -236,6 +234,36 @@ div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link,
 div .cloudapp-pagination-disabled:focus .cloudapp-pagination-item-link {
   border-color: var(--form-bd);
 }
+div .cloudapp-pagination-prev button,
+div .cloudapp-pagination-next button {
+  color: inherit;
+}
+div .cloudapp-pagination-prev,
+div .cloudapp-pagination-next,
+div .cloudapp-pagination-jump-prev,
+div .cloudapp-pagination-jump-next {
+  color: inherit;
+}
+div .cloudapp-pagination-disabled .cloudapp-pagination-item-link,
+div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link {
+  color: inherit;
+}
+div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis,
+div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis {
+  color: inherit;
+}
+div .cloudapp-pagination-options-quick-jumper input {
+  background-color: var(--form-bg);
+  border-color: var(--form-bd);
+}
+div .cloudapp-pagination-options-quick-jumper input:hover {
+  border-color: var(--form-active-bg);
+}
+div .cloudapp-pagination-options-quick-jumper input:focus,
+div .cloudapp-pagination-options-quick-jumper input-focused {
+  border-color: var(--form-active-bg);
+  box-shadow: none;
+}
 div .cloudapp-picker {
   background-color: var(--form-bg);
   border-radius: var(--radius1);
@@ -264,6 +292,7 @@ div .cloudapp-picker-header button {
 }
 div .cloudapp-picker-panel-container {
   background-color: var(--form-bg);
+  border-radius: var(--radius1);
 }
 div .cloudapp-picker-dropdown {
   color: inherit;
@@ -288,6 +317,7 @@ div .cloudapp-picker-cell .cloudapp-picker-cell-inner {
 }
 div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-today .cloudapp-picker-cell-inner::before {
   border-radius: var(--radius1);
+  border-color: var(--form-active-bg);
 }
 div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-in-view) .cloudapp-picker-cell-inner,
 div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-selected):not(.cloudapp-picker-cell-range-start):not(.cloudapp-picker-cell-range-end):not(.cloudapp-picker-cell-range-hover-start):not(.cloudapp-picker-cell-range-hover-end) .cloudapp-picker-cell-inner {
@@ -323,7 +353,13 @@ div .cloudapp-picker-range .cloudapp-picker-active-bar {
   background-color: var(--form-active-bg);
 }
 div .cloudapp-popover-inner {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
+}
+div .cloudapp-radio {
+  color: inherit;
+}
+div .cloudapp-radio-group {
+  color: inherit;
 }
 div .cloudapp-radio-button-wrapper {
   outline: unset;
@@ -394,42 +430,42 @@ div .cloudapp-radio-button-wrapper:last-child {
   border-radius: 0 var(--form-redius) var(--form-redius) 0;
 }
 div .cloudapp-radio-button-wrapper:first-child {
-  border-radius: var(--form-redius) 0 0 var(--redius1);
+  border-radius: var(--form-redius) 0 0 var(--radius1);
 }
 div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
   box-shadow: unset;
 }
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: var(--scrollbar-track-shadow);
-  border-radius: 8px;
+  border-radius: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #ddd;
+  border-radius: var(--scrollbar-width);
+  background: var(--scrollbar-thumb-bg);
   -webkit-box-shadow: var(--scrollbar-thumb-shadow);
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover-bg);
 }
 ::-webkit-scrollbar-thumb:active {
-  background: #999;
+  background: var(--scrollbar-thumb-bg);
 }
 div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
 div .cloudapp-select-multiple .cloudapp-select-selector {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
 div .cloudapp-select-multiple .cloudapp-select-selection-item {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
@@ -480,6 +516,57 @@ div .cloudapp-tree {
   color: inherit;
   background: transparent;
 }
+div .cloudapp-tree .cloudapp-tree-node-content-wrapper:hover {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
+div .cloudapp .cloudapp-node-content-wrapper.cloudapp-node-selected {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
+div .cloudapp-table {
+  background-color: var(--table-bg);
+  color: inherit;
+  font-size: var(--fs);
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
+  background: var(--table-row-hover-color);
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-row-selected > td {
+  background: var(--table-row-hover-color);
+  border-bottom-color: var(--table-bd);
+}
+div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
+  background-color: var(--table-head-bg);
+  border-bottom-color: var(--table-bd);
+  color: inherit;
+}
+div .cloudapp-table-thead > tr > th.cloudapp-table-cell-scrollbar {
+  box-shadow: none;
+  background-color: var(--table-head-bg);
+}
+div .cloudapp-table-cell-fix-left,
+div .cloudapp-table-cell-fix-right {
+  background-color: var(--table-bg);
+}
+div .cloudapp-table-tbody > tr > td {
+  border-bottom-color: var(--table-bd);
+}
+div tr.cloudapp-table-expanded-row > td,
+div tr.cloudapp-table-expanded-row:hover > td {
+  background-color: var(--table-row-hover-color);
+}
+div .cloudapp-table-row-expand-icon {
+  border-radius: var(--radius1);
+  color: var(--primary);
+}
+div .cloudapp-table-row-expand-icon:focus,
+div .cloudapp-table-row-expand-icon:hover {
+  color: var(--primary-dark);
+}
+div .cloudapp-empty-normal {
+  color: inherit;
+}
 :root {
   color: var(--color);
 }

package/es/ThemeAntd/style/button.css

@@ -1,5 +1,5 @@
 div .cloudapp-btn {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
 }
 div .cloudapp-btn:hover,
 div .cloudapp-btn:focus {

package/es/ThemeAntd/style/checkbox.css

@@ -6,7 +6,7 @@ div .cloudapp-checkbox-checked .cloudapp-checkbox-inner {
   background-color: var(--form-active-bg);
 }
 div .cloudapp-checkbox-inner {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
@@ -38,7 +38,7 @@ div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner {
 }
 div .cloudapp-tree-checkbox-inner {
   border-color: var(--form-bd);
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
 }
 div .cloudapp-tree-checkbox-wrapper:hover .cloudapp-tree-checkbox-inner,
 div .cloudapp-tree-checkbox:hover .cloudapp-tree-checkbox-inner,

package/es/ThemeAntd/style/input.css

@@ -1,6 +1,6 @@
 div .cloudapp-input {
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
@@ -18,7 +18,7 @@ div .cloudapp-input-focused {
 div .cloudapp-input-affix-wrapper {
   background-color: var(--form-bg);
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
 }
 div .cloudapp-input-affix-wrapper:hover {
@@ -37,7 +37,7 @@ div .cloudapp-input[disabled] {
 }
 div .cloudapp-input-number {
   color: inherit;
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
@@ -50,7 +50,7 @@ div .cloudapp-input-number-focused {
   box-shadow: unset;
 }
 div .cloudapp-input-number-handler-wrap {
-  border-radius: 0 var(--redius1) var(---redius1) 0;
+  border-radius: 0 var(--radius1) var(---redius1) 0;
   background-color: var(--form-bg);
   color: inherit;
 }

package/es/ThemeAntd/style/pagination.css

@@ -5,12 +5,12 @@ div .cloudapp-pagination-prev,
 div .cloudapp-pagination-next,
 div .cloudapp-pagination-jump-prev,
 div .cloudapp-pagination-jump-next {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   line-height: 28px;
 }
 div .cloudapp-pagination-prev .cloudapp-pagination-item-link,
 div .cloudapp-pagination-next .cloudapp-pagination-item-link {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
@@ -19,21 +19,19 @@ div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp
   color: var(--form-active-bg);
 }
 div .cloudapp-pagination-item {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   background-color: var(--form-bg);
   border-color: var(--form-bd);
 }
+div .cloudapp-pagination-item a {
+  color: inherit;
+}
 div .cloudapp-pagination-item-active {
   border-color: var(--form-active-bg);
-  background-color: var(--form-active-bg);
-}
-div .cloudapp-pagination-item-active a {
-  color: #fff;
 }
 div .cloudapp-pagination-item:focus,
 div .cloudapp-pagination-item:hover {
   border-color: var(--form-active-bg);
-  background-color: var(--form-active-bg);
 }
 div .cloudapp-pagination-item:focus a,
 div .cloudapp-pagination-item:hover a {
@@ -52,3 +50,33 @@ div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link,
 div .cloudapp-pagination-disabled:focus .cloudapp-pagination-item-link {
   border-color: var(--form-bd);
 }
+div .cloudapp-pagination-prev button,
+div .cloudapp-pagination-next button {
+  color: inherit;
+}
+div .cloudapp-pagination-prev,
+div .cloudapp-pagination-next,
+div .cloudapp-pagination-jump-prev,
+div .cloudapp-pagination-jump-next {
+  color: inherit;
+}
+div .cloudapp-pagination-disabled .cloudapp-pagination-item-link,
+div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link {
+  color: inherit;
+}
+div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis,
+div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis {
+  color: inherit;
+}
+div .cloudapp-pagination-options-quick-jumper input {
+  background-color: var(--form-bg);
+  border-color: var(--form-bd);
+}
+div .cloudapp-pagination-options-quick-jumper input:hover {
+  border-color: var(--form-active-bg);
+}
+div .cloudapp-pagination-options-quick-jumper input:focus,
+div .cloudapp-pagination-options-quick-jumper input-focused {
+  border-color: var(--form-active-bg);
+  box-shadow: none;
+}

package/es/ThemeAntd/style/picker.css

@@ -26,6 +26,7 @@ div .cloudapp-picker-header button {
 }
 div .cloudapp-picker-panel-container {
   background-color: var(--form-bg);
+  border-radius: var(--radius1);
 }
 div .cloudapp-picker-dropdown {
   color: inherit;
@@ -50,6 +51,7 @@ div .cloudapp-picker-cell .cloudapp-picker-cell-inner {
 }
 div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-today .cloudapp-picker-cell-inner::before {
   border-radius: var(--radius1);
+  border-color: var(--form-active-bg);
 }
 div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-in-view) .cloudapp-picker-cell-inner,
 div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-selected):not(.cloudapp-picker-cell-range-start):not(.cloudapp-picker-cell-range-end):not(.cloudapp-picker-cell-range-hover-start):not(.cloudapp-picker-cell-range-hover-end) .cloudapp-picker-cell-inner {

package/es/ThemeAntd/style/popover.css

@@ -1,3 +1,3 @@
 div .cloudapp-popover-inner {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
 }

package/es/ThemeAntd/style/radio.css

@@ -1,3 +1,9 @@
+div .cloudapp-radio {
+  color: inherit;
+}
+div .cloudapp-radio-group {
+  color: inherit;
+}
 div .cloudapp-radio-button-wrapper {
   outline: unset;
 }
@@ -67,7 +73,7 @@ div .cloudapp-radio-button-wrapper:last-child {
   border-radius: 0 var(--form-redius) var(--form-redius) 0;
 }
 div .cloudapp-radio-button-wrapper:first-child {
-  border-radius: var(--form-redius) 0 0 var(--redius1);
+  border-radius: var(--form-redius) 0 0 var(--radius1);
 }
 div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
   box-shadow: unset;

package/es/ThemeAntd/style/scrollbar.css

@@ -1,19 +1,19 @@
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: var(--scrollbar-track-shadow);
-  border-radius: 8px;
+  border-radius: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #ddd;
+  border-radius: var(--scrollbar-width);
+  background: var(--scrollbar-thumb-bg);
   -webkit-box-shadow: var(--scrollbar-thumb-shadow);
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover-bg);
 }
 ::-webkit-scrollbar-thumb:active {
-  background: #999;
+  background: var(--scrollbar-thumb-bg);
 }

package/es/ThemeAntd/style/select.css

@@ -1,15 +1,15 @@
 div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
 div .cloudapp-select-multiple .cloudapp-select-selector {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }
 div .cloudapp-select-multiple .cloudapp-select-selection-item {
-  border-radius: var(--redius1);
+  border-radius: var(--radius1);
   border-color: var(--form-bd);
   background-color: var(--form-bg);
 }

package/es/ThemeAntd/style/table.css

@@ -0,0 +1,43 @@
+div .cloudapp-table {
+  background-color: var(--table-bg);
+  color: inherit;
+  font-size: var(--fs);
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
+  background: var(--table-row-hover-color);
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-row-selected > td {
+  background: var(--table-row-hover-color);
+  border-bottom-color: var(--table-bd);
+}
+div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
+  background-color: var(--table-head-bg);
+  border-bottom-color: var(--table-bd);
+  color: inherit;
+}
+div .cloudapp-table-thead > tr > th.cloudapp-table-cell-scrollbar {
+  box-shadow: none;
+  background-color: var(--table-head-bg);
+}
+div .cloudapp-table-cell-fix-left,
+div .cloudapp-table-cell-fix-right {
+  background-color: var(--table-bg);
+}
+div .cloudapp-table-tbody > tr > td {
+  border-bottom-color: var(--table-bd);
+}
+div tr.cloudapp-table-expanded-row > td,
+div tr.cloudapp-table-expanded-row:hover > td {
+  background-color: var(--table-row-hover-color);
+}
+div .cloudapp-table-row-expand-icon {
+  border-radius: var(--radius1);
+  color: var(--primary);
+}
+div .cloudapp-table-row-expand-icon:focus,
+div .cloudapp-table-row-expand-icon:hover {
+  color: var(--primary-dark);
+}
+div .cloudapp-empty-normal {
+  color: inherit;
+}

package/es/ThemeAntd/style/tree.css

@@ -2,3 +2,11 @@ div .cloudapp-tree {
   color: inherit;
   background: transparent;
 }
+div .cloudapp-tree .cloudapp-tree-node-content-wrapper:hover {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
+div .cloudapp .cloudapp-node-content-wrapper.cloudapp-node-selected {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/theme-config.ts

@@ -3,9 +3,9 @@ export const themeConfig = `
     --primary: #248FFA;
     --primary-light: #248FFA;
     --primary-dark: #227BD5;
-    --secondary1: #6D8EFB;
-    --secondary1-light: #86A2FF;
-    --secondary1-dark: #5D7FF0;
+    --secondary1: #e8b127;
+    --secondary1-light: #e8b127;
+    --secondary1-dark: #e8b127;
     --secondary2: #33AAFF;
     --secondary2-light: #61BDFF;
     --secondary2-dark: #2194E5;
@@ -42,19 +42,26 @@ export const themeConfig = `
     --fs: 14px;
     --fs-small: 12px;
     --fs-large: 20px;
-    --color: rgba(0,0,0,1);
-    --color-dark: #000000;
-    --color-light: rgba(255,255,255,1);
-    --color-disabled: rgba(0,0,0,0.26);
+    --bd:rgba(255, 255, 255, 0.3);
+    --color:#ffffff;
+    --color1:#ffffff;
+    --color2:#fefefe;
+    --color3:#eeeeee;
+    --color4:#999999;
+    --color5:#666666;
+    --color6:#333333;
+    --color7:#000000;
     --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);
@@ -69,6 +76,7 @@ export const themeConfig = `
     --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;
@@ -76,18 +84,21 @@ export const themeConfig = `
     --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);
     --drawer-footer-height: 44px;
     --drawer-footer-bg: rgba(255,255,255,1);
     --drawer-content-bg: rgba(243,246,249,1);
+
     --modal-title-height: 44px;
     --modal-title-bg: #ffffff;
     --modal-divider-color: rgba(219,225,234,1);
     --modal-footer-height: 44px;
     --modal-footer-bg: rgba(243,246,249,1);
     --modal-content-bg: rgba(243,246,249,1);
+
     --card-image-radius: 4px;
     --card-image-bg: rgba(219,225,234,1);
     --card-radius: 4px;
@@ -96,6 +107,11 @@ export const themeConfig = `
     --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);
+
+    --table-bg:#ffffff";
+    --table-head-bg:#fafafa";
+    --table-bd:rgba(245,245,245,1);
+    --table-row-hover-color:rgba(237,245,250,1);
     
     --scrollbar-width: 8px;
     --scrollbar-track-bg: rgba(239,241,244,1);