保存本地对routes.ts的修改
Change-Id: I4f4dbd8069893d7363e251130791dc0594be44e1
diff --git a/src/feature/work/WorkPage.tsx b/src/feature/work/WorkPage.tsx
new file mode 100644
index 0000000..3a108a7
--- /dev/null
+++ b/src/feature/work/WorkPage.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { Button, Tabs, message, Spin, Tag, Typography, Space, Divider } from 'antd';
+import { ArrowLeftOutlined, LikeOutlined, BugOutlined, CommentOutlined } from '@ant-design/icons';
+import WorkAPI from '../../api/workApi';
+import BugReportSection from '../../components/BugReportSection';
+import DiscussionSection from '../../components/DiscussionSection';
+import type { Work } from '../../api/otherType';
+
+const { Title, Text, Paragraph } = Typography;
+const { TabPane } = Tabs;
+
+const WorkPage: React.FC = () => {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const [work, setWork] = useState<Work | null>(null);
+ const [loading, setLoading] = useState(true);
+ const [activeTab, setActiveTab] = useState('details');
+
+ // 加载作品数据
+ useEffect(() => {
+ const loadWork = async () => {
+ try {
+ const workData = await WorkAPI.getWorkById(Number(id));
+ setWork(workData);
+ } catch (error) {
+ message.error('加载作品失败');
+ navigate('/');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadWork();
+ }, [id, navigate]);
+
+ // 点赞处理
+ const handleLike = async () => {
+ try {
+ await WorkAPI.likeWork(Number(id));
+ setWork(prev => prev ? { ...prev, likes: prev.likes + 1 } : null);
+ message.success('点赞成功');
+ } catch (error) {
+ message.error('点赞失败');
+ }
+ };
+
+ if (loading) {
+ return <Spin size="large" className="center-spinner" />;
+ }
+
+ if (!work) {
+ return <div>作品不存在</div>;
+ }
+
+ return (
+ <div className="work-page-container">
+ <Button
+ type="text"
+ icon={<ArrowLeftOutlined />}
+ onClick={() => navigate(-1)}
+ className="back-button"
+ >
+ 返回
+ </Button>
+
+ <div className="work-header">
+ <Title level={2}>{work.title}</Title>
+ <Text type="secondary">作者: {work.author}</Text>
+
+ <div className="work-meta">
+ <Space size="middle">
+ <Tag color="blue">{work.categoryName}</Tag>
+ <Text>浏览: {work.views}</Text>
+ <Text>点赞: {work.likes}</Text>
+ <Text>上传时间: {new Date(work.createTime).toLocaleDateString()}</Text>
+ </Space>
+ </div>
+
+ <Button
+ type="primary"
+ icon={<LikeOutlined />}
+ onClick={handleLike}
+ className="like-button"
+ >
+ 点赞
+ </Button>
+ </div>
+
+ <Divider />
+
+ <Tabs activeKey={activeTab} onChange={setActiveTab}>
+ <TabPane tab="作品详情" key="details">
+ <div className="work-content">
+ <Title level={4}>作品描述</Title>
+ <Paragraph>{work.description}</Paragraph>
+
+ <Title level={4}>作品内容</Title>
+ <div className="content-container">
+ {work.content}
+ </div>
+ </div>
+ </TabPane>
+
+ <TabPane
+ tab={
+ <span>
+ <BugOutlined /> Bug反馈
+ </span>
+ }
+ key="bugs"
+ >
+ <BugReportSection workId={work.id} />
+ </TabPane>
+
+ <TabPane
+ tab={
+ <span>
+ <CommentOutlined /> 交流区
+ </span>
+ }
+ key="discussions"
+ >
+ <DiscussionSection workId={work.id} />
+ </TabPane>
+ </Tabs>
+ </div>
+ );
+};
+
+export default WorkPage;
\ No newline at end of file