feat:移植工程

src/components/Blog/Archive/BlogArchive.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="blog-archive blog-section">
+    <h4 class="module-title">文章归档</h4>
+
+    <el-date-picker
+        v-model="currentYear"
+        type="year" placeholder="请选择年份"
+        style="width: 100px"
+        @change="changeDateEvent"
+    />
+
+    <span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
+
+    <el-timeline class="time-line">
+      <el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
+        <div class="item">
+          <span class="date">{{ value.createTime }}</span>
+          <span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlogStore } from '@/store/blog.ts'
+import { useRouter } from 'vue-router'
+import { onMounted, ref } from 'vue'
+
+const blogStore = useBlogStore()
+const router = useRouter()
+const currentYear = ref(new Date())
+
+onMounted(() => {
+  blogStore.queryBlogByCondition({
+    year: (new Date()).getFullYear()
+  })
+})
+
+/**
+ * 选择年份事件
+ * @param value 年份
+ */
+const changeDateEvent = async (value: Date) => {
+  await blogStore.queryBlogByCondition({
+    year: value.getFullYear()
+  })
+}
+
+/**
+ * 点击查看博客按钮
+ * @param index 索引
+ */
+const viewBlogClick = async (index: number) => {
+  const blogId = blogStore.blogList[index].id
+  await router.push({ name: 'BlogDetail', params: { id: blogId } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.archive.module.scss";
+</style>