diff --git a/src/feature/auth/authSlice.ts b/src/feature/auth/authSlice.ts
index 607a6fd..289ce16 100644
--- a/src/feature/auth/authSlice.ts
+++ b/src/feature/auth/authSlice.ts
@@ -1,5 +1,7 @@
+// src/feature/auth/authSlice.ts
+
 import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { AuthState } from "../../store/types";
+import type { AuthState } from "./types";
 import type { LoginRequest } from "../../api/Auth/type";
 import AuthAPI from "../../api/Auth/AuthApi";
 
@@ -9,9 +11,9 @@
 const initialState: AuthState = {
   token: storedToken || '',
   loading: false,
-  isAuth: false,
-  error: ''
-}
+  isAuth: !!storedToken, // 如果有token就设为true
+  error: '',
+};
 
 export const loginUser = createAsyncThunk<
   {token: string},
@@ -33,17 +35,47 @@
   }
 );
 
+// 新增：从localStorage恢复登录状态
+export const loginFromLocalStorage = createAsyncThunk<
+  {token: string} | {empty: true},
+  void,
+  { rejectValue: string }
+>(
+  'auth/loginFromLocalStorage',
+  async (_, { rejectWithValue, dispatch }) => {
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        // 返回空状态而不是错误
+        return { empty: true };
+      }
+      
+      // 直接使用refreshToken来验证token有效性
+      const result = await dispatch(refreshToken(token));
+      if (refreshToken.fulfilled.match(result)) {
+        // refresh成功，返回新的token
+        return { token: result.payload.token };
+      } else {
+        // refresh失败，token无效
+        localStorage.removeItem('token');
+        return rejectWithValue('token已失效，需要重新登录');
+      }
+    } catch {
+      localStorage.removeItem('token');
+      return rejectWithValue('恢复登录状态失败');
+    }
+  }
+);
+
 export const refreshToken = createAsyncThunk<
   {token: string},
   string,
   { rejectValue: string }
 >(
-
   'auth/refresh',
   async (oldToken: string, { rejectWithValue }) => {
     try {
       const response = await AuthAPI.refreshToken(oldToken);
-      console.log(response);
       if(response.data.code == 0)
         return {token: response.data.data};
       else 
@@ -61,42 +93,77 @@
     logout: (state) => {
       state.token = '';
       state.isAuth = false;
-      localStorage.clear()
-    },
-  },extraReducers: (builder) => {
-      // 处理登录的异步操作
-      builder
-        .addCase(loginUser.pending, (state) => {
-          state.loading = true;
-        })
-        .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
-          state.loading = false;
-          state.token = action.payload.token;
-          state.isAuth = true;
-
-          localStorage.setItem('token', state.token);
-        })
-        .addCase(loginUser.rejected, (state, action) => {
-          state.loading = false;
-          state.error = action.payload ? action.payload : '' // 错误处理
-        })
-
-        // 处理刷新 token 的异步操作
-        .addCase(refreshToken.pending, (state) => {
-          state.loading = true;
-        })
-        .addCase(refreshToken.fulfilled, (state, action) => {
-          state.loading = false;
-          state.token = action.payload.token; 
-          localStorage.setItem('token', state.token);
-        })
-        .addCase(refreshToken.rejected, (state, action) => {
-          state.loading = false;
-          state.error = action.payload ? action.payload : ''
-        });
+      localStorage.clear();
     },
     
+    // 清除错误信息
+    clearError: (state) => {
+      state.error = '';
+    },
+  },
+  extraReducers: (builder) => {
+    // 处理普通登录的异步操作
+    builder
+      .addCase(loginUser.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
+        state.loading = false;
+        state.token = action.payload.token;
+        state.isAuth = true;
+        localStorage.setItem('token', state.token);
+      })
+      .addCase(loginUser.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload ? action.payload : '';
+      });
+      
+    // 处理从localStorage恢复登录状态
+    builder
+      .addCase(loginFromLocalStorage.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(loginFromLocalStorage.fulfilled, (state, action) => {
+        state.loading = false;
+        if ('token' in action.payload) {
+          // 有token的情况
+          state.token = action.payload.token;
+          state.isAuth = true;
+        } else {
+          // 空token的情况
+          state.token = '';
+          state.isAuth = false;
+        }
+      })
+      .addCase(loginFromLocalStorage.rejected, (state, action) => {
+        state.loading = false;
+        state.token = '';
+        state.isAuth = false;
+        state.error = action.payload ? action.payload : '';
+        localStorage.removeItem('token');
+      });
+      
+    // 处理刷新 token 的异步操作
+    builder
+      .addCase(refreshToken.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(refreshToken.fulfilled, (state, action) => {
+        state.loading = false;
+        state.token = action.payload.token;
+        state.isAuth = true;
+        localStorage.setItem('token', state.token);
+      })
+      .addCase(refreshToken.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload ? action.payload : '';
+        state.isAuth = false;
+      });
+  },
 });
 
-export const { logout } = authSlice.actions;
+export const { logout, clearError } = authSlice.actions;
 export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/feature/auth/types.ts b/src/feature/auth/types.ts
new file mode 100644
index 0000000..6d91e01
--- /dev/null
+++ b/src/feature/auth/types.ts
@@ -0,0 +1,7 @@
+// 定义认证状态
+export interface AuthState {
+    token: string;
+    loading: boolean;
+    isAuth: boolean;
+    error: string
+}
\ No newline at end of file
diff --git a/src/feature/Home.tsx b/src/feature/home/Home.tsx
similarity index 100%
rename from src/feature/Home.tsx
rename to src/feature/home/Home.tsx
diff --git a/src/feature/user/userSlice.ts b/src/feature/user/userSlice.ts
index d6200af..c3f7e44 100644
--- a/src/feature/user/userSlice.ts
+++ b/src/feature/user/userSlice.ts
@@ -32,12 +32,8 @@
     async (_, { rejectWithValue }) => {
         const response = await UserAPi.getMe();
         if (response.data.code == 0) {
-            console.log("xixi")
-            console.log(response)
             return response.data.data;
         } else {
-            console.log("buxixi")
-            console.log(response)
             return rejectWithValue(response.data.message);
         }
     } 
diff --git a/src/feature/work/CreatWorkComponents.tsx b/src/feature/work/CreatWorkComponents.tsx
new file mode 100644
index 0000000..12766ee
--- /dev/null
+++ b/src/feature/work/CreatWorkComponents.tsx
@@ -0,0 +1,545 @@
+import React, { useState, useCallback } from 'react';
+import {
+    Form, Input, Select, Upload, Button, Card, message, Space, Modal,
+    Divider, Row, Col, Typography, Alert, List, Tag,
+    type FormInstance
+} from 'antd';
+import {
+    PlusOutlined, InboxOutlined, DeleteOutlined, EditOutlined,
+    CheckCircleOutlined, SendOutlined, FileTextOutlined
+} from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type {
+    UploadFile, UploadProps, UploadChangeParam, RcFile,
+} from 'antd/es/upload';
+import { type StepFormProps, type BasicInfo, ARTWORK_CATEGORIES, type VersionFormData } from './types';
+import { getBase64 } from './utils';
+
+const { TextArea } = Input;
+const { Dragger } = Upload;
+const { Title, Text, Paragraph } = Typography;
+
+// ==================== 描述组件 ====================
+interface DescriptionsProps {
+    bordered?: boolean;
+    column?: number;
+    children: React.ReactNode;
+}
+
+interface DescriptionsItemProps {
+    label: string;
+    children: React.ReactNode;
+}
+
+export const Descriptions: React.FC<DescriptionsProps> & {
+    Item: React.FC<DescriptionsItemProps>;
+} = ({ children }) => {
+    return <div style={{ marginBottom: 16 }}>{children}</div>;
+};
+
+Descriptions.Item = ({ label, children }: DescriptionsItemProps) => {
+    return (
+        <div style={{ marginBottom: 12 }}>
+            <Text strong style={{ marginRight: 16 }}>{label}：</Text>
+            <span>{children}</span>
+        </div>
+    );
+};
+
+// ==================== 步骤1：基础信息 ====================
+export const BasicInfoStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext }) => {
+    const [form]: [FormInstance<BasicInfo>] = Form.useForm<BasicInfo>();
+    const [previewMode, setPreviewMode] = useState<boolean>(false);
+
+    const handleFinish = useCallback((values: BasicInfo) => {
+        onUpdate('basicInfo', values);
+        onNext?.();
+    }, [onUpdate, onNext]);
+
+    const handlePreview = useCallback(() => {
+        form.validateFields().then((values) => {
+            onUpdate('basicInfo', values);
+            setPreviewMode(true);
+        }).catch(() => {
+            message.error('请先填写完整信息');
+        });
+    }, [form, onUpdate]);
+
+    return (
+        <>
+            <Card>
+                <Form form={form} layout="vertical" initialValues={data.basicInfo} onFinish={handleFinish} autoComplete="off">
+                    <Form.Item
+                        label="作品名称"
+                        name="artworkName"
+                        rules={[
+                            { required: true, message: '请输入作品名称' },
+                            { min: 2, message: '作品名称至少2个字符' },
+                            { max: 50, message: '作品名称最多50个字符' },
+                        ]}
+                    >
+                        <Input placeholder="请输入作品名称，例如：未来城市概念设计" size="large" showCount maxLength={50} />
+                    </Form.Item>
+
+                    <Form.Item label="作品分类" name="artworkCategory" rules={[{ required: true, message: '请选择作品分类' }]}>
+                        <Select placeholder="请选择作品分类" size="large" options={ARTWORK_CATEGORIES} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="作品描述"
+                        name="artworkDescription"
+                        rules={[
+                            { required: true, message: '请输入作品描述' },
+                            { min: 20, message: '作品描述至少20个字符' },
+                            { max: 2000, message: '作品描述最多2000个字符' },
+                        ]}
+                        extra="支持 Markdown 格式，可以使用 # 标题、**粗体**、*斜体* 等格式"
+                    >
+                        <TextArea
+                            placeholder="请详细描述你的作品，包括创作理念、技术特点、使用说明等"
+                            rows={10}
+                            showCount
+                            maxLength={2000}
+                        />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space size="middle">
+                            <Button type="primary" htmlType="submit" size="large">下一步</Button>
+                            <Button onClick={handlePreview} size="large">预览描述</Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            <Modal title="作品描述预览" open={previewMode} onCancel={() => setPreviewMode(false)} footer={null} width={800}>
+                <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                    <ReactMarkdown>{form.getFieldValue('artworkDescription') || ''}</ReactMarkdown>
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 步骤2：封面上传 ====================
+export const CoverUploadStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext, onPrev }) => {
+    const [fileList, setFileList] = useState<UploadFile[]>(data.coverInfo.coverFile ? [data.coverInfo.coverFile] : []);
+    const [previewImage, setPreviewImage] = useState<string>('');
+    const [previewOpen, setPreviewOpen] = useState<boolean>(false);
+
+    const handleChange: UploadProps['onChange'] = useCallback((info: UploadChangeParam<UploadFile>) => {
+        const { fileList: newFileList } = info;
+        setFileList(newFileList);
+        onUpdate('coverInfo', { coverFile: newFileList[0] });
+    }, [onUpdate]);
+
+    const handlePreview = useCallback(async (file: UploadFile): Promise<void> => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as RcFile);
+        }
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    }, []);
+
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('只能上传图片文件！');
+            return false;
+        }
+        const isLt5M = file.size / 1024 / 1024 < 5;
+        if (!isLt5M) {
+            message.error('图片大小不能超过 5MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    const handleNext = useCallback((): void => {
+        if (fileList.length === 0) {
+            message.error('请上传作品封面');
+            return;
+        }
+        onNext?.();
+    }, [fileList, onNext]);
+
+    return (
+        <Card>
+            <Alert
+                message="封面图片要求"
+                description={
+                    <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
+                        <li>图片格式：JPG、PNG、GIF</li>
+                        <li>图片大小：不超过 5MB</li>
+                        <li>建议尺寸：宽高比 3:4，最小分辨率 600x800</li>
+                        <li>内容要求：清晰展示作品特色，避免模糊或像素化</li>
+                    </ul>
+                }
+                type="info"
+                showIcon
+                style={{ marginBottom: 24 }}
+            />
+
+            <Upload
+                listType="picture-card"
+                fileList={fileList}
+                onChange={handleChange}
+                onPreview={handlePreview}
+                beforeUpload={beforeUpload}
+                maxCount={1}
+                accept="image/*"
+            >
+                {fileList.length === 0 && (
+                    <div>
+                        <PlusOutlined />
+                        <div style={{ marginTop: 8 }}>上传封面</div>
+                    </div>
+                )}
+            </Upload>
+
+            <Modal open={previewOpen} title="封面预览" footer={null} onCancel={() => setPreviewOpen(false)}>
+                <img alt="封面预览" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+
+            <Divider />
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button type="primary" onClick={handleNext} size="large">下一步</Button>
+            </Space>
+        </Card>
+    );
+};
+
+// ==================== 版本管理相关组件 ====================
+const VersionItem: React.FC<{
+    version: VersionFormData;
+    index: number;
+    onEdit: (index: number) => void;
+    onDelete: (index: number) => void;
+}> = ({ version, index, onEdit, onDelete }) => {
+    return (
+        <Row align="middle">
+            <Col span={20}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                    <Space>
+                        <Tag color="blue">v{version.version}</Tag>
+                        <Text strong>{version.versionDescription}</Text>
+                    </Space>
+                    {version.seedFile && (
+                        <Space>
+                            <FileTextOutlined />
+                            <Text type="secondary">{version.seedFile.name}</Text>
+                        </Space>
+                    )}
+                </Space>
+            </Col>
+            <Col span={4} style={{ textAlign: 'right' }}>
+                <Space>
+                    <Button type="text" icon={<EditOutlined />} onClick={() => onEdit(index)} />
+                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => onDelete(index)} />
+                </Space>
+            </Col>
+        </Row>
+    );
+};
+
+const VersionEditForm: React.FC<{
+    form: FormInstance<VersionFormData>;
+    version: VersionFormData;
+    onSave: () => void;
+    onCancel: () => void;
+    onFileChange: (file: UploadFile | undefined) => void;
+}> = ({ form, version, onSave, onCancel, onFileChange }) => {
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isLt100M = file.size / 1024 / 1024 < 100;
+        if (!isLt100M) {
+            message.error('种子文件大小不能超过 100MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    return (
+        <Form form={form} layout="vertical" initialValues={version}>
+            <Row gutter={16}>
+                <Col span={6}>
+                    <Form.Item label="版本号" name="version" rules={[{ required: true, message: '请输入版本号' }]}>
+                        <Input placeholder="例如：1.0" />
+                    </Form.Item>
+                </Col>
+                <Col span={18}>
+                    <Form.Item
+                        label="版本描述"
+                        name="versionDescription"
+                        rules={[
+                            { required: true, message: '请输入版本描述' },
+                            { min: 10, message: '版本描述至少10个字符' },
+                        ]}
+                    >
+                        <TextArea placeholder="描述此版本的更新内容、新增功能等" rows={3} showCount maxLength={500} />
+                    </Form.Item>
+                </Col>
+            </Row>
+
+            <Form.Item label="种子文件">
+                <Dragger
+                    maxCount={1}
+                    beforeUpload={beforeUpload}
+                    fileList={version.seedFile ? [version.seedFile] : []}
+                    onChange={({ fileList }) => onFileChange(fileList[0])}
+                    onRemove={() => onFileChange(undefined)}
+                >
+                    <p className="ant-upload-drag-icon"><InboxOutlined /></p>
+                    <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                    <p className="ant-upload-hint">支持单个文件上传，文件大小不超过 100MB</p>
+                </Dragger>
+            </Form.Item>
+
+            <Space>
+                <Button type="primary" onClick={onSave}>保存</Button>
+                <Button onClick={onCancel}>取消</Button>
+            </Space>
+        </Form>
+    );
+};
+
+// ==================== 步骤3：版本管理 ====================
+export const VersionManagementStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext, onPrev }) => {
+    const [versions, setVersions] = useState<VersionFormData[]>(
+        data.versions.length > 0 ? data.versions : [{ version: '1.0', versionDescription: '', seedFile: undefined }]
+    );
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const [form]: [FormInstance<VersionFormData>] = Form.useForm<VersionFormData>();
+
+    const handleAddVersion = useCallback(() => {
+        const newVersion: VersionFormData = {
+            version: `${versions.length + 1}.0`,
+            versionDescription: '',
+            seedFile: undefined,
+        };
+        setVersions([...versions, newVersion]);
+        setEditingIndex(versions.length);
+    }, [versions]);
+
+    const handleSaveVersion = useCallback((index: number) => {
+        form.validateFields().then((values) => {
+            const newVersions = [...versions];
+            newVersions[index] = { ...newVersions[index], ...values };
+            setVersions(newVersions);
+            setEditingIndex(null);
+            form.resetFields();
+            message.success('版本信息已保存');
+        }).catch(() => {
+            message.error('请完整填写版本信息');
+        });
+    }, [form, versions]);
+
+    const handleDeleteVersion = useCallback((index: number) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: '确定要删除这个版本吗？',
+            onOk: () => {
+                const newVersions = versions.filter((_, i) => i !== index);
+                setVersions(newVersions);
+                if (editingIndex === index) {
+                    setEditingIndex(null);
+                }
+            },
+        });
+    }, [versions, editingIndex]);
+
+    const handleFileChange = useCallback((index: number, file: UploadFile | undefined) => {
+        const newVersions = [...versions];
+        newVersions[index].seedFile = file;
+        setVersions(newVersions);
+    }, [versions]);
+
+    const handleNext = useCallback(() => {
+        if (versions.length === 0) {
+            message.error('至少需要添加一个版本');
+            return;
+        }
+
+        const incompleteVersion = versions.find((v, index) =>
+            !v.version || !v.versionDescription || !v.seedFile || index === editingIndex
+        );
+
+        if (incompleteVersion) {
+            message.error('请完成所有版本的信息填写');
+            return;
+        }
+
+        onUpdate('versions', versions);
+        onNext?.();
+    }, [versions, editingIndex, onUpdate, onNext]);
+
+    return (
+        <Card>
+            <div style={{ marginBottom: 16 }}>
+                <Title level={4}>版本列表</Title>
+                <Paragraph type="secondary">每个版本需要包含版本号、版本描述和种子文件</Paragraph>
+            </div>
+
+            <List
+                dataSource={versions}
+                renderItem={(version, index) => (
+                    <List.Item
+                        key={index}
+                        style={{
+                            background: editingIndex === index ? '#fafafa' : 'transparent',
+                            padding: 16,
+                            marginBottom: 16,
+                            border: '1px solid #f0f0f0',
+                            borderRadius: 8,
+                        }}
+                    >
+                        {editingIndex === index ? (
+                            <VersionEditForm
+                                form={form}
+                                version={version}
+                                onSave={() => handleSaveVersion(index)}
+                                onCancel={() => setEditingIndex(null)}
+                                onFileChange={(file) => handleFileChange(index, file)}
+                            />
+                        ) : (
+                            <VersionItem
+                                version={version}
+                                index={index}
+                                onEdit={(idx) => {
+                                    setEditingIndex(idx);
+                                    form.setFieldsValue(version);
+                                }}
+                                onDelete={handleDeleteVersion}
+                            />
+                        )}
+                    </List.Item>
+                )}
+            />
+
+            {editingIndex === null && (
+                <Button
+                    type="dashed"
+                    onClick={handleAddVersion}
+                    style={{ width: '100%', marginBottom: 24 }}
+                    icon={<PlusOutlined />}
+                >
+                    添加版本
+                </Button>
+            )}
+
+            <Divider />
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button type="primary" onClick={handleNext} size="large">下一步</Button>
+            </Space>
+        </Card>
+    );
+};
+
+// ==================== 步骤4：确认发布 ====================
+export const ConfirmPublishStep: React.FC<StepFormProps & { onPublish: () => void }> = ({ data, onPrev, onPublish }) => {
+    const [publishing, setPublishing] = useState<boolean>(false);
+
+    const handlePublish = useCallback(async () => {
+        setPublishing(true);
+        try {
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            message.success('作品发布成功！');
+            onPublish();
+        } catch {
+            message.error('发布失败，请重试');
+        } finally {
+            setPublishing(false);
+        }
+    }, [onPublish]);
+
+    return (
+        <Card>
+            <Title level={3} style={{ marginBottom: 24 }}>
+                <CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
+                确认发布信息
+            </Title>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>基础信息</Title>
+                <Descriptions bordered column={1}>
+                    <Descriptions.Item label="作品名称">{data.basicInfo.artworkName}</Descriptions.Item>
+                    <Descriptions.Item label="作品分类">
+                        <Tag color="blue">{data.basicInfo.artworkCategory}</Tag>
+                    </Descriptions.Item>
+                    <Descriptions.Item label="作品描述">
+                        <div style={{ maxHeight: 200, overflow: 'auto' }}>
+                            <ReactMarkdown>{data.basicInfo.artworkDescription}</ReactMarkdown>
+                        </div>
+                    </Descriptions.Item>
+                </Descriptions>
+            </div>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>作品封面</Title>
+                {data.coverInfo.coverFile && (
+                    <img
+                        src={data.coverInfo.coverFile.thumbUrl || data.coverInfo.coverFile.url}
+                        alt="作品封面"
+                        style={{ maxWidth: 300, maxHeight: 400, objectFit: 'cover' }}
+                    />
+                )}
+            </div>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>版本信息</Title>
+                <List
+                    dataSource={data.versions}
+                    renderItem={(version) => (
+                        <List.Item>
+                            <List.Item.Meta
+                                title={
+                                    <Space>
+                                        <Tag color="green">v{version.version}</Tag>
+                                        <Text>{version.versionDescription}</Text>
+                                    </Space>
+                                }
+                                description={
+                                    version.seedFile && (
+                                        <Space>
+                                            <FileTextOutlined />
+                                            <Text type="secondary">{version.seedFile.name}</Text>
+                                        </Space>
+                                    )
+                                }
+                            />
+                        </List.Item>
+                    )}
+                />
+            </div>
+
+            <Alert
+                message="发布须知"
+                description={
+                    <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
+                        <li>发布后的作品将公开展示，所有用户都可以查看和下载</li>
+                        <li>请确保作品内容符合社区规范，不包含违法违规内容</li>
+                        <li>发布后您仍可以编辑作品信息和添加新版本</li>
+                        <li>请尊重他人知识产权，确保作品为原创或已获得授权</li>
+                    </ul>
+                }
+                type="warning"
+                showIcon
+                style={{ marginBottom: 24 }}
+            />
+
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button
+                    type="primary"
+                    onClick={handlePublish}
+                    loading={publishing}
+                    icon={<SendOutlined />}
+                    size="large"
+                >
+                    确认发布
+                </Button>
+            </Space>
+        </Card>
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/CreateWork.tsx b/src/feature/work/CreateWork.tsx
new file mode 100644
index 0000000..5e97433
--- /dev/null
+++ b/src/feature/work/CreateWork.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Layout, Steps, Card, Typography } from 'antd';
+import { FileTextOutlined, FileImageOutlined, SaveOutlined, SendOutlined } from '@ant-design/icons';
+import { BasicInfoStep, CoverUploadStep, VersionManagementStep, ConfirmPublishStep } from './CreatWorkComponents';
+import { useCreateWorkForm } from './hooks';
+
+
+const { Content } = Layout;
+const { Title, Paragraph } = Typography;
+
+const CreateWork: React.FC = () => {
+    const { currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish } = useCreateWorkForm();
+
+    const steps = useMemo(() => [
+        { title: '基础信息', description: '填写作品基本信息', icon: <FileTextOutlined /> },
+        { title: '上传封面', description: '上传作品封面图片', icon: <FileImageOutlined /> },
+        { title: '版本管理', description: '添加作品版本和文件', icon: <SaveOutlined /> },
+        { title: '确认发布', description: '检查并发布作品', icon: <SendOutlined /> },
+    ], []);
+
+    const renderStepContent = useMemo(() => {
+        const commonProps = { data: formData, onUpdate: handleUpdateFormData, onNext: handleNext, onPrev: handlePrev };
+
+        switch (currentStep) {
+            case 0: return <BasicInfoStep {...commonProps} />;
+            case 1: return <CoverUploadStep {...commonProps} />;
+            case 2: return <VersionManagementStep {...commonProps} />;
+            case 3: return <ConfirmPublishStep {...commonProps} onPublish={handlePublish} />;
+            default: return null;
+        }
+    }, [currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish]);
+
+    return (
+        <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+            <Content style={{ padding: '20px' }}>
+                <div style={{ maxWidth: 1000, margin: '0 auto' }}>
+                    <Card style={{ marginBottom: 24 }}>
+                        <Title level={2} style={{ marginBottom: 8 }}>创建新作品</Title>
+                        <Paragraph type="secondary">通过以下步骤发布您的创意作品，与社区分享您的才华</Paragraph>
+                    </Card>
+
+                    <Card style={{ marginBottom: 24 }}>
+                        <Steps current={currentStep} items={steps} />
+                    </Card>
+
+                    {renderStepContent}
+                </div>
+            </Content>
+        </Layout>
+    );
+};
+
+export default CreateWork;
\ No newline at end of file
diff --git a/src/feature/work/EditWork.tsx b/src/feature/work/EditWork.tsx
new file mode 100644
index 0000000..f56d42a
--- /dev/null
+++ b/src/feature/work/EditWork.tsx
@@ -0,0 +1,753 @@
+import React, { useState, useCallback } from 'react';
+import {
+    Modal, Form, Input, Upload, Button, message, Space, Card,
+    Typography, Alert, List, Tag, Popconfirm, Row, Col,
+    type FormInstance
+} from 'antd';
+import {
+    EditOutlined, DeleteOutlined, PlusOutlined, InboxOutlined,
+    SaveOutlined, FileTextOutlined, UserOutlined
+} from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type {
+    UploadFile, UploadProps, UploadChangeParam, RcFile,
+} from 'antd/es/upload';
+import type {
+    ArtworkData, VersionFormData, Comment,
+} from './types';
+
+const { TextArea } = Input;
+const { Dragger } = Upload;
+const { Text } = Typography;
+
+// ==================== 工具函数 ====================
+const getBase64 = (file: RcFile): Promise<string> =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = (): void => resolve(reader.result as string);
+        reader.onerror = (error): void => reject(error);
+    });
+
+// ==================== 类型定义 ====================
+interface EditCoverProps {
+    visible: boolean;
+    currentCover: string;
+    onCancel: () => void;
+    onSave: (coverUrl: string) => Promise<void>;
+}
+
+interface EditDescriptionProps {
+    visible: boolean;
+    currentDescription: string;
+    onCancel: () => void;
+    onSave: (description: string) => Promise<void>;
+}
+
+interface EditVersionsProps {
+    visible: boolean;
+    versions: VersionFormData[];
+    onCancel: () => void;
+    onSave: (versions: VersionFormData[]) => Promise<void>;
+}
+
+interface CommentItemProps {
+    comment: Comment;
+    isAuthor: boolean;
+    onDelete: (commentId: string) => Promise<void>;
+    level?: number;
+}
+
+interface EditWorkControlsProps {
+    artwork: ArtworkData;
+    isAuthor: boolean;
+    onUpdate: (updatedArtwork: Partial<ArtworkData>) => Promise<void>;
+    onDeleteComment: (commentId: string) => Promise<void>;
+}
+
+interface VersionItemProps {
+    version: VersionFormData;
+    index: number;
+    onEdit: (index: number) => void;
+    onDelete: (index: number) => void;
+}
+
+interface VersionEditFormProps {
+    form: FormInstance<VersionFormData>;
+    version: VersionFormData;
+    onSave: () => void;
+    onCancel: () => void;
+    onFileChange: (file: UploadFile | undefined) => void;
+}
+
+// ==================== 封面编辑组件 ====================
+export const EditWorkCover: React.FC<EditCoverProps> = ({
+    visible,
+    currentCover,
+    onCancel,
+    onSave
+}) => {
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+    const [previewImage, setPreviewImage] = useState<string>('');
+    const [previewOpen, setPreviewOpen] = useState<boolean>(false);
+    const [uploading, setUploading] = useState<boolean>(false);
+
+    const handleChange: UploadProps['onChange'] = useCallback((info: UploadChangeParam<UploadFile>): void => {
+        setFileList(info.fileList);
+    }, []);
+
+    const handlePreview = useCallback(async (file: UploadFile): Promise<void> => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as RcFile);
+        }
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    }, []);
+
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('只能上传图片文件！');
+            return false;
+        }
+        const isLt5M = file.size / 1024 / 1024 < 5;
+        if (!isLt5M) {
+            message.error('图片大小不能超过 5MB！');
+            return false;
+        }
+        return false; // 阻止自动上传
+    }, []);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        if (fileList.length === 0) {
+            message.error('请选择要上传的封面图片');
+            return;
+        }
+
+        setUploading(true);
+        try {
+            // 模拟上传过程
+            const file = fileList[0];
+            const coverUrl = file.preview || URL.createObjectURL(file.originFileObj as RcFile);
+
+            await onSave(coverUrl);
+            message.success('封面更新成功！');
+            onCancel();
+        } catch {
+            message.error('封面更新失败，请重试');
+        } finally {
+            setUploading(false);
+        }
+    }, [fileList, onSave, onCancel]);
+
+    return (
+        <>
+            <Modal
+                title="编辑作品封面"
+                open={visible}
+                onCancel={onCancel}
+                footer={[
+                    <Button key="cancel" onClick={onCancel}>
+                        取消
+                    </Button>,
+                    <Button
+                        key="save"
+                        type="primary"
+                        loading={uploading}
+                        onClick={handleSave}
+                        icon={<SaveOutlined />}
+                    >
+                        保存
+                    </Button>,
+                ]}
+                width={600}
+            >
+                <div style={{ marginBottom: 16 }}>
+                    <Text strong>当前封面：</Text>
+                    <div style={{ marginTop: 8 }}>
+                        <img
+                            src={currentCover}
+                            alt="当前封面"
+                            style={{ maxWidth: '100%', maxHeight: 200, objectFit: 'cover' }}
+                        />
+                    </div>
+                </div>
+
+                <Alert
+                    message="新封面要求"
+                    description="图片格式：JPG、PNG、GIF；大小不超过 5MB；建议尺寸：宽高比 3:4"
+                    type="info"
+                    showIcon
+                    style={{ marginBottom: 16 }}
+                />
+
+                <Upload
+                    listType="picture-card"
+                    fileList={fileList}
+                    onChange={handleChange}
+                    onPreview={handlePreview}
+                    beforeUpload={beforeUpload}
+                    maxCount={1}
+                    accept="image/*"
+                >
+                    {fileList.length === 0 && (
+                        <div>
+                            <PlusOutlined />
+                            <div style={{ marginTop: 8 }}>选择新封面</div>
+                        </div>
+                    )}
+                </Upload>
+            </Modal>
+
+            <Modal
+                open={previewOpen}
+                title="图片预览"
+                footer={null}
+                onCancel={(): void => setPreviewOpen(false)}
+            >
+                <img alt="预览" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 作品描述编辑组件 ====================
+export const EditWorkDescription: React.FC<EditDescriptionProps> = ({
+    visible,
+    currentDescription,
+    onCancel,
+    onSave
+}) => {
+    const [form] = Form.useForm<{ description: string }>();
+    const [previewMode, setPreviewMode] = useState<boolean>(false);
+    const [saving, setSaving] = useState<boolean>(false);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        try {
+            const values = await form.validateFields();
+            setSaving(true);
+            await onSave(values.description);
+            message.success('作品描述更新成功！');
+            onCancel();
+        } catch (error) {
+            if (error && typeof error === 'object' && 'errorFields' in error) {
+                message.error('请检查输入内容');
+            } else {
+                message.error('更新失败，请重试');
+            }
+        } finally {
+            setSaving(false);
+        }
+    }, [form, onSave, onCancel]);
+
+    const handlePreview = useCallback((): void => {
+        form.validateFields().then(() => {
+            setPreviewMode(true);
+        }).catch(() => {
+            message.error('请先填写完整信息');
+        });
+    }, [form]);
+
+    return (
+        <>
+            <Modal
+                title="编辑作品描述"
+                open={visible}
+                onCancel={onCancel}
+                footer={[
+                    <Button key="preview" onClick={handlePreview}>
+                        预览
+                    </Button>,
+                    <Button key="cancel" onClick={onCancel}>
+                        取消
+                    </Button>,
+                    <Button
+                        key="save"
+                        type="primary"
+                        loading={saving}
+                        onClick={handleSave}
+                        icon={<SaveOutlined />}
+                    >
+                        保存
+                    </Button>,
+                ]}
+                width={800}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                    initialValues={{ description: currentDescription }}
+                >
+                    <Form.Item
+                        label="作品描述"
+                        name="description"
+                        rules={[
+                            { required: true, message: '请输入作品描述' },
+                            { min: 20, message: '作品描述至少20个字符' },
+                            { max: 2000, message: '作品描述最多2000个字符' },
+                        ]}
+                        extra="支持 Markdown 格式，可以使用 # 标题、**粗体**、*斜体* 等格式"
+                    >
+                        <TextArea
+                            placeholder="请详细描述你的作品，包括创作理念、技术特点、使用说明等"
+                            rows={12}
+                            showCount
+                            maxLength={2000}
+                        />
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            <Modal
+                title="作品描述预览"
+                open={previewMode}
+                onCancel={(): void => setPreviewMode(false)}
+                footer={null}
+                width={800}
+            >
+                <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                    <ReactMarkdown>{form.getFieldValue('description') || ''}</ReactMarkdown>
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 版本编辑相关组件 ====================
+const VersionItem: React.FC<VersionItemProps> = ({
+    version,
+    index,
+    onEdit,
+    onDelete
+}) => {
+    return (
+        <Row align="middle" style={{ width: '100%' }}>
+            <Col span={20}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                    <Space>
+                        <Tag color="blue">v{version.version}</Tag>
+                        <Text strong>{version.versionDescription}</Text>
+                    </Space>
+                    {version.seedFile && (
+                        <Space>
+                            <FileTextOutlined />
+                            <Text type="secondary">{version.seedFile.name}</Text>
+                        </Space>
+                    )}
+                </Space>
+            </Col>
+            <Col span={4} style={{ textAlign: 'right' }}>
+                <Space>
+                    <Button
+                        type="text"
+                        icon={<EditOutlined />}
+                        onClick={(): void => onEdit(index)}
+                    />
+                    <Popconfirm
+                        title="确定要删除这个版本吗？"
+                        onConfirm={(): void => onDelete(index)}
+                        okText="确定"
+                        cancelText="取消"
+                    >
+                        <Button type="text" danger icon={<DeleteOutlined />} />
+                    </Popconfirm>
+                </Space>
+            </Col>
+        </Row>
+    );
+};
+
+const VersionEditForm: React.FC<VersionEditFormProps> = ({
+    form,
+    version,
+    onSave,
+    onCancel,
+    onFileChange
+}) => {
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isLt100M = file.size / 1024 / 1024 < 100;
+        if (!isLt100M) {
+            message.error('种子文件大小不能超过 100MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    return (
+        <div style={{ width: '100%' }}>
+            <Form form={form} layout="vertical" initialValues={version}>
+                <Row gutter={16}>
+                    <Col span={6}>
+                        <Form.Item
+                            label="版本号"
+                            name="version"
+                            rules={[{ required: true, message: '请输入版本号' }]}
+                        >
+                            <Input placeholder="例如：1.0" />
+                        </Form.Item>
+                    </Col>
+                    <Col span={18}>
+                        <Form.Item
+                            label="版本描述"
+                            name="versionDescription"
+                            rules={[
+                                { required: true, message: '请输入版本描述' },
+                                { min: 10, message: '版本描述至少10个字符' },
+                            ]}
+                        >
+                            <TextArea
+                                placeholder="描述此版本的更新内容、新增功能等"
+                                rows={3}
+                                showCount
+                                maxLength={500}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Form.Item label="种子文件">
+                    <Dragger
+                        maxCount={1}
+                        beforeUpload={beforeUpload}
+                        fileList={version.seedFile ? [version.seedFile] : []}
+                        onChange={({ fileList }): void => onFileChange(fileList[0])}
+                        onRemove={(): void => onFileChange(undefined)}
+                    >
+                        <p className="ant-upload-drag-icon"><InboxOutlined /></p>
+                        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                        <p className="ant-upload-hint">支持单个文件上传，文件大小不超过 100MB</p>
+                    </Dragger>
+                </Form.Item>
+
+                <Space>
+                    <Button type="primary" onClick={onSave}>
+                        保存
+                    </Button>
+                    <Button onClick={onCancel}>
+                        取消
+                    </Button>
+                </Space>
+            </Form>
+        </div>
+    );
+};
+
+// ==================== 版本管理组件 ====================
+export const EditWorkVersions: React.FC<EditVersionsProps> = ({
+    visible,
+    versions,
+    onCancel,
+    onSave
+}) => {
+    const [localVersions, setLocalVersions] = useState<VersionFormData[]>(versions);
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const [form] = Form.useForm<VersionFormData>();
+    const [saving, setSaving] = useState<boolean>(false);
+
+    const handleAddVersion = useCallback((): void => {
+        const newVersion: VersionFormData = {
+            version: `${localVersions.length + 1}.0`,
+            versionDescription: '',
+            seedFile: undefined,
+        };
+        setLocalVersions([...localVersions, newVersion]);
+        setEditingIndex(localVersions.length);
+    }, [localVersions]);
+
+    const handleSaveVersion = useCallback((index: number): void => {
+        form.validateFields().then((values) => {
+            const newVersions = [...localVersions];
+            newVersions[index] = { ...newVersions[index], ...values };
+            setLocalVersions(newVersions);
+            setEditingIndex(null);
+            form.resetFields();
+            message.success('版本信息已保存');
+        }).catch(() => {
+            message.error('请完整填写版本信息');
+        });
+    }, [form, localVersions]);
+
+    const handleDeleteVersion = useCallback((index: number): void => {
+        const newVersions = localVersions.filter((_, i) => i !== index);
+        setLocalVersions(newVersions);
+        if (editingIndex === index) {
+            setEditingIndex(null);
+        }
+    }, [localVersions, editingIndex]);
+
+    const handleFileChange = useCallback((index: number, file: UploadFile | undefined): void => {
+        const newVersions = [...localVersions];
+        newVersions[index].seedFile = file;
+        setLocalVersions(newVersions);
+    }, [localVersions]);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        if (localVersions.length === 0) {
+            message.error('至少需要保留一个版本');
+            return;
+        }
+
+        const incompleteVersion = localVersions.find((v, index) =>
+            !v.version || !v.versionDescription || !v.seedFile || index === editingIndex
+        );
+
+        if (incompleteVersion) {
+            message.error('请完成所有版本的信息填写');
+            return;
+        }
+
+        setSaving(true);
+        try {
+            await onSave(localVersions);
+            message.success('版本信息更新成功！');
+            onCancel();
+        } catch {
+            message.error('更新失败，请重试');
+        } finally {
+            setSaving(false);
+        }
+    }, [localVersions, editingIndex, onSave, onCancel]);
+
+    return (
+        <Modal
+            title="编辑版本信息"
+            open={visible}
+            onCancel={onCancel}
+            footer={[
+                <Button key="cancel" onClick={onCancel}>
+                    取消
+                </Button>,
+                <Button
+                    key="save"
+                    type="primary"
+                    loading={saving}
+                    onClick={handleSave}
+                    icon={<SaveOutlined />}
+                >
+                    保存所有更改
+                </Button>,
+            ]}
+            width={900}
+        >
+            <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                <List
+                    dataSource={localVersions}
+                    renderItem={(version, index): React.ReactElement => (
+                        <List.Item
+                            key={index}
+                            style={{
+                                background: editingIndex === index ? '#fafafa' : 'transparent',
+                                padding: 16,
+                                marginBottom: 16,
+                                border: '1px solid #f0f0f0',
+                                borderRadius: 8,
+                            }}
+                        >
+                            {editingIndex === index ? (
+                                <VersionEditForm
+                                    form={form}
+                                    version={version}
+                                    onSave={(): void => handleSaveVersion(index)}
+                                    onCancel={(): void => setEditingIndex(null)}
+                                    onFileChange={(file): void => handleFileChange(index, file)}
+                                />
+                            ) : (
+                                <VersionItem
+                                    version={version}
+                                    index={index}
+                                    onEdit={(idx): void => {
+                                        setEditingIndex(idx);
+                                        form.setFieldsValue(version);
+                                    }}
+                                    onDelete={handleDeleteVersion}
+                                />
+                            )}
+                        </List.Item>
+                    )}
+                />
+
+                {editingIndex === null && (
+                    <Button
+                        type="dashed"
+                        onClick={handleAddVersion}
+                        style={{ width: '100%', marginTop: 16 }}
+                        icon={<PlusOutlined />}
+                    >
+                        添加新版本
+                    </Button>
+                )}
+            </div>
+        </Modal>
+    );
+};
+
+// ==================== 评论管理组件 ====================
+export const EditWorkComment: React.FC<CommentItemProps> = ({
+    comment,
+    isAuthor,
+    onDelete,
+    level = 0
+}) => {
+    const [deleting, setDeleting] = useState<boolean>(false);
+
+    const handleDelete = useCallback(async (): Promise<void> => {
+        if (!comment.id) return;
+
+        setDeleting(true);
+        try {
+            await onDelete(comment.id);
+            message.success('评论删除成功');
+        } catch {
+            message.error('删除失败，请重试');
+        } finally {
+            setDeleting(false);
+        }
+    }, [comment.id, onDelete]);
+
+    return (
+        <div style={{ marginLeft: level * 24 }}>
+            <div
+                style={{
+                    background: '#fafafa',
+                    padding: 12,
+                    borderRadius: 8,
+                    marginBottom: 8,
+                }}
+            >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <div style={{ flex: 1 }}>
+                        <Space style={{ marginBottom: 8 }}>
+                            <UserOutlined />
+                            <Text strong>{comment.author}</Text>
+                            {comment.createdAt && (
+                                <Text type="secondary" style={{ fontSize: 12 }}>
+                                    {new Date(comment.createdAt).toLocaleString()}
+                                </Text>
+                            )}
+                        </Space>
+                        <div>
+                            <Text>{comment.content}</Text>
+                        </div>
+                    </div>
+
+                    {isAuthor && comment.id && (
+                        <Popconfirm
+                            title="确定要删除这条评论吗？"
+                            onConfirm={handleDelete}
+                            okText="确定"
+                            cancelText="取消"
+                        >
+                            <Button
+                                type="text"
+                                danger
+                                size="small"
+                                icon={<DeleteOutlined />}
+                                loading={deleting}
+                            />
+                        </Popconfirm>
+                    )}
+                </div>
+            </div>
+
+            {/* 递归渲染子评论 */}
+            {comment.child && comment.child.length > 0 && (
+                <div>
+                    {comment.child.map((childComment, index) => (
+                        <EditWorkComment
+                            key={childComment.id || index}
+                            comment={childComment}
+                            isAuthor={isAuthor}
+                            onDelete={onDelete}
+                            level={level + 1}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ==================== 主编辑控制器组件 ====================
+export const EditWorkControls: React.FC<EditWorkControlsProps> = ({
+    artwork,
+    isAuthor,
+    onUpdate,
+}) => {
+    const [editCoverVisible, setEditCoverVisible] = useState<boolean>(false);
+    const [editDescriptionVisible, setEditDescriptionVisible] = useState<boolean>(false);
+    const [editVersionsVisible, setEditVersionsVisible] = useState<boolean>(false);
+
+    const handleUpdateCover = useCallback(async (coverUrl: string): Promise<void> => {
+        await onUpdate({ artworkCover: coverUrl });
+    }, [onUpdate]);
+
+    const handleUpdateDescription = useCallback(async (description: string): Promise<void> => {
+        await onUpdate({ artworkDescription: description });
+    }, [onUpdate]);
+
+    const handleUpdateVersions = useCallback(async (versions: VersionFormData[]): Promise<void> => {
+        // 转换为展示用的版本格式
+        const versionList = versions.map(v => ({
+            version: v.version,
+            versionDescription: v.versionDescription,
+            seedFile: v.seedFile?.name || '',
+        }));
+        await onUpdate({ versionList });
+    }, [onUpdate]);
+
+    if (!isAuthor) {
+        return null;
+    }
+
+    return (
+        <>
+            <Card title="作者管理" style={{ marginBottom: 24 }}>
+                <Space wrap>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditCoverVisible(true)}
+                    >
+                        编辑封面
+                    </Button>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditDescriptionVisible(true)}
+                    >
+                        编辑描述
+                    </Button>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditVersionsVisible(true)}
+                    >
+                        管理版本
+                    </Button>
+                </Space>
+            </Card>
+
+            <EditWorkCover
+                visible={editCoverVisible}
+                currentCover={artwork.artworkCover}
+                onCancel={(): void => setEditCoverVisible(false)}
+                onSave={handleUpdateCover}
+            />
+
+            <EditWorkDescription
+                visible={editDescriptionVisible}
+                currentDescription={artwork.artworkDescription}
+                onCancel={(): void => setEditDescriptionVisible(false)}
+                onSave={handleUpdateDescription}
+            />
+
+            <EditWorkVersions
+                visible={editVersionsVisible}
+                versions={artwork.versionList.map(v => ({
+                    version: v.version,
+                    versionDescription: v.versionDescription,
+                    seedFile: { name: v.seedFile } as UploadFile,
+                }))}
+                onCancel={(): void => setEditVersionsVisible(false)}
+                onSave={handleUpdateVersions}
+            />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/Work.tsx b/src/feature/work/Work.tsx
new file mode 100644
index 0000000..56939d1
--- /dev/null
+++ b/src/feature/work/Work.tsx
@@ -0,0 +1,288 @@
+// src/feature/work/Work.tsx
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Layout, Flex, Spin, Alert, message } from 'antd';
+import { useParams } from 'react-router';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import {
+    fetchArtworkDetail, fetchComments, addComment, selectCurrentArtwork,
+    selectWorkLoading, selectWorkError, selectComments, setCommentsPage, clearCurrentArtwork,
+    updateArtwork, deleteComment
+} from './workSlice';
+import { Sidebar, MainContent } from './WorkComponents';
+import { EditWorkControls } from './EditWork';
+import type { ArtworkData, Comment } from './types';
+
+const { Content } = Layout;
+
+interface UserState {
+    userid?: string | number;
+    username?: string;
+}
+
+interface RootState {
+    user: UserState;
+    work: {
+        currentArtwork: ArtworkData | null;
+        loading: {
+            artwork: boolean;
+            comments: boolean;
+            addComment: boolean;
+            updateArtwork?: boolean;
+            deleteComment?: boolean;
+        };
+        error: {
+            artwork: string | null;
+            comments: string | null;
+            addComment: string | null;
+            updateArtwork?: string | null;
+            deleteComment?: string | null;
+        };
+        comments: {
+            list: Comment[];
+            total: number;
+            current: number;
+            pageSize: number;
+        };
+    };
+}
+
+const Work: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { work_id } = useParams<{ work_id: string }>();
+
+    // Redux state
+    const currentArtwork = useAppSelector(selectCurrentArtwork);
+    const loading = useAppSelector(selectWorkLoading);
+    const error = useAppSelector(selectWorkError);
+    const comments = useAppSelector(selectComments);
+    const currentUser = useAppSelector((state: RootState) => state.user);
+
+    // Local state for edit functionality
+    const [showEditControls, setShowEditControls] = useState<boolean>(false);
+
+    // 初始化数据
+    useEffect(() => {
+        if (work_id) {
+            dispatch(clearCurrentArtwork());
+            dispatch(fetchArtworkDetail(work_id));
+            dispatch(fetchComments({ workId: work_id, page: 1, pageSize: 5 }));
+        }
+    }, [work_id, dispatch]);
+
+    // 权限判断
+    const isAuthor: boolean = Boolean(
+        currentUser?.userid && currentArtwork?.authorId &&
+        String(currentUser.userid) === String(currentArtwork.authorId)
+    );
+
+    // 显示编辑控件
+    useEffect(() => {
+        setShowEditControls(isAuthor);
+    }, [isAuthor]);
+
+    // 评论分页处理
+    const handleCommentsPageChange = useCallback((page: number, pageSize: number): void => {
+        dispatch(setCommentsPage({ current: page, pageSize }));
+        if (work_id) {
+            dispatch(fetchComments({ workId: work_id, page, pageSize }));
+        }
+    }, [work_id, dispatch]);
+
+    // 添加评论
+    const handleAddComment = useCallback(async (content: string, parentId?: string): Promise<void> => {
+        if (!work_id) return;
+        try {
+            await dispatch(addComment({ workId: work_id, content, parentId })).unwrap();
+            message.success(parentId ? '回复发表成功！' : '评论发表成功！');
+        } catch {
+            message.error('评论发表失败，请重试');
+        }
+    }, [work_id, dispatch]);
+
+    // ==================== EditWork 集成功能 ====================
+
+    // 更新作品信息
+    const handleUpdateArtwork = useCallback(async (updates: Partial<ArtworkData>): Promise<void> => {
+        if (!work_id || !currentArtwork) return;
+
+        try {
+            // 检查 updateArtwork action 是否存在
+            if (updateArtwork) {
+                await dispatch(updateArtwork({
+                    workId: work_id,
+                    updates
+                })).unwrap();
+                message.success('作品信息更新成功！');
+            } else {
+                // 临时处理：直接更新本地状态
+                console.log('updateArtwork action not available, using local update');
+                message.success('作品信息更新成功！（本地更新）');
+            }
+        } catch (error) {
+            console.error('更新作品失败:', error);
+            message.error('更新失败，请重试');
+            throw error;
+        }
+    }, [work_id, currentArtwork, dispatch]);
+
+    // 删除评论
+    const handleDeleteComment = useCallback(async (commentId: string): Promise<void> => {
+        if (!work_id) return;
+
+        try {
+            // 检查 deleteComment action 是否存在
+            if (deleteComment) {
+                await dispatch(deleteComment({
+                    workId: work_id,
+                    commentId
+                })).unwrap();
+                message.success('评论删除成功！');
+
+                // 重新加载评论列表
+                dispatch(fetchComments({
+                    workId: work_id,
+                    page: comments.current,
+                    pageSize: comments.pageSize
+                }));
+            } else {
+                // 临时处理
+                console.log('deleteComment action not available');
+                message.success('评论删除成功！（本地处理）');
+            }
+        } catch (error) {
+            console.error('删除评论失败:', error);
+            message.error('删除评论失败，请重试');
+            throw error;
+        }
+    }, [work_id, dispatch, comments.current, comments.pageSize]);
+
+    // 兼容旧的编辑处理器
+    const handleEditArtwork = useCallback((): void => {
+        if (isAuthor) {
+            setShowEditControls(true);
+            message.info('请使用上方的编辑控件来修改作品信息');
+        } else {
+            message.warning('您没有编辑此作品的权限');
+        }
+    }, [isAuthor]);
+
+    // ==================== 渲染逻辑 ====================
+
+    // 加载状态
+    if (loading.artwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                        <Spin size="large" tip="加载作品详情中..." />
+                    </div>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 错误状态
+    if (error.artwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <Flex justify="center" style={{ width: '100%' }}>
+                        <div style={{ width: '90%', maxWidth: 1200 }}>
+                            <Alert
+                                message="加载失败"
+                                description={error.artwork}
+                                type="error"
+                                showIcon
+                            />
+                        </div>
+                    </Flex>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 作品不存在
+    if (!currentArtwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <Flex justify="center" align="center" style={{ height: '50vh' }}>
+                        <Alert
+                            message="作品不存在"
+                            description="未找到对应的作品信息"
+                            type="warning"
+                            showIcon
+                        />
+                    </Flex>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 确保数据完整性，添加默认值
+    const safeArtwork = {
+        ...currentArtwork,
+        usersSeedingCurrently: currentArtwork.usersSeedingCurrently || [],
+        usersSeedingHistory: currentArtwork.usersSeedingHistory || [],
+        versionList: currentArtwork.versionList || [],
+        comments: comments.list || []
+    };
+
+    const safeComments = {
+        ...comments,
+        list: comments.list || []
+    };
+
+    // 主要内容渲染
+    return (
+        <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+            <Content style={{ padding: '20px' }}>
+                <Flex justify="center" style={{ width: '100%' }}>
+                    <div style={{ width: '90%', maxWidth: 1200 }}>
+                        {/* EditWork 编辑控件 - 仅作者可见 */}
+                        {showEditControls && (
+                            <div style={{ marginBottom: 20 }}>
+                                <EditWorkControls
+                                    artwork={safeArtwork}
+                                    isAuthor={isAuthor}
+                                    onUpdate={handleUpdateArtwork}
+                                    onDeleteComment={handleDeleteComment}
+                                />
+                            </div>
+                        )}
+
+                        {/* 原有的作品展示布局 */}
+                        <Flex gap={20}>
+                            <Sidebar
+                                coverUrl={safeArtwork.artworkCover}
+                                currentUsers={safeArtwork.usersSeedingCurrently}
+                                historyUsers={safeArtwork.usersSeedingHistory}
+                            />
+                            <MainContent
+                                artworkName={safeArtwork.artworkName || safeArtwork.artworkCategory}
+                                author={safeArtwork.author}
+                                category={safeArtwork.artworkCategory}
+                                description={safeArtwork.artworkDescription}
+                                versions={safeArtwork.versionList}
+                                comments={safeComments.list}
+                                commentsTotal={safeComments.total}
+                                commentsLoading={loading.comments}
+                                commentsError={error.comments}
+                                addCommentLoading={loading.addComment}
+                                onCommentsPageChange={handleCommentsPageChange}
+                                onAddComment={handleAddComment}
+                                currentPage={safeComments.current}
+                                pageSize={safeComments.pageSize}
+                                isAuthor={isAuthor}
+                                onEditArtwork={handleEditArtwork}
+                            />
+                        </Flex>
+                    </div>
+                </Flex>
+            </Content>
+        </Layout>
+    );
+};
+
+export default Work;
\ No newline at end of file
diff --git a/src/feature/work/WorkComponents.tsx b/src/feature/work/WorkComponents.tsx
new file mode 100644
index 0000000..64ef37a
--- /dev/null
+++ b/src/feature/work/WorkComponents.tsx
@@ -0,0 +1,368 @@
+import React, { useState } from 'react';
+import { Card, Typography, Tag, Flex, Table, Collapse, List, Spin, Alert, Button, Input, Form, message } from 'antd';
+import { EditOutlined, SendOutlined } from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type { ColumnsType } from 'antd/es/table';
+import type { PaginationConfig } from 'antd/es/pagination';
+import type { FormInstance } from 'antd/es/form';
+import type { Comment, Version, User, HistoryUser } from './types';
+import { parseUploadSize } from './types';
+
+const { Title, Paragraph } = Typography;
+const { Panel } = Collapse;
+const { TextArea } = Input;
+
+// 作品封面组件
+export const ArtworkCover: React.FC<{ coverUrl: string }> = ({ coverUrl }) => (
+    <Card cover={<img alt="作品封面" src={coverUrl} style={{ height: 250, objectFit: 'cover' }} />} />
+);
+
+// 当前做种用户组件
+export const CurrentSeedingUsers: React.FC<{ users: User[] }> = ({ users }) => (
+    <Card>
+        <Title level={4} style={{ marginBottom: 12 }}>当前做种用户</Title>
+        <Flex wrap="wrap" gap={8}>
+            {users.map((user) => (
+                <Tag key={user.userId} color="green">{user.username}</Tag>
+            ))}
+        </Flex>
+    </Card>
+);
+
+// 历史做种用户组件
+export const HistorySeedingUsers: React.FC<{ users: HistoryUser[] }> = ({ users }) => {
+    const sortedUsers = [...users].sort((a, b) => parseUploadSize(b.uploadTotal) - parseUploadSize(a.uploadTotal));
+
+    const columns: ColumnsType<HistoryUser> = [
+        { title: '用户名', dataIndex: 'username', key: 'username' },
+        {
+            title: '上传总量',
+            dataIndex: 'uploadTotal',
+            key: 'uploadTotal',
+            sorter: (a: HistoryUser, b: HistoryUser) => parseUploadSize(a.uploadTotal) - parseUploadSize(b.uploadTotal),
+        },
+    ];
+
+    return (
+        <Card>
+            <Title level={4} style={{ marginBottom: 12 }}>历史做种用户</Title>
+            <Table columns={columns} dataSource={sortedUsers} rowKey="username" pagination={false} size="small" />
+        </Card>
+    );
+};
+
+// 作品描述组件
+export const ArtworkDescription: React.FC<{
+    name: string;
+    author: string;
+    category: string;
+    description: string;
+    isAuthor?: boolean;
+    onEdit?: () => void;
+}> = ({ name, author, category, description, isAuthor = false, onEdit }) => (
+    <Card style={{ marginBottom: 20 }}>
+        <Flex justify="space-between" align="flex-start">
+            <div style={{ flex: 1 }}>
+                <Title level={2} style={{ marginBottom: 8 }}>{name}</Title>
+                <Paragraph style={{ marginBottom: 8, fontSize: 16 }}>
+                    <strong>作者：</strong>{author}
+                </Paragraph>
+                <div style={{ marginBottom: 16 }}>
+                    <Tag color="blue">{category}</Tag>
+                </div>
+                <div style={{ lineHeight: 1.6 }}>
+                    <ReactMarkdown>{description}</ReactMarkdown>
+                </div>
+            </div>
+            {isAuthor && (
+                <Button type="primary" icon={<EditOutlined />} onClick={onEdit} style={{ marginLeft: 16 }}>
+                    编辑作品
+                </Button>
+            )}
+        </Flex>
+    </Card>
+);
+
+// 版本历史组件
+export const VersionHistory: React.FC<{ versions: Version[] }> = ({ versions }) => (
+    <Card title="版本历史" style={{ marginBottom: 20 }}>
+        <Collapse>
+            {versions.map((version, index) => (
+                <Panel
+                    header={`版本 ${version.version}`}
+                    key={`version-${index}`}
+                    extra={<Tag color="blue">v{version.version}</Tag>}
+                >
+                    <div style={{ marginBottom: 16 }}>
+                        <strong>版本描述：</strong>
+                        <div style={{ marginTop: 8, lineHeight: 1.6 }}>
+                            <ReactMarkdown>{version.versionDescription}</ReactMarkdown>
+                        </div>
+                    </div>
+                    <div>
+                        <strong>种子文件：</strong>
+                        <a href={version.seedFile} target="_blank" rel="noopener noreferrer" style={{ marginLeft: 8 }}>
+                            下载链接
+                        </a>
+                    </div>
+                </Panel>
+            ))}
+        </Collapse>
+    </Card>
+);
+
+// 评论项组件（递归）
+export const CommentItem: React.FC<{
+    comment: Comment;
+    level?: number;
+    onReply?: (parentId: string, parentAuthor: string) => void;
+}> = ({ comment, level = 0, onReply }) => (
+    <div style={{ marginLeft: level * 20 }}>
+        <div style={{ marginBottom: 8 }}>
+            <Paragraph style={{ marginBottom: 4 }}>
+                <strong>{comment.author}：</strong>{comment.content}
+            </Paragraph>
+            <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>
+                {comment.createdAt && <span style={{ marginRight: 16 }}>{comment.createdAt}</span>}
+                {onReply && (
+                    <Button
+                        type="link"
+                        size="small"
+                        style={{ padding: 0, height: 'auto', fontSize: 12 }}
+                        onClick={() => onReply(comment.id || comment.author, comment.author)}
+                    >
+                        回复
+                    </Button>
+                )}
+            </div>
+        </div>
+        {comment.child && comment.child.length > 0 && (
+            <div style={{
+                borderLeft: level === 0 ? '2px solid #f0f0f0' : 'none',
+                paddingLeft: level === 0 ? 12 : 0
+            }}>
+                {comment.child.map((child, index) => (
+                    <CommentItem
+                        key={child.id || `child-${level}-${index}`}
+                        comment={child}
+                        level={level + 1}
+                        onReply={onReply}
+                    />
+                ))}
+            </div>
+        )}
+    </div>
+);
+
+// 发表评论组件
+export const CommentForm: React.FC<{
+    loading?: boolean;
+    onSubmit: (content: string, parentId?: string) => void;
+    replyTo?: { id: string; author: string } | null;
+    onCancelReply?: () => void;
+}> = ({ loading = false, onSubmit, replyTo, onCancelReply }) => {
+    const [form]: [FormInstance] = Form.useForm();
+    const [content, setContent] = useState('');
+
+    const handleSubmit = (): void => {
+        if (!content.trim()) {
+            message.warning('请输入评论内容');
+            return;
+        }
+        onSubmit(content.trim(), replyTo?.id);
+        setContent('');
+        form.resetFields();
+    };
+
+    const placeholder = replyTo ? `回复 @${replyTo.author}:` : "发表你的看法...";
+
+    return (
+        <Card
+            size="small"
+            style={{ marginBottom: 16 }}
+            title={replyTo ? (
+                <div style={{ fontSize: 14 }}>
+                    <span>回复 @{replyTo.author}</span>
+                    <Button type="link" size="small" onClick={onCancelReply} style={{ padding: '0 0 0 8px', fontSize: 12 }}>
+                        取消
+                    </Button>
+                </div>
+            ) : undefined}
+        >
+            <Form form={form} layout="vertical">
+                <Form.Item>
+                    <TextArea
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        placeholder={placeholder}
+                        rows={3}
+                        maxLength={500}
+                        showCount
+                    />
+                </Form.Item>
+                <Form.Item style={{ marginBottom: 0 }}>
+                    <Flex justify="flex-end" gap={8}>
+                        {replyTo && <Button onClick={onCancelReply}>取消</Button>}
+                        <Button
+                            type="primary"
+                            icon={<SendOutlined />}
+                            loading={loading}
+                            onClick={handleSubmit}
+                            disabled={!content.trim()}
+                        >
+                            {replyTo ? '发表回复' : '发表评论'}
+                        </Button>
+                    </Flex>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+// 评论区组件
+export const CommentSection: React.FC<{
+    comments: Comment[];
+    total: number;
+    loading?: boolean;
+    error?: string | null;
+    addCommentLoading?: boolean;
+    onPageChange: (page: number, pageSize: number) => void;
+    onAddComment: (content: string, parentId?: string) => void;
+    currentPage: number;
+    pageSize: number;
+}> = ({ comments, total, loading, error, addCommentLoading, onPageChange, onAddComment, currentPage, pageSize }) => {
+    const [replyTo, setReplyTo] = useState<{ id: string; author: string } | null>(null);
+
+    const handleReply = (parentId: string, parentAuthor: string): void => {
+        setReplyTo({ id: parentId, author: parentAuthor });
+    };
+
+    const handleCancelReply = (): void => {
+        setReplyTo(null);
+    };
+
+    const handleSubmitComment = (content: string, parentId?: string): void => {
+        onAddComment(content, parentId);
+        setReplyTo(null);
+    };
+
+    const paginationConfig: PaginationConfig = {
+        current: currentPage,
+        pageSize,
+        total,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条评论`,
+        pageSizeOptions: ['5', '10', '20'],
+        onChange: onPageChange,
+        onShowSizeChange: onPageChange,
+    };
+
+    return (
+        <Card title={`评论 (${total})`} style={{ marginBottom: 20 }}>
+            <CommentForm
+                loading={addCommentLoading}
+                onSubmit={handleSubmitComment}
+                replyTo={replyTo}
+                onCancelReply={handleCancelReply}
+            />
+
+            {error ? (
+                <Alert message="加载评论失败" description={error} type="error" showIcon />
+            ) : loading ? (
+                <Flex justify="center" align="center" style={{ minHeight: 200 }}>
+                    <Spin size="large" />
+                </Flex>
+            ) : comments.length > 0 ? (
+                <List
+                    dataSource={comments}
+                    pagination={paginationConfig}
+                    renderItem={(comment, index) => (
+                        <List.Item
+                            key={comment.id || `comment-${index}`}
+                            style={{ border: 'none', padding: '16px 0', borderBottom: '1px solid #f0f0f0' }}
+                        >
+                            <CommentItem comment={comment} onReply={handleReply} />
+                        </List.Item>
+                    )}
+                />
+            ) : (
+                <Paragraph style={{ textAlign: 'center', color: '#999', margin: '20px 0' }}>
+                    暂无评论，来发表第一条评论吧！
+                </Paragraph>
+            )}
+        </Card>
+    );
+};
+
+// 侧边栏组合组件
+export const Sidebar: React.FC<{
+    coverUrl: string;
+    currentUsers: User[];
+    historyUsers: HistoryUser[];
+    loading?: boolean;
+    error?: string | null;
+}> = ({ coverUrl, currentUsers, historyUsers, loading, error }) => (
+    <Flex flex={1} vertical gap={20}>
+        <ArtworkCover coverUrl={coverUrl} />
+        {loading ? (
+            <Flex justify="center" align="center" style={{ minHeight: 200 }}>
+                <Spin size="large" />
+            </Flex>
+        ) : error ? (
+            <Alert message="加载用户信息失败" description={error} type="error" showIcon />
+        ) : (
+            <>
+                <CurrentSeedingUsers users={currentUsers} />
+                <HistorySeedingUsers users={historyUsers} />
+            </>
+        )}
+    </Flex>
+);
+
+// 主内容区组合组件
+export const MainContent: React.FC<{
+    artworkName: string;
+    author: string;
+    category: string;
+    description: string;
+    versions: Version[];
+    comments: Comment[];
+    commentsTotal: number;
+    commentsLoading?: boolean;
+    commentsError?: string | null;
+    addCommentLoading?: boolean;
+    onCommentsPageChange: (page: number, pageSize: number) => void;
+    onAddComment: (content: string, parentId?: string) => void;
+    currentPage: number;
+    pageSize: number;
+    isAuthor?: boolean;
+    onEditArtwork?: () => void;
+}> = ({
+    artworkName, author, category, description, versions, comments, commentsTotal,
+    commentsLoading, commentsError, addCommentLoading, onCommentsPageChange, onAddComment,
+    currentPage, pageSize, isAuthor, onEditArtwork
+}) => (
+        <Flex flex={4} vertical>
+            <ArtworkDescription
+                name={artworkName}
+                author={author}
+                category={category}
+                description={description}
+                isAuthor={isAuthor}
+                onEdit={onEditArtwork}
+            />
+            <VersionHistory versions={versions} />
+            <CommentSection
+                comments={comments}
+                total={commentsTotal}
+                loading={commentsLoading}
+                error={commentsError}
+                addCommentLoading={addCommentLoading}
+                onPageChange={onCommentsPageChange}
+                onAddComment={onAddComment}
+                currentPage={currentPage}
+                pageSize={pageSize}
+            />
+        </Flex>
+    );
\ No newline at end of file
diff --git a/src/feature/work/hooks.ts b/src/feature/work/hooks.ts
new file mode 100644
index 0000000..f07189e
--- /dev/null
+++ b/src/feature/work/hooks.ts
@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router";
+import type { 
+    WorkFormData, 
+    BasicInfo, 
+    CoverInfo, 
+    VersionFormData,
+    ArtworkCategory
+} from './types';
+
+// ==================== Hook ====================
+export const useCreateWorkForm = () => {
+    const navigate = useNavigate();
+    const [currentStep, setCurrentStep] = useState<number>(0);
+    const [formData, setFormData] = useState<WorkFormData>({
+        basicInfo: { 
+            artworkName: '', 
+            artworkCategory: '概念设计' as ArtworkCategory, 
+            artworkDescription: '' 
+        },
+        coverInfo: {},
+        versions: [],
+    });
+
+    const handleUpdateFormData = useCallback((field: keyof WorkFormData, value: BasicInfo | CoverInfo | VersionFormData[]) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    }, []);
+
+    const handleNext = useCallback(() => setCurrentStep(prev => Math.min(prev + 1, 3)), []);
+    const handlePrev = useCallback(() => setCurrentStep(prev => Math.max(prev - 1, 0)), []);
+    const handlePublish = useCallback(() => navigate('/work/new-work-id'), [navigate]);
+
+    return { currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish };
+};
\ No newline at end of file
diff --git a/src/feature/work/mockData.ts b/src/feature/work/mockData.ts
new file mode 100644
index 0000000..8470e61
--- /dev/null
+++ b/src/feature/work/mockData.ts
@@ -0,0 +1,405 @@
+import type { ArtworkData, Comment } from './types';
+
+// 生成随机时间的工具函数
+const generateRandomDate = (daysAgo: number): string => {
+    const date = new Date();
+    date.setDate(date.getDate() - Math.floor(Math.random() * daysAgo));
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+// 通用评论数据
+const baseComments: Comment[] = [
+    {
+        id: 'comment_1',
+        content: '这个作品真的很棒！设计思路很新颖，学到了很多东西。',
+        author: '设计爱好者小王',
+        authorId: 'user_wang_001',
+        createdAt: generateRandomDate(3),
+        child: [
+            {
+                id: 'comment_1_1',
+                content: '同感！特别是色彩搭配的部分，很有启发性。',
+                author: '视觉设计师李雷',
+                authorId: 'user_lilei_002',
+                createdAt: generateRandomDate(2),
+                child: [],
+            },
+            {
+                id: 'comment_1_2',
+                content: '确实，作者的审美很在线，期待更多作品！',
+                author: '创意总监韩梅梅',
+                authorId: 'user_hanmeimei_003',
+                createdAt: generateRandomDate(2),
+                child: [
+                    {
+                        id: 'comment_1_2_1',
+                        content: '@创意总监韩梅梅 您说得对，这种风格确实很难得',
+                        author: '设计爱好者小王',
+                        authorId: 'user_wang_001',
+                        createdAt: generateRandomDate(1),
+                        child: [],
+                    }
+                ],
+            },
+        ],
+    },
+    {
+        id: 'comment_2',
+        content: '技术实现方面有什么特别的难点吗？想了解一下制作过程。',
+        author: '技术控阿明',
+        authorId: 'user_aming_004',
+        createdAt: generateRandomDate(5),
+        child: [],
+    },
+    {
+        id: 'comment_3',
+        content: '看起来很专业，请问这是用什么软件制作的？',
+        author: '新手小白',
+        authorId: 'user_xiaobai_005',
+        createdAt: generateRandomDate(4),
+        child: [
+            {
+                id: 'comment_3_1',
+                content: '从效果来看应该是用Adobe全家桶，主要是PS和AI',
+                author: '软件专家老刘',
+                authorId: 'user_laoliu_006',
+                createdAt: generateRandomDate(3),
+                child: [],
+            }
+        ],
+    },
+    {
+        id: 'comment_4',
+        content: '色彩运用得很巧妙，给人一种很舒服的视觉感受。',
+        author: '色彩搭配师小张',
+        authorId: 'user_xiaozhang_007',
+        createdAt: generateRandomDate(6),
+        child: [],
+    },
+    {
+        id: 'comment_5',
+        content: '作品质量很高，但是感觉在某些细节上还可以再优化一下。',
+        author: '完美主义者',
+        authorId: 'user_perfect_008',
+        createdAt: generateRandomDate(7),
+        child: [
+            {
+                id: 'comment_5_1',
+                content: '能具体说说哪些地方可以优化吗？我也想学习学习',
+                author: '求知者小陈',
+                authorId: 'user_xiaochen_009',
+                createdAt: generateRandomDate(6),
+                child: [],
+            }
+        ],
+    },
+    {
+        id: 'comment_6',
+        content: '已经下载收藏了，感谢分享！🎉',
+        author: '收藏家大佬',
+        authorId: 'user_collector_010',
+        createdAt: generateRandomDate(8),
+        child: [],
+    },
+    {
+        id: 'comment_7',
+        content: '这个风格很适合我正在做的项目，能不能商用呢？',
+        author: '商务合作方',
+        authorId: 'user_business_011',
+        createdAt: generateRandomDate(9),
+        child: [],
+    },
+    {
+        id: 'comment_8',
+        content: '教程什么时候出？期待大神的分享！',
+        author: '学习狂人',
+        authorId: 'user_learner_012',
+        createdAt: generateRandomDate(10),
+        child: [],
+    }
+];
+
+// 作品数据集合
+export const mockArtworks: Record<string, ArtworkData> = {
+    '12345': {
+        artworkId: '12345',
+        artworkCover: 'https://picsum.photos/300/400?random=1',
+        author: '视觉设计师张三',
+        authorId: 'author_zhangsan_001',
+        artworkName: '未来城市概念设计',
+        artworkCategory: '概念设计',
+        comments: [],
+        artworkDescription: `# 未来城市概念设计
+
+这是一个关于2050年智慧城市的概念设计作品。整个设计融合了**可持续发展**、**人工智能**和**绿色科技**的理念。
+
+## 设计理念
+
+- 🌱 **生态友好**：建筑与自然和谐共生
+- 🤖 **智能化**：AI驱动的城市管理系统
+- 🚗 **零排放**：全面电动化的交通系统
+- 🏗️ **模块化**：可扩展的建筑结构
+
+## 技术特点
+
+采用了最新的**参数化设计**方法，通过算法生成建筑形态，确保每个结构都能最大化利用自然光和风能。
+
+*希望这个设计能为未来城市规划提供一些启发。*`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:future_city_v1_0&dn=未来城市v1.0.zip',
+                versionDescription: `## 初始版本 v1.0
+
+### 包含内容
+- 🎨 **高分辨率效果图** (4K)
+- 📐 **CAD源文件** (.dwg)
+- 🖼️ **PSD分层文件**
+- 📄 **设计说明文档**
+
+### 更新说明
+首次发布，包含完整的设计方案和素材文件。`,
+            },
+            {
+                version: '1.1',
+                seedFile: 'magnet:?xt=urn:btih:future_city_v1_1&dn=未来城市v1.1.zip',
+                versionDescription: `## 更新版本 v1.1
+
+### 新增内容
+- 🌃 **夜景渲染图**
+- 🎬 **动画演示视频** (1080p)
+- 🔧 **Blender源文件**
+
+### 修复内容
+- 修复了部分贴图丢失问题
+- 优化了文件结构
+- 添加了英文版说明文档`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: '设计师小李', userId: 'user_xiaoli_101' },
+            { username: '建筑师王工', userId: 'user_wanggong_102' },
+            { username: '学生小赵', userId: 'user_xiaozhao_103' },
+            { username: '创意总监', userId: 'user_director_104' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: '资深下载者', uploadTotal: '156.8GB',
+                userId: ''
+            },
+            {
+                username: '设计素材库', uploadTotal: '89.2GB',
+                userId: ''
+            },
+            {
+                username: '创意工作室', uploadTotal: '67.5GB',
+                userId: ''
+            },
+            {
+                username: '学院资源组', uploadTotal: '45.3GB',
+                userId: ''
+            },
+            {
+                username: '独立设计师', uploadTotal: '23.7GB',
+                userId: ''
+            },
+        ],
+    },
+    
+    '23456': {
+        artworkId: '23456',
+        artworkCover: 'https://picsum.photos/300/400?random=2',
+        author: 'UI设计师李四',
+        authorId: 'author_lisi_002',
+        artworkName: '移动应用界面设计套件',
+        artworkCategory: 'UI/UX设计',
+        comments: [],
+        artworkDescription: `# 移动应用界面设计套件
+
+一套完整的移动端UI设计规范和组件库，包含**100+个精美界面**和**500+个设计组件**。
+
+## 包含内容
+
+### 📱 界面设计
+- 登录注册页面
+- 主页和导航
+- 商品展示页面
+- 个人中心
+- 设置页面
+
+### 🎨 设计系统
+- **颜色规范**：主色调、辅助色、状态色
+- **字体系统**：标题、正文、注释文字
+- **图标库**：线性图标、填充图标
+- **组件库**：按钮、输入框、卡片等`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:ui_kit_v1_0&dn=UI设计套件v1.0.zip',
+                versionDescription: `## 基础版本 v1.0
+
+### 核心功能
+- 📱 **50个界面模板**
+- 🎨 **基础组件库**
+- 📋 **设计规范文档**
+- 🎯 **Sketch源文件**`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: 'UI设计新手', userId: 'user_ui_newbie_201' },
+            { username: '产品经理小王', userId: 'user_pm_wang_202' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: 'UI设计公司', uploadTotal: '78.9GB',
+                userId: ''
+            },
+            {
+                username: '设计师联盟', uploadTotal: '45.6GB',
+                userId: ''
+            },
+            {
+                username: '学习小组', uploadTotal: '23.4GB',
+                userId: ''
+            },
+        ],
+    },
+
+    '67890': {
+        artworkId: '67890',
+        artworkCover: 'https://picsum.photos/300/400?random=6',
+        author: '刘松林',
+        authorId: '2', // 用户ID为2
+        artworkName: 'React组件库开发指南',
+        artworkCategory: '前端开发',
+        comments: [],
+        artworkDescription: `# React组件库开发指南
+
+一套完整的**企业级React组件库**开发教程和源码，包含从设计到发布的完整流程。
+
+## 项目特色
+
+### 🚀 技术栈
+- **React 18** + **TypeScript**
+- **Styled-components** 样式解决方案
+- **Storybook** 组件文档
+- **Jest** + **Testing Library** 测试
+
+### 📦 组件覆盖
+- **基础组件**: Button, Input, Select, Modal等
+- **布局组件**: Grid, Layout, Container等  
+- **数据展示**: Table, List, Card, Timeline等`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:react_components_v1_0&dn=React组件库v1.0.zip',
+                versionDescription: `## 基础版本 v1.0
+
+### 核心内容
+- 📚 **完整教程文档** (50+页)
+- 💻 **基础组件源码** (20+个组件)
+- 🧪 **单元测试示例**
+- 📖 **Storybook配置**`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: '前端新手小李', userId: 'user_frontend_newbie_601' },
+            { username: 'React爱好者', userId: 'user_react_fan_602' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: '大厂前端团队', uploadTotal: '567.8GB',
+                userId: ''
+            },
+            {
+                username: '开源社区', uploadTotal: '234.5GB',
+                userId: ''
+            },
+            {
+                username: '技术培训机构', uploadTotal: '189.7GB',
+                userId: ''
+            },
+        ],
+    },
+};
+
+// 获取指定作品的评论数据
+export const getCommentsForArtwork = (artworkId: string): Comment[] => {
+    // 为不同作品生成不同的评论
+    const commentVariations: Record<string, Comment[]> = {
+        '12345': baseComments,
+        '23456': baseComments.slice(0, 5).map(comment => ({
+            ...comment,
+            id: `ui_${comment.id}`,
+            content: comment.content.replace('作品', 'UI套件').replace('设计', '界面设计'),
+        })),
+        '67890': [
+            {
+                id: 'dev_comment_1',
+                content: '这个组件库的设计思路很棒！TypeScript类型定义特别完善。',
+                author: '前端架构师张工',
+                authorId: 'user_architect_zhang',
+                createdAt: generateRandomDate(2),
+                child: [
+                    {
+                        id: 'dev_comment_1_1',
+                        content: '同感！特别是组件API的设计，很符合React的设计理念。',
+                        author: 'React核心开发者',
+                        authorId: 'user_react_core',
+                        createdAt: generateRandomDate(1),
+                        child: [],
+                    }
+                ],
+            },
+            {
+                id: 'dev_comment_2',
+                content: '构建配置写得很详细，我们团队已经参考这个搭建了自己的组件库。',
+                author: '技术负责人小刘',
+                authorId: 'user_tech_liu',
+                createdAt: generateRandomDate(3),
+                child: [],
+            },
+        ],
+    };
+    
+    return commentVariations[artworkId] || baseComments;
+};
+
+// 根据作品ID获取作品数据
+export const getArtworkById = (artworkId: string): ArtworkData | null => {
+    const artwork = mockArtworks[artworkId];
+    if (artwork) {
+        return {
+            ...artwork,
+            comments: getCommentsForArtwork(artworkId)
+        };
+    }
+    return null;
+};
+
+// 获取所有作品列表
+export const getAllArtworks = (): ArtworkData[] => {
+    return Object.values(mockArtworks);
+};
+
+// 按分类获取作品
+export const getArtworksByCategory = (category: string): ArtworkData[] => {
+    return Object.values(mockArtworks).filter(artwork => artwork.artworkCategory === category);
+};
+
+// 搜索作品
+export const searchArtworks = (keyword: string): ArtworkData[] => {
+    const lowerKeyword = keyword.toLowerCase();
+    return Object.values(mockArtworks).filter(artwork => 
+        artwork.artworkName.toLowerCase().includes(lowerKeyword) ||
+        artwork.artworkDescription.toLowerCase().includes(lowerKeyword) ||
+        artwork.author.toLowerCase().includes(lowerKeyword) ||
+        artwork.artworkCategory.toLowerCase().includes(lowerKeyword)
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/types.ts b/src/feature/work/types.ts
new file mode 100644
index 0000000..2d7dbd7
--- /dev/null
+++ b/src/feature/work/types.ts
@@ -0,0 +1,283 @@
+import type { UploadFile } from 'antd/es/upload';
+
+// ==================== 基础类型 ====================
+
+export interface User {
+    userId: string;
+    username: string;
+}
+
+export interface HistoryUser extends User {
+    uploadTotal: string;
+}
+
+// ==================== 评论相关 ====================
+
+export interface Comment {
+    id?: string;
+    content: string;
+    author: string;
+    authorId?: string;
+    createdAt?: string;
+    child: Comment[];
+}
+
+// ==================== 版本管理相关 ====================
+
+// 用于表单创建的版本信息
+export interface VersionFormData {
+    version: string;
+    versionDescription: string;
+    seedFile?: UploadFile; // 表单中的文件对象
+}
+
+// 用于展示的版本信息（后端返回）
+export interface Version {
+    version: string;
+    versionDescription: string;
+    seedFile: string; // 文件URL或路径
+    uploadedAt?: string;
+    fileSize?: number;
+}
+
+// ==================== 作品相关 ====================
+
+// 基础信息（表单用）
+export interface BasicInfo {
+    artworkName: string;
+    artworkCategory: ArtworkCategory;
+    artworkDescription: string;
+}
+
+// 封面信息（表单用）
+export interface CoverInfo {
+    coverFile?: UploadFile;
+}
+
+// 表单数据结构
+export interface WorkFormData {
+    basicInfo: BasicInfo;
+    coverInfo: CoverInfo;
+    versions: VersionFormData[];
+}
+
+// 完整的作品数据（后端返回/展示用）
+export interface ArtworkData {
+    artworkId: string;
+    artworkCover: string;
+    author: string;
+    authorId: string;
+    artworkName: string;
+    artworkCategory: ArtworkCategory;
+    artworkDescription: string;
+    versionList: Version[];
+    comments: Comment[];
+    usersSeedingCurrently: User[];
+    usersSeedingHistory: HistoryUser[];
+    createdAt?: string;
+    updatedAt?: string;
+    downloadCount?: number;
+    likeCount?: number;
+}
+
+// ==================== 表单相关 ====================
+
+export interface StepFormProps {
+    data: WorkFormData;
+    onUpdate: (field: keyof WorkFormData, value: BasicInfo | CoverInfo | VersionFormData[]) => void;
+    onNext?: () => void;
+    onPrev?: () => void;
+}
+
+// ==================== 常量定义 ====================
+
+export const ARTWORK_CATEGORIES = [
+    { label: '概念设计', value: '概念设计' },
+    { label: 'UI/UX设计', value: 'UI/UX设计' },
+    { label: '3D建模', value: '3D建模' },
+    { label: '摄影作品', value: '摄影作品' },
+    { label: '音乐制作', value: '音乐制作' },
+    { label: '前端开发', value: '前端开发' },
+    { label: '插画艺术', value: '插画艺术' },
+    { label: '动画制作', value: '动画制作' },
+    { label: '视频剪辑', value: '视频剪辑' },
+    { label: '其他', value: '其他' },
+];
+
+// 提取分类值的联合类型
+export type ArtworkCategory = '概念设计' | 'UI/UX设计' | '3D建模' | '摄影作品' | '音乐制作' | '前端开发' | '插画艺术' | '动画制作' | '视频剪辑' | '其他';
+
+// 分类选项类型（用于 Select 组件）
+export interface ArtworkCategoryOption {
+    label: string;
+    value: ArtworkCategory;
+}
+
+// ==================== 工具函数 ====================
+
+/**
+ * 解析上传大小字符串为MB数值
+ * @param uploadStr 上传大小字符串，如 "1.5GB", "500MB"
+ * @returns 大小值（以MB为单位）
+ */
+export const parseUploadSize = (uploadStr: string): number => {
+    const match = uploadStr.match(/(\d+(?:\.\d+)?)\s*(GB|MB|KB|TB)?/i);
+    if (!match) return 0;
+    
+    const size = parseFloat(match[1]);
+    const unit = (match[2] || '').toUpperCase();
+    
+    const multipliers: Record<string, number> = {
+        'TB': 1024 * 1024,
+        'GB': 1024,
+        'MB': 1,
+        'KB': 1 / 1024,
+        '': 1
+    };
+    
+    return size * (multipliers[unit] || 1);
+};
+
+/**
+ * 格式化文件大小为可读字符串
+ * @param sizeInMB 文件大小（MB）
+ * @returns 格式化后的字符串
+ */
+export const formatFileSize = (sizeInMB: number): string => {
+    if (sizeInMB >= 1024) {
+        return `${(sizeInMB / 1024).toFixed(1)}GB`;
+    } else if (sizeInMB >= 1) {
+        return `${sizeInMB.toFixed(1)}MB`;
+    } else {
+        return `${(sizeInMB * 1024).toFixed(0)}KB`;
+    }
+};
+
+/**
+ * 格式化日期
+ * @param dateString 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+export const formatDate = (dateString?: string): string => {
+    if (!dateString) return '';
+    
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
+    
+    if (diffInHours < 1) {
+        return '刚刚';
+    } else if (diffInHours < 24) {
+        return `${Math.floor(diffInHours)}小时前`;
+    } else if (diffInHours < 24 * 7) {
+        return `${Math.floor(diffInHours / 24)}天前`;
+    } else {
+        return date.toLocaleDateString('zh-CN');
+    }
+};
+
+/**
+ * 验证文件大小是否符合要求
+ * @param fileSize 文件大小（字节）
+ * @param maxSizeMB 最大允许大小（MB）
+ * @returns 是否符合要求
+ */
+export const isValidFileSize = (fileSize: number, maxSizeMB: number): boolean => {
+    const fileSizeMB = fileSize / (1024 * 1024);
+    return fileSizeMB <= maxSizeMB;
+};
+
+/**
+ * 验证文件类型是否符合要求
+ * @param fileName 文件名
+ * @param allowedExtensions 允许的扩展名数组
+ * @returns 是否符合要求
+ */
+export const isValidFileType = (fileName: string, allowedExtensions: string[]): boolean => {
+    if (!fileName) return false;
+    const extension = fileName.toLowerCase().split('.').pop();
+    return extension ? allowedExtensions.includes(extension) : false;
+};
+
+/**
+ * 验证图片文件类型
+ * @param fileName 文件名
+ * @returns 是否为有效图片
+ */
+export const isValidImageFile = (fileName: string): boolean => {
+    return isValidFileType(fileName, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']);
+};
+
+/**
+ * 安全地解析JSON字符串
+ * @param jsonString JSON字符串
+ * @returns 解析结果或null
+ */
+export const safeJsonParse = <T = unknown>(jsonString: string): T | null => {
+    try {
+        return JSON.parse(jsonString) as T;
+    } catch {
+        return null;
+    }
+};
+
+// ==================== 类型守卫 ====================
+
+export const isValidArtworkCategory = (category: string): category is ArtworkCategory => {
+    return ARTWORK_CATEGORIES.some(cat => cat.value === category);
+};
+
+export const isComment = (obj: unknown): obj is Comment => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'content' in obj && 
+           'author' in obj && 
+           'child' in obj &&
+           typeof (obj as Record<string, unknown>).content === 'string' && 
+           typeof (obj as Record<string, unknown>).author === 'string' && 
+           Array.isArray((obj as Record<string, unknown>).child);
+};
+
+export const isUser = (obj: unknown): obj is User => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'userId' in obj && 
+           'username' in obj &&
+           typeof (obj as Record<string, unknown>).userId === 'string' && 
+           typeof (obj as Record<string, unknown>).username === 'string';
+};
+
+export const isHistoryUser = (obj: unknown): obj is HistoryUser => {
+    return isUser(obj) && 
+           'uploadTotal' in obj &&
+           typeof (obj as Record<string, unknown>).uploadTotal === 'string';
+};
+
+export const isVersion = (obj: unknown): obj is Version => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'version' in obj && 
+           'versionDescription' in obj && 
+           'seedFile' in obj &&
+           typeof (obj as Record<string, unknown>).version === 'string' && 
+           typeof (obj as Record<string, unknown>).versionDescription === 'string' && 
+           typeof (obj as Record<string, unknown>).seedFile === 'string';
+};
+
+export const isArtworkData = (obj: unknown): obj is ArtworkData => {
+    if (typeof obj !== 'object' || obj === null) return false;
+    
+    const artwork = obj as Record<string, unknown>;
+    
+    return typeof artwork.artworkId === 'string' &&
+           typeof artwork.artworkCover === 'string' &&
+           typeof artwork.author === 'string' &&
+           typeof artwork.authorId === 'string' &&
+           typeof artwork.artworkName === 'string' &&
+           typeof artwork.artworkCategory === 'string' &&
+           typeof artwork.artworkDescription === 'string' &&
+           Array.isArray(artwork.versionList) &&
+           Array.isArray(artwork.comments) &&
+           Array.isArray(artwork.usersSeedingCurrently) &&
+           Array.isArray(artwork.usersSeedingHistory);
+};
\ No newline at end of file
diff --git a/src/feature/work/utils.ts b/src/feature/work/utils.ts
new file mode 100644
index 0000000..a10d95f
--- /dev/null
+++ b/src/feature/work/utils.ts
@@ -0,0 +1,155 @@
+import type { RcFile } from 'antd/es/upload';
+
+// 将文件转换为Base64
+export const getBase64 = (file: RcFile): Promise<string> =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = (error) => reject(error);
+    });
+
+// 验证图片文件
+interface ValidationResult {
+    valid: boolean;
+    message?: string;
+}
+
+export const validateImageFile = (file: RcFile): ValidationResult => {
+    const isImage = file.type.startsWith('image/');
+    if (!isImage) {
+        return { valid: false, message: '只能上传图片文件！' };
+    }
+
+    const isLt5M = file.size / 1024 / 1024 < 5;
+    if (!isLt5M) {
+        return { valid: false, message: '图片大小不能超过 5MB！' };
+    }
+
+    return { valid: true };
+};
+
+// 验证种子文件
+export const validateSeedFile = (file: RcFile): ValidationResult => {
+    const isLt100M = file.size / 1024 / 1024 < 100;
+    if (!isLt100M) {
+        return { valid: false, message: '种子文件大小不能超过 100MB！' };
+    }
+
+    return { valid: true };
+};
+
+// 格式化文件大小
+export const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// 防抖函数 - 修复版本
+export const debounce = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    wait: number
+): ((...args: Parameters<T>) => void) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    
+    return (...args: Parameters<T>) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+};
+
+// 节流函数 - 修复版本
+export const throttle = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    limit: number
+): ((...args: Parameters<T>) => void) => {
+    let inThrottle: boolean;
+    
+    return (...args: Parameters<T>) => {
+        if (!inThrottle) {
+            func(...args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+};
+// 生成唯一ID
+export const generateId = (): string => {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
+
+// 安全的JSON解析
+export const safeJsonParse = <T>(str: string, defaultValue: T): T => {
+    try {
+        return JSON.parse(str) as T;
+    } catch {
+        return defaultValue;
+    }
+};
+
+// 检查是否为空值
+export const isEmpty = (value: unknown): boolean => {
+    if (value === null || value === undefined) return true;
+    if (typeof value === 'string') return value.trim() === '';
+    if (Array.isArray(value)) return value.length === 0;
+    if (typeof value === 'object') return Object.keys(value).length === 0;
+    return false;
+};
+
+// URL参数解析
+export const parseUrlParams = (url: string): Record<string, string> => {
+    const params: Record<string, string> = {};
+    const urlObj = new URL(url);
+    
+    urlObj.searchParams.forEach((value, key) => {
+        params[key] = value;
+    });
+    
+    return params;
+};
+
+// 时间格式化
+export const formatDate = (date: Date | string | number, format: string = 'YYYY-MM-DD HH:mm:ss'): string => {
+    const d = new Date(date);
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const hours = String(d.getHours()).padStart(2, '0');
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const seconds = String(d.getSeconds()).padStart(2, '0');
+    
+    return format
+        .replace('YYYY', year.toString())
+        .replace('MM', month)
+        .replace('DD', day)
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+};
+
+// 相对时间格式化（例如：2小时前）
+export const formatRelativeTime = (date: Date | string | number): string => {
+    const now = new Date();
+    const target = new Date(date);
+    const diff = now.getTime() - target.getTime();
+    
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(months / 12);
+    
+    if (years > 0) return `${years}年前`;
+    if (months > 0) return `${months}个月前`;
+    if (days > 0) return `${days}天前`;
+    if (hours > 0) return `${hours}小时前`;
+    if (minutes > 0) return `${minutes}分钟前`;
+    return '刚刚';
+};
\ No newline at end of file
diff --git a/src/feature/work/workSlice.ts b/src/feature/work/workSlice.ts
new file mode 100644
index 0000000..6b2c12c
--- /dev/null
+++ b/src/feature/work/workSlice.ts
@@ -0,0 +1,469 @@
+import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit';
+import type { ArtworkData, Comment } from './types';
+import type { RootState } from '../../store/store';
+import { getArtworkById, getCommentsForArtwork } from './mockData';
+
+// ==================== 类型定义 ====================
+interface WorkState {
+    currentArtwork: ArtworkData | null;
+    loading: {
+        artwork: boolean;
+        comments: boolean;
+        addComment: boolean;
+        updateArtwork: boolean;
+        deleteComment: boolean;
+    };
+    error: {
+        artwork: string | null;
+        comments: string | null;
+        addComment: string | null;
+        updateArtwork: string | null;
+        deleteComment: string | null;
+    };
+    comments: {
+        list: Comment[];
+        total: number;
+        current: number;
+        pageSize: number;
+    };
+}
+
+interface FetchCommentsParams {
+    workId: string;
+    page: number;
+    pageSize: number;
+}
+
+interface AddCommentParams {
+    workId: string;
+    content: string;
+    parentId?: string;
+}
+
+interface UpdateArtworkParams {
+    workId: string;
+    updates: Partial<ArtworkData>;
+}
+
+interface DeleteCommentParams {
+    workId: string;
+    commentId: string;
+}
+
+interface SetCommentsPageParams {
+    current: number;
+    pageSize: number;
+}
+
+// ==================== 初始状态 ====================
+const initialState: WorkState = {
+    currentArtwork: null,
+    loading: {
+        artwork: false,
+        comments: false,
+        addComment: false,
+        updateArtwork: false,
+        deleteComment: false,
+    },
+    error: {
+        artwork: null,
+        comments: null,
+        addComment: null,
+        updateArtwork: null,
+        deleteComment: null,
+    },
+    comments: {
+        list: [],
+        total: 0,
+        current: 1,
+        pageSize: 5,
+    },
+};
+
+// ==================== Mock 工具函数 ====================
+
+// 模拟网络延迟
+const mockDelay = (ms: number = 800): Promise<void> => 
+    new Promise(resolve => setTimeout(resolve, ms));
+
+// 生成新评论ID
+const generateCommentId = (): string => {
+    return `comment_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+// 生成新评论数据
+const createNewComment = (content: string): Comment => {
+    return {
+        id: generateCommentId(),
+        content,
+        author: '当前用户', // 实际应用中从用户状态获取
+        authorId: 'current_user_id',
+        createdAt: new Date().toLocaleString('zh-CN'),
+        child: [],
+    };
+};
+
+// 递归删除评论
+const removeCommentById = (comments: Comment[], targetId: string): Comment[] => {
+    return comments.filter(comment => {
+        if (comment.id === targetId) {
+            return false;
+        }
+        if (comment.child.length > 0) {
+            comment.child = removeCommentById(comment.child, targetId);
+        }
+        return true;
+    });
+};
+
+// 递归添加回复评论
+const addReplyToComment = (comments: Comment[], parentId: string, newComment: Comment): Comment[] => {
+    return comments.map(comment => {
+        if (comment.id === parentId) {
+            return {
+                ...comment,
+                child: [...comment.child, newComment]
+            };
+        }
+        if (comment.child.length > 0) {
+            return {
+                ...comment,
+                child: addReplyToComment(comment.child, parentId, newComment)
+            };
+        }
+        return comment;
+    });
+};
+
+// 分页处理评论
+const paginateComments = (comments: Comment[], page: number, pageSize: number): Comment[] => {
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return comments.slice(startIndex, endIndex);
+};
+
+// ==================== 异步 Actions ====================
+
+// 获取作品详情
+export const fetchArtworkDetail = createAsyncThunk<
+    ArtworkData,
+    string,
+    { rejectValue: string }
+>(
+    'work/fetchArtworkDetail',
+    async (workId: string, { rejectWithValue }) => {
+        try {
+            await mockDelay(600); // 模拟网络延迟
+            
+            const artwork = getArtworkById(workId);
+            
+            if (!artwork) {
+                throw new Error(`作品 ${workId} 不存在`);
+            }
+            
+            return artwork;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '获取作品详情失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 获取评论列表
+export const fetchComments = createAsyncThunk<
+    { comments: Comment[]; total: number },
+    FetchCommentsParams,
+    { rejectValue: string }
+>(
+    'work/fetchComments',
+    async ({ workId, page, pageSize }, { rejectWithValue }) => {
+        try {
+            await mockDelay(400); // 模拟网络延迟
+            
+            const allComments = getCommentsForArtwork(workId);
+            const paginatedComments = paginateComments(allComments, page, pageSize);
+            
+            return {
+                comments: paginatedComments,
+                total: allComments.length
+            };
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '获取评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 添加评论
+export const addComment = createAsyncThunk<
+    Comment,
+    AddCommentParams,
+    { rejectValue: string }
+>(
+    'work/addComment',
+    async ({ workId, content }, { rejectWithValue }) => {
+        try {
+            await mockDelay(500); // 模拟网络延迟
+            
+            // 验证作品是否存在
+            const artwork = getArtworkById(workId);
+            if (!artwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 创建新评论
+            const newComment = createNewComment(content);
+            
+            // 模拟服务器返回完整的评论数据
+            return newComment;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '添加评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 更新作品信息
+export const updateArtwork = createAsyncThunk<
+    ArtworkData,
+    UpdateArtworkParams,
+    { rejectValue: string }
+>(
+    'work/updateArtwork',
+    async ({ workId, updates }, { rejectWithValue }) => {
+        try {
+            await mockDelay(1000); // 模拟网络延迟
+            
+            const currentArtwork = getArtworkById(workId);
+            if (!currentArtwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 模拟文件上传处理
+            const processedUpdates = { ...updates };
+            
+            // 如果包含 blob URL，模拟转换为正式URL
+            if (updates.artworkCover && updates.artworkCover.startsWith('blob:')) {
+                // 模拟上传成功，生成新的图片URL
+                processedUpdates.artworkCover = `https://picsum.photos/300/400?random=${Date.now()}`;
+            }
+            
+            // 处理版本文件上传
+            if (updates.versionList) {
+                processedUpdates.versionList = updates.versionList.map(version => ({
+                    ...version,
+                    seedFile: version.seedFile.startsWith?.('blob:') 
+                        ? `magnet:?xt=urn:btih:updated_${Date.now()}&dn=${version.version}.zip`
+                        : version.seedFile
+                }));
+            }
+            
+            // 合并更新后的数据
+            const updatedArtwork: ArtworkData = {
+                ...currentArtwork,
+                ...processedUpdates,
+                updatedAt: new Date().toISOString(),
+            };
+            
+            return updatedArtwork;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '更新作品失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 删除评论
+export const deleteComment = createAsyncThunk<
+    string,
+    DeleteCommentParams,
+    { rejectValue: string }
+>(
+    'work/deleteComment',
+    async ({ workId, commentId }, { rejectWithValue }) => {
+        try {
+            await mockDelay(300); // 模拟网络延迟
+            
+            // 验证作品是否存在
+            const artwork = getArtworkById(workId);
+            if (!artwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 模拟删除成功
+            return commentId;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '删除评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// ==================== Slice 定义 ====================
+const workSlice = createSlice({
+    name: 'work',
+    initialState,
+    reducers: {
+        // 清除当前作品
+        clearCurrentArtwork: (state) => {
+            state.currentArtwork = null;
+            state.comments.list = [];
+            state.comments.total = 0;
+            state.comments.current = 1;
+            // 清除所有错误状态
+            Object.keys(state.error).forEach(key => {
+                state.error[key as keyof typeof state.error] = null;
+            });
+        },
+        
+        // 设置评论分页
+        setCommentsPage: (state, action: PayloadAction<SetCommentsPageParams>) => {
+            state.comments.current = action.payload.current;
+            state.comments.pageSize = action.payload.pageSize;
+        },
+        
+        // 清除特定错误
+        clearError: (state, action: PayloadAction<keyof WorkState['error']>) => {
+            state.error[action.payload] = null;
+        },
+        
+        // 清除所有错误
+        clearAllErrors: (state) => {
+            Object.keys(state.error).forEach(key => {
+                state.error[key as keyof typeof state.error] = null;
+            });
+        },
+    },
+    extraReducers: (builder) => {
+        // 获取作品详情
+        builder
+            .addCase(fetchArtworkDetail.pending, (state) => {
+                state.loading.artwork = true;
+                state.error.artwork = null;
+            })
+            .addCase(fetchArtworkDetail.fulfilled, (state, action) => {
+                state.loading.artwork = false;
+                state.currentArtwork = action.payload;
+                state.error.artwork = null;
+            })
+            .addCase(fetchArtworkDetail.rejected, (state, action) => {
+                state.loading.artwork = false;
+                state.error.artwork = action.payload || '获取作品详情失败';
+            });
+
+        // 获取评论列表
+        builder
+            .addCase(fetchComments.pending, (state) => {
+                state.loading.comments = true;
+                state.error.comments = null;
+            })
+            .addCase(fetchComments.fulfilled, (state, action) => {
+                state.loading.comments = false;
+                state.comments.list = action.payload.comments;
+                state.comments.total = action.payload.total;
+                state.error.comments = null;
+            })
+            .addCase(fetchComments.rejected, (state, action) => {
+                state.loading.comments = false;
+                state.error.comments = action.payload || '获取评论失败';
+            });
+
+        // 添加评论
+        builder
+            .addCase(addComment.pending, (state) => {
+                state.loading.addComment = true;
+                state.error.addComment = null;
+            })
+            .addCase(addComment.fulfilled, (state, action) => {
+                state.loading.addComment = false;
+                
+                const newComment = action.payload;
+                const { parentId } = action.meta.arg;
+                
+                if (parentId) {
+                    // 添加回复评论
+                    state.comments.list = addReplyToComment(state.comments.list, parentId, newComment);
+                } else {
+                    // 添加顶级评论
+                    state.comments.list.unshift(newComment);
+                    state.comments.total += 1;
+                }
+                
+                state.error.addComment = null;
+            })
+            .addCase(addComment.rejected, (state, action) => {
+                state.loading.addComment = false;
+                state.error.addComment = action.payload || '添加评论失败';
+            });
+
+        // 更新作品信息
+        builder
+            .addCase(updateArtwork.pending, (state) => {
+                state.loading.updateArtwork = true;
+                state.error.updateArtwork = null;
+            })
+            .addCase(updateArtwork.fulfilled, (state, action) => {
+                state.loading.updateArtwork = false;
+                state.currentArtwork = action.payload;
+                state.error.updateArtwork = null;
+            })
+            .addCase(updateArtwork.rejected, (state, action) => {
+                state.loading.updateArtwork = false;
+                state.error.updateArtwork = action.payload || '更新作品失败';
+            });
+
+        // 删除评论
+        builder
+            .addCase(deleteComment.pending, (state) => {
+                state.loading.deleteComment = true;
+                state.error.deleteComment = null;
+            })
+            .addCase(deleteComment.fulfilled, (state, action) => {
+                state.loading.deleteComment = false;
+                
+                // 从评论列表中移除已删除的评论
+                state.comments.list = removeCommentById(state.comments.list, action.payload);
+                state.comments.total = Math.max(0, state.comments.total - 1);
+                state.error.deleteComment = null;
+            })
+            .addCase(deleteComment.rejected, (state, action) => {
+                state.loading.deleteComment = false;
+                state.error.deleteComment = action.payload || '删除评论失败';
+            });
+    },
+});
+
+// ==================== Actions 导出 ====================
+export const { 
+    clearCurrentArtwork, 
+    setCommentsPage, 
+    clearError, 
+    clearAllErrors 
+} = workSlice.actions;
+
+// ==================== Selectors 导出 ====================
+export const selectCurrentArtwork = (state: RootState): ArtworkData | null => 
+    state.work.currentArtwork;
+
+export const selectWorkLoading = (state: RootState): WorkState['loading'] => 
+    state.work.loading;
+
+export const selectWorkError = (state: RootState): WorkState['error'] => 
+    state.work.error;
+
+export const selectComments = (state: RootState): WorkState['comments'] => 
+    state.work.comments;
+
+export const selectIsAuthor = (state: RootState): boolean => {
+    const currentUser = state.user;
+    const currentArtwork = state.work.currentArtwork;
+    
+    return Boolean(
+        currentUser?.userid && 
+        currentArtwork?.authorId &&
+        String(currentUser.userid) === String(currentArtwork.authorId)
+    );
+};
+
+// ==================== Reducer 导出 ====================
+export default workSlice.reducer;
\ No newline at end of file