From e1a78e8ff918113f0f6a56772917105f416b920d Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Fri, 15 Aug 2025 19:11:49 +0800 Subject: [PATCH] feat: tag debugging plugins in webui --- web/package.json | 1 + web/src/app/home/plugins/page.tsx | 51 +++- .../plugins/plugin-installed/PluginCardVO.ts | 3 + .../PluginInstalledComponent.tsx | 1 + .../plugin-card/PluginCardComponent.tsx | 8 + web/src/app/infra/entities/plugin/index.ts | 1 + web/src/components/ui/dropdown-menu.tsx | 257 ++++++++++++++++++ web/src/i18n/locales/en-US.ts | 2 + web/src/i18n/locales/ja-JP.ts | 2 + web/src/i18n/locales/zh-Hans.ts | 2 + 10 files changed, 314 insertions(+), 14 deletions(-) create mode 100644 web/src/components/ui/dropdown-menu.tsx diff --git a/web/package.json b/web/package.json index 17516ac4..74967598 100644 --- a/web/package.json +++ b/web/package.json @@ -22,6 +22,7 @@ "@hookform/resolvers": "^5.0.1", "@radix-ui/react-checkbox": "^1.3.1", "@radix-ui/react-dialog": "^1.1.14", + "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-label": "^2.1.6", "@radix-ui/react-popover": "^1.1.14", diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx index 9935c0db..2d3ce125 100644 --- a/web/src/app/home/plugins/page.tsx +++ b/web/src/app/home/plugins/page.tsx @@ -7,7 +7,13 @@ import PluginSortDialog from '@/app/home/plugins/plugin-sort/PluginSortDialog'; import styles from './plugins.module.css'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Button } from '@/components/ui/button'; -import { PlusIcon } from 'lucide-react'; +import { PlusIcon, ChevronDownIcon, UploadIcon, StoreIcon } from 'lucide-react'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; import { Dialog, DialogContent, @@ -32,6 +38,7 @@ export default function PluginConfigPage() { const { t } = useTranslation(); const [modalOpen, setModalOpen] = useState(false); const [sortModalOpen, setSortModalOpen] = useState(false); + const [activeTab, setActiveTab] = useState('installed'); const [pluginInstallStatus, setPluginInstallStatus] = useState(PluginInstallStatus.WAIT_INPUT); const [installError, setInstallError] = useState(null); @@ -83,7 +90,7 @@ export default function PluginConfigPage() { return (
- +
@@ -104,18 +111,34 @@ export default function PluginConfigPage() { > {t('plugins.arrange')} - + + + + + + { + // TODO: 本地上传功能待实现 + console.log('本地上传功能待实现'); + }} + > + + {t('plugins.uploadLocal')} + + { + setActiveTab('market'); + }} + > + + {t('plugins.marketplace')} + + +
diff --git a/web/src/app/home/plugins/plugin-installed/PluginCardVO.ts b/web/src/app/home/plugins/plugin-installed/PluginCardVO.ts index 0e880543..4e1b68f2 100644 --- a/web/src/app/home/plugins/plugin-installed/PluginCardVO.ts +++ b/web/src/app/home/plugins/plugin-installed/PluginCardVO.ts @@ -9,6 +9,7 @@ export interface IPluginCardVO { tools: object[]; event_handlers: object; repository: string; + debug: boolean; } export class PluginCardVO implements IPluginCardVO { @@ -18,6 +19,7 @@ export class PluginCardVO implements IPluginCardVO { version: string; enabled: boolean; priority: number; + debug: boolean; status: string; tools: object[]; event_handlers: object; @@ -34,5 +36,6 @@ export class PluginCardVO implements IPluginCardVO { this.status = prop.status; this.tools = prop.tools; this.version = prop.version; + this.debug = prop.debug; } } diff --git a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx index b108b312..3c496c1b 100644 --- a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx @@ -50,6 +50,7 @@ const PluginInstalledComponent = forwardRef( zh_Hans: '', }, ), + debug: plugin.debug, enabled: plugin.enabled, name: plugin.manifest.manifest.metadata.name, version: plugin.manifest.manifest.metadata.version ?? '', diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx index 119a82bb..b83720dc 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx @@ -58,6 +58,14 @@ export default function PluginCardComponent({ v{cardVO.version} + {cardVO.debug && ( + + {t('plugins.debugging')} + + )} diff --git a/web/src/app/infra/entities/plugin/index.ts b/web/src/app/infra/entities/plugin/index.ts index 96469107..ba239d0a 100644 --- a/web/src/app/infra/entities/plugin/index.ts +++ b/web/src/app/infra/entities/plugin/index.ts @@ -7,6 +7,7 @@ export interface Plugin { manifest: { manifest: ComponentManifest; }; + debug: boolean; enabled: boolean; components: { component_config: object; diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx new file mode 100644 index 00000000..26027549 --- /dev/null +++ b/web/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +'use client'; + +import * as React from 'react'; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; + +import { cn } from '@/lib/utils'; + +function DropdownMenu({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuItem({ + className, + inset, + variant = 'default', + ...props +}: React.ComponentProps & { + inset?: boolean; + variant?: 'default' | 'destructive'; +}) { + return ( + + ); +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + ); +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<'span'>) { + return ( + + ); +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + {children} + + + ); +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +}; diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts index 0e171e4b..032ee70c 100644 --- a/web/src/i18n/locales/en-US.ts +++ b/web/src/i18n/locales/en-US.ts @@ -179,6 +179,8 @@ const enUS = { eventCount: 'Events: {{count}}', toolCount: 'Tools: {{count}}', starCount: 'Stars: {{count}}', + uploadLocal: 'Upload Local', + debugging: 'Debugging', }, pipelines: { title: 'Pipelines', diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts index f1783a35..e17a5988 100644 --- a/web/src/i18n/locales/ja-JP.ts +++ b/web/src/i18n/locales/ja-JP.ts @@ -179,6 +179,8 @@ const jaJP = { eventCount: 'イベント：{{count}}', toolCount: 'ツール：{{count}}', starCount: 'スター：{{count}}', + uploadLocal: 'ローカルアップロード', + debugging: 'デバッグ中', }, pipelines: { title: 'パイプライン', diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts index 2a960131..3a723e12 100644 --- a/web/src/i18n/locales/zh-Hans.ts +++ b/web/src/i18n/locales/zh-Hans.ts @@ -175,6 +175,8 @@ const zhHans = { eventCount: '事件：{{count}}', toolCount: '工具：{{count}}', starCount: '星标：{{count}}', + uploadLocal: '本地上传', + debugging: '调试中', }, pipelines: { title: '流水线',