🎨 按要求修改问题

src/common/composeabe/TabControl.ts

@@ -5,6 +5,15 @@ export interface TabControlItem {
   [key: string]: any,
 }
 
+export function useTabId(options: {
+  idStart?: number,
+}) {
+  let idStart = options.idStart ?? 0
+  return {
+    nextId: () => idStart++,
+  }
+}
+
 export function useTabControl(options: {
   tabs?: TabControlItem[],
   onTabChange?: (tab: number, tabId: number) => void,

src/pages/article/common/DetailTabPage.vue

@@ -42,7 +42,7 @@
 
           <view class="d-flex flex-col radius-l bg-light p-25 mt-3" style="min-height:70vh">
             <!-- 简介 -->
-            <template v-if="tabCurrentId == 0">
+            <template v-if="tabCurrentId == TAB_ID_INTRO">
               <Parse
                 v-if="loader.content.value.intro"
                 :content="loader.content.value.intro"
@@ -56,7 +56,7 @@
               <text v-if="emptyContent">暂无简介</text>
             </template>
             <!-- 图片 -->
-            <template v-else-if="tabCurrentId == 1">
+            <template v-else-if="tabCurrentId == TAB_ID_IMAGES">
               <slot name="imagesPrefix" />
               <ImageGrid
                 :images="loader.content.value.images"
@@ -66,7 +66,7 @@
               />
             </template>
             <!-- 视频 -->
-            <template v-else-if="tabCurrentId == 2">
+            <template v-else-if="tabCurrentId == TAB_ID_VIDEO">
               <video
                 v-if="loader.content.value.video"
                 class="w-100 video"
@@ -77,7 +77,7 @@
               />
             </template>
             <!-- 音频 -->
-            <template v-else-if="tabCurrentId == 3">
+            <template v-else-if="tabCurrentId == TAB_ID_AUDIO">
               <video 
                 v-if="loader.content.value.audio"
                 class="w-100 video"
@@ -106,6 +106,7 @@ import type { GetContentDetailItem } from "@/api/CommonContent";
 import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
 import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
 import { useTabControl, type TabControlItem } from "@/common/composeabe/TabControl";
+import { requireNotNull } from "@imengyu/imengyu-utils";
 import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
 import ImageGrid from "@/pages/parts/ImageGrid.vue";
 import ImageSwiper from "@/pages/parts/ImageSwiper.vue";
@@ -117,9 +118,17 @@ import Tabs from "@/components/nav/Tabs.vue";
 import LikeFooter from "@/pages/parts/LikeFooter.vue";
 import ArticleCorrect from "@/pages/parts/ArticleCorrect.vue";
 
+export interface DetailTabPageTabsArray {
+  tabsArray: Ref<TabControlItem[]>,
+  getTabById(id: number): TabControlItem | undefined;
+}
+
 const props = defineProps({
   load: {
-    type: Function as PropType<(id: number, tabsArray: Ref<TabControlItem[]>) => Promise<GetContentDetailItem>>,
+    type: Function as PropType<(
+      id: number, 
+      tabsArray: DetailTabPageTabsArray
+    ) => Promise<GetContentDetailItem>>,
     default: null,
   },
   extraTabs: {
@@ -140,16 +149,21 @@ const emptyContent = computed(() => {
   return !(loader.content.value?.intro as string || '').trim() && !(loader.content.value?.content || '').trim();
 })
 
+const TAB_ID_INTRO = 0;
+const TAB_ID_IMAGES = 1;
+const TAB_ID_VIDEO = 2;
+const TAB_ID_AUDIO = 3;
+
 const loader = useSimplePageContentLoader<
   GetContentDetailItem, 
   { id: number }
 >(async (params) => {
   if (!params)
     throw new Error("!params");
-  const d = await props.load(params.id, tabsArray);
-  tabsArray.value[1].visible = Boolean(d.images && d.images.length > 1);
-  tabsArray.value[2].visible = Boolean(d.video);
-  tabsArray.value[3].visible = Boolean(d.audio);
+  const d = await props.load(params.id, tabsArrayObject);
+  requireNotNull(tabsArrayObject.getTabById(TAB_ID_IMAGES)).visible = Boolean(d.images && d.images.length > 1);
+  requireNotNull(tabsArrayObject.getTabById(TAB_ID_VIDEO)).visible = Boolean(d.video);
+  requireNotNull(tabsArrayObject.getTabById(TAB_ID_AUDIO)).visible = Boolean(d.audio);
 
   if (d.title)
     uni.setNavigationBarTitle({ title: d.title });
@@ -172,22 +186,22 @@ const {
 } = useTabControl({
   tabs: [
     {
-      id: 0,
+      id: TAB_ID_INTRO,
       text: '简介',
       visible: true,
     },
     {
-      id: 1,
+      id: TAB_ID_IMAGES,
       text: '图片',
       visible: true,
     },
     {
-      id: 2,
+      id: TAB_ID_VIDEO,
       text: '视频',
       visible: true,
     },
     {
-      id: 3,
+      id: TAB_ID_AUDIO,
       text: '音频',
       visible: true,
     },
@@ -198,6 +212,13 @@ const {
   },
 })
 
+const tabsArrayObject : DetailTabPageTabsArray = {
+  tabsArray,
+  getTabById(id: number) {
+    return tabsArray.value.find(t => t.id == id);
+  }
+}
+
 useLoadQuerys({ id : 0 }, (p) => loader.loadData(p));
 
 defineExpose({

src/pages/inhert/artifact/details.vue

@@ -4,25 +4,25 @@
     :load="load"
     :extraTabs="[
       {
-        id: 5,
+        id: TAB_ID_VR,
         text: 'VR参观',
         width: 180,
         visible: true,
       },
       {
-        id: 6,
+        id: TAB_ID_PROTECTED_AREA,
         text: '保护范围',
         width: 180,
         visible: true,
       },
       {
-        id: 7,
+        id: TAB_ID_ENVIRONMENT,
         text: '建筑环境',
         width: 180,
         visible: true,
       },
       {
-        id: 8,
+        id: TAB_ID_VALUE,
         text: '价值评估',
         width: 180,
         visible: true,
@@ -30,7 +30,7 @@
     ]"
   >
     <template #extraTabs="{ content, tabCurrentId }">
-      <template v-if="tabCurrentId==5">
+      <template v-if="tabCurrentId==TAB_ID_VR">
         <!-- VR参观 -->
         <view class="d-flex flex-row justify-center p-5">
           <Button @click="handleGoToVr(content.vr as string)">
@@ -39,15 +39,15 @@
           </Button>
         </view>
       </template>
-      <template v-if="tabCurrentId==6">
+      <template v-if="tabCurrentId==TAB_ID_PROTECTED_AREA">
         <!-- 保护范围 -->
         <Parse :content="content.protectedArea" :tagStyle="commonParserStyle" />
       </template>
-      <template v-if="tabCurrentId==7">
+      <template v-if="tabCurrentId==TAB_ID_ENVIRONMENT">
         <!-- 建筑环境 -->
         <Parse :content="content.environment" :tagStyle="commonParserStyle" />
       </template>
-      <template v-if="tabCurrentId==8">
+      <template v-if="tabCurrentId==TAB_ID_VALUE">
         <!-- 价值评估 -->
         <Parse :content="content.value" :tagStyle="commonParserStyle" />
       </template>
@@ -92,24 +92,30 @@
   </DetailTabPage>
 </template>
 <script setup lang="ts">
-import type { TabControlItem } from "@/common/composeabe/TabControl";
+import { useTabId, type TabControlItem } from "@/common/composeabe/TabControl";
 import { ref, type Ref } from "vue";
 import { navTo } from "@/components/utils/PageAction";
 import UnmoveableContent from "@/api/inheritor/UnmoveableContent";
 import commonParserStyle from "@/common/style/commonParserStyle";
 import IntroBlock from "@/pages/article/common/IntroBlock.vue";
-import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
+import DetailTabPage, { type DetailTabPageTabsArray } from "@/pages/article/common/DetailTabPage.vue";
 import { onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
 import Parse from "@/components/display/parse/Parse.vue";
 import Button from "@/components/basic/Button.vue";
 import Tag from "@/components/display/Tag.vue";
 
-async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
+const { nextId } = useTabId({ idStart: 5 });
+const TAB_ID_VR = nextId();
+const TAB_ID_PROTECTED_AREA = nextId();
+const TAB_ID_ENVIRONMENT = nextId();
+const TAB_ID_VALUE = nextId();
+
+async function load(id: number, tabsArray: DetailTabPageTabsArray) {
   const d = await UnmoveableContent.getContentDetail(id);
-  tabsArray.value[4].visible = Boolean(d.vr);
-  tabsArray.value[5].visible = Boolean(d.protectedArea);
-  tabsArray.value[6].visible = Boolean(d.environment);
-  tabsArray.value[7].visible = Boolean(d.value);
+  tabsArray.getTabById(TAB_ID_VR)!.visible = Boolean(d.vr);
+  tabsArray.getTabById(TAB_ID_PROTECTED_AREA)!.visible = Boolean(d.protectedArea);
+  tabsArray.getTabById(TAB_ID_ENVIRONMENT)!.visible = Boolean(d.environment);
+  tabsArray.getTabById(TAB_ID_VALUE)!.visible = Boolean(d.value); 
   return d;
 }
 

src/pages/inhert/inheritor/details.vue

@@ -4,19 +4,19 @@
     :load="load"
     :extraTabs="[
       {
-        id: 5,
+        id: TAB_ID_PRIZE,
         text: '荣誉奖项',
         width: 180,
         visible: true,
       },
       {
-        id: 6,
+        id: TAB_ID_ASSOCIATION_ME,
         text: '非遗项目',
         width: 180,
         visible: true,
       },
       {
-        id: 7,
+        id: TAB_ID_ICH_SITES,
         text: '传习所',
         visible: true,
       }
@@ -29,11 +29,11 @@
       </view>
     </template>
     <template #extraTabs="{ content, tabCurrentId }">
-      <template v-if="tabCurrentId==5">
+      <template v-if="tabCurrentId==TAB_ID_PRIZE">
         <!-- 荣誉奖项 -->
         <Parse :content="content.prize" :tagStyle="commonParserStyle" />
       </template>
-      <template v-else-if="tabCurrentId==6">
+      <template v-else-if="tabCurrentId==TAB_ID_ASSOCIATION_ME">
         <!-- 非遗项目 -->
         <CommonListPage 
           :showSearch="false"
@@ -46,7 +46,7 @@
           }"
         />
       </template>
-      <template v-else-if="tabCurrentId==6">
+      <template v-else-if="tabCurrentId==TAB_ID_ICH_SITES">
         <!-- 传习所 -->
         <CommonListPage 
           :showSearch="false"
@@ -127,7 +127,7 @@
   </DetailTabPage>
 </template>
 <script setup lang="ts">
-import type { TabControlItem } from "@/common/composeabe/TabControl";
+import { useTabId, type TabControlItem } from "@/common/composeabe/TabControl";
 import { ref, type Ref } from "vue";
 import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
 import RoundTags from "@/pages/parts/RoundTags.vue";
@@ -136,16 +136,21 @@ import SeminarContent from "@/api/inheritor/SeminarContent";
 import InheritorContent from "@/api/inheritor/InheritorContent";
 import ProjectsContent from "@/api/inheritor/ProjectsContent";
 import IntroBlock from "@/pages/article/common/IntroBlock.vue";
-import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
+import DetailTabPage, { type DetailTabPageTabsArray } from "@/pages/article/common/DetailTabPage.vue";
 import CommonListPage from "@/pages/article/common/CommonListPage.vue";
 import Parse from "@/components/display/parse/Parse.vue";
 import Image from "@/components/basic/Image.vue";
 
-async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
+const { nextId } = useTabId({ idStart: 5 });
+const TAB_ID_PRIZE = nextId();
+const TAB_ID_ASSOCIATION_ME = nextId();
+const TAB_ID_ICH_SITES = nextId();
+
+async function load(id: number, tabsArray: DetailTabPageTabsArray) {
   const d = await InheritorContent.getContentDetail(id);
-  tabsArray.value[4].visible = Boolean(d.prize);
-  tabsArray.value[5].visible = Boolean(d.associationMeList && d.associationMeList.length > 0);
-  tabsArray.value[6].visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
+  tabsArray.getTabById(TAB_ID_PRIZE)!.visible = Boolean(d.prize);
+  tabsArray.getTabById(TAB_ID_ASSOCIATION_ME)!.visible = Boolean(d.associationMeList && d.associationMeList.length > 0);
+  tabsArray.getTabById(TAB_ID_ICH_SITES)!.visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
   d.titleBox = Boolean(d.deathBirth);
   return d;
 }

src/pages/inhert/intangible/DetailsCommon.vue

@@ -4,35 +4,35 @@
     :load="load"
     :extraTabs="[
       {
-        id: 5,
+        id: TAB_ID_ICH_SITES,
         text: '传习所',
         visible: true,
       },
       {
-        id: 6,
+        id: TAB_ID_INHERITORS,
         text: '传承人',
         visible: true,
       },
       {
-        id: 7,
+        id: TAB_ID_PEDIGREE,
         text: '传承谱系',
         width: 180,
         visible: true,
       },
       {
-        id: 8,
+        id: TAB_ID_WORKS,
         text: '非遗作品',
         width: 180,
         visible: true,
       },
       {
-        id: 9,
+        id: TAB_ID_ASSOCIATION_ME,
         text: '相关资讯',
         width: 180,
         visible: true,
       },
       {
-        id: 10,
+        id: TAB_ID_LOCATION,
         text: '地理位置',
         width: 180,
         visible: true,
@@ -40,7 +40,7 @@
     ]"
   >
     <template #extraTabs="{ content, tabCurrentId }">
-      <template v-if="tabCurrentId==5">
+      <template v-if="tabCurrentId==TAB_ID_ICH_SITES">
         <!-- 非遗传习中心 -->
         <CommonListPage 
           :showSearch="false"
@@ -53,7 +53,7 @@
           }"
         />
       </template>
-      <template v-else-if="tabCurrentId==6">
+      <template v-else-if="tabCurrentId==TAB_ID_INHERITORS">
         <!-- 非遗传承人 -->
         <CommonListPage 
           :showSearch="false"
@@ -66,12 +66,13 @@
           }"
         />
       </template>
-      <template v-else-if="tabCurrentId==7">
+      <template v-else-if="tabCurrentId==TAB_ID_PEDIGREE">
+        <!-- 传承谱系 -->
         <view class="d-flex flex-col mt-3 mb-2">
           <Parse :content="content.pedigree" :tagStyle="commonParserStyle" />
         </view>
       </template>
-      <template v-else-if="tabCurrentId==8">
+      <template v-else-if="tabCurrentId==TAB_ID_WORKS">
         <!-- 非遗作品 -->
         <CommonListPage 
           :showSearch="false"
@@ -84,7 +85,7 @@
           }"
         />
       </template>
-      <template v-else-if="tabCurrentId==9">
+      <template v-else-if="tabCurrentId==TAB_ID_ASSOCIATION_ME">
         <!-- 相关资讯 -->
         <CommonListPage 
           :showSearch="false"
@@ -97,7 +98,7 @@
           }"
         />
       </template>
-      <template v-else-if="tabCurrentId==10">
+      <template v-else-if="tabCurrentId==TAB_ID_LOCATION">
         <!-- 地理位置 -->
         <view class="d-flex flex-col mt-3 mb-2">
          <HomeTitle title="地理位置" />
@@ -213,15 +214,15 @@
   </DetailTabPage>
 </template>
 <script setup lang="ts">
-import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
-import ProjectsContent from "@/api/inheritor/ProjectsContent";
-import CommonListPage from "@/pages/article/common/CommonListPage.vue";
-import IntroBlock from "@/pages/article/common/IntroBlock.vue";
+import { ref } from "vue";
 import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
-import type { TabControlItem } from "@/common/composeabe/TabControl";
-import { h, ref, type Ref } from "vue";
+import { useTabId } from "@/common/composeabe/TabControl";
 import { navTo } from "@/components/utils/PageAction";
 import { StringUtils } from "@imengyu/imengyu-utils";
+import DetailTabPage, { type DetailTabPageTabsArray } from "@/pages/article/common/DetailTabPage.vue";
+import ProjectsContent from "@/api/inheritor/ProjectsContent";
+import CommonListPage from "@/pages/article/common/CommonListPage.vue";
+import IntroBlock from "@/pages/article/common/IntroBlock.vue";
 import InheritorContent from "@/api/inheritor/InheritorContent";
 import ProductsContent from "@/api/inheritor/ProductsContent";
 import SeminarContent from "@/api/inheritor/SeminarContent";
@@ -241,18 +242,26 @@ defineProps({
   },
 })
 
-async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
+const { nextId } = useTabId({ idStart: 4 });
+const TAB_ID_ICH_SITES = nextId();
+const TAB_ID_INHERITORS = nextId();
+const TAB_ID_PEDIGREE = nextId();
+const TAB_ID_WORKS = nextId();
+const TAB_ID_ASSOCIATION_ME = nextId();
+const TAB_ID_LOCATION = nextId();
+
+async function load(id: number, tabsArray: DetailTabPageTabsArray) {
   const d = await ProjectsContent.getContentDetail(
     id, 
     undefined, 
     querys.value.modelId > 0 ? querys.value.modelId : undefined
   );
-  tabsArray.value[4].visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
-  tabsArray.value[5].visible = Boolean(d.inheritorsList && (d.inheritorsList as any[]).length > 0);
-  tabsArray.value[6].visible = Boolean(d.pedigree);
-  tabsArray.value[7].visible = Boolean(d.worksList && (d.worksList as any[]).length > 0);
-  tabsArray.value[8].visible = Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0);
-  tabsArray.value[9].visible = Boolean(d.longitude && d.latitude);
+  tabsArray.getTabById(TAB_ID_ICH_SITES)!.visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
+  tabsArray.getTabById(TAB_ID_INHERITORS)!.visible = Boolean(d.inheritorsList && (d.inheritorsList as any[]).length > 0);
+  tabsArray.getTabById(TAB_ID_PEDIGREE)!.visible = Boolean(d.pedigree);
+  tabsArray.getTabById(TAB_ID_WORKS)!.visible = false && Boolean(d.worksList && (d.worksList as any[]).length > 0);
+  tabsArray.getTabById(TAB_ID_ASSOCIATION_ME)!.visible = Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0);
+  tabsArray.getTabById(TAB_ID_LOCATION)!.visible = Boolean(d.longitude && d.latitude);
   return d;
 }
 async function loadSubList(page: number, pageSize: number, content: any, subList: string) {