chrome-extension/.history/entrypoints/popup/pages/DesignPic_20250812155848.tsx

import React from 'react'
import { Button, Table, Input } from '@alifd/next';

export default function DesignPic() {

  const dataSource = () => {
    const result = [];
    for (let i = 0; i < 5; i++) {
      result.push({
        title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
        id: 100306660940 + i,
        time: 2e3 + i,
      });
    }
    return result;
  };
  const pic_render = (value: any, index: number, record: any) => {
    return (
      <img className='size-20' src={record.url} alt={record.title} />
    );
  }
  const name_render = (value: any, index: number, record: any) => {
    return <>
      <Input.TextArea
        value={record.id}
        // onChange={handleChange}
        composition
        placeholder={'请输入'}
      />
    </>
  };
  const label_render = (value: any, index: number, record: any) => {
    return <>
      <Input.TextArea
        value={record.id}
        // onChange={handleChange}
        composition
        placeholder={'请输入'}
      />
    </>
  };
  const option_render = (value: any, index: number, record: any) => {
    return (
      <a className='text-red-600'>
        删除
      </a>
    );
  };
  return (
    <div className='w-3xl h-fit'>
      <Button>按钮</Button>
      <Table dataSource={dataSource()}>
        <Table.Column title="图片" cell={pic_render} />
        <Table.Column title="图片名称" cell={name_render} />
        <Table.Column title="图片标签" cell={label_render} />
        <Table.Column title="操作" cell={option_render} />
      </Table>
    </div>
  )
}