# @ferdiunal/refine-shadcn 中文文档

规范地址：https://npmcn.com/package/%40ferdiunal/refine-shadcn/

版本：1\.6\.1
npm 元数据更新时间：2025-08-22T21:20:07.623Z
中文译文更新时间：2026-11-14T14:37:05.044Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ferdiunal/refine-shadcn
原文对照：https://npmcn.com/package/%40ferdiunal/refine-shadcn/?lang=original
项目主页：https://github.com/ferdiunal/refine-shadcn#readme
源码仓库：https://github.com/ferdiunal/refine-shadcn

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2 MB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：34 个
- 首次发布：2024-08-20T15:19:52.613Z
- 最新版本发布：2025-08-22T21:20:07.419Z
- 近 30 天下载量：6115（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

以 shadcn-ui 为主题进行精细化。dev with shadcn-ui

## 安装

```sh
npm install @ferdiunal/refine-shadcn
```

也可以使用：`pnpm add @ferdiunal/refine-shadcn`、`yarn add @ferdiunal/refine-shadcn`、`bun add @ferdiunal/refine-shadcn`

## README

# 精密阴影cn

此软件包是一个主题集成,用于 [精炼.dev](https://refine.dev/) 使用 [{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得怎样](https://npmcn.com/package/%40ferdiunal/refine-shadcn/ui.shadcn.com)。 。 。 .

# 预览 QQ

### [虚拟示例](https://refine-shadcn-vite.vercel.app/)

### [下个js 示例](https://refine-shadcn-nextjs.vercel.app/)

## 安装

```bash

npm install @ferdiunal/refine-shadcn

```

或者说

```bash

yarn add @ferdiunal/refine-shadcn

```

## 用途

**维特**

[您可以使用为 Vite.js 从此链接准备的布局结构](https://npmcn.com/package/%40ferdiunal/refine-shadcn/templates/vite-react/src/App.tsx)

**用于 NexJs**

[您可以从此链接使用为 Next.js 准备的布局结构](https://npmcn.com/package/%40ferdiunal/refine-shadcn/templates/nextjs/app/app-layout.tsx)

### 列表页面

List Page 显示从数据源获取的表格或网格记录。 它通常包括过滤,分拣,批量动作等功能,以及帮助用户高效地浏览大数据组的平面图.

代码示例

```tsx
import { ListPage, Table, TableFilterProps } from "@ferdiunal/refine-shadcn";
import { AvatarImage } from "@radix-ui/react-avatar";
import { BaseRecord, HttpError, useUserFriendlyName } from "@refinedev/core";
import type { UseTableReturnType } from "@refinedev/react-table";
import { Edit, Eye, Trash2 } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Checkbox } from "@/components/ui/checkbox";

const UserList = () => {
    const friendly = useUserFriendlyName();
    const bulkDeleteAction = (
        table: UseTableReturnType<BaseRecord, HttpError>,
    ) => {
        const label = `Delete Selected (${
            table.getSelectedRowModel().rows.length
        }) ${friendly(
            "Row",
            table.getSelectedRowModel().rows.length > 1 ? "plural" : "singular",
        )}`;

        return {
            label,
            onClick: () => {
                alert("Delete Selected");
            },
        };
    };
    return (
        <ListPage>
            <Table enableSorting enableFilters>
                <Table.Column
                    accessorKey="id"
                    id={"select"}
                    header={({ table }) => (
                        <Table.CheckAll
                            options={[bulkDeleteAction(table)]}
                            table={table}
                        />
                    )}
                    cell={({ row }) => (
                        <Checkbox
                            className="translate-y-[2px]"
                            checked={row.getIsSelected()}
                            onCheckedChange={(value) =>
                                row.toggleSelected(!!value)
                            }
                            aria-label="Select row"
                            key={`checkbox-${row.original.id}`}
                        />
                    )}
                />
                <Table.Column
                    header={"ID"}
                    id="id"
                    accessorKey="id"
                    enableSorting
                    enableHiding
                />
                <Table.Column
                    header={"Avatar"}
                    id="avatar"
                    accessorKey="avatar"
                    cell={({ row }) =>
                        row.original.avatar?.[0]?.url && (
                            <Avatar>
                                <AvatarImage
                                    src={row.original.avatar[0].url}
                                    alt={row.original.avatar[0].name}
                                />
                                <AvatarFallback>
                                    {row.original.firstName[0]}
                                    {row.original.lastName[0]}
                                </AvatarFallback>
                            </Avatar>
                        )
                    }
                />
                <Table.Column
                    header={"First Name"}
                    accessorKey="firstName"
                    id="firstName"
                    enableSorting
                    enableHiding
                />
                <Table.Column
                    header={"Last Name"}
                    accessorKey="lastName"
                    id="lastName"
                    enableSorting
                    enableHiding
                />
                <Table.Column
                    header={"Birthday"}
                    accessorKey="birthday"
                    id="birthday"
                    enableSorting
                    enableHiding
                    filter={(props: TableFilterProps) => (
                        <Table.Filter.DateRangePicker {...props} align="end" />
                    )}
                />
                <Table.Column
                    accessorKey={"id"}
                    id={"actions"}
                    cell={({ row: { original } }) => (
                        <Table.Actions>
                            <Table.ShowAction
                                title="Detail"
                                row={original}
                                resource="users"
                                icon={<Eye size={16} />}
                            />
                            <Table.EditAction
                                title="Edit"
                                row={original}
                                resource="users"
                                icon={<Edit size={16} />}
                            />
                            <Table.DeleteAction
                                title="Delete"
                                row={original}
                                withForceDelete={true}
                                resource="users"
                                icon={<Trash2 size={16} />}
                            />
                        </Table.Actions>
                    )}
                />
            </Table>
        </ListPage>
    );
};

export default UserList;
```

### 显示页面

"显示页"旨在显示关于单张唱片的详细信息. 这是一种只读的视角,它以结构化格式呈现数据,通常包括相关的记录和元数据,让用户全面了解所选项目.

代码示例

```tsx
import { ShowPage } from "@ferdiunal/refine-shadcn";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import { IUser } from "./Form";
const UserShow: React.FC<IResourceComponentsProps> = () => {
    const {
        query: { data },
    } = useShow<IUser>();
    const record = data?.data;

    return (
        <ShowPage>
            <ShowPage.Row title="ID" children={record?.id as number} />
            <ShowPage.Row
                title="First Name"
                children={record?.firstName?.toString() || ""}
            />
            <ShowPage.Row
                title="Last Name"
                children={record?.firstName?.toString() || ""}
            />
            <ShowPage.Row
                title="Email"
                children={record?.email?.toString() || ""}
            />
        </ShowPage>
    );
};

export default UserShow;
```

### 创建页面

"创建页面"允许用户将新数据输入系统. 它提供了一个表格,用户可以填写创建新记录所必要的领域,确保在提交之前收集所有所需信息.

代码示例

```tsx
import { CreatePage } from "@ferdiunal/refine-shadcn";
import { Field, Form } from "@ferdiunal/refine-shadcn";
import { zodResolver } from "@hookform/resolvers/zod";
import { RedirectAction } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import * as z from "zod";
import { Input } from "@/components/ui/input";

export interface IUser {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
}

const formSchema = z.object({
    firstName: z.string().min(2, {
        message: "Firstname must be at least 2 characters.",
    }),
    lastName: z.string().min(2, {
        message: "Lastname must be at least 2 characters.",
    }),
    email: z.string().email({
        message: "Please enter a valid email address.",
    }),
});

const UserCreate = () => {
    const { ...form } = useForm<z.infer<typeof formSchema>>({
        mode: "all",
        resolver: zodResolver(formSchema),
        defaultValues: {
            firstName: "",
            lastName: "",
            email: "",
        },
        refineCoreProps: {
            autoSave: {
                enabled: true,
            },
            redirect,
        },
        warnWhenUnsavedChanges: true,
    });

    return (
        <CreatePage>
            <Form {...form}>
                <Field {...form} name="firstName" label="Firstname">
                    <Input placeholder="Firstname" />
                </Field>
                <Field {...form} name="lastName" label="Lastname">
                    <Input placeholder="Lastname" />
                </Field>
                <Field {...form} name="email" label="Email">
                    <Input placeholder="email" type="email" />
                </Field>
            </Form>
        </CreatePage>
    );
};

export default UserCreate;
```

### 编辑页面

编辑页面允许用户修改已存在的记录. 它将当前数据加载到一个表格中,允许用户进行更新并保存更改. 它通常包括验证,以确保更新不会违反任何数据完整性规则.

代码示例

```tsx
import { EditPage } from "@ferdiunal/refine-shadcn";
import { Field, Form } from "@ferdiunal/refine-shadcn";
import { zodResolver } from "@hookform/resolvers/zod";
import { RedirectAction } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import * as z from "zod";
import { Input } from "@/components/ui/input";

export interface IUser {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
}

const formSchema = z.object({
    firstName: z.string().min(2, {
        message: "Firstname must be at least 2 characters.",
    }),
    lastName: z.string().min(2, {
        message: "Lastname must be at least 2 characters.",
    }),
    email: z.string().email({
        message: "Please enter a valid email address.",
    }),
});

const UserEdit = () => {
    const { ...form } = useForm<z.infer<typeof formSchema>>({
        mode: "all",
        resolver: zodResolver(formSchema),
        defaultValues: {
            firstName: "",
            lastName: "",
            email: "",
        },
        refineCoreProps: {
            autoSave: {
                enabled: true,
            },
            redirect,
        },
        warnWhenUnsavedChanges: true,
    });

    return (
        <EditPage>
            <Form {...form}>
                <Field {...form} name="firstName" label="Firstname">
                    <Input placeholder="Firstname" />
                </Field>
                <Field {...form} name="lastName" label="Lastname">
                    <Input placeholder="Lastname" />
                </Field>
                <Field {...form} name="email" label="Email">
                    <Input placeholder="email" type="email" />
                </Field>
            </Form>
        </EditPage>
    );
};

export default UserEdit;
```

## 截图

![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddjg.png?v=1) ![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddlx.png?v=1) ![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddns.png?v=1) ![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddpm.png?v=1) ![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddrb.png?v=1) ![](https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-dfrd.png?v=1)

# 发起人

[![](https://avatars.githubusercontent.com/u/104967037?s=200&v=4)](https://github.com/refinedev)

## 许可证

麻省理工学院许可证(MIT). 请看 [许可证文件](https://npmcn.com/package/%40ferdiunal/refine-shadcn/LICENSE) 更多信息.

## 常见问题

### @ferdiunal/refine-shadcn 是什么？

以 shadcn-ui 为主题进行精细化。dev with shadcn-ui

### 如何安装 @ferdiunal/refine-shadcn？

在项目目录运行 npm install @ferdiunal/refine-shadcn，或使用 pnpm add / yarn add / bun add。

### @ferdiunal/refine-shadcn 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ferdiunal/refine-shadcn 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ferdiunal/refine-shadcn 可以商用吗？

@ferdiunal/refine-shadcn 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ferdiunal/refine-shadcn 的下载量有多少？

根据 npm 官方下载统计，@ferdiunal/refine-shadcn 在 2026/10/15 – 2026/11/13 这 30 天内被下载 6,115 次，日均约 204 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ferdiunal/refine-shadcn 还在维护吗？

最新版本 1\.6\.1 发布于 2025/08/23（1\.2 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。