mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-16 14:05:58 +08:00
chore: installation progress bar
This commit is contained in:
parent
1787c5c93f
commit
28f7bbf83a
@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
|
|||||||
import {
|
import {
|
||||||
RiDragDropLine,
|
RiDragDropLine,
|
||||||
RiEqualizer2Line,
|
RiEqualizer2Line,
|
||||||
|
RiInstallFill,
|
||||||
} from '@remixicon/react'
|
} from '@remixicon/react'
|
||||||
import { useBoolean } from 'ahooks'
|
import { useBoolean } from 'ahooks'
|
||||||
import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
|
import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
|
||||||
@ -47,6 +48,8 @@ const PluginPage = ({
|
|||||||
const [currentFile, setCurrentFile] = useState<File | null>(null)
|
const [currentFile, setCurrentFile] = useState<File | null>(null)
|
||||||
const containerRef = usePluginPageContext(v => v.containerRef)
|
const containerRef = usePluginPageContext(v => v.containerRef)
|
||||||
const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
|
const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
|
||||||
|
const [installed, total] = [2, 3] // Replace this with the actual progress
|
||||||
|
const progressPercentage = (installed / total) * 100
|
||||||
const options = useMemo(() => {
|
const options = useMemo(() => {
|
||||||
return [
|
return [
|
||||||
{ value: 'plugins', text: t('common.menus.plugins') },
|
{ value: 'plugins', text: t('common.menus.plugins') },
|
||||||
@ -91,6 +94,22 @@ const PluginPage = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-shrink-0 items-center gap-1'>
|
<div className='flex flex-shrink-0 items-center gap-1'>
|
||||||
|
<div className='relative'>
|
||||||
|
<Button
|
||||||
|
className='relative overflow-hidden border !border-[rgba(178,202,255,1)] !bg-[rgba(255,255,255,0.95)] cursor-default'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='absolute left-0 top-0 h-full bg-state-accent-active'
|
||||||
|
style={{ width: `${progressPercentage}%` }}
|
||||||
|
></div>
|
||||||
|
<div className='relative z-10 flex items-center'>
|
||||||
|
<RiInstallFill className='w-4 h-4 text-text-accent' />
|
||||||
|
<div className='flex px-0.5 justify-center items-center gap-1'>
|
||||||
|
<span className='text-text-accent system-sm-medium'>{activeTab === 'plugins' ? `Installing ${installed}/${total} plugins` : `${installed}/${total}`}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
{canManagement && (
|
{canManagement && (
|
||||||
<InstallPluginDropdown />
|
<InstallPluginDropdown />
|
||||||
)}
|
)}
|
||||||
|
30
web/app/components/plugins/plugin-page/list/index.tsx
Normal file
30
web/app/components/plugins/plugin-page/list/index.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useContext } from 'use-context-selector'
|
||||||
|
import PluginItem from '../../plugin-item'
|
||||||
|
import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
|
||||||
|
import I18n from '@/context/i18n'
|
||||||
|
|
||||||
|
const PluginList = () => {
|
||||||
|
const { locale } = useContext(I18n)
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='pb-3 bg-white'>
|
||||||
|
<div>
|
||||||
|
<div className='grid grid-cols-2 gap-3'>
|
||||||
|
{pluginList.map((plugin, index) => (
|
||||||
|
<PluginItem
|
||||||
|
key={index}
|
||||||
|
payload={plugin as any}
|
||||||
|
onDelete={() => {}}
|
||||||
|
pluginI8n={t}
|
||||||
|
locale={locale}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default PluginList
|
@ -1,16 +1,18 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
|
import List from './list'
|
||||||
|
|
||||||
const PluginsPanel = () => {
|
const PluginsPanel = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
|
<div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
|
||||||
<div className='h-px self-stretch bg-divider-subtle'></div>
|
<div className='h-px self-stretch bg-divider-subtle'></div>
|
||||||
<div className='flex items-center gap-2 self-stretch'>
|
<div className='flex items-center gap-2 self-stretch'>
|
||||||
{/* Filter goes here */}
|
{/* Filters go here */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
|
<div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
|
||||||
{/* Plugin cards go here */}
|
<List />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user