#ProList - Advanced List

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 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>
);

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: '我是一条测试的描述',
  },
  {
    id: '4',
    name: '数据可视化引擎',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
];

type DataItem = (typeof defaultData)[number];

const Demo = () => {
  const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
  return (
    <ProList<DataItem>
      rowKey="id"
      headerTitle="基础列表"
      dataSource={dataSource}
      editable={{
        onSave: async (_key, _record, _originRow) => {

          return true;
        },
      }}
      onDataSourceChange={setDataSource}
      columns={[
        { dataIndex: 'name', listSlot: 'title' },
        { dataIndex: 'image', listSlot: 'avatar', editable: false },
        { dataIndex: 'desc', listSlot: 'description' },
        {
          listSlot: 'subTitle',
          render: () => (
            <Space size={8}>
              <Tag color="blue">Ant Design</Tag>
              <Tag color="#5BD8A6">可视化</Tag>
            </Space>
          ),
        },
        {
          listSlot: 'actions',
          render: (text, row, index, action) => [
            <a
              onClick={() => {
                action?.startEditable(row.id);
              }}
              key="link"
            >
              编辑
            </a>,
          ],
        },
      ]}
    />
  );
};

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

import type { ActionType } from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import { Badge, Button } from 'antd';
import React, { useRef, useState } from 'react';

const dataSource = [
  {
    name: '实验名称1',
    desc: '系统性的沉淀B端知识体系',
    content: [
      {
        label: '模型数',
        value: 2903,
      },
      {
        label: '指标数',
        value: 3720,
      },
      {
        label: '实验状态',
        value: '成功',
        status: 'success',
      },
    ],
  },
  {
    name: '实验名称2',
    desc: '系统性的沉淀B端知识体系',
    content: [
      {
        label: '模型数',
        value: 2904,
      },
      {
        label: '指标数',
        value: 3721,
      },
      {
        label: '实验状态',
        value: '成功',
        status: 'success',
      },
    ],
  },
  {
    name: '实验名称3',
    desc: '系统性的沉淀B端知识体系',
    content: [
      {
        label: '模型数',
        value: 2905,
      },
      {
        label: '指标数',
        value: 3722,
      },
      {
        label: '实验状态',
        value: '成功',
        status: 'success',
      },
    ],
  },
];

const renderBadge = (count: number, active = false) => {
  return (
    <Badge
      count={count}
      style={{
        marginBlockStart: -2,
        marginInlineStart: 4,
        color: active ? '#1890FF' : '#999',
        backgroundColor: active ? '#E6F7FF' : '#eee',
      }}
    />
  );
};

const Demo = () => {
  const [activeKey, setActiveKey] = useState<React.Key | undefined>('tab1');
  const action = useRef<ActionType>();
  return (
    <ProList<any>
      rowKey="name"
      actionRef={action}
      dataSource={dataSource}
      editable={{}}
      columns={[
        {
          dataIndex: 'name',
          listSlot: 'title',
          valueType: 'select',
          fieldProps: {
            showSearch: true,
            placement: 'bottomRight',
            options: [{ label: '实验名称1', value: '实验名称1' }],
          },
        },
        { dataIndex: 'desc', listSlot: 'description' },
        {
          dataIndex: 'content',
          listSlot: 'content',
          render: (text) => (
            <div
              key="label"
              style={{ display: 'flex', justifyContent: 'space-around' }}
            >
              {(text as any[]).map((t) => (
                <div key={t.label}>
                  <div>{t.label}</div>
                  <div>
                    {t.status === 'success' && (
                      <span
                        style={{
                          display: 'inline-block',
                          width: 8,
                          height: 8,
                          borderRadius: '50%',
                          backgroundColor: '#52c41a',
                          marginInlineEnd: 8,
                        }}
                      />
                    )}
                    {t.value}
                  </div>
                </div>
              ))}
            </div>
          ),
        },
        {
          listSlot: 'actions',
          render: (text, row) => [
            <a
              key="edit"
              onClick={() => action.current?.startEditable(row.name)}
            >
              编辑
            </a>,
            <a key="copy">复制</a>,
            <a key="delete">删除</a>,
          ],
        },
      ]}
      toolbar={{
        menu: {
          activeKey,
          items: [
            {
              key: 'tab1',
              label: (
                <span>全部实验室{renderBadge(99, activeKey === 'tab1')}</span>
              ),
            },
            {
              key: 'tab2',
              label: (
                <span>
                  我创建的实验室{renderBadge(32, activeKey === 'tab2')}
                </span>
              ),
            },
          ],
          onChange(key) {
            setActiveKey(key);
          },
        },
        search: {
          onSearch: (value: string) => {
            alert(value);
          },
        },
        actions: [
          <Button type="primary" key="primary">
            新建实验
          </Button>,
        ],
      }}
    />
  );
};

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