theme 模块

Former-commit-id: 5a60f7a68cfa3c9effbf33aee1a0bf606cb7a045 [formerly 5a60f7a68cfa3c9effbf33aee1a0bf606cb7a045 [formerly 5a60f7a68cfa3c9effbf33aee1a0bf606cb7a045 [formerly 5a60f7a68cfa3c9effbf33aee1a0bf606cb7a045 [formerly afdd5cb7b4d018f68b61257181f089438a12fa44 [formerly 6fdb6e759e339cd17c8d76d09d50b902fce8b74d]]]]]
Former-commit-id: 6e388aa8ce29cec9d8901ed1b11d8fe11a0cf2d4
Former-commit-id: c6c36e452f960cb9b24d73d65b28907e40c621b4
Former-commit-id: 7685d8e053d9f26643092bf32e74844d6cf89446 [formerly 8cfb43881c4ed2ac4facf1bd95ff6ac901dc41ba]
Former-commit-id: 8493ae32e3635ee733b09d558eb9049154883ebf
Former-commit-id: 728960b5d4f3ebf00130d78edb964beb3321fe59
Former-commit-id: 978d3701efedbcce3d5c694eaed1d34537cdf561
Former-commit-id: 4fd5476f29dd398a103a12d0f820e4d70750c97d
Former-commit-id: 2580f2041c87b19410c4bff2a99ec6a94727e766

src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="themeList" v-bind="table">
+  <el-table :data="list" v-bind="table">
     <el-table-column prop="title" align="center" width="160"/>
     <el-table-column label="预览" width="120">
       <div
@@ -10,7 +10,7 @@
     </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-if="activeName === 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>
@@ -30,17 +30,17 @@ export default {
     }
   },
   computed: {
-    ...mapState('d2admin', [
+    ...mapState('d2admin/theme', [
-      'themeList',
+      'list',
-      'themeActiveName'
+      'activeName'
     ])
   },
   methods: {
-    ...mapMutations('d2admin', [
+    ...mapMutations('d2admin/theme', [
-      'themeSet'
+      'set'
     ]),
     handleSelectTheme (name) {
-      this.themeSet(name)
+      this.set(name)
     }
   }
 }

src/layout/header-aside/layout.vue

@@ -86,9 +86,11 @@ export default {
       'asideCollapse'
     ]),
     ...mapGetters('d2admin', [
-      'themeActiveSetting',
       'keepAliveInclude'
     ]),
+    ...mapGetters('d2admin/theme', {
+      themeActiveSetting: 'activeSetting'
+    }),
     /**
      * @description 最外层容器的背景图片样式
      */

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

@@ -7,7 +7,10 @@
           <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="menuHeader" :options="{ rootObjectKey: 'menuHeader', maxDepth: 2 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="menuHeader"
+                :options="{ rootObjectKey: 'menuHeader', maxDepth: 2 }"/>
             </div>
           </el-card>
         </el-col>
@@ -15,7 +18,10 @@
           <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="menuAside" :options="{ rootObjectKey: 'menuAside', maxDepth: 1 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="menuAside"
+                :options="{ rootObjectKey: 'menuAside', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -53,7 +59,10 @@
           <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 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="themeList"
+                :options="{ rootObjectKey: 'themeList', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -61,7 +70,10 @@
           <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="themeActiveSetting" :options="{ rootObjectKey: 'themeActiveSetting', maxDepth: 1 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="themeActiveSetting"
+                :options="{ rootObjectKey: 'themeActiveSetting', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -75,7 +87,10 @@
           <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="pagePool" :options="{ rootObjectKey: 'pagePool', maxDepth: 1 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="pagePool"
+                :options="{ rootObjectKey: 'pagePool', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -83,7 +98,10 @@
           <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="pageOpenedList" :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="pageOpenedList"
+                :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -91,14 +109,20 @@
           <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="keepAliveInclude" :options="{ rootObjectKey: 'keepAliveInclude', maxDepth: 1 }"/>
+              <tree-view
+                class="tree-view-small"
+                :data="keepAliveInclude"
+                :options="{ rootObjectKey: 'keepAliveInclude', 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 class="tree-view-small" :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>
@@ -118,22 +142,25 @@ export default {
       // 菜单
       menuHeader: state => state.menu.header,
       menuAside: state => state.menu.aside,
-      menuAsideCollapse: state => state.menu.asideCollapse
+      menuAsideCollapse: state => state.menu.asideCollapse,
+      // 主题
+      themeList: state => state.theme.list,
+      themeActiveName: state => state.theme.activeName
     }),
     ...mapState('d2admin', [
       'isFullScreen',
       'isGrayMode',
-      'themeList',
-      'themeActiveName',
       'pagePool',
       'pageOpenedList',
       'pageCurrent',
       'ua'
     ]),
     ...mapGetters('d2admin', [
-      'themeActiveSetting',
       'keepAliveInclude'
-    ])
+    ]),
+    ...mapGetters('d2admin/theme', {
+      themeActiveSetting: 'activeSetting'
+    })
   }
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <d2-container type="card" class="page">
     <template slot="header">主题</template>
-    <el-table :data="themeList" v-bind="table">
+    <el-table :data="list" v-bind="table">
       <el-table-column prop="name" align="center" width="260"/>
       <el-table-column label="预览" width="120">
         <div
@@ -12,7 +12,7 @@
       </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-if="activeName === 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>
@@ -25,7 +25,7 @@
       </el-button>
     </div>
     <template slot="footer">
-      <el-button type="primary" size="small">当前激活主题 {{themeActiveName}}</el-button>
+      <el-button type="primary" size="small">当前激活主题 {{activeName}}</el-button>
     </template>
   </d2-container>
 </template>
@@ -42,17 +42,17 @@ export default {
     }
   },
   computed: {
-    ...mapState('d2admin', [
+    ...mapState('d2admin/theme', [
-      'themeList',
+      'list',
-      'themeActiveName'
+      'activeName'
     ])
   },
   methods: {
-    ...mapMutations('d2admin', [
+    ...mapMutations('d2admin/theme', [
-      'themeSet'
+      'set'
     ]),
     handleSelectTheme (name) {
-      this.themeSet(name)
+      this.set(name)
     }
   }
 }

src/store/modules/d2admin/index.js.REMOVED.git-id

@@ -1 +1 @@
-e0ff5bbbd75335a8ba226e4922c3653e3627d0c8
+e2e9f9e3f236b74d6b87a1b9a3865b19b4afc9fb

src/store/modules/d2admin/modules/menu.js

@@ -37,7 +37,7 @@ export default {
       this.commit('d2admin/util/dbValueSetByUser', {
         dbName: 'sys',
         path: 'menu.asideCollapse',
-        value: collapse
+        value: state.asideCollapse
       })
     },
     /**

src/store/modules/d2admin/modules/theme.js

@@ -0,0 +1,60 @@
+import list from '@/assets/style/theme/list.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 主题
+    list,
+    // 现在激活的主题 这应该是一个名字 不是对象
+    activeName: list[0].name
+  },
+  getters: {
+    /**
+     * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
+     * @param {Object} state vuex state
+     */
+    activeSetting (state) {
+      return state.list.find(theme => theme.name === state.activeName)
+    }
+  },
+  mutations: {
+    /**
+     * @description 激活一个主题（应用到dom上）
+     * @param {Object} state vuex state
+     * @param {String} themeValue 需要激活的主题名称
+     */
+    set (state, themeName) {
+      // 检查这个主题在主题列表里是否存在
+      state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
+      // 将 vuex 中的主题应用到 dom
+      this.commit('d2admin/theme/dom')
+      // 持久化
+      this.commit('d2admin/util/dbValueSetByUser', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        value: state.activeName
+      })
+    },
+    /**
+     * @description 从数据库加载主题设置
+     * @param {Object} state vuex state
+     */
+    async load (state) {
+      // store 赋值
+      state.activeName = await this.dispatch('d2admin/util/dbValueGetByUser', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        defaultValue: state.list[0].name
+      })
+      // 更新到页面
+      this.commit('d2admin/theme/dom')
+    },
+    /**
+     * @description 将 vuex 中的主题应用到 dom
+     * @param {Object} state vuex state
+     */
+    dom (state) {
+      document.body.className = `theme-${state.activeName}`
+    }
+  }
+}

src/store/modules/d2admin/modules/user.js

@@ -12,7 +12,7 @@ export default {
      * @param {Object} state vuex state
      * @param {*} info info
      */
-    infoSet (state, info) {
+    set (state, info) {
       // store 赋值
       state.info = info
       // 持久化
@@ -26,7 +26,7 @@ export default {
      * @description 从数据库取用户数据
      * @param {Object} state vuex state
      */
-    async infoLoad (state) {
+    async load (state) {
       // store 赋值
       state.info = await this.dispatch('d2admin/util/dbValueGetByUser', {
         dbName: 'sys',