Jelajahi Sumber

feat(AutoAccessTaskList): 为表格列添加Tooltip提示并统一字符串引号格式

为表格中可能被截断的文本列添加Tooltip提示,提升用户体验
将所有字符串引号统一为双引号格式
max_liu 2 minggu lalu
induk
melakukan
c29e180a4e
1 mengubah file dengan 89 tambahan dan 67 penghapusan
  1. 89 67
      src/pages/AutoAccessTaskList.js

+ 89 - 67
src/pages/AutoAccessTaskList.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Table, Button, Space, Tag, message } from 'antd';
-import { EditOutlined, EyeOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import { autoAccessTasksApi } from '../services/api';
-import moment from 'moment';
+import React, { useState, useEffect } from "react";
+import { Table, Button, Space, Tag, message, Tooltip } from "antd";
+import { EditOutlined, EyeOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import { autoAccessTasksApi } from "../services/api";
+import moment from "moment";
 
 const AutoAccessTaskList = () => {
   const [data, setData] = useState([]);
@@ -17,119 +17,141 @@ const AutoAccessTaskList = () => {
 
   const getStatusColor = (status) => {
     const statusMap = {
-      '0': 'processing',
-      '1': 'warning',
-      '2': 'success',
-      '3': 'error',
-      '4': 'error',
+      0: "processing",
+      1: "warning",
+      2: "success",
+      3: "error",
+      4: "error",
     };
-    return statusMap[status] || 'default';
+    return statusMap[status] || "default";
   };
 
   const getStatusText = (status) => {
     const statusMap = {
-      '0': '待处理',
-      '1': '处理中',
-      '2': '已完成',
-      '3': '失败',
-      '4': '异常',
+      0: "待处理",
+      1: "处理中",
+      2: "已完成",
+      3: "失败",
+      4: "异常",
     };
-    return statusMap[status] || '未知';
+    return statusMap[status] || "未知";
   };
 
   const getAccessTypeText = (type) => {
     const typeMap = {
-      'api_no_crack': 'API无破解',
-      'api_crack': 'API破解',
-      'browser_auto_operate': '浏览器自动操作',
+      api_no_crack: "API无破解",
+      api_crack: "API破解",
+      browser_auto_operate: "浏览器自动操作",
     };
     return typeMap[type] || type;
   };
 
   const columns = [
     {
-      title: '接入任务ID',
-      dataIndex: 'access_task_id',
-      key: 'access_task_id',
+      title: "接入任务ID",
+      dataIndex: "access_task_id",
+      key: "access_task_id",
       width: 200,
       ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span className="cursor-pointer">{text}</span>
+        </Tooltip>
+      ),
     },
     {
-      title: '检索任务ID',
-      dataIndex: 'search_task_id',
-      key: 'search_task_id',
+      title: "检索任务ID",
+      dataIndex: "search_task_id",
+      key: "search_task_id",
       width: 150,
+      ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span className="cursor-pointer">{text}</span>
+        </Tooltip>
+      ),
     },
     {
-      title: '工具名称',
-      dataIndex: 'tools_name',
-      key: 'tools_name',
+      title: "工具名称",
+      dataIndex: "tools_name",
+      key: "tools_name",
       width: 150,
     },
     {
-      title: '工具功能名称',
-      dataIndex: 'tools_function_name',
-      key: 'tools_function_name',
+      title: "工具功能名称",
+      dataIndex: "tools_function_name",
+      key: "tools_function_name",
       width: 200,
     },
     {
-      title: '接入方式',
-      dataIndex: 'access_type',
-      key: 'access_type',
+      title: "接入方式",
+      dataIndex: "access_type",
+      key: "access_type",
       width: 150,
-      render: (type) => (
-        <Tag color="blue">{getAccessTypeText(type)}</Tag>
-      ),
+      render: (type) => <Tag color="blue">{getAccessTypeText(type)}</Tag>,
     },
     {
-      title: '工具功能描述',
-      dataIndex: 'tools_function_desc',
-      key: 'tools_function_desc',
+      title: "工具功能描述",
+      dataIndex: "tools_function_desc",
+      key: "tools_function_desc",
       width: 300,
       ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span className="cursor-pointer">{text}</span>
+        </Tooltip>
+      ),
     },
     {
-      title: 'API类名',
-      dataIndex: 'api_class_name',
-      key: 'api_class_name',
+      title: "API类名",
+      dataIndex: "api_class_name",
+      key: "api_class_name",
       width: 200,
       ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span className="cursor-pointer">{text}</span>
+        </Tooltip>
+      ),
     },
     {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
       width: 100,
-      render: (status) => (
-        <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>
-      ),
+      render: (status) => <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>,
     },
     {
-      title: '失败原因',
-      dataIndex: 'fail_reason',
-      key: 'fail_reason',
+      title: "失败原因",
+      dataIndex: "fail_reason",
+      key: "fail_reason",
       width: 200,
       ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span className="cursor-pointer">{text}</span>
+        </Tooltip>
+      ),
     },
     {
-      title: '创建时间',
-      dataIndex: 'create_time',
-      key: 'create_time',
+      title: "创建时间",
+      dataIndex: "create_time",
+      key: "create_time",
       width: 180,
-      render: (time) => moment(time).format('YYYY-MM-DD HH:mm:ss'),
+      render: (time) => moment(time).format("YYYY-MM-DD HH:mm:ss"),
     },
     {
-      title: '更新时间',
-      dataIndex: 'update_time',
-      key: 'update_time',
+      title: "更新时间",
+      dataIndex: "update_time",
+      key: "update_time",
       width: 180,
-      render: (time) => moment(time).format('YYYY-MM-DD HH:mm:ss'),
+      render: (time) => moment(time).format("YYYY-MM-DD HH:mm:ss"),
     },
     {
-      title: '操作',
-      key: 'action',
+      title: "操作",
+      key: "action",
       width: 150,
-      fixed: 'right',
+      fixed: "right",
       render: (_, record) => (
         <Space size="small">
           <Button
@@ -166,7 +188,7 @@ const AutoAccessTaskList = () => {
         total: response.data.total,
       });
     } catch (error) {
-      message.error('获取数据失败');
+      message.error("获取数据失败");
     } finally {
       setLoading(false);
     }
@@ -196,4 +218,4 @@ const AutoAccessTaskList = () => {
   );
 };
 
-export default AutoAccessTaskList;
+export default AutoAccessTaskList;