tooltip样式修改

src/components/layout/HeaderButtonBar.vue

@@ -5,7 +5,7 @@
       <el-tab-pane v-for="btn in fakeTabs" :key="btn.name" :name="btn.name">
         <template #label>
           <span @click.stop>
-            <el-tooltip :content="btn.label" placement="top">
+            <el-tooltip :content="btn.label" placement="top" effect="light">
               <el-button
                 :type="btn.type"
                 :size="btn.size || 'small'"
@@ -33,6 +33,7 @@
             :key="button.action"
             :content="button.label"
             placement="top"
+            effect="light"
           >
             <el-button
               type=""
@@ -49,7 +50,7 @@
       <el-tab-pane v-for="btn in fakeTabs2" :key="btn.name" :name="btn.name">
         <template #label>
           <span @click.stop>
-            <el-tooltip :content="btn.label" placement="top">
+            <el-tooltip :content="btn.label" placement="top" effect="light">
               <el-button
                 :type="btn.type"
                 :size="btn.size || 'small'"

src/components/layout/TopoButtonBar.vue

@@ -5,7 +5,7 @@
       <el-tab-pane v-for="btn in fakeTabs" :key="btn.name" :name="btn.name">
         <template #label>
           <span @click.stop>
-            <el-tooltip :content="btn.label" placement="top">
+            <el-tooltip :content="btn.label" placement="top" effect="light">
               <el-button
                 :type="btn.type"
                 :size="btn.size || 'small'"
@@ -19,7 +19,7 @@
         </template>
         <template #default></template>
       </el-tab-pane>
-            <!-- 新增开关 tab -->
+      <!-- 新增开关 tab -->
       <el-tab-pane name="modeSwitch" key="modeSwitch">
         <template #label>
           <span @click.stop>
@@ -38,10 +38,10 @@
       <!-- 普通标签页 -->
       <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
         <template #label>
-            <span class="tab-label">
-              <!-- <img :src="tab.icon" alt="icon" class="tab-icon" /> -->
-              {{ tab.label }}
-            </span>
+          <span class="tab-label">
+            <!-- <img :src="tab.icon" alt="icon" class="tab-icon" /> -->
+            {{ tab.label }}
+          </span>
         </template>
         <div class="button-group">
           <el-tooltip
@@ -49,8 +49,10 @@
             :key="button.action"
             :content="button.label"
             placement="bottom"
+            effect="light"
+            popper-class="custom-tooltip"
           >
-<el-button
+            <el-button
               :class="{ 'is-active': buttonStates[button.action] }"
               @click="handleButtonClick(button)"
               class="icon-text-button"
@@ -154,16 +156,59 @@ const tabs = [
     label: t("tabs.show"),
     icon: "",
     buttons: [
-      { action: "showGrid", label: t("buttons.showGrid"), icon: gridIcon, isToggle: true },
-      { action: "fixedGrid", label: t("buttons.fixedGrid"), icon: fixedGridIcon, isToggle: true },
-      { action: "showRuler", label: t("buttons.showRuler"), icon: rulerIcon, isToggle: true },
-      { action: "showText", label: t("buttons.showText"), icon: textIcon, isToggle: true },
-      { action: "showNumber", label: t("buttons.showNumber"), icon: numberIcon, isToggle: true },
-      { action: "showNodeName", label: t("buttons.showNodeName"), icon: nodeNameIcon, isToggle: true },
-      { action: "showNodeId", label: t("buttons.showNodeId"), icon: nodeIdIcon, isToggle: true },
+      {
+        action: "showGrid",
+        label: t("buttons.showGrid"),
+        icon: gridIcon,
+        isToggle: true
+      },
+      {
+        action: "fixedGrid",
+        label: t("buttons.fixedGrid"),
+        icon: fixedGridIcon,
+        isToggle: true
+      },
+      {
+        action: "showRuler",
+        label: t("buttons.showRuler"),
+        icon: rulerIcon,
+        isToggle: true
+      },
+      {
+        action: "showText",
+        label: t("buttons.showText"),
+        icon: textIcon,
+        isToggle: true
+      },
+      {
+        action: "showNumber",
+        label: t("buttons.showNumber"),
+        icon: numberIcon,
+        isToggle: true
+      },
+      {
+        action: "showNodeName",
+        label: t("buttons.showNodeName"),
+        icon: nodeNameIcon,
+        isToggle: true
+      },
+      {
+        action: "showNodeId",
+        label: t("buttons.showNodeId"),
+        icon: nodeIdIcon,
+        isToggle: true
+      },
       { action: "renumber", label: t("buttons.renumber"), icon: renumberIcon },
-      { action: "previewWindow", label: t("buttons.previewWindow"), icon: previewWindowIcon },
-      { action: "displayConfig", label: t("buttons.displayConfig"), icon: displayConfigIcon }
+      {
+        action: "previewWindow",
+        label: t("buttons.previewWindow"),
+        icon: previewWindowIcon
+      },
+      {
+        action: "displayConfig",
+        label: t("buttons.displayConfig"),
+        icon: displayConfigIcon
+      }
     ]
   },
   {
@@ -172,10 +217,14 @@ const tabs = [
     icon: "",
     buttons: [
       { action: "zoomOut", label: t("buttons.zoomOut"), icon: zoomOutIcon },
-      {action: "zoomIn",label: t("buttons.zoomIn"),icon: zoomInIcon},
-      {action: "fitView",label: t("buttons.fitView"),icon: adaptiveIcon},
-      {action: "actualSize",label: t("buttons.actualSize"),icon: actualSizeIcon},
-      {action: "grag",label: t("buttons.grag"),icon: dragIcon}
+      { action: "zoomIn", label: t("buttons.zoomIn"), icon: zoomInIcon },
+      { action: "fitView", label: t("buttons.fitView"), icon: adaptiveIcon },
+      {
+        action: "actualSize",
+        label: t("buttons.actualSize"),
+        icon: actualSizeIcon
+      },
+      { action: "grag", label: t("buttons.grag"), icon: dragIcon }
     ]
   },
   {
@@ -183,18 +232,62 @@ const tabs = [
     label: t("tabs.arrange"),
     icon: "",
     buttons: [
-      {action: "alignLeft",label: t("buttons.alignLeft"),icon: alignLeftIcon},
-      {action: "alignRight",label: t("buttons.alignRight"),icon: alignRightIcon},
-      {action: "alignTop",label: t("buttons.alignTop"),icon: topToItIcon},
-      {action: "alignBottom",label: t("buttons.alignBottom"),icon: bottomToItIcon},
-      {action: "alignMiddle",label: t("buttons.alignMiddle"),icon: centerToItIcon},
-      {action: "alignCenter",label: t("buttons.alignCenter"),icon: horizontalCenterToItIcon},
-      {action: "distributeVertical",label: t("buttons.distributeVertical"),icon: distributeVerticalIcon},
-      {action: "distributeHorizontal",label: t("buttons.distributeHorizontal"),icon: distributeHorizontalIcon},
-      {action: "rotateLeft",label: t("buttons.rotateLeft"),icon: rotateLeftIcon},
-      {action: "rotateRight",label: t("buttons.rotateRight"),icon: rotateRightIcon},
-      {action: "horizontalFlip",label: t("buttons.horizontalFlip"),icon: horizontalFlipIcon},
-      {action: "verticalFlip",label: t("buttons.verticalFlip"),icon: verticalFlipIcon}
+      {
+        action: "alignLeft",
+        label: t("buttons.alignLeft"),
+        icon: alignLeftIcon
+      },
+      {
+        action: "alignRight",
+        label: t("buttons.alignRight"),
+        icon: alignRightIcon
+      },
+      { action: "alignTop", label: t("buttons.alignTop"), icon: topToItIcon },
+      {
+        action: "alignBottom",
+        label: t("buttons.alignBottom"),
+        icon: bottomToItIcon
+      },
+      {
+        action: "alignMiddle",
+        label: t("buttons.alignMiddle"),
+        icon: centerToItIcon
+      },
+      {
+        action: "alignCenter",
+        label: t("buttons.alignCenter"),
+        icon: horizontalCenterToItIcon
+      },
+      {
+        action: "distributeVertical",
+        label: t("buttons.distributeVertical"),
+        icon: distributeVerticalIcon
+      },
+      {
+        action: "distributeHorizontal",
+        label: t("buttons.distributeHorizontal"),
+        icon: distributeHorizontalIcon
+      },
+      {
+        action: "rotateLeft",
+        label: t("buttons.rotateLeft"),
+        icon: rotateLeftIcon
+      },
+      {
+        action: "rotateRight",
+        label: t("buttons.rotateRight"),
+        icon: rotateRightIcon
+      },
+      {
+        action: "horizontalFlip",
+        label: t("buttons.horizontalFlip"),
+        icon: horizontalFlipIcon
+      },
+      {
+        action: "verticalFlip",
+        label: t("buttons.verticalFlip"),
+        icon: verticalFlipIcon
+      }
     ]
   },
   {
@@ -202,10 +295,10 @@ const tabs = [
     label: t("tabs.insert"),
     icon: "",
     buttons: [
-      {action: "graphic",label: t("buttons.graphic"),icon: graphicIcon},
-      {action: "image",label: t("buttons.image"),icon: imageIcon},
-      {action: "document",label: t("buttons.document"),icon: documentIcon},
-      {action: "comment",label: t("buttons.comment"),icon: commentIcon}
+      { action: "graphic", label: t("buttons.graphic"), icon: graphicIcon },
+      { action: "image", label: t("buttons.image"), icon: imageIcon },
+      { action: "document", label: t("buttons.document"), icon: documentIcon },
+      { action: "comment", label: t("buttons.comment"), icon: commentIcon }
     ]
   },
   {
@@ -213,9 +306,13 @@ const tabs = [
     label: t("tabs.simulation"),
     icon: "",
     buttons: [
-      {action: "run", label: t("buttons.run"), icon: runIcon},
-      {action: "preprocess", label: t("buttons.preprocess"), icon: preprocessingIcon},
-      {action: "stop", label: t("buttons.stop"), icon: stopIcon}
+      { action: "run", label: t("buttons.run"), icon: runIcon },
+      {
+        action: "preprocess",
+        label: t("buttons.preprocess"),
+        icon: preprocessingIcon
+      },
+      { action: "stop", label: t("buttons.stop"), icon: stopIcon }
     ]
   },
   {
@@ -223,15 +320,43 @@ const tabs = [
     label: t("tabs.result"),
     icon: "",
     buttons: [
-      {action: "dashboard", label: t("buttons.dashboard"), icon: dashboardIcon},
-      {action: "resultDisplay", label: t("buttons.resultDisplay"), icon: resultDisplayIcon},
-      {action: "resultValidation", label: t("buttons.resultValidation"), icon: resultValidationIcon},
-      {action: "sensors", label: t("buttons.sensors"), icon: sensorsIcon},
-      {action: "tags", label: t("buttons.tags"), icon: tagsIcon},
-      {action: "thermodynamicsChart", label: t("buttons.thermodynamicsChart"), icon: thermodynamicsChartIcon},
-      {action: "hydraulicDiagram", label: t("buttons.hydraulicDiagram"), icon: hydraulicDiagramIcon},
-      {action: "resultReport", label: t("buttons.resultReport"), icon: resultReportIcon},
-      {action: "inputReport", label: t("buttons.inputReport"), icon: InputReportIcon}
+      {
+        action: "dashboard",
+        label: t("buttons.dashboard"),
+        icon: dashboardIcon
+      },
+      {
+        action: "resultDisplay",
+        label: t("buttons.resultDisplay"),
+        icon: resultDisplayIcon
+      },
+      {
+        action: "resultValidation",
+        label: t("buttons.resultValidation"),
+        icon: resultValidationIcon
+      },
+      { action: "sensors", label: t("buttons.sensors"), icon: sensorsIcon },
+      { action: "tags", label: t("buttons.tags"), icon: tagsIcon },
+      {
+        action: "thermodynamicsChart",
+        label: t("buttons.thermodynamicsChart"),
+        icon: thermodynamicsChartIcon
+      },
+      {
+        action: "hydraulicDiagram",
+        label: t("buttons.hydraulicDiagram"),
+        icon: hydraulicDiagramIcon
+      },
+      {
+        action: "resultReport",
+        label: t("buttons.resultReport"),
+        icon: resultReportIcon
+      },
+      {
+        action: "inputReport",
+        label: t("buttons.inputReport"),
+        icon: InputReportIcon
+      }
     ]
   },
   {
@@ -239,8 +364,12 @@ const tabs = [
     label: t("tabs.tools"),
     icon: toolIcon,
     buttons: [
-      { action: "visualization", label: t("buttons.visualization"), icon: visualizationIcon },
-      {action: "split", label: t("buttons.split"), icon: splitIcon}
+      {
+        action: "visualization",
+        label: t("buttons.visualization"),
+        icon: visualizationIcon
+      },
+      { action: "split", label: t("buttons.split"), icon: splitIcon }
     ]
   }
 ]
@@ -260,7 +389,10 @@ const buttonStates = ref({
 const handleButtonClick = (button) => {
   if (button.isToggle) {
     buttonStates.value[button.action] = !buttonStates.value[button.action]
-    emit("button-click", { action: button.action, isActive: buttonStates.value[button.action] })
+    emit("button-click", {
+      action: button.action,
+      isActive: buttonStates.value[button.action]
+    })
   } else {
     emit("button-click", { action: button.action })
   }
@@ -271,9 +403,9 @@ const handleTabClick = (tab) => {
 }
 
 const handleModeSwitch = (value) => {
-  console.log(value ? '切换到选择模式' : '切换到连接模式');
+  console.log(value ? "切换到选择模式" : "切换到连接模式")
   // 在这里添加切换模式的逻辑
-};
+}
 </script>
 
 <style scoped>
@@ -300,8 +432,8 @@ const handleModeSwitch = (value) => {
   gap: 4px;
   width: calc(100% - 100px); /* 为 #tab-user 预留空间 */
 }
-.el-button+.el-button{
-    margin-left: 4px;
+.el-button + .el-button {
+  margin-left: 4px;
 }
 
 .custom-tab-nav {
@@ -358,7 +490,7 @@ const handleModeSwitch = (value) => {
   background-color: #edf2fa;
 }
 
-:deep(.el-tabs--border-card>.el-tabs__content) {
+:deep(.el-tabs--border-card > .el-tabs__content) {
   padding: 0 !important;
   background: #ffffff;
 }
@@ -436,4 +568,19 @@ const handleModeSwitch = (value) => {
   color: #fff;
   border-color: #409eff;
 }
+
+/* 自定义 Tooltip 样式 */
+:deep(.custom-tooltip) {
+  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.2); /* 底部投影效果 */
+  border: none;
+  background-color: #fff;
+  color: #333;
+  padding: 6px 12px;
+}
+
+/* 箭头样式 */
+:deep(.custom-tooltip .el-popper__arrow::before) {
+  background: #fff;
+  box-shadow: none;
+}
 </style>