feat: 详情页，招商方向修改

src/components/detail/DetailInfo.vue

@@ -3,7 +3,7 @@
     <div v-for="(line, index) of infos" :key="index" class="min-h-10 inline-flex w-full">
       <div v-for="col in line" :key="col.name" class="flex flex-1 text-xs text-[#1A1A1A]">
         <div
-          class="flex w-[160px] items-center bg-[#FAFAFC] px-[30px] py-[10px] leading-5"
+          class="flex w-[160px] bg-[#FAFAFC] px-[30px] py-[10px] leading-5"
           :class="{ '!w-[130px] !px-5': col.smallMode }"
         >
           {{ col.name }}
@@ -28,6 +28,7 @@ export interface Info {
   /** 是否独占一行 */
   oneline?: boolean;
   smallMode?: boolean;
+  customClass?: string;
 }
 export type Infos = Info[][] | [];
 withDefaults(
@@ -58,6 +59,7 @@ const getValueClass = (col: Info, line: Info[]) => {
     classList.push('!px-5');
   }
 
+  classList.push(col.customClass);
   return classList.join(' ');
 };
 </script>

src/composable/useIndustryBase.ts

+import type { Infos } from '@/components/detail/DetailInfo.vue';
+import type { Investment } from '@/types/common';
+import { computed, type Ref } from 'vue';
+
+/**
+ * 详情页产业基础
+ */
+export function useIndustryBase(
+  detail: Ref<{
+    investmentDetails: Investment[];
+    primaryIndustry: string;
+  } | null>,
+) {
+  /** 招商方向，同名合并 */
+  const formatDirection = (list: Investment[] | null): Infos => {
+    const map = new Map<string, Investment[]>();
+    list?.forEach((info) => {
+      const { codeName } = info;
+      if (map.has(codeName)) {
+        map.get(codeName)!.push(info);
+      } else {
+        map.set(codeName, [info]);
+      }
+    });
+
+    const value = [...map.entries()]
+      .map(([type, items]) => {
+        return `${type}-${items.map(({ details }) => details).join('，')}；`;
+      })
+      .join('\n');
+
+    return value
+      ? [
+          [
+            {
+              name: '招商方向',
+              value,
+              oneline: true,
+              customClass: 'whitespace-pre-line',
+            },
+          ],
+        ]
+      : [];
+  };
+
+  /** 产业基础 */
+  const industryBase = computed(() => {
+    if (detail.value) {
+      const { investmentDetails, primaryIndustry } = detail.value;
+      const result: Infos = [
+        [
+          {
+            name: '主导产业',
+            value: primaryIndustry,
+            oneline: true,
+          },
+        ],
+        // ...(investmentDetails?.map<Info[]>(({ details, codeName }, index) => [
+        //   {
+        //     name: index === 0 ? '招商方向' : '',
+        //     value: codeName && details ? `${codeName}：${details}` : '',
+        //     oneline: true,
+        //   },
+        // ]) || []),
+        ...formatDirection(investmentDetails),
+      ];
+
+      return result;
+    } else {
+      return [];
+    }
+  });
+
+  return {
+    industryBase,
+  };
+}

src/views/develop/DevelopZoneDetail.vue

@@ -88,7 +88,7 @@
 
 <script lang="ts" setup>
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
-import DetailInfo, { type Info, type Infos } from '@/components/detail/DetailInfo.vue';
+import DetailInfo, { type Infos } from '@/components/detail/DetailInfo.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import { useDetail } from '@/composable/useDetail.ts';
 import { RequestUrl } from '@/types/api.ts';
@@ -106,6 +106,7 @@ import { DetailType } from '@/types/enum.ts';
 import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 import StarDetail from '@/components/detail/StarDetail.vue';
 import MapView from '@/components/map/MapView.vue';
+import { useIndustryBase } from '@/composable/useIndustryBase.ts';
 
 const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
 const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(
@@ -132,33 +133,6 @@ const [importantEnterpriseIndex, importantEnterpriseTabs, importantEnterprise] =
     computed(() => detail.value?.enterpriseList || []),
   );
 
-/** 产业基础 */
-const industryBase = computed(() => {
-  if (detail.value) {
-    const { investmentDetails, primaryIndustry } = detail.value;
-    const result: Infos = [
-      [
-        {
-          name: '主导产业',
-          value: primaryIndustry,
-          oneline: true,
-        },
-      ],
-      ...(investmentDetails?.map<Info[]>(({ details, codeName }, index) => [
-        {
-          name: index === 0 ? '招商方向' : '',
-          value: codeName && details ? `${codeName}：${details}` : '',
-          oneline: true,
-        },
-      ]) || []),
-    ];
-
-    return result;
-  } else {
-    return [];
-  }
-});
-
 /** 产业政策 */
 const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Policy>(
   ({ name, content }) => {
@@ -178,6 +152,8 @@ const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Pol
 
 const { open } = useJump();
 
+const { industryBase } = useIndustryBase(detail);
+
 /** 要素成本 */
 const elementCost = computed(() => {
   if (detail.value) {

src/views/industrial-park/IndustrialParkDetail.vue

@@ -105,7 +105,7 @@
 </template>
 
 <script lang="ts" setup>
-import DetailInfo, { type Info, type Infos } from '@/components/detail/DetailInfo.vue';
+import DetailInfo, { type Infos } from '@/components/detail/DetailInfo.vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import MapView from '@/components/map/MapView.vue';
@@ -123,6 +123,7 @@ import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
 import { DetailType, ExampleType } from '@/types/enum.ts';
 import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
+import { useIndustryBase } from '@/composable/useIndustryBase.ts';
 
 const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);
 
@@ -144,33 +145,7 @@ const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Pol
   computed(() => detail.value?.parkPolicy || []),
 );
 const { open } = useJump();
-
-/** 产业基础 */
-const industryBase = computed(() => {
-  if (detail.value) {
-    const { investmentDetails, primaryIndustry } = detail.value;
-    const result: Infos = [
-      [
-        {
-          name: '主导产业',
-          value: primaryIndustry,
-          oneline: true,
-        },
-      ],
-      ...(investmentDetails?.map<Info[]>(({ details, codeName }, index) => [
-        {
-          name: index === 0 ? '招商方向' : '',
-          value: codeName && details ? `${codeName}：${details}` : '',
-          oneline: true,
-        },
-      ]) || []),
-    ];
-
-    return result;
-  } else {
-    return [];
-  }
-});
+const { industryBase } = useIndustryBase(detail);
 
 /** 要素成本 */
 const elementCost = computed(() => {

src/views/industrial-park/IndustrialParkList.vue

@@ -11,7 +11,7 @@
       <FormModal></FormModal>
     </div>
     <div>
-      <p v-if="!isEmpty(searchParams)" class="text-sm font-medium text-[#4d4d4d] mb-7">
+      <p v-if="!isEmpty(searchParams)" class="mb-7 text-sm font-medium text-[#4d4d4d]">
         搜索到
         <span class="text-[#C0322B]">{{ totalCount }}</span>
         个相关产业园

src/views/user/MyDevelopDetail.vue

@@ -108,7 +108,7 @@ import CommonImage from '@/components/common/CommonImage.vue';
 import { DetailType, ParkItemType } from '@/types/enum.ts';
 import { computed, ref } from 'vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
-import type { Info, Infos } from '@/components/detail/DetailInfo.vue';
+import type { Infos } from '@/components/detail/DetailInfo.vue';
 import ListPagination from '@/components/list/ListPagination.vue';
 import type { MyParkDevelopDetailResp } from '@/types/api/myParkDevelopDetail';
 import { useInfoTab } from '@/composable/useInfoTab.ts';
@@ -117,9 +117,11 @@ import type { Enterprise } from '@/types/common';
 import { haveValue } from '@/utils/filters.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
+import { useIndustryBase } from '@/composable/useIndustryBase.ts';
 
 const { detail, initDetail } = useDetail<MyParkDevelopDetailResp>(RequestUrl.myParkDevelopDetail);
 const { router } = useJump();
+const { industryBase } = useIndustryBase(detail);
 
 const pageSize = ref(10);
 const currentPage = ref(1);
@@ -216,33 +218,6 @@ const contactInfo = computed(() => {
   }
 });
 
-/** 产业基础 */
-const industryBase = computed(() => {
-  if (detail.value) {
-    const { investmentDetails, primaryIndustry } = detail.value;
-    const result: Infos = [
-      [
-        {
-          name: '主导产业',
-          value: primaryIndustry,
-          oneline: true,
-        },
-      ],
-      ...(investmentDetails?.map<Info[]>(({ details, codeName }, index) => [
-        {
-          name: index === 0 ? '招商方向' : '',
-          value: codeName && details ? `${codeName}：${details}` : '',
-          oneline: true,
-        },
-      ]) || []),
-    ];
-
-    return result;
-  } else {
-    return [];
-  }
-});
-
 const joinRequired = computed(() => {
   if (detail.value) {
     const {

src/views/user/MyIndustrialDetail.vue

@@ -115,16 +115,19 @@ import CommonImage from '@/components/common/CommonImage.vue';
 import { DetailType, ParkItemType } from '@/types/enum.ts';
 import { computed, ref } from 'vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
-import type { Info, Infos } from '@/components/detail/DetailInfo.vue';
+import type { Infos } from '@/components/detail/DetailInfo.vue';
 import ListPagination from '@/components/list/ListPagination.vue';
 import { haveValue } from '@/utils/filters.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
+import { useIndustryBase } from '@/composable/useIndustryBase.ts';
 
 const { detail, initDetail } = useDetail<MyParkIndustrialDetailResp>(
   RequestUrl.myParkIndustrialDetail,
 );
 
+const { industryBase } = useIndustryBase(detail);
+
 const { router } = useJump();
 
 const pageSize = ref(10);
@@ -238,33 +241,6 @@ const contactInfo = computed(() => {
   }
 });
 
-/** 产业基础 */
-const industryBase = computed(() => {
-  if (detail.value) {
-    const { investmentDetails, primaryIndustry } = detail.value;
-    const result: Infos = [
-      [
-        {
-          name: '主导产业',
-          value: primaryIndustry,
-          oneline: true,
-        },
-      ],
-      ...(investmentDetails?.map<Info[]>(({ details, codeName }, index) => [
-        {
-          name: index === 0 ? '招商方向' : '',
-          value: codeName && details ? `${codeName}：${details}` : '',
-          oneline: true,
-        },
-      ]) || []),
-    ];
-
-    return result;
-  } else {
-    return [];
-  }
-});
-
 const joinRequired = computed(() => {
   if (detail.value) {
     const {