完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5

src/pages/demo/playground/db/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <d2-container type="full" class="page">
+    <template slot="header">本地数据</template>
+    <tree-view :data="dbData" :options="options"></tree-view>
+  </d2-container>
+</template>
+
+<script>
+// 插件
+import db from '@/libs/db.js'
+
+export default {
+  data () {
+    return {
+      dbData: {},
+      options: {
+        maxDepth: 10,
+        rootObjectKey: 'db.value()',
+        modifiable: false
+      }
+    }
+  },
+  mounted () {
+    this.load()
+  },
+  methods: {
+    load () {
+      this.dbData = db.value()
+    }
+  }
+}
+</script>

src/pages/demo/playground/fullscreen/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <d2-container class="page-demo-playground-fullscreen">
+    <template slot="header">全屏</template>
+    <el-button type="primary" @click="d2adminFullScreenToggle">
+      d2adminFullScreenToggle 切换全屏
+    </el-button>
+  </d2-container>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  computed: {
+    ...mapState({
+      isFullScreen: state => state.d2admin.isFullScreen
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminFullScreenToggle'
+    ])
+  }
+}
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <d2-container 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/index/image/icon.png.REMOVED.git-id

@@ -0,0 +1 @@
+e995956a468c8bb1151a6ea5cb321dbc0ea0f0b9

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

@@ -0,0 +1,9 @@
+<template>
+  <d2-container type="full">
+    <d2-demo-page-cover
+      title="试验台"
+      sub-title="在这里可以测试一些 D2Admin 的系统功能">
+      <img src="./image/icon.png">
+    </d2-demo-page-cover>
+  </d2-container>
+</template>

src/pages/demo/playground/page-argu/get.vue

@@ -0,0 +1,16 @@
+<template>
+  <d2-container type="full">
+    <h1 class="d2-mt-0">$route.params.username: {{$route.params.username}}</h1>
+    <h1>$route.query.userid: {{$route.query.userid}}</h1>
+    <p>你可以尝试返回发送数据页面修改数据重新发送，或者切换到其它页面后刷新浏览器再返回本业观察参数保留</p>
+    <el-button type="primary" @click="$router.push({ name: 'demo-playground-page-argu-send' })">返回发送数据的页面</el-button>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  }
+}
+</script>

src/pages/demo/playground/page-argu/send.vue

@@ -0,0 +1,55 @@
+<template>
+  <d2-container type="full">
+    <el-form :model="sendForm" :rules="rules" label-position="top" ref="sendForm">
+      <el-form-item label="username 通过动态路由匹配发送" prop="username">
+        <el-input v-model="sendForm.username"></el-input>
+      </el-form-item>
+      <el-form-item label="userid 通过参数发送" prop="userid">
+        <el-input v-model="sendForm.userid"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit('sendForm')">跳转到接收页面</el-button>
+      </el-form-item>
+    </el-form>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      sendForm: {
+        username: 'FairyEver',
+        userid: '001'
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入要发送的用户名', trigger: 'blur' }
+        ],
+        userid: [
+          { required: true, message: '请输入要发送的用户ID', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleSubmit (formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$router.push({
+            name: 'demo-playground-page-argu-get',
+            params: {
+              username: this.sendForm.username
+            },
+            query: {
+              userid: this.sendForm.userid
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

src/pages/demo/playground/page-cache/off.vue

@@ -0,0 +1,17 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">这个页面不会被 keep-alive</template>
+    <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字消失，证明没有被缓存</p>
+    <el-input v-model="value" placeholder="input here"></el-input>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+</script>

src/pages/demo/playground/page-cache/on.vue

@@ -0,0 +1,18 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">这个页面会被 keep-alive</template>
+    <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
+    <el-input v-model="value" placeholder="input here"></el-input>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  name: 'demo-playground-page-cache-on',
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+</script>

src/pages/demo/playground/theme/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <d2-container type="full" class="page">
+    <template slot="header">主题</template>
+    <el-table :data="themeList" v-bind="table">
+      <el-table-column prop="name" align="center" width="260"/>
+      <el-table-column label="预览" width="120">
+        <div
+          slot-scope="scope"
+          class="theme-preview"
+          :style="{'backgroundImage': `url(${$baseUrl}${scope.row.preview})`}">
+        </div>
+      </el-table-column>
+      <el-table-column prop="address" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="themeActiveName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
+          <el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div>
+      <p>尝试激活一个不存在的主题（主题不存在 <d2-icon name="arrow-right"/> 默认主题）</p>
+      <el-button type="danger" @click="handleSelectTheme('err-theme')">
+        <d2-icon name="hand-o-right" class="d2-mr-10"/>
+        尝试激活主题 'err-theme'
+      </el-button>
+    </div>
+    <template slot="footer">
+      <el-button type="primary" size="small">当前激活主题 {{themeActiveName}}</el-button>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      table: {
+        showHeader: false,
+        border: true
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      themeList: state => state.d2admin.themeList,
+      themeActiveName: state => state.d2admin.themeActiveName
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminThemeSet'
+    ]),
+    handleSelectTheme (name) {
+      this.d2adminThemeSet(name)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.page {
+  .theme-preview {
+    height: 50px;
+    width: 100px;
+    border-radius: 4px;
+    background-size: cover;
+    border: 1px solid $color-border-1;
+  }
+}
+</style>