feat: 论坛新增 & 列表页面修改
This commit is contained in:
Shu Guang
parent
3a1c04686a
commit
664e2950f7
@ -1,62 +1,83 @@
|
||||
.forumContainer {
|
||||
background: #f6f8fa;
|
||||
min-height: 100vh;
|
||||
padding: 32px 0;
|
||||
}
|
||||
.searchBar {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
margin: 0 auto 24px auto;
|
||||
// max-width: 1100px;
|
||||
box-shadow: 0 2px 8px #f0f1f2;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
.listCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
// max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 2px 16px #f0f1f2;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.postItem {
|
||||
transition: all 0.3s;
|
||||
|
||||
border-radius: 10px;
|
||||
margin-bottom: 18px;
|
||||
transition: box-shadow 0.2s;
|
||||
background: #fafbfc;
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0 4px 16px #e6e6e6;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.postTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
color: #1677ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.categoryTag {
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.topBadge {
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.postMeta {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
}
|
||||
.author {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
.postContent {
|
||||
margin-top: 8px;
|
||||
color: #444;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
word-break: break-all;
|
||||
}
|
||||
.coverImage {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 2px 8px #eee;
|
||||
}
|
||||
|
||||
.postStats {
|
||||
color: #595959;
|
||||
font-size: 14px;
|
||||
|
||||
color: #888;
|
||||
gap: 18px;
|
||||
}
|
||||
.statItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coverImage {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categoryTag {
|
||||
border-radius: 12px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
.publishBtn {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, List, Tag, Space, Input, Button, Select, Badge } from 'antd';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, List, Tag, Space, Input, Button, Select, Badge, Avatar } from 'antd';
|
||||
import { history } from '@umijs/max';
|
||||
import {
|
||||
PlusOutlined,
|
||||
@ -8,80 +8,34 @@ import {
|
||||
LikeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from './index.less';
|
||||
import { listAllPostsUsingGet } from '@/services/hebi/postController';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const ForumList: React.FC = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [filter, setFilter] = useState('all');
|
||||
const [postList, setPostList] = useState<any[]>([]);
|
||||
|
||||
const mockPosts = [
|
||||
{
|
||||
id: 1,
|
||||
title: '使用 GPT-4 进行高级数据分析的实践经验',
|
||||
category: '技术讨论',
|
||||
author: '数据专家',
|
||||
createTime: '2024-01-15 14:30',
|
||||
description: '分享在大规模数据集上使用 GPT-4 进行智能分析的经验，包括提示词工程、数据预处理技巧，以及如何提高分析准确率...',
|
||||
views: 2150,
|
||||
comments: 156,
|
||||
likes: 342,
|
||||
isTop: true,
|
||||
cover: 'https://picsum.photos/272/153',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'AI 辅助数据可视化最佳实践',
|
||||
category: '经验分享',
|
||||
author: '可视化工程师',
|
||||
createTime: '2024-01-14 16:20',
|
||||
description: '探讨如何利用 AI 技术自动生成数据可视化方案，包括图表类型选择、配色方案优化、以及交互设计的智能推荐...',
|
||||
views: 1856,
|
||||
comments: 89,
|
||||
likes: 267,
|
||||
isTop: false,
|
||||
cover: 'https://picsum.photos/272/153?random=2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '智能预测模型准确率问题求助',
|
||||
category: '问题求助',
|
||||
author: '数据新手',
|
||||
createTime: '2024-01-13 09:45',
|
||||
description: '在使用系统进行销售预测时发现准确率不够理想，数据预处理已经做了基础清洗，请问还有哪些方面需要优化？...',
|
||||
views: 632,
|
||||
comments: 42,
|
||||
likes: 28,
|
||||
isTop: false,
|
||||
cover: null,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'AIGC 在金融数据分析中的应用实践',
|
||||
category: '技术讨论',
|
||||
author: '金融分析师',
|
||||
createTime: '2024-01-12 11:30',
|
||||
description: '分享我们团队使用 AIGC 技术进行金融市场分析的经验，包括风险评估、趋势预测和投资建议生成的完整流程...',
|
||||
views: 1967,
|
||||
comments: 156,
|
||||
likes: 420,
|
||||
isTop: true,
|
||||
cover: 'https://picsum.photos/272/153?random=4',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '大规模数据集的智能分析方法论',
|
||||
category: '经验分享',
|
||||
author: '资深数据科学家',
|
||||
createTime: '2024-01-11 15:15',
|
||||
description: '详细介绍如何处理和分析大规模数据集，包括数据清洗策略、特征工程技巧、模型选择以及结果验证方法...',
|
||||
views: 2543,
|
||||
comments: 189,
|
||||
likes: 534,
|
||||
isTop: false,
|
||||
cover: 'https://picsum.photos/272/153?random=5',
|
||||
},
|
||||
];
|
||||
// 拉取帖子数据
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listAllPostsUsingGet();
|
||||
if (res && res.code === 0 && Array.isArray(res.data)) {
|
||||
setPostList(res.data);
|
||||
} else {
|
||||
setPostList([]);
|
||||
}
|
||||
} catch (e) {
|
||||
setPostList([]);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
fetchPosts();
|
||||
}, []);
|
||||
|
||||
const categories = [
|
||||
{ value: 'all', label: '全部' },
|
||||
@ -91,9 +45,15 @@ const ForumList: React.FC = () => {
|
||||
];
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
// 可根据 value 进行前端过滤或请求接口
|
||||
console.log('搜索:', value);
|
||||
};
|
||||
|
||||
// 分类过滤
|
||||
const filteredPosts = filter === 'all'
|
||||
? postList
|
||||
: postList.filter(item => item.tagList && item.tagList.includes(filter));
|
||||
|
||||
return (
|
||||
<div className={styles.forumContainer}>
|
||||
<Card className={styles.searchBar} bordered={false}>
|
||||
@ -132,7 +92,7 @@ const ForumList: React.FC = () => {
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条帖子`,
|
||||
}}
|
||||
dataSource={mockPosts} // 使用模拟数据
|
||||
dataSource={filteredPosts}
|
||||
renderItem={(item) => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
@ -140,13 +100,13 @@ const ForumList: React.FC = () => {
|
||||
actions={[
|
||||
<Space key={"actions"} className={styles.postStats}>
|
||||
<span key="views" className={styles.statItem}>
|
||||
<EyeOutlined /> {item.views}
|
||||
<EyeOutlined /> {item.viewNum || 0}
|
||||
</span>
|
||||
<span key="comments" className={styles.statItem}>
|
||||
<MessageOutlined /> {item.comments}
|
||||
<MessageOutlined /> {item.commentNum || 0}
|
||||
</span>
|
||||
<span key="likes" className={styles.statItem}>
|
||||
<LikeOutlined /> {item.likes}
|
||||
<LikeOutlined /> {item.favourNum || 0}
|
||||
</span>
|
||||
</Space>,
|
||||
]}
|
||||
@ -163,6 +123,13 @@ const ForumList: React.FC = () => {
|
||||
}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={
|
||||
item.user?.userAvatar ? (
|
||||
<Avatar src={item.user.userAvatar} />
|
||||
) : (
|
||||
<Avatar>{item.user?.userName?.[0] || '匿'}</Avatar>
|
||||
)
|
||||
}
|
||||
title={
|
||||
<Space size="middle" align="center">
|
||||
<a
|
||||
@ -171,9 +138,12 @@ const ForumList: React.FC = () => {
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
<Tag className={styles.categoryTag} color="blue">
|
||||
{item.category}
|
||||
{/* 展示所有标签 */}
|
||||
{item.tagList && item.tagList.map((tag: string) => (
|
||||
<Tag className={styles.categoryTag} color="blue" key={tag}>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
{item.isTop && (
|
||||
<Badge color="red" text="置顶" />
|
||||
)}
|
||||
@ -181,13 +151,15 @@ const ForumList: React.FC = () => {
|
||||
}
|
||||
description={
|
||||
<Space className={styles.postMeta} size="middle">
|
||||
<span>{item.author}</span>
|
||||
<span>发布于 {item.createTime}</span>
|
||||
<span>{item.user?.userName || '匿名用户'}</span>
|
||||
<span>
|
||||
发布于 {dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</span>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
<div className={styles.postContent}>
|
||||
{item.description}
|
||||
{item.content}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
|
||||
@ -1,44 +1,25 @@
|
||||
.publishContainer {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
width: 80vw;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.publishCard {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
:global {
|
||||
.ant-card-head {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 24px;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
width: 80vw;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 32px 48px 24px 48px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formLabel {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uploadHint {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.formLabel {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1,30 +1,34 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Form, Input, Button, Upload, Select, message, Space, Alert } from 'antd';
|
||||
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import type { UploadFile } from 'antd/es/upload/interface';
|
||||
import { Card, Form, Input, Button, Select, message, Alert } from 'antd';
|
||||
import { history } from '@umijs/max';
|
||||
import styles from './index.less';
|
||||
import MDEditor from '@uiw/react-md-editor'; // 直接引入，不用 next/dynamic
|
||||
import '@uiw/react-md-editor/markdown-editor.css';
|
||||
import '@uiw/react-markdown-preview/markdown.css';
|
||||
import { addPostUsingPost } from '@/services/hebi/postController';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const ForumPublish: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const categories = [
|
||||
{ value: 'tech', label: '技术讨论', description: '分享技术经验和最佳实践' },
|
||||
{ value: 'share', label: '经验分享', description: '分享数据分析案例和心得' },
|
||||
{ value: 'question', label: '问题求助', description: '寻求技术支持和解决方案' },
|
||||
];
|
||||
const [mdContent, setMdContent] = useState<string>(''); // 新增
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// 处理表单提交
|
||||
console.log('提交数据:', values);
|
||||
const postAddRequest = {
|
||||
title: values.title,
|
||||
content: mdContent, // 使用 Markdown 内容
|
||||
tags: values.tags || [],
|
||||
};
|
||||
const res = await addPostUsingPost(postAddRequest);
|
||||
if (res && res.code === 0) {
|
||||
message.success('发布成功');
|
||||
history.push('/forum/list');
|
||||
} else {
|
||||
message.error(res?.message || '发布失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('发布失败');
|
||||
}
|
||||
@ -41,7 +45,6 @@ const ForumPublish: React.FC = () => {
|
||||
showIcon
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
@ -62,72 +65,35 @@ const ForumPublish: React.FC = () => {
|
||||
maxLength={100}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="category"
|
||||
label={<span className={styles.formLabel}>分类</span>}
|
||||
rules={[{ required: true, message: '请选择分类' }]}
|
||||
tooltip={{
|
||||
title: '选择合适的分类有助于其他用户更好地找到您的帖子',
|
||||
icon: <InfoCircleOutlined />
|
||||
}}
|
||||
>
|
||||
<Select placeholder="请选择帖子分类">
|
||||
{categories.map(cat => (
|
||||
<Select.Option key={cat.value} value={cat.value}>
|
||||
<Space>
|
||||
{cat.label}
|
||||
<span style={{ color: '#999', fontSize: '12px' }}>
|
||||
({cat.description})
|
||||
</span>
|
||||
</Space>
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="content"
|
||||
label={<span className={styles.formLabel}>内容</span>}
|
||||
name="tags"
|
||||
label={<span className={styles.formLabel}>标签</span>}
|
||||
rules={[
|
||||
{ required: true, message: '请输入内容' },
|
||||
{ min: 20, message: '内容至少20个字符' }
|
||||
{ required: false, type: 'array', message: '请输入标签' }
|
||||
]}
|
||||
>
|
||||
<TextArea
|
||||
rows={12}
|
||||
placeholder="请详细描述您要分享的内容..."
|
||||
showCount
|
||||
maxLength={5000}
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请输入标签，回车分隔"
|
||||
tokenSeparators={[',', '，']}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Markdown 编辑器替换内容输入 */}
|
||||
<Form.Item
|
||||
label={<span className={styles.formLabel}>封面图</span>}
|
||||
extra={<div className={styles.uploadHint}>支持 jpg、png 格式，建议尺寸 800x450px</div>}
|
||||
label={<span className={styles.formLabel}>内容</span>}
|
||||
required
|
||||
>
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onChange={({ fileList }) => setFileList(fileList)}
|
||||
beforeUpload={(file) => {
|
||||
const isImage = file.type.startsWith('image/');
|
||||
if (!isImage) {
|
||||
message.error('只能上传图片文件！');
|
||||
}
|
||||
return false;
|
||||
}}
|
||||
maxCount={1}
|
||||
>
|
||||
{fileList.length < 1 && (
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>上传图片</div>
|
||||
<div data-color-mode="light">
|
||||
<MDEditor
|
||||
value={mdContent}
|
||||
onChange={setMdContent}
|
||||
height={400}
|
||||
preview="edit"
|
||||
placeholder="请使用 Markdown 语法详细描述您要分享的内容..."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
<div className={styles.buttonGroup}>
|
||||
<Button onClick={() => history.back()}>
|
||||
取消
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user