centersl/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub.git synced 2026-03-27 13:29:15 +07:00
Code Issues Packages Projects Releases Wiki Activity

💄 style: fix UI issues with tooltip wrapping and dropdown type (#11495)

Browse Source 
- Upgrade @lobehub/ui to ^4.19.0
- Fix DropdownItem import path
- Change dropdown checkbox type to switch type
- Add showSorterTooltip: false to prevent double tooltip
- Wrap tooltip children with span to fix React warning
This commit is contained in:
Innei
2026-01-14 16:15:14 +08:00
committed by GitHub
parent 5837816009
commit 9d90eba310
6 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -206,7 +206,7 @@
"@lobehub/icons": "^4.0.2",
"@lobehub/market-sdk": "0.28.1",
"@lobehub/tts": "^4.0.2",
"@lobehub/ui": "^4.18.0",
"@lobehub/ui": "^4.19.0",
"@modelcontextprotocol/sdk": "^1.25.1",
"@neondatabase/serverless": "^1.0.2",
"@next/third-parties": "^16.1.1",

8
src/app/[variants]/(main)/agent/features/Conversation/Header/HeaderActions/useMenu.tsx
View File

@@ -1,13 +1,13 @@
'use client';
import { type DropdownMenuCheckboxItem } from '@lobehub/ui';
import type { DropdownItem } from '@lobehub/ui/es/DropdownMenu/type';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGlobalStore } from '@/store/global';
import { systemStatusSelectors } from '@/store/global/selectors';
export const useMenu = (): { menuItems: DropdownMenuCheckboxItem[] } => {
export const useMenu = (): { menuItems: DropdownItem[] } => {
const { t } = useTranslation('chat');
const [wideScreen, toggleWideScreen] = useGlobalStore((s) => [
@@ -15,14 +15,14 @@ export const useMenu = (): { menuItems: DropdownMenuCheckboxItem[] } => {
s.toggleWideScreen,
]);
const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
const menuItems = useMemo<DropdownItem[]>(
() => [
{
checked: wideScreen,
key: 'full-width',
label: t('viewMode.fullWidth'),
onCheckedChange: toggleWideScreen,
type: 'checkbox',
type: 'switch',
},
],
[t, wideScreen, toggleWideScreen],

9
src/app/[variants]/(main)/community/(detail)/model/features/Details/Overview/ProviderList/index.tsx
View File

@@ -74,6 +74,7 @@ const ProviderList = memo(() => {
: record.model?.maxDimension
? formatTokenNumber(record.model.maxDimension)
: '--',
showSorterTooltip: false,
sorter: (a, b) => {
const aValue = a.model?.maxOutput || a.model?.maxDimension || 0;
const bValue = b.model?.maxOutput || b.model?.maxDimension || 0;
@@ -81,7 +82,7 @@ const ProviderList = memo(() => {
},
title: (
<Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
{t('models.providerInfo.maxOutput')}
<span>{t('models.providerInfo.maxOutput')}</span>
</Tooltip>
),
width: 120,
@@ -95,6 +96,7 @@ const ProviderList = memo(() => {
? '$' + formatPriceByCurrency(inputRate, record.model.pricing?.currency)
: '--';
},
showSorterTooltip: false,
sorter: (a, b) => {
const aRate = getTextInputUnitRate(a.model?.pricing) || 0;
const bRate = getTextInputUnitRate(b.model?.pricing) || 0;
@@ -102,7 +104,7 @@ const ProviderList = memo(() => {
},
title: (
<Tooltip title={t('models.providerInfo.inputTooltip')}>
{t('models.providerInfo.input')}
<span>{t('models.providerInfo.input')}</span>
</Tooltip>
),
width: 100,
@@ -116,6 +118,7 @@ const ProviderList = memo(() => {
? '$' + formatPriceByCurrency(outputRate, record.model.pricing?.currency)
: '--';
},
showSorterTooltip: false,
sorter: (a, b) => {
const aRate = getTextOutputUnitRate(a.model?.pricing) || 0;
const bRate = getTextOutputUnitRate(b.model?.pricing) || 0;
@@ -123,7 +126,7 @@ const ProviderList = memo(() => {
},
title: (
<Tooltip title={t('models.providerInfo.outputTooltip')}>
{t('models.providerInfo.output')}
<span>{t('models.providerInfo.output')}</span>
</Tooltip>
),
width: 100,

9
src/app/[variants]/(main)/community/(detail)/provider/features/Details/Overview/ModelList/index.tsx
View File

@@ -72,10 +72,11 @@ const ModelList = memo(() => {
key: 'maxOutput',
render: (_, record) =>
record.maxOutput ? formatTokenNumber(record.maxOutput) : '--',
showSorterTooltip: false,
sorter: (a, b) => (a.maxOutput || 0) - (b.maxOutput || 0),
title: (
<Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
{t('models.providerInfo.maxOutput')}
<span>{t('models.providerInfo.maxOutput')}</span>
</Tooltip>
),
width: 120,
@@ -89,6 +90,7 @@ const ModelList = memo(() => {
? '$' + formatPriceByCurrency(inputRate, record.pricing?.currency)
: '--';
},
showSorterTooltip: false,
sorter: (a, b) => {
const aRate = getTextInputUnitRate(a.pricing) || 0;
const bRate = getTextInputUnitRate(b.pricing) || 0;
@@ -96,7 +98,7 @@ const ModelList = memo(() => {
},
title: (
<Tooltip title={t('models.providerInfo.inputTooltip')}>
{t('models.providerInfo.input')}
<span>{t('models.providerInfo.input')}</span>
</Tooltip>
),
width: 100,
@@ -110,6 +112,7 @@ const ModelList = memo(() => {
? '$' + formatPriceByCurrency(outputRate, record.pricing?.currency)
: '--';
},
showSorterTooltip: false,
sorter: (a, b) => {
const aRate = getTextOutputUnitRate(a.pricing) || 0;
const bRate = getTextOutputUnitRate(b.pricing) || 0;
@@ -117,7 +120,7 @@ const ModelList = memo(() => {
},
title: (
<Tooltip title={t('models.providerInfo.outputTooltip')}>
{t('models.providerInfo.output')}
<span>{t('models.providerInfo.output')}</span>
</Tooltip>
),
width: 100,

2
src/features/Conversation/Messages/components/Extras/Usage/UsageDetail/ModelCard.tsx
View File

@@ -70,7 +70,7 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
{
label: (
<Tooltip title={t('messages.modelCard.creditTooltip')}>
{t('messages.modelCard.credit')}
<span>{t('messages.modelCard.credit')}</span>
</Tooltip>
),
value: 'credit',

3
src/features/PageEditor/Header/useMenu.tsx
View File

@@ -84,8 +84,7 @@ export const useMenu = (): { menuItems: any[] } => {
key: 'full-width',
label: t('viewMode.fullWidth', { ns: 'chat' }),
onCheckedChange: toggleWideScreen,
type: 'checkbox' as const,
type: 'switch' as const,
},
{
type: 'divider' as const,