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
     };
   }
 };