antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/2x/es/components/image/test/image.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render, act } from 'testing';
+import Image from '../index';
+const classPrefix = `adm-image`;
+const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
+describe('Image', () => {
+  test('onContainerClick can work', () => {
+    const onContainerClick = jest.fn();
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      onContainerClick: onContainerClick,
+      "data-testid": 'img'
+    }));
+    fireEvent.click(getByTestId('img'));
+    expect(onContainerClick).toBeCalledTimes(1);
+  });
+  test('load successfully', () => {
+    render(React.createElement(Image, {
+      src: demoSrc
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    fireEvent.load(img);
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('load failed', () => {
+    render(React.createElement(Image, {
+      src: '404'
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    fireEvent.error(img);
+    expect(img).not.toBeInTheDocument();
+    expect(document.querySelectorAll(`.${classPrefix}-tip`)[0]).toBeInTheDocument();
+  });
+  test('lazy load should be work', () => {
+    // mock useInViewport
+    // https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useInViewport/__tests__/index.test.ts
+    const mockIntersectionObserver = jest.fn().mockReturnValue({
+      observe: () => null,
+      disconnect: () => null
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+    render(React.createElement(Image, {
+      src: demoSrc,
+      lazy: true
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    expect(img).not.toHaveAttribute('src');
+    const calls = mockIntersectionObserver.mock.calls;
+    const [onChange] = calls[calls.length - 1];
+    act(() => {
+      onChange([{
+        isIntersecting: true
+      }]);
+    });
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('renders with width and height', () => {
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      width: 100,
+      height: 100,
+      "data-testid": 'image'
+    }));
+    expect(getByTestId('image')).toHaveStyle('--width: 100px;--height: 100px');
+  });
+});

package/2x/es/components/image-uploader/image-uploader.css

@@ -28,7 +28,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 24px;
   font-size: 16px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 
@@ -44,7 +44,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 
@@ -61,7 +61,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 12px 8px;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
 }
 
 .adm-image-uploader-cell-image {
@@ -74,7 +74,7 @@
 }
 
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;

package/2x/es/components/image-uploader/image-uploader.d.ts

@@ -28,5 +28,6 @@ export declare type ImageUploaderProps = {
     showFailed?: boolean;
     imageFit?: ImageProps['fit'];
     children?: React.ReactNode;
+    renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

package/2x/es/components/image-uploader/image-uploader.js

@@ -5,7 +5,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 import { useConfig } from '../config-provider';
@@ -28,9 +28,6 @@ export const ImageUploader = p => {
   } = useConfig();
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
-  const updateValue = useMemoizedFn(updater => {
-    setValue(updater(value));
-  });
   const [tasks, setTasks] = useState([]);
   useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
@@ -41,7 +38,8 @@ export const ImageUploader = p => {
   const idCountRef = useRef(0);
   const {
     maxCount,
-    onPreview
+    onPreview,
+    renderItem
   } = props;
 
   function processFile(file, fileList) {
@@ -109,7 +107,7 @@ export const ImageUploader = p => {
               return task;
             });
           });
-          updateValue(prev => {
+          setValue(prev => {
             const newVal = Object.assign({}, result);
             return [...prev, newVal];
           });
@@ -149,36 +147,42 @@ export const ImageUploader = p => {
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
   const showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
+
+  const renderImages = () => {
+    return value.map((fileItem, index) => {
+      var _a, _b;
+
+      const originNode = React.createElement(PreviewItem, {
+        key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+        url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
+        deletable: props.deletable,
+        imageFit: props.imageFit,
+        onClick: () => {
+          if (props.preview) {
+            previewImage(index);
+          }
+
+          onPreview && onPreview(index, fileItem);
+        },
+        onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
+          var _c;
+
+          const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
+          if (canDelete === false) return;
+          setValue(value.filter((x, i) => i !== index));
+        })
+      });
+      return renderItem ? renderItem(originNode, fileItem, value) : originNode;
+    });
+  };
+
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Space, {
     className: `${classPrefix}-space`,
     wrap: true,
     block: true
-  }, value.map((fileItem, index) => {
-    var _a, _b;
-
-    return React.createElement(PreviewItem, {
-      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
-      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
-      deletable: props.deletable,
-      imageFit: props.imageFit,
-      onClick: () => {
-        if (props.preview) {
-          previewImage(index);
-        }
-
-        onPreview && onPreview(index, fileItem);
-      },
-      onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-
-        const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
-        if (canDelete === false) return;
-        setValue(value.filter((x, i) => i !== index));
-      })
-    });
-  }), tasks.map(task => {
+  }, renderImages(), tasks.map(task => {
     if (!props.showFailed && task.status === 'fail') {
       return null;
     }

package/2x/es/components/image-uploader/preview-item.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo } from 'react';
 import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import Image from '../image';
@@ -28,6 +28,11 @@ const PreviewItem = props => {
 
     return '';
   }, [url, file]);
+  useLayoutEffect(() => {
+    return () => {
+      URL.revokeObjectURL(src);
+    };
+  }, [src]);
 
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {

package/2x/es/components/image-viewer/image-viewer.css

@@ -1,15 +1,23 @@
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   touch-action: none;
+  -webkit-user-select: none;
   user-select: none;
 }
 
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
+}
+
 .adm-image-viewer-slides {
   height: 100%;
   position: relative;
   z-index: 1;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -37,6 +45,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -62,5 +71,5 @@
   top: 24px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

package/2x/es/components/image-viewer/image-viewer.d.ts

@@ -8,16 +8,19 @@ export declare type ImageViewerProps = {
     visible?: boolean;
     onClose?: () => void;
     afterClose?: () => void;
+    renderFooter?: (image: string) => React.ReactNode;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;
-export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
+export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
+    renderFooter?: (image: string, index: number) => React.ReactNode;
 };
-export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image"> & {
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
     images?: string[] | undefined;
     defaultIndex?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
+    renderFooter?: ((image: string, index: number) => React.ReactNode) | undefined;
 } & React.RefAttributes<SlidesRef>>;

package/2x/es/components/image-viewer/image-viewer.js

@@ -1,7 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState, useCallback } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
+import SafeArea from '../safe-area';
 import { Slide } from './slide';
 import { Slides } from './slides';
 const classPrefix = `adm-image-viewer`;
@@ -11,12 +12,15 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
+  var _a;
+
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.image && React.createElement(Slide, {
@@ -27,6 +31,10 @@ export const ImageViewer = p => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.image && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+    position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
 };
@@ -34,28 +42,37 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
+  var _a;
+
   const props = mergeProps(multiDefaultProps, p);
-  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
   useImperativeHandle(ref, () => ({
     swipeTo: (index, immediate) => {
       var _a;
 
-      setDefaultIndex(index);
+      setIndex(index);
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
+  const onSlideChange = useCallback(index => {
+    var _a;
+
+    setIndex(index);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+  }, [props.onIndexChange]);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
-    defaultIndex: defaultIndex,
-    onIndexChange: props.onIndexChange,
+    defaultIndex: index,
+    onIndexChange: onSlideChange,
     images: props.images,
     onTap: () => {
       var _a;
@@ -63,6 +80,10 @@ export const MultiImageViewer = forwardRef((p, ref) => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.images && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+    position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
 });

package/2x/es/components/image-viewer/index.d.ts

@@ -4,10 +4,11 @@ import { showMultiImageViewer, showImageViewer, clearImageViewer } from './metho
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerShowHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image"> & {
+    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "renderFooter"> & {
         images?: string[] | undefined;
         defaultIndex?: number | undefined;
         onIndexChange?: ((index: number) => void) | undefined;
+        renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
     } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };

package/2x/es/components/image-viewer/slide.js

@@ -1,8 +1,10 @@
 import React, { useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
+import { useSize } from 'ahooks';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
 import { bound } from '../../utils/bound';
+import * as mat from '../../utils/matrix';
 const classPrefix = `adm-image-viewer`;
 export const Slide = props => {
   const {
@@ -11,54 +13,71 @@ export const Slide = props => {
   const controlRef = useRef(null);
   const imgRef = useRef(null);
   const [{
-    zoom,
-    x,
-    y
+    matrix
   }, api] = useSpring(() => ({
-    zoom: 1,
-    x: 0,
-    y: 0,
+    matrix: mat.create(),
     config: {
       tension: 200
     }
   }));
+  const controlSize = useSize(controlRef);
+  const imgSize = useSize(imgRef);
   const pinchLockRef = useRef(false);
 
-  function boundXY([x, y], rubberband) {
-    const currentZoom = zoom.get();
-    let xOffset = 0,
-        yOffset = 0;
+  const boundMatrix = (nextMatrix, type, last = false) => {
+    if (!controlSize || !imgSize) return nextMatrix;
+    const controlLeft = -controlSize.width / 2;
+    const controlTop = -controlSize.height / 2;
+    const imgLeft = -imgSize.width / 2;
+    const imgTop = -imgSize.height / 2;
+    const zoom = mat.getScaleX(nextMatrix);
+    const scaledImgWidth = zoom * imgSize.width;
+    const scaledImgHeight = zoom * imgSize.height;
+    const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop]);
 
-    if (imgRef.current && controlRef.current) {
-      xOffset = ((currentZoom * imgRef.current.width || 0) - controlRef.current.clientWidth) / 2;
-      yOffset = ((currentZoom * imgRef.current.height || 0) - controlRef.current.clientHeight) / 2;
+    if (type === 'translate') {
+      let boundedX = x;
+      let boundedY = y;
+
+      if (scaledImgWidth > controlSize.width) {
+        const minX = controlLeft - (scaledImgWidth - controlSize.width);
+        const maxX = controlLeft;
+        boundedX = last ? bound(x, minX, maxX) : rubberbandIfOutOfBounds(x, minX, maxX, zoom * 50);
+      } else {
+        boundedX = -scaledImgWidth / 2;
+      }
+
+      if (scaledImgHeight > controlSize.height) {
+        const minY = controlTop - (scaledImgHeight - controlSize.height);
+        const maxY = controlTop;
+        boundedY = last ? bound(y, minY, maxY) : rubberbandIfOutOfBounds(y, minY, maxY, zoom * 50);
+      } else {
+        boundedY = -scaledImgHeight / 2;
+      }
+
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
 
-    xOffset = xOffset > 0 ? xOffset : 0;
-    yOffset = yOffset > 0 ? yOffset : 0;
-    const bounds = {
-      left: -xOffset,
-      right: xOffset,
-      top: -yOffset,
-      bottom: yOffset
-    };
-
-    if (rubberband) {
-      return [rubberbandIfOutOfBounds(x, bounds.left, bounds.right, currentZoom * 50), rubberbandIfOutOfBounds(y, bounds.top, bounds.bottom, currentZoom * 50)];
-    } else {
-      return [bound(x, bounds.left, bounds.right), bound(y, bounds.top, bounds.bottom)];
+    if (type === 'scale' && last) {
+      const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? bound(x, controlLeft - (scaledImgWidth - controlSize.width), controlLeft) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? bound(y, controlTop - (scaledImgHeight - controlSize.height), controlTop) : -scaledImgHeight / 2];
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
-  }
+
+    return nextMatrix;
+  };
 
   useDragAndPinch({
     onDrag: state => {
+      if (state.first) return;
+      if (state.pinching) return state.cancel();
+
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
       }
 
-      const currentZoom = zoom.get();
+      const currentZoom = mat.getScaleX(matrix.get());
 
       if (dragLockRef) {
         dragLockRef.current = currentZoom !== 1;
@@ -66,24 +85,16 @@ export const Slide = props => {
 
       if (!pinchLockRef.current && currentZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
       } else {
-        if (state.last) {
-          const [x, y] = boundXY([state.offset[0] + state.velocity[0] * state.direction[0] * 200, state.offset[1] + state.velocity[1] * state.direction[1] * 200], false);
-          api.start({
-            x,
-            y
-          });
-        } else {
-          const [x, y] = boundXY(state.offset, true);
-          api.start({
-            x,
-            y,
-            immediate: true
-          });
-        }
+        const currentMatrix = matrix.get();
+        const offset = [state.offset[0] - mat.getTranslateX(currentMatrix), state.offset[1] - mat.getTranslateY(currentMatrix)];
+        const nextMatrix = mat.translate(currentMatrix, ...(state.last ? [offset[0] + state.velocity[0] * state.direction[0] * 200, offset[1] + state.velocity[1] * state.direction[1] * 200] : offset));
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'translate', state.last),
+          immediate: !state.last
+        });
       }
     },
     onPinch: state => {
@@ -93,22 +104,30 @@ export const Slide = props => {
       const [d] = state.offset;
       if (d < 0) return;
       const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
-      api.start({
-        zoom: nextZoom,
-        immediate: !state.last
-      });
       (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
 
       if (state.last && nextZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
 
         if (dragLockRef) {
           dragLockRef.current = false;
         }
       } else {
+        if (!controlSize) return;
+        const currentMatrix = matrix.get();
+        const currentZoom = mat.getScaleX(currentMatrix);
+        const originOffsetX = state.origin[0] - controlSize.width / 2;
+        const originOffsetY = state.origin[1] - controlSize.height / 2;
+        let nextMatrix = mat.translate(currentMatrix, -originOffsetX, -originOffsetY);
+        nextMatrix = mat.scale(nextMatrix, nextZoom / currentZoom);
+        nextMatrix = mat.translate(nextMatrix, originOffsetX, originOffsetY);
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'scale', state.last),
+          immediate: !state.last
+        });
+
         if (dragLockRef) {
           dragLockRef.current = true;
         }
@@ -118,13 +137,13 @@ export const Slide = props => {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: () => [x.get(), y.get()],
+      from: () => [mat.getTranslateX(matrix.get()), mat.getTranslateY(matrix.get())],
       pointer: {
         touch: true
       }
     },
     pinch: {
-      from: () => [zoom.get(), 0],
+      from: () => [mat.getScaleX(matrix.get()), 0],
       pointer: {
         touch: true
       }
@@ -133,7 +152,7 @@ export const Slide = props => {
   return React.createElement("div", {
     className: `${classPrefix}-slide`,
     onPointerMove: e => {
-      if (zoom.get() !== 1) {
+      if (mat.getScaleX(matrix.get()) !== 1) {
         e.stopPropagation();
       }
     }
@@ -143,9 +162,7 @@ export const Slide = props => {
   }, React.createElement(animated.div, {
     className: `${classPrefix}-image-wrapper`,
     style: {
-      translateX: x,
-      translateY: y,
-      scale: zoom
+      matrix
     }
   }, React.createElement("img", {
     ref: imgRef,

package/2x/es/components/image-viewer/slides.js

@@ -75,8 +75,8 @@ export const Slides = forwardRef((props, ref) => {
     style: {
       x: x.to(x => -x)
     }
-  }, props.images.map(image => React.createElement(Slide, {
-    key: image,
+  }, props.images.map((image, index) => React.createElement(Slide, {
+    key: index,
     image: image,
     onTap: props.onTap,
     maxZoom: props.maxZoom,

package/2x/es/components/index-bar/index-bar.css

@@ -24,8 +24,8 @@
   height: 70px;
   padding: 0 24px;
   color: var(--adm-color-weak);
-  font-size: 26px;
-  background-color: #f5f5f5;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-box);
 }
 
 .adm-index-bar-sidebar {
@@ -36,7 +36,8 @@
   z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
+  -webkit-user-select: none;
   user-select: none;
   touch-action: none;
 }
@@ -44,7 +45,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 84px;
+  right: 120px;
   width: 94px;
   height: 94px;
   color: var(--adm-color-white);
@@ -78,7 +79,7 @@
 }
 
 .adm-index-bar-sidebar-item-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }
@@ -88,6 +89,7 @@
 }
 
 .adm-index-bar-sticky .adm-index-bar-anchor-title {
+  position: -webkit-sticky;
   position: sticky;
   z-index: 900;
   top: var(--sticky-offset-top);