mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-14 09:36:13 +08:00
feat: plugin homepage
This commit is contained in:
Yi
parent
21193c2fbf
commit
d7d7281c93
@ -5,17 +5,21 @@ import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
RiBugLine,
|
||||
RiClipboardLine,
|
||||
RiDragDropLine,
|
||||
RiEqualizer2Line,
|
||||
} from '@remixicon/react'
|
||||
import InstallPluginDropdown from './InstallPluginDropdown'
|
||||
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import Button from '@/app/components/base/button'
|
||||
import TabSlider from '@/app/components/base/tab-slider'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
|
||||
const Container = () => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowPluginSettingModal } = useModalContext()
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
@ -56,14 +60,24 @@ const Container = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-0.5 self-stretch'>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>Port</span>
|
||||
</div>
|
||||
{['Port', 'Key'].map((label, index) => (
|
||||
<div key={label} className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
|
||||
<div className='flex justify-center items-center gap-0.5'>
|
||||
<span className='system-xs-medium text-text-secondary'>
|
||||
{index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
|
||||
</span>
|
||||
<ActionButton>
|
||||
<RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
|
||||
rounded-xl bg-components-tooltip-bg shadows-shadow-lg'
|
||||
rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
@ -71,7 +85,12 @@ const Container = () => {
|
||||
<RiBugLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
|
||||
<Button
|
||||
className='w-full h-full p-2 text-components-button-secondary-text group'
|
||||
onClick={() => {
|
||||
setShowPluginSettingModal()
|
||||
}}
|
||||
>
|
||||
<RiEqualizer2Line className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ import Button from '@/app/components/base/button'
|
||||
import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
|
||||
import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import { Github } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const InstallPluginDropdown = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
@ -26,7 +27,7 @@ const InstallPluginDropdown = () => {
|
||||
return (
|
||||
<div className="relative" ref={menuRef}>
|
||||
<Button
|
||||
className='w-full h-full p-2 text-components-button-secondary-text'
|
||||
className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<RiAddLine className='w-4 h-4' />
|
||||
|
||||
81
web/app/components/plugins/plugin-setting/modal.tsx
Normal file
81
web/app/components/plugins/plugin-setting/modal.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
enum PluginManagementOption {
|
||||
Everyone = 'Everyone',
|
||||
Admins = 'Admins',
|
||||
NoOne = 'No one',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
onHide: () => void
|
||||
}
|
||||
|
||||
const PluginSettingModal: FC<Props> = ({
|
||||
show,
|
||||
onHide,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [manageOption, setManageOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
|
||||
const [debugOption, setDebugOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isShow={show}
|
||||
onClose={onHide}
|
||||
closable
|
||||
className='!p-0 w-[420px]'
|
||||
>
|
||||
<div className='flex flex-col items-start w-[420px] rounded-2xl border border-components-panel-border bg-components-panel-bg shadows-shadow-xl'>
|
||||
<div className='flex pt-6 pb-3 pl-6 pr-14 items-start gap-2 self-stretch'>
|
||||
<span className='self-stretch text-text-primary title-2xl-semi-bold'>Plugin Preferences</span>
|
||||
</div>
|
||||
<div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
|
||||
{[
|
||||
{ title: 'Who can install and manage plugins?', key: 'manage', value: manageOption, setValue: setManageOption },
|
||||
{ title: 'Who can debug plugins?', key: 'debug', value: debugOption, setValue: setDebugOption },
|
||||
].map(({ title, key, value, setValue }) => (
|
||||
<div key={key} className='flex flex-col items-start gap-1 self-stretch'>
|
||||
<div className='flex m-h-6 items-center gap-0.5'>
|
||||
<span className='text-text-secondary system-sm-semibold'>{title}</span>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 justify-between w-full'>
|
||||
{Object.values(PluginManagementOption).map(option => (
|
||||
<OptionCard
|
||||
key={option}
|
||||
title={option}
|
||||
onSelect={() => setValue(option)}
|
||||
selected={value === option}
|
||||
className="flex-1"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex h-[76px] p-6 pt-5 justify-end items-center gap-2 self-stretch'>
|
||||
<Button
|
||||
className='min-w-[72px]'
|
||||
onClick={onHide}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className='min-w-[72px]'
|
||||
variant={'primary'}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(PluginSettingModal)
|
||||
@ -5,6 +5,7 @@ import { useCallback, useState } from 'react'
|
||||
import { createContext, useContext, useContextSelector } from 'use-context-selector'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import AccountSetting from '@/app/components/header/account-setting'
|
||||
import PluginSettingModal from '@/app/components/plugins/plugin-setting/modal'
|
||||
import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
|
||||
import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
|
||||
import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
|
||||
@ -46,6 +47,7 @@ export type LoadBalancingEntryModalType = ModelModalType & {
|
||||
}
|
||||
export type ModalContextState = {
|
||||
setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<string> | null>>
|
||||
setShowPluginSettingModal: () => void
|
||||
setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
|
||||
setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
|
||||
setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
|
||||
@ -57,6 +59,7 @@ export type ModalContextState = {
|
||||
}
|
||||
const ModalContext = createContext<ModalContextState>({
|
||||
setShowAccountSettingModal: () => { },
|
||||
setShowPluginSettingModal: () => { },
|
||||
setShowApiBasedExtensionModal: () => { },
|
||||
setShowModerationSettingModal: () => { },
|
||||
setShowExternalDataToolModal: () => { },
|
||||
@ -92,6 +95,7 @@ export const ModalContextProvider = ({
|
||||
const router = useRouter()
|
||||
const [showPricingModal, setShowPricingModal] = useState(searchParams.get('show-pricing') === '1')
|
||||
const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
|
||||
const [showPluginSettingModal, setShowPluginSettingModal] = useState(false)
|
||||
const handleCancelAccountSettingModal = () => {
|
||||
setShowAccountSettingModal(null)
|
||||
if (showAccountSettingModal?.onCancelCallback)
|
||||
@ -167,6 +171,7 @@ export const ModalContextProvider = ({
|
||||
return (
|
||||
<ModalContext.Provider value={{
|
||||
setShowAccountSettingModal,
|
||||
setShowPluginSettingModal: () => setShowPluginSettingModal(true),
|
||||
setShowApiBasedExtensionModal,
|
||||
setShowModerationSettingModal,
|
||||
setShowExternalDataToolModal,
|
||||
@ -187,6 +192,15 @@ export const ModalContextProvider = ({
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!!showPluginSettingModal && (
|
||||
<PluginSettingModal
|
||||
show={showPluginSettingModal}
|
||||
onHide={() => setShowPluginSettingModal(false)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!!showApiBasedExtensionModal && (
|
||||
<ApiBasedExtensionModal
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user