From c08ce30a15235d435ec9a1888d17b02baebd16ff Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Mon, 3 Apr 2023 19:28:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):?=
 =?UTF-8?q?=20=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=EF=BC=8C=E8=AE=B0=E4=BD=8F=E6=A8=A1=E5=9D=97=E6=A0=91?=
 =?UTF-8?q?=E7=9A=84=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1025065 --user=陈建星 左侧模块宽度调整后记住用户的操作 https://www.tapd.cn/55049933/s/1358949
---
 .../components/new-ui/MsAsideContainer.vue    | 49 ++++++++++++++++---
 .../frontend/src/business/case/TestCase.vue   |  6 ++-
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/new-ui/MsAsideContainer.vue b/framework/sdk-parent/frontend/src/components/new-ui/MsAsideContainer.vue
index 4d9c171336..8b1cd59415 100644
--- a/framework/sdk-parent/frontend/src/components/new-ui/MsAsideContainer.vue
+++ b/framework/sdk-parent/frontend/src/components/new-ui/MsAsideContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside :width="asideHidden ? '0' : width" class="ms-aside-container"
+  <el-aside :width="asideHidden ? '0' : defaultWidth" class="ms-aside-container"
             :id="id"
             :style="{
               // 'margin-left': !asideHidden ? 0 : '-' + asideHiddenMargin,
@@ -24,6 +24,16 @@ import {getUUID} from "../../utils";
 export default {
   name: "MsAsideContainer",
   components: {MsHorizontalDragBar},
+  data() {
+    return {
+      asideHidden: false,
+      hiddenBottomTop: null,
+      id: null,
+      asideHiddenMargin: '292px',
+      defaultWidth: '269px',
+      observer: null
+    }
+  },
   props: {
     width: {
       type: String,
@@ -52,6 +62,12 @@ export default {
       type: Number,
       default: null
     },
+    // 是否记住拖拽宽度
+    enableRememberWidth: Boolean,
+    pageKey: {
+      type: String,
+      default: null
+    }
   },
   watch: {
     asideHidden() {
@@ -75,13 +91,32 @@ export default {
     this.$nextTick(() => {
       this.setHiddenBottomTop();
     });
+
+    if (this.pageKey && this.enableRememberWidth) {
+      let rememberKey = 'WIDTH_' + this.pageKey;
+      let rememberWidth = localStorage.getItem(rememberKey);
+
+      if (rememberWidth) {
+        // 获取上次记住的宽度
+        this.defaultWidth = rememberWidth;
+      } else {
+        this.defaultWidth = this.width;
+      }
+
+      let element = document.getElementById(this.id);
+      let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+      this.observer = new MutationObserver(() => {
+        // 监听元素的宽度变化，保存在 localStorage 中
+        localStorage.setItem(rememberKey, getComputedStyle(element).getPropertyValue('width'));
+      })
+      this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+    }
   },
-  data() {
-    return {
-      asideHidden: false,
-      hiddenBottomTop: null,
-      id: null,
-      asideHiddenMargin: '292px'
+  beforeDestroyed () {
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer.takeRecords()
+      this.observer = null
     }
   },
   methods: {
diff --git a/test-track/frontend/src/business/case/TestCase.vue b/test-track/frontend/src/business/case/TestCase.vue
index 3d812c3ed3..261f26b735 100644
--- a/test-track/frontend/src/business/case/TestCase.vue
+++ b/test-track/frontend/src/business/case/TestCase.vue
@@ -32,7 +32,11 @@
 
     <div style="display: flex; height: calc(100vh - 130px)" class = "test-case-aside-layout">
       <!-- case-aside-container  -->
-      <ms-aside-container v-show="isAsideHidden" :min-width="'0'" :enable-aside-hidden.sync="enableAsideHidden">
+      <ms-aside-container v-show="isAsideHidden"
+                          page-key="TEST_CASE_LIST"
+                          :enable-remember-width="true"
+                          :min-width="'0'"
+                          :enable-aside-hidden.sync="enableAsideHidden">
         <test-case-node-tree
           :type="'edit'"
           :total='total'