refactor: 重构导航组件使用动态TDK数据和路由

components/kl-nav-tab/index.vue

@@ -3,7 +3,7 @@
     <div class="relative ma-auto flex items-center py-[20px] w-[1500px]!">
       <img src="~/assets/images/logo5.png" alt="图夕夕" srcset="" class="h-[51px] w-[182px] cursor-pointer" @click="navigateTo('/')" />
       <div class="ml-[60px] flex items-center">
-        <span v-for="item in navList" :key="item" class="nav" :class="props.active === item ? 'active' : ''" @click="handleClick(item)">{{ item }}</span>
+        <span v-for="item in tdkList" :key="item.id" class="nav" :class="props.active === item.remark ? 'active' : ''" @click="handleClick(item.path)">{{ item.remark }}</span>
       </div>
       <div class="relative ml-[30px]">
         <el-input
@@ -64,7 +64,7 @@
   import { ref, getCurrentInstance, computed, onMounted } from 'vue'
   import { Setting, SwitchButton } from '@element-plus/icons-vue'
   import { page } from '~/api/upnew/index'
-  import { top } from '~/api/home/index'
+  import { top, getTDKList } from '~/api/home/index'
   import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
   import { Search } from '@element-plus/icons-vue'
   import refreshToken from '~/utils/RefreshToken'
@@ -92,7 +92,15 @@
     return !!userStore.token
   })
 
-  const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])
+  const { data: tdkList } = await useAsyncData('get-tdk-list-nav', async () => {
+    const res = await getTDKList()
+    // 添加首页
+    if (!res.data.find((c) => c.remark === '首页')) {
+      res.data.unshift({ remark: '首页', path: '/' })
+    }
+    return res.data
+  })
+  // const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])
 
   const loading = ref(false)
   const handleHot = async () => {
@@ -147,34 +155,7 @@
   }
 
   const handleClick = (item: string) => {
-    switch (item) {
-      case '首页':
-        navigateTo({ path: '/' }) // 修改为在新窗口打开
-        break
-      case '图纸':
-        navigateTo('/drawe') // 修改为在新窗口打开
-        break
-      case '文本':
-        navigateTo('/text') // 修改为在新窗口打开
-        break
-      case '模型':
-        navigateTo('/model') // 修改为在新窗口打开
-        break
-      case '国外专区':
-        navigateTo('/foreign') // 修改为在新窗口打开
-        break
-      case '牛人社区':
-        navigateTo('/community') // 修改为在新窗口打开
-        break
-      case '交流频道':
-        navigateTo('/channel') // 修改为在新窗口打开
-        break
-      case '工具箱':
-        navigateTo('/toolbox') // 修改为在新窗口打开
-        break
-      default:
-        break
-    }
+    navigateTo(item)
   }
   const handleLogin = () => {
     app?.$openLogin() // 调用全局方法

middleware/tdk.global.ts

@@ -0,0 +1,19 @@
+import { getTDKList } from '~/api/home/index'
+// middleware/tdk.global.ts
+export default defineNuxtRouteMiddleware(async (to) => {
+    const { data: tdkData } = await getTDKList()
+    // 获取当前路由
+    const currentPath = to.path;
+    // 根据当前路由获取对应的TDK数据
+    const currentTdk = tdkData.find((item) => item.path === currentPath)
+    
+    if (currentTdk) {
+      useHead({
+        title: currentTdk.title,
+        meta: [
+          { name: 'description', content: currentTdk.describeText },
+          { name: 'keywords', content: currentTdk.keyword }
+        ]
+      })
+    }
+  })

pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" />
+  <!-- <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" /> -->
   <KlNavTab active="图纸" :type="1" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->

pages/drawe/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" />
+  <!-- <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" /> -->
   <KlNavTab active="图纸" :type="1" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->

pages/foreign/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -26,7 +26,6 @@
 </template>
 <script setup lang="ts">
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
   import RecommendedColumnsV2 from '~/components/foreign-components/RecommendedColumnsV2.vue'
   import BannerTips from '~/components/foreign-components/BannerTips.vue'
   // import FeaturedSpecials from './components/FeaturedSpecials.vue'