From 23db3f04291b07b31b9623b3123ee51750abbc30 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Thu, 9 Aug 2018 15:02:50 +0800
Subject: [PATCH] fullscreen

Former-commit-id: 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 8a55fc34a0762b6085009ecf444fe4f578918ea8 [formerly 4e0ac1b47f813702e20637a103312cb6e8f773d1]]]]]
Former-commit-id: 09fe0461aa2e56198e14067a8e9a576417e72f88
Former-commit-id: 93163183f4083aaefacd3f07ce750d538d0ead74
Former-commit-id: 7b26df4734e261490f7f58dee36dd8b8779451d0 [formerly 170829cb9ee32327b5f0103fb0ca07dc88c92562]
Former-commit-id: 6ab804290cf0c72be97e18279945c50faf59c70d
Former-commit-id: e55fcc77b2cb36648171346e3d47a223b6e6327d
Former-commit-id: 787c3e7b913fb9bb0f15b688415adc88c39dedf1
Former-commit-id: 2165f9da4232880cb55dc93ddac509bae9a8b99a
Former-commit-id: 9603c4f33082229ab1727138e82c6c939eccb824
---
 .../components/header-fullscreen/index.vue    | 14 ++++-----
 src/main.js                                   |  2 +-
 .../playground/store/fullscreen/index.vue     | 15 +++------
 src/pages/demo/playground/store/sys/index.vue |  7 +++--
 .../modules/d2admin/index.js.REMOVED.git-id   |  2 +-
 .../modules/d2admin/modules/fullscreen.js     | 31 +++++++++++++++++++
 6 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 src/store/modules/d2admin/modules/fullscreen.js

diff --git a/src/layout/header-aside/components/header-fullscreen/index.vue b/src/layout/header-aside/components/header-fullscreen/index.vue
index 8e6ed7ea..8ee8e184 100644
--- a/src/layout/header-aside/components/header-fullscreen/index.vue
+++ b/src/layout/header-aside/components/header-fullscreen/index.vue
@@ -1,10 +1,10 @@
 <template>
   <el-tooltip
     effect="dark"
-    :content="isFullScreen ? '退出全屏' : '全屏'"
+    :content="active ? '退出全屏' : '全屏'"
     placement="bottom">
-    <el-button class="d2-mr btn-text can-hover" type="text" @click="fullScreenToggle">
-      <d2-icon v-if="isFullScreen" name="compress"/>
+    <el-button class="d2-mr btn-text can-hover" type="text" @click="toggle">
+      <d2-icon v-if="active" name="compress"/>
       <d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
     </el-button>
   </el-tooltip>
@@ -14,13 +14,13 @@
 import { mapState, mapMutations } from 'vuex'
 export default {
   computed: {
-    ...mapState('d2admin', [
-      'isFullScreen'
+    ...mapState('d2admin/fullscreen', [
+      'active'
     ])
   },
   methods: {
-    ...mapMutations('d2admin', [
-      'fullScreenToggle'
+    ...mapMutations('d2admin/fullscreen', [
+      'toggle'
     ])
   }
 }
diff --git a/src/main.js b/src/main.js
index 8383fe04..a2214d24 100644
--- a/src/main.js
+++ b/src/main.js
@@ -81,7 +81,7 @@ new Vue({
       if (screenfull.enabled) {
         screenfull.on('change', () => {
           if (!screenfull.isFullscreen) {
-            this.$store.commit('d2admin/fullScreenSet', false)
+            this.$store.commit('d2admin/fullscreen/set', false)
           }
         })
       }
diff --git a/src/pages/demo/playground/store/fullscreen/index.vue b/src/pages/demo/playground/store/fullscreen/index.vue
index 1f464d34..f041ca8d 100644
--- a/src/pages/demo/playground/store/fullscreen/index.vue
+++ b/src/pages/demo/playground/store/fullscreen/index.vue
@@ -1,23 +1,18 @@
 <template>
   <d2-container type="card" class="page-demo-playground-fullscreen">
     <template slot="header">全屏</template>
-    <el-button type="primary" @click="fullScreenToggle">
-      fullScreenToggle 切换全屏
+    <el-button type="primary" @click="toggle">
+      toggle 切换全屏
     </el-button>
   </d2-container>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 export default {
-  computed: {
-    ...mapState('d2admin', [
-      'isFullScreen'
-    ])
-  },
   methods: {
-    ...mapMutations('d2admin', [
-      'fullScreenToggle'
+    ...mapMutations('d2admin/fullscreen', [
+      'toggle'
     ])
   }
 }
diff --git a/src/pages/demo/playground/store/sys/index.vue b/src/pages/demo/playground/store/sys/index.vue
index a82bf6cc..b69befb2 100644
--- a/src/pages/demo/playground/store/sys/index.vue
+++ b/src/pages/demo/playground/store/sys/index.vue
@@ -30,7 +30,7 @@
         <el-col :span="8">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">全屏模式</template>
-            <el-switch v-model="isFullScreen" active-text="打开" inactive-text="关闭" disabled/>
+            <el-switch v-model="fullscreenActive" active-text="打开" inactive-text="关闭" disabled/>
           </el-card>
         </el-col>
         <el-col :span="8">
@@ -145,10 +145,11 @@ export default {
       menuAsideCollapse: state => state.menu.asideCollapse,
       // 主题
       themeList: state => state.theme.list,
-      themeActiveName: state => state.theme.activeName
+      themeActiveName: state => state.theme.activeName,
+      // 全屏
+      fullscreenActive: state => state.fullscreen.active
     }),
     ...mapState('d2admin', [
-      'isFullScreen',
       'isGrayMode',
       'pagePool',
       'pageOpenedList',
diff --git a/src/store/modules/d2admin/index.js.REMOVED.git-id b/src/store/modules/d2admin/index.js.REMOVED.git-id
index 801fe7b9..91f75821 100644
--- a/src/store/modules/d2admin/index.js.REMOVED.git-id
+++ b/src/store/modules/d2admin/index.js.REMOVED.git-id
@@ -1 +1 @@
-4ece1c4e7a74f137bfa094cbb973d62c91bde205
\ No newline at end of file
+4d21835fa9e3352a4c11053634775c7e45774fae
\ No newline at end of file
diff --git a/src/store/modules/d2admin/modules/fullscreen.js b/src/store/modules/d2admin/modules/fullscreen.js
new file mode 100644
index 00000000..04c09f82
--- /dev/null
+++ b/src/store/modules/d2admin/modules/fullscreen.js
@@ -0,0 +1,31 @@
+import screenfull from 'screenfull'
+
+export default {
+  namespaced: true,
+  state: {
+    // 全屏激活
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 切换全屏
+     */
+    toggle () {
+      if (screenfull.isFullscreen) {
+        screenfull.exit()
+        this.commit('d2admin/fullscreen/set', false)
+      } else {
+        screenfull.request()
+        this.commit('d2admin/fullscreen/set', true)
+      }
+    },
+    /**
+     * @description 设置 store 里的全屏状态
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}