feat: 浏览器记录页面分割线位置

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>

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>
 

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
       }
     }

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>
 

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])
+}

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,

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>

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) {

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,