重构菜单组件使用动态TDK数据

components/kl-menus-v2/index.vue

@@ -8,13 +8,13 @@
         </div>
         <div class="item-center ml-[45px] w-[660px] flex justify-between">
           <nuxt-link
-            v-for="(item, index) in menuItems"
+            v-for="(item, index) in tdkList"
             :key="index"
             :to="item.path"
             class="parent-links relative rounded-lg px-3 py-2 text-[#1A65FF]"
           >
-            {{ item.name }}
-            <img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-15px] top-[-2px]" />
+            {{ item.remark }}
+            <img v-if="item.path === '/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-12px] top-[0px]" />
           </nuxt-link>
         </div>
       </div>
@@ -31,19 +31,30 @@
 </template>
 <script setup lang="ts">
   import useUserStore from '~/stores/user'
+  import { getTDKList } from '~/api/home/index'
   const userStore = useUserStore()
   import { BellFilled } from '@element-plus/icons-vue'
   import { ref, computed } from 'vue'
-  const menuItems = ref([
-    { name: '首页', path: '/' },
-    { name: '图纸', path: '/drawe' },
-    { name: '文本', path: '/text' },
-    { name: '模型', path: '/model' },
-    { name: '国外专区', path: '/foreign' },
-    { name: '工具箱', path: '/toolbox' },
-    { name: '交流频道', path: '/channel' },
-    // { name: '牛人社区', path: '/community' },
-  ])
+  // const menuItems = ref([
+  //   { name: '首页', path: '/' },
+  //   { name: '图纸', path: '/drawe' },
+  //   { name: '文本', path: '/text' },
+  //   { name: '模型', path: '/model' },
+  //   { name: '国外专区', path: '/foreign' },
+  //   { name: '工具箱', path: '/toolbox' },
+  //   { name: '交流频道', path: '/channel' },
+  //   // { name: '牛人社区', path: '/community' },
+  // ])
+
+  const { data: tdkList } = await useAsyncData('get-tdk-list-home', async () => {
+    const res = await getTDKList()
+    // 添加首页
+    res.data.unshift({ remark: '首页', path: '/' })
+    return res.data
+  })
+
+  console.log('tdkList', tdkList.value)
+  
 
   // 是否登录
   const isLogin = computed(() => {