api-外样式

src/views/mallResourceDevelopment/API/apiByApply/index.vue

 <template>
   <PageWrapper class="content-padding" contentBackground>
     <template #headerContent>
-      <div class="modal_top">
-        <div>
-          <Icon icon="hugeicons:file-euro" :size="50" :color="'#64c6e9'" />
-        </div>
-        <div>
-          <div class="title">我申请的</div>
+      <div class="header">
+        <Icon icon="hugeicons:file-euro" class="h-icon" :color="'#6499e9'" />
+        <div class="h-txt">
+          <div class="h-des">我申请的</div>
         </div>
       </div>
     </template>
@@ -183,4 +181,21 @@
   .selected-row {
     background-color: #5cb3ff; /* 可以根据需要调整颜色 */
   }
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-icon {
+      font-size: 40px !important;
+      color: #0a208a;
+    }
+    .h-des {
+      font-size: 18px;
+      font-weight: bolder;
+      line-height: 40px;
+    }
+    .h-path {
+      font-size: 12px;
+    }
+  }
 </style>

src/views/mallResourceDevelopment/API/apiByCreate/GroupTree.vue

 <template>
-  <div class=" overflow-hidden bg-white">
+  <div class="overflow-hidden bg-white">
     <BasicTree
       title=""
       ref="treeRef"
@@ -29,6 +29,12 @@
   }
   async function fetch() {
     treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    tabName.value = treeData.value[0].workSpaceName;
+    path.value = '/' + treeData.value[0].workSpaceName;
+    emit('select', {
+      path: path.value,
+      tabName: tabName.value,
+    });
     await nextTick(() => {
       getTree().expandAll(true);
     });
@@ -63,10 +69,37 @@
   }
 
   /**选中的数据*/
-  function handleSelect(keys) {
-    emit('select', keys[0]);
+  function handleSelect() {
+    const keys = unref(treeRef).getSelectedKeys();
+    const node = unref(treeRef).getSelectedNode(keys[0]);
+    console.log('node', node);
+    console.log('tree', treeData.value);
+    // 获取标题
+    tabName.value = node.workSpaceName;
+    path.value = getPath(treeData.value[0]);
+    emit('select', {
+      path: path.value,
+      tabName: tabName.value,
+    });
+  }
+  const tabName = ref();
+  const path = ref();
+  // 嵌套获取路径
+  function getPath(data) {
+    if (data.workSpaceName === tabName.value) {
+      return '/' + data.workSpaceName;
+    } else {
+      if (data.children && data.children.length > 0) {
+        for (let item of data.children) {
+          const path = getPath(item);
+          if (path) {
+            return '/' + data.workSpaceName + path;
+          }
+        }
+      }
+      return;
+    }
   }
-
   onMounted(() => {
     fetch();
   });

src/views/mallResourceDevelopment/API/apiByCreate/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
     <GroupTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
-    <div class="w-3/4 xl:w-4/5">
-      <div style="display: flex; align-items: center; background-color: white; padding-top: 20px">
-        <Icon style="margin-left: 30px" icon="ion:folder-outline" :size="50" :color="'#6499e9'" />
-        <div style="margin-left: 10px">
-          <span class="title">test</span>
-          <div>
-            <span class="path">我创建的</span>
+    <div class="w-3/4 xl:w-4/5" style="background-color: #ffffff">
+      <div class="flex" style="padding: 20px">
+        <div class="flex-1 header">
+          <Icon icon="ion:folder-outline" class="h-icon" :color="'#6499e9'" />
+          <div class="h-txt">
+            <div class="h-des">{{ data.tabName }}</div>
+            <div class="h-path">{{ data.path }}</div>
           </div>
         </div>
-        <a-button
-          style="margin-left: 550px"
-          type="primary"
-          :disabled="getDisabled()"
-          @click="deleteButton"
-          >删除</a-button
-        >
-        <a-button
-          style="margin-left: 10px"
-          type="primary"
-          :disabled="getDisabled()"
-          @click="handleMove(1)"
-          >移动</a-button
-        >
-        <a-button
-          style="margin-left: 10px"
-          type="primary"
-          :disabled="getDisabled()"
-          @click="batchUploading"
+        <div class="h-bt-group">
+          <a-button type="primary" :disabled="getDisabled()" @click="deleteButton">删除</a-button>
+          <a-button type="primary" :disabled="getDisabled()" @click="handleMove(1)">移动</a-button>
+          <a-button type="primary" :disabled="getDisabled()" @click="batchUploading"
             >批量上架</a-button
           >
-        <a-button style="margin-left: 10px" type="primary" @click="handleNewFolder"
-          >新建文件夹</a-button
-        >
-        <a-button style="margin-left: 10px" type="primary" @click="handleCataloging"
-          >新建编目</a-button
-        >
-        <a-button style="margin-left: 10px" type="primary" @click="handleDataEntry"
-          >新建文件</a-button
-        >
-        <a-button style="margin-left: 10px" type="primary" @click="handleDataEntry"
-          >批量新建</a-button
-        >
+          <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
+          <a-button type="primary" @click="handleCataloging">新建编目</a-button>
+          <a-button type="primary" @click="handleDataEntry">新建文件</a-button>
+          <a-button type="primary" @click="handleDataEntry">批量新建</a-button>
+        </div>
       </div>
       <BasicTable ref="basicTable" style="background-color: white" @register="registerTable">
         <template #bodyCell="{ column, record }">
@@ -231,20 +209,32 @@
       title: '编辑文件',
     });
   }
-  /** 部门树的select*/
-  function handleSelect() {
-    reload();
+  const data = ref({});
+  function handleSelect(d) {
+    data.value = d;
   }
 
   onMounted(() => {});
 </script>
 <style scoped>
-  .title {
-    font-size: 16px;
-    font-weight: 500;
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-icon {
+      font-size: 40px !important;
+      color: #0a208a;
+    }
+    .h-des {
+      font-size: 18px;
+      font-weight: bolder;
+    }
+    .h-path {
+      font-size: 12px;
+    }
   }
-  .path {
-    font-size: 14px;
-    color: gray;
+  .h-bt-group {
+    display: flex;
+    gap: 10px;
   }
 </style>

src/views/mallResourceDevelopment/API/departmentalResources/index.vue

 <template>
   <div class="full-page-container">
     <PageWrapper class="page-wrapper">
-      <div class="headerContainer">
-        <div>
-          <Icon icon="mdi:file-chart" :size="40" :color="'#61aaff'" />
-        </div>
-        <div>
-          <div class="title">部门资源</div>
+      <div class="header">
+        <Icon icon="mdi:file-chart" class="h-icon" :color="'#61aaff'" />
+        <div class="h-txt">
+          <div class="h-des">部门资源</div>
         </div>
       </div>
       <div class="search">
@@ -231,4 +229,22 @@
     font-size: 16px;
     font-weight: bold;
   }
+  .header {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-icon {
+      font-size: 40px !important;
+      color: #0a208a;
+    }
+    .h-des {
+      font-size: 18px;
+      font-weight: bolder;
+      line-height: 40px;
+    }
+    .h-path {
+      font-size: 12px;
+    }
+  }
 </style>