feat: 实现切换主题时tooltip和popover同时展示

src/views/Layout/src/components/Header/HeaderView.vue

@@ -144,6 +144,19 @@ const handleLogout = () => {
 const handleLogin = () => {
   router.push('/login')
 }
+
+// 定义是否显示popover的状态
+const isPopoverVisible = ref(false)
+
+// 切换popover显示状态的方法
+const togglePopover = () => {
+  isPopoverVisible.value = !isPopoverVisible.value
+}
+
+// 关闭popover的方法
+const closePopover = () => {
+  isPopoverVisible.value = false
+}
 </script>
 
 <template>
@@ -162,18 +175,20 @@ const handleLogin = () => {
       </el-input>
       <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
-
       <el-popover
         placement="bottom-end"
         :width="400"
         trigger="click"
-        ref="themePopoverRef"
+        :visible="isPopoverVisible"
         popper-class="toggle-theme-popover"
+        @show="isPopoverVisible = true"
+        @hide="isPopoverVisible = false"
       >
         <div>
+          <!-- Popover content remains the same -->
           <div class="header">
             <span class="title">Themes</span>
-            <el-button @click="themePopoverRef.hide()" class="close-icon el-button--text">
+            <el-button @click="closePopover" class="close-icon el-button--text">
               <div class="font_family icon-icon_reject_b"></div>
             </el-button>
           </div>
@@ -200,8 +215,7 @@ const handleLogin = () => {
               @click="toggleThemeMode('light')"
               :class="{ active: themeStore.theme === 'light' }"
             >
-              <span class="font_family icon-icon_light_b"></span>
-              Light
+              <span class="font_family icon-icon_light_b"></span>Light
             </div>
             <div
               class="btn-item"
@@ -212,10 +226,9 @@ const handleLogin = () => {
             </div>
           </div>
         </div>
+
+        <!-- Tooltip is now inside the Popover, and it will only show when the Popover is open -->
         <template #reference>
-          <el-button style="height: 40px; width: 40px" class="el-button--text">
-            <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
-          ></el-button>
           <el-tooltip
             popper-class="theme-popper-class"
             effect="dark"
@@ -224,9 +237,13 @@ const handleLogin = () => {
             :offset="4"
             trigger="hover"
           >
-            <el-button style="height: 40px; width: 40px" class="el-button--text">
-              <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
-            ></el-button>
+            <el-button
+              style="height: 40px; width: 40px"
+              class="el-button--text"
+              @click="togglePopover"
+            >
+              <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span>
+            </el-button>
           </el-tooltip>
         </template>
       </el-popover>
@@ -345,6 +362,10 @@ div.el-popover.el-popper.toggle-theme-popover {
   width: 400px;
   height: 278px;
   padding: 16px;
+  // right: 20px !important;
+  // top: 52px !important;
+  // left: auto !important;
+  inset: 56px 52.8px auto auto !important;
   .header {
     display: flex;
     justify-content: space-between;
@@ -393,6 +414,7 @@ div.el-popover.el-popper.toggle-theme-popover {
         span {
           height: 16px;
           width: 16px;
+          padding: 1px 1px 0 0;
           background-color: var(--color-theme);
           color: #fff;
           border-radius: 50%;