diff --git a/src/api/categoryApi.ts b/src/api/categoryApi.ts
new file mode 100644
index 0000000..816ac71
--- /dev/null
+++ b/src/api/categoryApi.ts
@@ -0,0 +1,90 @@
+import axios from 'axios';
+import type { CategoryDTO, Category, WorkResponse } from './otherType';
+
+const API_BASE_URL = '/api';
+
+class CategoryAPI {
+  /**
+   * 获取全部分区（树形结构）
+   * @returns 返回分区的树形结构数据
+   */
+  static getCategoryTree(): Promise<CategoryDTO[]> {
+    return axios.get<CategoryDTO[]>(`${API_BASE_URL}/categories`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取单个分区详情
+   * @param id 分区ID
+   * @returns 返回单个分区的详细信息
+   */
+  static getCategory(id: number): Promise<Category> {
+    return axios.get<Category>(`${API_BASE_URL}/categories/${id}`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 创建新分区
+   * @param category 分区数据（不包含ID）
+   * @returns 返回创建成功的消息
+   */
+  static createCategory(category: Omit<Category, 'id'>): Promise<string> {
+    return axios.post<string>(`${API_BASE_URL}/categories`, category)
+      .then(response => response.data);
+  }
+
+  /**
+   * 更新分区信息
+   * @param id 分区ID
+   * @param category 更新后的分区数据
+   * @returns 返回更新成功的消息
+   */
+  static updateCategory(id: number, category: Partial<Category>): Promise<string> {
+    return axios.put<string>(`${API_BASE_URL}/categories/${id}`, category)
+      .then(response => response.data);
+  }
+
+  /**
+   * 删除分区
+   * @param id 分区ID
+   * @returns 返回删除成功的消息
+   */
+  static deleteCategory(id: number): Promise<string> {
+    return axios.delete<string>(`${API_BASE_URL}/categories/${id}`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取分区下的作品列表（带分页）
+   * @param categoryId 分区ID
+   * @param params 分页和排序参数
+   * @returns 返回作品列表和分页信息
+   */
+  static getWorksByCategory(
+    categoryId: number,
+    params?: {
+      page?: number;
+      size?: number;
+      sort?: string;
+    }
+  ): Promise<WorkResponse> {
+    return axios.get<WorkResponse>(`${API_BASE_URL}/works`, {
+      params: {
+        categoryId,
+        ...params
+      }
+    }).then(response => response.data);
+  }
+
+  /**
+   * 获取子分区列表
+   * @param parentId 父分区ID
+   * @returns 返回子分区列表
+   */
+  static getSubCategories(parentId: number): Promise<CategoryDTO[]> {
+    return axios.get<CategoryDTO[]>(`${API_BASE_URL}/categories/${parentId}/children`)
+      .then(response => response.data);
+  }
+}
+
+export default CategoryAPI;
\ No newline at end of file
diff --git a/src/api/categoryTypes.ts b/src/api/categoryTypes.ts
new file mode 100644
index 0000000..4a46034
--- /dev/null
+++ b/src/api/categoryTypes.ts
@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+
+// 基础分类接口
+export interface CategoryDTO {
+  id: number;
+  name: string;
+  description?: string;
+  parentId?: number;  // 移除了 null 类型，只保留 number | undefined
+  children?: CategoryDTO[];
+  workCount?: number;
+}
+
+
+// 基础资源接口
+interface BaseResource {
+  id: number;
+  title: string;
+  categoryId: number;
+  categoryName: string;
+  uploadDate: string;
+  uploader: string;
+  size: string;
+  seeders: number;
+  leechers: number;
+  downloadCount: number;
+  hash: string;
+}
+
+// 音乐资源
+export interface MusicResource extends BaseResource {
+  category: ReactNode;
+  artist: string;
+  quality: 'MP3 128k' | 'MP3 320k' | 'FLAC' | 'APE' | 'Hi-Res' | 'DSD';
+  genre: string[];
+}
+
+// 影视资源
+export interface MovieResource extends BaseResource {
+  director: string;
+  actors: string[];
+  resolution: '1080p' | '720p' | '4K' | '8K';
+  duration: string;
+}
+
+// 游戏资源
+export interface GameResource extends BaseResource {
+  developer: string;
+  publisher: string;
+  platform: 'PC' | 'PS' | 'Xbox' | 'Switch';
+  releaseDate: string;
+}
+
+// 其他资源
+export interface OtherResource extends BaseResource {
+  description: string;
+  fileType: string;
+}
+
+// 分类DTO
+export interface CategoryDTO {
+  id: number;
+  name: string;
+  description?: string;
+  parentId?: number;
+  children?: CategoryDTO[];
+  workCount?: number;
+}
\ No newline at end of file
diff --git a/src/api/commentApi.ts b/src/api/commentApi.ts
new file mode 100644
index 0000000..360e659
--- /dev/null
+++ b/src/api/commentApi.ts
@@ -0,0 +1,77 @@
+import axios from 'axios';
+import type { Comment, CommentFormData, CommentReply, ReplyFormData } from './otherType';
+
+const API_BASE_URL = '/api';
+
+class CommentAPI {
+  /**
+   * 添加评论
+   */
+  static addComment(data: CommentFormData): Promise<Comment> {
+    return axios.post<Comment>(`${API_BASE_URL}/comments`, data)
+      .then(response => response.data);
+  }
+
+  /**
+   * 删除评论
+   */
+  static deleteComment(commentId: number): Promise<void> {
+    return axios.delete(`${API_BASE_URL}/comments/${commentId}`);
+  }
+
+  /**
+   * 更新评论
+   */
+  static updateComment(commentId: number, data: CommentFormData): Promise<Comment> {
+    return axios.put<Comment>(`${API_BASE_URL}/comments/${commentId}`, data)
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取单个评论
+   */
+  static getCommentById(commentId: number): Promise<Comment> {
+    return axios.get<Comment>(`${API_BASE_URL}/comments/${commentId}`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取帖子下的所有评论
+   */
+  static getCommentsByPostId(postId: number): Promise<Comment[]> {
+    return axios.get<Comment[]>(`${API_BASE_URL}/comments/post/${postId}`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 添加回复
+   */
+  static addReply(commentId: number, data: ReplyFormData): Promise<CommentReply> {
+    return axios.post<CommentReply>(`${API_BASE_URL}/comments/${commentId}/replies`, data)
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取评论的所有回复
+   */
+  static getReplies(commentId: number): Promise<CommentReply[]> {
+    return axios.get<CommentReply[]>(`${API_BASE_URL}/comments/${commentId}/replies`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 点赞评论
+   */
+  static likeComment(commentId: number): Promise<void> {
+    return axios.post(`${API_BASE_URL}/comments/${commentId}/like`);
+  }
+
+  /**
+   * 举报评论
+   */
+  static reportComment(commentId: number, reason: string): Promise<void> {
+    return axios.post(`${API_BASE_URL}/comments/${commentId}/report`, { reason });
+  }
+}
+
+export default CommentAPI;
\ No newline at end of file
diff --git a/src/api/otherType.ts b/src/api/otherType.ts
new file mode 100644
index 0000000..60523d0
--- /dev/null
+++ b/src/api/otherType.ts
@@ -0,0 +1,164 @@
+// 认证相关类型
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  user: string;
+  token: string;
+  refreshToken: string;
+}
+
+export interface CommonResponse<T= null> {
+    code: number;       
+    message: string;     
+    data: T;          
+}
+
+// 作品相关类型
+export interface Work {
+  size: string;
+  data(data: any): unknown;
+  artist: string;
+  quality: string;
+  genre: string[];
+  id: number;
+  title: string;
+  author: string;
+  authorId: number;
+  views: number;
+  likes: number;
+  categoryId: number;
+  categoryName: string;
+  description: string;
+  content: string;
+  coverUrl: string;
+  createTime: string;
+  attachments: Attachment[];
+  bugCount: number;
+  discussionCount: number;
+}
+
+export interface WorkResponse {
+  content: Work[];
+  totalElements: number;
+  totalPages: number;
+}
+
+export interface WorkFormData {
+  title: string;
+  categoryId: number;
+  description: string;
+  content: string;
+  coverFile?: File;
+  attachments?: File[];
+}
+
+// Bug反馈相关类型
+export interface BugReport {
+  id: number;
+  title: string;
+  description: string;
+  severity: 'low' | 'medium' | 'high';
+  status: 'open' | 'resolved' | 'wontfix';
+  reporter: string;
+  reporterId: number;
+  workId: number;
+  createTime: string;
+}
+
+// 讨论区相关类型
+export interface Discussion {
+  id: number;
+  title: string;
+  content: string;
+  author: string;
+  authorId: number;
+  workId: number;
+  isPinned: boolean;
+  commentCount: number;
+  createTime: string;
+  lastUpdateTime: string;
+}
+
+export interface DiscussionFormData {
+  workId: number;
+  title: string;
+  content: string;
+}
+
+// 评论相关类型
+export interface Comment {
+  id: number;
+  author: string;
+  avatar: string;
+  content: string;
+  likes: number;
+  replyCount: number;
+  createTime: string;
+  replies?: CommentReply[];
+}
+
+export interface CommentFormData {
+  postId: number; // 可以是作品ID或讨论区ID
+  content: string;
+  parentId?: number; // 用于回复评论
+}
+
+export interface CommentReply {
+  id: number;
+  author: string;
+  avatar: string;
+  content: string;
+  likes: number;
+  createTime: string;
+}
+
+export interface ReplyFormData {
+  content: string;
+}
+
+// 分区相关类型
+export interface Category {
+  id: number;
+  name: string;
+  description?: string;
+  parentId?: number | null;
+  coverUrl?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface CategoryDTO extends Category {
+  children?: CategoryDTO[];
+  workCount?: number;
+}
+
+// 用户相关类型
+export interface User {
+  id: number;
+  username: string;
+  email: string;
+  avatar?: string;
+  role: 'user' | 'admin';
+  createdAt: string;
+  worksCount: number;
+  completedWorks: number;
+}
+
+// 通用类型
+export interface Attachment {
+  id: number;
+  name: string;
+  url: string;
+  size: string;
+}
+
+// API响应通用类型
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
\ No newline at end of file
diff --git a/src/api/workApi.ts b/src/api/workApi.ts
new file mode 100644
index 0000000..d624821
--- /dev/null
+++ b/src/api/workApi.ts
@@ -0,0 +1,105 @@
+import axios from 'axios';
+import type { Work, WorkResponse, WorkFormData, BugReport, Discussion } from './otherType';
+
+const API_BASE_URL = '/api';
+
+class WorkAPI {
+  /**
+   * 获取作品列表（支持分页、分类筛选和搜索）
+   */
+  static getWorks(params?: {
+    categoryId?: number;
+    page?: number;
+    size?: number;
+    search?: string;
+  }): Promise<WorkResponse> {
+    return axios.get<WorkResponse>(`${API_BASE_URL}/works`, { params })
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取单个作品详情
+   */
+  static getWorkById(id: number): Promise<Work> {
+    return axios.get<Work>(`${API_BASE_URL}/works/${id}`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 创建新作品
+   */
+  static createWork(data: WorkFormData): Promise<Work> {
+    return axios.post<Work>(`${API_BASE_URL}/works`, data)
+      .then(response => response.data);
+  }
+
+  /**
+   * 更新作品信息
+   */
+  static updateWork(id: number, data: WorkFormData): Promise<Work> {
+    return axios.put<Work>(`${API_BASE_URL}/works/${id}`, data)
+      .then(response => response.data);
+  }
+
+  /**
+   * 删除作品
+   */
+  static deleteWork(id: number): Promise<void> {
+    return axios.delete(`${API_BASE_URL}/works/${id}`);
+  }
+
+  /**
+   * 点赞作品
+   */
+  static likeWork(id: number): Promise<void> {
+    return axios.post(`${API_BASE_URL}/works/${id}/like`);
+  }
+
+  /**
+   * 根据作者查询作品
+   */
+  static getWorksByAuthor(author: string): Promise<Work[]> {
+    return axios.get<Work[]>(`${API_BASE_URL}/works/byAuthor`, { params: { author } })
+      .then(response => response.data);
+  }
+
+  /**
+   * 获取作品Bug反馈列表
+   */
+  static getBugReports(workId: number): Promise<BugReport[]> {
+    return axios.get<BugReport[]>(`${API_BASE_URL}/works/${workId}/bugs`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 提交Bug反馈
+   */
+  static reportBug(workId: number, data: {
+    title: string;
+    description: string;
+    severity: 'low' | 'medium' | 'high';
+  }): Promise<void> {
+    return axios.post(`${API_BASE_URL}/works/${workId}/bugs`, data);
+  }
+
+  /**
+   * 获取作品讨论区列表
+   */
+  static getDiscussions(workId: number): Promise<Discussion[]> {
+    return axios.get<Discussion[]>(`${API_BASE_URL}/works/${workId}/discussions`)
+      .then(response => response.data);
+  }
+
+  /**
+   * 创建新讨论
+   */
+  static createDiscussion(data: {
+    workId: number;
+    title: string;
+    content: string;
+  }): Promise<void> {
+    return axios.post(`${API_BASE_URL}/discussions`, data);
+  }
+}
+
+export default WorkAPI;
\ No newline at end of file
diff --git a/src/assets/categories/film.jpg b/src/assets/categories/film.jpg
new file mode 100644
index 0000000..3d05b4d
--- /dev/null
+++ b/src/assets/categories/film.jpg
Binary files differ
diff --git a/src/assets/categories/game.jpg b/src/assets/categories/game.jpg
new file mode 100644
index 0000000..15571fe
--- /dev/null
+++ b/src/assets/categories/game.jpg
Binary files differ
diff --git a/src/assets/categories/music.jpg b/src/assets/categories/music.jpg
new file mode 100644
index 0000000..47dda2c
--- /dev/null
+++ b/src/assets/categories/music.jpg
Binary files differ
diff --git a/src/assets/categories/other.jpg b/src/assets/categories/other.jpg
new file mode 100644
index 0000000..b7385c0
--- /dev/null
+++ b/src/assets/categories/other.jpg
Binary files differ
diff --git a/src/components/BugReportSection.tsx b/src/components/BugReportSection.tsx
new file mode 100644
index 0000000..a512fc6
--- /dev/null
+++ b/src/components/BugReportSection.tsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { List, Button, Form, Input, Select, message, Typography, Tag, Divider, Pagination } from 'antd';
+import { BugOutlined } from '@ant-design/icons';
+import WorkAPI from '../api/workApi';
+import type { BugReport } from '../api/otherType';
+
+const { Text } = Typography;
+const { Option } = Select;
+const { TextArea } = Input;
+
+interface BugReportForm {
+  title: string;
+  description: string;
+  severity: 'low' | 'medium' | 'high';
+}
+
+const BugReportSection: React.FC<{ workId: number }> = ({ workId }) => {
+  const [bugs, setBugs] = useState<BugReport[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5); // 每页显示5条
+
+  // 加载Bug反馈列表
+  useEffect(() => {
+    const loadBugs = async () => {
+      try {
+        setLoading(true);
+        const bugList = await WorkAPI.getBugReports(workId);
+        setBugs(bugList);
+      } catch (error) {
+        message.error('加载Bug反馈失败');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadBugs();
+  }, [workId]);
+
+  // 获取当前页的Bug数据
+  const getCurrentPageBugs = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return bugs.slice(startIndex, endIndex);
+  };
+
+  // 提交Bug反馈
+  const handleSubmit = async (values: BugReportForm) => {
+    try {
+      await WorkAPI.reportBug(workId, values);
+      message.success('Bug反馈提交成功');
+      form.resetFields();
+      // 重新加载Bug列表
+      const bugList = await WorkAPI.getBugReports(workId);
+      setBugs(bugList);
+      // 重置到第一页
+      setCurrentPage(1);
+    } catch (error) {
+      message.error('Bug反馈提交失败');
+    }
+  };
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high': return 'red';
+      case 'medium': return 'orange';
+      default: return 'green';
+    }
+  };
+
+  return (
+    <div className="bug-report-section">
+      <Divider orientation="left">
+        <BugOutlined /> Bug反馈
+      </Divider>
+
+      <Form form={form} onFinish={handleSubmit} layout="vertical">
+        <Form.Item
+          name="title"
+          label="Bug标题"
+          rules={[{ required: true, message: '请输入Bug标题' }]}
+        >
+          <Input placeholder="简要描述Bug" />
+        </Form.Item>
+
+        <Form.Item
+          name="severity"
+          label="严重程度"
+          initialValue="medium"
+          rules={[{ required: true }]}
+        >
+          <Select>
+            <Option value="low">低</Option>
+            <Option value="medium">中</Option>
+            <Option value="high">高</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="description"
+          label="详细描述"
+          rules={[{ required: true, message: '请详细描述Bug' }]}
+        >
+          <TextArea rows={4} placeholder="请详细描述Bug出现的步骤、现象和预期结果" />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            提交Bug
+          </Button>
+        </Form.Item>
+      </Form>
+
+      <Divider orientation="left">Bug列表</Divider>
+
+      <List
+        dataSource={getCurrentPageBugs()}
+        loading={loading}
+        renderItem={bug => (
+          <List.Item>
+            <div className="bug-item">
+              <div className="bug-header">
+                <Text strong>{bug.title}</Text>
+                <Tag color={getSeverityColor(bug.severity)}>
+                  {bug.severity === 'high' ? '严重' : bug.severity === 'medium' ? '中等' : '轻微'}
+                </Tag>
+              </div>
+              <Text type="secondary">报告人: {bug.reporter} | 时间: {new Date(bug.createTime).toLocaleString()}</Text>
+              <div className="bug-content">
+                <Text>{bug.description}</Text>
+              </div>
+              <Tag color={bug.status === 'open' ? 'red' : bug.status === 'resolved' ? 'green' : 'gray'}>
+                {bug.status === 'open' ? '未解决' : bug.status === 'resolved' ? '已解决' : '不予解决'}
+              </Tag>
+            </div>
+          </List.Item>
+        )}
+      />
+
+      <div style={{ textAlign: 'right', marginTop: 16 }}>
+        <Pagination
+          current={currentPage}
+          pageSize={pageSize}
+          total={bugs.length}
+          onChange={(page, size) => {
+            setCurrentPage(page);
+            setPageSize(size);
+          }}
+          showSizeChanger
+          showQuickJumper
+          showTotal={total => `共 ${total} 条`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BugReportSection;
\ No newline at end of file
diff --git a/src/components/CustomComment.css b/src/components/CustomComment.css
new file mode 100644
index 0000000..8f9a012
--- /dev/null
+++ b/src/components/CustomComment.css
@@ -0,0 +1,54 @@
+/* src/components/CustomComment.css */
+.custom-comment {
+  margin-bottom: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.custom-comment:last-child {
+  border-bottom: none;
+}
+
+.custom-comment-inner {
+  display: flex;
+}
+
+.custom-comment-avatar {
+  margin-right: 12px;
+}
+
+.custom-comment-content {
+  flex: 1;
+}
+
+.custom-comment-header {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.custom-comment-author {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.custom-comment-datetime {
+  margin-left: 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.custom-comment-text {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.85);
+  white-space: pre-line;
+}
+
+.custom-comment-actions {
+  margin-top: 8px;
+}
+
+.custom-comment-action {
+  padding: 0 4px;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/components/DiscussionSection.tsx b/src/components/DiscussionSection.tsx
new file mode 100644
index 0000000..7fd39c4
--- /dev/null
+++ b/src/components/DiscussionSection.tsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import { List, Button, Form, Input, message, Avatar, Typography, Modal, Pagination } from 'antd';
+import { LikeOutlined, MessageOutlined } from '@ant-design/icons';
+import CommentAPI from '../api/commentApi';
+import type { Comment } from '../api/otherType';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+interface DiscussionSectionProps {
+  workId: number;
+}
+
+const DiscussionSection: React.FC<DiscussionSectionProps> = ({ workId }) => {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5); // 每页显示5条
+
+  // 加载评论
+  useEffect(() => {
+    const loadComments = async () => {
+      try {
+        setLoading(true);
+        const commentList = await CommentAPI.getCommentsByPostId(workId);
+        setComments(commentList);
+      } catch (error) {
+        message.error('加载评论失败');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadComments();
+  }, [workId]);
+
+  // 获取当前页的评论数据
+  const getCurrentPageComments = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return comments.slice(startIndex, endIndex);
+  };
+
+  // 提交新评论
+  const handleSubmit = async (values: { title: string; content: string }) => {
+    try {
+      await CommentAPI.addComment({
+        postId: workId,
+        content: values.content
+      });
+      message.success('评论添加成功');
+      form.resetFields();
+      setModalVisible(false);
+      // 重新加载评论
+      const commentList = await CommentAPI.getCommentsByPostId(workId);
+      setComments(commentList);
+      // 重置到第一页
+      setCurrentPage(1);
+    } catch (error) {
+      message.error('评论添加失败');
+    }
+  };
+
+  // 点赞评论
+  const handleLikeComment = async (commentId: number) => {
+    try {
+      await CommentAPI.likeComment(commentId);
+      setComments(prev => prev.map(comment => 
+        comment.id === commentId 
+          ? { ...comment, likes: (comment.likes || 0) + 1 } 
+          : comment
+      ));
+    } catch (error) {
+      message.error('点赞失败');
+    }
+  };
+
+  return (
+    <div className="discussion-section">
+      <Button 
+        type="primary" 
+        icon={<MessageOutlined />}
+        onClick={() => setModalVisible(true)}
+        style={{ marginBottom: 16 }}
+      >
+        新建讨论
+      </Button>
+
+      <List
+        dataSource={getCurrentPageComments()}
+        loading={loading}
+        renderItem={comment => (
+          <List.Item className="comment-item">
+            <div className="comment-content">
+              <div className="comment-header">
+                <Avatar size="small">
+                  {comment.author?.charAt(0) || '?'}
+                </Avatar>
+                <Text strong>{comment.author || '匿名用户'}</Text>
+                <Text type="secondary">
+                  {comment.createTime ? new Date(comment.createTime).toLocaleString() : '未知时间'}
+                </Text>
+              </div>
+              <div className="comment-body">
+                <Text>{comment.content}</Text>
+              </div>
+              <div className="comment-actions">
+                <Button 
+                  type="text" 
+                  icon={<LikeOutlined />} 
+                  onClick={() => handleLikeComment(comment.id)}
+                >
+                  {comment.likes || 0}
+                </Button>
+              </div>
+            </div>
+          </List.Item>
+        )}
+      />
+
+      <div style={{ textAlign: 'right', marginTop: 16 }}>
+        <Pagination
+          current={currentPage}
+          pageSize={pageSize}
+          total={comments.length}
+          onChange={(page, size) => {
+            setCurrentPage(page);
+            setPageSize(size);
+          }}
+          showSizeChanger
+          showQuickJumper
+          showTotal={total => `共 ${total} 条`}
+        />
+      </div>
+
+      <Modal
+        title={
+          <span>
+            <MessageOutlined style={{ marginRight: 8 }} />
+            新建讨论
+          </span>
+        }
+        visible={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        footer={[
+          <Button key="cancel" onClick={() => setModalVisible(false)}>
+            取消
+          </Button>,
+          <Button 
+            key="submit" 
+            type="primary" 
+            onClick={() => {
+              form.validateFields()
+                .then(values => handleSubmit(values))
+                .catch(() => message.error('请填写完整信息'));
+            }}
+          >
+            创建讨论
+          </Button>,
+        ]}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="title"
+            label="讨论主题"
+            rules={[{ required: true, message: '请输入讨论主题' }]}
+          >
+            <Input placeholder="输入讨论主题" />
+          </Form.Item>
+          
+          <Form.Item
+            name="content"
+            label="讨论内容"
+            rules={[{ required: true, message: '请输入讨论内容' }]}
+          >
+            <TextArea 
+              rows={6} 
+              placeholder="详细描述你想讨论的内容..."
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+
+export default DiscussionSection;
\ No newline at end of file
diff --git a/src/feature/categories/GameCategory.tsx b/src/feature/categories/GameCategory.tsx
new file mode 100644
index 0000000..3f5c78d
--- /dev/null
+++ b/src/feature/categories/GameCategory.tsx
@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { Card, List, message, Spin, Input, Tag, Typography} from 'antd';
+import { SearchOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import CategoryAPI from '../../api/categoryApi';
+import type { GameResource } from '../../api/categoryTypes';
+import { useNavigate } from 'react-router';
+
+const { Text } = Typography;
+const { Search } = Input;
+
+const GameCategory: React.FC = () => {
+  const [games, setGames] = useState<GameResource[]>([]);
+  const [filteredGames, setFilteredGames] = useState<GameResource[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // 加载数据
+useEffect(() => {
+  const loadGames = async () => {
+    try {
+      const response = await CategoryAPI.getWorksByCategory(3);
+      
+      // 类型转换或断言
+      const gameResources = response.content.map((work: any) => ({
+        ...work,
+        developer: (work as any).developer || '未知开发商',
+        publisher: (work as any).publisher || '未知发行商',
+        platform: (work as any).platform || 'PC',
+        releaseDate: (work as any).releaseDate || '未知日期'
+      })) as unknown as GameResource[];
+      
+      setGames(gameResources);
+      setFilteredGames(gameResources);
+    } catch (error) {
+      message.error('加载游戏资源失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  loadGames();
+}, []);
+
+  // 筛选逻辑
+  useEffect(() => {
+    if (!searchQuery) {
+      setFilteredGames(games);
+      return;
+    }
+    
+    const filtered = games.filter(game => 
+      game.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      game.developer.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    
+    setFilteredGames(filtered);
+  }, [searchQuery, games]);
+
+
+  // // 在加载数据部分添加虚拟数据
+  // useEffect(() => {
+  //   const loadGames = async () => {
+  //     try {
+  //       // 模拟API请求
+  //       const mockGames: GameResource[] = [
+  //         {
+  //           id: 5,
+  //           title: '赛博朋克2077',
+  //           developer: 'CD Projekt Red',
+  //           publisher: 'CD Projekt',
+  //           categoryId: 3,
+  //           categoryName: '角色扮演',
+  //           platform: 'PC',
+  //           releaseDate: '2020-12-10',
+  //           seeders: 156,
+  //           leechers: 34,
+  //           uploadDate: '2023-06-01',
+  //           uploader: 'gameLover',
+  //           downloadCount: 2876,
+  //           hash: 'm3n4o5p6q7r8',
+  //           size: '123Mb'
+  //         },
+  //         {
+  //           id: 6,
+  //           title: '艾尔登法环',
+  //           developer: 'FromSoftware',
+  //           publisher: '万代南梦宫',
+  //           categoryId: 3,
+  //           categoryName: '动作冒险',
+  //           releaseDate: '2022-02-25',
+  //           seeders: 201,
+  //           leechers: 45,
+  //           uploadDate: '2023-05-20',
+  //           uploader: 'hardcoreGamer',
+  //           downloadCount: 3542,
+  //           hash: 's9t0u1v2w3x4',
+  //           platform: 'PC',
+  //           size: '234Mb'
+  //         }
+  //       ];
+
+  //       setGames(mockGames);
+  //       setFilteredGames(mockGames);
+  //     } catch (error) {
+  //       message.error('加载游戏资源失败');
+  //     } finally {
+  //       setIsLoading(false);
+  //     }
+  //   };
+    
+  //   loadGames();
+  // }, []);
+  
+  return (
+    <div className="game-category-container">
+      <div className="category-header">
+        <h1><PlayCircleOutlined /> 游戏资源分区</h1>
+        <p>PC、主机游戏资源分享</p>
+      </div>
+      
+      <Search
+        placeholder="搜索游戏名称或开发商"
+        allowClear
+        enterButton={<SearchOutlined />}
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value)}
+        className="search-bar"
+      />
+      
+      {isLoading ? (
+        <Spin tip="加载游戏资源..." size="large" />
+      ) : (
+        <List
+          grid={{ gutter: 16, column: 1 }}
+          dataSource={filteredGames}
+          renderItem={game => (
+            <List.Item>
+              <GameCard game={game} />
+            </List.Item>
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+const GameCard: React.FC<{ game: GameResource }> = ({ game }) => {
+  const navigate = useNavigate();
+  
+  const handleClick = () => {
+    navigate(`/works/${game.id}`);
+  };
+
+  return (
+    <Card className="game-card" onClick={handleClick} hoverable>
+      <div className="card-content">
+        <div className="card-header">
+          <Text strong className="resource-title">{game.title}</Text>
+          <Text type="secondary" className="resource-developer">开发商: {game.developer}</Text>
+        </div>
+        
+        <div className="card-meta">
+          <Tag color="blue">{game.platform}</Tag>
+          <Tag color="geekblue">{game.categoryName}</Tag>
+          <Tag color="green">{game.seeders} 做种</Tag>
+          <Tag color="orange">{game.leechers} 下载</Tag>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default GameCategory;
\ No newline at end of file
diff --git a/src/feature/categories/MovieCategory.tsx b/src/feature/categories/MovieCategory.tsx
new file mode 100644
index 0000000..262ebd4
--- /dev/null
+++ b/src/feature/categories/MovieCategory.tsx
@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import { Card, List, message, Spin, Input, Tag, Typography} from 'antd';
+import { SearchOutlined, VideoCameraOutlined } from '@ant-design/icons';
+import CategoryAPI from '../../api/categoryApi';
+import type { MovieResource } from '../../api/categoryTypes';
+import { useNavigate } from 'react-router';
+
+const { Text } = Typography;
+const { Search } = Input;
+
+const MovieCategory: React.FC = () => {
+  const [movies, setMovies] = useState<MovieResource[]>([]);
+  const [filteredMovies, setFilteredMovies] = useState<MovieResource[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // 加载数据
+useEffect(() => {
+  const loadMovies = async () => {
+    try {
+      const response = await CategoryAPI.getWorksByCategory(2);
+      // 添加类型断言或转换
+      const movies = response.content.map((work: any) => ({
+        ...work,
+        director: (work as any).director || '未知导演',
+        actors: (work as any).actors || [],
+        resolution: (work as any).resolution || '1080p',
+        duration: (work as any).duration || '0分钟'
+      })) as unknown as MovieResource[];
+      
+      setMovies(movies);
+      setFilteredMovies(movies);
+    } catch (error) {
+      message.error('加载影视资源失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  loadMovies();
+}, []);
+
+  // 筛选逻辑
+  useEffect(() => {
+    if (!searchQuery) {
+      setFilteredMovies(movies);
+      return;
+    }
+    
+    const filtered = movies.filter(movie => 
+      movie.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      movie.director.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    
+    setFilteredMovies(filtered);
+  }, [searchQuery, movies]);
+
+
+//   // 在加载数据部分添加虚拟数据
+// useEffect(() => {
+//   const loadMovies = async () => {
+//     try {
+//       // 模拟API请求
+//       const mockMovies: MovieResource[] = [
+//         {
+//           id: 3,
+//           title: '盗梦空间',
+//           director: '克里斯托弗·诺兰',
+//           categoryId: 2,
+//           categoryName: '科幻电影',
+//           resolution: '1080p',
+//           duration: '148分钟',
+//           actors: ['莱昂纳多·迪卡普里奥', '约瑟夫·高登-莱维特'],
+//           seeders: 215,
+//           leechers: 42,
+//           uploadDate: '2023-06-10',
+//           uploader: 'movieFan',
+//           downloadCount: 3256,
+//           hash: 'a1b2c3d4e5f6',
+//           size: '234Mb'
+//         },
+//         {
+//           id: 4,
+//           title: '肖申克的救赎',
+//           director: '弗兰克·德拉邦特',
+//           categoryId: 2,
+//           categoryName: '剧情片',
+//           resolution: '4K',
+//           duration: '142分钟',
+//           actors: ['蒂姆·罗宾斯', '摩根·弗里曼'],
+//           seeders: 189,
+//           leechers: 28,
+//           uploadDate: '2023-05-15',
+//           uploader: 'classicMovie',
+//           downloadCount: 4123,
+//           hash: 'g7h8i9j0k1l2',
+//           size: '123Mb'
+//         }
+//       ];
+
+//       setMovies(mockMovies);
+//       setFilteredMovies(mockMovies);
+//     } catch (error) {
+//       message.error('加载影视资源失败');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+  
+//   loadMovies();
+// }, []);
+
+  return (
+    <div className="movie-category-container">
+      <div className="category-header">
+        <h1><VideoCameraOutlined /> 影视资源分区</h1>
+        <p>高清电影、电视剧、纪录片资源分享</p>
+      </div>
+      
+      <Search
+        placeholder="搜索电影或导演"
+        allowClear
+        enterButton={<SearchOutlined />}
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value)}
+        className="search-bar"
+      />
+      
+      {isLoading ? (
+        <Spin tip="加载影视资源..." size="large" />
+      ) : (
+        <List
+          grid={{ gutter: 16, column: 1 }}
+          dataSource={filteredMovies}
+          renderItem={movie => (
+            <List.Item>
+              <MovieCard movie={movie} />
+            </List.Item>
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+const MovieCard: React.FC<{ movie: MovieResource }> = ({ movie }) => {
+  const navigate = useNavigate();
+  
+  const handleClick = () => {
+    navigate(`/works/${movie.id}`);
+  };
+
+  return (
+    <Card className="movie-card" onClick={handleClick} hoverable>
+      <div className="card-content">
+        <div className="card-header">
+          <Text strong className="resource-title">{movie.title}</Text>
+          <Text type="secondary" className="resource-director">导演: {movie.director}</Text>
+        </div>
+        
+        <div className="card-meta">
+          <Tag color="blue">{movie.resolution}</Tag>
+          <Tag color="geekblue">{movie.categoryName}</Tag>
+          <Tag color="green">{movie.seeders} 做种</Tag>
+          <Tag color="orange">{movie.leechers} 下载</Tag>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default MovieCategory;
\ No newline at end of file
diff --git a/src/feature/categories/MusicCategory.tsx b/src/feature/categories/MusicCategory.tsx
new file mode 100644
index 0000000..f9057ee
--- /dev/null
+++ b/src/feature/categories/MusicCategory.tsx
@@ -0,0 +1,191 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Card, Button, List, Tag, Typography, 
+  message, Spin, 
+  Input} from 'antd';
+import { 
+  SearchOutlined
+} from '@ant-design/icons';
+import CategoryAPI from '../../api/categoryApi';
+import type { CategoryDTO, MusicResource } from '../../api/categoryTypes';
+import { useNavigate } from 'react-router';
+
+const { Search } = Input;
+const { Text } = Typography;
+
+const MusicCategory: React.FC = () => {
+  const [categories, setCategories] = useState<CategoryDTO[]>([]);
+  const [resources, setResources] = useState<MusicResource[]>([]);
+  const [filteredResources, setFilteredResources] = useState<MusicResource[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
+  
+  // 筛选状态
+  const [searchQuery, setSearchQuery] = useState('');
+  const [qualityFilter, setQualityFilter] = useState<string>('all');
+
+  // 加载分类数据
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const [categoryData, resourceData] = await Promise.all([
+          CategoryAPI.getCategoryTree(),
+          CategoryAPI.getWorksByCategory(1)
+        ]);
+        
+        // 确保 parentId 不包含 null
+        const normalizedCategories = categoryData.map(cat => ({
+          ...cat,
+          parentId: cat.parentId === null ? undefined : cat.parentId
+        })) as CategoryDTO[];
+        
+        // 音乐资源类型转换
+        const musicResources = resourceData.content.map(work => ({
+          ...work,
+          artist: work.artist || '未知艺术家',
+          quality: work.quality || 'MP3 320k',
+          genre: work.genre || ['未知流派'],
+          categoryName: work.categoryName || '未知分类',
+          size: work.size || '0MB'
+        })) as unknown as MusicResource[];
+        
+        setCategories(normalizedCategories);
+        setResources(musicResources);
+        setFilteredResources(musicResources);
+      } catch (error) {
+        message.error('加载数据失败');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadData();
+  }, []);
+
+  // 筛选逻辑
+  useEffect(() => {
+    let filtered = resources;
+    
+    // 搜索筛选
+    if (searchQuery) {
+      filtered = filtered.filter(resource => 
+        resource.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        resource.artist.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+    
+    // 音质筛选
+    if (qualityFilter !== 'all') {
+      filtered = filtered.filter(resource => resource.quality === qualityFilter);
+    }
+    
+    // 分类筛选
+    if (selectedCategory) {
+      filtered = filtered.filter(resource => resource.categoryId === selectedCategory);
+    }
+    
+    setFilteredResources(filtered);
+  }, [searchQuery, qualityFilter, selectedCategory, resources]);
+
+  // 分类选择处理
+  const handleCategorySelect = (categoryId: number) => {
+    setSelectedCategory(prev => prev === categoryId ? null : categoryId);
+  };
+
+  return (
+    <div className="music-category-container">
+      {/* 头部区域 */}
+      <div className="category-header">
+        <h1>音乐资源分区</h1>
+        <p>高质量音乐资源共享，保持分享率，共建良好PT环境</p>
+      </div>
+      
+      {/* 搜索和筛选 */}
+      <div className="filter-section">
+        <Search
+          placeholder="搜索音乐名称或艺术家"
+          allowClear
+          enterButton={<SearchOutlined />}
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className="search-bar"
+        />
+        
+        <div className="quality-filter">
+          <span>音质筛选：</span>
+          <Button.Group>
+            {['all', 'FLAC', 'Hi-Res', 'MP3 320k'].map(quality => (
+              <Button 
+                key={quality}
+                type={qualityFilter === quality ? 'primary' : 'default'}
+                onClick={() => setQualityFilter(quality)}
+              >
+                {quality === 'all' ? '全部' : quality}
+              </Button>
+            ))}
+          </Button.Group>
+        </div>
+      </div>
+      
+      {/* 分类导航 */}
+      <div className="category-navigation">
+        {categories.map(category => (
+          <Tag 
+            key={category.id}
+            color={selectedCategory === category.id ? 'blue' : undefined}
+            onClick={() => handleCategorySelect(category.id)}
+            className="category-tag"
+          >
+            {category.name} ({category.workCount || 0})
+          </Tag>
+        ))}
+      </div>
+      
+      {/* 内容展示 */}
+      {isLoading ? (
+        <Spin tip="加载中..." size="large" />
+      ) : (
+        <div className="resource-list">
+          <List
+            grid={{ gutter: 16, column: 1 }}
+            dataSource={filteredResources}
+            renderItem={resource => (
+              <List.Item>
+                <ResourceCard resource={resource} />
+              </List.Item>
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+// 资源卡片组件
+const ResourceCard: React.FC<{ resource: MusicResource }> = ({ resource }) => {
+  const navigate = useNavigate();
+  
+  const handleClick = () => {
+    navigate(`/works/${resource.id}`);
+  };
+
+  return (
+    <Card className="resource-card" onClick={handleClick} hoverable>
+      <div className="card-content">
+        <div className="card-header">
+          <Text strong className="resource-title">{resource.title}</Text>
+          <Text type="secondary" className="resource-artist">{resource.artist}</Text>
+        </div>
+        
+        <div className="card-meta">
+          <Tag color="blue">{resource.quality}</Tag>
+          <Tag color="geekblue">{resource.categoryName}</Tag>
+          <Tag color="green">{resource.seeders} 做种</Tag>
+          <Tag color="orange">{resource.leechers} 下载</Tag>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default MusicCategory;
\ No newline at end of file
diff --git a/src/feature/categories/OtherCategory.tsx b/src/feature/categories/OtherCategory.tsx
new file mode 100644
index 0000000..6c3318a
--- /dev/null
+++ b/src/feature/categories/OtherCategory.tsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Card, List, message, Spin, Input, Tag, Typography} from 'antd';
+import { SearchOutlined, AppstoreOutlined } from '@ant-design/icons';
+import CategoryAPI from '../../api/categoryApi';
+import type { MovieResource, OtherResource } from '../../api/categoryTypes';
+import { useNavigate } from 'react-router';
+
+const { Text } = Typography;
+const { Search } = Input;
+
+const OtherCategory: React.FC = () => {
+  const [resources, setResources] = useState<OtherResource[]>([]);
+  const [filteredResources, setFilteredResources] = useState<OtherResource[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // 加载数据
+useEffect(() => {
+  const loadResources = async () => {
+    try {
+      const response = await CategoryAPI.getWorksByCategory(4);
+      
+      // 其他资源类型转换
+      const otherResources = response.content.map(work => ({
+        ...work,
+        description: (work as any).description || '暂无描述',
+        fileType: (work as any).fileType || '未知类型'
+      })) as unknown as OtherResource[];
+      
+      setResources(otherResources);
+      setFilteredResources(otherResources);
+    } catch (error) {
+      message.error('加载资源失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  loadResources();
+}, []);
+
+  // 筛选逻辑
+  useEffect(() => {
+    if (!searchQuery) {
+      setFilteredResources(resources);
+      return;
+    }
+    
+    const filtered = resources.filter(resource => 
+      resource.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      resource.description.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    
+    setFilteredResources(filtered);
+  }, [searchQuery, resources]);
+
+    // 在加载数据部分添加虚拟数据
+  useEffect(() => {
+    const loadMovies = async () => {
+      try {
+        // 模拟API请求
+        const mockMovies: MovieResource[] = [
+          {
+            id: 3,
+            title: '盗梦空间',
+            director: '克里斯托弗·诺兰',
+            categoryId: 2,
+            categoryName: '科幻电影',
+            resolution: '1080p',
+            duration: '148分钟',
+            actors: ['莱昂纳多·迪卡普里奥', '约瑟夫·高登-莱维特'],
+            seeders: 215,
+            leechers: 42,
+            uploadDate: '2023-06-10',
+            uploader: 'movieFan',
+            downloadCount: 3256,
+            hash: 'a1b2c3d4e5f6',
+            size: '123Mb'
+          },
+          {
+            id: 4,
+            title: '肖申克的救赎',
+            director: '弗兰克·德拉邦特',
+            categoryId: 2,
+            categoryName: '剧情片',
+            resolution: '4K',
+            duration: '142分钟',
+            actors: ['蒂姆·罗宾斯', '摩根·弗里曼'],
+            seeders: 189,
+            leechers: 28,
+            uploadDate: '2023-05-15',
+            uploader: 'classicMovie',
+            downloadCount: 4123,
+            hash: 'g7h8i9j0k1l2',
+            size: '123Mb'
+          }
+        ];
+
+        setMovies(mockMovies);
+        setFilteredMovies(mockMovies);
+      } catch (error) {
+        message.error('加载影视资源失败');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadMovies();
+  }, []);
+
+  return (
+    <div className="other-category-container">
+      <div className="category-header">
+        <h1><AppstoreOutlined /> 其他资源分区</h1>
+        <p>软件、电子书等其他类型资源</p>
+      </div>
+      
+      <Search
+        placeholder="搜索资源名称或描述"
+        allowClear
+        enterButton={<SearchOutlined />}
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value)}
+        className="search-bar"
+      />
+      
+      {isLoading ? (
+        <Spin tip="加载资源..." size="large" />
+      ) : (
+        <List
+          grid={{ gutter: 16, column: 1 }}
+          dataSource={filteredResources}
+          renderItem={resource => (
+            <List.Item>
+              <OtherResourceCard resource={resource} />
+            </List.Item>
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+const OtherResourceCard: React.FC<{ resource: OtherResource }> = ({ resource }) => {
+  const navigate = useNavigate();
+  
+  const handleClick = () => {
+    navigate(`/works/${resource.id}`);
+  };
+
+  return (
+    <Card className="other-resource-card" onClick={handleClick} hoverable>
+      <div className="card-content">
+        <div className="card-header">
+          <Text strong className="resource-title">{resource.title}</Text>
+          <Text type="secondary" className="resource-type">类型: {resource.fileType}</Text>
+        </div>
+        
+        <div className="card-meta">
+          <Tag color="geekblue">{resource.categoryName}</Tag>
+          <Tag color="green">{resource.seeders} 做种</Tag>
+          <Tag color="orange">{resource.leechers} 下载</Tag>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default OtherCategory;
+
+function setMovies(_mockMovies: MovieResource[]) {
+  throw new Error('Function not implemented.');
+}
+
+
+function setFilteredMovies(_mockMovies: MovieResource[]) {
+  throw new Error('Function not implemented.');
+}
diff --git a/src/feature/home/Home.tsx b/src/feature/home/Home.tsx
index fc2c982..80e44eb 100644
--- a/src/feature/home/Home.tsx
+++ b/src/feature/home/Home.tsx
@@ -1,12 +1,116 @@
+import { NavLink } from 'react-router';
+import filmImg from '../../assets/categories/film.jpg';
+import musicImg from '../../assets/categories/music.jpg';
+import gameImg from '../../assets/categories/game.jpg';
+import otherImg from '../../assets/categories/other.jpg';
+// 假设你有排行榜数据，这里模拟一下，实际根据接口等替换
+const filmRankList = [
+  { id: 1, name: '影视作品1', view: '1.2万' },
+  { id: 2, name: '影视作品2', view: '1.1万' },
+  { id: 3, name: '影视作品3', view: '1.0万' },
+];
+const musicRankList = [
+  { id: 1, name: '音乐作品1', view: '1.5万' },
+  { id: 2, name: '音乐作品2', view: '1.3万' },
+  { id: 3, name: '音乐作品3', view: '1.2万' },
+];
+const gameRankList = [
+  { id: 1, name: '游戏作品1', view: '2.0万' },
+  { id: 2, name: '游戏作品2', view: '1.8万' },
+  { id: 3, name: '游戏作品3', view: '1.6万' },
+];
+const otherRankList = [
+  { id: 1, name: '其他作品1', view: '0.8万' },
+  { id: 2, name: '其他作品2', view: '0.7万' },
+  { id: 3, name: '其他作品3', view: '0.6万' },
+];
+
 function Home() {
+  const categories = [
+    { id: 'film', name: '影视', image: filmImg, rankList: filmRankList },
+    { id: 'music', name: '音乐', image: musicImg, rankList: musicRankList },
+    { id: 'game', name: '游戏', image: gameImg, rankList: gameRankList },
+    { id: 'other', name: '其他', image: otherImg, rankList: otherRankList },
+  ];
 
   return (
-    <>
-      主页
-    </>
-  )
+    <div className="max-w-7xl mx-auto px-4 py-16 flex flex-col items-center">
+      {/* 页面标题 */}
+      <h1 className="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center mb-12 text-gray-800 tracking-tight">
+        欢迎访问创意协作平台
+      </h1>
+
+      {/* 分区 + 排行榜 容器，改为 flex 布局 */}
+      <div className="w-full flex max-w-6xl mx-auto">
+        {/* 分区卡片容器 - 响应式网格布局 */}
+        <div className="grid grid-cols-4 gap-6 w-3/4">
+          {categories.map((category) => (
+            <div 
+              key={category.id}
+              className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
+            >
+              <NavLink to={`/categories/${category.id}`} className="block">
+                {/* 图片容器 */}
+                <div className="aspect-[4/3] relative overflow-hidden">
+                  {/* 背景图片 - 带模糊和亮度调整 */}
+                  <img 
+                    src={category.image}
+                    alt={category.name}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                    style={{ filter: 'blur(1px) brightness(0.85)' }}
+                  />
+
+                  {/* 渐变遮罩层 - 增强文字可读性 */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
+
+                  {/* 文字内容 */}
+                  <div className="absolute inset-0 flex flex-col items-center justify-center p-4 z-20">
+                    {/* 分类标题 - 艺术字体 */}
+                    <h2 className="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-center mb-2" style={{
+                      fontFamily: '"Playfair Display", serif',
+                      textShadow: '0 4px 12px rgba(0,0,0,0.8)',
+                      transform: 'translateY(10px)',
+                      transition: 'transform 0.3s ease-out',
+                      letterSpacing: '2px',
+                      borderBottom: '2px solid rgba(255,255,255,0.6)',
+                      paddingBottom: '4px'
+                    }}>
+                      {category.name}
+                    </h2>
+
+                    {/* 描述文本 - 悬停显示 */}
+                    <p className="text-indigo-100 text-center opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 mt-2" style={{
+                      fontFamily: '"Merriweather", serif',
+                      textShadow: '0 2px 6px rgba(0,0,0,0.6)'
+                    }}>
+                      探索{category.name}创意项目
+                    </p>
+                  </div>
+                </div>
+              </NavLink>
+            </div>
+          ))}
+        </div>
+
+        {/* 排行榜区域 - 右侧 */}
+        <div className="w-1/4 pl-6">
+          {categories.map((category) => (
+            <div key={category.id} className="mb-8">
+              <h3 className="text-xl font-bold text-gray-800 mb-4">{category.name}排行榜</h3>
+              <ul>
+                {category.rankList.map((item) => (
+                  <li key={item.id} className="flex justify-between items-center mb-2">
+                    <span>{item.name}</span>
+                    <span className="text-gray-600">{item.view}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
 
-
-
-export default Home
+export default Home;
\ No newline at end of file
diff --git a/src/feature/work/WorkPage.css b/src/feature/work/WorkPage.css
new file mode 100644
index 0000000..14b815a
--- /dev/null
+++ b/src/feature/work/WorkPage.css
@@ -0,0 +1,155 @@
+/* 作品页面容器 */
+.work-page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 返回按钮 */
+.back-button {
+  margin-bottom: 20px;
+}
+
+/* 作品头部 */
+.work-header {
+  margin-bottom: 20px;
+}
+
+.work-header .ant-typography {
+  margin-bottom: 8px;
+}
+
+.work-meta {
+  margin: 16px 0;
+}
+
+.like-button {
+  margin-top: 10px;
+}
+
+/* 内容区域 */
+.work-content {
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 4px;
+}
+
+/* Bug反馈区域 */
+.bug-report-section {
+  margin-top: 20px;
+}
+
+.bug-item {
+  width: 100%;
+  padding: 15px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.bug-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.bug-content {
+  margin: 10px 0;
+}
+
+/* 讨论区 */
+.discussion-section {
+  margin-top: 20px;
+}
+
+.discussion-container {
+  display: flex;
+  gap: 20px;
+}
+
+.discussion-list {
+  width: 300px;
+  border-right: 1px solid #f0f0f0;
+  padding-right: 20px;
+}
+
+.discussion-detail {
+  flex: 1;
+}
+
+.discussion-item {
+  padding: 15px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  transition: all 0.3s;
+}
+
+.discussion-item:hover {
+  background: #f5f5f5;
+}
+
+.discussion-item.active {
+  background: #e6f7ff;
+  border-left: 3px solid #1890ff;
+}
+
+.discussion-detail-content {
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.discussion-title {
+  font-size: 18px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.discussion-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.discussion-body {
+  margin-bottom: 20px;
+}
+
+.comment-item {
+  padding: 15px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.comment-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.comment-actions {
+  margin-top: 10px;
+}
+
+.new-discussion-btn {
+  margin-bottom: 20px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .discussion-container {
+    flex-direction: column;
+  }
+  
+  .discussion-list {
+    width: 100%;
+    border-right: none;
+    padding-right: 0;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+  }
+}
\ No newline at end of file
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
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 3bb3135..401b6bb 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -15,6 +15,12 @@
 const ProtectedHome = withProtect(Home);
 const ProtectedWork = withProtect(Work);
 const ProtectedCreatWork = withProtect(CreateWork)
+import FilmCategory from '../feature/categories/MovieCategory';
+import MusicCategory from '../feature/categories/MusicCategory';
+import GameCategory from '../feature/categories/GameCategory';
+import OtherCategory from '../feature/categories/OtherCategory';
+import WorkPage from '../feature/work/WorkPage';
+
 export default createBrowserRouter([
   {
     path: "/",
@@ -24,6 +30,11 @@
         path: "/",
         Component: ProtectedHome,
       },
+        {path: 'categories/film', Component: FilmCategory,},
+        {path: 'categories/music', Component: MusicCategory,},
+        {path: 'categories/game', Component: GameCategory,},
+        {path: 'categories/other', Component: OtherCategory,},
+        {path: '/works/:id', Component: WorkPage, },
       {
         Component: AuthLayout,
         children: [
diff --git a/src/test/category/GameCategory.test.tsx b/src/test/category/GameCategory.test.tsx
new file mode 100644
index 0000000..ad42353
--- /dev/null
+++ b/src/test/category/GameCategory.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import GameCategory from '../../feature/categories/GameCategory';
+import { Provider } from 'react-redux';
+import { store } from '../../store/store';
+import { MemoryRouter } from 'react-router';
+
+describe('GameCategory Component', () => {
+  it('renders game category page with search and game cards', () => {
+    render(
+      <MemoryRouter>
+        <Provider store={store}>
+          <GameCategory />
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证标题和描述
+    expect(screen.getByText('游戏资源分区')).toBeInTheDocument();
+    expect(screen.getByText('PC、主机游戏资源分享')).toBeInTheDocument();
+    
+    // 验证搜索框
+    const searchInput = screen.getByPlaceholderText('搜索游戏名称或开发商');
+    expect(searchInput).toBeInTheDocument();
+    
+    // 验证游戏卡片
+    expect(screen.getByText('赛博朋克2077')).toBeInTheDocument();
+    expect(screen.getByText('艾尔登法环')).toBeInTheDocument();
+    
+    // 验证开发商信息
+    expect(screen.getByText('开发商: CD Projekt Red')).toBeInTheDocument();
+    expect(screen.getByText('开发商: FromSoftware')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/test/category/MovieCategory.test.tsx b/src/test/category/MovieCategory.test.tsx
new file mode 100644
index 0000000..be1ed01
--- /dev/null
+++ b/src/test/category/MovieCategory.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import MovieCategory from '../../feature/categories/MovieCategory';
+import { Provider } from 'react-redux';
+import { store } from '../../store/store';
+import { MemoryRouter } from 'react-router';
+
+describe('MovieCategory Component', () => {
+  it('renders movie category page with search and movie cards', () => {
+    render(
+      <MemoryRouter>
+        <Provider store={store}>
+          <MovieCategory />
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证标题和描述
+    expect(screen.getByText('影视资源分区')).toBeInTheDocument();
+    expect(screen.getByText('高清电影、电视剧、纪录片资源分享')).toBeInTheDocument();
+    
+    // 验证搜索框
+    const searchInput = screen.getByPlaceholderText('搜索电影或导演');
+    expect(searchInput).toBeInTheDocument();
+    
+    // 验证电影卡片
+    expect(screen.getByText('盗梦空间')).toBeInTheDocument();
+    expect(screen.getByText('肖申克的救赎')).toBeInTheDocument();
+    
+    // 验证导演信息
+    expect(screen.getByText('导演: 克里斯托弗·诺兰')).toBeInTheDocument();
+    expect(screen.getByText('导演: 弗兰克·德拉邦特')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/test/category/MusicCategory.test.tsx b/src/test/category/MusicCategory.test.tsx
new file mode 100644
index 0000000..4de1bdf
--- /dev/null
+++ b/src/test/category/MusicCategory.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import MusicCategory from '../../feature/categories/MusicCategory';
+import { Provider } from 'react-redux';
+import { store } from '../../store/store';
+import { MemoryRouter } from 'react-router';
+
+describe('MusicCategory Component', () => {
+  it('renders music category page with search, filters and music cards', () => {
+    render(
+      <MemoryRouter>
+        <Provider store={store}>
+          <MusicCategory />
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证标题和描述
+    expect(screen.getByText('音乐资源分区')).toBeInTheDocument();
+    expect(screen.getByText('高质量音乐资源共享，保持分享率，共建良好PT环境')).toBeInTheDocument();
+    
+    // 验证搜索框
+    const searchInput = screen.getByPlaceholderText('搜索音乐名称或艺术家');
+    expect(searchInput).toBeInTheDocument();
+    
+    // 验证音质筛选
+    expect(screen.getByText('音质筛选：')).toBeInTheDocument();
+    expect(screen.getByText('全部')).toBeInTheDocument();
+    expect(screen.getByText('FLAC')).toBeInTheDocument();
+    
+    // 验证分类标签
+    expect(screen.getByText('欧美流行 (15)')).toBeInTheDocument();
+    expect(screen.getByText('华语流行 (23)')).toBeInTheDocument();
+    
+    // 验证音乐卡片
+    expect(screen.getByText('Blinding Lights')).toBeInTheDocument();
+    expect(screen.getByText('Bohemian Rhapsody')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/test/category/OtherCategory.test.tsx b/src/test/category/OtherCategory.test.tsx
new file mode 100644
index 0000000..dd1e793
--- /dev/null
+++ b/src/test/category/OtherCategory.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import OtherCategory from '../../feature/categories/OtherCategory';
+import { Provider } from 'react-redux';
+import { store } from '../../store/store';
+import { MemoryRouter } from 'react-router';
+
+describe('OtherCategory Component', () => {
+  it('renders other resources category page with search and resource cards', () => {
+    render(
+      <MemoryRouter>
+        <Provider store={store}>
+          <OtherCategory />
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证标题和描述
+    expect(screen.getByText('其他资源分区')).toBeInTheDocument();
+    expect(screen.getByText('软件、电子书等其他类型资源')).toBeInTheDocument();
+    
+    // 验证搜索框
+    const searchInput = screen.getByPlaceholderText('搜索资源名称或描述');
+    expect(searchInput).toBeInTheDocument();
+    
+    // 验证资源卡片
+    expect(screen.getByText('盗梦空间')).toBeInTheDocument();
+    expect(screen.getByText('肖申克的救赎')).toBeInTheDocument();
+    
+    // 验证类型信息
+    expect(screen.getByText('类型: 未知类型')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/test/work/WorkPage.test.tsx b/src/test/work/WorkPage.test.tsx
new file mode 100644
index 0000000..4dc5036
--- /dev/null
+++ b/src/test/work/WorkPage.test.tsx
@@ -0,0 +1,268 @@
+import { render, screen } from '@testing-library/react';
+import WorkPage from '../../feature/work/WorkPage';
+import { Provider } from 'react-redux';
+import { store } from '../../store/store';
+import { MemoryRouter, Route, Routes, useNavigate } from 'react-router';
+import { act } from 'react-dom/test-utils';
+import WorkAPI from '../../api/workApi';
+import type { Work } from '../../api/otherType';
+import '@testing-library/jest-dom';
+
+// 模拟整个WorkAPI类
+jest.mock('../../api/workApi', () => {
+  return {
+    __esModule: true,
+    default: {
+      getWorkById: jest.fn(),
+      likeWork: jest.fn(),
+      // 添加其他可能用到的方法
+      getBugReports: jest.fn(),
+      getDiscussions: jest.fn()
+    }
+  }
+});
+
+// 模拟子组件
+jest.mock('../../components/BugReportSection', () => () => (
+  <div data-testid="bug-report-mock">BugReportSection Mock</div>
+));
+
+jest.mock('../../components/DiscussionSection', () => () => (
+  <div data-testid="discussion-mock">DiscussionSection Mock</div>
+));
+
+// 模拟react-router-dom的useNavigate
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => jest.fn()
+}));
+
+describe('WorkPage Component', () => {
+  const mockWork: Work = {
+      id: 1,
+      title: '测试作品',
+      author: '测试作者',
+      categoryName: '测试分类',
+      views: 100,
+      likes: 50,
+      createTime: '2023-01-01T00:00:00Z',
+      description: '测试描述',
+      content: '测试内容',
+      size: '',
+      data: function (): unknown {
+          throw new Error('Function not implemented.');
+      },
+      artist: '',
+      quality: '',
+      genre: [],
+      authorId: 0,
+      categoryId: 0,
+      coverUrl: '',
+      attachments: [],
+      bugCount: 0,
+      discussionCount: 0
+  };
+
+  beforeEach(() => {
+    // 重置所有模拟
+    jest.clearAllMocks();
+    
+    // 设置默认模拟实现
+    (WorkAPI.getWorkById as jest.Mock).mockResolvedValue(mockWork);
+    (WorkAPI.likeWork as jest.Mock).mockResolvedValue({});
+  });
+
+  it('renders loading spinner initially', async () => {
+    // 延迟API响应以测试加载状态
+    let resolvePromise: (value: Work) => void;
+    (WorkAPI.getWorkById as jest.Mock).mockImplementation(
+      () => new Promise<Work>((resolve) => {
+        resolvePromise = resolve;
+      })
+    );
+
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证加载状态
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.getByText(/加载/)).toBeInTheDocument();
+    
+    // 完成API请求
+    await act(async () => {
+      resolvePromise(mockWork);
+    });
+
+    // 验证加载完成后内容
+    expect(await screen.findByText('测试作品')).toBeInTheDocument();
+  });
+
+  it('renders work details after loading', async () => {
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 等待数据加载完成
+    expect(await screen.findByText('测试作品')).toBeInTheDocument();
+    
+    // 验证头部信息
+    expect(screen.getByText('作者: 测试作者')).toBeInTheDocument();
+    expect(screen.getByText('测试分类')).toHaveClass('ant-tag');
+    expect(screen.getByText('浏览: 100')).toBeInTheDocument();
+    expect(screen.getByText('点赞: 50')).toBeInTheDocument();
+    expect(screen.getByText(/2023/)).toBeInTheDocument();
+    
+    // 验证作品内容
+    expect(screen.getByRole('heading', { level: 4, name: '作品描述' })).toBeInTheDocument();
+    expect(screen.getByText('测试描述')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 4, name: '作品内容' })).toBeInTheDocument();
+    expect(screen.getByText('测试内容')).toBeInTheDocument();
+    
+    // 验证标签页
+    expect(screen.getByRole('tab', { name: '作品详情' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Bug反馈/ })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /交流区/ })).toBeInTheDocument();
+  });
+
+  it('handles back button click', async () => {
+    const mockNavigate = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 等待数据加载完成
+    await screen.findByText('测试作品');
+    
+    // 点击返回按钮
+    const backButton = screen.getByRole('button', { name: '返回' });
+    await act(async () => {
+      backButton.click();
+    });
+    
+    // 验证导航被调用
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
+  });
+
+  it('handles like button click', async () => {
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 等待数据加载完成
+    await screen.findByText('测试作品');
+    
+    // 点击点赞按钮
+    const likeButton = screen.getByRole('button', { name: '点赞' });
+    await act(async () => {
+      likeButton.click();
+    });
+    
+    // 验证API调用
+    expect(WorkAPI.likeWork).toHaveBeenCalledTimes(1);
+    expect(WorkAPI.likeWork).toHaveBeenCalledWith(1);
+    
+    // 验证UI反馈
+    expect(await screen.findByText('点赞成功')).toBeInTheDocument();
+  });
+
+  it('shows error message when work loading fails', async () => {
+    const errorMessage = '加载失败';
+    (WorkAPI.getWorkById as jest.Mock).mockRejectedValue(new Error(errorMessage));
+
+    const mockNavigate = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 验证错误消息
+    expect(await screen.findByText('作品不存在')).toBeInTheDocument();
+    
+    // 验证导航到首页
+    expect(mockNavigate).toHaveBeenCalledWith('/');
+  });
+
+  it('switches between tabs correctly', async () => {
+    render(
+      <MemoryRouter initialEntries={['/works/1']}>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/works/:id" element={<WorkPage />} />
+          </Routes>
+        </Provider>
+      </MemoryRouter>
+    );
+
+    // 等待数据加载完成
+    await screen.findByText('测试作品');
+    
+    // 初始显示作品详情
+    expect(screen.getByText('测试描述')).toBeInTheDocument();
+    expect(screen.queryByTestId('bug-report-mock')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('discussion-mock')).not.toBeInTheDocument();
+    
+    // 点击Bug反馈标签
+    const bugTab = screen.getByRole('tab', { name: /Bug反馈/ });
+    await act(async () => {
+      bugTab.click();
+    });
+    
+    // 验证Bug反馈内容显示
+    expect(screen.queryByText('测试描述')).not.toBeInTheDocument();
+    expect(screen.getByTestId('bug-report-mock')).toBeInTheDocument();
+    
+    // 点击交流区标签
+    const discussionTab = screen.getByRole('tab', { name: /交流区/ });
+    await act(async () => {
+      discussionTab.click();
+    });
+    
+    // 验证交流区内容显示
+    expect(screen.queryByTestId('bug-report-mock')).not.toBeInTheDocument();
+    expect(screen.getByTestId('discussion-mock')).toBeInTheDocument();
+    
+    // 切换回作品详情
+    const detailsTab = screen.getByRole('tab', { name: '作品详情' });
+    await act(async () => {
+      detailsTab.click();
+    });
+    
+    // 验证作品详情再次显示
+    expect(screen.getByText('测试描述')).toBeInTheDocument();
+    expect(screen.queryByTestId('discussion-mock')).not.toBeInTheDocument();
+  });
+});
\ No newline at end of file