247 lines
9.6 KiB
TypeScript
247 lines
9.6 KiB
TypeScript
import { Template } from "interface/template";
|
||
import {
|
||
Container,
|
||
Heading,
|
||
Text,
|
||
Box,
|
||
Flex,
|
||
Table,
|
||
Button,
|
||
TextField,
|
||
DropdownMenu,
|
||
ScrollArea,
|
||
DataList,
|
||
Badge
|
||
} from "@radix-ui/themes";
|
||
import {
|
||
PlusIcon,
|
||
MagnifyingGlassIcon,
|
||
DotsHorizontalIcon,
|
||
Pencil1Icon,
|
||
TrashIcon,
|
||
EyeOpenIcon,
|
||
ReaderIcon,
|
||
} from "@radix-ui/react-icons";
|
||
import { useState } from "react";
|
||
import type { PostDisplay } from "interface/fields";
|
||
|
||
// 模拟文章数据
|
||
const mockPosts: PostDisplay[] = [
|
||
{
|
||
id: 1,
|
||
title: "构建现代化的前端开发工作流",
|
||
content: "在现代前端开发中...",
|
||
authorName: "张三",
|
||
publishedAt: new Date("2024-03-15"),
|
||
status: "published",
|
||
isEditor: false,
|
||
createdAt: new Date("2024-03-15"),
|
||
updatedAt: new Date("2024-03-15"),
|
||
metaKeywords: "",
|
||
metaDescription: "",
|
||
categories: [{ name: "前端开发" }],
|
||
tags: [{ name: "工程化" }, { name: "效率提升" }]
|
||
},
|
||
// ... 可以添加更多模拟数据
|
||
];
|
||
|
||
export default new Template({}, ({ http, args }) => {
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
||
|
||
return (
|
||
<Box>
|
||
{/* 页面标题和操作栏 */}
|
||
<Flex justify="between" align="center" className="mb-6">
|
||
<Heading size="6" className="text-[--gray-12]">
|
||
文章管理
|
||
</Heading>
|
||
<Button className="bg-[--accent-9]">
|
||
<PlusIcon className="w-4 h-4" />
|
||
新建文章
|
||
</Button>
|
||
</Flex>
|
||
|
||
{/* 搜索和筛选栏 */}
|
||
<Flex
|
||
gap="4"
|
||
className="mb-6 flex-col sm:flex-row" // 移动端垂直布局，桌面端水平布局
|
||
>
|
||
<Box className="w-full sm:w-64">
|
||
<TextField.Root
|
||
placeholder="搜索文章..."
|
||
value={searchTerm}
|
||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
|
||
>
|
||
<TextField.Slot side="right">
|
||
<MagnifyingGlassIcon height="16" width="16" />
|
||
</TextField.Slot>
|
||
</TextField.Root>
|
||
</Box>
|
||
|
||
<DropdownMenu.Root>
|
||
<DropdownMenu.Trigger>
|
||
<Button variant="surface">
|
||
状态: {selectedStatus === 'all' ? '全部' : selectedStatus}
|
||
</Button>
|
||
</DropdownMenu.Trigger>
|
||
<DropdownMenu.Content>
|
||
<DropdownMenu.Item onClick={() => setSelectedStatus('all')}>
|
||
全部
|
||
</DropdownMenu.Item>
|
||
<DropdownMenu.Item onClick={() => setSelectedStatus('published')}>
|
||
已发布
|
||
</DropdownMenu.Item>
|
||
<DropdownMenu.Item onClick={() => setSelectedStatus('draft')}>
|
||
草稿
|
||
</DropdownMenu.Item>
|
||
</DropdownMenu.Content>
|
||
</DropdownMenu.Root>
|
||
</Flex>
|
||
|
||
{/* 文章列表 */}
|
||
<Box className="border border-[--gray-6] rounded-lg overflow-hidden">
|
||
<ScrollArea className="w-full">
|
||
{/* 桌面端表格视图 */}
|
||
<div className="hidden sm:block">
|
||
<Table.Root>
|
||
<Table.Header>
|
||
<Table.Row>
|
||
<Table.ColumnHeaderCell>标题</Table.ColumnHeaderCell>
|
||
<Table.ColumnHeaderCell>作者</Table.ColumnHeaderCell>
|
||
<Table.ColumnHeaderCell>分类</Table.ColumnHeaderCell>
|
||
<Table.ColumnHeaderCell>状态</Table.ColumnHeaderCell>
|
||
<Table.ColumnHeaderCell>发布时间</Table.ColumnHeaderCell>
|
||
<Table.ColumnHeaderCell>操作</Table.ColumnHeaderCell>
|
||
</Table.Row>
|
||
</Table.Header>
|
||
<Table.Body>
|
||
{mockPosts.map((post) => (
|
||
<Table.Row key={post.id} className="hover:bg-[--gray-3] block sm:table-row mb-4 sm:mb-0">
|
||
<Table.Cell className="font-medium block sm:table-cell py-2 sm:py-3 before:content-['标题：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
{post.title}
|
||
</Table.Cell>
|
||
<Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['作者：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
{post.authorName}
|
||
</Table.Cell>
|
||
<Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['分类：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
<Flex gap="2" className="inline-flex">
|
||
{post.categories?.map((category) => (
|
||
<Text
|
||
key={category.name}
|
||
size="1"
|
||
className="px-2 py-0.5 bg-[--gray-4] rounded"
|
||
>
|
||
{category.name}
|
||
</Text>
|
||
))}
|
||
</Flex>
|
||
</Table.Cell>
|
||
<Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['状态：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
<Flex gap="2">
|
||
{post.status === 'published' ? (
|
||
<Badge color="green">已发布</Badge>
|
||
) : (
|
||
<Badge color="orange">草稿</Badge>
|
||
)}
|
||
</Flex>
|
||
</Table.Cell>
|
||
<Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['发布时间：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
{post.publishedAt?.toLocaleDateString()}
|
||
</Table.Cell>
|
||
<Table.Cell className="block sm:table-cell py-2 sm:py-3 border-b sm:border-b-0 before:content-['操作：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
|
||
<Flex gap="2">
|
||
<Button variant="ghost" size="1">
|
||
<Pencil1Icon className="w-4 h-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="1">
|
||
<EyeOpenIcon className="w-4 h-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="1" color="red">
|
||
<TrashIcon className="w-4 h-4" />
|
||
</Button>
|
||
</Flex>
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
))}
|
||
</Table.Body>
|
||
</Table.Root>
|
||
</div>
|
||
|
||
{/* 移动端列表视图 */}
|
||
<div className="block sm:hidden">
|
||
{mockPosts.map((post) => (
|
||
<DataList.Root key={post.id} className="p-4 border-b border-[--gray-6] last:border-b-0">
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">标题</DataList.Label>
|
||
<DataList.Value>
|
||
<Text weight="medium">{post.title}</Text>
|
||
</DataList.Value>
|
||
</DataList.Item>
|
||
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">作者</DataList.Label>
|
||
<DataList.Value>{post.authorName}</DataList.Value>
|
||
</DataList.Item>
|
||
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">分类</DataList.Label>
|
||
<DataList.Value>
|
||
<Flex gap="2">
|
||
{post.categories?.map((category) => (
|
||
<Text
|
||
key={category.name}
|
||
size="1"
|
||
className="px-2 py-0.5 bg-[--gray-4] rounded"
|
||
>
|
||
{category.name}
|
||
</Text>
|
||
))}
|
||
</Flex>
|
||
</DataList.Value>
|
||
</DataList.Item>
|
||
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">状态</DataList.Label>
|
||
<DataList.Value>
|
||
<Flex gap="2">
|
||
{post.status === 'published' ? (
|
||
<Badge color="green">已发布</Badge>
|
||
) : (
|
||
<Badge color="orange">草稿</Badge>
|
||
)}
|
||
</Flex>
|
||
</DataList.Value>
|
||
</DataList.Item>
|
||
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">发布时间</DataList.Label>
|
||
<DataList.Value>
|
||
{post.publishedAt?.toLocaleDateString()}
|
||
</DataList.Value>
|
||
</DataList.Item>
|
||
|
||
<DataList.Item>
|
||
<DataList.Label minWidth="88px">操作</DataList.Label>
|
||
<DataList.Value>
|
||
<Flex gap="2">
|
||
<Button variant="ghost" size="1">
|
||
<Pencil1Icon className="w-4 h-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="1">
|
||
<EyeOpenIcon className="w-4 h-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="1" color="red">
|
||
<TrashIcon className="w-4 h-4" />
|
||
</Button>
|
||
</Flex>
|
||
</DataList.Value>
|
||
</DataList.Item>
|
||
</DataList.Root>
|
||
))}
|
||
</div>
|
||
</ScrollArea>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
});
|