7-10 · Result：预设场景组合

// packages/components/empty/src/empty.vue:30-45
const resolvedTitle = computed(() => {
  if (props.title !== undefined) {
    return props.title;
  }
  return locale.value.emptyTitle ?? "暂无数据";
});
const resolvedDescription = computed(() => {
  if (props.description !== undefined) {
    return props.description;
  }
  return locale.value.emptyDescription ?? "这里还没有可展示的内容";
});
const hasTitle = computed(() => Boolean(slots.title) || resolvedTitle.value !== "");
const hasDescription = computed(
  () => Boolean(slots.description) || resolvedDescription.value !== ""
);

<!-- apps/docs/examples/skeleton/loading-result.vue:58-81 -->
        <xy-empty
          v-else-if="state === 'empty'"
          title="暂无待发布任务"
          description="当前时间范围内没有需要继续推进的发布任务。"
        >
          <xy-space wrap>
            <xy-button type="primary">新建发布窗口</xy-button>
            <xy-button plain>查看历史记录</xy-button>
          </xy-space>
        </xy-empty>

        <xy-result
          v-else
          status="danger"
          title="窗口状态同步失败"
          description="发布记录服务超时，当前无法拉取最新窗口详情。"
        >
          <template #extra>
            <xy-space wrap>
              <xy-button type="primary">重新加载</xy-button>
              <xy-button plain>查看告警记录</xy-button>
            </xy-space>
          </template>
        </xy-result>

// packages/components/result/src/result.ts:1-61
import type { ComponentSize, ComponentStatus } from "xiaoye-primitives";

export const resultIconTypes = ["primary", "success", "warning", "info", "error"] as const;
export const resultVariants = ["plain", "card"] as const;

export type ResultIconType = (typeof resultIconTypes)[number];
export type ResultVariant = (typeof resultVariants)[number];
export type ResultStatus = ComponentStatus | "info" | "error" | "403" | "404" | "500";

export interface ResultProps {
  title?: string;
  subTitle?: string;
  icon?: ResultIconType;
  status?: ResultStatus;
  description?: string;
  size?: ComponentSize;
  variant?: ResultVariant;
  iconSize?: number | string;
}

export const RESULT_STATUS_ICON_MAP: Record<ResultStatus, string> = {
  neutral: "mdi:information-outline",
  primary: "mdi:information-outline",
  success: "mdi:check-circle-outline",
  warning: "mdi:alert-circle-outline",
  danger: "mdi:close-circle-outline",
  info: "mdi:information-outline",
  error: "mdi:close-circle-outline",
  "403": "mdi:shield-lock-outline",
  "404": "mdi:file-question-outline",
  "500": "mdi:server-network-off"
};

export const RESULT_STATUS_TONE_MAP: Record<ResultStatus, ComponentStatus> = {
  neutral: "neutral",
  primary: "primary",
  success: "success",
  warning: "warning",
  danger: "danger",
  info: "neutral",
  error: "danger",
  "403": "warning",
  "404": "neutral",
  "500": "danger"
};

export const RESULT_ICON_NAME_MAP: Record<ResultIconType, string> = {
  primary: "mdi:information-outline",
  success: "mdi:check-circle-outline",
  warning: "mdi:alert-circle-outline",
  info: "mdi:information-outline",
  error: "mdi:close-circle-outline"
};

export const RESULT_ICON_STATUS_MAP: Record<ResultIconType, ResultStatus> = {
  primary: "primary",
  success: "success",
  warning: "warning",
  info: "neutral",
  error: "danger"
};

// packages/components/result/src/result.vue:51-56
const resolvedTone = computed(() =>
  props.icon ? RESULT_ICON_STATUS_MAP[props.icon] : RESULT_STATUS_TONE_MAP[props.status]
);
const resolvedIcon = computed(() =>
  props.icon ? RESULT_ICON_NAME_MAP[props.icon] : RESULT_STATUS_ICON_MAP[props.status]
);

// 反例示意：翻译逻辑散落在视图层的三个问题
// const tone = status === "403" ? "warning" : status === "500" ? "danger" : ...

<!-- packages/components/result/src/result.vue:1-63 -->
<script setup lang="ts">
defineOptions({
  name: "XyResult",
  inheritAttrs: false
});

import { computed, useAttrs } from "vue";
import type { ComponentSize } from "xiaoye-primitives";
import { useConfig, useNamespace } from "xiaoye-primitives";
import XyIcon from "../../icon";
import type { ResultProps } from "./result";
import {
  RESULT_ICON_NAME_MAP,
  RESULT_ICON_STATUS_MAP,
  RESULT_STATUS_ICON_MAP,
  RESULT_STATUS_TONE_MAP
} from "./result";

const props = withDefaults(defineProps<ResultProps>(), {
  title: undefined,
  subTitle: "",
  icon: undefined,
  status: "neutral",
  description: undefined,
  size: undefined,
  variant: "plain",
  iconSize: undefined
});

const slots = defineSlots<{
  icon?: () => unknown;
  title?: () => unknown;
  description?: () => unknown;
  "sub-title"?: () => unknown;
  default?: () => unknown;
  extra?: () => unknown;
}>();

const attrs = useAttrs();
const ns = useNamespace("result");
const { size: globalSize } = useConfig();

const nativeAttrs = computed<Record<string, unknown>>(() => {
  const rest = { ...attrs };
  delete rest.class;
  delete rest.style;
  return rest;
});

const mergedSize = computed<ComponentSize>(() => props.size ?? globalSize.value);
const resolvedTone = computed(() =>
  props.icon ? RESULT_ICON_STATUS_MAP[props.icon] : RESULT_STATUS_TONE_MAP[props.status]
);
const resolvedIcon = computed(() =>
  props.icon ? RESULT_ICON_NAME_MAP[props.icon] : RESULT_STATUS_ICON_MAP[props.status]
);
const resolvedIconSize = computed(() => {
  if (props.iconSize !== undefined && props.iconSize !== "") {
    return props.iconSize;
  }

  return "var(--xy-result-icon-size)";
});

// packages/components/result/src/result.vue:64-88
const resolvedDescription = computed(() =>
  props.description !== undefined ? props.description : props.subTitle
);
const hasTitle = computed(() => Boolean(slots.title) || props.title !== undefined && props.title !== "");
const hasDescription = computed(
  () =>
    Boolean(slots.description) ||
    (props.description !== undefined
      ? props.description !== ""
      : Boolean(slots["sub-title"]) || props.subTitle !== "")
);
const showLegacyDescriptionSlot = computed(
  () => !slots.description && props.description === undefined && Boolean(slots["sub-title"])
);
const hasContent = computed(() => Boolean(slots.default));
const hasExtra = computed(() => Boolean(slots.extra));

const rootClasses = computed(() => [
  ns.base.value,
  `${ns.base.value}--${mergedSize.value}`,
  `${ns.base.value}--${props.variant}`,
  ns.is(resolvedTone.value, true),
  attrs.class
]);

<!-- packages/components/result/src/result.vue:90-120 -->
<template>
  <section :class="rootClasses" :style="attrs.style" v-bind="nativeAttrs">
    <div class="xy-result__icon">
      <slot name="icon">
        <div class="xy-result__icon-shell" aria-hidden="true">
          <XyIcon class="xy-result__icon-symbol" :icon="resolvedIcon" :size="resolvedIconSize" />
        </div>
      </slot>
    </div>

    <div v-if="hasTitle" class="xy-result__title">
      <slot name="title">
        <p>{{ props.title }}</p>
      </slot>
    </div>

    <div v-if="hasDescription" class="xy-result__description">
      <slot v-if="slots.description" name="description" />
      <slot v-else-if="showLegacyDescriptionSlot" name="sub-title" />
      <p v-else>{{ resolvedDescription }}</p>
    </div>

    <div v-if="hasContent" class="xy-result__content">
      <slot />
    </div>

    <div v-if="hasExtra" class="xy-result__extra">
      <slot name="extra" />
    </div>
  </section>
</template>

/* packages/theme/src/components/result.css:1-40 */
.xy-result {
  --xy-result-padding: 40px 20px;
  --xy-result-gap: 14px;
  --xy-result-icon-size: 72px;
  --xy-result-icon-shell-size: 112px;
  --xy-result-title-font-size: 24px;
  --xy-result-description-font-size: var(--xy-font-size-md);
  --xy-result-title-color: var(--xy-text-heading);
  --xy-result-description-color: var(--xy-text-muted);
  --xy-result-content-color: var(--xy-text-muted);
  --xy-result-content-max-width: 560px;
  --xy-result-extra-margin-top: 10px;
  --xy-result-card-border-color: color-mix(in srgb, var(--xy-border-subtle) 84%, var(--xy-border));
  --xy-result-card-background: color-mix(in srgb, var(--xy-bg-floating) 99%, var(--xy-bg-subtle));
  --xy-result-card-shadow:
    0 0 0 1px color-mix(in srgb, var(--xy-bg-floating) 10%, transparent),
    0 1px 4px color-mix(in srgb, var(--xy-text-heading) 4%, transparent);
  --xy-result-accent-color: var(--xy-info);
  --xy-result-accent-surface: color-mix(
    in srgb,
    var(--xy-info) 10%,
    var(--xy-bg-subtle)
  );
  --xy-result-accent-border: color-mix(
    in srgb,
    var(--xy-info) 16%,
    var(--xy-border-subtle)
  );

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xy-result-gap);
  width: 100%;
  max-width: var(--xy-result-content-max-width);
  margin: 0 auto;
  padding: var(--xy-result-padding);
  box-sizing: border-box;
  text-align: center;
}

/* packages/theme/src/components/result.css:42-67 */
.xy-result--sm {
  --xy-result-padding: 28px 16px;
  --xy-result-gap: 10px;
  --xy-result-icon-size: 52px;
  --xy-result-icon-shell-size: 84px;
  --xy-result-title-font-size: 18px;
  --xy-result-description-font-size: 13px;
  --xy-result-extra-margin-top: 6px;
}

.xy-result--lg {
  --xy-result-padding: 52px 24px;
  --xy-result-gap: 16px;
  --xy-result-icon-size: 96px;
  --xy-result-icon-shell-size: 136px;
  --xy-result-title-font-size: 30px;
  --xy-result-description-font-size: 15px;
  --xy-result-extra-margin-top: 12px;
}

.xy-result--card {
  border: 1px solid var(--xy-result-card-border-color);
  border-radius: var(--xy-radius-lg);
  background: var(--xy-result-card-background);
  box-shadow: var(--xy-result-card-shadow);
}

/* packages/theme/src/components/result.css:146-172 */
.xy-result.is-neutral {
  --xy-result-accent-color: var(--xy-info);
  --xy-result-accent-surface: color-mix(
    in srgb,
    var(--xy-info) 10%,
    var(--xy-bg-subtle)
  );
  --xy-result-accent-border: color-mix(
    in srgb,
    var(--xy-info) 16%,
    var(--xy-border-subtle)
  );
}

.xy-result.is-primary {
  --xy-result-accent-color: var(--xy-brand);
  --xy-result-accent-surface: color-mix(
    in srgb,
    var(--xy-brand-soft) 76%,
    var(--xy-bg-subtle)
  );
  --xy-result-accent-border: color-mix(
    in srgb,
    var(--xy-brand) 16%,
    var(--xy-border-subtle)
  );
}

// packages/components/result/__tests__/result.spec.ts:50-71
  it("显式 icon 优先于 status 决定图标与语义色", () => {
    const wrapper = mount(XyResult, {
      props: {
        icon: "error",
        status: "success"
      }
    });

    expect(wrapper.classes()).toContain("is-danger");
    expect(wrapper.find('[data-icon="mdi:close-circle-outline"]').exists()).toBe(true);
  });

  it("支持后台状态码语义映射", () => {
    const wrapper = mount(XyResult, {
      props: {
        status: "403"
      }
    });

    expect(wrapper.classes()).toContain("is-warning");
    expect(wrapper.find('[data-icon="mdi:shield-lock-outline"]').exists()).toBe(true);
  });

// vitest.setup.ts:1-20
import { defineComponent, h } from "vue";
import { vi } from "vitest";

// 全局 mock @iconify/vue，解决 mdi.ts 使用 addCollection 的问题
vi.mock("@iconify/vue", () => ({
  Icon: defineComponent({
    name: "MockIconifyIcon",
    inheritAttrs: false,
    props: {
      icon: {
        type: String,
        required: true
      }
    },
    setup(props, { attrs }) {
      return () => h("svg", { ...attrs, "data-icon": props.icon });
    }
  }),
  addCollection: vi.fn()
}));

// packages/components/result/__tests__/result.spec.ts:87-121
  it("默认插槽和 extra 插槽分别渲染内容区与操作区", () => {
    const wrapper = mount(XyResult, {
      slots: {
        default: "<p class='result-content'>补充说明</p>",
        extra: "<button class='result-action'>返回列表</button>"
      }
    });

    expect(wrapper.find(".xy-result__content .result-content").exists()).toBe(true);
    expect(wrapper.find(".xy-result__extra .result-action").exists()).toBe(true);
  });

  it("icon 插槽可以覆盖默认图标", () => {
    const wrapper = mount(XyResult, {
      slots: {
        icon: "<span class='custom-icon'>自定义图标</span>"
      }
    });

    expect(wrapper.find(".custom-icon").exists()).toBe(true);
    expect(wrapper.find(".xy-result__icon-symbol").exists()).toBe(false);
  });

  it("未传 size 时跟随 ConfigProvider 的全局尺寸", () => {
    const wrapper = mount(XyConfigProvider, {
      props: {
        size: "sm"
      },
      slots: {
        default: () => h(XyResult)
      }
    });

    expect(wrapper.find(".xy-result")?.classes()).toContain("xy-result--sm");
  });

// tests/types/fixtures/result.ts:45-65
const invalidStatus: ResultProps = {
  // @ts-expect-error invalid result status should be rejected
  status: "blocked"
};

void invalidStatus;

const invalidVariant: ResultProps = {
  // @ts-expect-error invalid variant should be rejected
  variant: "panel"
};

void invalidVariant;


const invalidSize: ResultProps = {
  // @ts-expect-error invalid size should be rejected
  size: "xxl"
};

void invalidSize;

<!-- apps/docs/examples/result/status.vue:1-52 -->
<template>
  <div class="result-status-grid">
    <xy-result
      v-for="item in items"
      :key="item.status"
      :status="item.status"
      :title="item.title"
      :description="item.description"
      size="sm"
    />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    status: "neutral",
    title: "等待补充",
    description: "当前还缺少负责人和发布时间，先补齐再提交审批。"
  },
  {
    status: "primary",
    title: "正在处理中",
    description: "审批流已发起，系统会在节点变化时自动同步状态。"
  },
  {
    status: "success",
    title: "已完成",
    description: "同步任务已经落库，相关成员会收到站内通知。"
  },
  {
    status: "warning",
    title: "需要关注",
    description: "存在 2 项边界配置未确认，建议先回看参数。"
  },
  {
    status: "danger",
    title: "执行失败",
    description: "第三方接口超时，请稍后重试或切换备用通道。"
  },
  {
    status: "403",
    title: "无访问权限",
    description: "当前账号缺少该页面权限，请联系管理员开通。"
  },
  {
    status: "404",
    title: "页面不存在",
    description: "目标资源可能已经移动，建议返回工作台重新进入。"
  }
] as const;
</script>

<!-- apps/docs/examples/result/custom.vue:1-26 -->
<template>
  <xy-result
    title="请先补齐发版说明"
    description="模板内容已生成，你还需要确认风险项、回滚策略和通知范围。"
  >
    <template #icon>
      <div class="custom-result-icon">
        <xy-icon icon="mdi:file-document-edit-outline" :size="54" />
      </div>
    </template>

    <div class="custom-result-content">
      <p class="custom-result-content__intro">建议优先补充以下三项：</p>
      <ul class="custom-result-content__list">
        <li class="custom-result-content__item">影响范围与回滚入口</li>
        <li class="custom-result-content__item">灰度批次和负责人</li>
        <li class="custom-result-content__item">上线后 30 分钟观测指标</li>
      </ul>
    </div>

    <template #extra>
      <xy-button type="primary">继续编辑</xy-button>
      <xy-button text>稍后处理</xy-button>
    </template>
  </xy-result>
</template>