new

frontend/src/components/CreateTopicModal.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Modal, Form, Input, Button, message, Upload } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import { createTopic } from '../api';
+
+const { TextArea } = Input;
+const { Dragger } = Upload;
+
+const CreateTopicModal = ({ visible, onClose, onSuccess }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (values) => {
+    setLoading(true);
+    try {
+      await createTopic(values);
+      message.success('发布成功');
+      form.resetFields();
+      if (onSuccess) onSuccess();
+      onClose();
+    } catch (error) {
+      console.error(error);
+      message.error('发布失败: ' + (error.response?.data?.detail || '网络错误'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="发布新帖"
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleSubmit}
+        style={{ marginTop: 20 }}
+      >
+        <Form.Item
+          name="title"
+          label="标题"
+          rules={[{ required: true, message: '请输入标题' }, { max: 100, message: '标题最多100字' }]}
+        >
+          <Input placeholder="请输入清晰的问题或讨论标题" />
+        </Form.Item>
+
+        <Form.Item
+          name="content"
+          label="内容"
+          rules={[{ required: true, message: '请输入内容' }]}
+        >
+          <TextArea 
+            rows={6} 
+            placeholder="请详细描述您的问题，支持 Markdown 格式" 
+            showCount 
+            maxLength={5000}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
+            <Button onClick={onClose}>取消</Button>
+            <Button type="primary" htmlType="submit" loading={loading}>
+              立即发布
+            </Button>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CreateTopicModal;