sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

theme 模块

Browse Source 
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
This commit is contained in:
liyang
2018-08-08 22:30:56 +08:00
parent 9f06cd2c6f
commit b793604445
8 changed files with 124 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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', [
'themeList',
'themeActiveName'
...mapState('d2admin/theme', [
'list',
'activeName'
])
},
methods: {
...mapMutations('d2admin', [
'themeSet'
...mapMutations('d2admin/theme', [
'set'
]),
handleSelectTheme (name) {
this.themeSet(name)
this.set(name)
}
}
}

4
src/layout/header-aside/layout.vue
View File

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

53
src/pages/demo/playground/store/sys/index.vue
View File

@@ -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>

18
src/pages/demo/playground/store/theme/index.vue
View File

@@ -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', [
'themeList',
'themeActiveName'
...mapState('d2admin/theme', [
'list',
'activeName'
])
},
methods: {
...mapMutations('d2admin', [
'themeSet'
...mapMutations('d2admin/theme', [
'set'
]),
handleSelectTheme (name) {
this.themeSet(name)
this.set(name)
}
}
}

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

@@ -1 +1 @@
e0ff5bbbd75335a8ba226e4922c3653e3627d0c8
e2e9f9e3f236b74d6b87a1b9a3865b19b4afc9fb

2
src/store/modules/d2admin/modules/menu.js
View File

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

60
src/store/modules/d2admin/modules/theme.js Normal file
View File

@@ -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}`
}
}
}

4
src/store/modules/d2admin/modules/user.js
View File

@@ -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',