-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 添加ActionIconBox组件并在媒体元素中集成删除功能
- Loading branch information
1 parent
65f813b
commit 7ba1fc1
Showing
5 changed files
with
243 additions
and
32 deletions.
There are no files selected for viewing
94 changes: 94 additions & 0 deletions
94
src/MarkdownEditor/editor/components/ActionIconBox/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { LoadingOutlined } from '@ant-design/icons'; | ||
| import { Button, ConfigProvider, Tooltip, TooltipProps } from 'antd'; | ||
| import cx from 'classnames'; | ||
| import React, { useContext, useEffect } from 'react'; | ||
| import { useStyle } from './style'; | ||
|
|
||
| /** | ||
| * Represents an icon item component. | ||
| * @param {React.ReactNode} children - The content of the icon item. | ||
| * @param {() => void} onClick - The callback function to be called when the icon item is clicked. | ||
| */ | ||
| export const ActionIconBox: React.FC<{ | ||
| children: React.ReactNode; | ||
| showTitle?: boolean; | ||
| onClick?: (e: any) => void; | ||
| tooltipProps?: TooltipProps; | ||
| title: string; | ||
| type?: 'danger' | 'primary'; | ||
| transform?: boolean; | ||
| className?: string; | ||
| borderLess?: boolean; | ||
| loading?: boolean; | ||
| style?: React.CSSProperties; | ||
| scale?: boolean; | ||
| active?: boolean; | ||
| standalone?: boolean; | ||
| onInit?: () => void; | ||
| noPadding?: boolean; | ||
| }> = (props) => { | ||
| const [loading, setLoading] = React.useState(false); | ||
| const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); | ||
| const prefixCls = getPrefixCls('agent-chat-action-icon-box'); | ||
| const { wrapSSR, hashId } = useStyle(prefixCls, props.style || {}); | ||
| useEffect(() => { | ||
| props.onInit?.(); | ||
| }, []); | ||
|
|
||
| if (props.standalone) { | ||
| return wrapSSR( | ||
| <Button | ||
| loading={loading} | ||
| icon={props.children as any} | ||
| onClick={async (e) => { | ||
| if (!props.onClick) return; | ||
| if (loading) return; | ||
| setLoading(true); | ||
| await props.onClick?.(e as any); | ||
| setLoading(false); | ||
| }} | ||
| type={props.type as 'primary'} | ||
| className={cx(prefixCls, hashId, props.className, { | ||
| [`${prefixCls}-standalone`]: props.standalone, | ||
| })} | ||
| style={props.style} | ||
| > | ||
| {props.title} | ||
| </Button>, | ||
| ); | ||
| } | ||
| return wrapSSR( | ||
| <Tooltip title={props.title} {...props.tooltipProps}> | ||
| <span | ||
| className={cx(prefixCls, hashId, props.className, { | ||
| [`${prefixCls}-danger`]: props.type === 'danger', | ||
| [`${prefixCls}-primary`]: props.type === 'primary', | ||
| [`${prefixCls}-border-less`]: props.borderLess, | ||
| [`${prefixCls}-only-icon`]: props.scale, | ||
| [`${prefixCls}-active`]: props.active, | ||
| [`${prefixCls}-transform`]: props.transform, | ||
| [`${prefixCls}-noPadding`]: props.noPadding, | ||
| })} | ||
| onClick={async (e) => { | ||
| if (!props.onClick) return; | ||
| if (loading) return; | ||
| setLoading(true); | ||
| await props.onClick?.(e as any); | ||
| setLoading(false); | ||
| }} | ||
| style={props.style} | ||
| > | ||
| {loading || props.loading ? ( | ||
| <LoadingOutlined /> | ||
| ) : ( | ||
| React.cloneElement(props.children as any, { | ||
| onClick: props.onClick, | ||
| // @ts-ignore | ||
| ...props?.children?.props, | ||
| }) | ||
| )} | ||
| {props.showTitle && <span>{props.title}</span>} | ||
| </span> | ||
| </Tooltip>, | ||
| ); | ||
| }; |
99 changes: 99 additions & 0 deletions
99
src/MarkdownEditor/editor/components/ActionIconBox/style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { | ||
| ChatTokenType, | ||
| GenerateStyle, | ||
| resetComponent, | ||
| useEditorStyleRegister, | ||
| } from '../../utils/useStyle'; | ||
|
|
||
| const genStyle: GenerateStyle<ChatTokenType> = ( | ||
| token, | ||
| style: React.CSSProperties, | ||
| ) => { | ||
| return { | ||
| [token.componentCls]: { | ||
| minWidth: 14, | ||
| minHeight: 14, | ||
| maxHeight: 24, | ||
| lineHeight: '1.5', | ||
| display: 'flex', | ||
| cursor: 'pointer', | ||
| padding: 4, | ||
| alignItems: 'center', | ||
| gap: 4, | ||
| transition: 'all 0.3s', | ||
| justifyContent: 'center', | ||
| borderRadius: token.borderRadius, | ||
| fontSize: '1em', | ||
| color: style.color || '#666F8D', | ||
| '&-noPadding': { | ||
| padding: 0, | ||
| }, | ||
| '&:hover': { | ||
| color: token.colorPrimary, | ||
| background: token.colorBgTextHover, | ||
| }, | ||
| '&-standalone': { | ||
| minWidth: 'inherit', | ||
| minHeight: 'inherit', | ||
| maxHeight: 'inherit', | ||
| padding: '8px 12px', | ||
| color: '#000000', | ||
| borderRadius: 18, | ||
| border: '1px solid #E6ECF4', | ||
| background: `radial-gradient(22% 66% at 96% 113%, rgba(255, 255, 245, 0.52) 0%, rgba(230, 238, 255, 0) 100%),radial-gradient(14% 234% at 100% 50%, rgba(162, 255, 255, 0.28) 0%, rgba(153, 202, 255, 0.1193) 13%, rgba(229, 189, 255, 0.0826) 38%, rgba(231, 211, 252, 0.0544) 59%, rgba(235, 255, 245, 0) 100%)`, | ||
| }, | ||
| '&-danger': { | ||
| '&:hover': { | ||
| color: token.colorError, | ||
| background: token.colorErrorBgHover, | ||
| }, | ||
| }, | ||
| '&-primary': { | ||
| '&:hover': { | ||
| color: token.colorPrimary, | ||
| background: token.colorPrimaryBgHover, | ||
| }, | ||
| }, | ||
| '&-border-less': { | ||
| height: 'auto', | ||
| lineHeight: 1, | ||
| background: 'none!important', | ||
| '&:hover': { | ||
| color: token.colorPrimary, | ||
| background: 'none!important', | ||
| }, | ||
| }, | ||
| '&-only-icon': { | ||
| '&:hover': { | ||
| transform: 'scale(1.1)', | ||
| }, | ||
| }, | ||
| '&-transform': { | ||
| '&:hover': { | ||
| color: token.colorPrimary, | ||
| transform: 'translateX(8px) scale(1.1)', | ||
| background: 'none', | ||
| }, | ||
| }, | ||
| '&-active': { | ||
| color: token.colorPrimary, | ||
| }, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * ProchatItem | ||
| * @param prefixCls | ||
| * @returns | ||
| */ | ||
| export function useStyle(prefixCls: string, style: React.CSSProperties) { | ||
| return useEditorStyleRegister('ActionIconBox', (token) => { | ||
| const proChatToken = { | ||
| ...token, | ||
| componentCls: `.${prefixCls}`, | ||
| }; | ||
|
|
||
| return [genStyle(proChatToken, style), resetComponent(proChatToken)]; | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7ba1fc1There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
md-to-json-schema – ./
md-to-json-schema-ai-flow-task.vercel.app
md-to-json-schema-git-main-ai-flow-task.vercel.app
md-to-json-schema.antdigital.dev
md-to-json-schema.vercel.app