完善
Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]] Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55 Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a] Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938 Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02 Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9 Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
This commit is contained in:
liyang
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="isFullScreen ? '退出全屏' : '全屏'"
|
||||
placement="bottom">
|
||||
<el-button class="d2-mr btn-text can-hover" type="text" @click="d2adminFullScreenToggle">
|
||||
<d2-icon v-if="isFullScreen" name="compress"/>
|
||||
<d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
isFullScreen: state => state.d2admin.isFullScreen
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminFullScreenToggle'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
<a class="link" :href="url" target="_blank">转到 Github</a>
|
||||
</div>
|
||||
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="handleClick">
|
||||
<d2-icon name="github" style="font-size: 20px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
url: 'https://github.com/d2-projects/d2-admin'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
window.open(this.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.link {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
b27de32f6832b50dc5b8b1dc613060a81f88a8e9
|
||||
@@ -1 +0,0 @@
|
||||
12bb778e8779f32a46ee756e6dbb890024b40f5d
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="疑问" placement="bottom">
|
||||
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
|
||||
<d2-icon name="question-circle" style="font-size: 20px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-dialog title="帮助" width="600px" :visible.sync="dialogVisible">
|
||||
<div style="margin-top: -25px; margin-bottom: -25px;">
|
||||
<h1 class="d2-mt-0">如果你有问题可以加入交流群或者联系作者</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="扫码进 QQ 群" class="d2-mb"/>
|
||||
<img class="qr" src="./image/qq.jpg">
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="作者微信 加好友拉进微信群" class="d2-mb"/>
|
||||
<img class="qr" src="./image/we.jpg">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
&.qr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<el-menu mode="horizontal" @select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menus from '@/menu/index.js'
|
||||
import menuMixin from '../mixin/menu'
|
||||
// 组件
|
||||
import d2LayoutMainMenuItem from '../-menu-item/index.vue'
|
||||
import d2LayoutMainMenuSub from '../-menu-sub/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'd2-layout-main-menu-header',
|
||||
mixins: [
|
||||
menuMixin
|
||||
],
|
||||
components: {
|
||||
'd2-layout-main-menu-item': d2LayoutMainMenuItem,
|
||||
'd2-layout-main-menu-sub': d2LayoutMainMenuSub
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<el-menu-item :index="menu.path || uniqueid">
|
||||
<i :class="`fa fa-${menu.icon || 'file-o'}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _uniqueid from 'lodash.uniqueid'
|
||||
export default {
|
||||
name: 'd2-layout-main-menu-item',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
uniqueid: _uniqueid('d2-menu-empty-')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-layout-main-menu-side">
|
||||
<el-menu
|
||||
:collapse="collapse"
|
||||
:unique-opened="true"
|
||||
:default-active="active"
|
||||
ref="menu"
|
||||
@select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<div v-if="menus.length === 0 && !collapse" class="d2-layout-main-menu-empty">
|
||||
<d2-icon name="hdd-o"/>
|
||||
<span>当前目录没有菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { side } from '@/menu/index.js'
|
||||
import menuMixin from '../mixin/menu'
|
||||
// 组件
|
||||
import d2LayoutMainMenuItem from '../-menu-item/index.vue'
|
||||
import d2LayoutMainMenuSub from '../-menu-sub/index.vue'
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
|
||||
export default {
|
||||
name: 'd2-layout-main-menu-side',
|
||||
mixins: [
|
||||
menuMixin
|
||||
],
|
||||
components: {
|
||||
'd2-layout-main-menu-item': d2LayoutMainMenuItem,
|
||||
'd2-layout-main-menu-sub': d2LayoutMainMenuSub
|
||||
},
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus: [],
|
||||
active: '',
|
||||
asideHeight: 300,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 折叠和展开菜单的时候销毁 better scroll
|
||||
collapse (val) {
|
||||
this.scrollDestroy()
|
||||
setTimeout(() => {
|
||||
this.scrollInit()
|
||||
}, 500)
|
||||
},
|
||||
'$route.matched': {
|
||||
handler (val) {
|
||||
const path = val[0].path
|
||||
const _side = side.filter(menu => menu.path === path)
|
||||
this.menus = _side.length > 0 ? _side[0].children : []
|
||||
this.active = val[val.length - 1].path
|
||||
this.$nextTick(() => {
|
||||
if (this.menus.length > 0) {
|
||||
this.$refs.menu.activeIndex = this.active
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$el, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<el-submenu :index="menu.path || uniqueid">
|
||||
<template slot="title">
|
||||
<i :class="`fa fa-${menu.icon || 'folder-o'}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</template>
|
||||
<template v-for="(child, childIndex) in menu.children">
|
||||
<d2-layout-main-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||
<d2-layout-main-menu-sub v-else :menu="child" :key="childIndex"/>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _uniqueid from 'lodash.uniqueid'
|
||||
// 组件
|
||||
import d2LayoutMainMenuItem from '../-menu-item/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'd2-layout-main-menu-sub',
|
||||
components: {
|
||||
'd2-layout-main-menu-item': d2LayoutMainMenuItem
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
uniqueid: _uniqueid('d2-menu-empty-')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="主题" placement="bottom">
|
||||
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
|
||||
<d2-icon name="diamond" style="font-size: 16px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
|
||||
<d2-theme-list style="margin-top: -25px;"/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown class="d2-mr">
|
||||
<span class="btn-text">你好 {{username}}</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
|
||||
<el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import Cookies from 'js-cookie'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
username: state => state.d2admin.username
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminDbRemoveByUuid'
|
||||
]),
|
||||
logOff () {
|
||||
this.$confirm('注销此账户吗?', '注销', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 删除用户名
|
||||
this.d2adminDbRemoveByUuid({
|
||||
key: 'username',
|
||||
emptyValue: ''
|
||||
})
|
||||
// 删除cookie
|
||||
Cookies.remove('token')
|
||||
Cookies.remove('uuid')
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
})
|
||||
}).catch(() => {
|
||||
// 取消了注销
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
export default {
|
||||
methods: {
|
||||
handleMenuSelect (index, indexPath) {
|
||||
if (/^d2-menu-empty-\d+$/.test(index)) {
|
||||
this.$message('功能正在开发')
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-layout-main-group"
|
||||
:style="styleLayoutMainGroup"
|
||||
:class="{grayMode: isGrayMode}">
|
||||
<!-- 半透明遮罩 -->
|
||||
<div class="d2-layout-main-mask"></div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="d2-layout-main-content">
|
||||
<!-- 顶栏 -->
|
||||
<div class="d2-theme-header">
|
||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||
</div>
|
||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
||||
<d2-icon name="bars"/>
|
||||
</div>
|
||||
<d2-layout-main-menu-header/>
|
||||
<!-- 顶栏右侧 -->
|
||||
<div class="d2-header-right">
|
||||
<d2-layout-main-header-github/>
|
||||
<d2-layout-main-header-help/>
|
||||
<d2-layout-main-header-full-screen/>
|
||||
<d2-layout-main-header-theme/>
|
||||
<d2-layout-main-header-user/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下面 主体 -->
|
||||
<div class="d2-theme-container">
|
||||
<!-- 主体 侧边栏 -->
|
||||
<div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<d2-layout-main-menu-side :collapse="collapse"/>
|
||||
</div>
|
||||
<!-- 主体 -->
|
||||
<div class="d2-theme-container-main">
|
||||
<div class="d2-theme-container-main-header">
|
||||
<d2-multiple-page-control/>
|
||||
</div>
|
||||
<div class="d2-theme-container-main-body">
|
||||
<transition name="fade-transverse">
|
||||
<keep-alive :include="keepAliveList">
|
||||
<router-view/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'd2-layout-main',
|
||||
components: {
|
||||
'd2-layout-main-menu-side': () => import('./components/-menu-side'),
|
||||
'd2-layout-main-menu-header': () => import('./components/-menu-header'),
|
||||
'd2-layout-main-header-full-screen': () => import('./components/-full-screen'),
|
||||
'd2-layout-main-header-theme': () => import('./components/-theme'),
|
||||
'd2-layout-main-header-user': () => import('./components/-user'),
|
||||
'd2-layout-main-header-help': () => import('./components/-help'),
|
||||
'd2-layout-main-header-github': () => import('./components/-github')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
// [侧边栏宽度] 正常状态
|
||||
asideWidth: '200px',
|
||||
// [侧边栏宽度] 折叠状态
|
||||
asideWidthCollapse: '65px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isGrayMode: state => state.d2admin.isGrayMode,
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList
|
||||
}),
|
||||
...mapGetters([
|
||||
'themeActiveSetting'
|
||||
]),
|
||||
/**
|
||||
* @description 返回现在需要缓存的页面 name
|
||||
*/
|
||||
keepAliveList () {
|
||||
return this.pageOpenedList.filter(item => !(item.meta && item.meta.notCache)).map(e => e.name)
|
||||
},
|
||||
/**
|
||||
* @description 最外层容器的背景图片样式
|
||||
*/
|
||||
styleLayoutMainGroup () {
|
||||
return {
|
||||
...this.themeActiveSetting.backgroundImage ? {
|
||||
backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
|
||||
} : {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 注册主题
|
||||
@import '~@/assets/style/theme/register.scss';
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-multiple-page-control-group">
|
||||
<div class="d2-multiple-page-control-content">
|
||||
<div class="d2-multiple-page-control-content-inner">
|
||||
<el-tabs
|
||||
class="d2-multiple-page-control"
|
||||
:value="pageCurrent"
|
||||
type="card"
|
||||
:closable="true"
|
||||
@tab-click="handleClick"
|
||||
@edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
v-for="(page, index) in pageOpenedList"
|
||||
:key="index"
|
||||
:label="page.meta.title || '未命名'"
|
||||
:name="page.name">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2-multiple-page-control-btn">
|
||||
<el-dropdown
|
||||
split-button
|
||||
@click="handleControlBtnClick"
|
||||
@command="handleControlItemClick">
|
||||
<d2-icon name="times-circle"/>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="left">
|
||||
<d2-icon name="arrow-left" class="d2-mr-10"/>
|
||||
关闭左侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="right">
|
||||
<d2-icon name="arrow-right" class="d2-mr-10"/>
|
||||
关闭右侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="other">
|
||||
<d2-icon name="times" class="d2-mr-10"/>
|
||||
关闭其它
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="all">
|
||||
<d2-icon name="times-circle" class="d2-mr-10"/>
|
||||
全部关闭
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList,
|
||||
pageCurrent: state => state.d2admin.pageCurrent
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminTagCloseLeft',
|
||||
'd2adminTagCloseRight',
|
||||
'd2adminTagCloseOther',
|
||||
'd2adminTagCloseAll'
|
||||
]),
|
||||
/**
|
||||
* @description 接收点击关闭控制上选项的事件
|
||||
*/
|
||||
handleControlItemClick (command) {
|
||||
switch (command) {
|
||||
case 'left':
|
||||
this.d2adminTagCloseLeft()
|
||||
break
|
||||
case 'right':
|
||||
this.d2adminTagCloseRight()
|
||||
break
|
||||
case 'other':
|
||||
this.d2adminTagCloseOther()
|
||||
break
|
||||
case 'all':
|
||||
this.d2adminTagCloseAll(this)
|
||||
break
|
||||
default:
|
||||
this.$message.error('无效的操作')
|
||||
break
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上按钮的事件
|
||||
*/
|
||||
handleControlBtnClick () {
|
||||
this.d2adminTagCloseAll(this)
|
||||
},
|
||||
/**
|
||||
* @description 接收点击 tab 标签的事件
|
||||
*/
|
||||
handleClick (tab, event) {
|
||||
// 找到点击的页面在 tag 列表里是哪个
|
||||
const page = this.pageOpenedList.find(page => page.name === tab.name)
|
||||
const { name, params, query } = page
|
||||
if (page) {
|
||||
this.$router.push({ name, params, query })
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
||||
*/
|
||||
handleTabsEdit (tagName, action) {
|
||||
if (action === 'remove') {
|
||||
this.$store.commit('d2adminTagClose', {
|
||||
tagName,
|
||||
vm: this
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<el-table :data="themeList" v-bind="table">
|
||||
<el-table-column prop="title" align="center" width="160"/>
|
||||
<el-table-column label="预览" width="120">
|
||||
<div
|
||||
slot-scope="scope"
|
||||
class="theme-preview"
|
||||
:style="{'backgroundImage': `url(${$baseUrl}${scope.row.preview})`}">
|
||||
</div>
|
||||
</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-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
name: 'd2-theme-list',
|
||||
data () {
|
||||
return {
|
||||
table: {
|
||||
showHeader: false,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeList: state => state.d2admin.themeList,
|
||||
themeActiveName: state => state.d2admin.themeActiveName
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminThemeSet'
|
||||
]),
|
||||
handleSelectTheme (name) {
|
||||
this.d2adminThemeSet(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.theme-preview {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
background-size: cover;
|
||||
border: 1px solid $color-border-1;
|
||||
}
|
||||
</style>
|
||||
@@ -4,14 +4,12 @@ import { GridLayout, GridItem } from 'vue-grid-layout'
|
||||
import SplitPane from 'vue-splitpane'
|
||||
|
||||
import d2Container from '@/components/core/d2-container'
|
||||
import d2MultiplePageControl from '@/components/core/d2-multiple-page-control'
|
||||
|
||||
Vue.component('d2-grid-layout', GridLayout)
|
||||
Vue.component('d2-grid-item', GridItem)
|
||||
Vue.component('SplitPane', SplitPane)
|
||||
|
||||
Vue.component('d2-container', d2Container)
|
||||
Vue.component('d2-multiple-page-control', d2MultiplePageControl)
|
||||
Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
|
||||
Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
|
||||
Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
|
||||
@@ -20,4 +18,3 @@ Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.v
|
||||
Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
|
||||
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'))
|
||||
|
||||
Reference in New Issue
Block a user