no message

Former-commit-id: b632d6424f412c396322c6dcba4c30a9e49a1259 [formerly 9518a76bf3cc2caf82d0c7c21a7c574c326a1e7d] [formerly b632d6424f412c396322c6dcba4c30a9e49a1259 [formerly 9518a76bf3cc2caf82d0c7c21a7c574c326a1e7d] [formerly b632d6424f412c396322c6dcba4c30a9e49a1259 [formerly 9518a76bf3cc2caf82d0c7c21a7c574c326a1e7d] [formerly 9518a76bf3cc2caf82d0c7c21a7c574c326a1e7d [formerly af1a65d4356d15f94c9bc7a91ce1f4d484a80fcf [formerly efb8c71eca3e74dcae10402308de8b6bfe39153e]]]]] Former-commit-id: 4828ba46103d0a7c8e63ee8eb585ff2bf9f5884c Former-commit-id: 6e4b91c1f6f0fb38689a61a7949e1dd15579270d Former-commit-id: aae30e98a077fe2f2d117fddd1cf37c4aafadbd3 [formerly 18be65e9ba9d8a8d66a8fdc12b38e669a2a4c42b] Former-commit-id: ff755de34fb6e691b9dbbf4ce3eca9be4574da24 Former-commit-id: 9d6328bb28adeb12574a46ce9f1762ebd06c9ddd Former-commit-id: 825f14bed9c794c4d92b34b620ee5a30b910f246 Former-commit-id: 1598f53f9c914a477a9dc2d262b038449f43ecd4 Former-commit-id: ec19d1d3a4ef2346434ddbf30aaeea3c87d32601
2018-07-01 16:26:45 +08:00
parent 6906f7d5e7
commit ef4992ae52
5 changed files with 56 additions and 38 deletions
--- a/src/assets/style/theme/list.js
+++ b/src/assets/style/theme/list.js
@@ -1,29 +1,29 @@
 export default [
  {
-    name: 'd2admin 经典',
-    value: 'd2',
+    title: 'd2admin 经典',
+    name: 'd2',
    preview: 'static/image/theme/d2/preview@2x.png'
  },
  {
-    name: '紫罗兰',
-    value: 'violet',
+    title: '紫罗兰',
+    name: 'violet',
    preview: 'static/image/theme/violet/preview@2x.png'
  },
  {
-    name: '简约线条',
-    value: 'line',
+    title: '简约线条',
+    name: 'line',
    backgroundImage: 'static/image/bg/line-squashed.jpg',
    preview: 'static/image/theme/line/preview@2x.png'
  },
  {
-    name: '流星',
-    value: 'star',
+    title: '流星',
+    name: 'star',
    backgroundImage: 'static/image/bg/star-squashed.jpg',
    preview: 'static/image/theme/star/preview@2x.png'
  },
  {
-    name: 'Tomorrow Night Blue (vsCode)',
-    value: 'tomorrow-night-blue',
+    title: 'Tomorrow Night Blue (vsCode)',
+    name: 'tomorrow-night-blue',
    preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png'
  }
 ]
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -10,8 +10,8 @@
      <!-- 顶栏 -->
      <el-header class="d2-theme-header">
        <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/icon-only.png`">
-          <img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/all.png`">
+          <img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.value}/logo/icon-only.png`">
+          <img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.value}/logo/all.png`">
        </div>
        <div class="toggle-aside-btn" @click="collapse = !collapse">
          <d2-icon name="bars"/>
@@ -54,7 +54,7 @@
 </template>

 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 export default {
  name: 'd2-layout-main',
  components: {
@@ -77,13 +77,15 @@ export default {
  },
  computed: {
    ...mapState({
-      themeActive: state => state.d2admin.themeActive,
      isGrayMode: state => state.d2admin.isGrayMode
    }),
+    ...mapGetters([
+      'themeActiveSetting'
+    ]),
    styleLayoutMainGroup () {
      return {
-        ...this.themeActive.backgroundImage ? {
-          backgroundImage: `url('${this.$assetsPublicPath}${this.themeActive.backgroundImage}')`
+        ...this.themeActiveSetting.backgroundImage ? {
+          backgroundImage: `url('${this.$assetsPublicPath}${this.themeActiveSetting.backgroundImage}')`
        } : {}
      }
    },
--- a/src/components/core/d2-theme-list/index.vue
+++ b/src/components/core/d2-theme-list/index.vue
@@ -1,6 +1,6 @@
 <template>
  <el-table :data="themeList" v-bind="table">
-    <el-table-column prop="name" align="center" width="160"/>
+    <el-table-column prop="title" align="center" width="160"/>
    <el-table-column label="预览" width="120">
      <div
        slot-scope="scope"
@@ -10,15 +10,15 @@
    </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>
+        <el-button v-if="themeActiveSetting.name === 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>
 </template>

 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 export default {
  name: 'd2-theme-list',
  data () {
@@ -31,16 +31,18 @@ export default {
  },
  computed: {
    ...mapState({
-      themeList: state => state.d2admin.themeList,
-      themeActive: state => state.d2admin.themeActive
-    })
+      themeList: state => state.d2admin.themeList
+    }),
+    ...mapGetters([
+      'themeActiveSetting'
+    ])
  },
  methods: {
    ...mapMutations([
      'd2adminThemeSet'
    ]),
-    handleSelectTheme (value) {
-      this.d2adminThemeSet(value)
+    handleSelectTheme (name) {
+      this.d2adminThemeSet(name)
    }
  }
 }
--- a/src/libs/db.js
+++ b/src/libs/db.js
@@ -5,7 +5,7 @@ const adapter = new LocalStorage('d2admin')
 const db = low(adapter)

 db.defaults({
-  themeActive: [],
+  themeActiveName: [],
  pageOpenedList: []
 })
  .write()
--- a/src/store/modules/d2admin.js
+++ b/src/store/modules/d2admin.js
@@ -10,7 +10,7 @@ export default {
    isGrayMode: false,
    // 主题
    themeList,
-    themeActive: themeList[1],
+    themeActiveName: themeList[0].name, // 这应该是一个名字 不是对象
    // 可以在多页 tab 模式下显示的页面
    tagPool: [],
    // 当前显示的多页面列表
@@ -20,6 +20,15 @@ export default {
    // 当前页面
    pageCurrent: ''
  },
+  getters: {
+    /**
+     * @description 返回当前的主题信息 不是一个名字 而是所有的主题数据
+     * @param {state} state vuex state
+     */
+    themeActiveSetting (state) {
+      return state.themeList.find(theme => theme.name === state.themeActiveName)
+    }
+  },
  mutations: {
    /**
     * @class 通用工具
@@ -198,29 +207,34 @@ export default {
      state.isGrayMode = value
    },
    /**
-     * @class themeActive
+     * @class themeActiveName
     * @description 激活一个主题（应用到dom上）
     * @param {state} state vuex state
     * @param {string} themeValue 需要激活的主题名称
     */
-    d2adminThemeSet (state, themeValue) {
-      // 从列表里找到需要激活的主题的数据
-      const theme = state.themeList.find(e => e.value === themeValue) || state.themeList[0]
-      // 设置 state
-      state.themeActive = theme
+    d2adminThemeSet (state, themeName) {
+      // 检查这个主题在主题列表里是否存在
+      const theme = state.themeList.find(e => e.name === themeName)
+      if (theme) {
+        // 设置 state
+        state.themeActiveName = themeName
+      } else {
+        // 设置为列表第一个主题
+        state.themeActiveName = state.themeList[0].name
+      }
      // 设置 dom
-      document.body.className = `theme-${state.themeActive.value}`
+      document.body.className = `theme-${state.themeActiveName}`
      // 保存到数据库
-      this.commit('d2adminVuex2Db', 'themeActive')
+      this.commit('d2adminVuex2Db', 'themeActiveName')
    },
    /**
-     * @class themeActive
+     * @class themeActiveName
     * @description 从数据库加载主题设置
     * @param {state} state vuex state
     */
    d2adminThemeLoad (state) {
-      const themeActive = db.get('themeActive').find({uuid: util.uuid()}).value()
-      this.commit('d2adminThemeSet', themeActive ? themeActive.value : state.themeList[0].value)
+      const themeActiveName = db.get('themeActiveName').find({uuid: util.uuid()}).value()
+      this.commit('d2adminThemeSet', themeActiveName.value || state.themeList[0].name)
    }
  }
 }