xiangyuan-app/src/pages/home/village/introd/card/dynamic/BlockGames.vue

<template>
  <!-- 活力乡源 -->
  <HomeTitle :title="node.props?.title" />
  <ProvideVar :vars="{
    GridItemIconSize: 90,
    GridItemBackgroundColor: 'transparent',
    GridItemPaddingHorizontal: 0,
    GridItemPaddingVertical: 8,
  }">
    <Grid :borderGrid="false" :mainAxisCount="4">
      <GridItem
        v-for="item in node.props?.items" 
        :key="item.title"
        :title="item.title"
        :icon="item.icon"
        touchable 
        @click="() => context.getScriptEngine().execute(item.handler, node.getNodeScriptContext?.())" 
      />
    </Grid>
  </ProvideVar>
</template>

<script lang="ts" setup>
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import type { DynamicXNode, DynamicXNodeContext } from '@/components/dynamic/DynamicX';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';

const props = withDefaults(defineProps<{
  node: DynamicXNode;
  context: DynamicXNodeContext;
}>(), {
})
</script>