From ecb4240d8d7469de78fba1b0a5c16e2d2d41cc11 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sun, 7 Jan 2024 22:31:52 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E4=BC=98=E5=8C=96=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/AvatarInfo.vue     |   2 +-
 Yi.Bbs.Vue3/src/components/DisscussCard.vue   | 132 ++++++++----------
 Yi.Bbs.Vue3/src/components/InfoCard.vue       |   2 +-
 .../src/components/UserInfoCard/index.vue     |   2 +-
 Yi.Bbs.Vue3/src/views/Article.vue             |  20 +--
 .../home/components/RecommendFriend/index.vue |   6 +-
 6 files changed, 76 insertions(+), 88 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
index b969f3ec..213c74c7 100644
--- a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
+++ b/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,
diff --git a/Yi.Bbs.Vue3/src/components/DisscussCard.vue b/Yi.Bbs.Vue3/src/components/DisscussCard.vue
index 2410c510..a3a7fd9f 100644
--- a/Yi.Bbs.Vue3/src/components/DisscussCard.vue
+++ b/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>
-        <!-- 头部 -->
-        <el-col :span="24" class="card-header">
-          <AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
-        </el-col>
-
-        <!-- 身体 -->
-
-        <el-col :span="18">
-          <el-row>
-            <el-col v-if="discuss.isBan" :span="24" class="item item-title">
-              <el-link size="100" :underline="false" style="color: #f56c6c">{{
-                discuss.title
-              }}</el-link></el-col
-            >
-
-            <el-col v-else :span="24" class="item item-title">
-              <el-link
-                size="100"
-                :underline="false"
-                @click="enterDiscuss(discuss.id)"
-                >{{ discuss.title }}</el-link
-              ></el-col
-            >
-
-            <el-col :span="24" class="item item-description">{{
-              discuss.introduction
-            }}</el-col>
-            <el-col :span="24" class="item item-tag"
-              ><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col
-            >
-          </el-row>
-        </el-col>
-
-        <el-col :span="6" style="display: flex; justify-content: center">
-          <el-image
-            :preview-src-list="[getUrl(discuss.cover)]"
-            v-if="discuss.cover"
-            :src="getUrl(discuss.cover)"
-            style="width: 100px; height: 100px"
-          />
-        </el-col>
-
-        <!-- 底部 -->
-        <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>
+      <div class="card-header">
+        <AvatarInfo :userInfo="discuss.user" />
+      </div>
+      <div v-if="discuss.isBan" class="item item-title">
+        <el-link size="100" :underline="false" style="color: #f56c6c">{{
+          discuss.title
+        }}</el-link>
+      </div>
+      <div v-else class="item item-title">
+        <el-link
+          size="100"
+          :underline="false"
+          @click="enterDiscuss(discuss.id)"
+          >{{ discuss.title }}</el-link
+        >
+      </div>
+      <div>
+        <div class="item item-description">
+          {{ discuss.introduction }}
+        </div>
+      </div>
+      <div style="display: flex; justify-content: center">
+        <el-image
+          :preview-src-list="[getUrl(discuss.cover)]"
+          v-if="discuss.cover"
+          :src="getUrl(discuss.cover)"
+          style="width: 100px; height: 100px"
+        />
+      </div>
+      <!-- 底部 -->
+      <div class="item item-bottom">
+        <div class="tag-list">
+          <el-tag v-for="i in 4" :key="i">教程</el-tag>
+        </div>
+        <el-space :size="10" :spacer="spacer">
+          <div class="item-description">
+            {{ discuss.creationTime }}
+          </div>
+          <AgreeInfo :data="discuss" />
+          <el-button icon="View" text>
+            浏览数:{{ discuss.seeNum ?? 0 }}</el-button
+          >
+        </el-space>
+      </div>
     </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 {
-  margin-right: 0.4rem;
+.item-bottom {
+  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>
diff --git a/Yi.Bbs.Vue3/src/components/InfoCard.vue b/Yi.Bbs.Vue3/src/components/InfoCard.vue
index e3c178e7..4bf2469e 100644
--- a/Yi.Bbs.Vue3/src/components/InfoCard.vue
+++ b/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 {
diff --git a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
index 0c6c9598..8c5da862 100644
--- a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
+++ b/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">
diff --git a/Yi.Bbs.Vue3/src/views/Article.vue b/Yi.Bbs.Vue3/src/views/Article.vue
index 7e11030c..c8513090 100644
--- a/Yi.Bbs.Vue3/src/views/Article.vue
+++ b/Yi.Bbs.Vue3/src/views/Article.vue
@@ -19,15 +19,17 @@
                   >添加子文章</el-button
                 >
                 <!--目录在这里 -->
-                <TreeArticleInfo
-                  :data="articleData"
-                  @remove="delArticle"
-                  @update="updateArticle"
-                  @create="addNextArticle"
-                  @handleNodeClick="handleNodeClick"
-                  :currentNodeKey="currentNodeKey"
-                  :isArticleUser="isArticleUser"
-                />
+                <el-scrollbar height="410px">
+                  <TreeArticleInfo
+                    :data="articleData"
+                    @remove="delArticle"
+                    @update="updateArticle"
+                    @create="addNextArticle"
+                    @handleNodeClick="handleNodeClick"
+                    :currentNodeKey="currentNodeKey"
+                    :isArticleUser="isArticleUser"
+                  />
+                </el-scrollbar>
               </template>
             </InfoCard>
           </el-col>
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
index b8b8790a..8abe08d5 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
+++ b/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;
-      height: 40px;
+      width: 30px;
+      height: 30px;
       img {
         width: 100%;
         height: 100%;