feat: 增加可拖动左侧面板

package.json

@@ -76,6 +76,7 @@
     "vue-ele-form-tree-select": "^0.1.1",
     "vue-ele-form-upload-file": "0.0.5",
     "vue-ele-form-video-uploader": "^0.1.3",
+    "vue-multipane": "^0.9.5",
     "vue-template-compiler": "^2.6.10",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.1.2",

src/components/app-main/components/main-left.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-main-left">
+  <div>
     <el-card
       :body-style="{ padding: '10px' }"
       :header="comp.title"
@@ -74,10 +74,6 @@ export default {
 </script>
 
 <style>
-.app-main-left {
-  line-height: 1.5em;
-  height: 100%;
-}
 .type-item {
   width: 120px;
   color: #606266;

src/components/app-main/index.vue

@@ -1,61 +1,104 @@
 <template>
-  <div class="app-main">
-    <app-main-left class="app-main-left" />
+  <multipane @paneResizeStop="handlePaneresize" class="app-main">
+    <app-main-left :style="{ width: leftWidth }" class="app-main-left" />
+    <multipane-resizer></multipane-resizer>
     <div class="app-main-container">
       <app-main-header />
       <app-main-center />
     </div>
+    <multipane-resizer></multipane-resizer>
     <div class="app-main-right">
       <app-main-right />
     </div>
-  </div>
+  </multipane>
 </template>
 
 <script>
 import AppMainHeader from './components/main-header'
 import AppMainLeft from './components/main-left'
 import AppMainCenter from './components/main-center'
 import AppMainRight from './components/main-right/index'
+import { Multipane, MultipaneResizer } from 'vue-multipane'
 
 export default {
   name: 'AppMain',
   components: {
     AppMainLeft,
     AppMainCenter,
     AppMainHeader,
-    AppMainRight
+    AppMainRight,
+    Multipane,
+    MultipaneResizer
   },
   data() {
     return {
+      leftWidth: '300px',
       activeTab: '0'
     }
+  },
+  methods: {
+    handlePaneresize(el) {
+      if (!this.$isVscode && el.className === 'app-main-left') {
+        localStorage.setItem('app-main-left', el.style.width)
+      }
+    }
+  },
+  mounted() {
+    if (!this.$isVscode && localStorage.getItem('app-main-left')) {
+      this.leftWidth = localStorage.getItem('app-main-left')
+    }
   }
 }
 </script>
 
 <style>
 .app-main {
-  display: flex;
   height: calc(100vh - 60px);
   overflow: hidden;
   margin-top: 2px;
 }
 
 .app-main-left {
-  width: 300px;
+  min-width: 150px;
   overflow: scroll;
+  line-height: 1.5em;
+  height: 100%;
 }
 
 .app-main-container {
-  flex: 1;
-  border-left: 1px solid #ebeef5;
-  border-right: 1px solid #ebeef5;
   overflow: scroll;
+  flex-grow: 1;
+  flex: 1;
 }
 
 .app-main-right {
   width: 315px;
   margin-top: 21px;
   overflow: scroll;
 }
+
+.app-main > .multipane-resizer {
+  margin: 0;
+  left: 0;
+  position: relative;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  width: 8px;
+}
+.app-main > .multipane-resizer::before {
+  display: block;
+  content: '';
+  width: 1px;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -1.5px;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+}
+.app-main > .multipane-resizer::before::before {
+  border-color: #999;
+}
 </style>

src/main.js

@@ -6,8 +6,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 import 'normalize.css'
 import store from './store'
 import './extend'
-
+import { isVscode } from '@/tool'
 Vue.config.productionTip = false
+Vue.prototype.$isVscode = isVscode()
 Vue.use(ElementUI)
 Vue.use(EleForm, {
   upload: {

src/store/persistedstate.js

@@ -1,7 +1,11 @@
 import createPersistedState from 'vuex-persistedstate'
+import { isVscode } from '@/tool'
 
 export default function () {
-  try {
+  if (isVscode()) {
+    // 在vscode插件下, 不支持localStorage
+    return []
+  } else {
     const SecureLS = require('secure-ls')
     const ls = new SecureLS({ isCompression: false })
 
@@ -12,8 +16,5 @@ export default function () {
         removeItem: key => ls.remove(key)
       }
     })]
-  } catch {
-    // 在vscode插件下, 不支持localStorage
-    return []
   }
 }

src/tool.js

@@ -15,3 +15,14 @@ export function changeFormLabel (obj = {}, exceptProperty = []) {
   }
   return obj
 }
+
+// 判断是否为 vscode
+// vscode无法使用 localStorage
+export function isVscode () {
+  try {
+    localStorage.getItem('test')
+    return false
+  } catch {
+    return true
+  }
+}

yarn.lock

@@ -10726,6 +10726,11 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-multipane@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.npm.taobao.org/vue-multipane/download/vue-multipane-0.9.5.tgz#10ddaf9092e0a9e761edfd0d1f1db8bbb54b3e9c"
+  integrity sha1-EN2vkJLgqedh7f0NHx24u7VLPpw=
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"