FxPageStatus 页面状态

页面级状态展示组件，用于403(forbidden)、404、建设中（coming-soon） 等统一场景。UI 框架无关（FxIcon + FxButton + @fx/styles token），不依赖 vue-router（跳转通过事件交消费方处理）。

FxPageStatus 属于 @fx/components。

何时使用

• 访问权限不足 → 403| forbidden
• 路由匹配不到 → 404
• 功能尚未上线 → coming-soon（建设中）

TIP

组件只负责「展示」，「何时显示」属于业务判断（路由守卫 / 路由配置），不归组件。500 等的触发逻辑同理，由业务侧决定。

引入

import { FxPageStatus } from "@fx/components";

403

<script setup lang="ts">
import { FxPageStatus, fxMsg } from "@fx/components"

function back() {
    fxMsg.success('返回')
}
function push() {
    fxMsg.info('跳转至...')
}
</script>

<template>
    <FxPageStatus status="403" @back="back()" @home="push()" />
</template>

forbidden 与 403相同

<script setup lang="ts">
import { FxPageStatus, fxMsg } from "@fx/components"

function back() {
    fxMsg.success('返回')
}
function push() {
    fxMsg.info('跳转至...')
}
</script>

<template>
    <FxPageStatus status="forbidden" @back="back()" @home="push()" />
</template>

404

<script setup lang="ts">
import { FxPageStatus, fxMsg } from "@fx/components"

function back() {
    fxMsg.success('返回')
}
function push() {
    fxMsg.info('跳转至...')
}
</script>

<template>
    <FxPageStatus status="404" @back="back()" @home="push()" />
</template>

建设中

page-name 会拼到标题前，显示为「{pageName}正在建设中...」。

<template>
    <FxPageStatus status="coming-soon" page-name="订单管理" @back="back()" @home="push()" />
</template>

<script setup lang="ts">
import { FxPageStatus, fxMsg } from "@fx/components"

function back() {
    fxMsg.success('返回')
}
function push() {
    fxMsg.info('跳转至...')
}
</script>

<style scoped></style>

Attributes

参数	说明	类型	默认值
status	页面状态类型	"403" | "forbidden" |"404" | "coming-soon"	—（必填）
title	覆盖默认主标题	string	预设
description	覆盖默认描述	string	预设
icon	覆盖默认插图。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx）	string	预设（404 随机）
page-name	coming-soon 用，拼到标题前	string	"此功能"

Slots

插槽	说明
icon	覆盖插图
action	覆盖操作按钮区
default	整块内容覆盖

Events

事件名	说明
back	内置「返回上一页」按钮点击
home	内置「返回首页」按钮点击

默认预设

status	主标题	副标题	插图
403|forbidden	403	无权限	svg:statusCode-403-*（7 张随机）
404	404	页面未找到	svg:statusCode-404-*（7 张随机）
coming-soon	{pageName}正在建设中...	—	svg:default-page-construction

后续扩展

TODO

``error(500) 暂未实现，需配套补 svg + 业务触发逻辑（路由守卫 / 错误边界）。empty` 不属于本组件（组件级空状态，请用 FxEmpty 或表格的 empty slot）。