@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/dropdown/style.md

@@ -0,0 +1,108 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-dropdown {
+    position: fixed;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    z-index: @full-screen-z-index;
+
+    &-options {
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: @full-screen-z-index + 1;
+        will-change: transform;
+
+        .drop-up & {
+            bottom: 0;
+        }
+        .use-var(background-color, dropdown-options-background-color);
+
+        &-container {
+            height: auto;
+        }
+
+        &-wrap {
+            &.use-column {
+                display: flex;
+                flex-wrap: wrap;
+                .use-var(padding, dropdown-multi-rows-options-container-padding);
+                .use-var(margin, dropdown-multi-rows-options-container-margin);
+            }
+        }
+
+        &-item {
+            .use-var(padding, dropdown-options-item-padding);
+            .use-var(font-size, dropdown-options-item-font-size);
+            .use-var(line-height, dropdown-options-item-line-height);
+            .use-var(color, dropdown-options-item-color);
+            .set-value-with-rtl(text-align, left);
+            position: relative;
+
+            &.selected {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.selected &-icon {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+
+            &-icon {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                .use-var-with-rtl(right, dropdown-options-item-icon-right);
+                color: transparent;
+            }
+        }
+
+        &-item-fake-col,
+        &-item-col {
+            flex: 1;
+            .use-var(margin-right, dropdown-multi-rows-options-gutter);
+            .use-var(margin-bottom, dropdown-multi-rows-options-gutter);
+            .use-var(padding, dropdown-multi-rows-options-item-padding);
+        }
+
+        &-item-col {
+            text-align: center;
+            .use-var(font-size, dropdown-multi-rows-options-item-font-size);
+            .use-var(line-height, dropdown-multi-rows-options-item-line-height);
+            .use-var(color, dropdown-multi-rows-options-item-color);
+            .use-var(border-radius, dropdown-multi-rows-options-item-border-radius);
+            .use-var(background, dropdown-multi-rows-options-item-background);
+
+            &.selected {
+                .use-var(color, dropdown-multi-rows-options-item-selected-color);
+                .use-var(background, dropdown-multi-rows-options-item-selected-background);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+        }
+
+        &-item-col &-item-icon {
+            display: none;
+        }
+    }
+
+    &-mask {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .use-var(background-color, dropdown-mask-background-color);
+
+        &.is-show {
+            opacity: 1;
+        }
+    }
+}

package/metaData/components/dropdown-menu/api.md

@@ -0,0 +1,83 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultSelectIndex|初始被选择的选择器的序号|number|-|
+|selectIndex|(受控) 被选择的选择器的序号|number|-|
+|disabled|选择器禁用状态|boolean\[\]|-|
+|selectTips|选择器的说明|string\[\]|-|
+|onSelectChange|当选中的选择器改变的时候触发的回调函数|(selectIndex: number) =\> void|-|
+|icon|选择器右侧的图标|ReactNode|-|
+|defaultShowDropdown|初始状态,下拉框状态|boolean|-|
+|showDropdown|可选受控，组件挂载时下拉框的状态|boolean|-|
+|onDropdownChange|下拉框展示状态改变时触发的回调函数|(dropdown: boolean, selectIndex?: number) =\> void|-|
+|getContainer|获得下拉框的容器|() =\> HTMLDivElement|-|
+|chooseAndClose|选择后是否收起面板，仅单选有效|boolean|true|
+|onCancel|取消选择|() =\> void|-|
+|children|自定义下拉框元素|ReactNode|-|
+|extraForDropdown|dropdown参数|DropdownCommonProps|-|
+|multiple|是否支持多选|boolean|false|
+|options|下拉框展示的选择项，其中级联选项仅单选支持|string\[\] \| OptionsItem\[\]\[\] \| CascadeOptions\[\]|必填|
+|defaultValues|初始选择项|ReactText\[\] \| ReactText\[\]\[\]|-|
+|values|(受控) 每个选择器选中的项|ReactText\[\] \| ReactText\[\]\[\]|-|
+|renderSelectLabel|自定义选择器|((op: OptionsItem, index: number) =\> ReactNode) \| ((op: OptionsItem\[\], index: number) =\> ReactNode)|-|
+|onOptionClick|点击选项时触发的回调函数|((value: ReactText, item: OptionsItem, selectIndex?: number) =\> void) \| ((selected: boolean, val: ReactText, item: OptionsItem, selectIndex?: number) =\> void)|-|
+|onOptionChange|选项改变时触发的回调函数|((value: ReactText, item: OptionsItem, selectIndex?: number) =\> void) \| ((vals: ReactText\[\], item: OptionsItem, selectIndex?: number) =\> void)|-|
+|onValuesChange|所有选择器选项总值改变时的回调函数|((values: ReactText\[\]) =\> void) \| ((values: ReactText\[\]\[\]) =\> void)|-|
+|getFormattedOptions|格式化传入的options|((options: string\[\] \| OptionsItem\[\]\[\] \| CascadeOptions\[\], values?: ReactText\[\]) =\> \{ formattedOptions: OptionsItem\[\]\[\]; formattedValue: ReactText\[\]; \}) \| ((options: string\[\] \| \.\.\. 1 more \.\.\. \| CascadeOptions\[\], values?: ReactText\[\]\[\]) =\> \{ \.\.\.; \})|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> DropdownCommonProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|extraNode|下拉框底部元素|ReactNode|-|
+|top|定位下拉框出现的位置|number|-|
+|bottom|向上展开时下拉框出现的位置|number|-|
+|direction|展开方向|"up" \| "down"|"down"|
+|height|受控模式，下拉框高度|number|-|
+|maxHeight|下拉框最大的高度|number|500|
+|clickOtherToClose|点击其他区域是否取消选择|boolean|true|
+|touchToClose|是否在触发touchstart时就取消选择，否则在click之后再取消选择|boolean|true|
+|dropdownAnimationTimeout|展开收起动画的时间|number|300|
+|dropdownAnimationFunction|展开收起动画曲线函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|showMask|是否展示遮罩层|boolean|true|
+|maskAnimationTimeout|蒙层动画时长|number|500|
+|maskAnimationFunction|蒙层动画函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|useColumn|使用多列标签样式，传 true 为 4 列，传数字为指定 n 列|number \| boolean|false|
+|optionIcon|选项附带图标|ReactNode|-|
+|mountOnEnter|是否在打开下拉框时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|getAnchorElement|用于定位的元素，优先级低于top/bottom|() =\> HTMLElement|当前DOM所在位置的父元素|
+|isStopTouchEl|点击某元素时是否阻止关闭面板, 优先级高于\`getStopTouchElement\`，当 clickOtherToClose=true 时有效|(el: HTMLElement) =\> boolean|-|
+|getStopTouchElements|可阻止关闭面板的元素，当 clickOtherToClose=true 时有效|() =\> HTMLElement\[\]|当前组件的父元素|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+|getPortalContainer|获取挂载容器|() =\> HTMLElement|-|
+
+> OptionsItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|
+
+> CascadeOptions
+
+|参数|描述|类型|
+|----------|-------------|------|
+|children|级联选择的下一级内容|OptionsItem\[\]|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|

package/metaData/components/dropdown-menu/style.md

@@ -0,0 +1,60 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-dropdown-menu {
+    .@{prefix}-select{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .onepx-border-var(bottom, line-color);
+        &-item {
+            position: relative;
+            .use-var(padding, dropdown-menu-padding);
+            .use-var(font-size, dropdown-menu-font-size);
+            .use-var(line-height, dropdown-menu-line-height);
+            flex: 1;
+            display:flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            .use-var(color, dropdown-menu-color);
+            &.is-disabled {
+                .use-var(color, dropdown-menu-disabled-color);
+            }
+            &.is-selected {
+                .use-var(color, dropdown-menu-selected-color);
+            }
+            &-tip {
+                display: inline-block;
+                white-space: nowrap;
+                .use-var(color, dropdown-menu-tip-color);
+                .use-var-with-rtl(padding-right, dropdown-menu-tip-padding-right);
+            }
+            &-label {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                &-text {
+                    flex: auto;
+                    display: inline-block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    .use-var(max-width, dropdown-menu-label-max-width);
+                    text-overflow: ellipsis;
+                }
+            }
+            &-icon {
+                flex: none;
+                .use-var(color, dropdown-menu-icon-color);
+                .use-var(width, dropdown-menu-icon-size);
+                .use-var(height, dropdown-menu-icon-size);
+                .use-var-with-rtl(margin-left, dropdown-menu-icon-margin-left);
+                transform: rotate(0deg);
+                transition: transform .2s cubic-bezier(.34, .69, .1, 1);
+                &.is-show {
+                    .use-var(color, dropdown-menu-icon-selected-color);
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+}

package/metaData/components/ellipsis/api.md

@@ -0,0 +1,25 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|maxHeight|最大显示高度，单位 px，优先级高于 maxLine|number|-|
+|endExcludes|文本结尾处（缩略符之前）需要过滤掉的字符|string\[\]|[]|
+|reflowOnResize|容器大小变化时是否自适应，使用原生缩略时默认为 true|boolean|false|
+|floatEllipsisNode|文本缩略时，缩略符节点是否浮在文本右下角（默认加渐变色背景）|boolean|false|
+|onReflow|文本缩略处理的完成回调|(ellipsis: boolean, text: string) =\> void|-|
+|text|需要缩略的文本内容|string|必填|
+|ellipsis|是否开启缩略|boolean|true|
+|maxLine|最大显示行数|number|1|
+|dangerouslyUseInnerHTML|是否使用 innerHTML 插入文本（警告：务必确保 text 安全可靠，否则易导致 XSS 漏洞）|boolean|false|
+|ellipsisNode|自定义缩略符节点，文本缩略时插入文本尾部|ReactNode|"..."|
+|collapseNode|自定义收起符节点，不为空且文本展开时插入文本尾部|ReactNode|-|
+|onEllipsisNodeClick|缩略节点点击事件|(e: MouseEvent\<HTMLSpanElement, MouseEvent\>) =\> void|-|
+|onCollapseNodeClick|收起节点点击事件|(e: MouseEvent\<HTMLSpanElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|reflow|控制容器重新编排|() =\> void|

package/metaData/components/ellipsis/style.md

@@ -0,0 +1,31 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-ellipsis {
+    .use-var(font-size, ellipsis-default-text-size);
+
+    &-native.ellipsis,
+    &-js-content-initial {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        -webkit-box-orient: vertical;
+        position: relative;
+    }
+
+    &-native-ellipsis-node {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .use-var(background, ellipsis-float-ellipsis-node-background);
+        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
+    }
+
+    &-js-content-text-pre {
+        white-space: pre-line;
+    }
+    
+    &-js-content-ellipsis {
+        display: none;
+    }
+}

package/metaData/components/form/api.md

@@ -0,0 +1,82 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|layout|表单项布局|"horizontal" \| "vertical" \| "inline"|"horizontal"|
+|form|表单实例|IFormInstance|-|
+|initialValues|表单初始数据|Record\<string, any\>|-|
+|onValuesChange|表单项数据变化时的回调|(changedValues: any, values: any) =\> void|-|
+|onChange|表单项数据变化时的回调（仅用户操作表单时触发）|(changedValues: any, values: any) =\> void|-|
+|onSubmit|表单项数据变化时的回调|(values: any, otherInfo?: IFieldError\[\]) =\> void|-|
+|onSubmitFailed|表单项数据变化时的回调|(values: any, errorInfo: IFieldError\[\] \| Error) =\> void|-|
+|disabled|表单禁止输入|boolean|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLFormElement|
+|form|Form对象实例|IFormInstance|
+
+> Form.Item
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|表单项名|ReactNode|必填|
+|style|表单项Stylesheet|CSSProperties|-|
+|className|表单项样式|string|-|
+|field|表单项字段|string|必填|
+|required|表单项是否必填|boolean|-|
+|disabled|表单项是否禁用|boolean|-|
+|layout|表单项布局|"horizontal" \| "vertical" \| "inline"|"horizontal"|
+|children|表单项子节点|ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|必填|
+|shouldUpdate|表单项是否刷新|IShouldUpdateFunc|-|
+|rules|表单项规则|IRules\[\]|-|
+|extra|表单项下方节点|ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|-|
+|trigger|触发事件更新事件名称|string|"onChange"|
+|requiredIcon|自定义必填标识|ReactNode|-|
+|initialValue|表单项初始数据|any|-|
+|displayType|手动指定为内置组件的类型|"Input" \| "Textarea" \| "Checkbox" \| "CheckboxGroup" \| "DatePicker" \| "Picker" \| "Radio" \| "RadioGroup" \| "Slider" \| "Switch" \| "ImagePicker" \| "Rate" \| "Stepper"|-|
+
+> IFormInstance
+
+|参数|描述|类型|
+|----------|-------------|------|
+|getFieldValue|获取单个表单项值|(name: string) =\> any|
+|getFieldsValue|获取多个表单项值|(name?: string\[\]) =\> Record\<string, any\>|
+|getFieldError|获取单个表单项的错误|(name: string) =\> ReactNode\[\]|
+|resetFields|重置表单项|() =\> void|
+|setFieldValue|设置单个表单项值|(name: string, value: any) =\> boolean|
+|setFieldsValue|设置多个表单项值|(value: Record\<string, any\>) =\> void|
+|validateFields|校验所有表单项|() =\> Promise\<IFieldError\[\]\>|
+|submit|提交表单|() =\> void|
+
+> IFieldError
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|-|any|
+|errors|-|ReactNode\[\]|
+|warnings|-|ReactNode\[\]|
+|field|-|string|
+|dom|-|HTMLDivElement|
+
+> IRules
+
+```
+ITypeRules<ValidatorType.Number> | ITypeRules<ValidatorType.String> | ITypeRules<ValidatorType.Array> | ITypeRules<ValidatorType.Boolean> | ITypeRules<ValidatorType.Object> | ITypeRules<ValidatorType.Custom>
+```
+
+> FormInternalComponentType
+
+```
+"Input" | "Textarea" | "Checkbox" | "CheckboxGroup" | "DatePicker" | "Picker" | "Radio" | "RadioGroup" | "Slider" | "Switch" | "ImagePicker" | "Rate" | "Stepper"
+```
+
+> FormItemRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/form/style.md

@@ -0,0 +1,105 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-form {
+    &-item {
+        display: flex;
+        align-items: flex-start;
+        border-top-width: 1px;
+        border-top-style: solid;
+        .use-var(border-top-color, form-item-border-divider-color);
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    &-label-item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        .use-var(font-size, form-item-label-item-font-size);
+        .use-var(line-height, form-item-label-item-line-height);
+        .use-var(color, form-item-label-item-color);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
+        .use-var(width, form-item-label-item-width);
+
+        &-required-asterisk {
+            position: absolute;
+            .set-prop-with-rtl(left, -0.6em);
+            top: 0;
+
+            .use-var(font-size, form-item-label-item-font-size);
+            .use-var(line-height, form-item-label-item-line-height);
+            .use-var(color, form-item-label-item-required-asterisk-color);
+        }
+        .disabled & {
+            .use-var(color, input-disabled-color);
+        }
+    }
+    &-item-control {
+        padding: 16px 0;
+        .@{prefix}-input-wrap, .@{prefix}-input {
+            padding: 0;
+        }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
+        &-wrapper {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            .@{prefix}-input-wrap.single-line {
+                .use-var(height, input-text-line-height);
+            }
+        }
+    }
+    &-item-message {
+        .rem(font-size, 12);
+        .use-var(color, form-item-label-item-required-asterisk-color);
+        .rem(margin-top, -5);
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem-with-rtl(margin-right, 4);
+        }
+        margin-bottom: 16px;
+    }
+    &-item-error-message {
+        .use-var(color, form-item-error-message-color);
+    }
+
+    &-item-warning-message {
+        .use-var(color, form-item-warning-message-color);
+    }
+
+    &-item.@{prefix}-form-item-vertical {
+        display: block;
+        .@{prefix}-input-wrap {
+            .set-prop-with-rtl(padding-left, 0);
+        }
+        .@{prefix}-form-label-item {
+            width: auto;
+            margin-top: 16px;
+            .use-var(height, form-item-label-item-font-size);
+            .use-var( line-height, form-item-label-item-font-size);
+            &-required-asterisk {
+                .use-var(height, form-item-label-item-font-size);
+                .use-var( line-height, form-item-label-item-font-size);
+            }
+        }
+    }
+
+    &-picker-link-container {
+        .rem(font-size, 16);
+        .use-var(color, font-color);
+        &-placeholder {
+            .use-var(color, input-placeholder-color);
+        }
+    }
+}

package/metaData/components/grid/api.md

@@ -0,0 +1,31 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|data|传入的数据|GridData\[\]|必填|
+|columns|一行的列数|number|3|
+|border|是否有边框|boolean|false|
+|gutter|格子间的间距|number \| \{ x: number; y: number; \}|0|
+|shape|格子的形状，可选值为 circle|string|"square"|
+|isSliding|溢出时是否支持滑动|boolean|false|
+|direction|格子内容排列的方向，可选值为 horizontal|string|"vertical"|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> GridData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|img|传入图标的资源地址|ReactNode|
+|title|传入的标题文字内容|ReactNode|
+|content|传入的描述文字内容|ReactNode|
+|className|自定义样式|string|
+|onClick|点击后的回调函数|(item: GridData) =\> void|
+|itemStyle|每个格子自定义样式|CSSProperties|
+|renderGrid|自定义单个 grid 的创建函数|(item: GridData, colIndex: number, rowIndex: number) =\> ReactNode|

package/metaData/components/grid/style.md

@@ -0,0 +1,109 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-grid {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &-rows {
+        display: flex;
+
+        &-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+
+            &-icon {
+                .use-var(width, grid-icon-width);
+                .use-var(height, grid-icon-height);
+            }
+
+            &-icon.circle {
+                border-radius: 50%;
+            }
+
+            &-text {
+                display: flex;
+                flex-direction: column;
+                .use-var(margin-top, grid-vertical-text-margin-top);
+                text-align: center;
+            }
+
+            &-title {
+                .use-var(font-size, grid-vertical-title-font-size);
+                .use-var(line-height, grid-vertical-title-line-height);
+            }
+
+            &-content {
+                .use-var(font-size, grid-vertical-content-font-size);
+                .use-var(line-height, grid-vertical-content-line-height);
+                .use-var(margin-top, grid-vertical-content-margin-top);
+                .use-var(color, sub-info-font-color);
+            }
+
+        }
+
+        &-item.horizontal {
+            flex-direction: row;
+
+            .@{prefix}-grid-rows-item {
+
+                &-text {
+                    .use-var-with-rtl(margin-left, grid-horizontal-text-margin-left);
+                    margin-top: 0;
+                    .set-value-with-rtl(text-align, left);
+                }
+
+                &-content {
+                    .use-var(margin-top, grid-horizontal-content-margin-top);
+                }
+
+            }
+        }
+
+        &-item.border {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .vertical-border:after {
+                content: "";
+                width: 1px;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: scaleX(.5) translateY(-50%);
+                .use-var(height, grid-border-size);
+                .use-var(background-color, grid-border-color);
+            }
+
+            .horizontal-border:after {
+                content: "";
+                height: 1px;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: scaleY(.5) translateX(-50%);
+                .use-var(width, grid-border-size);
+                .use-var(background-color, grid-border-color);
+            }
+        }
+    }
+}
+.@{prefix}-grid.sliding {
+    display: inline-block;
+    overflow-x: auto;
+}
+
+.@{prefix}-grid.sliding::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

package/metaData/components/icon/api.md

@@ -0,0 +1,7 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|节点类名|string|-|
+|useCurrentColor|fill值是否使用color属性值，否则保留原有颜色|boolean|true|
+|style|自定义样式|React.CSSProperties|-|