详情页：分组展示字段

• 使用 Show 包裹详情视图；
• 通过 UI 组件分组呈现字段信息；

src/customers/CustomersShow.tsx

import { Show, SimpleShowLayout, TextField, ReferenceField, RecordField, ArrayField, DataTable, ReferenceManyField, SingleFieldList, NumberField } from "@/components/admin";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const CustomersShow = () => (
  <Show>
    <div className="grid gap-6">
      <Card>
        <CardHeader>
          <CardTitle>基本信息</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">ID </label>
              <NumberField source="id" className="mt-1" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">名称 </label>
              <TextField source="name" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">年龄 </label>
              <TextField source="age" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">邮箱 </label>
              <TextField source="email" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">创建时间 </label>
              <TextField source="created_at" className="mt-1" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </Show>
);

export default CustomersShow;