@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/checkbox/api.md

@@ -0,0 +1,83 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|选项的文字说明，传入children时此属性无效|string|""|
+|value|Checkbox的值|ValueType|必填|
+|defaultCheck|默认选中状态|boolean|false|
+|checked|是否选中，传值即为受控模式|boolean|-|
+|onChange|复选框选中状态回调函数|(checked: boolean, value: ValueType, e: MouseEvent\<Element, MouseEvent\>) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|
+
+> Checkbox.Group
+
+复选项组
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|options|复选框组可选项, 传入children后此值无效|(CheckboxProps\<ValueType\> & RefAttributes\<CheckboxRef\>)\[\]|-|
+|value|受控模式，复选框选中的选项值|ValueType\[\]|-|
+|defaultValue|默认选中项|ValueType\[\]|[]|
+|min|最小可选值数量|number|0|
+|max|最大可选值数量，0表示没有限制|number|0|
+|onChange|点击复选框值变化回调|(value: ValueType\[\]) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> ValueType
+
+```
+string | number
+```
+
+> IconType
+
+|参数|描述|类型|
+|----------|-------------|------|
+|normal|未选中|ReactNode|
+|active|选中态|ReactNode|
+|disabled|禁用态|ReactNode|
+|activeDisabled|禁用选中态|ReactNode|
+
+> CheckboxProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|选项的文字说明，传入children时此属性无效|string|""|
+|value|Checkbox的值|ValueType|必填|
+|defaultCheck|默认选中状态|boolean|false|
+|checked|是否选中，传值即为受控模式|boolean|-|
+|onChange|复选框选中状态回调函数|(checked: boolean, value: ValueType, e: MouseEvent\<Element, MouseEvent\>) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> CheckboxGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|

package/metaData/components/checkbox/style.md

@@ -0,0 +1,62 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-checkbox {
+    display: inline-flex;
+    align-items: center;
+
+    .checkbox-icon {
+        display: inline-flex;
+        align-items: center;
+        .use-var(font-size, checkbox-icon-font-size);
+        .use-var(color, checkbox-icon-color);
+
+        &.checked {
+            .use-var(color, checkbox-icon-checked-color);
+        }
+
+        &.disabled {
+            .use-var(color, checkbox-icon-disabled-color);
+        }
+
+        &.checked.disabled {
+            .use-var(color, checkbox-icon-checked-disabled-color);
+        }
+
+        .@{prefix}-icon-circle-disabled path {
+            .use-var(stroke, line-color);
+        }
+    }
+
+    .checkbox-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .checkbox-icon + .checkbox-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .checkbox-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-checkbox-group {
+    .@{prefix}-checkbox:not(:last-child) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+
+        &.block,
+        &.justify {
+            .set-prop-with-rtl(margin-right, 0);
+        }
+    }
+}

package/metaData/components/circle-progress/api.md

@@ -0,0 +1,32 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|percentPosition|文字显示位置|"center" \| "bottom"|"center"|
+|showPercent|是否显示圆环内部文字|boolean|true|
+|percentage|进度环百分比|number|必填|
+|renderPercent|圆环内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）|(percentage: number) =\> ReactNode|-|
+|trackColor|轨道颜色|string|-|
+|progressColor|进度环颜色|string|-|
+|disabled|是否置灰|boolean|false|
+|trackStroke|轨道宽度|number|10|
+|progressStroke|进度环宽度|number|12|
+|progressColorStart|进度环渐变开始的颜色(当设置progressColorStart和progressColorEnd其中一个时，颜色会覆盖掉progressColor的颜色)|string|-|
+|progressColorEnd|进度环渐变结束的颜色|string|-|
+|duration|每增加step步长所需的毫秒数|number|30|
+|step|步长（增加步长，以step增长）|number|1|
+|clockwise|是否逆时针增加|boolean|false|
+|radius|圆环半径|number|-|
+|filleted|进度条两端是否圆角|boolean|true|
+|mountedTransition|初始化percentage时是否以动画形式过渡到目的值|boolean|true|
+|size|进度环尺寸|"mini" \| "default"|"default"|
+|mountedBezier|初始化时动画的贝塞尔曲线|\[number, number, number, number\]|[0.34, 0.69, 0.1, 1]|
+|svgKey|区分不同svg的\`\<def\>\`内容|string|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/circle-progress/style.md

@@ -0,0 +1,52 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-circle-progress {
+    position: relative;
+
+    &-text {
+        position: absolute;
+        .use-var(font-size, circle-progress-font-size);
+    }
+
+    &-text-center {
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &-text-bottom {
+        .rem(bottom, -20);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .track-color {
+        .use-var(stroke, circle-progress-track-color);
+    }
+
+    .color {
+        .use-var(stroke, circle-progress-primary-color);
+        .use-var(color, circle-progress-primary-color);
+    }
+
+    .mini {
+        .use-var(stroke, circle-progress-mini-track-color);
+    }
+
+    .disabled {
+        .use-var(color, circle-progress-disabled-color);
+        .use-var(stroke, circle-progress-disabled-color);
+    }
+
+    .linear-gradient-start {
+        .use-var(stop-color, circle-progress-linear-gradient-start-color);
+    }
+
+    .linear-gradient-text {
+        .use-var(color, circle-progress-linear-gradient-text-color);
+    }
+
+    .linear-gradient-end {
+        .use-var(stop-color, circle-progress-linear-gradient-end-color);
+    }
+}

package/metaData/components/collapse/api.md

@@ -0,0 +1,66 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|header|标题|ReactNode|-|
+|value|折叠面板的唯一标识|string|必填|
+|icon|折叠面板的展开图标|ReactNode|-|
+|hideIcon|是否隐藏图标|boolean|false|
+|disabled|是否不可展开|boolean|false|
+|content|面板内容|ReactNode|必填|
+|active|是否展开|boolean|-|
+|defaultActive|默认展开情况|boolean|false|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|onCollapse|可选受控，展开折叠面板时触发|(value: string) =\> void|-|
+|animationTimeout|动画时间|number|-|
+|animationFunction|动画函数|string|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|
+|head|折叠面板头部元素|HTMLDivElement|
+|updateLayout|手动更新组件布局(高度计算)|() =\> void|
+
+> Collapse.Group
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|onCollapse|可选受控，展开折叠面板时触发|(value: string) =\> void|-|
+|animationTimeout|动画时间|number|-|
+|animationFunction|动画函数|string|-|
+|useAccordion|是否使用手风琴模式|boolean|false|
+|activeItems|可选受控，可传展开的item数组，或者每个item对应的状态|string\[\]|-|
+|defaultActiveItems|默认状态|string\[\]|-|
+|disabled|一键禁用|boolean|false|
+|items|折叠面板数组|(CollapseProps & RefAttributes\<CollapseRef\>)\[\]|-|
+|children|子元素，优先级高于items|ReactNode|-|
+|groupKey|区分不同 group，有group 嵌套时建议传入|string|-|
+
+> CollapseProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|header|标题|ReactNode|-|
+|value|折叠面板的唯一标识|string|必填|
+|icon|折叠面板的展开图标|ReactNode|-|
+|hideIcon|是否隐藏图标|boolean|false|
+|disabled|是否不可展开|boolean|false|
+|content|面板内容|ReactNode|必填|
+|active|是否展开|boolean|-|
+|defaultActive|默认展开情况|boolean|false|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|onCollapse|可选受控，展开折叠面板时触发|(value: string) =\> void|-|
+|animationTimeout|动画时间|number|-|
+|animationFunction|动画函数|string|-|
+
+> CollapseGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|-|HTMLDivElement|

package/metaData/components/collapse/style.md

@@ -0,0 +1,53 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-collapse-group {
+}
+
+.@{prefix}-collapse-item {
+    padding: 0;
+    margin: 0;
+    .@{prefix}-collapse {
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .use-var(background, collapse-header-background);
+            .use-var(height, collapse-header-height);
+            .use-var(margin-left, collapse-header-margin-left);
+            .use-var(padding, collapse-header-padding);
+            .use-var(color, collapse-header-color);
+            .use-var(line-height, collapse-header-line-height);
+            .use-var(font-size, collapse-header-font-size);
+            .onepx-border-var(bottom, line-color);
+        }
+        &-icon {
+            .use-var(color, collapse-header-icon-color);
+            display: inline-flex;
+            align-items: center;
+            svg,
+            i {
+                .use-var(font-size, collapse-header-font-size);
+                .use-var(width, collapse-header-font-size);
+            }
+            &-arrow {
+                transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+            }
+        }
+        &-content {
+            height: 0;
+            .use-var(line-height, collapse-content-line-height);
+            .use-var(font-size, collapse-content-font-size);
+            .use-var(color, collapse-content-color);
+            overflow: hidden;
+            transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+            &-container {
+                .use-var(padding, collapse-content-padding);
+            }
+        }
+    }
+    &.disabled {
+        .@{prefix}-collapse-header {
+            .use-var(color, collapse-disabled-header-color);
+        }
+    }
+}

package/metaData/components/context-provider/api.md

@@ -0,0 +1,36 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/context-provider/style.md

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

package/metaData/components/count-down/api.md

@@ -0,0 +1,32 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|time|倒计时时长，单位毫秒|number \| TimeDataType|0|
+|format|自定义格式 D:天数 DD:天数（个位数补0） H:小时 HH:小时（个位数补0） m:分钟 mm:分钟（个位数补0） s:秒数 ss:秒数（个位数补0） S:毫秒（1 位）SS:毫秒（2 位）SSS:毫秒（3 位）|string|HH:mm:ss|
+|autoStart|是否自动开始倒计时|boolean|true|
+|millisecond|是否开启毫秒级渲染|boolean|false|
+|onFinish|倒计时结束时触发|() =\> void|-|
+|onChange|倒计时变化时触发|(val: TimeDataType, ts: number) =\> void|-|
+|renderChild|自定义内容|(val: TimeDataType) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|start|开始|() =\> void|
+|pause|暂停|() =\> void|
+|reset|重置|() =\> void|
+
+> TimeDataType
+
+|参数|描述|类型|
+|----------|-------------|------|
+|days|天数|number|
+|hours|小时|number|
+|minutes|分钟|number|
+|seconds|秒数|number|
+|milliseconds|毫秒|number|

package/metaData/components/count-down/style.md

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-count-down {
+    .use-var(font-size, count-down-font-size);
+    .use-var(line-height, count-down-line-height);
+    .use-var(color, count-down-color);
+}

package/metaData/components/date-picker/api.md

@@ -0,0 +1,94 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|onOk|点击选中时执行的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|currentTs|当前选中的时间，timestamp|number \| \[number, number\]|Date.now()|
+|onChange|选中后的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|onValueChange|每列数据选择变化后的回调函数|(timestamp: number, obj: IDateObj, index: number) =\> void|-|
+|mode|可选列类型，date \- 年月日，time \- 时分秒，datetime \- 年月日时分秒|"date" \| "time" \| "datetime"|"datetime"|
+|typeArr|可选列数组|ItemType\[\]|[]|
+|minTs|最小可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的前十年|
+|maxTs|最大可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的后十年|
+|useUTC|是否使用 UTC 时间|boolean|false|
+|rangeItemFormat|日期时间范围选择展示格式|string|-|
+|formatter|各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字|(value: number, type: ItemType) =\> string|(value: number) => (value < 10 ? \`0${value}\` : String(value))|
+|valueFilter|可选择行过滤方法，参数type为ItemType，参数value为当前行的值，返回true表示该行可选择|(type: ItemType, value: number) =\> boolean|() => true|
+|columnsProcessor|选择器列表项干预，可插入自定义选项|(columns: PickerData\[\]\[\], currentDateObj: IDateObj) =\> PickerData\[\]\[\]|-|
+|renderSeparator|自定义分隔符|() =\> ReactNode|-|
+|renderLinkedContainer|将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器|(currentTs: number \| \[number, number\], itemTypes: ItemType\[\]) =\> ReactNode|-|
+|visible|是否展示选择器|boolean|false|
+|maskClosable|点击蒙层是否关闭菜单|boolean|false|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|true|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|rows|行数(一列可选项的行数)，必须是奇数，最小为3个|number|5|
+|disabled|是否不可用|boolean|false|
+|onHide|点击遮罩层或取消、确定按钮的隐藏回调|(scene?: string) =\> void|-|
+|itemStyle|每列样式|CSSProperties|-|
+|okText|弹窗确认已选值的文案|string|"确定"|
+|dismissText|弹窗取消的文案|string|"取消"|
+|onDismiss|点击取消时执行的回调|() =\> void|-|
+|clickable|是否可通过点击操作选择内容|boolean|true|
+|hideEmptyCols|是否隐藏无数据的空列，常用于级联选择|boolean|false|
+|title|选择器标题|string|""|
+|touchToStop|是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥|number \| boolean|false|
+|renderExtraHeader|自定义头部扩展区域|() =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> IDateObj
+
+|参数|描述|类型|
+|----------|-------------|------|
+|year|年|number|
+|month|月|number|
+|date|日|number|
+|hour|时|number|
+|minute|分|number|
+|second|秒|number|
+
+> mode
+
+```
+"date" | "time" | "datetime"
+```
+
+> ItemType
+
+```
+"date" | "year" | "month" | "hour" | "minute" | "second"
+```
+
+> PickerData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|每一列展示的每项文案对应的值|ReactText|
+|label|每一列展示的文案|ReactNode|
+|children|级联状态下，该列对应的下一列数据|PickerData\[\]|

package/metaData/components/date-picker/style.md

@@ -0,0 +1,27 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-date-picker {
+    &-show {
+        display: flex;
+        .use-var(font-size, date-picker-range-font-size);
+        .use-var(padding, date-picker-range-show-padding);
+        .use-var(color, date-picker-range-disabled-font-color);
+        .use-var(min-height, date-picker-range-show-min-height);
+        .use-var(background-color, date-picker-range-background-color);
+        & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &-separate {
+            flex: 0 1 auto;
+            .use-var(min-width, date-picker-range-separate-min-width);
+        }
+    }
+    &-range-item {
+        flex: 1 0 auto;
+        &-active {
+            .use-var(color, date-picker-range-font-color);
+        }
+    }
+}