Demo:结构侧边栏样式调整

web/src/config/constant.js

@@ -1,14 +1,19 @@
 //  布局结构图片映射
 export const layoutImgMap = {
-  logicalStructure: require('../assets/img/structures/logicalStructure.png'),
+  logicalStructure: require('../assets/img/structures/logicalStructure.jpg'),
   logicalStructureLeft: require('../assets/img/structures/logicalStructureLeft.jpg'),
-  mindMap: require('../assets/img/structures/mindMap.png'),
-  organizationStructure: require('../assets/img/structures/organizationStructure.png'),
-  catalogOrganization: require('../assets/img/structures/catalogOrganization.png'),
-  timeline: require('../assets/img/structures/timeline.png'),
-  timeline2: require('../assets/img/structures/timeline2.png'),
-  fishbone: require('../assets/img/structures/fishbone.png'),
-  verticalTimeline: require('../assets/img/structures/verticalTimeline.png')
+  mindMap: require('../assets/img/structures/mindMap.jpg'),
+  organizationStructure: require('../assets/img/structures/organizationStructure.jpg'),
+  catalogOrganization: require('../assets/img/structures/catalogOrganization.jpg'),
+  timeline: require('../assets/img/structures/timeline.jpg'),
+  timeline2: require('../assets/img/structures/timeline2.jpg'),
+  fishbone: require('../assets/img/structures/fishbone.jpg'),
+  fishbone2: require('../assets/img/structures/fishbone2.jpg'),
+  rightFishbone: require('../assets/img/structures/rightFishbone.jpg'),
+  rightFishbone2: require('../assets/img/structures/rightFishbone2.jpg'),
+  verticalTimeline: require('../assets/img/structures/verticalTimeline.jpg'),
+  verticalTimeline2: require('../assets/img/structures/verticalTimeline2.jpg'),
+  verticalTimeline3: require('../assets/img/structures/verticalTimeline3.jpg')
 }
 
 // 公式列表

web/src/config/en.js

@@ -648,3 +648,37 @@ export const alignList = [
     value: 'right'
   }
 ]
+
+// 结构列表
+export const layoutGroupList = [
+  {
+    name: 'Logical structure',
+    list: ['logicalStructure', 'logicalStructureLeft']
+  },
+  {
+    name: 'Mind map',
+    list: ['mindMap']
+  },
+  {
+    name: 'Organization structure',
+    list: ['organizationStructure']
+  },
+  {
+    name: 'Catalog organization',
+    list: ['catalogOrganization']
+  },
+  {
+    name: 'Timeline',
+    list: [
+      'timeline',
+      'timeline2',
+      'verticalTimeline2',
+      'verticalTimeline3',
+      'verticalTimeline'
+    ]
+  },
+  {
+    name: 'Fishbone',
+    list: ['fishbone', 'fishbone2', 'rightFishbone', 'rightFishbone2']
+  }
+]

web/src/config/index.js

@@ -23,7 +23,8 @@ import {
   numberTypeList as numberTypeListZh,
   numberLevelList as numberLevelListZh,
   linearGradientDirList as linearGradientDirListZh,
-  alignList as alignListZh
+  alignList as alignListZh,
+  layoutGroupList as layoutGroupListZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -40,7 +41,8 @@ import {
   numberTypeList as numberTypeListEn,
   numberLevelList as numberLevelListEn,
   linearGradientDirList as linearGradientDirListEn,
-  alignList as alignListEn
+  alignList as alignListEn,
+  layoutGroupList as layoutGroupListEn
 } from './en'
 import {
   fontFamilyList as fontFamilyListZhtw,
@@ -57,7 +59,8 @@ import {
   numberTypeList as numberTypeListZhtw,
   numberLevelList as numberLevelListZhtw,
   linearGradientDirList as linearGradientDirListZhtw,
-  alignList as alignListZhtw
+  alignList as alignListZhtw,
+  layoutGroupList as layoutGroupListZhtw
 } from './zhtw'
 
 const fontFamilyList = {
@@ -162,6 +165,12 @@ const alignList = {
   zhtw: alignListZhtw
 }
 
+const layoutGroupList = {
+  zh: layoutGroupListZh,
+  en: layoutGroupListEn,
+  zhtw: layoutGroupListZhtw
+}
+
 export {
   fontSizeList,
   borderWidthList,
@@ -187,5 +196,6 @@ export {
   numberTypeList,
   numberLevelList,
   linearGradientDirList,
-  alignList
+  alignList,
+  layoutGroupList
 }

web/src/config/zh.js

@@ -745,3 +745,37 @@ export const alignList = [
     value: 'right'
   }
 ]
+
+// 结构列表
+export const layoutGroupList = [
+  {
+    name: '逻辑结构图',
+    list: ['logicalStructure', 'logicalStructureLeft']
+  },
+  {
+    name: '思维导图',
+    list: ['mindMap']
+  },
+  {
+    name: '组织结构图',
+    list: ['organizationStructure']
+  },
+  {
+    name: '目录组织图',
+    list: ['catalogOrganization']
+  },
+  {
+    name: '时间轴',
+    list: [
+      'timeline',
+      'timeline2',
+      'verticalTimeline2',
+      'verticalTimeline3',
+      'verticalTimeline'
+    ]
+  },
+  {
+    name: '鱼骨图',
+    list: ['fishbone', 'fishbone2', 'rightFishbone', 'rightFishbone2']
+  }
+]

web/src/config/zhtw.js

@@ -646,4 +646,38 @@ export const alignList = [
     name: '右對齊',
     value: 'right'
   }
-]
+]
+
+// 结构列表
+export const layoutGroupList = [
+  {
+    name: '邏輯結構圖',
+    list: ['logicalStructure', 'logicalStructureLeft']
+  },
+  {
+    name: '思維導圖',
+    list: ['mindMap']
+  },
+  {
+    name: '組織結構圖',
+    list: ['organizationStructure']
+  },
+  {
+    name: '目錄組織圖',
+    list: ['catalogOrganization']
+  },
+  {
+    name: '時間軸',
+    list: [
+      'timeline',
+      'timeline2',
+      'verticalTimeline2',
+      'verticalTimeline3',
+      'verticalTimeline'
+    ]
+  },
+  {
+    name: '魚骨圖',
+    list: ['fishbone', 'fishbone2', 'rightFishbone', 'rightFishbone2']
+  }
+]

web/src/pages/Edit/components/NodeOuterFrame.vue

@@ -475,7 +475,7 @@ export default {
       this.styleConfig[key] = val
       this.mindMap.outerFrame.updateActiveOuterFrame({
         [key]: val
-      })  
+      })
     },
 
     // 切换加粗样式
@@ -528,24 +528,25 @@ export default {
   padding: 20px;
 
   &.isDark {
-    .panel {
-      background-color: #262a2e;
-      border-left-color: hsla(0, 0%, 100%, 0.1);
-
-      .panelHeader {
-        .name {
-          color: #fff;
-        }
+    .panelHeader {
+      .name {
+        color: #fff;
       }
+    }
 
-      .panelBody {
-        .row {
-          .rowItem {
-            .name {
-              color: hsla(0, 0%, 100%, 0.6);
-            }
+    .panelBody {
+      .row {
+        .rowItem {
+          .name {
+            color: hsla(0, 0%, 100%, 0.6);
           }
         }
+
+        .styleBtn {
+          background-color: #363b3f;
+          color: hsla(0, 0%, 100%, 0.6);
+          border-color: hsla(0, 0%, 100%, 0.1);
+        }
       }
     }
   }

web/src/pages/Edit/components/Structure.vue

@@ -1,17 +1,23 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('strusture.title')">
-    <div class="layoutList" :class="{ isDark: isDark }">
+    <div class="layoutGroupList" :class="{ isDark: isDark }">
       <div
-        class="layoutItem"
-        v-for="item in layoutList"
-        :key="item.value"
-        @click="useLayout(item)"
-        :class="{ active: item.value === layout }"
+        class="laytouGroup"
+        v-for="group in layoutGroupList"
+        :key="group.name"
       >
-        <div class="imgBox">
-          <img :src="layoutImgMap[item.value]" alt="" />
+        <div class="groupName">{{ group.name }}</div>
+        <div class="layoutList">
+          <div
+            class="layoutItem"
+            v-for="item in group.list"
+            :key="item"
+            @click="useLayout(item)"
+            :class="{ active: item === layout }"
+          >
+            <img :src="layoutImgMap[item]" alt="" />
+          </div>
         </div>
-        <div class="name">{{ item.name }}</div>
       </div>
     </div>
   </Sidebar>
@@ -19,10 +25,10 @@
 
 <script>
 import Sidebar from './Sidebar.vue'
-import { layoutList } from 'simple-mind-map/src/constants/constant'
 import { storeData } from '@/api'
 import { mapState } from 'vuex'
 import { layoutImgMap } from '@/config/constant.js'
+import { layoutGroupList } from '@/config'
 
 // 结构
 export default {
@@ -36,7 +42,6 @@ export default {
   },
   data() {
     return {
-      layoutList,
       layoutImgMap,
       layout: ''
     }
@@ -45,7 +50,11 @@ export default {
     ...mapState({
       isDark: state => state.localConfig.isDark,
       activeSidebar: state => state.activeSidebar
-    })
+    }),
+
+    layoutGroupList() {
+      return layoutGroupList[this.$i18n.locale] || layoutGroupList.zh
+    }
   },
   watch: {
     activeSidebar(val) {
@@ -59,10 +68,10 @@ export default {
   },
   methods: {
     useLayout(layout) {
-      this.layout = layout.value
-      this.mindMap.setLayout(layout.value)
+      this.layout = layout
+      this.mindMap.setLayout(layout)
       storeData({
-        layout: layout.value
+        layout: layout
       })
     }
   }
@@ -70,48 +79,62 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.layoutList {
+.layoutGroupList {
+  width: 100%;
   padding: 20px;
 
   &.isDark {
-    .name {
-      color: #fff;
+    .laytouGroup {
+      .groupName {
+        color: #fff;
+      }
     }
   }
 
-  .layoutItem {
+  .laytouGroup {
     width: 100%;
-    cursor: pointer;
-    border-bottom: 1px solid #e9e9e9;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    transition: all 0.2s;
-    border: 1px solid transparent;
+    margin-bottom: 12px;
 
-    &:last-of-type {
-      border: none;
-    }
-
-    &:hover {
-      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
-        0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
-    }
-
-    &.active {
-      border: 1px solid #67c23a;
-    }
-
-    .imgBox {
-      width: 100%;
-
-      img {
-        width: 100%;
-      }
-    }
-    .name {
-      text-align: center;
+    .groupName {
+      font-weight: 500;
+      color: #303133;
+      margin-bottom: 8px;
       font-size: 14px;
     }
+
+    .layoutList {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .layoutItem {
+        width: 120px;
+        height: 70px;
+        cursor: pointer;
+        border: 1px solid #e9e9e9;
+        transition: all 0.2s;
+        overflow: hidden;
+        margin-bottom: 12px;
+        padding: 5px;
+        border-radius: 5px;
+
+        &:hover {
+          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
+            0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+        }
+
+        &.active {
+          border: 1px solid #409eff;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
   }
 }
 </style>