feat(marketplace): add batch plugin selection

Author: FinleyGe

packages/web/components/core/plugin/tool/BatchOperationBar.tsx

@@ -0,0 +1,75 @@
+import { Box, Button, Checkbox, Flex } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import MyTooltip from '../../../common/MyTooltip';
+
+type BatchOperationBarProps = {
+  selectedCount: number;
+  isAllSelected: boolean;
+  isIndeterminate?: boolean;
+  actionLabel: string;
+  onToggleSelectAll: () => void;
+  onAction: () => void | Promise<void>;
+  isActionLoading?: boolean;
+  isActionDisabled?: boolean;
+};
+
+/**
+ * 插件市场卡片批量选择后的固定操作栏。
+ * 只负责呈现选择计数、全选入口和当前页面注入的批量动作。
+ */
+const BatchOperationBar = ({
+  selectedCount,
+  isAllSelected,
+  isIndeterminate,
+  actionLabel,
+  onToggleSelectAll,
+  onAction,
+  isActionLoading,
+  isActionDisabled
+}: BatchOperationBarProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex
+      position={'absolute'}
+      left={0}
+      right={0}
+      bottom={0}
+      zIndex={20}
+      h={'64px'}
+      px={8}
+      alignItems={'center'}
+      gap={6}
+      borderTop={'1px solid'}
+      borderColor={'myGray.200'}
+      bg={'rgba(255,255,255,0.96)'}
+      backdropFilter={'blur(8px)'}
+      boxShadow={'0 -4px 12px rgba(19, 51, 107, 0.06)'}
+    >
+      <Flex alignItems={'center'} gap={2}>
+        <MyTooltip label={t('common:Select_all')}>
+          <Checkbox
+            size={'lg'}
+            isChecked={isAllSelected}
+            isIndeterminate={isIndeterminate}
+            onChange={onToggleSelectAll}
+          />
+        </MyTooltip>
+        <Box fontSize={'sm'} color={'myGray.700'}>
+          {t('common:select_count_num', { num: selectedCount })}
+        </Box>
+      </Flex>
+      <Button
+        size={'sm'}
+        variant={'primary'}
+        isLoading={isActionLoading}
+        isDisabled={isActionDisabled}
+        onClick={onAction}
+      >
+        {actionLabel}
+      </Button>
+    </Flex>
+  );
+};
+
+export default BatchOperationBar;

packages/web/components/core/plugin/tool/ToolCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, HStack } from '@chakra-ui/react';
+import { Box, Button, Checkbox, Flex, HStack } from '@chakra-ui/react';
 import Avatar from '../../../common/Avatar';
 import MyBox from '../../../common/MyBox';
 import React, { useMemo, useRef, useState, useEffect } from 'react';
@@ -46,7 +46,10 @@ const ToolCard = ({
   onUpdate,
   onClickCard,
   showActionButton = true,
-  variant = 'default'
+  variant = 'default',
+  showSelectCheckbox = false,
+  isSelected = false,
+  onToggleSelect
 }: {
   item: ToolCardItemType;
   systemTitle?: string;
@@ -59,6 +62,9 @@ const ToolCard = ({
   onClickCard?: () => void;
   showActionButton?: boolean;
   variant?: 'default' | 'marketplace';
+  showSelectCheckbox?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: () => void;
 }) => {
   const { t, i18n } = useTranslation();
   const tagsContainerRef = useRef<HTMLDivElement>(null);
@@ -143,6 +149,8 @@ const ToolCard = ({
     }
   }, [isMarketplaceVariant, item.installed, item.status, mode, t]);
 
+  const hasSelectCheckbox = !!onToggleSelect;
+
   return (
     <MyBox
       key={item.id}
@@ -192,16 +200,57 @@ const ToolCard = ({
           : {}),
         '& .download-count': {
           display: 'none'
-        }
+        },
+        ...(hasSelectCheckbox
+          ? {
+              '& .tool-card-select-checkbox': {
+                display: 'flex'
+              }
+            }
+          : {})
       }}
     >
+      {hasSelectCheckbox && (
+        <Flex
+          className="tool-card-select-checkbox"
+          position={'absolute'}
+          top={isMarketplaceVariant ? '17px' : 4}
+          right={isMarketplaceVariant ? '17px' : 4}
+          zIndex={2}
+          display={showSelectCheckbox || isSelected ? 'flex' : 'none'}
+          alignItems={'center'}
+          justifyContent={'center'}
+          bg={'white'}
+          borderRadius={'4px'}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <Checkbox
+            isChecked={isSelected}
+            onChange={(e) => {
+              e.stopPropagation();
+              onToggleSelect?.();
+            }}
+          />
+        </Flex>
+      )}
+
       {/* Update badge in top-right corner */}
       {item.update && mode === 'admin' && !item.isDebug && (
         <Flex
           alignItems="center"
           position={'absolute'}
           top={isMarketplaceVariant ? '17px' : 4}
-          right={isMarketplaceVariant ? '17px' : 4}
+          right={
+            hasSelectCheckbox
+              ? isMarketplaceVariant
+                ? '45px'
+                : 12
+              : isMarketplaceVariant
+                ? '17px'
+                : 4
+          }
           px={2}
           py={0.5}
           bg={'rgb(255, 247, 237)'}

packages/web/i18n/en/app.json

@@ -401,6 +401,8 @@
   "toolkit_add_resource": "Add resources",
   "toolkit_basic_config": "Basic Configuration",
   "toolkit_basic_info": "Basic Info",
+  "toolkit_batch_install": "Batch Install",
+  "toolkit_batch_install_update": "Batch Install/Update",
   "toolkit_batch_update": "Batch Update",
   "toolkit_call_points_label": "Call Points",
   "toolkit_community": "Community",

packages/web/i18n/zh-CN/app.json

@@ -401,6 +401,8 @@
   "toolkit_add_resource": "添加插件",
   "toolkit_basic_config": "基础配置",
   "toolkit_basic_info": "基础信息",
+  "toolkit_batch_install": "批量安装",
+  "toolkit_batch_install_update": "批量安装/更新",
   "toolkit_batch_update": "批量更新",
   "toolkit_call_points_label": "调用积分",
   "toolkit_community": "社区",

packages/web/i18n/zh-Hant/app.json

@@ -391,6 +391,8 @@
   "toolkit_add_resource": "添加資源",
   "toolkit_basic_config": "基礎配置",
   "toolkit_basic_info": "基礎資訊",
+  "toolkit_batch_install": "批次安裝",
+  "toolkit_batch_install_update": "批次安裝/更新",
   "toolkit_batch_update": "批次更新",
   "toolkit_call_points_label": "調用積分",
   "toolkit_community": "社區",