ngskcloud
/
gcgj-dify-1.7.0
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: chagne card to client component

Browse Source
pull/9529/head
Joel 1 year ago
parent 18f5f9cc37
commit cac04c5f3c
12 changed files with 26 additions and 124 deletions
Show Stats Download Patch File Download Diff File

13
web/app/(commonLayout)/plugins/test/card/page.tsx
Unescape Escape View File

@ -1,18 +1,16 @@
import { handleDelete } from './actions'
import TestClientPlugin from './test-client-plugin'
import Card from '@/app/components/plugins/card'
import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
import PluginItem from '@/app/components/plugins/plugin-item'
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
import ProviderCard from '@/app/components/plugins/provider-card'
import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
import { getLocaleOnServer } from '@/i18n/server'
import Badge from '@/app/components/base/badge'
const PluginList = async () => {
const locale = getLocaleOnServer()
const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
const { t: pluginI8n } = await translate(locale, 'plugin')
return (
<div className='pb-3 bg-white'>
@ -24,19 +22,14 @@ const PluginList = async () => {
key={index}
payload={plugin as any}
onDelete={handleDelete}
pluginI8n={pluginI8n}
locale={locale}
/>
))}
</div>
<h2>Client plugin item</h2>
<TestClientPlugin />
<h2 className='my-3'>Install Plugin / Package under bundle</h2>
<div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
<Card
payload={toolNotion as any}
locale={locale}
descriptionLineRows={1}
titleLeft={
<Badge className='ml-1' text={toolNotion.version} />
@ -47,7 +40,6 @@ const PluginList = async () => {
<div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
<Card
payload={toolNotion as any}
locale={locale}
descriptionLineRows={1}
installed
/>
@ -56,7 +48,7 @@ const PluginList = async () => {
<h3 className='my-1'>Install model provide</h3>
<div className='grid grid-cols-2 gap-3'>
{pluginList.map((plugin, index) => (
<ProviderCard key={index} locale={locale} payload={plugin as any} />
<ProviderCard key={index} payload={plugin as any} />
))}
</div>
@ -67,7 +59,6 @@ const PluginList = async () => {
<Card
key={index}
payload={plugin as any}
locale={locale}
footer={
<CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Tag that has very very long name', 'Productivity', 'Tag2'] : []} />
}

21
web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
Unescape Escape View File

@ -1,21 +0,0 @@
'use client'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { extensionDallE } from '@/app/components/plugins/card/card-mock'
import PluginItem from '@/app/components/plugins/plugin-item'
import I18n from '@/context/i18n'
const TestClientPlugin = () => {
const { locale } = useContext(I18n)
const { t } = useTranslation()
return (
<PluginItem
payload={extensionDallE as any}
onDelete={() => { }}
pluginI8n={t}
locale={locale}
/>
)
}
export default React.memo(TestClientPlugin)

4
web/app/components/header/account-setting/model-provider-page/index.tsx
Unescape Escape View File

@ -115,7 +115,7 @@ const ModelProviderPage = () => {
'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
)}>
{defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }}/>}
{defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
{defaultModelNotConfigured && (
<div className='flex items-center gap-1 text-text-primary system-xs-medium'>
<RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
@ -185,7 +185,7 @@ const ModelProviderPage = () => {
{!collapse && (
<div className='grid grid-cols-2 gap-2'>
{pluginList.map((plugin, index) => (
<ProviderCard key={index} installed={false} locale={locale} payload={plugin as any} />
<ProviderCard key={index} installed={false} payload={plugin as any} />
))}
</div>
)}

11
web/app/components/plugins/card/index.tsx
Unescape Escape View File

@ -1,4 +1,6 @@
'use client'
import React from 'react'
import { useContext } from 'use-context-selector'
import { RiVerifiedBadgeLine } from '@remixicon/react'
import type { Plugin } from '../types'
import Icon from '../card/base/card-icon'
@ -8,18 +10,16 @@ import OrgInfo from './base/org-info'
import Description from './base/description'
import Placeholder from './base/placeholder'
import cn from '@/utils/classnames'
import type { Locale } from '@/i18n'
import I18n from '@/context/i18n'
type Props = {
className?: string
payload: Plugin
locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
titleLeft?: React.ReactNode
installed?: boolean
hideCornerMark?: boolean
descriptionLineRows?: number
footer?: React.ReactNode
serverLocale?: Locale
isLoading?: boolean
loadingFileName?: string
}
@ -32,10 +32,11 @@ const Card = ({
hideCornerMark,
descriptionLineRows = 2,
footer,
locale,
isLoading = false,
loadingFileName,
}: Props) => {
const { locale } = useContext(I18n)
const { type, name, org, label, brief, icon } = payload
const getLocalizedText = (obj: Record<string, string> | undefined) =>
@ -80,4 +81,4 @@ const Card = ({
)
}
export default Card
export default React.memo(Card)

3
web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
Unescape Escape View File

@ -69,7 +69,6 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<Card
className='w-full'
locale={locale}
payload={status === 'uploading' ? { name: 'notion-sync' } as any : toolNotion as any}
isLoading={status === 'uploading'}
loadingFileName='notion-sync.difypkg'
@ -85,7 +84,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
: (
<>
<Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
Cancel
Cancel
</Button>
<Button
variant='primary'

8
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
Unescape Escape View File

@ -1,7 +1,6 @@
'use client'
import React, { useMemo, useState } from 'react'
import { useContext } from 'use-context-selector'
import { RiInformation2Line } from '@remixicon/react'
import Card from '../../card'
import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
@ -9,14 +8,12 @@ import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Checkbox from '@/app/components/base/checkbox'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
import I18n from '@/context/i18n'
type InstallFromMarketplaceProps = {
onClose: () => void
}
const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
const { locale } = useContext(I18n)
const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
const [isInstalling, setIsInstalling] = useState(false)
@ -40,7 +37,6 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
key={index}
installed={nextStep && !isInstalling}
payload={plugin}
locale={locale}
className='w-full'
titleLeft={
plugin.version === plugin.latest_version
@ -115,7 +111,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
: (
<>
<Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
Cancel
Cancel
</Button>
<Button
variant='primary'
@ -126,7 +122,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
mockInstall()
}}
>
Install
Install
</Button>
</>
)}

29
web/app/components/plugins/marketplace/list/index.tsx
Unescape Escape View File

@ -13,35 +13,30 @@ const List = () => {
<div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
<div className='grid grid-cols-4 gap-3 mt-2'>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -54,168 +49,144 @@ const List = () => {
<div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
<div className='grid grid-cols-4 gap-3 mt-2'>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />

20
web/app/components/plugins/plugin-item/index.tsx
Unescape Escape View File

@ -1,6 +1,9 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { Github } from '../../base/icons/src/public/common'
import Badge from '../../base/badge'
import type { Plugin } from '../types'
@ -11,26 +14,21 @@ import OrgInfo from '../card/base/org-info'
import Title from '../card/base/title'
import Action from './action'
import cn from '@/utils/classnames'
import type { Locale } from '@/i18n'
import I18n from '@/context/i18n'
type Props = {
className?: string
payload: Plugin
locale: Locale
onDelete: () => void
pluginI8n: any
isClient?: boolean
}
const PluginItem: FC<Props> = ({
className,
payload,
onDelete,
locale,
pluginI8n,
isClient,
}) => {
const t = (key: string, param?: object) => pluginI8n(`${isClient ? 'plugin.' : ''}${key}`, param)
const { locale } = useContext(I18n)
const { t } = useTranslation()
const { type, name, org, label } = payload
const hasNewVersion = payload.latest_version !== payload.version
@ -74,12 +72,12 @@ const PluginItem: FC<Props> = ({
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
<div className='flex text-text-tertiary system-xs-regular space-x-1'>
<RiLoginCircleLine className='w-4 h-4' />
<span>{t('endpointsEnabled', { num: 2 })}</span>
<span>{t('plugin.endpointsEnabled', { num: 2 })}</span>
</div>
</div>
<div className='flex items-center'>
<a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('from')}</a>
<a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</a>
<div className='flex items-center space-x-0.5 text-text-secondary'>
<Github className='ml-1 w-3 h-3' />
<div className='system-2xs-semibold-uppercase'>GitHub</div>
@ -91,4 +89,4 @@ const PluginItem: FC<Props> = ({
)
}
export default PluginItem
export default React.memo(PluginItem)

7
web/app/components/plugins/provider-card.tsx
Unescape Escape View File

@ -1,4 +1,6 @@
'use client'
import React from 'react'
import { useContext } from 'use-context-selector'
import type { FC } from 'react'
import Link from 'next/link'
import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
@ -9,22 +11,21 @@ import Icon from './card/base/card-icon'
import Title from './card/base/title'
import DownloadCount from './card/base/download-count'
import Button from '@/app/components/base/button'
import type { Locale } from '@/i18n'
import cn from '@/utils/classnames'
import I18n from '@/context/i18n'
type Props = {
className?: string
locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
payload: Plugin
installed?: boolean
}
const ProviderCard: FC<Props> = ({
className,
locale,
payload,
installed = true,
}) => {
const { locale } = useContext(I18n)
const { org, label } = payload
return (

4
web/app/components/plugins/update-plugin/index.tsx
Unescape Escape View File

@ -1,14 +1,12 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { useContext } from 'use-context-selector'
import { RiInformation2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Card from '@/app/components/plugins/card'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
import I18n from '@/context/i18n'
import { toolNotion } from '@/app/components/plugins/card/card-mock'
const i18nPrefix = 'plugin.upgrade'
@ -26,7 +24,6 @@ enum UploadStep {
const UpdatePluginModal: FC<Props> = ({
onHide,
}) => {
const { locale } = useContext(I18n)
const { t } = useTranslation()
const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
const configBtnText = useMemo(() => {
@ -62,7 +59,6 @@ const UpdatePluginModal: FC<Props> = ({
<Card
installed={uploadStep === UploadStep.installed}
payload={toolNotion as any}
locale={locale}
className='w-full'
titleLeft={
<>

29
web/app/components/tools/marketplace.tsx
Unescape Escape View File

@ -45,35 +45,30 @@ const Marketplace = ({
<div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
<div className='grid grid-cols-4 gap-3 mt-2'>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -86,168 +81,144 @@ const Marketplace = ({
<div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
<div className='grid grid-cols-4 gap-3 mt-2'>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
locale={locale}
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />

1
web/app/components/tools/provider-list.tsx
Unescape Escape View File

@ -112,7 +112,6 @@ const ProviderList = () => {
currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
)}
hideCornerMark
locale={language}
payload={{
...collection,
brief: collection.description,

Write Preview
Loading…
Cancel
Save