refactor(样式): 重构文章卡片和归档页面的样式结构

将 PostCard 组件的样式移至全局 main.css 文件中统一管理
简化 PostView 和 ArchivesView 的容器 div 结构
在 ArchivesView 中添加标签云组件并实现动态获取标签数据
优化日期格式化函数，增加"今天"和"这个月"的显示逻辑

src/assets/main.css

@@ -199,3 +199,65 @@ a {
     }
 
 }
+
+
+.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 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0 0 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;
+}

src/components/PostCard.vue

@@ -25,83 +25,6 @@ const props = defineProps<{
 </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;
-}
 
 
 </style>

src/utils/index.ts

@@ -20,7 +20,7 @@ export function lightenHexColor(hexColor: string, percent: number = 20): string
   // 将 RGB 分量转换回十六进制字符串
   const toHex = (c: number) => {
     const hex = c.toString(16)
-    return hex.length === 1 ? '0' + hex : hex
+    return hex.length == 1 ? '0' + hex : hex
   }
 
   return '#' + toHex(r) + toHex(g) + toHex(b)
@@ -28,12 +28,19 @@ export function lightenHexColor(hexColor: string, percent: number = 20): string
 
 export function formateDateAccurateToDay(date: Date | string | number): string {
   const _date = new Date(date)
+  const now = new Date()
   const year = _date.getFullYear()
   const month = _date.getMonth() + 1
   const day = _date.getDate()
-  if (year !== new Date().getFullYear()) {
-    return `${year} 年 ${month} 月 ${day} 日`
-  } else {
+  if (year == now.getFullYear()) {
+    if (month == now.getMonth() + 1) {
+      if (day == now.getDate()) {
+        return '今天'
+      }
+      return '这个月'
+    }
     return `${month} 月 ${day} 日`
+  } else {
+    return `${year} 年 ${month} 月 ${day} 日`
   }
 }

src/views/ArchivesView.vue

@@ -1,54 +1,76 @@
 <script setup lang="ts">
+import TagCloud from '@/components/TagCloud.vue'
+import { api } from '@/utils/axios.ts'
+import type { Tag } from '@/models'
+import { onMounted, ref } from 'vue'
+
+
+const tags = ref<Tag[]>([]);
+
+onMounted(() => {
+  api.tagList().then(res => {
+    tags.value = res.data
+  });
+})
+
+
 
 </script>
 
 <template>
-<div class="post-list">
+  <div>
     <div class="post-item">
-        <h1 class="title">归档页面</h1>
-        <div class="tag-cloud">
-            <a href="#">枫林</a>
-            <a href="#">凤梨</a>
-            <a href="#">删库</a>
-            <a href="#">跑路</a>
-            <a href="#">不吃香菜</a>
-            <a href="#">一眼顶针</a>
-            <a href="#">今晚有事</a>
-            <a href="#">下次一定</a>
-            <a href="#">mcccccccccc</a>
-            <a href="#">舟</a>
-            <a href="#">充648</a>
-        </div>
-        <h2>枫林闯大祸</h2>
-        <div class="archive-item">
-            <a href="#">我把家门钥匙吃肚子里了</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <div class="archive-item">
-            <a href="#">我把同事的猫猫的尾巴用打火机点着了</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <div class="archive-item">
-            <a href="#">我奴役红磷致使红磷得了腱鞘炎</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <h2>枫林背大锅</h2>
-        <div class="archive-item">
-            <a href="#">不小心rm -rf/了服务器</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <div class="archive-item">
-            <a href="#">和甲方吃饭的时候我就喜欢转桌</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <div class="archive-item">
-            <a href="#">关电源的时候把整间办公室的电脑全都断了</a>
-            <span class="time">2025-05-30</span>
-        </div>
-        <div class="archive-item">
-            <a href="#">给猫猫喂了狗粮导致猫猫腹泻不止</a>
-            <span class="time">2025-05-30</span>
-        </div>
+      <h1 class="title">归档页面</h1>
+      <TagCloud :tags="tags"/>
+      <h2>枫林闯大祸</h2>
+      <div class="archive-item">
+        <a href="#">我把家门钥匙吃肚子里了</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <div class="archive-item">
+        <a href="#">我把同事的猫猫的尾巴用打火机点着了</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <div class="archive-item">
+        <a href="#">我奴役红磷致使红磷得了腱鞘炎</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <h2>枫林背大锅</h2>
+      <div class="archive-item">
+        <a href="#">不小心rm -rf/了服务器</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <div class="archive-item">
+        <a href="#">和甲方吃饭的时候我就喜欢转桌</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <div class="archive-item">
+        <a href="#">关电源的时候把整间办公室的电脑全都断了</a>
+        <span class="time">2025-05-30</span>
+      </div>
+      <div class="archive-item">
+        <a href="#">给猫猫喂了狗粮导致猫猫腹泻不止</a>
+        <span class="time">2025-05-30</span>
+      </div>
     </div>
-</div>
-</template>
+  </div>
+</template>
+
+<style scoped>
+
+.archive-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.archive-item a {
+  color: inherit;
+}
+
+.archive-item .time {
+  opacity: 0.7;
+}
+
+</style>

src/views/PostView.vue

@@ -29,7 +29,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="post-list">
+  <div>
     <PostCard v-for="item of data" :key="item.id" :target="item" />
     <div v-if="isEnd">
       没有更多了
@@ -40,4 +40,6 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>