更新

.env.development

+# just a flag
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+VUE_APP_URL = 'http://localhost:9528'
+
+# 掌权登录跳转url
+
+VUE_APP_ZQLOGIN_URL = 'http://zq.zwwlkj03.top'

.env.production

+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/api/'
+
+# 掌权登录跳转url
+VUE_APP_ZQLOGIN_URL = 'http://zq.wozhangwan.com'
+
+# build src
+VUE_APP_BUILD_DIR = 'dist'

babel.config.js

 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@babel/preset-env'
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
   ]
-}
+};
\ No newline at end of file

package.json

@@ -8,7 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.9.0",
+    "babel-plugin-component": "^1.1.1",
+    "bi-eleme": "^2.4.4",
+    "bi-element-ui": "^1.5.2",
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "moment": "^2.29.1",
+    "sass": "^1.89.0",
+    "sass-loader": "^16.0.5",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
     <router-view/>
   </div>
 </template>

src/api/user.js

+
+import request from '@/utils/request'
+
+export function getAuthUser(data) {
+    return request({
+        url: '/api/agent/getAuthUser',
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+// import '@/styles/index.scss' // global css
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-
+import {getAuthUser} from '@/api/user'
 Vue.use(VueRouter)
-
+function Authorize() {
+  // 先获取企微配置信息
+      let originUrl = location.href; originUrl;
+      let redirectUrl = originUrl.split('?')[0];
+      let returnUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wweaefe716636df3d1&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
+      window.location.href = returnUrl;
+}
+// 通过oAuth2授权获取当前用户userId
+function getWxUserInfo(to, from, next, authCode,corp_id) {
+  getAuthUser({code:authCode,corp_id:'wweaefe716636df3d1'}).then((res) => {
+    let { code, data, message } = res || {};
+    if (code === 200) {
+      let { userId } = data || {};
+      if (userId) {
+        localStorage.setItem('userId', userId);
+        next();
+      } else {
+        Authorize(to)
+      }
+    } else {
+      console.log(message);
+      // PC端侧边栏tab页面切换后再切回来, 页面地址还是上次重定向后的带code的,此时code已经消费过一次,再调接口获取用户信息会失败, 所以加上重新授权的逻辑
+      Authorize(to)
+    }
+  }).catch(() => {
+    Authorize(to)
+  })
+}
 const routes = [
   {
     path: '/',
@@ -13,17 +40,33 @@ const routes = [
   {
     path: '/about',
     name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    component: () => import('../views/AboutView.vue')
   }
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })
+router.beforeEach((to, from, next) => {
+  // 判断是否是微信浏览器打开
+  let ua = navigator.userAgent.toLowerCase();
+  let isWeixin = ua.indexOf('micromessenger') != -1;
+  if (!isWeixin) {
+    next()
+    return
+  }
+  // 企微环境获取当前用户userId和外部客户externalUserId
+  let code = to.query.code || '';
+  let corp_id = to.query.corp_id || '';
+  if (code) {
+    // 有code说明是授权过的,重定向地址, 调接口获取当前用户信息
+    getWxUserInfo(to, from, next, code,corp_id);
+  } else {
+    // 获取授权
+    Authorize(to);
+  }
+})
 
 export default router

src/styles/element-ui.scss

+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type='file'] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block;
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-radio-button:focus {
+  box-shadow: none !important;
+}
+
+.el-drawer__header > span,
+.el-tabs__item {
+  outline: none;
+}
+.el-drawer__body {
+  position: relative;
+}
+
+.error-message {
+  z-index: 5000 !important;
+}
+
+.el-drawer__header>span,.el-tabs__item{
+  outline: none;
+}
+
+.el-icon-circle-close {
+  color: #fff;
+}
\ No newline at end of file

src/styles/element-variables.scss

+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #00BF8A;
+// $--color-success: #13ce66;
+// $--color-warning: #ffba00;
+// $--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: '~bi-eleme/lib/theme-chalk/fonts';
+
+@import '~bi-eleme/packages/theme-chalk/src/index';
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
\ No newline at end of file

src/styles/global.scss

+
+// 全局函数和变量
+$color: #00BF8A; // 全局颜色
+@function vw($px) {
+  @return ($px / 1920) * 100vw;
+}
+@function vh($px) {
+  @return ($px / 1080) * 100vw;
+}
+.flex_x {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+.flex_y {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+}
+
+.flex_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-content {
+  .el-select--small {
+      .el-tag:first-child {
+          max-width: 64% !important;
+      }
+  }
+
+}
+
+.BiInput_single_clear {
+  .el-input__suffix {
+      display: none !important;
+  }
+}
+
+.display_none_dialog {
+  .el-drawer__body::-webkit-scrollbar {
+      /*滚动条整体样式*/
+      width: 0;
+      background: #fff;
+      border-radius: 3px;
+  }
+
+  .el-drawer__body::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      width: 0;
+      border-radius: 3px;
+      background: rgba(221, 221, 221, 1);
+  }
+}
+
+.radio {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.el-input__count {
+  vertical-align: top;
+}
+
+.el-range-separator {
+  margin-right: 10px !important;
+}
+:root {
+  --primary-color: #2563eb;
+  --primary-hover: #1d4ed8;
+  --bg-color: #f8fafc;
+  --chat-bg: #ffffff;
+  --user-msg-bg: #2563eb;
+  --ai-msg-bg: #f1f5f9;
+  --border-color: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+}
\ No newline at end of file

src/styles/mixin.scss

+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/styles/reset.scss

+.success {
+    background-color: #67c23a;
+  }
+  // .info {
+  //   background-color: #909399;
+  // }
+  .primary {
+    background-color: #409eff;
+  }
+
+  .danger {
+    background-color: #f56c6c;
+  }
+
+  .warning {
+    background-color: #e6a23c;
+  }
+
+  .content-outer {
+    .bi-tabs-box {
+      background-color: #fff;
+      margin-bottom: 10px;
+      overflow-y: hidden;
+
+      .el-tabs__nav-wrap.is-top::after {
+        content: none;
+      }
+
+      .el-tabs__active-bar.is-top {
+        top: 0;
+      }
+
+      .el-tabs__header.is-top {
+        margin-bottom: 0;
+      }
+
+      .el-tabs__content {
+        padding: 0;
+        display: none;
+        overflow: initial;
+      }
+
+      .el-tabs__item.is-top {
+        min-width: 100px;
+        text-align: center;
+      }
+
+      // .el-tabs--border-card {
+      //   border: none;
+      //   box-shadow: none;
+
+      //   .el-tabs__nav {
+      //     display: flex;
+      //   }
+
+      //   & > .el-tabs__header {
+      //     border-bottom: none;
+
+      //     .el-tabs__item {
+      //       margin-top: 0;
+      //       border: none;
+      //       display: block;
+      //     }
+      //   }
+      // }
+    }
+    & > .content-head.container {
+      padding-bottom: 0 !important;
+      background-color: white;
+    }
+
+    .content-table {
+      margin-top: 10px;
+      background-color: white;
+      padding: 20px;
+
+      .action-box {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+
+      .table-table {
+        padding-bottom: 20px;
+      }
+
+      .pagination-container {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .drawer-container {
+      // padding: 20px;
+    }
+  }
+
+  .bi-column-container {
+    display: flex;
+    justify-content: space-between;
+
+    .column-container {
+      margin-left: 20px;
+      width: 230px;
+      flex: 0 0 230px;
+    }
+  }
+
+  .colorStatus {
+    display: inline-block;
+    > p {
+      display: inline;
+    }
+
+    .all {
+      padding: 2px 8px;
+      height: 20px;
+      line-height: 16px;
+      border-radius: 4px;
+      font-size: 12px;
+
+      font-weight: 400;
+      color: #3491fa;
+      border: 1px solid #c3e7fe;
+      background: #e8f7ff;
+    }
+
+    // 成功
+    .success {
+      padding: 2px 8px;
+      height: 20px;
+      line-height: 16px;
+      background: #e1fff0;
+      border-radius: 4px;
+      font-size: 12px;
+
+      font-weight: 400;
+      color: #00bf8a;
+    }
+
+    .indeter {
+      padding: 2px 8px;
+      height: 20px;
+      line-height: 16px;
+      background: #fffae0;
+      border-radius: 4px;
+      font-size: 12px;
+
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #ffe4ba;
+      color: #ff7d00;
+    }
+
+    .fail {
+      padding: 2px 8px;
+      height: 20px;
+      line-height: 16px;
+      background: #ffece8;
+      border-radius: 4px;
+      font-size: 12px;
+
+      font-weight: 400;
+      color: #f53f3f;
+      border: 1px solid #fdcdc5;
+    }
+
+    .normal {
+      padding: 2px 8px;
+      height: 20px;
+      line-height: 16px;
+      background: #f4f4f4;
+      border-radius: 4px;
+      font-size: 12px;
+
+      font-weight: 400;
+      color: #86909c;
+    }
+
+    .dianFail {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #f45454;
+      border-radius: 5px;
+    }
+    .dianLineup {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #c9cdd4;
+      border-radius: 5px;
+    }
+
+    .dianLoading {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #f45454;
+      border-radius: 5px;
+    }
+
+    .dianSuccess {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #00bf8a;
+      border-radius: 5px;
+    }
+
+    .dianWait {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #ff9d02;
+      border-radius: 5px;
+    }
+
+    .dianNormal {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #c9cdd4;
+      border-radius: 5px;
+    }
+    .dianOk {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #0fc6c2;
+      border-radius: 5px;
+    }
+    .dianKou {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #3491fa;
+      border-radius: 5px;
+    }
+  }
+
+  .el-dialog {
+    .dialog-footer {
+      position: relative;
+    }
+  }
+  // 弹窗的按钮位置
+  .dialog-footer {
+    width: calc(100%);
+    position: absolute;
+    bottom: 0px;
+    right: 0;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    justify-content: flex-end;
+    overflow: hidden;
+    background: #fff;
+    z-index: 10;
+    .btn {
+      width: 84px;
+      height: 32px;
+    }
+  }
+  .tableheader-popper-editdialog {
+    .dialog-footer {
+      padding-top: 0;
+      padding-right: 0;
+    }
+  }
+  .el-drawer__header {
+    padding: 0 20px !important;
+    line-height: 58px;
+    height: 58px;
+    // padding-bottom: 0;
+    margin-bottom: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+    // border: 1px rgba(0, 0, 0, 0.06) solid;
+    // box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  }
+
+  // 带background的title
+  .baseInfo {
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+    border: 1px solid #f1f5fd;
+    background: #fff;
+    .content{
+      padding-top: 0!important;
+    }
+    .title {
+      width: 100%;
+      height: 40px;
+      background: #f7f8fa;
+      font-size: 14px;
+      font-weight: 500;
+      color: #323335;
+      padding-left: 10px;
+      line-height: 40px;
+      margin-bottom: 20px;
+    }
+  }
+  .drawer-container-title{
+    width: 100%;
+    height: auto;
+    font-weight: 500;
+    font-size: 16px;
+    color: #323335;
+    line-height: 22px;
+    text-align: left;
+    border-left: 3px solid #00BF8A;
+    text-indent: 10px;
+    font-weight: 500;
+    line-height: 16px;
+    margin-bottom: 20px;
+  }
+
+  // 弹窗里面的确定 取消按钮暂时固定选择
+  .layerBtns {
+    display: flex;
+    justify-content: flex-end;
+
+    .btn {
+      width: auto;
+      height: 32px;
+    }
+
+    .el-button {
+      font-weight: 500 !important;
+    }
+  }
+
+  .el-image__inner {
+    border-radius: 5px;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  //
+  .infoText {
+    color: #86909c;
+    font-size: 12px;
+  }
+
+  // .el-drawer__body{
+  //   position: relative;
+  // }
+
+  .el-dialog__header {
+    min-height: 40px;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    // border:1px dashed #00BF8A !important;
+  }
+
+  // form 里面label换行的时候的样式
+  .lineHeight {
+    .el-form-item__label {
+      line-height: 20px !important;
+    }
+  }
+
+  // 应用icon样式
+
+  .miniappIcon {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-right: 10px;
+  }
+
+  .miniappIconText {
+    position: relative;
+    top: -10px;
+  }
+
+  .textInfo {
+    color: rgb(153, 153, 153);
+    font-size: 12px;
+  }
+
+  .textHidden {
+    word-break: break-all;
+  }
+
+  .redText {
+    font-size: 14px;
+
+    font-weight: 400;
+    color: #ff4d4f;
+  }
+
+  //注意样式
+  .carefulText {
+    width: 100%;
+    height: 40px;
+    background: #fff7e8;
+    border-radius: 4px;
+    font-size: 14px;
+
+    font-weight: 400;
+    color: #323335;
+    padding-left: 10px;
+    margin-top: 0 !important;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      color: #ff7d00 !important;
+      font-size: 14px;
+      margin: 0 10px;
+    }
+
+    i {
+      color: #ff7d00 !important;
+      font-size: 14px;
+    }
+  }
+
+  .search-form {
+    .el-select__tags {
+      max-width: 200px !important;
+    }
+  }
+
+  .el-form-item__label {
+    font-weight: 600;
+  }
+
+  .el-table__header .cell {
+    color: #323335;
+    font-weight: 500;
+  }
+
+  .el-tooltip {
+    max-width: 200px;
+  }
+
+  .tooltipWidth {
+    max-width: 250px;
+    line-height: 18px !important;
+  }
+
+  .el-tag {
+    margin-right: 5px !important;
+  }
+
+  .el-date-range-picker__header {
+    border: none !important;
+  }
+
+  .el-tabs__header {
+    margin-bottom: 15px;
+  }
+
+  .el-icon-question {
+    color: #86909c;
+  }
+  .id_color {
+    font-size: 14px;
+    color: #86909c;
+  }

src/styles/sidebar.scss

+#app {
+
+  .main-container {
+    min-height: 100%;
+    padding-top: 0px !important;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    box-shadow: 0 1px 4px #00152914;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 90px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+      width: 22px;
+      height: 22px;
+      background-size: contain;
+      color: #8893aa;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+    .is-active > .el-submenu__title,
+    .is-active > .el-submenu__title svg,
+    .is-active.submenu-title-noDropdown,
+    .is-active.submenu-title-noDropdown svg {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      // background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 15px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 15px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}
+
+.el-menu-item{
+  position: relative;
+  &::after{
+    content:' ';
+    position: absolute;
+    width: 3px;
+    height: 0;
+    right: 0;
+    top: 0;
+    transition: .3s;
+  }
+
+  &.is-active::after{
+    height: 100%
+  }
+}
+
+.el-submenu .el-menu-item{
+  padding-left: 60px !important;
+}
+
+.el-submenu__title{
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  color: #323335 !important;
+}
+
+.submenu-title-noDropdown:not(.el-submenu .submenu-title-noDropdown){
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  color: #323335 !important;
+}
\ No newline at end of file

src/styles/transition.scss

+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// rotage-transform
+
+.rotage-transform-leave-active,
+.rotage-transform-enter-active {
+  transition: all 1s;
+}
+
+.rotage-transform-enter {
+  transform: rotate(180deg);
+}
+
+.rotage-transform-leave-to {
+  transform:  rotate(0deg);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/styles/ui-variables.scss

+$themeColor: #00BF8A;
+
+$sidebarWidthOpen: 190px;
+$sidebarWidthClosed: 56px;
+$navbarHeight: 50px;
+
+:export {
+  themeColor: $themeColor;
+  sidebarWidthOpen: $sidebarWidthOpen;
+  sidebarWidthClosed: $sidebarWidthClosed;
+  navbarHeight: $navbarHeight;
+}

src/styles/ui.scss

+// @import './ui-variables.scss';
+@import './ui-variables.scss';
+/* bi-ui-style */
+
+// $appmainWidth
+/*
+ *Font
+ *默认为font-size: 14px;line-height: 20px;
+*/
+body {
+  font-size: 14px;
+  line-height: 20px;
+  color: #323335;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+#app {
+  height: 100%;
+  background-color: #e5e5e5;
+
+  .navbar {
+    height: $navbarHeight;
+
+    .navbar-box {
+      height: $navbarHeight;
+      line-height: $navbarHeight;
+      .app-breadcrumb {
+        padding: 10px 0;
+      }
+    }
+  }
+
+  .app-main {
+    min-height: calc(100vh - #{$navbarHeight});
+  }
+}
+
+.app-main {
+  .text {
+    &-12 {
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    &-14 {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &-16 {
+      font-size: 16px;
+      line-height: 22px;
+    }
+
+    &-24 {
+      font-size: 16px;
+      line-height: 34px;
+    }
+  }
+
+  .container {
+    padding: 20px;
+    background: #fff;
+    border-radius: 4px;
+    & + .container {
+      margin-top: 10px;
+    }
+  }
+}
+
+.search-form {
+  display: flex;
+  flex-wrap: wrap;
+
+  & + * {
+    margin-top: 15px !important;
+  }
+
+  .search-item {
+    min-width: 330px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    margin-bottom: 0;
+    margin-right: 0;
+    margin-left: 0;
+    margin-top: 0;
+    display: flex;
+    flex: 0 0 auto;
+
+    .item-label,
+    .select-label {
+      flex-wrap: 0;
+      flex-shrink: 0;
+      padding-right: 10px;
+      margin-bottom: 0;
+      margin-right: 0;
+      margin-left: 0;
+      margin-top: 0;
+      text-align: right;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      max-height: 32px;
+      overflow: hidden;
+    }
+    .select-value {
+      .el-input__inner {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    .item-label {
+      width: 80px;
+    }
+
+    .select-label {
+      width: 100px;
+      margin-right: -1px;
+      text-align: right;
+      padding-right: 0;
+
+      .is-focus .el-input__inner {
+        z-index: 1;
+      }
+
+      .el-input__inner {
+        position: relative;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        &:focus {
+          z-index: 1;
+        }
+      }
+    }
+
+    .item-content,
+    .select-content {
+      flex-grow: 1;
+
+      & > * {
+        width: 100%;
+      }
+    }
+    .select-content {
+      height: 32px;
+
+      .input-number-range {
+        position: relative;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+
+        &.is-focus {
+          z-index: 1;
+        }
+      }
+
+      &:not(.el-select) {
+        .is-focus .el-input__inner {
+          z-index: 1;
+        }
+
+        .el-input__inner {
+          position: relative;
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+          transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+          &:focus {
+            z-index: 1;
+          }
+        }
+      }
+
+      &.el-select {
+        .el-input .el-input__inner {
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        }
+      }
+    }
+  }
+}
+
+.hideSidebar {
+  .search-form {
+    @media screen and (max-width: 1103px) {
+      .search-item {
+        width: 50%;
+        // &:nth-last-child(3) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1104px) {
+      .search-item {
+        width: 33.3%;
+        // &:nth-last-child(4) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1434px) {
+      .search-item {
+        width: 25%;
+        // &:nth-last-child(5) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1764px) {
+      .search-item {
+        width: 20%;
+        // &:nth-last-child(6) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+  }
+}
+
+.openSidebar {
+  .search-form {
+    @media screen and (max-width: 910px) {
+      .search-item {
+        width: 50%;
+        // &:nth-last-child(3) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1240px) {
+      .search-item {
+        width: 33.3%;
+        // &:nth-last-child(4) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1570px) {
+      .search-item {
+        width: 25%;
+        // &:nth-last-child(5) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+
+    @media screen and (min-width: 1900px) {
+      .search-item {
+        width: 20%;
+        // &:nth-last-child(6) ~ .search-item {
+        //   padding-bottom: 0;
+        // }
+      }
+    }
+  }
+}
+
+/* element-ui */
+.el-select,
+.el-cascader {
+  .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input__suffix {
+    z-index: 1;
+    width: 20px;
+  }
+
+  .el-cascader__tags {
+    width: 210px;
+    flex-wrap: nowrap;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-cascader__search-input {
+    min-width: 10px;
+    margin-left: 10px;
+  }
+}
+
+.el-date-editor {
+  .el-range__close-icon {
+    width: 15px;
+  }
+}
+
+.el-button + .el-button {
+  margin-left: 10px;
+}
+
+// .el-dialog__wrapper {
+//   display: flex;
+//   align-items: center;
+//   .el-dialog {
+//     min-width: 480px;
+//     margin-top: 50px;
+//     margin-bottom: 50px;
+//     max-height: calc(100vh - 100px);
+
+//     .el-dialog__header {
+//       padding: 16px 20px;
+//       line-height: 20px;
+//       font-size: 16px;
+//       color: rgba(0, 0, 0, 0.85);
+//       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+//     }
+//   }
+// }
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  // color: #606266;
+}
+
+#app .sidebar-container .el-menu .el-menu-item .svg-icon + span {
+  font-weight: 500;
+  font-size: 16px;
+  // color: #606266;
+}
+
+#app .sidebar-container .el-menu .el-submenu__title .svg-icon + span {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+#app .sidebar-container .svg-icon {
+  color: #8893aa;
+}
+
+#app .is-active .svg-icon {
+  color: #00bf8a;
+}
+
+#app .el-table thead th.el-table__cell .cell {
+  display: inline-block;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  // background-color: #fff9f5;
+  opacity: 1;
+}
+
+.el-picker-panel.el-date-range-picker.el-popper.has-sidebar.has-time.my-popper {
+  z-index: 200000 !important;
+}
+
+.input-number-right-aligned .el-input-number__increase,
+.input-number-right-aligned .el-input-number__decrease {
+  display: inline-block;
+  width: auto;
+}
+
+.input-number-right-aligned .el-input {
+  text-align: left;
+}
+
+.input-number-right-aligned .el-input-number__inner {
+  text-align: left;
+}
+
+// .rowFlex .el-input-number .el-input__inner {
+//   text-align: left !important;
+// }

src/styles/uistyle.scss

+// 框架样式更改 重新规划
+
+#app {
+  .app-main {
+    background: #eeeff5;
+    padding: 0 15px;
+
+    .dashboard {
+      width: calc(100% - 30px);
+    }
+
+    .content-head.container {
+      border-radius: 4px;
+    }
+
+    // 表格样式
+    .content-table {
+      border-radius: 4px;
+      margin-top: 15px;
+    }
+
+    .el-table {
+
+      // 表格里面的选择框
+      .el-table-column--selection .cell {
+        padding: 10px 16px !important;
+      }
+
+      .el-table__fixed-right {
+        background: #fff;
+      }
+    }
+  }
+
+  // 面包屑
+  .app-breadcrumb.el-breadcrumb {
+    padding: 14px 0;
+
+    .no-redirect {
+      font-size: 14px;
+      color: #323335;
+      font-weight: 700;
+    }
+  }
+
+  .content-head.container {
+    border-radius: 4px;
+  }
+
+  // 表格样式
+  .content-table {
+    border-radius: 4px;
+    margin-top: 15px;
+  }
+
+  .el-table {
+
+    // 表格里面的选择框
+    .el-table-column--selection .cell {
+      padding: 10px 16px !important;
+    }
+
+    .el-table__fixed-right {
+      background: #fff;
+    }
+  }
+}
+
+// 选择应用
+.selectRouter {
+  .el-input__suffix {
+    height: 32px;
+  }
+}
+
+.el-tooltip__popper {
+  max-width: 300px;
+}
+
+// .app-main{
+//     // 图表的icon颜色
+//     i,.icon{
+//         color: #86909C;
+//     }
+// }
+.tableContent {
+  color: #323335 !important;
+  font-weight: 400 !important;
+
+  .tableHeader {
+    background: #f2f3f5;
+  }
+}
+
+.goRight {
+  width: 28px;
+  height: 27px;
+  background: #00bf8a;
+  border-radius: 14px;
+  color: #ffffff;
+  font-size: 16px;
+  margin: 0 20px;
+  cursor: pointer;
+  border-radius: 14px;
+
+  i {
+    color: #ffffff;
+    font-size: 16px;
+    margin: 0 20px;
+    cursor: pointer;
+    border-radius: 14px;
+
+    i {
+      color: #ffffff;
+    }
+  }
+}
+
+// 暂无数据
+.noContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: 42px;
+    color: #86909c;
+  }
+
+  .text {
+    font-size: 14px;
+
+    font-weight: 400;
+    color: #c9cdd4;
+    margin-top: 5px;
+  }
+}
+
+// 修改 tabs 全局样式
+.el-tabs {
+  .el-tabs__header {
+    height: 50px;
+    border-radius: 4px;
+  }
+
+  .el-tabs__nav-scroll {
+    height: 50px;
+  }
+
+  .el-tabs__item {
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #4e5969;
+  }
+  .el-tabs__item.is-active{
+    color: #00bf8a;
+  }
+}
+
+// 表格样式
+.content-outer {
+  .table-table {
+    padding-bottom: 20px !important;
+  }
+}
+
+.imageIcon {
+  position: relative;
+}
+
+// 统一标签样式
+.checkTagsView {
+  width: 100%;
+
+  .tagsItem {
+    margin-right: 5px;
+    margin-bottom: 5px;
+  }
+}
+// toast 样式
+.el-message{
+  z-index: 999999 !important;
+}
+
+// form 表单类型
+.el-form-item .el-form-item, .el-form-item .el-form-item.el-form-item--small{
+  margin-bottom: 16px;
+}
+
+// 描述文字样式
+.infoTextColor{
+  color: #86909c;
+}
+
+.infoSpan {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  max-width: 250px;
+  p {
+    font-size: 12px;
+    max-width: 100%;
+    line-height: 20px;
+    color: #86909c;
+  }
+  span {
+    color: #ffa81d;
+  }
+}
+
+// tab 样式  .tabs__content 默认 overflow 为 hidden  为 hidden 的时候 表格表头吸顶功能异常 需要 overflow 设置为 initial
+.el-tabs__content {
+  overflow: initial;
+}
\ No newline at end of file

src/styles/variables.scss

+// base color
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+// sidebar
+$menuText: #606266;
+$menuActiveText: #00BF8A;
+$subMenuActiveText: #00BF8A; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg: #ffffff;
+$menuHover: #E1FFF0;
+
+$subMenuBg: #ffffff;
+$subMenuHover: #E1FFF0;
+
+$sideBarWidth: 190px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}
\ No newline at end of file

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'authorization'
+const time = new Date(new Date().getTime() + 10 * 12 * 30 * 24 * 60 * 60 * 1000)
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token, { expires: time })
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/request.js

+import axios from 'axios'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store/index'
+import { getToken } from '@/utils/auth'
+// 常量定义
+const CancelToken = axios.CancelToken
+const STATUS_CODE_SUCCESS = 1
+const TOKEN_ERROR_CODES = [50008, 50012, 50014] // Illegal token, Other clients logged in, Token expired
+
+
+/**
+ * 获取企业ID
+ * @param {Object} config - 请求配置
+ * @returns {String} - 企业ID
+ */
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 100000 // request timeout
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 每次请求的时候检查是否重复请求
+    // cancelPending(config)
+
+    // 设置取消请求的token
+    config.cancelToken = new CancelToken((c) => {
+      const url = config.data
+        ? config.url + JSON.stringify(config.data)
+        : config.url
+
+      store.state.user.axiosCancelList.push({
+        url,
+        cancel: c
+      })
+    })
+
+    // 设置认证token
+    if (store.getters.token) {
+      config.headers['authToken'] = getToken()
+    }
+    return config
+  },
+  (error) => {
+    // do something with request error
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  (response) => {
+    const res = response.data
+    // cancelPending(response.config)
+
+    // 如果状态码不是成功，则判断为错误
+    if (res.status_code !== STATUS_CODE_SUCCESS) {
+      // if (res.status_code === -1) {
+      //   return res
+      // }
+      Message({
+        message: res.msg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 处理token相关错误: 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (TOKEN_ERROR_CODES.includes(res.status_code)) {
+        // to re-login
+        MessageBox.confirm('登录过期,请重新登录', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+            console.log('重新登录')
+        })
+      }
+
+      return Promise.reject(new Error(res.msg || 'Error'))
+    }
+
+    return res
+  },
+  (error) => {
+    // 处理其他错误
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/AboutView.vue

 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>about</h1>
   </div>
 </template>

src/views/HomeView.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>home</h1>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
   name: 'HomeView',
   components: {
-    HelloWorld
   }
 }
 </script>

vue.config.js

 const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
 module.exports = defineConfig({
-  transpileDependencies: true
+  publicPath: './',
+  assetsDir: 'static',
+  transpileDependencies: true,
+  outputDir: 'company_app',
+  devServer: {
+    open: false,
+    client: {
+      overlay: {
+        warnings: false,
+        errors: true
+      }
+    },
+    // 服务器
+    proxy: {
+      '/dev-api': {
+        target: 'https://companywx.zwwlkj03.top/api',
+        // target: 'https:://companywx.zwnet.cn',
+        changeOrigin: true, // 是否改变域名
+        ws: true,
+        pathRewrite: {
+          // 路径重写
+          '/dev-api': '' // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
+        }
+      }
+    }
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        javascriptEnabled: true
+      },
+      sass: {
+        sassOptions: {
+          outputStyle: 'expanded'
+        },
+        additionalData: `
+          @import "@/styles/global.scss";
+        `
+      }
+    }
+  }
 })