Resource List 资源列表
@lark-ui/core

Resource List 资源列表

一个用于资源列表页面的布局组件，支持可选的侧边栏内容。

KV 命名空间

production-kv

2 天前创建

staging-kv

1 周前创建

使用示例

// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');

了解更多

查看我们的文档，了解更多关于 KV 存储的信息。

import { Surface, Code } from "@lark-ui/core";
import { DatabaseIcon } from "@phosphor-icons/react";

function ResourceListPage({
  title,
  description,
  icon,
  usage,
  additionalContent,
  children,
  className,
}: ResourceListPageProps) {
  return (
    <div className={`min-h-[400px] w-full bg-lark-overlay ${className || ""}`}>
      <div className="mx-auto flex max-w-[1400px] flex-col p-6 md:gap-4 md:p-8">
        <div className="flex flex-col">
          <div className="mb-1.5 flex items-center gap-1.5">
            {icon}
            <h1 className="font-heading m-0 p-0 text-3xl font-semibold">
              {title}
            </h1>
          </div>
          <p className="hidden p-0 text-lg leading-normal text-pretty text-lark-subtle md:block">
            {description}
          </p>
        </div>

        <div className="flex flex-col-reverse gap-6 xl:grid xl:grid-cols-[1fr_2fr] xl:gap-8">
          <div className="min-w-0">{children}</div>

          {(usage || additionalContent) && (
            <div className="top-22 flex h-fit w-full min-w-0 flex-col gap-4 xl:sticky">
              {usage}
              {additionalContent && (
                <div className={usage ? "mt-6" : ""}>{additionalContent}</div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function ResourceListCompleteDemo() {
  return (
    <ResourceListPage
      title="KV 命名空间"
      description="以低延迟在全球范围存储键值数据"
      icon={<DatabaseIcon size={32} className="text-lark-subtle" />}
      usage={
        <Surface className="p-4">
          <h3 className="mb-2 font-semibold">使用示例</h3>
          <Code
            className="overflow-x-auto"
            lang="ts"
            code={`// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');`}
          />
        </Surface>
      }
      additionalContent={
        <Surface className="p-4">
          <h3 className="mb-2 font-semibold">了解更多</h3>
          <p className="text-sm text-lark-subtle">
            查看我们的文档，了解更多关于 KV 存储的信息。
          </p>
        </Surface>
      }
    >
      <div className="space-y-4">
        <Surface className="p-6">
          <h4 className="mb-2 truncate font-semibold">production-kv</h4>
          <p className="text-sm text-lark-subtle">2 天前创建</p>
        </Surface>
        <Surface className="p-6">
          <h4 className="mb-2 truncate font-semibold">staging-kv</h4>
          <p className="text-sm text-lark-subtle">1 周前创建</p>
        </Surface>
      </div>
    </ResourceListPage>
  );
}

安装

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

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

npx @lark-ui/core init

2. 安装区块

npx @lark-ui/core add ResourceListPage

3. 从本地路径导入

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

为什么要用区块？ 区块让你完全拥有代码，可以按自身需求定制 布局。对于经常需要按项目定制的页面级模式，它们非常合适。

用法

import { ResourceListPage } from "./components/lark/resource-list/resource-list";
import { Surface } from "@lark-ui/core";
import { DatabaseIcon } from "@phosphor-icons/react";

export default function DatabasesPage() {
  return (
    <ResourceListPage
      title="Databases"
      description="Manage your database instances and configurations"
      icon={<DatabaseIcon size={32} className="text-lark-strong" />}
    >
      <Surface className="p-6">{/* Your resource list content */}</Surface>
    </ResourceListPage>
  );
}

示例

基础

一个最小的资源列表页面，包含标题、描述和图标。

数据库

主要内容区域 —— 资源列表将显示在这里

import { Surface } from "@lark-ui/core";
import { DatabaseIcon } from "@phosphor-icons/react";

function ResourceListPage({
  title,
  description,
  icon,
  usage,
  additionalContent,
  children,
  className,
}: ResourceListPageProps) {
  return (
    <div className={`min-h-[400px] w-full bg-lark-overlay ${className || ""}`}>
      <div className="mx-auto flex max-w-[1400px] flex-col p-6 md:gap-4 md:p-8">
        <div className="flex flex-col">
          <div className="mb-1.5 flex items-center gap-1.5">
            {icon}
            <h1 className="font-heading m-0 p-0 text-3xl font-semibold">
              {title}
            </h1>
          </div>
          <p className="hidden p-0 text-lg leading-normal text-pretty text-lark-subtle md:block">
            {description}
          </p>
        </div>

        <div className="flex flex-col-reverse gap-6 xl:grid xl:grid-cols-[1fr_2fr] xl:gap-8">
          <div className="min-w-0">{children}</div>

          {(usage || additionalContent) && (
            <div className="top-22 flex h-fit w-full min-w-0 flex-col gap-4 xl:sticky">
              {usage}
              {additionalContent && (
                <div className={usage ? "mt-6" : ""}>{additionalContent}</div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function ResourceListBasicDemo() {
  return (
    <ResourceListPage
      title="数据库"
      description="管理你的数据库实例和配置"
      icon={<DatabaseIcon size={32} className="text-lark-subtle" />}
    >
      <Surface className="p-6">
        <p>主要内容区域 —— 资源列表将显示在这里</p>
      </Surface>
    </ResourceListPage>
  );
}

带使用侧边栏

加入一个包含使用示例或快速入门指南的侧边栏。

API 密钥

API 密钥列表将显示在这里

快速开始

生成 API 密钥来认证你的请求

curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com
import { Surface, Code } from "@lark-ui/core";

function ResourceListPage({
  title,
  description,
  icon,
  usage,
  additionalContent,
  children,
  className,
}: ResourceListPageProps) {
  return (
    <div className={`min-h-[400px] w-full bg-lark-overlay ${className || ""}`}>
      <div className="mx-auto flex max-w-[1400px] flex-col p-6 md:gap-4 md:p-8">
        <div className="flex flex-col">
          <div className="mb-1.5 flex items-center gap-1.5">
            {icon}
            <h1 className="font-heading m-0 p-0 text-3xl font-semibold">
              {title}
            </h1>
          </div>
          <p className="hidden p-0 text-lg leading-normal text-pretty text-lark-subtle md:block">
            {description}
          </p>
        </div>

        <div className="flex flex-col-reverse gap-6 xl:grid xl:grid-cols-[1fr_2fr] xl:gap-8">
          <div className="min-w-0">{children}</div>

          {(usage || additionalContent) && (
            <div className="top-22 flex h-fit w-full min-w-0 flex-col gap-4 xl:sticky">
              {usage}
              {additionalContent && (
                <div className={usage ? "mt-6" : ""}>{additionalContent}</div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function ResourceListWithUsageDemo() {
  return (
    <ResourceListPage
      title="API 密钥"
      description="为你的应用创建和管理 API 密钥"
      usage={
        <Surface className="p-4">
          <h3 className="mb-2 font-semibold">快速开始</h3>
          <p className="mb-3 text-sm text-lark-subtle">
            生成 API 密钥来认证你的请求
          </p>
          <Code
            className="overflow-x-auto"
            lang="bash"
            code='curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com'
          />
        </Surface>
      }
    >
      <Surface className="p-6">
        <p>API 密钥列表将显示在这里</p>
      </Surface>
    </ResourceListPage>
  );
}

API 参考

属性类型描述
titlestring显示在顶部的页面标题
descriptionstring标题下方的页面描述
iconReactNode显示在标题旁的图标
usageReactNode

用于放置使用示例或快速入门指南的侧边栏内容

additionalContentReactNode

额外的侧边栏内容（例如资源、链接）

childrenReactNode资源列表的主体内容区域
classNamestring额外的 CSS 类名