minnan/src/pages/home/index.vue

<template>
  <view v-for="(tab, i) in tabsDefine" :key="tab.title">
    <view v-show="currentTab === i">
      <Home v-if="tab.type === 'home' && pageDefine" 
        :pageDefine="pageDefine" 
        :pageContentDefine="pageContentDefine" 
      />
      <FlexCol v-else-if="tab.type === 'list'">
        <StatusBarSpace backgroundColor="background.page" />
        <NavBar leftButton="custom" backgroundColor="background.page">
          <template #left>
            <Image
              v-if="tab.pageHeadImage"
              :src="tab.pageHeadImage"
              :width="tab.pageHeadImageWidth"
              mode="widthFix"
              :innerStyle="{ 
                marginLeft: '30rpx', marginTop: '30rpx' ,
                ...(tab.pageHeadImageStyle || {}),
              }"
            />
          </template>
        </NavBar>
        <CommonCategoryList :pageConfigName="tab.pageConfigName" />
        <Height :height="150" />
      </FlexCol>
      <User v-else-if="tab.type === 'user'" />
    </view>
  </view>
  <TabBar
    v-model:selectedTabIndex="currentTab"
    :fixed="!isEditorPreview"
    xbarSpace
    :innerStyle="{
      zIndex: 999 ,
      boxShadow: '0 -2rpx 4rpx rgba(0, 0, 0, 0.1)',
      backdropFilter: 'blur(10px)',
      backgroundColor: 'rgba(246, 242, 231, 0.7)',
    }"
  >
    <TabBarItem 
      v-for="tab in tabsDefine"
      :key="tab.title"
      :icon="tab.icon"
      :activeIcon="tab.activeIcon"
      :hump="tab.hump"
      :humpHeight="tab.humpHeight"
      :humpSpace="tab.humpSpace"
      :iconSize="tab.iconSize"
      :text="tab.title"
    />
  </TabBar>
</template>

<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { injectCommonCategory } from '../article/data/CommonCategoryGlobalLoader';
import { type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import Image from '@/components/basic/Image.vue';
import Height from '@/components/layout/space/Height.vue';
import CommonCategoryList from '../article/data/CommonCategoryList.vue';
import Home from './home.vue';
import User from '../user/index.vue';

const commonCategory = injectCommonCategory();
const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'home'));
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeCommonCategoryHomeDefine);
const isEditorPreview = inject('editorPreviewMark', false);

const tabsDefine = computed(() => pageContentDefine.value?.props.tabs.filter((item) => item.visible !== false));
const currentTab = ref(0);

onShareTimeline(() => {
  return {}; 
})
onShareAppMessage(() => {
  return {}; 
})
</script>

<style lang="scss">
</style>