lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 收集箱布局深化——卡片流、OS滚动、操作区fill按钮

Browse Source
This commit is contained in:
兰缘小妖
2026-06-08 11:36:02 +08:00
parent b4e05a4a16
commit 74266dc5cc
4 changed files with 92 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/web/features/inbox/components/MaterialContent.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Descriptions, Tag, Typography } from "antd";
import { Card, Descriptions, Flex, Tag, Typography } from "antd";
import type { Material, MaterialType } from "../types";
@@ -19,31 +19,32 @@ export function MaterialContent({ material }: MaterialContentProps) {
const typeLabel = MATERIAL_TYPE_LABELS[material.materialType] ?? material.materialType;
return (
<>
<Typography.Title level={4}>素材详情</Typography.Title>
<Card>
<Typography.Paragraph>{material.description}</Typography.Paragraph>
{material.processedContent && (
<Typography.Paragraph
style={{
background: "var(--ant-color-fill-quaternary)",
padding: 12,
borderRadius: 6,
whiteSpace: "pre-wrap",
}}
>
{material.processedContent}
</Typography.Paragraph>
)}
<Descriptions column={1} size="small">
<Descriptions.Item label="状态">
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
</Descriptions.Item>
<Descriptions.Item label="素材类型">{typeLabel}</Descriptions.Item>
<Descriptions.Item label="关联时间">{material.associatedDate}</Descriptions.Item>
<Descriptions.Item label="创建时间">{formatRelativeTime(material.createdAt)}</Descriptions.Item>
</Descriptions>
<Flex gap={12} vertical>
<Card size="small" title="基本信息">
<Flex gap={12} vertical>
<Typography.Paragraph>{material.description}</Typography.Paragraph>
{material.processedContent && (
<Typography.Paragraph
style={{
background: "var(--ant-color-fill-quaternary)",
padding: 12,
borderRadius: 6,
whiteSpace: "pre-wrap",
}}
>
{material.processedContent}
</Typography.Paragraph>
)}
<Descriptions column={1} size="small">
<Descriptions.Item label="状态">
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
</Descriptions.Item>
<Descriptions.Item label="素材类型">{typeLabel}</Descriptions.Item>
<Descriptions.Item label="关联时间">{material.associatedDate}</Descriptions.Item>
<Descriptions.Item label="创建时间">{formatRelativeTime(material.createdAt)}</Descriptions.Item>
</Descriptions>
</Flex>
</Card>
</>
</Flex>
);
}