no message

Former-commit-id: b5a2e324ecbb5b07f0d9271fad79ffc349d7f802
Former-commit-id: 0bf7da6578411c0a3503cba0d08e349d675bca18
Former-commit-id: f7401e8a82bba4d3f3b678c46c18320bfa7ac427

src/components/core/d2-layout-main/components/-header-right/components/-theme.vue

@@ -5,67 +5,18 @@
         <d2-icon name="diamond"/>
       </el-button>
     </el-tooltip>
-    <el-dialog title="主题" width="500px" :visible.sync="dialogVisible">
+    <el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
-      <el-table v-bind="table">
+      <d2-theme-list/>
-        <el-table-column prop="name" align="center" width="100"/>
-        <el-table-column label="预览" width="220">
-          <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
-        </el-table-column>
-        <el-table-column prop="address" align="center">
-          <template slot-scope="scope">
-            <el-button type="primary">使用</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
 export default {
   data () {
     return {
-      dialogVisible: false,
+      dialogVisible: false
-      table: {
-        data: [
-          {
-            name: 'd2admin',
-            preview: '/static/image/theme-preview/d2admin@2x.png'
-          },
-          {
-            name: 'star',
-            preview: '/static/image/theme-preview/star@2x.png'
-          }
-        ],
-        showHeader: false,
-        border: true
-      }
     }
-  },
-  computed: {
-    ...mapState({
-      themeName: state => state.theme.themeName
-    })
-  },
-  methods: {
-    ...mapMutations([
-      'setTheme'
-    ])
-  },
-  mounted () {
-    this.setTheme('d2')
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
-.theme-preview {
-  height: 100px;
-  width: 200px;
-  border-radius: 4px;
-  background-size: cover;
-  border: 1px solid $color-border-1;
-}
-</style>

src/components/core/d2-theme-list/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-table v-bind="table">
+    <el-table-column prop="name" align="center" width="160"/>
+    <el-table-column label="预览" width="220">
+      <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
+    </el-table-column>
+    <el-table-column prop="address" align="center">
+      <template slot-scope="scope">
+        <el-button type="primary" @click="handleSelectTheme(scope.row.value)">使用</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  name: 'd2-theme-list',
+  data () {
+    return {
+      table: {
+        data: [
+          {
+            name: 'd2admin 经典',
+            value: 'd2',
+            preview: '/static/image/theme-preview/d2@2x.png'
+          },
+          {
+            name: '流星',
+            value: 'star',
+            preview: '/static/image/theme-preview/star@2x.png'
+          }
+        ],
+        showHeader: false,
+        border: true
+      }
+    }
+  },
+  mounted () {
+    this.setTheme('d2')
+  },
+  computed: {
+    ...mapState({
+      themeName: state => state.theme.themeName
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'setTheme'
+    ]),
+    handleSelectTheme (themeName) {
+      this.setTheme(themeName)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.theme-preview {
+  height: 100px;
+  width: 200px;
+  border-radius: 4px;
+  background-size: cover;
+  border: 1px solid $color-border-1;
+}
+</style>

src/components/core/register.js

@@ -14,5 +14,6 @@ Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
 Vue.component('d2-icon-select', () => import('@/components/core/d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
-Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
 Vue.component('d2-mde', () => import('@/components/core/d2-mde'))
+Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
+Vue.component('d2-theme-list', () => import('@/components/core/d2-theme-list'))