#ProList - 高级列表

import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProCard, ProList } from '@ant-design/pro-components';
import { Alert, Button, Space, Typography } from 'antd';
import { useRef, useState } from 'react';

type Item = { id: number; title: string; description: string };

const columns: ProColumns<Item>[] = [
  { dataIndex: 'title', title: '标题', listSlot: 'title' },
  { dataIndex: 'description', title: '说明', listSlot: 'description' },
  {
    title: '操作',
    listSlot: 'actions',
    render: () => [<a key="edit">编辑</a>],
  },
];

export default () => {
  const actionRef = useRef<ActionType>();
  const [pageInfo, setPageInfo] = useState('等待请求完成');

  return (
    <ProCard direction="column" ghost gutter={[0, 16]}>
      <Alert
        type="info"
        showIcon
        message="ProList 展示与实时分页状态"
        description="覆盖操作区 hover、grid itemRender gutter 及 actionRef.pageInfo。"
      />
      <ProList<Item>
        actionRef={actionRef}
        rowKey="id"
        columns={columns}
        showActions="hover"
        grid={{ column: 2, gutter: [16, 24] }}
        pagination={{ pageSize: 2 }}
        request={async () => ({
          success: true,
          total: 42,
          data: [
            { id: 1, title: '项目 A', description: '悬停显示操作区' },
            { id: 2, title: '项目 B', description: '卡片间距保持一致' },
          ],
        })}
        itemRender={(item, index, defaultDom) => (
          <ProCard title={`自定义 itemRender ${index + 1}`}>
            {defaultDom}
          </ProCard>
        )}
        toolBarRender={() => [
          <Space key="page-info">
            <Button
              onClick={() =>
                setPageInfo(JSON.stringify(actionRef.current?.pageInfo))
              }
            >
              读取 pageInfo
            </Button>
            <Typography.Text code>{pageInfo}</Typography.Text>
          </Space>,
        ]}
      />
    </ProCard>
  );
};

import { ProList } from '@ant-design/pro-components';
import { Button, Progress, Segmented, Space, Tag } from 'antd';
import { useState } from 'react';

type ProjectItem = {
  title: string;
  avatar: string;
  description: string;
  progress: number;
  status: string;
};

const dataSource: ProjectItem[] = [
  {
    title: '智慧零售平台',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    description: '面向线下门店的数字化经营解决方案',
    progress: 85,
    status: '开发中',
  },
  {
    title: 'Ant Design Pro',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    description: '开箱即用的中台前端解决方案',
    progress: 100,
    status: '已上线',
  },
  {
    title: '云原生微服务框架',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    description: '基于 K8s 的微服务开发与治理框架',
    progress: 92,
    status: '测试中',
  },
  {
    title: '数据可视化引擎',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    description: '企业级数据看板与图表分析工具',
    progress: 60,
    status: '开发中',
  },
];

const Demo = () => {
  const [itemLayout, setItemLayout] = useState<'horizontal' | 'vertical'>(
    'horizontal',
  );
  const [variant, setVariant] = useState<'outlined' | 'borderless' | 'filled'>(
    'borderless',
  );
  const [split, setSplit] = useState(true);

  return (
    <div
      style={{
        background: '#ddd',
        padding: 24,
      }}
    >
      <Space
        orientation="vertical"
        size={12}
        style={{
          width: '100%',
          marginBlockEnd: 16,
          padding: 16,
          background: '#ddd',
          border: '1px solid #f0f0f0',
          borderRadius: 8,
        }}
      >
        <Space>
          <span>itemLayout 列表项方向：</span>
          <Segmented
            value={itemLayout}
            onChange={(v) => setItemLayout(v as any)}
            options={[
              { label: '水平 horizontal', value: 'horizontal' },
              { label: '垂直 vertical', value: 'vertical' },
            ]}
          />
        </Space>
        <Space>
          <span>variant 外观变体：</span>
          <Segmented
            value={variant}
            onChange={(v) => setVariant(v as any)}
            options={[
              { label: '线框 outlined', value: 'outlined' },
              { label: '填充 filled', value: 'filled' },
              { label: '无边框 borderless', value: 'borderless' },
            ]}
          />
        </Space>
        <Space>
          <span>split 分割线：</span>
          <Segmented
            value={split ? 'true' : 'false'}
            onChange={(v) => setSplit(v === 'true')}
            options={[
              { label: '有分割线', value: 'true' },
              { label: '无分割线', value: 'false' },
            ]}
          />
        </Space>
      </Space>

      <ProList<ProjectItem>
        headerTitle="项目列表枚举切换"
        itemLayout={itemLayout}
        variant={variant}
        split={split}
        dataSource={dataSource}
        rowKey="title"
        toolBarRender={() => [
          <Button key="new" type="primary">
            新建项目
          </Button>,
        ]}
        columns={[
          { dataIndex: 'title', listSlot: 'title' },
          { dataIndex: 'avatar', listSlot: 'avatar' },
          { dataIndex: 'description', listSlot: 'description' },
          {
            listSlot: 'content',
            render: (_, record) => (
              <div style={{ width: 200 }}>
                <div>
                  {record.status}{' '}
                  <Tag
                    color={record.progress === 100 ? 'success' : 'processing'}
                  >
                    {record.progress}%
                  </Tag>
                </div>
                <Progress percent={record.progress} showInfo={false} />
              </div>
            ),
          },
          {
            listSlot: 'actions',
            render: () => [
              <a key="view">查看</a>,
              <a key="edit">编辑</a>,
              <a key="archive">归档</a>,
            ],
          },
        ]}
      />
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

import type { ProColumns } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Avatar, Space, Tag } from 'antd';

type ProjectItem = {
  id: string;
  name: string;
  description: string;
  status: 'active' | 'archived' | 'pending';
  owner: {
    name: string;
    avatar: string;
  };
  tags: string[];
  updatedAt: string;
};

const statusMap = {
  active: { text: '进行中', color: 'success' },
  archived: { text: '已归档', color: 'default' },
  pending: { text: '待启动', color: 'warning' },
};

const dataSource: ProjectItem[] = [
  {
    id: '1',
    name: 'Ant Design Pro',
    description: '开箱即用的中台前端/设计解决方案',
    status: 'active',
    owner: {
      name: '书琰',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
    },
    tags: ['React', 'TypeScript', 'Ant Design'],
    updatedAt: '2024-02-09',
  },
  {
    id: '2',
    name: 'ProComponents',
    description: '专业级别的中后台组件库',
    status: 'active',
    owner: {
      name: '逄一',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
    tags: ['React', 'Components'],
    updatedAt: '2024-02-08',
  },
  {
    id: '3',
    name: 'UmiJS',
    description: '插件化的企业级前端应用框架',
    status: 'active',
    owner: {
      name: '期贤',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
    },
    tags: ['Framework', 'React'],
    updatedAt: '2024-02-07',
  },
  {
    id: '4',
    name: 'Ant Design Mobile',
    description: '移动端设计规范和组件库',
    status: 'pending',
    owner: {
      name: '玄霜',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
    tags: ['Mobile', 'React'],
    updatedAt: '2024-02-06',
  },
  {
    id: '5',
    name: 'Ant Design Charts',
    description: '简单好用的 React 图表库',
    status: 'archived',
    owner: {
      name: '怀渊',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
    },
    tags: ['Charts', 'Visualization'],
    updatedAt: '2024-02-05',
  },
];

const columns: ProColumns<ProjectItem>[] = [
  {
    title: '项目名称',
    dataIndex: 'name',
    listSlot: 'title',
  },
  {
    title: '描述',
    dataIndex: 'description',
    listSlot: 'description',
  },
  {
    title: '负责人',
    dataIndex: ['owner', 'avatar'],
    listSlot: 'avatar',
    render: (_, record) => (
      <Avatar src={record.owner.avatar} alt={record.owner.name} />
    ),
  },
  {
    title: '状态',
    dataIndex: 'status',
    listSlot: 'subTitle',
    render: (_, record) => (
      <Tag color={statusMap[record.status].color}>
        {statusMap[record.status].text}
      </Tag>
    ),
  },
  {
    title: '标签',
    dataIndex: 'tags',
    listSlot: 'content',
    render: (_, record) => (
      <Space size={4} wrap>
        {record.tags.map((tag) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </Space>
    ),
  },
  {
    title: '操作',
    listSlot: 'actions',
    render: () => [<a key="view">查看</a>, <a key="edit">编辑</a>],
  },
];

export default () => (
  <ProList<ProjectItem>
    columns={columns}
    dataSource={dataSource}
    rowKey="id"
    headerTitle="项目列表"
    tooltip="这是一个基础的列表示例，展示了 ProList 的基本用法"
  />
);

/**
 * 使用 columns + listSlot 的新 API，与 ProTable 兼容
 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Button, Space, Tag } from 'antd';
import type { Key } from 'react';
import { useState } from 'react';

type DataItem = {
  id: string;
  name: string;
  image: string;
  desc: string;
  labels: string[];
};

const dataSource: DataItem[] = [
  {
    id: '1',
    name: '智慧零售平台',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
    labels: ['技术专栏', '设计语言'],
  },
  {
    id: '2',
    name: 'Ant Design',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '企业级数据看板与可视化分析工具，开箱即用的图表方案',
    labels: ['Ant Design', '可视化'],
  },
  {
    id: '3',
    name: '云原生微服务框架',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '基于 K8s 的微服务开发与治理框架，支持服务注册与发现',
    labels: ['云原生'],
  },
  {
    id: '4',
    name: '数据可视化引擎',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '面向企业级中后台的数据可视化解决方案',
    labels: ['可视化'],
  },
];

/**
 * 同一份 columns 可同时用于 ProTable 和 ProList
 * ProTable 忽略 listSlot，ProList 使用 listSlot 映射到列表项的各个部分
 */
const columns: ProColumns<DataItem>[] = [
  {
    title: '名称',
    dataIndex: 'name',
    listSlot: 'title',
  },
  {
    dataIndex: 'image',
    listSlot: 'avatar',
    search: false,
  },
  {
    title: '标签',
    dataIndex: 'labels',
    listSlot: 'subTitle',
    search: false,
    render: (_, row) => (
      <Space size={8}>
        {row.labels?.map((label) => (
          <Tag color="blue" key={label}>
            {label}
          </Tag>
        ))}
      </Space>
    ),
  },
  {
    title: '描述',
    dataIndex: 'desc',
    listSlot: 'description',
    search: false,
  },
  {
    title: '操作',
    listSlot: 'actions',
    search: false,
    render: () => [<a key="edit">编辑</a>, <a key="delete">删除</a>],
  },
];

const Demo = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly Key[]>([]);

  return (
    <ProList<DataItem>
      rowKey="id"
      headerTitle="columns API（与 ProTable 兼容）"
      toolBarRender={() => [
        <Button key="add" type="primary">
          新建
        </Button>,
      ]}
      columns={columns}
      expandable={{
        expandedRowKeys,
        onExpandedRowsChange: setExpandedRowKeys,
      }}
      dataSource={dataSource}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

/**
 * 卡片模式使用 columns + listSlot，推荐使用新的 columns API
 * actions 在卡片模式下默认渲染到 extra 位置
 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Alert, Tag } from 'antd';

type DataItem = {
  id: string;
  title: string;
  category: string;
  description: string;
  avatar: string;
  downloads: number;
  rating: number;
  status: 'stable' | 'beta' | 'deprecated';
};

const statusConfig = {
  stable: { text: '稳定版', color: 'success' },
  beta: { text: '测试版', color: 'processing' },
  deprecated: { text: '已废弃', color: 'default' },
};

const data: DataItem[] = [
  {
    id: '1',
    title: 'ProTable',
    category: '表格组件',
    description: '高级表格组件，支持搜索、筛选、排序等功能',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
    downloads: 125000,
    rating: 4.8,
    status: 'stable',
  },
  {
    id: '2',
    title: 'ProForm',
    category: '表单组件',
    description: '高级表单组件，简化表单开发流程',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    downloads: 98000,
    rating: 4.9,
    status: 'stable',
  },
  {
    id: '3',
    title: 'ProLayout',
    category: '布局组件',
    description: '开箱即用的中后台布局方案',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    downloads: 156000,
    rating: 4.7,
    status: 'stable',
  },
  {
    id: '4',
    title: 'ProCard',
    category: '卡片组件',
    description: '可分割的卡片组件，支持多种布局',
    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    downloads: 67000,
    rating: 4.6,
    status: 'stable',
  },
  {
    id: '5',
    title: 'ProDescriptions',
    category: '描述列表',
    description: '高级描述列表组件，支持编辑和请求',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
    downloads: 45000,
    rating: 4.5,
    status: 'stable',
  },
  {
    id: '6',
    title: 'ProList',
    category: '列表组件',
    description: '高级列表组件，支持多种展示模式',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    downloads: 52000,
    rating: 4.7,
    status: 'stable',
  },
  {
    id: '7',
    title: 'ProSkeleton',
    category: '骨架屏',
    description: '高级骨架屏组件，更好的加载体验',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    downloads: 34000,
    rating: 4.4,
    status: 'beta',
  },
  {
    id: '8',
    title: 'ProField',
    category: '字段组件',
    description: '统一的字段渲染组件',
    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    downloads: 28000,
    rating: 4.3,
    status: 'stable',
  },
];

export default () => {
  const columns: ProColumns<DataItem>[] = [
    {
      title: '组件名称',
      dataIndex: 'title',
      listSlot: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      listSlot: 'subTitle',
      render: (_, record) => (
        <Tag color={statusConfig[record.status].color}>
          {statusConfig[record.status].text}
        </Tag>
      ),
    },
    {
      title: '图标',
      dataIndex: 'avatar',
      listSlot: 'avatar',
    },
    {
      title: '内容',
      listSlot: 'content',
      render: (_, record) => (
        <div style={{ flex: 1 }}>
          <div style={{ marginBottom: 8 }}>{record.description}</div>
          <div style={{ color: '#999', fontSize: 12 }}>
            {record.category} • {(record.downloads / 1000).toFixed(1)}K 下载 •
            ⭐ {record.rating}
          </div>
        </div>
      ),
    },
    {
      title: '操作',
      listSlot: 'actions',
      render: () => [<a key="install">安装</a>, <a key="docs">文档</a>],
    },
  ];

  return (
    <div
      style={{
        backgroundColor: '#eee',
        margin: -24,
        padding: 24,
      }}
    >
      <Alert
        title="推荐使用 columns + listSlot API"
        description="新的 columns API 与 ProTable 保持一致，通过 listSlot 指定数据在列表项中的位置。相比 metas API 更加灵活和易于维护。"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />

      <ProList<DataItem>
        pagination={{ defaultPageSize: 8, showSizeChanger: false }}
        rowSelection={{}}
        grid={{ gutter: 16, column: 2 }}
        columns={columns}
        headerTitle="卡片列表（columns API）"
        dataSource={data}
      />
    </div>
  );
};

import { ProList } from '@ant-design/pro-components';
import { Alert, Card, Col, Row, Segmented, Slider, Switch, Tag } from 'antd';
import { useState } from 'react';

const apps = [
  {
    id: '1',
    name: 'Analytics Pro',
    category: '数据分析',
    description: '企业级数据分析平台，支持多维度数据分析和可视化展示',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    status: 'active',
    users: 1280,
  },
  {
    id: '2',
    name: 'Cloud Storage',
    category: '云存储',
    description: '安全可靠的企业云存储服务，支持文件同步和共享',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    status: 'active',
    users: 3450,
  },
  {
    id: '3',
    name: 'Task Manager',
    category: '项目管理',
    description: '高效的任务和项目管理工具，支持团队协作和进度跟踪',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    status: 'active',
    users: 2150,
  },
  {
    id: '4',
    name: 'Email Suite',
    category: '企业邮箱',
    description: '专业的企业邮件服务，支持大附件和邮件加密',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    status: 'beta',
    users: 890,
  },
  {
    id: '5',
    name: 'Video Conference',
    category: '视频会议',
    description: '高清视频会议系统，支持屏幕共享和实时字幕',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    status: 'active',
    users: 5200,
  },
  {
    id: '6',
    name: 'HR System',
    category: '人力资源',
    description: '一体化人力资源管理系统，涵盖招聘、考勤、薪酬等',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    status: 'active',
    users: 1560,
  },
  {
    id: '7',
    name: 'CRM Platform',
    category: '客户关系',
    description: '智能客户关系管理平台，助力销售业绩提升',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    status: 'active',
    users: 2890,
  },
  {
    id: '8',
    name: 'Finance Suite',
    category: '财务管理',
    description: '专业的财务管理系统，支持多币种和自动对账',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    status: 'active',
    users: 1120,
  },
  {
    id: '9',
    name: 'Workflow Engine',
    category: '流程引擎',
    description: '灵活的工作流引擎，支持可视化流程设计',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    status: 'beta',
    users: 670,
  },
  {
    id: '10',
    name: 'Knowledge Base',
    category: '知识库',
    description: '企业知识管理系统，支持全文检索和智能推荐',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
    status: 'active',
    users: 1940,
  },
  {
    id: '11',
    name: 'Security Center',
    category: '安全中心',
    description: '企业安全管理中心，实时监控和威胁检测',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/youdaoyun.png',
    status: 'active',
    users: 780,
  },
  {
    id: '12',
    name: 'API Gateway',
    category: '接口网关',
    description: '统一的 API 网关服务，支持流量控制和监控',
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
    status: 'beta',
    users: 450,
  },
];

const statusMap: Record<string, { text: string; color: string }> = {
  active: { text: '运行中', color: 'success' },
  beta: { text: '测试中', color: 'processing' },
};

const data = apps.map((app) => ({
  id: app.id,
  title: app.name,
  subTitle: (
    <Tag color={statusMap[app.status].color}>{statusMap[app.status].text}</Tag>
  ),
  actions: [<a key="view">打开</a>, <a key="settings">设置</a>],
  avatar: app.icon,
  content: (
    <div>
      <div>{app.description}</div>
      <div style={{ color: '#999', fontSize: 12, marginTop: 8 }}>
        {app.category} • {app.users.toLocaleString()} 用户
      </div>
    </div>
  ),
}));

export default () => {
  const [column, setColumn] = useState<number>(2);
  const [gutter, setGutter] = useState<number>(8);
  const [bordered, setBordered] = useState<boolean>(true);
  const [ghost, setGhost] = useState<boolean>(false);

  return (
    <div style={{ padding: 24, backgroundColor: '#f5f5f5' }}>
      <Alert
        title="Grid 布局配置"
        description="ProList 使用 CSS Grid 实现网格布局，支持自定义列数和间距。通过 grid 属性配置，可以实现响应式的卡片网格布局。"
        type="info"
        showIcon
        style={{ marginBottom: 24 }}
      />

      <Card title="配置面板" style={{ marginBottom: 24 }}>
        <Row gutter={[24, 24]}>
          <Col xs={24} md={12}>
            <div>
              <div style={{ marginBottom: 8, fontWeight: 500 }}>
                列数 (column): {column}
              </div>
              <Slider
                min={1}
                max={6}
                value={column}
                onChange={setColumn}
                marks={{
                  1: '1',
                  2: '2',
                  3: '3',
                  4: '4',
                  5: '5',
                  6: '6',
                }}
              />
            </div>
          </Col>

          <Col xs={24} md={12}>
            <div>
              <div style={{ marginBottom: 8, fontWeight: 500 }}>
                间距 (gutter): {gutter}px
              </div>
              <Slider
                min={0}
                max={48}
                step={4}
                value={gutter}
                onChange={setGutter}
                marks={{
                  0: '0',
                  8: '8',
                  16: '16',
                  24: '24',
                  32: '32',
                  48: '48',
                }}
              />
            </div>
          </Col>

          <Col xs={24} md={8}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontWeight: 500 }}>显示边框:</span>
              <Switch checked={bordered} onChange={setBordered} />
            </div>
          </Col>

          <Col xs={24} md={8}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontWeight: 500 }}>幽灵模式:</span>
              <Switch checked={ghost} onChange={setGhost} />
            </div>
          </Col>

          <Col xs={24} md={8}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontWeight: 500 }}>边框:</span>
              <Segmented
                value={bordered ? 'bordered' : 'borderless'}
                onChange={(v) => setBordered(v === 'bordered')}
                options={[
                  { label: '有边框', value: 'bordered' },
                  { label: '无边框', value: 'borderless' },
                ]}
              />
            </div>
          </Col>
        </Row>

        <Alert
          title="代码示例"
          description={
            <pre style={{ margin: 0, fontSize: 12 }}>
              {`<ProList
  grid={{ gutter: ${gutter}, column: ${column} }}
  itemCardProps={{ bordered: ${bordered}, ghost: ${ghost} }}
  ...
/>`}
            </pre>
          }
          type="success"
          style={{ marginTop: 24 }}
        />
      </Card>

      <ProList<any>
        grid={{ gutter, column }}
        itemCardProps={{
          bordered,
          ghost,
        }}
        ghost={ghost}
        pagination={{
          defaultPageSize: 12,
          showSizeChanger: true,
          pageSizeOptions: ['6', '12', '18', '24'],
        }}
        columns={[
          { dataIndex: 'title', listSlot: 'title' },
          { dataIndex: 'subTitle', listSlot: 'subTitle' },
          { dataIndex: 'avatar', listSlot: 'avatar' },
          { dataIndex: 'content', listSlot: 'content' },
          { dataIndex: 'actions', listSlot: 'actions' },
        ]}
        headerTitle="Grid 布局示例"
        tooltip="使用 CSS Grid 实现的响应式卡片布局"
        dataSource={data}
      />
    </div>
  );
};

/**
 * 同一份 columns 同时用于 ProTable 和 ProList，一键切换视图
 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProList, ProTable } from '@ant-design/pro-components';
import { Radio, Space, Tag } from 'antd';
import { useState } from 'react';

type DataItem = {
  id: string;
  name: string;
  avatar: string;
  status: 'open' | 'closed' | 'processing';
  labels: string[];
  updatedAt: string;
};

const dataSource: DataItem[] = [
  {
    id: '1',
    name: '智慧零售平台',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    status: 'open',
    labels: ['技术专栏', '设计语言'],
    updatedAt: '2024-01-15',
  },
  {
    id: '2',
    name: 'Ant Design',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    status: 'processing',
    labels: ['Ant Design'],
    updatedAt: '2024-02-20',
  },
  {
    id: '3',
    name: '云原生微服务框架',
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    status: 'closed',
    labels: ['云原生', '可视化'],
    updatedAt: '2024-03-10',
  },
];

/**
 * 这份 columns 同时用于 ProTable 和 ProList
 * - ProTable 渲染为表格列
 * - ProList 通过 listSlot 映射到列表项各部分
 */
const columns: ProColumns<DataItem>[] = [
  {
    title: '名称',
    dataIndex: 'name',
    listSlot: 'title',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    listSlot: 'avatar',
    search: false,
    hideInTable: true,
  },
  {
    title: '标签',
    dataIndex: 'labels',
    listSlot: 'subTitle',
    search: false,
    render: (_, row) => (
      <Space size={4}>
        {row.labels?.map((label) => (
          <Tag color="blue" key={label}>
            {label}
          </Tag>
        ))}
      </Space>
    ),
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      open: { text: '未解决', status: 'Error' },
      closed: { text: '已解决', status: 'Success' },
      processing: { text: '处理中', status: 'Processing' },
    },
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    valueType: 'date',
    search: false,
    listSlot: 'description',
  },
  {
    title: '操作',
    listSlot: 'actions',
    search: false,
    render: () => [<a key="edit">编辑</a>, <a key="delete">删除</a>],
  },
];

export default () => {
  const [viewMode, setViewMode] = useState<'list' | 'table'>('list');

  return (
    <div style={{ padding: 24 }}>
      <Radio.Group
        value={viewMode}
        onChange={(e) => setViewMode(e.target.value)}
        style={{ marginBottom: 16 }}
        optionType="button"
        buttonStyle="solid"
        options={[
          { label: '列表视图', value: 'list' },
          { label: '表格视图', value: 'table' },
        ]}
      />
      {viewMode === 'list' ? (
        <ProList<DataItem>
          rowKey="id"
          headerTitle="列表视图"
          columns={columns}
          dataSource={dataSource}
        />
      ) : (
        <ProTable<DataItem>
          rowKey="id"
          headerTitle="表格视图"
          columns={columns}
          dataSource={dataSource}
          search={false}
          pagination={false}
        />
      )}
    </div>
  );
};

/**
 * columns API 配合 request 和搜索表单
 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Button, Space, Tag } from 'antd';
import request from 'umi-request';

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: '用户',
    dataIndex: 'user',
    listSlot: 'title',
  },
  {
    dataIndex: 'avatar',
    listSlot: 'avatar',
    search: false,
  },
  {
    dataIndex: 'title',
    listSlot: 'description',
    search: false,
  },
  {
    dataIndex: 'labels',
    listSlot: 'subTitle',
    search: false,
    render: (_, row) => (
      <Space size={8}>
        {row.labels?.map((label: { name: string }) => (
          <Tag color="blue" key={label.name}>
            {label.name}
          </Tag>
        ))}
      </Space>
    ),
  },
  {
    listSlot: 'actions',
    search: false,
    render: (_, row) => [
      <a href={row.url} target="_blank" rel="noopener noreferrer" key="link">
        链路
      </a>,
      <a href={row.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
    ],
  },
  {
    title: '状态',
    dataIndex: 'state',
    valueType: 'select',
    valueEnum: {
      all: { text: '全部', status: 'Default' },
      open: { text: '未解决', status: 'Error' },
      closed: { text: '已解决', status: 'Success' },
    },
  },
];

const Demo = () => (
  <ProList<GithubIssueItem>
    toolBarRender={() => [
      <Button key="add" type="primary">
        新建
      </Button>,
    ]}
    search={{ filterType: 'light' }}
    rowKey="id"
    headerTitle="搜索列表（columns API）"
    request={async (params = {} as Record<string, any>) =>
      request<{ data: GithubIssueItem[] }>(
        'https://proapi.azurewebsites.net/github/issues',
        { params },
      )
    }
    pagination={{ pageSize: 5 }}
    columns={columns}
  />
);

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

/**
 * columns API 配合可编辑列表
 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Space, Tag } from 'antd';
import { useState } from 'react';

const defaultData = [
  {
    id: '1',
    name: '智慧零售平台',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
  {
    id: '2',
    name: 'Ant Design',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
  {
    id: '3',
    name: '云原生微服务框架',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
];

type DataItem = (typeof defaultData)[number];

const columns: ProColumns<DataItem>[] = [
  {
    title: '名称',
    dataIndex: 'name',
    listSlot: 'title',
  },
  {
    dataIndex: 'image',
    listSlot: 'avatar',
    editable: false,
  },
  {
    title: '描述',
    dataIndex: 'desc',
    listSlot: 'description',
  },
  {
    listSlot: 'subTitle',
    search: false,
    editable: false,
    render: () => (
      <Space size={8}>
        <Tag color="blue">Ant Design</Tag>
        <Tag color="#5BD8A6">可视化</Tag>
      </Space>
    ),
  },
  {
    listSlot: 'actions',
    search: false,
    render: (_, row, __, action) => [
      <a
        onClick={() => {
          action?.startEditable(row.id);
        }}
        key="edit"
      >
        编辑
      </a>,
    ],
  },
];

const Demo = () => {
  const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
  return (
    <ProList<DataItem>
      rowKey="id"
      headerTitle="可编辑列表（columns API）"
      dataSource={dataSource}
      editable={{
        onSave: async (key, record, originRow) => {
          console.log(key, record, originRow);
          return true;
        },
      }}
      onDataSourceChange={setDataSource}
      columns={columns}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);