fix: 【公共】详情页逻辑

src/components/business/page-detail-layout/index.vue

@@ -1,19 +1,29 @@
 <template>
   <div class="page-detail-layout">
     <div class="header-cont">
-      占位
       <div class="header-top">
         <div class="header-t">
-          <div class="header-t-left"></div>
-          <div class="header-t-right"></div>
+          <div class="header-t-left">
+            <span class="htf-title">{{ title }}</span>
+            <slot name="titleRight"></slot>
+          </div>
+          <div class="header-t-right" v-if="slots.toolBtn">
+            <slot name="toolBtn"></slot>
+          </div>
+        </div>
+        <div class="header-index" v-if="slots.titleBottom">
+          <slot name="titleBottom"></slot>
+        </div>
+      </div>
+      <div class="header-bottom" v-if="indexConfig.sourceData.length > 0">
+        <div class="hb-item" v-for="(item, index) in indexConfig.sourceData" :key="index">
+          <span class="hb-item-top">{{ item[indexConfig.labelKey] }}</span>
+          <span class="hb-item-bottom">{{ item[indexConfig.valueKey] }}</span>
         </div>
-
-        <div class="header-index"></div>
       </div>
-      <div class="header-bottom"></div>
-    </div>
 
-    <div class="header-flow">占位</div>
+      <div class="header-flow" v-if="false"></div>
+    </div>
 
     <div class="header-tabs">
       <bs-tabs :tabs="tabs" :tab-active-key="tabActiveKey" @change="handleChangeTabActiveKey">
@@ -27,7 +37,15 @@
 
 <script setup>
   import { BsTabs } from '/@/components/BsUi/index.js';
+  import { useSlots } from 'vue';
+
+  const slots = useSlots();
+
   const props = defineProps({
+    title: {
+      required: false,
+      default: '标题',
+    },
     sceneType: {
       required: false,
       default: '',
@@ -40,14 +58,21 @@
       required: false,
       default: '',
     },
+    indexConfig: {
+      required: true,
+      default: {
+        sourceData: [],
+        labelKey: 'label',
+        valueKey: 'value',
+      },
+    },
   });
 
-  const emits = defineEmits(['update:tabActiveKey'])
+  const emits = defineEmits(['update:tabActiveKey']);
 
-  const handleChangeTabActiveKey =  (val) => {
+  const handleChangeTabActiveKey = (val) => {
     emits('update:tabActiveKey', val);
-  }
-
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -58,27 +83,77 @@
       width: 100%;
       border-radius: 8px;
       background: #fff;
+      padding: 20px;
       .header-top {
         width: 100%;
         .header-t {
           width: 100%;
+          display: flex;
+          justify-content: space-between;
+          .header-t-left {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            .htf-title {
+              font-size: 18px;
+              color: #000;
+              font-weight: 600;
+            }
+          }
+
+          .header-t-right {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+          }
         }
         .header-index {
+          margin-top: 10px;
           width: 100%;
+          display: flex;
+          gap: 10px;
+          .h-i-tag-name {
+            color: #999;
+            font-size: 14px;
+            font-weight: 500;
+          }
         }
       }
 
       .header-bottom {
+        margin-top: 20px;
         width: 100%;
+        padding: 10px;
+        display: flex;
+        background: #f0f4fe;
+        border-radius: 8px;
+        gap: 20px;
+        .hb-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 10px;
+          min-width: 100px;
+          .hb-item-top {
+            font-size: 14px;
+            color: #999;
+            font-weight: 500;
+          }
+
+          .hb-item-bottom {
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+          }
+        }
       }
-    }
 
-    .header-flow {
-      margin-top: 10px;
-      width: 100%;
-      height: 100%;
-      border-radius: 8px;
-      background: #fff;
+      .header-flow {
+        margin-top: 20px;
+        width: 100%;
+        height: 100%;
+      }
     }
 
     .header-tabs {