Feat/bindings (#10)

* new bindings

* feat: integrate bindings into manage context and update binding logic

- Added bindings to the ManageContext to manage package bindings.
- Updated BindPackage component to utilize bindings for rollout configuration.
- Modified types to include packageId in the Binding interface.
- Refactored useBindings hook to streamline binding retrieval.

* fix sider

* deps

* migrate to bindings

* fix binding

* update dependencies and fix type references

- Bump @rsbuild/core to version 1.6.1 and @biomejs/biome to version 2.3.3 in package.json and bun.lock.
- Change type definition from 'version' to 'versions' in Package interface for better clarity.
- Update BindPackage component to reference 'versions' for package version checks.
- Modify request service to use localhost for development.

* update

* improve error msg

* Update BindPackage component labels for clarity

- Changed label from "取消绑定" to "取消发布" for unpublish action.
- Updated button text from "绑定" to "发布" to reflect the new context.

Author: sunnylqm

bun.lock

@@ -8,32 +8,32 @@
     "lint": "tsc --noEmit & biome check --write ."
   },
   "dependencies": {
-    "@ant-design/icons": "^6.0.2",
+    "@ant-design/icons": "^6.1.0",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
-    "@rsbuild/core": "^1.5.13",
+    "@rsbuild/core": "^1.6.1",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@rsbuild/plugin-svgr": "^1.2.2",
-    "@tanstack/react-query": "^5.90.2",
-    "antd": "^5.27.4",
-    "dayjs": "^1.11.18",
+    "@tanstack/react-query": "^5.90.6",
+    "antd": "^5.28.0",
+    "dayjs": "^1.11.19",
     "git-url-parse": "^16.1.0",
     "hash-wasm": "^4.12.0",
     "history": "^5.3.0",
     "json-diff-kit": "^1.0.33",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5",
     "vanilla-jsoneditor": "^3.10.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.4",
-    "@tailwindcss/postcss": "^4.1.13",
+    "@biomejs/biome": "2.3.3",
+    "@tailwindcss/postcss": "^4.1.16",
     "@types/git-url-parse": "^16.0.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-router-dom": "^5.3.3",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3"
   },
   "trustedDependencies": [

package.json

@@ -10,10 +10,13 @@ export function ErrorBoundary() {
   const error = useRouteError() as ChunkError;
   const navigate = useNavigate();
 
+  const message = error?.message || "";
+
   const isChunkError =
-    error?.message?.includes("Loading CSS chunk") ||
-    error?.message?.includes("Loading chunk") ||
-    error?.message?.includes("ChunkLoadError");
+    message &&
+    (message.includes("Loading CSS chunk") ||
+      message.includes("Loading chunk") ||
+      message.includes("ChunkLoadError"));
 
   useEffect(() => {
     if (isChunkError) {
@@ -33,7 +36,7 @@ export function ErrorBoundary() {
     <Result
       status="500"
       title="页面出错了"
-      subTitle={error?.message || "发生了未知错误"}
+      subTitle={message || "发生了未知错误"}
       extra={
         <>
           <Button type="primary" onClick={handleRetry}>

src/components/error-boundary.tsx

@@ -7,109 +7,128 @@ import {
 } from "@ant-design/icons";
 import { Button, Dropdown, type MenuProps } from "antd";
 import { useManageContext } from "../hooks/useManageContext";
+import { useMemo } from "react";
 
 const BindPackage = ({
-  packages,
   versionId,
   config,
 }: {
-  packages: PackageBase[];
   versionId: number;
   config: Version["config"];
 }) => {
-  const { packages: allPackages, appId } = useManageContext();
-  const availablePackages = allPackages.filter(
-    (i) => !packages.some((j) => i.id === j.id),
-  );
+  const {
+    packages: allPackages,
+    appId,
+    bindings,
+    packageMap,
+  } = useManageContext();
+  const availablePackages = allPackages;
+
+  const bindedPackages = useMemo(() => {
+    const result = [];
+    const legacyBindings = [];
+    for (const p of allPackages) {
+      if (p.versions?.id === versionId) {
+        const legacyConfig = config?.rollout?.[p.name];
+        legacyBindings.push({
+          packageId: p.id,
+          rollout: legacyConfig,
+        });
+        continue;
+      }
+    }
+    const matchedBindings: {
+      id?: number;
+      packageId: number;
+      rollout: number | null | undefined;
+    }[] = legacyBindings.concat(
+      bindings.filter((b) => b.versionId === versionId)
+    );
+
+    if (matchedBindings.length === 0 || allPackages.length === 0) return null;
 
-  const bindedPackages = packages.map((p) => {
-    const rolloutConfig = config?.rollout?.[p.name];
-    const isFull =
-      rolloutConfig === 100 ||
-      rolloutConfig === undefined ||
-      rolloutConfig === null;
-    const rolloutConfigNumber = Number(rolloutConfig);
-    const menu: MenuProps = {
-      items: isFull
+    for (const binding of matchedBindings) {
+      const p = packageMap.get(binding.packageId)!;
+      const rolloutConfig = binding.rollout;
+      const isFull =
+        rolloutConfig === 100 ||
+        rolloutConfig === undefined ||
+        rolloutConfig === null;
+      const rolloutConfigNumber = Number(rolloutConfig);
+      const items: MenuProps["items"] = isFull
         ? []
         : [
             {
               key: "full",
               label: "全量",
               icon: <CloudDownloadOutlined />,
-              onClick: () => {
-                api.updateVersion({
+              onClick: () =>
+                api.upsertBinding({
                   appId,
+                  packageId: binding.packageId,
                   versionId,
-                  params: { config: { rollout: { [p.name]: null } } },
-                });
-                api.updatePackage({
-                  appId,
-                  packageId: p.id,
-                  params: { versionId },
-                });
-              },
+                }),
             },
-          ],
-    };
+          ];
 
-    if (rolloutConfigNumber < 50 && !isFull) {
-      menu.items!.push({
-        key: "gray",
-        label: "灰度",
-        icon: <ExperimentOutlined />,
-        onClick: () =>
-          api.updatePackage({ appId, packageId: p.id, params: { versionId } }),
-        children: [1, 2, 5, 10, 20, 50]
-          .filter((percentage) => percentage > rolloutConfigNumber)
-          .map((percentage) => ({
-            key: `${percentage}`,
-            label: `${percentage}%`,
-            onClick: () =>
-              api.updateVersion({
-                appId,
-                versionId,
-                params: { config: { rollout: { [p.name]: percentage } } },
-              }),
-          })),
+      if (rolloutConfigNumber < 50 && !isFull) {
+        items.push({
+          key: "gray",
+          label: "灰度",
+          icon: <ExperimentOutlined />,
+          children: [1, 2, 5, 10, 20, 50]
+            .filter((percentage) => percentage > rolloutConfigNumber)
+            .map((percentage) => ({
+              key: `${percentage}`,
+              label: `${percentage}%`,
+              onClick: () =>
+                api.upsertBinding({
+                  appId,
+                  packageId: binding.packageId,
+                  versionId,
+                  rollout: percentage,
+                }),
+            })),
+        });
+      }
+      if (items.length > 0) {
+        items.push({ type: "divider" });
+      }
+      items.push({
+        key: "unpublish",
+        label: "取消发布",
+        icon: <RestOutlined />,
+        onClick: () => {
+          const bindingId = binding.id;
+          if (bindingId) {
+            api.deleteBinding({ appId, bindingId });
+          } else {
+            api.updatePackage({
+              appId,
+              packageId: p.id,
+              params: { versionId: null },
+            });
+          }
+        },
       });
+      const button = (
+        <Button
+          size="small"
+          color="primary"
+          variant={isFull ? "filled" : "dashed"}
+        >
+          <span className="font-bold">{p.name}</span>
+          <span className="text-xs">{isFull ? "" : `(${rolloutConfig}%)`}</span>
+        </Button>
+      );
+      result.push(
+        <Dropdown key={p.id} menu={{ items }}>
+          {button}
+        </Dropdown>
+      );
     }
-    if (menu.items!.length > 0) {
-      menu.items!.push({ type: "divider" });
-    }
-    menu.items!.push({
-      key: "unpublish",
-      label: "取消绑定",
-      icon: <RestOutlined />,
-      onClick: () => {
-        api.updateVersion({
-          appId,
-          versionId,
-          params: { config: { rollout: { [p.name]: null } } },
-        });
-        api.updatePackage({
-          appId,
-          packageId: p.id,
-          params: { versionId: null },
-        });
-      },
-    });
-    const button = (
-      <Button
-        size="small"
-        color="primary"
-        variant={isFull ? "filled" : "dashed"}
-      >
-        <span className="font-bold">{p.name}</span>
-        <span className="text-xs">{isFull ? "" : `(${rolloutConfig}%)`}</span>
-      </Button>
-    );
-    return (
-      <Dropdown key={p.id} menu={menu}>
-        {button}
-      </Dropdown>
-    );
-  });
+    return result;
+  }, [allPackages, bindings, versionId]);
 
   return (
     <div className="flex flex-wrap gap-1">
@@ -120,23 +139,13 @@ const BindPackage = ({
             items: availablePackages.map((p) => ({
               key: p.id,
               label: p.name,
-              onClick: () =>
-                api.updatePackage({
-                  appId,
-                  packageId: p.id,
-                  params: { versionId },
-                }),
               children: [
                 {
                   key: "full",
                   label: "全量",
                   icon: <CloudDownloadOutlined />,
                   onClick: () =>
-                    api.updateVersion({
-                      appId,
-                      versionId,
-                      params: { config: { rollout: { [p.name]: null } } },
-                    }),
+                    api.upsertBinding({ appId, packageId: p.id, versionId }),
                 },
                 {
                   key: "gray",
@@ -146,12 +155,11 @@ const BindPackage = ({
                     key: `${percentage}`,
                     label: `${percentage}%`,
                     onClick: () =>
-                      api.updateVersion({
+                      api.upsertBinding({
                         appId,
+                        packageId: p.id,
                         versionId,
-                        params: {
-                          config: { rollout: { [p.name]: percentage } },
-                        },
+                        rollout: percentage,
                       }),
                   })),
                 },
@@ -161,7 +169,7 @@ const BindPackage = ({
           className="ant-typography-edit"
         >
           <Button type="link" size="small" icon={<LinkOutlined />}>
-            绑定
+            发布
           </Button>
         </Dropdown>
       )}

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

@@ -86,7 +86,7 @@ const Item = ({ item }: { item: Package }) => {
   const { appId } = useManageContext();
   return (
     // const [_, drag] = useDrag(() => ({ item, type: "package" }));
-    <div className="bg-white my-0 [&_li]:!px-0">
+    <div className="bg-white my-0 [&_li]:px-0!">
       <List.Item className="p-2">
         <List.Item.Meta
           title={