@funhub/platform 0.2.29 → 0.2.31

package/dist/components/biz/business/comment/comment-input.mjs

@@ -1,6 +1,773 @@
 
-"use client";import{getAtUserElement as e,stripHtmlTags as t}from"../../../../utils/common.mjs";import{cn as n}from"../../../../utils/cn.mjs";import{useUserStore as r}from"../../../../store/modules/user-store.mjs";import{createInputAndSelectFile as i,getCoverImage as a,getImageResolutionFromFile as o}from"../../../../utils/media.mjs";import{uploadFile as s}from"../../../../utils/upload-file.mjs";import{Image as c}from"../../../ui/image.mjs";import{Dialog as ee,DialogContent as te}from"../../../ui/dialog.mjs";import{useLoginModalStore as ne}from"../../../../store/modules/login-modal-store.mjs";import l from"../../../../assets/icons/close.mjs";import u from"../../../../assets/icons/detail/video_play.mjs";import re from"../../../../assets/icons/detail/commet_at.mjs";import ie from"../../../../assets/icons/detail/publish_pic.mjs";import ae from"../../../../assets/icons/detail/publish_video.mjs";import{UploadProgress as oe}from"../../../pages/publish/components/upload-progress.mjs";import{ContactList as se}from"../contact/contact-list.mjs";import{useKeyboardHandler as ce}from"./use-keyboard-handler.mjs";import{toast as d}from"sonner";import{memo as f,useCallback as p,useEffect as m,useImperativeHandle as le,useMemo as h,useRef as g,useState as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useTranslations as ue}from"next-intl";function de(e){let t=e.clipboardData;if(!t)return``;let n=t.getData(`text/plain`);if(n)return n;let r=t.getData(`text/html`);if(!r)return``;try{return new DOMParser().parseFromString(r,`text/html`).body.textContent||``}catch{return``}}function fe(e,t){if(t<=0)return``;let n=0,r=``;for(let i of e){if(i!==`
-`&&(n++,n>t))break;r+=i}return r}function pe(e,t){if(!t)return;let n=window.getSelection(),r=null;n&&n.rangeCount>0&&(r=n.getRangeAt(0)),(!r||!e.contains(r.commonAncestorContainer))&&(e.focus(),r=document.createRange(),r.selectNodeContents(e),r.collapse(!1)),r.deleteContents();let i=document.createDocumentFragment(),a=t.split(`
-`);a.forEach((e,t)=>{e&&i.appendChild(document.createTextNode(e)),t<a.length-1&&i.appendChild(document.createElement(`br`))});let o=i.lastChild;if(r.insertNode(i),n&&o){let e=document.createRange();e.setStartAfter(o),e.collapse(!0),n.removeAllRanges(),n.addRange(e)}}const me=f(({imageVideoInfoList:e,onDelete:t,variant:r=`dark`})=>{if(e.length===0)return null;let i=r===`light`;return v(`div`,{className:n(`w-full overflow-hidden`,i?`px-4`:`h-[76px] px-[16px]`),children:v(`div`,{className:n(i?`flex items-center gap-3 overflow-x-auto py-3`:`w-full h-[calc(100%+60px)] pb-[60px] overflow-x-auto flex items-center flex-nowrap`),children:e.map((e,r)=>{let a=e.is_video?e.cover_image||e.image_url:e.image_url||e.cover_image;return y(`div`,{className:n(`w-[60px] h-[60px] rounded-[8px] overflow-hidden shrink-0 flex items-center justify-center bg-bg2 relative`,!i&&r>0&&`ml-[12px]`),onClick:e=>{e.target.closest(`[data-delete-button]`)&&e.stopPropagation()},children:[a&&v(c,{src:a,alt:`media`,fill:!0,objectFit:`cover`}),v(`button`,{type:`button`,className:`cursor-pointer absolute top-0 right-0 p-[4px] z-[1]`,"data-delete-button":`true`,onClick:()=>t(r),children:v(l,{className:`w-[12px] h-[12px] text-[#fff] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]`})}),e.is_video&&v(`div`,{className:`absolute w-[24px] h-[24px] rounded-[12px] bg-[rgba(0,0,0,0.5)] top-0 right-0 bottom-0 left-0 m-auto flex items-center justify-center`,children:v(u,{className:`w-[12px] h-[12px] text-[#fff]`})})]},`${e.is_video?`video`:`image`}-${r}`)})})})});me.displayName=`CommentUploadGroup`;function b({disabled:e,onClick:t,children:r,variant:i=`dark`}){return v(`button`,{type:`button`,className:n(`flex h-12 flex-1 items-center justify-center`,i===`light`?`text-text2 hover:bg-bg2/60`:`text-white hover:bg-white/10`,e&&`opacity-40`),disabled:e,onClick:t,children:r})}function x({ref:c,value:l=``,onChange:u,onPublish:f,onInputBlur:x,placeholder:he=``,className:ge=``,maxLength:S=200,publishText:_e=``,autoFocus:ve,disabled:ye,onRequireLogin:C,variant:be=`dark`}){let w=ue(`components.biz.business.comment`),T=be===`light`,xe=_e||w(`commentInput.publishDefault`),Se=h(()=>{let e=he||w(`commentInput.placeholder`);return e.length>15?`${e.slice(0,15)}...`:e},[he,w]),[E,D]=_(l),[O,k]=_(!1),[A,j]=_(!1),Ce=g(null),M=g(null),N=g(!1),P=g(0),we=g(0),[F,I]=_([]),[L,R]=_(!1),[z,B]=_(null),[V,Te]=_(!1),H=ye||V,{isLogin:U}=r(),{open:W}=ne(),{containerStyle:Ee,onFocus:G,onBlur:De,inputRef:Oe}=ce(A),K=p(()=>{C?C():W()},[C,W]);m(()=>{M.current&&l&&(M.current.innerHTML=l)},[l]),m(()=>{typeof window>`u`||window.dispatchEvent(new CustomEvent(`funhub:visible-contact-change`,{detail:{visible:L}}))},[L]),m(()=>{if(!(!ve||!M.current)){if(!U){K();return}M.current.focus(),k(!0)}},[ve,K,U]),m(()=>{let e=e=>{let t=e.target,n=t.closest(`[data-delete-button]`),r=t.tagName===`INPUT`||t.tagName===`TEXTAREA`;n||r||Ce.current?.contains(t)||Date.now()-P.current>100&&k(!1)};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)},[]),le(c,()=>({focus:()=>{let e=M.current;if(!(!e||N.current)){N.current=!0;try{if(!U){K();return}if(document.activeElement===e&&O)return;e.focus(),P.current=Date.now(),k(!0),A||j(!0),G()}catch(e){console.warn(`CommentInput focus error`,e),k(!0)}finally{N.current=!1}}}}),[A,K,U,G,O]);let q=()=>{P.current=Date.now()},J=p(()=>{if(!M.current)return;let e=document.createRange(),t=window.getSelection();e.selectNodeContents(M.current),e.collapse(!1),t?.removeAllRanges(),t?.addRange(e)},[]),Y=p(e=>{M.current&&(M.current.innerHTML=e)},[]),X=p(e=>{let t=e.querySelectorAll(`img,video,audio,iframe,object,embed,svg,canvas`);if(t.length===0)return!1;t.forEach(e=>e.remove());let n=Date.now();return n-we.current>1500&&(we.current=n,d.info(w(`commentInput.pasteFileNotSupported`))),!0},[w]),ke=p(e=>{let n=M.current;if(!n)return;if(H){e.preventDefault();return}if(!U){e.preventDefault(),K(),n.blur();return}let r=e.clipboardData;if(r&&Array.from(r.items||[]).some(e=>e.kind===`file`)){e.preventDefault(),e.stopPropagation(),d.info(w(`commentInput.pasteFileNotSupported`));return}let i=de(e);if(!i){e.preventDefault();return}e.preventDefault(),e.stopPropagation();let a=i.replace(/\r\n/g,`
-`).replace(/\r/g,`
-`),o=t(n.innerHTML||``).length,s=S?Math.max(0,S-o):1/0;if(s<=0)return;pe(n,Number.isFinite(s)?fe(a,s):a),X(n);let c=n.innerHTML||``;D(c),u?.(c)},[K,H,U,S,u,X,w]),Ae=p(e=>{let n=e.currentTarget.innerHTML||``;X(e.currentTarget)&&(n=e.currentTarget.innerHTML||``);let r=t(n);S&&r.length>S&&(n=n.substring(0,S),Y(n),J()),D(n),u?.(n)},[S,J,u,Y,X]),je=p(e=>{e.preventDefault(),e.stopPropagation();let t=e.dataTransfer?.files;t&&t.length>0&&d.info(w(`commentInput.dragFileNotSupported`))},[w]),Me=p(e=>{e.preventDefault()},[]),Ne=()=>{if(!H){if(!U){K(),M.current?.blur();return}P.current=Date.now(),k(!0),A||j(!0),G()}},Pe=()=>{if(H){V&&d.info(w(`commentInput.publishing`));return}if(!U){K(),M.current?.blur();return}P.current=Date.now(),O||k(!0),A||j(!0),G()},Fe=()=>{setTimeout(()=>{Date.now()-P.current>200&&document.activeElement!==M.current&&(k(!1),x?.())},150),De()},Ie=p(()=>{D(``),Y(``),I([]),k(!1)},[Y]),Le=h(()=>t(E).trim().length===0,[E]),Z=h(()=>!Le||F.length>0,[F.length,Le]),Re=p(async()=>{if(!U){K();return}if(F.some(e=>e.is_video))return;let e=await i(`file`,`image/*`);if(!e||e.length===0)return;let t=9-F.length,n=Array.from(e).slice(0,t);if(n.length===0)return;let r=[],a=0,c=n.length;try{for(let e=0;e<n.length;e++){let t=n[e];B({currentFiles:r.length,totalFiles:c,currentTasks:r.length+a,totalTasks:c});try{let{width:e,height:n}=await o(t),i=await s(t,1,!0);r.push({cover_image:``,cover_image_thumbnail:``,cover_image_radio:1,cover_image_resolution:``,image_url:i.objectKey,image_thumbnail:i.objectKey,image_radio:Number((e/n).toFixed(2)),image_resolution:`${e}x${n}`,is_video:!1,resolution:`${e}x${n}`,video_duration:0,video_url:``,video_size:0,video_codec_info:{hls_info:[],video_codec_deal:!1}})}catch(e){console.error(`上传图片失败`,e),a+=1}}r.length===0?d.error(w(`commentInput.imageUploadFailed`)):(a>0&&d.warning(w(`commentInput.partialImageUploadFailed`)),I(e=>[...e,...r]))}finally{B(null)}},[K,F,U,w]),ze=p(async()=>{if(!U){K();return}if(F.length>0){d.error(w(`commentInput.cannotSelectVideoWhenImageSelected`));return}let e=await i(`file`,`video/*`);if(!e||e.length===0)return;let t=e[0];try{B({currentFiles:0,totalFiles:1,currentTasks:0,totalTasks:2});let e=await s(t,2,!1),[n,r,i,o]=await a(t);B({currentFiles:0,totalFiles:1,currentTasks:1,totalTasks:2});let c=await s(n,1,!0);I([{cover_image:c.objectKey,cover_image_thumbnail:c.objectKey,cover_image_radio:Number((r/i).toFixed(2)),cover_image_resolution:`${r}x${i}`,image_url:c.objectKey,image_thumbnail:c.objectKey,image_radio:Number((r/i).toFixed(2)),image_resolution:`${r}x${i}`,is_video:!0,resolution:`${r}x${i}`,video_duration:o,video_url:e.objectKey,video_size:t.size,video_codec_info:{hls_info:[],video_codec_deal:!1}}])}catch(e){console.error(`视频上传失败`,e),d.error(w(`commentInput.videoUploadFailed`))}finally{B(null)}},[K,F.length,U,w]),Be=p(async e=>{if(e.preventDefault(),e.stopPropagation(),!(!Z||ye||V)){if(!U){C?C():W();return}try{Te(!0);let e=await f?.({text:E===`<br>`?``:E,imageVideoInfoList:F});if(e&&e.success===!1){e.toastHandled||d.error(e.message||`发布评论失败`);return}d.success(w(`commentInput.publishSuccess`)),Ie(),u?.(``)}catch(e){console.error(`发布评论失败:`,e),d.error(w(`commentInput.publishCommentFailed`))}finally{Te(!1)}}},[Ie,ye,F,E,U,Z,V,u,f,C,W,w]),Q=h(()=>!F.some(e=>e.is_video)&&F.length<9,[F]),$=h(()=>F.length===0,[F.length]),Ve=p(n=>{R(!1);let r=`${t(E).trim().length===0?``:E}${e(n)} `;D(r),Y(r),setTimeout(()=>{J()},16)},[E,J,Y]);function He(e){R(e)}function Ue(){R(!1)}let We=v(`button`,{type:`button`,className:n(`shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium`,Z&&!V?`bg-theme5 text-white`:`bg-bg2 text-text3`),onClick:Be,disabled:!Z||H,children:V?w(`commentInput.publishing`):xe}),Ge=v(`button`,{type:`button`,className:n(`ml-[14px] shrink-0 whitespace-nowrap px-[14px] py-[10px] text-[16px] leading-[16px]`,Z&&!V?`text-theme5`:`text-text3`),onClick:Be,disabled:!Z||H,children:V?w(`commentInput.publishing`):xe}),Ke=V?v(`span`,{className:n(`ml-[14px] text-[16px] leading-[16px] text-text3`),children:w(`commentInput.publishing`)}):null,qe=T?Ee:{...Ee,boxShadow:O?`0px -4px 10px 0px rgba(0,0,0,0.1)`:`none`},Je=T?`comment-input-container g-safe-area rounded-2xl border border-line1/20 bg-white text-text1 shadow-sm`:`comment-input-container bg-bg1 g-safe-area text-text1`,Ye=O?T?y(`div`,{className:`flex border-t border-line1/20`,children:[v(b,{disabled:!Q,onClick:()=>{H||Q&&setTimeout(()=>{Re()},400)},variant:`light`,children:w(`commentInput.image`)}),v(b,{disabled:!$,onClick:()=>{H||$&&setTimeout(()=>{ze()},400)},variant:`light`,children:w(`commentInput.video`)}),v(b,{disabled:H,onClick:()=>{H||R(!0)},variant:`light`,children:`@`})]}):y(`div`,{className:`flex h-[50px] items-center justify-around border-t border-line1 px-[8px]`,children:[v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,(!Q||H)&&`opacity-50`),onClick:()=>{H||Q&&setTimeout(()=>{Re()},400)},children:v(ie,{className:`h-[22px] w-[22px]`})}),v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,(!$||H)&&`opacity-50`),onClick:()=>{H||$&&setTimeout(()=>{ze()},400)},children:v(ae,{className:`h-[22px] w-[22px]`})}),v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,H&&`opacity-50`),onClick:()=>{H||R(!0)},children:v(re,{className:`h-[22px] w-[22px]`})})]}):null,Xe=T?``:`mx-auto w-full max-w-[840px]`;return y(`div`,{style:qe,className:n(Je,ge),onMouseDown:q,onTouchStart:q,onClick:q,ref:Ce,children:[z&&v(oe,{currentFiles:z.currentFiles,totalFiles:z.totalFiles,currentTasks:z.currentTasks,totalTasks:z.totalTasks}),y(`div`,{className:Xe,children:[O&&v(me,{imageVideoInfoList:F,onDelete:e=>I(t=>t.filter((t,n)=>n!==e)),variant:be}),y(`div`,{className:n(`px-4 py-3`,T?`flex items-center gap-3`:`flex items-center justify-between`),children:[y(`div`,{className:n(`relative min-w-0 flex-1 rounded-[20px] bg-bg2`,T?`rounded-2xl`:``),children:[!U&&v(`div`,{className:`absolute inset-0 z-[1] cursor-text`,onClick:K}),Le&&v(`span`,{className:n(`pointer-events-none absolute left-3 top-[10px] text-sm text-text3`),children:Se}),v(`div`,{ref:e=>{M.current=e,Oe(e)},contentEditable:!H,suppressContentEditableWarning:!0,className:n(`max-h-24 min-h-[40px] w-full cursor-text overflow-y-auto px-3 py-[10px] text-sm leading-5 outline-none break-all whitespace-pre-wrap text-text1`,H&&`cursor-not-allowed opacity-60`),"data-placeholder":Se,onInput:Ae,onFocus:Ne,onClick:Pe,onBlur:Fe,onPaste:ke,onDrop:je,onDragOver:Me})]}),O?T?We:Ge:Ke]}),Ye]}),v(ee,{open:L,onOpenChange:He,children:v(te,{showCloseButton:!1,initialFocus:!1,className:`fixed left-0 right-0 bottom-0 top-[84px] z-[1000] w-full max-w-none translate-x-0 translate-y-0 rounded-none bg-bg2 p-0`,children:v(se,{onSelect:Ve,onClose:Ue})})})]})}x.displayName=`CommentInput`;export{x as default};
+'use client';
+
+import { getAtUserElement, stripHtmlTags } from "../../../../utils/common.mjs";
+import { cn } from "../../../../utils/cn.mjs";
+import { useUserStore } from "../../../../store/modules/user-store.mjs";
+import { createInputAndSelectFile, getCoverImage, getImageResolutionFromFile } from "../../../../utils/media.mjs";
+import { uploadFile } from "../../../../utils/upload-file.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Dialog, DialogContent } from "../../../ui/dialog.mjs";
+import { useLoginModalStore } from "../../../../store/modules/login-modal-store.mjs";
+import SvgClose from "../../../../assets/icons/close.mjs";
+import SvgVideoPlay from "../../../../assets/icons/detail/video_play.mjs";
+import SvgCommetAt from "../../../../assets/icons/detail/commet_at.mjs";
+import SvgPublishPic from "../../../../assets/icons/detail/publish_pic.mjs";
+import SvgPublishVideo from "../../../../assets/icons/detail/publish_video.mjs";
+import { UploadProgress } from "../../../pages/publish/components/upload-progress.mjs";
+import { ContactList } from "../contact/contact-list.mjs";
+import { useKeyboardHandler } from "./use-keyboard-handler.mjs";
+import { toast } from "sonner";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/biz/business/comment/comment-input.tsx
+const MAX_IMAGE_COUNT = 9;
+/**
+* 从剪贴板事件中提取纯文本内容。
+* - 优先读取 `text/plain`
+* - 若为空则尝试从 `text/html` 解析出文本（忽略富文本样式）
+*/
+function getPlainTextFromClipboard(event) {
+	const clipboardData = event.clipboardData;
+	if (!clipboardData) return "";
+	const plain = clipboardData.getData("text/plain");
+	if (plain) return plain;
+	const html = clipboardData.getData("text/html");
+	if (!html) return "";
+	try {
+		return new DOMParser().parseFromString(html, "text/html").body.textContent || "";
+	} catch {
+		return "";
+	}
+}
+/**
+* 按最大字符数截断文本：换行不计入长度（与 stripHtmlTags 对 `<br>` 的行为保持一致）。
+*/
+function truncateTextIgnoringNewlines(text, maxLength) {
+	if (maxLength <= 0) return "";
+	let length = 0;
+	let result = "";
+	for (const char of text) {
+		if (char !== "\n") {
+			length++;
+			if (length > maxLength) break;
+		}
+		result += char;
+	}
+	return result;
+}
+/**
+* 将纯文本按当前光标位置插入到 contentEditable 中，并支持换行。
+*/
+function insertPlainTextAtSelection(editable, text) {
+	if (!text) return;
+	const selection = window.getSelection();
+	let range = null;
+	if (selection && selection.rangeCount > 0) range = selection.getRangeAt(0);
+	if (!range || !editable.contains(range.commonAncestorContainer)) {
+		editable.focus();
+		range = document.createRange();
+		range.selectNodeContents(editable);
+		range.collapse(false);
+	}
+	range.deleteContents();
+	const fragment = document.createDocumentFragment();
+	const lines = text.split("\n");
+	lines.forEach((line, index) => {
+		if (line) fragment.appendChild(document.createTextNode(line));
+		if (index < lines.length - 1) fragment.appendChild(document.createElement("br"));
+	});
+	const lastNode = fragment.lastChild;
+	range.insertNode(fragment);
+	if (selection && lastNode) {
+		const nextRange = document.createRange();
+		nextRange.setStartAfter(lastNode);
+		nextRange.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(nextRange);
+	}
+}
+/**
+* 内容输入框中不允许出现的媒体元素。
+* - 主要用于兜底处理：某些浏览器/设备在粘贴图片时不会触发 onPaste，导致图片直接插入 contentEditable。
+*/
+const DISALLOWED_MEDIA_SELECTOR = "img,video,audio,iframe,object,embed,svg,canvas";
+/**
+* 评论图片/视频预览条（按 web-monorepo `comment-input` 的样式迁移）。
+*/
+const CommentUploadGroup = memo(({ imageVideoInfoList, onDelete, variant = "dark" }) => {
+	if (imageVideoInfoList.length === 0) return null;
+	const isLight = variant === "light";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full overflow-hidden", isLight ? "px-4" : "h-[76px] px-[16px]"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(isLight ? "flex items-center gap-3 overflow-x-auto py-3" : "w-full h-[calc(100%+60px)] pb-[60px] overflow-x-auto flex items-center flex-nowrap"),
+			children: imageVideoInfoList.map((item, index) => {
+				const src = item.is_video ? item.cover_image || item.image_url : item.image_url || item.cover_image;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("w-[60px] h-[60px] rounded-[8px] overflow-hidden shrink-0 flex items-center justify-center bg-bg2 relative", !isLight && index > 0 && "ml-[12px]"),
+					onClick: (event) => {
+						if (event.target.closest("[data-delete-button]")) event.stopPropagation();
+					},
+					children: [
+						src && /* @__PURE__ */ jsx(Image, {
+							src,
+							alt: "media",
+							fill: true,
+							objectFit: "cover"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cursor-pointer absolute top-0 right-0 p-[4px] z-[1]",
+							"data-delete-button": "true",
+							onClick: () => onDelete(index),
+							children: /* @__PURE__ */ jsx(SvgClose, { className: "w-[12px] h-[12px] text-[#fff] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" })
+						}),
+						item.is_video && /* @__PURE__ */ jsx("div", {
+							className: "absolute w-[24px] h-[24px] rounded-[12px] bg-[rgba(0,0,0,0.5)] top-0 right-0 bottom-0 left-0 m-auto flex items-center justify-center",
+							children: /* @__PURE__ */ jsx(SvgVideoPlay, { className: "w-[12px] h-[12px] text-[#fff]" })
+						})
+					]
+				}, `${item.is_video ? "video" : "image"}-${index}`);
+			})
+		})
+	});
+});
+CommentUploadGroup.displayName = "CommentUploadGroup";
+/**
+* 评论输入框底部工具栏按钮（图片/视频/@）。
+*/
+function CommentToolbarButton({ disabled, onClick, children, variant = "dark" }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("flex h-12 flex-1 items-center justify-center", variant === "light" ? "text-text2 hover:bg-bg2/60" : "text-white hover:bg-white/10", disabled && "opacity-40"),
+		disabled,
+		onClick,
+		children
+	});
+}
+/**
+* 评论输入框（参考 web-monorepo `src/components/comment-input/index.tsx`）。
+* 仅负责输入/上传/@插入与发布回调，实际发布逻辑由外层 CommentList 处理。
+*/
+function CommentInput({ ref, value = "", onChange, onPublish, onInputBlur, placeholder = "", className = "", maxLength = 200, publishText = "", autoFocus, disabled, onRequireLogin, variant = "dark" }) {
+	const t = useTranslations("components.biz.business.comment");
+	const isLight = variant === "light";
+	const resolvedPublishText = publishText || t("commentInput.publishDefault");
+	const resolvedPlaceholder = useMemo(() => {
+		const text = placeholder || t("commentInput.placeholder");
+		return text.length > 15 ? `${text.slice(0, 15)}...` : text;
+	}, [placeholder, t]);
+	const [inputValue, setInputValue] = useState(value);
+	const [showToolbar, setShowToolbar] = useState(false);
+	const [enableKeyboardDetection, setEnableKeyboardDetection] = useState(false);
+	const containerRef = useRef(null);
+	const textareaRef = useRef(null);
+	const focusingRef = useRef(false);
+	const lastFocusTimeRef = useRef(0);
+	const lastDisallowedToastTimeRef = useRef(0);
+	const [imageVideoInfoList, setImageVideoInfoList] = useState([]);
+	const [visibleContact, setVisibleContact] = useState(false);
+	const [uploadProgress, setUploadProgress] = useState(null);
+	const [isPublishing, setIsPublishing] = useState(false);
+	const isInputDisabled = disabled || isPublishing;
+	const { isLogin } = useUserStore();
+	const { open } = useLoginModalStore();
+	const { containerStyle, onFocus: keyboardOnFocus, onBlur: keyboardOnBlur, inputRef } = useKeyboardHandler(enableKeyboardDetection);
+	/**
+	* 未登录时触发登录流程。
+	*/
+	const handleRequireLogin = useCallback(() => {
+		if (onRequireLogin) onRequireLogin();
+		else open();
+	}, [onRequireLogin, open]);
+	useEffect(() => {
+		if (textareaRef.current && value) textareaRef.current.innerHTML = value;
+	}, [value]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		window.dispatchEvent(new CustomEvent("funhub:visible-contact-change", { detail: { visible: visibleContact } }));
+	}, [visibleContact]);
+	useEffect(() => {
+		if (!autoFocus || !textareaRef.current) return;
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		textareaRef.current.focus();
+		setShowToolbar(true);
+	}, [
+		autoFocus,
+		handleRequireLogin,
+		isLogin
+	]);
+	useEffect(() => {
+		const handleDocumentClick = (event) => {
+			const target = event.target;
+			const isDeleteButton = target.closest("[data-delete-button]");
+			const isInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+			if (isDeleteButton || isInput) return;
+			if (!containerRef.current?.contains(target)) {
+				if (Date.now() - lastFocusTimeRef.current > 100) setShowToolbar(false);
+			}
+		};
+		document.addEventListener("click", handleDocumentClick);
+		return () => document.removeEventListener("click", handleDocumentClick);
+	}, []);
+	useImperativeHandle(ref, () => ({ focus: () => {
+		const element = textareaRef.current;
+		if (!element || focusingRef.current) return;
+		focusingRef.current = true;
+		try {
+			if (!isLogin) {
+				handleRequireLogin();
+				return;
+			}
+			if (document.activeElement === element && showToolbar) return;
+			element.focus();
+			lastFocusTimeRef.current = Date.now();
+			setShowToolbar(true);
+			if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
+			keyboardOnFocus();
+		} catch (error) {
+			console.warn("CommentInput focus error", error);
+			setShowToolbar(true);
+		} finally {
+			focusingRef.current = false;
+		}
+	} }), [
+		enableKeyboardDetection,
+		handleRequireLogin,
+		isLogin,
+		keyboardOnFocus,
+		showToolbar
+	]);
+	const resetLastTime = () => {
+		lastFocusTimeRef.current = Date.now();
+	};
+	const moveCursorToEnd = useCallback(() => {
+		if (!textareaRef.current) return;
+		const range = document.createRange();
+		const selection = window.getSelection();
+		range.selectNodeContents(textareaRef.current);
+		range.collapse(false);
+		selection?.removeAllRanges();
+		selection?.addRange(range);
+	}, []);
+	const setEditDivContent = useCallback((text) => {
+		if (textareaRef.current) textareaRef.current.innerHTML = text;
+	}, []);
+	/**
+	* 兜底拦截：如果输入框内被插入了媒体元素（如粘贴图片），立即移除并提示。
+	*/
+	const stripDisallowedMediaElements = useCallback((editable) => {
+		const mediaElements = editable.querySelectorAll(DISALLOWED_MEDIA_SELECTOR);
+		if (mediaElements.length === 0) return false;
+		mediaElements.forEach((node) => node.remove());
+		const now = Date.now();
+		if (now - lastDisallowedToastTimeRef.current > 1500) {
+			lastDisallowedToastTimeRef.current = now;
+			toast.info(t("commentInput.pasteFileNotSupported"));
+		}
+		return true;
+	}, [t]);
+	/**
+	* 粘贴时仅允许纯文本：过滤/转换剪贴板富文本内容，避免将样式 HTML 注入到输入框。
+	*/
+	const handlePaste = useCallback((event) => {
+		const editable = textareaRef.current;
+		if (!editable) return;
+		if (isInputDisabled) {
+			event.preventDefault();
+			return;
+		}
+		if (!isLogin) {
+			event.preventDefault();
+			handleRequireLogin();
+			editable.blur();
+			return;
+		}
+		const clipboardData = event.clipboardData;
+		if (!!clipboardData && Array.from(clipboardData.items || []).some((item) => item.kind === "file")) {
+			event.preventDefault();
+			event.stopPropagation();
+			toast.info(t("commentInput.pasteFileNotSupported"));
+			return;
+		}
+		const rawText = getPlainTextFromClipboard(event);
+		if (!rawText) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		const normalizedText = rawText.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+		const currentLength = stripHtmlTags(editable.innerHTML || "").length;
+		const remaining = maxLength ? Math.max(0, maxLength - currentLength) : Infinity;
+		if (remaining <= 0) return;
+		insertPlainTextAtSelection(editable, Number.isFinite(remaining) ? truncateTextIgnoringNewlines(normalizedText, remaining) : normalizedText);
+		stripDisallowedMediaElements(editable);
+		const nextHtml = editable.innerHTML || "";
+		setInputValue(nextHtml);
+		onChange?.(nextHtml);
+	}, [
+		handleRequireLogin,
+		isInputDisabled,
+		isLogin,
+		maxLength,
+		onChange,
+		stripDisallowedMediaElements,
+		t
+	]);
+	const handleInputChange = useCallback((event) => {
+		let html = event.currentTarget.innerHTML || "";
+		if (stripDisallowedMediaElements(event.currentTarget)) html = event.currentTarget.innerHTML || "";
+		const realValue = stripHtmlTags(html);
+		if (maxLength && realValue.length > maxLength) {
+			html = html.substring(0, maxLength);
+			setEditDivContent(html);
+			moveCursorToEnd();
+		}
+		setInputValue(html);
+		onChange?.(html);
+	}, [
+		maxLength,
+		moveCursorToEnd,
+		onChange,
+		setEditDivContent,
+		stripDisallowedMediaElements
+	]);
+	/**
+	* 禁止拖拽/放入文件到 contentEditable，避免出现直接插入图片的情况。
+	*/
+	const handleDrop = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const files = event.dataTransfer?.files;
+		if (files && files.length > 0) toast.info(t("commentInput.dragFileNotSupported"));
+	}, [t]);
+	const handleDragOver = useCallback((event) => {
+		event.preventDefault();
+	}, []);
+	const handleFocus = () => {
+		if (isInputDisabled) return;
+		if (!isLogin) {
+			handleRequireLogin();
+			textareaRef.current?.blur();
+			return;
+		}
+		lastFocusTimeRef.current = Date.now();
+		setShowToolbar(true);
+		if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
+		keyboardOnFocus();
+	};
+	/**
+	* 已聚焦但 toolbar 被关闭时，点击输入区域强制拉起 toolbar。
+	*/
+	const handleInputClick = () => {
+		if (isInputDisabled) {
+			if (isPublishing) toast.info(t("commentInput.publishing"));
+			return;
+		}
+		if (!isLogin) {
+			handleRequireLogin();
+			textareaRef.current?.blur();
+			return;
+		}
+		lastFocusTimeRef.current = Date.now();
+		if (!showToolbar) setShowToolbar(true);
+		if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
+		keyboardOnFocus();
+	};
+	const handleBlur = () => {
+		setTimeout(() => {
+			if (Date.now() - lastFocusTimeRef.current > 200 && document.activeElement !== textareaRef.current) {
+				setShowToolbar(false);
+				onInputBlur?.();
+			}
+		}, 150);
+		keyboardOnBlur();
+	};
+	const clearAllState = useCallback(() => {
+		setInputValue("");
+		setEditDivContent("");
+		setImageVideoInfoList([]);
+		setShowToolbar(false);
+	}, [setEditDivContent]);
+	const isInputEmpty = useMemo(() => stripHtmlTags(inputValue).trim().length === 0, [inputValue]);
+	const isPublishEnabled = useMemo(() => {
+		return !isInputEmpty || imageVideoInfoList.length > 0;
+	}, [imageVideoInfoList.length, isInputEmpty]);
+	const handleImageFileChange = useCallback(async () => {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		if (imageVideoInfoList.some((item) => item.is_video)) return;
+		const files = await createInputAndSelectFile("file", "image/*");
+		if (!files || files.length === 0) return;
+		const availableSlots = MAX_IMAGE_COUNT - imageVideoInfoList.length;
+		const sliceFiles = Array.from(files).slice(0, availableSlots);
+		if (sliceFiles.length === 0) return;
+		const successList = [];
+		let failed = 0;
+		const total = sliceFiles.length;
+		try {
+			for (let i = 0; i < sliceFiles.length; i++) {
+				const file = sliceFiles[i];
+				setUploadProgress({
+					currentFiles: successList.length,
+					totalFiles: total,
+					currentTasks: successList.length + failed,
+					totalTasks: total
+				});
+				try {
+					const { width, height } = await getImageResolutionFromFile(file);
+					const result = await uploadFile(file, 1, true);
+					successList.push({
+						cover_image: "",
+						cover_image_thumbnail: "",
+						cover_image_radio: 1,
+						cover_image_resolution: "",
+						image_url: result.objectKey,
+						image_thumbnail: result.objectKey,
+						image_radio: Number((width / height).toFixed(2)),
+						image_resolution: `${width}x${height}`,
+						is_video: false,
+						resolution: `${width}x${height}`,
+						video_duration: 0,
+						video_url: "",
+						video_size: 0,
+						video_codec_info: {
+							hls_info: [],
+							video_codec_deal: false
+						}
+					});
+				} catch (error) {
+					console.error("上传图片失败", error);
+					failed += 1;
+				}
+			}
+			if (successList.length === 0) toast.error(t("commentInput.imageUploadFailed"));
+			else {
+				if (failed > 0) toast.warning(t("commentInput.partialImageUploadFailed"));
+				setImageVideoInfoList((prev) => [...prev, ...successList]);
+			}
+		} finally {
+			setUploadProgress(null);
+		}
+	}, [
+		handleRequireLogin,
+		imageVideoInfoList,
+		isLogin,
+		t
+	]);
+	const handleVideoFileChange = useCallback(async () => {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		if (imageVideoInfoList.length > 0) {
+			toast.error(t("commentInput.cannotSelectVideoWhenImageSelected"));
+			return;
+		}
+		const files = await createInputAndSelectFile("file", "video/*");
+		if (!files || files.length === 0) return;
+		const file = files[0];
+		try {
+			setUploadProgress({
+				currentFiles: 0,
+				totalFiles: 1,
+				currentTasks: 0,
+				totalTasks: 2
+			});
+			const videoResult = await uploadFile(file, 2, false);
+			const [coverFile, width, height, duration] = await getCoverImage(file);
+			setUploadProgress({
+				currentFiles: 0,
+				totalFiles: 1,
+				currentTasks: 1,
+				totalTasks: 2
+			});
+			const coverUploadResult = await uploadFile(coverFile, 1, true);
+			setImageVideoInfoList([{
+				cover_image: coverUploadResult.objectKey,
+				cover_image_thumbnail: coverUploadResult.objectKey,
+				cover_image_radio: Number((width / height).toFixed(2)),
+				cover_image_resolution: `${width}x${height}`,
+				image_url: coverUploadResult.objectKey,
+				image_thumbnail: coverUploadResult.objectKey,
+				image_radio: Number((width / height).toFixed(2)),
+				image_resolution: `${width}x${height}`,
+				is_video: true,
+				resolution: `${width}x${height}`,
+				video_duration: duration,
+				video_url: videoResult.objectKey,
+				video_size: file.size,
+				video_codec_info: {
+					hls_info: [],
+					video_codec_deal: false
+				}
+			}]);
+		} catch (error) {
+			console.error("视频上传失败", error);
+			toast.error(t("commentInput.videoUploadFailed"));
+		} finally {
+			setUploadProgress(null);
+		}
+	}, [
+		handleRequireLogin,
+		imageVideoInfoList.length,
+		isLogin,
+		t
+	]);
+	const handlePublish = useCallback(async (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!isPublishEnabled || disabled || isPublishing) return;
+		if (!isLogin) {
+			if (onRequireLogin) onRequireLogin();
+			else open();
+			return;
+		}
+		try {
+			setIsPublishing(true);
+			const result = await onPublish?.({
+				text: inputValue === "<br>" ? "" : inputValue,
+				imageVideoInfoList
+			});
+			if (result && result.success === false) {
+				if (!result.toastHandled) toast.error(result.message || "发布评论失败");
+				return;
+			}
+			toast.success(t("commentInput.publishSuccess"));
+			clearAllState();
+			onChange?.("");
+		} catch (error) {
+			console.error("发布评论失败:", error);
+			toast.error(t("commentInput.publishCommentFailed"));
+		} finally {
+			setIsPublishing(false);
+		}
+	}, [
+		clearAllState,
+		disabled,
+		imageVideoInfoList,
+		inputValue,
+		isLogin,
+		isPublishEnabled,
+		isPublishing,
+		onChange,
+		onPublish,
+		onRequireLogin,
+		open,
+		t
+	]);
+	const canSelectImage = useMemo(() => {
+		return !imageVideoInfoList.some((item) => item.is_video) && imageVideoInfoList.length < MAX_IMAGE_COUNT;
+	}, [imageVideoInfoList]);
+	const canSelectVideo = useMemo(() => imageVideoInfoList.length === 0, [imageVideoInfoList.length]);
+	const handleSelectContact = useCallback((contact) => {
+		setVisibleContact(false);
+		const nextValue = `${stripHtmlTags(inputValue).trim().length === 0 ? "" : inputValue}${getAtUserElement(contact)} `;
+		setInputValue(nextValue);
+		setEditDivContent(nextValue);
+		setTimeout(() => {
+			moveCursorToEnd();
+		}, 16);
+	}, [
+		inputValue,
+		moveCursorToEnd,
+		setEditDivContent
+	]);
+	/**
+	* 联系人弹窗开关回调。
+	*/
+	function handleContactDialogChange(next) {
+		setVisibleContact(next);
+	}
+	/**
+	* 关闭联系人弹窗。
+	*/
+	function handleCloseContact() {
+		setVisibleContact(false);
+	}
+	const publishButton = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium", isPublishEnabled && !isPublishing ? "bg-theme5 text-white" : "bg-bg2 text-text3"),
+		onClick: handlePublish,
+		disabled: !isPublishEnabled || isInputDisabled,
+		children: isPublishing ? t("commentInput.publishing") : resolvedPublishText
+	});
+	const darkPublishButton = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("ml-[14px] shrink-0 whitespace-nowrap px-[14px] py-[10px] text-[16px] leading-[16px]", isPublishEnabled && !isPublishing ? "text-theme5" : "text-text3"),
+		onClick: handlePublish,
+		disabled: !isPublishEnabled || isInputDisabled,
+		children: isPublishing ? t("commentInput.publishing") : resolvedPublishText
+	});
+	const publishingHint = isPublishing ? /* @__PURE__ */ jsx("span", {
+		className: cn("ml-[14px] text-[16px] leading-[16px] text-text3"),
+		children: t("commentInput.publishing")
+	}) : null;
+	const finalStyle = isLight ? containerStyle : {
+		...containerStyle,
+		boxShadow: showToolbar ? "0px -4px 10px 0px rgba(0,0,0,0.1)" : "none"
+	};
+	const containerClasses = isLight ? "comment-input-container g-safe-area rounded-2xl border border-line1/20 bg-white text-text1 shadow-sm" : "comment-input-container bg-bg1 g-safe-area text-text1";
+	const toolbarSection = showToolbar ? isLight ? /* @__PURE__ */ jsxs("div", {
+		className: "flex border-t border-line1/20",
+		children: [
+			/* @__PURE__ */ jsx(CommentToolbarButton, {
+				disabled: !canSelectImage,
+				onClick: () => {
+					if (isInputDisabled) return;
+					if (!canSelectImage) return;
+					setTimeout(() => {
+						handleImageFileChange();
+					}, 400);
+				},
+				variant: "light",
+				children: t("commentInput.image")
+			}),
+			/* @__PURE__ */ jsx(CommentToolbarButton, {
+				disabled: !canSelectVideo,
+				onClick: () => {
+					if (isInputDisabled) return;
+					if (!canSelectVideo) return;
+					setTimeout(() => {
+						handleVideoFileChange();
+					}, 400);
+				},
+				variant: "light",
+				children: t("commentInput.video")
+			}),
+			/* @__PURE__ */ jsx(CommentToolbarButton, {
+				disabled: isInputDisabled,
+				onClick: () => {
+					if (isInputDisabled) return;
+					setVisibleContact(true);
+				},
+				variant: "light",
+				children: "@"
+			})
+		]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "flex h-[50px] items-center justify-around border-t border-line1 px-[8px]",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("flex h-full items-center justify-center px-[12px]", (!canSelectImage || isInputDisabled) && "opacity-50"),
+				onClick: () => {
+					if (isInputDisabled) return;
+					if (!canSelectImage) return;
+					setTimeout(() => {
+						handleImageFileChange();
+					}, 400);
+				},
+				children: /* @__PURE__ */ jsx(SvgPublishPic, { className: "h-[22px] w-[22px]" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("flex h-full items-center justify-center px-[12px]", (!canSelectVideo || isInputDisabled) && "opacity-50"),
+				onClick: () => {
+					if (isInputDisabled) return;
+					if (!canSelectVideo) return;
+					setTimeout(() => {
+						handleVideoFileChange();
+					}, 400);
+				},
+				children: /* @__PURE__ */ jsx(SvgPublishVideo, { className: "h-[22px] w-[22px]" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("flex h-full items-center justify-center px-[12px]", isInputDisabled && "opacity-50"),
+				onClick: () => {
+					if (isInputDisabled) return;
+					setVisibleContact(true);
+				},
+				children: /* @__PURE__ */ jsx(SvgCommetAt, { className: "h-[22px] w-[22px]" })
+			})
+		]
+	}) : null;
+	const innerContainerClass = isLight ? "" : "mx-auto w-full max-w-[840px]";
+	return /* @__PURE__ */ jsxs("div", {
+		style: finalStyle,
+		className: cn(containerClasses, className),
+		onMouseDown: resetLastTime,
+		onTouchStart: resetLastTime,
+		onClick: resetLastTime,
+		ref: containerRef,
+		children: [
+			uploadProgress && /* @__PURE__ */ jsx(UploadProgress, {
+				currentFiles: uploadProgress.currentFiles,
+				totalFiles: uploadProgress.totalFiles,
+				currentTasks: uploadProgress.currentTasks,
+				totalTasks: uploadProgress.totalTasks
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: innerContainerClass,
+				children: [
+					showToolbar && /* @__PURE__ */ jsx(CommentUploadGroup, {
+						imageVideoInfoList,
+						onDelete: (index) => setImageVideoInfoList((prev) => prev.filter((_, i) => i !== index)),
+						variant
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("px-4 py-3", isLight ? "flex items-center gap-3" : "flex items-center justify-between"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: cn("relative min-w-0 flex-1 rounded-[20px] bg-bg2", isLight ? "rounded-2xl" : ""),
+							children: [
+								!isLogin && /* @__PURE__ */ jsx("div", {
+									className: "absolute inset-0 z-[1] cursor-text",
+									onClick: handleRequireLogin
+								}),
+								isInputEmpty && /* @__PURE__ */ jsx("span", {
+									className: cn("pointer-events-none absolute left-3 top-[10px] text-sm text-text3"),
+									children: resolvedPlaceholder
+								}),
+								/* @__PURE__ */ jsx("div", {
+									ref: (node) => {
+										textareaRef.current = node;
+										inputRef(node);
+									},
+									contentEditable: !isInputDisabled,
+									suppressContentEditableWarning: true,
+									className: cn("max-h-24 min-h-[40px] w-full cursor-text overflow-y-auto px-3 py-[10px] text-sm leading-5 outline-none break-all whitespace-pre-wrap text-text1", isInputDisabled && "cursor-not-allowed opacity-60"),
+									"data-placeholder": resolvedPlaceholder,
+									onInput: handleInputChange,
+									onFocus: handleFocus,
+									onClick: handleInputClick,
+									onBlur: handleBlur,
+									onPaste: handlePaste,
+									onDrop: handleDrop,
+									onDragOver: handleDragOver
+								})
+							]
+						}), showToolbar ? isLight ? publishButton : darkPublishButton : publishingHint]
+					}),
+					toolbarSection
+				]
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: visibleContact,
+				onOpenChange: handleContactDialogChange,
+				children: /* @__PURE__ */ jsx(DialogContent, {
+					showCloseButton: false,
+					initialFocus: false,
+					className: "fixed left-0 right-0 bottom-0 top-[84px] z-[1000] w-full max-w-none translate-x-0 translate-y-0 rounded-none bg-bg2 p-0",
+					children: /* @__PURE__ */ jsx(ContactList, {
+						onSelect: handleSelectContact,
+						onClose: handleCloseContact
+					})
+				})
+			})
+		]
+	});
+}
+CommentInput.displayName = "CommentInput";
+
+//#endregion
+export { CommentInput as default };