xiangyuan-app/src/components/display/loading/LoadingPage.vue

<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import Text, { type TextProps } from '@/components/basic/Text.vue';
import FlexView, { type FlexProps } from '@/components/layout/FlexView.vue';
import { propGetThemeVar, useTheme, type ViewStyle } from '@/components/theme/ThemeDefine';

export interface LoadingPageProps extends FlexProps {
  /**
   * 加载器下方文字
   */
  loadingText?: string,
  /**
   * 加载器下方文字样式
   */
  loadingTextProps?: TextProps,
  /**
   * 加载器颜色
   * @default Color.primary
   */
  indicatorColor?: string,
  /**
   * 加载器样式
   */
  indicatorStyle?: ViewStyle,
  /**
   * 容器自定义样式
   */
  innerStyle?: ViewStyle,
}

const themeContext = useTheme();

const props = withDefaults(defineProps<LoadingPageProps>(), {
  loadingText: '加载中',
  indicatorColor: () => propGetThemeVar('LoadingPageIndicatorColor', 'primary'),
});
</script>

<template>
  <FlexView 
    position="absolute" 
    direction="column"
    :backgroundColor="themeContext.resolveThemeColor('LoadingPageBackgroundColor', 'mask.white')"
    :left="0" 
    :right="0" 
    :top="0"
    :bottom="0"
    center
    v-bind="$attrs"
  >
    <ActivityIndicator
      :color="indicatorColor"
      :innerStyle="indicatorStyle"
      :size="50"
    />
    <Text
      v-if="loadingText"
      v-bind="loadingTextProps"
      :text="loadingText"
    />
    <slot />
  </FlexView>
</template>