✨ 主页布局构建完成

pages/admin/index.vue

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

pages/index.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+// onMounted(() =>
+//   useColorMode().preference = 'dark',
+// );
+// function clickHandler() {
+//   console.log('Button clicked');
+//   useColorMode().preference = useColorMode().preference === 'light'? 'dark' : 'light';
+// }
+
+import useColorModeStore from '~/stores/colorModeStore';
+
+// const { colorMode } = storeToRefs(useColorModeStore());
+</script>
+
+<template>
+  <NuxtLayout :name="'user-layout'">
+    <template #navbarLeft="{ isScrollDown } : { isScrollDown: boolean }">
+      <Transition
+          enter-active-class="transition-opacity duration-500 ease-in-out"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition-opacity duration-500 ease-in-out"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+      >
+        <div v-if="isScrollDown" class="pl-5 text-xl h-12 leading-11 flex">
+          随机存取
+        </div>
+      </Transition>
+    </template>
+    <template #navbarRight>
+      <div class="flex items-center h-full">
+        <div class="flex-1"/>
+        <div class="flex-1 flex  items-center justify-end duration500 ease-in-out">
+          <Transition
+              mode="out-in"
+              enter-active-class="transition-opacity duration-300 ease-in-out"
+              enter-from-class="opacity-0"
+              enter-to-class="opacity-100"
+              leave-active-class="transition-opacity duration-300 ease-in-out"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+          >
+            <Icon
+                v-if="useColorModeStore().colorMode === 'dark'"
+                key="dark"
+                name="material-symbols:dark-mode"
+                class="text-2xl cursor-pointer mr-5"
+                @click="() => useColorModeStore().toggleColorMode()"
+            />
+            <Icon
+                v-else
+                key="light"
+                name="material-symbols:clear-day-rounded"
+                class="text-2xl cursor-pointer mr-5"
+                @click="() => useColorModeStore().toggleColorMode()"
+            />
+          </Transition>
+        </div>
+      </div>
+    </template>
+    <template #header>
+      <div class="w-full flex-1 justify-center flex items-center">
+        <p class="text-8xl">
+          随机存取
+        </p>
+      </div>
+    </template>
+    <template #content>
+      <div>
+        <NuxtRouteAnnouncer/>
+        <NuxtPage/>
+        <button
+            @click="() => {
+                 useColorModeStore().toggleColorMode();
+            }
+        ">swap Theme
+        </button>
+        <div class="min-h-[100vh]"></div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="w-full flex-1 justify-center flex items-center"></div>
+    </template>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+
+</style>

pages/index/archive/index.vue

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

pages/index/article/index.vue

@@ -4,7 +4,7 @@
 
 <template>
 <div>
-
+  Article
 </div>
 </template>
 

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>