react-public-components 1.2.1 → 1.2.3

package/dist/chunk-OKCQZO5E.js

@@ -0,0 +1,315 @@
+import { ZoomInOutlined, ZoomOutOutlined, RotateRightOutlined, CloseOutlined, CheckOutlined } from './chunk-ISUXPTLV.js';
+import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ImageCropper = forwardRef(
+  ({
+    src,
+    aspectRatio = 1,
+    shape = "rect",
+    modal = false,
+    title = "\u56FE\u7247\u88C1\u526A",
+    open = true,
+    onOk,
+    onCancel,
+    height = 360,
+    className = "",
+    style
+  }, ref) => {
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+    const imgRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    const [rotateDeg, setRotateDeg] = useState(0);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const isDraggingRef = useRef(false);
+    const dragStartRef = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+      if (!src) return;
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = src;
+      img.onload = () => {
+        imgRef.current = img;
+        setScale(1);
+        setRotateDeg(0);
+        setOffset({ x: 0, y: 0 });
+        renderCanvas(1, 0, { x: 0, y: 0 });
+      };
+    }, [src]);
+    const renderCanvas = useCallback(
+      (curScale, curDeg, curOffset) => {
+        const canvas = canvasRef.current;
+        const img = imgRef.current;
+        if (!canvas || !img) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const dpr = window.devicePixelRatio || 1;
+        const width = canvas.clientWidth || 400;
+        const canvasHeight = canvas.clientHeight || height;
+        canvas.width = width * dpr;
+        canvas.height = canvasHeight * dpr;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, canvasHeight);
+        ctx.save();
+        const centerX = width / 2 + curOffset.x;
+        const centerY = canvasHeight / 2 + curOffset.y;
+        ctx.translate(centerX, centerY);
+        ctx.rotate(curDeg * Math.PI / 180);
+        ctx.scale(curScale, curScale);
+        const imgWidth = img.naturalWidth || img.width;
+        const imgHeight = img.naturalHeight || img.height;
+        const baseRatio = Math.min(width * 0.8 / imgWidth, canvasHeight * 0.8 / imgHeight, 1);
+        const renderW = imgWidth * baseRatio;
+        const renderH = imgHeight * baseRatio;
+        ctx.drawImage(img, -renderW / 2, -renderH / 2, renderW, renderH);
+        ctx.restore();
+      },
+      [height]
+    );
+    useEffect(() => {
+      renderCanvas(scale, rotateDeg, offset);
+    }, [scale, rotateDeg, offset, renderCanvas]);
+    const handleMouseDown = (e) => {
+      isDraggingRef.current = true;
+      dragStartRef.current = { x: e.clientX - offset.x, y: e.clientY - offset.y };
+    };
+    const handleMouseMove = (e) => {
+      if (!isDraggingRef.current) return;
+      const nextOffset = {
+        x: e.clientX - dragStartRef.current.x,
+        y: e.clientY - dragStartRef.current.y
+      };
+      setOffset(nextOffset);
+    };
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+    };
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const zoomStep = e.deltaY < 0 ? 0.1 : -0.1;
+      setScale((prev) => Math.min(Math.max(0.2, prev + zoomStep), 5));
+    };
+    const handleRotate = (deg = 90) => {
+      setRotateDeg((prev) => (prev + deg) % 360);
+    };
+    const handleZoom = (delta) => {
+      setScale((prev) => Math.min(Math.max(0.2, prev + delta), 5));
+    };
+    const handleReset = () => {
+      setScale(1);
+      setRotateDeg(0);
+      setOffset({ x: 0, y: 0 });
+    };
+    const getCropBoxRect = () => {
+      const container = containerRef.current;
+      const containerW = (container == null ? void 0 : container.clientWidth) || 400;
+      const containerH = height;
+      let boxW = Math.min(containerW * 0.7, 240);
+      let boxH = aspectRatio ? boxW / aspectRatio : boxW;
+      if (boxH > containerH * 0.8) {
+        boxH = containerH * 0.8;
+        boxW = aspectRatio ? boxH * aspectRatio : boxH;
+      }
+      const boxLeft = (containerW - boxW) / 2;
+      const boxTop = (containerH - boxH) / 2;
+      return { left: boxLeft, top: boxTop, width: boxW, height: boxH };
+    };
+    const getCroppedResult = useCallback(
+      async (type = "image/png", quality = 0.92) => {
+        const canvas = canvasRef.current;
+        if (!canvas) throw new Error("Canvas not found");
+        const cropBox2 = getCropBoxRect();
+        const dpr = window.devicePixelRatio || 1;
+        const cropCanvas = document.createElement("canvas");
+        cropCanvas.width = cropBox2.width * dpr;
+        cropCanvas.height = cropBox2.height * dpr;
+        const cropCtx = cropCanvas.getContext("2d");
+        if (!cropCtx) throw new Error("Failed to create canvas context");
+        if (shape === "round") {
+          cropCtx.beginPath();
+          cropCtx.arc(
+            cropBox2.width * dpr / 2,
+            cropBox2.height * dpr / 2,
+            cropBox2.width * dpr / 2,
+            0,
+            Math.PI * 2
+          );
+          cropCtx.closePath();
+          cropCtx.clip();
+        }
+        cropCtx.drawImage(
+          canvas,
+          cropBox2.left * dpr,
+          cropBox2.top * dpr,
+          cropBox2.width * dpr,
+          cropBox2.height * dpr,
+          0,
+          0,
+          cropBox2.width * dpr,
+          cropBox2.height * dpr
+        );
+        const dataURL = cropCanvas.toDataURL(type, quality);
+        const blob = await new Promise((resolve) => {
+          cropCanvas.toBlob((b) => resolve(b), type, quality);
+        });
+        return {
+          dataURL,
+          blob,
+          width: Math.round(cropBox2.width),
+          height: Math.round(cropBox2.height)
+        };
+      },
+      [shape, aspectRatio, height]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCroppedResult,
+        rotate: handleRotate,
+        zoom: handleZoom,
+        reset: handleReset
+      }),
+      [getCroppedResult]
+    );
+    const handleConfirm = async () => {
+      const res = await getCroppedResult();
+      onOk == null ? void 0 : onOk(res);
+    };
+    const cropBox = getCropBoxRect();
+    const coreContent = /* @__PURE__ */ jsxs("div", { className: `rpc_image_cropper ${className}`, style: { ...style }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: "rpc_image_cropper_canvas_wrap",
+          style: { height },
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          onWheel: handleWheel,
+          children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "rpc_image_cropper_canvas",
+                style: { width: "100%", height }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `rpc_image_cropper_crop_box ${shape === "round" ? "rpc_image_cropper_crop_box_round" : ""}`,
+                style: {
+                  left: `${cropBox.left}px`,
+                  top: `${cropBox.top}px`,
+                  width: `${cropBox.width}px`,
+                  height: `${cropBox.height}px`
+                },
+                children: shape === "rect" && /* @__PURE__ */ jsx("div", { className: "rpc_image_cropper_crop_box_grid" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "rpc_image_cropper_toolbar", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "rpc_image_cropper_btn",
+            onClick: () => handleZoom(0.1),
+            title: "\u653E\u5927",
+            children: [
+              /* @__PURE__ */ jsx(ZoomInOutlined, {}),
+              " \u653E\u5927"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "rpc_image_cropper_btn",
+            onClick: () => handleZoom(-0.1),
+            title: "\u7F29\u5C0F",
+            children: [
+              /* @__PURE__ */ jsx(ZoomOutOutlined, {}),
+              " \u7F29\u5C0F"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "rpc_image_cropper_btn",
+            onClick: () => handleRotate(90),
+            title: "\u987A\u65F6\u9488\u65CB\u8F6C90\xB0",
+            children: [
+              /* @__PURE__ */ jsx(RotateRightOutlined, {}),
+              " \u65CB\u8F6C"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rpc_image_cropper_btn",
+            onClick: handleReset,
+            title: "\u91CD\u7F6E",
+            children: "\u91CD\u7F6E"
+          }
+        )
+      ] })
+    ] });
+    if (modal) {
+      if (!open) return null;
+      return ReactDOM.createPortal(
+        /* @__PURE__ */ jsx("div", { className: "rpc_cropper_modal", onClick: onCancel, children: /* @__PURE__ */ jsxs("div", { className: "rpc_cropper_modal_card", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs("div", { className: "rpc_cropper_modal_header", children: [
+            /* @__PURE__ */ jsx("span", { children: title }),
+            /* @__PURE__ */ jsx(CloseOutlined, { className: "rpc_cropper_modal_close", onClick: onCancel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { padding: 16, background: "#141414" }, children: coreContent }),
+          /* @__PURE__ */ jsxs("div", { className: "rpc_cropper_modal_footer", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rpc_image_cropper_btn",
+                style: { background: "#ffffff", color: "#262626", borderColor: "#d9d9d9" },
+                onClick: onCancel,
+                children: "\u53D6\u6D88"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "rpc_image_cropper_btn rpc_image_cropper_btn_primary",
+                onClick: handleConfirm,
+                children: [
+                  /* @__PURE__ */ jsx(CheckOutlined, {}),
+                  " \u786E\u5B9A\u88C1\u526A"
+                ]
+              }
+            )
+          ] })
+        ] }) }),
+        document.body
+      );
+    }
+    return coreContent;
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+var ImageCropper_default = ImageCropper;
+
+export { ImageCropper_default };
+//# sourceMappingURL=chunk-OKCQZO5E.js.map
+//# sourceMappingURL=chunk-OKCQZO5E.js.map

package/dist/chunk-OKCQZO5E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../ImageCropper/index.tsx"],"names":["cropBox"],"mappings":"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","file":"chunk-OKCQZO5E.js","sourcesContent":["import React, {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseImperativeHandle,\n\tforwardRef,\n\tReactNode,\n\tCSSProperties,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tRotateRightOutlined,\n\tZoomInOutlined,\n\tZoomOutOutlined,\n\tCloseOutlined,\n\tCheckOutlined,\n} from '../src/icons';\nimport './index.less';\n\nexport type CropShape = 'rect' | 'round';\n\nexport interface CropResult {\n\tdataURL: string;\n\tblob: Blob | null;\n\twidth: number;\n\theight: number;\n}\n\nexport interface ImageCropperRef {\n\t/** 获取当前裁剪结果（DataURL 与 Blob） */\n\tgetCroppedResult: (type?: string, quality?: number) => Promise<CropResult>;\n\t/** 顺时针旋转 90 度 */\n\trotate: (degree?: number) => void;\n\t/** 缩放图片 */\n\tzoom: (delta: number) => void;\n\t/** 重置所有变换参数 */\n\treset: () => void;\n}\n\nexport interface ImageCropperProps {\n\t/** 图片源地址或 Base64 字符串 */\n\tsrc: string;\n\t/** 裁剪框宽高比（如 1 代表 1:1 正方形，16/9 代表宽屏，0 代表自由矩形），默认为 1 */\n\taspectRatio?: number;\n\t/** 裁剪框形状：'rect' 矩形，'round' 圆形（适合头像），默认为 'rect' */\n\tshape?: CropShape;\n\t/** 是否以 Modal 模态弹窗形式展示，默认为 false */\n\tmodal?: boolean;\n\t/** Modal 模式下的标题，默认为 '图片裁剪' */\n\ttitle?: ReactNode;\n\t/** Modal 模式下的显隐受控状态 */\n\topen?: boolean;\n\t/** 确认裁剪回调 */\n\tonOk?: (result: CropResult) => void;\n\t/** 取消/关闭回调 */\n\tonCancel?: () => void;\n\t/** 容器高度（内联模式有效），默认为 360 */\n\theight?: number;\n\t/** 自定义类名 */\n\tclassName?: string;\n\t/** 自定义样式 */\n\tstyle?: CSSProperties;\n}\n\nconst ImageCropper = forwardRef<ImageCropperRef, ImageCropperProps>(\n\t(\n\t\t{\n\t\t\tsrc,\n\t\t\taspectRatio = 1,\n\t\t\tshape = 'rect',\n\t\t\tmodal = false,\n\t\t\ttitle = '图片裁剪',\n\t\t\topen = true,\n\t\t\tonOk,\n\t\t\tonCancel,\n\t\t\theight = 360,\n\t\t\tclassName = '',\n\t\t\tstyle,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\t\tconst containerRef = useRef<HTMLDivElement>(null);\n\t\tconst imgRef = useRef<HTMLImageElement | null>(null);\n\n\t\t// 图片变换参数\n\t\tconst [scale, setScale] = useState<number>(1);\n\t\tconst [rotateDeg, setRotateDeg] = useState<number>(0);\n\t\tconst [offset, setOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });\n\t\tconst isDraggingRef = useRef<boolean>(false);\n\t\tconst dragStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n\t\t// 加载图片\n\t\tuseEffect(() => {\n\t\t\tif (!src) return;\n\t\t\tconst img = new Image();\n\t\t\timg.crossOrigin = 'anonymous';\n\t\t\timg.src = src;\n\t\t\timg.onload = () => {\n\t\t\t\timgRef.current = img;\n\t\t\t\t// 初始计算合适缩放比例\n\t\t\t\tsetScale(1);\n\t\t\t\tsetRotateDeg(0);\n\t\t\t\tsetOffset({ x: 0, y: 0 });\n\t\t\t\trenderCanvas(1, 0, { x: 0, y: 0 });\n\t\t\t};\n\t\t}, [src]);\n\n\t\t// 重新渲染 Canvas\n\t\tconst renderCanvas = useCallback(\n\t\t\t(curScale: number, curDeg: number, curOffset: { x: number; y: number }) => {\n\t\t\t\tconst canvas = canvasRef.current;\n\t\t\t\tconst img = imgRef.current;\n\t\t\t\tif (!canvas || !img) return;\n\n\t\t\t\tconst ctx = canvas.getContext('2d');\n\t\t\t\tif (!ctx) return;\n\n\t\t\t\tconst dpr = window.devicePixelRatio || 1;\n\t\t\t\tconst width = canvas.clientWidth || 400;\n\t\t\t\tconst canvasHeight = canvas.clientHeight || height;\n\n\t\t\t\tcanvas.width = width * dpr;\n\t\t\t\tcanvas.height = canvasHeight * dpr;\n\t\t\t\tctx.scale(dpr, dpr);\n\n\t\t\t\tctx.clearRect(0, 0, width, canvasHeight);\n\t\t\t\tctx.save();\n\n\t\t\t\t// 移动到中心点进行旋转、缩放与平移\n\t\t\t\tconst centerX = width / 2 + curOffset.x;\n\t\t\t\tconst centerY = canvasHeight / 2 + curOffset.y;\n\n\t\t\t\tctx.translate(centerX, centerY);\n\t\t\t\tctx.rotate((curDeg * Math.PI) / 180);\n\t\t\t\tctx.scale(curScale, curScale);\n\n\t\t\t\t// 居中绘制原始图像\n\t\t\t\tconst imgWidth = img.naturalWidth || img.width;\n\t\t\t\tconst imgHeight = img.naturalHeight || img.height;\n\n\t\t\t\t// 保持图像按比例自适应居中\n\t\t\t\tconst baseRatio = Math.min((width * 0.8) / imgWidth, (canvasHeight * 0.8) / imgHeight, 1);\n\t\t\t\tconst renderW = imgWidth * baseRatio;\n\t\t\t\tconst renderH = imgHeight * baseRatio;\n\n\t\t\t\tctx.drawImage(img, -renderW / 2, -renderH / 2, renderW, renderH);\n\t\t\t\tctx.restore();\n\t\t\t},\n\t\t\t[height],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\trenderCanvas(scale, rotateDeg, offset);\n\t\t}, [scale, rotateDeg, offset, renderCanvas]);\n\n\t\t// 鼠标拖拽平移\n\t\tconst handleMouseDown = (e: React.MouseEvent) => {\n\t\t\tisDraggingRef.current = true;\n\t\t\tdragStartRef.current = { x: e.clientX - offset.x, y: e.clientY - offset.y };\n\t\t};\n\n\t\tconst handleMouseMove = (e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tconst nextOffset = {\n\t\t\t\tx: e.clientX - dragStartRef.current.x,\n\t\t\t\ty: e.clientY - dragStartRef.current.y,\n\t\t\t};\n\t\t\tsetOffset(nextOffset);\n\t\t};\n\n\t\tconst handleMouseUp = () => {\n\t\t\tisDraggingRef.current = false;\n\t\t};\n\n\t\t// 滚轮缩放\n\t\tconst handleWheel = (e: React.WheelEvent) => {\n\t\t\te.preventDefault();\n\t\t\tconst zoomStep = e.deltaY < 0 ? 0.1 : -0.1;\n\t\t\tsetScale((prev) => Math.min(Math.max(0.2, prev + zoomStep), 5));\n\t\t};\n\n\t\t// 顺时针旋转\n\t\tconst handleRotate = (deg = 90) => {\n\t\t\tsetRotateDeg((prev) => (prev + deg) % 360);\n\t\t};\n\n\t\tconst handleZoom = (delta: number) => {\n\t\t\tsetScale((prev) => Math.min(Math.max(0.2, prev + delta), 5));\n\t\t};\n\n\t\tconst handleReset = () => {\n\t\t\tsetScale(1);\n\t\t\tsetRotateDeg(0);\n\t\t\tsetOffset({ x: 0, y: 0 });\n\t\t};\n\n\t\t// 计算裁剪框尺寸与位置\n\t\tconst getCropBoxRect = () => {\n\t\t\tconst container = containerRef.current;\n\t\t\tconst containerW = container?.clientWidth || 400;\n\t\t\tconst containerH = height;\n\n\t\t\tlet boxW = Math.min(containerW * 0.7, 240);\n\t\t\tlet boxH = aspectRatio ? boxW / aspectRatio : boxW;\n\n\t\t\tif (boxH > containerH * 0.8) {\n\t\t\t\tboxH = containerH * 0.8;\n\t\t\t\tboxW = aspectRatio ? boxH * aspectRatio : boxH;\n\t\t\t}\n\n\t\t\tconst boxLeft = (containerW - boxW) / 2;\n\t\t\tconst boxTop = (containerH - boxH) / 2;\n\n\t\t\treturn { left: boxLeft, top: boxTop, width: boxW, height: boxH };\n\t\t};\n\n\t\t// 提取裁剪区域生成图片\n\t\tconst getCroppedResult = useCallback(\n\t\t\tasync (type = 'image/png', quality = 0.92): Promise<CropResult> => {\n\t\t\t\tconst canvas = canvasRef.current;\n\t\t\t\tif (!canvas) throw new Error('Canvas not found');\n\n\t\t\t\tconst cropBox = getCropBoxRect();\n\t\t\t\tconst dpr = window.devicePixelRatio || 1;\n\n\t\t\t\tconst cropCanvas = document.createElement('canvas');\n\t\t\t\tcropCanvas.width = cropBox.width * dpr;\n\t\t\t\tcropCanvas.height = cropBox.height * dpr;\n\t\t\t\tconst cropCtx = cropCanvas.getContext('2d');\n\n\t\t\t\tif (!cropCtx) throw new Error('Failed to create canvas context');\n\n\t\t\t\tif (shape === 'round') {\n\t\t\t\t\tcropCtx.beginPath();\n\t\t\t\t\tcropCtx.arc(\n\t\t\t\t\t\t(cropBox.width * dpr) / 2,\n\t\t\t\t\t\t(cropBox.height * dpr) / 2,\n\t\t\t\t\t\t(cropBox.width * dpr) / 2,\n\t\t\t\t\t\t0,\n\t\t\t\t\t\tMath.PI * 2,\n\t\t\t\t\t);\n\t\t\t\t\tcropCtx.closePath();\n\t\t\t\t\tcropCtx.clip();\n\t\t\t\t}\n\n\t\t\t\tcropCtx.drawImage(\n\t\t\t\t\tcanvas,\n\t\t\t\t\tcropBox.left * dpr,\n\t\t\t\t\tcropBox.top * dpr,\n\t\t\t\t\tcropBox.width * dpr,\n\t\t\t\t\tcropBox.height * dpr,\n\t\t\t\t\t0,\n\t\t\t\t\t0,\n\t\t\t\t\tcropBox.width * dpr,\n\t\t\t\t\tcropBox.height * dpr,\n\t\t\t\t);\n\n\t\t\t\tconst dataURL = cropCanvas.toDataURL(type, quality);\n\t\t\t\tconst blob: Blob | null = await new Promise((resolve) => {\n\t\t\t\t\tcropCanvas.toBlob((b) => resolve(b), type, quality);\n\t\t\t\t});\n\n\t\t\t\treturn {\n\t\t\t\t\tdataURL,\n\t\t\t\t\tblob,\n\t\t\t\t\twidth: Math.round(cropBox.width),\n\t\t\t\t\theight: Math.round(cropBox.height),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[shape, aspectRatio, height],\n\t\t);\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\tgetCroppedResult,\n\t\t\t\trotate: handleRotate,\n\t\t\t\tzoom: handleZoom,\n\t\t\t\treset: handleReset,\n\t\t\t}),\n\t\t\t[getCroppedResult],\n\t\t);\n\n\t\tconst handleConfirm = async () => {\n\t\t\tconst res = await getCroppedResult();\n\t\t\tonOk?.(res);\n\t\t};\n\n\t\tconst cropBox = getCropBoxRect();\n\n\t\tconst coreContent = (\n\t\t\t<div className={`rpc_image_cropper ${className}`} style={{ ...style }}>\n\t\t\t\t<div\n\t\t\t\t\tref={containerRef}\n\t\t\t\t\tclassName=\"rpc_image_cropper_canvas_wrap\"\n\t\t\t\t\tstyle={{ height }}\n\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\t\tonMouseLeave={handleMouseUp}\n\t\t\t\t\tonWheel={handleWheel}\n\t\t\t\t>\n\t\t\t\t\t<canvas\n\t\t\t\t\t\tref={canvasRef}\n\t\t\t\t\t\tclassName=\"rpc_image_cropper_canvas\"\n\t\t\t\t\t\tstyle={{ width: '100%', height }}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{/* 裁剪框与遮罩 */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`rpc_image_cropper_crop_box ${\n\t\t\t\t\t\t\tshape === 'round' ? 'rpc_image_cropper_crop_box_round' : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: `${cropBox.left}px`,\n\t\t\t\t\t\t\ttop: `${cropBox.top}px`,\n\t\t\t\t\t\t\twidth: `${cropBox.width}px`,\n\t\t\t\t\t\t\theight: `${cropBox.height}px`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{shape === 'rect' && <div className=\"rpc_image_cropper_crop_box_grid\" />}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* 底部工具栏 */}\n\t\t\t\t<div className=\"rpc_image_cropper_toolbar\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn\"\n\t\t\t\t\t\tonClick={() => handleZoom(0.1)}\n\t\t\t\t\t\ttitle=\"放大\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZoomInOutlined /> 放大\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn\"\n\t\t\t\t\t\tonClick={() => handleZoom(-0.1)}\n\t\t\t\t\t\ttitle=\"缩小\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZoomOutOutlined /> 缩小\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn\"\n\t\t\t\t\t\tonClick={() => handleRotate(90)}\n\t\t\t\t\t\ttitle=\"顺时针旋转90°\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<RotateRightOutlined /> 旋转\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn\"\n\t\t\t\t\t\tonClick={handleReset}\n\t\t\t\t\t\ttitle=\"重置\"\n\t\t\t\t\t>\n\t\t\t\t\t\t重置\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\n\t\tif (modal) {\n\t\t\tif (!open) return null;\n\t\t\treturn ReactDOM.createPortal(\n\t\t\t\t<div className=\"rpc_cropper_modal\" onClick={onCancel}>\n\t\t\t\t\t<div className=\"rpc_cropper_modal_card\" onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t<div className=\"rpc_cropper_modal_header\">\n\t\t\t\t\t\t\t<span>{title}</span>\n\t\t\t\t\t\t\t<CloseOutlined className=\"rpc_cropper_modal_close\" onClick={onCancel} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style={{ padding: 16, background: '#141414' }}>{coreContent}</div>\n\t\t\t\t\t\t<div className=\"rpc_cropper_modal_footer\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn\"\n\t\t\t\t\t\t\t\tstyle={{ background: '#ffffff', color: '#262626', borderColor: '#d9d9d9' }}\n\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t取消\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"rpc_image_cropper_btn rpc_image_cropper_btn_primary\"\n\t\t\t\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckOutlined /> 确定裁剪\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>,\n\t\t\t\tdocument.body,\n\t\t\t);\n\t\t}\n\n\t\treturn coreContent;\n\t},\n);\n\nImageCropper.displayName = 'ImageCropper';\n\nexport default ImageCropper;\n"]}

package/dist/chunk-PJB7ADK6.js

@@ -0,0 +1,225 @@
+import { ZoomInOutlined, ZoomOutOutlined, RotateRightOutlined, DownloadOutlined, CloseOutlined, FileOutlined, FileTextOutlined, FilePdfOutlined, FileImageOutlined } from './chunk-ISUXPTLV.js';
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function inferFileType(urlOrName) {
+  if (!urlOrName) return "unknown";
+  const clean = urlOrName.split("?")[0].split("#")[0].toLowerCase();
+  const ext = clean.substring(clean.lastIndexOf(".") + 1);
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"].includes(ext)) {
+    return "image";
+  }
+  if (["mp4", "webm", "ogg", "mov", "mkv"].includes(ext)) {
+    return "video";
+  }
+  if (["mp3", "wav", "aac", "flac", "m4a"].includes(ext)) {
+    return "audio";
+  }
+  if (["pdf"].includes(ext)) {
+    return "pdf";
+  }
+  if (["txt", "json", "js", "ts", "jsx", "tsx", "html", "css", "less", "md", "log", "xml"].includes(
+    ext
+  )) {
+    return "text";
+  }
+  return "unknown";
+}
+var FilePreviewer = ({ open, file, onCancel, onDownload, extraActions, className = "", style }) => {
+  const [imageScale, setImageScale] = useState(1);
+  const [imageRotate, setImageRotate] = useState(0);
+  useEffect(() => {
+    if (open) {
+      setImageScale(1);
+      setImageRotate(0);
+    }
+  }, [open, file]);
+  if (!open || !file) return null;
+  const currentFile = typeof file === "string" ? { url: file, name: file.substring(file.lastIndexOf("/") + 1) } : file;
+  const type = currentFile.fileType || inferFileType(currentFile.name || currentFile.url);
+  const handleDefaultDownload = () => {
+    if (onDownload) {
+      onDownload(currentFile);
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = currentFile.url;
+    a.download = currentFile.name || "download";
+    a.target = "_blank";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+  const renderFileIcon = () => {
+    switch (type) {
+      case "image":
+        return /* @__PURE__ */ jsx(FileImageOutlined, { style: { color: "#1677ff" } });
+      case "pdf":
+        return /* @__PURE__ */ jsx(FilePdfOutlined, { style: { color: "#ff4d4f" } });
+      case "text":
+        return /* @__PURE__ */ jsx(FileTextOutlined, { style: { color: "#52c41a" } });
+      default:
+        return /* @__PURE__ */ jsx(FileOutlined, { style: { color: "#8c8c8c" } });
+    }
+  };
+  const renderBodyContent = () => {
+    switch (type) {
+      case "image":
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: currentFile.url,
+            alt: currentFile.name || "Preview",
+            className: "rpc_file_previewer_modal_image",
+            style: {
+              transform: `scale(${imageScale}) rotate(${imageRotate}deg)`
+            }
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: currentFile.url,
+            controls: true,
+            autoPlay: true,
+            className: "rpc_file_previewer_modal_media"
+          }
+        );
+      case "audio":
+        return /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_audio_wrap", children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 48 }, children: "\u{1F3B5}" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600 }, children: currentFile.name || "\u97F3\u9891\u64AD\u653E" }),
+          /* @__PURE__ */ jsx("audio", { src: currentFile.url, controls: true, autoPlay: true, style: { width: 320 } })
+        ] });
+      case "pdf":
+        return /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: currentFile.url,
+            title: currentFile.name || "PDF Preview",
+            className: "rpc_file_previewer_modal_iframe"
+          }
+        );
+      case "text":
+        return /* @__PURE__ */ jsx("div", { className: "rpc_file_previewer_modal_text_wrap", children: currentFile.textContent || "\u6B63\u5728\u52A0\u8F7D\u6587\u4EF6\u5185\u5BB9..." });
+      default:
+        return /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_fallback_card", children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 48, color: "#8c8c8c" }, children: "\u{1F4E6}" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 6px 0", fontSize: 16, color: "#1f1f1f" }, children: currentFile.name || "\u672A\u77E5\u6587\u4EF6" }),
+            /* @__PURE__ */ jsxs("p", { style: { margin: 0, color: "#8c8c8c", fontSize: 13 }, children: [
+              "\u8BE5\u683C\u5F0F\u6682\u4E0D\u652F\u6301\u76F4\u63A5\u5728\u7EBF\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u5728\u672C\u5730\u67E5\u770B\u3002",
+              currentFile.size ? `(${currentFile.size})` : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleDefaultDownload,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "8px 20px",
+                background: "#1677ff",
+                color: "#fff",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                fontSize: 14
+              },
+              children: [
+                /* @__PURE__ */ jsx(DownloadOutlined, {}),
+                " \u7ACB\u5373\u4E0B\u8F7D"
+              ]
+            }
+          )
+        ] });
+    }
+  };
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx("div", { className: `rpc_file_previewer_modal ${className}`, onClick: onCancel, style, children: /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_card", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_title", children: [
+          renderFileIcon(),
+          /* @__PURE__ */ jsx("span", { children: currentFile.name || "\u6587\u4EF6\u9884\u89C8" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rpc_file_previewer_modal_actions", children: [
+          type === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rpc_file_previewer_modal_action_btn",
+                onClick: () => setImageScale((s) => Math.min(s + 0.2, 3)),
+                title: "\u653E\u5927",
+                children: /* @__PURE__ */ jsx(ZoomInOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rpc_file_previewer_modal_action_btn",
+                onClick: () => setImageScale((s) => Math.max(s - 0.2, 0.4)),
+                title: "\u7F29\u5C0F",
+                children: /* @__PURE__ */ jsx(ZoomOutOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rpc_file_previewer_modal_action_btn",
+                onClick: () => setImageRotate((r) => (r + 90) % 360),
+                title: "\u987A\u65F6\u9488\u65CB\u8F6C90\xB0",
+                children: /* @__PURE__ */ jsx(RotateRightOutlined, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rpc_file_previewer_modal_action_btn",
+              onClick: handleDefaultDownload,
+              title: "\u4E0B\u8F7D\u6587\u4EF6",
+              children: /* @__PURE__ */ jsx(DownloadOutlined, {})
+            }
+          ),
+          extraActions,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rpc_file_previewer_modal_action_btn",
+              onClick: onCancel,
+              title: "\u5173\u95ED\u9884\u89C8 (ESC)",
+              children: /* @__PURE__ */ jsx(CloseOutlined, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rpc_file_previewer_modal_body", children: renderBodyContent() })
+    ] }) }),
+    document.body
+  );
+};
+FilePreviewer.preview = (options) => {
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+  const close = () => {
+    ReactDOM.render(/* @__PURE__ */ jsx(Fragment, {}), div);
+    div.remove();
+  };
+  ReactDOM.render(/* @__PURE__ */ jsx(FilePreviewer, { open: true, file: options, onCancel: close }), div);
+  return { close };
+};
+var FilePreviewer_default = FilePreviewer;
+
+export { FilePreviewer_default, inferFileType };
+//# sourceMappingURL=chunk-PJB7ADK6.js.map
+//# sourceMappingURL=chunk-PJB7ADK6.js.map

package/dist/chunk-PJB7ADK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../FilePreviewer/index.tsx"],"names":[],"mappings":"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","file":"chunk-PJB7ADK6.js","sourcesContent":["import React, { useState, useEffect, ReactNode, CSSProperties } from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tCloseOutlined,\n\tRotateRightOutlined,\n\tZoomInOutlined,\n\tZoomOutOutlined,\n\tDownloadOutlined,\n\tFilePdfOutlined,\n\tFileImageOutlined,\n\tFileTextOutlined,\n\tFileOutlined,\n} from '../src/icons';\nimport './index.less';\n\nexport type FileType = 'image' | 'video' | 'audio' | 'pdf' | 'text' | 'unknown';\n\nexport interface FileItem {\n\t/** 文件访问 URL 或 Base64 */\n\turl: string;\n\t/** 文件名称 */\n\tname?: string;\n\t/** 文件类型（如不传则根据文件名后缀或 URL 自动推断） */\n\tfileType?: FileType;\n\t/** 文件大小描述（如 '2.4 MB'） */\n\tsize?: string;\n\t/** 纯文本内容（针对直接传入 text 字符串预览） */\n\ttextContent?: string;\n}\n\nexport interface FilePreviewerProps {\n\t/** 是否打开预览弹窗 */\n\topen: boolean;\n\t/** 当前预览的文件对象或 URL 字符串 */\n\tfile?: FileItem | string | null;\n\t/** 关闭弹窗回调 */\n\tonCancel?: () => void;\n\t/** 自定义下载行为（不传时使用默认浏览器下载） */\n\tonDownload?: (file: FileItem) => void;\n\t/** 自定义标题栏右侧额外操作按钮 */\n\textraActions?: ReactNode;\n\t/** 自定义类名 */\n\tclassName?: string;\n\t/** 自定义样式 */\n\tstyle?: CSSProperties;\n}\n\n// 根据文件名或 URL 后缀推断文件类型\nexport function inferFileType(urlOrName: string): FileType {\n\tif (!urlOrName) return 'unknown';\n\tconst clean = urlOrName.split('?')[0].split('#')[0].toLowerCase();\n\tconst ext = clean.substring(clean.lastIndexOf('.') + 1);\n\n\tif (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {\n\t\treturn 'image';\n\t}\n\tif (['mp4', 'webm', 'ogg', 'mov', 'mkv'].includes(ext)) {\n\t\treturn 'video';\n\t}\n\tif (['mp3', 'wav', 'aac', 'flac', 'm4a'].includes(ext)) {\n\t\treturn 'audio';\n\t}\n\tif (['pdf'].includes(ext)) {\n\t\treturn 'pdf';\n\t}\n\tif (\n\t\t['txt', 'json', 'js', 'ts', 'jsx', 'tsx', 'html', 'css', 'less', 'md', 'log', 'xml'].includes(\n\t\t\text,\n\t\t)\n\t) {\n\t\treturn 'text';\n\t}\n\treturn 'unknown';\n}\n\nconst FilePreviewer: React.FC<FilePreviewerProps> & {\n\tpreview: (options: FileItem) => { close: () => void };\n} = ({ open, file, onCancel, onDownload, extraActions, className = '', style }) => {\n\t// 图片控制状态\n\tconst [imageScale, setImageScale] = useState<number>(1);\n\tconst [imageRotate, setImageRotate] = useState<number>(0);\n\n\tuseEffect(() => {\n\t\tif (open) {\n\t\t\tsetImageScale(1);\n\t\t\tsetImageRotate(0);\n\t\t}\n\t}, [open, file]);\n\n\tif (!open || !file) return null;\n\n\tconst currentFile: FileItem =\n\t\ttypeof file === 'string'\n\t\t\t? { url: file, name: file.substring(file.lastIndexOf('/') + 1) }\n\t\t\t: file;\n\n\tconst type: FileType = currentFile.fileType || inferFileType(currentFile.name || currentFile.url);\n\n\t// 默认下载处理\n\tconst handleDefaultDownload = () => {\n\t\tif (onDownload) {\n\t\t\tonDownload(currentFile);\n\t\t\treturn;\n\t\t}\n\t\tconst a = document.createElement('a');\n\t\ta.href = currentFile.url;\n\t\ta.download = currentFile.name || 'download';\n\t\ta.target = '_blank';\n\t\tdocument.body.appendChild(a);\n\t\ta.click();\n\t\ta.remove();\n\t};\n\n\t// 渲染文件图标\n\tconst renderFileIcon = () => {\n\t\tswitch (type) {\n\t\t\tcase 'image':\n\t\t\t\treturn <FileImageOutlined style={{ color: '#1677ff' }} />;\n\t\t\tcase 'pdf':\n\t\t\t\treturn <FilePdfOutlined style={{ color: '#ff4d4f' }} />;\n\t\t\tcase 'text':\n\t\t\t\treturn <FileTextOutlined style={{ color: '#52c41a' }} />;\n\t\t\tdefault:\n\t\t\t\treturn <FileOutlined style={{ color: '#8c8c8c' }} />;\n\t\t}\n\t};\n\n\t// 渲染主体内容\n\tconst renderBodyContent = () => {\n\t\tswitch (type) {\n\t\t\tcase 'image':\n\t\t\t\treturn (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={currentFile.url}\n\t\t\t\t\t\talt={currentFile.name || 'Preview'}\n\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_image\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: `scale(${imageScale}) rotate(${imageRotate}deg)`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'video':\n\t\t\t\treturn (\n\t\t\t\t\t<video\n\t\t\t\t\t\tsrc={currentFile.url}\n\t\t\t\t\t\tcontrols\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_media\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'audio':\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"rpc_file_previewer_modal_audio_wrap\">\n\t\t\t\t\t\t<div style={{ fontSize: 48 }}>🎵</div>\n\t\t\t\t\t\t<div style={{ fontSize: 16, fontWeight: 600 }}>{currentFile.name || '音频播放'}</div>\n\t\t\t\t\t\t<audio src={currentFile.url} controls autoPlay style={{ width: 320 }} />\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tcase 'pdf':\n\t\t\t\treturn (\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tsrc={currentFile.url}\n\t\t\t\t\t\ttitle={currentFile.name || 'PDF Preview'}\n\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_iframe\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'text':\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"rpc_file_previewer_modal_text_wrap\">\n\t\t\t\t\t\t{currentFile.textContent || '正在加载文件内容...'}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"rpc_file_previewer_modal_fallback_card\">\n\t\t\t\t\t\t<div style={{ fontSize: 48, color: '#8c8c8c' }}>📦</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h4 style={{ margin: '0 0 6px 0', fontSize: 16, color: '#1f1f1f' }}>\n\t\t\t\t\t\t\t\t{currentFile.name || '未知文件'}\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<p style={{ margin: 0, color: '#8c8c8c', fontSize: 13 }}>\n\t\t\t\t\t\t\t\t该格式暂不支持直接在线预览，请下载后在本地查看。\n\t\t\t\t\t\t\t\t{currentFile.size ? `(${currentFile.size})` : ''}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={handleDefaultDownload}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\tpadding: '8px 20px',\n\t\t\t\t\t\t\t\tbackground: '#1677ff',\n\t\t\t\t\t\t\t\tcolor: '#fff',\n\t\t\t\t\t\t\t\tborder: 'none',\n\t\t\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DownloadOutlined /> 立即下载\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t}\n\t};\n\n\treturn ReactDOM.createPortal(\n\t\t<div className={`rpc_file_previewer_modal ${className}`} onClick={onCancel} style={style}>\n\t\t\t<div className=\"rpc_file_previewer_modal_card\" onClick={(e) => e.stopPropagation()}>\n\t\t\t\t{/* 顶部标题栏与工具栏 */}\n\t\t\t\t<div className=\"rpc_file_previewer_modal_header\">\n\t\t\t\t\t<div className=\"rpc_file_previewer_modal_title\">\n\t\t\t\t\t\t{renderFileIcon()}\n\t\t\t\t\t\t<span>{currentFile.name || '文件预览'}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"rpc_file_previewer_modal_actions\">\n\t\t\t\t\t\t{type === 'image' && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_action_btn\"\n\t\t\t\t\t\t\t\t\tonClick={() => setImageScale((s) => Math.min(s + 0.2, 3))}\n\t\t\t\t\t\t\t\t\ttitle=\"放大\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ZoomInOutlined />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_action_btn\"\n\t\t\t\t\t\t\t\t\tonClick={() => setImageScale((s) => Math.max(s - 0.2, 0.4))}\n\t\t\t\t\t\t\t\t\ttitle=\"缩小\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ZoomOutOutlined />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_action_btn\"\n\t\t\t\t\t\t\t\t\tonClick={() => setImageRotate((r) => (r + 90) % 360)}\n\t\t\t\t\t\t\t\t\ttitle=\"顺时针旋转90°\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<RotateRightOutlined />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_action_btn\"\n\t\t\t\t\t\t\tonClick={handleDefaultDownload}\n\t\t\t\t\t\t\ttitle=\"下载文件\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DownloadOutlined />\n\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t{extraActions}\n\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"rpc_file_previewer_modal_action_btn\"\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\ttitle=\"关闭预览 (ESC)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CloseOutlined />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* 预览主体内容区域 */}\n\t\t\t\t<div className=\"rpc_file_previewer_modal_body\">{renderBodyContent()}</div>\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument.body,\n\t);\n};\n\n// 命令式调用方法\nFilePreviewer.preview = (options: FileItem) => {\n\tconst div = document.createElement('div');\n\tdocument.body.appendChild(div);\n\n\tconst close = () => {\n\t\tReactDOM.render(<></>, div);\n\t\tdiv.remove();\n\t};\n\n\tReactDOM.render(<FilePreviewer open={true} file={options} onCancel={close} />, div);\n\n\treturn { close };\n};\n\nexport default FilePreviewer;\n"]}