mirror of https://github.com/halo-dev/halo
Remove useless files
parent
816529e66d
commit
b6b3e3c58c
|
@ -1,175 +0,0 @@
|
|||
<!--
|
||||
<template>
|
||||
<div style="margin: -23px -24px 24px -24px">
|
||||
<!–<a-dropdown :trigger="['contextmenu']" overlayClassName="multi-tab-menu-wrapper">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||
<a-menu-item key="3">3rd menu item</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>–>
|
||||
<a-tabs
|
||||
hideAdd
|
||||
v-model="activeKey"
|
||||
type="editable-card"
|
||||
:tabBarStyle="{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }"
|
||||
@edit="onEdit"
|
||||
>
|
||||
<a-tab-pane v-for="page in pages" :style="{ height: 0 }" :tab="page.meta.title" :key="page.fullPath" :closable="pages.length > 1">
|
||||
</a-tab-pane>
|
||||
<template slot="renderTabBar" slot-scope="props, DefaultTabBar">
|
||||
<component :is="DefaultTabBar" {...props} />
|
||||
</template>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
-->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MultiTab',
|
||||
data() {
|
||||
return {
|
||||
fullPathList: [],
|
||||
pages: [],
|
||||
activeKey: '',
|
||||
newTabIndex: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pages.push(this.$route)
|
||||
this.fullPathList.push(this.$route.fullPath)
|
||||
this.selectedLastPath()
|
||||
},
|
||||
methods: {
|
||||
onEdit(targetKey, action) {
|
||||
this[action](targetKey)
|
||||
},
|
||||
remove(targetKey) {
|
||||
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
|
||||
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
|
||||
// 判断当前标签是否关闭,若关闭则跳转到最后一个还存在的标签页
|
||||
if (!this.fullPathList.includes(this.activeKey)) {
|
||||
this.selectedLastPath()
|
||||
}
|
||||
},
|
||||
selectedLastPath() {
|
||||
this.activeKey = this.fullPathList[this.fullPathList.length - 1]
|
||||
},
|
||||
|
||||
// content menu
|
||||
closeThat(e) {
|
||||
this.remove(e)
|
||||
},
|
||||
closeLeft(e) {
|
||||
const currentIndex = this.fullPathList.indexOf(e)
|
||||
if (currentIndex > 0) {
|
||||
this.fullPathList.forEach((item, index) => {
|
||||
if (index < currentIndex) {
|
||||
this.remove(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.info('左侧没有标签')
|
||||
}
|
||||
},
|
||||
closeRight(e) {
|
||||
const currentIndex = this.fullPathList.indexOf(e)
|
||||
if (currentIndex < (this.fullPathList.length - 1)) {
|
||||
this.fullPathList.forEach((item, index) => {
|
||||
if (index > currentIndex) {
|
||||
this.remove(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.info('右侧没有标签')
|
||||
}
|
||||
},
|
||||
closeAll(e) {
|
||||
const currentIndex = this.fullPathList.indexOf(e)
|
||||
this.fullPathList.forEach((item, index) => {
|
||||
if (index !== currentIndex) {
|
||||
this.remove(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
closeMenuClick({ key, item, domEvent }) {
|
||||
const vkey = domEvent.target.getAttribute('data-vkey')
|
||||
switch (key) {
|
||||
case 'close-right':
|
||||
this.closeRight(vkey)
|
||||
break
|
||||
case 'close-left':
|
||||
this.closeLeft(vkey)
|
||||
break
|
||||
case 'close-all':
|
||||
this.closeAll(vkey)
|
||||
break
|
||||
default:
|
||||
case 'close-that':
|
||||
this.closeThat(vkey)
|
||||
break
|
||||
}
|
||||
},
|
||||
renderTabPaneMenu(e) {
|
||||
return (
|
||||
<a-menu {...{ on: { click: this.closeMenuClick } }}>
|
||||
<a-menu-item key="close-that" data-vkey={e}>关闭当前标签</a-menu-item>
|
||||
<a-menu-item key="close-right" data-vkey={e}>关闭右侧</a-menu-item>
|
||||
<a-menu-item key="close-left" data-vkey={e}>关闭左侧</a-menu-item>
|
||||
<a-menu-item key="close-all" data-vkey={e}>关闭全部</a-menu-item>
|
||||
</a-menu>
|
||||
)
|
||||
},
|
||||
// render
|
||||
renderTabPane(title, keyPath) {
|
||||
const menu = this.renderTabPaneMenu(keyPath)
|
||||
|
||||
return (
|
||||
<a-dropdown overlay={menu} trigger={['contextmenu']}>
|
||||
<span style={{ userSelect: 'none' }}>{ title }</span>
|
||||
</a-dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route': function(newVal) {
|
||||
this.activeKey = newVal.fullPath
|
||||
if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
|
||||
this.fullPathList.push(newVal.fullPath)
|
||||
this.pages.push(newVal)
|
||||
}
|
||||
},
|
||||
activeKey: function(newPathKey) {
|
||||
this.$router.push({ path: newPathKey })
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { onEdit, $data: { pages } } = this
|
||||
const panes = pages.map(page => {
|
||||
return (
|
||||
<a-tab-pane
|
||||
style={{ height: 0 }}
|
||||
tab={this.renderTabPane(page.meta.title, page.fullPath)}
|
||||
key={page.fullPath} closable={pages.length > 1}
|
||||
>
|
||||
</a-tab-pane>)
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="ant-pro-multi-tab">
|
||||
<div class="ant-pro-multi-tab-wrapper">
|
||||
<a-tabs
|
||||
hideAdd
|
||||
type={'editable-card'}
|
||||
v-model={this.activeKey}
|
||||
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
|
||||
{...{ on: { edit: onEdit } }}>
|
||||
{panes}
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,4 +0,0 @@
|
|||
import MultiTab from './MultiTab'
|
||||
import './index.less'
|
||||
|
||||
export default MultiTab
|
|
@ -1,25 +0,0 @@
|
|||
@import '../index';
|
||||
|
||||
@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
|
||||
@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
|
||||
|
||||
/*
|
||||
.topmenu .@{multi-tab-prefix-cls} {
|
||||
max-width: 1200px;
|
||||
margin: -23px auto 24px auto;
|
||||
}
|
||||
*/
|
||||
.@{multi-tab-prefix-cls} {
|
||||
margin: -23px -24px 24px -24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topmenu .@{multi-tab-wrapper-prefix-cls} {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
|
@ -1,10 +0,0 @@
|
|||
import { Spin } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
name: 'PageLoading',
|
||||
render() {
|
||||
return (<div style={{ paddingTop: 100, textAlign: 'center' }}>
|
||||
<Spin size="large" />
|
||||
</div>)
|
||||
}
|
||||
}
|
|
@ -87,9 +87,4 @@ const updateTheme = primaryColor => {
|
|||
}
|
||||
}
|
||||
|
||||
const updateColorWeak = colorWeak => {
|
||||
// document.body.className = colorWeak ? 'colorWeak' : '';
|
||||
colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
|
||||
}
|
||||
|
||||
export { updateTheme, colorList, updateColorWeak }
|
||||
export { updateTheme, colorList }
|
||||
|
|
|
@ -2,9 +2,6 @@
|
|||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
&.colorWeak {
|
||||
filter: invert(80%);
|
||||
}
|
||||
}
|
||||
|
||||
.layout.ant-layout {
|
||||
|
|
|
@ -8,7 +8,6 @@ import NumberInfo from '@/components/NumberInfo'
|
|||
import DescriptionList from '@/components/DescriptionList'
|
||||
import Tree from '@/components/Tree/Tree'
|
||||
import Trend from '@/components/Trend'
|
||||
import MultiTab from '@/components/MultiTab'
|
||||
import Result from '@/components/Result'
|
||||
import ExceptionPage from '@/components/Exception'
|
||||
import Upload from '@/components/Upload/Upload'
|
||||
|
@ -21,7 +20,6 @@ const _components = {
|
|||
NumberInfo,
|
||||
DescriptionList,
|
||||
Tree,
|
||||
MultiTab,
|
||||
Result,
|
||||
ExceptionPage,
|
||||
Upload
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
* 项目默认配置项
|
||||
* primaryColor - 默认主题色
|
||||
* navTheme - sidebar theme ['dark', 'light'] 两种主题
|
||||
* colorWeak - 色盲模式
|
||||
* layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
|
||||
* fixedHeader - 固定 Header : boolean
|
||||
* fixSiderbar - 固定左侧菜单栏 : boolean
|
||||
|
@ -15,14 +14,12 @@
|
|||
|
||||
export default {
|
||||
primaryColor: '#1890FF', // primary color of ant design
|
||||
navTheme: 'light', // theme for nav menu
|
||||
navTheme: 'dark', // theme for nav menu
|
||||
layout: 'topmenu', // nav menu position: sidemenu or topmenu
|
||||
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
|
||||
fixedHeader: false, // sticky header
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
autoHideHeader: false, // auto hide header
|
||||
colorWeak: false,
|
||||
multiTab: false,
|
||||
// vue-ls options
|
||||
storageOptions: {
|
||||
namespace: 'halo__', // key prefix
|
||||
|
|
|
@ -5,13 +5,11 @@ import {
|
|||
DEFAULT_COLOR,
|
||||
DEFAULT_THEME,
|
||||
DEFAULT_LAYOUT_MODE,
|
||||
DEFAULT_COLOR_WEAK,
|
||||
SIDEBAR_TYPE,
|
||||
DEFAULT_FIXED_HEADER,
|
||||
DEFAULT_FIXED_HEADER_HIDDEN,
|
||||
DEFAULT_FIXED_SIDEMENU,
|
||||
DEFAULT_CONTENT_WIDTH_TYPE,
|
||||
DEFAULT_MULTI_TAB
|
||||
DEFAULT_CONTENT_WIDTH_TYPE
|
||||
} from '@/store/mutation-types'
|
||||
import config from '@/config/defaultSettings'
|
||||
|
||||
|
@ -23,9 +21,7 @@ export default function Initializer() {
|
|||
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
|
||||
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
|
||||
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
|
||||
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
|
||||
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
|
||||
store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
|
||||
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
|
||||
|
||||
// last step
|
||||
|
|
|
@ -44,9 +44,8 @@
|
|||
|
||||
<!-- layout content -->
|
||||
<a-layout-content
|
||||
:style="{ height: '100%', margin: multiTab ? '24px 24px 0' : '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
|
||||
:style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
|
||||
>
|
||||
<multi-tab v-if="multiTab"></multi-tab>
|
||||
<transition name="page-transition">
|
||||
<route-view/>
|
||||
</transition>
|
||||
|
@ -68,7 +67,6 @@ import config from '@/config/defaultSettings'
|
|||
import { asyncRouterMap } from '@/config/router.config.js'
|
||||
|
||||
import RouteView from './RouteView'
|
||||
import MultiTab from '@/components/MultiTab'
|
||||
import SideMenu from '@/components/Menu/SideMenu'
|
||||
import GlobalHeader from '@/components/GlobalHeader'
|
||||
import GlobalFooter from '@/components/GlobalFooter'
|
||||
|
@ -78,7 +76,6 @@ export default {
|
|||
mixins: [mixin, mixinDevice],
|
||||
components: {
|
||||
RouteView,
|
||||
MultiTab,
|
||||
SideMenu,
|
||||
GlobalHeader,
|
||||
GlobalFooter
|
||||
|
|
|
@ -19,11 +19,7 @@
|
|||
<div class="content">
|
||||
<div class="page-header-index-wide">
|
||||
<slot>
|
||||
<!-- keep-alive -->
|
||||
<keep-alive v-if="multiTab">
|
||||
<router-view ref="content" />
|
||||
</keep-alive>
|
||||
<router-view v-else ref="content" />
|
||||
<router-view ref="content" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -31,7 +27,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import PageHeader from '@/components/PageHeader'
|
||||
|
||||
export default {
|
||||
|
@ -63,11 +58,6 @@ export default {
|
|||
tabs: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
multiTab: state => state.app.multiTab
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.getPageMeta()
|
||||
},
|
||||
|
|
|
@ -11,22 +11,21 @@ export default {
|
|||
return {}
|
||||
},
|
||||
render() {
|
||||
const { $route: { meta }, $store: { getters } } = this
|
||||
const {
|
||||
$route: { meta }
|
||||
} = this
|
||||
const inKeep = (
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
)
|
||||
const notKeep = (
|
||||
<router-view />
|
||||
)
|
||||
// 这里增加了 multiTab 的判断,当开启了 multiTab 时
|
||||
const notKeep = <router-view />
|
||||
// 应当全部组件皆缓存,否则会导致切换页面后页面还原成原始状态
|
||||
// 若确实不需要,可改为 return meta.keepAlive ? inKeep : notKeep
|
||||
if (!getters.multiTab && meta.keepAlive === false) {
|
||||
if (meta.keepAlive === false) {
|
||||
return notKeep
|
||||
}
|
||||
return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
|
||||
return this.keepAlive || meta.keepAlive ? inKeep : notKeep
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -6,8 +6,7 @@ const getters = {
|
|||
avatar: state => state.user.avatar,
|
||||
nickname: state => state.user.name,
|
||||
roles: state => state.user.roles,
|
||||
addRouters: state => state.permission.addRouters,
|
||||
multiTab: state => state.app.multiTab
|
||||
addRouters: state => state.permission.addRouters
|
||||
}
|
||||
|
||||
export default getters
|
||||
|
|
|
@ -4,12 +4,10 @@ import {
|
|||
DEFAULT_THEME,
|
||||
DEFAULT_LAYOUT_MODE,
|
||||
DEFAULT_COLOR,
|
||||
DEFAULT_COLOR_WEAK,
|
||||
DEFAULT_FIXED_HEADER,
|
||||
DEFAULT_FIXED_SIDEMENU,
|
||||
DEFAULT_FIXED_HEADER_HIDDEN,
|
||||
DEFAULT_CONTENT_WIDTH_TYPE,
|
||||
DEFAULT_MULTI_TAB
|
||||
DEFAULT_CONTENT_WIDTH_TYPE
|
||||
} from '@/store/mutation-types'
|
||||
|
||||
const app = {
|
||||
|
@ -22,9 +20,7 @@ const app = {
|
|||
fixedHeader: false,
|
||||
fixSiderbar: false,
|
||||
autoHideHeader: false,
|
||||
color: null,
|
||||
weak: false,
|
||||
multiTab: false
|
||||
color: null
|
||||
},
|
||||
mutations: {
|
||||
SET_SIDEBAR_TYPE: (state, type) => {
|
||||
|
@ -66,14 +62,6 @@ const app = {
|
|||
TOGGLE_COLOR: (state, color) => {
|
||||
Vue.ls.set(DEFAULT_COLOR, color)
|
||||
state.color = color
|
||||
},
|
||||
TOGGLE_WEAK: (state, flag) => {
|
||||
Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
|
||||
state.weak = flag
|
||||
},
|
||||
TOGGLE_MULTI_TAB: (state, bool) => {
|
||||
Vue.ls.set(DEFAULT_MULTI_TAB, bool)
|
||||
state.multiTab = bool
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
@ -109,12 +97,6 @@ const app = {
|
|||
},
|
||||
ToggleColor({ commit }, color) {
|
||||
commit('TOGGLE_COLOR', color)
|
||||
},
|
||||
ToggleWeak({ commit }, weakFlag) {
|
||||
commit('TOGGLE_WEAK', weakFlag)
|
||||
},
|
||||
ToggleMultiTab({ commit }, bool) {
|
||||
commit('TOGGLE_MULTI_TAB', bool)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,12 +3,10 @@ export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
|
|||
export const DEFAULT_THEME = 'DEFAULT_THEME'
|
||||
export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
|
||||
export const DEFAULT_COLOR = 'DEFAULT_COLOR'
|
||||
export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
|
||||
export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
|
||||
export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
|
||||
export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
|
||||
export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
|
||||
export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
|
||||
|
||||
export const CONTENT_WIDTH_TYPE = {
|
||||
Fluid: 'Fluid',
|
||||
|
|
|
@ -11,14 +11,12 @@ const mixin = {
|
|||
layoutMode: state => state.app.layout,
|
||||
navTheme: state => state.app.theme,
|
||||
primaryColor: state => state.app.color,
|
||||
colorWeak: state => state.app.weak,
|
||||
fixedHeader: state => state.app.fixedHeader,
|
||||
fixSiderbar: state => state.app.fixSiderbar,
|
||||
fixSidebar: state => state.app.fixSiderbar,
|
||||
contentWidth: state => state.app.contentWidth,
|
||||
autoHideHeader: state => state.app.autoHideHeader,
|
||||
sidebarOpened: state => state.app.sidebar,
|
||||
multiTab: state => state.app.multiTab
|
||||
sidebarOpened: state => state.app.sidebar
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
|
Loading…
Reference in New Issue