cruldra/refine-dev

Refine Dev Skill

Refine 是一个基于 React 的框架，用于快速构建数据密集型应用。它通过解耦业务逻辑与 UI 层，提供了极高的开发效率。

何时使用此技能

• 构建后台管理系统: 当你需要快速搭建功能完善的 Admin 面板或仪表盘时。
• 数据密集型应用: 应用涉及大量的表格、表单、CRUD 操作以及复杂的数据流管理。

初始化项目 (开始之前)

在执行任何初始化命令之前，你必须先询问并收集用户的偏好。不要假设默认值，请确认以下参数：

1. 项目名称与元数据:

   • 项目名称 (Project Name)
   • 作者名称 (--init-author-name)
   • 作者 URL (--init-author-url)
   • 许可证 (--init-license, 例如 MIT)
   • 是否为私有项目 (--init-private)

2. 前端框架选择:

   • Vite (推荐，极致的开发体验)
   • Next.js (适合需要 SSR 或更复杂路由的项目)

3. Refine 架构配置:

   • Data Provider: (例如 Simple REST, Supabase, Appwrite 等)
   • Auth Provider: 是否需要集成身份验证。

快速开始

根据用户在初始化阶段提供的偏好，运行对应的初始化命令。

使用预设初始化 (推荐)

# 示例：使用 Vite + shadcn/ui 预设
npm create refine-app@latest [项目名] -- --preset vite-shadcn

核心工作流

1. 配置 Refine 组件

在 App.tsx (或 Next.js 的布局文件) 中配置组件：

import { Refine } from "@refinedev/core";

function App() {
  return (
    <Refine
      dataProvider={dataProvider}
      authProvider={authProvider}
      resources={[
        {
          name: "posts",
          list: "/posts",
          create: "/posts/create",
          edit: "/posts/edit/:id",
          show: "/posts/show/:id",
        },
      ]}
    >
      {/* 页面组件 */}
    </Refine>
  );
}

2. 查阅详细文档

• 数据提供者: data-provider.md
• 认证提供者: auth-provider.md