优化架构,新增路由

.env

@@ -0,0 +1 @@
+VUE_APP_BASE_URL=http://127.0.0.1:3210

package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode serve",
-    "build": "vue-cli-service build"
+    "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",

src/assets/global.less

@@ -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

@@ -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

@@ -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

@@ -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-divider v-if="!navHead" direction="vertical" class="dashed"/>
-      <el-aside class="mylaside">
+<!--      <el-aside class="mylaside" v-if="!navHead">-->
-        <mylaside></mylaside>
+<!--        <mylaside></mylaside>-->
-      </el-aside>
+<!--      </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

@@ -1,7 +1,10 @@
 <template>
   <div>
     <lemon-imui
+        width="100%"
+        height="90vh"
         :user='this.user'
+        :hideDrawer="false"
         ref='IMUI'
         @pull-messages='handlePullMessages'
         @send="handleSend"
@@ -84,13 +87,13 @@ export default {
       console.log('open连接成功', data)
       this.$socket.emit('joinRoom', {
         "room_name": '123',
-        "uid": '123',
+        "uid"      : '123',
       });
     },
-    error(data){
+    error(data) {
       console.log('错误', data)
     },
-    success(data){
+    success(data) {
       console.log('成功', data)
     },
     connect() {
@@ -112,5 +115,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-
 </style>

src/pages/404/index.vue

@@ -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

@@ -20,7 +20,7 @@
 <script>
 export default {
   navigate: {
-    index: 999,//排序(越大越置顶)
+    index: 1,
     icon : 'static/svg/index.svg',
     group: '系统管理',//导航分组
     name : '首页',//导航名称

src/pages/im/index.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,5 @@
+// 添加请求拦截器
+export default (config) => {
+	// 在发送请求之前做些什么
+	return config;
+}

src/plugin/axios/requestError.js

@@ -0,0 +1,5 @@
+// 添加请求错误拦截器
+export default (error) => {
+	// 对请求错误做些什么
+	return Promise.reject(error);
+}

src/plugin/axios/response.js

@@ -0,0 +1,5 @@
+// 添加响应拦截器
+export default (response) => {
+	// 对响应数据做点什么
+	return response;
+}

src/plugin/axios/responseError.js

@@ -0,0 +1,4 @@
+export default (error) => {
+	// 对响应错误做点什么
+	return Promise.reject(error);
+}

src/plugin/vuex/store.js

@@ -1,28 +1,32 @@
 import Vuex from 'vuex'
 
 const state = {
-	count: 1
+	count  : 1,
+	navHead: false,//导航栏是否隐藏
 }
 
 const mutations = {
-	
+	// SET_ADD_COUNT     : (state) => {
-	SET_ADD_COUNT     : (state) => {
+	// 	state.count++
-		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}) {
+	// add({commit}) {
-		commit('SET_ADD_COUNT')
+	// 	commit('SET_ADD_COUNT')
-	},
+	// },
-	// 减
+	// // 减
-	subtract({commit}) {
+	// subtract({commit}) {
-		commit('SET_SUBTRACT_COUNT')
+	// 	commit('SET_SUBTRACT_COUNT')
-	}
+	// }
 	
 }
 const store = new Vuex.Store({