Skip to content

Commit 8a94158

Browse files
mortalYoungmortalYoung
committed
fix(chat): update Chat.Button's css style
1 parent 1af9bbd commit 8a94158

File tree

9 files changed

+228
-121
lines changed

9 files changed

+228
-121
lines changed

‎src/chat/button/index.scss‎

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,93 @@
1-
$primaryAIColor: #00BAC6 0%, #0067FF 50%, #450FDE 100%;
2-
$primaryHoverAIColor: #08C4FF 0%, #4892FF 50%, #8A61FF 100%;
3-
41
.ant-btn.dtc__aigc__button {
5-
&.ant-btn-icon-only {
6-
width: auto;
7-
}
8-
padding: 0;
92
border: none;
3+
border-radius: 4px;
4+
&.ant-btn-sm {
5+
border-radius: 2px;
6+
}
107
&[disabled] {
118
color: #B1B4C5;
129
background-color: #EBECF0;
1310
border-color: #EBECF0;
1411
}
1512
&--primary {
1613
&:not(.ant-btn[disabled]) {
17-
background: linear-gradient(110deg, $primaryAIColor);
14+
background: linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
1815
color: #FFF;
1916
}
2017
&:hover {
2118
&:not(.ant-btn[disabled]) {
22-
background: linear-gradient(110deg, $primaryHoverAIColor);
23-
color: #FFF;
19+
background: linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
20+
}
21+
}
22+
}
23+
&--default {
24+
&:not(.ant-btn[disabled]) {
25+
border: 1px solid #D8DAE2;
26+
color: #3D446E;
27+
transition: background-image 0.3s ease;
28+
}
29+
&:hover {
30+
&:not(.ant-btn[disabled]) {
31+
border-color: transparent;
32+
background-image:
33+
linear-gradient(white, white),
34+
linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
35+
background-origin: border-box;
36+
background-clip: padding-box, border-box;
37+
svg,
38+
path {
39+
fill: url(#secondary_linear_gradient_hover);
40+
}
41+
.dtc__aigc__button__text {
42+
background-image:
43+
linear-gradient(
44+
110deg,
45+
#08C4FF 0%,
46+
#4892FF 50%,
47+
#8A61FF 100%
48+
);
49+
background-clip: text;
50+
color: transparent;
51+
}
2452
}
2553
}
2654
}
2755
&--secondary.ant-btn-default {
2856
&:not(.ant-btn[disabled]) {
29-
position: relative;
30-
background: linear-gradient(90deg, $primaryAIColor);
31-
> :not(.dtc__aigc__mask--secondary) {
32-
position: relative;
33-
z-index: 2;
57+
border: 1px solid transparent;
58+
background-image:
59+
linear-gradient(white, white),
60+
linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
61+
background-origin: border-box;
62+
background-clip: padding-box, border-box;
63+
transition: all 0.3s linear;
64+
.dtc__aigc__button__text {
65+
background-image: linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
66+
background-clip: text;
67+
color: transparent;
3468
}
3569
svg,
3670
path {
37-
fill: url(#LINE_GRADIENT_ID);
71+
fill: url(#secondary_linear_gradient);
3872
}
39-
}
40-
&:hover,
41-
&:active {
42-
&:not(.ant-btn[disabled]) {
43-
background: linear-gradient(90deg, $primaryHoverAIColor);
73+
&:hover {
74+
background-image:
75+
linear-gradient(white, white),
76+
linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
4477
svg,
4578
path {
46-
fill: url(#HOVER_LINE_GRADIENT_ID);
79+
fill: url(#secondary_linear_gradient_hover);
80+
}
81+
.dtc__aigc__button__text {
82+
background-image:
83+
linear-gradient(
84+
110deg,
85+
#08C4FF 0%,
86+
#4892FF 50%,
87+
#8A61FF 100%
88+
);
4789
}
4890
}
4991
}
50-
.dtc__aigc__mask--secondary {
51-
content: "";
52-
position: absolute;
53-
top: 0;
54-
left: 0;
55-
right: 0;
56-
bottom: 0;
57-
z-index: 1;
58-
pointer-events: none;
59-
background: #FFF;
60-
margin: 1px;
61-
border-radius: inherit;
62-
}
6392
}
6493
}

‎src/chat/button/index.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,49 @@
1-
import React, { useEffect } from 'react';
2-
import { renderToString } from 'react-dom/server';
1+
import React from 'react';
32
import { Button as AntdButton, ButtonProps } from 'antd';
43
import classNames from 'classnames';
54

65
import './index.scss';
76

87
interface IButtonProps extends Omit<ButtonProps, 'type'> {
9-
type: 'primary' | 'secondary';
8+
type: 'default' | 'primary' | 'secondary';
109
}
1110

12-
const LINE_GRADIENT_ID = 'LINE_GRADIENT_ID';
13-
const HOVER_LINE_GRADIENT_ID = 'HOVER_LINE_GRADIENT_ID';
14-
const CONTAINER_ID = 'CONTAINER_ID';
15-
16-
export default function Button({ type, className, children, ...rest }: IButtonProps) {
17-
useEffect(() => {
18-
if (!document.querySelector(`#${CONTAINER_ID}`)) {
19-
const dom = document.createElement('span');
20-
dom.id = CONTAINER_ID;
21-
dom.innerHTML = renderToString(
22-
<svg width="0" height="0">
23-
<defs>
24-
<linearGradient id={LINE_GRADIENT_ID} gradientTransform="rotate(90)">
25-
<stop offset="0%" stopColor="#00bac6" />
26-
<stop offset="50%" stopColor="#0067ff" />
27-
<stop offset="100%" stopColor="#450fde" />
28-
</linearGradient>
29-
<linearGradient id={HOVER_LINE_GRADIENT_ID} gradientTransform="rotate(90)">
30-
<stop offset="0%" stopColor="#08c4ff" />
31-
<stop offset="50%" stopColor="#4892ff" />
32-
<stop offset="100%" stopColor="#8a61ff" />
33-
</linearGradient>
34-
</defs>
35-
</svg>
36-
);
37-
document.body.append(dom);
38-
}
39-
}, []);
40-
11+
export default function Button({ type = 'default', className, children, ...rest }: IButtonProps) {
4112
return (
4213
<AntdButton
4314
className={classNames('dtc__aigc__button', className, `dtc__aigc__button--${type}`)}
4415
ghost
4516
{...rest}
4617
>
47-
{children}
48-
{type === 'secondary' && !rest.disabled && (
49-
<span className="dtc__aigc__mask--secondary" />
50-
)}
18+
<svg width={0} height={0}>
19+
<defs>
20+
<linearGradient
21+
id="secondary_linear_gradient"
22+
x1="1.18164"
23+
y1="3.93164"
24+
x2="13.9881"
25+
y2="8.54198"
26+
gradientUnits="userSpaceOnUse"
27+
>
28+
<stop stopColor="#00BAC6" />
29+
<stop offset="0.5" stopColor="#0067FF" />
30+
<stop offset="1" stopColor="#450FDE" />
31+
</linearGradient>
32+
<linearGradient
33+
id="secondary_linear_gradient_hover"
34+
x1="8.96582"
35+
y1="0.96582"
36+
x2="15.9711"
37+
y2="3.4877"
38+
gradientUnits="userSpaceOnUse"
39+
>
40+
<stop stopColor="#00BAC6" />
41+
<stop offset="0.5" stopColor="#0067FF" />
42+
<stop offset="1" stopColor="#450FDE" />
43+
</linearGradient>
44+
</defs>
45+
</svg>
46+
<span className="dtc__aigc__button__text">{children}</span>
5147
</AntdButton>
5248
);
5349
}

‎src/chat/codeBlock/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface ICodeBlockProps {
1111
className?: string;
1212
style?: React.CSSProperties;
1313
convert?: boolean;
14-
toolbars?: React.ReactNode;
14+
toolbars?: React.ReactNode | (() => React.ReactNode);
1515
options?: Partial<SyntaxHighlighterProps>;
1616
children: React.ReactNode & React.ReactNode[];
1717
}
@@ -62,9 +62,9 @@ export default function CodeBlock({
6262
{language.toLocaleLowerCase()}
6363
</span>
6464
<div className="dtc__aigc__codeblock__tool">
65-
{toolbars}
6665
{/* FIXME：Copy 组件后续可以支持一下 disabled 属性 */}
6766
{!copy.disabled && <Copy text={text} {...copy.options} />}
67+
{typeof toolbars === 'function' ? toolbars() : toolbars}
6868
</div>
6969
</div>
7070
<SyntaxHighlighter

‎src/chat/demos/button.tsx‎

Lines changed: 73 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,80 @@
11
import React from 'react';
2-
import { Space } from 'antd';
2+
import { Button, Col, Row, Space } from 'antd';
33
import { Chat } from 'dt-react-component';
44

55
export default function () {
6+
const [disabled, setDisabled] = React.useState(false);
67
return (
7-
<Space>
8-
<Chat.Button
9-
type="primary"
10-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
11-
/>
12-
<Chat.Button
13-
type="primary"
14-
disabled
15-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
16-
/>
17-
<Chat.Button
18-
type="secondary"
19-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
20-
/>
21-
<Chat.Button
22-
type="secondary"
23-
disabled
24-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
25-
/>
26-
</Space>
8+
<Row gutter={[16, 16]}>
9+
<Col span={24}>
10+
<Button type="primary" onClick={() => setDisabled((p) => !p)}>
11+
切换 disabled
12+
</Button>
13+
</Col>
14+
<Col span={24}>
15+
<Space>
16+
<Chat.Button
17+
type="primary"
18+
disabled={disabled}
19+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
20+
/>
21+
<Chat.Button
22+
type="primary"
23+
disabled={disabled}
24+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
25+
>
26+
<Space size={4}>发送</Space>
27+
</Chat.Button>
28+
<Chat.Button
29+
type="default"
30+
disabled={disabled}
31+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
32+
>
33+
<Space size={4}>发送</Space>
34+
</Chat.Button>
35+
<Chat.Button
36+
type="secondary"
37+
disabled={disabled}
38+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
39+
>
40+
<Space size={4}>发送</Space>
41+
</Chat.Button>
42+
</Space>
43+
</Col>
44+
<Col span={24}>
45+
<Space>
46+
<Chat.Button
47+
size="small"
48+
type="primary"
49+
disabled={disabled}
50+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
51+
/>
52+
<Chat.Button
53+
size="small"
54+
type="primary"
55+
disabled={disabled}
56+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
57+
>
58+
<Space size={4}>发送</Space>
59+
</Chat.Button>
60+
<Chat.Button
61+
size="small"
62+
type="default"
63+
disabled={disabled}
64+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
65+
>
66+
<Space size={4}>发送</Space>
67+
</Chat.Button>
68+
<Chat.Button
69+
size="small"
70+
type="secondary"
71+
disabled={disabled}
72+
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
73+
>
74+
<Space size={4}>发送</Space>
75+
</Chat.Button>
76+
</Space>
77+
</Col>
78+
</Row>
2779
);
2880
}

‎src/chat/demos/codeBlock-convert.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1+
/**
2+
* background: '#f6f7f9'
3+
*/
14
import React from 'react';
25
import { Chat } from 'dt-react-component';
36

7+
const children = `
8+
\`\`\` sql
9+
SELECT * FROM table_name;
10+
\`\`\`
11+
`;
412
export default function CodeBlock() {
5-
return <Chat.CodeBlock language="sql" copy={false} value="select * from table;" convert />;
13+
return (
14+
<Chat.Markdown
15+
components={{
16+
pre({ children }) {
17+
return <Chat.CodeBlock convert>{children}</Chat.CodeBlock>;
18+
},
19+
}}
20+
>
21+
{children}
22+
</Chat.Markdown>
23+
);
624
}

0 commit comments

Comments
 (0)