@xhsreds/reds-rn-next 0.10.1-fix-pull-refresh202511272021 → 0.10.1

package/src/components/Slider/Slider.tsx

@@ -15,10 +15,17 @@ import { RedsSlider, SliderDefaultProps } from "./interface/index";
 import styles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {
+const Slider = ({
+  defaultValue,
+  min = 0,
+  max = 100,
+  initalValue = 0,
+  onValueChange,
+  dotStyle = {},
+  step = 1,
+}: RedsSlider) => {
   useMounted("Slider");
-  const [panResponder, setPanResponder] = useState(PanResponder.create({}));
-  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
+  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width);
   const [value, setValue] = useState(initalValue);
 
   if (max < min) {
@@ -28,51 +35,109 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     return;
   }
 
-  const thumbPosition = (value / (max - min)) * sliderWidth;
-  const step = 1;
+  // 添加一个函数来计算最接近的step值
+  const getSteppedValue = useCallback(
+    (rawValue: number) => {
+      const steppedValue = Math.round((rawValue - min) / step) * step + min;
+      return Math.max(min, Math.min(max, steppedValue));
+    },
+    [min, max, step],
+  );
+
   const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;
+
+  const animatedThumbValue = useRef(
+    new Animated.Value(
+      (initalValue * sliderWidth) / (max - min) > 0
+        ? (initalValue * sliderWidth) / (max - min) - 8
+        : (initalValue * sliderWidth) / (max - min),
+    ),
+  ).current;
+
   useEffect(() => {
     const handleOrientationChange = () => {
-      setSliderWidth(Dimensions.get("window").width * 0.8);
+      setSliderWidth(Dimensions.get("window").width);
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
-    createPanResponder();
     return () => {
       subscription.remove();
-      //Dimensions.removeEventListener("change", handleOrientationChange);
     };
   }, []);
 
   // 可以根据需要调整的滑块高度
-  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {
-    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
-
-    setValue(currentValue);
-    animatedValue.setValue((currentValue * sliderWidth) / (max - min));
-    if (onValueChange) {
-      onValueChange(currentValue);
-    }
-  };
+  const hanleValueUpdate = useCallback(
+    (gestureState: PanResponderGestureState) => {
+      // 计算原始值
+      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
+      // 根据step计算实际值
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));
+      animatedThumbValue.setValue(
+        (steppedValue * sliderWidth) / (max - min) > 0
+          ? (steppedValue * sliderWidth) / (max - min) - 8
+          : (steppedValue * sliderWidth) / (max - min),
+      );
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],
+  );
+
+  // 添加点击轨道跳转功能（可选）
+  const handleTrackPress = useCallback(
+    (event: GestureResponderEvent) => {
+      const { locationX } = event.nativeEvent;
+      const rawValue = (locationX / sliderWidth) * (max - min) + min;
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+
+      // 使用动画过渡到新位置
+      Animated.timing(animatedValue, {
+        toValue: (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      Animated.timing(animatedThumbValue, {
+        toValue:
+          (steppedValue * sliderWidth) / (max - min) > 0
+            ? (steppedValue * sliderWidth) / (max - min) - 8
+            : (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],
+  );
 
   const handleLayout = (event: LayoutChangeEvent) => {
     setSliderWidth(event.nativeEvent.layout.width);
   };
 
-  const createPanResponder = () => {
-    setPanResponder(
+  const panResponder = useMemo(
+    () =>
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {},
-        onPanResponderRelease: () => {},
+        onPanResponderGrant: () => true,
+        onPanResponderRelease: () => true,
         onPanResponderTerminate: () => {},
         onPanResponderMove: (evt, gestureState) => {
           hanleValueUpdate(gestureState);
         },
       }),
-    );
-  };
+    [hanleValueUpdate],
+  );
 
   const styles = StyleSheet.create({
     sliderContainer: {
@@ -81,7 +146,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
       justifyContent: "center",
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2,
@@ -107,21 +172,22 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     },
   });
 
-  //<View style={[styles.track, { width: sliderWidth }]}>
-  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />
-  //</View>
   return (
-    <TouchableWithoutFeedback onPress={(e) => {}}>
-      <View style={styles.sliderContainer} onLayout={handleLayout}>
-        <View style={styles.trackContainer}>
-          <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
-          <Animated.View
-            style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}
-            {...panResponder.panHandlers}
-          />
-        </View>
+    <View style={styles.sliderContainer}>
+      <View style={styles.trackContainer} onLayout={handleLayout}>
+        {/* 添加可点击的轨道 */}
+        <TouchableWithoutFeedback onPress={handleTrackPress}>
+          <View style={{ position: "absolute", width: "100%", height: 4 }} />
+        </TouchableWithoutFeedback>
+
+        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
+        <Animated.View
+          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}
+          {...panResponder.panHandlers}
+          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+        />
       </View>
-    </TouchableWithoutFeedback>
+    </View>
   );
 };
 

package/src/components/Slider/demo/index.tsx

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    paddingHorizontal: 50,
   },
   scrollView: {
     backgroundColor: "pink",
@@ -44,6 +45,23 @@ export default function App() {
       <Br />
       <Slider min={200} max={100}></Slider>
       <Br />
+      <Desc>step使用示例</Desc>
+      <Slider
+        min={0}
+        max={100}
+        step={10} // 每次移动10个单位
+        initalValue={0}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
+      <Br />
+      <Desc>step使用示例(或者更小的步长)</Desc>
+      <Slider
+        min={0}
+        max={1}
+        step={0.1} // 每次移动0.1个单位
+        initalValue={0.5}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
     </View>
   );
 }

package/src/components/Slider/doc/index.mdx

@@ -29,9 +29,9 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件          | 描述               | 类型                   | 默认值 |
-| ------------- | ------------------ | ---------------------- | ------ |
-| onValueChange | 当值发生变化时触发 | (value: number) => any |        |
-| onDrag        | 拖拽时触发         | (value: Event) => any  |        |
-| onDragStart   | 拖拽开始触发       | (value: Event) => any  |        |
-| onDragEnd     | 拖拽完成触发       | (value: Event) => any  |        |
+| 事件          | 描述               | 类型                      | 默认值 |
+| ------------- | ------------------ | ------------------------- | ------ |
+| onValueChange | 当值发生变化时触发 | (value: number) => any |        |
+| onDrag        | 拖拽时触发         | (value: Event) => any  |        |
+| onDragStart   | 拖拽开始触发       | (value: Event) => any  |        |
+| onDragEnd     | 拖拽完成触发       | (value: Event) => any  |        |

package/src/components/Stepper/Stepper.tsx

@@ -84,7 +84,7 @@ const Stepper = (props: RedsStepper) => {
   }, [colorMode]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.style]}>
       <TouchableWithoutFeedback onPress={() => handleNumber("min")}>
         <View style={[styles.icon, minus]}>
           <Image source={{ uri: minusImage }} style={[styles.minus]} />

package/src/components/Stepper/demo/index.tsx

@@ -21,7 +21,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text>基础用法</Text>
-      <Stepper value={value} onChange={handleChange} />
+      <Stepper value={value} onChange={handleChange} style={{ width: 200 }} />
 
       <Text>基础用法(非受控)</Text>
       <Stepper isControl={false} />

package/src/components/Stepper/doc/index.mdx

@@ -17,9 +17,10 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | min       | 最小值     | number  |        |
 | disable   | disable    | boolean | false  |
 | isControl | 是否受控   | boolean | true   |
+| style     | style      | any     |        |
 
 ### Events
 
-| 事件     | 描述               | 类型                   | 默认值 |
-| -------- | ------------------ | ---------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: number) => any |        |
+| 事件     | 描述               | 类型                      | 默认值 |
+| -------- | ------------------ | ------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: number) => any |        |

package/src/components/Stepper/interface/index.ts

@@ -7,6 +7,7 @@ export interface RedsStepper {
   disable?: boolean;
   onChange?: (value: number) => any;
   isControl?: boolean;
+  style?: any;
 }
 
 export interface RedsStepperEvent {}

package/src/components/Stepper/styles.ts

@@ -5,7 +5,8 @@ export const getStyles = (themeColor: any, typography: any) => {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "space-between",
+      width: 72,
     },
     opacity: {
       opacity: 0.5,
@@ -21,7 +22,6 @@ export const getStyles = (themeColor: any, typography: any) => {
       lineHeight: 20,
     },
     text: {
-      paddingHorizontal: 8,
       fontWeight: typography.B1LooseFontWeight,
       fontSize: typography.T3FontSize,
       color: themeColor.Title,

package/src/components/Switch/doc/index.mdx

@@ -25,7 +25,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述               | 类型                                  | 默认值 |
-| -------- | ------------------ | ------------------------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
-| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |
+| 事件     | 描述               | 类型                                     | 默认值 |
+| -------- | ------------------ | ---------------------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
+| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |

package/src/components/Tab/doc/index.mdx

@@ -29,6 +29,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述    | 类型                                  | 默认值 |
-| -------- | ------- | ------------------------------------- | ------ |
-| onChange | 点击tab | (value: string, index: number) => any |        |
+| 事件     | 描述    | 类型                                     | 默认值 |
+| -------- | ------- | ---------------------------------------- | ------ |
+| onChange | 点击tab | (value: string, index: number) => any |        |

package/src/components/TabBar/doc/index.mdx

@@ -24,6 +24,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述         | 类型                   | 默认值 |
-| -------- | ------------ | ---------------------- | ------ |
-| onChange | 被点击时触发 | (value: string) => any |        |
+| 事件     | 描述         | 类型                      | 默认值 |
+| -------- | ------------ | ------------------------- | ------ |
+| onChange | 被点击时触发 | (value: string) => any |        |

package/src/components/Tag/doc/index.mdx

@@ -29,7 +29,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述         | 类型                                  | 默认值 |
-| ------- | ------------ | ------------------------------------- | ------ |
-| onClose | 点击时触发   | (value?: any) => any                  |        |
-| onClick | 被点击时触发 | (value: GestureResponderEvent) => any |        |
+| 事件    | 描述         | 类型                                     | 默认值 |
+| ------- | ------------ | ---------------------------------------- | ------ |
+| onClose | 点击时触发   | (value?: any) => any                  |        |
+| onClick | 被点击时触发 | (value: GestureResponderEvent) => any |        |

package/src/components/Text/doc/index.mdx

@@ -70,7 +70,7 @@ import TextFontFamily from "!!raw-loader!../demo/TextFontFamily.tsx";
 
 ### Events
 
-| 事件                | 描述               | 类型                    | 默认值   |
-| ------------------- | ------------------ | ----------------------- | -------- |
-| onClick             | 点击回调           | (value: string) => void |          |
-| onFirstDrawFinished | 第一次渲染结束回调 | () => void              | () => {} |
+| 事件                | 描述               | 类型                       | 默认值      |
+| ------------------- | ------------------ | -------------------------- | ----------- |
+| onClick             | 点击回调           | (value: string) => void |             |
+| onFirstDrawFinished | 第一次渲染结束回调 | () => void              | () => {} |

package/src/components/TextField/doc/index.mdx

@@ -10,37 +10,37 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性                 | 描述                        | 类型                         | 默认值                               |
-| -------------------- | --------------------------- | ---------------------------- | ------------------------------------ |
-| modelValue           | 输入框内容                  | string                       |                                      |
-| placeholder          | 输入框占位提示文字          | string                       |                                      |
-| type                 | 输入框类型                  | inputTypeRN                  | "default" as inputTypeRN             |
-| maxLength            | 最大长度                    | number                       |                                      |
-| showCount            | 是否展示字数                | boolean                      | false                                |
-| isFormItem           | 是否是 Form 组件            | boolean                      | false                                |
-| disabled             | 是否禁用状态，默认为 false  | boolean                      | false                                |
-| readonly             | 只读                        | boolean                      | false                                |
-| clearable            | 是否展示清除按钮            | boolean                      | false                                |
-| autofocus            | 自动聚焦                    | boolean                      | false                                |
-| prefix               | 前缀插槽                    | ReactNode                    |                                      |
-| suffix               | 后缀插槽                    | ReactNode                    |                                      |
-| inputAlign           | 输入框对齐方式              | inputAlignType               | "left" as inputAlignType             |
-| formatter            | 格式化                      | TextFieldFormatter           |                                      |
-| formatterTrigger     | 格式化时机                  | TextFieldFormatTrigger       | "onChange" as TextFieldFormatTrigger |
-| iconType             | icon支持type                | iconType                     | iconType.svg                         |
-| onChange             | 输入框内容变化时的回调      | (value: string) => any       |                                      |
-| onClear              | 按下清除按钮的回调          | (value: string) => any       |                                      |
-| onFocus              | 聚焦                        | (event: any) => any          |                                      |
-| onBlur               | 失焦                        | (event: any) => any          |                                      |
-| style                | 组件样式                    | ViewStyle                    | `{}`                                 |
-| maxLengthStyle       | maxLength 自定义颜色        | TextStyle                    | `{}`                                 |
-| inputStyle           | textfield input 自定义样式  | ViewStyle | ViewStyle[] | `{}`                                 |
-| onSubmitEditing      | onSubmitEditing事件         | (nativeEvent: any) => void   | () => {}                             |
-| isControl            | isControl                   | boolean                      | false                                |
-| accessibility        | 无障碍的一系列属性 是个对象 | Object                       | `{}`                                 |
-| placeholderStyle     | placeholder样式             | Object                       | `{}`                                 |
-| placeholderTextColor | placeholderTextColor        | String                       |                                      |
-| ref                  | ref                         | any                          |                                      |
-| clearAccessibility   | clear accessibility         | Object                       | `{}`                                 |
+| 属性                 | 描述                        | 类型                          | 默认值                               |
+| -------------------- | --------------------------- | ----------------------------- | ------------------------------------ |
+| modelValue           | 输入框内容                  | string                        |                                      |
+| placeholder          | 输入框占位提示文字          | string                        |                                      |
+| type                 | 输入框类型                  | inputTypeRN                   | "default" as inputTypeRN             |
+| maxLength            | 最大长度                    | number                        |                                      |
+| showCount            | 是否展示字数                | boolean                       | false                                |
+| isFormItem           | 是否是 Form 组件            | boolean                       | false                                |
+| disabled             | 是否禁用状态，默认为 false  | boolean                       | false                                |
+| readonly             | 只读                        | boolean                       | false                                |
+| clearable            | 是否展示清除按钮            | boolean                       | false                                |
+| autofocus            | 自动聚焦                    | boolean                       | false                                |
+| prefix               | 前缀插槽                    | ReactNode                     |                                      |
+| suffix               | 后缀插槽                    | ReactNode                     |                                      |
+| inputAlign           | 输入框对齐方式              | inputAlignType                | "left" as inputAlignType             |
+| formatter            | 格式化                      | TextFieldFormatter            |                                      |
+| formatterTrigger     | 格式化时机                  | TextFieldFormatTrigger        | "onChange" as TextFieldFormatTrigger |
+| iconType             | icon支持type                | iconType                      | iconType.svg                         |
+| onChange             | 输入框内容变化时的回调      | (value: string) => any     |                                      |
+| onClear              | 按下清除按钮的回调          | (value: string) => any     |                                      |
+| onFocus              | 聚焦                        | (event: any) => any        |                                      |
+| onBlur               | 失焦                        | (event: any) => any        |                                      |
+| style                | 组件样式                    | ViewStyle                     | `{}`                                 |
+| maxLengthStyle       | maxLength 自定义颜色        | TextStyle                     | `{}`                                 |
+| inputStyle           | textfield input 自定义样式  | ViewStyle | ViewStyle[]  | `{}`                                 |
+| onSubmitEditing      | onSubmitEditing事件         | (nativeEvent: any) => void | () => {}                          |
+| isControl            | isControl                   | boolean                       | false                                |
+| accessibility        | 无障碍的一系列属性 是个对象 | Object                        | `{}`                                 |
+| placeholderStyle     | placeholder样式             | Object                        | `{}`                                 |
+| placeholderTextColor | placeholderTextColor        | String                        |                                      |
+| ref                  | ref                         | any                           |                                      |
+| clearAccessibility   | clear accessibility         | Object                        | `{}`                                 |
 
 ### Events

package/src/components/TextView/TextView.tsx

@@ -68,7 +68,8 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
 
   const handleChangeText = useCallback(
     (value: string) => {
-      updateValue(value);
+      const filteredValue = props.returnKeyType !== "next" ? value.replace(/\n/g, "") : value;
+      updateValue(filteredValue);
       // Only apply cursor fix on iOS when text equals maxLength (indicating truncation)
       if (Platform.OS === "ios" && maxLength && value.length >= maxLength && inputRef.current) {
         // Use requestAnimationFrame instead of setTimeout
@@ -134,8 +135,10 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
   }, [layout]);
 
   const handleKeyPress = ({ nativeEvent }: any) => {
-    if (nativeEvent.key === "Enter" && props.returnKeyType !== "next") {
-      Keyboard.dismiss();
+    if (nativeEvent.key === "Enter") {
+      if (props.returnKeyType !== "next") {
+        Keyboard.dismiss();
+      }
     }
   };
 

package/src/components/TextView/demo/index.tsx

@@ -26,7 +26,7 @@ export default function App() {
         clearable
         actionLayout={"horizontal"}
         autofocus={true}
-        returnKeyType={"search"}
+        returnKeyType={"done"}
       />
       <Desc>最大长度</Desc>
       <TextView modelValue={modelValue} maxLength={100} showCount placeholder="占位符" />

package/src/components/TextView/doc/index.mdx

@@ -25,15 +25,15 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | autofocus            | 自动聚焦                     | boolean                                  | false                    |
 | rows                 | 最大展示行数                 | number                                   | 3                        |
 | style                | 自定义容器样式               | ViewStyle                                |                          |
-| onChange             | 输入域内容变化时的回调       | (value: string) => any                   |                          |
-| onClear              | 按下清除按钮的回调           | (value: string) => any                   |                          |
-| onFocus              | 聚焦                         | (event: any) => any                      |                          |
-| onBlur               | 失焦                         | (event: any) => any                      |                          |
+| onChange             | 输入域内容变化时的回调       | (value: string) => any                |                          |
+| onClear              | 按下清除按钮的回调           | (value: string) => any                |                          |
+| onFocus              | 聚焦                         | (event: any) => any                   |                          |
+| onBlur               | 失焦                         | (event: any) => any                   |                          |
 | containerStyle       | 容器样式                     | ViewStyle                                |                          |
 | actionLayout         | 容器样式                     | "horizontal" | "vertical"           | vertical                 |
 | placeholderTextColor | placeholderTextColor         | String                                   |                          |
 | ref                  | ref                          | any                                      |                          |
 | returnKeyType        | returnType key 的 type       | string                                   | next                     |
-| onSubmitEditing      | onSubmitEditing              | () => void                               |                          |
+| onSubmitEditing      | onSubmitEditing              | () => void                            |                          |
 
 ### Events

package/src/components/Toast/doc/index.mdx

@@ -28,9 +28,9 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件      | 描述          | 类型       | 默认值 |
-| --------- | ------------- | ---------- | ------ |
-| onCancel  | 点击取消按钮  | () => void |        |
-| onClick   | 点击确定按钮  | () => void |        |
-| onClose   | toast关闭回调 | () => void |        |
-| onConfirm | toast关闭回调 | () => void |        |
+| 事件      | 描述          | 类型          | 默认值 |
+| --------- | ------------- | ------------- | ------ |
+| onCancel  | 点击取消按钮  | () => void |        |
+| onClick   | 点击确定按钮  | () => void |        |
+| onClose   | toast关闭回调 | () => void |        |
+| onConfirm | toast关闭回调 | () => void |        |

package/src/components/Uploader/doc/index.mdx

@@ -10,32 +10,32 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性                           | 描述                            | 类型                                 | 默认值              |
-| ------------------------------ | ------------------------------- | ------------------------------------ | ------------------- |
-| value                          | 已上传的图片列表                | UploaderFileListItem[]               | `[]`                |
-| multiple                       | 开启文件多选                    | boolean                              | false               |
-| accept                         | 允许上传的文件类型              | string                               | image/\*            |
-| maxCount                       | 文件上传数量限制                | number                               |                     |
-| maxSize                        | 文件大小限制，单位为k, 默认500k | number                               | 1000000 \* 1024     |
-| type                           | 上传类型                        | UploaderType                         | UploaderType.NORMAL |
-| showDesc                       | 自定义上传按钮下面的文案描述    | boolean                              |                     |
-| description                    | 自定义上传按钮下面的文案描述    | string                               |                     |
-| size                           | 上传图片大小                    | UploaderSize                         | UploaderSize.NORMAL |
-| disable                        | 是否可上传                      | boolean                              | false               |
-| IDCardPhotoText                | 身份证人像面文案                | string                               |                     |
-| nationalEmblemSideOfIDCardText | 身份证国徽面文案                | string                               |                     |
-| uploadFailText                 | 上传失败文案                    | string                               |                     |
-| uploadingText                  | 上传中文案                      | string                               |                     |
-| invoke                         | invoke                          | (method: string, params: any) => any |                     |
-| isFormItem                     | 是否是formItem                  | boolean                              | false               |
+| 属性                           | 描述                            | 类型                                    | 默认值              |
+| ------------------------------ | ------------------------------- | --------------------------------------- | ------------------- |
+| value                          | 已上传的图片列表                | UploaderFileListItem[]                  | `[]`                |
+| multiple                       | 开启文件多选                    | boolean                                 | false               |
+| accept                         | 允许上传的文件类型              | string                                  | image/\*            |
+| maxCount                       | 文件上传数量限制                | number                                  |                     |
+| maxSize                        | 文件大小限制，单位为k, 默认500k | number                                  | 1000000 \* 1024     |
+| type                           | 上传类型                        | UploaderType                            | UploaderType.NORMAL |
+| showDesc                       | 自定义上传按钮下面的文案描述    | boolean                                 |                     |
+| description                    | 自定义上传按钮下面的文案描述    | string                                  |                     |
+| size                           | 上传图片大小                    | UploaderSize                            | UploaderSize.NORMAL |
+| disable                        | 是否可上传                      | boolean                                 | false               |
+| IDCardPhotoText                | 身份证人像面文案                | string                                  |                     |
+| nationalEmblemSideOfIDCardText | 身份证国徽面文案                | string                                  |                     |
+| uploadFailText                 | 上传失败文案                    | string                                  |                     |
+| uploadingText                  | 上传中文案                      | string                                  |                     |
+| invoke                         | invoke                          | (method: string, params: any) => any |                     |
+| isFormItem                     | 是否是formItem                  | boolean                                 | false               |
 
 ### Events
 
-| 事件       | 描述                                                           | 类型                                                                | 默认值 |
-| ---------- | -------------------------------------------------------------- | ------------------------------------------------------------------- | ------ |
-| onSuccess  | 上传成功                                                       | (file: UploaderFileListItem[]) => void                              |        |
-| onValidate | 上传文件之前的校验 返回 false 可终止文件读取，支持返回 Promise | (file: UploaderFileListItem[]) => boolean                           |        |
-| onFail     | 上传失败                                                       | (value: any) => void                                                |        |
-| onChange   | 修改文件                                                       | (value: UploaderFileListItem[]) => void                             |        |
-| onDelete   | 删除文件                                                       | (value: UploaderFileListItem, file: UploaderFileListItem[]) => void |        |
-| onOversize | 文件大小超出限制函数                                           | (value: UploaderFileListItem[]) => void                             |        |
+| 事件       | 描述                                                           | 类型                                                                   | 默认值 |
+| ---------- | -------------------------------------------------------------- | ---------------------------------------------------------------------- | ------ |
+| onSuccess  | 上传成功                                                       | (file: UploaderFileListItem[]) => void                              |        |
+| onValidate | 上传文件之前的校验 返回 false 可终止文件读取，支持返回 Promise | (file: UploaderFileListItem[]) => boolean                           |        |
+| onFail     | 上传失败                                                       | (value: any) => void                                                |        |
+| onChange   | 修改文件                                                       | (value: UploaderFileListItem[]) => void                             |        |
+| onDelete   | 删除文件                                                       | (value: UploaderFileListItem, file: UploaderFileListItem[]) => void |        |
+| onOversize | 文件大小超出限制函数                                           | (value: UploaderFileListItem[]) => void                             |        |

package/src/components/Video/doc/index.mdx

@@ -16,7 +16,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | url            | 播放视频url                 | string                         |                      |
 | size           | 横屏 or 竖屏 播放           | "vertical" | "horizontal" | VideoSize.HORIZONTAL |
 | type           | 视频格式                    | VideoType                      | VideoType.MP4        |
-| reportCallback | 上报埋点函数                | () => void                     | () => {}             |
+| reportCallback | 上报埋点函数                | () => void                  | () => {}          |
 | businessLine   | 业务线                      | string                         | infra                |
 | autoplay       | 是否是自动播放              | boolean                        | false                |
 | playsinline    | 手机观看时，开启内联模式    | boolean                        | true                 |
@@ -24,6 +24,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件   | 描述       | 类型                  | 默认值 |
-| ------ | ---------- | --------------------- | ------ |
-| onPlay | 播放时触发 | (value: Event) => any |        |
+| 事件   | 描述       | 类型                     | 默认值 |
+| ------ | ---------- | ------------------------ | ------ |
+| onPlay | 播放时触发 | (value: Event) => any |        |