diff --git a/src/pages/InterestGroup/CommentForm.jsx b/src/pages/InterestGroup/CommentForm.jsx
new file mode 100644
index 0000000..1d85a0c
--- /dev/null
+++ b/src/pages/InterestGroup/CommentForm.jsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import './CommentForm.css';
+
+const CommentForm = ({ onSubmit, onCancel }) => {
+  const [content, setContent] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (content.trim()) {
+      onSubmit(content);
+      setContent('');
+    }
+  };
+
+  return (
+    <div className="comment-form-container">
+      <form className="comment-form" onSubmit={handleSubmit}>
+        <div className={`form-group ${isFocused ? 'focused' : ''}`}>
+          <textarea
+            className="comment-input"
+            placeholder="分享你的想法..."
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            required
+          />
+          <div className="floating-label">添加评论</div>
+        </div>
+        
+        <div className="form-actions">
+          <button 
+            type="button" 
+            className="cancel-button"
+            onClick={onCancel}
+          >
+            取消
+          </button>
+          <button 
+            type="submit" 
+            className="submit-button"
+            disabled={!content.trim()}
+          >
+            发布评论
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CommentForm;
\ No newline at end of file