544 lines
16 KiB
JavaScript
544 lines
16 KiB
JavaScript
/**
|
||
* 发帖模态框组件
|
||
* 用于创建新帖子
|
||
*/
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalFooter,
|
||
ModalCloseButton,
|
||
Button,
|
||
Input,
|
||
Textarea,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Box,
|
||
Image,
|
||
IconButton,
|
||
Tag,
|
||
TagLabel,
|
||
TagCloseButton,
|
||
useToast,
|
||
FormControl,
|
||
FormLabel,
|
||
FormErrorMessage,
|
||
} from '@chakra-ui/react';
|
||
import { ImagePlus, X, Hash } from 'lucide-react';
|
||
import { forumColors } from '@theme/forumTheme';
|
||
import { createPost } from '@services/elasticsearchService';
|
||
import { useAuth } from '@contexts/AuthContext';
|
||
|
||
const CreatePostModal = ({ isOpen, onClose, onPostCreated }) => {
|
||
const toast = useToast();
|
||
const { user } = useAuth();
|
||
|
||
const [formData, setFormData] = useState({
|
||
title: '',
|
||
content: '',
|
||
images: [],
|
||
tags: [],
|
||
category: '',
|
||
});
|
||
|
||
const [currentTag, setCurrentTag] = useState('');
|
||
const [errors, setErrors] = useState({});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
// 表单验证
|
||
const validateForm = () => {
|
||
const newErrors = {};
|
||
|
||
if (!formData.title.trim()) {
|
||
newErrors.title = '请输入标题';
|
||
} else if (formData.title.length > 100) {
|
||
newErrors.title = '标题不能超过100个字符';
|
||
}
|
||
|
||
if (!formData.content.trim()) {
|
||
newErrors.content = '请输入内容';
|
||
} else if (formData.content.length > 5000) {
|
||
newErrors.content = '内容不能超过5000个字符';
|
||
}
|
||
|
||
setErrors(newErrors);
|
||
return Object.keys(newErrors).length === 0;
|
||
};
|
||
|
||
// 压缩图片
|
||
const compressImage = (file) => {
|
||
return new Promise((resolve, reject) => {
|
||
// 检查文件类型
|
||
if (!file.type.startsWith('image/')) {
|
||
reject(new Error('请选择图片文件'));
|
||
return;
|
||
}
|
||
|
||
// 检查文件大小（10MB 限制，给压缩留空间）
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
reject(new Error('图片大小不能超过 10MB'));
|
||
return;
|
||
}
|
||
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = function(e) {
|
||
const img = document.createElement('img');
|
||
|
||
img.onload = function() {
|
||
try {
|
||
// 创建 canvas 进行压缩
|
||
const canvas = document.createElement('canvas');
|
||
let width = img.width;
|
||
let height = img.height;
|
||
|
||
// 如果图片尺寸过大，等比缩放到最大 1920px
|
||
const maxDimension = 1920;
|
||
if (width > maxDimension || height > maxDimension) {
|
||
if (width > height) {
|
||
height = Math.round((height * maxDimension) / width);
|
||
width = maxDimension;
|
||
} else {
|
||
width = Math.round((width * maxDimension) / height);
|
||
height = maxDimension;
|
||
}
|
||
}
|
||
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
|
||
// 转换为 Data URL（JPEG 格式，质量 0.8）
|
||
try {
|
||
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8);
|
||
|
||
// 计算压缩率
|
||
const originalSize = file.size;
|
||
const compressedSize = Math.round((compressedDataUrl.length * 3) / 4); // Base64 解码后的大小
|
||
|
||
console.log(
|
||
`图片压缩: ${(originalSize / 1024).toFixed(2)}KB -> ${(compressedSize / 1024).toFixed(2)}KB`
|
||
);
|
||
|
||
resolve(compressedDataUrl);
|
||
} catch (error) {
|
||
reject(new Error('图片压缩失败'));
|
||
}
|
||
} catch (error) {
|
||
reject(new Error(`图片处理失败: ${error.message}`));
|
||
}
|
||
};
|
||
|
||
img.onerror = function() {
|
||
reject(new Error('图片加载失败'));
|
||
};
|
||
|
||
img.src = e.target.result;
|
||
};
|
||
|
||
reader.onerror = function() {
|
||
reject(new Error('文件读取失败'));
|
||
};
|
||
|
||
reader.readAsDataURL(file);
|
||
});
|
||
};
|
||
|
||
// 处理图片上传
|
||
const handleImageUpload = async (e) => {
|
||
const files = Array.from(e.target.files);
|
||
|
||
// 清空 input 以支持重复上传同一文件
|
||
e.target.value = '';
|
||
|
||
if (files.length === 0) return;
|
||
|
||
// 检查总数量限制
|
||
if (formData.images.length + files.length > 9) {
|
||
toast({
|
||
title: '图片数量超限',
|
||
description: '最多只能上传 9 张图片',
|
||
status: 'warning',
|
||
duration: 3000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 逐个处理图片，而不是使用 Promise.all
|
||
const compressedImages = [];
|
||
let hasError = false;
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
try {
|
||
const compressed = await compressImage(files[i]);
|
||
compressedImages.push(compressed);
|
||
} catch (error) {
|
||
console.error('图片压缩失败:', error);
|
||
hasError = true;
|
||
toast({
|
||
title: '图片处理失败',
|
||
description: error.message || `第 ${i + 1} 张图片处理失败`,
|
||
status: 'error',
|
||
duration: 3000,
|
||
});
|
||
break; // 遇到错误就停止
|
||
}
|
||
}
|
||
|
||
// 如果有成功压缩的图片，添加到表单
|
||
if (compressedImages.length > 0) {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
images: [...prev.images, ...compressedImages],
|
||
}));
|
||
|
||
if (!hasError) {
|
||
toast({
|
||
title: '上传成功',
|
||
description: `成功添加 ${compressedImages.length} 张图片`,
|
||
status: 'success',
|
||
duration: 2000,
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
// 移除图片
|
||
const removeImage = (index) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
images: prev.images.filter((_, i) => i !== index),
|
||
}));
|
||
};
|
||
|
||
// 添加标签
|
||
const addTag = () => {
|
||
if (currentTag.trim() && !formData.tags.includes(currentTag.trim())) {
|
||
if (formData.tags.length >= 5) {
|
||
toast({
|
||
title: '标签数量已达上限',
|
||
description: '最多只能添加5个标签',
|
||
status: 'warning',
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
tags: [...prev.tags, currentTag.trim()],
|
||
}));
|
||
setCurrentTag('');
|
||
}
|
||
};
|
||
|
||
// 移除标签
|
||
const removeTag = (tag) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
tags: prev.tags.filter((t) => t !== tag),
|
||
}));
|
||
};
|
||
|
||
// 提交帖子
|
||
const handleSubmit = async () => {
|
||
if (!validateForm()) return;
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
const postData = {
|
||
...formData,
|
||
author_id: user?.id || 'anonymous',
|
||
author_name: user?.name || '匿名用户',
|
||
author_avatar: user?.avatar || '',
|
||
};
|
||
|
||
const newPost = await createPost(postData);
|
||
|
||
toast({
|
||
title: '发布成功',
|
||
description: '帖子已成功发布到论坛',
|
||
status: 'success',
|
||
duration: 3000,
|
||
});
|
||
|
||
// 重置表单
|
||
setFormData({
|
||
title: '',
|
||
content: '',
|
||
images: [],
|
||
tags: [],
|
||
category: '',
|
||
});
|
||
|
||
onClose();
|
||
|
||
// 通知父组件刷新
|
||
if (onPostCreated) {
|
||
onPostCreated(newPost);
|
||
}
|
||
} catch (error) {
|
||
console.error('发布帖子失败:', error);
|
||
toast({
|
||
title: '发布失败',
|
||
description: error.message || '发布帖子时出错，请稍后重试',
|
||
status: 'error',
|
||
duration: 3000,
|
||
});
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Modal isOpen={isOpen} onClose={onClose} size="2xl">
|
||
<ModalOverlay bg="blackAlpha.800" />
|
||
<ModalContent
|
||
bg={forumColors.background.elevated}
|
||
borderColor={forumColors.border.gold}
|
||
borderWidth="1px"
|
||
maxH="90vh"
|
||
>
|
||
<ModalHeader
|
||
color={forumColors.text.primary}
|
||
borderBottomWidth="1px"
|
||
borderBottomColor={forumColors.border.default}
|
||
>
|
||
<Text
|
||
bgGradient={forumColors.text.goldGradient}
|
||
bgClip="text"
|
||
fontWeight="bold"
|
||
fontSize="xl"
|
||
>
|
||
发布新帖
|
||
</Text>
|
||
</ModalHeader>
|
||
<ModalCloseButton color={forumColors.text.secondary} />
|
||
|
||
<ModalBody py="6" overflowY="auto">
|
||
<VStack spacing="5" align="stretch">
|
||
{/* 标题输入 */}
|
||
<FormControl isInvalid={errors.title}>
|
||
<FormLabel color={forumColors.text.secondary} fontSize="sm">
|
||
标题
|
||
</FormLabel>
|
||
<Input
|
||
placeholder="给你的帖子起个吸引人的标题..."
|
||
value={formData.title}
|
||
onChange={(e) =>
|
||
setFormData((prev) => ({ ...prev, title: e.target.value }))
|
||
}
|
||
bg={forumColors.background.secondary}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
color={forumColors.text.primary}
|
||
_placeholder={{ color: forumColors.text.tertiary }}
|
||
_hover={{ borderColor: forumColors.border.light }}
|
||
_focus={{
|
||
borderColor: forumColors.border.gold,
|
||
boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
|
||
}}
|
||
/>
|
||
<FormErrorMessage>{errors.title}</FormErrorMessage>
|
||
</FormControl>
|
||
|
||
{/* 内容输入 */}
|
||
<FormControl isInvalid={errors.content}>
|
||
<FormLabel color={forumColors.text.secondary} fontSize="sm">
|
||
内容
|
||
</FormLabel>
|
||
<Textarea
|
||
placeholder="分享你的投资见解、市场观点或交易心得..."
|
||
value={formData.content}
|
||
onChange={(e) =>
|
||
setFormData((prev) => ({ ...prev, content: e.target.value }))
|
||
}
|
||
minH="200px"
|
||
bg={forumColors.background.secondary}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
color={forumColors.text.primary}
|
||
_placeholder={{ color: forumColors.text.tertiary }}
|
||
_hover={{ borderColor: forumColors.border.light }}
|
||
_focus={{
|
||
borderColor: forumColors.border.gold,
|
||
boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
|
||
}}
|
||
resize="vertical"
|
||
/>
|
||
<FormErrorMessage>{errors.content}</FormErrorMessage>
|
||
<Text
|
||
fontSize="xs"
|
||
color={forumColors.text.muted}
|
||
mt="2"
|
||
textAlign="right"
|
||
>
|
||
{formData.content.length} / 5000
|
||
</Text>
|
||
</FormControl>
|
||
|
||
{/* 图片上传 */}
|
||
<Box>
|
||
<FormLabel color={forumColors.text.secondary} fontSize="sm">
|
||
图片（最多9张）
|
||
</FormLabel>
|
||
|
||
<HStack spacing="3" flexWrap="wrap">
|
||
{formData.images.map((img, index) => (
|
||
<Box key={index} position="relative" w="100px" h="100px">
|
||
<Image
|
||
src={img}
|
||
alt={`预览 ${index + 1}`}
|
||
w="100%"
|
||
h="100%"
|
||
objectFit="cover"
|
||
borderRadius="md"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
/>
|
||
<IconButton
|
||
icon={<X size={14} />}
|
||
size="xs"
|
||
position="absolute"
|
||
top="-2"
|
||
right="-2"
|
||
borderRadius="full"
|
||
bg={forumColors.background.main}
|
||
color={forumColors.text.primary}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.gold}
|
||
onClick={() => removeImage(index)}
|
||
_hover={{ bg: forumColors.background.hover }}
|
||
/>
|
||
</Box>
|
||
))}
|
||
|
||
{formData.images.length < 9 && (
|
||
<Box
|
||
as="label"
|
||
w="100px"
|
||
h="100px"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
bg={forumColors.background.secondary}
|
||
border="2px dashed"
|
||
borderColor={forumColors.border.default}
|
||
borderRadius="md"
|
||
cursor="pointer"
|
||
_hover={{ borderColor: forumColors.border.gold }}
|
||
>
|
||
<Input
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
display="none"
|
||
onChange={handleImageUpload}
|
||
/>
|
||
<ImagePlus size={24} color={forumColors.text.tertiary} />
|
||
</Box>
|
||
)}
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 标签输入 */}
|
||
<Box>
|
||
<FormLabel color={forumColors.text.secondary} fontSize="sm">
|
||
标签（最多5个）
|
||
</FormLabel>
|
||
|
||
<HStack mb="3">
|
||
<Input
|
||
placeholder="输入标签后按回车"
|
||
value={currentTag}
|
||
onChange={(e) => setCurrentTag(e.target.value)}
|
||
onKeyPress={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
addTag();
|
||
}
|
||
}}
|
||
bg={forumColors.background.secondary}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
color={forumColors.text.primary}
|
||
_placeholder={{ color: forumColors.text.tertiary }}
|
||
_focus={{
|
||
borderColor: forumColors.border.gold,
|
||
boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
|
||
}}
|
||
/>
|
||
<IconButton
|
||
icon={<Hash size={18} />}
|
||
onClick={addTag}
|
||
bg={forumColors.gradients.goldPrimary}
|
||
color={forumColors.background.main}
|
||
_hover={{ opacity: 0.9 }}
|
||
/>
|
||
</HStack>
|
||
|
||
<HStack spacing="2" flexWrap="wrap">
|
||
{formData.tags.map((tag) => (
|
||
<Tag
|
||
key={tag}
|
||
size="md"
|
||
bg={forumColors.gradients.goldSubtle}
|
||
color={forumColors.primary[500]}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.gold}
|
||
borderRadius="full"
|
||
>
|
||
<TagLabel>#{tag}</TagLabel>
|
||
<TagCloseButton onClick={() => removeTag(tag)} />
|
||
</Tag>
|
||
))}
|
||
</HStack>
|
||
</Box>
|
||
</VStack>
|
||
</ModalBody>
|
||
|
||
<ModalFooter
|
||
borderTopWidth="1px"
|
||
borderTopColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="3">
|
||
<Button
|
||
variant="ghost"
|
||
onClick={onClose}
|
||
color={forumColors.text.secondary}
|
||
_hover={{ bg: forumColors.background.hover }}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
bg={forumColors.gradients.goldPrimary}
|
||
color={forumColors.background.main}
|
||
fontWeight="bold"
|
||
onClick={handleSubmit}
|
||
isLoading={isSubmitting}
|
||
loadingText="发布中..."
|
||
_hover={{
|
||
transform: 'translateY(-2px)',
|
||
boxShadow: forumColors.shadows.goldHover,
|
||
}}
|
||
_active={{ transform: 'translateY(0)' }}
|
||
>
|
||
发布帖子
|
||
</Button>
|
||
</HStack>
|
||
</ModalFooter>
|
||
</ModalContent>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default CreatePostModal;
|