添加表格视图

在创建完管理后台布局之后，你可以新建一个 page.tsx 页面，用数据表的形式管理数据。

ShipAny 内置了一个表格视图组件，可以快速渲染一个数据表格，用于各类列表形式的数据展示。

比如用户列表 / 订单列表等。

渲染数据表格

你只需要 import 表格视图组件 @/components/dashboard/slots/table，定义数据表格字段，再传递一份 data 即可。

参考系统内置的后台管理系统，用户列表页面实现逻辑：

import { TableColumn } from "@/types/blocks/table";
import TableSlot from "@/components/dashboard/slots/table";
import { Table as TableSlotType } from "@/types/slots/table";
import { getUsers } from "@/models/user";
import moment from "moment";
 
export default async function () {
  const users = await getUsers(1, 50);
 
  const columns: TableColumn[] = [
    { name: "uuid", title: "UUID" },
    { name: "email", title: "Email" },
    { name: "nickname", title: "Name" },
    {
      name: "avatar_url",
      title: "Avatar",
      callback: (row) => (
        <img src={row.avatar_url} className="w-10 h-10 rounded-full" />
      ),
    },
    {
      name: "created_at",
      title: "Created At",
      callback: (row) => moment(row.created_at).format("YYYY-MM-DD HH:mm:ss"),
    },
  ];
 
  const table: TableSlotType = {
    title: "All Users",
    columns,
    data: users,
  };
 
  return <TableSlot {...table} />;
}

Admin Layout Image Generation