优化

Former-commit-id: 4d3b3dba4b787cc551e868f564481a9c9d1005cd [formerly 4d3b3dba4b787cc551e868f564481a9c9d1005cd [formerly 4d3b3dba4b787cc551e868f564481a9c9d1005cd [formerly 4d3b3dba4b787cc551e868f564481a9c9d1005cd [formerly a1bee0a09872436a8178d2f3ff28dfcfa1334527 [formerly 165ed9ed5023c54e8b77aaad78d2a08dab1850a7]]]]]
Former-commit-id: 6b575639a46cc5b724f1a86715d5d94419dbb38b
Former-commit-id: 6e277e97e0ccea94986808b8bcaa49c4e31735a9
Former-commit-id: 3df022a4669e4f8d8e92e548de06d5a5aa793b07 [formerly a28d57f91d62a7f34fdd1861ddaee196f9951596]
Former-commit-id: b6878bde8a3b1b90f63ad788741593a70dfb2e13
Former-commit-id: 4ee5dbc6e4a8ed07b4f6bb0ec4a91b94242bcab1
Former-commit-id: 2c886cd2db7924007a8b70089da78bea41996ae7
Former-commit-id: 2fb2dee79878ab07bb821549dd78ce6a80a6d975
Former-commit-id: 6b5b3c21ff34740bc59f760ea6c7f181d1526501

src/pages/demo/playground/store/gray/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <d2-container type="card" class="page-demo-playground-gray">
+    <template slot="header">
+      <div class="colorful">{{isGrayMode ? 'GRAY' : 'COLORFUL'}}</div>
+    </template>
+    <el-button-group>
+      <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>

src/pages/demo/playground/store/sys/index.vue

@@ -7,7 +7,7 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">顶栏菜单数据</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view :data="menusHeader" :options="{ rootObjectKey: 'menusHeader', maxDepth: 2 }"/>
+              <tree-view class="tree-view-small" :data="menusHeader" :options="{ rootObjectKey: 'menusHeader', maxDepth: 2 }"/>
             </div>
           </el-card>
         </el-col>
@@ -15,7 +15,7 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">侧边栏菜单数据</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view :data="menusAside" :options="{ rootObjectKey: 'menusAside', maxDepth: 1 }"/>
+              <tree-view class="tree-view-small" :data="menusAside" :options="{ rootObjectKey: 'menusAside', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -44,26 +44,38 @@
         <el-col :span="8">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">当前主题</template>
-            <div style="height: 150px; overflow: auto;">
+            <div style="height: 300px; overflow: auto;">
               {{themeActiveName}}
             </div>
           </el-card>
         </el-col>
-        <el-col :span="16">
+        <el-col :span="8">
+          <el-card shadow="never" class="d2-card d2-mb">
+            <template slot="header">已经注册的主题</template>
+            <div style="height: 300px; overflow: auto;">
+              <tree-view class="tree-view-small" :data="themeList" :options="{ rootObjectKey: 'themeList', maxDepth: 1 }"/>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">当前主题信息</template>
-            <div style="height: 150px; overflow: auto;">
-              <tree-view :data="themeActiveSetting" :options="{ rootObjectKey: 'themeActiveSetting', maxDepth: 1 }"/>
+            <div style="height: 300px; overflow: auto;">
+              <tree-view class="tree-view-small" :data="themeActiveSetting" :options="{ rootObjectKey: 'themeActiveSetting', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
       </el-row>
+      <el-card shadow="never" class="d2-card d2-mb">
+        <template slot="header">当前页面</template>
+        {{pageCurrent}}
+      </el-card>
       <el-row :gutter="20">
         <el-col :span="8">
           <el-card shadow="never" class="d2-card d2-mb">
-            <template slot="header">当前页面</template>
+            <template slot="header">支持多页显示的页面列表</template>
             <div style="height: 300px; overflow: auto;">
-              {{pageCurrent}}
+              <tree-view class="tree-view-small" :data="pagePool" :options="{ rootObjectKey: 'pagePool', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -71,7 +83,7 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">打开的标签页</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view :data="pageOpenedList" :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
+              <tree-view class="tree-view-small" :data="pageOpenedList" :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -79,14 +91,14 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">缓存页面</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view :data="d2adminKeepAliveInclude" :options="{ rootObjectKey: 'd2adminKeepAliveInclude', maxDepth: 1 }"/>
+              <tree-view class="tree-view-small" :data="d2adminKeepAliveInclude" :options="{ rootObjectKey: 'd2adminKeepAliveInclude', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
       </el-row>
       <el-card shadow="never" class="d2-card d2-mb">
         <template slot="header">最新版本数据 [ {{releasesUpdate ? '有新版本' : '已经是最新版本'}} ]</template>
-        <tree-view :data="releasesLatest" :options="{ rootObjectKey: 'releasesLatest', maxDepth: 1 }"/>
+        <tree-view class="tree-view-small" :data="releasesLatest" :options="{ rootObjectKey: 'releasesLatest', maxDepth: 1 }"/>
       </el-card>
     </div>
   </d2-container>
@@ -97,6 +109,7 @@ import { mapState, mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapState({
+      userInfo: state => state.d2admin.userInfo,
       version: state => state.d2admin.version,
       releasesLatest: state => state.d2admin.releasesLatest,
       releasesUpdate: state => state.d2admin.releasesUpdate,
@@ -105,9 +118,12 @@ export default {
       isFullScreen: state => state.d2admin.isFullScreen,
       isGrayMode: state => state.d2admin.isGrayMode,
       isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse,
+      themeList: state => state.d2admin.themeList,
       themeActiveName: state => state.d2admin.themeActiveName,
+      pagePool: state => state.d2admin.pagePool,
       pageOpenedList: state => state.d2admin.pageOpenedList,
-      pageCurrent: state => state.d2admin.pageCurrent
+      pageCurrent: state => state.d2admin.pageCurrent,
+      ua: state => state.d2admin.ua
     }),
     ...mapGetters([
       'themeActiveSetting',

src/pages/demo/playground/store/ua/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <d2-container>
+    <p class="d2-mt-0">useragent</p>
+    <el-input :value="ua.ua"></el-input>
+    <p>格式化数据 in vuex: state.d2admin.ua</p>
+    <d2-highlight :code="uaStr"/>
+  </d2-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState({
+      ua: state => state.d2admin.ua
+    }),
+    uaStr () {
+      const { browser, engine, os, device, cpu } = this.ua
+      return JSON.stringify({ browser, engine, os, device, cpu }, null, 2)
+    }
+  }
+}
+</script>