perf:优化文章卡片

Yi.Bbs.Vue3/src/components/AvatarInfo.vue

@@ -155,7 +155,6 @@ const getStatusInfo = (type) => {
 
 .info {
   flex: 1;
-  margin-top: 0.6rem;
   margin-left: 1rem;
 }
 
@@ -171,6 +170,7 @@ const getStatusInfo = (type) => {
   flex: 1;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .avatar-left,

Yi.Bbs.Vue3/src/components/DisscussCard.vue

@@ -1,73 +1,50 @@
 <template>
   <el-badge class="box-card">
     <el-card shadow="never" :style="{ 'border-color': discuss.color }">
-      <el-row>
+      <div class="card-header">
-        <!-- 头部 -->
+        <AvatarInfo :userInfo="discuss.user" />
-        <el-col :span="24" class="card-header">
+      </div>
-          <AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
+      <div v-if="discuss.isBan" class="item item-title">
-        </el-col>
+        <el-link size="100" :underline="false" style="color: #f56c6c">{{
-
+          discuss.title
-        <!-- 身体 -->
+        }}</el-link>
-
+      </div>
-        <el-col :span="18">
+      <div v-else class="item item-title">
-          <el-row>
+        <el-link
-            <el-col v-if="discuss.isBan" :span="24" class="item item-title">
+          size="100"
-              <el-link size="100" :underline="false" style="color: #f56c6c">{{
+          :underline="false"
-                discuss.title
+          @click="enterDiscuss(discuss.id)"
-              }}</el-link></el-col
+          >{{ discuss.title }}</el-link
-            >
+        >
-
+      </div>
-            <el-col v-else :span="24" class="item item-title">
+      <div>
-              <el-link
+        <div class="item item-description">
-                size="100"
+          {{ discuss.introduction }}
-                :underline="false"
+        </div>
-                @click="enterDiscuss(discuss.id)"
+      </div>
-                >{{ discuss.title }}</el-link
+      <div style="display: flex; justify-content: center">
-              ></el-col
+        <el-image
-            >
+          :preview-src-list="[getUrl(discuss.cover)]"
-
+          v-if="discuss.cover"
-            <el-col :span="24" class="item item-description">{{
+          :src="getUrl(discuss.cover)"
-              discuss.introduction
+          style="width: 100px; height: 100px"
-            }}</el-col>
+        />
-            <el-col :span="24" class="item item-tag"
+      </div>
-              ><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col
+      <!-- 底部 -->
-            >
+      <div class="item item-bottom">
-          </el-row>
+        <div class="tag-list">
-        </el-col>
+          <el-tag v-for="i in 4" :key="i">教程</el-tag>
-
+        </div>
-        <el-col :span="6" style="display: flex; justify-content: center">
+        <el-space :size="10" :spacer="spacer">
-          <el-image
+          <div class="item-description">
-            :preview-src-list="[getUrl(discuss.cover)]"
+            {{ discuss.creationTime }}
-            v-if="discuss.cover"
+          </div>
-            :src="getUrl(discuss.cover)"
+          <AgreeInfo :data="discuss" />
-            style="width: 100px; height: 100px"
+          <el-button icon="View" text>
-          />
+            浏览数:{{ discuss.seeNum ?? 0 }}</el-button
-        </el-col>
+          >
-
+        </el-space>
-        <!-- 底部 -->
+      </div>
-        <el-col :span="24" class="item item-bottom" style="margin-bottom: 0">
-          <el-space :size="10" :spacer="spacer">
-            <div class="item-description">
-              {{ discuss.creationTime }}
-            </div>
-            <AgreeInfo :data="discuss" />
-            <!-- 
-                        <el-button text @click="agree">
-                            <el-icon v-if="discuss.isAgree" color="#409EFF">
-                                <CircleCheckFilled />
-                            </el-icon>
-                            <el-icon v-else color="#1E1E1E">
-                                <Pointer />
-                            </el-icon> 点赞:{{ discuss.agreeNum ?? 0 }}</el-button>
-                        <el-button icon="Star" text>
-                            收藏</el-button> -->
-
-            <el-button icon="View" text>
-              浏览数:{{ discuss.seeNum ?? 0 }}</el-button
-            >
-          </el-space>
-        </el-col>
-      </el-row>
     </el-card>
     <div class="pinned" v-if="props.badge">
       <div class="icon">
@@ -155,30 +132,34 @@ onMounted(() => {
   discuss.value = props.agreeNum;
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
 .el-card {
   border: 2px solid white;
 }
 
-.item-bottom .el-icon {
+.item-bottom {
-  margin-right: 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+  .el-icon {
+    margin-right: 0.4rem;
+  }
 }
 
 .card-header {
   display: flex;
-  margin-bottom: 1.5rem;
   align-items: center;
 }
 
 .item {
   font-size: 14px;
-  margin-bottom: 18px;
+  margin: 5px 0;
 }
 
 .box-card {
   position: relative;
   width: 100%;
-  min-height: 15rem;
   /* right: calc(1px + var(--el-badge-size)/ 2) !important; */
   /* top: 0 !important;  */
   .pinned {
@@ -187,7 +168,7 @@ onMounted(() => {
     position: absolute;
     top: 10px;
     right: 10px;
-    padding: 5px 15px;
+    padding: 2px 15px;
     border-radius: 5px;
     color: rgb(8, 119, 229);
     background-color: #ecf5ff;
@@ -221,4 +202,7 @@ onMounted(() => {
   font-size: initial;
   font-weight: 700;
 }
+:deep(.el-card__body) {
+  padding: 10px 20px;
+}
 </style>

Yi.Bbs.Vue3/src/components/InfoCard.vue

@@ -44,7 +44,7 @@ const height = ref(props.height + "px");
 }
 
 .item {
-  margin: 0.5rem 0;
+  margin: 1rem 0;
 }
 
 .box-card {

Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue

@@ -9,7 +9,7 @@
     v-if="!props.isSelf"
   >
     <template #reference>
-      <el-avatar :size="props.size" :src="iconUrl" />
+      <el-avatar :size="30" :src="iconUrl" />
     </template>
     <div class="top">
       <div class="left">

Yi.Bbs.Vue3/src/views/Article.vue

@@ -19,15 +19,17 @@
                   >添加子文章</el-button
                 >
                 <!--目录在这里 -->
-                <TreeArticleInfo
+                <el-scrollbar height="410px">
-                  :data="articleData"
+                  <TreeArticleInfo
-                  @remove="delArticle"
+                    :data="articleData"
-                  @update="updateArticle"
+                    @remove="delArticle"
-                  @create="addNextArticle"
+                    @update="updateArticle"
-                  @handleNodeClick="handleNodeClick"
+                    @create="addNextArticle"
-                  :currentNodeKey="currentNodeKey"
+                    @handleNodeClick="handleNodeClick"
-                  :isArticleUser="isArticleUser"
+                    :currentNodeKey="currentNodeKey"
-                />
+                    :isArticleUser="isArticleUser"
+                  />
+                </el-scrollbar>
               </template>
             </InfoCard>
           </el-col>

Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue

@@ -81,10 +81,12 @@ const userImageSrc = computed(() => {
   display: flex;
   justify-content: space-around;
   .left {
+    display: flex;
+    align-items: center;
     flex: 1;
     .icon {
-      width: 40px;
+      width: 30px;
-      height: 40px;
+      height: 30px;
       img {
         width: 100%;
         height: 100%;