✨ 主页布局构建完成

pages/index/archive/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

pages/index/article/[articleID]/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+{{useRoute().params.articleID}}
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

pages/index/article/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+  Article
+</div>
+</template>
+
+<style scoped>
+
+</style>

pages/index/index.vue

@@ -1,45 +1,57 @@
 <script setup lang="ts">
 
-import type { NavigationMenuItem } from '@nuxt/ui';
+import { toArticleMetaDataType } from '~/types/ArticleMetaData';
+
+const { data: articles } = useAsyncData(async () => await queryCollection('content').all());
+
+onMounted(() => {
+  console.log(articles.value);
+});
+
+// // 监听断点变化并设置延迟策略
+// watch(showLeftDetailInfo, (newValue, oldValue) => {
+//   if (newValue && !oldValue) {
+//     // xl -> 2xl (显示) - 需要延迟
+//     shouldDelay.value = true;
+//     isTransitioning.value = true;
+//   } else if (!newValue && oldValue) {
+//     // 2xl -> xl (隐藏) - 不延迟
+//     shouldDelay.value = false;
+//     isTransitioning.value = true;
+//   }
+//
+//   // 动画完成后重置状态
+//   setTimeout(() => {
+//     isTransitioning.value = false;
+//   }, 400); // 根据你的动画时长调整
+// });
 
-const items = ref<NavigationMenuItem[]>([
-  {
-    label: '首页',
-    icon: 'i-lucide-home',
-    to: '/',
-  },
-  {
-    label: '归档',
-    icon: 'i-lucide-paperclip',
-    to: '/archive',
-  },
-  {
-    label: '关于',
-    icon: 'i-lucide-info',
-    to: '/about',
-  },
-  {
-    label: 'Contact',
-    to: '/contact',
-  },
-]);
-useColorMode().preference = 'light';
 </script>
 
 <template>
   <div>
-    <NuxtRouteAnnouncer />
-    <UApp>
-      <div class="w-full flex justify-center">
-        <div class="xl:w-[1220px] lg:w-[964px] md:w-[708px]">
-        <UNavigationMenu :items="items" class="w-full"/>
-        <NuxtPage />
+    <div class="mt-4">
+      <div class="table w-full">
+        <div class="sticky top-16 float-left bg-old-neutral-500 h-[100vh]">
+          <div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 h-full overflow-hidden">
+            <div class="absolute top-0 left-0 w-80 text-white z-50">
+              <div class="">
+                test123456
+              </div>
+            </div>
+          </div>
         </div>
+        <div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
+          <ArticleCard
+              v-for="article in articles" :key="article.id"
+              class="mb-4 w-full"
+              :article="toArticleMetaDataType(article)"/>
+          <ArticleCard/>
+        </div>
+
       </div>
-    </UApp>
+      test
+    </div>
+
   </div>
 </template>
-
-<style scoped>
-
-</style>