root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: multiple selection tag

Browse Source
This commit is contained in:
jialin
2025-06-26 20:39:07 +08:00
parent c68d85096b
commit e2d79a6802
9 changed files with 93 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auto-tooltip/index.tsx
+18 -4
View File
@@ -8,6 +8,7 @@ import React, {
useRef,
useState
} from 'react';
import styled from 'styled-components';
import { TooltipOverlayScroller } from '../overlay-scroller';
// type TagProps = React.ComponentProps<typeof Tag>;
@@ -22,9 +23,18 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
title?: React.ReactNode;
showTitle?: boolean;
closable?: boolean;
radius?: number | string;
filled?: boolean;
tooltipProps?: React.ComponentProps<typeof Tooltip>;
}
const StyledTag = styled(Tag)`
&.tag-filled {
border: none;
background-color: var(--ant-color-fill-secondary);
}
`;
const AutoTooltip: React.FC<AutoTooltipProps> = ({
children,
maxWidth = '100%',
@@ -33,6 +43,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
title,
showTitle = false,
tooltipProps,
radius = 12,
filled = false,
...tagProps
}) => {
const contentRef = useRef<HTMLDivElement>(null);
@@ -103,13 +115,14 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
{children}
</div>
) : (
<Tag
<StyledTag
{...tagProps}
className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
ref={contentRef}
style={{
...tagStyle,
paddingInline: tagProps.closable ? '8px 22px' : 8,
borderRadius: 12
borderRadius: radius
}}
closeIcon={
tagProps.closable ? (
@@ -117,7 +130,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
style={{
position: 'absolute',
right: 8,
top: 6
top: '50%',
transform: 'translateY(-50%)'
}}
/>
) : (
@@ -126,7 +140,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
}
>
{children}
</Tag>
</StyledTag>
)}
</TooltipOverlayScroller>
);
src/components/logs-viewer/virtual-log-list.tsx
+18
View File
@@ -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<LogsViewerProps> = 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<LogsViewerProps> = forwardRef((props, ref) => {
return (
<div className="logs-viewer-wrap-w2">
{/* <PaginationWrapper>
<Pagination
simple={{ readOnly: true }}
total={totalPage}
current={page}
pageSize={pageSize}
showSizeChanger={false}
hideOnSinglePage={false}
></Pagination>
</PaginationWrapper> */}
<div className="wrap">
<div>
<LogsList
src/components/seal-form/hooks/use-select-render.tsx
+15 -2
View File
@@ -1,20 +1,33 @@
import AutoTooltip from '@/components/auto-tooltip';
import React, { useMemo } from 'react';
interface SelectRenderProps {
maxTagWidth?: number;
radius?: number | string;
style?: React.CSSProperties;
filled?: boolean;
}
export default function useSelectRender(config?: SelectRenderProps) {
const { maxTagWidth = 100 } = config || {};
const { maxTagWidth = 100, radius, filled, style } = config || {};
const TagRender = (props: any) => {
const { label } = props;
const labelText = useMemo(() => {
if (!props.isMaxTag) {
return label;
}
return label.slice(0, -3);
}, [label, props.isMaxTag]);
return (
<AutoTooltip
maxWidth={maxTagWidth}
closable={props.closable}
onClose={props.onClose}
radius={radius}
filled={filled}
style={style}
>
{label}
{labelText}
</AutoTooltip>
);
};
src/components/seal-form/seal-cascader.tsx
+2 -1
View File
@@ -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)}
</AutoTooltip>
src/global.less
+3 -5
View File
@@ -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 {
src/pages/dashboard/components/usage-inner/use-usage-data.tsx
+13 -2
View File
@@ -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<T>(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<T>(config: {
<div className="selection">
<DatePicker.RangePicker
maxDate={dayjs()}
defaultValue={[dayjs().add(-29, 'd'), dayjs()]}
defaultValue={[
dayjs().add(-DefaultDateConfig.defaultRange, 'd'),
dayjs()
]}
disabledDate={disabledRangeDaysDate}
presets={rangePresets}
allowClear={false}
src/pages/playground/components/message-input.tsx
-6
View File
@@ -209,12 +209,6 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
const handleClearAll = (e: any) => {
e.stopPropagation();
clearAll();
// handleInputChange({ target: { value: '' } });
// setMessage({
// role: Roles.User,
// content: '',
// imgs: []
// });
};
const handleAddMessage = (e?: any) => {
src/pages/playground/components/multiple-chat/model-item.tsx
+23 -15
View File
@@ -114,11 +114,15 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
handleDeleteModel(instanceId);
};
const generateValidMessage = (message: Omit<MessageItem, 'uid'>) => {
if (!message.content && !message.imgs?.length && !message.audio?.length) {
return undefined;
}
return message;
};
const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
const currentMsg =
currentMessage.content || currentMessage.imgs?.length
? currentMessage
: undefined;
const currentMsg = generateValidMessage(currentMessage);
submitMessage({
system: systemMessage
@@ -289,11 +293,11 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
</Dropdown>
<Popover
autoAdjustOverflow={true}
overlayInnerStyle={{ width: 384, paddingInline: 0 }}
overlayInnerStyle={{ width: 375, paddingInline: 0 }}
content={
<OverlayScroller
maxHeight={500}
style={{ paddingInline: '16px' }}
style={{ paddingInline: '24px' }}
oppositeTheme={true}
>
<DynamicParams
@@ -302,21 +306,25 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
paramsConfig={paramsConfig}
initialValues={initialValues}
showModelSelector={false}
parametersTitle={
<div className="flex-center flex-between">
<span>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
<Checkbox onChange={handleApplyToAllModels}>
{intl.formatMessage({
id: 'playground.compare.applytoall'
})}
</Checkbox>
</div>
}
/>
</OverlayScroller>
}
trigger={['click']}
arrow={false}
fresh={true}
title={
<div style={{ paddingInline: '16px' }}>
<Checkbox onChange={handleApplyToAllModels}>
{intl.formatMessage({
id: 'playground.compare.applytoall'
})}
</Checkbox>
</div>
}
title={false}
>
<Button
type="text"
src/pages/resources/components/styles/installation.less
+1
View File
@@ -8,6 +8,7 @@
margin-bottom: 16px;
padding-left: 16px;
background: var(--ant-color-fill-tertiary);
color: var(--ant-color-text-secondary);
border-radius: 2px;
list-style-type: decimal;