add
This commit is contained in:
parent
4ee2462f91
commit
1266d076b1
|
@ -9,7 +9,8 @@ export default function PostResources({ post }: { post: PostDto }) {
|
||||||
const { resources } = useMemo(() => {
|
const { resources } = useMemo(() => {
|
||||||
if (!post?.resources) return { resources: [] };
|
if (!post?.resources) return { resources: [] };
|
||||||
|
|
||||||
const isImage = (url: string) => /\.(png|jpg|jpeg|gif|webp)$/i.test(url);
|
const isImage = (url: string) =>
|
||||||
|
/\.(png|jpg|jpeg|gif|webp)$/i.test(url);
|
||||||
|
|
||||||
const sortedResources = post.resources
|
const sortedResources = post.resources
|
||||||
.map((resource) => ({
|
.map((resource) => ({
|
||||||
|
@ -38,8 +39,7 @@ export default function PostResources({ post }: { post: PostDto }) {
|
||||||
md={6}
|
md={6}
|
||||||
lg={6}
|
lg={6}
|
||||||
xl={4}
|
xl={4}
|
||||||
className="relative"
|
className="relative">
|
||||||
>
|
|
||||||
<div className="relative aspect-square rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 bg-gray-100">
|
<div className="relative aspect-square rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 bg-gray-100">
|
||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<Image
|
<Image
|
||||||
|
@ -80,21 +80,27 @@ export default function PostResources({ post }: { post: PostDto }) {
|
||||||
{fileResources.map((resource) => (
|
{fileResources.map((resource) => (
|
||||||
<div
|
<div
|
||||||
key={resource.url}
|
key={resource.url}
|
||||||
className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-md transition-colors duration-200"
|
className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-md transition-colors duration-200">
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-3 min-w-0">
|
<div className="flex items-center space-x-3 min-w-0">
|
||||||
<span className="text-xl">{getFileIcon(resource.url)}</span>
|
<span className="text-xl">
|
||||||
|
{getFileIcon(resource.url)}
|
||||||
|
</span>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="text-gray-800 truncate">
|
<p className="text-gray-800 truncate">
|
||||||
{resource.title || "未命名文件"}
|
{resource.title || "未命名文件"}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-xs text-gray-500">
|
<span className="text-xs text-gray-500">
|
||||||
{resource.url.split(".").pop()?.toUpperCase()}文件
|
{resource.url
|
||||||
|
.split(".")
|
||||||
|
.pop()
|
||||||
|
?.toUpperCase()}
|
||||||
|
文件
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-gray-400">
|
<span className="text-xs text-gray-400">
|
||||||
{resource.metadata.size &&
|
{(resource.metadata as any)
|
||||||
`${(resource.metadata.size / 1024 / 1024).toFixed(1)}MB`}
|
.size &&
|
||||||
|
`${((resource.metadata as any).size / 1024 / 1024).toFixed(1)}MB`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -102,8 +108,7 @@ export default function PostResources({ post }: { post: PostDto }) {
|
||||||
<Button
|
<Button
|
||||||
icon={<DownloadOutlined />}
|
icon={<DownloadOutlined />}
|
||||||
href={resource.url}
|
href={resource.url}
|
||||||
download
|
download>
|
||||||
>
|
|
||||||
下载
|
下载
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue