feat: 添加评论功能

src/components/EventCommentSection/CommentInput.js

@@ -0,0 +1,77 @@
+// src/components/EventCommentSection/CommentInput.js
+/**
+ * 评论输入框组件
+ * 功能：输入评论内容、字数限制、发布按钮
+ */
+
+import React from 'react';
+import {
+  Box,
+  Textarea,
+  Button,
+  HStack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+const CommentInput = ({
+  value,
+  onChange,
+  onSubmit,
+  isSubmitting,
+  maxLength = 500,
+  placeholder = '说点什么...',
+}) => {
+  const bgColor = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const textColor = useColorModeValue('gray.600', 'gray.400');
+  const countColor = useColorModeValue('gray.500', 'gray.500');
+
+  const handleKeyDown = (e) => {
+    // Ctrl/Cmd + Enter 快捷键提交
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      onSubmit();
+    }
+  };
+
+  return (
+    <Box>
+      <Textarea
+        value={value}
+        onChange={onChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        bg={bgColor}
+        borderColor={borderColor}
+        color={textColor}
+        rows={3}
+        maxLength={maxLength}
+        resize="vertical"
+        _hover={{
+          borderColor: 'blue.300',
+        }}
+        _focus={{
+          borderColor: 'blue.500',
+          boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
+        }}
+      />
+      <HStack justify="space-between" mt={2}>
+        <Text fontSize="sm" color={countColor}>
+          {value.length}/{maxLength}
+          {value.length === 0 && ' · Ctrl+Enter 快速发布'}
+        </Text>
+        <Button
+          colorScheme="blue"
+          size="sm"
+          onClick={onSubmit}
+          isLoading={isSubmitting}
+          isDisabled={!value.trim() || isSubmitting}
+        >
+          发布
+        </Button>
+      </HStack>
+    </Box>
+  );
+};
+
+export default CommentInput;