优化: 任务日志查询速度并显示用户详情 (#2905)

* perf: task log show userinfo

* feat: add Tooltip component to TaskLogsColumnDefs

model/task.go

@@ -234,12 +234,6 @@ func TaskGetAllTasks(startIdx int, num int, queryParams SyncTaskQueryParams) []*
 		return nil
 	}
 
-	for _, task := range tasks {
-		if cache, err := GetUserCache(task.UserId); err == nil {
-			task.Username = cache.Username
-		}
-	}
-
 	return tasks
 }
 

web/src/components/table/task-logs/TaskLogsColumnDefs.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact [email protected]
 */
 
 import React from 'react';
-import { Progress, Tag, Typography } from '@douyinfe/semi-ui';
+import { Progress, Tag, Tooltip, Typography } from '@douyinfe/semi-ui';
 import {
   Music,
   FileText,
@@ -240,6 +240,7 @@ export const getTaskLogsColumns = ({
   openContentModal,
   isAdminUser,
   openVideoModal,
+  showUserInfoFunc,
 }) => {
   return [
     {
@@ -293,31 +294,30 @@ export const getTaskLogsColumns = ({
     {
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
-      dataIndex: 'username',
-      render: (text, record, index) => {
+      dataIndex: 'user_id',
+      render: (userId, record, index) => {
         if (!isAdminUser) {
           return <></>;
         }
-        const displayName = record.display_name;
-        const label = displayName || text || t('未知');
-        const avatarText =
-          typeof displayName === 'string' && displayName.length > 0
-            ? displayName[0]
-            : typeof text === 'string' && text.length > 0
-              ? text[0]
-              : '?';
-
+        const displayText = String(record.username || userId || '?');
         return (
           <Space>
-            <Avatar
-              size='extra-small'
-              color={stringToColor(label)}
-              style={{ cursor: 'default' }}
+            <Tooltip content={displayText}>
+              <Avatar
+                size='extra-small'
+                color={stringToColor(displayText)}
+                style={{ cursor: 'pointer' }}
+                onClick={() => showUserInfoFunc && showUserInfoFunc(userId)}
+              >
+                {displayText.slice(0, 1)}
+              </Avatar>
+            </Tooltip>
+            <Typography.Text
+              ellipsis={{ showTooltip: true }}
+              style={{ cursor: 'pointer', color: 'var(--semi-color-primary)' }}
+              onClick={() => showUserInfoFunc && showUserInfoFunc(userId)}
             >
-              {avatarText}
-            </Avatar>
-            <Typography.Text ellipsis={{ showTooltip: true }}>
-              {label}
+              {userId}
             </Typography.Text>
           </Space>
         );

web/src/components/table/task-logs/TaskLogsTable.jsx

@@ -40,6 +40,7 @@ const TaskLogsTable = (taskLogsData) => {
     copyText,
     openContentModal,
     openVideoModal,
+    showUserInfoFunc,
     isAdminUser,
     t,
     COLUMN_KEYS,
@@ -53,9 +54,10 @@ const TaskLogsTable = (taskLogsData) => {
       copyText,
       openContentModal,
       openVideoModal,
+      showUserInfoFunc,
       isAdminUser,
     });
-  }, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, isAdminUser]);
+  }, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, showUserInfoFunc, isAdminUser]);
 
   // Filter columns based on visibility settings
   const getVisibleColumns = () => {

web/src/components/table/task-logs/index.jsx

@@ -25,6 +25,7 @@ import TaskLogsActions from './TaskLogsActions';
 import TaskLogsFilters from './TaskLogsFilters';
 import ColumnSelectorModal from './modals/ColumnSelectorModal';
 import ContentModal from './modals/ContentModal';
+import UserInfoModal from '../usage-logs/modals/UserInfoModal';
 import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
@@ -45,6 +46,7 @@ const TaskLogsPage = () => {
         modalContent={taskLogsData.videoUrl}
         isVideo={true}
       />
+      <UserInfoModal {...taskLogsData} />
 
       <Layout>
         <CardPro

web/src/hooks/task-logs/useTaskLogsData.js

@@ -72,6 +72,10 @@ export const useTaskLogsData = () => {
   const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
   const [videoUrl, setVideoUrl] = useState('');
 
+  // User info modal state
+  const [showUserInfo, setShowUserInfoModal] = useState(false);
+  const [userInfoData, setUserInfoData] = useState(null);
+
   // Form state
   const [formApi, setFormApi] = useState(null);
   let now = new Date();
@@ -273,6 +277,21 @@ export const useTaskLogsData = () => {
     setIsVideoModalOpen(true);
   };
 
+  // User info function
+  const showUserInfoFunc = async (userId) => {
+    if (!isAdminUser) {
+      return;
+    }
+    const res = await API.get(`/api/user/${userId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setUserInfoData(data);
+      setShowUserInfoModal(true);
+    } else {
+      showError(message);
+    }
+  };
+
   // Initialize data
   useEffect(() => {
     const localPageSize =
@@ -319,6 +338,12 @@ export const useTaskLogsData = () => {
     compactMode,
     setCompactMode,
 
+    // User info modal
+    showUserInfo,
+    setShowUserInfoModal,
+    userInfoData,
+    showUserInfoFunc,
+
     // Functions
     loadLogs,
     handlePageChange,