更新

.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/index.scss

+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./ui.scss";
+@import 'uistyle.scss';
+@import './reset.scss';
+
+// @tailwind base; // 重设的 css 代码
+// @tailwind components;
+@tailwind utilities;
+body {
+  height: 100%;
+  -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;
+  font-size: 14px;
+}
+
+label {
+  font-weight: 400;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #e5e5e5;
+}
+
+#app {
+  height: 100%;
+  background-color: #e5e5e5;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+p {
+  margin: 0;
+}
+
+// main-container global css
+.app-container {
+  padding: 20px;
+  background: #fff;
+  border-radius: 2px;
+
+  // background-clip: content-box
+  +.app-container {
+    margin-top: 20px;
+  }
+}
+
+.rowFlex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+
+.columnFlex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.allCenter {
+  -webkit-box-pack: center;
+  -moz-justify-content: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -moz-align-items: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  align-items: center;
+}
+
+.rowCenter {
+  -webkit-box-pack: center;
+  -moz-justify-content: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  justify-content: center;
+}
+
+.columnCenter {
+  -webkit-box-align: center;
+  -moz-align-items: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  align-items: center;
+}
+
+.rowFirst {
+  -webkit-box-pack: start;
+  -moz-justify-content: flex-start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-box-pack: start;
+  justify-content: flex-start;
+}
+
+.rowEnd {
+  -webkit-box-pack: end;
+  -moz-justify-content: flex-end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  -moz-box-pack: end;
+  justify-content: flex-end;
+}
+
+.spaceBetween {
+  -webkit-box-pack: justify;
+  -moz-justify-content: space-between;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  -moz-box-pack: justify;
+  justify-content: space-between;
+}
+
+.columnFirst {
+  -webkit-box-align: start;
+  -moz-align-items: flex-start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  -moz-box-align: start;
+  align-items: flex-start;
+}
+
+.columnEnd {
+  -webkit-box-align: end;
+  -moz-align-items: flex-end;
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  -moz-box-align: end;
+  align-items: flex-end;
+}
+
+.flexWarp {
+  -webkit-flex-wrap: wrap;
+  -webkit-box-lines: multiple;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.flex1 {
+  -ms-flex-negative: 1;
+  -webkit-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-box-flex: 1;
+  -moz-flex-grow: 1;
+  -ms-flex-positive: 1;
+  -webkit-flex-grow: 1;
+  -moz-box-flex: 1;
+  flex-grow: 1;
+}
+
+.spaceAround {
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.hidden {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  // 覆盖 tailwidcss
+  display: inline-block !important;
+}
+.table{
+  // 覆盖 tailwidcss
+  display: inline-block !important;
+}
+
+.float {
+  &-left {
+    float: left;
+  }
+
+  &-right {
+    float: right;
+  }
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+.text {
+  &-bold {
+    font-weight: bold;
+  }
+}
+
+.content-outer {
+  .content-table {
+    margin-top: 10px !important;
+    padding: 15px !important;
+  }
+
+  .content-chart {
+    margin-top: 10px !important;
+  }
+}
+
+// 表格重置
+.el-table {
+  .el-table__row {
+    min-height: 60px;
+  }
+
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
+    min-height: 45px;
+  }
+
+  // .cell {
+  //   min-height: 24px !important;
+  // }
+}
+
+.el-table__header {
+  background: "#F7F8FA";
+  color: #4a4c4f;
+  font-weight: 500;
+  min-height: 45px;
+}
+
+//
+
+.header-cell-class-name {
+  .cell {
+    min-height: 30px;
+    line-height: 30px !important;
+  }
+}
+
+.pagination-container .el-pagination {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.bi-table .el-table--border {
+  border-right: 1px solid #ebeef5;
+}
+
+.bi-table-wrapper {
+
+  .el-table__fixed .el-table__fixed-header-wrapper,
+  .el-table__header-wrapper,
+  .el-table__fixed-right .el-table__fixed-header-wrapper {
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective: 1000;
+  }
+}
+
+.bi-table div {
+  &::-webkit-scrollbar-track-piece {
+    // background: #d3dce6;
+    // height: 15px;
+
+    // &:hover{
+    //   background: red;
+    // }
+  }
+
+  // &::-webkit-scrollbar {
+  //   width: 0px;
+  //   height: 10px;
+  // }
+
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: rgba(144, 147, 153, 0.3);
+  //   border-radius: 20px;
+  //   width: 0px;
+  //   height: 10px;
+  // }
+
+  // &::-webkit-scrollbar-track-piece {
+  //   background: red;
+  //   height: 15px;
+  // }
+}
+
+.el-tag--nanpin,
+.el-tag--nvpin,
+.el-tag--type {
+  border-radius: 11px !important;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+
+  &.none {
+    display: none;
+  }
+}
+
+.el-tag--nanpin {
+  background: #daf6fc !important;
+  color: #02b8de !important;
+  border-color: #80dbee !important;
+}
+
+.el-tag--nvpin {
+  background: #ffe3e3 !important;
+  color: #f2595c !important;
+  border-color: #fb9193 !important;
+}
+
+.el-tag--type {
+  background: #ffe8dd !important;
+  color: #ff5a00 !important;
+  border-color: #fd955d !important;
+}
+
+.el-select-dropdown__item.selected {
+  span+span {
+    padding-right: 15px;
+  }
+}
+
+.el-select-dropdown {
+  min-width: 210px !important;
+}
+
+.newPage {
+  border-radius: 5px;
+}
+
+// 重写样式
+// .el-button+.el-button {
+//   margin-right: 10px !important;
+// }
+
+.el-table__header .cell {
+  line-height: 15px;
+  padding: 10px;
+}
+
+//调整表头高度
+.el-table__header tr,
+.el-table__header th {
+  padding: 0;
+  font-size: 14px;
+}
+//调整表格高度
+.el-table__body tr,
+.el-table__body td {
+  padding: 0;
+  height: 40px;
+  font-size: 14px;
+  color: #4a4c4f;
+}
+.el-drawer__header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 20px;
+}
+
+.el-table__cell {
+  padding: 0;
+}
+
+// // 用户头像名称公用样式
+.userInfoStyle {
+  .el-image {
+    overflow: inherit;
+  }
+
+  .userAvatar {
+    img {
+      width: 30px;
+      height: 30px;
+      border-radius: 30px;
+    }
+  }
+}
+
+.textHidden {
+  word-break: break-all;
+  max-width: 100px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+
+.margin10 {
+  margin-top: 10px;
+}
+
+.margin10 :first-of-type {
+  margin-top: 0px;
+}
+
+.is-disabled .el-textarea__inner {
+  color: #525353 !important;
+}
+
+.uploadFileItem {
+  margin-bottom: 10px !important;
+  margin-left: 0 !important;
+  margin-right: 10px !important;
+}
+
+
+
+
+
+
+
+.el-table thead th.el-table__cell .cell {
+  display: inline-block;
+}
+
+.el-table .sort-caret.ascending {
+  top: 2px !important;
+}
+
+.noContent {
+  width: 100%;
+  height: 100%;
+  font-size: 300px;
+}
+
+.el-loading-spinner .circular {
+  width: 60px !important;
+  height: 60px !important;
+}
+
+.bi-notice-drawer .detail-content,
+.notice-open-dialog .notice-open-content {
+  ol {
+    padding-inline-start: 40px;
+  }
+
+  ul,
+  ol,
+  li {
+    list-style: inherit;
+  }
+}
+
+
+// 重置状态颜色
+
+.dianFail,.sendFail {
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #F45454;
+    border-radius: 5px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+
+.dianing,.noSend,.unhandle,.dianNoSend{
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #ffa81d;
+    border-radius: 5px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+.dianStop,.sendStop{
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #86909c;
+    border-radius: 5px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+.dianHandle,.sended,.dianSend,.handled{
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #00bf8a;
+    border-radius: 5px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+.noComponent {
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #3a8be0;
+    border-radius: 5px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+.el-radio-button__orig-radio:checked+.el-radio-button__inner{
+  color: #323335;
+}
+// 自定义标签 颜色
+.allTags {
+  max-width: 500px;
+  .tags {
+    background: #ecfff6;
+    border-radius: 4px;
+    border: 1px solid #c5ffe2;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #46c988;
+    padding: 0 5px;
+    line-height: 12px;
+    font-size: 12px;
+    margin-right:5px;
+    margin-bottom: 5px;
+  }
+}
+
+
+

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/index.js

+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+import store from '@/store'
+import Clipboard from 'clipboard'
+import * as imageConversion from 'image-conversion'
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string') {
+      if (/^[0-9]+$/.test(time)) {
+        // support "1548221490638"
+        time = parseInt(time)
+      } else {
+        // support safari
+        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+        time = time.replace(new RegExp(/-/gm), '/')
+      }
+    }
+
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  if (!search) {
+    return {}
+  }
+  const obj = {}
+  const searchArr = search.split('&')
+  searchArr.forEach((v) => {
+    const index = v.indexOf('=')
+    if (index !== -1) {
+      const name = v.substring(0, index)
+      const val = v.substring(index + 1, v.length)
+      obj[name] = val
+    }
+  })
+  return obj
+}
+
+/**
+ * @param {Object} obj
+ * @returns {Object}
+ */
+export function removeEmptyField(obj) {
+  var newObj = {}
+  if (typeof obj === 'string') {
+    obj = JSON.parse(obj)
+  }
+  if (obj instanceof Array) {
+    newObj = []
+  }
+  if (obj instanceof Object) {
+    for (var attr in obj) {
+      // 属性值不为'',null,undefined才加入新对象里面(去掉'',null,undefined)
+      if (obj[attr] !== '' && obj[attr] !== null && obj[attr] !== undefined) {
+        if (obj[attr] instanceof Object) {
+          // 空数组或空对象不加入新对象(去掉[],{})
+          if (
+            JSON.stringify(obj[attr]) === '{}' ||
+            JSON.stringify(obj[attr]) === '[]'
+          ) {
+            continue
+          }
+          // 属性值为对象,则递归执行去除方法
+          if (Object.keys(removeEmptyField(obj[attr])).length) {
+            newObj[attr] = removeEmptyField(obj[attr])
+          }
+        } else if (
+          typeof obj[attr] === 'string' &&
+          ((obj[attr].indexOf('{') > -1 && obj[attr].indexOf('}') > -1) ||
+            (obj[attr].indexOf('[') > -1 && obj[attr].indexOf(']') > -1))
+        ) {
+          // 属性值为JSON时
+          try {
+            var attrObj = JSON.parse(obj[attr])
+            if (attrObj instanceof Object) {
+              newObj[attr] = removeEmptyField(attrObj)
+            }
+          } catch (e) {
+            newObj[attr] = obj[attr]
+          }
+        } else {
+          newObj[attr] = obj[attr]
+        }
+      }
+    }
+  }
+  return newObj
+}
+
+/**
+ * @param {Nubmer} num
+ * @returns {String}
+ */
+
+export function numberFormatThousandthPercentile(num) {
+  try {
+    return num.toLocaleString()
+  } catch (error) {
+    return num
+  }
+}
+
+export function numberFormatRound(num) {
+  try {
+    return Math.round(num).toLocaleString()
+  } catch (error) {
+    return num
+  }
+}
+
+export function objectConvertToQuery(payload, first = true) {
+  let queryStr = first ? '?' : '&'
+  const i = Object.keys(payload).length
+  if (!payload) {
+    queryStr = ''
+  }
+  Object.keys(payload).forEach((key, index) => {
+    if (i === index + 1) {
+      queryStr += key + '=' + payload[key]
+    } else {
+      queryStr += key + '=' + payload[key] + '&'
+    }
+  })
+  return queryStr
+}
+
+export function platformIcon(type) {
+  let platform = ''
+  if (type === '阅文') {
+    platform = 'yuewen'
+  } else if (type === '阳光快应用' || type === '阳光书城') {
+    platform = 'yangguang'
+  } else if (type === '巨量引擎') {
+    platform = 'juliang'
+  } else if (type === '磁力引擎') {
+    platform = 'cili'
+  } else if (type === '腾讯-ADQ' || type === '腾讯-MP') {
+    platform = 'tengxun'
+  } else if (type === '海读联盟') {
+    platform = 'haidu'
+  } else if (type === '麦子云') {
+    platform = 'maiziyun'
+  } else if (type === '追书云') {
+    platform = 'zhuishuyun'
+  } else if (type === '掌中云') {
+    platform = 'zhangzhongyun'
+  } else if (type === '掌阅') {
+    platform = 'zhangyue'
+  } else if (type === '掌文') {
+    platform = 'zhangwen'
+  } else if (type === '掌读') {
+    platform = 'zhangdu'
+  } else if (type === '有书') {
+    platform = 'youshu'
+  } else if (type === '微小宝') {
+    platform = 'weixiaobao'
+  } else if (type === '网易文鼎') {
+    platform = 'wangyiwending'
+  } else if (type === '网读云') {
+    platform = 'wangduyun'
+  } else if (type === '滕文小说') {
+    platform = 'tengwenxiaoshuo'
+  } else if (type === '平阅文') {
+    platform = 'pingyuewen'
+  } else if (type === '花生书城') {
+    platform = 'huashengshucheng'
+  } else if (type === '国风书城') {
+    platform = 'guofengshucheng'
+  } else if (type === '中文在线') {
+    platform = 'zhongwenzaixian'
+  }
+  return platform
+}
+
+export function downloadByBlob(url, name) {
+  const image = new Image()
+  image.setAttribute('crossOrigin', 'anonymous')
+  image.src = url
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(image, 0, 0, image.width, image.height)
+    canvas.toBlob((blob) => {
+      const url = URL.createObjectURL(blob)
+      download(url, name)
+      // 用完释放URL对象
+      URL.revokeObjectURL(url)
+    })
+  }
+}
+export function download(href, name) {
+  const eleLink = document.createElement('a')
+  eleLink.download = name
+  eleLink.href = href
+  eleLink.click()
+  eleLink.remove()
+}
+
+export function returnApi(api) {
+  const isWorks = window.location.href.indexOf('works') !== -1
+  let systemRouter = ''
+  if (isWorks) {
+    // 工作台页面
+    systemRouter = store.state.user.workerRouter
+  } else {
+    // 非工作台页面
+    systemRouter = window.localStorage.getItem('router')
+  }
+  if (systemRouter && systemRouter !== '') {
+    return systemRouter + api
+  } else {
+    return '/game' + api
+  }
+}
+
+export async function uploadImageBefore(file, _this, imageWidth, imageHeight) {
+  let isImg = null;
+  ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(
+    file.type
+  )
+    ? (isImg = true)
+    : (isImg = false)
+  const isLt2M = file.size / 1024 / 1024 < 10
+  console.log(isLt2M, 'isLt2M')
+  if (!isImg) {
+    _this.$message.error('图片格式只支持jpg,jpeg,png,gif,webp!')
+    return false
+  }
+  if (!isLt2M) {
+    _this.$message.error('上传图片大小不能超过 10MB!')
+    return false
+  }
+  if (!isLt2M) {
+    return new Promise((resolve, reject) => {
+      imageConversion
+        .compressAccurately(file, file.size / 1024 / 5)
+        .then((res) => {
+          resolve(res)
+        })
+    })
+  } else {
+    return isImg && isLt2M
+  }
+}
+
+export function uploadVideoBefore(file, _this) {
+  let isVideo = null;
+  ['video/mp4'].includes(file.type) ? (isVideo = true) : (isVideo = false)
+  const isLt2M = file.size / 1024 / 1024 < 10
+  if (!isVideo) {
+    _this.$message.error('视频格式只支持mp4!')
+  }
+  if (!isLt2M) {
+    _this.$message.error('上传视频大小不能超过 10MB!')
+  }
+
+  return isVideo && isLt2M
+}
+
+// 防抖
+export function debounce(fn, time) {
+  time = time || 500
+  // 定时器
+  let timer = null
+  return function (...args) {
+    var _this = this
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(function () {
+      timer = null
+      fn.apply(_this, args)
+    }, time)
+  }
+}
+// 初始化 分组缓存数据 或者更新数据
+export function set_storage(label, value) {
+  const storage = JSON.parse(window.localStorage.getItem('storage_group'))
+  if (storage) {
+    storage[label] = value
+    window.localStorage.setItem('storage_group', JSON.stringify(storage))
+  } else {
+    const Obj = {}
+    Obj[label] = value
+    window.localStorage.setItem('storage_group', JSON.stringify(Obj))
+  }
+}
+// 从缓存里面获取数据
+export function get_storage(label) {
+  const storage = window.localStorage.getItem('storage_group')
+  if (storage && JSON.parse(storage)[label]) {
+    return JSON.parse(storage)[label]
+  } else {
+    return ''
+  }
+}
+export function copyText(className, that) {
+  const clipboard = new Clipboard(className)
+  clipboard.on('success', (e) => {
+    that.$message.success('复制成功')
+    // 释放内存
+    clipboard.destroy()
+  })
+}
+
+export function removeDp(arr1, arr2, id) {
+  let arr
+  arr2 ? (arr = arr1.concat(arr2)) : (arr = arr1)
+  const obj = {}
+  const newArray = arr.reduce((pre, cur) => {
+    if (!obj[cur[id]]) {
+      obj[cur[id]] = true
+      pre.unshift(cur)
+    }
+    return pre
+  }, [])
+  return newArray
+}
+// 中文汉字排序
+export function zhSort(arr) {
+  const list = arr.sort(function (a, b) {
+    return a.name.localeCompare(b.name, 'zh-Hans-CN', {
+      sensitivity: 'accent'
+    })
+  })
+  return list
+}
+// 查找字符串重复出现的位置
+export function FindIndexOf(str, chars) {
+  var arr = []
+  var index = -1
+  do {
+    index = str.indexOf(chars, index + 1)
+    if (index != -1) {
+      arr.push(index)
+    }
+  } while (index != -1)
+  if (arr.length > 0) {
+    return arr
+  } else {
+    return -1
+  }
+}
+export function formatNumber(str) {
+  str = str || 0
+  if (str.toString().indexOf(',') === -1) {
+    str = Number(str)
+    const type = Object.prototype.toString.call(str)
+    if (type === '[object Number]') {
+      return str
+        .toString()
+        .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+    } else {
+      return str
+    }
+  } else {
+    return str
+  }
+}
+
+export function base64toFile(dataurl, filename = 'file') {
+  const arr = dataurl.split(',')
+  const mime = arr[0].match(/:(.*?);/)[1]
+  const suffix = mime.split('/')[1]
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], `${filename}.${suffix}`, {
+    type: mime
+  })
+}
+
+// 递归深拷贝
+export const deepClone = function (obj, hash = new WeakMap()) {
+  if (obj === null) return obj // 如果是null或者undefined我就不进行拷贝操作
+  if (obj instanceof Date) return new Date(obj)
+  if (obj instanceof RegExp) return new RegExp(obj)
+  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
+  if (typeof obj !== 'object') return obj
+  // 是对象的话就要进行深拷贝
+  if (hash.get(obj)) return hash.get(obj)
+  const cloneObj = new obj.constructor()
+  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
+  hash.set(obj, cloneObj)
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      // 实现一个递归拷贝
+      cloneObj[key] = deepClone(obj[key], hash)
+    }
+  }
+  return cloneObj
+}
+
+// 节流
+export const throttle = function throttle(fn, delay) {
+  let flag = true
+  return function () {
+    const context = this
+    const args = arguments
+    if (flag) {
+      flag = false
+      setTimeout(function () {
+        fn.apply(context, args)
+        flag = true
+      }, delay)
+    }
+  }
+}
+// 节流(合并)
+export const throttleStart = function (fn, wait = 500, isImmediate = false) {
+  let flag = true
+  let timer = null
+  let resultFunc = null
+  if (isImmediate) {
+    // 立即执行
+    resultFunc = function () {
+      if (flag) {
+        fn.apply(this, arguments)
+        flag = false
+        timer = setTimeout(() => {
+          flag = true
+        }, wait)
+      }
+    }
+
+    resultFunc.cancel = function () {
+      console.log('立即取消等待')
+      clearTimeout(timer)
+    }
+  } else {
+    // 不立即执行
+    resultFunc = function () {
+      if (flag == true) {
+        flag = false
+        timer = setTimeout(() => {
+          fn.apply(this, arguments)
+          flag = true
+        }, wait)
+      }
+    }
+
+    resultFunc.cancel = function () {
+      console.log('立即取消等待')
+      clearTimeout(timer)
+      flag = true
+    }
+  }
+
+  return resultFunc
+}
+
+// 数组去重
+// arr 需要被去重的正常复杂数组
+// field 判定每一项是否重复的凭证 如id
+// _arr 只要传入该值，便默认arr参数已经没有重复的项，然后函数返回
+// 两个数组合并、并去重过后的新增的值
+export const unique = function (arr, filed, _arr = []) {
+  const empty_obj = {}
+  const aggregate = [...arr, ..._arr].reduce((cur, next) => {
+    empty_obj[next[filed]]
+      ? ''
+      : (empty_obj[next[filed]] = true && cur.push(next))
+    return cur
+  }, []) // 设置cur默认类型为数组，并且初始值为空的数组
+  // console.log(aggregate)
+  return _arr.length ? aggregate.slice(arr.length) : aggregate
+}
+
+// 掌千项目下的主体
+export const zqCorpidList = [
+  {
+    label: '山东掌乐文化传媒有限公司(古惑-封神合击)',
+    corp_id: 'ww051c01bef962eb5d'
+  },
+  {
+    label: '掌乐文化(三国)',
+    corp_id: 'ww63bc1683582745b9'
+  },
+  {
+    label: '掌乐传媒(九州-老兵-三国超变)',
+    corp_id: 'ww917199c48a644359'
+  },
+  {
+    label: '山东掌千文化传媒有限公司(神魔)',
+    corp_id: 'ww6df03b72da20f100'
+  },
+  {
+    label: '山东掌千网络科技有限公司(西游-魔兽-格斗江湖)',
+    corp_id: 'wwdff3b477857d1895'
+  },
+  {
+    label: '山东掌易文化传媒有限公司(牛逼-山海经)',
+    corp_id: 'ww2ed9adb96c50678b'
+  },
+  {
+    label: '山东千麒信息科技有限公司',
+    corp_id: 'ww2489d11f69e46bcb'
+  },
+  {
+    label: '杭州简书文化传播有限公司',
+    corp_id: 'wweaefe716636df3d1'
+  }
+]
+
+export const weixin_blongs_list = [2868]
+
+export const hasDuplicates = function (arr1, arr2) {
+  // 将两个数组合并成一个数组
+  const combinedArray = arr1.concat(arr2)
+  // 使用 Set 数据结构来去除重复元素，判断去重后的数组长度是否与原数组长度相等
+  return combinedArray.length !== new Set(combinedArray).size
+}
+
+// 合并对象数组
+export const concatObjArr = function (array) {
+  console.log(array, 'array')
+  const list = array.reduce(function (result, obj) {
+    var target = result.find(function (item) {
+      return item.member_id === obj.member_id
+    })
+    if (target) {
+      Object.assign(target, obj)
+    } else {
+      result.push(obj)
+    }
+    return result
+  }, [])
+  return list
+}
+
+export const generateUUID = function() {
+  var d = new Date().getTime()
+  if (window.performance && typeof window.performance.now === 'function') {
+    d += performance.now() // use high-precision timer if available
+  }
+  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (d + Math.random() * 16) % 16 | 0
+    d = Math.floor(d / 16)
+    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+  })
+  return uuid
+}
\ No newline at end of file

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";
+        `
+      }
+    }
+  }
 })