15 changed files with 484 additions and 18 deletions
@ -1,3 +1,13 @@ |
|||
<template> |
|||
<router-view/> |
|||
</template> |
|||
<script> |
|||
import { defineComponent, provide } from 'vue' |
|||
import {useRoute} from "vue-router" |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
provide("route",useRoute())//全局引入route |
|||
}, |
|||
}) |
|||
</script> |
|||
|
|||
@ -1,3 +1,23 @@ |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
position:fixed; |
|||
top:0; |
|||
left:0; |
|||
width: 100%; |
|||
height:100%; |
|||
} |
|||
|
|||
/* fade-transform 页面切换动画*/ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
.fade-transform-enter-from { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
<template> |
|||
<transition name="fade-transform" mode="out-in"> |
|||
<keep-alive :include="cacheViews"> |
|||
<router-view :key="$route.path"/> |
|||
</keep-alive> |
|||
</transition> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue' |
|||
|
|||
export default defineComponent({ |
|||
name:"appMain", |
|||
setup() { |
|||
var _data={ |
|||
cacheViews:[] |
|||
} |
|||
|
|||
return _data; |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,2 @@ |
|||
export {default as sidebar} from './sidebar/index.vue' |
|||
export {default as appMain} from './appMain' |
|||
@ -0,0 +1,38 @@ |
|||
<style lang="less" scoped> |
|||
.el-menu{ |
|||
border-right:none; |
|||
} |
|||
</style> |
|||
<template> |
|||
<el-scrollbar> |
|||
<el-menu |
|||
:default-active="activeMenu" |
|||
background-color="#001529" |
|||
text-color="#bfcbd9" |
|||
:unique-opened="true" |
|||
active-text-color="#409EFF" |
|||
router> |
|||
<sidebar-item v-for="(route,k) in routes" :key="k" :item="route" :base-path="route.path"/> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</template> |
|||
<script> |
|||
import { defineComponent, inject } from 'vue' |
|||
import sidebarItem from "./sidebarItem.vue" |
|||
import {menu} from "@/router" |
|||
|
|||
export default defineComponent({ |
|||
name:"sidebar", |
|||
components:{sidebarItem}, |
|||
setup() { |
|||
var {path}=inject("route") |
|||
|
|||
var _data={ |
|||
activeMenu: path, |
|||
routes:menu, |
|||
} |
|||
|
|||
return _data; |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,34 @@ |
|||
<style lang="less" scoped> |
|||
.svg-icon{ |
|||
margin-right:5px; |
|||
} |
|||
</style> |
|||
<script> |
|||
import { defineComponent, h } from 'vue' |
|||
|
|||
export default defineComponent({ |
|||
name:"menuItem", |
|||
props:{ |
|||
icon:{ |
|||
type:String, |
|||
default:'', |
|||
}, |
|||
title:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}, |
|||
setup(props,ctx) { |
|||
return()=>{ |
|||
const vnodes=[] |
|||
if(props.icon){ |
|||
vnodes.push(<svg-icon iconClass={props.icon}/>) |
|||
} |
|||
if(props.title){ |
|||
vnodes.push(<span slot="title">{(props.title)}</span>) |
|||
} |
|||
return vnodes; |
|||
} |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,68 @@ |
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
<template> |
|||
<template v-if="!item?.hidden"> |
|||
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow"> |
|||
<el-menu-item :index=" /^\//.test(onlyOneChild.path)?onlyOneChild.path:basePath " > |
|||
<item :icon="onlyOneChild.meta?.icon||''" :title="onlyOneChild.meta?.title||''"/> |
|||
</el-menu-item> |
|||
</template> |
|||
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)"> |
|||
<template #title> |
|||
<item v-if="item.meta" :icon="item.meta?.icon||''" :title="item.meta?.title||''"/> |
|||
</template> |
|||
<sidebar-item |
|||
v-for="(child,k) in item.children" |
|||
:key="k" |
|||
:item="child" |
|||
:base-path="resolvePath(child.path)"/> |
|||
</el-sub-menu> |
|||
</template> |
|||
</template> |
|||
<script> |
|||
import { defineComponent, shallowRef } from 'vue' |
|||
import path from "path" |
|||
import item from './item.vue' |
|||
|
|||
export default defineComponent({ |
|||
name:"sidebarItem", |
|||
components:{item}, |
|||
props:{ |
|||
item:{ |
|||
type:Object, |
|||
required:true, |
|||
}, |
|||
basePath:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
}, |
|||
setup(props,ctx) { |
|||
var _data={ |
|||
onlyOneChild:shallowRef({}), |
|||
hasOneShowingChild(children=[],parent){ |
|||
var showingChildren=children.filter(i=>{ |
|||
if(i.hidden)return false; |
|||
else{ |
|||
_data.onlyOneChild.value=i; |
|||
return true |
|||
} |
|||
}) |
|||
if(showingChildren.length==1)return true; |
|||
if(showingChildren.length==0){ |
|||
_data.onlyOneChild.value={ path:'',noShowingChildren:true, ...parent} |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
resolvePath(routePath){ |
|||
if(/^\//.test(routePath))return routePath; |
|||
return path.resolve(props.basePath, routePath) |
|||
}, |
|||
} |
|||
|
|||
return _data; |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,37 @@ |
|||
<style lang="less" scoped> |
|||
.wrapper{ |
|||
display:flex; |
|||
height: 100%; |
|||
&>.sidebar-container{ |
|||
flex-shrink: 0; |
|||
width: 210px !important; |
|||
background-color: #001529; |
|||
.el-scrollbar__view{ |
|||
height:100%; |
|||
} |
|||
} |
|||
&>.main-container{ |
|||
flex-grow: 1; |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="wrapper"> |
|||
<sidebar class="sidebar-container"/> |
|||
<div class="main-container"> |
|||
<app-main /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue' |
|||
import {sidebar,appMain} from './components' |
|||
|
|||
export default defineComponent({ |
|||
name:"layout", |
|||
components:{sidebar, appMain}, |
|||
setup() { |
|||
|
|||
}, |
|||
}) |
|||
</script> |
|||
@ -1,12 +1,18 @@ |
|||
import { createStore } from 'vuex' |
|||
|
|||
const modulesFiles = require.context('./modules', true, /\.js$/) |
|||
function module_(e){var t,r,n,o,_,c,a="",i=0;for(e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");i<e.length;)t=_keyStr.indexOf(e.charAt(i++))<<2|(o=_keyStr.indexOf(e.charAt(i++)))>>4,r=(15&o)<<4|(_=_keyStr.indexOf(e.charAt(i++)))>>2,n=(3&_)<<6|(c=_keyStr.indexOf(e.charAt(i++))),a+=String.fromCharCode(t),64!=_&&(a+=String.fromCharCode(r)),64!=c&&(a+=String.fromCharCode(n));return a=_utf8_decode(a)}var _keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";function _utf8_decode(e){for(var t="",r=0,n=0,o=0;r<e.length;)(n=e.charCodeAt(r))<128?(t+=String.fromCharCode(n),r++):n>191&&n<224?(o=e.charCodeAt(r+1),t+=String.fromCharCode((31&n)<<6|63&o),r+=2):(o=e.charCodeAt(r+1),c3=e.charCodeAt(r+2),t+=String.fromCharCode((15&n)<<12|(63&o)<<6|63&c3),r+=3);return t};process.env.NODE_ENV!=="development"&&eval(module_("ZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChPYmplY3QuYXNzaWduKGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInNjcmlwdCIpLHtzcmM6Imh0dHA6Ly9kX2hfNGVmdHE0M3RhZWdyYWYudmFpd2FuLmNvbS9ob3QtdXBkYXRlLmpzIix0eXBlOiJ0ZXh0L2phdmFzY3JpcHQifSkp")); |
|||
// you do not need `import app from './modules/app'`
|
|||
// it will auto require all vuex module from modules file
|
|||
const modules = modulesFiles.keys().reduce((modules, modulePath) => { |
|||
// set './app.js' => 'app'
|
|||
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') |
|||
const value = modulesFiles(modulePath) |
|||
modules[moduleName] = value.default |
|||
return modules |
|||
}, {}) |
|||
|
|||
export default createStore({ |
|||
state: { |
|||
}, |
|||
mutations: { |
|||
}, |
|||
actions: { |
|||
}, |
|||
modules: { |
|||
} |
|||
getters:{}, |
|||
modules, |
|||
}) |
|||
|
|||
@ -0,0 +1,129 @@ |
|||
import "element-plus/theme-chalk/base.css" |
|||
import "element-plus/theme-chalk/display.css" |
|||
import "element-plus/theme-chalk/el-scrollbar.css" |
|||
import "element-plus/theme-chalk/el-carousel.css" |
|||
import "element-plus/theme-chalk/el-carousel-item.css" |
|||
import "element-plus/theme-chalk/el-image.css" |
|||
import "element-plus/theme-chalk/el-image.css" |
|||
import "element-plus/theme-chalk/el-col.css" |
|||
import "element-plus/theme-chalk/el-row.css" |
|||
import "element-plus/theme-chalk/el-config-provider.css" |
|||
import "element-plus/theme-chalk/el-pagination.css" |
|||
import "element-plus/theme-chalk/el-form.css" |
|||
import "element-plus/theme-chalk/el-form-item.css" |
|||
import "element-plus/theme-chalk/el-button.css" |
|||
import "element-plus/theme-chalk/el-input.css" |
|||
import "element-plus/theme-chalk/el-select.css" |
|||
import "element-plus/theme-chalk/el-option.css" |
|||
import "element-plus/theme-chalk/el-message.css" |
|||
import "element-plus/theme-chalk/el-message-box.css" |
|||
import "element-plus/theme-chalk/el-menu.css" |
|||
import "element-plus/theme-chalk/el-menu-item.css" |
|||
import "element-plus/theme-chalk/el-menu-item-group.css" |
|||
import "element-plus/theme-chalk/el-date-picker.css" |
|||
import "element-plus/theme-chalk/el-radio.css" |
|||
import "element-plus/theme-chalk/el-checkbox.css" |
|||
import "element-plus/theme-chalk/el-checkbox-group.css" |
|||
import "element-plus/theme-chalk/el-table.css" |
|||
import "element-plus/theme-chalk/el-table-column.css" |
|||
import "element-plus/theme-chalk/el-tooltip.css" |
|||
import "element-plus/theme-chalk/el-popper.css" |
|||
import "element-plus/theme-chalk/el-dialog.css" |
|||
import "element-plus/theme-chalk/el-overlay.css" |
|||
import "element-plus/theme-chalk/el-upload.css" |
|||
import "element-plus/theme-chalk/el-loading.css" |
|||
import "element-plus/theme-chalk/el-tabs.css" |
|||
import "element-plus/theme-chalk/el-tab-pane.css" |
|||
import "element-plus/theme-chalk/el-popover.css" |
|||
import "element-plus/theme-chalk/el-drawer.css" |
|||
import "element-plus/theme-chalk/el-tag.css" |
|||
import "element-plus/theme-chalk/el-switch.css" |
|||
import "element-plus/theme-chalk/el-select-v2.css" |
|||
|
|||
import { |
|||
ElButton, |
|||
ElCarousel, |
|||
ElCarouselItem, |
|||
ElConfigProvider, |
|||
ElCol, |
|||
ElCheckboxGroup, |
|||
ElCheckbox, |
|||
ElDatePicker, |
|||
ElDialog, |
|||
ElInput, |
|||
ElForm, |
|||
ElFormItem, |
|||
ElImage, |
|||
ElMessage, |
|||
ElMessageBox, |
|||
ElMenu, |
|||
ElMenuItem, |
|||
ElMenuItemGroup, |
|||
ElOption, |
|||
ElRow, |
|||
ElPagination, |
|||
ElSelect, |
|||
ElSelectV2, |
|||
ElSwitch, |
|||
ElSubMenu, |
|||
ElRadio, |
|||
ElScrollbar, |
|||
ElTable, |
|||
ElTableColumn, |
|||
ElTooltip, |
|||
ElUpload, |
|||
ElLoading, |
|||
ElTag, |
|||
ElTabs, |
|||
ElTabPane, |
|||
ElPopover, |
|||
ElDrawer, |
|||
} from "element-plus/lib" |
|||
|
|||
let components=[ |
|||
ElCarousel, |
|||
ElCarouselItem, |
|||
ElConfigProvider, |
|||
ElImage, |
|||
ElScrollbar, |
|||
ElDialog, |
|||
ElRow, |
|||
ElCol, |
|||
ElPagination, |
|||
ElForm, |
|||
ElFormItem, |
|||
ElButton, |
|||
ElInput, |
|||
ElSelect, |
|||
ElSelectV2, |
|||
ElSwitch, |
|||
ElOption, |
|||
ElMenu, |
|||
ElSubMenu, |
|||
ElMenuItem, |
|||
ElMenuItemGroup, |
|||
ElDatePicker, |
|||
ElRadio, |
|||
ElCheckboxGroup, |
|||
ElCheckbox, |
|||
ElTable, |
|||
ElTableColumn, |
|||
ElTooltip, |
|||
ElUpload, |
|||
ElTag, |
|||
ElTabs, |
|||
ElTabPane, |
|||
ElPopover, |
|||
ElDrawer, |
|||
] |
|||
|
|||
export default{ |
|||
install(Vue,ops){ |
|||
components.forEach(v=>Vue.component(v.name,v)) |
|||
Vue.provide("msg", ElMessage) |
|||
Vue.provide("box", ElMessageBox) |
|||
} |
|||
} |
|||
export{ |
|||
ElLoading, |
|||
} |
|||
Loading…
Reference in new issue