first commit
This commit is contained in:
ltProj
9
.gitignore
vendored
Normal file
9
.gitignore
vendored
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/node_modules
|
||||||
|
/.env.local
|
||||||
|
/.umirc.local.ts
|
||||||
|
/config/config.local.ts
|
||||||
|
/src/.umi
|
||||||
|
/src/.umi-production
|
||||||
|
/src/.umi-test
|
||||||
|
/dist
|
||||||
|
.swc
|
||||||
44
.umirc.ts
Normal file
44
.umirc.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { defineConfig } from "umi";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
component: "index",
|
||||||
|
name: "首页"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/topic/:id",
|
||||||
|
component: "topic/detail",
|
||||||
|
name: "话题详情"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/publish",
|
||||||
|
component: "topic/publish",
|
||||||
|
name: "发布话题"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
npmClient: 'npm',
|
||||||
|
plugins: [
|
||||||
|
'@umijs/plugins/dist/antd',
|
||||||
|
'@umijs/plugins/dist/locale',
|
||||||
|
'@umijs/plugins/dist/layout',
|
||||||
|
],
|
||||||
|
antd: {},
|
||||||
|
theme: {
|
||||||
|
colorPrimary: '#6f8cff',
|
||||||
|
colorPrimaryActive: '#6f8cff',
|
||||||
|
colorPrimaryHover: '#a7bfff',
|
||||||
|
},
|
||||||
|
locale: {
|
||||||
|
default: 'zh-CN',
|
||||||
|
antd: true,
|
||||||
|
},
|
||||||
|
layout: false,
|
||||||
|
title: 'AutoBeeAgent',
|
||||||
|
favicons: ['/favicon.ico'],
|
||||||
|
metas: [
|
||||||
|
{ name: 'keywords', content: 'AutoBeeAgent,热门话题,讨论,交流' },
|
||||||
|
{ name: 'description', content: 'AutoBeeAgent用户热门话题讨论平台' },
|
||||||
|
],
|
||||||
|
});
|
||||||
20422
package-lock.json
generated
Normal file
20422
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"author": "ltProj <15648664+ltproj@user.noreply.gitee.com>",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "umi dev",
|
||||||
|
"build": "umi build",
|
||||||
|
"postinstall": "umi setup",
|
||||||
|
"setup": "umi setup",
|
||||||
|
"start": "npm run dev"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^6.0.2",
|
||||||
|
"@umijs/plugins": "^4.5.0",
|
||||||
|
"antd": "^5.27.4",
|
||||||
|
"dayjs": "^1.11.18",
|
||||||
|
"umi": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.0.33",
|
||||||
|
"@types/react-dom": "^18.0.11",
|
||||||
|
"typescript": "^5.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/assets/yay.jpg
Normal file
BIN
src/assets/yay.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
138
src/components/HotTopics/index.less
Normal file
138
src/components/HotTopics/index.less
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
.hotTopicsCard {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.ant-card-head {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
padding: 16px 20px;
|
||||||
|
|
||||||
|
.ant-card-head-title {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.fireIcon {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewAllButton {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
color: #6f8cff;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotTopicsList {
|
||||||
|
.ant-list-item {
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotTopicItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicRank {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.rankIcon {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rankNumber {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicContent {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicTitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicMeta {
|
||||||
|
width: 45px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.heatScore {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hotTopicsCard {
|
||||||
|
.ant-card-head {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotTopicsList {
|
||||||
|
.ant-list-item {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicTitle {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicMeta {
|
||||||
|
.heatScore {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
80
src/components/HotTopics/index.tsx
Normal file
80
src/components/HotTopics/index.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Card, List, Typography, Button } from 'antd';
|
||||||
|
import { FireOutlined, RightOutlined } from '@ant-design/icons';
|
||||||
|
import { useNavigate } from 'umi';
|
||||||
|
import type { Topic } from '../../services/mockData';
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
interface HotTopicsProps {
|
||||||
|
topics: Topic[];
|
||||||
|
loading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const HotTopics: React.FC<HotTopicsProps> = ({ topics, loading = false }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const formatNumber = (num: number): string => {
|
||||||
|
if (num >= 10000) {
|
||||||
|
return `${(num / 10000).toFixed(1)}w+`;
|
||||||
|
}
|
||||||
|
return num.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHeatScore = (topic: Topic): number => {
|
||||||
|
return topic.likes + topic.views + topic.comments;
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortedTopics = [...topics].sort((a, b) => getHeatScore(b) - getHeatScore(a));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={styles.hotTopicsCard}
|
||||||
|
title={
|
||||||
|
<div className={styles.cardTitle}>
|
||||||
|
<div>
|
||||||
|
<FireOutlined className={styles.fireIcon} />
|
||||||
|
<span>热门话题</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.viewAllButton}>
|
||||||
|
<span>查看全部</span>
|
||||||
|
<span><RightOutlined /></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
<List
|
||||||
|
className={styles.hotTopicsList}
|
||||||
|
dataSource={sortedTopics}
|
||||||
|
renderItem={(topic, index) => (
|
||||||
|
<List.Item
|
||||||
|
className={styles.hotTopicItem}
|
||||||
|
onClick={() => navigate(`/topic/${topic.id}`)}
|
||||||
|
>
|
||||||
|
<div className={styles.topicRank}>
|
||||||
|
{index === 0 && <FireOutlined className={styles.rankIcon} />}
|
||||||
|
{index > 0 && <span className={styles.rankNumber}>{index + 1}</span>}
|
||||||
|
</div>
|
||||||
|
<div className={styles.topicContent}>
|
||||||
|
<Text
|
||||||
|
className={styles.topicTitle}
|
||||||
|
ellipsis={{ tooltip: topic.title }}
|
||||||
|
>
|
||||||
|
{topic.title}
|
||||||
|
</Text>
|
||||||
|
<div className={styles.topicMeta}>
|
||||||
|
<Text type="secondary" className={styles.heatScore}>
|
||||||
|
{formatNumber(getHeatScore(topic))}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HotTopics;
|
||||||
172
src/components/TopicCard/index.less
Normal file
172
src/components/TopicCard/index.less
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
.topicCard {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-actions {
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardCover {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryTag {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryTagInline {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent {
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favoriteButton {
|
||||||
|
margin-left: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #faad14;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fff7e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: none;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.authorName {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
.ant-space-item {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButton {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: #666;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #6f8cff;
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.topicCard {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardCover {
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent {
|
||||||
|
.header {
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
160
src/components/TopicCard/index.tsx
Normal file
160
src/components/TopicCard/index.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Card, Tag, Avatar, Button, Space, Typography } from 'antd';
|
||||||
|
import { HeartOutlined, HeartFilled, EyeOutlined, MessageOutlined, ShareAltOutlined, StarOutlined, StarFilled } from '@ant-design/icons';
|
||||||
|
import { useNavigate } from 'umi';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import type { Topic } from '../../services/mockData';
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
const { Text, Paragraph } = Typography;
|
||||||
|
|
||||||
|
interface TopicCardProps {
|
||||||
|
topic: Topic;
|
||||||
|
onLike?: (topicId: string) => void;
|
||||||
|
onFavorite?: (topicId: string) => void;
|
||||||
|
onShare?: (topicId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TopicCard: React.FC<TopicCardProps> = ({
|
||||||
|
topic,
|
||||||
|
onLike,
|
||||||
|
onFavorite,
|
||||||
|
onShare
|
||||||
|
}) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleCardClick = () => {
|
||||||
|
navigate(`/topic/${topic.id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLike = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onLike?.(topic.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFavorite = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onFavorite?.(topic.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShare = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onShare?.(topic.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatNumber = (num: number): string => {
|
||||||
|
if (num >= 10000) {
|
||||||
|
return `${(num / 10000).toFixed(1)}w+`;
|
||||||
|
}
|
||||||
|
return num.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={styles.topicCard}
|
||||||
|
hoverable
|
||||||
|
onClick={handleCardClick}
|
||||||
|
cover={
|
||||||
|
topic.imageUrl && (
|
||||||
|
<div className={styles.cardCover}>
|
||||||
|
<img src={topic.imageUrl} alt={topic.title} />
|
||||||
|
<div className={styles.categoryTag}>
|
||||||
|
<Tag color="blue">{topic.category}</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
actions={[
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={topic.isLiked ? <HeartFilled style={{ color: '#ff4d4f' }} /> : <HeartOutlined />}
|
||||||
|
onClick={handleLike}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{formatNumber(topic.likes)}
|
||||||
|
</Button>,
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<MessageOutlined />}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{topic.comments}
|
||||||
|
</Button>,
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<ShareAltOutlined />}
|
||||||
|
onClick={handleShare}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{topic.shares}
|
||||||
|
</Button>
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
{!topic.imageUrl && (
|
||||||
|
<div className={styles.categoryTagInline}>
|
||||||
|
<Tag color="blue">{topic.category}</Tag>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={styles.header}>
|
||||||
|
<Paragraph
|
||||||
|
ellipsis={{ rows: 2 }}
|
||||||
|
className={styles.title}
|
||||||
|
>
|
||||||
|
{topic.title}
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={topic.isFavorited ? <StarFilled style={{ color: '#faad14' }} /> : <StarOutlined />}
|
||||||
|
onClick={handleFavorite}
|
||||||
|
className={styles.favoriteButton}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Paragraph
|
||||||
|
ellipsis={{ rows: 2 }}
|
||||||
|
className={styles.description}
|
||||||
|
>
|
||||||
|
{topic.content}
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.tags}>
|
||||||
|
{topic.tags.map(tag => (
|
||||||
|
<Tag key={tag} size="small" className={styles.tag}>
|
||||||
|
{tag}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footer}>
|
||||||
|
<div className={styles.author}>
|
||||||
|
<Avatar
|
||||||
|
src={topic.author.avatar}
|
||||||
|
size="small"
|
||||||
|
icon={<Avatar icon={<Avatar />} />}
|
||||||
|
/>
|
||||||
|
<Text type="secondary" className={styles.authorName}>
|
||||||
|
{topic.author.name}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.meta}>
|
||||||
|
<Space size="middle">
|
||||||
|
<Space size={4}>
|
||||||
|
<EyeOutlined />
|
||||||
|
<Text type="secondary">{formatNumber(topic.views)}</Text>
|
||||||
|
</Space>
|
||||||
|
<Text type="secondary">
|
||||||
|
{dayjs(topic.updatedAt).format('YYYY-MM-DD')}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TopicCard;
|
||||||
179
src/layouts/index.less
Normal file
179
src/layouts/index.less
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
.layout {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerContent {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 24px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
.logoLink {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #6f8cff;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
.navItem {
|
||||||
|
margin-right: 24px;
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #6f8cff;
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 400px;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 20px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-suffix {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.userProfile {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userName {
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingService {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
.serviceButton {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.headerContent {
|
||||||
|
padding: 0 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: auto;
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-right: 16px;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
margin-right: 16px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
order: 4;
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin: 16px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
order: 3;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingService {
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
|
||||||
|
.serviceButton {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
129
src/layouts/index.tsx
Normal file
129
src/layouts/index.tsx
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Link, Outlet, useNavigate } from 'umi';
|
||||||
|
import { Layout as AntLayout, Input, Button, Avatar, Dropdown, Menu, Space, Badge } from 'antd';
|
||||||
|
import { SearchOutlined, UserOutlined, BellOutlined, BookOutlined, MessageOutlined } from '@ant-design/icons';
|
||||||
|
import { userApi } from '../services/api';
|
||||||
|
import type { User } from '../services/mockData';
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
const { Header, Content } = AntLayout;
|
||||||
|
|
||||||
|
export default function Layout() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [searchValue, setSearchValue] = useState('');
|
||||||
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 获取用户信息
|
||||||
|
userApi.getCurrentUser().then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
setUser(res.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
if (searchValue.trim()) {
|
||||||
|
navigate(`/?search=${encodeURIComponent(searchValue)}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const userMenu = (
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item key="profile">
|
||||||
|
<UserOutlined /> 个人中心
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="settings">
|
||||||
|
设置
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.Item key="logout">
|
||||||
|
退出登录
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AntLayout className={styles.layout}>
|
||||||
|
<Header className={styles.header}>
|
||||||
|
<div className={styles.headerContent}>
|
||||||
|
{/* Logo区域 */}
|
||||||
|
<div className={styles.logo}>
|
||||||
|
<Link to="/" className={styles.logoLink}>
|
||||||
|
AutoBeeAgent
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 搜索框 */}
|
||||||
|
<div className={styles.search}>
|
||||||
|
<Input
|
||||||
|
placeholder="搜索热门话题..."
|
||||||
|
value={searchValue}
|
||||||
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
prefix={<SearchOutlined />}
|
||||||
|
// suffix={
|
||||||
|
// <Button
|
||||||
|
// type="primary"
|
||||||
|
// size="small"
|
||||||
|
// onClick={handleSearch}
|
||||||
|
// loading={loading}
|
||||||
|
// >
|
||||||
|
// AI搜索
|
||||||
|
// </Button>
|
||||||
|
// }
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 用户信息 */}
|
||||||
|
<div className={styles.userInfo}>
|
||||||
|
<Space size="middle">
|
||||||
|
<Button type="text" icon={<BookOutlined />}>
|
||||||
|
学习
|
||||||
|
</Button>
|
||||||
|
<Badge count={0}>
|
||||||
|
<Button type="text" icon={<BellOutlined />}>
|
||||||
|
消息
|
||||||
|
</Button>
|
||||||
|
</Badge>
|
||||||
|
{user ? (
|
||||||
|
<Dropdown overlay={userMenu} placement="bottomRight">
|
||||||
|
<div className={styles.userProfile}>
|
||||||
|
<Avatar src={user.avatar} icon={<UserOutlined />} />
|
||||||
|
<span className={styles.userName}>{user.name}</span>
|
||||||
|
</div>
|
||||||
|
</Dropdown>
|
||||||
|
) : (
|
||||||
|
<Button type="primary" onClick={() => navigate('/login')}>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<Content className={styles.content}>
|
||||||
|
<Outlet />
|
||||||
|
</Content>
|
||||||
|
|
||||||
|
{/* 浮动客服按钮 */}
|
||||||
|
<div className={styles.floatingService}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
icon={<MessageOutlined />}
|
||||||
|
size="large"
|
||||||
|
className={styles.serviceButton}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AntLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
9
src/pages/docs.tsx
Normal file
9
src/pages/docs.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
const DocsPage = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>This is umi docs.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DocsPage;
|
||||||
180
src/pages/index.less
Normal file
180
src/pages/index.less
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
.homePage {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
background: linear-gradient(90deg, #a7bfff, #6f8cff);
|
||||||
|
color: white;
|
||||||
|
padding: 40px 0;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.bannerContent {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerText {
|
||||||
|
h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerActions {
|
||||||
|
.publishButton {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicsSection {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.ant-select {
|
||||||
|
.ant-select-selector {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicsList {
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: sticky;
|
||||||
|
top: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.banner {
|
||||||
|
padding: 24px 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.bannerContent {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerText {
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerActions {
|
||||||
|
.publishButton {
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicsSection {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionHeader {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.ant-select {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: static;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.sectionHeader {
|
||||||
|
.filters {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.ant-select,
|
||||||
|
.ant-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
255
src/pages/index.tsx
Normal file
255
src/pages/index.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Row, Col, Select, Button, Input, Spin, Empty, message } from 'antd';
|
||||||
|
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||||
|
import { useNavigate, useSearchParams } from 'umi';
|
||||||
|
import { topicApi, configApi } from '../services/api';
|
||||||
|
import type { Topic } from '../services/mockData';
|
||||||
|
import TopicCard from '../components/TopicCard';
|
||||||
|
import HotTopics from '../components/HotTopics';
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
|
||||||
|
const [topics, setTopics] = useState<Topic[]>([]);
|
||||||
|
const [hotTopics, setHotTopics] = useState<Topic[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [hotTopicsLoading, setHotTopicsLoading] = useState(false);
|
||||||
|
const [categories, setCategories] = useState<Array<{label: string, value: string}>>([]);
|
||||||
|
const [sortOptions, setSortOptions] = useState<Array<{label: string, value: string}>>([]);
|
||||||
|
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
category: 'all',
|
||||||
|
sort: 'hot',
|
||||||
|
search: searchParams.get('search') || '',
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取分类和排序选项
|
||||||
|
useEffect(() => {
|
||||||
|
Promise.all([
|
||||||
|
configApi.getCategories(),
|
||||||
|
configApi.getSortOptions()
|
||||||
|
]).then(([categoriesRes, sortRes]) => {
|
||||||
|
if (categoriesRes.success) {
|
||||||
|
setCategories(categoriesRes.data);
|
||||||
|
}
|
||||||
|
if (sortRes.success) {
|
||||||
|
setSortOptions(sortRes.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 获取话题列表
|
||||||
|
const fetchTopics = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await topicApi.getTopics(filters);
|
||||||
|
if (response.success) {
|
||||||
|
setTopics(response.data.list);
|
||||||
|
} else {
|
||||||
|
message.error('获取话题列表失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('网络错误，请稍后重试');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取热门话题
|
||||||
|
const fetchHotTopics = async () => {
|
||||||
|
setHotTopicsLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await topicApi.getHotTopics(5);
|
||||||
|
if (response.success) {
|
||||||
|
setHotTopics(response.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取热门话题失败:', error);
|
||||||
|
} finally {
|
||||||
|
setHotTopicsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTopics();
|
||||||
|
}, [filters]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchHotTopics();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCategoryChange = (value: string) => {
|
||||||
|
setFilters(prev => ({ ...prev, category: value, page: 1 }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSortChange = (value: string) => {
|
||||||
|
setFilters(prev => ({ ...prev, sort: value, page: 1 }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (value: string) => {
|
||||||
|
setFilters(prev => ({ ...prev, search: value, page: 1 }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLike = async (topicId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await topicApi.likeTopic(topicId);
|
||||||
|
if (response.success) {
|
||||||
|
// 更新本地状态
|
||||||
|
setTopics(prev => prev.map(topic =>
|
||||||
|
topic.id === topicId
|
||||||
|
? { ...topic, isLiked: response.data.liked, likes: response.data.likes }
|
||||||
|
: topic
|
||||||
|
));
|
||||||
|
setHotTopics(prev => prev.map(topic =>
|
||||||
|
topic.id === topicId
|
||||||
|
? { ...topic, isLiked: response.data.liked, likes: response.data.likes }
|
||||||
|
: topic
|
||||||
|
));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败，请稍后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFavorite = async (topicId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await topicApi.favoriteTopic(topicId);
|
||||||
|
if (response.success) {
|
||||||
|
// 更新本地状态
|
||||||
|
setTopics(prev => prev.map(topic =>
|
||||||
|
topic.id === topicId
|
||||||
|
? { ...topic, isFavorited: response.data.favorited }
|
||||||
|
: topic
|
||||||
|
));
|
||||||
|
setHotTopics(prev => prev.map(topic =>
|
||||||
|
topic.id === topicId
|
||||||
|
? { ...topic, isFavorited: response.data.favorited }
|
||||||
|
: topic
|
||||||
|
));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败，请稍后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShare = (topicId: string) => {
|
||||||
|
// 实现分享功能
|
||||||
|
message.success('分享链接已复制到剪贴板');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRefresh = () => {
|
||||||
|
fetchTopics();
|
||||||
|
fetchHotTopics();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePublishTopic = () => {
|
||||||
|
navigate('/publish');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.homePage}>
|
||||||
|
{/* 热门话题横幅 */}
|
||||||
|
<div className={styles.banner}>
|
||||||
|
<div className={styles.bannerContent}>
|
||||||
|
<div className={styles.bannerText}>
|
||||||
|
<h2>热门话题</h2>
|
||||||
|
<p>新版块火热上线,商家都在关注的热点问题看这里!</p>
|
||||||
|
</div>
|
||||||
|
<div className={styles.bannerActions}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={handlePublishTopic}
|
||||||
|
className={styles.publishButton}
|
||||||
|
>
|
||||||
|
发布话题
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
{/* 左侧话题列表 */}
|
||||||
|
<Col xs={24} lg={16}>
|
||||||
|
<div className={styles.topicsSection}>
|
||||||
|
<div className={styles.sectionHeader}>
|
||||||
|
<h3>热门话题</h3>
|
||||||
|
<div className={styles.filters}>
|
||||||
|
<Select
|
||||||
|
value={filters.category}
|
||||||
|
onChange={handleCategoryChange}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
size="middle"
|
||||||
|
>
|
||||||
|
{categories.map(category => (
|
||||||
|
<Option key={category.value} value={category.value}>
|
||||||
|
{category.label}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={filters.sort}
|
||||||
|
onChange={handleSortChange}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
size="middle"
|
||||||
|
>
|
||||||
|
{sortOptions.map(option => (
|
||||||
|
<Option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Button
|
||||||
|
icon={<ReloadOutlined />}
|
||||||
|
onClick={handleRefresh}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.topicsList}>
|
||||||
|
{loading ? (
|
||||||
|
<div className={styles.loading}>
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
) : topics.length > 0 ? (
|
||||||
|
topics.map(topic => (
|
||||||
|
<TopicCard
|
||||||
|
key={topic.id}
|
||||||
|
topic={topic}
|
||||||
|
onLike={handleLike}
|
||||||
|
onFavorite={handleFavorite}
|
||||||
|
onShare={handleShare}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Empty
|
||||||
|
description="暂无话题数据"
|
||||||
|
className={styles.empty}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* 右侧热门话题排行 */}
|
||||||
|
<Col xs={24} lg={8}>
|
||||||
|
<div className={styles.sidebar}>
|
||||||
|
<HotTopics
|
||||||
|
topics={hotTopics}
|
||||||
|
loading={hotTopicsLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
297
src/pages/topic/detail.less
Normal file
297
src/pages/topic/detail.less
Normal file
@@ -0,0 +1,297 @@
|
|||||||
|
.detailPage {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 400px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicDetail {
|
||||||
|
.topicBanner {
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerOverlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.bannerActions {
|
||||||
|
.favoriteButton {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border: none;
|
||||||
|
color: #faad14;
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: white;
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicContent {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.topicHeader {
|
||||||
|
.categoryTag {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.category {
|
||||||
|
display: inline-block;
|
||||||
|
background: #6f8cff;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicTitle {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicMeta {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicBody {
|
||||||
|
.topicDescription {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicTags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #666;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicActions {
|
||||||
|
.actionButton {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
color: #6f8cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentsSection {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.commentForm {
|
||||||
|
.commentInput {
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentActions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentsList {
|
||||||
|
.commentItem {
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentHeader {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentContent {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.ant-typography {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentActions {
|
||||||
|
.ant-btn {
|
||||||
|
height: 28px;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyComments {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: sticky;
|
||||||
|
top: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.detailPage {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicDetail {
|
||||||
|
.topicBanner {
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.bannerOverlay {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.bannerActions {
|
||||||
|
.favoriteButton {
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicContent {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.topicHeader {
|
||||||
|
.topicTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicMeta {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicBody {
|
||||||
|
.topicDescription {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentsSection {
|
||||||
|
.commentForm {
|
||||||
|
.commentInput {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentsList {
|
||||||
|
.commentItem {
|
||||||
|
padding: 12px 0;
|
||||||
|
|
||||||
|
.commentHeader {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentContent {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: static;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.topicDetail {
|
||||||
|
.topicBanner {
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicContent {
|
||||||
|
.topicHeader {
|
||||||
|
.topicTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicBody {
|
||||||
|
.topicDescription {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
367
src/pages/topic/detail.tsx
Normal file
367
src/pages/topic/detail.tsx
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Row, Col, Card, Typography, Button, Avatar, Space, Divider, Input, message, Spin } from 'antd';
|
||||||
|
import { HeartOutlined, HeartFilled, StarOutlined, StarFilled, ShareAltOutlined, ArrowLeftOutlined, EyeOutlined, MessageOutlined } from '@ant-design/icons';
|
||||||
|
import { useParams, useNavigate } from 'umi';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { topicApi, commentApi } from '../../services/api';
|
||||||
|
import type { Topic, Comment } from '../../services/mockData';
|
||||||
|
import HotTopics from '../../components/HotTopics';
|
||||||
|
import styles from './detail.less';
|
||||||
|
|
||||||
|
const { Title, Paragraph, Text } = Typography;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
export default function TopicDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [topic, setTopic] = useState<Topic | null>(null);
|
||||||
|
const [comments, setComments] = useState<Comment[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [commentsLoading, setCommentsLoading] = useState(true);
|
||||||
|
const [hotTopics, setHotTopics] = useState<Topic[]>([]);
|
||||||
|
const [commentText, setCommentText] = useState('');
|
||||||
|
const [submittingComment, setSubmittingComment] = useState(false);
|
||||||
|
|
||||||
|
// 获取话题详情
|
||||||
|
const fetchTopicDetail = async () => {
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await topicApi.getTopicDetail(id);
|
||||||
|
if (response.success) {
|
||||||
|
setTopic(response.data);
|
||||||
|
} else {
|
||||||
|
message.error(response.message || '话题不存在');
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('获取话题详情失败');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取评论列表
|
||||||
|
const fetchComments = async () => {
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
setCommentsLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await topicApi.getTopicComments(id);
|
||||||
|
if (response.success) {
|
||||||
|
setComments(response.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取评论失败:', error);
|
||||||
|
} finally {
|
||||||
|
setCommentsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取热门话题
|
||||||
|
const fetchHotTopics = async () => {
|
||||||
|
try {
|
||||||
|
const response = await topicApi.getHotTopics(5);
|
||||||
|
if (response.success) {
|
||||||
|
setHotTopics(response.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取热门话题失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTopicDetail();
|
||||||
|
fetchComments();
|
||||||
|
fetchHotTopics();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const handleLike = async () => {
|
||||||
|
if (!topic) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await topicApi.likeTopic(topic.id);
|
||||||
|
if (response.success) {
|
||||||
|
setTopic(prev => prev ? {
|
||||||
|
...prev,
|
||||||
|
isLiked: response.data.liked,
|
||||||
|
likes: response.data.likes
|
||||||
|
} : null);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败，请稍后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFavorite = async () => {
|
||||||
|
if (!topic) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await topicApi.favoriteTopic(topic.id);
|
||||||
|
if (response.success) {
|
||||||
|
setTopic(prev => prev ? {
|
||||||
|
...prev,
|
||||||
|
isFavorited: response.data.favorited
|
||||||
|
} : null);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败，请稍后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShare = () => {
|
||||||
|
message.success('分享链接已复制到剪贴板');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitComment = async () => {
|
||||||
|
if (!commentText.trim() || !topic) return;
|
||||||
|
|
||||||
|
setSubmittingComment(true);
|
||||||
|
try {
|
||||||
|
const response = await commentApi.publishComment(topic.id, commentText);
|
||||||
|
if (response.success) {
|
||||||
|
setComments(prev => [response.data, ...prev]);
|
||||||
|
setTopic(prev => prev ? { ...prev, comments: prev.comments + 1 } : null);
|
||||||
|
setCommentText('');
|
||||||
|
message.success('评论发布成功');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('发布评论失败');
|
||||||
|
} finally {
|
||||||
|
setSubmittingComment(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLikeComment = async (commentId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await commentApi.likeComment(commentId);
|
||||||
|
if (response.success) {
|
||||||
|
setComments(prev => prev.map(comment =>
|
||||||
|
comment.id === commentId
|
||||||
|
? { ...comment, isLiked: response.data.liked, likes: response.data.likes }
|
||||||
|
: comment
|
||||||
|
));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatNumber = (num: number): string => {
|
||||||
|
if (num >= 10000) {
|
||||||
|
return `${(num / 10000).toFixed(1)}w+`;
|
||||||
|
}
|
||||||
|
return num.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className={styles.loading}>
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!topic) {
|
||||||
|
return (
|
||||||
|
<div className={styles.notFound}>
|
||||||
|
<Title level={3}>话题不存在</Title>
|
||||||
|
<Button onClick={() => navigate('/')}>返回首页</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.detailPage}>
|
||||||
|
{/* 返回按钮 */}
|
||||||
|
<Button
|
||||||
|
icon={<ArrowLeftOutlined />}
|
||||||
|
onClick={() => navigate('/')}
|
||||||
|
className={styles.backButton}
|
||||||
|
>
|
||||||
|
返回首页
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Row gutter={24}>
|
||||||
|
{/* 左侧话题详情 */}
|
||||||
|
<Col xs={24} lg={16}>
|
||||||
|
<div className={styles.topicDetail}>
|
||||||
|
{/* 话题横幅 */}
|
||||||
|
{topic.imageUrl && (
|
||||||
|
<div className={styles.topicBanner}>
|
||||||
|
<img src={topic.imageUrl} alt={topic.title} />
|
||||||
|
<div className={styles.bannerOverlay}>
|
||||||
|
<div className={styles.bannerActions}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={topic.isFavorited ? <StarFilled /> : <StarOutlined />}
|
||||||
|
onClick={handleFavorite}
|
||||||
|
className={styles.favoriteButton}
|
||||||
|
>
|
||||||
|
{topic.isFavorited ? '已收藏' : '收藏'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 话题内容 */}
|
||||||
|
<Card className={styles.topicContent}>
|
||||||
|
<div className={styles.topicHeader}>
|
||||||
|
<div className={styles.categoryTag}>
|
||||||
|
<span className={styles.category}>{topic.category}</span>
|
||||||
|
</div>
|
||||||
|
<Title level={2} className={styles.topicTitle}>
|
||||||
|
{topic.title}
|
||||||
|
</Title>
|
||||||
|
<div className={styles.topicMeta}>
|
||||||
|
<Space size="large">
|
||||||
|
<Space size={4}>
|
||||||
|
<Avatar src={topic.author.avatar} size="small" />
|
||||||
|
<Text strong>{topic.author.name}</Text>
|
||||||
|
</Space>
|
||||||
|
<Text type="secondary">
|
||||||
|
{dayjs(topic.createdAt).format('YYYY-MM-DD HH:mm')}
|
||||||
|
</Text>
|
||||||
|
<Space size={4}>
|
||||||
|
<EyeOutlined />
|
||||||
|
<Text type="secondary">{formatNumber(topic.views)}</Text>
|
||||||
|
</Space>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<div className={styles.topicBody}>
|
||||||
|
<Paragraph className={styles.topicDescription}>
|
||||||
|
{topic.content}
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
{topic.tags.length > 0 && (
|
||||||
|
<div className={styles.topicTags}>
|
||||||
|
{topic.tags.map(tag => (
|
||||||
|
<span key={tag} className={styles.tag}>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<div className={styles.topicActions}>
|
||||||
|
<Space size="large">
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={topic.isLiked ? <HeartFilled style={{ color: '#ff4d4f' }} /> : <HeartOutlined />}
|
||||||
|
onClick={handleLike}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{formatNumber(topic.likes)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<MessageOutlined />}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{topic.comments}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<ShareAltOutlined />}
|
||||||
|
onClick={handleShare}
|
||||||
|
className={styles.actionButton}
|
||||||
|
>
|
||||||
|
{topic.shares}
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 评论区域 */}
|
||||||
|
<Card className={styles.commentsSection} title="评论">
|
||||||
|
{/* 发表评论 */}
|
||||||
|
<div className={styles.commentForm}>
|
||||||
|
<TextArea
|
||||||
|
rows={4}
|
||||||
|
placeholder="发表你的看法..."
|
||||||
|
value={commentText}
|
||||||
|
onChange={(e) => setCommentText(e.target.value)}
|
||||||
|
className={styles.commentInput}
|
||||||
|
/>
|
||||||
|
<div className={styles.commentActions}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={handleSubmitComment}
|
||||||
|
loading={submittingComment}
|
||||||
|
disabled={!commentText.trim()}
|
||||||
|
>
|
||||||
|
发表评论
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
{/* 评论列表 */}
|
||||||
|
<div className={styles.commentsList}>
|
||||||
|
{commentsLoading ? (
|
||||||
|
<div className={styles.loading}>
|
||||||
|
<Spin />
|
||||||
|
</div>
|
||||||
|
) : comments.length > 0 ? (
|
||||||
|
comments.map(comment => (
|
||||||
|
<div key={comment.id} className={styles.commentItem}>
|
||||||
|
<div className={styles.commentHeader}>
|
||||||
|
<Space>
|
||||||
|
<Avatar src={comment.author.avatar} size="small" />
|
||||||
|
<Text strong>{comment.author.name}</Text>
|
||||||
|
<Text type="secondary">
|
||||||
|
{dayjs(comment.createdAt).format('YYYY-MM-DD HH:mm')}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<div className={styles.commentContent}>
|
||||||
|
<Paragraph>{comment.content}</Paragraph>
|
||||||
|
</div>
|
||||||
|
<div className={styles.commentActions}>
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
icon={comment.isLiked ? <HeartFilled style={{ color: '#ff4d4f' }} /> : <HeartOutlined />}
|
||||||
|
onClick={() => handleLikeComment(comment.id)}
|
||||||
|
>
|
||||||
|
{comment.likes}
|
||||||
|
</Button>
|
||||||
|
<Button type="text" size="small">
|
||||||
|
回复
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyComments}>
|
||||||
|
<Text type="secondary">暂无评论，快来抢沙发吧！</Text>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* 右侧相关话题 */}
|
||||||
|
<Col xs={24} lg={8}>
|
||||||
|
<div className={styles.sidebar}>
|
||||||
|
<HotTopics topics={hotTopics} />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
176
src/pages/topic/publish.less
Normal file
176
src/pages/topic/publish.less
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
.publishPage {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.publishCard {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.publishForm {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.ant-form-item-label > label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleInput {
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categorySelect {
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.ant-select-selector {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentInput {
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagsInput {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploadComponent {
|
||||||
|
.ant-upload-select-picture-card {
|
||||||
|
width: 200px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px dashed #d9d9d9;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #6f8cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploadImage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploadPlaceholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #d9d9d9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploadText {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitSection {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.submitButton {
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 32px;
|
||||||
|
border-radius: 22px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancelButton {
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 32px;
|
||||||
|
border-radius: 22px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.publishPage {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.publishCard {
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.publishForm {
|
||||||
|
.uploadComponent {
|
||||||
|
.ant-upload-select-picture-card {
|
||||||
|
width: 150px;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitSection {
|
||||||
|
.submitButton,
|
||||||
|
.cancelButton {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.publishForm {
|
||||||
|
.uploadComponent {
|
||||||
|
.ant-upload-select-picture-card {
|
||||||
|
width: 120px;
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
195
src/pages/topic/publish.tsx
Normal file
195
src/pages/topic/publish.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Card, Form, Input, Select, Button, Upload, message, Space, Typography } from 'antd';
|
||||||
|
import { PlusOutlined, ArrowLeftOutlined } from '@ant-design/icons';
|
||||||
|
import { useNavigate } from 'umi';
|
||||||
|
import { topicApi, configApi } from '../../services/api';
|
||||||
|
import type { Topic } from '../../services/mockData';
|
||||||
|
import styles from './publish.less';
|
||||||
|
|
||||||
|
const { Title } = Typography;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
export default function PublishTopicPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [categories, setCategories] = useState<Array<{label: string, value: string}>>([]);
|
||||||
|
const [imageUrl, setImageUrl] = useState<string>('');
|
||||||
|
|
||||||
|
// 获取分类选项
|
||||||
|
useEffect(() => {
|
||||||
|
configApi.getCategories().then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
setCategories(res.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSubmit = async (values: any) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const topicData: Partial<Topic> = {
|
||||||
|
title: values.title,
|
||||||
|
content: values.content,
|
||||||
|
category: values.category,
|
||||||
|
tags: values.tags ? values.tags.split(',').map((tag: string) => tag.trim()) : [],
|
||||||
|
imageUrl: imageUrl
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await topicApi.publishTopic(topicData);
|
||||||
|
if (response.success) {
|
||||||
|
message.success('话题发布成功！');
|
||||||
|
navigate(`/topic/${response.data.id}`);
|
||||||
|
} else {
|
||||||
|
message.error('发布失败，请重试');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('发布失败，请重试');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageUpload = (info: any) => {
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
// 模拟上传成功，实际项目中需要调用上传API
|
||||||
|
const mockUrl = `https://picsum.photos/400/200?random=${Date.now()}`;
|
||||||
|
setImageUrl(mockUrl);
|
||||||
|
message.success('图片上传成功');
|
||||||
|
} else if (info.file.status === 'error') {
|
||||||
|
message.error('图片上传失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
navigate('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.publishPage}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<Button
|
||||||
|
icon={<ArrowLeftOutlined />}
|
||||||
|
onClick={handleCancel}
|
||||||
|
className={styles.backButton}
|
||||||
|
>
|
||||||
|
返回首页
|
||||||
|
</Button>
|
||||||
|
<Title level={2}>发布话题</Title>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className={styles.publishCard}>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
className={styles.publishForm}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label="话题标题"
|
||||||
|
name="title"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入话题标题' },
|
||||||
|
{ max: 100, message: '标题不能超过100个字符' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="请输入话题标题"
|
||||||
|
size="large"
|
||||||
|
className={styles.titleInput}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="话题分类"
|
||||||
|
name="category"
|
||||||
|
rules={[{ required: true, message: '请选择话题分类' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择话题分类"
|
||||||
|
size="large"
|
||||||
|
className={styles.categorySelect}
|
||||||
|
>
|
||||||
|
{categories.map(category => (
|
||||||
|
<Option key={category.value} value={category.value}>
|
||||||
|
{category.label}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="话题内容"
|
||||||
|
name="content"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入话题内容' },
|
||||||
|
{ min: 10, message: '内容至少需要10个字符' }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
rows={8}
|
||||||
|
placeholder="请详细描述你的话题内容..."
|
||||||
|
className={styles.contentInput}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="话题标签"
|
||||||
|
name="tags"
|
||||||
|
extra="多个标签请用逗号分隔"
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="例如：AI,智能客服,产品发布"
|
||||||
|
className={styles.tagsInput}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="话题封面"
|
||||||
|
name="cover"
|
||||||
|
>
|
||||||
|
<Upload
|
||||||
|
listType="picture-card"
|
||||||
|
showUploadList={false}
|
||||||
|
onChange={handleImageUpload}
|
||||||
|
beforeUpload={() => false} // 阻止自动上传，这里只是模拟
|
||||||
|
className={styles.uploadComponent}
|
||||||
|
>
|
||||||
|
{imageUrl ? (
|
||||||
|
<img src={imageUrl} alt="cover" className={styles.uploadImage} />
|
||||||
|
) : (
|
||||||
|
<div className={styles.uploadPlaceholder}>
|
||||||
|
<PlusOutlined />
|
||||||
|
<div className={styles.uploadText}>上传封面</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Upload>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item className={styles.submitSection}>
|
||||||
|
<Space size="middle">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
loading={loading}
|
||||||
|
size="large"
|
||||||
|
className={styles.submitButton}
|
||||||
|
>
|
||||||
|
发布话题
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleCancel}
|
||||||
|
size="large"
|
||||||
|
className={styles.cancelButton}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
272
src/services/api.ts
Normal file
272
src/services/api.ts
Normal file
@@ -0,0 +1,272 @@
|
|||||||
|
import { mockTopics, mockComments, mockUser, categories, sortOptions, Topic, Comment, User } from './mockData';
|
||||||
|
|
||||||
|
// API响应类型
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
success: boolean;
|
||||||
|
data: T;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PaginatedResponse<T> {
|
||||||
|
list: T[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟网络延迟
|
||||||
|
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
|
||||||
|
// 话题相关API
|
||||||
|
export const topicApi = {
|
||||||
|
// 获取话题列表
|
||||||
|
async getTopics(params: {
|
||||||
|
page?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
category?: string;
|
||||||
|
sort?: string;
|
||||||
|
search?: string;
|
||||||
|
} = {}): Promise<ApiResponse<PaginatedResponse<Topic>>> {
|
||||||
|
await delay(500); // 模拟网络请求
|
||||||
|
|
||||||
|
let filteredTopics = [...mockTopics];
|
||||||
|
|
||||||
|
// 分类筛选
|
||||||
|
if (params.category && params.category !== 'all') {
|
||||||
|
filteredTopics = filteredTopics.filter(topic => topic.category === params.category);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索筛选
|
||||||
|
if (params.search) {
|
||||||
|
const searchLower = params.search.toLowerCase();
|
||||||
|
filteredTopics = filteredTopics.filter(topic =>
|
||||||
|
topic.title.toLowerCase().includes(searchLower) ||
|
||||||
|
topic.content.toLowerCase().includes(searchLower) ||
|
||||||
|
topic.tags.some(tag => tag.toLowerCase().includes(searchLower))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 排序
|
||||||
|
if (params.sort) {
|
||||||
|
switch (params.sort) {
|
||||||
|
case 'hot':
|
||||||
|
filteredTopics.sort((a, b) => (b.likes + b.views + b.comments) - (a.likes + a.views + a.comments));
|
||||||
|
break;
|
||||||
|
case 'latest':
|
||||||
|
filteredTopics.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||||
|
break;
|
||||||
|
case 'comments':
|
||||||
|
filteredTopics.sort((a, b) => b.comments - a.comments);
|
||||||
|
break;
|
||||||
|
case 'likes':
|
||||||
|
filteredTopics.sort((a, b) => b.likes - a.likes);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = params.page || 1;
|
||||||
|
const pageSize = params.pageSize || 10;
|
||||||
|
const start = (page - 1) * pageSize;
|
||||||
|
const end = start + pageSize;
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
list: filteredTopics.slice(start, end),
|
||||||
|
total: filteredTopics.length,
|
||||||
|
page,
|
||||||
|
pageSize
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取热门话题排行
|
||||||
|
async getHotTopics(limit: number = 5): Promise<ApiResponse<Topic[]>> {
|
||||||
|
await delay(300);
|
||||||
|
|
||||||
|
const hotTopics = [...mockTopics]
|
||||||
|
.sort((a, b) => (b.likes + b.views + b.comments) - (a.likes + a.views + a.comments))
|
||||||
|
.slice(0, limit);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: hotTopics
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取话题详情
|
||||||
|
async getTopicDetail(id: string): Promise<ApiResponse<Topic>> {
|
||||||
|
await delay(400);
|
||||||
|
|
||||||
|
const topic = mockTopics.find(t => t.id === id);
|
||||||
|
if (!topic) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
data: null as any,
|
||||||
|
message: '话题不存在'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: topic
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取话题评论
|
||||||
|
async getTopicComments(topicId: string): Promise<ApiResponse<Comment[]>> {
|
||||||
|
await delay(300);
|
||||||
|
|
||||||
|
// 模拟根据话题ID返回评论
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: mockComments
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点赞话题
|
||||||
|
async likeTopic(id: string): Promise<ApiResponse<{ liked: boolean; likes: number }>> {
|
||||||
|
await delay(200);
|
||||||
|
|
||||||
|
const topic = mockTopics.find(t => t.id === id);
|
||||||
|
if (topic) {
|
||||||
|
topic.isLiked = !topic.isLiked;
|
||||||
|
topic.likes += topic.isLiked ? 1 : -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
liked: topic?.isLiked || false,
|
||||||
|
likes: topic?.likes || 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 收藏话题
|
||||||
|
async favoriteTopic(id: string): Promise<ApiResponse<{ favorited: boolean }>> {
|
||||||
|
await delay(200);
|
||||||
|
|
||||||
|
const topic = mockTopics.find(t => t.id === id);
|
||||||
|
if (topic) {
|
||||||
|
topic.isFavorited = !topic.isFavorited;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
favorited: topic?.isFavorited || false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 发布话题
|
||||||
|
async publishTopic(topic: Partial<Topic>): Promise<ApiResponse<Topic>> {
|
||||||
|
await delay(1000);
|
||||||
|
|
||||||
|
const newTopic: Topic = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
title: topic.title || '',
|
||||||
|
content: topic.content || '',
|
||||||
|
author: topic.author || mockUser,
|
||||||
|
category: topic.category || '其他',
|
||||||
|
tags: topic.tags || [],
|
||||||
|
imageUrl: topic.imageUrl,
|
||||||
|
likes: 0,
|
||||||
|
views: 0,
|
||||||
|
comments: 0,
|
||||||
|
shares: 0,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
};
|
||||||
|
|
||||||
|
mockTopics.unshift(newTopic);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: newTopic
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 评论相关API
|
||||||
|
export const commentApi = {
|
||||||
|
// 发布评论
|
||||||
|
async publishComment(topicId: string, content: string, parentId?: string): Promise<ApiResponse<Comment>> {
|
||||||
|
await delay(500);
|
||||||
|
|
||||||
|
const newComment: Comment = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
content,
|
||||||
|
author: mockUser,
|
||||||
|
likes: 0,
|
||||||
|
replies: [],
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
isLiked: false
|
||||||
|
};
|
||||||
|
|
||||||
|
mockComments.unshift(newComment);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: newComment
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点赞评论
|
||||||
|
async likeComment(id: string): Promise<ApiResponse<{ liked: boolean; likes: number }>> {
|
||||||
|
await delay(200);
|
||||||
|
|
||||||
|
const comment = mockComments.find(c => c.id === id);
|
||||||
|
if (comment) {
|
||||||
|
comment.isLiked = !comment.isLiked;
|
||||||
|
comment.likes += comment.isLiked ? 1 : -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
liked: comment?.isLiked || false,
|
||||||
|
likes: comment?.likes || 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 用户相关API
|
||||||
|
export const userApi = {
|
||||||
|
// 获取当前用户信息
|
||||||
|
async getCurrentUser(): Promise<ApiResponse<User>> {
|
||||||
|
await delay(200);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: mockUser
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 配置相关API
|
||||||
|
export const configApi = {
|
||||||
|
// 获取分类选项
|
||||||
|
async getCategories(): Promise<ApiResponse<typeof categories>> {
|
||||||
|
await delay(100);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: categories
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取排序选项
|
||||||
|
async getSortOptions(): Promise<ApiResponse<typeof sortOptions>> {
|
||||||
|
await delay(100);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: sortOptions
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
257
src/services/mockData.ts
Normal file
257
src/services/mockData.ts
Normal file
@@ -0,0 +1,257 @@
|
|||||||
|
// Mock数据定义
|
||||||
|
export interface Topic {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
author: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
};
|
||||||
|
category: string;
|
||||||
|
tags: string[];
|
||||||
|
imageUrl?: string;
|
||||||
|
likes: number;
|
||||||
|
views: number;
|
||||||
|
comments: number;
|
||||||
|
shares: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
isLiked?: boolean;
|
||||||
|
isFavorited?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Comment {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
author: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
};
|
||||||
|
likes: number;
|
||||||
|
replies: Comment[];
|
||||||
|
createdAt: string;
|
||||||
|
isLiked?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
email: string;
|
||||||
|
role: 'user' | 'admin';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock数据
|
||||||
|
export const mockTopics: Topic[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'AutoBeeAgent使用规则详解：如何正确配置和使用智能客服',
|
||||||
|
content: 'AutoBeeAgent作为AI驱动的智能客服解决方案，在使用过程中需要遵循特定的规则和最佳实践。本指南详细介绍了Agent配置、对话流程设计、知识库管理、性能优化等核心使用规则，帮助用户充分发挥AutoBeeAgent的智能化能力。',
|
||||||
|
author: {
|
||||||
|
id: 'user1',
|
||||||
|
name: 'AutoBee专家',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1'
|
||||||
|
},
|
||||||
|
category: '使用规则',
|
||||||
|
tags: ['AutoBeeAgent', '使用规则', '配置指南'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=1',
|
||||||
|
likes: 12000,
|
||||||
|
views: 15000,
|
||||||
|
comments: 45,
|
||||||
|
shares: 120,
|
||||||
|
createdAt: '2025-09-05T10:00:00Z',
|
||||||
|
updatedAt: '2025-09-05T10:00:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'RPA机器人流程自动化入门：从零开始学习RPA技术',
|
||||||
|
content: 'RPA（Robotic Process Automation）机器人流程自动化是当前企业数字化转型的重要技术。本文从基础概念讲起，详细介绍了RPA的工作原理、应用场景、主流工具选择以及实施策略。无论你是技术新手还是有经验的开发者，都能从中获得实用的RPA知识。',
|
||||||
|
author: {
|
||||||
|
id: 'user2',
|
||||||
|
name: 'RPA导师',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2'
|
||||||
|
},
|
||||||
|
category: 'RPA知识',
|
||||||
|
tags: ['RPA', '流程自动化', '入门教程'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=2',
|
||||||
|
likes: 8500,
|
||||||
|
views: 12000,
|
||||||
|
comments: 23,
|
||||||
|
shares: 56,
|
||||||
|
createdAt: '2025-09-09T14:30:00Z',
|
||||||
|
updatedAt: '2025-09-09T14:30:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: 'AutoBeeAgent最佳实践：如何设计高效的对话流程',
|
||||||
|
content: '对话流程设计是AutoBeeAgent成功应用的关键。本指南分享了对话流程设计的最佳实践，包括意图识别优化、上下文管理、异常处理、用户引导等核心技巧。通过合理的流程设计，可以显著提升用户满意度和问题解决率。',
|
||||||
|
author: {
|
||||||
|
id: 'user3',
|
||||||
|
name: '对话设计师',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3'
|
||||||
|
},
|
||||||
|
category: '使用规则',
|
||||||
|
tags: ['对话设计', '最佳实践', '流程优化'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=3',
|
||||||
|
likes: 32000,
|
||||||
|
views: 45000,
|
||||||
|
comments: 156,
|
||||||
|
shares: 890,
|
||||||
|
createdAt: '2025-06-30T09:15:00Z',
|
||||||
|
updatedAt: '2025-06-30T09:15:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
title: 'RPA实施策略：企业如何成功部署RPA解决方案',
|
||||||
|
content: 'RPA项目的成功实施需要科学的策略和方法。本文深入分析了RPA项目的前期准备、流程选择、工具选型、团队建设、风险管控等关键环节。结合真实案例，为企业提供了一套完整的RPA实施方法论，帮助避免常见的实施陷阱。',
|
||||||
|
author: {
|
||||||
|
id: 'user4',
|
||||||
|
name: 'RPA顾问',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=4'
|
||||||
|
},
|
||||||
|
category: 'RPA知识',
|
||||||
|
tags: ['RPA实施', '项目策略', '企业应用'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=4',
|
||||||
|
likes: 28000,
|
||||||
|
views: 38000,
|
||||||
|
comments: 89,
|
||||||
|
shares: 234,
|
||||||
|
createdAt: '2025-06-23T16:45:00Z',
|
||||||
|
updatedAt: '2025-06-23T16:45:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
title: 'AutoBeeAgent知识库管理：构建高质量的知识体系',
|
||||||
|
content: '知识库是AutoBeeAgent智能客服的核心组件，其质量直接影响服务质量。本指南详细介绍了知识库构建、维护、优化的完整流程，包括内容结构设计、知识分类、更新策略、质量评估等关键环节，帮助用户建立高效的知识管理体系。',
|
||||||
|
author: {
|
||||||
|
id: 'user5',
|
||||||
|
name: '知识管理专家',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=5'
|
||||||
|
},
|
||||||
|
category: '使用规则',
|
||||||
|
tags: ['知识库', '内容管理', '质量优化'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=5',
|
||||||
|
likes: 15000,
|
||||||
|
views: 22000,
|
||||||
|
comments: 67,
|
||||||
|
shares: 145,
|
||||||
|
createdAt: '2025-08-15T11:20:00Z',
|
||||||
|
updatedAt: '2025-08-15T11:20:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
title: 'RPA工具对比分析：UiPath vs Automation Anywhere vs Blue Prism',
|
||||||
|
content: '选择合适的RPA工具是项目成功的关键因素。本文对三大主流RPA平台进行了全面对比分析，包括功能特性、技术架构、易用性、成本效益、生态系统等多个维度。通过详细的对比表格和实际案例，帮助读者做出明智的工具选择决策。',
|
||||||
|
author: {
|
||||||
|
id: 'user6',
|
||||||
|
name: 'RPA分析师',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=6'
|
||||||
|
},
|
||||||
|
category: 'RPA知识',
|
||||||
|
tags: ['RPA工具', '对比分析', '选型指南'],
|
||||||
|
imageUrl: 'https://picsum.photos/400/200?random=6',
|
||||||
|
likes: 18000,
|
||||||
|
views: 25000,
|
||||||
|
comments: 78,
|
||||||
|
shares: 167,
|
||||||
|
createdAt: '2025-07-10T13:30:00Z',
|
||||||
|
updatedAt: '2025-07-10T13:30:00Z',
|
||||||
|
isLiked: false,
|
||||||
|
isFavorited: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const mockComments: Comment[] = [
|
||||||
|
{
|
||||||
|
id: 'comment1',
|
||||||
|
content: 'AutoBeeAgent的配置规则讲解得很详细，特别是对话流程设计这部分，对我们团队帮助很大！',
|
||||||
|
author: {
|
||||||
|
id: 'user7',
|
||||||
|
name: '技术爱好者',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=7'
|
||||||
|
},
|
||||||
|
likes: 15,
|
||||||
|
replies: [
|
||||||
|
{
|
||||||
|
id: 'reply1',
|
||||||
|
content: '是的，知识库管理的最佳实践也很实用，我们正在按照这个指南优化我们的知识体系',
|
||||||
|
author: {
|
||||||
|
id: 'user8',
|
||||||
|
name: '产品经理',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=8'
|
||||||
|
},
|
||||||
|
likes: 8,
|
||||||
|
replies: [],
|
||||||
|
createdAt: '2025-09-05T12:30:00Z',
|
||||||
|
isLiked: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
createdAt: '2025-09-05T11:45:00Z',
|
||||||
|
isLiked: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'comment2',
|
||||||
|
content: 'RPA入门教程写得很全面，我们公司正准备引入RPA技术，这篇文章给了我们很好的指导。',
|
||||||
|
author: {
|
||||||
|
id: 'user9',
|
||||||
|
name: '企业IT负责人',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=9'
|
||||||
|
},
|
||||||
|
likes: 12,
|
||||||
|
replies: [],
|
||||||
|
createdAt: '2025-09-09T15:20:00Z',
|
||||||
|
isLiked: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'comment3',
|
||||||
|
content: 'RPA工具对比分析很有价值，帮助我们快速了解了各平台的优劣势，选型决策更有依据了。',
|
||||||
|
author: {
|
||||||
|
id: 'user10',
|
||||||
|
name: 'RPA新手',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=10'
|
||||||
|
},
|
||||||
|
likes: 25,
|
||||||
|
replies: [],
|
||||||
|
createdAt: '2025-06-30T10:30:00Z',
|
||||||
|
isLiked: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const mockUser: User = {
|
||||||
|
id: 'current_user',
|
||||||
|
name: 'Itcat666666',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=current',
|
||||||
|
email: 'user@example.com',
|
||||||
|
role: 'user'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分类选项
|
||||||
|
export const categories = [
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '使用规则', value: '使用规则' },
|
||||||
|
{ label: 'RPA知识', value: 'RPA知识' },
|
||||||
|
{ label: '最佳实践', value: '最佳实践' },
|
||||||
|
{ label: '技术教程', value: '技术教程' },
|
||||||
|
{ label: '案例分析', value: '案例分析' },
|
||||||
|
{ label: '工具推荐', value: '工具推荐' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 排序选项
|
||||||
|
export const sortOptions = [
|
||||||
|
{ label: '最热', value: 'hot' },
|
||||||
|
{ label: '最新', value: 'latest' },
|
||||||
|
{ label: '最多评论', value: 'comments' },
|
||||||
|
{ label: '最多点赞', value: 'likes' }
|
||||||
|
];
|
||||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "./src/.umi/tsconfig.json"
|
||||||
|
}
|
||||||
1
typings.d.ts
vendored
Normal file
1
typings.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import 'umi/typings';
|
||||||
Reference in New Issue
Block a user