src/pages/FriendMoments/CreateMoment.jsx

// // import React, { useState } from 'react';
// // import axios from 'axios';
// // import { useNavigate } from 'react-router-dom';
// // import './CreateMoment.css';
// // import Header from '../../components/Header';

// // 
// // const USER_ID = 456;

// // const CreateMoment = () => {
// //   const [title, setTitle] = useState('');
// //   const [content, setContent] = useState('');
// //   const [previewUrls, setPreviewUrls] = useState([]);
// //   const [images, setImages] = useState([]);
// //   const navigate = useNavigate();

// //   const handleImageChange = async (e) => {
// //     const files = Array.from(e.target.files);
// //     if (!files.length) return;

// //     setPreviewUrls(files.map(f => URL.createObjectURL(f)));

// //     try {
// //       const uploaded = await Promise.all(
// //         files.map(file => uploadImageToServer(file))
// //       );
// //       setImages(uploaded);
// //     } catch (err) {
// //       console.error('图片上传失败：', err);
// //       alert('有图片上传失败，请重试');
// //     }
// //   };

// //   const uploadImageToServer = async (file) => {
// //     const formData = new FormData();
// //     formData.append('file', file);
// //     const res = await axios.post(`/upload`, formData, {
// //       headers: {'Content-Type': 'multipart/form-data'}
// //     });
// //     return res.data.url;
// //   };

// //   const handleSubmit = async () => {
// //     if (!content.trim()) {
// //       alert('内容不能为空');
// //       return;
// //     }
// //     try {
// //       await axios.post(
// //         `/echo/users/${USER_ID}/CreateMoment`,
// //         {
// //           title: title.trim() || undefined,
// //           friend_content: content.trim(),
// //           images
// //         }
// //       );
// //       navigate('/friend-moments');
// //     } catch (err) {
// //       console.error('发布失败：', err);
// //       alert('发布失败，请稍后重试');
// //     }
// //   };

// //   return (
// //     <div className="create-feed-page">
// //       <Header/>
// //       <div className="cf-header">
// //         <button onClick={() => navigate(-1)} style={{padding : '5px 10px', backgroundColor: '#BA929A', color: 'white'}}>返回</button>
// //         <h3>发布新动态</h3>
// //       </div>

// //       <div className="cf-form">
// //         <input
// //           type="text"
// //           placeholder="标题"
// //           value={title}
// //           onChange={e => setTitle(e.target.value)}
// //         />
// //         <textarea
// //           placeholder="写下你的内容..."
// //           value={content}
// //           onChange={e => setContent(e.target.value)}
// //         />
// //         <input
// //           type="file"
// //           accept="image/*"
// //           multiple
// //           onChange={handleImageChange}
// //         />
// //         <div className="cf-preview">
// //           {previewUrls.map((url, i) => (
// //             <img key={i} src={url} alt={`预览 ${i}`} />
// //           ))}
// //         </div>
// //         <button className="cf-submit-btn" onClick={handleSubmit}>
// //           发布
// //         </button>
// //       </div>
// //     </div>
// //   );
// // };

// // export default CreateMoment;
// import React, { useState } from 'react';
// import axios from 'axios';
// import { useNavigate } from 'react-router-dom';
// import './CreateMoment.css';
// import Header from '../../components/Header';

// 
// const USER_ID = 456;

// const CreateMoment = ({ onClose, fetchFeeds }) => {
//     const [title, setTitle] = useState('');
//     const [content, setContent] = useState('');
//     const [previewUrls, setPreviewUrls] = useState([]);
//     const [images, setImages] = useState([]);
//     const navigate = useNavigate();

//     const handleImageChange = async (e) => {
//         const files = Array.from(e.target.files);
//         if (!files.length) return;
//         setPreviewUrls(files.map(f => URL.createObjectURL(f)));
//         try {
//             const uploaded = await Promise.all(
//                 files.map(file => uploadImageToServer(file))
//             );
//             setImages(uploaded);
//         } catch (err) {
//             console.error('图片上传失败：', err);
//             alert('有图片上传失败，请重试');
//         }
//     };

//     const uploadImageToServer = async (file) => {
//         const formData = new FormData();
//         formData.append('file', file);
//         const res = await axios.post(`/upload`, formData, {
//             headers: { 'Content-Type': 'multipart/form-data' }
//         });
//         return res.data.url;
//     };

//     const handleSubmit = async () => {
//         if (!content.trim()) {
//             alert('内容不能为空');
//             return;
//         }
//         try {
//             await axios.post(
//                 `/echo/users/${USER_ID}/CreateMoment`,
//                 {
//                     title: title.trim() || undefined,
//                     friend_content: content.trim(),
//                     images
//                 }
//             );
//             onClose();
//             fetchFeeds();
//         } catch (err) {
//             console.error('发布失败：', err);
//             alert('发布失败，请稍后重试');
//         }
//     };

//     return (
//         <div className="create-feed-page">
//             <div className="cf-header">
//                 <button onClick={onClose} style={{ padding: '5px 10px', backgroundColor: '#BA929A', color: 'white' }}>
//                     返回
//                 </button>
//                 <h3>发布新动态</h3>
//             </div>
//             <div className="cf-form">
//                 <input
//                     type="text"
//                     placeholder="标题"
//                     value={title}
//                     onChange={e => setTitle(e.target.value)}
//                 />
//                 <textarea
//                     placeholder="写下你的内容..."
//                     value={content}
//                     onChange={e => setContent(e.target.value)}
//                 />
//                 <input
//                     type="file"
//                     accept="image/*"
//                     multiple
//                     onChange={handleImageChange}
//                 />
//                 <div className="cf-preview">
//                     {previewUrls.map((url, i) => (
//                         <img key={i} src={url} alt={`预览 ${i}`} />
//                     ))}
//                 </div>
//                 <button className="cf-submit-btn" onClick={handleSubmit}>
//                     发布
//                 </button>
//             </div>
//         </div>
//     );
// };

// export default CreateMoment;