refactor(portraitManagement): 重构分组画像页面，拆分组件并添加标签切换功能

将原页面的代码拆分为能力画像和运行数据两个独立组件，为页面添加标签切换逻辑，抽离公共页面布局组件的标签功能，减少页面冗余代码

src/views/portraitManagement/components/page.vue

@@ -1,23 +1,49 @@
 <template>
   <div class="bg">
     <div class="page">
-      <div class="title">{{ title }}</div>
+      <div class="title-wrapper">
+        <div v-if="tabs.length>0" class="left-tab">
+          <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="tab-item"
+            :class="{ active: activeTab === index }"
+            @click="handleTabClick(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+        <div class="title">{{ title }}</div>
+      </div>
       <div class="content">
-        <slot></slot>
+        <slot />
       </div>
     </div>
   </div>
-
-  
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 const props = defineProps({
   title: {
     type: String,
     default: '安检人事管理可视化大屏'
+  },
+  tabs: {
+    type: Array,
+    default: () => []
   }
 })
+
+const emit = defineEmits(['tabChange'])
+
+const activeTab = ref(0)
+
+const handleTabClick = (index) => {
+  activeTab.value = index
+  emit('tabChange', index)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -33,7 +59,7 @@ const props = defineProps({
     content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(45deg, #231A43, #1c2d3e) ;
+    background: linear-gradient(45deg, #231A43, #1c2d3e);
     opacity: 0.8;
     z-index: 1;
   }
@@ -44,16 +70,13 @@ const props = defineProps({
     flex-direction: column;
     min-height: 100vh;
   }
-  .title {
+  .title-wrapper {
+    display: flex;
+    align-items: center;
     height: 88px;
-    line-height: 88px;
-    text-align: center;
-    color: #fff;
-    font-size: 48px;
     background: #2b394d86;
     position: relative;
     margin-bottom: 2px;
-    font-weight: bold;
     &::before {
       content: '';
       position: absolute;
@@ -67,6 +90,38 @@ const props = defineProps({
       z-index: -1;
     }
   }
+  .left-tab {
+    display: flex;
+    padding: 0 20px;
+    .tab-item {
+      padding: 0 20px;
+      height: 88px;
+      line-height: 88px;
+      color: #a0c4ff;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s;
+     
+      &:hover {
+        background: rgba(15, 70, 250, 0.1);
+        color: #fff;
+      }
+      &.active {
+        background: rgba(15, 70, 250, 0.2);
+        color: #fff;
+        border-bottom-color: #cfdf89;
+      }
+    }
+  }
+  .title {
+    flex: 1;
+    height: 88px;
+    line-height: 88px;
+    text-align: center;
+    color: #fff;
+    font-size: 48px;
+    font-weight: bold;
+  }
   .content {
     flex: 1;
   }

src/views/portraitManagement/groupProfile/component/runData.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="operation-data">
+    <div class="placeholder">运行数据页面</div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.operation-data {
+  padding: 20px;
+  .placeholder {
+    color: #fff;
+    font-size: 24px;
+    text-align: center;
+    padding: 100px 0;
+  }
+}
+</style>