---
sync_policy: engine_only
---
import React from 'react';
import { {{ModuleName}} } from './types';

/**
 * {{ModuleName}} 列表组件属性
 */
interface {{ModuleName}}ListProps {
  /** 列表数据 */
  data: {{ModuleName}}[];
  /** 编辑回调 */
  onEdit?: (item: {{ModuleName}}) => void;
  /** 删除回调 */
  onDelete?: (id: number) => void;
}

/**
 * {{ModuleName}} 列表组件 — 以表格形式展示 {{moduleName}} 数据，支持编辑和删除操作。
 */
export const {{ModuleName}}List: React.FC<{{ModuleName}}ListProps> = ({ data, onEdit, onDelete }) => {
  return (
    <table>
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">创建时间</th>
          <th scope="col">更新时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.createdAt}</td>
            <td>{item.updatedAt}</td>
            <td>
              <button type="button" onClick={() => onEdit?.(item)}>编辑</button>
              <button type="button" onClick={() => onDelete?.(item.id)}>删除</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};