xiangyuan-app/src/components/feedback/Result.vue

<template>
  <FlexCol center>
    <Icon v-if="icon" :size="themeVars.ResultIconSize" :icon="icon" />
    <Icon v-else :size="themeVars.ResultIconSize" :icon="defaultIconByStatus" :color="defaultIconColor" />
    <Height :size="themeVars.ResultTitleMarginTop" />
    <Text
      :fontSize="themeVars.ResultTitleFontSize"
      :color="themeVars.ResultTitleColor"
      :bold="themeVars.ResultTitleBold"
      align="center"
      :text="title"
    />
    <Height :size="themeVars.ResultDescriptionMarginTop" />
    <Text
      :fontSize="themeVars.ResultDescriptionFontSize"
      :color="themeVars.ResultDescriptionColor"
      :bold="themeVars.ResultDescriptionBold"
      align="center"
      :text="description"
    />
    <slot />
  </FlexCol>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Icon from '../basic/Icon.vue';
import Text from '../basic/Text.vue';
import FlexCol from '../layout/FlexCol.vue';
import Height from '../layout/space/Height.vue';
import { useTheme } from '../theme/ThemeDefine';

export interface ResultProps {
  /**
   * 标题
   */
  title?: string,
  /**
   * 描述
   */
  description?: string,
  /**
   * 标题
   */
  icon?: string,
  /**
   * 状态类型
   */
  status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
}
const props = withDefaults(defineProps<ResultProps>(), {
  status: 'info',
})

const themeContext = useTheme();

const defaultIconByStatus = computed(() => {
  switch (props.status) {
    default:
    case 'info': return themeContext.getVar('ResultIconInfo', 'prompt-filling');
    case 'success': return themeContext.getVar('ResultIconSuccess', 'success-filling');
    case 'error': return themeContext.getVar('ResultIconError', 'delete-filling');
    case 'waiting': return themeContext.getVar('ResultIconWaiting', 'clock-filling');
    case 'warning': return themeContext.getVar('ResultIconWarning', 'warning-filling');
  }
});
const defaultIconColor = computed(() => {
  switch (props.status) {
    default:
    case 'info': return themeContext.resolveThemeColor('ResultColorInfo', 'primary');
    case 'success': return themeContext.resolveThemeColor('ResultColorSuccess', 'success');
    case 'error': return themeContext.resolveThemeColor('ResultColorError', 'danger');
    case 'waiting': return themeContext.resolveThemeColor('ResultColorWaiting', 'primary');
    case 'warning': return themeContext.resolveThemeColor('ResultColorWarning', 'warning');
  }
});

const themeVars = themeContext.getVars({
  ResultIconSize: 100,
  ResultTitleFontSize: 36,
  ResultTitleColor: 'black',
  ResultTitleBold: true,
  ResultTitleMarginTop: 10,
  ResultDescriptionFontSize: 28,
  ResultDescriptionColor: 'text.second',
  ResultDescriptionBold: false,
  ResultDescriptionMarginTop: 10,
});


</script>