From 664e2950f743f606347c808fd98eb057b9d47731 Mon Sep 17 00:00:00 2001 From: Shu Guang <61069967+shuguangnet@users.noreply.github.com> Date: Fri, 16 May 2025 01:30:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BA=E5=9D=9B=E6=96=B0=E5=A2=9E=20?= =?UTF-8?q?&=20=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Forum/List/index.less | 135 +++++++++++++++++------------ src/pages/Forum/List/index.tsx | 130 +++++++++++---------------- src/pages/Forum/Publish/index.less | 63 +++++--------- src/pages/Forum/Publish/index.tsx | 112 +++++++++--------------- 4 files changed, 190 insertions(+), 250 deletions(-) diff --git a/src/pages/Forum/List/index.less b/src/pages/Forum/List/index.less index b32dcba..b05e7c4 100644 --- a/src/pages/Forum/List/index.less +++ b/src/pages/Forum/List/index.less @@ -1,62 +1,83 @@ .forumContainer { - .searchBar { + background: #f6f8fa; + min-height: 100vh; + padding: 32px 0; +} +.searchBar { + background: #fff; + 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 { + border-radius: 10px; + margin-bottom: 18px; + transition: box-shadow 0.2s; + background: #fafbfc; + &:hover { + box-shadow: 0 4px 16px #e6e6e6; background: #fff; - padding: 16px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - margin-bottom: 16px; } - - .postItem { - transition: all 0.3s; - - &:hover { - background-color: #fafafa; - } - - .postTitle { - font-size: 18px; - font-weight: 500; - color: #1a1a1a; - - &:hover { - color: #1890ff; - } - } - - .postMeta { - color: #8c8c8c; - font-size: 14px; - } - - .postStats { - color: #595959; - font-size: 14px; - - .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; +} +.postTitle { + font-size: 20px; + font-weight: 600; + color: #222; + &:hover { + color: #1677ff; + text-decoration: underline; } +} +.categoryTag { + border-radius: 6px; + font-size: 13px; + padding: 0 8px; +} +.topBadge { + font-size: 13px; + margin-left: 4px; +} +.postMeta { + 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 { + font-size: 14px; + color: #888; + gap: 18px; +} +.statItem { + display: inline-flex; + align-items: center; + gap: 4px; +} +.publishBtn { + border-radius: 6px; + font-weight: 500; } \ No newline at end of file diff --git a/src/pages/Forum/List/index.tsx b/src/pages/Forum/List/index.tsx index d1c3dd7..e7c392c 100644 --- a/src/pages/Forum/List/index.tsx +++ b/src/pages/Forum/List/index.tsx @@ -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([]); - 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 (
@@ -132,7 +92,7 @@ const ForumList: React.FC = () => { showSizeChanger: true, showTotal: (total) => `共 ${total} 条帖子`, }} - dataSource={mockPosts} // 使用模拟数据 + dataSource={filteredPosts} renderItem={(item) => ( { actions={[ - {item.views} + {item.viewNum || 0} - {item.comments} + {item.commentNum || 0} - {item.likes} + {item.favourNum || 0} , ]} @@ -163,6 +123,13 @@ const ForumList: React.FC = () => { } > + ) : ( + {item.user?.userName?.[0] || '匿'} + ) + } title={ { > {item.title} - - {item.category} - + {/* 展示所有标签 */} + {item.tagList && item.tagList.map((tag: string) => ( + + {tag} + + ))} {item.isTop && ( )} @@ -181,13 +151,15 @@ const ForumList: React.FC = () => { } description={ - {item.author} - 发布于 {item.createTime} + {item.user?.userName || '匿名用户'} + + 发布于 {dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')} + } />
- {item.description} + {item.content}
)} diff --git a/src/pages/Forum/Publish/index.less b/src/pages/Forum/Publish/index.less index 1417715..8cc31a3 100644 --- a/src/pages/Forum/Publish/index.less +++ b/src/pages/Forum/Publish/index.less @@ -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; - } - } - - .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; - margin-top: 24px; - } +.publishCard { + width: 80vw; + min-height: 100vh; + margin: 0; + padding: 32px 48px 24px 48px; + box-shadow: none; + border: none; + background: #fff; +} +.buttonGroup { + display: flex; + gap: 16px; + margin-top: 24px; +} +.formLabel { + font-weight: 500; } \ No newline at end of file diff --git a/src/pages/Forum/Publish/index.tsx b/src/pages/Forum/Publish/index.tsx index be608d1..6bd26c6 100644 --- a/src/pages/Forum/Publish/index.tsx +++ b/src/pages/Forum/Publish/index.tsx @@ -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([]); const [submitting, setSubmitting] = useState(false); - - const categories = [ - { value: 'tech', label: '技术讨论', description: '分享技术经验和最佳实践' }, - { value: 'share', label: '经验分享', description: '分享数据分析案例和心得' }, - { value: 'question', label: '问题求助', description: '寻求技术支持和解决方案' }, - ]; + const [mdContent, setMdContent] = useState(''); // 新增 const handleSubmit = async (values: any) => { setSubmitting(true); try { - // 处理表单提交 - console.log('提交数据:', values); - message.success('发布成功'); - history.push('/forum/list'); + 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 }} /> -
{ maxLength={100} /> - 分类} - rules={[{ required: true, message: '请选择分类' }]} - tooltip={{ - title: '选择合适的分类有助于其他用户更好地找到您的帖子', - icon: - }} - > - - - - 内容} + name="tags" + label={标签} rules={[ - { required: true, message: '请输入内容' }, - { min: 20, message: '内容至少20个字符' } + { required: false, type: 'array', message: '请输入标签' } ]} > -