@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/picker/api.md

@@ -0,0 +1,81 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|data|数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数|PickerData\[\] \| PickerData\[\]\[\] \| ValueType\[\]\[\]|必填|
+|cascade|是否联动|boolean|true|
+|cols|列数(最大为5；cascade=true时才使用)|number|3|
+|rows|行数(一列可选项的行数)，必须是奇数，最小为3个|number|5|
+|disabled|是否不可用|boolean|false|
+|value|值, 格式是\[value1, value2, value3\], 对应数据源的相应级层value，如果不传默认选每一列的第一个值|ValueType\[\]|-|
+|onHide|点击遮罩层或取消、确定按钮的隐藏回调|(scene?: string) =\> void|-|
+|onChange|选中后的回调|(selectedValue: ValueType\[\]) =\> void|-|
+|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
+|itemStyle|每列样式|CSSProperties|-|
+|visible|是否展示选择器|boolean|false|
+|okText|弹窗确认已选值的文案|string|"确定"|
+|dismissText|弹窗取消的文案|string|"取消"|
+|onOk|点击选中时执行的回调|(value: ValueType\[\], data: PickerData\[\]) =\> void|-|
+|onDismiss|点击取消时执行的回调|() =\> void|-|
+|clickable|是否可通过点击操作选择内容|boolean|true|
+|hideEmptyCols|是否隐藏无数据的空列，常用于级联选择|boolean|false|
+|title|选择器标题|string|""|
+|maskClosable|点击蒙层是否关闭菜单|boolean|false|
+|touchToStop|是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥|number \| boolean|false|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|true|
+|renderLinkedContainer|将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器|(value: ValueType\[\], data: PickerData\[\]) =\> ReactNode|-|
+|renderExtraHeader|自定义头部扩展区域|() =\> ReactNode|-|
+|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值|
+|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|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|getCellMovingStatus|每一列的滑动状态|() =\> PickerCellMovingStatus\[\]|
+|updateLayout|手动更新元素布局|() =\> void|
+|getAllColumnValues|获取所有列的值|() =\> ValueType\[\]|
+|getColumnValue|获取第 n 列的值|(index: number) =\> ValueType|
+|scrollToCurrentIndex|直接跳到当前最近一行（调用时将中断滚动）|() =\> void|
+
+> PickerData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|每一列展示的每项文案对应的值|ValueType|
+|label|每一列展示的文案|ReactNode|
+|children|级联状态下，该列对应的下一列数据|PickerData\[\]|
+
+> ValueType
+
+```
+string | number
+```
+
+> PickerCellMovingStatus
+
+```
+"normal" | "moving" | "scrolling"
+```

package/metaData/components/picker/style.md

@@ -0,0 +1,46 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker {
+
+    .@{prefix}-popup-content {
+        .use-var(box-shadow, picker-wrapper-shadow);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+    }
+
+    &-header {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .use-var(background-color, picker-header-background);
+        .use-var(height, picker-header-height);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+
+        &-title {
+            flex: 1;
+            text-align: center;
+            .use-var(font-size, picker-title-font-size);
+            .use-var(padding, picker-title-padding);
+            .use-var(color, font-color);
+            .text-overflow();
+        }
+
+        &-btn {
+            position: absolute;
+            .use-var(font-size, picker-button-font-size);
+            .use-var(padding, picker-button-padding);
+
+            &.left {
+                .set-prop-with-rtl(left, 0);
+                .use-var(color, picker-left-btn-color);
+            }
+
+            &.right {
+                .set-prop-with-rtl(right, 0);
+                .use-var(color, picker-right-btn-color);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,49 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|data|数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数|PickerData\[\] \| PickerData\[\]\[\] \| ValueType\[\]\[\]|必填|
+|cascade|是否联动|boolean|true|
+|cols|列数(最大为5；cascade=true时才使用)|number|3|
+|rows|行数(一列可选项的行数)，必须是奇数，最小为3个|number|5|
+|disabled|是否不可用|boolean|false|
+|value|值, 格式是\[value1, value2, value3\], 对应数据源的相应级层value|ValueType\[\]|-|
+|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
+|itemStyle|每列样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|clickable|是否可通过点击操作选择内容|boolean|true|
+|hideEmptyCols|是否隐藏无数据的空列，常用于级联选择|boolean|false|
+|touchToStop|是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥|number \| boolean|false|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|getCellMovingStatus|每一列的滑动状态|() =\> PickerCellMovingStatus\[\]|
+|getAllColumnValues|获取所有列的值|() =\> ValueType\[\]|
+|getColumnValue|获取第 n 列的值|(index: number) =\> ValueType|
+|updateLayout|手动更新元素布局|() =\> void|
+|resetValue|重置选择器的值为传入的\`value\`值|() =\> void|
+|scrollToCurrentIndex|直接跳到当前最近一行（调用时将中断滚动）|() =\> void|
+|getAllColumnData|获取所有列的 data|() =\> PickerData\[\]|
+
+> PickerData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|每一列展示的每项文案对应的值|ValueType|
+|label|每一列展示的文案|ReactNode|
+|children|级联状态下，该列对应的下一列数据|PickerData\[\]|
+
+> ValueType
+
+```
+string | number
+```
+
+> PickerCellMovingStatus
+
+```
+"normal" | "moving" | "scrolling"
+```

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

@@ -0,0 +1,75 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker-view {
+    .noselect();
+    .use-var(height, picker-view-wrapper-height);
+    position: relative;
+}
+
+.@{prefix}-picker {
+
+    &-multi {
+        .use-var(color, font-color);
+        .use-var(font-size, picker-view-font-size);
+        .use-var(line-height, picker-view-cell-height);
+    }
+
+    &-multi,
+    &-selection {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &-column {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        &-item-wrap {
+            box-sizing: content-box;
+            will-change: transform;
+        }
+
+        &-item {
+            white-space: nowrap;
+            overflow-y: hidden;
+            overflow-x: auto;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &-selection {
+        will-change: transform;
+        flex-direction: column;
+        pointer-events: none;
+
+        &-mask-top {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-top-background);
+
+        }
+
+        &-mask-bottom {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-bottom-background);
+        }
+
+        &-bar {
+            width: 100%;
+            .use-var(height, picker-view-cell-height);
+            flex: 0 0 auto;
+            .onepx-border-var(top, picker-view-selection-border-color);
+            .onepx-border-var(bottom, picker-view-selection-border-color);
+        }
+    }
+}

package/metaData/components/popover/api.md

@@ -0,0 +1,136 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|气泡载体，组件会监听其变化以重新计算布局，建议用 useMemo 包裹|ReactNode|-|
+|innerPopoverClassName|自定义气泡类名|string|''|
+|visible|是否显示气泡，受控模式|boolean|-|
+|content|气泡内容，组件会监听其变化以重新计算布局，建议用 useMemo 包裹|ReactNode|null|
+|direction|气泡展示的位置|"topLeft" \| "topCenter" \| "topRight" \| "bottomLeft" \| "bottomCenter" \| "bottomRight"|'topRight'|
+|duration|自动关闭场景下的停留时长，单位毫秒，为0则表示不自动关闭|number|0|
+|transitionTimeout|动画时长，单位毫秒|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|minWidth|气泡最小宽度|string|'10px'|
+|maxWidth|气泡最大宽度|string|'90vw'|
+|transitionName|气泡过渡动画类名，修改类名需自行实现动画|string|'fade'|
+|verticalOffset|气泡垂直方向上相对于子元素的偏移量，单位为px|number|10|
+|horizontalOffset|气泡水平方向上相对于子元素的偏移量，单位为px|number|8|
+|useAutoDirection|气泡边界自适应，开启时会在气泡左右边界留出安全距离，气泡与视窗上下边界小于安全距离时改变气泡的垂直方向，使其在视窗中漏出|boolean \| \{ horizontal: boolean; vertical: boolean; \}|true|
+|edgeOffset|气泡距离边界的安全距离，单位为px|number \| EdgeOffset|14|
+|verticalScrollThrottle|滚动容器的滚动事件节流粒度，单位ms|number|100|
+|arrowWidth|气泡尖角大小，单位为px|number|9|
+|preventBodyClick|气泡出现后，是否屏蔽非内部元素的点击事件，点击非内部元素后只做隐藏气泡操作|boolean|false|
+|clickOtherToClose|点击非子元素和气泡元素是否关闭气泡|boolean|true|
+|clickSelfToClose|点击气泡和子元素是否关闭气泡|boolean|true|
+|touchOtherToClose|触碰非子元素和气泡元素是否关闭气泡|boolean|false|
+|touchSelfToClose|触碰气泡和子元素是否关闭气泡|boolean|false|
+|touchToClose|触碰页面是否关闭气泡，是touchOtherToClose和touchSelfToClose的默认值|boolean|false|
+|theme|气泡的主题，black主题是黑底白字，white主题是白底黑字|"black" \| "white"|'black'|
+|needShadow|气泡内容是否需要阴影|boolean|false|
+|bordered|气泡是否有border|boolean|白色主题默认有边框，黑色主题没有|
+|defaultVisible|气泡是否可见的默认值，非受控模式|boolean|false|
+|showCloseIcon|是否展示关闭按钮|boolean|false|
+|textSuffix|文字气泡后置元素，如操作按钮等|ReactNode|null|
+|mode|气泡挂载位置，follow模式挂载在当前子元素下，global模式挂载在body上|"follow" \| "global"|'follow'|
+|showMask|是否展示蒙层|boolean|false|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|renderArrow|自定义箭头渲染|(options: \{ arrowWidth?: number; arrowLeft: number; direction: Direction; \}) =\> ReactNode|-|
+|onChange|状态发生改变的回调事件|(visible: boolean) =\> void|() => void|
+|onClickCloseIcon|点击关闭icon的回调|() =\> void|() => void|
+|onClickTextSuffix|点击文字气泡后置元素回调|() =\> void|() => void|
+|onClickMask|点击蒙层回调|() =\> void|() => void|
+|getVerticalScrollContainer|获取页面垂直方向的滚动容器|() =\> HTMLElement|() => document|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|child|气泡包裹子元素dom|HTMLDivElement|
+|innerPopover|气泡组件 ref|PopoverInnerRef|
+|innerPopoverDom|气泡元素dom|HTMLDivElement|
+|updatePosition|手动更新气泡的位置|() =\> void|
+|dom|组件外层dom元素|HTMLDivElement|
+
+> Popover.Menu
+
+气泡菜单
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|menu|菜单项列表|(string \| PopoverMenuItem)\[\]|必填|
+|menuLayout|菜单排列顺序，默认为竖向菜单，支持横向菜单和竖向菜单，横向菜单一行最多可放4个菜单|"vertical" \| "horizontal"|'vertical'|
+|useClickStatus|菜单项是否有点击态|boolean|false|
+|clickStatusDuration|菜单项点击态持续时长，单位毫秒|number|300|
+|onSelect|选择可用菜单项的回调|(value: string, item: string \| PopoverMenuItem) =\> void|() => {}|
+|onClickMenuItem|点击所有菜单项回调|(value: string, item: string \| PopoverMenuItem) =\> void|必填|
+|children|气泡载体，组件会监听其变化以重新计算布局，建议用 useMemo 包裹|ReactNode|-|
+|innerPopoverClassName|自定义气泡类名|string|''|
+|visible|是否显示气泡，受控模式|boolean|-|
+|content|气泡内容，组件会监听其变化以重新计算布局，建议用 useMemo 包裹|ReactNode|null|
+|direction|气泡展示的位置|"topLeft" \| "topCenter" \| "topRight" \| "bottomLeft" \| "bottomCenter" \| "bottomRight"|'topRight'|
+|duration|自动关闭场景下的停留时长，单位毫秒，为0则表示不自动关闭|number|0|
+|transitionTimeout|动画时长，单位毫秒|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|minWidth|气泡最小宽度|string|'10px'|
+|maxWidth|气泡最大宽度|string|'90vw'|
+|transitionName|气泡过渡动画类名，修改类名需自行实现动画|string|'fade'|
+|verticalOffset|气泡垂直方向上相对于子元素的偏移量，单位为px|number|10|
+|horizontalOffset|气泡水平方向上相对于子元素的偏移量，单位为px|number|8|
+|useAutoDirection|气泡边界自适应，开启时会在气泡左右边界留出安全距离，气泡与视窗上下边界小于安全距离时改变气泡的垂直方向，使其在视窗中漏出|boolean \| \{ horizontal: boolean; vertical: boolean; \}|true|
+|edgeOffset|气泡距离边界的安全距离，单位为px|number \| EdgeOffset|14|
+|verticalScrollThrottle|滚动容器的滚动事件节流粒度，单位ms|number|100|
+|arrowWidth|气泡尖角大小，单位为px|number|9|
+|preventBodyClick|气泡出现后，是否屏蔽非内部元素的点击事件，点击非内部元素后只做隐藏气泡操作|boolean|false|
+|clickOtherToClose|点击非子元素和气泡元素是否关闭气泡|boolean|true|
+|clickSelfToClose|点击气泡和子元素是否关闭气泡|boolean|true|
+|touchOtherToClose|触碰非子元素和气泡元素是否关闭气泡|boolean|false|
+|touchSelfToClose|触碰气泡和子元素是否关闭气泡|boolean|false|
+|touchToClose|触碰页面是否关闭气泡，是touchOtherToClose和touchSelfToClose的默认值|boolean|false|
+|theme|气泡的主题，black主题是黑底白字，white主题是白底黑字|"black" \| "white"|'black'|
+|needShadow|气泡内容是否需要阴影|boolean|false|
+|bordered|气泡是否有border|boolean|白色主题默认有边框，黑色主题没有|
+|defaultVisible|气泡是否可见的默认值，非受控模式|boolean|false|
+|showCloseIcon|是否展示关闭按钮|boolean|false|
+|textSuffix|文字气泡后置元素，如操作按钮等|ReactNode|null|
+|mode|气泡挂载位置，follow模式挂载在当前子元素下，global模式挂载在body上|"follow" \| "global"|'follow'|
+|showMask|是否展示蒙层|boolean|false|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|renderArrow|自定义箭头渲染|(options: \{ arrowWidth?: number; arrowLeft: number; direction: Direction; \}) =\> ReactNode|-|
+|onChange|状态发生改变的回调事件|(visible: boolean) =\> void|() => void|
+|onClickCloseIcon|点击关闭icon的回调|() =\> void|() => void|
+|onClickTextSuffix|点击文字气泡后置元素回调|() =\> void|() => void|
+|onClickMask|点击蒙层回调|() =\> void|() => void|
+|getVerticalScrollContainer|获取页面垂直方向的滚动容器|() =\> HTMLElement|() => document|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Direction
+
+```
+"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"
+```
+
+> EdgeOffset
+
+|参数|描述|类型|
+|----------|-------------|------|
+|top|上|number|
+|right|右|number|
+|bottom|下|number|
+|left|左|number|
+
+> PopoverInnerRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件容器dom|HTMLDivElement|
+|content|-|HTMLDivElement|
+
+> PopoverMenuItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|text|菜单项文本|ReactNode|必填|
+|value|菜单项值|string|text|
+|icon|菜单项的icon组件|ReactNode|null|
+|disabled|是否禁用菜单项|boolean|false|

package/metaData/components/popover/style.md

@@ -0,0 +1,226 @@
+@import "../../../style/mixin.less";
+@import "./menu.less";
+
+.full() {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.@{prefix}-popover {
+    position: relative;
+    display: inline-flex;
+
+    .popover-child-inner {
+        font-size: 0;
+        line-height: 1;
+    }
+}
+
+.@{prefix}-popover-mask {
+    .full-screen();
+    .use-var(background, popover-mask-background);
+    z-index: @full-screen-z-index;
+}
+
+.@{prefix}-popover-inner {
+    box-sizing: border-box;
+    position: absolute;
+    width: max-content;
+    z-index: @full-screen-z-index + 10;
+    background-color: transparent;
+    visibility: hidden;
+    will-change: transform;
+    .use-var(transition, popover-inner-transition);
+    .use-var(color, popover-content-color);
+
+    &.with-shadow {
+        .popover-bg {
+            .use-var(box-shadow, popover-inner-background-shadow);
+        }
+
+        .popover-arrow {
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+                .use-var(box-shadow, popover-inner-top-arrow-shadow);
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+                .use-var(box-shadow, popover-inner-bottom-arrow-shadow);
+            }
+        }
+    }
+
+    &.show {
+        visibility: visible;
+    }
+
+    .popover-content {
+        position: relative;
+        z-index: 1;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+    }
+
+    .popover-bg {
+        position: absolute;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+        .use-var(background-color, popover-background-color);
+        .use-var(opacity, popover-inner-opacity);
+    }
+
+    .content-text {
+        white-space: normal;
+        word-break: break-all;
+        text-align: left;
+        .use-var(font-size, popover-content-font-size);
+        .use-var(line-height, popover-content-line-height);
+        .use-var(padding, popover-content-padding);
+    }
+
+    &.with-suffix {
+        .popover-content {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .icon-divider {
+        width: 1PX;
+        .use-var(height, popover-icon-divider-height);
+        .hairline-var(popover-icon-divider-color, left);
+    }
+
+    .text-close-icon {
+        display: inline-flex;
+        .use-var(font-size, popover-icon-size);
+        .use-var(padding, popover-icon-padding);
+    }
+
+    .text-suffix {
+        .use-var-with-rtl(padding-right, popover-text-suffix-edge);
+        flex: 0 0 auto;
+    }
+
+    .popover-arrow {
+        position: absolute;
+        transform: rotate(45deg);
+        .use-var(width, popover-arrow-size);
+        .use-var(height, popover-arrow-size);
+        .use-var(background-color, popover-background-color);
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+            &,
+            .popover-arrow-content {
+                .use-var(border-bottom-right-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+            &,
+            .popover-arrow-content {
+                .use-var(border-top-left-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+            transform: translateY(50%) rotate(45deg);
+        }
+
+        &.topRight {
+            bottom: 0;
+            right: 0;
+        }
+
+        &.topCenter,
+        &.topLeft {
+            bottom: 0;
+            left: 0;
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+            transform: translateY(-50%) rotate(45deg);
+        }
+
+        &.bottomRight {
+            top: 0;
+            right: 0;
+        }
+
+        &.bottomCenter,
+        &.bottomLeft {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    // 白色主题
+
+    &.white-theme {
+        .use-var(color, popover-content-white-theme-color);
+
+        .popover-bg {
+            .use-var(background-color, popover-white-theme-background-color);
+            .use-var(opacity, popover-inner-white-theme-opacity);
+        }
+
+        .popover-arrow {
+            .use-var(background-color, popover-white-theme-background-color);
+        }
+
+        .popover-arrow-content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-color: inherit;
+        }
+    }
+
+    // 带border的白色主题
+
+    &.white-theme.bordered {
+        .popover-bg {
+            .hairline-var(popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow-content {
+            .use-var(border-color, popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow {
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+                .popover-arrow-content {
+                    .hairline-bottom-right-var(popover-content-white-theme-border-color);
+                }
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+                .popover-arrow-content {
+                    .hairline-top-left-var(popover-content-white-theme-border-color);
+                }
+            }
+        }
+    }
+}
+
+// 全局模式
+.global-mode.@{prefix}-popover-inner {
+    position: fixed;
+}