xiangyuan-app/src/pages/home/village/introd/card/blocks/GridButtonBlock4.vue

<template>
  <!-- 标题+4网格按钮+带图标按钮 -->
  <HomeTitle :title="title">
    <template v-if="titleRightButtons" #right>
      <FlexRow align="center" gap="gap.md">
        <FrameButton
          v-for="item in titleRightButtons"
          :key="item.text"
          :text="item.text" 
          :size="item.size || 'small'" 
          :primary="item.primary || false"
          @click="() => emit('click', item.handler)"
        />
        <Width :size="15" />
      </FlexRow>
    </template>
  </HomeTitle>
  <Height height="gap.md" />
  <Grid :borderGrid="false" :mainAxisCount="4">
    <GridItem 
      v-for="item in items" 
      :key="item.title"
      :title="item.title"
      :icon="item.icon"
      touchable 
      @click="() => emit('click', item.handler)" 
    />
  </Grid>
</template>

<script setup lang="ts">
import FrameButton from '@/common/components/FrameButton.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';

const props = defineProps<{
  title: string,
  titleRightButtons?: {
    handler: string,
    text?: string,
    icon?: string,
    primary?: boolean,
    size?: "large" | "medium" | "small",
  }[],
  items: {
    title: string,
    icon: string,
    handler: string,
  }[],
}>()

const emit = defineEmits<{
  (e: 'click', script: string): void
}>()
</script>