Delete Resource - Kumo 中文文档

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceBasicDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

安装

DeleteResource 是一个区块——通过 CLI 安装、归你所有并可自由定制的组件。与普通组件不同，区块会被复制进你的项目，因此你完全掌控其代码。

1. 初始化 Kumo 配置 (仅首次需要)

npx @cloudflare/kumo init

2. 安装区块

npx @cloudflare/kumo add DeleteResource

3. 从本地路径导入

// 路径取决于你的 kumo.json 中的 blocksDir 设置
// 默认:src/components/kumo/
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";

为什么用区块？区块让你完全拥有代码的所有权，可以按自己的需求定制删除流程。对于这类关键操作，往往需要按项目情况做调整，区块正是理想选择。

用法

import { useState } from "react";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";
import { Button } from "@cloudflare/kumo";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

示例

删除 Worker

适用于任何资源类型——只需修改 resourceType 和 resourceName 属性即可。

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceWorkerDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Worker
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Worker"
        resourceName="api-gateway-worker"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

错误状态

使用 errorMessage 属性显示错误信息。

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceErrorDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string>("");

  const handleDelete = async () => {
    setErrorMsg("");
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setErrorMsg("Something went wrong");
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
        errorMessage={errorMsg}
      />
    </>
  );
}

API 参考

属性	类型	默认值	说明
size	`"sm" \| "base"`	`"base"`	-
open*	`boolean`	-	Whether the dialog is open
resourceType*	`string`	-	The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace")
resourceName*	`string`	-	The name of the specific resource being deleted
isDeleting	`boolean`	-	Whether the delete action is in progress
caseSensitive	`boolean`	-	Whether the confirmation input should be case-sensitive (default: true)
deleteButtonText	`string`	-	Custom delete button text (defaults to "Delete {resourceType}")
className	`string`	-	Additional className for the dialog
errorMessage	`string`	-	Error message to display if the delete action fails