fix: 【公共】详情页的初始化

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

@@ -0,0 +1,98 @@
+<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>
+
+        <div class="header-index"></div>
+      </div>
+      <div class="header-bottom"></div>
+    </div>
+
+    <div class="header-flow">占位</div>
+
+    <div class="header-tabs">
+      <tabs :tabs="tabs" :tab-active-key="tabActiveKey" @change="handleChangeTabActiveKey">
+        <template v-for="tab in tabs" #[tab.slotName]>
+          <slot :name="tab.slotName"></slot>
+        </template>
+      </tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Tabs from './tabs/index.vue';
+  const props = defineProps({
+    sceneType: {
+      required: false,
+      default: '',
+    },
+    tabs: {
+      required: false,
+      default: [],
+    },
+    tabActiveKey: {
+      required: false,
+      default: '',
+    },
+  });
+
+  const emits = defineEmits(['update:tabActiveKey'])
+
+  const handleChangeTabActiveKey =  (val) => {
+    emits('update:tabActiveKey', val);
+  }
+
+</script>
+
+<style lang="scss" scoped>
+  .page-detail-layout {
+    width: 100%;
+    height: 100%;
+    .header-cont {
+      width: 100%;
+      border-radius: 8px;
+      background: #fff;
+      .header-top {
+        width: 100%;
+        .header-t {
+          width: 100%;
+        }
+        .header-index {
+          width: 100%;
+        }
+      }
+
+      .header-bottom {
+        width: 100%;
+      }
+    }
+
+    .header-flow {
+      margin-top: 10px;
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      background: #fff;
+    }
+
+    .header-tabs {
+      margin-top: 10px;
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      background: #fff;
+      :deep(.ant-tabs-nav-wrap) {
+        padding: 0 20px;
+      }
+      :deep(.ant-tabs-nav) {
+        margin: 0 0 10px 0;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <a-tabs v-model:activeKey="activeKey">
+    <a-tab-pane :key="tab.key" v-for="tab in tabs">
+      <template #tab>
+        <div class="tab-title">
+          <span>
+            <img :src="tab.key === activeKey ? tab.selectedIcon : tab.unSelectedIcon" alt="" />
+          </span>
+
+          <span>{{ tab.title }}</span>
+        </div>
+      </template>
+      <div class="tabs-content">
+        <slot :name="tab.slotName" v-if="tab.key === activeKey"></slot>
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+<script setup>
+  import { ref, watch } from 'vue';
+  import { isEmpty } from 'lodash';
+  const emits = defineEmits(['update:tabActiveKey', 'change']);
+  const props = defineProps({
+    tabs: {
+      required: true,
+      default: [],
+    },
+    tabActiveKey: {
+      required: false,
+      default: '',
+    },
+  });
+
+  const activeKey = ref(isEmpty(props.tabActiveKey) ? props.tabs[0].key : props.tabActiveKey);
+
+  watch(
+    activeKey,
+    (val) => {
+      emits('change', val);
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="scss" scoped>
+  .tab-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .tabs-content {
+    padding: 0 10px 10px 10px;
+  }
+</style>

src/views/page-detail/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="page-detail">
+    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey">
+      <template #tab1>tab1</template>
+      <template #tab2>tab2</template>
+      <template #tab3>tab3</template>
+    </page-detail-layout>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
+  import selectedIcon from '/@/assets/images/page-detail-layout/selectedIcon.png';
+  import unSelectedIcon from '/@/assets/images/page-detail-layout/unSelectedIcon.png';
+  const tabActiveKey = ref('tab2');
+
+  const tabs = ref([
+    {
+      title: 'tab1',
+      key: 'tab1',
+      slotName: 'tab1',
+      selectedIcon: selectedIcon,
+      unSelectedIcon: unSelectedIcon,
+    },
+    {
+      title: 'tab2',
+      key: 'tab2',
+      slotName: 'tab2',
+      selectedIcon: selectedIcon,
+      unSelectedIcon: unSelectedIcon,
+    },
+    {
+      title: 'tab3',
+      key: 'tab3',
+      slotName: 'tab3',
+      selectedIcon: selectedIcon,
+      unSelectedIcon: unSelectedIcon,
+    },
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  .page-detail {
+    width: 100%;
+  }
+</style>