feat: 使用element-plus代替naive-ui，解决因naive-ui内联样式导致水合出现抖动的bug

pages/index.vue

@@ -6,7 +6,7 @@
     <div class="content-wrap">
       <div v-for="(item) in PageContent" :key="item.subTitle" class="content">
         <div class="sub-title">
-          <n-divider title-placement="left">
+          <miao-divider-left>
             <div class="sub-title-wrapper">
               <div class="sub-title-text">{{ item.subTitle }}</div>
               <div :class="['sub-title-chevron', item.show ? '' : 'sub-title-chevron-hide']"
@@ -14,7 +14,7 @@
                 <ChevronDown />
               </div>
             </div>
-          </n-divider>
+          </miao-divider-left >
         </div>
         <div :class="['content-items-wrap', item.show ? '' : 'content-items-wrap-hide']">
           <div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
@@ -34,6 +34,7 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue';
+import miaoDividerLeft from '~/components/miaoDivider-left.vue';
 // @ts-ignore
 import ChevronDown from "@vicons/ionicons5/ChevronDown"
 
@@ -155,7 +156,7 @@ const switchItemShow = (item: PageContent) => {
   display: flex;
   flex-direction: column;
   padding: 20px 10px;
-  background: rgba(21, 170, 135, .02);
+  background: #fff;
 
   .content-wrap {
     box-sizing: border-box;
@@ -164,6 +165,8 @@ const switchItemShow = (item: PageContent) => {
 
     .content {
 
+      padding-bottom: 20px;
+
       .sub-title {
         display: flex;
         height: 80px;

pages/posts/index.vue

@@ -14,8 +14,7 @@
         </article>
         <div class="posts-skeleton" v-if="!isInit">
             <div class="posts-skeleton-item" v-for="_ in range(5)">
-                <n-skeleton text style="height: 40px; width: 60%" />
-                <n-skeleton text :repeat="2" />
+                <el-skeleton :rows="5" />
             </div>
         </div>
     </div>

pages/posts/post-[id].vue

@@ -6,10 +6,7 @@
             <div v-html="renderedData"></div>
         </div>
         <div v-else class="md-skeleton-item">
-            <n-skeleton text style="height: 40px; width: 60%" />
-            <n-skeleton text :repeat="2" />
-            <n-skeleton text style="height: 40px; width: 60%" />
-            <n-skeleton text :repeat="6" />
+            <el-skeleton :rows="12" />
         </div>
     </div>
 </template>