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() // 调用全局方法