完成主页， 作品页，作品编辑页
> 未对接后端接口
Change-Id: I5d62663602656da4940707e00f76bfe09d824c2c
diff --git a/src/feature/home/WorkCard.tsx b/src/feature/home/WorkCard.tsx
new file mode 100644
index 0000000..1d3ac22
--- /dev/null
+++ b/src/feature/home/WorkCard.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card, Typography, Space } from 'antd';
+import { EyeOutlined, UserOutlined } from '@ant-design/icons';
+import type { WorkCardProps } from './types';
+import { useNavigate } from 'react-router';
+
+const { Text, Title } = Typography;
+const { Meta } = Card;
+
+const WorkCard: React.FC<WorkCardProps> = ({ artwork }) => {
+ const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+ const target = e.target as HTMLImageElement;
+ target.src = 'https://via.placeholder.com/300x200?text=No+Image';
+ };
+ const nav = useNavigate()
+ const handleClick = () => {
+ nav(`/work/${artwork.id}`)
+ }
+
+ const formatViews = (views: number): string => {
+ return views.toLocaleString();
+ };
+
+ return (
+ <Card
+ hoverable
+ style={{ marginBottom: 16 }}
+ cover={
+ <img
+ alt={artwork.title}
+ src={artwork.cover}
+ style={{
+ height: 200,
+ objectFit: 'cover',
+ borderRadius: '8px 8px 0 0'
+ }}
+ onError={handleImageError}
+ />
+ }
+ actions={[
+ <Space key="views">
+ <EyeOutlined />
+ <Text type="secondary">{formatViews(artwork.views)}</Text>
+ </Space>,
+ <Space key="author">
+ <UserOutlined />
+ <Text type="secondary">{artwork.author}</Text>
+ </Space>,
+ ]}
+ onClick={handleClick}
+ >
+ <Meta
+ title={
+ <div style={{ marginBottom: 8 }}>
+ <Title level={4} style={{ margin: 0, fontSize: 16 }}>
+ {artwork.title}
+ </Title>
+ </div>
+ }
+ description={
+ <Space direction="vertical" size="small" style={{ width: '100%' }}>
+ <Text type="secondary" style={{ fontSize: 12 }}>
+ 分类: {artwork.category.name}
+ </Text>
+ {artwork.category.children.length > 0 && (
+ <Space wrap size={[4, 4]}>
+ {artwork.category.children.map((child, index) => (
+ <Text
+ key={index}
+ code
+ style={{
+ fontSize: 11,
+ padding: '2px 6px',
+ backgroundColor: '#f5f5f5',
+ borderRadius: 4
+ }}
+ >
+ {child}
+ </Text>
+ ))}
+ </Space>
+ )}
+ </Space>
+ }
+ />
+ </Card>
+ );
+};
+
+export default WorkCard;
\ No newline at end of file