style

.prettierrc

+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false
+}

components/who-read-list.vue

 <template>
-  <div
-    v-loading="loading"
-    ref="list-con"
-    @blur="$emit('blur')"
-    class="who-read-list pos-rel"
-    :style="`left:${left}px;top:${top}px`"
-  >
-    <template v-if="!loading">
-      <div class="list-left">
-        <div class="number-count">已读 {{ readlist.length }}</div>
-        <div class="member-item" v-for="item in readlist" :key="item.eid">
-          <avatar class="member-avatar" :src="item.avatar" :size="30" />
-          <span class="member-name">{{ item.name }}</span>
-        </div>
-      </div>
-      <div class="list-right">
-        <div class="number-count">未读 {{ unreadlist.length }}</div>
-        <div class="member-item" v-for="item in unreadlist" :key="item.eid">
-          <avatar class="member-avatar" :src="item.avatar" :size="30" />
-          <span class="member-name">{{ item.name }}</span>
-        </div>
-      </div>
-    </template>
-  </div>
+    <div
+        v-loading="loading"
+        ref="list-con"
+        @blur="$emit('blur')"
+        class="who-read-list pos-rel"
+    >
+        <template>
+            <div class="d-flex tabs">
+                <div
+                    class="tab text-nowrap"
+                    :class="{ selected: tab === 1 }"
+                    @click="tab = 1"
+                >
+                    <span>{{ readlist.length }}</span>
+                    <span>已读</span>
+                </div>
+                <div
+                    class="tab text-nowrap"
+                    :class="{ selected: tab === 2 }"
+                    @click="tab = 2"
+                >
+                    <span>{{ unreadlist.length }}</span>
+                    <span>未读</span>
+                </div>
+            </div>
+            <div class="items">
+                <el-scrollbar>
+                    <div
+                        class="member-item"
+                        v-for="item in items"
+                        :key="`${item.eid}-${tab}`"
+                    >
+                        <avatar
+                            class="member-avatar"
+                            :src="item.avatar"
+                            :size="30"
+                        />
+                        <span class="member-name">{{ item.name }}</span>
+                    </div>
+                </el-scrollbar>
+            </div>
+        </template>
+    </div>
 </template>
+
 <script lang="ts">
 import { Component, Prop, Ref, Vue } from "vue-property-decorator";
 import { namespace } from "vuex-class";
@@ -37,167 +57,163 @@ import chat from "@/customer-service/xim/index";
 import xim from "@/customer-service/xim/xim";
 
 const chatStoreNamespace = namespace("chatStore");
-@Component({
- components: {
-  avatar
-}
-})
+
+@Component({ components: { avatar } })
 export default class WhoReadList extends Vue {
-  @chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
-  private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
-
-  @chatStoreNamespace.State(ChatStore.STATE_CHAT_MY_ID)
-  private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
-
-  @Prop({
-    type: Number,
-  })
-  private msgId!: number;
-
-  @Ref("list-con")
-  private listCon!: HTMLElement;
-
-  private top = 0;
-  private left = 0;
-  private readlist: { name: string; avatar: string }[] = [];
-  private unreadlist: { name: string; avatar: string }[] = [];
-  private loading = false;
-  private startLoading() {
-    this.loading = true;
-  }
-
-  private endLoading() {
-    this.loading = false;
-  }
-
-  public async created() {
-    this.startLoading();
-    await this.getReader();
-    this.endLoading();
-  }
-
-  public mounted() {
-    this.enableBlur();
-    const { top, left } = (this.listCon
-      .parentNode as HTMLElement).getBoundingClientRect();
-    this.top = top;
-    this.left = left;
-  }
-
-  private enableBlur() {
-    this.listCon.setAttribute("tabindex", "-1");
-    this.listCon.focus();
-  }
-
-  private async getUserNameByid(eid: string) {
-    const data = await chat
-      .getSdk()
-      .model("user")
-      .detail(eid)
-      .query();
-    return data.row.first_name.value as string;
-  }
-
-  private async getReader() {
-    if (this.chatId == null) return;
-    if (this.msgId == null) return;
-    const data = await xim.fetchMsgInBox(this.chatId, this.msgId);
-    if (data == null) return;
-    const readerlist = this.uniqueReaderList(
-      data.args[0] as dto.OneWhoReadMessage[]
-    );
-    this.readlist = await Promise.all(
-      readerlist
-        .filter((k) => k.is_read)
-        .filter((k) => k.eid !== this.chatMyId)
-        .map(async (k) => {
-          const eid = k.eid;
-          const name = await this.getUserNameByid(eid);
-          return {
-            eid,
-            name,
-            avatar: "",
-          };
-        })
-    );
-    this.unreadlist = await Promise.all(
-      readerlist
-        .filter((k) => !k.is_read)
-        .filter((k) => k.eid !== this.chatMyId)
-        .map(async (k) => {
-          const eid = k.eid;
-          const name = await this.getUserNameByid(eid);
-          return {
-            eid,
-            name,
-            avatar: "",
-          };
-        })
-    );
-  }
-
-  private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
-    return unique(data, function(item, all) {
-      return all.findIndex((k) => k.eid === item.eid);
-    });
-  }
+    @chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
+    private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
+
+    @chatStoreNamespace.State(ChatStore.STATE_CHAT_MY_ID)
+    private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
+
+    @Prop({ type: Number })
+    private msgId!: number;
+
+    @Ref("list-con")
+    private listCon!: HTMLElement;
+
+    private readlist: { name: string; avatar: string }[] = [];
+    private unreadlist: { name: string; avatar: string }[] = [];
+    private loading = false;
+
+    private tab = 1;
+
+    private get items() {
+        return this.tab === 1 ? this.readlist : this.unreadlist;
+    }
+
+    private startLoading() {
+        this.loading = true;
+    }
+
+    private endLoading() {
+        this.loading = false;
+    }
+
+    public async created() {
+        this.startLoading();
+        await this.getReader();
+        this.endLoading();
+    }
+
+    public mounted() {
+        this.enableBlur();
+    }
+
+    private enableBlur() {
+        this.listCon.setAttribute("tabindex", "-1");
+        this.listCon.focus();
+    }
+
+    private async getUserNameByid(eid: string) {
+        const data = await chat.getSdk().model("user").detail(eid).query();
+        return data.row.first_name.value as string;
+    }
+
+    private async getReader() {
+        if (this.chatId == null) return;
+        if (this.msgId == null) return;
+        const data = await xim.fetchMsgInBox(this.chatId, this.msgId);
+        if (data == null) return;
+        const readerlist = this.uniqueReaderList(
+            data.args[0] as dto.OneWhoReadMessage[]
+        );
+        this.readlist = await Promise.all(
+            readerlist
+                .filter((k) => k.is_read)
+                .filter((k) => k.eid !== this.chatMyId)
+                .map(async (k) => {
+                    const eid = k.eid;
+                    const name = await this.getUserNameByid(eid);
+                    return {
+                        eid,
+                        name,
+                        avatar: "",
+                    };
+                })
+        );
+        this.unreadlist = await Promise.all(
+            readerlist
+                .filter((k) => !k.is_read)
+                .filter((k) => k.eid !== this.chatMyId)
+                .map(async (k) => {
+                    const eid = k.eid;
+                    const name = await this.getUserNameByid(eid);
+                    return {
+                        eid,
+                        name,
+                        avatar: "",
+                    };
+                })
+        );
+    }
+
+    private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
+        return unique(data, function (item, all) {
+            return all.findIndex((k) => k.eid === item.eid);
+        });
+    }
 }
 </script>
+
 <style lang="less" scoped>
 .who-read-list {
-  ::before {
-    content: "";
+    background-color: #fff;
+    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    border: 1px solid rgba(183, 191, 199, 1);
+    min-height: 100px;
     position: absolute;
-    width: 1px;
-    top: 15px;
-    bottom: 15px;
-    left: 0;
-    right: 0;
-    margin: auto;
-    background: #e1e2e2;
-  }
-  &:focus {
-    outline: unset;
-  }
-  padding: 15px 30px;
-  background: rgba(249, 249, 249, 1);
-  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  border: 1px solid rgba(183, 191, 199, 1);
-  width: 455px;
-  min-height: 100px;
-  position: fixed;
-  margin-left: -200px;
-  margin-top: 20px;
-  color: #000;
-  z-index: 2;
-  .list-left,
-  .list-right {
-    display: inline-block;
-    vertical-align: top;
-    width: calc(50% - 30px);
-  }
-  .list-left {
-    padding-right: 30px;
-  }
-  .list-right {
-    padding-left: 30px;
-  }
-  .number-count {
-    font-size: 14px;
-    color: #333333;
-    margin-bottom: 15px;
-  }
+    color: #000;
+    z-index: 2;
+    margin-left: -100px;
+    .number-count {
+        font-size: 14px;
+        color: #333333;
+        margin-bottom: 15px;
+    }
+}
+
+.tabs {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 10px;
+
+    .tab {
+        cursor: pointer;
+
+        span {
+            font-size: 22px;
+
+            & + span {
+                font-size: 12px;
+            }
+        }
+
+        &.selected {
+            color: #4389f8;
+        }
+
+        & + .tab {
+            margin-left: 30px;
+        }
+    }
 }
+
+.items {
+    padding: 10px;
+    padding-top: 0;
+    padding-left: 20px;
+}
+
 .member-item {
-  margin-top: 10px;
-  .member-avatar,
-  .member-name {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  .member-avatar {
-    margin-right: 10px;
-  }
+    margin-top: 10px;
+    .member-avatar,
+    .member-name {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .member-avatar {
+        margin-right: 10px;
+    }
 }
 </style>