mirror of
https://github.com/langgenius/dify.git
synced 2026-05-06 02:18:08 +08:00
chore(web): new lint setup (#30020)
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
GitHub
@ -1,23 +1,24 @@
|
||||
'use client'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { BlockEnum, type ToolWithProvider } from '../types'
|
||||
import type { ToolWithProvider } from '../types'
|
||||
import type { ToolDefaultValue, ToolValue } from './types'
|
||||
import type { Plugin } from '@/app/components/plugins/types'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import BlockIcon from '../block-icon'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { RiMoreLine } from '@remixicon/react'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
|
||||
import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import { getMarketplaceUrl } from '@/utils/var'
|
||||
import BlockIcon from '../block-icon'
|
||||
import { BlockEnum } from '../types'
|
||||
import Tools from './tools'
|
||||
import { ToolTypeEnum } from './types'
|
||||
import { ViewType } from './view-type-select'
|
||||
import Tools from './tools'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
|
||||
import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
|
||||
import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
|
||||
|
||||
const MAX_RECOMMENDED_COUNT = 15
|
||||
const INITIAL_VISIBLE_COUNT = 5
|
||||
@ -125,27 +126,27 @@ const FeaturedTools = ({
|
||||
const showEmptyState = !isLoading && totalVisible === 0
|
||||
|
||||
return (
|
||||
<div className='px-3 pb-3 pt-2'>
|
||||
<div className="px-3 pb-3 pt-2">
|
||||
<button
|
||||
type='button'
|
||||
className='flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary'
|
||||
type="button"
|
||||
className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
|
||||
onClick={() => setIsCollapsed(prev => !prev)}
|
||||
>
|
||||
<span className='system-xs-medium text-text-primary'>{t('workflow.tabs.featuredTools')}</span>
|
||||
<span className="system-xs-medium text-text-primary">{t('workflow.tabs.featuredTools')}</span>
|
||||
<ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
|
||||
</button>
|
||||
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
{isLoading && (
|
||||
<div className='py-3'>
|
||||
<Loading type='app' />
|
||||
<div className="py-3">
|
||||
<Loading type="app" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showEmptyState && (
|
||||
<p className='system-xs-regular py-2 text-text-tertiary'>
|
||||
<Link className='text-text-accent' href={getMarketplaceUrl('', { category: 'tool' })} target='_blank' rel='noopener noreferrer'>
|
||||
<p className="system-xs-regular py-2 text-text-tertiary">
|
||||
<Link className="text-text-accent" href={getMarketplaceUrl('', { category: 'tool' })} target="_blank" rel="noopener noreferrer">
|
||||
{t('workflow.tabs.noFeaturedPlugins')}
|
||||
</Link>
|
||||
</p>
|
||||
@ -155,7 +156,7 @@ const FeaturedTools = ({
|
||||
<>
|
||||
{visibleInstalledProviders.length > 0 && (
|
||||
<Tools
|
||||
className='p-0'
|
||||
className="p-0"
|
||||
tools={visibleInstalledProviders}
|
||||
onSelect={onSelect}
|
||||
canNotSelectMultiple
|
||||
@ -168,7 +169,7 @@ const FeaturedTools = ({
|
||||
)}
|
||||
|
||||
{visibleUninstalledPlugins.length > 0 && (
|
||||
<div className='mt-1 flex flex-col gap-1'>
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
{visibleUninstalledPlugins.map(plugin => (
|
||||
<FeaturedToolUninstalledItem
|
||||
key={plugin.plugin_id}
|
||||
@ -187,7 +188,7 @@ const FeaturedTools = ({
|
||||
|
||||
{!isLoading && totalVisible > 0 && canToggleVisibility && (
|
||||
<div
|
||||
className='group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary'
|
||||
className="group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary"
|
||||
onClick={() => {
|
||||
setVisibleCount((count) => {
|
||||
if (count >= maxAvailable)
|
||||
@ -197,15 +198,17 @@ const FeaturedTools = ({
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary'>
|
||||
<RiMoreLine className='size-4 group-hover:hidden' />
|
||||
{isExpanded ? (
|
||||
<ArrowUpDoubleLine className='hidden size-4 group-hover:block' />
|
||||
) : (
|
||||
<ArrowDownDoubleLine className='hidden size-4 group-hover:block' />
|
||||
)}
|
||||
<div className="flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary">
|
||||
<RiMoreLine className="size-4 group-hover:hidden" />
|
||||
{isExpanded
|
||||
? (
|
||||
<ArrowUpDoubleLine className="hidden size-4 group-hover:block" />
|
||||
)
|
||||
: (
|
||||
<ArrowDownDoubleLine className="hidden size-4 group-hover:block" />
|
||||
)}
|
||||
</div>
|
||||
<div className='system-xs-regular'>
|
||||
<div className="system-xs-regular">
|
||||
{t(isExpanded ? 'workflow.tabs.showLessFeatured' : 'workflow.tabs.showMoreFeatured')}
|
||||
</div>
|
||||
</div>
|
||||
@ -255,28 +258,28 @@ function FeaturedToolUninstalledItem({
|
||||
return (
|
||||
<>
|
||||
<Tooltip
|
||||
position='right'
|
||||
position="right"
|
||||
needsDelay={false}
|
||||
popupClassName='!p-0 !px-3 !py-2.5 !w-[224px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
|
||||
popupClassName="!p-0 !px-3 !py-2.5 !w-[224px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg"
|
||||
popupContent={(
|
||||
<div>
|
||||
<BlockIcon size='md' className='mb-2' type={BlockEnum.Tool} toolIcon={plugin.icon} />
|
||||
<div className='mb-1 text-sm leading-5 text-text-primary'>{label}</div>
|
||||
<div className='text-xs leading-[18px] text-text-secondary'>{description}</div>
|
||||
<BlockIcon size="md" className="mb-2" type={BlockEnum.Tool} toolIcon={plugin.icon} />
|
||||
<div className="mb-1 text-sm leading-5 text-text-primary">{label}</div>
|
||||
<div className="text-xs leading-[18px] text-text-secondary">{description}</div>
|
||||
</div>
|
||||
)}
|
||||
disabled={!description || isActionHovered || actionOpen || isInstallModalOpen}
|
||||
>
|
||||
<div
|
||||
className='group flex h-8 w-full items-center rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
|
||||
className="group flex h-8 w-full items-center rounded-lg pl-3 pr-1 hover:bg-state-base-hover"
|
||||
>
|
||||
<div className='flex h-full min-w-0 items-center'>
|
||||
<div className="flex h-full min-w-0 items-center">
|
||||
<BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
|
||||
<div className='ml-2 min-w-0'>
|
||||
<div className='system-sm-medium truncate text-text-secondary'>{label}</div>
|
||||
<div className="ml-2 min-w-0">
|
||||
<div className="system-sm-medium truncate text-text-secondary">{label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='ml-auto flex h-full items-center gap-1 pl-1'>
|
||||
<div className="ml-auto flex h-full items-center gap-1 pl-1">
|
||||
<span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
|
||||
<div
|
||||
className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? 'flex' : 'hidden group-hover:flex'}`}
|
||||
@ -287,8 +290,8 @@ function FeaturedToolUninstalledItem({
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type='button'
|
||||
className='cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover'
|
||||
type="button"
|
||||
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover"
|
||||
onClick={() => {
|
||||
setActionOpen(false)
|
||||
setIsInstallModalOpen(true)
|
||||
|
||||
Reference in New Issue
Block a user