feat: 头部名称搜索

src/components/common/CommonTitle.vue

+<template>
+  <div class="flex h-12 items-center justify-between">
+    <div class="flex h-full items-center">
+      <div>
+        <img class="h-10 w-auto" src="@/assets/images/logo-head.png" alt="立业云" />
+      </div>
+      <div
+        class="ml-4 flex h-8 items-center px-4 font-yahei text-base text-[#C0322B] outline outline-1 outline-[#C0322B]"
+      >
+        {{ typeName }}
+      </div>
+    </div>
+    <div class="h-full">
+      <div class="search-input-shadow flex h-full items-center overflow-hidden rounded">
+        <div class="flex flex-1 items-center justify-center">
+          <input
+            class="search-input h-full w-[375px] px-3 py-[14px] text-sm"
+            type="text"
+            :placeholder="`请输入${typeName}名称进行搜索`"
+          />
+        </div>
+        <div class="flex h-full w-[70px] items-center justify-center bg-[#C0322B]">
+          <img class="h-[30px] w-[30px]" src="@/assets/images/icon-search.png" alt="search" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    typeName: string;
+  }>(),
+  {},
+);
+</script>
+
+<style lang="scss">
+.search-input-shadow {
+  box-shadow: 0px 2px 8px 0px rgba(90, 0, 0, 0.1);
+}
+
+.search-input {
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    @apply text-[#999999];
+  }
+}
+</style>

src/components/detail/DetailMain.vue

 <!-- 主图部分 -->
 <template>
   <div v-if="detail">
-    <div class="flex h-12 items-center justify-between">
-      <div class="flex h-full items-center">
-        <div>
-          <img class="h-10 w-auto" src="@/assets/images/logo-head.png" alt="立业云" />
-        </div>
-        <div
-          class="ml-4 flex h-8 items-center px-4 font-yahei text-base text-[#C0322B] outline outline-1 outline-[#C0322B]"
-        >
-          {{ headerType }}
-        </div>
-      </div>
-      <div class="h-full">
-        <div class="search-input-shadow flex h-full items-center overflow-hidden rounded">
-          <div class="flex flex-1 items-center justify-center">
-            <input
-              class="search-input h-full w-[375px] px-3 py-[14px] text-sm"
-              type="text"
-              :placeholder="`请输入${headerType}名称进行搜索`"
-            />
-          </div>
-          <div class="flex h-full w-[70px] items-center justify-center bg-[#C0322B]">
-            <img class="h-[30px] w-[30px]" src="@/assets/images/icon-search.png" alt="search" />
-          </div>
-        </div>
-      </div>
-    </div>
+    <CommonTitle :type-name="headerType"></CommonTitle>
     <div class="mt-5 py-5">
       <div class="flex h-10 items-center">
         <div class="font-yahei text-[32px] font-bold leading-10 text-[#333333]">
@@ -95,6 +70,7 @@ import { computed } from 'vue';
 import ImageList from '@/components/common/ImageList.vue';
 import type { Investment } from '@/types/common.ts';
 import { haveValue } from '@/utils/filters.ts';
+import CommonTitle from '@/components/common/CommonTitle.vue';
 
 export interface HeaderDetail {
   name: string;
@@ -143,17 +119,3 @@ const area = computed(() => {
   return [provinceName, cityName, regionName].filter(haveValue).join('-');
 });
 </script>
-
-<style lang="scss">
-.search-input-shadow {
-  box-shadow: 0px 2px 8px 0px rgba(90, 0, 0, 0.1);
-}
-.search-input {
-  &:focus {
-    outline: none;
-  }
-  &::placeholder {
-    @apply text-[#999999];
-  }
-}
-</style>

src/views/carrier/CarrierList.vue

 <!-- 载体 -->
 <template>
   <div class="container">
+    <CommonTitle class="my-[30px]" type-name="载体"></CommonTitle>
     <FilterView
       class="mb-6"
       :filter-key-list="filterKeyList"
@@ -36,6 +37,7 @@ import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
 import ListPagination from '@/components/list/ListPagination.vue';
 import CarrierListItemView from '@/components/list/list-carrier-item.vue';
+import CommonTitle from '@/components/common/CommonTitle.vue';
 import FilterView from '@/components/filter/filter-view.vue';
 import type { CarrierListCondition, CarrierListItem } from '@/types/api/carrierList';
 import { ref } from 'vue';

src/views/develop/DevelopZoneList.vue

 <!-- 开发区列表 -->
 <template>
   <div class="main-width mx-auto">
+    <CommonTitle class="my-[30px]" type-name="开发区"></CommonTitle>
     <FilterView
       :filter-key-list="filterKeyList"
       class="mb-6"
@@ -33,6 +34,7 @@ import { RequestUrl } from '@/types/api.ts';
 import type { DevelopZoneItem, DevelopZoneListCondition } from '@/types/api/developZoneList';
 import { ParkItemType } from '@/types/enum.ts';
 import FilterView from '@/components/filter/filter-view.vue';
+import CommonTitle from '@/components/common/CommonTitle.vue';
 
 // 筛选项列表
 const filterKeyList = [

src/views/industrial-park/IndustrialParkList.vue

 <!-- 产业园列表 -->
 <template>
   <div class="main-width mx-auto">
+    <CommonTitle class="my-[30px]" type-name="产业园"></CommonTitle>
     <FilterView
       class="mb-6"
       :filter-key-list="filterKeyList"
@@ -33,6 +34,7 @@ import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
 import ListPagination from '@/components/list/ListPagination.vue';
 import FilterView from '@/components/filter/filter-view.vue';
+import CommonTitle from '@/components/common/CommonTitle.vue';
 import ParkItem from '@/components/list/ParkItem.vue';
 import type {
   IndustrialParkItem,

src/views/land/LandList.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="container">
     <div>
+      <CommonTitle class="my-[30px]" type-name="土地"></CommonTitle>
       <FilterView
         :filter-key-list="filterKeyList"
         class="mb-6"
@@ -29,6 +30,7 @@ import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
 import ListPagination from '@/components/list/ListPagination.vue';
 import LandListItemView from '@/components/list/list-land-item.vue';
+import CommonTitle from '@/components/common/CommonTitle.vue';
 import FilterView from '@/components/filter/filter-view.vue';
 import type { LandListCondition, LandListItem } from '@/types/api/landList';
 import { ref } from 'vue';