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

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

export default function DesignPic() {
  // 添加状态管理表格数据
  const [tableData, setTableData] = useState(() => {
    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,
        // 添加名称和标签字段
        picName: '1235',
        picLabel: ''
      });
    }
    return result;
  });

  const pic_render = (value: any, index: any, 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.picName}
        onChange={(value) => handleNameChange(value, index)}
        composition
        placeholder={'请输入图片名称'}
      />
    </>
  };

  // 修改图片标签渲染函数
  const label_render = (value: any, index: number, record: any) => {
    return <>
      <Input.TextArea
        value={record.picLabel}
        onChange={(value) => handleLabelChange(value, index)}
        composition
        placeholder={'请输入图片标签'}
      />
    </>
  };

  // 添加名称变化处理函数
  const handleNameChange = (value: string, index: number) => {
    const newData = [...tableData];
    newData[index].picName = value;
    setTableData(newData);
  };

  // 添加标签变化处理函数
  const handleLabelChange = (value: string, index: number) => {
    const newData = [...tableData];
    newData[index].picLabel = value;
    setTableData(newData);
  };

  // 完善删除功能
  const handleDelete = (index: number, record: any) => {
    // 方案1: 直接删除
    const newData = [...tableData];
    newData.splice(index, 1);
    setTableData(newData);

    // 方案2: 带确认的删除 (可选)
    // if (window.confirm(`确定要删除 "${record.title.name}" 吗?`)) {
    //   const newData = [...tableData];
    //   newData.splice(index, 1);
    //   setTableData(newData);
    //   Message.success('删除成功');
    // }
  };

  // 删除操作渲染函数
  const option_render = (value: any, index: number, record: any) => {
    return (
      <a
        className='text-red-600 cursor-pointer'
        onClick={() => handleDelete(index, record)}
      >
        删除
      </a>
    );
  };

  // 添加行索引以确保正确删除
  const dataSourceWithIndex = tableData.map((item, index) => ({
    ...item,
    index
  }));

  const getPicData = async () => {
    try {
      // 获取当前活动标签页
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });

      if (tab.id) {
        // 发送消息到content script请求获取tbody数据
        const response = await browser.tabs.sendMessage(tab.id, { action: "getTbodyData" });
        const table_datas = []
        // 在控制台输出结果
        if (response.tables && response.tables.length > 0) {
          console.log("找到的表格数据(包含背景图片):");
          // 显式声明类型
          let tables_arr: {
            good_info: any;
            sku_info: any;
            design_info: { region: any; text: any; picture: any }[];
          }[] = [];
          let table_boj: {
            good_info: any;
            sku_info: any;
            design_info: { region: any; text: any; picture: any }[];
          } = {
            good_info: null,
            sku_info: null,
            design_info: []
          };
          response.tables.forEach((table_node: any, index: number) => {
            console.log(`表格 ${index + 1}:`, table_node);
            // 长度大于4时，指针改变
            if (table_node.length > 4) {
              if (table_boj.design_info.length) {
                // 一个商品的定制信息
                tables_arr.push(table_boj)
                // 重置
                table_boj = {
                  good_info: null,
                  sku_info: null,
                  design_info: []
                }
              }
              table_boj = {
                good_info: table_node[1],
                sku_info: table_node[2],
                design_info: [{
                  region: table_node[9],
                  text: table_node[10],
                  picture: table_node[11],
                }]
              }
            } else {
              table_boj.design_info.push({
                region: table_node[0],
                text: table_node[1],
                picture: table_node[2],
              })
            }
            // good_info  sku_info  design_info: region text picture
          });

          // const table_arrs = response.tables // 表格数组
          // let i = 0, table_node = table_arrs[i], tables_arr = [];
          // let table_boj: {
          //     good_info: any;
          //     sku_info: any;
          //     design_info: { region: any; text: any; picture: any }[];
          // } = {
          //     good_info: null,
          //     sku_info: null,
          //     design_info: []
          // };
          // while (i < response.tables.length) {
          //     // 长度大于4时，指针改变
          //     if (table_node.length > 4) {
          //         if (table_boj.design_info.length) {
          //             // 一个商品的定制信息
          //             tables_arr.push(table_boj)
          //             // 重置
          //             table_boj = {
          //                 good_info: null,
          //                 sku_info: null,
          //                 design_info: []
          //             }
          //         }
          //         table_boj = {
          //             good_info: table_node[1],
          //             sku_info: table_node[2],
          //             design_info: [{
          //                 region: table_node[9],
          //                 text: table_node[10],
          //                 picture: table_node[11],
          //             }]
          //         }
          //         i++
          //         table_node = table_arrs[i]
          //     } else {
          //         table_boj.design_info.push({
          //             region: table_node[0],
          //             text: table_node[1],
          //             picture: table_node[2],
          //         })
          //         i++
          //         table_node = table_arrs[i]
          //     }
          // }

          console.log(tables_arr, "tables_arrddd")

        } else {
          console.log("页面上未找到表格数据");
        }
      }

    } catch (error) {
      console.error("获取表格数据失败:", error);
    }
  }

  return (
    <div className='w-3xl h-fit'>
      <Button style={{ marginBottom: '10px' }} onClick={() => {
        getPicData()
      }}>获取图片数据</Button>
      <Table dataSource={dataSourceWithIndex}>
        <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>
  )
}