企业官网建设流程全解析

• 前端
• UI组件
• 设计系统

本文围绕 ant-design-blazor 官方文档中的 403 示例页展开，介绍如何基于Result组件快速搭建"无访问权限"提示页面，并结合组件源码（Result.razor.cs）、内置状态图（IconStore.cs）与配套演示代码，讲清ResultStatus.Http403的底层实现原理，以及Title、SubTitle、Extra、Icon、IsShowIcon等核心参数的实战用法。读完本文，你将能独立在 Blazor 应用中实现规范的 403/404/500 异常结果页，并掌握Result组件从参数到渲染的完整调用链。

403 结果页：什么场景下会用到

当用户试图访问自己无权访问的页面或接口时，服务端通常会返回 HTTP 403（Forbidden）状态。此时如果直接展示一段白屏或一串错误码，用户体验较差。业界通行做法是提供一个结构化的"结果页"：包含状态插图、主标题、副标题，以及可操作的按钮区。

在 ant-design-blazor 中，官方文档演示目录 Result/demo/403.md 所对应的正是这样一个场景。该演示文档的说明只有一句话：

• 中文："你没有此页面的访问权限。"
• 英文："you are not authorized to access this page."

虽然描述简洁，但其背后由完整的Result组件与配套演示代码支撑（_403.razor），是一个可以直接复制使用的 403 页面实现。

Result 组件：反馈操作结果的核心组件

Result组件位于 components/result 目录下，官方文档（index.zh-CN.md）将其归类为"反馈（Feedback）"类组件，用途是"用于反馈一系列操作任务的处理结果"，适用时机是"当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用"。

它天然支持 7 种状态：success、error、info、warning、404、403、500。其中404、403、500三个 HTTP 状态对应的是插画级图片（image），其余状态对应的是图标（icon），这一点将在下文的源码分析中详细展开。

最小可用实现：照搬官方 403 演示代码

官方 403 演示页的完整实现位于_403.razor，核心代码极短：

<Result Status="ResultStatus.Http403" Title="403" SubTitle="Sorry, you are not authorized to access this page." Extra="extra" /> @code { RenderFragment extra = @<Button Type="ButtonType.Primary">Back Home</Button>; }

这段代码解析如下：

将其接入你的 Blazor 页面（例如作为未授权时的页面内容）即可得到标准的 403 结果页。如需中文文案，将SubTitle替换为"你没有此页面的访问权限"即可。

API 参数详解：完整继承并逐项展开

Result组件的全部公开参数定义在 Result.razor.cs（第 24～78 行），结合官方文档 index.zh-CN.md 的 API 表格整理如下：

几点补充说明：

• Status的默认值是ResultStatus.Info（源码第 59 行），所以即使不传Status，组件也会渲染一个info状态的图标结果页。
• Title/SubTitle与TitleTemplate/SubTitleTemplate是成对出现的：在 Result.razor 的渲染逻辑中（第 18～23 行），@if (TitleTemplate != null) @TitleTemplate else @Title，即模板优先，否则取字符串。
• Extra对应的 DOM 是ant-result-extra区块（Result.razor 第 30～35 行），适合放置"返回首页""重新登录""前往控制台"等引导按钮。
• ChildContent对应的 DOM 是ant-result-content区块（Result.razor 第 24～29 行），可用于展示错误明细、操作清单等额外信息（官方error演示 Error.razor 正是用它罗列了两条提交失败原因）。

源码级原理：ResultStatus.Http403 是如何被渲染的

状态枚举与类型映射

ResultStatus枚举定义于 ResultStatus.cs，包含 7 个成员：

public enum ResultStatus { Success, Error, Info, Warning, Http404, Http403, Http500, }

在 Result.razor.cs 中，_typeMap（第 88～97 行）将枚举映射为 CSS 类后缀，用于生成ant-result-403、ant-result-404、ant-result-500等容器类：

private static Dictionary<ResultStatus, string> _typeMap = new() { [ResultStatus.Info] = "info", [ResultStatus.Success] = "success", [ResultStatus.Warning] = "warning", [ResultStatus.Error] = "error", [ResultStatus.Http403] = "403", [ResultStatus.Http404] = "404", [ResultStatus.Http500] = "500" };

SetClass()方法据此拼接出ant-result、ant-result-403等 class（第 176～183 行）。

图标 vs 插画：403/404/500 的特别之处

Result组件内部通过DetermineIconType()（第 109～162 行）决定展示什么。当Status为Http403时，返回的是("__unauthorized", default)；Http404返回("__not-found", default)；Http500返回("__bad-request", default)。

这里出现了三个以__开头的特殊图标名，它们是组件内置的"内部插画"，定义在 components/icon/internal/IconStore.cs 的#region Icon Theme - Internal区域（第 1123～1136 行），以内联 SVG 形式内嵌于源码中。也就是说，403 页面那张"锁与拦截"风格的状态插画，并不依赖外部图标库，而是随组件源码一起打包的。

关键的分支逻辑是IsImage属性（第 164 行）：

private bool IsImage => Status.IsIn(ResultStatus.Http403, ResultStatus.Http404, ResultStatus.Http500);

当Status属于 HTTP 状态三件套时，组件走"图片"路径：LoadImage()（第 166～174 行）通过注入的IconService.GetIconImg(...)获取内联 SVG 字符串，在 Result.razor 中以@((MarkupString)_svgImage)输出（第 8～11 行）；而success、error、info、warning则走"图标"路径，由BuildIcon渲染一个<Icon>组件（第 99～107 行），对应close-circle、check-circle、warning、info-circle等图标。

渲染结构与样式

Result.razor 最终的 DOM 结构为：

div.ant-result.ant-result-403 ├── div.ant-result-image（403/404/500 为图片，其余为 ant-result-icon） ├── div.ant-result-title ├── div.ant-result-subtitle ├── div.ant-result-content（有 ChildContent 时） └── div.ant-result-extra（有 Extra 时）

样式定义在 components/result/style/index.less：容器默认padding: 48px 32px；图片区固定width: 250px; height: 295px; margin: auto；标题使用@result-title-font-size、居中显示；副标题使用@result-subtitle-font-size；操作区ant-result-extra内的相邻元素保留 8px 间距。此外success/error/info/warning四种图标状态分别由@success-color、@error-color、@info-color、@warning-color着色。

三兄弟对比：403 / 404 / 500

Result对三个 HTTP 状态页提供了统一的实现思路，官方演示目录中三者的代码结构完全一致：

• 403（_403.razor）：Status="ResultStatus.Http403"，副标题 "Sorry, you are not authorized to access this page."，语义为未授权访问，对应内置插画__unauthorized；
• 404（_404.razor）：Status="ResultStatus.Http404"，副标题 "Sorry, the page you visited does not exist."，语义为页面不存在，对应内置插画__not-found；
• 500（_500.razor）：Status="ResultStatus.Http500"，副标题 "Sorry, something went wrong."，语义为服务器内部错误，对应内置插画__bad-request。

三者的共同点是：都通过Status一个参数完成"插画 + 配色 + 容器 class"的整体切换，开发者只需再补上Title、SubTitle和Extra操作区。它们的演示文档（403.md、404.md、500.md）也是同构的，仅说明文字不同。

实战扩展：从"照搬"到"定制"

1. 定制操作区（Extra）

Extra是RenderFragment，可以放置任意组件。官方演示统一使用了主按钮"Back Home"：

@code { RenderFragment extra = @<Button Type="ButtonType.Primary">Back Home</Button>; }

实际项目中可放置多个按钮，例如"重新登录"（@onclick跳转登录页）加"返回首页"，与 Error.razor 中"Go Console / Buy Again"的双按钮模式一致。

2. 自定义图标（Icon）与隐藏图标（IsShowIcon）

官方自定义图标演示（CustomIcon.razor）展示了两点：

<Result Icon="smile-outline" Title="Great, we have done all the operations!" Extra="extra"> </Result> <Divider></Divider> <Result IsShowIcon="false" Title="Great, we can hide the icon!"> </Result>

• Icon参数格式为{type}-{theme}，如smile-outline。源码中DetermineIconType()（第 111～136 行）会以最后一个-为分隔符拆分类型与主题，theme支持fill、twotone、outline（其他值默认按outline处理）。注意：403/404/500 状态自带内部插画，若显式传入Icon，将优先渲染自定义图标。
• IsShowIcon="false"可直接隐藏图标/插画区，适合纯文字型结果提示。

3. 动态修改结果页

官方"修改结果"演示（ChangeTheResult.razor）展示了通过绑定驱动Status、Icon、Title、SubTitle的联动逻辑：当选择Http403/Http404/Http500时自动清空自定义Icon（因为这些状态应显示内置插画）；当清空Icon且当前为非图片状态时自动切回Http403。这套逻辑在需要"根据业务动态切换结果状态"的场景（如支付结果、表单提交结果页）可直接复用。

4. 与 ErrorBoundary 组合实现异常兜底

官方"Blazor 错误提示"演示（ErrorBoundaryDemo.razor）是更进阶的用法：利用 .NET 6 提供的ErrorBoundary包裹组件，在ErrorContent中渲染Result组件展示异常信息，并提供"Recover"按钮恢复界面：

<ErrorBoundary @ref="errorBoundary"> <ChildContent> <Button Danger OnClick="OnClick"> Click me to throw a error </Button> </ChildContent> <ErrorContent Context="ex"> <Result Status="ResultStatus.Error" Title="@ex.Message" SubTitle="@ex.StackTrace"> <Extra> <Button Type="ButtonType.Primary" OnClick="errorBoundary.Recover"> Recover </Button> </Extra> </Result> </ErrorContent> </ErrorBoundary>

这为全局未捕获异常的友好提示提供了一个开箱即用的范式（详见 error-boundary.md）。对于 403 场景，同理可在你的页面级授权组件中：当权限校验失败时，直接渲染Status="ResultStatus.Http403"的结果页，代替空白或重定向。

小结

• 403 结果页在 ant-design-blazor 中只需一段声明式代码即可完成：<Result Status="ResultStatus.Http403" Title="403" SubTitle="..." Extra="..."/>。
• 底层由 Result.razor.cs 的_typeMap、DetermineIconType()与IsImage逻辑驱动，403/404/500 使用 IconStore.cs 内置的__unauthorized、__not-found、__bad-request三张内联 SVG 插画，无需额外引入图标资源。
• 完整可参考的源码材料包括：组件实现 Result.razor 与 Result.razor.cs、状态枚举 ResultStatus.cs、样式 style/index.less，以及官方 API 文档 index.zh-CN.md 和整套演示代码（位于 Result/demo 目录）。

无论你是要为应用补齐 403/404/500 异常页，还是构建通用的"操作结果反馈"页面，Result组件都能以最小的代码量提供规范、一致且可深度定制的解决方案。

• 前端
• UI组件
• 设计系统