eli-video-interview 1.2.35 → 1.2.36-alpha.0

package/esm/store/ai-question/interview-room-store.d.ts

@@ -0,0 +1,20 @@
+import { InterviewRoomProps } from '@/modules/ai-question/interface';
+export declare const useInterviewRoomStore: (depsFn?: import("hox/es/types").DepsFn<{
+    interviewRoomState: InterviewRoomProps;
+    updateInterviewRoom: import("ahooks/lib/useSetState").SetState<InterviewRoomProps>;
+    interactType: number;
+    aiVideoStatus?: number | undefined;
+    aiInterviewerProfile?: import("@/modules/ai-question/interface").AiInterviewerProfile | undefined;
+}> | undefined) => {
+    interviewRoomState: InterviewRoomProps;
+    updateInterviewRoom: import("ahooks/lib/useSetState").SetState<InterviewRoomProps>;
+    interactType: number;
+    aiVideoStatus?: number | undefined;
+    aiInterviewerProfile?: import("@/modules/ai-question/interface").AiInterviewerProfile | undefined;
+}, getInterviewRoomStore: () => {
+    interviewRoomState: InterviewRoomProps;
+    updateInterviewRoom: import("ahooks/lib/useSetState").SetState<InterviewRoomProps>;
+    interactType: number;
+    aiVideoStatus?: number | undefined;
+    aiInterviewerProfile?: import("@/modules/ai-question/interface").AiInterviewerProfile | undefined;
+} | undefined;

package/esm/store/ai-question/interview-room-store.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a;
+import { useSetState } from 'ahooks';
+import { createGlobalStore } from 'hox';
+export var useInterviewRoomStore = (_a = createGlobalStore(function () {
+    var _a = useSetState({
+        interactType: 1,
+        aiVideoStatus: 0,
+    }), interviewRoomState = _a[0], updateInterviewRoom = _a[1];
+    return __assign(__assign({}, interviewRoomState), { interviewRoomState: interviewRoomState, updateInterviewRoom: updateInterviewRoom });
+}), _a[0]), getInterviewRoomStore = _a[1];

package/esm/store/ai-template/global-store.d.ts

@@ -8,6 +8,7 @@ export declare const useAiTemplateStore: (depsFn?: import("hox/es/types").DepsFn
     open: boolean;
     historyPatterns?: import("@/modules/ai-template/interface").HistoryPatterns[] | undefined;
     currentSteps?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
+    currentCheckedQuestions?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
     onClose?: (() => void) | undefined;
     onUseTemplate?: ((list?: import("@/modules/ai-template/interface").QuestionList[] | undefined) => void) | undefined;
 }> | undefined) => {
@@ -19,6 +20,7 @@ export declare const useAiTemplateStore: (depsFn?: import("hox/es/types").DepsFn
     open: boolean;
     historyPatterns?: import("@/modules/ai-template/interface").HistoryPatterns[] | undefined;
     currentSteps?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
+    currentCheckedQuestions?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
     onClose?: (() => void) | undefined;
     onUseTemplate?: ((list?: import("@/modules/ai-template/interface").QuestionList[] | undefined) => void) | undefined;
 }, getAiTemplateStore: () => {
@@ -30,6 +32,7 @@ export declare const useAiTemplateStore: (depsFn?: import("hox/es/types").DepsFn
     open: boolean;
     historyPatterns?: import("@/modules/ai-template/interface").HistoryPatterns[] | undefined;
     currentSteps?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
+    currentCheckedQuestions?: import("@/modules/ai-template/interface").QuestionList[] | undefined;
     onClose?: (() => void) | undefined;
     onUseTemplate?: ((list?: import("@/modules/ai-template/interface").QuestionList[] | undefined) => void) | undefined;
 } | undefined;

package/esm/store/ai-template/global-store.js

@@ -10,12 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 var _a;
-import { useEffect } from 'react';
+import { PostAiTemplatesIncrUse } from "../../services/ai-template";
 import { useRequest, useSetState } from 'ahooks';
 import { createGlobalStore } from 'hox';
-import { PostAiTemplatesIncrUse } from "../../services/ai-template";
+import { useEffect } from 'react';
 export var useAiTemplateStore = (_a = createGlobalStore(function () {
-    var _a = useSetState({ open: false, historyPatterns: [] }), props = _a[0], updateProps = _a[1];
+    var _a = useSetState({ open: false, historyPatterns: [], currentCheckedQuestions: [] }), props = _a[0], updateProps = _a[1];
     var _b = useSetState({ menuId: '' }), state = _b[0], updateState = _b[1];
     var handleIncrUse = useRequest(PostAiTemplatesIncrUse, { manual: true }).run;
     useEffect(function () {

package/esm/store/enterprise/enterprise-store.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const useEnterpriseStore: (depsFn?: import("hox/es/types").DepsFn<{
+    enterprise: {
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    };
+    setEnterprise: import("react").Dispatch<import("react").SetStateAction<{
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    }>>;
+}> | undefined) => {
+    enterprise: {
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    };
+    setEnterprise: import("react").Dispatch<import("react").SetStateAction<{
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    }>>;
+}, getEnterpriseStore: () => {
+    enterprise: {
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    };
+    setEnterprise: import("react").Dispatch<import("react").SetStateAction<{
+        jobToken?: string | undefined;
+        thirdToken?: string | undefined;
+    }>>;
+} | undefined;

package/esm/store/enterprise/enterprise-store.js

@@ -0,0 +1,13 @@
+var _a;
+import { createGlobalStore } from 'hox';
+import { useState } from 'react';
+export var useEnterpriseStore = (_a = createGlobalStore(function () {
+    var _a = useState({
+        jobToken: 'vWqoOO3mWRh7JO2R5M2QRXO8WX',
+        thirdToken: '7nkaOm56MyljuO109r4sQXWWOS',
+    }), enterprise = _a[0], setEnterprise = _a[1];
+    return {
+        enterprise: enterprise,
+        setEnterprise: setEnterprise,
+    };
+}), _a[0]), getEnterpriseStore = _a[1];

package/lib/components/Charts/Chart.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var echarts = __importStar(require("echarts"));
+var echarts = __importStar(require("@avocadoui/echarts"));
 var react_1 = require("react");
 var charts = {};
 var Chart = function (_a) {

package/lib/components/react-photo-view/Photo.css

@@ -0,0 +1,14 @@
+.PhotoView__Photo {
+  max-width: initial;
+  cursor: grab;
+}
+.PhotoView__Photo:active {
+  cursor: grabbing;
+}
+.PhotoView__icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  transform: translate(-50%, -50%);
+}

package/lib/components/react-photo-view/Photo.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Photo.css';
+import type { BrokenElementParams } from './types';
+export interface IPhotoLoadedParams {
+    loaded?: boolean;
+    naturalWidth?: number;
+    naturalHeight?: number;
+    broken?: boolean;
+}
+export interface IPhotoProps extends React.HTMLAttributes<HTMLElement> {
+    src: string;
+    loaded: boolean;
+    broken: boolean;
+    onPhotoLoad: (params: IPhotoLoadedParams) => void;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element);
+}
+export default function Photo({ src, loaded, broken, className, onPhotoLoad, loadingElement, brokenElement, ...restProps }: IPhotoProps): JSX.Element | null;

package/lib/components/react-photo-view/Photo.js

@@ -0,0 +1,60 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Spinner_1 = __importDefault(require("./components/Spinner"));
+var useMountedRef_1 = __importDefault(require("./hooks/useMountedRef"));
+require("./Photo.css");
+function Photo(_a) {
+    var src = _a.src, loaded = _a.loaded, broken = _a.broken, className = _a.className, onPhotoLoad = _a.onPhotoLoad, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, restProps = __rest(_a, ["src", "loaded", "broken", "className", "onPhotoLoad", "loadingElement", "brokenElement"]);
+    var mountedRef = (0, useMountedRef_1.default)();
+    function handleImageLoaded(e) {
+        var _a = e.target, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+        if (mountedRef.current) {
+            onPhotoLoad({
+                loaded: true,
+                naturalWidth: naturalWidth,
+                naturalHeight: naturalHeight,
+            });
+        }
+    }
+    function handleImageBroken() {
+        if (mountedRef.current) {
+            onPhotoLoad({
+                broken: true,
+            });
+        }
+    }
+    if (src && !broken) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", __assign({ className: "PhotoView__Photo".concat(className ? " ".concat(className) : ''), src: src, onLoad: handleImageLoaded, onError: handleImageBroken, alt: "" }, restProps)), !loaded && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "PhotoView__icon" }, { children: loadingElement })) || (0, jsx_runtime_1.jsx)(Spinner_1.default, { className: "PhotoView__icon" }))] }));
+    }
+    if (brokenElement) {
+        return (0, jsx_runtime_1.jsx)("span", __assign({ className: "PhotoView__icon" }, { children: typeof brokenElement === 'function' ? brokenElement({ src: src }) : brokenElement }));
+    }
+    return null;
+}
+exports.default = Photo;

package/lib/components/react-photo-view/PhotoBox.css

@@ -0,0 +1,18 @@
+.PhotoView__PhotoWrap,
+.PhotoView__PhotoBox {
+  position: absolute;
+  top: 24px;
+  right: 0;
+  bottom: 182px;
+  left: 0;
+  width: 100%;
+  touch-action: none;
+  direction: ltr;
+}
+.PhotoView__PhotoWrap {
+  z-index: 10;
+  overflow: hidden;
+}
+.PhotoView__PhotoBox {
+  transform-origin: left top;
+}

package/lib/components/react-photo-view/PhotoBox.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import './PhotoBox.css';
+import type { BrokenElementParams, DataType, ExposedProperties, PhotoTapFunction, ReachFunction, ReachMoveFunction } from './types';
+export interface PhotoBoxProps {
+    item: DataType;
+    visible: boolean;
+    speed: number;
+    easing: string;
+    wrapClassName?: string;
+    className?: string;
+    style?: object;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element);
+    onPhotoTap: PhotoTapFunction;
+    onMaskTap: PhotoTapFunction;
+    onReachMove: ReachMoveFunction;
+    onReachUp: ReachFunction;
+    onPhotoResize: () => void;
+    expose: (state: ExposedProperties) => void;
+    isActive: boolean;
+}
+export default function PhotoBox({ item: { src, render, width: customWidth, height: customHeight, originRef }, visible, speed, easing, wrapClassName, className, style, loadingElement, brokenElement, onPhotoTap, onMaskTap, onReachMove, onReachUp, onPhotoResize, isActive, expose, }: PhotoBoxProps): JSX.Element;

package/lib/components/react-photo-view/PhotoBox.js

@@ -0,0 +1,308 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useAnimationPosition_1 = __importDefault(require("./hooks/useAnimationPosition"));
+var useContinuousTap_1 = __importDefault(require("./hooks/useContinuousTap"));
+var useDebounceCallback_1 = __importDefault(require("./hooks/useDebounceCallback"));
+var useEventListener_1 = __importDefault(require("./hooks/useEventListener"));
+var useIsomorphicLayoutEffect_1 = __importDefault(require("./hooks/useIsomorphicLayoutEffect"));
+var useMethods_1 = __importDefault(require("./hooks/useMethods"));
+var useMountedRef_1 = __importDefault(require("./hooks/useMountedRef"));
+var useScrollPosition_1 = __importDefault(require("./hooks/useScrollPosition"));
+var useSetState_1 = __importDefault(require("./hooks/useSetState"));
+var Photo_1 = __importDefault(require("./Photo"));
+require("./PhotoBox.css");
+var edgeHandle_1 = require("./utils/edgeHandle");
+var getMultipleTouchPosition_1 = __importDefault(require("./utils/getMultipleTouchPosition"));
+var getPositionOnMoveOrScale_1 = __importDefault(require("./utils/getPositionOnMoveOrScale"));
+var getRotateSize_1 = __importDefault(require("./utils/getRotateSize"));
+var getSuitableImageSize_1 = __importDefault(require("./utils/getSuitableImageSize"));
+var isTouchDevice_1 = __importDefault(require("./utils/isTouchDevice"));
+var limitTarget_1 = require("./utils/limitTarget");
+var variables_1 = require("./variables");
+var initialState = {
+    // 真实宽度
+    naturalWidth: undefined,
+    // 真实高度
+    naturalHeight: undefined,
+    // 宽度
+    width: undefined,
+    // 高度
+    height: undefined,
+    // 加载成功状态
+    loaded: undefined,
+    // 破碎状态
+    broken: false,
+    // 图片 X 偏移量
+    x: 0,
+    // 图片 y 偏移量
+    y: 0,
+    // 图片处于触摸的状态
+    touched: false,
+    // 背景处于触摸状态
+    maskTouched: false,
+    // 旋转状态
+    rotate: 0,
+    // 放大缩小
+    scale: 1,
+    // 触摸开始时 x 原始坐标
+    CX: 0,
+    // 触摸开始时 y 原始坐标
+    CY: 0,
+    // 触摸开始时图片 x 偏移量
+    lastX: 0,
+    // 触摸开始时图片 y 偏移量
+    lastY: 0,
+    // 上一个触摸状态 x 原始坐标
+    lastCX: 0,
+    // 上一个触摸状态 y 原始坐标
+    lastCY: 0,
+    // 上一个触摸状态的 scale
+    lastScale: 1,
+    // 触摸开始时时间
+    touchTime: 0,
+    // 多指触控间距
+    touchLength: 0,
+    // 是否暂停 transition
+    pause: true,
+    // 停止 Raf
+    stopRaf: true,
+    // 当前边缘触发状态
+    reach: undefined,
+};
+function PhotoBox(_a) {
+    var _b = _a.item, src = _b.src, render = _b.render, _c = _b.width, customWidth = _c === void 0 ? 0 : _c, _d = _b.height, customHeight = _d === void 0 ? 0 : _d, originRef = _b.originRef, visible = _a.visible, speed = _a.speed, easing = _a.easing, wrapClassName = _a.wrapClassName, className = _a.className, style = _a.style, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, onPhotoTap = _a.onPhotoTap, onMaskTap = _a.onMaskTap, onReachMove = _a.onReachMove, onReachUp = _a.onReachUp, onPhotoResize = _a.onPhotoResize, isActive = _a.isActive, expose = _a.expose;
+    var _e = (0, useSetState_1.default)(initialState), state = _e[0], updateState = _e[1];
+    var initialTouchRef = (0, react_1.useRef)(0);
+    var mounted = (0, useMountedRef_1.default)();
+    var _f = state.naturalWidth, naturalWidth = _f === void 0 ? customWidth : _f, _g = state.naturalHeight, naturalHeight = _g === void 0 ? customHeight : _g, _h = state.width, width = _h === void 0 ? customWidth : _h, _j = state.height, height = _j === void 0 ? customHeight : _j, _k = state.loaded, loaded = _k === void 0 ? !src : _k, broken = state.broken, x = state.x, y = state.y, touched = state.touched, stopRaf = state.stopRaf, maskTouched = state.maskTouched, rotate = state.rotate, scale = state.scale, CX = state.CX, CY = state.CY, lastX = state.lastX, lastY = state.lastY, lastCX = state.lastCX, lastCY = state.lastCY, lastScale = state.lastScale, touchTime = state.touchTime, touchLength = state.touchLength, pause = state.pause, reach = state.reach;
+    var fn = (0, useMethods_1.default)({
+        onScale: function (current) { return onScale((0, limitTarget_1.limitScale)(current)); },
+        onRotate: function (current) {
+            if (rotate !== current) {
+                expose({ rotate: current });
+                updateState(__assign({ rotate: current }, (0, getSuitableImageSize_1.default)(naturalWidth, naturalHeight, current)));
+            }
+        },
+    });
+    // 默认为屏幕中心缩放
+    function onScale(current, clientX, clientY) {
+        if (scale !== current) {
+            expose({ scale: current });
+            updateState(__assign(__assign({ scale: current }, (0, getPositionOnMoveOrScale_1.default)(x, y, width, height, scale, current, clientX, clientY)), (current <= 1 && { x: 0, y: 0 })));
+        }
+    }
+    var handleMove = (0, useDebounceCallback_1.default)(function (nextClientX, nextClientY, currentTouchLength) {
+        if (currentTouchLength === void 0) { currentTouchLength = 0; }
+        if ((touched || maskTouched) && isActive) {
+            // 通过旋转调换宽高
+            var _a = (0, getRotateSize_1.default)(rotate, width, height), currentWidth_1 = _a[0], currentHeight_1 = _a[1];
+            // 单指最小缩放下，以初始移动距离来判断意图
+            if (currentTouchLength === 0 && initialTouchRef.current === 0) {
+                var isStillX = Math.abs(nextClientX - CX) <= variables_1.minStartTouchOffset;
+                var isStillY = Math.abs(nextClientY - CY) <= variables_1.minStartTouchOffset;
+                // 初始移动距离不足
+                if (isStillX && isStillY) {
+                    // 方向记录上次移动距离，以便平滑过渡
+                    updateState({ lastCX: nextClientX, lastCY: nextClientY });
+                    return;
+                }
+                // 设置响应状态
+                initialTouchRef.current = !isStillX ? 1 : nextClientY > CY ? 3 : 2;
+            }
+            var offsetX = nextClientX - lastCX;
+            var offsetY = nextClientY - lastCY;
+            // 边缘触发状态
+            var currentReach = undefined;
+            if (currentTouchLength === 0) {
+                // 边缘超出状态
+                var horizontalCloseEdge = (0, edgeHandle_1.computePositionEdge)(offsetX + lastX, scale, currentWidth_1, window.innerWidth)[0];
+                var verticalCloseEdge = (0, edgeHandle_1.computePositionEdge)(offsetY + lastY, scale, currentHeight_1, window.innerHeight)[0];
+                // 边缘触发检测
+                currentReach = (0, edgeHandle_1.getReachType)(initialTouchRef.current, horizontalCloseEdge, verticalCloseEdge, reach);
+                // 接触边缘
+                if (currentReach !== undefined) {
+                    onReachMove(currentReach, nextClientX, nextClientY, scale);
+                }
+            }
+            // 横向边缘触发、背景触发禁用当前滑动
+            if (currentReach === 'x' || maskTouched) {
+                updateState({ reach: 'x' });
+                return;
+            }
+            // 目标倍数
+            var toScale = (0, limitTarget_1.limitScale)(scale + ((currentTouchLength - touchLength) / 100 / 2) * scale, naturalWidth / width, variables_1.scaleBuffer);
+            // 导出变量
+            expose({ scale: toScale });
+            updateState(__assign({ touchLength: currentTouchLength, reach: currentReach, scale: toScale }, (0, getPositionOnMoveOrScale_1.default)(x, y, width, height, scale, toScale, nextClientX, nextClientY, offsetX, offsetY)));
+        }
+    }, {
+        maxWait: 8,
+    });
+    function updateRaf(position) {
+        if (stopRaf || touched) {
+            return false;
+        }
+        if (mounted.current) {
+            // 下拉关闭时可以有动画
+            updateState(__assign(__assign({}, position), { pause: visible }));
+        }
+        return mounted.current;
+    }
+    var slideToPosition = (0, useScrollPosition_1.default)(function (nextX) { return updateRaf({ x: nextX }); }, function (nextY) { return updateRaf({ y: nextY }); }, function (nextScale) {
+        if (mounted.current) {
+            expose({ scale: nextScale });
+            updateState({ scale: nextScale });
+        }
+        return !touched && mounted.current;
+    });
+    var handlePhotoTap = (0, useContinuousTap_1.default)(onPhotoTap, function (currentClientX, currentClientY) {
+        if (!reach) {
+            // 若图片足够大，则放大适应的倍数
+            var endScale = scale !== 1 ? 1 : Math.max(2, naturalWidth / width);
+            onScale(endScale, currentClientX, currentClientY);
+        }
+    });
+    function handleUp(nextClientX, nextClientY) {
+        // 重置响应状态
+        initialTouchRef.current = 0;
+        if ((touched || maskTouched) && isActive) {
+            updateState({
+                touched: false,
+                maskTouched: false,
+                pause: false,
+                stopRaf: false,
+                reach: undefined,
+            });
+            var safeScale = (0, limitTarget_1.limitScale)(scale, naturalWidth / width);
+            // Go
+            slideToPosition(x, y, lastX, lastY, width, height, scale, safeScale, lastScale, rotate, touchTime);
+            onReachUp(nextClientX, nextClientY);
+            // 触发 Tap 事件
+            if (CX === nextClientX && CY === nextClientY) {
+                if (touched) {
+                    handlePhotoTap(nextClientX, nextClientY);
+                    return;
+                }
+                if (maskTouched) {
+                    onMaskTap(nextClientX, nextClientY);
+                }
+            }
+        }
+    }
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? undefined : 'mousemove', function (e) {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+    });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? undefined : 'mouseup', function (e) {
+        handleUp(e.clientX, e.clientY);
+    });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? 'touchmove' : undefined, function (e) {
+        e.preventDefault();
+        var position = (0, getMultipleTouchPosition_1.default)(e);
+        handleMove.apply(void 0, position);
+    }, { passive: false });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? 'touchend' : undefined, function (_a) {
+        var changedTouches = _a.changedTouches;
+        var touch = changedTouches[0];
+        handleUp(touch.clientX, touch.clientY);
+    }, { passive: false });
+    (0, useEventListener_1.default)('resize', (0, useDebounceCallback_1.default)(function () {
+        if (loaded && !touched) {
+            updateState((0, getSuitableImageSize_1.default)(naturalWidth, naturalHeight, rotate));
+            onPhotoResize();
+        }
+    }, { maxWait: 8 }));
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
+        if (isActive) {
+            expose(__assign({ scale: scale, rotate: rotate }, fn));
+        }
+    }, [isActive]);
+    function handlePhotoLoad(params) {
+        updateState(__assign(__assign({}, params), (params.loaded && (0, getSuitableImageSize_1.default)(params.naturalWidth || 0, params.naturalHeight || 0, rotate))));
+    }
+    function handleStart(currentClientX, currentClientY, currentTouchLength) {
+        if (currentTouchLength === void 0) { currentTouchLength = 0; }
+        updateState({
+            touched: true,
+            CX: currentClientX,
+            CY: currentClientY,
+            lastCX: currentClientX,
+            lastCY: currentClientY,
+            lastX: x,
+            lastY: y,
+            lastScale: scale,
+            touchLength: currentTouchLength,
+            touchTime: Date.now(),
+        });
+    }
+    function handleWheel(e) {
+        if (!reach) {
+            // 限制最大倍数和最小倍数
+            var toScale = (0, limitTarget_1.limitScale)(scale - e.deltaY / 100 / 2, naturalWidth / width);
+            updateState({ stopRaf: true });
+            onScale(toScale, e.clientX, e.clientY);
+        }
+    }
+    function handleMaskStart(e) {
+        updateState({
+            maskTouched: true,
+            CX: e.clientX,
+            CY: e.clientY,
+            lastX: x,
+            lastY: y,
+        });
+    }
+    function handleTouchStart(e) {
+        e.stopPropagation();
+        handleStart.apply(void 0, (0, getMultipleTouchPosition_1.default)(e));
+    }
+    function handleMouseDown(e) {
+        e.stopPropagation();
+        if (e.button === 0) {
+            handleStart(e.clientX, e.clientY, 0);
+        }
+    }
+    // 计算位置
+    var _l = (0, useAnimationPosition_1.default)(visible, originRef, loaded, x, y, width, height, scale, speed, function (isPause) { return updateState({ pause: isPause }); }), translateX = _l[0], translateY = _l[1], currentWidth = _l[2], currentHeight = _l[3], currentScale = _l[4], opacity = _l[5], easingMode = _l[6], FIT = _l[7];
+    // 图片 objectFit 渐变时间
+    var transitionLayoutTime = easingMode < 4 ? speed / 2 : easingMode > 4 ? speed : 0;
+    var transitionCSS = "transform ".concat(speed, "ms ").concat(easing);
+    var attrs = {
+        className: className,
+        onMouseDown: isTouchDevice_1.default ? undefined : handleMouseDown,
+        onTouchStart: isTouchDevice_1.default ? handleTouchStart : undefined,
+        onWheel: handleWheel,
+        style: {
+            width: currentWidth,
+            height: currentHeight,
+            opacity: opacity,
+            objectFit: easingMode === 4 ? undefined : FIT,
+            transform: rotate ? "rotate(".concat(rotate, "deg)") : undefined,
+            transition: 
+            // 初始状态无渐变
+            easingMode > 2 ? "".concat(transitionCSS, ", opacity ").concat(speed, "ms ease, height ").concat(transitionLayoutTime, "ms ").concat(easing) : undefined,
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView__PhotoWrap".concat(wrapClassName ? " ".concat(wrapClassName) : ''), style: style, onMouseDown: !isTouchDevice_1.default && isActive ? handleMaskStart : undefined, onTouchStart: isTouchDevice_1.default && isActive ? function (e) { return handleMaskStart(e.touches[0]); } : undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView__PhotoBox", style: {
+                transform: "matrix(".concat(currentScale, ", 0, 0, ").concat(currentScale, ", ").concat(translateX, ", ").concat(translateY - 107, ")"),
+                transition: touched || pause ? undefined : transitionCSS,
+                willChange: isActive ? 'transform' : undefined,
+            } }, { children: src ? ((0, jsx_runtime_1.jsx)(Photo_1.default, __assign({ src: src, loaded: loaded, broken: broken }, attrs, { onPhotoLoad: handlePhotoLoad, loadingElement: loadingElement, brokenElement: brokenElement }))) : (render && render({ attrs: attrs, scale: currentScale, rotate: rotate })) })) })));
+}
+exports.default = PhotoBox;

package/lib/components/react-photo-view/PhotoPage.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataType } from './types';
+interface PhotoPageProps {
+    images: DataType[];
+    index: number;
+    onSelected?: (string: any, number: any) => void;
+}
+declare const PhotoPage: React.FC<PhotoPageProps>;
+export default PhotoPage;