Delete Resource 删除资源

import { useState } from "react";
import { DeleteResource, Button } from "@lark-ui/core";

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)}>
        删除 Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

安装

DeleteResource 是一个区块（block）——通过命令行工具（CLI）安装、由你拥有且可自行定制的组件。与常规组件不同，区块会被复制到你的项目中，因此你可以完全掌控代码。

1. 初始化 Lark 配置（仅首次需要）

npx @lark-ui/core init

2. 安装区块

npx @lark-ui/core add DeleteResource

3. 从本地路径导入

// The path depends on your lark-ui.json blocksDir setting
// Default: src/components/lark/
import { DeleteResource } from "./components/lark/delete-resource/delete-resource";

为什么要用区块？ 区块让你完全拥有代码，可以按自身需求定制删除流程。对于经常需要按项目定制的关键操作，它们非常合适。

用法

import { useState } from "react";
import { DeleteResource } from "./components/lark/delete-resource/delete-resource";
import { Button } from "@lark-ui/core";

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 "@lark-ui/core";

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)}>
        删除 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 "@lark-ui/core";

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("出错了");
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        删除 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`	-	对话框是否展开
resourceType*	`string`	-	被删除资源的类型（例如“Zone”、“Worker”、“KV Namespace”）
resourceName*	`string`	-	被删除的具体资源名称
isDeleting	`boolean`	-	删除操作是否正在进行
caseSensitive	`boolean`	-	确认输入框是否区分大小写（默认：true）
deleteButtonText	`string`	-	自定义删除按钮文字（默认为“Delete {resourceType}”）
className	`string`	-	对话框的额外 className
errorMessage	`string`	-	删除操作失败时显示的错误信息