fix: 🐛 代码规范检测问题修复

Former-commit-id: 6e75bc91ce33ea9e7a17fbcb896f086f768896f4

src/components/RightPanel/index.vue

@@ -1,45 +1,45 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-import { addClass, removeClass } from '@/utils/index';
+import { addClass, removeClass } from "@/utils/index";
 
 const show = ref(false);
 
 defineProps({
   buttonTop: {
     default: 250,
-    type: Number
-  }
+    type: Number,
+  },
 });
 
-watch(show, value => {
+watch(show, (value) => {
   if (value) {
     addEventClick();
   }
   if (value) {
-    addClass(document.body, 'showRightPanel');
+    addClass(document.body, "showRightPanel");
   } else {
-    removeClass(document.body, 'showRightPanel');
+    removeClass(document.body, "showRightPanel");
   }
 });
 
 function addEventClick() {
-  window.addEventListener('click', closeSidebar, { passive: true });
+  window.addEventListener("click", closeSidebar, { passive: true });
 }
 
 function closeSidebar(evt: any) {
   // 主题选择点击不关闭
-  let parent = evt.target.closest('.right-panel-container');
+  let parent = evt.target.closest(".right-panel-container");
   if (!parent) {
     show.value = false;
-    window.removeEventListener('click', closeSidebar);
+    window.removeEventListener("click", closeSidebar);
   }
 }
 
 const rightPanel = ref();
 
 function insertToBody() {
-  const body = document.querySelector('body') as any;
+  const body = document.querySelector("body") as any;
   body.insertBefore(rightPanel.value, body.firstChild);
 }
 
@@ -59,7 +59,7 @@ onBeforeUnmount(() => {
       <div
         class="right-panel-btn"
         :style="{
-          top: buttonTop + 'px'
+          top: buttonTop + 'px',
         }"
         @click="show = !show"
       >
@@ -75,38 +75,40 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .showRightPanel {
-  overflow: hidden;
   position: relative;
   width: calc(100% - 15px);
+  overflow: hidden;
 }
+
 .right-panel-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(0 0 0 / 20%);
 }
 
 .right-panel-container {
-  background-color: var(--el-bg-color-overlay);
-  width: 100%;
-  max-width: 300px;
-  height: 100vh;
   position: fixed;
   top: 0;
   right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+  z-index: 999;
+  width: 100%;
+  max-width: 300px;
+  height: 100vh;
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  z-index: 999;
 }
 
 .show {
   transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
   .right-panel-overlay {
     z-index: 99;
-    opacity: 1;
     width: 100%;
     height: 100%;
+    opacity: 1;
   }
 
   .right-panel-container {
@@ -115,19 +117,20 @@ onBeforeUnmount(() => {
 }
 
 .right-panel-btn {
-  background-color: var(--el-color-primary);
-  color: var(--el-color-white);
+  position: absolute;
+  left: -36px;
   width: 36px;
   height: 36px;
-  left: -36px;
-  position: absolute;
+  color: var(--el-color-white);
   text-align: center;
-  border-radius: 6px 0 0 6px;
   cursor: pointer;
+  background-color: var(--el-color-primary);
+  border-radius: 6px 0 0 6px;
+
   svg {
-    vertical-align: -10px;
     width: 20px;
     height: 20px;
+    vertical-align: -10px;
   }
 }
 </style>