chore: playground api request

src/components/seal-table/components/row-children.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import '../styles/row-children.less';
+
+const RowChildren = (props: any) => {
+  const { children } = props;
+  return <div className="row-children">{children}</div>;
+};
+
+export default React.memo(RowChildren);

src/components/seal-table/components/table-row.tsx

@@ -1,5 +1,5 @@
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Col, Row } from 'antd';
+import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -17,11 +17,15 @@ const TableRow: React.FC<
     rowSelection,
     rowKey,
     columns,
-    onExpand
+    onExpand,
+    renderChildren,
+    loadChildren
   } = props;
 
   const [expanded, setExpanded] = useState(false);
   const [checked, setChecked] = useState(false);
+  const [childrenData, setChildrenData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (rowSelection) {
@@ -34,9 +38,18 @@ const TableRow: React.FC<
     }
   }, [rowSelection]);
 
-  const handleRowExpand = () => {
-    setExpanded(!expanded);
-    onExpand?.(!expanded, record);
+  const handleRowExpand = async () => {
+    try {
+      setExpanded(!expanded);
+      onExpand?.(!expanded, record);
+      setLoading(true);
+      const data = await loadChildren?.(record);
+      setChildrenData(data || []);
+      setLoading(false);
+    } catch (error) {
+      setChildrenData([]);
+      setLoading(false);
+    }
   };
 
   const handleSelectChange = (e: any) => {
@@ -126,7 +139,13 @@ const TableRow: React.FC<
         </div>
         {expanded && (
           <div className="expanded-row">
-            <div className="expanded-row-content">rowchildren</div>
+            <Spin spinning={loading}>
+              {childrenData.length ? (
+                renderChildren?.(childrenData)
+              ) : (
+                <Empty></Empty>
+              )}
+            </Spin>
           </div>
         )}
       </div>

src/components/seal-table/index.tsx

@@ -8,8 +8,16 @@ import './styles/index.less';
 import { SealColumnProps, SealTableProps } from './types';
 
 const SealTable: React.FC<SealTableProps> = (props) => {
-  const { children, rowKey, onExpand, loading, expandable, rowSelection } =
-    props;
+  const {
+    children,
+    rowKey,
+    onExpand,
+    loading,
+    expandable,
+    rowSelection,
+    renderChildren,
+    loadChildren
+  } = props;
 
   const [selectAll, setSelectAll] = useState(false);
   const [indeterminate, setIndeterminate] = useState(false);
@@ -121,6 +129,8 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               rowSelection={rowSelection}
               expandable={expandable}
               rowKey={rowKey}
+              renderChildren={renderChildren}
+              loadChildren={loadChildren}
               onExpand={onExpand}
             ></TableRow>
           );

src/components/seal-table/styles/index.less

@@ -22,7 +22,7 @@
   }
   .expanded-row {
     background-color: var(--color-white-1);
-    padding: 16px 20px;
+    padding: 16px 16px;
     border: 1px solid var(--color-fill-1);
     border-top: 0;
     border-radius: 0 0 var(--ant-table-header-border-radius)

src/components/seal-table/styles/row-children.less

@@ -0,0 +1,13 @@
+.row-children {
+  display: flex;
+  align-items: center;
+  height: 54px;
+  padding: 0 16px;
+  border-radius: var(--ant-table-header-border-radius);
+  background-color: var(--color-fill-1);
+  transition: all 0.2s ease;
+  &:hover {
+    background-color: var(--ant-table-row-hover-bg);
+    transition: all 0.2s ease;
+  }
+}

src/components/seal-table/types.ts

@@ -31,6 +31,8 @@ export interface SealTableProps {
   dataSource: any[];
   loading?: boolean;
   onExpand?: (expanded: boolean, record: any) => void;
+  renderChildren?: (data: any) => React.ReactNode;
+  loadChildren?: (record: any) => Promise<any[]>;
   rowKey: string;
 }
 

src/components/type-word-effect/index.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const TypingEffect: React.FC<{ text?: string }> = ({ text = '' }) => {
+  const [displayedText, setDisplayedText] = useState('');
+
+  useEffect(() => {
+    let index = 0;
+    const intervalId = setInterval(() => {
+      setDisplayedText((prev) => prev + text[index]);
+      index += 1;
+      if (index === text.length) {
+        clearInterval(intervalId);
+      }
+    }, 20);
+
+    return () => clearInterval(intervalId);
+  }, [text]);
+
+  return <div>{displayedText}</div>;
+};
+
+export default TypingEffect;