perf: perf

src/assets/iconfont/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1607695324289'); /* IE9 */
-  src: url('iconfont.eot?t=1607695324289#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOYAAsAAAAACDQAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqEFIMzATYCJAMMCwgABCAFhG0HRhsBB8gekiQBgDxM4A0kAIgioN8v3Ud3F2KVqgCpNrIc0GFVJBVVWVtFrBIhOx5JmMaWNar/v/v99nGtOz+KOqLjkL7t7ovvDWum0bJoImRoGiKExrYjC6g2lM6fV4PQ9vCs/c/l9Fp+RWXzA+Uyx9aoF2A0gQIaa2iUaIEk6CkMr13sMM8T0GwbFdns/NQS6pLRaQHhwtl8BnVldHIDMWgoaxVrs3BV0YiX4wdcCb4fftkeGkQloXMXToUp8n2d+DqZLlXbDngI/nSXQUHCFCQT1iptC1qj2JRWzVqszRC0rWGBr5NVxdcJj7fZPzyCSKihha1gDNJ4RXxH5tL4iIu49k3U0IwNvGUIvZ6i9FKZzM04f1vGCnHQizTFjAGXOnGWLmi8LgG9xC1WmK8lB4pOtBX0Kg4xYfE2ry5ey8Q6JbR6iyf7Mjpdw0qVKO8Uzh3pmbbum7XpTGXrUPUu9Y7qR9nckW8NQE7IjYWNjrm3/r2srSk+619wmEI3RohhGW4tZLwr/U/zycbfUpLCGCbLAW6wwYFl9c4IGxVz7/1lNW2pbcz0E4xYib5sbUw75r4GyvsNvC+bMxvPTkWYPDcepPTFWegO8LOcLO8GFpzGjRcnxHJeHkVhSpcJ8bkDkc+BJ8vxGUGffT10F1p7Vsv7gfWxseePRJdRGkL1OL1IM1D1JEWKPb/zN6bCpwOHB3f+brRk8Pn/w63AWz3Ouhs0btge+Hn8jjVZF1J9yirP4ZnJZFH76+GAIzpVqKvb33BFX+dCgoa+BKK6QUgahjCZMAVFi2l/TcPRCmk2KYrNLXpwrUJuwoQDAkGnV4jaPYak0w8mE36h6PcPNZ0hQbO10LNni5FwtnlmHTICKM5u4WKuXmO2UfSExQuQX6tkeFoYUAlwqRjEeo0un4xCDfgUC6T1vEEIhhmvV3GEXAaVSh03eL0EOaEpCNFwaLWs6kWaXL2KeszgQIYAKCxrC1aUU1fDvMZCT+HzC0DemooM3lBVYyUAJyn2julp6DpgorJap6pbGSxZl2cgCIydxHB1VVgEFlCxYnVYo3pUCcgRNAoDIg0OWqYe6yrTLK+ovt8uaEZ/l0IMKWQdJy8WhZqtVSpSjgPUemItQgA=') format('woff2'),
-  url('iconfont.woff?t=1607695324289') format('woff'),
-  url('iconfont.ttf?t=1607695324289') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1607695324289#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1618822116404'); /* IE9 */
+  src: url('iconfont.eot?t=1618822116404#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQkAAsAAAAACWAAAAPWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqFXIRAATYCJAMUCwwABCAFhG0HdBvwByMRJnztRfZfEuS6lrOvYNUWLBYrKHuUFPQcqdIW23Ll3d/JYMdZJG0ywiQE2XibeOB/7dt9Nn92ZlFNoklck5hG8QQJTud0QvS4hLZsQyzkjzg4gYMfJMARR4FqiZ5Qv7nUxxktKhcgP2GOJ7yLe0h+e5+srP9bW5jUlU4kMovHteofSLoSClKhShx579qwZ1MiUVu+eGkhN9tVZaKjkibzPwC6wOKi2f+/36x4/pCg6W00erHHR00ShxBJGhKRNBGvSyt1HhdSn4V5ZXpPRi73jLsJaEw2R1i/cft+tYwfFBAunT97XF2Y5RF6UOuqnjOz8EpRxxexDy/dx4e/5oaaqCT8yN1nNpyy+scsD9L97n2HDAHa3/2gIGEOMuFCr/uUFNJzJM2iOFuMWmwX+THbPQ+63YY2S3Yt29UaDZLM/vEiocLVvaCuNmb3DCmn5E4iBGSAICDw60FGxHM6gwYjMUDYIyrVRqWiIFdVp5OlyCpHcnXQV+vUI7rXm1ptaTRp0Hm9oRXMpAmqQSOaIBI1qVN9nqAO5KJ7TSUHFIblUEH0NoQp0wBj2Q2AEXWiYHAwugaLKd4Eo1KgwDj+QGY+owqccO4AIaofYhlTYN6hW+7Dd6SN/U6MDzpzZvmgbx5r60OOaeZD09L3JEsc7b/PZS7X23TI3ef0CxrUrZmkfm3xJkO+8xhXHsctAM5NNHJurk5K9fjJ3SPN4BygE8ZXbqAMt2z918loI1PRgoKDpDcU3gQmajswlr/cWWUz2Q6bc9/7n0bOs+6t1GfZ/ldEG5O9TNajSIjEyBT1USyPdo/RXgiA3oVDIopCACvZkvDYFst63Sb6FTsjq0wOUp6dnghX/LXsUMRY0H2fviR0P6SgXfVX+Ru7rs1tjg5Zft1m0P/21LuO7v0s3ef7RmT0x0DEsbzEuaXk+bCSzr3FnrfVG/kf4H+IPMMN7Ec7ilxNUBuVIOqYBEltCjFT50DRmh+p1K6xmsZsm3B+a4QbkpB7MMsTBsFQ7yAa7D0kQ30lZuo3KEb7D5WhIUHjYBhxxdagBn/AqAQt6Dd4UwtJmxx87Te6e1Kc4479j9x9DNZpqXM3LMj7OKY/3CZCQFwzXNn9MKUKjWtAI9Mu0i7zTH2vNJmahwOMStAC/Qbe1EJmuhxa7/+N7p4Uj4xcCP8jd78+WE0WAvGmLqSR57J9f7iNCM32I64ZXOHEJNIVtP7dAhqZ7Fsk28XcTCKqejq+Nr/GK9Dg1y0hhhRyKKGSm3t9jln5Mj4CpbjNkL92by2Wnt997svLSPeUumHEcoimYQAAAA==') format('woff2'),
+  url('iconfont.woff?t=1618822116404') format('woff'),
+  url('iconfont.ttf?t=1618822116404') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1618822116404#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,6 +15,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-iconshow-main-container:before {
+  content: "\e878";
+}
+
+.team-iconhidden-main-container:before {
+  content: "\e881";
+}
+
 .team-iconexit-fullscreen:before {
   content: "\e62a";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "team-icon",
   "description": "增删查改xi't",
   "glyphs": [
+    {
+      "icon_id": "9626913",
+      "name": "全屏",
+      "font_class": "show-main-container",
+      "unicode": "e878",
+      "unicode_decimal": 59512
+    },
+    {
+      "icon_id": "9626952",
+      "name": "退出全屏",
+      "font_class": "hidden-main-container",
+      "unicode": "e881",
+      "unicode_decimal": 59521
+    },
     {
       "icon_id": "5698509",
       "name": "全屏缩小",

src/assets/iconfont/iconfont.svg

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="show-main-container" unicode="&#59512;" d="M0 896v-1024h1024V896z m409.6-921.6H102.4v307.2h102.4v-204.8h204.8zM409.6 691.2H204.8v-204.8H102.4V793.6h307.2z m512-614.4v-102.4h-307.2v102.4h204.8v204.8h102.4z m0 614.4v-204.8h-102.4V691.2h-204.8V793.6h307.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="hidden-main-container" unicode="&#59521;" d="M0 896v-1024h1024V896z m409.6-716.8v-204.8H307.2v204.8H102.4v102.4h307.2z m0 409.6v-102.4H102.4V588.8h204.8V793.6h102.4z m512-409.6h-204.8v-204.8h-102.4v307.2h307.2z m0 307.2h-307.2V793.6h102.4v-204.8h204.8z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="exit-fullscreen" unicode="&#58922;" d="M366.2 714.2c-1 8-10.8 11.4-16.5 5.7l-53.1-53.1L134.2 829c-3.8 3.8-10 3.8-13.7 0L69 777.7c-3.8-3.8-3.8-10 0-13.7l162.4-162.4-53.3-53.3c-5.7-5.7-2.3-15.5 5.7-16.5l194.6-23c6.2-0.7 11.5 4.5 10.8 10.8l-23 194.6z m12.3-453.3l-194.7-23c-8-1-11.4-10.8-5.7-16.5l53.3-53.3L69 5.899999999999977c-3.8-3.8-3.8-10 0-13.7l51.5-51.4c3.8-3.8 10-3.8 13.7 0l162.4 162.3 53.1-53.1c5.7-5.7 15.5-2.3 16.5 5.7l23 194.4c0.7 6.3-4.5 11.5-10.7 10.8z m269.4 248l194.7 23c8 1 11.4 10.8 5.7 16.5L795 601.6l162.4 162.3c3.8 3.8 3.8 10 0 13.7L905.9 829c-3.8 3.8-10 3.8-13.7 0L729.7 666.8l-53.1 53.1c-5.7 5.7-15.6 2.3-16.5-5.7l-23-194.5c-0.6-6.3 4.6-11.5 10.8-10.8zM795 168.20000000000005l53.3 53.3c5.7 5.7 2.3 15.5-5.7 16.5L648 261c-6.2 0.7-11.5-4.5-10.8-10.8l23-194.6c1-8 10.8-11.4 16.5-5.7l53.1 53.1 162.4-162.3c3.8-3.8 10-3.8 13.7 0l51.5 51.4c3.8 3.8 3.8 10 0 13.7L795 168.20000000000005z m0 0"  horiz-adv-x="1024" />
 
     

src/components/SeamlessScroll/src/SeamlessScroll.vue

@@ -14,6 +14,7 @@
       @touchstart="touchStart"
       @touchmove="touchMove"
       @touchend="touchEnd"
+      @mousewheel="wheel"
     >
       <div ref="slotList" :style="float">
         <slot></slot>
@@ -32,7 +33,12 @@ import {
   watchEffect,
   nextTick
 } from "vue";
-import { tryOnMounted, tryOnUnmounted, templateRef } from "@vueuse/core";
+import {
+  tryOnMounted,
+  tryOnUnmounted,
+  templateRef,
+  useDebounceFn
+} from "@vueuse/core";
 import * as utilsMethods from "./utils";
 const { animationFrame, copyObj } = utilsMethods;
 animationFrame();
@@ -490,6 +496,19 @@ export default defineComponent({
       }
     });
 
+    // 鼠标滚轮事件
+    function wheel(e) {
+      e.preventDefault();
+      if (
+        unref(options).direction === "left" ||
+        unref(options).direction === "right"
+      )
+        return;
+      useDebounceFn(() => {
+        e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
+      }, 50)();
+    }
+
     tryOnMounted(() => {
       scrollInitMove();
     });
@@ -539,7 +558,8 @@ export default defineComponent({
       scrollMove,
       scrollInitMove,
       scrollStartMove,
-      scrollStopMove
+      scrollStopMove,
+      wheel
     };
   }
 });

src/layout/components/AppMain.vue

@@ -10,7 +10,7 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useRoute } from "vue-router";
 export default defineComponent({
@@ -20,7 +20,7 @@ export default defineComponent({
     const key = computed(() => route.path);
 
     return { key };
-  },
+  }
 });
 </script>
 

src/layout/components/Navbar.vue

@@ -9,20 +9,21 @@
     <Breadcrumb class="breadcrumb-container" />
 
     <div class="right-menu">
+      <!-- 全屏 -->
       <screenfull />
+      <!-- 国际化 -->
       <div class="inter" :title="langs ? '中文' : '英文'" @click="toggleLang">
         <img :src="langs ? ch : en" />
       </div>
-      <el-dropdown>
+      <!-- 退出登陆 -->
+      <el-dropdown trigger="click">
         <span class="el-dropdown-link">
           <img :src="favicon" />
           <p>{{ usename }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-switch-button" @click="logout">
-              {{ $t("LoginOut") }}
-            </el-dropdown-item>
+            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{ $t("LoginOut") }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -48,7 +49,7 @@ export default defineComponent({
   components: {
     Breadcrumb,
     Hamburger,
-    screenfull,
+    screenfull
   },
   setup() {
     let langs = ref(true);
@@ -95,7 +96,7 @@ export default defineComponent({
       en,
       favicon
     };
-  },
+  }
 });
 </script>
 
@@ -149,13 +150,11 @@ export default defineComponent({
       display: flex;
       align-items: center;
       justify-content: space-around;
-      margin-right: 20px;
+      margin-right: 10px;
+      cursor: pointer;
       p {
         font-size: 13px;
       }
-      &:hover {
-        background: #f0f0f0;
-      }
       img {
         width: 22px;
         height: 22px;

src/layout/components/screenfull/index.vue

@@ -15,7 +15,7 @@
 import { useFullscreen } from '@vueuse/core'
 import {
   defineComponent,
-} from "vue";
+} from "vue"
 export default defineComponent({
   name: "screenfull",
   setup() {
@@ -24,7 +24,7 @@ export default defineComponent({
     return {
       isFullscreen,
       toggle,
-    };
+    }
   },
 });
 </script>

src/layout/components/setting/index.vue

@@ -10,6 +10,10 @@
         <span>色弱模式</span>
         <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
       </li>
+      <li>
+        <span>隐藏标签页</span>
+        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
+      </li>
     </ul>
   </panel>
 </template>
@@ -19,6 +23,7 @@ import panel from "../panel/index.vue";
 import { onMounted, reactive, toRefs } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { toggleClass } from "/@/utils/operate";
+import { emitter } from "/@/utils/mitt";
 
 export default {
   name: "setting",
@@ -39,7 +44,8 @@ export default {
 
     const settings = reactive({
       greyVal: storageLocal.getItem("greyVal"),
-      weekVal: storageLocal.getItem("weekVal")
+      weekVal: storageLocal.getItem("weekVal"),
+      tagsVal: storageLocal.getItem("tagsVal")
     });
 
     settings.greyVal === null
@@ -74,11 +80,20 @@ export default {
         : localOperate("weekVal", false, "set");
     };
 
+    const tagsChange = () => {
+      let showVal = settings.tagsVal;
+      showVal
+        ? storageLocal.setItem("tagsVal", true)
+        : storageLocal.setItem("tagsVal", false);
+      emitter.emit("tagViewsChange", showVal);
+    };
+
     return {
       ...toRefs(settings),
       localOperate,
       greyChange,
-      weekChange
+      weekChange,
+      tagsChange
     };
   }
 };

src/layout/components/tag/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-view">
+  <div class="tags-view" v-if="!showTags">
     <el-scrollbar :vertical="false" class="scroll-container">
       <div
         v-for="(item, index) in dynamicTagList"
@@ -10,16 +10,23 @@
         <span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
       </div>
     </el-scrollbar>
+    <slot></slot>
   </div>
 </template>
 
 <script>
 import { useDynamicRoutesHook } from "./tagsHook"
-import { useRoute } from "vue-router"
-import { ref, watchEffect } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { ref, watchEffect, onBeforeMount, unref } from "vue"
+import { storageLocal } from "/@/utils/storage"
+import { emitter } from "/@/utils/mitt"
+
 export default {
   setup() {
     const route = useRoute()
+    const router = useRouter()
+    const showTags = ref(storageLocal.getItem("tagsVal") || false)
+
     const { deleteDynamicTag, dRoutes } = ref(useDynamicRoutesHook()).value
 
     function deleteMenu(item) {
@@ -39,9 +46,17 @@ export default {
       stop()
     })
 
+    onBeforeMount(() => {
+      emitter.on("tagViewsChange", (key) => {
+        if (unref(showTags) === key) return
+        showTags.value = key
+      })
+    })
+
     return {
       dynamicTagList: dRoutes,
       deleteMenu,
+      showTags
     }
   },
 };
@@ -55,7 +70,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-left: 5px;
+  position: relative;
   .scroll-item {
     border-radius: 3px;
     padding: 2px 8px;
@@ -64,27 +79,34 @@ export default {
   a {
     text-decoration: none;
     color: #666;
-    padding: 0 4px 0 10px;
+    padding: 0 4px 0 4px;
+  }
+
+  .scroll-container {
+    text-align: left;
+    padding: 5px 0;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    background: #fff;
+    border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
+    .scroll-item {
+      &:nth-child(1) {
+        margin-left: 5px;
+      }
+    }
   }
 }
+
 .el-icon-close {
   cursor: pointer;
   border-radius: 50%;
-  padding: 1px;
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 .el-icon-close:hover {
   background: #b4bccc;
 }
-.scroll-container {
-  text-align: left;
-  padding: 5px 0;
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-}
 .active {
   background: #409eff;
   position: relative;
@@ -93,17 +115,7 @@ export default {
     color: #fff;
   }
 }
-.active::before {
-  content: "";
-  background: #fff;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  left: 5px;
-  margin-top: -4px;
-  margin-right: 2px;
+:deep(.el-scrollbar__wrap) {
+  height: 100vh;
 }
 </style>

src/layout/components/tag/tagsHook.ts

@@ -1,4 +1,5 @@
 import { reactive, toRefs, nextTick } from "vue"
+import { storageLocal } from "/@/utils/storage"
 import { useRouter } from "vue-router"
 
 interface InterDynamic {
@@ -25,10 +26,11 @@ export function useDynamicRoutesHook() {
    * @param value string 当前menu对应的路由path
    * @param parentPath string 当前路由中父级路由
    */
-  function dynamicRouteTags(value: string, parentPath: string): void {
+  const dynamicRouteTags = (value: string, parentPath: string): void => {
     const hasValue = dynamic.dRoutes.some((item: any) => {
       return item.path === value
     })
+
     function concatPath(arr: object[], value: string, parentPath: string) {
       if (!hasValue) {
         arr.forEach((arrItem: any) => {
@@ -45,6 +47,14 @@ export function useDynamicRoutesHook() {
       }
     }
     concatPath(router.options.routes, value, parentPath)
+
+    if (storageLocal.getItem("routesInStorage") && storageLocal.getItem("routesInStorage").length > 2) {
+      let lens = storageLocal.getItem("routesInStorage").length
+      let itemss = storageLocal.getItem("routesInStorage")[lens - 1]
+      dynamic.dRoutes.push({ path: itemss.path, meta: itemss.meta })
+    }
+
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes)
   }
   /**
    * @param value any 当前删除tag路由
@@ -56,6 +66,7 @@ export function useDynamicRoutesHook() {
     })
     // 从当前匹配到的路径中删除
     await dynamic.dRoutes.splice(valueIndex, 1)
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes)
     if (current === obj.path) { // 如果删除当前激活tag就自动切换到最后一个tag
       let newRoute: any = dynamic.dRoutes.slice(-1)
       nextTick(() => {

src/layout/index.vue

@@ -6,13 +6,29 @@
       @click="handleClickOutside"
     />
     <!-- 侧边栏 -->
-    <sidebar class="sidebar-container" />
+    <sidebar class="sidebar-container" v-if="!containerHiddenSideBar" />
     <div class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <!-- 顶部导航栏 -->
-        <navbar />
+        <navbar v-if="!containerHiddenSideBar" />
         <!-- tabs标签页 -->
-        <tag /> 
+        <tag>
+          <!-- 右侧功能按钮 -->
+          <ul class="right-func">
+            <li>
+              <i class="el-icon-refresh-right"></i>
+            </li>
+            <li>
+              <i class="el-icon-arrow-down"></i>
+            </li>
+            <li>
+              <i
+                :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
+                @click="onFullScreen"
+              ></i>
+            </li>
+          </ul>
+        </tag>
       </div>
       <!-- 主体内容 -->
       <app-main />
@@ -26,17 +42,23 @@
 import { Navbar, Sidebar, AppMain, setting, tag } from "./components";
 import {
   ref,
+  unref,
   reactive,
   computed,
   toRefs,
   watch,
+  nextTick,
   watchEffect,
   onMounted,
   onBeforeMount,
-  onBeforeUnmount,
+  onBeforeUnmount
 } from "vue";
 import { useStore } from "vuex";
-import { useEventListener } from "@vueuse/core";
+import { useEventListener, useFullscreen } from "@vueuse/core";
+import { toggleClass } from "/@/utils/operate";
+let hiddenMainContainer = "hidden-main-container";
+import options from "/@/settings";
+
 interface setInter {
   sidebar: any;
   device: String;
@@ -58,6 +80,8 @@ export default {
 
     const WIDTH = ref(992);
 
+    let containerHiddenSideBar = ref(options.hiddenSideBar);
+
     const set: setInter = reactive({
       sidebar: computed(() => {
         return store.state.app.sidebar;
@@ -76,17 +100,17 @@ export default {
           hideSidebar: !set.sidebar.opened,
           openSidebar: set.sidebar.opened,
           withoutAnimation: set.sidebar.withoutAnimation,
-          mobile: set.device === "mobile",
+          mobile: set.device === "mobile"
         };
-      }),
+      })
     });
 
     watchEffect(() => {
       if (set.device === "mobile" && !set.sidebar.opened) {
         store.dispatch("app/closeSideBar", { withoutAnimation: false });
       }
-    })
- 
+    });
+
     const handleClickOutside = () => {
       store.dispatch("app/closeSideBar", { withoutAnimation: false });
     };
@@ -107,23 +131,48 @@ export default {
       }
     };
 
+    function onFullScreen() {
+      if (unref(containerHiddenSideBar)) {
+        containerHiddenSideBar.value = false;
+        toggleClass(
+          false,
+          hiddenMainContainer,
+          document.querySelector(".main-container")
+        );
+      } else {
+        containerHiddenSideBar.value = true;
+        toggleClass(
+          true,
+          hiddenMainContainer,
+          document.querySelector(".main-container")
+        );
+      }
+    }
+
     onMounted(() => {
       const isMobile = $_isMobile();
       if (isMobile) {
         store.dispatch("app/toggleDevice", "mobile");
         store.dispatch("app/closeSideBar", { withoutAnimation: true });
       }
+      toggleClass(
+        unref(containerHiddenSideBar),
+        hiddenMainContainer,
+        document.querySelector(".main-container")
+      );
     });
 
     onBeforeMount(() => {
       useEventListener("resize", $_resizeHandler);
     });
-    
+
     return {
       ...toRefs(set),
       handleClickOutside,
+      containerHiddenSideBar,
+      onFullScreen
     };
-  },
+  }
 };
 </script>
 
@@ -173,4 +222,23 @@ $sideBarWidth: 210px;
 .mobile .fixed-header {
   width: 100%;
 }
+
+.right-func {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
+  font-size: 16px;
+  li {
+    width: 40px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    border-right: 1px solid #ccc;
+    cursor: pointer;
+  }
+}
+.hidden-main-container {
+  margin-left: 0 !important;
+}
 </style>

src/settings.ts

@@ -1,9 +1,9 @@
 export default {
-
-  title: 'CURE Admin',
+  title: "CURE Admin",
 
   fixedHeader: false,
 
-  sidebarLogo: false
+  sidebarLogo: false,
 
-}
+  hiddenSideBar: false,
+};

src/style/index.scss

@@ -1,8 +1,8 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
 
 body {
   width: 100%;
@@ -12,7 +12,8 @@ body {
   -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-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
@@ -30,7 +31,7 @@ html {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: #f0f2f5;
+  // background-color: #f0f2f5;
 }
 
 *,
@@ -103,14 +104,14 @@ ul {
 
 // 灰色模式
 .html-grey {
-    filter: grayscale(100%);
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    filter: url("data:image/svg+xml;utf8,#grayscale");
-    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-    -webkit-filter: grayscale(1);
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: url("data:image/svg+xml;utf8,#grayscale");
+  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+  -webkit-filter: grayscale(1);
 }
 
 // 色弱模式
@@ -132,4 +133,4 @@ ul {
 
 .mobile-spacing {
   margin: 0;
-}
+}

src/style/variables.scss

@@ -1,12 +1,12 @@
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; 
-$menuBg:#304156;
-$menuHover:#263445;
+$menuText: #bfcbd9;
+$menuActiveText: #409eff;
+$subMenuActiveText: #f4f4f5;
+$menuBg: #304156;
+$menuHover: #263445;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg: #1f2d3d;
+$subMenuHover: #001528;
 
 $sideBarWidth: 210px;
 

src/views/editor/index.vue

@@ -46,4 +46,7 @@ export default {
 :deep(.w-e-text-container) {
   z-index: 99 !important;
 }
+:deep(.w-e-toolbar) {
+  z-index: 999 !important;
+}
 </style>

src/views/flow-chart/index.vue

@@ -91,11 +91,11 @@ export default {
 <style scoped>
 #LF-Turbo {
   width: 100vw;
-  height: 85%;
+  height: 85vh;
   outline: none;
 }
 .logic-flow-view {
-  height: 100%;
+  margin: 10px;
   position: relative;
 }
 .demo-title {

src/views/welcome.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="welcome">
-    <el-affix :offset="51">
+    <el-affix>
       <div class="top-content">
         <div class="left-mark">
           <img
@@ -31,18 +31,14 @@ import Flop from "/@/components/Flop";
 import { ref, computed, onMounted, nextTick } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { echartsJson } from "/@/api/mock";
-import {
-  useEventListener,
-  tryOnUnmounted,
-  useTimeoutFn,
-} from "@vueuse/core";
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
 import * as echarts from "echarts";
 
 let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    Flop,
+    Flop
   },
   setup() {
     let mobile = ref(deviceDetection());
@@ -75,39 +71,39 @@ export default {
         brokenLine.setOption({
           title: {
             text: "上海 空气质量指数",
-            left: "1%",
+            left: "1%"
           },
           tooltip: {
-            trigger: "axis",
+            trigger: "axis"
           },
           grid: {
             left: "5%",
             right: "15%",
-            bottom: "10%",
+            bottom: "10%"
           },
           xAxis: {
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[0];
-            }),
+            })
           },
           yAxis: {},
           toolbox: {
             right: 10,
             feature: {
               dataZoom: {
-                yAxisIndex: "none",
+                yAxisIndex: "none"
               },
               restore: {},
-              saveAsImage: {},
-            },
+              saveAsImage: {}
+            }
           },
           dataZoom: [
             {
-              startValue: "2014-06-01",
+              startValue: "2014-06-01"
             },
             {
-              type: "inside",
-            },
+              type: "inside"
+            }
           ],
           visualMap: {
             top: 50,
@@ -116,67 +112,67 @@ export default {
               {
                 gt: 0,
                 lte: 50,
-                color: "#93CE07",
+                color: "#93CE07"
               },
               {
                 gt: 50,
                 lte: 100,
-                color: "#FBDB0F",
+                color: "#FBDB0F"
               },
               {
                 gt: 100,
                 lte: 150,
-                color: "#FC7D02",
+                color: "#FC7D02"
               },
               {
                 gt: 150,
                 lte: 200,
-                color: "#FD0100",
+                color: "#FD0100"
               },
               {
                 gt: 200,
                 lte: 300,
-                color: "#AA069F",
+                color: "#AA069F"
               },
               {
                 gt: 300,
-                color: "#AC3B2A",
-              },
+                color: "#AC3B2A"
+              }
             ],
             outOfRange: {
-              color: "#999",
-            },
+              color: "#999"
+            }
           },
           series: {
             name: "上海 空气质量指数",
             type: "line",
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[1];
             }),
             markLine: {
               silent: true,
               lineStyle: {
-                color: "#333",
+                color: "#333"
               },
               data: [
                 {
-                  yAxis: 50,
+                  yAxis: 50
                 },
                 {
-                  yAxis: 100,
+                  yAxis: 100
                 },
                 {
-                  yAxis: 150,
+                  yAxis: 150
                 },
                 {
-                  yAxis: 200,
+                  yAxis: 200
                 },
                 {
-                  yAxis: 300,
-                },
-              ],
-            },
-          },
+                  yAxis: 300
+                }
+              ]
+            }
+          }
         });
       });
     };
@@ -190,7 +186,7 @@ export default {
         useEventListener("resize", () => {
           if (!brokenLine) return;
           useTimeoutFn(() => {
-            brokenLine.resize()
+            brokenLine.resize();
           }, 180);
         });
       });
@@ -206,9 +202,9 @@ export default {
       greetings,
       mobile,
       loading,
-      openDepot,
+      openDepot
     };
-  },
+  }
 };
 </script>