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