feat: 详情页标题部分

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -26,5 +27,6 @@ declare module 'vue' {
     ParkItem: typeof import('./src/components/list/ParkItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TagList: typeof import('./src/components/list/TagList.vue')['default']
   }
 }

src/components/detail/DetailMain.vue

 <!-- 主图部分 -->
 <template>
-  <div>
-    <div class="flex">
+  <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>
+    <div class="mt-5 flex py-5">
+      <div class="flex h-10 items-center">
+        <div class="font-yahei text-[32px] font-bold leading-10 text-[#333333]">
+          {{ detail.name }}
+        </div>
+        <div v-if="currentStatusTag" class="ml-2">
+          <div :class="['status-tag', currentStatusTag.className]">
+            {{ currentStatusTag.name }}
+          </div>
+        </div>
+        <div v-if="superTag" class="ml-2">
+          <div :class="['status-tag', superTag.className]">
+            {{ superTag.name }}
+          </div>
+        </div>
+      </div>
       <div>
         <img src="" alt="" />
       </div>
@@ -12,4 +53,52 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useItemStatus } from '@/composable/useItemStatus.ts';
+import { AuthStatus, DetailType } from '@/types/enum.ts';
+import { computed } from 'vue';
+
+export interface HeaderDetail {
+  name: string;
+  status?: AuthStatus;
+  statusName?: string;
+  isSuper?: number;
+  isSuperName?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    type: DetailType;
+    detail: HeaderDetail;
+  }>(),
+  {},
+);
+
+const { currentStatusTag, superTag } = useItemStatus(props.detail);
+
+/** 类型 */
+const headerType = computed(() => {
+  const config = {
+    [DetailType.carrier]: '载体',
+    [DetailType.develop]: '开发区',
+    [DetailType.industrial]: '产业园',
+    [DetailType.land]: '土地',
+    [DetailType.startDevelop]: '',
+  };
+  return config[props.type];
+});
+</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/composable/useItemStatus.ts

-import type { DevelopZoneItem } from '@/types/api/developZoneList.ts';
-import type { IndustrialParkItem } from '@/types/api/industrialParkList.ts';
+import type { AuthStatus } from '@/types/enum';
 import { computed } from 'vue';
 
 export interface StatusConfig {
@@ -10,7 +9,12 @@ export interface StatusConfig {
 /**
  * 产业园、开发区状态
  */
-export function useItemStatus(item: Partial<IndustrialParkItem & DevelopZoneItem>) {
+export function useItemStatus(item: {
+  status?: AuthStatus;
+  statusName?: string;
+  isSuper?: number;
+  isSuperName?: string;
+}) {
   const statusConfig: StatusConfig = {
     3: {
       className: 'text-[#0bdba8] bg-[#0bdba814]',

src/types/api/IndustrialParkList.ts

@@ -72,7 +72,7 @@ export interface IndustrialParkItem {
   /** 区/县 */
   regionName: string;
   /** 认证状态（1-未认证；2-认证中；3-已认证；4-未通过；5-待认证；9-已作废） */
-  status: number;
+  status: AuthStatus;
   /** 认证状态（1-未认证；2-认证中；3-已认证；4-未通过；5-待认证；9-已作废） */
   statusName: string;
   type: string;

src/types/api/developZoneList.ts

@@ -61,5 +61,5 @@ export interface DevelopZoneItem {
   /** 星级开发区标识： 1-是 */
   isSuper: number;
   /** 星级开发区标识： 1-是 */
-  isSuperName: number;
+  isSuperName: string;
 }

src/types/enum.ts

@@ -32,6 +32,22 @@ export enum AuthStatus {
 export enum ParkItemType {
   /** 开发区 */
   develop = 'develop',
-  /** 产业原 */
+  /** 产业园 */
   industrial = 'industrial',
 }
+
+/**
+ * 详情类型
+ */
+export enum DetailType {
+  /** 开发区 */
+  develop = 'develop',
+  /** 产业园 */
+  industrial = 'industrial',
+  /** 星级开发区 */
+  startDevelop = 'startDevelop',
+  /** 土地 */
+  land = 'land',
+  /** 载体 */
+  carrier = 'carrier',
+}

src/views/industrial-park/IndustrialParkDetail.vue

 <!-- 产业园详情 -->
 <template>
   <div v-if="detail" class="main-width mx-auto py-5">
-    <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
-        <DetailMain></DetailMain>
+        <DetailMain :type="DetailType.industrial" :detail="detail"></DetailMain>
       </DetailInfoCell>
       <DetailInfoCell title="产业园简介">
         <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
@@ -95,6 +94,7 @@ import MiniListItem, { type MiniDetail } from '@/components/detail/MiniListItem.
 import { haveValue } from '@/utils/filters.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
+import { DetailType } from '@/types/enum.ts';
 
 const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);