-
- {leftSide && [renderLeftPanel(),
- {middleSide}
-
- {rightSide && [
+
+ {/* 左侧面板 */}
+ {leftPanel &&
{leftPanel}
}
+
+ {/* 左侧拖拽手柄 */}
+ {leftPanel && (
+
+ )}
+
+ {/* 中间面板 */}
+ {middlePanel &&
{middlePanel}
}
+
+ {/* 右侧拖拽手柄 */}
+ {rightPanel && (
+
+ )}
+
+ {/* 右侧面板 */}
+ {rightPanel &&
{rightPanel}
}
);
};
-export default ResizablePanels;
+// 导出组件
+export { ResizablePanel };
+export default ResizablePanel;
diff --git a/packages/studio-components/src/SegmentedTabs/index.en-US.md b/packages/studio-components/src/SegmentedTabs/index.en-US.md
new file mode 100644
index 000000000..bc8c0cac9
--- /dev/null
+++ b/packages/studio-components/src/SegmentedTabs/index.en-US.md
@@ -0,0 +1,115 @@
+---
+title: SegmentedTabs
+group:
+ title: Navigation
+ order: 1
+---
+
+# SegmentedTabs
+
+A segmented tabs component based on Ant Design Segmented, supporting URL parameter synchronization and custom styles.
+
+## When To Use
+
+- When you need to display multiple related content in a limited space
+- When you need to categorize content
+- When you need tabs that synchronize with URL parameters
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: 'Tab One',
+ children:
Content of Tab One
,
+ },
+ {
+ key: 'tab2',
+ label: 'Tab Two',
+ children:
Content of Tab Two
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+### With Icons
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: 'Tab One',
+ icon:
,
+ children:
Content of Tab One
,
+ },
+ {
+ key: 'tab2',
+ label: 'Tab Two',
+ icon:
,
+ children:
Content of Tab Two
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+### Block Display
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: 'Tab One',
+ children:
Content of Tab One
,
+ },
+ {
+ key: 'tab2',
+ label: 'Tab Two',
+ children:
Content of Tab Two
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+## API
+
+### SegmentedTabs
+
+| Property | Description | Type | Default |
+| ------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------- |
+| items | Tab item configuration | `{ key: string; children: React.ReactNode; label?: React.ReactNode; icon?: React.ReactNode }[]` | - |
+| queryKey | URL query parameter key for saving the active tab | `string` | `'tab'` |
+| rootStyle | Custom style for the root container | `React.CSSProperties` | - |
+| tabStyle | Custom style for the tabs | `React.CSSProperties` | - |
+| tableHeight | Height of the tabs | `number` | `40` |
+| defaultActive | Default active tab | `string` | - |
+| block | Whether to display as block | `boolean` | - |
+| value | Current value in controlled mode | `string` | - |
+| onChange | Callback when tab changes | `(value: string) => void` | - |
diff --git a/packages/studio-components/src/SegmentedTabs/index.md b/packages/studio-components/src/SegmentedTabs/index.md
index 521d819d4..b3f834004 100644
--- a/packages/studio-components/src/SegmentedTabs/index.md
+++ b/packages/studio-components/src/SegmentedTabs/index.md
@@ -1,4 +1,118 @@
-# SegmentedTabs
+---
+title: SegmentedTabs 分段式选项卡
+group:
+ title: 导航
+ order: 1
+---
+
+# SegmentedTabs 分段式选项卡
+
+基于 Ant Design Segmented 组件的选项卡，支持 URL 参数同步和自定义样式。
+
+## 何时使用
+
+- 需要在有限空间内展示多个相关内容时
+- 需要将内容分类展示时
+- 需要与 URL 参数同步的选项卡时
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: '选项卡一',
+ children:
选项卡一的内容
,
+ },
+ {
+ key: 'tab2',
+ label: '选项卡二',
+ children:
选项卡二的内容
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+### 带图标
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: '选项卡一',
+ icon:
,
+ children:
选项卡一的内容
,
+ },
+ {
+ key: 'tab2',
+ label: '选项卡二',
+ icon:
,
+ children:
选项卡二的内容
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+### 块级显示
+
+```tsx
+import React from 'react';
+import { SegmentedTabs } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const items = [
+ {
+ key: 'tab1',
+ label: '选项卡一',
+ children:
选项卡一的内容
,
+ },
+ {
+ key: 'tab2',
+ label: '选项卡二',
+ children:
选项卡二的内容
,
+ },
+ ];
+
+ return
;
+};
+
+export default Demo;
+```
+
+## API
+
+### SegmentedTabs
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------- | ------- |
+| items | 选项卡项配置 | `{ key: string; children: React.ReactNode; label?: React.ReactNode; icon?: React.ReactNode }[]` | - |
+| queryKey | URL 查询参数键名，用于保存当前激活的选项卡 | `string` | `'tab'` |
+| rootStyle | 根容器自定义样式 | `React.CSSProperties` | - |
+| tabStyle | 选项卡自定义样式 | `React.CSSProperties` | - |
+| tableHeight | 选项卡高度 | `number` | `40` |
+| defaultActive | 默认激活的选项卡 | `string` | - |
+| block | 是否块级显示 | `boolean` | - |
+| value | 受控模式下的当前值 | `string` | - |
+| onChange | 选项卡切换回调 | `(value: string) => void` | - |
```jsx
import React, { useState } from 'react';
diff --git a/packages/studio-components/src/SegmentedTabs/index.tsx b/packages/studio-components/src/SegmentedTabs/index.tsx
index eb97663ea..846ead3b3 100644
--- a/packages/studio-components/src/SegmentedTabs/index.tsx
+++ b/packages/studio-components/src/SegmentedTabs/index.tsx
@@ -1,88 +1,115 @@
+import React, { useMemo, useCallback } from 'react';
import { Segmented, theme } from 'antd';
-import * as React from 'react';
-import { ReactNode } from 'react';
import { getSearchParams, setSearchParams } from '../Utils';
+/**
+ * SegmentedTabs 组件的属性接口
+ */
export interface SegmentedTabsProps {
- items: { key: string; children: ReactNode; label?: React.ReactNode; icon?: ReactNode }[];
+ /** 选项卡项配置 */
+ items: {
+ /** 选项卡的唯一标识 */
+ key: string;
+ /** 选项卡内容 */
+ children: React.ReactNode;
+ /** 选项卡标签 */
+ label?: React.ReactNode;
+ /** 选项卡图标 */
+ icon?: React.ReactNode;
+ }[];
+ /** URL 查询参数键名，用于保存当前激活的选项卡 */
queryKey?: string;
+ /** 根容器自定义样式 */
rootStyle?: React.CSSProperties;
+ /** 选项卡自定义样式 */
tabStyle?: React.CSSProperties;
+ /** 选项卡高度 */
tableHeight?: number;
+ /** 默认激活的选项卡 */
defaultActive?: string;
+ /** 是否块级显示 */
block?: boolean;
+ /** 受控模式下的当前值 */
value?: string;
+ /** 选项卡切换回调 */
onChange?: (value: string) => void;
}
-const SegmentedTabs: React.FunctionComponent
= props => {
- const {
- items,
- tableHeight = 40,
- queryKey = 'tab',
- rootStyle = {},
- tabStyle = {},
- defaultActive,
- block,
- value,
- onChange,
- } = props;
- //@ts-ignore
- const [state, setState] = React.useState<{ active: string }>(() => {
+/**
+ * 分段式选项卡组件
+ * @description 基于 Ant Design Segmented 组件的选项卡，支持 URL 参数同步和自定义样式
+ */
+const SegmentedTabs: React.FC = ({
+ items,
+ tableHeight = 40,
+ queryKey = 'tab',
+ rootStyle = {},
+ tabStyle = {},
+ defaultActive,
+ block,
+ value,
+ onChange,
+}) => {
+ const { token } = theme.useToken();
+
+ // 初始化状态，从 URL 参数或默认值获取当前激活的选项卡
+ const [activeTab, setActiveTab] = React.useState(() => {
const defaultKey = getSearchParams(queryKey);
- const active = defaultKey || defaultActive || items[0]?.key || '';
- return {
- active,
- };
+ return defaultKey || defaultActive || items[0]?.key || '';
});
- const styles: Record = {
- tabs: {
- height: '100%',
- padding: '12px 0px',
- boxSizing: 'border-box',
- },
- appear: {
- display: 'block',
- padding: '0px 6px',
- height: `calc(100% - ${tableHeight}px)`,
- },
- hidden: {
- display: 'none',
- padding: '0px 6px',
- height: `calc(100% - ${tableHeight}px)`,
- },
- };
+ // 使用 useMemo 优化样式计算
+ const styles = useMemo>(
+ () => ({
+ tabs: {
+ height: '100%',
+ padding: `${token.padding}px 0px`,
+ boxSizing: 'border-box',
+ },
+ appear: {
+ display: 'block',
+ padding: `0px ${token.paddingXS}px`,
+ height: `calc(100% - ${tableHeight}px)`,
+ },
+ hidden: {
+ display: 'none',
+ padding: `0px ${token.paddingXS}px`,
+ height: `calc(100% - ${tableHeight}px)`,
+ },
+ }),
+ [token.padding, token.paddingXS, tableHeight],
+ );
- const { active } = state;
+ // 使用 useMemo 优化选项计算
+ const options = useMemo(
+ () =>
+ items.map(item => ({
+ value: item.key,
+ label: item.label,
+ icon: item.icon,
+ })),
+ [items],
+ );
- const options = items.map(item => {
- return {
- value: item.key,
- label: item.label,
- icon: item.icon,
- };
- });
+ // 使用 useCallback 优化事件处理函数
+ const handleChange = useCallback(
+ (newValue: string) => {
+ if (onChange) {
+ onChange(newValue);
+ return;
+ }
- const handleChange = value => {
- if (onChange) {
- onChange(value);
- return;
- }
+ setSearchParams({
+ [queryKey]: newValue,
+ });
- setSearchParams({
- [queryKey]: value,
- });
+ setActiveTab(newValue);
+ },
+ [onChange, queryKey],
+ );
- setState(preState => {
- return {
- ...preState,
- active: value,
- };
- });
- };
- const val = value || active;
- const { token } = theme.useToken();
+ // 当前激活的选项卡值
+ const currentValue = value || activeTab;
return (
= props => {
>
<>
{items.map(item => {
const { key, children } = item;
- const isActive = key === val;
+ const isActive = key === currentValue;
return (
{children}
diff --git a/packages/studio-components/src/Toolbar/index.en-US.md b/packages/studio-components/src/Toolbar/index.en-US.md
new file mode 100644
index 000000000..d9ce884ca
--- /dev/null
+++ b/packages/studio-components/src/Toolbar/index.en-US.md
@@ -0,0 +1,124 @@
+---
+title: Toolbar
+group:
+ title: Navigation
+ order: 2
+---
+
+# Toolbar
+
+A customizable toolbar component that supports horizontal and vertical arrangements, with configurable position and styles.
+
+## When To Use
+
+- When you need to display a group of action buttons in a fixed position
+- When you need to customize toolbar styles and position
+- When you need to control toolbar display effects
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+### Horizontal Arrangement
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+### Custom Position
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+### Custom Styles
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+## API
+
+### Toolbar
+
+| Property | Description | Type | Default |
+| ---------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------- |
+| children | Toolbar content | `React.ReactNode` | - |
+| style | Custom style | `React.CSSProperties` | - |
+| direction | Arrangement direction | `'horizontal' \| 'vertical'` | `'vertical'` |
+| noSpace | Whether to disable spacing | `boolean` | `false` |
+| position | Toolbar position | `{ top?: string \| number; left?: string \| number; right?: string \| number; bottom?: string \| number; }` | `{ top: '12px', left: '24px' }` |
+| shadow | Whether to show shadow | `boolean` | `true` |
+| background | Whether to show background | `boolean` | `true` |
+| rounded | Whether to show rounded corners | `boolean` | `true` |
+| padding | Padding | `string \| number` | `'4px'` |
diff --git a/packages/studio-components/src/Toolbar/index.md b/packages/studio-components/src/Toolbar/index.md
index 6adbb36ad..171d00721 100644
--- a/packages/studio-components/src/Toolbar/index.md
+++ b/packages/studio-components/src/Toolbar/index.md
@@ -1,18 +1,124 @@
-# Toolbar
+---
+title: Toolbar 工具栏
+group:
+ title: 导航
+ order: 2
+---
-```jsx
-import React, { useState } from 'react';
-import { Space, Button } from 'antd';
-import { Toolbar, Icons } from '@graphscope/studio-components';
+# Toolbar 工具栏
-export default () => {
+一个可自定义的工具栏组件，支持水平和垂直排列，可配置位置、样式等。
+
+## 何时使用
+
+- 需要在一个固定位置展示一组操作按钮时
+- 需要自定义工具栏样式和位置时
+- 需要控制工具栏的显示效果时
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const Demo = () => {
return (
-
+
-
+
+ );
+};
+
+export default Demo;
+```
+
+### 水平排列
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+### 自定义位置
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Demo;
+```
+
+### 自定义样式
+
+```tsx
+import React from 'react';
+import { Button } from 'antd';
+import { Toolbar } from '@graphscope/studio-components';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+ return (
+
+
+
);
};
+
+export default Demo;
```
+
+## API
+
+### Toolbar
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------- | -------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------- |
+| children | 工具栏内容 | `React.ReactNode` | - |
+| style | 自定义样式 | `React.CSSProperties` | - |
+| direction | 排列方向 | `'horizontal' \| 'vertical'` | `'vertical'` |
+| noSpace | 是否禁用间距 | `boolean` | `false` |
+| position | 工具栏位置 | `{ top?: string \| number; left?: string \| number; right?: string \| number; bottom?: string \| number; }` | `{ top: '12px', left: '24px' }` |
+| shadow | 是否显示阴影 | `boolean` | `true` |
+| background | 是否显示背景色 | `boolean` | `true` |
+| rounded | 是否显示圆角 | `boolean` | `true` |
+| padding | 内边距 | `string \| number` | `'4px'` |
diff --git a/packages/studio-components/src/Toolbar/index.tsx b/packages/studio-components/src/Toolbar/index.tsx
index 6f7fca058..9709a187d 100644
--- a/packages/studio-components/src/Toolbar/index.tsx
+++ b/packages/studio-components/src/Toolbar/index.tsx
@@ -1,36 +1,69 @@
import * as React from 'react';
-
import { Space, theme } from 'antd';
-interface IToolbarProps {
+
+/**
+ * Toolbar 组件的属性接口
+ */
+export interface IToolbarProps {
+ /** 工具栏内容 */
children: React.ReactNode;
+ /** 自定义样式 */
style?: React.CSSProperties;
+ /** 排列方向 */
direction?: 'horizontal' | 'vertical';
+ /** 是否禁用间距 */
noSpace?: boolean;
+ /** 工具栏位置 */
+ position?: {
+ top?: string | number;
+ left?: string | number;
+ right?: string | number;
+ bottom?: string | number;
+ };
+ /** 是否显示阴影 */
+ shadow?: boolean;
+ /** 是否显示背景色 */
+ background?: boolean;
+ /** 是否显示圆角 */
+ rounded?: boolean;
+ /** 内边距 */
+ padding?: string | number;
}
-const Toolbar: React.FunctionComponent
= props => {
- const { children, style, direction = 'vertical', noSpace } = props;
+/**
+ * 工具栏组件
+ * @description 一个可自定义的工具栏组件，支持水平和垂直排列，可配置位置、样式等
+ */
+const Toolbar: React.FC = ({
+ children,
+ style,
+ direction = 'vertical',
+ noSpace = false,
+ position = { top: '12px', left: '24px' },
+ shadow = true,
+ background = true,
+ rounded = true,
+ padding = '4px',
+}) => {
const { token } = theme.useToken();
- const _children = noSpace ? children : {children} ;
- return (
-
- {_children}
-
- );
+
+ const containerStyle: React.CSSProperties = {
+ boxShadow: shadow ? token.boxShadow : 'none',
+ borderRadius: rounded ? token.borderRadius : 0,
+ background: background ? token.colorBgContainer : 'transparent',
+ display: 'flex',
+ flexDirection: 'column',
+ position: 'absolute',
+ top: position.top,
+ left: position.left,
+ right: position.right,
+ bottom: position.bottom,
+ zIndex: 999,
+ padding,
+ ...style,
+ };
+
+ return {noSpace ? children : {children} }
;
};
export default Toolbar;
diff --git a/packages/studio-components/src/TypingText/index.en-US.md b/packages/studio-components/src/TypingText/index.en-US.md
new file mode 100644
index 000000000..f2080a389
--- /dev/null
+++ b/packages/studio-components/src/TypingText/index.en-US.md
@@ -0,0 +1,108 @@
+---
+title: TypingText
+group:
+ title: Feedback
+ order: 1
+---
+
+# TypingText
+
+A typing effect text component based on typewriter-effect, supporting custom typing speed, deletion speed, and loop playback.
+
+## When To Use
+
+- When you need to display a typing effect
+- When you need to emphasize text content
+- When you need to show loading or generation process
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return This is a typing effect text ;
+};
+
+export default Demo;
+```
+
+### Custom Speed
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return (
+
+ This is a typing effect text with custom speed
+
+ );
+};
+
+export default Demo;
+```
+
+### Loop Playback
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return This is a typing effect text with loop playback ;
+};
+
+export default Demo;
+```
+
+### Completion Callback
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const handleComplete = () => {
+ console.log('Typing effect completed');
+ };
+
+ return This is a typing effect text with completion callback ;
+};
+
+export default Demo;
+```
+
+### Custom Loading Text
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return This is a typing effect text with custom loading text ;
+};
+
+export default Demo;
+```
+
+## API
+
+### TypingText
+
+| Property | Description | Type | Default |
+| ----------- | ----------------------------------------- | ------------ | ----------------- |
+| children | Text content to display | `string` | - |
+| delay | Typing delay time (ms) | `number` | `10` |
+| deleteSpeed | Deletion speed (ms) | `number` | `10` |
+| loop | Whether to loop playback | `boolean` | `false` |
+| onComplete | Callback function when typing is complete | `() => void` | - |
+| loadingText | Loading text to display | `string` | `'Generating...'` |
+
+```
+
+```
diff --git a/packages/studio-components/src/TypingText/index.md b/packages/studio-components/src/TypingText/index.md
index 519da4ff2..196046dea 100644
--- a/packages/studio-components/src/TypingText/index.md
+++ b/packages/studio-components/src/TypingText/index.md
@@ -1,15 +1,108 @@
-```jsx
-import React, { useState } from 'react';
-import { Space, Button } from 'antd';
+---
+title: TypingText 打字机效果文本
+group:
+ title: 反馈
+ order: 1
+---
+
+# TypingText 打字机效果文本
+
+一个基于 typewriter-effect 实现的打字机效果文本组件，支持自定义打字速度、删除速度和循环播放。
+
+## 何时使用
+
+- 需要展示打字机效果时
+- 需要强调文本内容时
+- 需要展示加载或生成过程时
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return 这是一段打字机效果文本 ;
+};
+
+export default Demo;
+```
+
+### 自定义速度
+
+```tsx
+import React from 'react';
import { TypingText } from '@graphscope/studio-components';
-export default () => {
+const Demo = () => {
return (
-
- GraphScope Portal is a user-friendly web interface that simplifies managing graph data with GraphScope. It offers
- one-stop access to data modeling, importing, querying, and monitoring, catering to both Interactive and Insight
- engines within the GraphScope Flex architecture.
+
+ 这是一段自定义速度的打字机效果文本
);
};
+
+export default Demo;
+```
+
+### 循环播放
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return 这是一段循环播放的打字机效果文本 ;
+};
+
+export default Demo;
+```
+
+### 完成回调
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ const handleComplete = () => {
+ console.log('打字效果完成');
+ };
+
+ return 这是一段带有完成回调的打字机效果文本 ;
+};
+
+export default Demo;
+```
+
+### 自定义加载提示
+
+```tsx
+import React from 'react';
+import { TypingText } from '@graphscope/studio-components';
+
+const Demo = () => {
+ return 这是一段带有自定义加载提示的打字机效果文本 ;
+};
+
+export default Demo;
+```
+
+## API
+
+### TypingText
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ----------- | -------------------- | ------------ | ----------------- |
+| children | 要显示的文本内容 | `string` | - |
+| delay | 打字延迟时间（毫秒） | `number` | `10` |
+| deleteSpeed | 删除速度（毫秒） | `number` | `10` |
+| loop | 是否循环播放 | `boolean` | `false` |
+| onComplete | 打字完成后的回调函数 | `() => void` | - |
+| loadingText | 加载提示文本 | `string` | `'Generating...'` |
+
+```
+
```
diff --git a/packages/studio-components/src/TypingText/index.tsx b/packages/studio-components/src/TypingText/index.tsx
index b72b19048..5f1d4f0c3 100644
--- a/packages/studio-components/src/TypingText/index.tsx
+++ b/packages/studio-components/src/TypingText/index.tsx
@@ -1,28 +1,69 @@
import * as React from 'react';
import Typewriter from 'typewriter-effect';
-interface ITypingTextProps {
+import { useCallback } from 'react';
+
+/**
+ * TypingText 组件的属性接口
+ */
+export interface ITypingTextProps {
+ /** 要显示的文本内容 */
children: string;
+ /** 打字延迟时间（毫秒） */
+ delay?: number;
+ /** 删除速度（毫秒） */
+ deleteSpeed?: number;
+ /** 是否循环播放 */
+ loop?: boolean;
+ /** 打字完成后的回调函数 */
+ onComplete?: () => void;
+ /** 加载提示文本 */
+ loadingText?: string;
}
-const TypingText: React.FunctionComponent = ({ children }) => {
- return (
- {
+/**
+ * 打字机效果文本组件
+ * @description 使用 typewriter-effect 实现的打字机效果文本组件
+ */
+const TypingText: React.FC = ({
+ children,
+ delay = 10,
+ deleteSpeed = 10,
+ loop = false,
+ onComplete,
+ loadingText = 'Generating...',
+}) => {
+ // 使用 useCallback 优化初始化函数
+ const handleInit = useCallback(
+ (typewriter: any) => {
+ if (loop) {
+ // 循环播放时，直接显示文本，不显示加载提示
+ typewriter.typeString(children).pauseFor(1000).deleteAll().start();
+ } else {
+ // 非循环播放时，显示加载提示然后显示实际文本
typewriter
- .typeString('Generating...')
+ .typeString(loadingText)
.pauseFor(100)
- .deleteChars(14)
+ .deleteChars(loadingText.length)
.typeString(children)
.start()
- .callFunction(function (state) {
+ .callFunction(function (state: any) {
state.elements.cursor.style.display = 'none';
+ onComplete?.();
});
+ }
+ },
+ [children, loop, onComplete, loadingText],
+ );
+
+ return (
+
-
}
/>
diff --git a/packages/studio-importor/src/app/import-schema/import-from-yaml/index.tsx b/packages/studio-importor/src/app/import-schema/import-from-yaml/index.tsx
index 2a76df2df..6496609ce 100644
--- a/packages/studio-importor/src/app/import-schema/import-from-yaml/index.tsx
+++ b/packages/studio-importor/src/app/import-schema/import-from-yaml/index.tsx
@@ -32,7 +32,7 @@ const hackContent = jsonContent => {
};
const ImportFromYAML = (props: IProps) => {
- const { style = {}, icon =