fix(chat): update Chat.Button's css style

DTStack · Dec 18, 2024 · f8bfc3f · f8bfc3f
1 parent 1af9bbd
commit f8bfc3f
Show file tree

Hide file tree

Showing 9 changed files with 228 additions and 121 deletions.
diff --git a/src/chat/button/index.scss b/src/chat/button/index.scss
@@ -1,64 +1,93 @@
-$primaryAIColor: #00BAC6 0%, #0067FF 50%, #450FDE 100%;
-$primaryHoverAIColor: #08C4FF 0%, #4892FF 50%, #8A61FF 100%;
-
 .ant-btn.dtc__aigc__button {
-    &.ant-btn-icon-only {
-        width: auto;
-    }
-    padding: 0;
     border: none;
+    border-radius: 4px;
+    &.ant-btn-sm {
+        border-radius: 2px;
+    }
     &[disabled] {
         color: #B1B4C5;
         background-color: #EBECF0;
         border-color: #EBECF0;
     }
     &--primary {
         &:not(.ant-btn[disabled]) {
-            background: linear-gradient(110deg, $primaryAIColor);
+            background: linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
             color: #FFF;
         }
         &:hover {
             &:not(.ant-btn[disabled]) {
-                background: linear-gradient(110deg, $primaryHoverAIColor);
-                color: #FFF;
+                background: linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
+            }
+        }
+    }
+    &--default {
+        &:not(.ant-btn[disabled]) {
+            border: 1px solid #D8DAE2;
+            color: #3D446E;
+            transition: background-image 0.3s ease;
+        }
+        &:hover {
+            &:not(.ant-btn[disabled]) {
+                border-color: transparent;
+                background-image:
+                    linear-gradient(white, white),
+                    linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
+                background-origin: border-box;
+                background-clip: padding-box, border-box;
+                svg,
+                path {
+                    fill: url(#secondary_linear_gradient_hover);
+                }
+                .dtc__aigc__button__text {
+                    background-image:
+                        linear-gradient(
+                            110deg,
+                            #08C4FF 0%,
+                            #4892FF 50%,
+                            #8A61FF 100%
+                        );
+                    background-clip: text;
+                    color: transparent;
+                }
             }
         }
     }
     &--secondary.ant-btn-default {
         &:not(.ant-btn[disabled]) {
-            position: relative;
-            background: linear-gradient(90deg, $primaryAIColor);
-            > :not(.dtc__aigc__mask--secondary) {
-                position: relative;
-                z-index: 2;
+            border: 1px solid transparent;
+            background-image:
+                linear-gradient(white, white),
+                linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
+            background-origin: border-box;
+            background-clip: padding-box, border-box;
+            transition: all 0.3s linear;
+            .dtc__aigc__button__text {
+                background-image: linear-gradient(110deg, #00BAC6 0%, #0067FF 50%, #450FDE 100%);
+                background-clip: text;
+                color: transparent;
             }
             svg,
             path {
-                fill: url(#LINE_GRADIENT_ID);
+                fill: url(#secondary_linear_gradient);
             }
-        }
-        &:hover,
-        &:active {
-            &:not(.ant-btn[disabled]) {
-                background: linear-gradient(90deg, $primaryHoverAIColor);
+            &:hover {
+                background-image:
+                    linear-gradient(white, white),
+                    linear-gradient(110deg, #08C4FF 0%, #4892FF 50%, #8A61FF 100%);
                 svg,
                 path {
-                    fill: url(#HOVER_LINE_GRADIENT_ID);
+                    fill: url(#secondary_linear_gradient_hover);
+                }
+                .dtc__aigc__button__text {
+                    background-image:
+                        linear-gradient(
+                            110deg,
+                            #08C4FF 0%,
+                            #4892FF 50%,
+                            #8A61FF 100%
+                        );
                 }
             }
         }
-        .dtc__aigc__mask--secondary {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1;
-            pointer-events: none;
-            background: #FFF;
-            margin: 1px;
-            border-radius: inherit;
-        }
     }
 }
diff --git a/src/chat/button/index.tsx b/src/chat/button/index.tsx
@@ -1,53 +1,49 @@
-import React, { useEffect } from 'react';
-import { renderToString } from 'react-dom/server';
+import React from 'react';
 import { Button as AntdButton, ButtonProps } from 'antd';
 import classNames from 'classnames';
 
 import './index.scss';
 
 interface IButtonProps extends Omit<ButtonProps, 'type'> {
-    type: 'primary' | 'secondary';
+    type: 'default' | 'primary' | 'secondary';
 }
 
-const LINE_GRADIENT_ID = 'LINE_GRADIENT_ID';
-const HOVER_LINE_GRADIENT_ID = 'HOVER_LINE_GRADIENT_ID';
-const CONTAINER_ID = 'CONTAINER_ID';
-
-export default function Button({ type, className, children, ...rest }: IButtonProps) {
-    useEffect(() => {
-        if (!document.querySelector(`#${CONTAINER_ID}`)) {
-            const dom = document.createElement('span');
-            dom.id = CONTAINER_ID;
-            dom.innerHTML = renderToString(
-                <svg width="0" height="0">
-                    <defs>
-                        <linearGradient id={LINE_GRADIENT_ID} gradientTransform="rotate(90)">
-                            <stop offset="0%" stopColor="#00bac6" />
-                            <stop offset="50%" stopColor="#0067ff" />
-                            <stop offset="100%" stopColor="#450fde" />
-                        </linearGradient>
-                        <linearGradient id={HOVER_LINE_GRADIENT_ID} gradientTransform="rotate(90)">
-                            <stop offset="0%" stopColor="#08c4ff" />
-                            <stop offset="50%" stopColor="#4892ff" />
-                            <stop offset="100%" stopColor="#8a61ff" />
-                        </linearGradient>
-                    </defs>
-                </svg>
-            );
-            document.body.append(dom);
-        }
-    }, []);
-
+export default function Button({ type = 'default', className, children, ...rest }: IButtonProps) {
     return (
         <AntdButton
             className={classNames('dtc__aigc__button', className, `dtc__aigc__button--${type}`)}
             ghost
             {...rest}
         >
-            {children}
-            {type === 'secondary' && !rest.disabled && (
-                <span className="dtc__aigc__mask--secondary" />
-            )}
+            <svg width={0} height={0}>
+                <defs>
+                    <linearGradient
+                        id="secondary_linear_gradient"
+                        x1="1.18164"
+                        y1="3.93164"
+                        x2="13.9881"
+                        y2="8.54198"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#00BAC6" />
+                        <stop offset="0.5" stopColor="#0067FF" />
+                        <stop offset="1" stopColor="#450FDE" />
+                    </linearGradient>
+                    <linearGradient
+                        id="secondary_linear_gradient_hover"
+                        x1="8.96582"
+                        y1="0.96582"
+                        x2="15.9711"
+                        y2="3.4877"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#00BAC6" />
+                        <stop offset="0.5" stopColor="#0067FF" />
+                        <stop offset="1" stopColor="#450FDE" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <span className="dtc__aigc__button__text">{children}</span>
         </AntdButton>
     );
 }
diff --git a/src/chat/codeBlock/index.tsx b/src/chat/codeBlock/index.tsx
@@ -11,7 +11,7 @@ interface ICodeBlockProps {
     className?: string;
     style?: React.CSSProperties;
     convert?: boolean;
-    toolbars?: React.ReactNode;
+    toolbars?: React.ReactNode | (() => React.ReactNode);
     options?: Partial<SyntaxHighlighterProps>;
     children: React.ReactNode & React.ReactNode[];
 }
@@ -62,9 +62,9 @@ export default function CodeBlock({
                     {language.toLocaleLowerCase()}
                 </span>
                 <div className="dtc__aigc__codeblock__tool">
-                    {toolbars}
                     {/* FIXME：Copy 组件后续可以支持一下 disabled 属性 */}
                     {!copy.disabled && <Copy text={text} {...copy.options} />}
+                    {typeof toolbars === 'function' ? toolbars() : toolbars}
                 </div>
             </div>
             <SyntaxHighlighter

diff --git a/src/chat/demos/button.tsx b/src/chat/demos/button.tsx
@@ -1,28 +1,80 @@
 import React from 'react';
-import { Space } from 'antd';
+import { Button, Col, Row, Space } from 'antd';
 import { Chat } from 'dt-react-component';
 
 export default function () {
+    const [disabled, setDisabled] = React.useState(false);
     return (
-        <Space>
-            <Chat.Button
-                type="primary"
-                icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
-            />
-            <Chat.Button
-                type="primary"
-                disabled
-                icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
-            />
-            <Chat.Button
-                type="secondary"
-                icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
-            />
-            <Chat.Button
-                type="secondary"
-                disabled
-                icon={<Chat.Icon.SendIcon style={{ fontSize: 16, padding: '8px 16px' }} />}
-            />
-        </Space>
+        <Row gutter={[16, 16]}>
+            <Col span={24}>
+                <Button type="primary" onClick={() => setDisabled((p) => !p)}>
+                    切换 disabled
+                </Button>
+            </Col>
+            <Col span={24}>
+                <Space>
+                    <Chat.Button
+                        type="primary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    />
+                    <Chat.Button
+                        type="primary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                    <Chat.Button
+                        type="default"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                    <Chat.Button
+                        type="secondary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                </Space>
+            </Col>
+            <Col span={24}>
+                <Space>
+                    <Chat.Button
+                        size="small"
+                        type="primary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    />
+                    <Chat.Button
+                        size="small"
+                        type="primary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                    <Chat.Button
+                        size="small"
+                        type="default"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                    <Chat.Button
+                        size="small"
+                        type="secondary"
+                        disabled={disabled}
+                        icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
+                    >
+                        <Space size={4}>发送</Space>
+                    </Chat.Button>
+                </Space>
+            </Col>
+        </Row>
     );
 }
diff --git a/src/chat/demos/codeBlock-convert.tsx b/src/chat/demos/codeBlock-convert.tsx
@@ -1,6 +1,24 @@
+/**
+ * background: '#f6f7f9'
+ */
 import React from 'react';
 import { Chat } from 'dt-react-component';
 
+const children = `
+\`\`\` sql
+SELECT * FROM table_name;
+\`\`\`
+`;
 export default function CodeBlock() {
-    return <Chat.CodeBlock language="sql" copy={false} value="select * from table;" convert />;
+    return (
+        <Chat.Markdown
+            components={{
+                pre({ children }) {
+                    return <Chat.CodeBlock convert>{children}</Chat.CodeBlock>;
+                },
+            }}
+        >
+            {children}
+        </Chat.Markdown>
+    );
 }