xiangyuan-app/src/components/display/title/SubTitle.vue

<script setup lang="ts">
import { useTheme, type ThemePaddingMargin, type ThemePaddingMarginProp } from '@/components/theme/ThemeDefine';
import Icon from '@/components/basic/Icon.vue';
import Text, { type TextProps } from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';

defineEmits([ 'moreClicked' ])
const props = withDefaults(defineProps<{
  title?: string,
  moreText?: string,
  showMore?: boolean,
  badgeColor?: string,
  backgroundColor?: string,
  padding?: ThemePaddingMarginProp,
  titleProps?: TextProps,
  badgeStyle?: object,
}>(), {
  title: '',
  moreText: '更多',
  showMore: false,
  badgeColor: 'primary',
  padding: () => [ 0, 0, 30, 0 ],
})

const theme = useTheme();

const finalBadgeStyle = theme.useThemeStyle({
  width: '10rpx',
  height: '32rpx',
  borderRadius: '5rpx',
  marginRight: '14rpx',
  ...props.badgeStyle,
})
</script>

<template>
  <FlexRow 
    justify="space-between"
    align="center" 
    :padding="padding" 
    :backgroundColor="backgroundColor"
  >
    <FlexRow align="center">
      <slot name="icon">
        <view :style="{
          ...finalBadgeStyle,
          backgroundColor: theme.resolveThemeColor(badgeColor),
        }"></view>
      </slot>
      <slot name="titlePrefix" />
      <slot name="title">
        <Text fontConfig="h4" :text="title" v-bind="titleProps" />
      </slot>
      <slot name="titleSuffix" />
    </FlexRow>
    <FlexRow align="center">
      <slot name="right" />
      <Touchable v-if="showMore" align="center" touchable @click="$emit('moreClicked')">
        <Text fontConfig="subText" :text="moreText" />
        <Width :size="10" />
        <Icon icon="arrow-right" :size="26" />
      </Touchable>
    </FlexRow>
  </FlexRow>
</template>