From 0605f89a675849f84971724a85f77639bf2feeed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 15 Apr 2023 23:51:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BB=A3=E7=A0=81=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83=E6=A3=80=E6=B5=8B=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 6e75bc91ce33ea9e7a17fbcb896f086f768896f4
---
 src/components/Breadcrumb/index.vue           |  28 ++---
 src/components/GithubCorner/index.vue         |  13 +-
 src/components/Hamburger/index.vue            |   9 +-
 src/components/IconSelect/index.vue           |  32 ++---
 src/components/Pagination/index.vue           |  39 +++---
 src/components/RightPanel/index.vue           |  57 ++++-----
 src/components/SvgIcon/index.vue              |  16 +--
 src/components/Upload/SingleUpload.vue        |  28 ++---
 src/layout/components/AppMain.vue             |   9 +-
 src/layout/components/Navbar.vue              |  41 +++----
 src/layout/components/Settings/index.vue      | 111 ++++++++----------
 src/layout/components/TagsView/ScrollPane.vue |  32 +++--
 src/layout/components/TagsView/index.vue      |  81 +++++++------
 src/layout/index.vue                          |  38 +++---
 src/styles/dark.scss                          |  32 ++---
 src/styles/index.scss                         |  26 ++--
 src/styles/reset.scss                         |  48 ++++----
 src/styles/sidebar.scss                       |  48 ++++----
 src/styles/variables.scss                     |  19 ++-
 src/views/dashboard/index.vue                 |  58 ++++-----
 src/views/demo/apidoc.vue                     |   6 +-
 src/views/error-page/401.vue                  |  16 +--
 src/views/error-page/404.vue                  |  40 +++----
 src/views/login/index.vue                     |  63 +++++-----
 24 files changed, 440 insertions(+), 450 deletions(-)

diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index d582fac6..a17fc3f0 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, watch } from 'vue';
-import { useRoute, RouteLocationMatched } from 'vue-router';
-import { compile } from 'path-to-regexp';
-import router from '@/router';
-import { translateRouteTitleI18n } from '@/utils/i18n';
+import { onBeforeMount, ref, watch } from "vue";
+import { useRoute, RouteLocationMatched } from "vue-router";
+import { compile } from "path-to-regexp";
+import router from "@/router";
+import { translateRouteTitleI18n } from "@/utils/i18n";
 
 const currentRoute = useRoute();
 const pathCompile = (path: string) => {
@@ -35,15 +35,15 @@ const breadcrumbs = ref([] as Array<RouteLocationMatched>);
 
 function getBreadcrumb() {
   let matched = currentRoute.matched.filter(
-    item => item.meta && item.meta.title
+    (item) => item.meta && item.meta.title
   );
   const first = matched[0];
   if (!isDashboard(first)) {
     matched = [
-      { path: '/dashboard', meta: { title: 'dashboard' } } as any
+      { path: "/dashboard", meta: { title: "dashboard" } } as any,
     ].concat(matched);
   }
-  breadcrumbs.value = matched.filter(item => {
+  breadcrumbs.value = matched.filter((item) => {
     return item.meta && item.meta.title && item.meta.breadcrumb !== false;
   });
 }
@@ -55,27 +55,27 @@ function isDashboard(route: RouteLocationMatched) {
   }
   return (
     name.toString().trim().toLocaleLowerCase() ===
-    'Dashboard'.toLocaleLowerCase()
+    "Dashboard".toLocaleLowerCase()
   );
 }
 
 function handleLink(item: any) {
   const { redirect, path } = item;
   if (redirect) {
-    router.push(redirect).catch(err => {
+    router.push(redirect).catch((err) => {
       console.warn(err);
     });
     return;
   }
-  router.push(pathCompile(path)).catch(err => {
+  router.push(pathCompile(path)).catch((err) => {
     console.warn(err);
   });
 }
 
 watch(
   () => currentRoute.path,
-  path => {
-    if (path.startsWith('/redirect/')) {
+  (path) => {
+    if (path.startsWith("/redirect/")) {
       return;
     }
     getBreadcrumb();
@@ -90,9 +90,9 @@ onBeforeMount(() => {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
+  margin-left: 8px;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
 }
 
 // 覆盖 element-plus 的样式
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index c9a4b324..6fadd6c4 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -9,7 +9,7 @@
       width="80"
       height="80"
       viewBox="0 0 250 250"
-      style="fill: #40c9c6; color: #fff"
+      style="color: #fff; fill: #40c9c6"
       aria-hidden="true"
     >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@@ -38,22 +38,25 @@
   100% {
     transform: rotate(0);
   }
+
   20%,
   60% {
     transform: rotate(-25deg);
   }
+
   40%,
   80% {
     transform: rotate(10deg);
   }
 }
 
-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    animation: none;
-  }
+@media (width <= 500px) {
   .github-corner .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }
+
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
 }
 </style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 6af6c414..374a1b50 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -22,14 +22,14 @@ defineProps({
   isActive: {
     required: true,
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
-const emit = defineEmits(['toggleClick']);
+const emit = defineEmits(["toggleClick"]);
 
 function toggleClick() {
-  emit('toggleClick');
+  emit("toggleClick");
 }
 </script>
 
@@ -38,6 +38,7 @@ function toggleClick() {
   width: 20px;
   height: 20px;
   vertical-align: -4px;
+
   &.is-active {
     transform: rotate(180deg);
   }
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 88c834eb..1f8c57b4 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -2,18 +2,18 @@
 const props = defineProps({
   modelValue: {
     type: String,
-    require: false
-  }
+    require: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue']);
-const inputValue = toRef(props, 'modelValue');
+const emit = defineEmits(["update:modelValue"]);
+const inputValue = toRef(props, "modelValue");
 
 const visible = ref(false); // 弹窗显示状态
 
 const iconNames: string[] = []; // 所有的图标名称集合
 
-const filterValue = ref(''); // 筛选的值
+const filterValue = ref(""); // 筛选的值
 const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
 
 const iconSelectorRef = ref(null);
@@ -21,9 +21,9 @@ const iconSelectorRef = ref(null);
  * icon 加载
  */
 function loadIcons() {
-  const icons = import.meta.glob('../../assets/icons/*.svg');
+  const icons = import.meta.glob("../../assets/icons/*.svg");
   for (const icon in icons) {
-    const iconName = icon.split('assets/icons/')[1].split('.svg')[0];
+    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
     iconNames.push(iconName);
   }
   filterIconNames.value = iconNames;
@@ -34,7 +34,7 @@ function loadIcons() {
  */
 function handleFilter() {
   if (filterValue.value) {
-    filterIconNames.value = iconNames.filter(iconName =>
+    filterIconNames.value = iconNames.filter((iconName) =>
       iconName.includes(filterValue.value)
     );
   } else {
@@ -46,7 +46,7 @@ function handleFilter() {
  * icon 选择
  */
 function handleSelect(iconName: string) {
-  emit('update:modelValue', iconName);
+  emit("update:modelValue", iconName);
   visible.value = false;
 }
 
@@ -125,6 +125,7 @@ onMounted(() => {
 .el-divider--horizontal {
   margin: 10px auto !important;
 }
+
 .iconselect-container {
   position: relative;
   width: 400px;
@@ -137,18 +138,19 @@ onMounted(() => {
   margin-top: 10px;
 
   .icon-item {
-    cursor: pointer;
-    width: 10%;
-    margin: 0 10px 10px 0;
-    padding: 5px;
     display: flex;
     flex-direction: column;
-    justify-items: center;
     align-items: center;
+    justify-items: center;
+    width: 10%;
+    padding: 5px;
+    margin: 0 10px 10px 0;
+    cursor: pointer;
     border: 1px solid #ccc;
+
     &:hover {
-      border-color: var(--el-color-primary);
       color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
       transition: all 0.2s;
       transform: scaleX(1.1);
     }
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 32737e69..7e1c82bd 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -14,54 +14,54 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue';
-import { scrollTo } from '@/utils/scroll-to';
+import { computed, PropType } from "vue";
+import { scrollTo } from "@/utils/scroll-to";
 
 const props = defineProps({
   total: {
     required: true,
     type: Number as PropType<number>,
-    default: 0
+    default: 0,
   },
   page: {
     type: Number,
-    default: 1
+    default: 1,
   },
   limit: {
     type: Number,
-    default: 20
+    default: 20,
   },
   pageSizes: {
     type: Array as PropType<number[]>,
     default() {
       return [10, 20, 30, 50];
-    }
+    },
   },
   layout: {
     type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
+    default: "total, sizes, prev, pager, next, jumper",
   },
   background: {
     type: Boolean,
-    default: true
+    default: true,
   },
   autoScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
   hidden: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
+const emit = defineEmits(["update:page", "update:limit", "pagination"]);
 
 const currentPage = computed<number | undefined>({
   get: () => props.page,
-  set: value => {
-    emit('update:page', value);
-  }
+  set: (value) => {
+    emit("update:page", value);
+  },
 });
 
 const pageSize = computed<number | undefined>({
@@ -69,12 +69,12 @@ const pageSize = computed<number | undefined>({
     return props.limit;
   },
   set(val) {
-    emit('update:limit', val);
-  }
+    emit("update:limit", val);
+  },
 });
 
 function handleSizeChange(val: number) {
-  emit('pagination', { page: currentPage, limit: val });
+  emit("pagination", { page: currentPage, limit: val });
   if (props.autoScroll) {
     scrollTo(0, 800);
   }
@@ -82,7 +82,7 @@ function handleSizeChange(val: number) {
 
 function handleCurrentChange(val: number) {
   currentPage.value = val;
-  emit('pagination', { page: val, limit: props.limit });
+  emit("pagination", { page: val, limit: props.limit });
   if (props.autoScroll) {
     scrollTo(0, 800);
   }
@@ -92,6 +92,7 @@ function handleCurrentChange(val: number) {
 <style lang="scss" scoped>
 .pagination {
   padding: 12px;
+
   &.hidden {
     display: none;
   }
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 43c6afcf..08f5966e 100644
--- a/src/components/RightPanel/index.vue
+++ b/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>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index a595ca08..e9d145e3 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -12,19 +12,19 @@
 const props = defineProps({
   prefix: {
     type: String,
-    default: 'icon'
+    default: "icon",
   },
   iconClass: {
     type: String,
-    required: false
+    required: false,
   },
   color: {
-    type: String
+    type: String,
   },
   size: {
     type: String,
-    default: '1em'
-  }
+    default: "1em",
+  },
 });
 
 const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
@@ -33,11 +33,11 @@ const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
 <style scoped>
 .svg-icon {
   display: inline-block;
-  outline: none;
   width: 1em;
   height: 1em;
-  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
-  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
   overflow: hidden;
+  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  outline: none;
+  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
 }
 </style>
diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 33348fc7..0f2e8341 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -14,16 +14,16 @@
 </template>
 
 <script setup lang="ts">
-import { UploadRawFile, UploadRequestOptions } from 'element-plus';
-import { uploadFileApi } from '@/api/file';
+import { UploadRawFile, UploadRequestOptions } from "element-plus";
+import { uploadFileApi } from "@/api/file";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: ''
-  }
+    default: "",
+  },
 });
 
 const imgUrl = computed<string | undefined>({
@@ -32,8 +32,8 @@ const imgUrl = computed<string | undefined>({
   },
   set(val) {
     // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit('update:modelValue', val);
-  }
+    emit("update:modelValue", val);
+  },
 });
 
 /**
@@ -51,7 +51,7 @@ async function uploadFile(options: UploadRequestOptions): Promise<any> {
  */
 function handleBeforeUpload(file: UploadRawFile) {
   if (file.size > 2 * 1048 * 1048) {
-    ElMessage.warning('上传图片不能大于2M');
+    ElMessage.warning("上传图片不能大于2M");
     return false;
   }
   return true;
@@ -60,19 +60,19 @@ function handleBeforeUpload(file: UploadRawFile) {
 
 <style scoped>
 .single-uploader .single {
+  display: block;
   width: 178px;
   height: 178px;
-  display: block;
 }
 </style>
 
 <style>
 .single-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
   position: relative;
   overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
   transition: var(--el-transition-duration-fast);
 }
 
@@ -81,10 +81,10 @@ function handleBeforeUpload(file: UploadRawFile) {
 }
 
 .el-icon.single-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
   width: 178px;
   height: 178px;
+  font-size: 28px;
+  color: #8c939d;
   text-align: center;
 }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 224f9240..0de8378a 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTagsViewStore } from '@/store/modules/tagsView';
+import { useTagsViewStore } from "@/store/modules/tagsView";
 
 const tagsViewStore = useTagsViewStore();
 </script>
@@ -18,10 +18,11 @@ const tagsViewStore = useTagsViewStore();
 
 <style lang="scss" scoped>
 .app-main {
+  position: relative;
+  width: 100%;
+
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
   overflow: hidden;
   background-color: var(--el-bg-color-page);
 }
@@ -37,8 +38,8 @@ const tagsViewStore = useTagsViewStore();
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
     min-height: 100vh;
+    padding-top: 84px;
   }
 }
 </style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 7bf14c33..90a9fc0f 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { useRoute, useRouter } from 'vue-router';
-import { useAppStore } from '@/store/modules/app';
-import { useTagsViewStore } from '@/store/modules/tagsView';
-import { useUserStore } from '@/store/modules/user';
+import { storeToRefs } from "pinia";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store/modules/app";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useUserStore } from "@/store/modules/user";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -20,10 +20,10 @@ function toggleSideBar() {
 
 // 注销
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
   }).then(() => {
     userStore
       .logout()
@@ -76,19 +76,19 @@ function logout() {
         <template #dropdown>
           <el-dropdown-menu>
             <router-link to="/">
-              <el-dropdown-item>{{ $t('navbar.dashboard') }}</el-dropdown-item>
+              <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
             </router-link>
             <a target="_blank" href="https://github.com/hxrui">
               <el-dropdown-item>Github</el-dropdown-item>
             </a>
             <a target="_blank" href="https://gitee.com/haoxr">
-              <el-dropdown-item>{{ $t('navbar.gitee') }}</el-dropdown-item>
+              <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
             </a>
             <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
-              <el-dropdown-item>{{ $t('navbar.document') }}</el-dropdown-item>
+              <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
             </a>
             <el-dropdown-item divided @click="logout">
-              {{ $t('navbar.logout') }}
+              {{ $t("navbar.logout") }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
@@ -99,23 +99,24 @@ function logout() {
 
 <style lang="scss" scoped>
 .navbar {
-  background-color: #fff;
-  height: 50px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 50px;
+  background-color: #fff;
   box-shadow: 0 0 1px #0003;
 
   .navbar-setting-item {
+    display: inline-block;
+    width: 30px;
     height: 50px;
     line-height: 50px;
-    width: 30px;
-    display: inline-block;
-    cursor: pointer;
-    text-align: center;
     color: #5a5e66;
+    text-align: center;
+    cursor: pointer;
+
     &:hover {
-      background: rgba(249, 250, 251, 1);
+      background: rgb(249 250 251 / 100%);
     }
   }
 }
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index d00447fb..08b4af7f 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useSettingsStore } from '@/store/modules/settings';
+import { useSettingsStore } from "@/store/modules/settings";
 
-import IconEpSunny from '~icons/ep/sunny';
-import IconEpMoon from '~icons/ep/moon';
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
 
 /**
  * 暗黑模式
@@ -15,30 +15,30 @@ const toggleDark = () => useToggle(isDark);
  * 切换布局
  */
 function changeLayout(layout: string) {
-  settingsStore.changeSetting({ key: 'layout', value: layout });
-  window.document.body.setAttribute('layout', settingsStore.layout);
+  settingsStore.changeSetting({ key: "layout", value: layout });
+  window.document.body.setAttribute("layout", settingsStore.layout);
 }
 
 // 主题颜色
 const themeColors = ref<string[]>([
-  '#409EFF',
-  '#304156',
-  '#11a983',
-  '#13c2c2',
-  '#6959CD',
-  '#f5222d'
+  "#409EFF",
+  "#304156",
+  "#11a983",
+  "#13c2c2",
+  "#6959CD",
+  "#f5222d",
 ]);
 
 /**
  * 切换主题颜色
  */
 function changeThemeColor(color: string) {
-  document.documentElement.style.setProperty('--el-color-primary', color);
-  settingsStore.changeSetting({ key: 'layout', value: color });
+  document.documentElement.style.setProperty("--el-color-primary", color);
+  settingsStore.changeSetting({ key: "layout", value: color });
 }
 
 onMounted(() => {
-  window.document.body.setAttribute('layout', settingsStore.layout);
+  window.document.body.setAttribute("layout", settingsStore.layout);
 });
 </script>
 
@@ -133,6 +133,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;
+
   .layout {
     display: flex;
     flex-wrap: wrap;
@@ -141,67 +142,57 @@ onMounted(() => {
     height: 50px;
 
     &-item {
+      position: relative;
       width: 18%;
       height: 45px;
-      background: #f0f2f5;
-      position: relative;
       overflow: hidden;
       cursor: pointer;
+      background: #f0f2f5;
       border-radius: 4px;
     }
+
     &-item.is-active {
       border: 2px solid var(--el-color-primary);
     }
-    &-left {
-      div {
-        &:nth-child(1) {
-          width: 30%;
-          height: 100%;
-          background: #1b2a47;
-        }
 
-        &:nth-child(2) {
-          width: 70%;
-          height: 30%;
-          top: 0;
-          right: 0;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
-          position: absolute;
-        }
-      }
+    &-mix div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
     }
 
-    &-top {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          background: #1b2a47;
-          box-shadow: 0 0 1px #888;
-        }
-      }
+    &-mix div:nth-child(2) {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 30%;
+      height: 70%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
     }
 
-    &-mix {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          background: #1b2a47;
-          box-shadow: 0 0 1px #888;
-        }
+    &-top div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
 
-        &:nth-child(2) {
-          width: 30%;
-          height: 70%;
-          bottom: 0;
-          left: 0;
-          background: #1b2a47;
-          box-shadow: 0 0 1px #888;
-          position: absolute;
-        }
-      }
+    &-left div:nth-child(1) {
+      width: 30%;
+      height: 100%;
+      background: #1b2a47;
+    }
+
+    &-left div:nth-child(2) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 70%;
+      height: 30%;
+      background: #fff;
+      box-shadow: 0 0 1px #888;
     }
   }
 }
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index dd76e937..f2b7e7aa 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
+import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
 
 const tagAndTagSpacing = ref(4);
 const { proxy } = getCurrentInstance() as any;
 
-const emits = defineEmits(['scroll']);
+const emits = defineEmits(["scroll"]);
 const emitScroll = () => {
-  emits('scroll');
+  emits("scroll");
 };
 
 const tagsViewStore = useTagsViewStore();
@@ -16,10 +16,10 @@ const scrollWrapper = computed(
 );
 
 onMounted(() => {
-  scrollWrapper.value.addEventListener('scroll', emitScroll, true);
+  scrollWrapper.value.addEventListener("scroll", emitScroll, true);
 });
 onBeforeUnmount(() => {
-  scrollWrapper.value.removeEventListener('scroll', emitScroll);
+  scrollWrapper.value.removeEventListener("scroll", emitScroll);
 });
 
 function handleScroll(e: WheelEvent) {
@@ -47,14 +47,14 @@ function moveToTarget(currentTag: TagView) {
   } else if (lastTag === currentTag) {
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
   } else {
-    const tagListDom = document.getElementsByClassName('tags-item');
+    const tagListDom = document.getElementsByClassName("tags-item");
     const currentIndex = tagsViewStore.visitedViews.findIndex(
-      item => item === currentTag
+      (item) => item === currentTag
     );
     let prevTag = null;
     let nextTag = null;
     for (const k in tagListDom) {
-      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+      if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
         if (
           (tagListDom[k] as any).dataset.path ===
           tagsViewStore.visitedViews[currentIndex - 1].path
@@ -88,7 +88,7 @@ function moveToTarget(currentTag: TagView) {
 }
 
 defineExpose({
-  moveToTarget
+  moveToTarget,
 });
 </script>
 
@@ -105,19 +105,17 @@ defineExpose({
 
 <style lang="scss" scoped>
 .scroll-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+
   .el-scrollbar__bar {
-    bottom: 0px;
+    bottom: 0;
   }
 
   .el-scrollbar__wrap {
     height: 49px;
   }
 }
-
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
 </style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 8723bad2..4f920ae4 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -5,19 +5,19 @@ import {
   ref,
   watch,
   onMounted,
-  ComponentInternalInstance
-} from 'vue';
-import { storeToRefs } from 'pinia';
+  ComponentInternalInstance,
+} from "vue";
+import { storeToRefs } from "pinia";
 
-import path from 'path-browserify';
+import path from "path-browserify";
 
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from "vue-router";
 
-import { translateRouteTitleI18n } from '@/utils/i18n';
+import { translateRouteTitleI18n } from "@/utils/i18n";
 
-import { usePermissionStore } from '@/store/modules/permission';
-import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
-import ScrollPane from './ScrollPane.vue';
+import { usePermissionStore } from "@/store/modules/permission";
+import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
+import ScrollPane from "./ScrollPane.vue";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const router = useRouter();
@@ -42,30 +42,30 @@ watch(
   },
   {
     //初始化立即执行
-    immediate: true
+    immediate: true,
   }
 );
 
 const tagMenuVisible = ref(false); // 标签操作菜单显示状态
-watch(tagMenuVisible, value => {
+watch(tagMenuVisible, (value) => {
   if (value) {
-    document.body.addEventListener('click', closeTagMenu);
+    document.body.addEventListener("click", closeTagMenu);
   } else {
-    document.body.removeEventListener('click', closeTagMenu);
+    document.body.removeEventListener("click", closeTagMenu);
   }
 });
 
-function filterAffixTags(routes: any[], basePath = '/') {
+function filterAffixTags(routes: any[], basePath = "/") {
   let tags: TagView[] = [];
 
-  routes.forEach(route => {
+  routes.forEach((route) => {
     if (route.meta && route.meta.affix) {
       const tagPath = path.resolve(basePath, route.path);
       tags.push({
         fullPath: tagPath,
         path: tagPath,
         name: route.name,
-        meta: { ...route.meta }
+        meta: { ...route.meta },
       });
     }
 
@@ -123,7 +123,7 @@ function isFirstView() {
     return (
       (selectedTag.value as TagView).fullPath ===
         tagsViewStore.visitedViews[1].fullPath ||
-      (selectedTag.value as TagView).fullPath === '/index'
+      (selectedTag.value as TagView).fullPath === "/index"
     );
   } catch (err) {
     return false;
@@ -145,7 +145,7 @@ function refreshSelectedTag(view: TagView) {
   tagsViewStore.delCachedView(view);
   const { fullPath } = view;
   nextTick(() => {
-    router.replace({ path: '/redirect' + fullPath }).catch(err => {
+    router.replace({ path: "/redirect" + fullPath }).catch((err) => {
       console.warn(err);
     });
   });
@@ -158,11 +158,11 @@ function toLastView(visitedViews: TagView[], view?: any) {
   } else {
     // now the default is to redirect to the home page if there is no tags-view,
     // you can adjust it according to your needs.
-    if (view.name === 'Dashboard') {
+    if (view.name === "Dashboard") {
       // to reload home page
-      router.replace({ path: '/redirect' + view.fullPath });
+      router.replace({ path: "/redirect" + view.fullPath });
     } else {
-      router.push('/');
+      router.push("/");
     }
   }
 }
@@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
 function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
 
-  console.log('test', proxy?.$el);
+  console.log("test", proxy?.$el);
 
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -300,18 +300,19 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .tags-container {
-  height: 34px;
   width: 100%;
-  border: 1px solid var(--el-border-color-light);
-  box-shadow: 0px 1px 1px var(--el-box-shadow-light);
+  height: 34px;
   background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: 0 1px 1px var(--el-box-shadow-light);
+
   .tags-item {
     display: inline-block;
+    padding: 3px 8px;
+    margin: 4px 0 0 5px;
+    font-size: 12px;
     cursor: pointer;
     border: 1px solid var(--el-border-color-light);
-    padding: 3px 8px;
-    font-size: 12px;
-    margin: 4px 0 0 5px;
 
     &:first-of-type {
       margin-left: 15px;
@@ -326,46 +327,44 @@ onMounted(() => {
     }
 
     &.active {
-      background-color: var(--el-color-primary);
       color: #fff;
+      background-color: var(--el-color-primary);
       border-color: var(--el-color-primary);
+
       &::before {
-        content: '';
-        background: #fff;
         display: inline-block;
         width: 8px;
         height: 8px;
-        border-radius: 50%;
         margin-right: 5px;
-      }
-      .tags-item-close {
-        &:hover {
-          background: rgb(0 0 0 / 0.16);
-        }
+        content: "";
+        background: #fff;
+        border-radius: 50%;
       }
     }
 
     &-close {
       border-radius: 100%;
+
       &:hover {
         color: #fff;
-        background: rgb(0 0 0 / 0.16);
+        background: rgb(0 0 0 / 16%);
       }
     }
   }
 }
 
 .tag-menu {
-  background: var(--el-bg-color-overlay);
-  z-index: 99;
   position: absolute;
-  border-radius: 4px;
+  z-index: 99;
   font-size: 12px;
+  background: var(--el-bg-color-overlay);
+  border-radius: 4px;
   box-shadow: var(--el-box-shadow-light);
 
   li {
     padding: 8px 16px;
     cursor: pointer;
+
     &:hover {
       background: var(--el-fill-color-light);
     }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 91de0b17..dda75b38 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue';
-import { useWindowSize } from '@vueuse/core';
-import { AppMain, Navbar, Settings, TagsView } from './components/index';
-import Sidebar from './components/Sidebar/index.vue';
-import RightPanel from '@/components/RightPanel/index.vue';
+import { computed, watchEffect } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { AppMain, Navbar, Settings, TagsView } from "./components/index";
+import Sidebar from "./components/Sidebar/index.vue";
+import RightPanel from "@/components/RightPanel/index.vue";
 
-import { useAppStore } from '@/store/modules/app';
-import { useSettingsStore } from '@/store/modules/settings';
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
 
 const { width } = useWindowSize();
 
@@ -30,15 +30,15 @@ const classObj = computed(() => ({
   hideSidebar: !appStore.sidebar.opened,
   openSidebar: appStore.sidebar.opened,
   withoutAnimation: appStore.sidebar.withoutAnimation,
-  mobile: appStore.device === 'mobile'
+  mobile: appStore.device === "mobile",
 }));
 
 watchEffect(() => {
   if (width.value < WIDTH) {
-    appStore.toggleDevice('mobile');
+    appStore.toggleDevice("mobile");
     appStore.closeSideBar(true);
   } else {
-    appStore.toggleDevice('desktop');
+    appStore.toggleDevice("desktop");
 
     if (width.value >= 1200) {
       //大屏
@@ -84,15 +84,15 @@ function handleOutsideClick() {
 
 <style lang="scss" scoped>
 .app-wrapper {
-  &:after {
-    content: '';
+  &::after {
     display: table;
     clear: both;
+    content: "";
   }
 
   position: relative;
-  height: 100%;
   width: 100%;
+  height: 100%;
 
   &.mobile.openSidebar {
     position: fixed;
@@ -108,20 +108,22 @@ function handleOutsideClick() {
   width: calc(100% - #{$sideBarWidth});
   transition: width 0.28s;
 }
+
 .hideSidebar .fixed-header {
   width: calc(100% - 54px);
 }
+
 .mobile .fixed-header {
   width: 100%;
 }
 
 .drawer-bg {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
   background: #000;
   opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
 }
 </style>
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
index 89bc98c3..0f988d59 100644
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -1,33 +1,33 @@
-html.dark{
-  --menuBg:var(--el-bg-color-overlay);
-  --menuText:#fff;
-  --menuActiveText:var(--el-menu-active-color);
-  --menuHover:rgba(0,0,0,.2);
-
+html.dark {
+  --menuBg: var(--el-bg-color-overlay);
+  --menuText: #fff;
+  --menuActiveText: var(--el-menu-active-color);
+  --menuHover: rgb(0 0 0 / 20%);
   --subMenuBg: var(--el-menu-bg-color);
-  --subMenuActiveText:var(--el-menu-active-color);
-  --subMenuHover: rgba(0,0,0,.2);
-
+  --subMenuActiveText: var(--el-menu-active-color);
+  --subMenuHover: rgb(0 0 0 / 20%);
 
   .navbar {
-    background-color: var(--el-bg-color);
     color: var(--el-text-color-regular);
-    .navbar-setting-item:hover{
+    background-color: var(--el-bg-color);
+
+    .navbar-setting-item:hover {
       background: var(--el-fill-color-light);
     }
   }
 
-  .right-panel-btn{
+  .right-panel-btn {
     background-color: var(--el-color-primary-dark);
   }
-  .svg-icon,svg{
+
+  .svg-icon,
+  svg {
     fill: var(--el-text-color-regular);
   }
 
-
-  .sidebar-container{
+  .sidebar-container {
     .el-menu-item.is-active .svg-icon {
-      fill:  var(--el-color-primary);
+      fill: var(--el-color-primary);
     }
   }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6d465bfd..5f0e69f0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,18 +1,16 @@
-@import './sidebar.scss';
-@import './reset.scss';
-@import './dark.scss';
-
+@import "./sidebar";
+@import "./reset";
+@import "./dark";
 
 .app-container {
-    padding: 20px;
-    .search {
-      padding: 18px 0 0 10px;
-      margin-bottom: 10px;
-      border-radius: 4px;
-      border: 1px solid var(--el-border-color-light);
-      box-shadow: var(--el-box-shadow-light);
-      background-color: var(--el-bg-color-overlay);
+  padding: 20px;
+
+  .search {
+    padding: 18px 0 0 10px;
+    margin-bottom: 10px;
+    background-color: var(--el-bg-color-overlay);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 4px;
+    box-shadow: var(--el-box-shadow-light);
   }
-
 }
-
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index cd586c34..9b19e4c4 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -2,9 +2,9 @@
 ::before,
 ::after {
   box-sizing: border-box;
-  border-width: 0;
+  border-color: currentcolor;
   border-style: solid;
-  border-color: currentColor;
+  border-width: 0;
 }
 
 #app {
@@ -13,69 +13,63 @@
 }
 
 html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
 }
 
 body {
-  margin: 0;
-  line-height: inherit;
   width: 100%;
   height: 100%;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  line-height: inherit;
   -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;
 }
 
-
 a {
   color: inherit;
   text-decoration: inherit;
 }
 
-
 img,
-svg
- {
+svg {
   display: inline-block;
 }
+
 svg {
   vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
 }
 
-
-ul,li{
-  margin: 0;
+ul,
+li {
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
-
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
 
-a:focus,
-a:active ,
-div:focus
-{
-  outline: none;
-}
-
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
   color: inherit;
   text-decoration: none;
+  cursor: pointer;
 }
 
+a:focus,
+a:active,
+div:focus {
+  outline: none;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 45e84090..efaa4e97 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,22 +1,22 @@
 #app {
   .main-container {
-    min-height: 100%;
-    transition: margin-left 0.28s;
-    margin-left: $sideBarWidth;
     position: relative;
+    min-height: 100%;
+    margin-left: $sideBarWidth;
+    transition: margin-left 0.28s;
   }
 
   .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
-    height: 100%;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
     overflow: hidden;
+    background-color: $menuBg;
+    transition: width 0.28s;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -29,7 +29,7 @@
     }
 
     .el-scrollbar__bar.is-vertical {
-      right: 0px;
+      right: 0;
     }
 
     .el-scrollbar {
@@ -46,7 +46,6 @@
       display: none;
     }
 
-
     .svg-icon {
       margin-right: 16px;
     }
@@ -57,9 +56,9 @@
     }
 
     .el-menu {
-      border: none;
-      height: 100%;
       width: 100% !important;
+      height: 100%;
+      border: none;
     }
 
     // menu hover
@@ -69,11 +68,11 @@
       }
     }
 
-    .is-active>.el-sub-menu__title {
+    .is-active > .el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -89,7 +88,7 @@
       width: 54px !important;
 
       .svg-icon {
-        margin-right: 0px;
+        margin-right: 0;
       }
     }
 
@@ -100,7 +99,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      &>.el-sub-menu__title {
+      & > .el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -119,13 +118,13 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        &>.el-sub-menu__title {
-          &>span {
-            height: 0;
+        & > .el-sub-menu__title {
+          & > span {
+            display: inline-block;
             width: 0;
+            height: 0;
             overflow: hidden;
             visibility: hidden;
-            display: inline-block;
           }
         }
       }
@@ -139,12 +138,12 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .sidebar-container {
-      transition: transform 0.28s;
       width: $sideBarWidth !important;
+      transition: transform 0.28s;
     }
 
     &.hideSidebar {
@@ -157,7 +156,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -167,7 +165,7 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
@@ -178,7 +176,7 @@
     }
   }
 
-  .nest-menu .el-sub-menu>.el-sub-menu__title,
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -187,7 +185,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0c6d3868..e11df304 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,25 +1,22 @@
 // 全局SCSS变量
 
-:root{
-  --menuBg:#304156;
-  --menuText:#bfcbd9;
-  --menuActiveText:#409eff;
-  --menuHover:#263445;
-
+:root {
+  --menuBg: #304156;
+  --menuText: #bfcbd9;
+  --menuActiveText: #409eff;
+  --menuHover: #263445;
   --subMenuBg: #1f2d3d;
   --subMenuActiveText: #f4f4f5;
   --subMenuHover: #001528;
-
 }
 
-
 $menuBg: var(--menuBg);
 $menuText: var(--menuText);
 $menuActiveText: var(--menuActiveText);
 $menuHover: var(--menuHover);
 
-$subMenuBg:var(--subMenuBg);
-$subMenuActiveText:var(--subMenuActiveText);
-$subMenuHover:var(--subMenuHover);
+$subMenuBg: var(--subMenuBg);
+$subMenuActiveText: var(--subMenuActiveText);
+$subMenuHover: var(--subMenuHover);
 
 $sideBarWidth: 210px;
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 900c3a2c..7df0c778 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,16 +1,16 @@
 <script lang="ts">
-export default { name: 'Dashboard' };
+export default { name: "Dashboard" };
 </script>
 
 <script setup lang="ts">
-import { useUserStore } from '@/store/modules/user';
-import { useTransition, TransitionPresets } from '@vueuse/core';
+import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
 
-import GithubCorner from '@/components/GithubCorner/index.vue';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import BarChart from './components/BarChart.vue';
-import PieChart from './components/PieChart.vue';
-import RadarChart from './components/RadarChart.vue';
+import GithubCorner from "@/components/GithubCorner/index.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import BarChart from "./components/BarChart.vue";
+import PieChart from "./components/PieChart.vue";
+import RadarChart from "./components/RadarChart.vue";
 
 const userStore = useUserStore();
 
@@ -18,15 +18,15 @@ const date: Date = new Date();
 
 const greetings = computed(() => {
   if (date.getHours() >= 6 && date.getHours() < 8) {
-    return '晨起披衣出草堂，轩窗已自喜微凉🌅！';
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
   } else if (date.getHours() >= 8 && date.getHours() < 12) {
-    return '上午好🌞！';
+    return "上午好🌞！";
   } else if (date.getHours() >= 12 && date.getHours() < 18) {
-    return '下午好☕！';
+    return "下午好☕！";
   } else if (date.getHours() >= 18 && date.getHours() < 24) {
-    return '晚上好🌃！';
+    return "晚上好🌃！";
   } else if (date.getHours() >= 0 && date.getHours() < 6) {
-    return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
   }
 });
 
@@ -36,7 +36,7 @@ const duration = 5000;
 const amount = ref(0);
 const amountOutput = useTransition(amount, {
   duration: duration,
-  transition: TransitionPresets.easeOutExpo
+  transition: TransitionPresets.easeOutExpo,
 });
 amount.value = 2000;
 
@@ -44,7 +44,7 @@ amount.value = 2000;
 const visitCount = ref(0);
 const visitCountOutput = useTransition(visitCount, {
   duration: duration,
-  transition: TransitionPresets.easeOutExpo
+  transition: TransitionPresets.easeOutExpo,
 });
 visitCount.value = 2000;
 
@@ -52,7 +52,7 @@ visitCount.value = 2000;
 const messageCount = ref(0);
 const messageCountOutput = useTransition(messageCount, {
   duration: duration,
-  transition: TransitionPresets.easeOutExpo
+  transition: TransitionPresets.easeOutExpo,
 });
 messageCount.value = 2000;
 
@@ -60,7 +60,7 @@ messageCount.value = 2000;
 const orderCount = ref(0);
 const orderCountOutput = useTransition(orderCount, {
   duration: duration,
-  transition: TransitionPresets.easeOutExpo
+  transition: TransitionPresets.easeOutExpo,
 });
 orderCount.value = 2000;
 </script>
@@ -215,34 +215,36 @@ orderCount.value = 2000;
 
 <style lang="scss" scoped>
 .dashboard-container {
-  padding: 24px;
   position: relative;
+  padding: 24px;
+
   .user-avatar {
-    height: 40px;
     width: 40px;
+    height: 40px;
     border-radius: 50%;
   }
 
   .github-corner {
     position: absolute;
-    top: 0px;
-    border: 0;
+    top: 0;
     right: 0;
     z-index: 99;
+    border: 0;
   }
 
   .data-box {
-    font-weight: bold;
-    padding: 20px;
-    color: var(--el-text-color-regular);
-    background: var(--el-bg-color-overlay);
-    box-shadow: var(--el-box-shadow-dark);
-    border-color: var(--el-border-color);
     display: flex;
     justify-content: space-between;
+    padding: 20px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
+    box-shadow: var(--el-box-shadow-dark);
   }
+
   .svg-icon {
-    fill: currentColor !important;
+    fill: currentcolor !important;
   }
 }
 </style>
diff --git a/src/views/demo/apidoc.vue b/src/views/demo/apidoc.vue
index efcd6140..1200d7b0 100644
--- a/src/views/demo/apidoc.vue
+++ b/src/views/demo/apidoc.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="app-container">
     <iframe
-      id="apidocIframe"
+      id="apidoc-iframe"
       src="https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5"
       width="100%"
       frameborder="0"
@@ -11,12 +11,12 @@
 </template>
 
 <style lang="scss" scoped>
-#apidocIframe {
+#apidoc-iframe {
   height: calc(100vh - 100px);
 }
 
 .hasTagsView {
-  #apidocIframe {
+  #apidoc-iframe {
     height: calc(100vh - 140px);
   }
 }
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 59b6f1ac..ae91a3e2 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,20 +1,20 @@
 <!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
-  name: 'Page401'
+  name: "Page401",
 };
 </script>
 
 <script setup lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useRouter } from 'vue-router';
+import { reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
 
 const state = reactive({
   errGif: new URL(`../../assets/401_images/401.gif`, import.meta.url).href,
 
   ewizardClap:
-    'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-  dialogVisible: false
+    "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
+  dialogVisible: false,
 });
 
 const { errGif, ewizardClap, dialogVisible } = toRefs(state);
@@ -72,20 +72,20 @@ function back() {
   margin: 100px auto;
 
   .pan-back-btn {
-    background: #008489;
     color: #fff;
+    background: #008489;
     border: none !important;
   }
 
   .pan-gif {
-    margin: 0 auto;
     display: block;
+    margin: 0 auto;
   }
 
   .pan-img {
     display: block;
-    margin: 0 auto;
     width: 100%;
+    margin: 0 auto;
   }
 
   .text-jumbo {
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 85594047..79029400 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -1,13 +1,13 @@
 <!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
-  name: 'Page404'
+  name: "Page404",
 };
 </script>
 
 <script setup lang="ts">
 function message() {
-  return 'The webmaster said that you can not enter this page...';
+  return "The webmaster said that you can not enter this page...";
 }
 </script>
 
@@ -60,10 +60,10 @@ function message() {
 
 <style lang="scss" scoped>
 .wscn-http404-container {
-  transform: translate(-50%, -50%);
   position: absolute;
   top: 40%;
   left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .wscn-http404 {
@@ -86,39 +86,39 @@ function message() {
       position: absolute;
 
       &.left {
-        width: 80px;
         top: 17px;
         left: 220px;
+        width: 80px;
         opacity: 0;
         animation-name: cloudLeft;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1s;
+        animation-fill-mode: forwards;
       }
 
       &.mid {
-        width: 46px;
         top: 10px;
         left: 420px;
+        width: 46px;
         opacity: 0;
         animation-name: cloudMid;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1.2s;
+        animation-fill-mode: forwards;
       }
 
       &.right {
-        width: 62px;
         top: 100px;
         left: 500px;
+        width: 62px;
         opacity: 0;
         animation-name: cloudRight;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1s;
+        animation-fill-mode: forwards;
       }
 
       @keyframes cloudLeft {
@@ -209,24 +209,24 @@ function message() {
     overflow: hidden;
 
     &__oops {
+      margin-bottom: 20px;
       font-size: 32px;
       font-weight: bold;
       line-height: 40px;
       color: #1482f0;
       opacity: 0;
-      margin-bottom: 20px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
 
     &__headline {
+      margin-bottom: 10px;
       font-size: 20px;
+      font-weight: bold;
       line-height: 24px;
       color: #222;
-      font-weight: bold;
       opacity: 0;
-      margin-bottom: 10px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.1s;
@@ -234,11 +234,11 @@ function message() {
     }
 
     &__info {
+      margin-bottom: 30px;
       font-size: 13px;
       line-height: 21px;
       color: grey;
       opacity: 0;
-      margin-bottom: 30px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.2s;
@@ -250,14 +250,14 @@ function message() {
       float: left;
       width: 110px;
       height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
-      text-align: center;
-      color: #ffffff;
-      opacity: 0;
       font-size: 14px;
       line-height: 36px;
+      color: #fff;
+      text-align: center;
       cursor: pointer;
+      background: #1482f0;
+      border-radius: 100px;
+      opacity: 0;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.3s;
@@ -266,13 +266,13 @@ function message() {
 
     @keyframes slideUp {
       0% {
-        transform: translateY(60px);
         opacity: 0;
+        transform: translateY(60px);
       }
 
       100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
       }
     }
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 205e1e2f..5074d38e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -7,7 +7,7 @@
       class="login-form"
     >
       <div class="flex text-white items-center py-4">
-        <span class="text-2xl flex-1 text-center">{{ $t('login.title') }}</span>
+        <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span>
         <lang-select style="color: #fff" />
       </div>
 
@@ -77,30 +77,30 @@
         type="primary"
         class="w-full"
         @click.prevent="handleLogin"
-        >{{ $t('login.login') }}
+        >{{ $t("login.login") }}
       </el-button>
 
       <!-- 账号密码提示 -->
       <div class="mt-4 text-white text-sm">
-        <span>{{ $t('login.username') }}: admin</span>
-        <span class="ml-4"> {{ $t('login.password') }}: 123456</span>
+        <span>{{ $t("login.username") }}: admin</span>
+        <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
       </div>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
-import router from '@/router';
-import LangSelect from '@/components/LangSelect/index.vue';
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import router from "@/router";
+import LangSelect from "@/components/LangSelect/index.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
 // 状态管理依赖
-import { useUserStore } from '@/store/modules/user';
+import { useUserStore } from "@/store/modules/user";
 
 // API依赖
-import { LocationQuery, LocationQueryValue, useRoute } from 'vue-router';
-import { getCaptchaApi } from '@/api/auth';
-import { LoginData } from '@/api/auth/types';
+import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
+import { getCaptchaApi } from "@/api/auth";
+import { LoginData } from "@/api/auth/types";
 
 const userStore = useUserStore();
 const route = useRoute();
@@ -128,14 +128,14 @@ const captchaBase64 = ref();
 const loginFormRef = ref(ElForm);
 
 const loginData = ref<LoginData>({
-  username: 'admin',
-  password: '123456'
+  username: "admin",
+  password: "123456",
 });
 
 const loginRules = {
-  username: [{ required: true, trigger: 'blur' }],
-  password: [{ required: true, trigger: 'blur', validator: passwordValidator }],
-  verifyCode: [{ required: true, trigger: 'blur' }]
+  username: [{ required: true, trigger: "blur" }],
+  password: [{ required: true, trigger: "blur", validator: passwordValidator }],
+  verifyCode: [{ required: true, trigger: "blur" }],
 };
 
 /**
@@ -143,7 +143,7 @@ const loginRules = {
  */
 function passwordValidator(rule: any, value: any, callback: any) {
   if (value.length < 6) {
-    callback(new Error('The password can not be less than 6 digits'));
+    callback(new Error("The password can not be less than 6 digits"));
   } else {
     callback();
   }
@@ -154,7 +154,7 @@ function passwordValidator(rule: any, value: any, callback: any) {
  */
 function checkCapslock(e: any) {
   const { key } = e;
-  isCapslock.value = key && key.length === 1 && key >= 'A' && key <= 'Z';
+  isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
 }
 
 /**
@@ -180,11 +180,11 @@ function handleLogin() {
         .then(() => {
           const query: LocationQuery = route.query;
 
-          const redirect = (query.redirect as LocationQueryValue) ?? '/';
+          const redirect = (query.redirect as LocationQueryValue) ?? "/";
 
           const otherQueryParams = Object.keys(query).reduce(
             (acc: any, cur: string) => {
-              if (cur !== 'redirect') {
+              if (cur !== "redirect") {
                 acc[cur] = query[cur];
               }
               return acc;
@@ -212,10 +212,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .login-container {
-  min-height: 100%;
   width: 100%;
-  background-color: #2d3a4b;
+  min-height: 100%;
   overflow: hidden;
+  background-color: #2d3a4b;
 
   .login-form {
     width: 520px;
@@ -226,12 +226,12 @@ onMounted(() => {
 
     .captcha {
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
 
       img {
-        height: 48px;
         width: 120px;
+        height: 48px;
         cursor: pointer;
       }
     }
@@ -239,8 +239,8 @@ onMounted(() => {
 }
 
 .el-form-item {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: 5px;
 }
 
@@ -254,10 +254,10 @@ onMounted(() => {
     box-shadow: none;
 
     .el-input__inner {
-      background: transparent;
-      border: 0px;
-      border-radius: 0px;
       color: #fff;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
       caret-color: #fff;
 
       &:-webkit-autofill {
@@ -270,9 +270,8 @@ onMounted(() => {
       &:-webkit-autofill:hover,
       &:-webkit-autofill:focus,
       &:-webkit-autofill:active {
-        -webkit-transition-delay: 99999s;
-        -webkit-transition: color 99999s ease-out,
-          background-color 99999s ease-out;
+        transition: color 99999s ease-out, background-color 99999s ease-out;
+        transition-delay: 99999s;
       }
     }
   }