mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 11:27:24 +08:00
reset-admin
This commit is contained in:
xiaomlove
+44
-200
@@ -1,212 +1,56 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<el-container v-if="state.showMenu" class="container">
|
||||
<el-aside class="aside">
|
||||
<div class="head">
|
||||
<div>
|
||||
<img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="logo">
|
||||
<span>vue3 admin</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<el-menu
|
||||
:default-openeds="state.defaultOpen"
|
||||
background-color="#222832"
|
||||
text-color="#fff"
|
||||
:router="true"
|
||||
:default-active='state.currentPath'
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template #title>
|
||||
<span>Dashboard</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/introduce"><i class="el-icon-data-line" />系统介绍</el-menu-item>
|
||||
<el-menu-item index="/dashboard"><i class="el-icon-odometer" />Dashboard</el-menu-item>
|
||||
<el-menu-item index="/add"><i class="el-icon-plus" />添加商品</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template #title>
|
||||
<span>首页配置</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/swiper"><i class="el-icon-picture" />轮播图配置</el-menu-item>
|
||||
<el-menu-item index="/agent-allow"><i class="el-icon-picture" />允许客户端</el-menu-item>
|
||||
<el-menu-item index="/user"><i class="el-icon-user" />用户</el-menu-item>
|
||||
<el-menu-item index="/exam"><i class="el-icon-s-check" />考核</el-menu-item>
|
||||
<el-menu-item index="/hot"><i class="el-icon-star-on" />热销商品配置</el-menu-item>
|
||||
<el-menu-item index="/new"><i class="el-icon-sell" />新品上线配置</el-menu-item>
|
||||
<el-menu-item index="/recommend"><i class="el-icon-thumb" />为你推荐配置</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template #title>
|
||||
<span>模块管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/category"><i class="el-icon-menu" />分类管理</el-menu-item>
|
||||
<el-menu-item index="/good"><i class="el-icon-s-goods" />商品管理</el-menu-item>
|
||||
<el-menu-item index="/guest"><i class="el-icon-user-solid" />会员管理</el-menu-item>
|
||||
<el-menu-item index="/order"><i class="el-icon-s-order" />订单管理</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="4">
|
||||
<template #title>
|
||||
<span>系统管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/account"><i class="el-icon-lock" />修改密码</el-menu-item>
|
||||
<!-- <el-menu-item><i class="el-icon-upload2" />安全退出</el-menu-item> -->
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container class="content">
|
||||
<Header />
|
||||
<div class="main">
|
||||
<router-view />
|
||||
</div>
|
||||
<Footer />
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container v-else class="container">
|
||||
<router-view />
|
||||
</el-container>
|
||||
</div>
|
||||
<img alt="Vue logo" src="./assets/logo.png" />
|
||||
<HelloWorld msg="Hello Vue 3 + Vite" />
|
||||
<el-button type="primary"> Element UI </el-button>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="12">Left</el-col>
|
||||
<el-col :span="12">Right</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item label="测试" label-width="120px">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 C"></el-checkbox>
|
||||
<el-checkbox label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive } from 'vue'
|
||||
import Header from '@/components/Header.vue'
|
||||
import Footer from '@/components/Footer.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { pathMap, localGet } from '@/utils'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
setup() {
|
||||
const noMenu = ['/login']
|
||||
const router = useRouter()
|
||||
const state = reactive({
|
||||
defaultOpen: ['1', '2', '3', '4'],
|
||||
showMenu: true,
|
||||
currentPath: '/dashboard',
|
||||
count: {
|
||||
number: 1
|
||||
}
|
||||
})
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path == '/login') {
|
||||
// 如果路径是 /login 则正常执行
|
||||
next()
|
||||
} else {
|
||||
// 如果不是 /login，判断是否有 token
|
||||
if (!localGet('token')) {
|
||||
// 如果没有，则跳至登录页面
|
||||
next({ path: '/login' })
|
||||
} else {
|
||||
// 否则继续执行
|
||||
next()
|
||||
components: {
|
||||
HelloWorld
|
||||
},
|
||||
setup(props, context) {
|
||||
console.log(props, context)
|
||||
const checkList = [];
|
||||
return {
|
||||
checkList
|
||||
}
|
||||
}
|
||||
state.showMenu = !noMenu.includes(to.path)
|
||||
state.currentPath = to.path
|
||||
document.title = pathMap[to.name]
|
||||
})
|
||||
return {
|
||||
state
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// This starter template is using Vue 3 experimental <script setup> SFCs
|
||||
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
.aside {
|
||||
width: 200px!important;
|
||||
background-color: #222832;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
.aside::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
}
|
||||
.head > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.head span {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.line {
|
||||
border-top: 1px solid hsla(0,0%,100%,.05);
|
||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main {
|
||||
height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none!important;
|
||||
}
|
||||
.el-submenu {
|
||||
border-top: 1px solid hsla(0, 0%, 100%, .05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
.el-submenu:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.el-submenu [class^="el-icon-"] {
|
||||
vertical-align: -1px!important;
|
||||
}
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user