chrome-extension/.history/entrypoints/popup/pages/DesignPic_20250812172612.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) {
        Message.error('无法获取当前标签页信息');
        return;
      }

      // 检查是否是受限制的页面
      const restrictedUrls = ['chrome://', 'chrome-extension://', 'about:'];
      if (restrictedUrls.some(url => tab.url?.startsWith(url))) {
        Message.error('无法在浏览器内部页面或扩展页面上获取图片，请切换到普通网页（如百度、淘宝等）');
        return;
      }

      try {
        // 发送消息到 content script 请求获取图片数据
        const response = await browser.tabs.sendMessage(tab.id, { action: "getImages" });

        if (response.error) {
          Message.error('获取图片时出错: ' + response.error);
          return;
        }

        if (response.images && response.images.length > 0) {
          // 处理获取到的图片数据并更新表格
          const newTableData = response.images.map((img: any, index: number) => ({
            key: index,
            url: img.url,
            title: { name: img.alt || `图片 ${index + 1}` },
            id: index,
            time: Date.now(),
            picName: img.alt || `图片 ${index + 1}`,
            picLabel: `${img.element}${img.class ? '.' + img.class : ''}${img.id ? '#' + img.id : ''}`
          }));

          setTableData(newTableData);
          Message.success(`成功获取到 ${response.images.length} 张图片`);
        } else {
          Message.warning('在当前页面未找到图片');
          setTableData([]);
        }
      } catch (sendMessageError: any) {
        console.error("发送消息失败:", sendMessageError);
        if (sendMessageError?.message?.includes('Could not establish connection') ||
          sendMessageError?.message?.includes('Receiving end does not exist')) {
          Message.error(
            <div>
              <div>无法连接到页面内容脚本，请按以下步骤操作：</div>
              <ol className="list-decimal list-inside mt-2">
                <li>刷新当前页面后再次尝试</li>
                <li>确保您在普通网页上（如百度、淘宝等，非浏览器设置页面）</li>
                <li>检查扩展权限：右键扩展图标 → "此扩展程序可访问的网站" → 选择"在所有网站上"</li>
                <li>如果问题仍然存在，请重新加载扩展或重启浏览器</li>
              </ol>
            </div>
          );
        } else {
          Message.error('获取图片数据失败: ' + sendMessageError.message);
        }
      }
    } catch (error: any) {
      console.error("获取标签页信息失败:", error);
      Message.error('获取标签页信息失败: ' + error.message);
    }
  };

  const testConnection = async () => {
    try {
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });

      if (!tab.id) {
        Message.error('无法获取当前标签页信息');
        return;
      }

      // 发送一个简单的测试消息
      await browser.tabs.sendMessage(tab.id, { action: "test" });
      Message.success('连接测试成功！Content script 正常工作');
    } catch (error: any) {
      if (error?.message?.includes('Could not establish connection')) {
        Message.error('连接测试失败：Content script 未在当前页面加载');
      } else {
        Message.error('连接测试失败：' + error.message);
      }
    }
  };

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