From 044211b0785b542f78db21f2690ce2aabd70c9be Mon Sep 17 00:00:00 2001
From: sugar <enginerzjl@foxmail.com>
Date: Wed, 27 Mar 2024 13:32:48 +0800
Subject: [PATCH] fix:  mobile Hydration error

---
 packages/theme/docs/todo.md                |  2 +-
 packages/theme/src/components/BlogApp.vue  |  1 -
 packages/theme/src/components/BlogItem.vue | 52 +++++++++++++++-------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/packages/theme/docs/todo.md b/packages/theme/docs/todo.md
index 89024959..2ea49f67 100644
--- a/packages/theme/docs/todo.md
+++ b/packages/theme/docs/todo.md
@@ -7,7 +7,6 @@ sidebar: false
 
 ## 正在进行中
 
-* [ ] 问题修复：水合问题
 * [ ] 博客概览信息（文章数，网站运行天数，字数，访问量等等）
 * [ ] 文章支持短链
 * [ ] 时区问题（对齐 VitePress默认逻辑），同时支持自定义时区（引入第三方时间处理库）
@@ -30,6 +29,7 @@ sidebar: false
 ## 已完成
 
 近期完成：
+* [x] 问题修复：水合问题
 * [x] windows 上运行本项目
 * [x] cleanUrls 适配，访问侧边栏未配置服务端的情况下404
 * [ ] ~~侧栏切换页面闪烁（弱网出现）~~
diff --git a/packages/theme/src/components/BlogApp.vue b/packages/theme/src/components/BlogApp.vue
index c02218e1..d2bada87 100644
--- a/packages/theme/src/components/BlogApp.vue
+++ b/packages/theme/src/components/BlogApp.vue
@@ -58,7 +58,6 @@ useOml2d()
         </div>
         <div class="content-wrapper">
           <div class="blog-list-wrapper">
-            <!-- TODO: 水合问题移动端 -->
             <BlogList />
           </div>
           <div class="blog-info-wrapper">
diff --git a/packages/theme/src/components/BlogItem.vue b/packages/theme/src/components/BlogItem.vue
index 35ff4de4..99f29e0d 100644
--- a/packages/theme/src/components/BlogItem.vue
+++ b/packages/theme/src/components/BlogItem.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useCleanUrls } from '../composables/config/blog'
 
@@ -17,8 +16,6 @@ const props = defineProps<{
   cover?: string | boolean
   pin?: number
 }>()
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
@@ -28,15 +25,16 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
 </script>
 
 <template>
+  <!-- TODO: 响应式优化使用纯 CSS -->
   <a class="blog-item" :href="link">
     <i v-if="!!pin" class="pin" />
     <!-- 标题 -->
-    <p v-if="inMobile" class="title">{{ title }}</p>
+    <p class="title mobile-visible">{{ title }}</p>
     <div class="info-container">
       <!-- 左侧信息 -->
       <div class="info-part">
         <!-- 标题 -->
-        <p v-if="!inMobile" class="title">{{ title }}</p>
+        <p class="title pc-visible">{{ title }}</p>
         <!-- 简短描述 -->
         <p v-if="!descriptionHTML && !!description" class="description">
           {{ description }}
@@ -45,21 +43,17 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
           <div class="description-html" v-html="descriptionHTML" />
         </template>
         <!-- 底部补充描述 -->
-        <div v-if="!inMobile" class="badge-list">
+        <div class="badge-list pc-visible">
           <span v-if="author" class="split">{{ author }}</span>
           <span class="split">{{ showTime }}</span>
           <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
         </div>
       </div>
       <!-- 右侧封面图 -->
-      <div
-        v-if="cover"
-        class="cover-img"
-        :style="`background-image: url(${withBase(`${cover}`)});`"
-      />
+      <div v-if="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
     </div>
     <!-- 底部补充描述 -->
-    <div v-if="inMobile" class="badge-list">
+    <div class="badge-list mobile-visible">
       <span v-if="author" class="split">{{ author }}</span>
       <span class="split">{{ showTime }}</span>
       <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
@@ -77,19 +71,19 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   left: -4px;
   opacity: 0.5;
 }
+
 .blog-item:hover .pin {
   opacity: 1;
 }
+
 .blog-item .pin::before {
   content: '';
   position: absolute;
   width: 120%;
   height: 30px;
-  background-image: linear-gradient(
-    45deg,
-    var(--blog-theme-color),
-    var(--blog-theme-color)
-  );
+  background-image: linear-gradient(45deg,
+      var(--blog-theme-color),
+      var(--blog-theme-color));
   transform: rotate(-45deg) translateY(-20px);
   display: flex;
   align-items: center;
@@ -111,10 +105,12 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   cursor: pointer;
   display: flex;
   flex-direction: column;
+
   &:hover {
     box-shadow: var(--box-shadow-hover);
   }
 }
+
 .info-container {
   display: flex;
   align-items: center;
@@ -124,11 +120,13 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
 .info-part {
   flex: 1;
 }
+
 .title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px;
 }
+
 .description {
   color: var(--description-font-color);
   font-size: 14px;
@@ -140,13 +138,16 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
 .description-html {
   font-size: 14px;
 }
+
 .badge-list {
   font-size: 13px;
   color: var(--badge-font-color);
   margin-top: 8px;
+
   .split:not(:last-child) {
     &::after {
       content: '';
@@ -158,6 +159,7 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
     }
   }
 }
+
 .cover-img {
   width: 120px;
   height: 80px;
@@ -167,11 +169,27 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   background-size: 120px 80px;
 }
 
+.pc-visible {
+  display: block;
+}
+
+.mobile-visible {
+  display: none;
+}
+
 @media screen and (max-width: 500px) {
   .cover-img {
     width: 100px;
     height: 60px;
     background-size: 100px 60px;
   }
+
+  .pc-visible {
+    display: none;
+  }
+
+  .mobile-visible {
+    display: block;
+  }
 }
 </style>