结果页 Result

Result 组件用于展示错误、空状态、或者其他需要呈现的状态信息，如 403、404、500 错误页面。它包括了图标、标题、副标题以及额外的操作按钮，方便在各种页面中复用。

---

📦 引入方式

import { Result } from '@npmqg/react-ui-result';

---

🧩 使用示例

📚 默认 404 页面

示例

🔍

Page Not Found

Sorry, the page you visited does not exist.

源码

<Result className="h-[200px]" title="Page Not Found" subTitle="Sorry, the page you visited does not exist." />

📚 自定义图标

示例

⚠️

Internal Server Error

Something went wrong, please try again later.

源码

<Result
  className="h-[200px]"
  status="500"
  title="Internal Server Error"
  subTitle="Something went wrong, please try again later."
  icon={<div className="text-6xl text-red-500">⚠️</div>}
/>

📚 额外操作按钮

示例

🔍

Page Not Found

Sorry, the page you visited does not exist.

源码

<Result
  className="h-[200px]"
  status="404"
  title="Page Not Found"
  subTitle="Sorry, the page you visited does not exist."
  extra={<button onClick={() => (window.location.href = '/')}>Go Home</button>}
/>

---

🧩 组件结构

属性	类型	默认值	说明
status	'403' | '404' | '500'	'404'	状态码，决定显示哪个图标（默认 404）
title	React.ReactNode	—	页面显示的标题
subTitle	React.ReactNode	—	页面显示的副标题
extra	React.ReactNode	—	页面额外的内容，通常为按钮等操作元素
icon	React.ReactNode	—	自定义图标，若没有提供则根据 status 显示默认图标
className	string	—	自定义类名，用于样式扩展
...props	React.HTMLAttributes<HTMLDivElement>	—	继承自 div 的其他属性

---

🎨 样式说明

• 容器布局：组件使用了 flex 布局，居中显示状态信息，适配全屏高度（h-screen）。
• 图标样式：每个状态（403、404、500）对应不同的图标和颜色（如黄色、灰色、红色）。
• 标题和副标题：标题使用 text-3xl font-semibold 样式，副标题使用 text-muted-foreground 样式显示。
• 额外内容：通过 extra 插槽可以插入如按钮、链接等操作元素。

---

📐 设计说明

• 图标设计：通过简单的图标（如 🚫、🔍、💥）直观表达不同的错误状态，使用了 Radix 和 Tailwind 设计系统，保证了组件的一致性和可访问性。
• 响应式设计：采用 h-screen 和 w-full 布局，确保组件在不同屏幕尺寸下自适应。
• 灵活性：支持自定义图标、标题、副标题以及额外内容的插入，提供了很大的灵活性。