refine-dev

Refine.dev 框架

Refine 是一个无头 React 框架，用于构建企业级 CRUD 应用。它开箱即用地提供数据获取、路由、身份认证和访问控制，同时保持 UI 无关。

核心概念

Refine 围绕以下关键抽象构建：

1. 数据提供者 — 后端适配器（REST、GraphQL 等）
2. 资源 — 应用中的实体（例如 posts、users、products）
3. Hooks — useList、useOne、useCreate、useUpdate、useDelete、useForm、useTable
4. 认证提供者 — 处理登录、登出、权限
5. 路由提供者 — 与 React Router 等集成

快速开始（Vite）

脚手架：npm create refine-app@latest（选择 Vite、Mantine、REST API）。如需手动设置，请安装 @refinedev/core @refinedev/mantine @refinedev/react-router 以及 Mantine 包。

最小应用结构

// src/App.tsx
import { Refine } from "@refinedev/core";
import { MantineProvider } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MantineProvider>
        <Refine
          dataProvider={dataProvider("https://api.example.com")}
          routerProvider={routerProvider}
          resources={[
            {
              name: "posts",
              list: "/posts",
              create: "/posts/create",
              edit: "/posts/edit/:id",
              show: "/posts/show/:id",
            },
          ]}
        >
          <Routes>{/* Your routes here */}</Routes>
        </Refine>
      </MantineProvider>
    </BrowserRouter>
  );
}

关键禁止事项

• 不要混用多个 UI 库（选定 Mantine 并坚持使用）
• 不要绕过数据提供者 — 数据操作始终使用 Refine hooks
• 不要硬编码 API URL — 使用数据提供者配置
• 不要跳过资源定义 — 所有 CRUD 实体都必须在 resources 中声明
• 不要忽视 TypeScript 类型 — Refine 是完全类型化的，请充分利用

新功能开发步骤

1. 在 <Refine resources={[...]}> 中定义资源
2. 创建页面组件（List、Create、Edit、Show）
3. 设置与资源路径匹配的路由
4. 使用合适的 hooks（列表用 useTable，创建/编辑用 useForm）
5. 如需认证，配置认证提供者

完成定义

• 在 Refine 配置中定义了资源
• 所有 CRUD 页面均使用合适的 hooks 实现
• 路由与资源配置匹配
• 定义了资源数据的 TypeScript 类型
• 错误处理已就位
• 已处理加载状态

发布说明（5.0.12）

• useList 和 useTable 现在会保留 getList 返回的自定义字段，当你的数据提供者在行列表之外返回额外的聚合或分页元数据时，这一点很重要。

参考资料（详细指南）

核心

• data-providers.md — 数据提供者接口、可用提供者、自定义实现
• resources.md — 资源定义与配置
• routing.md — React Router 集成与路由模式

Hooks

• hooks.md — 所有 hooks：useList、useOne、useCreate、useUpdate、useDelete、useForm、useTable、useSelect

安全与认证

• auth.md — 认证提供者、访问控制、RBAC/ABAC、Casbin/CASL 集成

UI 与组件

• mantine-ui.md — Mantine 组件集成
• inferencer.md — 从 API schema 自动生成 CRUD 页面

工具与功能

• notifications.md — 通知提供者与 useNotification hook
• i18n.md — 使用 i18nProvider 实现国际化
• realtime.md — 用于 websocket/实时订阅的 LiveProvider

链接

• 文档
• 版本发布
• GitHub
• npm