refactor(layout): 重构头部和底部导航为动态配置

- 将固定写死的头部导航改为基于API数据的动态渲染
- 将底部客户服务、客户、联系等静态内容替换为动态导航配置
- 添加getBottomNav和getHeaderNav API接口用于获取导航数据
- 实现handleNavClick方法处理导航点击事件
- 使用handleTree工具函数将扁平数据转换为树形结构
- 在组件挂载时异步获取导航配置数据
- 移除原有的硬编码导航项，提高可维护性

src/api/home/index.ts

@@ -239,3 +239,25 @@ export function getHomeNav(title: any) {
     }
   });
 }
+
+//搜索底部导航
+export function getBottomNav(title: any) {
+  return request({
+    url: '/system/indexSystem/getBottomNav',
+    method: 'get',
+    params: {
+      title: title // 将参数传递给后端  页面类型
+    }
+  });
+}
+
+//搜索头部导航
+export function getHeaderNav(title: any) {
+  return request({
+    url: '/system/indexSystem/getHeaderNav',
+    method: 'get',
+    params: {
+      title: title // 将参数传递给后端  页面类型
+    }
+  });
+}

src/layout/components/foot.vue

@@ -17,20 +17,17 @@
         </div>
         <div class="head-right">
           <div class="info-bos flex-row-start">
-            <div style="margin-right: 140px">
-              <div class="info-title">客户服务</div>
-              <div class="info-text" style="margin-top: 0">在线客服</div>
-              <div class="info-text">问题反馈</div>
-            </div>
-            <div style="margin-right: 140px">
-              <div class="info-title">客户</div>
-              <div class="info-text" style="margin-top: 0">客户管理</div>
-              <div class="info-text">供应商合作</div>
-            </div>
-            <div>
-              <div class="info-title">联系</div>
-              <div class="info-text" style="margin-top: 0">帮助中心</div>
-              <div class="info-text">关于我们</div>
+            <div v-for="(navItem, index) in bottomNavList" :key="index" :style="{ marginRight: index < bottomNavList.length - 1 ? '140px' : '0' }">
+              <div class="info-title">{{ navItem.navigationName }}</div>
+              <div
+                v-for="(link, linkIndex) in navItem.children"
+                :key="linkIndex"
+                class="info-text"
+                :style="{ marginTop: linkIndex === 0 ? '0' : '12px' }"
+                @click="handleNavClick(link)"
+              >
+                {{ link.navigationName }}
+              </div>
             </div>
           </div>
           <div class="contact">
@@ -61,11 +58,39 @@
 
 <script setup lang="ts">
 import { getPlatformConfigList } from '@/api/breg/index';
+import { getBottomNav } from '@/api/home/index';
+import { handleTree } from '@/utils/ruoyi';
+
 const icpNo = ref<any>('');
 const license = ref<any>('');
 const wechatLink = ref<any>('');
 const weiboLink = ref<any>('');
 const servicePhone = ref<any>('');
+const bottomNavList = ref<any[]>([]);
+
+// 获取底部导航数据
+const fetchBottomNav = async () => {
+  try {
+    const res = await getBottomNav('footer'); // 使用 footer 作为页面类型参数
+    if (res.code == 200 && res.data) {
+      // 后端返回的是扁平列表，使用 handleTree 转换为树形结构
+      // parentId 为 0、null 或 undefined 的是父级节点
+      bottomNavList.value = handleTree(res.data, 'id', 'parentId', 'children');
+    }
+  } catch (error) {
+    console.error('获取底部导航失败:', error);
+  }
+};
+
+// 处理导航点击事件
+const handleNavClick = (link: any) => {
+  if (link.url) {
+    window.open(link.url, '_blank');
+  } else if (link.link) {
+    window.open(link.link, '_blank');
+  }
+};
+
 getPlatformConfigList({ configKey: 'icpNo' }).then((res) => {
   if (res.code == 200) {
     if (res.rows && res.rows.length > 0) {
@@ -105,6 +130,11 @@ getPlatformConfigList({ configKey: 'servicePhone' }).then((res) => {
     }
   }
 });
+
+// 组件挂载时获取底部导航数据
+onMounted(() => {
+  fetchBottomNav();
+});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/header.vue

@@ -38,9 +38,9 @@
         <div v-else class="header-text" @click="goEnterprise">切换到企业</div> -->
         <div class="header-text" @click="onPath('/order/orderManage')">我的订单</div>
         <div v-if="userInfo.user && userInfo.user.userSonType != 4" class="header-text" @click="onPath('/enterprise/companyInfo')">会员中心</div>
-        <div class="header-text" @click="onPath('/theme?id=1')">人才招聘</div>
-        <div class="header-text">帮助中心</div>
-        <div class="header-text">在线客服</div>
+        <template v-for="(item, index) in headerNavList" :key="index">
+          <div class="header-text" @click="handleNavClick(item)">{{ item.navigationName }}</div>
+        </template>
       </div>
     </div>
   </div>
@@ -51,9 +51,11 @@ import { useUserStore } from '@/store/modules/user';
 import { onPath } from '@/utils/siteConfig';
 import Cookies from 'js-cookie';
 import { getInfo } from '@/api/login';
+import { getHeaderNav } from '@/api/home/index';
 const route = useRoute();
 const userInfoOpen = ref<any>(false);
 const userInfo = ref<any>({});
+const headerNavList = ref<any[]>([]);
 
 onMounted(() => {
   // getCurrentLocation();
@@ -65,6 +67,8 @@ onMounted(() => {
       }
     });
   }
+  // 获取头部导航数据
+  fetchHeaderNav();
 });
 
 const handleMouseEnter = () => {
@@ -145,6 +149,27 @@ const onlogout = () => {
       onPath('/login');
     });
 };
+
+// 获取头部导航数据
+const fetchHeaderNav = async () => {
+  try {
+    const res = await getHeaderNav('header'); // 使用 header 作为页面类型参数
+    if (res.code == 200 && res.data) {
+      headerNavList.value = res.data;
+    }
+  } catch (error) {
+    console.error('获取头部导航失败:', error);
+  }
+};
+
+// 处理导航点击事件
+const handleNavClick = (item: any) => {
+  if (item.url) {
+    onPath(item.url);
+  } else if (item.link) {
+    onPath(item.link);
+  }
+};
 </script>
 
 <style lang="scss" scoped>