FxResult 操作结果页

用于「操作结果」反馈（提交成功 / 保存失败等业务场景）。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

与 FxPageStatus 的区别：FxResult 面向业务操作反馈（成功 / 警告 / 失败等），FxPageStatus 面向页面级状态（404 / 建设中）。

基础用法

icon 控制五种语义类型，分别对应不同图标与主题色。

<template>
  <div class="grid">
    <FxResult
      icon="primary"
      title="主要提示"
      subTitle="请按照提示进行下一步操作"
    >
      <template #extra>
        <FxBtn type="primary">返回</FxBtn>
      </template>
    </FxResult>
    <FxResult
      icon="success"
      title="成功提示"
      subTitle="请按照提示进行下一步操作"
    >
      <template #extra>
        <FxBtn type="primary">返回</FxBtn>
      </template>
    </FxResult>
    <FxResult
      icon="warning"
      title="警告提示"
      subTitle="请按照提示进行下一步操作"
    >
      <template #extra>
        <FxBtn type="primary">返回</FxBtn>
      </template>
    </FxResult>
    <FxResult
      icon="error"
      title="错误提示"
      subTitle="请按照提示进行下一步操作"
    >
      <template #extra>
        <FxBtn type="primary">返回</FxBtn>
      </template>
    </FxResult>
    <FxResult icon="info" title="信息提示">
      <template #sub-title>
        <p>使用 slot 作为副标题</p>
      </template>
      <template #extra>
        <FxBtn type="primary">返回</FxBtn>
      </template>
    </FxResult>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
</style>

<FxResult icon="success" title="操作成功" subTitle="数据已保存" />
<FxResult icon="error" title="操作失败" subTitle="请稍后重试" />

自定义内容

通过 icon / title / sub-title / extra 插槽覆盖默认内容，extra 通常用于放置操作按钮。

<template>
  <FxResult title="404" subTitle="抱歉，您访问的页面不存在">
    <template #icon>
      <span class="custom-icon">🚫</span>
    </template>
    <template #extra>
      <FxBtn type="primary">返回首页</FxBtn>
    </template>
  </FxResult>
</template>

<style scoped>
.custom-icon {
  font-size: 64px;
  line-height: 1;
}
</style>

API

Attributes

属性	说明	类型	默认值
icon	图标类型，控制图标与主题色	'primary' | 'success' | 'warning' | 'info' | 'error'	info
title	标题	string	''
subTitle	副标题描述	string	''

Slots

插槽名	说明
icon	自定义图标
title	自定义标题
sub-title	自定义副标题
extra	操作区（如按钮）