feat(dashboard): group style and card style record

src/views/dashboard/Dashboard.vue

@@ -10,7 +10,7 @@
       @loaded="onLoaded"
     />
     <device-groups
-      class="l-flex__self c-sibling-item--v c-device-groups"
+      class="l-flex__self c-sibling-item--v c-device-group-block"
       :path="path"
       :status="status"
       :total="total"
@@ -53,17 +53,13 @@ export default {
     },
     onLoaded (total) {
       this.total = total
-    },
-    onDeviceStatusChanged (type) {
-      console.log(type)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.c-device-groups {
-  padding: $spacing $spacing $spacing--3xs;
+.c-device-group-block {
   border-radius: $radius;
   background-color: #fff;
 }

src/views/dashboard/components/DeviceGroups.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="l-flex--col">
-    <div class="l-flex__none l-flex--row u-bold has-bottom-padding--sm has-bottom-border">
+  <div class="l-flex--col c-device-groups">
+    <div class="l-flex__none l-flex--row c-device-groups__header u-bold has-bottom-padding--sm has-bottom-border">
       <el-dropdown
         class="l-flex__none c-sibling-item"
         trigger="click"
@@ -56,7 +56,7 @@
     </div>
     <component
       :is="activeComponent"
-      class="l-flex__self has-padding--v u-overflow-y--auto"
+      class="l-flex__self c-device-groups__content u-overflow-y--auto"
       :card-style="cardStyle"
       v-bind="$attrs"
       @change="onChange"
@@ -72,6 +72,9 @@ import DeviceGroupLevel from './DeviceGroupLevel.vue'
 import DeviceGroupAttention from './DeviceGroupAttention.vue'
 import VolumeDrawer from './DrawerVolumeSettings.vue'
 
+const groupStyleCommands = ['tile', 'level']
+const cardStyleCommands = ['big', 'medium']
+
 export default {
   name: 'DeviceGroups',
   components: {
@@ -81,16 +84,29 @@ export default {
     VolumeDrawer
   },
   data () {
+    let options = {
+      groupStyle: groupStyleCommands[0],
+      cardStyle: cardStyleCommands[0]
+    }
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(localStorage.getItem(`MSR_DASHBOARD__STYLE__${this.$store.getters.account}`))
+      }
+    } catch (e) {
+      console.log(e)
+    }
+
     return {
-      active: 'tile',
-      groups: [],
-      cardStyle: 'big'
+      groupStyle: groupStyleCommands.includes(options.groupStyle) ? options.groupStyle : groupStyleCommands[0],
+      cardStyle: cardStyleCommands.includes(options.cardStyle) ? options.cardStyle : cardStyleCommands[0],
+      groups: []
     }
   },
   computed: {
-    ...mapGetters(['isMaintainer', 'isTenantAdmin']),
+    ...mapGetters(['isMaintainer', 'isTenantAdmin', 'account']),
     title () {
-      switch (this.active) {
+      switch (this.groupStyle) {
         case 'attention':
           return '我的关注'
         default:
@@ -98,7 +114,7 @@ export default {
       }
     },
     icon () {
-      switch (this.active) {
+      switch (this.groupStyle) {
         case 'tile':
           return 'el-icon-s-grid'
         case 'attention':
@@ -108,7 +124,7 @@ export default {
       }
     },
     activeComponent () {
-      switch (this.active) {
+      switch (this.groupStyle) {
         case 'tile':
           return 'DeviceGroupTile'
         case 'attention':
@@ -128,8 +144,9 @@ export default {
     }
   },
   methods: {
-    onCommand (active) {
-      this.active = active
+    onCommand (groupStyle) {
+      this.groupStyle = groupStyle
+      this.saveOptions(groupStyleCommands.includes(groupStyle) ? groupStyle : '', this.cardStyle)
     },
     onVolume () {
       this.$refs.drawer.show(this.groups)
@@ -138,8 +155,27 @@ export default {
       this.groups = groups
     },
     onSwitchCardStyle () {
-      this.cardStyle = this.cardStyle === 'big' ? 'medium' : 'big'
+      const next = this.cardStyle === 'big' ? 'medium' : 'big'
+      this.cardStyle = next
+      this.saveOptions(this.groupStyle, cardStyleCommands.includes(next) ? next : '')
+    },
+    saveOptions (groupStyle, cardStyle) {
+      localStorage.setItem(`MSR_DASHBOARD__STYLE__${this.account}`, JSON.stringify({ groupStyle, cardStyle }))
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.c-device-groups {
+  padding: $spacing 0 $spacing--3xs;
+
+  &__header {
+    margin: 0 $spacing;
+  }
+
+  &__content {
+    padding: $spacing;
+  }
+}
+</style>