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

api/home/index.ts

@@ -8,6 +8,7 @@ import type {
   ProjectTrendingScoreUserInfoVO,
   PageResultIndexSettingRespVO,
   TdkSettingsRespVO,
+  TdkSettingsDO,
 } from './type'
 
 /**
@@ -101,5 +102,5 @@ export const getTDK = () => {
  * 获得网站 TDK栏目列表
  */
 export const getTDKList = () => {
-  return useFetchRequest.get<IResponse<TdkSettingsRespVO[]>>('/prod-api/app-api/business/tdk-settings/list-menu', {})
+  return useFetchRequest.get<IResponse<TdkSettingsDO[]>>('/prod-api/app-api/business/tdk-settings/list-menu', {})
 }

api/home/type.ts

@@ -106,9 +106,24 @@ export interface PageResultIndexSettingRespVO {
   createTime: string
 }
 
-
 export interface TdkSettingsRespVO {
   title: string
   describeText: string
   keyword: string
 }
+
+export interface TdkSettingsDO {
+  createTime?: string
+  updateTime?: string
+  creator?: string
+  updater?: string
+  deleted?: boolean
+  id?: number
+  title?: string
+  icon?: string
+  type?: number
+  path: string
+  describeText?: string
+  keyword?: string
+  remark: string
+}

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 }}
+            {{ item.remark }}
-            <img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-15px] top-[-2px]" />
+            <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([
+  // const menuItems = ref([
-    { name: '首页', path: '/' },
+  //   { name: '首页', path: '/' },
-    { name: '图纸', path: '/drawe' },
+  //   { name: '图纸', path: '/drawe' },
-    { name: '文本', path: '/text' },
+  //   { name: '文本', path: '/text' },
-    { name: '模型', path: '/model' },
+  //   { name: '模型', path: '/model' },
-    { name: '国外专区', path: '/foreign' },
+  //   { name: '国外专区', path: '/foreign' },
-    { name: '工具箱', path: '/toolbox' },
+  //   { name: '工具箱', path: '/toolbox' },
-    { name: '交流频道', path: '/channel' },
+  //   { name: '交流频道', path: '/channel' },
-    // { name: '牛人社区', path: '/community' },
+  //   // { 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(() => {