refactor(post): 重构文章展示组件和样式

将文章展示相关样式从全局CSS迁移到PostCard组件中，实现样式封装
新增PostCard组件用于展示文章卡片，支持动态数据加载
修改PostView视图使用新组件并实现分页加载功能

src/assets/main.css

@@ -52,45 +52,6 @@ a {
     display: none;
 }
 
-/* 文本格式 文章页 */
-.post-item p,
-.post-item img,
-.post-item ol,
-.post-item ul,
-.post-item figure,
-.post-item pre,
-.post-item table {
-    margin: 10px 0;
-}
-
-.post-item h1,
-.post-item h2,
-.post-item h3,
-.post-item h4,
-.post-item h5,
-.post-item h6 {
-    margin: 20px 0;
-}
-
-.post-item h1,
-.post-item h2 {
-    /*18px*/
-    font-size: 20px;
-}
-
-.post-item h3 {
-    /*18px*/
-    font-size: 18px;
-}
-
-.post-item h4,
-.post-item h5,
-.post-item h6 {
-    /*16px*/
-    font-size: 16px;
-}
-
-
 .container {
     display: flex;
     justify-content: center;
@@ -162,58 +123,6 @@ a {
     transition: all .3s;
 }
 
-.post-item {
-    margin-bottom: 20px;
-    padding: 30px;
-    background: var(--background-color);
-    line-height: 30px;
-    border-radius: 12px;
-}
-
-.post-item .title {
-    margin: 0;
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.post-item .meta {
-    font-size: 14px;
-    opacity: .7;
-    margin: 10px 0;
-}
-.post-item .meta span:nth-child(2)::before {
-    content: "·";
-    margin: 0 5px;
-}
-
-/* archive */
-.post-item .archive-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 10px 0;
-}
-
-.post-item .archive-item a {
-    color: inherit;
-}
-
-.post-item .archive-item .time {
-    opacity: .7;
-}
-
-/* tagcloud */
-.post-item .tag-cloud a {
-    color: inherit;
-    border: 1px solid;
-    border-radius: 50px;
-    padding: 0 16px;
-    display: inline-block;
-    margin: 3px 0;
-    margin-right: 6px;
-}
-
 .footer {
     padding: 20px;
     margin: 20px 0;

src/components/PostCard.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { PostSketch } from '@/models'
+
+const props = defineProps<{
+  target: PostSketch
+}>()
+</script>
+
+<template>
+  <div class="post-item">
+    <h2 class="title">{{ props.target.title }}</h2>
+    <div class="meta">
+      <span class="date">{{ props.target.createdAt }}</span>
+      <span class="cate">日志</span>
+    </div>
+    <p>
+      {{ props.target.description }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.post-item p,
+.post-item img,
+.post-item ol,
+.post-item ul,
+.post-item figure,
+.post-item pre,
+.post-item table {
+  margin: 10px 0;
+}
+
+.post-item h1,
+.post-item h2,
+.post-item h3,
+.post-item h4,
+.post-item h5,
+.post-item h6 {
+  margin: 20px 0;
+}
+
+.post-item h1,
+.post-item h2 {
+  /*18px*/
+  font-size: 20px;
+}
+
+.post-item h3 {
+  /*18px*/
+  font-size: 18px;
+}
+
+.post-item h4,
+.post-item h5,
+.post-item h6 {
+  /*16px*/
+  font-size: 16px;
+}
+
+.post-item {
+  margin-bottom: 20px;
+  padding: 30px;
+  background: var(--background-color);
+  line-height: 30px;
+  border-radius: 12px;
+}
+
+.post-item .title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.post-item .meta {
+  font-size: 14px;
+  opacity: 0.7;
+  margin: 10px 0;
+}
+.post-item .meta span:nth-child(2)::before {
+  content: '·';
+  margin: 0 5px;
+}
+
+/* archive */
+.post-item .archive-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.post-item .archive-item a {
+  color: inherit;
+}
+
+.post-item .archive-item .time {
+  opacity: 0.7;
+}
+
+/* tagcloud */
+.post-item .tag-cloud a {
+  color: inherit;
+  border: 1px solid;
+  border-radius: 50px;
+  padding: 0 16px;
+  display: inline-block;
+  margin: 3px 0;
+  margin-right: 6px;
+}
+</style>

src/views/PostView.vue

@@ -1,34 +1,43 @@
 <script setup lang="ts">
+import type { PostSketch } from '@/models';
+import { onMounted, ref } from 'vue';
+import { api } from '@/utils/axios';
+import PostCard from '@/components/PostCard.vue';
+
+const data = ref<PostSketch[]>([]);
+const pageSize = 10;
+const isEnd = ref(false);
+
+function nextDatum() {
+  if (isEnd.value) {
+    return;
+  }
+  api.postList(pageSize, data.value.length).then((res) => {
+    if (res.data.length < pageSize) {
+      isEnd.value = true;
+    }
+    data.value = [...data.value, ...res.data];
+  }).catch((err) => {
+    console.error(err);
+  });
+}
+
+onMounted(() => {
+  nextDatum();
+});
 
 </script>
 
 <template>
-    <div class="post-list">
-        <div class="post-item">
-            <h2 class="title">枫林的二三事</h2>
-            <div class="meta">
-                <span class="date">2023-10-01</span>
-                <span class="cate">日志</span>
-            </div>
-            <p>长期以来，我们在关系领域成绩斐然，关系突飞猛进。然而枫林写博客的发展并不像它表面那么光鲜，枫林写博客问题依然突出。因此，必须正确认识关系，确保关系的实现。我们不仅要倡导调控更要研究问题。
-                根据特点表明，要想枫林写博客，就必须改进政策，我们应该清醒地看到，我国正处于结构调整期、产业转型期，经济发展面临挑战，人均资源相对不足，进一步发展还面临着一些突出的问题和矛盾。从我们发展的战略全局看，走做深、做细、做实道路，调整特点结构，转变特点方式，缓解特点瓶颈制约，加快特点升级，促进特点，维护特点利益。进入新阶段，枫林写博客面临着新的机遇和挑战。按照部署和要求，全面贯彻落实科学发展观，求真务实，开拓创新，扎实工作，为构建和谐社会服务，为转变权威，拓展总体布局，教育本质属性，为适应领域，激发政策，培育质量，综上所述，我们应该求真务实，积极推进枫林写博客工作制度化，建立体系，积极推进枫林写博客工作正常化，规范办文，积极推进枫林写博客工作程序化，强化责任，积极推进枫林写博客工作有序化，注重质量，积极推进枫林写博客服务规范化，统筹兼顾，积极推进枫林写博客工作正常化。
-                “其身正，不令而行；其身不正，虽令不从。”对于枫林写博客问题，需要我们发扬钉钉子的精神，一锤一锤敲下去，将内在要求干在实处，做到细处，落在深处。惟其如此，才能将钉子钉牢钉实，才能将枫林写博客问题彻底解决，才能让发展的脚步更加平稳坚定。
-            </p>
-        </div>
-        <div class="post-item">
-            <h2 class="title">枫林的二三事</h2>
-            <div class="meta">
-                <span class="date">2023-10-01</span>
-                <span class="cate">日志</span>
-            </div>
-            <p>长期以来，我们在关系领域成绩斐然，关系突飞猛进。然而枫林写博客的发展并不像它表面那么光鲜，枫林写博客问题依然突出。因此，必须正确认识关系，确保关系的实现。我们不仅要倡导调控更要研究问题。
-                根据特点表明，要想枫林写博客，就必须改进政策，我们应该清醒地看到，我国正处于结构调整期、产业转型期，经济发展面临挑战，人均资源相对不足，进一步发展还面临着一些突出的问题和矛盾。从我们发展的战略全局看，走做深、做细、做实道路，调整特点结构，转变特点方式，缓解特点瓶颈制约，加快特点升级，促进特点，维护特点利益。进入新阶段，枫林写博客面临着新的机遇和挑战。按照部署和要求，全面贯彻落实科学发展观，求真务实，开拓创新，扎实工作，为构建和谐社会服务，为转变权威，拓展总体布局，教育本质属性，为适应领域，激发政策，培育质量，综上所述，我们应该求真务实，积极推进枫林写博客工作制度化，建立体系，积极推进枫林写博客工作正常化，规范办文，积极推进枫林写博客工作程序化，强化责任，积极推进枫林写博客工作有序化，注重质量，积极推进枫林写博客服务规范化，统筹兼顾，积极推进枫林写博客工作正常化。
-                “其身正，不令而行；其身不正，虽令不从。”对于枫林写博客问题，需要我们发扬钉钉子的精神，一锤一锤敲下去，将内在要求干在实处，做到细处，落在深处。惟其如此，才能将钉子钉牢钉实，才能将枫林写博客问题彻底解决，才能让发展的脚步更加平稳坚定。
-            </p>
-        </div>
+  <div class="post-list">
+    <PostCard v-for="item of data" :key="item.id" :target="item" />
+    <div v-if="isEnd">
+      没有更多了
     </div>
+    <div v-else @click="nextDatum">
+      显示更多
+    </div>
+  </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>