✨ 主页添加絮语卡片归档部分初见雏形

2025-08-25 01:24:31 +08:00
parent 1fb97e1cc2
commit 363eeb74dd
20 changed files with 752 additions and 213 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { DataAnomaly } from '~/types/PostMetaData';
+import type { PostMetaData } from '~/types/PostMetaData';
+
+const articles = defineModel<PostMetaData[]>('articles', {
+  default: () => [],
+});
+
+const props = withDefaults(defineProps<{
+  currentChoice?: 'time' | 'category';
+}>(),
+{
+  currentChoice: 'time',
+});
+
+watch(() => props.currentChoice, (newChoice) => {
+  if (newChoice === 'time') {
+    articles.value.sort((a, b) => new Date(b.published_at || '2000-01-01').getTime() - new Date(a.published_at || '2000-01-01').getTime());
+  } else {
+    articles.value.sort((a, b) => {
+      if (a.category === b.category) {
+        return new Date(b.published_at || '2000-01-01').getTime() - new Date(a.published_at || '2000-01-01').getTime();
+      }
+      return a.category.localeCompare(b.category);
+    });
+  }
+});
+
+function toArticlePage(article: PostMetaData) {
+  navigateTo(`/article/${encodeURIComponent(article.id)}`);
+}
+
+function getYear(article: PostMetaData) {
+  return new Date(article.published_at).getFullYear();
+}
+
+function dateFormatToTime(date: Date | DataAnomaly) {
+  if (date === DataAnomaly.DataNotFound || date === DataAnomaly.Invalid) {
+    return date;
+  }
+  return new Date(date).toLocaleDateString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function dateFormatToDate(date: Date | DataAnomaly) {
+  if (date === DataAnomaly.DataNotFound || date === DataAnomaly.Invalid) {
+    return date;
+  }
+  return new Date(date).toLocaleDateString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+  }).replace(/\//g, '-');
+}
+</script>
+
+<template>
+  <div>
+    <div
+        v-for="(article,index) of articles" :key="article.id"
+        class="border-l-2 border-l-old-neutral-400 dark:border-l-old-neutral-500 pl-4">
+      <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="currentChoice==='time' && index == 0 || getYear(article) != getYear(articles[index-1])"
+            class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
+          {{ getYear(article) }}
+        </div>
+        <div
+            v-else-if="currentChoice==='category' && (index == 0 || article.category != articles[index-1].category)"
+            class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
+          {{ article.category }}
+        </div>
+      </Transition>
+      <div class="flex items-center" @click="toArticlePage(article)">
+        <div :title="dateFormatToTime(article.published_at)" class="text-sm w-12">
+          {{ dateFormatToDate(article.published_at) }}
+        </div>
+        <div :title="dateFormatToTime(article.published_at)" class="text-md pl-5">
+          {{ article.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.year-marker::before {
+  content: '';
+  position: absolute;
+  width: 12px; // w-3
+  height: 12px; // h-3
+  background-color: #000;
+  border-radius: 9999px; // rounded-full
+  border: 2px solid black; // border-2 border-black
+  left: -17px; // pl-3 12px + 1px border
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  transition: background-color 0.5s, border-color 0.5s;
+}
+
+.dark .year-marker::before {
+  background-color: #fff;
+  border: 2px solid white; // border-2 border-white
+}
+</style>
@@ -1,11 +1,39 @@
 <script setup lang="ts">
+import { toMetaDataType } from '~/types/PostMetaData';
+import TimeLine from '~/pages/index/archive/components/TimeLine.vue';
+
+const { data: articles } = useAsyncData(async () => (await queryCollection('content').order('published_at', 'DESC').all()).map((article) => toMetaDataType(article)));
+
+const currentChoice = ref('时间');
+
+// onMounted(() => {
+//   setTimeout(() => {
+//     console.log(articles.value);
+//   }, 2000);
+// });

 </script>
-
 <template>
-
+  <div>
+    <div class="table w-full mt-6">
+      <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
+        <div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 overflow-hidden">
+          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
+            test123456
+          </div>
+        </div>
+      </div>
+      <div
+          class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
+        <URadioGroup
+            v-model="currentChoice" orientation="horizontal" variant="table" :items="['时间', '类别']" size="sm"
+            class="mb-5"/>
+        <TimeLine v-if="articles" v-model:articles="articles!" :current-choice="currentChoice=== '时间'? 'time' : 'category'"/>
+      </div>
+    </div>
+  </div>
 </template>

 <style scoped>

-</style>
+</style>