u

components/chat-room.vue

@@ -43,12 +43,15 @@
     import Chat from "@/customer-service/xim";
     import Chat from "@/customer-service/xim";
     import { CustomerServiceEvent } from "../event";
     import { CustomerServiceEvent } from "../event";
 
 
+    const chatResizeKey1 = "chat-resize-1";
+    const chatResizeKey2 = "chat-resize-2";
+
     @Component({ components: { MessageInput, messages } })
     @Component({ components: { MessageInput, messages } })
     export default class ChatRoom extends Vue {
     export default class ChatRoom extends Vue {
-        @Ref("chatBox") private readonly chatBox!: Element;
-        @Ref("top") private readonly refTop!: Element;
-        @Ref("bottom") private readonly refBottom!: Element;
-        @Ref("resize") private readonly refResize!: Element;
+        @Ref("chatBox") private readonly chatBox!: HTMLElement;
+        @Ref("top") private readonly refTop!: HTMLElement;
+        @Ref("bottom") private readonly refBottom!: HTMLElement;
+        @Ref("resize") private readonly refResize!: HTMLElement;
 
 
         @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
         @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
         private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
         private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@@ -97,9 +100,9 @@
 
 
         private dragControllerDiv(e: MouseEvent) {
         private dragControllerDiv(e: MouseEvent) {
             const resize = this.refResize as any;
             const resize = this.refResize as any;
-            const top = this.refTop as HTMLElement;
-            const bottom = this.refBottom as HTMLElement;
-            const box = this.chatBox as HTMLElement;
+            const top = this.refTop;
+            const bottom = this.refBottom;
+            const box = this.chatBox;
 
 
             const startY = e.clientY;
             const startY = e.clientY;
             const originTop = resize.offsetTop;
             const originTop = resize.offsetTop;
@@ -115,6 +118,9 @@
                 resize.style.top = moveLen + "px"; // 设置左侧区域的宽度
                 resize.style.top = moveLen + "px"; // 设置左侧区域的宽度
                 top.style.height = moveLen + "px";
                 top.style.height = moveLen + "px";
                 bottom.style.height = bottomHeight + "px";
                 bottom.style.height = bottomHeight + "px";
+
+                localStorage.setItem(chatResizeKey1, moveLen);
+                localStorage.setItem(chatResizeKey2, bottomHeight + "");
             };
             };
             document.onmouseup = function () {
             document.onmouseup = function () {
                 document.onmousemove = null;
                 document.onmousemove = null;
@@ -126,9 +132,22 @@
         }
         }
 
 
         mounted() {
         mounted() {
-            this.refBottom &&
-                ((this.refBottom as HTMLElement).style.height =
-                    this.chatBox.clientHeight - this.refTop.clientHeight + "px");
+            if (
+                localStorage.getItem(chatResizeKey1) &&
+                localStorage.getItem(chatResizeKey2)
+            ) {
+                const s1 = localStorage.getItem(chatResizeKey1) + "px";
+                const s2 = localStorage.getItem(chatResizeKey2) + "px";
+                this.refResize && (this.refResize.style.top = s1);
+                this.refTop && (this.refTop.style.height = s1);
+                this.refBottom && (this.refBottom.style.height = s2);
+            } else {
+                this.refBottom &&
+                    ((this.refBottom as HTMLElement).style.height =
+                        this.chatBox.clientHeight -
+                        this.refTop.clientHeight +
+                        "px");
+            }
         }
         }
 
 
         private openMessage(o: any) {
         private openMessage(o: any) {