robin/bamboo_admin_message
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化架构,新增路由

Browse Source
This commit is contained in:
robin
2022-07-09 02:53:59 +08:00
parent 72b69615b6
commit 626da19438
19 changed files with 588 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1
View File
@@ -0,0 +1 @@
VUE_APP_BASE_URL=http://127.0.0.1:3210
package.json
+3 -2
View File
@@ -3,10 +3,11 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
"serve": "vue-cli-service serve --mode serve",
"build": "vue-cli-service build --mode build"
},
"dependencies": {
"axios": "^0.27.2",
"copy-webpack-plugin": "^11.0.0",
"core-js": "^3.6.5",
"element-themex": "^1.0.3",
public/loginBackground.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 KiB

src/assets/global.less
+308 -50
View File
@@ -2,224 +2,482 @@
@text: #303133;
//靠右
.f-r {
.float-right {
float: right;
}
//靠左
.f-l {
.float-left {
float: left;
}
//垂直居中
.f-c {
.float-center {
display: flex;
align-items: center;
}
.float-none{
float: none;
}
.float-clear{
clear: both;
}
.position-fixed{
position: fixed;
}
//内容居中
.t-c {
.text-center {
text-align: center;
}
//内容居右
.t-r {
.text-right {
text-align: right;
}
//内容居左
.t-l {
.text-left {
text-align: left;
}
//图标:小
.i-s {
.icon-s {
width: 18px;
height: 18px;
}
//图标:小+
.i-x {
.icon-x {
width: 28px;
height: 28px;
}
//图标:中
.i-m {
.icon-m {
width: 38px;
height: 38px;
}
//图标:大
.i-l {
.icon-l {
width: 48px;
height: 48px;
}
//内间距:小
.p-s {
.padding-s {
padding: 10px;
}
.p-top-s {
.padding-top-s {
padding-top: 10px;
}
.p-left-s {
.padding-left-s {
padding-left: 10px;
}
.p-right-s {
.padding-right-s {
padding-right: 10px;
}
.p-bottom-s {
.padding-bottom-s {
padding-bottom: 10px;
}
//内间距:小+
.p-x {
.padding-x {
padding: 20px;
}
.p-top-x {
.padding-top-x {
padding-top: 20px;
}
.p-left-x {
.padding-left-x {
padding-left: 20px;
}
.p-right-x {
.padding-right-x {
padding-right: 20px;
}
.p-bottom-x {
.padding-bottom-x {
padding-bottom: 20px;
}
//内间距:中
.p-m {
.padding-m {
padding: 30px;
}
.p-top-m {
.padding-top-m {
padding-top: 30px;
}
.p-left-m {
.padding-left-m {
padding-left: 30px;
}
.p-right-m {
.padding-right-m {
padding-right: 30px;
}
.p-bottom-m {
.padding-bottom-m {
padding-bottom: 30px;
}
//内间距:大
.p-l {
.padding-l {
padding: 40px;
}
.p-top-l {
.padding-top-l {
padding-top: 40px;
}
.p-left-l {
.padding-left-l {
padding-left: 40px;
}
.p-right-l {
.padding-right-l {
padding-right: 40px;
}
.p-bottom-l {
.padding-bottom-l {
padding-bottom: 40px;
}
.top-0 {
top: 0px;
}
.right-0 {
right: 0px;
}
.left-0 {
left: 0px;
}
.top-0 {
top: 0px;
}
.bottom-0 {
bottom: 0px;
}
.margin-auto{
margin: auto;
}
//在页面上下左右居中
.page-center{
text-align: center; /*让div内部文字居中*/
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 360px;
}
//外间距:小
.m-s {
.margin-s {
margin: 10px;
}
.m-top-s {
.margin-top-s {
margin-top: 10px;
}
.m-left-s {
.margin-left-s {
margin-left: 10px;
}
.m-right-s {
.margin-right-s {
margin-right: 10px;
}
.m-bottom-s {
.margin-bottom-s {
padding-bottom: 10px;
}
//外间距:小+
.m-x {
.margin-x {
margin: 20px;
}
.m-top-x {
.margin-top-x {
margin-top: 20px;
}
.m-left-x {
.margin-left-x {
margin-left: 20px;
}
.m-right-x {
.margin-right-x {
margin-right: 20px;
}
.m-bottom-x {
.margin-bottom-x {
padding-bottom: 20px;
}
//外间距:中
.m-m {
.margin-m {
margin: 30px;
}
.m-top-m {
.margin-top-m {
margin-top: 30px;
}
.m-left-m {
.margin-left-m {
margin-left: 30px;
}
.m-right-m {
.margin-right-m {
margin-right: 30px;
}
.m-bottom-m {
.margin-bottom-m {
padding-bottom: 30px;
}
//外间距:大
.m-l {
.margin-l {
margin: 40px;
}
.m-top-l {
.margin-top-l {
margin-top: 40px;
}
.m-left-l {
.margin-left-l {
margin-left: 40px;
}
.m-right-l {
.margin-right-l {
margin-right: 40px;
}
.m-bottom-l {
.margin-bottom-l {
padding-bottom: 40px;
}
.title{
font-size: 18px;
font-weight: bold;
padding: 9px;
color: #303133;
}
.title-s{
font-size: 12px;
font-weight: bold;
padding: 6px;
color: #303133;
}
.title-x{
font-size: 14px;
font-weight: bold;
padding: 7px;
color: #303133;
}
.title-m{
font-size: 18px;
font-weight: bold;
padding: 9px;
color: #303133;
}
.title-l{
font-size: 22px;
font-weight: bold;
padding: 11px;
color: #303133;
}
.title-xl{
font-size: 48px;
font-weight: bold;
padding: 22px;
color: #303133;
}
.title-xll{
font-size: 62px;
font-weight: bold;
padding: 31px;
color: #303133;
}
.mini-title{
font-size: 18px;
padding: 9px;
color: #909399;
}
.mini-title-s{
font-size: 12px;
padding: 6px;
color: #909399;
}
.mini-title-x{
font-size: 14px;
padding: 7px;
color: #909399;
}
.mini-title-m{
font-size: 18px;
padding: 9px;
color: #909399;
}
.mini-title-l{
font-size: 22px;
padding: 11px;
color: #909399;
}
.mini-title-xl{
font-size: 48px;
padding: 22px;
color: #909399;
}
.mini-title-xll{
font-size: 62px;
padding: 31px;
color: #909399;
}
.text{
font-size: 14px;
line-height: 14px;
color: #606266;
}
.text-s{
font-size: 12px;
line-height: 12px;
color: #606266;
}
.text-x{
font-size: 13px;
line-height: 13px;
color: #606266;
}
.text-m{
font-size: 14px;
line-height: 14px;
color: #606266;
}
.text-l{
font-size: 16px;
line-height: 16px;
color: #606266;
}
.text-xl{
font-size: 18px;
line-height: 18px;
color: #606266;
}
.text-xll{
font-size: 20px;
line-height: 20px;
color: #606266;
}
//主色
.color-brand-1{
color: #409EFF;
}
.color-brand-2{
color: #67a9f8;
}
.color-brand-3{
color: #77b1f9;
}
.color-brand-4{
color: #87bbf9;
}
.color-brand-5{
color: #97c5fa;
}
.color-brand-6{
color: #a9cffb;
}
.color-brand-7{
color: #cbe2fc;
}
.color-brand-8{
color: #dcecfd;
}
.color-brand-9{
color: #edf5fe;
}
//辅助色
.color-success-1{
color: #67C23A;
}
.color-success-2{
color: #e4f2da;
}
.color-success-3{
color: #f2f8ec;
}
.color-warning-1{
color: #E6A23C;
}
.color-warning-2{
color: #f8ecda;
}
.color-warning-3{
color: #fcf6ed;
}
.color-danger-1{
color: #F56C6C;
}
.color-danger-2{
color: #f9e3e2;
}
.color-danger-3{
color: #fcf0f0;
}
.color-info-1{
color: #909399;
}
.color-info-2{
color: #e9e9eb;
}
.color-info-3{
color: #f4f4f5;
}
.height-100vh{
height: 100vh;
}
.height-100vw{
height: 100vw;
}
.width-100vh{
width: 100vh;
}
.width-100vw{
width: 100vw;
}
.width-100p{
width: 100%;
}
src/components/container/aside.vue
+9 -4
View File
@@ -10,7 +10,7 @@
<el-menu-item v-for="(navData,navDataIndex) in route" :index="navData.path" :route="{path: navData.path}" v-if="!index">
<!--目录-->
<template slot="title">
<img class="i-s m-right-s" :src="navData.navigate.icon"/>
<img class="icon-s margin-right-s" :src="navData.navigate.icon"/>
<span>{{ navData.navigate.name }}</span>
</template>
</el-menu-item>
@@ -20,7 +20,7 @@
<span>{{ index }}</span>
</template>
<el-menu-item v-for="(navData,navDataIndex) in route" :route="{path: navData.path}" :index="navData.path">
<img class="i-s m-right-s" :src="navData.navigate.icon"/>
<img class="icon-s margin-right-s" :src="navData.navigate.icon"/>
<span>{{ navData.navigate.name }}</span>
</el-menu-item>
@@ -44,9 +44,12 @@ export default {
}
},
//计算属性
computed: {},
computed: {
},
//在实例创建完成后被立即调用
created() {
},
//实例被挂载后调用
mounted() {
@@ -74,7 +77,9 @@ export default {
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
watch: {
},
}
</script>
src/components/container/header.vue
+2 -2
View File
@@ -7,11 +7,11 @@
>
<img src="http://iph.href.lu/200x100?text=LOGO&fg=666666&bg=cccccc" style="height: 38px;">
<!-- <div class="flex-grow"/>-->
<div class="" class="f-r">
<div class="" class="float-r">
<el-dropdown>
<span class="el-dropdown-link">
<el-avatar> U </el-avatar>
<span class="f-r" style="line-height: 40px">User Name</span>
<span class="float-r" style="line-height: 40px">User Name</span>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
src/components/container/index.vue
+25 -8
View File
@@ -8,18 +8,18 @@
<div class="common-layout">
<el-container>
<el-container>
<el-aside width="200px"><myaside></myaside></el-aside>
<el-aside width="200px" v-if="!navHead"><myaside></myaside></el-aside>
<el-container>
<el-header><myheader></myheader></el-header>
<el-header v-if="!navHead"><myheader></myheader></el-header>
<el-main>
<mymain></mymain>
</el-main>
</el-container>
</el-container>
<el-divider direction="vertical" class="dashed"/>
<el-aside class="mylaside">
<mylaside></mylaside>
</el-aside>
<el-divider v-if="!navHead" direction="vertical" class="dashed"/>
<!-- <el-aside class="mylaside" v-if="!navHead">-->
<!-- <mylaside></mylaside>-->
<!-- </el-aside>-->
</el-container>
</div>
</template>
@@ -45,9 +45,14 @@ export default {
return {}
},
//计算属性
computed: {},
computed: {
navHead() {
return this.$store.state.app.navHead
}
},
//在实例创建完成后被立即调用
created() {
this.$store.commit('navHead', this.$route.matched[0].components.default.navigate.hide)
},
//实例被挂载后调用
mounted() {
@@ -57,7 +62,11 @@ export default {
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
watch: {
'$route.path'() {
this.$store.commit('navHead', this.$route.matched[0].components.default.navigate.hide)
}
},
}
</script>
@@ -69,4 +78,12 @@ export default {
.dashed{
height: 100vh;
}
.el-main{
padding: 0px;
}
</style>
<style>
body{
margin: 0px;
}
</style>
src/components/im/index.vue
+3 -1
View File
@@ -1,7 +1,10 @@
<template>
<div>
<lemon-imui
width="100%"
height="90vh"
:user='this.user'
:hideDrawer="false"
ref='IMUI'
@pull-messages='handlePullMessages'
@send="handleSend"
@@ -112,5 +115,4 @@ export default {
</script>
<style scoped lang="less">
</style>
src/pages/404/index.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<div class="text-c">
<div class="title-xll">404</div>
<div class="text-m">页面错误</div>
</div>
</template>
<script>
export default {
navigate: {
index: 999,//排序(越大越置顶)
icon : 'static/svg/index.svg',
group: '',//导航分组
name : '404',//导航名称
hide : true,
notShow : true,
},
//组件
components: {},
props : [],
//数据
data() {
return {}
},
//计算属性
computed: {},
//在实例创建完成后被立即调用
created() {
},
//实例被挂载后调用
mounted() {
},
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
methods: {},
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
}
</script>
<style scoped lang="less">
</style>
src/pages/develop/index.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<script>
export default {
navigate: {
index: 999,//排序(越大越置顶)
index: 1,
icon : 'static/svg/index.svg',
group: '系统管理',//导航分组
name : '首页',//导航名称
src/pages/im/index.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<div>
<im></im>
</div>
</template>
<script>
import im from '@/components/im/index.vue'
import { mapState, mapActions } from 'vuex'
export default {
navigate: {
index: 998,//排序(越大越置顶)
icon : 'static/svg/index.svg',
group: '',//导航分组
name : '客服对话',//导航名称
hide:true,
},
//组件
components: {
im
},
props : [],
//数据
data() {
return {}
},
//计算属性
computed: {
},
//在实例创建完成后被立即调用
created() {
},
//实例被挂载后调用
mounted() {
},
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
methods: {
},
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
}
</script>
<style scoped lang="less">
</style>
src/pages/index/index.vue
-10
View File
@@ -1,14 +1,9 @@
<template>
<div>
{{ count }}
<im></im>
</div>
</template>
<script>
import im from '@/components/im/index.vue'
import { mapState, mapActions } from 'vuex'
export default {
navigate: {
index: 999,//排序(越大越置顶)
@@ -18,7 +13,6 @@ export default {
},
//组件
components: {
im
},
props : [],
//数据
@@ -27,9 +21,6 @@ export default {
},
//计算属性
computed: {
...mapState({
count: state => state.app.count
})
},
//在实例创建完成后被立即调用
created() {
@@ -39,7 +30,6 @@ export default {
},
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
methods: {
...mapActions(['add', 'subtract']),
},
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
src/pages/login/index.vue
+85
View File
@@ -0,0 +1,85 @@
<template>
<div class="text-center width-100vw">
<img src="/loginBackground.png" class="login-background">
<div class="login-box page-center" style="width: 360px;height: 360px;">
<el-card class="box-card width-100p margin-right-l">
<div class="title-l text-center">
账号登录
</div>
<el-form ref="form" :model="form" label-position="left">
<el-form-item label="账号">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item class="text-center">
<el-button type="primary" @click="login">立即登录</el-button>
<el-button @click="registered">立即注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
export default {
navigate: {
hide : true,
notShow: true,
},
//组件
components: {},
props : [],
//数据
data() {
return {
type: 'accountPassword',
form: {
account : '',
password: '',
},
}
},
//计算属性
computed: {},
//在实例创建完成后被立即调用
created() {
},
//实例被挂载后调用
mounted() {
},
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
methods: {
async login() {
const res = await this.$api.post('/permission/api/login', {
type: this.type,
data: this.form,
})
console.log('res',res);
},
async registered() {
const res = await this.$api.post('/permission/api/registered', {
type: this.type,
data: this.form,
})
console.log('res',res);
}
},
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
}
</script>
<style scoped lang="less">
.login-background {
width: 100vh;
height: 100vh;
}
.login-box {
}
</style>
src/plugin/axios/index.js
+18
View File
@@ -0,0 +1,18 @@
import axios from 'axios'
import request from './request.js'
import requestError from './requestError.js'
import response from './response.js'
import responseError from './responseError.js'
export default (Vue) => {
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
axios.defaults.headers.common['Authorization'] = "";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 60 * 1000;
// 添加请求拦截器
axios.interceptors.request.use(request, requestError);
// 添加响应拦截器
axios.interceptors.response.use(response, responseError);
Vue.prototype.$api = axios
}
src/plugin/axios/request.js
+5
View File
@@ -0,0 +1,5 @@
// 添加请求拦截器
export default (config) => {
// 在发送请求之前做些什么
return config;
}
src/plugin/axios/requestError.js
+5
View File
@@ -0,0 +1,5 @@
// 添加请求错误拦截器
export default (error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
src/plugin/axios/response.js
+5
View File
@@ -0,0 +1,5 @@
// 添加响应拦截器
export default (response) => {
// 对响应数据做点什么
return response;
}
src/plugin/axios/responseError.js
+4
View File
@@ -0,0 +1,4 @@
export default (error) => {
// 对响应错误做点什么
return Promise.reject(error);
}
src/plugin/vuex/store.js
+18 -14
View File
@@ -1,28 +1,32 @@
import Vuex from 'vuex'
const state = {
count: 1
count : 1,
navHead: false,//导航栏是否隐藏
}
const mutations = {
SET_ADD_COUNT : (state) => {
state.count++
// SET_ADD_COUNT : (state) => {
// state.count++
// },
// SET_SUBTRACT_COUNT: (state) => {
// state.count--
// },
//设置navHead
navHead(state, data) {
state.navHead = data
},
SET_SUBTRACT_COUNT: (state) => {
state.count--
}
}
const actions = {
// 加
add({commit}) {
commit('SET_ADD_COUNT')
},
// 减
subtract({commit}) {
commit('SET_SUBTRACT_COUNT')
}
// add({commit}) {
// commit('SET_ADD_COUNT')
// },
// // 减
// subtract({commit}) {
// commit('SET_SUBTRACT_COUNT')
// }
}
const store = new Vuex.Store({