@funhub/platform 0.1.127 → 0.1.130

package/dist/components/common/image-crop/image-crop.mjs

@@ -1,2 +1,183 @@
 
-"use client";import{defaultImageCompressionQuality as e}from"../../../utils/image-compression.mjs";import{Dialog as t,DialogContent as n}from"../../ui/dialog.mjs";import{fileToDataUrl as r,getCroppedFile as i,getOptimalQuality as a,validateImageFile as o}from"../../../utils/image-crop.mjs";import{useCallback as s,useEffect as c,useMemo as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import p from"react-easy-crop";function m({visible:m,file:h,quality:g,outputFormat:_=`jpeg`,maxWidth:v,maxHeight:y,cropShape:b=`round`,onCropComplete:x,onCancel:S,className:C}){let[w,T]=u(``),[E,D]=u(!1),[O,k]=u(``),[A,j]=u({crop:{x:0,y:0},zoom:1,croppedAreaPixels:null}),M=l(()=>g===void 0?h?a(h.size):e:g,[g,h]);c(()=>{if(!h||!m){T(``),k(``);return}if(!o(h)){k(`请选择有效的图片文件（支持 JPEG、PNG、WebP、GIF 格式）`);return}if(h.size>20*1024*1024){k(`文件大小不能超过 20MB`);return}D(!0),k(``),r(h).then(e=>{T(e),D(!1)}).catch(e=>{console.error(`图片加载失败:`,e),k(`图片加载失败，请重试`),D(!1)})},[h,m]),c(()=>{m&&j({crop:{x:0,y:0},zoom:1,croppedAreaPixels:null})},[m,h]);let N=s(e=>{j(t=>({...t,crop:e}))},[]),P=s(e=>{j(t=>({...t,zoom:e}))},[]),F=s((e,t)=>{j(e=>({...e,croppedAreaPixels:t}))},[]),I=s(async()=>{if(!h||!A.croppedAreaPixels){k(`请先选择裁剪区域`);return}D(!0),k(``);try{let e=`image/${_}`;x({file:await i(w,A.croppedAreaPixels,`cropped.${_}`,{fileType:e,quality:M,maxWidth:v,maxHeight:y,circular:b===`round`}),originalFile:h,cropArea:A.croppedAreaPixels})}catch(e){console.error(`裁剪失败:`,e),k(`裁剪失败，请重试`)}finally{D(!1)}},[h,A.croppedAreaPixels,M,_,v,y,b,w,x]),L=s(()=>{S()},[S]);return m?d(t,{open:m,onOpenChange:L,children:d(n,{showCloseButton:!1,className:`bg-black/90 !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto ${C||``}`,children:f(`div`,{className:`relative flex h-full w-full flex-col`,children:[w&&!O&&f(`div`,{className:`absolute top-0 left-0 right-0 z-10 flex h-16 items-center justify-between px-4`,children:[d(`button`,{type:`button`,className:`flex h-full items-center justify-center px-4 text-white transition-colors hover:text-white/80`,onClick:L,disabled:E,children:d(`svg`,{className:`w-4 h-4`,xmlns:`http://www.w3.org/2000/svg`,fill:`currentColor`,viewBox:`0 0 16 16`,children:d(`path`,{d:`M14.55.2a.889.889 0 0 1 1.25 1.25l-.06.067L9.255 8l6.483 6.482.06.069a.888.888 0 0 1-1.25 1.25l-.067-.062L8 9.256l-6.482 6.483A.888.888 0 1 1 .26 14.482L6.742 8 .26 1.517.2 1.45A.888.888 0 0 1 1.45.2l.067.062 6.482 6.482L14.482.261l.068-.062Z`})})}),d(`button`,{type:`button`,className:`h-8 rounded-full bg-primary px-4 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/80 disabled:opacity-50`,onClick:I,disabled:E||!A.croppedAreaPixels||!!O,children:`确定`})]}),f(`div`,{className:`relative flex-1 overflow-hidden bg-black`,children:[E&&f(`div`,{className:`absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-2 text-white`,children:[d(`div`,{className:`h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white`}),d(`span`,{children:`处理中...`})]}),O&&d(`div`,{className:`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-red-500`,children:O}),w&&!O&&d(p,{image:w,crop:A.crop,zoom:A.zoom,onCropChange:N,onZoomChange:P,onCropComplete:F,showGrid:!0,cropShape:b,restrictPosition:!0,zoomWithScroll:!0})]})]})})}):null}export{m as ImageCrop};
+'use client';
+
+import { defaultImageCompressionQuality } from "../../../utils/image-compression.mjs";
+import { Dialog, DialogContent } from "../../ui/dialog.mjs";
+import { fileToDataUrl, getCroppedFile, getOptimalQuality, validateImageFile } from "../../../utils/image-crop.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Cropper from "react-easy-crop";
+
+//#region components/common/image-crop/image-crop.tsx
+function ImageCrop({ visible, file, quality, outputFormat = "jpeg", maxWidth, maxHeight, cropShape = "round", onCropComplete, onCancel, className }) {
+	const [imageUrl, setImageUrl] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [cropState, setCropState] = useState({
+		crop: {
+			x: 0,
+			y: 0
+		},
+		zoom: 1,
+		croppedAreaPixels: null
+	});
+	const finalQuality = useMemo(() => {
+		if (quality !== void 0) return quality;
+		if (file) return getOptimalQuality(file.size);
+		return defaultImageCompressionQuality;
+	}, [quality, file]);
+	useEffect(() => {
+		if (!file || !visible) {
+			setImageUrl("");
+			setError("");
+			return;
+		}
+		if (!validateImageFile(file)) {
+			setError("请选择有效的图片文件（支持 JPEG、PNG、WebP、GIF 格式）");
+			return;
+		}
+		if (file.size > 20 * 1024 * 1024) {
+			setError("文件大小不能超过 20MB");
+			return;
+		}
+		setIsLoading(true);
+		setError("");
+		fileToDataUrl(file).then((url) => {
+			setImageUrl(url);
+			setIsLoading(false);
+		}).catch((err) => {
+			console.error("图片加载失败:", err);
+			setError("图片加载失败，请重试");
+			setIsLoading(false);
+		});
+	}, [file, visible]);
+	useEffect(() => {
+		if (visible) setCropState({
+			crop: {
+				x: 0,
+				y: 0
+			},
+			zoom: 1,
+			croppedAreaPixels: null
+		});
+	}, [visible, file]);
+	const onCropChange = useCallback((crop) => {
+		setCropState((prev) => ({
+			...prev,
+			crop
+		}));
+	}, []);
+	const onZoomChange = useCallback((zoom) => {
+		setCropState((prev) => ({
+			...prev,
+			zoom
+		}));
+	}, []);
+	const onCropCompleteCallback = useCallback((croppedArea, croppedAreaPixels) => {
+		setCropState((prev) => ({
+			...prev,
+			croppedAreaPixels
+		}));
+	}, []);
+	const handleConfirm = useCallback(async () => {
+		if (!file || !cropState.croppedAreaPixels) {
+			setError("请先选择裁剪区域");
+			return;
+		}
+		setIsLoading(true);
+		setError("");
+		try {
+			const fileType = `image/${outputFormat}`;
+			onCropComplete({
+				file: await getCroppedFile(imageUrl, cropState.croppedAreaPixels, `cropped.${outputFormat}`, {
+					fileType,
+					quality: finalQuality,
+					maxWidth,
+					maxHeight,
+					circular: cropShape === "round"
+				}),
+				originalFile: file,
+				cropArea: cropState.croppedAreaPixels
+			});
+		} catch (err) {
+			console.error("裁剪失败:", err);
+			setError("裁剪失败，请重试");
+		} finally {
+			setIsLoading(false);
+		}
+	}, [
+		file,
+		cropState.croppedAreaPixels,
+		finalQuality,
+		outputFormat,
+		maxWidth,
+		maxHeight,
+		cropShape,
+		imageUrl,
+		onCropComplete
+	]);
+	const handleCancel = useCallback(() => {
+		onCancel();
+	}, [onCancel]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: visible,
+		onOpenChange: handleCancel,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			showCloseButton: false,
+			className: `bg-black/90 !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto ${className || ""}`,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative flex h-full w-full flex-col",
+				children: [imageUrl && !error && /* @__PURE__ */ jsxs("div", {
+					className: "absolute top-0 left-0 right-0 z-10 flex h-16 items-center justify-between px-4",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "flex h-full items-center justify-center px-4 text-white transition-colors hover:text-white/80",
+						onClick: handleCancel,
+						disabled: isLoading,
+						children: /* @__PURE__ */ jsx("svg", {
+							className: "w-4 h-4",
+							xmlns: "http://www.w3.org/2000/svg",
+							fill: "currentColor",
+							viewBox: "0 0 16 16",
+							children: /* @__PURE__ */ jsx("path", { d: "M14.55.2a.889.889 0 0 1 1.25 1.25l-.06.067L9.255 8l6.483 6.482.06.069a.888.888 0 0 1-1.25 1.25l-.067-.062L8 9.256l-6.482 6.483A.888.888 0 1 1 .26 14.482L6.742 8 .26 1.517.2 1.45A.888.888 0 0 1 1.45.2l.067.062 6.482 6.482L14.482.261l.068-.062Z" })
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "h-8 rounded-full bg-primary px-4 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/80 disabled:opacity-50",
+						onClick: handleConfirm,
+						disabled: isLoading || !cropState.croppedAreaPixels || !!error,
+						children: "确定"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "relative flex-1 overflow-hidden bg-black",
+					children: [
+						isLoading && /* @__PURE__ */ jsxs("div", {
+							className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-2 text-white",
+							children: [/* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" }), /* @__PURE__ */ jsx("span", { children: "处理中..." })]
+						}),
+						error && /* @__PURE__ */ jsx("div", {
+							className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-red-500",
+							children: error
+						}),
+						imageUrl && !error && /* @__PURE__ */ jsx(Cropper, {
+							image: imageUrl,
+							crop: cropState.crop,
+							zoom: cropState.zoom,
+							onCropChange,
+							onZoomChange,
+							onCropComplete: onCropCompleteCallback,
+							showGrid: true,
+							cropShape,
+							restrictPosition: true,
+							zoomWithScroll: true
+						})
+					]
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { ImageCrop };

package/dist/components/common/image-crop/show-image-crop.mjs

@@ -1,2 +1,103 @@
 
-"use client";import{ImageCrop as e}from"./image-crop.mjs";import"react";import{jsx as t}from"react/jsx-runtime";import{createRoot as n}from"react-dom/client";function r(r,i){return new Promise((a,o)=>{if(!r){o(Error(`文件参数不能为空`));return}if(![`image/jpeg`,`image/jpg`,`image/png`,`image/webp`,`image/gif`].includes(r.type)){o(Error(`不支持的文件类型，请选择图片文件`));return}if(r.size>20*1024*1024){o(Error(`文件大小不能超过 20MB`));return}if(i?.aspectRatio!==void 0&&(i.aspectRatio<=0||!Number.isFinite(i.aspectRatio))){o(Error(`aspectRatio 必须是一个大于0的有限数`));return}if(i?.quality!==void 0&&(i.quality<0||i.quality>1)){o(Error(`quality 必须在 0-1 之间`));return}if(i?.maxWidth!==void 0&&i.maxWidth<=0){o(Error(`maxWidth 必须大于0`));return}if(i?.maxHeight!==void 0&&i.maxHeight<=0){o(Error(`maxHeight 必须大于0`));return}let s=document.createElement(`div`);document.body.appendChild(s);let c=n(s),l=()=>{c.unmount(),document.body.removeChild(s)};c.render(t(e,{visible:!0,file:r,aspectRatio:i?.aspectRatio||1,quality:i?.quality,outputFormat:i?.outputFormat||`jpeg`,maxWidth:i?.maxWidth,maxHeight:i?.maxHeight,cropShape:i?.cropShape||`round`,onCropComplete:e=>{l(),a(e.file)},onCancel:()=>{l()}}))})}export{r as showImageCrop};
+'use client';
+
+import { ImageCrop } from "./image-crop.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+
+//#region components/common/image-crop/show-image-crop.tsx
+/**
+* 显示图片裁剪界面
+*
+* @param file - 要裁剪的图片文件
+* @param options - 裁剪选项（可选）
+* @returns Promise<File> - 裁剪后的文件
+*
+* @example
+* ```typescript
+* // 基本使用（圆形头像裁剪）
+* try {
+*   const croppedFile = await showImageCrop(selectedFile);
+*   console.log('裁剪完成:', croppedFile);
+*   // 处理裁剪后的文件
+* } catch (error) {
+*   console.log('用户取消裁剪或发生错误');
+* }
+*
+* // 自定义参数（矩形背景图裁剪）
+* const croppedFile = await showImageCrop(selectedFile, {
+*   aspectRatio: 430 / 256,  // 背景图比例
+*   quality: 0.92,
+*   outputFormat: 'jpeg',
+*   cropShape: 'rect',
+* });
+* ```
+*/
+function showImageCrop(file, options) {
+	return new Promise((resolve, reject) => {
+		if (!file) {
+			reject(/* @__PURE__ */ new Error("文件参数不能为空"));
+			return;
+		}
+		if (![
+			"image/jpeg",
+			"image/jpg",
+			"image/png",
+			"image/webp",
+			"image/gif"
+		].includes(file.type)) {
+			reject(/* @__PURE__ */ new Error("不支持的文件类型，请选择图片文件"));
+			return;
+		}
+		if (file.size > 20 * 1024 * 1024) {
+			reject(/* @__PURE__ */ new Error("文件大小不能超过 20MB"));
+			return;
+		}
+		if (options?.aspectRatio !== void 0 && (options.aspectRatio <= 0 || !Number.isFinite(options.aspectRatio))) {
+			reject(/* @__PURE__ */ new Error("aspectRatio 必须是一个大于0的有限数"));
+			return;
+		}
+		if (options?.quality !== void 0 && (options.quality < 0 || options.quality > 1)) {
+			reject(/* @__PURE__ */ new Error("quality 必须在 0-1 之间"));
+			return;
+		}
+		if (options?.maxWidth !== void 0 && options.maxWidth <= 0) {
+			reject(/* @__PURE__ */ new Error("maxWidth 必须大于0"));
+			return;
+		}
+		if (options?.maxHeight !== void 0 && options.maxHeight <= 0) {
+			reject(/* @__PURE__ */ new Error("maxHeight 必须大于0"));
+			return;
+		}
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		const root = createRoot(container);
+		const cleanup = () => {
+			root.unmount();
+			document.body.removeChild(container);
+		};
+		const handleCropComplete = (result) => {
+			cleanup();
+			resolve(result.file);
+		};
+		const handleCancel = () => {
+			cleanup();
+		};
+		root.render(/* @__PURE__ */ jsx(ImageCrop, {
+			visible: true,
+			file,
+			aspectRatio: options?.aspectRatio || 1,
+			quality: options?.quality,
+			outputFormat: options?.outputFormat || "jpeg",
+			maxWidth: options?.maxWidth,
+			maxHeight: options?.maxHeight,
+			cropShape: options?.cropShape || "round",
+			onCropComplete: handleCropComplete,
+			onCancel: handleCancel
+		}));
+	});
+}
+
+//#endregion
+export { showImageCrop };

package/dist/components/common/image-crop-modal/image-crop-modal.mjs

@@ -1,5 +1,102 @@
 
-"use client";import{cn as e}from"../../../utils/cn.mjs";import{Dialog as t,DialogContent as n}from"../../ui/dialog.mjs";import{getCroppedImg as r}from"../../../utils/image-crop.mjs";import{useCallback as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useTranslations as c}from"next-intl";import l from"react-easy-crop";function u({open:u,onClose:d,imageSrc:f,onConfirm:p,cropShape:m=`round`}){let h=c(`components.common`),[g,_]=a({x:0,y:0}),[v,y]=a(1),[b,x]=a(null),[S,C]=a(!1),w=i((e,t)=>{x(t)},[]);async function T(){if(b)try{C(!0),p(await r(f,b,{circular:m===`round`,maxWidth:800,maxHeight:800})),E()}catch(e){console.error(`裁剪图片失败`,e)}finally{C(!1)}}function E(){_({x:0,y:0}),y(1),x(null),d()}return o(t,{open:u,onOpenChange:E,children:o(n,{showCloseButton:!1,className:`bg-black/90 !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto`,children:s(`div`,{className:`relative flex h-full w-full flex-col`,children:[o(`div`,{className:`relative flex-1 overflow-hidden bg-black`,children:o(l,{image:f,crop:g,zoom:v,aspect:1,cropShape:m,onCropChange:_,onZoomChange:y,onCropComplete:w})}),o(`div`,{className:`absolute bottom-28 left-0 right-0 px-8`,children:s(`div`,{className:`mx-auto max-w-md`,children:[o(`input`,{type:`range`,min:1,max:3,step:.1,value:v,onChange:e=>y(Number(e.target.value)),className:`w-full appearance-none bg-tra nsparent cursor-pointer focus-within:outline-none`,style:{WebkitAppearance:`none`,background:`rgba(255, 255, 255, 0.3)`,height:`4px`,borderRadius:`2px`}}),o(`style`,{children:`
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { Dialog, DialogContent } from "../../ui/dialog.mjs";
+import { getCroppedImg } from "../../../utils/image-crop.mjs";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Cropper from "react-easy-crop";
+
+//#region components/common/image-crop-modal/image-crop-modal.tsx
+function ImageCropModal({ open, onClose, imageSrc, onConfirm, cropShape = "round" }) {
+	const t = useTranslations("components.common");
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+	const [isProcessing, setIsProcessing] = useState(false);
+	/**
+	* 处理裁剪区域变化
+	*/
+	const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
+		setCroppedAreaPixels(croppedAreaPixels);
+	}, []);
+	/**
+	* 处理确认按钮点击
+	*/
+	async function handleConfirm() {
+		if (!croppedAreaPixels) return;
+		try {
+			setIsProcessing(true);
+			onConfirm(await getCroppedImg(imageSrc, croppedAreaPixels, {
+				circular: cropShape === "round",
+				maxWidth: 800,
+				maxHeight: 800
+			}));
+			handleClose();
+		} catch (error) {
+			console.error("裁剪图片失败", error);
+		} finally {
+			setIsProcessing(false);
+		}
+	}
+	/**
+	* 处理关闭弹窗
+	*/
+	function handleClose() {
+		setCrop({
+			x: 0,
+			y: 0
+		});
+		setZoom(1);
+		setCroppedAreaPixels(null);
+		onClose();
+	}
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: handleClose,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			showCloseButton: false,
+			className: "bg-black/90 !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative flex h-full w-full flex-col",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "relative flex-1 overflow-hidden bg-black",
+						children: /* @__PURE__ */ jsx(Cropper, {
+							image: imageSrc,
+							crop,
+							zoom,
+							aspect: 1,
+							cropShape,
+							onCropChange: setCrop,
+							onZoomChange: setZoom,
+							onCropComplete
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "absolute bottom-28 left-0 right-0 px-8",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "mx-auto max-w-md",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "range",
+								min: 1,
+								max: 3,
+								step: .1,
+								value: zoom,
+								onChange: (e) => setZoom(Number(e.target.value)),
+								className: "w-full appearance-none bg-tra nsparent cursor-pointer focus-within:outline-none",
+								style: {
+									WebkitAppearance: "none",
+									background: "rgba(255, 255, 255, 0.3)",
+									height: "4px",
+									borderRadius: "2px"
+								}
+							}), /* @__PURE__ */ jsx("style", { children: `
                 input[type="range"] {
                   outline: none;
                 }
@@ -31,4 +128,33 @@
                 input[type="range"]::-moz-range-thumb:focus {
                   outline: none;
                 }
-              `})]})}),o(`div`,{className:`absolute bottom-8 left-0 right-0 px-8`,children:s(`div`,{className:`mx-auto flex max-w-md gap-4`,children:[o(`button`,{type:`button`,onClick:E,disabled:S,className:e(`flex-1 rounded-full py-3 text-base font-medium transition-colors`,`bg-bg1 text-text1 hover:bg-bg1/90`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:h(`imageCropModal.cancel`)}),o(`button`,{type:`button`,onClick:T,disabled:S,className:e(`flex-1 rounded-full py-3 text-base font-medium transition-colors`,`bg-primary text-primary-foreground hover:bg-primary/80`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:h(S?`imageCropModal.processing`:`imageCropModal.confirm`)})]})})]})})})}export{u as ImageCropModal};
+              ` })]
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "absolute bottom-8 left-0 right-0 px-8",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "mx-auto flex max-w-md gap-4",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleClose,
+								disabled: isProcessing,
+								className: cn("flex-1 rounded-full py-3 text-base font-medium transition-colors", "bg-bg1 text-text1 hover:bg-bg1/90", "disabled:opacity-50 disabled:cursor-not-allowed"),
+								children: t("imageCropModal.cancel")
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleConfirm,
+								disabled: isProcessing,
+								className: cn("flex-1 rounded-full py-3 text-base font-medium transition-colors", "bg-primary text-primary-foreground hover:bg-primary/80", "disabled:opacity-50 disabled:cursor-not-allowed"),
+								children: isProcessing ? t("imageCropModal.processing") : t("imageCropModal.confirm")
+							})]
+						})
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+export { ImageCropModal };

package/dist/components/common/info-card/card-header.mjs

@@ -1,2 +1,71 @@
 
-"use client";import{Image as e}from"../../ui/image.mjs";import{Box as t}from"../../ui/box.mjs";import{Text as n}from"../../ui/text.mjs";import{Time as r}from"../../ui/time.mjs";import{FollowButton as i}from"../../pages/(follow)/_components/follow-button/index.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{usePathname as s,useRouter as c}from"next/navigation";function l({className:l,infoData:u,onChangeFollow:d,rightChild:f}){let p=s(),m=c(),h=u?.author?.user_id||``,g=u?.author?.nickname||``,_=u?.show_at||u?.create_time;return a(t,{className:`w-full mb-[8px] pt-[16px] px-[12px] ${l}`,children:o(t,{className:`w-full flex items-center justify-between`,children:[o(t,{className:`flex items-center cursor-pointer`,onClick:e=>{e.stopPropagation(),e.preventDefault();let t=`/profile/${h}`;p!==t&&m.push(t)},children:[a(t,{className:`w-[36px] h-[36px] mr-[8px] rounded-full bg-bg2 overflow-hidden`,children:u?.author?.avatar&&a(e,{width:36,height:36,src:u?.author?.avatar,className:`w-full h-full object-cover`,alt:`avatar`})}),o(t,{className:`flex flex-col`,children:[a(n,{className:`block text-text1 text-[14px] leading-[18px] max-w-[220px] overflow-hidden whitespace-nowrap text-ellipsis`,children:g}),a(t,{className:`mt-[4px] h-[14px] leading-[14px]`,children:a(r,{mode:`relative`,value:_,className:`text-text3 text-[12px]`})})]})]}),a(t,{onClick:e=>{e.stopPropagation(),e.preventDefault()},children:f||(h?a(i,{userId:h,hasFollow:!1,onChange:d}):null)})]})})}export{l as default};
+'use client';
+
+import { Image } from "../../ui/image.mjs";
+import { Box } from "../../ui/box.mjs";
+import { Text } from "../../ui/text.mjs";
+import { Time } from "../../ui/time.mjs";
+import { FollowButton } from "../../pages/(follow)/_components/follow-button/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter } from "next/navigation";
+
+//#region components/common/info-card/card-header.tsx
+function InfoCardHeader({ className, infoData, onChangeFollow, rightChild }) {
+	const pathname = usePathname();
+	const router = useRouter();
+	const userId = infoData?.author?.user_id || "";
+	const userName = infoData?.author?.nickname || "";
+	const publishTime = infoData?.show_at || infoData?.create_time;
+	return /* @__PURE__ */ jsx(Box, {
+		className: `w-full mb-[8px] pt-[16px] px-[12px] ${className}`,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "flex items-center cursor-pointer",
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					const userPath = `/profile/${userId}`;
+					if (pathname === userPath) return;
+					router.push(userPath);
+				},
+				children: [/* @__PURE__ */ jsx(Box, {
+					className: "w-[36px] h-[36px] mr-[8px] rounded-full bg-bg2 overflow-hidden",
+					children: infoData?.author?.avatar && /* @__PURE__ */ jsx(Image, {
+						width: 36,
+						height: 36,
+						src: infoData?.author?.avatar,
+						className: "w-full h-full object-cover",
+						alt: "avatar"
+					})
+				}), /* @__PURE__ */ jsxs(Box, {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: "block text-text1 text-[14px] leading-[18px] max-w-[220px] overflow-hidden whitespace-nowrap text-ellipsis",
+						children: userName
+					}), /* @__PURE__ */ jsx(Box, {
+						className: "mt-[4px] h-[14px] leading-[14px]",
+						children: /* @__PURE__ */ jsx(Time, {
+							mode: "relative",
+							value: publishTime,
+							className: "text-text3 text-[12px]"
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+				},
+				children: rightChild || (userId ? /* @__PURE__ */ jsx(FollowButton, {
+					userId,
+					hasFollow: false,
+					onChange: onChangeFollow
+				}) : null)
+			})]
+		})
+	});
+}
+
+//#endregion
+export { InfoCardHeader as default };

package/dist/components/common/info-card/card-text.mjs

@@ -1,2 +1,50 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import{Text as t}from"../../ui/text.mjs";import n from"../at-element/index.mjs";import{useEffect as r,useState as i}from"react";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";function c({className:c,infoData:l,tagsChild:u}){let[d,f]=i(!1);function p(e){return!!(e&&e.length>120)}function m(){f(e=>!e)}return r(()=>{f(!1)},[l.content]),s(e,{className:`w-full mb-[8px] px-[12px] cursor-pointer ${c}`,children:[l.content&&o(t,{suppressHydrationWarning:!0,className:`text-text1 text-[16px] leading-[24px] break-all break-words ${d?``:`line-clamp-3`}`,children:o(n,{text:l.content,atUsers:l.author.nickname})}),p(l.content)&&o(e,{className:`mt-1 text-xs text-text3`,onClick:e=>{e.stopPropagation(),e.preventDefault(),m()},children:d?`收起`:`展开`}),u||o(a,{})]})}export{c as default};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import { Text } from "../../ui/text.mjs";
+import AtUserText from "../at-element/index.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/common/info-card/card-text.tsx
+function InfoCardText({ className, infoData, tagsChild }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	/** 判断是否需要展示展开/收起按钮。 */
+	function shouldShowToggleButton(text) {
+		return Boolean(text && text.length > 120);
+	}
+	/** 切换文本展开/收起。 */
+	function handleToggleExpand() {
+		setIsExpanded((prev) => !prev);
+	}
+	useEffect(() => {
+		setIsExpanded(false);
+	}, [infoData.content]);
+	return /* @__PURE__ */ jsxs(Box, {
+		className: `w-full mb-[8px] px-[12px] cursor-pointer ${className}`,
+		children: [
+			infoData.content && /* @__PURE__ */ jsx(Text, {
+				suppressHydrationWarning: true,
+				className: `text-text1 text-[16px] leading-[24px] break-all break-words ${isExpanded ? "" : "line-clamp-3"}`,
+				children: /* @__PURE__ */ jsx(AtUserText, {
+					text: infoData.content,
+					atUsers: infoData.author.nickname
+				})
+			}),
+			shouldShowToggleButton(infoData.content) && /* @__PURE__ */ jsx(Box, {
+				className: "mt-1 text-xs text-text3",
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleToggleExpand();
+				},
+				children: isExpanded ? "收起" : "展开"
+			}),
+			tagsChild || /* @__PURE__ */ jsx(Fragment$1, {})
+		]
+	});
+}
+
+//#endregion
+export { InfoCardText as default };

package/dist/components/common/interaction-animations.module.mjs

@@ -1,85 +1,15 @@
 
-import e from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs";var t=`@keyframes interaction-animations-module_likeShake__7Bfbc {
-  0% {
-    transform: scale(1);
-  }
-
-  15% {
-    transform: scale(1.3) rotate(5deg);
-  }
-
-  30% {
-    transform: scale(1.1) rotate(-5deg);
-  }
-
-  45% {
-    transform: scale(1.25) rotate(3deg);
-  }
-
-  60% {
-    transform: scale(1.05) rotate(-2deg);
-  }
-
-  75% {
-    transform: scale(1.15) rotate(1deg);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes interaction-animations-module_dislikeShake__zk6gc {
-  0% {
-    transform: translateY(0);
-  }
-
-  10% {
-    transform: translateY(-3px);
-  }
-
-  20% {
-    transform: translateY(3px);
-  }
-
-  30% {
-    transform: translateY(-3px);
-  }
-
-  40% {
-    transform: translateY(3px);
-  }
-
-  50% {
-    transform: translateY(-2px);
-  }
-
-  60% {
-    transform: translateY(2px);
-  }
-
-  70% {
-    transform: translateY(-1px);
-  }
-
-  80% {
-    transform: translateY(1px);
-  }
-
-  90% {
-    transform: translateY(-0.5px);
-  }
-
-  100% {
-    transform: translateY(0);
-  }
-}
-
-.interaction-animations-module_likeShakeAnimation__oo47A {
-  animation: interaction-animations-module_likeShake__7Bfbc 0.6s ease-in-out;
-}
-
-.interaction-animations-module_dislikeShakeAnimation__q1xZy {
-  animation: interaction-animations-module_dislikeShake__zk6gc 0.6s ease-in-out;
-}
-`,n={likeShakeAnimation:`interaction-animations-module_likeShakeAnimation__oo47A`,likeShake:`interaction-animations-module_likeShake__7Bfbc`,dislikeShakeAnimation:`interaction-animations-module_dislikeShakeAnimation__q1xZy`,dislikeShake:`interaction-animations-module_dislikeShake__zk6gc`};e(t);export{n as default};
+import styleInject from "../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs";
+
+//#region components/common/interaction-animations.module.css
+var css_248z = "@keyframes interaction-animations-module_likeShake__7Bfbc {\n  0% {\n    transform: scale(1);\n  }\n\n  15% {\n    transform: scale(1.3) rotate(5deg);\n  }\n\n  30% {\n    transform: scale(1.1) rotate(-5deg);\n  }\n\n  45% {\n    transform: scale(1.25) rotate(3deg);\n  }\n\n  60% {\n    transform: scale(1.05) rotate(-2deg);\n  }\n\n  75% {\n    transform: scale(1.15) rotate(1deg);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes interaction-animations-module_dislikeShake__zk6gc {\n  0% {\n    transform: translateY(0);\n  }\n\n  10% {\n    transform: translateY(-3px);\n  }\n\n  20% {\n    transform: translateY(3px);\n  }\n\n  30% {\n    transform: translateY(-3px);\n  }\n\n  40% {\n    transform: translateY(3px);\n  }\n\n  50% {\n    transform: translateY(-2px);\n  }\n\n  60% {\n    transform: translateY(2px);\n  }\n\n  70% {\n    transform: translateY(-1px);\n  }\n\n  80% {\n    transform: translateY(1px);\n  }\n\n  90% {\n    transform: translateY(-0.5px);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n}\n\n.interaction-animations-module_likeShakeAnimation__oo47A {\n  animation: interaction-animations-module_likeShake__7Bfbc 0.6s ease-in-out;\n}\n\n.interaction-animations-module_dislikeShakeAnimation__q1xZy {\n  animation: interaction-animations-module_dislikeShake__zk6gc 0.6s ease-in-out;\n}\n";
+var interaction_animations_module_default = {
+	"likeShakeAnimation": "interaction-animations-module_likeShakeAnimation__oo47A",
+	"likeShake": "interaction-animations-module_likeShake__7Bfbc",
+	"dislikeShakeAnimation": "interaction-animations-module_dislikeShakeAnimation__q1xZy",
+	"dislikeShake": "interaction-animations-module_dislikeShake__zk6gc"
+};
+styleInject(css_248z);
+
+//#endregion
+export { interaction_animations_module_default as default };