1.2.0
Former-commit-id: eee1f4b4c260bfcbd529e5e7b9bfd851183ab029
This commit is contained in:
liyang
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="d2-container-full-bs">
|
||||
<div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-full-bs__body" ref="wrapper">
|
||||
<div style="padding: 20px 0px;">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll';
|
||||
|
||||
export default {
|
||||
name: 'd2-container-full-bs',
|
||||
data() {
|
||||
return {
|
||||
BS: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.scrollInit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.scrollDestroy();
|
||||
},
|
||||
methods: {
|
||||
scrollInit() {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
scrollDestroy() {
|
||||
if (this.BS) {
|
||||
this.BS.destroy();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="d2-container-full">
|
||||
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-full__body">
|
||||
<slot/>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-container-full',
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="container-component" :class="{responsive}" ref="container">
|
||||
<!-- [card] 卡片容器 -->
|
||||
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
</el-card>
|
||||
<!-- [ghost] 隐形的容器 -->
|
||||
<div v-if="type === 'ghost'" class="d2-container-ghost">
|
||||
<el-card v-if="$slots.header" shadow="never" class="d2-container-ghost-header">
|
||||
<slot name="header"/>
|
||||
</el-card>
|
||||
<slot/>
|
||||
</div>
|
||||
<!-- [container-full] 填充 -->
|
||||
<d2-container-full v-if="type === 'full' && !scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full>
|
||||
<!-- [container-full-bs] 填充 滚动优化 -->
|
||||
<d2-container-full-bs v-if="type === 'full' && scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full-bs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll';
|
||||
// 组件
|
||||
import d2ContainerFull from './components/d2-container-full.vue';
|
||||
import d2ContainerFullBs from './components/d2-container-full-bs.vue';
|
||||
|
||||
export default {
|
||||
name: 'd2-container',
|
||||
props: {
|
||||
// 容器样式
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'card',
|
||||
},
|
||||
// 滚动优化
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
// 是否开启响应式尺寸变化
|
||||
responsive: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
'd2-container-full': d2ContainerFull,
|
||||
'd2-container-full-bs': d2ContainerFullBs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BS: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.type === 'card' || this.type === 'ghost') {
|
||||
this.scrollInit();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.type === 'card' || this.type === 'ghost') {
|
||||
this.scrollDestroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollInit() {
|
||||
this.BS = new BScroll(this.$refs.container, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
scrollDestroy() {
|
||||
if (this.BS) {
|
||||
this.BS.destroy();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
@media (min-width: 576px) {
|
||||
// 根据你的需要在这里添加样式
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
// 根据你的需要在这里添加样式
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
// 根据你的需要在这里添加样式
|
||||
}
|
||||
// 在大于1920分辨率的时候
|
||||
@media (min-width: 1921px) {
|
||||
.container-component.responsive {
|
||||
margin: 0px auto;
|
||||
margin-bottom: 20px;
|
||||
max-width: 1920px - 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<i class="fa" :class="`fa-${name}`" aria-hidden="true"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-icon',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'font-awesome',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<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="@/assets/image/demo/join/qq.jpg">
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="作者微信 加好友拉进微信群" class="d2-mb"/>
|
||||
<img class="qr" src="@/assets/image/demo/join/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>
|
||||
@@ -0,0 +1,32 @@
|
||||
<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';
|
||||
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>
|
||||
@@ -0,0 +1,26 @@
|
||||
<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>
|
||||
@@ -0,0 +1,99 @@
|
||||
<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="menu-empty">
|
||||
<d2-icon name="hdd-o"/>
|
||||
<span>当前目录没有菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll';
|
||||
import { side } from '@/menu/index';
|
||||
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-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() {
|
||||
this.scrollDestroy();
|
||||
setTimeout(() => {
|
||||
this.scrollInit();
|
||||
}, 500);
|
||||
},
|
||||
'$route.matched': {
|
||||
handler(val) {
|
||||
const [{ path }] = val;
|
||||
const sideFilter = side.filter(menu => menu.path === path);
|
||||
this.menus = sideFilter.length > 0 ? sideFilter[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>
|
||||
@@ -0,0 +1,40 @@
|
||||
<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>
|
||||
@@ -0,0 +1,22 @@
|
||||
<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>
|
||||
@@ -0,0 +1,50 @@
|
||||
<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>
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
methods: {
|
||||
handleMenuSelect(index) {
|
||||
if (/^d2-menu-empty-\d+$/.test(index)) {
|
||||
this.$message('功能正在开发');
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: index,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
<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>
|
||||
<router-view v-if="alive"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<transition name="fade-transverse">
|
||||
<router-view v-if="!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,
|
||||
}),
|
||||
...mapGetters([
|
||||
'themeActiveSetting',
|
||||
]),
|
||||
styleLayoutMainGroup() {
|
||||
return {
|
||||
...this.themeActiveSetting.backgroundImage ? {
|
||||
backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`,
|
||||
} : {},
|
||||
};
|
||||
},
|
||||
alive() {
|
||||
if (this.$route.meta) {
|
||||
if (this.$route.meta.alive) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 注册主题
|
||||
@import '~@/assets/style/theme/register.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<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 } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList,
|
||||
pageCurrent: state => state.d2admin.pageCurrent,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 接收点击关闭控制上选项的事件
|
||||
*/
|
||||
handleControlItemClick(command) {
|
||||
switch (command) {
|
||||
case 'left':
|
||||
this.closeAllTagLeft();
|
||||
break;
|
||||
case 'right':
|
||||
this.closeAllTagRight();
|
||||
break;
|
||||
case 'other':
|
||||
this.closeAllTagOther();
|
||||
break;
|
||||
case 'all':
|
||||
this.closeAllTag();
|
||||
break;
|
||||
default:
|
||||
console.log('无效指令');
|
||||
break;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上按钮的事件
|
||||
*/
|
||||
handleControlBtnClick() {
|
||||
// 关闭所有
|
||||
this.closeAllTag();
|
||||
},
|
||||
/**
|
||||
* @description 接收点击 tab 标签的事件
|
||||
*/
|
||||
handleClick(tab) {
|
||||
const page = this.pageOpenedList.find(p => p.name === tab.name);
|
||||
if (page) {
|
||||
this.$router.push({
|
||||
name: page.name,
|
||||
params: page.argu,
|
||||
query: page.query,
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 点击 tab 上的删除按钮后首先触发这里
|
||||
*/
|
||||
handleTabsEdit(tagName, action) {
|
||||
if (action === 'remove') {
|
||||
// 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
||||
this.closeTag(tagName);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 关闭左侧的 tag
|
||||
*/
|
||||
closeAllTagLeft() {
|
||||
this.$store.commit('d2adminTagCloseLeft');
|
||||
},
|
||||
/**
|
||||
* @description 关闭右侧的 tag
|
||||
*/
|
||||
closeAllTagRight() {
|
||||
this.$store.commit('d2adminTagCloseRight');
|
||||
},
|
||||
/**
|
||||
* @description 关闭其它的 tag
|
||||
*/
|
||||
closeAllTagOther() {
|
||||
this.$store.commit('d2adminTagCloseOther');
|
||||
},
|
||||
/**
|
||||
* @description 关闭全部的 tag
|
||||
*/
|
||||
closeAllTag() {
|
||||
this.$store.commit('d2adminTagCloseAll');
|
||||
this.$router.push({
|
||||
name: 'index',
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @description 关闭一个指定的 tag
|
||||
*/
|
||||
closeTag(tagName) {
|
||||
// 下个新的页面
|
||||
let newPage = this.pageOpenedList[0];
|
||||
// 如果关闭的页面就是当前显示的页面
|
||||
if (this.pageCurrent === tagName) {
|
||||
// 去找一个新的页面
|
||||
const len = this.pageOpenedList.length;
|
||||
for (let i = 1; i < len; i += 1) {
|
||||
if (this.pageOpenedList[i].name === tagName) {
|
||||
if (i < len - 1) {
|
||||
newPage = this.pageOpenedList[i + 1];
|
||||
} else {
|
||||
newPage = this.pageOpenedList[i - 1];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 关闭的页面不是当前的页面
|
||||
// 这里暂时不需要做什么
|
||||
}
|
||||
this.$store.commit('d2adminTagClose', tagName);
|
||||
if (this.pageCurrent === tagName) {
|
||||
this.linkTo(newPage);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 跳转到新的页面
|
||||
*/
|
||||
linkTo({ name = '', argu = {}, query = {} }) {
|
||||
const routerObj = {
|
||||
name,
|
||||
params: argu,
|
||||
query,
|
||||
};
|
||||
this.$router.push(routerObj);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="page-index-article-body">
|
||||
<div class="page-index-article-body__logo">
|
||||
<slot/>
|
||||
</div>
|
||||
<p class="page-index-article-body__title">{{title}}</p>
|
||||
<p class="page-index-article-body__sub-title d2-mt-0">{{subTitle}}</p>
|
||||
<a target="blank" href="https://github.com/d2-projects/d2-admin">
|
||||
<img
|
||||
style="position: absolute; top: 0; right: 0; border: 0; width: 130px;"
|
||||
src="@/assets/image/github/forkme@2x.png"
|
||||
alt="Fork me on GitHub">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'Title',
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'subTitle',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page-index-article-header {
|
||||
overflow: hidden;
|
||||
.page-index-article-header__title {
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
.page-index-article-body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.page-index-article-body__logo {
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.page-index-article-body__title {
|
||||
color: $color-text-main;
|
||||
}
|
||||
.page-index-article-body__sub-title {
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<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>
|
||||
@@ -0,0 +1,11 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import d2Container from '@/components/core/d2-container/index.vue';
|
||||
import d2MultiplePageControl from '@/components/core/d2-multiple-page-control/index.vue';
|
||||
|
||||
Vue.component('d2-container', d2Container);
|
||||
Vue.component('d2-multiple-page-control', d2MultiplePageControl);
|
||||
|
||||
Vue.component('d2-icon', () => import('@/components/core/d2-icon'));
|
||||
Vue.component('d2-theme-list', () => import('@/components/core/d2-theme-list'));
|
||||
Vue.component('d2-page-cover', () => import('@/components/core/d2-page-cover'));
|
||||
@@ -0,0 +1,2 @@
|
||||
// 核心组件
|
||||
import './core/register';
|
||||
Reference in New Issue
Block a user