完成主页， 作品页，作品编辑页
> 未对接后端接口
Change-Id: I5d62663602656da4940707e00f76bfe09d824c2c
diff --git a/src/feature/work/Work.tsx b/src/feature/work/Work.tsx
index 56939d1..d9b08f0 100644
--- a/src/feature/work/Work.tsx
+++ b/src/feature/work/Work.tsx
@@ -100,8 +100,6 @@
}
}, [work_id, dispatch]);
- // ==================== EditWork 集成功能 ====================
-
// 更新作品信息
const handleUpdateArtwork = useCallback(async (updates: Partial<ArtworkData>): Promise<void> => {
if (!work_id || !currentArtwork) return;
@@ -157,17 +155,6 @@
}
}, [work_id, dispatch, comments.current, comments.pageSize]);
- // 兼容旧的编辑处理器
- const handleEditArtwork = useCallback((): void => {
- if (isAuthor) {
- setShowEditControls(true);
- message.info('请使用上方的编辑控件来修改作品信息');
- } else {
- message.warning('您没有编辑此作品的权限');
- }
- }, [isAuthor]);
-
- // ==================== 渲染逻辑 ====================
// 加载状态
if (loading.artwork) {
@@ -275,7 +262,6 @@
currentPage={safeComments.current}
pageSize={safeComments.pageSize}
isAuthor={isAuthor}
- onEditArtwork={handleEditArtwork}
/>
</Flex>
</div>
diff --git a/src/feature/work/WorkComponents.tsx b/src/feature/work/WorkComponents.tsx
index 64ef37a..79f976a 100644
--- a/src/feature/work/WorkComponents.tsx
+++ b/src/feature/work/WorkComponents.tsx
@@ -1,6 +1,6 @@
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 { SendOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import type { ColumnsType } from 'antd/es/table';
import type { PaginationConfig } from 'antd/es/pagination';
@@ -59,7 +59,7 @@
description: string;
isAuthor?: boolean;
onEdit?: () => void;
-}> = ({ name, author, category, description, isAuthor = false, onEdit }) => (
+}> = ({ name, author, category, description }) => (
<Card style={{ marginBottom: 20 }}>
<Flex justify="space-between" align="flex-start">
<div style={{ flex: 1 }}>
@@ -74,11 +74,6 @@
<ReactMarkdown>{description}</ReactMarkdown>
</div>
</div>
- {isAuthor && (
- <Button type="primary" icon={<EditOutlined />} onClick={onEdit} style={{ marginLeft: 16 }}>
- 编辑作品
- </Button>
- )}
</Flex>
</Card>
);
diff --git a/src/feature/work/WorkPage.css b/src/feature/work/WorkPage.css
deleted file mode 100644
index 14b815a..0000000
--- a/src/feature/work/WorkPage.css
+++ /dev/null
@@ -1,155 +0,0 @@
-/* 作品页面容器 */
-.work-page-container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
-}
-
-/* 返回按钮 */
-.back-button {
- margin-bottom: 20px;
-}
-
-/* 作品头部 */
-.work-header {
- margin-bottom: 20px;
-}
-
-.work-header .ant-typography {
- margin-bottom: 8px;
-}
-
-.work-meta {
- margin: 16px 0;
-}
-
-.like-button {
- margin-top: 10px;
-}
-
-/* 内容区域 */
-.work-content {
- padding: 20px;
- background: #f9f9f9;
- border-radius: 4px;
-}
-
-/* Bug反馈区域 */
-.bug-report-section {
- margin-top: 20px;
-}
-
-.bug-item {
- width: 100%;
- padding: 15px;
- border: 1px solid #f0f0f0;
- border-radius: 4px;
- margin-bottom: 10px;
-}
-
-.bug-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 8px;
-}
-
-.bug-content {
- margin: 10px 0;
-}
-
-/* 讨论区 */
-.discussion-section {
- margin-top: 20px;
-}
-
-.discussion-container {
- display: flex;
- gap: 20px;
-}
-
-.discussion-list {
- width: 300px;
- border-right: 1px solid #f0f0f0;
- padding-right: 20px;
-}
-
-.discussion-detail {
- flex: 1;
-}
-
-.discussion-item {
- padding: 15px;
- cursor: pointer;
- border-radius: 4px;
- margin-bottom: 10px;
- transition: all 0.3s;
-}
-
-.discussion-item:hover {
- background: #f5f5f5;
-}
-
-.discussion-item.active {
- background: #e6f7ff;
- border-left: 3px solid #1890ff;
-}
-
-.discussion-detail-content {
- padding: 20px;
- background: #f9f9f9;
- border-radius: 4px;
- margin-bottom: 20px;
-}
-
-.discussion-title {
- font-size: 18px;
- display: block;
- margin-bottom: 10px;
-}
-
-.discussion-meta {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 15px;
-}
-
-.discussion-body {
- margin-bottom: 20px;
-}
-
-.comment-item {
- padding: 15px 0;
- border-bottom: 1px solid #f0f0f0;
-}
-
-.comment-header {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 10px;
-}
-
-.comment-actions {
- margin-top: 10px;
-}
-
-.new-discussion-btn {
- margin-bottom: 20px;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
- .discussion-container {
- flex-direction: column;
- }
-
- .discussion-list {
- width: 100%;
- border-right: none;
- padding-right: 0;
- border-bottom: 1px solid #f0f0f0;
- padding-bottom: 20px;
- margin-bottom: 20px;
- }
-}
\ No newline at end of file
diff --git a/src/feature/work/WorkPage.tsx b/src/feature/work/WorkPage.tsx
deleted file mode 100644
index 3a108a7..0000000
--- a/src/feature/work/WorkPage.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router';
-import { Button, Tabs, message, Spin, Tag, Typography, Space, Divider } from 'antd';
-import { ArrowLeftOutlined, LikeOutlined, BugOutlined, CommentOutlined } from '@ant-design/icons';
-import WorkAPI from '../../api/workApi';
-import BugReportSection from '../../components/BugReportSection';
-import DiscussionSection from '../../components/DiscussionSection';
-import type { Work } from '../../api/otherType';
-
-const { Title, Text, Paragraph } = Typography;
-const { TabPane } = Tabs;
-
-const WorkPage: React.FC = () => {
- const { id } = useParams<{ id: string }>();
- const navigate = useNavigate();
- const [work, setWork] = useState<Work | null>(null);
- const [loading, setLoading] = useState(true);
- const [activeTab, setActiveTab] = useState('details');
-
- // 加载作品数据
- useEffect(() => {
- const loadWork = async () => {
- try {
- const workData = await WorkAPI.getWorkById(Number(id));
- setWork(workData);
- } catch (error) {
- message.error('加载作品失败');
- navigate('/');
- } finally {
- setLoading(false);
- }
- };
-
- loadWork();
- }, [id, navigate]);
-
- // 点赞处理
- const handleLike = async () => {
- try {
- await WorkAPI.likeWork(Number(id));
- setWork(prev => prev ? { ...prev, likes: prev.likes + 1 } : null);
- message.success('点赞成功');
- } catch (error) {
- message.error('点赞失败');
- }
- };
-
- if (loading) {
- return <Spin size="large" className="center-spinner" />;
- }
-
- if (!work) {
- return <div>作品不存在</div>;
- }
-
- return (
- <div className="work-page-container">
- <Button
- type="text"
- icon={<ArrowLeftOutlined />}
- onClick={() => navigate(-1)}
- className="back-button"
- >
- 返回
- </Button>
-
- <div className="work-header">
- <Title level={2}>{work.title}</Title>
- <Text type="secondary">作者: {work.author}</Text>
-
- <div className="work-meta">
- <Space size="middle">
- <Tag color="blue">{work.categoryName}</Tag>
- <Text>浏览: {work.views}</Text>
- <Text>点赞: {work.likes}</Text>
- <Text>上传时间: {new Date(work.createTime).toLocaleDateString()}</Text>
- </Space>
- </div>
-
- <Button
- type="primary"
- icon={<LikeOutlined />}
- onClick={handleLike}
- className="like-button"
- >
- 点赞
- </Button>
- </div>
-
- <Divider />
-
- <Tabs activeKey={activeTab} onChange={setActiveTab}>
- <TabPane tab="作品详情" key="details">
- <div className="work-content">
- <Title level={4}>作品描述</Title>
- <Paragraph>{work.description}</Paragraph>
-
- <Title level={4}>作品内容</Title>
- <div className="content-container">
- {work.content}
- </div>
- </div>
- </TabPane>
-
- <TabPane
- tab={
- <span>
- <BugOutlined /> Bug反馈
- </span>
- }
- key="bugs"
- >
- <BugReportSection workId={work.id} />
- </TabPane>
-
- <TabPane
- tab={
- <span>
- <CommentOutlined /> 交流区
- </span>
- }
- key="discussions"
- >
- <DiscussionSection workId={work.id} />
- </TabPane>
- </Tabs>
- </div>
- );
-};
-
-export default WorkPage;
\ No newline at end of file
diff --git a/src/feature/work/mockData.ts b/src/feature/work/mockData.ts
index 8470e61..9caaed7 100644
--- a/src/feature/work/mockData.ts
+++ b/src/feature/work/mockData.ts
@@ -127,8 +127,8 @@
// 作品数据集合
export const mockArtworks: Record<string, ArtworkData> = {
- '12345': {
- artworkId: '12345',
+ '1': {
+ artworkId: '1',
artworkCover: 'https://picsum.photos/300/400?random=1',
author: '视觉设计师张三',
authorId: 'author_zhangsan_001',
@@ -189,31 +189,16 @@
{ 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: ''
- },
+ { username: '资深下载者', uploadTotal: '156.8GB', userId: 'hist_user_001' },
+ { username: '设计素材库', uploadTotal: '89.2GB', userId: 'hist_user_002' },
+ { username: '创意工作室', uploadTotal: '67.5GB', userId: 'hist_user_003' },
+ { username: '学院资源组', uploadTotal: '45.3GB', userId: 'hist_user_004' },
+ { username: '独立设计师', uploadTotal: '23.7GB', userId: 'hist_user_005' },
],
},
- '23456': {
- artworkId: '23456',
+ '2': {
+ artworkId: '2',
artworkCover: 'https://picsum.photos/300/400?random=2',
author: 'UI设计师李四',
authorId: 'author_lisi_002',
@@ -256,26 +241,17 @@
{ username: '产品经理小王', userId: 'user_pm_wang_202' },
],
usersSeedingHistory: [
- {
- username: 'UI设计公司', uploadTotal: '78.9GB',
- userId: ''
- },
- {
- username: '设计师联盟', uploadTotal: '45.6GB',
- userId: ''
- },
- {
- username: '学习小组', uploadTotal: '23.4GB',
- userId: ''
- },
+ { username: 'UI设计公司', uploadTotal: '78.9GB', userId: 'hist_ui_001' },
+ { username: '设计师联盟', uploadTotal: '45.6GB', userId: 'hist_ui_002' },
+ { username: '学习小组', uploadTotal: '23.4GB', userId: 'hist_ui_003' },
],
},
- '67890': {
- artworkId: '67890',
+ '3': {
+ artworkId: '3',
artworkCover: 'https://picsum.photos/300/400?random=6',
author: '刘松林',
- authorId: '2', // 用户ID为2
+ authorId: '2',
artworkName: 'React组件库开发指南',
artworkCategory: '前端开发',
comments: [],
@@ -313,33 +289,176 @@
{ username: 'React爱好者', userId: 'user_react_fan_602' },
],
usersSeedingHistory: [
+ { username: '大厂前端团队', uploadTotal: '567.8GB', userId: 'hist_dev_001' },
+ { username: '开源社区', uploadTotal: '234.5GB', userId: 'hist_dev_002' },
+ { username: '技术培训机构', uploadTotal: '189.7GB', userId: 'hist_dev_003' },
+ ],
+ },
+
+ '4': {
+ artworkId: '4',
+ artworkCover: 'https://picsum.photos/300/400?random=7',
+ author: '3D艺术家王五',
+ authorId: 'author_wangwu_004',
+ artworkName: '机械战士3D模型',
+ artworkCategory: '3D建模',
+ comments: [],
+ artworkDescription: `# 机械战士3D模型
+
+一个高精度的科幻机械战士3D模型，包含完整的材质贴图和动画骨骼系统。
+
+## 模型特点
+
+### 🤖 设计风格
+- 未来科幻风格
+- 硬表面建模技术
+- PBR材质工作流
+- 模块化装备系统
+
+### 📐 技术规格
+- **面数**: 25,000 三角面
+- **贴图分辨率**: 4K PBR贴图组
+- **骨骼系统**: 完整人形骨骼
+- **动画**: 10个基础动作
+
+适用于游戏开发、影视制作和3D打印。`,
+ versionList: [
{
- username: '大厂前端团队', uploadTotal: '567.8GB',
- userId: ''
+ version: '1.0',
+ seedFile: 'magnet:?xt=urn:btih:mech_warrior_v1_0&dn=机械战士v1.0.zip',
+ versionDescription: `## 基础版本 v1.0
+
+### 核心内容
+- 🎯 **高精度3D模型** (.fbx, .obj)
+- 🎨 **4K PBR贴图组**
+- 🦴 **完整骨骼系统**
+- 🎬 **基础动画文件**`,
},
+ ],
+ usersSeedingCurrently: [
+ { username: '游戏开发者小陈', userId: 'user_gamedev_301' },
+ { username: '3D建模师', userId: 'user_3dmodeler_302' },
+ ],
+ usersSeedingHistory: [
+ { username: '游戏工作室', uploadTotal: '234.5GB', userId: 'hist_3d_001' },
+ { username: '影视特效团队', uploadTotal: '178.3GB', userId: 'hist_3d_002' },
+ { username: '独立开发者', uploadTotal: '98.7GB', userId: 'hist_3d_003' },
+ ],
+ },
+
+ '5': {
+ artworkId: '5',
+ artworkCover: 'https://picsum.photos/300/400?random=8',
+ author: '摄影师赵六',
+ authorId: 'author_zhaoliu_005',
+ artworkName: '城市夜景摄影集',
+ artworkCategory: '摄影作品',
+ comments: [],
+ artworkDescription: `# 城市夜景摄影集
+
+一组精美的城市夜景摄影作品，捕捉了都市夜晚的璀璨光影。
+
+## 作品特色
+
+### 📸 拍摄技法
+- 长曝光技术
+- HDR合成处理
+- 光轨艺术表现
+- 城市建筑几何美学
+
+### 🎨 后期处理
+- **RAW格式**: 无损原始文件
+- **精修版本**: Lightroom + Photoshop
+- **色彩分级**: 电影级调色
+- **分辨率**: 6000x4000像素
+
+包含20张高分辨率摄影作品，适合商业使用和艺术收藏。`,
+ versionList: [
{
- username: '开源社区', uploadTotal: '234.5GB',
- userId: ''
+ version: '1.0',
+ seedFile: 'magnet:?xt=urn:btih:night_city_photos_v1_0&dn=城市夜景v1.0.zip',
+ versionDescription: `## 完整版本 v1.0
+
+### 包含内容
+- 📷 **RAW原始文件** (20张)
+- 🎨 **精修JPG版本** (高分辨率)
+- 📋 **拍摄参数记录**
+- 📍 **拍摄地点信息**`,
},
+ ],
+ usersSeedingCurrently: [
+ { username: '摄影爱好者小林', userId: 'user_photo_401' },
+ { username: '设计师小美', userId: 'user_designer_402' },
+ ],
+ usersSeedingHistory: [
+ { username: '摄影工作室', uploadTotal: '445.8GB', userId: 'hist_photo_001' },
+ { username: '商业摄影师', uploadTotal: '367.2GB', userId: 'hist_photo_002' },
+ { username: '摄影学院', uploadTotal: '289.1GB', userId: 'hist_photo_003' },
+ ],
+ },
+
+ '6': {
+ artworkId: '6',
+ artworkCover: 'https://picsum.photos/300/400?random=9',
+ author: '插画师孙七',
+ authorId: 'author_sunqi_006',
+ artworkName: '奇幻世界插画系列',
+ artworkCategory: '插画艺术',
+ comments: [],
+ artworkDescription: `# 奇幻世界插画系列
+
+一套充满想象力的奇幻题材插画作品，包含角色设计、场景概念图和完整插图。
+
+## 创作风格
+
+### 🎨 艺术特色
+- 欧美奇幻风格
+- 数字绘画技法
+- 丰富色彩层次
+- 细腻光影表现
+
+### 📚 作品内容
+- **角色设计**: 15个原创角色
+- **场景概念**: 8个奇幻场景
+- **完整插图**: 12张精美插画
+- **线稿资源**: 黑白线稿版本
+
+适合游戏美术、小说封面、卡牌设计等多种用途。`,
+ versionList: [
{
- username: '技术培训机构', uploadTotal: '189.7GB',
- userId: ''
+ version: '1.0',
+ seedFile: 'magnet:?xt=urn:btih:fantasy_art_v1_0&dn=奇幻插画v1.0.zip',
+ versionDescription: `## 标准版本 v1.0
+
+### 核心内容
+- 🎨 **高分辨率插画** (35张)
+- ✏️ **线稿资源包**
+- 🎯 **PSD分层文件**
+- 📖 **创作过程记录**`,
},
],
+ usersSeedingCurrently: [
+ { username: '插画学习者', userId: 'user_illustrator_501' },
+ { username: '游戏美术师', userId: 'user_gameart_502' },
+ ],
+ usersSeedingHistory: [
+ { username: '插画师联盟', uploadTotal: '378.9GB', userId: 'hist_art_001' },
+ { username: '游戏美术团队', uploadTotal: '256.4GB', userId: 'hist_art_002' },
+ { username: '艺术学院', uploadTotal: '189.6GB', userId: 'hist_art_003' },
+ ],
},
};
// 获取指定作品的评论数据
export const getCommentsForArtwork = (artworkId: string): Comment[] => {
- // 为不同作品生成不同的评论
const commentVariations: Record<string, Comment[]> = {
- '12345': baseComments,
- '23456': baseComments.slice(0, 5).map(comment => ({
+ '1': baseComments,
+ '2': baseComments.slice(0, 5).map(comment => ({
...comment,
id: `ui_${comment.id}`,
content: comment.content.replace('作品', 'UI套件').replace('设计', '界面设计'),
})),
- '67890': [
+ '3': [
{
id: 'dev_comment_1',
content: '这个组件库的设计思路很棒！TypeScript类型定义特别完善。',
@@ -366,6 +485,21 @@
child: [],
},
],
+ '4': baseComments.slice(0, 4).map(comment => ({
+ ...comment,
+ id: `3d_${comment.id}`,
+ content: comment.content.replace('作品', '3D模型').replace('设计', '建模'),
+ })),
+ '5': baseComments.slice(0, 6).map(comment => ({
+ ...comment,
+ id: `photo_${comment.id}`,
+ content: comment.content.replace('作品', '摄影作品').replace('设计思路', '拍摄技法'),
+ })),
+ '6': baseComments.slice(0, 5).map(comment => ({
+ ...comment,
+ id: `art_${comment.id}`,
+ content: comment.content.replace('作品', '插画').replace('设计', '绘画'),
+ })),
};
return commentVariations[artworkId] || baseComments;