Support batch binding and package deletion UI

Author: sunnylqm

src/pages/manage/components/bind-package.tsx

@@ -36,6 +36,17 @@ type DepChangeSummary = {
 
 type DepChangeFilters = Record<DepChangeType, boolean>;
 
+type PublishPackage = {
+  id: number;
+  name: string;
+  deps?: Record<string, string>;
+};
+
+type DepsChangePackage = {
+  pkg: PublishPackage;
+  changes: DepChangeRow[];
+};
+
 function getDepsChangeSummary(changes: DepChangeRow[]): DepChangeSummary {
   return changes.reduce(
     (acc, item) => {
@@ -304,44 +315,131 @@ const BindPackage = ({
     (p) => !matchedPackageIds.has(p.id),
   );
 
-  const publishToPackage = (
-    pkg: { id: number; name: string; deps?: Record<string, string> },
-    rollout?: number,
-  ) => {
-    const publish = () =>
-      api.upsertBinding({
+  const publishToPackages = (pkgs: PublishPackage[], rollout?: number) => {
+    if (pkgs.length === 0) {
+      return;
+    }
+
+    const publish = () => {
+      if (pkgs.length === 1) {
+        return api.upsertBinding({
+          appId,
+          packageId: pkgs[0].id,
+          versionId,
+          rollout,
+        });
+      }
+
+      return api.upsertBindings({
         appId,
-        packageId: pkg.id,
+        packageIds: pkgs.map((pkg) => pkg.id),
         versionId,
         rollout,
       });
+    };
 
-    const changes = getDepsChanges(pkg.deps, versionDeps);
-    if (!changes || changes.length === 0) {
+    const depsChangedPackages = pkgs.reduce<DepsChangePackage[]>((acc, pkg) => {
+      const changes = getDepsChanges(pkg.deps, versionDeps);
+      if (changes?.length) {
+        acc.push({ pkg, changes });
+      }
+      return acc;
+    }, []);
+    if (depsChangedPackages.length === 0) {
       void publish();
       return;
     }
 
+    const content =
+      depsChangedPackages.length === 1 ? (
+        <DepsChangeConfirmContent
+          packageName={depsChangedPackages[0].pkg.name}
+          versionDisplayName={versionName || versionId}
+          changes={depsChangedPackages[0].changes}
+        />
+      ) : (
+        <div className="max-h-96 space-y-6 overflow-y-auto pr-2">
+          {depsChangedPackages.map(({ pkg, changes }) => (
+            <DepsChangeConfirmContent
+              key={pkg.id}
+              packageName={pkg.name}
+              versionDisplayName={versionName || versionId}
+              changes={changes}
+            />
+          ))}
+        </div>
+      );
+
     Modal.confirm({
       title: '检测到依赖变化，确认继续发布？',
       maskClosable: true,
       okButtonProps: { danger: true },
       okText: '继续发布',
       cancelText: '取消',
       width: 820,
-      content: (
-        <DepsChangeConfirmContent
-          packageName={pkg.name}
-          versionDisplayName={versionName || versionId}
-          changes={changes}
-        />
-      ),
+      content,
       async onOk() {
         await publish();
       },
     });
   };
 
+  const publishToPackage = (pkg: PublishPackage, rollout?: number) =>
+    publishToPackages([pkg], rollout);
+
+  const publishMenuItems: MenuProps['items'] = [];
+  if (availablePackages.length > 1) {
+    publishMenuItems.push(
+      {
+        key: 'all',
+        label: '全部可用原生包',
+        children: [
+          {
+            key: 'all-full',
+            label: '全量',
+            icon: <CloudDownloadOutlined />,
+            onClick: () => publishToPackages(availablePackages),
+          },
+          {
+            key: 'all-gray',
+            label: '灰度',
+            icon: <ExperimentOutlined />,
+            children: [1, 2, 5, 10, 20, 50].map((percentage) => ({
+              key: `all-gray-${percentage}`,
+              label: `${percentage}%`,
+              onClick: () => publishToPackages(availablePackages, percentage),
+            })),
+          },
+        ],
+      },
+      { type: 'divider' },
+    );
+  }
+  publishMenuItems.push(
+    ...availablePackages.map((p) => ({
+      key: `pkg-${p.id}`,
+      label: p.name,
+      children: [
+        {
+          key: `pkg-${p.id}-full`,
+          label: '全量',
+          icon: <CloudDownloadOutlined />,
+          onClick: () => publishToPackage(p),
+        },
+        {
+          key: `pkg-${p.id}-gray`,
+          label: '灰度',
+          icon: <ExperimentOutlined />,
+          children: [1, 2, 5, 10, 20, 50].map((percentage) => ({
+            key: `pkg-${p.id}-gray-${percentage}`,
+            label: `${percentage}%`,
+            onClick: () => publishToPackage(p, percentage),
+          })),
+        },
+      ],
+    })),
+  );
+
   const bindedPackages = (() => {
     const result = [];
     if (matchedBindings.length === 0 || allPackages.length === 0) return null;
@@ -432,28 +530,7 @@ const BindPackage = ({
       {availablePackages.length !== 0 && (
         <Dropdown
           menu={{
-            items: availablePackages.map((p) => ({
-              key: `pkg-${p.id}`,
-              label: p.name,
-              children: [
-                {
-                  key: `pkg-${p.id}-full`,
-                  label: '全量',
-                  icon: <CloudDownloadOutlined />,
-                  onClick: () => publishToPackage(p),
-                },
-                {
-                  key: `pkg-${p.id}-gray`,
-                  label: '灰度',
-                  icon: <ExperimentOutlined />,
-                  children: [1, 2, 5, 10, 20, 50].map((percentage) => ({
-                    key: `pkg-${p.id}-gray-${percentage}`,
-                    label: `${percentage}%`,
-                    onClick: () => publishToPackage(p, percentage),
-                  })),
-                },
-              ],
-            })),
+            items: publishMenuItems,
           }}
           className="ant-typography-edit"
         >

src/pages/manage/components/package-list.tsx

@@ -7,6 +7,7 @@ import {
 } from '@ant-design/icons';
 import {
   Button,
+  Checkbox,
   Col,
   Form,
   Input,
@@ -18,6 +19,7 @@ import {
   Tag,
   Typography,
 } from 'antd';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { rootRouterPath } from '@/router';
 import { api } from '@/services/api';
@@ -32,32 +34,134 @@ const PackageList = ({
   dataSource?: Package[];
   loading?: boolean;
 }) => {
-  const { app, packageTimestampWarnings } = useManageContext();
+  const { app, appId, packageTimestampWarnings } = useManageContext();
+  const [selectedPackageIds, setSelectedPackageIds] = useState<number[]>([]);
+  const selectedPackageIdSet = useMemo(
+    () => new Set(selectedPackageIds),
+    [selectedPackageIds],
+  );
+  const visiblePackageIds = useMemo(
+    () => dataSource?.map((item) => item.id) ?? [],
+    [dataSource],
+  );
+  const selectedPackages = useMemo(
+    () => dataSource?.filter((item) => selectedPackageIdSet.has(item.id)) ?? [],
+    [dataSource, selectedPackageIdSet],
+  );
+  const selectedVisibleCount = visiblePackageIds.filter((id) =>
+    selectedPackageIdSet.has(id),
+  ).length;
+  const allVisibleSelected =
+    visiblePackageIds.length > 0 &&
+    selectedVisibleCount === visiblePackageIds.length;
+  const hasSelectedVisiblePackages = selectedPackages.length > 0;
   const realtimeMetricsPath = app?.appKey
     ? `${rootRouterPath.realtimeMetrics}?${new URLSearchParams({
         appKey: app.appKey,
         attribute: 'packageVersion_buildTime',
       }).toString()}`
     : undefined;
 
+  const togglePackageSelection = (packageId: number, checked: boolean) => {
+    setSelectedPackageIds((prev) => {
+      if (checked) {
+        return [...new Set([...prev, packageId])];
+      }
+      return prev.filter((id) => id !== packageId);
+    });
+  };
+
+  const toggleAllVisiblePackages = (checked: boolean) => {
+    setSelectedPackageIds((prev) => {
+      if (checked) {
+        return [...new Set([...prev, ...visiblePackageIds])];
+      }
+      return prev.filter((id) => !visiblePackageIds.includes(id));
+    });
+  };
+
   return (
-    <List
-      loading={loading}
-      className="packages"
-      size="small"
-      dataSource={dataSource}
-      renderItem={(item) => (
-        <Item
-          item={item}
-          warningTimestamps={packageTimestampWarnings.get(item.id) ?? []}
-          realtimeMetricsPath={realtimeMetricsPath}
-        />
+    <>
+      {visiblePackageIds.length > 0 && (
+        <div className="mb-2 flex items-center gap-2 px-2">
+          <Checkbox
+            checked={allVisibleSelected}
+            indeterminate={selectedVisibleCount > 0 && !allVisibleSelected}
+            onChange={({ target }) => {
+              toggleAllVisiblePackages(target.checked);
+            }}
+          />
+          {hasSelectedVisiblePackages && (
+            <Button
+              danger
+              size="small"
+              icon={<DeleteOutlined />}
+              onClick={() =>
+                removeSelectedPackages(selectedPackages, appId, () => {
+                  setSelectedPackageIds((prev) =>
+                    prev.filter(
+                      (id) => !selectedPackages.some((item) => item.id === id),
+                    ),
+                  );
+                })
+              }
+            >
+              删除
+            </Button>
+          )}
+        </div>
       )}
-    />
+      <List
+        loading={loading}
+        className="packages"
+        size="small"
+        dataSource={dataSource}
+        renderItem={(item) => (
+          <Item
+            item={item}
+            selected={selectedPackageIdSet.has(item.id)}
+            onSelectedChange={(checked) =>
+              togglePackageSelection(item.id, checked)
+            }
+            warningTimestamps={packageTimestampWarnings.get(item.id) ?? []}
+            realtimeMetricsPath={realtimeMetricsPath}
+          />
+        )}
+      />
+    </>
   );
 };
 export default PackageList;
 
+function removeSelectedPackages(
+  items: Package[],
+  appId: number,
+  onSuccess: () => void,
+) {
+  if (items.length === 0) {
+    return;
+  }
+  Modal.confirm({
+    title: '删除所选原生包：',
+    content: (
+      <div className="max-h-48 overflow-y-auto">
+        {items.map((item) => (
+          <div key={item.id}>{item.name}</div>
+        ))}
+      </div>
+    ),
+    maskClosable: true,
+    okButtonProps: { danger: true },
+    async onOk() {
+      await api.deletePackages({
+        appId,
+        packageIds: items.map((item) => item.id),
+      });
+      onSuccess();
+    },
+  });
+}
+
 function remove(item: Package, appId: number) {
   Modal.confirm({
     title: `删除后无法恢复，确定删除原生包“${item.name}”？`,
@@ -140,10 +244,14 @@ const TimestampWarning = ({
 
 const Item = ({
   item,
+  selected,
+  onSelectedChange,
   warningTimestamps,
   realtimeMetricsPath,
 }: {
   item: Package;
+  selected: boolean;
+  onSelectedChange: (checked: boolean) => void;
   warningTimestamps: string[];
   realtimeMetricsPath?: string;
 }) => {
@@ -155,6 +263,11 @@ const Item = ({
         <List.Item.Meta
           title={
             <Row align="middle">
+              <Checkbox
+                className="mr-2"
+                checked={selected}
+                onChange={({ target }) => onSelectedChange(target.checked)}
+              />
               <Col flex={1}>
                 <div className="flex flex-wrap items-center">
                   <span>{item.name}</span>