From e2d79a6802f62882dcc37692dbf4cc298701e106 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 26 Jun 2025 20:38:09 +0800 Subject: [PATCH] style: multiple selection tag --- src/components/auto-tooltip/index.tsx | 22 +++++++++-- .../logs-viewer/virtual-log-list.tsx | 18 +++++++++ .../seal-form/hooks/use-select-render.tsx | 17 ++++++++- src/components/seal-form/seal-cascader.tsx | 3 +- src/global.less | 8 ++-- .../components/usage-inner/use-usage-data.tsx | 15 +++++++- .../playground/components/message-input.tsx | 6 --- .../components/multiple-chat/model-item.tsx | 38 +++++++++++-------- .../components/styles/installation.less | 1 + 9 files changed, 93 insertions(+), 35 deletions(-) diff --git a/src/components/auto-tooltip/index.tsx b/src/components/auto-tooltip/index.tsx index eb868909..b3cf2d41 100644 --- a/src/components/auto-tooltip/index.tsx +++ b/src/components/auto-tooltip/index.tsx @@ -8,6 +8,7 @@ import React, { useRef, useState } from 'react'; +import styled from 'styled-components'; import { TooltipOverlayScroller } from '../overlay-scroller'; // type TagProps = React.ComponentProps; @@ -22,9 +23,18 @@ interface AutoTooltipProps extends Omit { title?: React.ReactNode; showTitle?: boolean; closable?: boolean; + radius?: number | string; + filled?: boolean; tooltipProps?: React.ComponentProps; } +const StyledTag = styled(Tag)` + &.tag-filled { + border: none; + background-color: var(--ant-color-fill-secondary); + } +`; + const AutoTooltip: React.FC = ({ children, maxWidth = '100%', @@ -33,6 +43,8 @@ const AutoTooltip: React.FC = ({ title, showTitle = false, tooltipProps, + radius = 12, + filled = false, ...tagProps }) => { const contentRef = useRef(null); @@ -103,13 +115,14 @@ const AutoTooltip: React.FC = ({ {children} ) : ( - = ({ style={{ position: 'absolute', right: 8, - top: 6 + top: '50%', + transform: 'translateY(-50%)' }} /> ) : ( @@ -126,7 +140,7 @@ const AutoTooltip: React.FC = ({ } > {children} - + )} ); diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index d8c7be79..917568c2 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -11,6 +11,7 @@ import React, { useRef, useState } from 'react'; +import styled from 'styled-components'; import LogsList from './logs-list'; import LogsPagination from './logs-pagination'; import './styles/index.less'; @@ -26,6 +27,13 @@ interface LogsViewerProps { enableScorllLoad?: boolean; diffHeight?: number; } + +const PaginationWrapper = styled.div` + position: absolute; + right: 50px; + top: 30px; +`; + const LogsViewer: React.FC = forwardRef((props, ref) => { const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props; const { pageSize, page, setPage, setTotalPage, totalPage } = @@ -294,6 +302,16 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { return (
+ {/* + + */}
{ const { label } = props; + const labelText = useMemo(() => { + if (!props.isMaxTag) { + return label; + } + return label.slice(0, -3); + }, [label, props.isMaxTag]); return ( - {label} + {labelText} ); }; diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx index d95ce3c6..413bd925 100644 --- a/src/components/seal-form/seal-cascader.tsx +++ b/src/components/seal-form/seal-cascader.tsx @@ -11,7 +11,7 @@ import SelectWrapper from './wrapper/select'; const tag = (props: any) => { if (props.isMaxTag) { - return props.label; + return props.label?.slice(0, -3); } const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0]; return `${parent} / ${props?.label}`; @@ -24,6 +24,7 @@ const renderTag = (props: any) => { closable={props.closable} onClose={props.onClose} maxWidth={240} + filled > {tag(props)} diff --git a/src/global.less b/src/global.less index b0f8c451..fe46a0fc 100644 --- a/src/global.less +++ b/src/global.less @@ -277,12 +277,10 @@ body { display: none; } -.ant-pro-base-menu-vertical-item-title { - // height: var(--ant-menu-item-height) !important; -} - +.ant-pro-base-menu-vertical-item-title, .ant-pro-base-menu-vertical-item-title-collapsed { - // height: var(--ant-menu-item-height) !important; + height: var(--ant-menu-item-height) !important; + line-height: var(--ant-menu-item-height) !important; } .ant-pro-layout { diff --git a/src/pages/dashboard/components/usage-inner/use-usage-data.tsx b/src/pages/dashboard/components/usage-inner/use-usage-data.tsx index 96839e8f..c35e5df7 100644 --- a/src/pages/dashboard/components/usage-inner/use-usage-data.tsx +++ b/src/pages/dashboard/components/usage-inner/use-usage-data.tsx @@ -27,6 +27,9 @@ const FilterWrapper = styled.div` align-items: center; gap: 12px; } + .ant-select-selection-overflow-item > span { + height: 24px; + } `; interface RequestTokenData { @@ -99,7 +102,12 @@ export default function useUseageData(config: { const { url, defaultData, disabledDate = false } = config || {}; const intl = useIntl(); const { TagRender } = useSelectRender({ - maxTagWidth: 100 + maxTagWidth: 100, + filled: true, + style: { + height: 24, + lineHeight: '24px' + } }); const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({ range: DefaultDateConfig.maxRange, @@ -332,7 +340,10 @@ export default function useUseageData(config: {
= forwardRef( const handleClearAll = (e: any) => { e.stopPropagation(); clearAll(); - // handleInputChange({ target: { value: '' } }); - // setMessage({ - // role: Roles.User, - // content: '', - // imgs: [] - // }); }; const handleAddMessage = (e?: any) => { diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx index 6c734779..bb79e228 100644 --- a/src/pages/playground/components/multiple-chat/model-item.tsx +++ b/src/pages/playground/components/multiple-chat/model-item.tsx @@ -114,11 +114,15 @@ const ModelItem: React.FC = forwardRef((props, ref) => { handleDeleteModel(instanceId); }; + const generateValidMessage = (message: Omit) => { + if (!message.content && !message.imgs?.length && !message.audio?.length) { + return undefined; + } + return message; + }; + const handleSubmit = (currentMessage: Omit) => { - const currentMsg = - currentMessage.content || currentMessage.imgs?.length - ? currentMessage - : undefined; + const currentMsg = generateValidMessage(currentMessage); submitMessage({ system: systemMessage @@ -289,11 +293,11 @@ const ModelItem: React.FC = forwardRef((props, ref) => { = forwardRef((props, ref) => { paramsConfig={paramsConfig} initialValues={initialValues} showModelSelector={false} + parametersTitle={ +
+ + {intl.formatMessage({ id: 'playground.parameters' })} + + + {intl.formatMessage({ + id: 'playground.compare.applytoall' + })} + +
+ } /> } trigger={['click']} arrow={false} fresh={true} - title={ -
- - {intl.formatMessage({ - id: 'playground.compare.applytoall' - })} - -
- } + title={false} >