feat(components): 添加图片验证码

src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NDropdown } from 'naive-ui';
+import { NDropdown, useDialog } from 'naive-ui';
 import { UserAvatar, Logout } from '@vicons/carbon';
 import { dynamicIconRender, resetAuthStorage } from '@/utils';
 import { HoverContainer } from '@/components';
@@ -16,6 +16,8 @@ import avatar from '@/assets/svg/avatar/avatar01.svg';
 
 type DropdownKey = 'user-center' | 'logout';
 
+const dialog = useDialog();
+
 const options = [
   {
     label: '用户中心',
@@ -36,8 +38,16 @@ const options = [
 function handleDropdown(optionKey: string) {
   const key = optionKey as DropdownKey;
   if (key === 'logout') {
-    resetAuthStorage();
-    window.location.reload();
+    dialog.info({
+      title: '提示',
+      content: '您确定要退出登录吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        resetAuthStorage();
+        window.location.reload();
+      }
+    });
   }
 }
 </script>

src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import type { VNodeChild } from 'vue';
 import { NScrollbar } from 'naive-ui';
 import { useRoute } from 'vue-router';
@@ -80,6 +80,13 @@ function handleMouseLeaveMenu() {
   activeParentRouteName.value = getActiveRouteName();
   hideDrawer();
 }
+
+watch(
+  () => route.name,
+  () => {
+    activeParentRouteName.value = getActiveRouteName();
+  }
+);
 </script>
 <style scoped>
 .mix-menu-width {

src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="border-2px rounded-6px cursor-pointer hover:g_border-primary"
-    :class="[checked ? 'g_border-primary' : 'border-transparent']"
+    class="nav-type border-2px rounded-6px cursor-pointer"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
   >
     <n-tooltip :placement="activeConfig.placement" trigger="hover">
       <template #trigger>
-        <div class="nav-type relative w-56px h-48px bg-[#fff] rounded-4px overflow-hidden">
+        <div class="nav-type-main relative w-56px h-48px bg-[#fff] rounded-4px overflow-hidden">
           <div class="absolute-lt bg-[#273352]" :class="`${activeConfig.menuClass}`"></div>
           <div class="absolute-rb bg-[#f0f2f5]" :class="`${activeConfig.mainClass}`"></div>
         </div>
@@ -31,6 +31,10 @@ const props = defineProps({
   checked: {
     type: Boolean,
     default: false
+  },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
   }
 });
 
@@ -44,7 +48,13 @@ const config = new Map<NavMode, { placement: FollowerPlacement; menuClass: strin
 const activeConfig = computed(() => config.get(props.mode)!);
 </script>
 <style scoped>
-.nav-type {
+.border-primary {
+  border-color: v-bind(primaryColor);
+}
+.nav-type:hover {
+  border-color: v-bind(primaryColor);
+}
+.nav-type-main {
   box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
 }
 </style>

src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/index.vue

@@ -6,6 +6,7 @@
       :key="item.mode"
       :mode="item.mode"
       :checked="theme.navStyle.mode === item.mode"
+      :primary-color="theme.themeColor"
       @click="setNavMode(item.mode)"
     />
   </n-space>