Restructure layout components and update page metadata

components/kl-menus-v2/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="box-border">
+    <div class="flex items-center">
+      <div class="flex items-center">
+        <div class="box-border h-100% h-55px w-221px flex items-center rd-2px bg-[#1A65FF] pl-24px text-white">
+          <img src="~/assets/images/1.png" alt="" srcset="" />
+          <span class="ml-12px text-16px">全部资源分类</span>
+        </div>
+        <div class="item-center ml-45px w-660px flex justify-between">
+          <nuxt-link
+            v-for="(item, index) in menuItems"
+            :key="index"
+            :to="item.path"
+            class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
+          >
+            {{ item.name }}
+            <img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right--15px top--2px" />
+          </nuxt-link>
+        </div>
+      </div>
+      <div v-if="isLogin" class="flex flex-1 items-center justify-end">
+        <div class="h-36px w-36px cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center line-height-44px" @click="handleUserCenter">
+          <img src="~/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
+        </div>
+        <div class="ml-8px h-36px w-36px cursor-pointer border-rd-[50%] text-center line-height-44px" @click="handleMessageCenter">
+          <el-icon size="20px" color="#999999"><BellFilled /></el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import useUserStore from '~/store/user'
+  const userStore = useUserStore()
+  import { BellFilled } from '@element-plus/icons-vue'
+  import { ref, computed } from 'vue'
+  const menuItems = ref([
+    { name: '首页', path: '/index' },
+    { name: '图纸', path: '/drawe' },
+    { name: '文本', path: '/text' },
+    { name: '模型', path: '/model' },
+    { name: '国外专区', path: '/foreign' },
+    { name: '工具箱', path: '/toolbox' },
+    { name: '交流频道', path: '/communication/channel' },
+    // { name: '牛人社区', path: '/community' },
+  ])
+
+  // 是否登录
+  const isLogin = computed(() => {
+    return !!userStore.token
+  })
+
+  // 用户中心
+  const handleUserCenter = () => {
+    navigateTo('/personal/center/info')
+  }
+
+  // 消息中心
+  const handleMessageCenter = () => {
+    navigateTo('/personal/center/message')
+  }
+</script>
+<style scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  /* 覆盖默认的input number样式 */
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* 自定义滚动条样式 */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+
+  .parent-links {
+    text-decoration: none;
+    font-size: 16px;
+    color: #1a65ff;
+    &:hover {
+    }
+  }
+</style>