Skip to content

Commit 1b4ac33

Browse files
pomelo-nwupomelo-nwu
authored
Merge pull request #756 from GraphScope/ai-demo
feat(studio-components): enhance component library with improved documentation and optimizations
2 parents e33bab0 + 6e377ee commit 1b4ac33

File tree

47 files changed

+3410
-468
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3410
-468
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,10 @@
8181
"style-loader": "^3.3.1",
8282
"ts-loader": "^9.4.2",
8383
"turbo": "^1.8.3",
84-
"typescript": "^5.1.6",
85-
"webpack": "^5.88.0",
86-
"webpack-cli": "^5.0.0"
84+
"typescript": "^5.3.3",
85+
"webpack": "^5.96.1",
86+
"webpack-cli": "^5.1.4",
87+
"terser-webpack-plugin": "^5.3.10"
8788
},
8889
"publishConfig": {
8990
"access": "public"

‎packages/studio-components/ai-coding-prompt.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# AI 辅助组件优化与开发协作 Prompt
2+
3+
## 原始版本
4+
5+
1. 代码结构：尽量避免长代码的出现，可以使用 function 或者 hooks 进行代码拆分。让整体代码清晰易懂。
6+
2. 性能优化：减少不必要的重渲染。只有涉及复杂逻辑计算，才使用 useMemo 优化，style 等计算请不要使用useMemo
7+
3. 状态管理：数据流请使用 useState，如果有多个状态，请合并成一个state，使用 setState 更新
8+
4. 类型推断：请确保 typescript 类型准确，避免 any 出现。
9+
5. 代码注释：对于复杂难维护的代码，请加上代码注释，如果注释是 /\*\* \*/ 要另起一行，// 则可以追加在代码后面。
10+
6. 组件文档：文档通过 dumi 运行的，中文文档是 index.md, 英文文档是 index.en-US.md，确保内容一致
11+
7. 样式优化：请不要使用 CSS 文件，尽量使用 Antd 提供的组件进行组合，要考虑 响应式设计，避免使用固定高度和宽度，要考虑主题色，使用token 进行样式定制
12+
8. 其他优化细节，你可以自己补充完善
13+
14+
## 开发协作模式
15+
16+
以下是我们与 AI 助手协作开发的有效模式：
17+
18+
### 1. 渐进式优化
19+
20+
- 一次专注于一个方面的优化
21+
- 每次更改后等待反馈
22+
- 根据反馈调整优化方向
23+
24+
### 2. 代码审查流程
25+
26+
- AI 提供优化建议
27+
- 开发者审查并给出反馈
28+
- AI 根据反馈进行调整
29+
- 最终确认后提交代码
30+
31+
### 3. 文档同步
32+
33+
- 代码更改与文档更新同步进行
34+
- 确保中英文文档一致
35+
- 提供详细的使用示例
36+
37+
### 4. Git 工作流
38+
39+
- 使用清晰的英文提交信息
40+
- 遵循 angular conventional commits 规范
41+
- 相关文件一起提交（组件代码、文档等）
42+
43+
```
44+
45+
```

‎packages/studio-components/src/CollapseCard/index.en-US.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: CollapseCard
3+
group:
4+
title: Data Display
5+
order: 1
6+
---
7+
8+
# CollapseCard
9+
10+
A collapsible card component that supports custom title, content and styles.
11+
12+
## When To Use
13+
14+
- When you need to display collapsible content areas
15+
- When you need to save page space while maintaining content accessibility
16+
- When you need to group related content
17+
18+
## Examples
19+
20+
### Basic Usage
21+
22+
```tsx
23+
import React from 'react';
24+
import { CollapseCard } from '@graphscope/studio-components';
25+
26+
const Demo = () => {
27+
return (
28+
<CollapseCard title="Basic Usage">
29+
<div>This is the card content</div>
30+
</CollapseCard>
31+
);
32+
};
33+
34+
export default Demo;
35+
```
36+
37+
### With Tooltip
38+
39+
```tsx
40+
import React from 'react';
41+
import { CollapseCard } from '@graphscope/studio-components';
42+
43+
const Demo = () => {
44+
return (
45+
<CollapseCard title="With Tooltip" tooltip="This is a tooltip">
46+
<div>This is the card content</div>
47+
</CollapseCard>
48+
);
49+
};
50+
51+
export default Demo;
52+
```
53+
54+
### With Border
55+
56+
```tsx
57+
import React from 'react';
58+
import { CollapseCard } from '@graphscope/studio-components';
59+
60+
const Demo = () => {
61+
return (
62+
<CollapseCard title="With Border" bordered>
63+
<div>This is the card content</div>
64+
</CollapseCard>
65+
);
66+
};
67+
68+
export default Demo;
69+
```
70+
71+
## API
72+
73+
### CollapseCard
74+
75+
| Property | Description | Type | Default |
76+
| --------------- | ------------------------------------- | ----------------------------- | ------- |
77+
| bordered | Whether to show border | `boolean` | `false` |
78+
| ghost | Whether to use transparent background | `boolean` | `true` |
79+
| title | Card title | `React.ReactNode` | - |
80+
| children | Card content | `React.ReactNode` | - |
81+
| defaultCollapse | Whether to collapse by default | `boolean` | `false` |
82+
| tooltip | Tooltip content | `React.ReactNode` | - |
83+
| style | Custom style | `React.CSSProperties` | - |
84+
| className | Custom class name | `string` | - |
85+
| onChange | Callback when expand/collapse | `(isActive: boolean) => void` | - |
86+
87+
</rewritten_file>

‎packages/studio-components/src/CollapseCard/index.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: CollapseCard 可折叠卡片
3+
group:
4+
title: 数据展示
5+
order: 1
6+
---
7+
8+
# CollapseCard 可折叠卡片
9+
10+
一个可折叠的卡片组件，支持自定义标题、内容和样式。
11+
12+
## 何时使用
13+
14+
- 需要展示可折叠的内容区域时
15+
- 需要节省页面空间，同时保持内容可访问性时
16+
- 需要分组展示相关内容时
17+
18+
## 代码演示
19+
20+
### 基础用法
21+
22+
```tsx
23+
import React from 'react';
24+
import { CollapseCard } from '@graphscope/studio-components';
25+
26+
const Demo = () => {
27+
return (
28+
<CollapseCard title="基础用法">
29+
<div>这是卡片的内容</div>
30+
</CollapseCard>
31+
);
32+
};
33+
34+
export default Demo;
35+
```
36+
37+
### 带提示信息
38+
39+
```tsx
40+
import React from 'react';
41+
import { CollapseCard } from '@graphscope/studio-components';
42+
43+
const Demo = () => {
44+
return (
45+
<CollapseCard title="带提示信息" tooltip="这是一个提示信息">
46+
<div>这是卡片的内容</div>
47+
</CollapseCard>
48+
);
49+
};
50+
51+
export default Demo;
52+
```
53+
54+
### 带边框
55+
56+
```tsx
57+
import React from 'react';
58+
import { CollapseCard } from '@graphscope/studio-components';
59+
60+
const Demo = () => {
61+
return (
62+
<CollapseCard title="带边框" bordered>
63+
<div>这是卡片的内容</div>
64+
</CollapseCard>
65+
);
66+
};
67+
68+
export default Demo;
69+
```
70+
71+
## API
72+
73+
### CollapseCard
74+
75+
| 参数 | 说明 | 类型 | 默认值 |
76+
| --------------- | ----------------- | ----------------------------- | ------- |
77+
| bordered | 是否显示边框 | `boolean` | `false` |
78+
| ghost | 是否透明背景 | `boolean` | `true` |
79+
| title | 卡片标题 | `React.ReactNode` | - |
80+
| children | 卡片内容 | `React.ReactNode` | - |
81+
| defaultCollapse | 默认是否折叠 | `boolean` | `false` |
82+
| tooltip | 提示信息 | `React.ReactNode` | - |
83+
| style | 自定义样式 | `React.CSSProperties` | - |
84+
| className | 自定义类名 | `string` | - |
85+
| onChange | 展开/收起时的回调 | `(isActive: boolean) => void` | - |
86+
87+
```
88+
89+
```

‎packages/studio-components/src/CollapseCard/index.tsx‎

Lines changed: 98 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,132 @@
1-
import React, { useState } from 'react';
1+
import React, { useMemo, useCallback } from 'react';
22
import { CaretRightOutlined, QuestionCircleOutlined } from '@ant-design/icons';
3-
import { Collapse, theme, Flex, Typography, Select, Space, Tooltip } from 'antd';
3+
import { Collapse, theme, Flex, Typography, Space, Tooltip } from 'antd';
4+
import type { CollapseProps } from 'antd';
45
import { useDynamicStyle } from '../hooks/useDynamicStyle';
5-
interface IAdvancedSettingProps {
6+
7+
/**
8+
* CollapseCard 组件的属性接口
9+
*/
10+
export interface ICollapseCardProps {
11+
/** 是否显示边框 */
612
bordered?: boolean;
13+
/** 是否透明背景 */
714
ghost?: boolean;
15+
/** 卡片标题 */
816
title: React.ReactNode;
17+
/** 卡片内容 */
918
children: React.ReactNode;
19+
/** 默认是否折叠 */
1020
defaultCollapse?: boolean;
21+
/** 提示信息 */
1122
tooltip?: React.ReactNode;
23+
/** 自定义样式 */
1224
style?: React.CSSProperties;
25+
/** 自定义类名 */
26+
className?: string;
27+
/** 展开/收起时的回调 */
28+
onChange?: (isActive: boolean) => void;
1329
}
1430

15-
const CollapseCard: React.FunctionComponent<IAdvancedSettingProps> = props => {
16-
const { bordered, children, title, defaultCollapse, tooltip, style = {} } = props;
31+
/**
32+
* 可折叠卡片组件
33+
* @description 一个可折叠的卡片组件，支持自定义标题、内容和样式
34+
*/
35+
const CollapseCard: React.FC<ICollapseCardProps> = ({
36+
bordered = false,
37+
ghost = true,
38+
children,
39+
title,
40+
defaultCollapse = false,
41+
tooltip,
42+
style = {},
43+
className = '',
44+
onChange,
45+
}) => {
46+
const { token } = theme.useToken();
1747
const id = 'Studio-Collapse-Card';
1848
const defaultActiveKey = defaultCollapse ? [] : [id];
49+
50+
// 使用 useMemo 优化样式计算
51+
const cardStyle = useMemo(
52+
() => ({
53+
...style,
54+
backgroundColor: token.colorBgContainer,
55+
borderRadius: token.borderRadiusLG,
56+
boxShadow: bordered ? token.boxShadowTertiary : 'none',
57+
}),
58+
[style, token, bordered],
59+
);
60+
61+
// 使用 useMemo 优化标题样式
62+
const titleStyle = useMemo(
63+
() => ({
64+
margin: 0,
65+
color: token.colorTextHeading,
66+
fontSize: token.fontSizeLG,
67+
fontWeight: token.fontWeightStrong,
68+
}),
69+
[token],
70+
);
71+
72+
// 使用 useMemo 优化图标样式
73+
const iconStyle = useMemo(
74+
() => ({
75+
transition: `transform ${token.motionDurationMid} ease`,
76+
fontSize: token.fontSizeLG,
77+
}),
78+
[token],
79+
);
80+
81+
// 动态样式注入
1982
useDynamicStyle(
20-
`.${id} .ant-collapse-header {padding:0px !important;}
21-
.${id} .ant-collapse-content-box {padding:12px 0px !important;}
83+
`.${id} .ant-collapse-header {
84+
padding: ${token.padding}px !important;
85+
transition: all ${token.motionDurationMid} ease;
86+
}
87+
.${id} .ant-collapse-content-box {
88+
padding: ${token.padding}px ${token.paddingLG}px !important;
89+
}
2290
`,
2391
id,
2492
);
93+
94+
// 使用 useCallback 优化事件处理函数
95+
const handleChange = useCallback(
96+
(activeKeys: string | string[]) => {
97+
const isActive = Array.isArray(activeKeys) ? activeKeys.includes(id) : activeKeys === id;
98+
onChange?.(isActive);
99+
},
100+
[id, onChange],
101+
);
102+
103+
// 使用 useCallback 优化展开图标渲染函数
104+
const renderExpandIcon = useCallback(
105+
(props: { isActive?: boolean }) => <CaretRightOutlined rotate={props.isActive ? 90 : 0} style={iconStyle} />,
106+
[iconStyle],
107+
);
108+
25109
return (
26110
<Collapse
27-
style={style}
28-
className={id}
111+
style={cardStyle}
112+
className={`${id} ${className}`}
29113
bordered={bordered}
30-
ghost
114+
ghost={ghost}
31115
expandIconPosition="end"
32116
defaultActiveKey={defaultActiveKey}
33-
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
117+
onChange={handleChange}
118+
expandIcon={renderExpandIcon}
34119
items={[
35120
{
36121
key: id,
37122
label: (
38123
<Space>
39-
<Typography.Title level={5} style={{ margin: '0px' }}>
124+
<Typography.Title level={5} style={titleStyle}>
40125
{title}
41126
</Typography.Title>
42127
{tooltip && (
43128
<Tooltip title={tooltip}>
44-
<QuestionCircleOutlined />
129+
<QuestionCircleOutlined style={{ color: token.colorTextSecondary }} />
45130
</Tooltip>
46131
)}
47132
</Space>

0 commit comments

Comments
 (0)