echoes/frontend/app/dashboard/categories.tsx

import { Template } from "interface/template";
import {
  Container,
  Heading,
  Text,
  Box,
  Flex,
  Table,
  Button,
  TextField,
  ScrollArea,
  Dialog,
  IconButton,
} from "@radix-ui/themes";
import {
  PlusIcon,
  MagnifyingGlassIcon,
  Pencil1Icon,
  TrashIcon,
  ChevronRightIcon,
} from "@radix-ui/react-icons";
import { useState } from "react";
import type { Category } from "interface/fields";

// 模拟分类数据
const mockCategories: (Category & { id: number; count: number })[] = [
  {
    id: 1,
    name: "前端开发",
    parentId: undefined,
    count: 15,
  },
  {
    id: 2,
    name: "React",
    parentId: "1",
    count: 8,
  },
  {
    id: 3,
    name: "Vue",
    parentId: "1",
    count: 5,
  },
  {
    id: 4,
    name: "后端开发",
    parentId: undefined,
    count: 12,
  },
  {
    id: 5,
    name: "Node.js",
    parentId: "4",
    count: 6,
  },
];

export default new Template({}, ({ http, args }) => {
  const [searchTerm, setSearchTerm] = useState("");
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState("");
  const [selectedParentId, setSelectedParentId] = useState<
    string | undefined
  >();

  return (
    <Box>
      {/* 页面标题和操作栏 */}
      <Flex justify="between" align="center" className="mb-6">
        <Box>
          <Heading size="6" className="text-[--gray-12] mb-2">
            分类管理
          </Heading>
          <Text className="text-[--gray-11]">
            共 {mockCategories.length} 个分类
          </Text>
        </Box>
        <Button
          className="bg-[--accent-9]"
          onClick={() => setIsAddDialogOpen(true)}
        >
          <PlusIcon className="w-4 h-4" />
          新建分类
        </Button>
      </Flex>

      {/* 搜索栏 */}
      <Box className="w-full sm:w-64 mb-6">
        <TextField.Root
          placeholder="搜索分类..."
          value={searchTerm}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setSearchTerm(e.target.value)
          }
        >
          <TextField.Slot>
            <MagnifyingGlassIcon height="16" width="16" />
          </TextField.Slot>
        </TextField.Root>
      </Box>

      {/* 分类列表 */}
      <Box className="border border-[--gray-6] rounded-lg overflow-hidden">
        <ScrollArea>
          <Table.Root>
            <Table.Header>
              <Table.Row>
                <Table.ColumnHeaderCell>分类名称</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>文章数量</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>父分类</Table.ColumnHeaderCell>
                <Table.ColumnHeaderCell>操作</Table.ColumnHeaderCell>
              </Table.Row>
            </Table.Header>

            <Table.Body>
              {mockCategories.map((category) => (
                <Table.Row key={category.id}>
                  <Table.Cell>
                    <Flex align="center" gap="2">
                      {category.parentId && (
                        <ChevronRightIcon className="w-4 h-4 text-[--gray-11]" />
                      )}
                      <Text>{category.name}</Text>
                    </Flex>
                  </Table.Cell>
                  <Table.Cell>
                    <Text>{category.count} 篇</Text>
                  </Table.Cell>
                  <Table.Cell>
                    <Text>
                      {category.parentId
                        ? mockCategories.find(
                            (c) => c.id.toString() === category.parentId,
                          )?.name
                        : "-"}
                    </Text>
                  </Table.Cell>
                  <Table.Cell>
                    <Flex gap="2">
                      <Button variant="ghost" size="1">
                        <Pencil1Icon 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>
        </ScrollArea>
      </Box>

      {/* 新建分类对话框 */}
      <Dialog.Root open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
        <Dialog.Content style={{ maxWidth: 450 }}>
          <Dialog.Title>新建分类</Dialog.Title>
          <Dialog.Description size="2" mb="4">
            创建一个新的文章分类
          </Dialog.Description>

          <Flex direction="column" gap="3">
            <Box>
              <Text as="label" size="2" mb="1" weight="bold">
                分类名称
              </Text>
              <TextField.Root
                placeholder="输入分类名称"
                value={newCategoryName}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setNewCategoryName(e.target.value)
                }
              />
            </Box>

            <Box>
              <Text as="label" size="2" mb="1" weight="bold">
                父分类
              </Text>
              <select
                className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]"
                value={selectedParentId}
                onChange={(e) => setSelectedParentId(e.target.value)}
              >
                <option value="">无</option>
                {mockCategories
                  .filter((c) => !c.parentId)
                  .map((category) => (
                    <option key={category.id} value={category.id}>
                      {category.name}
                    </option>
                  ))}
              </select>
            </Box>
          </Flex>

          <Flex gap="3" mt="4" justify="end">
            <Dialog.Close>
              <Button variant="soft" color="gray">
                取消
              </Button>
            </Dialog.Close>
            <Dialog.Close>
              <Button className="bg-[--accent-9]">创建</Button>
            </Dialog.Close>
          </Flex>
        </Dialog.Content>
      </Dialog.Root>
    </Box>
  );
});