xiangyuan-gov-app/src/components/display/Preview.vue

<template>
  <FlexCol :backgroundColor="backgroundColor">
    <!-- 标题区域 -->
    <slot name="title">
      <IconTextBlock
        :padding="padding"
        :title="title"
        :titleProps="titleProps"
        :desc="desc"
        :extra="extra"
        :extraProps="extraProps"
      />
    </slot>
    <Divider color="border.light" :size="2" />
    <!-- 项目区域 -->
    <slot name="items">
      <FlexCol :padding="padding">
        <PreviewItem
          v-for="(item,k) in items"
          :key="k"
          :title="item.title"
          :value="item.value"
          :titleProps="titleProps"
          :titleWidth="titleWidth"
          :titleColor="titleColor"
          :valueProps="valueProps"
          :valueColor="valueColor"
          :valueType="item.valueType"
          :gap="itemGap"
          :margin="itemVerticalPadding"
        />
      </FlexCol>
    </slot>
    <Divider color="border.light" :size="2" />
    <!-- 操作区域 -->
    <slot name="actions">
      <FlexRow align="stretch">
        <Button
          v-for="(item,k) in actions"
          :key="k"
          :text="item.text"
          :textColor="item.color"
          :innerStyle="{ flex: 1, minHeight: '60rpx' }"
          :radius="0"
          @click="item.onClick?.(item)"
          type="text"
          v-bind="item.props"
        />
      </FlexRow>
    </slot>
  </FlexCol>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import FlexCol from '../layout/FlexCol.vue';
import IconTextBlock from './block/IconTextBlock.vue';
import PreviewItem, { type PreviewItemType } from './PreviewItem.vue';
import type { TextProps } from '../basic/Text.vue';
import Divider from './Divider.vue';
import FlexRow from '../layout/FlexRow.vue';
import type { ButtonProp } from '../basic/Button.vue';
import Button from '../basic/Button.vue';

const props = withDefaults(defineProps<{
  /**
   * 大标题
   */
  title?: string,
  /**
   * 副标题
   */
  desc?: string,
  /**
   * 大标题右侧额外信息
   */
  extra?: string,
  /**
   * 大标题右侧额外信息文字属性
   */
  extraProps?: TextProps,
  /**
   * 卡片背景颜色
   */
  backgroundColor?: string,
  /**
   * 项目列表
   */
  items?: {
    /**
     * 项目标题
     */
    title: string,
    /**
     * 项目值
     */
    value: string | string[],
    /**
     * 项目值类型
     * * text：普通文本
     * * image：图片
     */
    valueType?: PreviewItemType,
  }[],
  /**
   * 操作按钮列表
   */
  actions?: {
    /**
     * 操作按钮文字
     */
    text: string,
    /**
     * 操作按钮文字颜色
     */
    color?: string,
    /**
     * 操作按钮文字属性
     */
    props?: ButtonProp,
    /**
     * 操作按钮点击事件
     */
    onClick?: (item: { text: string, color?: string, props?: ButtonProp }) => void,
  }[],
  /**
   * 项目标题文字属性
   */
  titleProps?: TextProps,
  /**
   * 项目标题文字颜色
   * @default text.second
   */
  titleColor?: string,
  /**
   * 项目标题宽度
   * @default 300
   */
  titleWidth?: string|number,
  /**
   * 项目值文字颜色
   * @default text.content
   */
  valueColor?: string,
  /**
   * 项目值文字属性
   */
  valueProps?: TextProps,

}>(), {
  backgroundColor: () => propGetThemeVar('PreviewBackgroundColor', 'white'),
  extraProps: () => propGetThemeVar('PreviewExtraTextProps', {}),
  titleColor: () => propGetThemeVar('PreviewTitleColor', 'text.second'),
  valueColor: () => propGetThemeVar('PreviewValueColor', 'text.content'),
  titleWidth: () => propGetThemeVar('PreviewItemTitleWidth', 300),
  titleProps: () => propGetThemeVar('PreviewItemTitleTextProps', {}),
  valueProps: () => propGetThemeVar('PreviewItemValueTextProps', {}),
});
const theme = useTheme();
const padding = computed(() => theme.getVar('PreviewPadding', 30));
const itemVerticalPadding = computed(() => theme.getVar('PreviewItemVerticalPadding', 10));
const itemGap = computed(() => theme.getVar('PreviewItemGap', 20));

</script>