35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
|
|
// 自定义Toast内容组件
|
|
const ExpandableToastContent = ({ fullText }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
const toggleExpand = () => setIsExpanded(!isExpanded);
|
|
|
|
return (
|
|
<div className="w-full max-w-none p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
{/* 可以继续添加更多的Tailwind CSS类来定制外观 */}
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
{isExpanded ? fullText : `${fullText.substring(0, 100)}...`}
|
|
</div>
|
|
<button
|
|
onClick={toggleExpand}
|
|
className="mt-2 text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
|
>
|
|
{isExpanded ? "Show Less" : "Show More"}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 使用自定义Toast内容的函数
|
|
export const showExpandableToast = (message: string) => {
|
|
toast(<ExpandableToastContent fullText={message} />, {
|
|
position: "top-center",
|
|
autoClose: 3000,
|
|
pauseOnHover: true,
|
|
className: "toastDetail",
|
|
});
|
|
};
|