youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): align provider badges with figma and remove dead add-model-button

Browse Source
This commit is contained in:
yyh
2026-03-04 22:23:59 +08:00
parent 4d9fcbec57
commit 0f7ed6f67e
5 changed files with 34 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
View File

@ -10,7 +10,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
children,
}) => {
return (
<div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary', className)}>
<div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase', className)}>
{children}
</div>
)

17
web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
View File

@ -1,17 +0,0 @@
import { fireEvent, render, screen } from '@testing-library/react'
import AddModelButton from './add-model-button'
describe('AddModelButton', () => {
it('should render button with text', () => {
render(<AddModelButton onClick={vi.fn()} />)
expect(screen.getByText('common.modelProvider.addModel')).toBeInTheDocument()
})
it('should call onClick when clicked', () => {
const handleClick = vi.fn()
render(<AddModelButton onClick={handleClick} />)
const button = screen.getByText('common.modelProvider.addModel')
fireEvent.click(button)
expect(handleClick).toHaveBeenCalledTimes(1)
})
})

27
web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
View File

@ -1,27 +0,0 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
import { cn } from '@/utils/classnames'
type AddModelButtonProps = {
className?: string
onClick: () => void
}
const AddModelButton: FC<AddModelButtonProps> = ({
className,
onClick,
}) => {
const { t } = useTranslation()
return (
<span
className={cn('system-xs-medium flex h-6 shrink-0 cursor-pointer items-center rounded-md px-1.5 text-text-tertiary hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text', className)}
onClick={onClick}
>
<PlusCircle className="mr-1 h-3 w-3" />
{t('modelProvider.addModel', { ns: 'common' })}
</span>
)
}
export default AddModelButton

40
web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
View File

@ -1,6 +1,8 @@
import type { FC } from 'react'
import type { PluginDetail } from '@/app/components/plugins/types'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
@ -17,10 +19,11 @@ type Props = {
}
const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
const { t } = useTranslation()
const { theme } = useTheme()
const locale = useLocale()
const { source, version, meta } = detail
const { source, version, latest_version, latest_unique_identifier, meta } = detail
const author = detail.declaration?.author ?? ''
const name = detail.declaration?.name ?? detail.name
@ -30,6 +33,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
hasNewVersion,
isAutoUpgradeEnabled,
isFromMarketplace,
isFromGitHub,
} = useDetailHeaderState(detail)
const {
@ -49,6 +53,16 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
handleUpdate(state.isDowngrade)
}
const handleTriggerLatestUpdate = () => {
if (isFromMarketplace) {
versionPicker.setTargetVersion({
version: latest_version,
unique_identifier: latest_unique_identifier,
})
}
handleUpdate()
}
const detailUrl = useMemo(() => {
if (source === PluginSource.github)
return meta?.repo ? `https://github.com/${meta.repo}` : ''
@ -69,23 +83,35 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
onSelect={handleVersionSelect}
offset={{ mainAxis: 4, crossAxis: 0 }}
trigger={(
<div
<button
type="button"
disabled={!isFromMarketplace}
className={cn(
'relative inline-flex min-w-5 items-center justify-center gap-[3px] rounded-md border border-divider-deep px-[5px] py-[2px] text-text-tertiary system-xs-medium-uppercase',
versionPicker.isShow && 'bg-state-base-hover',
isFromMarketplace && 'cursor-pointer hover:bg-state-base-hover',
'relative inline-flex min-w-5 items-center justify-center gap-[3px] rounded-md border border-divider-deep bg-state-base-hover px-[5px] py-[2px] text-text-tertiary system-xs-medium-uppercase',
isFromMarketplace && 'cursor-pointer hover:bg-state-base-hover-alt',
)}
>
<span>{version}</span>
{isFromMarketplace && <span className="i-ri-arrow-left-right-line h-3 w-3" />}
{isFromMarketplace && <span aria-hidden className="i-ri-arrow-left-right-line h-3 w-3" />}
{hasNewVersion && (
<span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-state-destructive-solid" />
)}
</div>
</button>
)}
/>
)}
{(hasNewVersion || isFromGitHub) && (
<Button
variant="secondary-accent"
size="small"
className="!h-5"
onClick={handleTriggerLatestUpdate}
>
{t('detailPanel.operation.update', { ns: 'plugin' })}
</Button>
)}
<OperationDropdown
source={source}
onInfo={modalStates.showPluginInfo}