Refine项目自定义页面开发指南

Refine项目自定义页面开发指南

前言

在Refine项目中，开发者经常需要创建超出标准CRUD操作的自定义页面。本文将深入探讨如何在Refine应用中创建、配置和优化自定义页面，帮助开发者扩展应用功能。

自定义页面基础概念

Refine框架提供了灵活的路由系统，允许开发者创建完全自定义的页面。这些页面可以：

1. 独立于资源系统存在
2. 拥有自己的业务逻辑
3. 集成到现有布局中
4. 设置不同的访问权限

创建公共自定义页面

公共页面是所有用户均可访问的页面，创建步骤如下：

1. 首先创建页面组件文件，例如pages/custom-page.tsx
2. 在应用配置中注册路由

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { CustomPage } from "pages/custom-page";

const App = () => {
  return (
    <Refine
      routerProvider={{
        ...routerProvider,
        routes: [
          {
            element: <CustomPage />,
            path: "/custom-page",
          },
        ],
      }}
    />
  );
};

创建需要认证的自定义页面

对于需要登录才能访问的页面，Refine提供了<Authenticated>组件来实现权限控制：

import { Authenticated } from "@pankod/refine-core";

const AuthenticatedCustomPage = () => {
  return (
    <Authenticated>
      <CustomPage />
    </Authenticated>
  );
};

// 然后在路由配置中使用AuthenticatedCustomPage

注意：使用认证页面需要先配置authProvider。

自定义页面布局集成

默认情况下，自定义页面不会自动包含应用的布局。要集成布局，有两种方式：

1. 通过路由配置自动集成：

routes: [
  {
    element: <CustomPage />,
    path: "/custom-page",
    layout: true  // 启用布局
  }
]

2. 手动包装组件：

import { LayoutWrapper } from "@pankod/refine-core";

const CustomPageWithLayout = () => (
  <LayoutWrapper>
    <CustomPage />
  </LayoutWrapper>
);

实战案例：文章审核页面

让我们通过一个实际案例来演示如何创建一个文章审核页面：

1. 创建审核页面组件

import { useList, useOne, useUpdate } from "@pankod/refine-core";
import { Show, Typography, Button, Space } from "@pankod/refine-antd";

export const PostReview = () => {
  // 获取草稿状态的文章
  const { data, isLoading } = useList<IPost>({
    resource: "posts",
    config: {
      filters: [{ field: "status", operator: "eq", value: "draft" }],
      pagination: { pageSize: 1 }
    }
  });
  
  const post = data?.data[0];
  
  // 获取分类信息
  const { data: categoryData } = useOne<ICategory>({
    resource: "categories",
    id: post?.category.id,
    enabled: !!post
  });
  
  // 更新文章状态
  const { mutate: updatePost } = useUpdate<IPost>();
  
  const handleApprove = () => {
    updatePost({
      resource: "posts",
      id: post!.id,
      values: { status: "published" }
    });
  };
  
  const handleReject = () => {
    updatePost({
      resource: "posts",
      id: post!.id,
      values: { status: "rejected" }
    });
  };
  
  return (
    <Show
      title="文章审核"
      isLoading={isLoading}
      headerProps={{ backIcon: false }}
    >
      {/* 文章内容展示 */}
      <Space>
        <Button type="primary" onClick={handleApprove}>通过</Button>
        <Button danger onClick={handleReject}>拒绝</Button>
      </Space>
    </Show>
  );
};

2. 注册路由

// 在App.tsx中
routerProvider={{
  ...routerProvider,
  routes: [
    {
      element: <PostReview />,
      path: "/post-review",
      layout: true
    }
  ]
}}

高级技巧

1. 侧边栏集成：虽然自定义页面不会自动出现在侧边栏，但可以通过空资源项来添加：

resources={[
  { name: "post-review", list: () => null }
]}

2. 数据预加载：对于关键数据，可以使用useMany等批量查询优化性能

3. 自定义错误处理：结合useNotification实现友好的用户反馈

4. 多路由参数：支持动态路由参数，如/post-review/:id

总结

Refine框架的自定义页面功能为开发者提供了极大的灵活性。通过本文介绍的方法，您可以：

• 创建完全自定义的页面和功能
• 实现精细的权限控制
• 无缝集成到现有布局中
• 构建复杂的业务逻辑

掌握这些技巧后，您将能够扩展Refine应用的功能边界，满足各种业务场景需求。