fix: 优化markdown解析器
This commit is contained in:
parent
8f910c033e
commit
0a50700e4b
|
|
@ -46,12 +46,13 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
position,
|
position,
|
||||||
onClose,
|
onClose,
|
||||||
onDownload,
|
onDownload,
|
||||||
onViewLarge,
|
|
||||||
className = ''
|
className = ''
|
||||||
}) => {
|
}) => {
|
||||||
const [imageLoaded, setImageLoaded] = useState(false);
|
const [imageLoaded, setImageLoaded] = useState(false);
|
||||||
const [imageError, setImageError] = useState(false);
|
const [imageError, setImageError] = useState(false);
|
||||||
const [isDownloading, setIsDownloading] = useState(false);
|
const [isDownloading, setIsDownloading] = useState(false);
|
||||||
|
const [expandedEnvironmentTags, setExpandedEnvironmentTags] = useState(false);
|
||||||
|
const [expandedCategories, setExpandedCategories] = useState(false);
|
||||||
|
|
||||||
// 解析图片内容
|
// 解析图片内容
|
||||||
const imageData = source.content?.text || source.content;
|
const imageData = source.content?.text || source.content;
|
||||||
|
|
@ -112,7 +113,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
<img
|
<img
|
||||||
src={imageUri}
|
src={imageUri}
|
||||||
alt={description || title}
|
alt={description || title}
|
||||||
className={`w-full h-48 object-cover transition-all duration-300 ${
|
className={`w-full max-h-64 object-contain transition-all duration-300 ${
|
||||||
imageLoaded ? 'opacity-100' : 'opacity-0'
|
imageLoaded ? 'opacity-100' : 'opacity-0'
|
||||||
} group-hover:scale-105`}
|
} group-hover:scale-105`}
|
||||||
onLoad={handleImageLoad}
|
onLoad={handleImageLoad}
|
||||||
|
|
@ -161,7 +162,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-48 flex items-center justify-center text-gray-400 bg-gray-100">
|
<div className="min-h-32 max-h-64 flex items-center justify-center text-gray-400 bg-gray-100">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<AlertCircle className="w-8 h-8 mx-auto mb-2" />
|
<AlertCircle className="w-8 h-8 mx-auto mb-2" />
|
||||||
<p className="text-sm">图片无法加载</p>
|
<p className="text-sm">图片无法加载</p>
|
||||||
|
|
@ -185,7 +186,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
<div className="flex items-start space-x-2">
|
<div className="flex items-start space-x-2">
|
||||||
<MapPin className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
|
<MapPin className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
|
||||||
<div className="flex flex-wrap gap-1 min-w-0">
|
<div className="flex flex-wrap gap-1 min-w-0">
|
||||||
{environmentTags.slice(0, 2).map((tag: string, index: number) => (
|
{(expandedEnvironmentTags ? environmentTags : environmentTags.slice(0, 2)).map((tag: string, index: number) => (
|
||||||
<span
|
<span
|
||||||
key={index}
|
key={index}
|
||||||
className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-md font-medium"
|
className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-md font-medium"
|
||||||
|
|
@ -194,7 +195,12 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
{environmentTags.length > 2 && (
|
{environmentTags.length > 2 && (
|
||||||
<span className="text-xs text-gray-500 py-1">+{environmentTags.length - 2}</span>
|
<button
|
||||||
|
onClick={() => setExpandedEnvironmentTags(!expandedEnvironmentTags)}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 py-1 cursor-pointer transition-colors"
|
||||||
|
>
|
||||||
|
{expandedEnvironmentTags ? '收起' : `+${environmentTags.length - 2}`}
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -205,7 +211,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
<div className="flex items-start space-x-2">
|
<div className="flex items-start space-x-2">
|
||||||
<Shirt className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
|
<Shirt className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
|
||||||
<div className="flex flex-wrap gap-1 min-w-0">
|
<div className="flex flex-wrap gap-1 min-w-0">
|
||||||
{categories.slice(0, 2).map((category: string, index: number) => (
|
{(expandedCategories ? categories : categories.slice(0, 2)).map((category: string, index: number) => (
|
||||||
<span
|
<span
|
||||||
key={index}
|
key={index}
|
||||||
className="px-2 py-1 bg-pink-50 text-pink-700 text-xs rounded-md font-medium"
|
className="px-2 py-1 bg-pink-50 text-pink-700 text-xs rounded-md font-medium"
|
||||||
|
|
@ -214,7 +220,12 @@ export const ImageCard: React.FC<ImageCardProps> = ({
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
{categories.length > 2 && (
|
{categories.length > 2 && (
|
||||||
<span className="text-xs text-gray-500 py-1">+{categories.length - 2}</span>
|
<button
|
||||||
|
onClick={() => setExpandedCategories(!expandedCategories)}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 py-1 cursor-pointer transition-colors"
|
||||||
|
>
|
||||||
|
{expandedCategories ? '收起' : `+${categories.length - 2}`}
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue