优化summaryList.vue代码格式及性能

src/views/components/aiChat/summaryList.vue

 <template>
-    <div class="summaryListContainer ">
-        <div
-          v-scroll:50="requestDataList"
-          v-loading="loading"
-          class="messageDetailsScroll"
-        >
-          <div v-if="messageList.length > 0">
-            <div
-              v-for="(item, index) in messageList"
-              :key="index"
-              class="messageListItem"
-            >
-              <div class="itemTop">
-                {{ item.date }}
-              </div>
-              <div class="itemCenter">
-                {{ item.summary }}
-              </div>
-            </div>
+  <div class="summaryListContainer ">
+    <div v-scroll:50="requestDataList" v-loading="loading" class="messageDetailsScroll">
+      <div v-if="messageList.length > 0">
+        <div v-for="(item, index) in messageList" :key="index" class="messageListItem">
+          <div class="itemTop">
+            {{ item.date }}
           </div>
-          <div class="no-content-main" v-if="!loading && messageList.length == 0">
-            <noContent  />
+          <div class="itemCenter">
+            {{ item.summary }}
           </div>
         </div>
+      </div>
+      <div class="no-content-main" v-if="!loading && messageList.length == 0">
+        <noContent />
+      </div>
     </div>
-  </template>
-  <script>
-  import { mapMutations, mapState } from 'vuex'
-  import { corp_follow_up_summary_index } from '@/api/works'
-  import { throttle } from '@/utils'
+  </div>
+</template>
+<script>
+import { mapMutations, mapState } from 'vuex'
+import { corp_follow_up_summary_index } from '@/api/works'
+import { throttle } from '@/utils'
 import noContent from '@/components/noContent.vue'
-  export default {
-    components: {
-        noContent
-    },
-    props: {
-      chatUserDetails: {
-        typeof: Object,
-        default: () => { }
-      }
-    },
-    data() {
-      return {
-        loading: false,
-        isloadMore: true,
-        messageList: [],
-        pageInfo: {
-          page: 0,
-          page_size: 20,
-          total: 0
-        }
-      }
-    },
-    computed: {
-      ...mapState('game', ['accountSelect']),
-      ...mapState('user', ['external_userid']),
-    },
-    mounted() {
-      this.pageInfo = {
+export default {
+  components: {
+    noContent
+  },
+  props: {
+    chatUserDetails: {
+      typeof: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      isloadMore: true,
+      messageList: [],
+      pageInfo: {
         page: 0,
         page_size: 20,
         total: 0
       }
-      this.isloadMore = true
-      this.messageList = []
-      this.loading = true
-      this.requestDataList()
-    },
-    methods: {
-      requestDataList: throttle(function () {
-        if (this.accountSelect) {
-          if (!this.isloadMore) {
-            console.log('没有更多数据了')
-            return false
-          }
-          this.loading = true
-          this.pageInfo.page += 1
-          const data = {
-            external_userid: this.external_userid,
-            ...this.pageInfo
-          }
-          corp_follow_up_summary_index(data).then(
-            (res) => {
-              this.loading = false
-              if (res.data.data && res.data.data.length < 20) {
-                this.isloadMore = false
-              }
-              this.messageList = this.messageList.concat(res.data.data)
-              if (res.data.page_info) {
-                this.pageInfo = res.data.page_info
-              }
-            },
-            (err) => {
-              this.loading = false
-            }
-          )
-        } else {
-          this.isloadMore = false
-          this.loading = false
-        }
-      }, 500)
     }
-  }
-  </script>
-    <style lang="scss" scoped>
-    .summaryListContainer {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      position: relative;
-      overflow: hidden;
-      .messageDetailsScroll{
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        overflow-x: hidden;
-        padding-bottom: 50px;
-      }
-      .messageListItem {
-            width: 100%;
-            height: auto;
-            margin-bottom: 10px;
-            .itemTop {
-                  font-family: PingFang SC, PingFang SC;
-                  font-weight: 400;
-                  font-size: 14px;
-                  color: #86909C;
-                  line-height: 20px;
-                  text-align: left;
-                  font-style: normal;
-                  text-transform: none;
-                  margin-bottom: 5px;
+  },
+  computed: {
+    ...mapState('game', ['accountSelect']),
+    ...mapState('user', ['external_userid']),
+  },
+  mounted() {
+    this.pageInfo = {
+      page: 0,
+      page_size: 20,
+      total: 0
+    }
+    this.isloadMore = true
+    this.messageList = []
+    this.loading = true
+    this.requestDataList()
+  },
+  methods: {
+    requestDataList: throttle(function () {
+      if (this.accountSelect) {
+        if (!this.isloadMore) {
+          console.log('没有更多数据了')
+          return false
+        }
+        this.loading = true
+        this.pageInfo.page += 1
+        const data = {
+          external_userid: this.external_userid,
+          ...this.pageInfo
+        }
+        corp_follow_up_summary_index(data).then(
+          (res) => {
+            this.loading = false
+            if (res.data.data && res.data.data.length < 20) {
+              this.isloadMore = false
             }
-            .itemCenter {
-              width: 100%;
-              background: #F9FAFF;
-              border-radius: 4px 4px 4px 4px;
-              padding: 10px;
-              font-family: PingFang SC, PingFang SC;
-              font-weight: 400;
-              font-size: 16px;
-              color: #4E5969;
-              text-align: left;
-              font-style: normal;
-              text-transform: none;
-                // 换行
-              white-space: pre-wrap;
-              word-break: break-all
+            this.messageList = this.messageList.concat(res.data.data)
+            if (res.data.page_info) {
+              this.pageInfo = res.data.page_info
             }
+          },
+          (err) => {
+            this.loading = false
           }
-           .no-content-main{
-            width: 320px;
-            margin: 0 auto;
-          }
+        )
+      } else {
+        this.isloadMore = false
+        this.loading = false
+      }
+    }, 500)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.summaryListContainer {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+
+  .messageDetailsScroll {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+    padding-bottom: 50px;
+  }
+
+  .messageListItem {
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+
+    .itemTop {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #86909C;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      margin-bottom: 5px;
+    }
+
+    .itemCenter {
+      width: 100%;
+      background: #F9FAFF;
+      border-radius: 4px 4px 4px 4px;
+      padding: 10px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #4E5969;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      // 换行
+      white-space: pre-wrap;
+      word-break: break-all
     }
-    </style>
-  
\ No newline at end of file
+  }
+
+  .no-content-main {
+    width: 320px;
+    margin: 0 auto;
+  }
+}
+</style>
\ No newline at end of file