This commit is contained in:
jeremygan2021
@@ -1,281 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Form, Input, Button, message, Upload, Select } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { createTopic, updateTopic, uploadMedia, getMyPaidItems } from '../api';
|
||||
import MDEditor from '@uiw/react-md-editor';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkMath from 'remark-math';
|
||||
import 'katex/dist/katex.css';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const CreateTopicModal = ({ visible, onClose, onSuccess, initialValues, isEditMode, topicId }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [paidItems, setPaidItems] = useState({ configs: [], courses: [], services: [] });
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [mediaIds, setMediaIds] = useState([]);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [mediaList, setMediaList] = useState([]); // Store uploaded media details for preview
|
||||
const [content, setContent] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
fetchPaidItems();
|
||||
if (isEditMode && initialValues) {
|
||||
// Edit Mode: Populate form with initial values
|
||||
form.setFieldsValue({
|
||||
title: initialValues.title,
|
||||
category: initialValues.category,
|
||||
});
|
||||
setContent(initialValues.content);
|
||||
form.setFieldValue('content', initialValues.content);
|
||||
|
||||
// Handle related item
|
||||
let relatedVal = null;
|
||||
if (initialValues.related_product) relatedVal = `config_${initialValues.related_product.id || initialValues.related_product}`;
|
||||
else if (initialValues.related_course) relatedVal = `course_${initialValues.related_course.id || initialValues.related_course}`;
|
||||
else if (initialValues.related_service) relatedVal = `service_${initialValues.related_service.id || initialValues.related_service}`;
|
||||
|
||||
if (relatedVal) form.setFieldValue('related_item', relatedVal);
|
||||
|
||||
// Note: We start with empty *new* media IDs.
|
||||
// Existing media is embedded in content or stored in DB, we don't need to re-upload or track them here unless we want to delete them (which is complex).
|
||||
// For now, we just allow adding NEW media.
|
||||
setMediaIds([]);
|
||||
setMediaList([]);
|
||||
} else {
|
||||
// Create Mode: Reset form
|
||||
setMediaIds([]);
|
||||
setMediaList([]);
|
||||
setContent("");
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ content: "", category: 'discussion' });
|
||||
}
|
||||
}
|
||||
}, [visible, isEditMode, initialValues, form]);
|
||||
|
||||
const fetchPaidItems = async () => {
|
||||
try {
|
||||
const res = await getMyPaidItems();
|
||||
setPaidItems(res.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch paid items", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
// 默认为 image，如果需要支持视频需根据 file.type 判断
|
||||
formData.append('media_type', file.type.startsWith('video') ? 'video' : 'image');
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const res = await uploadMedia(formData);
|
||||
// 记录上传的媒体 ID
|
||||
if (res.data.id) {
|
||||
setMediaIds(prev => [...prev, res.data.id]);
|
||||
}
|
||||
|
||||
// 确保 URL 是完整的
|
||||
// 由于后端现在是转发到外部OSS，返回的URL通常是完整的，但也可能是相对的，这里统一处理
|
||||
let url = res.data.file;
|
||||
|
||||
// 处理反斜杠问题（防止 Windows 路径风格影响 URL）
|
||||
if (url) {
|
||||
url = url.replace(/\\/g, '/');
|
||||
}
|
||||
|
||||
if (url && !url.startsWith('http')) {
|
||||
// 如果返回的是相对路径，拼接 API URL 或 Base URL
|
||||
const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||
// 移除 baseURL 末尾的 /api 或 /
|
||||
const host = baseURL.replace(/\/api\/?$/, '');
|
||||
// 确保 url 以 / 开头
|
||||
if (!url.startsWith('/')) url = '/' + url;
|
||||
url = `${host}${url}`;
|
||||
}
|
||||
|
||||
// 清理 URL 中的双斜杠 (除协议头外)
|
||||
url = url.replace(/([^:]\/)\/+/g, '$1');
|
||||
|
||||
// Add to media list for preview
|
||||
setMediaList(prev => [...prev, {
|
||||
id: res.data.id,
|
||||
url: url,
|
||||
type: file.type.startsWith('video') ? 'video' : 'image',
|
||||
name: file.name
|
||||
}]);
|
||||
|
||||
// 插入到编辑器
|
||||
const insertText = file.type.startsWith('video')
|
||||
? `\n<video src="${url}" controls width="100%"></video>\n`
|
||||
: `\n\n`;
|
||||
|
||||
const newContent = content + insertText;
|
||||
setContent(newContent);
|
||||
form.setFieldsValue({ content: newContent });
|
||||
|
||||
message.success('上传成功');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 处理关联项目 ID (select value format: "type_id")
|
||||
const relatedValue = values.related_item;
|
||||
// Use content state instead of form value to ensure consistency
|
||||
const payload = { ...values, content: content, media_ids: mediaIds };
|
||||
delete payload.related_item;
|
||||
|
||||
if (relatedValue) {
|
||||
const [type, id] = relatedValue.split('_');
|
||||
if (type === 'config') payload.related_product = id;
|
||||
if (type === 'course') payload.related_course = id;
|
||||
if (type === 'service') payload.related_service = id;
|
||||
} else {
|
||||
// If cleared, set to null
|
||||
payload.related_product = null;
|
||||
payload.related_course = null;
|
||||
payload.related_service = null;
|
||||
}
|
||||
|
||||
if (isEditMode && topicId) {
|
||||
await updateTopic(topicId, payload);
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
await createTopic(payload);
|
||||
message.success('发布成功');
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
if (onSuccess) onSuccess();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error((isEditMode ? '修改' : '发布') + '失败: ' + (error.response?.data?.detail || '网络错误'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEditMode ? "编辑帖子" : "发布新帖"}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
width={1000}
|
||||
centered
|
||||
maskClosable={false}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
initialValues={{ category: 'discussion' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="标题"
|
||||
rules={[{ required: true, message: '请输入标题' }, { max: 100, message: '标题最多100字' }]}
|
||||
>
|
||||
<Input placeholder="请输入清晰的问题或讨论标题" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', gap: 20 }}>
|
||||
<Form.Item
|
||||
name="category"
|
||||
label="分类"
|
||||
style={{ width: 200 }}
|
||||
rules={[{ required: true, message: '请选择分类' }]}
|
||||
>
|
||||
<Select>
|
||||
<Option value="discussion">技术讨论</Option>
|
||||
<Option value="help">求助问答</Option>
|
||||
<Option value="share">经验分享</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="related_item"
|
||||
label="关联已购项目 (可选)"
|
||||
style={{ flex: 1 }}
|
||||
tooltip="关联已购项目可获得“认证用户”标识"
|
||||
>
|
||||
<Select placeholder="选择关联项目..." allowClear>
|
||||
<Select.OptGroup label="硬件产品">
|
||||
{paidItems.configs.map(i => (
|
||||
<Option key={`config_${i.id}`} value={`config_${i.id}`}>{i.name}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
<Select.OptGroup label="VC 课程">
|
||||
{paidItems.courses.map(i => (
|
||||
<Option key={`course_${i.id}`} value={`course_${i.id}`}>{i.title}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
<Select.OptGroup label="AI 服务">
|
||||
{paidItems.services.map(i => (
|
||||
<Option key={`service_${i.id}`} value={`service_${i.id}`}>{i.title}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name="content"
|
||||
label="内容 (支持 Markdown 与 LaTeX 公式)"
|
||||
rules={[{ required: true, message: '请输入内容' }]}
|
||||
>
|
||||
<div data-color-mode="light">
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
<Upload
|
||||
beforeUpload={handleUpload}
|
||||
showUploadList={false}
|
||||
accept="image/*,video/*"
|
||||
>
|
||||
<Button icon={<UploadOutlined />} loading={uploading} size="small">
|
||||
插入图片/视频
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
|
||||
<MDEditor
|
||||
value={content}
|
||||
onChange={(val) => {
|
||||
setContent(val);
|
||||
form.setFieldsValue({ content: val });
|
||||
}}
|
||||
height={400}
|
||||
previewOptions={{
|
||||
rehypePlugins: [[rehypeKatex]],
|
||||
remarkPlugins: [[remarkMath]],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading} size="large">
|
||||
{isEditMode ? "保存修改" : "立即发布"}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTopicModal;
|
||||
Reference in New Issue
Block a user