no message

Former-commit-id: 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 01e0619729e2c82b414d8021bd6dd8366a77a2a6 [formerly c9ecfb5a06c4c8efbd3a462151689aae96d969a8]]]]] Former-commit-id: dd8bf6fcb3bd8f8e26ffe641116c1553ed79f1c8 Former-commit-id: 1e1e94223145fc3e6cb1f99c2ce8498e7c65d297 Former-commit-id: 501f1733b5b8e2d563c1534dec6959fc2c7a2062 [formerly 40e4587ab21042b4bcdc9de9710ba42dd7947e76] Former-commit-id: 9a702dd00fb9817c6173596e45fc43f9139d5e77 Former-commit-id: 40f0b9178a03920b3051b52e003575875e3e95cd Former-commit-id: 5308f1435a0a8c45440b6cf8a4b3503e05327ce0 Former-commit-id: b954ec0ba7a0350cfe02f60e8d65d326276ffd82 Former-commit-id: fb45d77d2d3aa4ba2d2a3cb76240e1dcb864fcfb
2018-06-30 00:04:34 +08:00
parent 139a577234
commit d2d8cbe65c
8 changed files with 108 additions and 15 deletions
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-a1a3e79f27ccd26f49976f98524ecb53a980da5e
+bb297fb7228fc3fc2f78d50a734fc279a0d04e7e
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -43,7 +43,7 @@ export default {
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
 .container-component {
  position: absolute;
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-main-group" :style="styleLayoutMainGroup">
+  <div class="layout-main-group" :style="styleLayoutMainGroup" :class="{grayMode: isGrayMode}">
    <div class="layout-main-mask"></div>
    <el-container class="layout-main">
      <!-- 顶栏 -->
@@ -65,7 +65,8 @@ export default {
  },
  computed: {
    ...mapState({
-      themeActive: state => state.d2admin.themeActive
+      themeActive: state => state.d2admin.themeActive,
+      isGrayMode: state => state.d2admin.isGrayMode
    }),
    styleLayoutMainGroup () {
      return {
--- a/src/menu/index.js.REMOVED.git-id
+++ b/src/menu/index.js.REMOVED.git-id
@@ -1 +1 @@
-6759c8ee3afc4da0d88a768285fbd8cc4704cfda
+7562f0a732bab9f663056b29032ad38a3cfcae86
--- a/src/pages/demo/playground/fullscreen/index.vue
+++ b/src/pages/demo/playground/fullscreen/index.vue
@@ -1,12 +1,9 @@
 <template>
  <d2-container class="page-demo-playground-fullscreen">
    <template slot="header">全屏</template>
-    <el-switch
-      v-model="isFullScreen"
-      active-text="全屏"
-      inactive-text="正常"
-      @change="d2adminFullScreenToggle">
-    </el-switch>
+    <el-button type="primary" @click="d2adminFullScreenToggle">
+      d2adminFullScreenToggle 切换全屏
+    </el-button>
  </d2-container>
 </template>

--- a/src/pages/demo/playground/gray/index.vue
+++ b/src/pages/demo/playground/gray/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <d2-container type="full" class="page-demo-playground-gray">
+    <template slot="header">灰度模式</template>
+    <div class="colorful">{{isGrayMode ? 'GRAY' : 'COLORFUL'}}</div>
+    <el-button-group class="d2-mt">
+      <el-button @click="d2adminGrayModeToggle">切换灰度模式</el-button>
+      <el-button @click="d2adminGrayModeSet(true)">打开灰度模式</el-button>
+      <el-button @click="d2adminGrayModeSet(false)">关闭灰度模式</el-button>
+      <el-button @click="dialogVisible = true">模拟报错提示框</el-button>
+    </el-button-group>
+    <el-dialog
+      title="错误"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="30%"
+      @open="handleDialogOpen"
+      @closed="handleDialogClosed">
+      <div
+        style="
+          text-align: center;
+          line-height: 100px;
+          color: #FFF;
+          font-size: 64px;
+          font-weight: bold;
+          border-radius: 4px;
+          background-color: #F56C6C;
+          margin: -20px 0px;
+          ">
+        Error
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false" style="width: 100%;">
+          我看到后面的内容已经变为灰度模式
+        </el-button>
+      </span>
+    </el-dialog>
+  </d2-container>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  computed: {
+    ...mapState({
+      isGrayMode: state => state.d2admin.isGrayMode
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminGrayModeToggle',
+      'd2adminGrayModeSet'
+    ]),
+    handleDialogOpen () {
+      this.d2adminGrayModeSet(true)
+    },
+    handleDialogClosed () {
+      this.d2adminGrayModeSet(false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.page-demo-playground-gray {
+  .colorful {
+    @extend %unable-select;
+    line-height: 300px;
+    font-size: 100px;
+    font-weight: bold;
+    color: #FFF;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid #333;
+    background-color: #ffff00;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+  }
+}
+</style>
--- a/src/router/index.js.REMOVED.git-id
+++ b/src/router/index.js.REMOVED.git-id
@@ -1 +1 @@
-0d67caa915a29a86ed9d0443090a122d2e676988
+606766b63bfb19d2bc7fc5a4885a8428c20971a0
--- a/src/store/modules/d2admin.js
+++ b/src/store/modules/d2admin.js
@@ -7,7 +7,7 @@ export default {
    // 全屏
    isFullScreen: false,
    // 灰度
-    isGrayView: false,
+    isGrayMode: false,
    // 主题
    themeList,
    themeActive: themeList[1]
@@ -30,8 +30,16 @@ export default {
     * 切换灰度状态
     * @param {state} state vuex state
     */
-    d2adminGrayViewToggle (state) {
-      state.isGray = !state.isGray
+    d2adminGrayModeToggle (state) {
+      state.isGrayMode = !state.isGrayMode
+    },
+    /**
+     * 设置灰度模式
+     * @param {state} state vuex state
+     * @param {boolean} value new value
+     */
+    d2adminGrayModeSet (state, value) {
+      state.isGrayMode = value
    },
    /**
     * 激活一个主题（应用到dom上）