@mpxjs/webpack-plugin 2.10.17-beta.3 → 2.10.17-beta.6

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -13,23 +13,23 @@ import Portal from './mpx-portal';
 const styles = {
     pagination_x: {
         position: 'absolute',
-        bottom: 25,
+        bottom: 0,
         left: 0,
         right: 0,
         flexDirection: 'row',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagination_y: {
         position: 'absolute',
-        right: 15,
+        right: 0,
         top: 0,
         bottom: 0,
         flexDirection: 'column',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagerWrapperx: {
         position: 'absolute',
@@ -49,16 +49,6 @@ const styles = {
         justifyContent: 'flex-start'
     }
 };
-const dotCommonStyle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginLeft: 3,
-    marginRight: 3,
-    marginTop: 3,
-    marginBottom: 3,
-    zIndex: 98
-};
 const activeDotStyle = {
     zIndex: 99
 };
@@ -71,7 +61,18 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const dotCommonStyle = {
+        width: dotWidth,
+        height: dotHeight,
+        borderRadius: dotRadius,
+        marginLeft: dotSpacing,
+        marginRight: dotSpacing,
+        marginTop: dotSpacing,
+        marginBottom: dotSpacing,
+        zIndex: 98
+    };
+    const displayMultipleItems = props['display-multiple-items'] || 1;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -97,18 +98,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preMarginShared = useSharedValue(preMargin);
     const nextMarginShared = useSharedValue(nextMargin);
     const autoplayShared = useSharedValue(autoplay);
+    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 默认前后补位的元素个数
-    const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
+    const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
+    const displayMultipleItemsShared = useSharedValue(displayMultipleItems);
     const circularShared = useSharedValue(circular);
-    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
     const childrenLength = useSharedValue(children.length);
     const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width;
     const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height;
     const dir = horizontal === false ? 'y' : 'x';
     const pstep = dir === 'x' ? initWidth : initHeight;
-    const initStep = isNaN(pstep) ? 0 : pstep;
+    const initStep = isNaN(pstep) ? 0 : pstep / displayMultipleItems;
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
@@ -152,6 +154,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         'style',
         'indicator-dots',
         'indicator-color',
+        'indicator-width',
         'indicator-active-color',
         'previous-margin',
         'vertical',
@@ -167,7 +170,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const { width, height } = e.nativeEvent.layout;
         const realWidth = dir === 'x' ? width - preMargin - nextMargin : width;
         const realHeight = dir === 'y' ? height - preMargin - nextMargin : height;
-        const iStep = dir === 'x' ? realWidth : realHeight;
+        const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems;
         if (iStep !== step.value) {
             step.value = iStep;
             updateCurrent(propCurrent, iStep);
@@ -193,7 +196,17 @@ const SwiperWrapper = forwardRef((props, ref) => {
         for (let i = 0; i < children.length; i++) {
             dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>);
         }
-        return (<View pointerEvents="none" style={styles['pagination_' + dir]}>
+        let paginationStyle = styles['pagination_' + dir];
+        if (paginationMargin) {
+            paginationStyle = {
+                ...paginationStyle,
+                marginBottom: paginationMargin,
+                marginLeft: paginationMargin,
+                marginRight: paginationMargin,
+                marginTop: paginationMargin
+            };
+        }
+        return (<View pointerEvents="none" style={paginationStyle} key="pagination">
         <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
                 dotCommonStyle,
@@ -213,19 +226,35 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderItems() {
         const intLen = children.length;
         let renderChild = children.slice();
+        // if (circular && intLen > 1) {
+        //   // 最前面加最后一个元素
+        //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+        //   // 最后面加第一个元素
+        //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+        //   if (preMargin) {
+        //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+        //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+        //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+        //   } else {
+        //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
+        //   }
+        // }
         if (circular && intLen > 1) {
-            // 最前面加最后一个元素
-            const lastChild = React.cloneElement(children[intLen - 1], { key: 'clone0' });
-            // 最后面加第一个元素
-            const firstChild = React.cloneElement(children[0], { key: 'clone1' });
-            if (preMargin) {
-                const lastChild1 = React.cloneElement(children[intLen - 2], { key: 'clone2' });
-                const firstChild1 = React.cloneElement(children[1], { key: 'clone3' });
-                renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1]);
-            }
-            else {
-                renderChild = [lastChild].concat(renderChild).concat([firstChild]);
-            }
+            // 动态生成前置补位元素
+            const frontClones = [];
+            // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
+            const startIndex = intLen - (patchElmNum % intLen);
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = (startIndex + i) % intLen;
+                frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }));
+            }
+            // 动态生成后置补位元素
+            const backClones = [];
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = i % intLen;
+                backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }));
+            }
+            renderChild = [...frontClones, ...renderChild, ...backClones];
         }
         const arrChildren = renderChild.map((child, index) => {
             const extraStyle = {};
@@ -260,7 +289,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let nextIndex = currentIndex.value;
             if (!circularShared.value) {
                 // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-                if (currentIndex.value === childrenLength.value - 1) {
+                if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
                     pauseLoop();
                     return;
                 }
@@ -427,12 +456,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, [autoplay]);
     useEffect(() => {
-        if (circular !== circularShared.value) {
+        if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
             circularShared.value = circular;
-            patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
+            patchElmNumShared.value = patchElmNum;
+            displayMultipleItemsShared.value = displayMultipleItems;
             offset.value = getOffset(currentIndex.value, step.value);
         }
-    }, [circular, preMargin]);
+    }, [circular, patchElmNum, displayMultipleItems]);
     const { gestureHandler } = useMemo(() => {
         function getTargetPosition(eventData) {
             'worklet';
@@ -450,7 +480,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
-                selectedIndex = moveToIndex;
+                const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value);
+                selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex);
                 moveToTargetPos = selectedIndex * step.value;
             }
             else {
@@ -486,7 +517,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const gestureMovePos = offset.value + translation;
             if (!circularShared.value) {
                 // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-                const posEnd = -step.value * (childrenLength.value - 1);
+                const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value);
                 if (transdir < 0) {
                     return gestureMovePos > posEnd;
                 }
@@ -616,7 +647,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const { translation, transdir } = eventData;
             const moveToOffset = offset.value + translation;
             const maxOverDrag = Math.floor(step.value / 2);
-            const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0;
+            const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0;
             let resistance = 0.1;
             let overDrag = 0;
             let finalOffset = 0;
@@ -770,6 +801,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         style: [normalStyle, layoutStyle, styles.swiper]
     }, layoutProps, innerProps);
     const animateComponent = createElement(Animated.View, {
+        key: 'swiperContainer',
         style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
     }, wrapChildren({
         children: arrPages

package/lib/runtime/components/react/dist/mpx-switch.d.ts

@@ -24,4 +24,3 @@ interface _SwitchProps extends SwitchProps {
 }
 declare const _Switch: import("react").ForwardRefExoticComponent<_SwitchProps & import("react").RefAttributes<HandlerRef<Switch, _SwitchProps>>>;
 export default _Switch;
-//# sourceMappingURL=mpx-switch.d.ts.map

package/lib/runtime/components/react/dist/mpx-text.d.ts

@@ -20,4 +20,3 @@ interface _TextProps extends TextProps {
 }
 declare const _Text: import("react").ForwardRefExoticComponent<_TextProps & import("react").RefAttributes<HandlerRef<Text, _TextProps>>>;
 export default _Text;
-//# sourceMappingURL=mpx-text.d.ts.map

package/lib/runtime/components/react/dist/mpx-textarea.d.ts

@@ -5,4 +5,3 @@ import { HandlerRef } from './useNodesRef';
 export type TextareProps = Omit<InputProps & PrivateInputProps, 'type' | 'password' | 'multiline' | 'confirm-hold'>;
 declare const Textarea: import("react").ForwardRefExoticComponent<TextareProps & import("react").RefAttributes<HandlerRef<TextInput, TextareProps>>>;
 export default Textarea;
-//# sourceMappingURL=mpx-textarea.d.ts.map

package/lib/runtime/components/react/dist/mpx-video.d.ts

@@ -99,4 +99,3 @@ interface VideoProps {
 }
 declare const MpxVideo: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HandlerRef<View, VideoProps>>>;
 export default MpxVideo;
-//# sourceMappingURL=mpx-video.d.ts.map

package/lib/runtime/components/react/dist/mpx-view.d.ts

@@ -6,7 +6,8 @@
  */
 import { View, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { ReactNode } from 'react';
-import type { AnimationProp } from './useAnimationHooks';
+import { AnimationType } from './animationHooks/index';
+import type { AnimationProp } from './animationHooks/utils';
 import { ExtendedViewStyle } from './types/common';
 import { HandlerRef } from './useNodesRef';
 export interface _ViewProps extends ViewProps {
@@ -23,7 +24,7 @@ export interface _ViewProps extends ViewProps {
     'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
-    'enable-animation'?: boolean;
+    'enable-animation'?: boolean | AnimationType;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
@@ -32,4 +33,3 @@ export interface _ViewProps extends ViewProps {
 }
 declare const _View: import("react").ForwardRefExoticComponent<_ViewProps & import("react").RefAttributes<HandlerRef<View, _ViewProps>>>;
 export default _View;
-//# sourceMappingURL=mpx-view.d.ts.map

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -8,7 +8,7 @@ import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
-import useAnimationHooks from './useAnimationHooks';
+import useAnimationHooks from './animationHooks/index';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error, isFunction } from '@mpxjs/utils';
@@ -203,7 +203,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+            if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
                 // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
                 // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
                 dimensions = {
@@ -274,6 +274,18 @@ function normalizeBackgroundPosition(parts) {
     let hOffset = 0;
     let vStart = 'top';
     let vOffset = 0;
+    if (!Array.isArray(parts)) {
+        // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+        parts = [parts];
+    }
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+    parts = parts.map((part) => {
+        if (typeof part !== 'string')
+            return part;
+        if (part === 'center')
+            return '50%';
+        return global.__formatValue(part);
+    });
     if (parts.length === 4)
         return parts;
     // 归一化
@@ -415,14 +427,16 @@ function normalizeBackgroundSize(backgroundSize, type) {
     const sizeList = backgroundSize.slice();
     if (sizeList.length === 1)
         sizeList.push('auto');
-    if (type === 'linear') {
+    return sizeList.map((val) => {
+        if (typeof val !== 'string')
+            return val;
         // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
-        for (const i in sizeList) {
-            const val = sizeList[i];
-            sizeList[i] = /^cover|contain|auto$/.test(val) ? '100%' : val;
+        if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+            val = '100%';
         }
-    }
-    return sizeList;
+        // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+        return global.__formatValue(val);
+    });
 }
 function preParseImage(imageStyle) {
     const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};

package/lib/runtime/components/react/dist/mpx-web-view.d.ts

@@ -20,4 +20,3 @@ interface WebViewProps {
 }
 declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebView<{}>, WebViewProps>>>;
 export default _WebView;
-//# sourceMappingURL=mpx-web-view.d.ts.map

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -184,7 +184,7 @@ const _WebView = forwardRef((props, ref) => {
                 }
                 break;
             case 'postMessage':
-                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                bindmessage && bindmessage(getCustomEvent('message', {}, {
                     detail: {
                         data: params[0]?.data
                     }

package/lib/runtime/components/react/dist/parser.d.ts

@@ -37,4 +37,3 @@ export declare class ReplaceSource {
     source(): string;
 }
 export {};
-//# sourceMappingURL=parser.d.ts.map

package/lib/runtime/components/react/dist/useNodesRef.d.ts

@@ -9,4 +9,3 @@ export type HandlerRef<T, P> = {
 };
 export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
 export {};
-//# sourceMappingURL=useNodesRef.d.ts.map

package/lib/runtime/components/react/dist/utils.d.ts

@@ -32,6 +32,7 @@ export declare function splitStyle<T extends Record<string, any>>(styleObj: T):
     backgroundStyle?: Partial<T>;
     innerStyle?: Partial<T>;
 };
+export declare function parseValues(str: string, char?: string): string[];
 interface TransformStyleConfig {
     enableVar?: boolean;
     externalVarContext?: Record<string, any>;
@@ -120,4 +121,3 @@ export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, d
 };
 export declare function useRunOnJSCallback(callbackMapRef: MutableRefObject<Record<string, AnyFunc>>): (key: string, ...args: any) => any;
 export {};
-//# sourceMappingURL=utils.d.ts.map

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
@@ -193,7 +193,7 @@ function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
             const resolved = resolveVar(value, varContext);
             if (resolved === undefined) {
                 delete target[key];
-                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
+                // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
                 return;
             }
             target[key] = resolved;
@@ -241,6 +241,10 @@ function transformStringify(styleObj) {
     if (isNumber(styleObj.fontWeight)) {
         styleObj.fontWeight = '' + styleObj.fontWeight;
     }
+    // transformOrigin 20px 需要转换为 transformOrigin '20'
+    if (isNumber(styleObj.transformOrigin)) {
+        styleObj.transformOrigin = '' + styleObj.transformOrigin;
+    }
 }
 function transformPosition(styleObj, meta) {
     if (styleObj.position === 'fixed') {
@@ -249,7 +253,7 @@ function transformPosition(styleObj, meta) {
     }
 }
 // 多value解析
-function parseValues(str, char = ' ') {
+export function parseValues(str, char = ' ') {
     let stack = 0;
     let temp = '';
     const result = [];
@@ -261,11 +265,11 @@ function parseValues(str, char = ' ') {
             stack--;
         }
         // 非括号内 或者 非分隔字符且非空
-        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+        if (stack !== 0 || str[i] !== char) {
             temp += str[i];
         }
         if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-            result.push(temp);
+            result.push(temp.trim());
             temp = '';
         }
     }
@@ -274,6 +278,8 @@ function parseValues(str, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
+    // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+    values.sort();
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);
@@ -337,6 +343,14 @@ function transformBoxShadow(styleObj) {
         return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
     }, '');
 }
+function transformZIndex(styleObj) {
+    if (!styleObj.zIndex || typeof styleObj.zIndex === 'number')
+        return;
+    if (styleObj.zIndex === 'auto') {
+        error('Property [z-index] does not supported [auto], please check again!');
+        styleObj.zIndex = 0;
+    }
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
@@ -386,17 +400,19 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             envKeyPaths.push(keyPath.slice());
         }
     }
-    function calcVisitor({ value, keyPath }) {
+    function calcVisitor({ key, value, keyPath }) {
         if (calcUseRegExp.test(value)) {
+            // calc translate & border-radius 的百分比计算
+            if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+                hasSelfPercent = true;
+                percentKeyPaths.push(keyPath.slice());
+            }
             calcKeyPaths.push(keyPath.slice());
         }
     }
     function percentVisitor({ key, value, keyPath }) {
-        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-            hasSelfPercent = true;
-            percentKeyPaths.push(keyPath.slice());
-        }
-        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+        // fixme 去掉 translate & border-radius 的百分比计算
+        if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
             percentKeyPaths.push(keyPath.slice());
         }
     }
@@ -405,6 +421,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
+    // transform 字符串格式转化数组格式(先转数组再处理css var)
+    transformTransform(styleObj);
     // traverse var & generate normalStyle
     traverseStyle(styleObj, [varVisitor]);
     hasVarDec = hasVarDec || !!externalVarContext;
@@ -467,8 +485,11 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformStringify(normalStyle);
     // transform rpx to px
     transformBoxShadow(normalStyle);
-    // transform 字符串格式转化数组格式
-    transformTransform(normalStyle);
+    // transform z-index auto to 0
+    transformZIndex(normalStyle);
+    if (Array.isArray(normalStyle.transform)) {
+        normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item));
+    }
     return {
         hasVarDec,
         varContextRef,