ronds-metadata 1.2.3 → 1.2.4

package/es/comps/Editable/index.js

@@ -337,6 +337,10 @@ var Editable = function Editable(props) {
     }
   }, /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "".concat((type === 'multiple' || type === 'freedom') && !readonly && isAddRow && defaultValue ? 'calc(100% - 40px)' : '100%')
+    }
   }, /*#__PURE__*/React.createElement(_Table, _extends({
     key: _columns.length,
     className: "ronds-edit-table",
@@ -367,7 +371,7 @@ var Editable = function Editable(props) {
         onMove: onMove
       };
     }
-  }))), (type === 'multiple' || type === 'freedom') && !readonly && isAddRow && defaultValue && /*#__PURE__*/React.createElement(_Button, {
+  })))), (type === 'multiple' || type === 'freedom') && !readonly && isAddRow && defaultValue && /*#__PURE__*/React.createElement(_Button, {
     block: true,
     type: "dashed",
     style: {

package/es/comps/JsonView/index.less

@@ -1,41 +1,41 @@
-pre {
-  margin: 0;
-  font-weight: 900;
-  font-size: 14px;
-}
-.string {
-  color: #3ab54a;
-}
-.number {
-  color: #25aae2;
-}
-.boolean {
-  color: #f98280;
-}
-.null {
-  color: #f1592a;
-}
-.width-10 {
-  width: 10px;
-}
-.key {
-  color: #92278f;
-}
-.open {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background: url('./icon/close.png') no-repeat;
-  background-size: 100% 100%;
-  vertical-align: middle;
-  cursor: pointer;
-}
-.close {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background: url('./icon/open.png') no-repeat;
-  background-size: 100% 100%;
-  vertical-align: middle;
-  cursor: pointer;
-}
+pre {
+  margin: 0;
+  font-weight: 900;
+  font-size: 14px;
+}
+.string {
+  color: #3ab54a;
+}
+.number {
+  color: #25aae2;
+}
+.boolean {
+  color: #f98280;
+}
+.null {
+  color: #f1592a;
+}
+.width-10 {
+  width: 10px;
+}
+.key {
+  color: #92278f;
+}
+.open {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: url('./icon/close.png') no-repeat;
+  background-size: 100% 100%;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.close {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: url('./icon/open.png') no-repeat;
+  background-size: 100% 100%;
+  vertical-align: middle;
+  cursor: pointer;
+}

package/es/comps/MetadataEdit/index.less

@@ -1,10 +1,10 @@
-.metadata-edit {
-  height: 100%;
-  width: 100%;
-  .ant-row {
-    display: block;
-  }
-  .pr-10 {
-    padding-right: 10px;
-  }
-}
+.metadata-edit {
+  height: 100%;
+  width: 100%;
+  .ant-row {
+    display: block;
+  }
+  .pr-10 {
+    padding-right: 10px;
+  }
+}

package/es/comps/MetadataEdit/type.d.ts

@@ -1,20 +1,20 @@
-export interface IMetaFileds {
-  id: string;
-  type: 'object';
-  properties: any[];
-  value: any;
-}
-
-export type ITypeStatus = 'object' | 'ref' | 'bool' | 'number' | 'text' | 'enum' | 'array';
-
-export type IMetaProperty = {
-  /**
-   * 属性的名称
-   */
-  id: string;
-  /**
-   * 类型
-   */
-  type: string;
-  enum?: any[];
-};
+export interface IMetaFileds {
+  id: string;
+  type: 'object';
+  properties: any[];
+  value: any;
+}
+
+export type ITypeStatus = 'object' | 'ref' | 'bool' | 'number' | 'text' | 'enum' | 'array';
+
+export type IMetaProperty = {
+  /**
+   * 属性的名称
+   */
+  id: string;
+  /**
+   * 类型
+   */
+  type: string;
+  enum?: any[];
+};

package/es/comps/MetadataForm/DataCell/Array.js

@@ -12,7 +12,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-22 16:38:00
+ * @LastEditTime: 2023-02-23 15:42:40
  */
 import React from 'react';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
@@ -136,7 +136,7 @@ function Index(props) {
         isRefForm: isRefForm,
         isShowTypeInfo: formContext.isShowTypeInfo,
         field: field
-      }, colSpan), /*#__PURE__*/React.createElement(MinusCircleOutlined, {
+      }, 23), /*#__PURE__*/React.createElement(MinusCircleOutlined, {
         style: {
           marginLeft: '10px'
         },

package/es/comps/MetadataForm/DataCell/Input.js

@@ -17,7 +17,7 @@ import _Input from "antd/es/input";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-22 15:51:51
+ * @LastEditTime: 2023-02-23 16:30:57
  */
 import React from 'react';
 import { UploadOutlined } from '@ant-design/icons';
@@ -73,7 +73,7 @@ function Index(props) {
 
       case 'textarea':
         return /*#__PURE__*/React.createElement(TextArea, {
-          rows: 4,
+          rows: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.textareaRows) || 4,
           disabled: (_extraInfo$disabled2 = extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.disabled) !== null && _extraInfo$disabled2 !== void 0 ? _extraInfo$disabled2 : disabled,
           placeholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.placeholder
         });
@@ -134,6 +134,14 @@ function Index(props) {
           color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
         } : {}
       }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+      labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: labelSpan,
+        offset: 0
+      } : undefined,
+      wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: 24 - labelSpan,
+        offset: 0
+      } : undefined,
       name: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$addonAfter5 = extraInfo.addonAfter) === null || _extraInfo$addonAfter5 === void 0 ? void 0 : _extraInfo$addonAfter5.key) ? [field === null || field === void 0 ? void 0 : field.name].concat(_toConsumableArray(name), ['value']) : [field === null || field === void 0 ? void 0 : field.name].concat(_toConsumableArray(name)),
       rules: [{
         required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require

package/es/comps/MetadataForm/DataCell/Number.js

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-21 19:16:02
+ * @LastEditTime: 2023-02-23 16:31:33
  */
 import React from 'react';
 import { MetadataFormContext, MetadataRefContext } from '../interface';
@@ -22,6 +22,7 @@ function Index(props) {
       name = props.name,
       isRefForm = props.isRefForm,
       disabled = props.disabled,
+      labelSpan = props.labelSpan,
       field = props.field,
       isObj = props.isObj;
   var formContext = React.useContext(MetadataFormContext) || {};
@@ -62,6 +63,14 @@ function Index(props) {
           color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
         } : {}
       }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+      labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: labelSpan,
+        offset: 0
+      } : undefined,
+      wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: 24 - labelSpan,
+        offset: 0
+      } : undefined,
       rules: [{
         required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require
       }].concat(_toConsumableArray(rules)),
@@ -84,6 +93,14 @@ function Index(props) {
         color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
       } : {}
     }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+    labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: labelSpan,
+      offset: 0
+    } : undefined,
+    wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: 24 - labelSpan,
+      offset: 0
+    } : undefined,
     name: name,
     rules: [{
       required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require
@@ -99,7 +116,6 @@ function Index(props) {
       paddingRight: '10px'
     },
     name: [field === null || field === void 0 ? void 0 : field.name],
-    fieldKey: [field === null || field === void 0 ? void 0 : field.fieldKey],
     rules: [{
       required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require
     }].concat(_toConsumableArray(rules)),

package/es/comps/MetadataForm/DataCell/Ref.js

@@ -30,6 +30,7 @@ function Index(props) {
       disabled = props.disabled,
       isRefForm = props.isRefForm,
       fieldRule = props.fields,
+      labelSpan = props.labelSpan,
       initEnumValue = props.initEnumValue,
       field = props.field,
       name = props.name;
@@ -263,6 +264,14 @@ function Index(props) {
   return !field ? /*#__PURE__*/React.createElement(_Form.Item, {
     key: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.defaultValue,
     label: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id,
+    labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: labelSpan,
+      offset: 0
+    } : undefined,
+    wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: 24 - labelSpan,
+      offset: 0
+    } : undefined,
     initialValue: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.defaultValue,
     style: {
       display: "".concat(extraInfo.hidden ? 'none' : 'block')

package/es/comps/MetadataForm/DataCell/Select.js

@@ -53,6 +53,7 @@ function Index(props) {
       initEnumValue = _props$initEnumValue === void 0 ? {} : _props$initEnumValue,
       disabled = props.disabled,
       field = props.field,
+      labelSpan = props.labelSpan,
       isObj = props.isObj,
       _props$enum = props.enum,
       myEnum = _props$enum === void 0 ? [] : _props$enum;
@@ -457,6 +458,14 @@ function Index(props) {
           color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
         } : {}
       }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+      labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: labelSpan,
+        offset: 0
+      } : undefined,
+      wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: 24 - labelSpan,
+        offset: 0
+      } : undefined,
       name: [field === null || field === void 0 ? void 0 : field.name].concat(_toConsumableArray(name)),
       rules: [{
         required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require
@@ -477,6 +486,14 @@ function Index(props) {
         color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
       } : {}
     }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+    labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: labelSpan,
+      offset: 0
+    } : undefined,
+    wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: 24 - labelSpan,
+      offset: 0
+    } : undefined,
     name: name,
     rules: [{
       required: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require

package/es/comps/MetadataForm/DataCell/Switch.js

@@ -21,6 +21,7 @@ function Index(props) {
       name = props.name,
       isRefForm = props.isRefForm,
       disabled = props.disabled,
+      labelSpan = props.labelSpan,
       field = props.field,
       isObj = props.isObj;
   var formContext = React.useContext(MetadataFormContext) || {};
@@ -40,6 +41,14 @@ function Index(props) {
           color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
         } : {}
       }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+      labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: labelSpan,
+        offset: 0
+      } : undefined,
+      wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+        span: 24 - labelSpan,
+        offset: 0
+      } : undefined,
       name: [field === null || field === void 0 ? void 0 : field.name].concat(_toConsumableArray(name)),
       valuePropName: "checked",
       rules: [{
@@ -60,6 +69,14 @@ function Index(props) {
         color: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.color
       } : {}
     }, (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.label) || id),
+    labelCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: labelSpan,
+      offset: 0
+    } : undefined,
+    wrapperCol: labelSpan && (formContext === null || formContext === void 0 ? void 0 : formContext.layout) === 'horizontal' ? {
+      span: 24 - labelSpan,
+      offset: 0
+    } : undefined,
     key: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.defaultValue,
     initialValue: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.defaultValue,
     style: {

package/es/comps/MetadataForm/DataCell/layout/TableArray.js

@@ -1,3 +1,5 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -321,8 +323,16 @@ var TableArray = function TableArray(props) {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%',
+      padding: '0 0 8px',
       height: addButtonHidden || readonly ? "".concat(rowNumber * getCellHeight(readonly) + 45, "px") : "".concat(rowNumber * getCellHeight(readonly) + 45 + 40, "px")
     }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    name: name,
+    noStyle: true,
+    style: {
+      margin: 0,
+      height: '100%'
+    }
   }, /*#__PURE__*/React.createElement(Editable, {
     type: "multiple",
     readonly: readonly,
@@ -343,7 +353,7 @@ var TableArray = function TableArray(props) {
         y: addButtonHidden || readonly ? "".concat(rowNumber * getCellHeight(readonly) + 45, "px ") : "".concat(rowNumber * getCellHeight(readonly), "px ")
       }
     }
-  }));
+  })));
 };
 
 export default TableArray;

package/es/comps/MetadataForm/hooks/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: your name
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-21 19:11:53
+ * @LastEditTime: 2023-02-23 14:53:08
  */
 import { getLocale } from '../../../framework/locale';
 import moment from 'moment';
@@ -98,8 +98,14 @@ export var useWatchDepend = function useWatchDepend(_depends, stream$) {
 
 var processDependHiddenOrShow = function processDependHiddenOrShow(depend, changeData, stream$) {
   try {
-    var regex = /\w+(\.\w+)?[=<>!]{1}/g;
+    // const regex = /\w+(\.\w+)?[=<>!]{1}/g;
+    var regex = /\w+(\.\w+)?[=<>!]{1}|\w+(\.\w+)?(\.indexOf\('\w+'\)[=<>!]{1})/g;
     var keys = depend.trim().match(regex);
+
+    if (!keys) {
+      return false;
+    }
+
     var expression = depend;
 
     for (var i = 0; i < keys.length; i++) {

package/es/framework/metadata/types.d.ts

@@ -1,98 +1,98 @@
-/*
- * @Author: wangxian
- * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-09 18:37:15
- */
-export type IMetaType = 'object' | 'ref' | 'bool' | 'number' | 'text' | 'enum' | 'array' | string;
-
-export type IMetaData = {
-  /**
-   * 类名称/属性名称
-   */
-  id: string;
-  /**
-   * 类型
-   */
-  type: IMetaType;
-  /**
-   * 属性
-   */
-  properties?: IMetaProperties[];
-
-  /**
-   * 引用id
-   */
-  refId?: string;
-  /**
-   * 静态的变量
-   */
-  fields?: IMetaFileds[];
-  /**
-   * 内部类
-   */
-  types?: IMetaData[];
-};
-
-export type IMetaProperties = {
-  /**
-   * 类规则名称
-   */
-  id: string;
-
-  /**
-   * 类型
-   */
-  type: IMetaType;
-
-  /**
-   * 引用id
-   */
-  refId?: string;
-  /**
-   * 静态的变量
-   */
-  fields?: IMetaFileds[];
-  /**
-   * 枚举值
-   */
-  enum?: { value: string }[];
-  /**
-   * 数组类型
-   */
-  items?: { type: IMetaType; refId?: string };
-};
-
-export type IMetaFileds = {
-  /**
-   * 规则名称
-   */
-  id: string;
-
-  /**
-   * 类型
-   */
-  type: IMetaType;
-
-  /**
-   * 引用id
-   */
-  refId?: string;
-
-  /**
-   * 规则值
-   */
-  value: any;
-};
-
-export interface IAPI {
-  // 获取元数据列表
-  GetMetadataList(keyWords?: string[]): Promise<{ id: string; name: string; schema: string }[]>;
-  // 通过元数据Id获取元数据详情
-  GetMetadataDetailById(metadataId: string): Promise<any>;
-  // 新增元数据
-  SaveMetadata(data: any, metadataTag: string): Promise<any>;
-  // 获取元数据的值
-  GetMetadataObjList(data: any): Promise<any[]>;
-  /** 通过扩展规则获取枚举类型的值 */
-  GetEnumDataByUrl(url: string, method: 'get' | 'post', body: any): Promise<any>;
-}
+/*
+ * @Author: wangxian
+ * @Date: 2021-09-18 14:15:04
+ * @LastEditTime: 2023-02-09 18:37:15
+ */
+export type IMetaType = 'object' | 'ref' | 'bool' | 'number' | 'text' | 'enum' | 'array' | string;
+
+export type IMetaData = {
+  /**
+   * 类名称/属性名称
+   */
+  id: string;
+  /**
+   * 类型
+   */
+  type: IMetaType;
+  /**
+   * 属性
+   */
+  properties?: IMetaProperties[];
+
+  /**
+   * 引用id
+   */
+  refId?: string;
+  /**
+   * 静态的变量
+   */
+  fields?: IMetaFileds[];
+  /**
+   * 内部类
+   */
+  types?: IMetaData[];
+};
+
+export type IMetaProperties = {
+  /**
+   * 类规则名称
+   */
+  id: string;
+
+  /**
+   * 类型
+   */
+  type: IMetaType;
+
+  /**
+   * 引用id
+   */
+  refId?: string;
+  /**
+   * 静态的变量
+   */
+  fields?: IMetaFileds[];
+  /**
+   * 枚举值
+   */
+  enum?: { value: string }[];
+  /**
+   * 数组类型
+   */
+  items?: { type: IMetaType; refId?: string };
+};
+
+export type IMetaFileds = {
+  /**
+   * 规则名称
+   */
+  id: string;
+
+  /**
+   * 类型
+   */
+  type: IMetaType;
+
+  /**
+   * 引用id
+   */
+  refId?: string;
+
+  /**
+   * 规则值
+   */
+  value: any;
+};
+
+export interface IAPI {
+  // 获取元数据列表
+  GetMetadataList(keyWords?: string[]): Promise<{ id: string; name: string; schema: string }[]>;
+  // 通过元数据Id获取元数据详情
+  GetMetadataDetailById(metadataId: string): Promise<any>;
+  // 新增元数据
+  SaveMetadata(data: any, metadataTag: string): Promise<any>;
+  // 获取元数据的值
+  GetMetadataObjList(data: any): Promise<any[]>;
+  /** 通过扩展规则获取枚举类型的值 */
+  GetEnumDataByUrl(url: string, method: 'get' | 'post', body: any): Promise<any>;
+}

package/es/theme.less

@@ -1,77 +1,77 @@
-.ronds-metadata-dark {
-  --ronds-metadata-color-border-1: #314162;
-  --ronds-metadata-color-border-2: #0d9af3;
-  --ronds-metadata-color-bg-2: #0d1f40;
-  --ronds-metadata-color-bg-3: #0d1f40;
-  --ronds-metadata-color-bg-4: #1c3771;
-  --ronds-metadata-color-text-1: #ffffff;
-  --ronds-metadata-color-text-2: #ffffff;
-  --ronds-metadata-color-text-3: #ffffff;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-    color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-    background: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      border-radius: 2px;
-      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
-      background: var(--scrollbar-color-hover);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-      background: var(--scrollbar-color-hover);
-    }
-  }
-}
-
-.ronds-metadata-normal {
-  --ronds-metadata-color-border-1: #d9d9d9;
-  --ronds-metadata-color-border-2: #165dff;
-  --ronds-metadata-color-bg-2: #ffffff;
-  --ronds-metadata-color-bg-3: #f6f5f6;
-  --ronds-metadata-color-bg-4: #ffffff;
-  --ronds-metadata-color-text-1: #1d2129;
-  --ronds-metadata-color-text-2: #24292f;
-  --ronds-metadata-color-text-3: #f2f3f5;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      background-color: #a8a8a8;
-    }
-
-    &:active {
-      background-color: #787878;
-    }
-
-    /* border: 1px solid #e0e0e0; */
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: #f7f7f7;
-  }
-}
+.ronds-metadata-dark {
+  --ronds-metadata-color-border-1: #314162;
+  --ronds-metadata-color-border-2: #0d9af3;
+  --ronds-metadata-color-bg-2: #0d1f40;
+  --ronds-metadata-color-bg-3: #0d1f40;
+  --ronds-metadata-color-bg-4: #1c3771;
+  --ronds-metadata-color-text-1: #ffffff;
+  --ronds-metadata-color-text-2: #ffffff;
+  --ronds-metadata-color-text-3: #ffffff;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+    color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+    background: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      border-radius: 2px;
+      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
+      background: var(--scrollbar-color-hover);
+    }
+
+    &:active {
+      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+      background: var(--scrollbar-color-hover);
+    }
+  }
+}
+
+.ronds-metadata-normal {
+  --ronds-metadata-color-border-1: #d9d9d9;
+  --ronds-metadata-color-border-2: #165dff;
+  --ronds-metadata-color-bg-2: #ffffff;
+  --ronds-metadata-color-bg-3: #f6f5f6;
+  --ronds-metadata-color-bg-4: #ffffff;
+  --ronds-metadata-color-text-1: #1d2129;
+  --ronds-metadata-color-text-2: #24292f;
+  --ronds-metadata-color-text-3: #f2f3f5;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: #a8a8a8;
+    }
+
+    &:active {
+      background-color: #787878;
+    }
+
+    /* border: 1px solid #e0e0e0; */
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f7f7f7;
+  }
+}

package/package.json

@@ -1,94 +1,94 @@
-{
-  "public": true,
-  "name": "ronds-metadata",
-  "version": "1.2.3",
-  "scripts": {
-    "start": "dumi dev",
-    "docs:build": "dumi build",
-    "docs:deploy": "gh-pages -d docs-dist",
-    "build": "father-build",
-    "deploy": "npm run docs:build && npm run docs:deploy",
-    "release": "npm run build && npm publish",
-    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage",
-    "prepublishOnly": "npm run build"
-  },
-  "main": "es",
-  "module": "es",
-  "types": "es/index.d.ts",
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  },
-  "files": [
-    "/es"
-  ],
-  "dependencies": {
-    "@antv/x6": "^1.32.2",
-    "@antv/x6-react-shape": "^1.6.0",
-    "@babel/helper-create-regexp-features-plugin": "^7.12.13",
-    "@babel/runtime": "^7.11.2",
-    "@popperjs/core": "^2.4.4",
-    "@types/markdown-navbar": "^1.4.0",
-    "ahooks": "^3.4.0",
-    "axios": "^0.21.4",
-    "babel-plugin-import": "^1.13.3",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "bl": "^5.0.0",
-    "codemirror": "^5.63.0",
-    "codepage": "^1.15.0",
-    "github-markdown-css": "^5.1.0",
-    "immer": "^9.0.14",
-    "lodash": "^4.17.21",
-    "markdown-navbar": "^1.4.3",
-    "qs": "^6.10.1",
-    "react": "^17.0.2",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-jexcel": "^1.0.2",
-    "react-markdown": "^8.0.3",
-    "react-markdown-editor-lite": "^1.3.2",
-    "react-popper": "^2.2.3",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
-    "rxjs": "^7.5.4",
-    "xlsx": "^0.18.5"
-  },
-  "peerDependencies": {
-    "antd": ">=4.1.5",
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0",
-    "react-router": ">=5.0.0",
-    "styled-components": ">=4.1.1"
-  },
-  "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-router": "^5.1.8",
-    "@types/react-window": "^1.8.2",
-    "@types/styled-components": "^5.1.2",
-    "@umijs/test": "^3.0.5",
-    "antd": "^4.18.1",
-    "babel-loader": "^8.1.0",
-    "copy-to-clipboard": "^3.3.1",
-    "css-loader": "^4.2.2",
-    "dumi": "^1.0.16",
-    "father-build": "^1.17.2",
-    "gh-pages": "^3.0.0",
-    "less-loader": "^7.0.0",
-    "lint-staged": "^10.0.7",
-    "prettier": "^2.2.1",
-    "style-loader": "^1.2.1",
-    "webpack-cli": "^3.3.12",
-    "yorkie": "^2.0.0"
-  }
+{
+  "public": true,
+  "name": "ronds-metadata",
+  "version": "1.2.4",
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "release": "npm run build && npm publish",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "main": "es",
+  "module": "es",
+  "types": "es/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "files": [
+    "/es"
+  ],
+  "dependencies": {
+    "@antv/x6": "^1.32.2",
+    "@antv/x6-react-shape": "^1.6.0",
+    "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+    "@babel/runtime": "^7.11.2",
+    "@popperjs/core": "^2.4.4",
+    "@types/markdown-navbar": "^1.4.0",
+    "ahooks": "^3.4.0",
+    "axios": "^0.21.4",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "bl": "^5.0.0",
+    "codemirror": "^5.63.0",
+    "codepage": "^1.15.0",
+    "github-markdown-css": "^5.1.0",
+    "immer": "^9.0.14",
+    "lodash": "^4.17.21",
+    "markdown-navbar": "^1.4.3",
+    "qs": "^6.10.1",
+    "react": "^17.0.2",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-jexcel": "^1.0.2",
+    "react-markdown": "^8.0.3",
+    "react-markdown-editor-lite": "^1.3.2",
+    "react-popper": "^2.2.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^6.1.1",
+    "remark-gfm": "^3.0.1",
+    "rxjs": "^7.5.4",
+    "xlsx": "^0.18.5"
+  },
+  "peerDependencies": {
+    "antd": ">=4.1.5",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
+    "react-router": ">=5.0.0",
+    "styled-components": ">=4.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-router": "^5.1.8",
+    "@types/react-window": "^1.8.2",
+    "@types/styled-components": "^5.1.2",
+    "@umijs/test": "^3.0.5",
+    "antd": "^4.18.1",
+    "babel-loader": "^8.1.0",
+    "copy-to-clipboard": "^3.3.1",
+    "css-loader": "^4.2.2",
+    "dumi": "^1.0.16",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "less-loader": "^7.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "style-loader": "^1.2.1",
+    "webpack-cli": "^3.3.12",
+    "yorkie": "^2.0.0"
+  }
 }