style: fix some style

src/layout/components/Navbar.vue

@@ -12,9 +12,10 @@
       <!-- 全屏 -->
       <screenfull />
       <!-- 国际化 -->
-      <div class="inter" :title="langs ? '中文' : '英文'" @click="toggleLang">
+      <div class="inter" :title="langs ? '中文' : 'English'" @click="toggleLang">
         <img :src="langs ? ch : en" />
       </div>
+      <i class="el-icon-setting hsset" :title="$t('message.hssystemSet')" @click="onPanel"></i>
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
@@ -47,6 +48,8 @@ import { useI18n } from "vue-i18n";
 import ch from "/@/assets/ch.png";
 import en from "/@/assets/en.png";
 import favicon from "/favicon.ico";
+import { emitter } from "/@/utils/mitt";
+
 export default defineComponent({
   name: "Navbar",
   components: {
@@ -76,6 +79,10 @@ export default defineComponent({
       router.push("/login");
     };
 
+    function onPanel() {
+      emitter.emit("openPanel");
+    }
+
     onMounted(() => {
       document
         .querySelector(".el-dropdown__popper")
@@ -97,7 +104,8 @@ export default defineComponent({
       logout,
       ch,
       en,
-      favicon
+      favicon,
+      onPanel
     };
   }
 });
@@ -147,6 +155,18 @@ export default defineComponent({
         width: 25px;
       }
     }
+    .hsset {
+      width: 40px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-right: 5px;
+      &:hover {
+        cursor: pointer;
+        background: #f0f0f0;
+      }
+    }
     .el-dropdown-link {
       width: 80px;
       height: 48px;

src/layout/components/panel/index.vue

@@ -1,15 +1,13 @@
 <template>
-  <div ref="right-panel" :class="{ show: show }" class="right-panel-container">
+  <div :class="{ show: show }" class="right-panel-container">
     <div class="right-panel-background" />
-    <div class="right-panel">
-      <div
-        class="handle-button"
-        :title="show ? '关闭设置' : '打开设置'"
-        @click="show = !show"
-      >
-        <i :class="show ? 'el-icon-close' : 'el-icon-setting'" />
-      </div>
+    <div ref="target" class="right-panel">
       <div class="right-panel-items">
+        <div class="project-configuration">
+          <h3>项目配置</h3>
+          <i class="el-icon-close" @click="show = !show"></i>
+        </div>
+        <el-divider />
         <slot />
       </div>
     </div>
@@ -19,26 +17,19 @@
 <script lang='ts'>
 import { addClass, removeClass } from "../../../utils/operate";
 import { ref, watch, getCurrentInstance, onMounted, onBeforeMount } from "vue";
-import { useEventListener } from "@vueuse/core";
+import { useEventListener, onClickOutside } from "@vueuse/core";
+import { emitter } from "/@/utils/mitt";
+
 export default {
   name: "panel",
   setup() {
-    let vm: any;
-
     let show = ref(false);
 
-    watch(
-      show,
-      (val, prevVal) => {
-        val ? addEventClick() : () => {};
-        if (val) {
-          addClass(document.body, "showright-panel");
-        } else {
-          removeClass(document.body, "showright-panel");
-        }
-      },
-      { immediate: true }
-    );
+    const target = ref(null);
+
+    onClickOutside(target, event => {
+      show.value = false;
+    });
 
     const addEventClick = (): void => {
       useEventListener("click", closeSidebar);
@@ -52,14 +43,15 @@ export default {
       }
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance();
+    emitter.on("openPanel", () => {
+      show.value = true;
     });
 
     return {
       show,
+      target
     };
-  },
+  }
 };
 </script>
 
@@ -84,7 +76,7 @@ export default {
 
 .right-panel {
   width: 100%;
-  max-width: 260px;
+  max-width: 300px;
   height: 100vh;
   position: fixed;
   top: 0;
@@ -131,4 +123,34 @@ export default {
     line-height: 48px;
   }
 }
+
+.right-panel-items {
+  margin-top: 60px;
+  height: 100vh;
+  overflow: auto;
+}
+
+.project-configuration {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  position: fixed;
+  justify-content: space-between;
+  align-items: center;
+  top: 15px;
+  margin-left: 10px;
+  i {
+    font-size: 20px;
+    margin-right: 20px;
+    &:hover {
+      cursor: pointer;
+      color: red;
+    }
+  }
+}
+
+:deep(.el-divider--horizontal) {
+  width: 90%;
+  margin: 20px auto 0 auto;
+}
 </style>

src/layout/components/setting/index.vue

@@ -15,6 +15,14 @@
         <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
       </li>
     </ul>
+    <el-divider />
+    <vxe-button
+      status="danger"
+      style="width: 90%;margin: 24px 15px;"
+      content="清空缓存并返回登录页"
+      icon="fa fa-sign-out"
+      @click="onReset"
+    ></vxe-button>
   </panel>
 </template>
 
@@ -24,11 +32,14 @@ import { onMounted, reactive, toRefs } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { toggleClass } from "/@/utils/operate";
 import { emitter } from "/@/utils/mitt";
+import { useRouter } from "vue-router";
 
 export default {
   name: "setting",
   components: { panel },
   setup() {
+    const router = useRouter();
+
     function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
       const targetEl = target || document.body;
       let { className } = targetEl;
@@ -88,12 +99,18 @@ export default {
       emitter.emit("tagViewsChange", showVal);
     };
 
+    function onReset() {
+      storageLocal.clear();
+      router.push("/login");
+    }
+
     return {
       ...toRefs(settings),
       localOperate,
       greyChange,
       weekChange,
-      tagsChange
+      tagsChange,
+      onReset
     };
   }
 };

src/plugins/i18n/config.ts

@@ -68,6 +68,7 @@ export const buttonConfig = {
       hssearch: "搜索",
       hsexpendAll: "全部展开",
       hscollapseAll: "全部折叠",
+      hssystemSet: "系统设置",
     },
   },
   en: {
@@ -84,6 +85,7 @@ export const buttonConfig = {
       hssearch: "Search",
       hsexpendAll: "Expand All",
       hscollapseAll: "Collapse All",
+      hssystemSet: "System Set",
     },
   },
 };

src/style/sidebar.scss

@@ -70,6 +70,7 @@
 
     .is-active > .el-submenu__title,
     .is-active > .el-submenu__title i {
+      transition: color 0.3s;
       color: $subMenuActiveText !important;
     }
 

src/utils/storage/index.ts

@@ -1,42 +1,46 @@
 interface ProxyStorage {
-  getItem(key: string): any
-  setItem(Key: string, value: string): void
-  removeItem(key: string): void
+  getItem(key: string): any;
+  setItem(Key: string, value: string): void;
+  removeItem(key: string): void;
+  clear(): void;
 }
 
 //sessionStorage operate
 class sessionStorageProxy implements ProxyStorage {
-
-  protected storage: ProxyStorage
+  protected storage: ProxyStorage;
 
   constructor(storageModel: ProxyStorage) {
-    this.storage = storageModel
+    this.storage = storageModel;
   }
 
   // 存
   public setItem(key: string, value: any): void {
-    this.storage.setItem(key, JSON.stringify(value))
+    this.storage.setItem(key, JSON.stringify(value));
   }
 
   // 取
   public getItem(key: string): any {
-    return JSON.parse(this.storage.getItem(key)) || null
+    return JSON.parse(this.storage.getItem(key)) || null;
   }
 
   // 删
   public removeItem(key: string): void {
-    this.storage.removeItem(key)
+    this.storage.removeItem(key);
   }
 
+  // 清空
+  public clear(): void {
+    this.storage.clear();
+  }
 }
 
 //localStorage operate
 class localStorageProxy extends sessionStorageProxy implements ProxyStorage {
   constructor(localStorage: ProxyStorage) {
-    super(localStorage)
+    super(localStorage);
   }
 }
 
-export const storageSession = new sessionStorageProxy(sessionStorage)
+export const storageSession = new sessionStorageProxy(sessionStorage);
 
-export const storageLocal = new localStorageProxy(localStorage)
+export const storageLocal = new localStorageProxy(localStorage);