@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/image/api.md

@@ -0,0 +1,54 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|status|指定图片状态，staticLabel=false时有效|"loading" \| "loaded" \| "init" \| "error"|-|
+|src|图片链接|string|必填|
+|width|容器宽度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|height|容器高度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|alt|替代文本|string|""|
+|fit|图片填充模式(object\-fit)，传preview\-\*为预览模式，预览模式仅staticLabel=false时有效|"\-moz\-initial" \| "inherit" \| "initial" \| "revert" \| "revert\-layer" \| "unset" \| "contain" \| "cover" \| "fill" \| "none" \| "scale\-down" \| "preview\-y" \| "preview\-x"|"fill"|
+|position|图片填充位置(object\-position)|ObjectPosition\<ReactText\>|"center"|
+|radius|图片圆角|ReactText|-|
+|bordered|是否加边框|boolean|-|
+|loadingArea|自定义展示加载中内容|ReactNode|-|
+|errorArea|自定义展示加载失败内容|ReactNode|-|
+|showLoading|是否展示图片加载中提示|boolean|-|
+|showError|是否展示图片加载失败提示|boolean|-|
+|animateDuration|加载完时展现动画时长，staticLabel=false时有效|number|200|
+|retryTime|失败时自动重试次数|number|0|
+|forceHttps|是否强制使用https|boolean|-|
+|boxWidth|预览模式下，父容器宽度|number|-|
+|boxHeight|预览模式下，父容器高度|number|-|
+|topOverlap|图片顶层内容|ReactNode|-|
+|bottomOverlap|图片底层内容（placeholder），默认是灰色兜底，传null可移除|ReactNode|-|
+|showImage|手动控制是否加载图片|boolean|-|
+|staticLabel|是否直接渲染\<img\>标签，不走加载图片流程|boolean|-|
+|nativeProps|img标签原生属性，优先级低于单独设置|DetailedHTMLProps\<ImgHTMLAttributes\<HTMLImageElement\>, HTMLImageElement\>|-|
+|onChange|切换status时触发的回调|(status: string) =\> void|-|
+|onClick|点击图片时触发的回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|-|
+|onLoad|图片加载完毕时触发的回调|(e: Event, image: HTMLImageElement) =\> void|-|
+|onError|图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发|(e: string \| Event) =\> void|-|
+|onAutoRetry|图片加载失败时自动重试触发的回调|(e: string \| Event) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|image|原生图片元素 DOM|HTMLImageElement|
+|retry|手动重试图片加载|() =\> void|
+
+> ImageStatus
+
+```
+"loading" | "loaded" | "init" | "error"
+```
+
+> ObjectPosition
+
+```
+string | number | string & {}
+```

package/metaData/components/image/style.md

@@ -0,0 +1,144 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image {
+    display: inline-block;
+    position: relative;
+
+    &.preview {
+        transition: all 0.3s ease-in-out;
+
+        .image-container,
+        .image-loading-container .image-loading,
+        .image-error-container .image-retry-load {
+            background-color: transparent;
+        }
+
+        .image-container::after {
+            border-color: transparent;
+        }
+    }
+
+    .image-bottom-overlap,
+    .image-top-overlap {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .image-bottom-overlap {
+        z-index: 0;
+        overflow: hidden;
+    }
+
+    .image-placeholder {
+        .use-var(background-color, image-placeholder-background);
+        width: 100%;
+        height: 100%;
+    }
+
+    .image-top-overlap {
+        z-index: 10;
+    }
+
+    .image-loading-container,
+    .image-error-container {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .use-var(font-size, image-inner-font-size);
+    }
+
+    .image-container {
+        position: relative;
+        font-size: 0;
+        opacity: 0;
+        z-index: 1;
+        overflow: hidden;
+
+        &.static-label,
+        &.loaded,
+        &.error,
+        &.has-loaded {
+            opacity: 1;
+        }
+
+        &.animate {
+            transition-property: opacity;
+            .use-var(transition-timing-function, image-transition-function);
+        }
+
+        .bordered {
+            .hairline-var(line-color);
+        }
+
+        &,
+        & img {
+            width: inherit;
+            height: inherit;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: inherit;
+            max-height: inherit;
+        }
+
+        .preview-fit-contain-y {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .preview-fit-contain-x {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .image-error-container {
+        .image-retry-load {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(background-color, image-mask-background);
+            .use-var(font-size, image-retry-font-size);
+            .use-var(color, image-retry-icon-color);
+        }
+    }
+
+    .image-loading-container {
+        .image-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(color, image-loading-icon-color);
+            .use-var(background-color, image-mask-background);
+            .set-loading-color-var(image-loading-icon-color);
+        }
+    }
+}

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

@@ -0,0 +1,108 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|images|已选择图片列表|ImagePickItem\[\]|必填|
+|accept|可以选择的文件类型|string|'image/*'|
+|multiple|是否支持多选|boolean|-|
+|capture|图片选取模式 Image selection mode \[capture MDN\](https://developer\.mozilla\.org/en\-US/docs/Web/HTML/Attributes/capture)|string \| boolean|-|
+|columns|一行展示图片张数|number|3|
+|gutter|格子间的间距|number|8|
+|hideDelete|是否隐藏删除Icon|boolean|false|
+|hideSelect|是否隐藏选择Icon|boolean|false|
+|alwaysShowSelect|是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon|boolean|false|
+|disabled|禁用选择和删除图片|boolean|-|
+|deleteIcon|自定义删除图标|ReactNode|-|
+|selectIcon|自定义选择图标|ReactNode|-|
+|imageProps|透传给图片的属性|Partial\<ImageProps\>|-|
+|renderError|自定义上传失败展示|(index?: number) =\> ReactNode|-|
+|renderLoading|自定义上传中展示|(index?: number) =\> ReactNode|-|
+|onSelectClick|选图点击事件(同onUploadClick)|() =\> void|-|
+|onUploadClick|选图点击事件|() =\> void|-|
+|upload|上传方法|(file: ImagePickItem) =\> Promise\<ImagePickItem\>|-|
+|onChange|已选文件列表发生变化|(fileList: ImagePickItem\[\]) =\> void|-|
+|maxSize|文件大小限制，单位为K|number|-|
+|onMaxSizeExceed|文件超过限制大小|(file: File) =\> void|-|
+|limit|最多选择文件数，超出数量自动隐藏上传按钮，0表示不做限制|number|0|
+|onLimitExceed|选择文件数超过限制|(files: File\[\]) =\> void|-|
+|onDeleteClick|删除点击事件|(index: number) =\> void|-|
+|selectAdapter|文件选择适配器|() =\> Promise\<SelectCallback\>|-|
+|onClick|文件点击|(e: MouseEvent\<HTMLElement, MouseEvent\>, file: ImagePickItem, index: number) =\> void|-|
+|onLongPress|文件长按事件|(e: TouchEvent\<HTMLElement\>, file: ImagePickItem, index: number) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> ImagePickItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|url|图片地址|string|必填|
+|file|文件|File|-|
+|status|文件状态|"loaded" \| "loading" \| "error"|以文件自身加载状态而定|
+
+> ImageProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|status|指定图片状态，staticLabel=false时有效|"loaded" \| "loading" \| "error" \| "init"|-|
+|src|图片链接|string|必填|
+|width|容器宽度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|height|容器高度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|alt|替代文本|string|""|
+|fit|图片填充模式(object\-fit)，传preview\-\*为预览模式，预览模式仅staticLabel=false时有效|"\-moz\-initial" \| "inherit" \| "initial" \| "revert" \| "revert\-layer" \| "unset" \| "contain" \| "cover" \| "fill" \| "none" \| "scale\-down" \| "preview\-y" \| "preview\-x"|"fill"|
+|position|图片填充位置(object\-position)|ObjectPosition\<ReactText\>|"center"|
+|radius|图片圆角|ReactText|-|
+|bordered|是否加边框|boolean|-|
+|loadingArea|自定义展示加载中内容|ReactNode|-|
+|errorArea|自定义展示加载失败内容|ReactNode|-|
+|showLoading|是否展示图片加载中提示|boolean|-|
+|showError|是否展示图片加载失败提示|boolean|-|
+|animateDuration|加载完时展现动画时长，staticLabel=false时有效|number|200|
+|retryTime|失败时自动重试次数|number|0|
+|forceHttps|是否强制使用https|boolean|-|
+|boxWidth|预览模式下，父容器宽度|number|-|
+|boxHeight|预览模式下，父容器高度|number|-|
+|topOverlap|图片顶层内容|ReactNode|-|
+|bottomOverlap|图片底层内容（placeholder），默认是灰色兜底，传null可移除|ReactNode|-|
+|showImage|手动控制是否加载图片|boolean|-|
+|staticLabel|是否直接渲染\<img\>标签，不走加载图片流程|boolean|-|
+|nativeProps|img标签原生属性，优先级低于单独设置|DetailedHTMLProps\<ImgHTMLAttributes\<HTMLImageElement\>, HTMLImageElement\>|-|
+|onChange|切换status时触发的回调|(status: string) =\> void|-|
+|onClick|点击图片时触发的回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|-|
+|onLoad|图片加载完毕时触发的回调|(e: Event, image: HTMLImageElement) =\> void|-|
+|onError|图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发|(e: string \| Event) =\> void|-|
+|onAutoRetry|图片加载失败时自动重试触发的回调|(e: string \| Event) =\> void|-|
+
+> ImageStatus
+
+```
+"loaded" | "loading" | "error" | "init"
+```
+
+> ObjectPosition
+
+```
+string | number | string & {}
+```
+
+> SelectCallback
+
+|参数|描述|类型|
+|----------|-------------|------|
+|files|文件列表|AdapterFile\[\]|
+
+> AdapterFile
+
+|参数|描述|类型|
+|----------|-------------|------|
+|url|文件 url|string|
+|size|文件大小|number|
+|name|文件名|string|

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

@@ -0,0 +1,116 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image-picker {
+    .use-var(font-size, image-picker-font-size);
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .container() {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        left: 0;
+    }
+    &-image {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100%;
+        .use-var(border-radius, image-picker-border-radius);
+        overflow: hidden;
+        &-container {
+            .container()
+        }
+        .@{prefix}-image {
+            height: 100%;
+            width: 100%;
+        }
+        &-mask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+    &-add {
+        .use-var(background-color, image-picker-add-background);
+        .use-var(border-radius, image-picker-border-radius);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-top: 100%;
+        &-container {
+            .container();
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            .use-var(font-size, image-picker-add-text-font-size);
+            .use-var(color, image-picker-add-text-color);
+        }
+        &-icon {
+            .use-var(font-size, image-picker-add-icon-font-size);
+            .use-var(color, image-picker-add-icon-color);
+            svg {
+                display: block;
+            }
+        }
+        &-disabled {
+            pointer-events: none;
+        }
+        &-disabled &-icon {
+            .use-var(opacity, image-picker-disabled-opacity);
+        }
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        &-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(font-size, image-picker-close-font-size);
+            .use-var(width, image-picker-close-width);
+            .use-var(height, image-picker-close-height);
+            .use-var(color, image-picker-close-color);
+            .use-var(background, image-picker-close-background);
+            .use-var(border-radius, image-picker-close-border-radius);
+        }
+    }
+    &-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .use-var(background, image-picker-error-background);
+        .use-var(color, image-picker-error-color);
+        .use-var(font-size, image-picker-font-size);
+    }
+}
+
+.@{prefix}-image-picker-disabled {
+    pointer-events: none;
+}

package/metaData/components/image-preview/api.md

@@ -0,0 +1,111 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|images|图片信息数组|PreviewImageProps\[\]|必填|
+|openIndex|打开时展示的index，在images范围内会展示弹窗，否则隐藏弹窗|number|必填|
+|loop|是否可循环滑动|boolean|false|
+|fit|图片布局方式，preview\-y为宽度撑满高度溢出滚动，preview\-x为高度撑满宽度溢出滚动|"preview\-y" \| "preview\-x"|"preview-y"|
+|displayDuration|打开和关闭时的过渡动画|number|300|
+|replaceFallbackWhenLoaded|是否在原图加载完成后将过渡图动画替换为原图动画|boolean|-|
+|noselect|图片不可选中，屏蔽系统默认事件|boolean|true|
+|spaceBetween|图片横向间距|number|-|
+|loadingArea|自定义展示加载中内容|ReactNode|-|
+|errorArea|自定义展示加载失败内容|ReactNode|-|
+|showLoading|是否展示图片加载中提示|boolean|true|
+|showError|是否展示图片加载失败提示|boolean|true|
+|retryTime|失败时自动重试次数|number|-|
+|staticLabel|是否直接渲染\<img\>标签，不走加载图片流程|boolean|-|
+|scrollBezier|长图滚动变化曲线|\[number, number, number, number\]|-|
+|lazyloadCount|只加载当前页相邻的n个内容，为0时会销毁所有相邻内容|number|1|
+|swipeToClose|当图片滚动到边缘时，继续滑动是否关闭预览|boolean|true|
+|indicatorPos|轮播索引位置|"start" \| "center" \| "end"|"start"|
+|extra|渲染自定义元素，如自定义关闭按钮|ReactNode|-|
+|getMinScale|图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0\.7|(image: HTMLImageElement, imageIndex: number) =\> number|-|
+|getMaxScale|图片最大缩放倍数，默认根据图片尺寸调节|(image: HTMLImageElement, imageIndex: number) =\> number|-|
+|getDoubleClickScale|当双击图片时，图片应缩放的倍数|(currentScale: number, maxScale: number, image: HTMLImageElement, imageIndex: number) =\> number|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|renderIndicator|自定义索引内容|(currentIndex: number, total: number, lastIndex: number) =\> ReactNode|-|
+|getThumbBounds|获取缩略图定位|(index: number) =\> ClientRect|-|
+|onChange|索引发生改变时回调|(index: number) =\> void|-|
+|onAfterChange|索引切换，动画完成后触发|(index: number) =\> void|-|
+|close|关闭弹窗|(e: MouseEvent\<HTMLDivElement, MouseEvent\> \| TouchEvent) =\> void|必填|
+|onClose|关闭弹窗回调（动画执行完成后）|() =\> void|-|
+|onImageClick|点击图片回调，如果返回true则阻止关闭弹窗|(index: number, e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> boolean \| void|-|
+|onImageDoubleClick|双击图片回调|(index: number, e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onImageLongTap|长按图片回调|(index: number, image: HTMLImageElement, e: TouchEvent) =\> void|-|
+|onTouchStart|弹窗内容touchstart事件|(e: TouchEvent, index: number) =\> boolean \| void|-|
+|onTouchMove|弹窗内容touchmove事件|(e: TouchEvent, index: number) =\> boolean \| void|-|
+|onTouchEnd|弹窗内容touchend / touchcancel事件|(e: TouchEvent, index: number) =\> boolean \| void|-|
+|animateDurationSlide|手动切换轮播滑块时，当手指释放后，动画的执行时间(ms)|number|300|
+|showIndicator|是否展示轮播索引|boolean|true|
+|hideSingleIndicator|children 只有一个时隐藏轮播索引|boolean|true|
+|percentToChange|滑动切换距离阈值(宽度比例)，范围为\[0, 1\]，如果该属性和\`distanceToChange\`属性均设置，则实际计算结果更大的生效|number|0.3|
+|distanceToChange|滑动切换距离阈值(固定px宽度)，如果该属性和\`percentToChange\`属性均设置，则实际计算结果更大的生效|number|10|
+|speedToChange|滑动切换速度阈值(手指从按下到抬起之间的滑动速度，单位为px/s)，与滑动切换距离阈值同时设置时，满足其中一个即生效|number|200|
+|swipeable|是否响应手势滑动|boolean|true|
+|offsetBetween|前后两端露出距离，设置值时不能循环轮播|number \| \{ left?: number; right?: number; \}|0|
+|renderExtra|在轮播图内部渲染额外元素，该元素不随轮播滑动，但处于手指可交互热区|(currentIndex: number) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|imageDoms|原生图片 DOM 列表|HTMLImageElement\[\]|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|open|打开图片预览|(config: ImagePreviewProps) =\> \{ close: () =\> void; update: (newConfig: ImagePreviewProps) =\> void; \}|
+
+> PreviewImageProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|src|图片地址|string|必填|
+|fit|图片布局方式，preview\-y为宽度撑满高度溢出滚动，preview\-x为高度撑满宽度溢出滚动|"preview\-y" \| "preview\-x"|-|
+|fallbackSrc|过渡图url|string|-|
+|transitionEndDelay|过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求|number|30|
+|thumbPosition|缩略图填充方式（backgroundPosition），默认top center|string|-|
+|extraNode|自定义DOM|ReactNode|-|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/image-preview/style.md

@@ -0,0 +1,103 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image-preview,
+.image-preview-lock-modal {
+    .full-screen();
+    z-index: @full-screen-z-index;
+}
+
+.image-preview-lock-modal {
+    transform: translateZ(2PX);
+}
+
+.@{prefix}-image-preview {
+    .use-var(background, image-preview-mask-background);
+
+    &.noselect {
+        -webkit-touch-callout: none;
+        .noselect();
+    }
+
+    .preview-image-wrap-container, .preview-image-wrap {
+        width: 100%;
+        height: 100%;
+    }
+    .@{prefix}-carousel-wrap,
+    .@{prefix}-carousel,
+    .@{prefix}-carousel-inner {
+        height: 100%;
+    }
+
+    .carousel-item {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+
+        .image-container {
+            overflow: visible;
+        }
+
+        &.preview-hidden {
+            pointer-events: none;
+
+            .image-container {
+                visibility: hidden;
+            }
+        }
+
+        .image-bottom-overlap {
+            overflow: visible;
+        }
+    }
+}
+
+.image-preview-indicator {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: @full-screen-z-index + 3;
+    position: fixed;
+    box-sizing: border-box;
+    .use-var(font-size, image-preview-indicator-font-size);
+    .use-var(color, mask-content-color);
+    .use-var(padding, image-preview-indicator-padding);
+    .use-var(background, image-preview-indicator-background);
+}
+
+.image-preview-fake-rect {
+    .full-screen();
+    opacity: 0;
+}
+
+.@{prefix}-image-preview .image-container img.closing-animation,
+.image-preview-fake-trans-image {
+    position: fixed;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    .use-var(transition, image-preview-thumb-transition);
+    will-change: transform;
+    pointer-events: none;
+    height: auto !important;
+}
+
+.image-preview-loading-area {
+    .full-screen();
+    z-index: @full-screen-z-index + 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .loading-icon {
+        .set-loading-color-var(mask-content-color);
+    }
+}