Procházet zdrojové kódy

🐛 fix(table): add rowExpandable to prevent empty rows from expanding

The Table component in LogsTable.js was previously showing expand icons for all rows, even those without any expandable content. This led to a confusing UX where users could click to expand rows but would see empty content.

This commit adds the `rowExpandable` property to the Table configuration to ensure that only rows with actual expandable content show the expand icon and can be expanded. The function checks if each record has corresponding data in the expandData object before allowing it to be expanded.
Apple\Apple před 11 měsíci
rodič
revize
4c1f341226
1 změnil soubory, kde provedl 40 přidání a 39 odebrání
  1. 40 39
      web/src/components/table/LogsTable.js

+ 40 - 39
web/src/components/table/LogsTable.js

@@ -197,7 +197,7 @@ const LogsTable = () => {
     if (!modelMapped) {
     if (!modelMapped) {
       return renderModelTag(record.model_name, {
       return renderModelTag(record.model_name, {
         onClick: (event) => {
         onClick: (event) => {
-          copyText(event, record.model_name).then((r) => {});
+          copyText(event, record.model_name).then((r) => { });
         },
         },
       });
       });
     } else {
     } else {
@@ -214,7 +214,7 @@ const LogsTable = () => {
                       </Text>
                       </Text>
                       {renderModelTag(record.model_name, {
                       {renderModelTag(record.model_name, {
                         onClick: (event) => {
                         onClick: (event) => {
-                          copyText(event, record.model_name).then((r) => {});
+                          copyText(event, record.model_name).then((r) => { });
                         },
                         },
                       })}
                       })}
                     </div>
                     </div>
@@ -225,7 +225,7 @@ const LogsTable = () => {
                       {renderModelTag(other.upstream_model_name, {
                       {renderModelTag(other.upstream_model_name, {
                         onClick: (event) => {
                         onClick: (event) => {
                           copyText(event, other.upstream_model_name).then(
                           copyText(event, other.upstream_model_name).then(
-                            (r) => {},
+                            (r) => { },
                           );
                           );
                         },
                         },
                       })}
                       })}
@@ -236,7 +236,7 @@ const LogsTable = () => {
             >
             >
               {renderModelTag(record.model_name, {
               {renderModelTag(record.model_name, {
                 onClick: (event) => {
                 onClick: (event) => {
-                  copyText(event, record.model_name).then((r) => {});
+                  copyText(event, record.model_name).then((r) => { });
                 },
                 },
                 suffixIcon: (
                 suffixIcon: (
                   <IconForward
                   <IconForward
@@ -603,21 +603,21 @@ const LogsTable = () => {
         }
         }
         let content = other?.claude
         let content = other?.claude
           ? renderClaudeModelPriceSimple(
           ? renderClaudeModelPriceSimple(
-              other.model_ratio,
-              other.model_price,
-              other.group_ratio,
-              other.cache_tokens || 0,
-              other.cache_ratio || 1.0,
-              other.cache_creation_tokens || 0,
-              other.cache_creation_ratio || 1.0,
-            )
+            other.model_ratio,
+            other.model_price,
+            other.group_ratio,
+            other.cache_tokens || 0,
+            other.cache_ratio || 1.0,
+            other.cache_creation_tokens || 0,
+            other.cache_creation_ratio || 1.0,
+          )
           : renderModelPriceSimple(
           : renderModelPriceSimple(
-              other.model_ratio,
-              other.model_price,
-              other.group_ratio,
-              other.cache_tokens || 0,
-              other.cache_ratio || 1.0,
-            );
+            other.model_ratio,
+            other.model_price,
+            other.group_ratio,
+            other.cache_tokens || 0,
+            other.cache_ratio || 1.0,
+          );
         return (
         return (
           <Paragraph
           <Paragraph
             ellipsis={{
             ellipsis={{
@@ -907,27 +907,27 @@ const LogsTable = () => {
           key: t('日志详情'),
           key: t('日志详情'),
           value: other?.claude
           value: other?.claude
             ? renderClaudeLogContent(
             ? renderClaudeLogContent(
-                other?.model_ratio,
-                other.completion_ratio,
-                other.model_price,
-                other.group_ratio,
-                other.cache_ratio || 1.0,
-                other.cache_creation_ratio || 1.0,
-              )
+              other?.model_ratio,
+              other.completion_ratio,
+              other.model_price,
+              other.group_ratio,
+              other.cache_ratio || 1.0,
+              other.cache_creation_ratio || 1.0,
+            )
             : renderLogContent(
             : renderLogContent(
-                other?.model_ratio,
-                other.completion_ratio,
-                other.model_price,
-                other.group_ratio,
-                other?.user_group_ratio,
-                false,
-                1.0,
-                undefined,
-                other.web_search || false,
-                other.web_search_call_count || 0,
-                other.file_search || false,
-                other.file_search_call_count || 0,
-              ),
+              other?.model_ratio,
+              other.completion_ratio,
+              other.model_price,
+              other.group_ratio,
+              other?.user_group_ratio,
+              false,
+              1.0,
+              undefined,
+              other.web_search || false,
+              other.web_search_call_count || 0,
+              other.file_search || false,
+              other.file_search_call_count || 0,
+            ),
         });
         });
       }
       }
       if (logs[i].type === 2) {
       if (logs[i].type === 2) {
@@ -1045,7 +1045,7 @@ const LogsTable = () => {
 
 
   const handlePageChange = (page) => {
   const handlePageChange = (page) => {
     setActivePage(page);
     setActivePage(page);
-    loadLogs(page, pageSize, logType).then((r) => {});
+    loadLogs(page, pageSize, logType).then((r) => { });
   };
   };
 
 
   const handlePageSizeChange = async (size) => {
   const handlePageSizeChange = async (size) => {
@@ -1268,6 +1268,7 @@ const LogsTable = () => {
           {...(hasExpandableRows() && {
           {...(hasExpandableRows() && {
             expandedRowRender: expandRowRender,
             expandedRowRender: expandRowRender,
             expandRowByClick: true,
             expandRowByClick: true,
+            rowExpandable: (record) => expandData[record.key] && expandData[record.key].length > 0
           })}
           })}
           dataSource={logs}
           dataSource={logs}
           rowKey='key'
           rowKey='key'