no message

Former-commit-id: 28001d97a6acbc59cc2a4068e74b43930b9bbb5e [formerly 28001d97a6acbc59cc2a4068e74b43930b9bbb5e [formerly 28001d97a6acbc59cc2a4068e74b43930b9bbb5e [formerly 28001d97a6acbc59cc2a4068e74b43930b9bbb5e [formerly 659149eab9a7f1198a7b715f39f08a24b1804d17 [formerly c7e6b21dd4a467c6b794595bec4647249e68bb0e]]]]]
Former-commit-id: 3f587c610bed6cd33cb8c26678a9658848c722e2
Former-commit-id: 5f04121890b04a6baae1535b7d9e5c3625801367
Former-commit-id: 76ae2249ba1bb4d2898e38810d69993ce39348b2 [formerly cdf5c6e2537ad7e241002b052f4489d48eb6747e]
Former-commit-id: f9779d5b85f4b3bb6bca1cb30fe390c4def1df5c
Former-commit-id: 2a48e174108beefd63fe0460d63778869a318479
Former-commit-id: 9ba3e21651913fe219581bf76cdeb493ccac23e1
Former-commit-id: 0dad8be23e66744bb0402ec88d122d621bb02f04
Former-commit-id: cc7f3fb8a3928f752fb0598584489e3a139f9fdb

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

@@ -1,20 +1,65 @@
 <template>
-  <d2-container class="page">
-    page
+  <d2-container type="full" class="page-demo-playground-theme">
+    <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(${$assetsPublicPath}${scope.row.preview})`}">
+        </div>
+      </el-table-column>
+      <el-table-column prop="address" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="themeActive.value === scope.row.value" type="success" icon="el-icon-check" round>已激活</el-button>
+          <el-button v-else round @click="handleSelectTheme(scope.row.value)">使用</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template slot="footer">hELLO</template>
   </d2-container>
 </template>
+
 <script>
+import { mapState, mapMutations } from 'vuex'
 export default {
   data () {
-    return {}
+    return {
+      table: {
+        showHeader: false,
+        border: true
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      themeList: state => state.d2admin.themeList,
+      themeActive: state => state.d2admin.themeActive
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminThemeSet'
+    ]),
+    handleSelectTheme (value) {
+      this.d2adminThemeSet(value)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.page {
-  // Your page style here
-  // Do not use empty rulesets
-  // If empty, delete it
+@import '~@/assets/style/public.scss';
+.page-demo-playground-theme {
+  // filter: grayscale(100%);
+  // filter: gray;
+  .theme-preview {
+    height: 50px;
+    width: 100px;
+    border-radius: 4px;
+    background-size: cover;
+    border: 1px solid $color-border-1;
+  }
 }
 </style>