diff --git a/src/feature/home/Category.tsx b/src/feature/home/Category.tsx
new file mode 100644
index 0000000..2e0ab6f
--- /dev/null
+++ b/src/feature/home/Category.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Row, Col, Typography, Divider } from 'antd';
+import type { CategoryProps } from './types';
+import WorkCard from './WorkCard';
+
+const { Title } = Typography;
+
+const Category: React.FC<CategoryProps> = ({ section, artworks }) => {
+    // 如果没有作品，不渲染该分区
+    if (artworks.length === 0) {
+        return null;
+    }
+
+    return (
+        <div style={{ marginBottom: '48px' }}>
+            <Title level={2} style={{ marginBottom: '24px', color: '#1890ff' }}>
+                {section.name}
+            </Title>
+            <Divider style={{ margin: '16px 0 24px 0' }} />
+
+            <Row gutter={[16, 16]}>
+                {artworks.map((artwork) => (
+                    <Col
+                        key={artwork.id}
+                        xs={24}
+                        sm={12}
+                        md={8}
+                        lg={6}
+                        xl={6}
+                    >
+                        <WorkCard artwork={artwork} />
+                    </Col>
+                ))}
+            </Row>
+        </div>
+    );
+};
+
+export default Category;
\ No newline at end of file
diff --git a/src/feature/home/Home.tsx b/src/feature/home/Home.tsx
index 80e44eb..953af8a 100644
--- a/src/feature/home/Home.tsx
+++ b/src/feature/home/Home.tsx
@@ -1,116 +1,223 @@
-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万' },
-];
+import React, { useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { Input, Spin, Alert } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import type { Section, Artwork } from './types';
+import { initializeArtworks, selectFilteredArtworks, selectSearchTerm, selectWorkListError, selectWorkListLoading, setSearchTerm } from './workListSlice';
+import { useAppSelector } from '../../store/hooks';
+import { selectSections, selectCategoryLoading, selectCategoryError, initializeSections } from './categorySlice';
+import Category from './Category';
 
-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 },
-  ];
+const Home: React.FC = () => {
+    const dispatch = useDispatch();
 
-  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>
+    // 从Redux store获取状态
+    const sections = useAppSelector(selectSections);
+    const filteredArtworks = useAppSelector(selectFilteredArtworks);
+    const searchTerm = useAppSelector(selectSearchTerm);
+    const workListLoading = useAppSelector(selectWorkListLoading);
+    const workListError = useAppSelector(selectWorkListError);
+    const categoryLoading = useAppSelector(selectCategoryLoading);
+    const categoryError = useAppSelector(selectCategoryError);
 
-      {/* 分区 + 排行榜 容器，改为 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)' }}
-                  />
+    // 综合加载状态和错误状态
+    const loading = workListLoading || categoryLoading;
+    const error = workListError || categoryError;
 
-                  {/* 渐变遮罩层 - 增强文字可读性 */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
+    // 示例数据
+    const sampleSections: Section[] = [
+        {
+            id: 1,
+            childrenid: [1, 2, 3],
+            name: "数字艺术"
+        },
+        {
+            id: 2,
+            childrenid: [4, 5],
+            name: "传统绘画"
+        }
+    ];
 
-                  {/* 文字内容 */}
-                  <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>
+    const sampleArtworks: Artwork[] = [
+        {
+            id: 1,
+            title: "未来城市概念设计",
+            author: "视觉设计师张三",
+            views: 1247,
+            category: {
+                id: 1,
+                name: "数字艺术",
+                children: ["概念设计", "建筑设计"]
+            },
+            description: "一个关于2050年智慧城市的概念设计作品，融合了可持续发展、人工智能和绿色科技的理念",
+            createTime: "2024-01-15T10:30:00Z",
+            cover: "https://picsum.photos/300/200?random=1"
+        },
+        {
+            id: 2,
+            title: "移动应用界面设计套件",
+            author: "UI设计师李四",
+            views: 856,
+            category: {
+                id: 2,
+                name: "界面设计",
+                children: ["UI/UX设计", "移动端设计"]
+            },
+            description: "一套完整的移动端UI设计规范和组件库，包含100+个精美界面和500+个设计组件",
+            createTime: "2024-02-20T14:15:00Z",
+            cover: "https://picsum.photos/300/200?random=2"
+        },
+        {
+            id: 3,
+            title: "React组件库开发指南",
+            author: "刘松林",
+            views: 432,
+            category: {
+                id: 3,
+                name: "程序开发",
+                children: ["前端开发", "React技术"]
+            },
+            description: "一套完整的企业级React组件库开发教程和源码，包含从设计到发布的完整流程",
+            createTime: "2024-03-10T09:45:00Z",
+            cover: "https://picsum.photos/300/200?random=3"
+        },
+        {
+            id: 4,
+            title: "机械战士3D模型",
+            author: "3D艺术家王五",
+            views: 789,
+            category: {
+                id: 1,
+                name: "数字艺术",
+                children: ["3D建模", "科幻设计"]
+            },
+            description: "一个高精度的科幻机械战士3D模型，包含完整的材质贴图和动画骨骼系统",
+            createTime: "2024-01-25T16:20:00Z",
+            cover: "https://picsum.photos/300/200?random=4"
+        },
+        {
+            id: 5,
+            title: "城市夜景摄影集",
+            author: "摄影师赵六",
+            views: 1123,
+            category: {
+                id: 4,
+                name: "摄影艺术",
+                children: ["摄影作品", "城市风光"]
+            },
+            description: "一组精美的城市夜景摄影作品，捕捉了都市夜晚的璀璨光影",
+            createTime: "2024-02-14T11:30:00Z",
+            cover: "https://picsum.photos/300/200?random=5"
+        },
+        {
+            id: 6,
+            title: "奇幻世界插画系列",
+            author: "插画师孙七",
+            views: 945,
+            category: {
+                id: 5,
+                name: "插画艺术",
+                children: ["插画艺术", "奇幻风格"]
+            },
+            description: "一套充满想象力的奇幻题材插画作品，包含角色设计、场景概念图和完整插图",
+            createTime: "2024-03-05T13:20:00Z",
+            cover: "https://picsum.photos/300/200?random=6"
+        }
+    ];
 
-                    {/* 描述文本 - 悬停显示 */}
-                    <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>
+    // 初始化数据
+    useEffect(() => {
+        dispatch(initializeArtworks(sampleArtworks));
+        dispatch(initializeSections(sampleSections));
+    }, [dispatch]);
+
+    // 处理搜索输入
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        dispatch(setSearchTerm(e.target.value));
+    };
+
+    // 根据分区ID获取对应的作品
+    const getArtworksBySection = useMemo(() => {
+        return (childrenIds: number[]): Artwork[] => {
+            return filteredArtworks.filter(artwork => childrenIds.includes(artwork.id));
+        };
+    }, [filteredArtworks]);
+
+    // 渲染加载状态
+    if (loading) {
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh'
+            }}>
+                <Spin size="large" tip="加载中..." />
+            </div>
+        );
+    }
+
+    // 渲染错误状态
+    if (error) {
+        return (
+            <div style={{ padding: '24px' }}>
+                <Alert
+                    message="加载失败"
+                    description={error}
+                    type="error"
+                    showIcon
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div style={{
+            backgroundColor: '#f5f5f5',
+            minHeight: '100vh',
+            padding: '24px'
+        }}>
+            <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+                {/* 搜索栏 */}
+                <div style={{ marginBottom: '32px' }}>
+                    <Input
+                        size="large"
+                        placeholder="搜索作品标题、作者、分类..."
+                        prefix={<SearchOutlined />}
+                        value={searchTerm}
+                        onChange={handleSearchChange}
+                        style={{ maxWidth: 600, width: '100%' }}
+                        allowClear
+                    />
                 </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>
-  );
-}
+                {/* 分区展示 */}
+                {sections.map((section) => {
+                    const sectionArtworks = getArtworksBySection(section.childrenid);
 
-export default Home;
\ No newline at end of file
+                    return (
+                        <Category
+                            key={section.id}
+                            section={section}
+                            artworks={sectionArtworks}
+                        />
+                    );
+                })}
+
+                {/* 无搜索结果提示 */}
+                {searchTerm && filteredArtworks.length === 0 && (
+                    <div style={{
+                        textAlign: 'center',
+                        padding: '48px 0',
+                        color: '#999'
+                    }}>
+                        <p style={{ fontSize: 16 }}>未找到相关作品</p>
+                        <p>尝试使用其他关键词搜索</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Home;
diff --git a/src/feature/home/Tmp.tsx b/src/feature/home/Tmp.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/feature/home/Tmp.tsx
diff --git a/src/feature/home/WorkCard.tsx b/src/feature/home/WorkCard.tsx
new file mode 100644
index 0000000..1d3ac22
--- /dev/null
+++ b/src/feature/home/WorkCard.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card, Typography, Space } from 'antd';
+import { EyeOutlined, UserOutlined } from '@ant-design/icons';
+import type { WorkCardProps } from './types';
+import { useNavigate } from 'react-router';
+
+const { Text, Title } = Typography;
+const { Meta } = Card;
+
+const WorkCard: React.FC<WorkCardProps> = ({ artwork }) => {
+    const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        const target = e.target as HTMLImageElement;
+        target.src = 'https://via.placeholder.com/300x200?text=No+Image';
+    };
+    const nav = useNavigate()
+    const handleClick = () => {
+        nav(`/work/${artwork.id}`)
+    }
+
+    const formatViews = (views: number): string => {
+        return views.toLocaleString();
+    };
+
+    return (
+        <Card
+            hoverable
+            style={{ marginBottom: 16 }}
+            cover={
+                <img
+                    alt={artwork.title}
+                    src={artwork.cover}
+                    style={{
+                        height: 200,
+                        objectFit: 'cover',
+                        borderRadius: '8px 8px 0 0'
+                    }}
+                    onError={handleImageError}
+                />
+            }
+            actions={[
+                <Space key="views">
+                    <EyeOutlined />
+                    <Text type="secondary">{formatViews(artwork.views)}</Text>
+                </Space>,
+                <Space key="author">
+                    <UserOutlined />
+                    <Text type="secondary">{artwork.author}</Text>
+                </Space>,
+            ]}
+            onClick={handleClick}
+        >
+            <Meta
+                title={
+                    <div style={{ marginBottom: 8 }}>
+                        <Title level={4} style={{ margin: 0, fontSize: 16 }}>
+                            {artwork.title}
+                        </Title>
+                    </div>
+                }
+                description={
+                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                        <Text type="secondary" style={{ fontSize: 12 }}>
+                            分类: {artwork.category.name}
+                        </Text>
+                        {artwork.category.children.length > 0 && (
+                            <Space wrap size={[4, 4]}>
+                                {artwork.category.children.map((child, index) => (
+                                    <Text
+                                        key={index}
+                                        code
+                                        style={{
+                                            fontSize: 11,
+                                            padding: '2px 6px',
+                                            backgroundColor: '#f5f5f5',
+                                            borderRadius: 4
+                                        }}
+                                    >
+                                        {child}
+                                    </Text>
+                                ))}
+                            </Space>
+                        )}
+                    </Space>
+                }
+            />
+        </Card>
+    );
+};
+
+export default WorkCard;
\ No newline at end of file
diff --git a/src/feature/home/categorySlice.ts b/src/feature/home/categorySlice.ts
new file mode 100644
index 0000000..31482cc
--- /dev/null
+++ b/src/feature/home/categorySlice.ts
@@ -0,0 +1,167 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import type { Section } from './types';
+
+// 分区状态类型
+export interface CategoryState {
+  sections: Section[];
+  loading: boolean;
+  error: string | null;
+  selectedCategoryId: number | null;
+}
+
+// 初始状态
+const initialState: CategoryState = {
+  sections: [],
+  loading: false,
+  error: null,
+  selectedCategoryId: null,
+};
+
+// 创建categorySlice
+const categorySlice = createSlice({
+  name: 'category',
+  initialState,
+  reducers: {
+    // 设置加载状态
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+      if (action.payload) {
+        state.error = null;
+      }
+    },
+
+    // 设置错误信息
+    setError: (state, action: PayloadAction<string>) => {
+      state.error = action.payload;
+      state.loading = false;
+    },
+
+    // 设置分区列表
+    setSections: (state, action: PayloadAction<Section[]>) => {
+      state.sections = action.payload;
+      state.loading = false;
+      state.error = null;
+    },
+
+    // 添加单个分区
+    addSection: (state, action: PayloadAction<Section>) => {
+      state.sections.push(action.payload);
+    },
+
+    // 更新分区
+    updateSection: (state, action: PayloadAction<Section>) => {
+      const index = state.sections.findIndex(section => section.id === action.payload.id);
+      if (index !== -1) {
+        state.sections[index] = action.payload;
+      }
+    },
+
+    // 删除分区
+    removeSection: (state, action: PayloadAction<number>) => {
+      state.sections = state.sections.filter(section => section.id !== action.payload);
+      // 如果删除的是当前选中的分区，清空选中状态
+      if (state.selectedCategoryId === action.payload) {
+        state.selectedCategoryId = null;
+      }
+    },
+
+    // 设置选中的分区ID
+    setSelectedCategoryId: (state, action: PayloadAction<number | null>) => {
+      state.selectedCategoryId = action.payload;
+    },
+
+    // 向分区添加作品ID
+    addArtworkToSection: (state, action: PayloadAction<{ sectionId: number; artworkId: number }>) => {
+      const { sectionId, artworkId } = action.payload;
+      const section = state.sections.find(s => s.id === sectionId);
+      if (section && !section.childrenid.includes(artworkId)) {
+        section.childrenid.push(artworkId);
+      }
+    },
+
+    // 从分区移除作品ID
+    removeArtworkFromSection: (state, action: PayloadAction<{ sectionId: number; artworkId: number }>) => {
+      const { sectionId, artworkId } = action.payload;
+      const section = state.sections.find(s => s.id === sectionId);
+      if (section) {
+        section.childrenid = section.childrenid.filter(id => id !== artworkId);
+      }
+    },
+
+    // 重新排序分区
+    reorderSections: (state, action: PayloadAction<Section[]>) => {
+      state.sections = action.payload;
+    },
+
+    // 重置分区状态
+    resetCategoryState: () => {
+      return initialState;
+    },
+
+    // 初始化分区数据
+    initializeSections: (state, action: PayloadAction<Section[]>) => {
+      state.sections = action.payload;
+      state.loading = false;
+      state.error = null;
+    },
+  },
+});
+
+// 导出actions
+export const {
+  setLoading,
+  setError,
+  setSections,
+  addSection,
+  updateSection,
+  removeSection,
+  setSelectedCategoryId,
+  addArtworkToSection,
+  removeArtworkFromSection,
+  reorderSections,
+  resetCategoryState,
+  initializeSections,
+} = categorySlice.actions;
+
+// 选择器函数
+export const selectSections = (state: { category: CategoryState }): Section[] => 
+  state.category.sections;
+
+export const selectCategoryLoading = (state: { category: CategoryState }): boolean => 
+  state.category.loading;
+
+export const selectCategoryError = (state: { category: CategoryState }): string | null => 
+  state.category.error;
+
+export const selectSelectedCategoryId = (state: { category: CategoryState }): number | null => 
+  state.category.selectedCategoryId;
+
+// 根据ID获取分区
+export const selectSectionById = (sectionId: number) => (state: { category: CategoryState }) => {
+  return state.category.sections.find(section => section.id === sectionId);
+};
+
+// 获取分区数量
+export const selectSectionCount = (state: { category: CategoryState }) => state.category.sections.length;
+
+// 获取包含特定作品的分区
+export const selectSectionsByArtworkId = (artworkId: number) => (state: { category: CategoryState }) => {
+  return state.category.sections.filter(section => section.childrenid.includes(artworkId));
+};
+
+// 获取选中的分区
+export const selectSelectedSection = (state: { category: CategoryState }) => {
+  const { sections, selectedCategoryId } = state.category;
+  if (selectedCategoryId === null) return null;
+  return sections.find(section => section.id === selectedCategoryId) || null;
+};
+
+// 获取分区名称映射
+export const selectSectionNameMap = (state: { category: CategoryState }) => {
+  return state.category.sections.reduce((acc, section) => {
+    acc[section.id] = section.name;
+    return acc;
+  }, {} as Record<number, string>);
+};
+
+export default categorySlice.reducer;
\ No newline at end of file
diff --git a/src/feature/home/types.ts b/src/feature/home/types.ts
new file mode 100644
index 0000000..90db0de
--- /dev/null
+++ b/src/feature/home/types.ts
@@ -0,0 +1,52 @@
+// 类型定义文件
+export interface Category {
+    id: number;
+    name: string;
+    children: string[];
+}
+
+export interface Artwork {
+    id: number;
+    title: string;
+    author: string;
+    views: number;
+    category: Category;
+    description: string;
+    createTime: string;
+    cover: string;
+}
+
+export interface Section {
+    id: number;
+    childrenid: number[];
+    name: string;
+}
+
+export interface ArtworkDisplayProps {
+    sections: Section[];
+    artworks: Artwork[];
+}
+
+export interface WorkCardProps {
+    artwork: Artwork;
+}
+
+export interface CategoryProps {
+    section: Section;
+    artworks: Artwork[];
+}
+
+// Redux state 类型
+export interface WorkListState {
+    artworks: Artwork[];
+    searchTerm: string;
+    loading: boolean;
+    error: string | null;
+}
+
+export interface CategoryState {
+    sections: Section[];
+    loading: boolean;
+    error: string | null;
+    selectedCategoryId: number | null;
+}
\ No newline at end of file
diff --git a/src/feature/home/workListSlice.ts b/src/feature/home/workListSlice.ts
new file mode 100644
index 0000000..ee0d52e
--- /dev/null
+++ b/src/feature/home/workListSlice.ts
@@ -0,0 +1,131 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import type{ WorkListState, Artwork, Section } from './types';
+
+// 初始状态
+const initialState: WorkListState = {
+  artworks: [],
+  searchTerm: '',
+  loading: false,
+  error: null,
+};
+
+// 创建slice
+const workListSlice = createSlice({
+  name: 'workList',
+  initialState,
+  reducers: {
+    // 设置加载状态
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+      if (action.payload) {
+        state.error = null;
+      }
+    },
+
+    // 设置错误信息
+    setError: (state, action: PayloadAction<string>) => {
+      state.error = action.payload;
+      state.loading = false;
+    },
+
+    // 设置作品列表
+    setArtworks: (state, action: PayloadAction<Artwork[]>) => {
+      state.artworks = action.payload;
+      state.loading = false;
+      state.error = null;
+    },
+
+    // 添加单个作品
+    addArtwork: (state, action: PayloadAction<Artwork>) => {
+      state.artworks.push(action.payload);
+    },
+
+    // 更新作品
+    updateArtwork: (state, action: PayloadAction<Artwork>) => {
+      const index = state.artworks.findIndex(artwork => artwork.id === action.payload.id);
+      if (index !== -1) {
+        state.artworks[index] = action.payload;
+      }
+    },
+
+    // 删除作品
+    removeArtwork: (state, action: PayloadAction<number>) => {
+      state.artworks = state.artworks.filter(artwork => artwork.id !== action.payload);
+    },
+
+    // 设置搜索词
+    setSearchTerm: (state, action: PayloadAction<string>) => {
+      state.searchTerm = action.payload;
+    },
+
+    // 清空搜索
+    clearSearch: (state) => {
+      state.searchTerm = '';
+    },
+
+    // 重置状态
+    resetState: () => {
+      return initialState;
+    },
+
+    // 初始化数据（用于设置示例数据）
+    initializeArtworks: (state, action: PayloadAction<Artwork[]>) => {
+      state.artworks = action.payload;
+      state.loading = false;
+      state.error = null;
+    },
+  },
+});
+
+// 导出actions
+export const {
+  setLoading,
+  setError,
+  setArtworks,
+  addArtwork,
+  updateArtwork,
+  removeArtwork,
+  setSearchTerm,
+  clearSearch,
+  resetState,
+  initializeArtworks,
+} = workListSlice.actions;
+
+// 选择器函数
+export const selectArtworks = (state: { workList: WorkListState }) => state.workList.artworks;
+export const selectSearchTerm = (state: { workList: WorkListState }) => state.workList.searchTerm;
+export const selectWorkListLoading = (state: { workList: WorkListState }) => state.workList.loading;
+export const selectWorkListError = (state: { workList: WorkListState }) => state.workList.error;
+
+// 过滤后的作品选择器
+export const selectFilteredArtworks = (state: { workList: WorkListState }) => {
+  const { artworks, searchTerm } = state.workList;
+  
+  if (!searchTerm.trim()) {
+    return artworks;
+  }
+  
+  return artworks.filter(artwork => 
+    artwork.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    artwork.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    artwork.category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    artwork.category.children.some(child => 
+      child.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  );
+};
+
+// 根据分区获取作品的选择器
+export const selectArtworksBySection = (sectionId: number) => (state: { 
+  workList: WorkListState; 
+  category: { sections: Section[] } 
+}) => {
+  const section = state.category.sections.find(s => s.id === sectionId);
+  const filteredArtworks = selectFilteredArtworks(state);
+  
+  if (!section) return [];
+  
+  return filteredArtworks.filter(artwork => section.childrenid.includes(artwork.id));
+};
+
+export default workListSlice.reducer;
\ No newline at end of file