From 827d0823aa5d3f1ae52765bca8ddfd73a3c00018 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 29 Mar 2022 11:46:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8F=E8=A7=88=E5=99=A8=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=88=86=E5=89=B2=E7=BA=BF=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dataease/DeAsideContainer.vue  | 16 ++++++++++++---
 .../dataease/dragbar/DeLeft2RightDragBar.vue  | 10 ++++++++--
 frontend/src/directive/index.js               |  5 ++++-
 frontend/src/layout/index.vue                 |  2 +-
 frontend/src/utils/LayoutUtil.js              | 17 ++++++++++++++++
 frontend/src/views/dataset/index.vue          |  4 ++--
 frontend/src/views/panel/list/PanelMain.vue   |  2 +-
 .../src/views/system/datasource/DsMain.vue    | 20 ++++++++++++-------
 .../src/views/system/datasource/index.vue     |  4 ++--
 9 files changed, 61 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/utils/LayoutUtil.js

diff --git a/frontend/src/components/dataease/DeAsideContainer.vue b/frontend/src/components/dataease/DeAsideContainer.vue
index 32a90322fd..7b53d3a455 100644
--- a/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/frontend/src/components/dataease/DeAsideContainer.vue
@@ -1,16 +1,17 @@
 <template>
   <el-aside
-    :width="width"
+    :width="currentWidth"
     class="ms-aside-container"
-    :style="{'margin-left': !asideHidden ? 0 : '-' + width}"
+    :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
   >
     <slot />
-    <de-horizontal-drag-bar v-if="showDragBar" />
+    <de-horizontal-drag-bar v-if="showDragBar" :type="type" />
   </el-aside>
 </template>
 
 <script>
 import DeHorizontalDragBar from './dragbar/DeLeft2RightDragBar'
+import { getLayout } from '@/utils/LayoutUtil'
 export default {
   name: 'DeAsideContainer',
   components: { DeHorizontalDragBar },
@@ -26,12 +27,21 @@ export default {
     showDragBar: {
       type: Boolean,
       default: true
+    },
+    type: {
+      type: String,
+      default: null
     }
   },
   data() {
     return {
       asideHidden: false
     }
+  },
+  computed: {
+    currentWidth() {
+      return this.type && getLayout(this.type) || this.width
+    }
   }
 }
 </script>
diff --git a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
index 9d26739bae..9a11e677d1 100644
--- a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
+++ b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
@@ -1,10 +1,16 @@
 <template>
-  <div v-left-to-right-drag class="drag-bar" />
+  <div v-left-to-right-drag="type" class="drag-bar" />
 </template>
 
 <script>
 export default {
-  name: 'DeLeft2RightDragBar'
+  name: 'DeLeft2RightDragBar',
+  props: {
+    type: {
+      type: String,
+      default: null
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/directive/index.js b/frontend/src/directive/index.js
index f26cb177cf..1273bd4c9e 100644
--- a/frontend/src/directive/index.js
+++ b/frontend/src/directive/index.js
@@ -1,8 +1,9 @@
 import permission from '@/directive/Permission'
-// import dataPermission from '@/directive/DataPermission'
+import { setLayout } from '@/utils/LayoutUtil'
 
 export const left2RightDrag = {
   inserted(el, binding) {
+    const value = binding.value
     el.onmousedown = function(e) {
       const init = e.clientX
       const parent = el.parentNode
@@ -15,6 +16,8 @@ export const left2RightDrag = {
         }
       }
       document.onmouseup = function() {
+        value && setLayout(value, parent.style.width)
+
         document.onmousemove = document.onmouseup = null
       }
     }
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 2d609a192b..763b188d4c 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -4,7 +4,7 @@
     <topbar v-if="!fullHeightFlag && finishLoad" :show-tips="showTips" />
 
     <de-container :style="mainStyle">
-      <de-aside-container v-if="!sidebar.hide" class="le-aside-container">
+      <de-aside-container v-if="!sidebar.hide" type="system" class="le-aside-container">
         <sidebar class="sidebar-container" />
       </de-aside-container>
 
diff --git a/frontend/src/utils/LayoutUtil.js b/frontend/src/utils/LayoutUtil.js
new file mode 100644
index 0000000000..5ffce3e9c6
--- /dev/null
+++ b/frontend/src/utils/LayoutUtil.js
@@ -0,0 +1,17 @@
+const defaultLayout = {
+  panel: '260px',
+  dataset: '260px',
+  datasource: '260px',
+  system: '260px'
+}
+const STORAGE_KEY = 'global_layout'
+
+export const getLayout = (type) => {
+  const key = STORAGE_KEY + '_' + type
+  return localStorage.getItem(key) || defaultLayout[type]
+}
+
+export const setLayout = (type, val) => {
+  const key = STORAGE_KEY + '_' + type
+  localStorage.setItem(key, val || defaultLayout[type])
+}
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 328d47a505..46eb2fa035 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -1,7 +1,7 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
-    <de-aside-container>
+    <de-aside-container type="dataset">
       <group :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
 
@@ -30,7 +30,7 @@ import { removeClass } from '@/utils'
 import { checkCustomDs } from '@/api/dataset/dataset'
 export default {
   name: 'DataSet',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom, AddApi},
+  components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom, AddApi },
   data() {
     return {
       component: DataHome,
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index be1103fc41..4ebd93cf69 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -1,6 +1,6 @@
 <template>
   <de-container>
-    <de-aside-container>
+    <de-aside-container type="panel">
       <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index 19eb5076d3..ec203261dc 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -1,11 +1,17 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <de-aside-container style="padding: 0 0;">
-      <ds-tree ref="dsTree" :datasource="datasource" @switch-main="switchMain"/>
+    <de-aside-container style="padding: 0 0;" type="datasource">
+      <ds-tree ref="dsTree" :datasource="datasource" @switch-main="switchMain" />
     </de-aside-container>
     <de-main-container>
-      <component :is="component" v-if="!!component" :params="param" :tData="tData" @refresh-type="refreshType"
-                 @switch-component="switchMain"/>
+      <component
+        :is="component"
+        v-if="!!component"
+        :params="param"
+        :t-data="tData"
+        @refresh-type="refreshType"
+        @switch-component="switchMain"
+      />
     </de-main-container>
   </de-container>
 </template>
@@ -20,7 +26,7 @@ import DataHome from './DataHome'
 
 export default {
   name: 'DsMain',
-  components: {DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome},
+  components: { DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome },
   data() {
     return {
       component: DataHome,
@@ -37,7 +43,7 @@ export default {
   methods: {
     // 切换main区内容
     switchMain(param) {
-      const {component, componentParam, tData} = param
+      const { component, componentParam, tData } = param
       this.component = DataHome
       this.param = null
       this.$nextTick(() => {
@@ -55,7 +61,7 @@ export default {
       })
     },
     refreshType(datasource) {
-      this.datasource = datasource;
+      this.datasource = datasource
       this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource)
     },
     msg2Current(sourceParam) {
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index e53c1b1857..d5b1b6cfbb 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -1,7 +1,7 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
     <de-main-container>
-      <ds-main ref="dsMain"/>
+      <ds-main ref="dsMain" />
     </de-main-container>
   </de-container>
 </template>
@@ -14,7 +14,7 @@ import bus from '@/utils/bus'
 
 export default {
   name: 'Panel',
-  components: {DeMainContainer, DeContainer, DsMain},
+  components: { DeMainContainer, DeContainer, DsMain },
   data() {
     return {
       component: DsMain,