From f8bfc3f80c75d058b9c4ca54f590fca8050cfe40 Mon Sep 17 00:00:00 2001 From: xiuneng Date: Wed, 18 Dec 2024 20:58:32 +0800 Subject: [PATCH] fix(chat): update Chat.Button's css style --- src/chat/button/index.scss | 99 ++++++++++++++++++---------- src/chat/button/index.tsx | 68 +++++++++---------- src/chat/codeBlock/index.tsx | 4 +- src/chat/demos/button.tsx | 94 ++++++++++++++++++++------ src/chat/demos/codeBlock-convert.tsx | 20 +++++- src/chat/demos/codeBlock.tsx | 33 ++++++---- src/chat/icon/index.tsx | 13 ++-- src/chat/index.$tab-codeBlock.md | 16 +++-- src/chat/message/index.tsx | 2 +- 9 files changed, 228 insertions(+), 121 deletions(-) diff --git a/src/chat/button/index.scss b/src/chat/button/index.scss index 4b6db6fad..136555e2e 100644 --- a/src/chat/button/index.scss +++ b/src/chat/button/index.scss @@ -1,12 +1,9 @@ -$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; @@ -14,51 +11,83 @@ $primaryHoverAIColor: #08C4FF 0%, #4892FF 50%, #8A61FF 100%; } &--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 index 808ad2761..42f9f811f 100644 --- 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 { - 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( - - - - - - - - - - - - - - - ); - document.body.append(dom); - } - }, []); - +export default function Button({ type = 'default', className, children, ...rest }: IButtonProps) { return ( - {children} - {type === 'secondary' && !rest.disabled && ( - - )} + + + + + + + + + + + + + + + {children} ); } diff --git a/src/chat/codeBlock/index.tsx b/src/chat/codeBlock/index.tsx index dbb2f3a51..d5f07e11f 100644 --- 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; children: React.ReactNode & React.ReactNode[]; } @@ -62,9 +62,9 @@ export default function CodeBlock({ {language.toLocaleLowerCase()}
- {toolbars} {/* FIXME：Copy 组件后续可以支持一下 disabled 属性 */} {!copy.disabled && } + {typeof toolbars === 'function' ? toolbars() : toolbars}
- } - /> - } - /> - } - /> - } - /> - + + + + + + + } + /> + } + > + 发送 + + } + > + 发送 + + } + > + 发送 + + + + + + } + /> + } + > + 发送 + + } + > + 发送 + + } + > + 发送 + + + + ); } diff --git a/src/chat/demos/codeBlock-convert.tsx b/src/chat/demos/codeBlock-convert.tsx index 666046c1e..894058688 100644 --- 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 ; + return ( + {children}; + }, + }} + > + {children} + + ); } diff --git a/src/chat/demos/codeBlock.tsx b/src/chat/demos/codeBlock.tsx index b545db893..8b9f248bb 100644 --- a/src/chat/demos/codeBlock.tsx +++ b/src/chat/demos/codeBlock.tsx @@ -2,23 +2,28 @@ * background: '#f6f7f9' */ import React from 'react'; -import { message, Space } from 'antd'; +import { PlusCircleOutlined } from '@ant-design/icons'; import { Chat } from 'dt-react-component'; +const children = ` +\`\`\` sql +SELECT * FROM table_name; +\`\`\` +`; export default function CodeBlock() { return ( - - - message.success('Copied'), - }} - value="select * from table;" - convert={false} - /> - + }> + {children} + + ); + }, + }} + > + {children} + ); } diff --git a/src/chat/icon/index.tsx b/src/chat/icon/index.tsx index 7ede1e7fd..75aedc350 100644 --- a/src/chat/icon/index.tsx +++ b/src/chat/icon/index.tsx @@ -3,7 +3,12 @@ import classNames from 'classnames'; import './index.scss'; -interface IconProps extends React.HTMLAttributes {} +interface IconProps extends React.HTMLAttributes { + /** + * 是否支持渐变色 + */ + gradient?: boolean; +} /** * @deprecated 后续迁移至 icon 库 @@ -133,7 +138,7 @@ export function RobotIcon({ className, ...rest }: IconProps) { /** * @deprecated 后续迁移至 icon 库 */ -export function SendIcon({ className, ...rest }: IconProps) { +export function SendIcon({ className, gradient, ...rest }: IconProps) { return ( diff --git a/src/chat/index.$tab-codeBlock.md b/src/chat/index.$tab-codeBlock.md index f41263183..433250a21 100644 --- a/src/chat/index.$tab-codeBlock.md +++ b/src/chat/index.$tab-codeBlock.md @@ -17,10 +17,12 @@ CodeBlock 组件用以展示代码块 ## API -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ---------------- | ------------------------ | ------ | -| language | 语言 | `string` | - | -| copy | 是否支持复制功能 | `boolean \| ICopyProps` | `true` | -| value | 内容 | `string` | - | -| convert | 反色模式 | `boolean` | - | -| options | 配置项 | `SyntaxHighlighterProps` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------------- | -------------------------------------------- | ------ | +| copy | 是否支持复制功能 | `boolean \| ICopyProps` | `true` | +| className | 类名 | `string` | - | +| style | 样式 | `CSSProperties` | - | +| convert | 反色模式 | `boolean` | - | +| toolbars | 渲染工具位 | `React.ReactNode \| (() => React.ReactNode)` | - | +| options | 配置项 | `SyntaxHighlighterProps` | - | +| children | 文案 | `React.ReactNode & React.ReactNode[]` | - | diff --git a/src/chat/message/index.tsx b/src/chat/message/index.tsx index d087d86ed..51c31d574 100644 --- a/src/chat/message/index.tsx +++ b/src/chat/message/index.tsx @@ -174,6 +174,7 @@ export default function Message({ {!typing && !loading && ( {renderCopyIcon()} + {typeof messageIcons === 'function' ? messageIcons(record) : messageIcons} {regenerate && ( )} - {typeof messageIcons === 'function' ? messageIcons(record) : messageIcons} )}