src/qiankun/state.ts

@@ -28,7 +28,17 @@ export function getProps() {
  * @param state 主应用穿的公共数据
  */
 export function initGlState(
-  info: any = { token: '', userInfo: {}, isMounted: false, locationObj: null, locationId: '', pageObj: null, widthScale: 1, heightScale: 1 }
+  info: any = {
+    token: '',
+    userInfo: {},
+    isMounted: false,
+    locationObj: null,
+    locationId: '',
+    pageObj: null,
+    widthScale: 1,
+    heightScale: 1,
+    dataPickerHoverEnabled: true,
+  }
 ) {
   if (actions) return;
   // 初始化state
@@ -41,6 +51,7 @@ export function initGlState(
     widthScale: 1,
     heightScale: 1,
     url: {},
+    dataPickerHoverEnabled: localStorage.getItem('dataPickerHoverEnabled') !== 'false',
   });
   // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
   actions.onGlobalStateChange((newState, prev) => {

src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -7,7 +7,7 @@
     </template>
     <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @change-page-type="changePageType" />
     <!-- <VentModal style="width: 100%; height: 100%; position: absolute" /> -->
-    <SubApp style="width: 100%; height: 100%; position: absolute" />
+    <SubApp style="position: absolute; width: 100%; height: 100%" />
   </div>
 </template>
 
@@ -101,7 +101,7 @@
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/vent/modal.less';
+  @import url('/@/design/vent/modal.less');
   @ventSpace: zxm;
 
   .scene-box {
@@ -121,24 +121,24 @@
 
   .device-header {
     position: fixed;
+    z-index: -1;
     width: 100%;
     height: 56px;
     background: var(--image-modal-top);
+    color: #fffd;
     text-align: center;
     line-height: 56px;
     font-size: 28px;
-    color: #ffffffdd;
     font-weight: 600;
-    z-index: -1;
   }
 
   .select-node {
     position: fixed;
     top: 60px;
     left: 10px;
-    color: #fff;
     display: flex;
     justify-content: center;
+    color: #fff;
     font-size: 22px;
 
     .title {
@@ -147,11 +147,11 @@
   }
 
   .expansion-icon {
-    background: var(--image-tree-icon-bg) no-repeat;
-    background-size: contain;
     position: absolute;
-    left: 190px;
     top: 25px;
+    left: 190px;
+    background: var(--image-tree-icon-bg) no-repeat;
+    background-size: contain;
 
     &:hover {
       background: var(--image-tree-icon-hover-bg) no-repeat;
@@ -160,21 +160,21 @@
   }
 
   .device-select {
-    width: 250px;
-    height: 500px;
-    background: var(--image-tree-bg) no-repeat;
     position: fixed;
     top: 60px;
     left: 10px;
+    width: 250px;
+    height: 500px;
+    padding: 20px 10px 30px;
+    background: var(--image-tree-bg) no-repeat;
     background-size: contain;
     pointer-events: auto;
-    padding: 20px 10px 30px 10px;
   }
 
   .is-expansion-icon {
+    z-index: 999;
     padding: 5px;
     pointer-events: auto;
-    z-index: 999;
   }
 
   .device-select-show {
@@ -194,18 +194,18 @@
   }
 
   .node-select-show {
+    left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
     width: 276px;
     height: 44px;
     background: var(--image-tree-expansion-bg) no-repeat;
-    left: 10px;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
     animation-name: treeShow;
     /* 持续时间 */
     animation-duration: 1s;
-    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-    display: flex;
-    align-items: center;
     margin-left: 0;
-    justify-content: flex-start;
     pointer-events: auto;
 
     &:hover {
@@ -214,8 +214,8 @@
 
     .put-away-icon {
       position: relative;
-      display: inline-block;
       left: 4px;
+      display: inline-block;
     }
   }
 
@@ -250,36 +250,36 @@
       }
 
       input {
-        height: 0px !important;
+        height: 0 !important;
       }
     }
 
     &::-webkit-scrollbar-track {
-      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-      border-radius: 10px;
-      background: #ededed22;
       height: 100px;
+      background: #ededed22;
+      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
+      border-radius: 10px;
     }
 
     &::-webkit-scrollbar-thumb {
-      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
       background: #4288a444;
     }
   }
 
   .location-icon {
-    width: 46px;
-    height: 178px;
     position: absolute;
     top: 60px;
+    width: 46px;
+    height: 178px;
     background: var(--image-location-bg) no-repeat;
+    color: #fff;
+    cursor: pointer;
     background-size: contain;
     writing-mode: vertical-lr;
     line-height: 46px;
-    color: #fff;
     padding-top: 10px;
     pointer-events: auto;
-    cursor: pointer;
 
     &:hover {
       background: var(--image-location-hover-bg) no-repeat;
@@ -298,36 +298,36 @@
     pointer-events: auto;
 
     .location-select-box {
+      position: relative;
       width: 100%;
       height: 100%;
-      position: relative;
 
       &::before {
-        content: '';
         position: absolute;
-        width: 230px;
-        height: 500px;
         top: 0;
         left: 0;
+        z-index: -1;
+        width: 230px;
+        height: 500px;
         background: var(--image-tree-bg) no-repeat;
-        background-size: contain;
         transform: rotateY(180deg);
-        z-index: -1;
+        content: '';
+        background-size: contain;
       }
 
       .location-top-title {
-        color: #fff;
         position: absolute;
-        width: 225px;
-        height: 68px;
-        background: var(--image-turn-location-top-bg) no-repeat;
-        background-size: contain;
         top: 5px;
         left: 5px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
         align-items: flex-end;
+        justify-content: space-between;
+        width: 225px;
+        height: 68px;
+        background: var(--image-turn-location-top-bg) no-repeat;
+        color: #fff;
+        background-size: contain;
 
         .title {
           font-size: 18px;
@@ -338,12 +338,12 @@
       }
 
       .location-expansion-icon {
-        background: var(--image-tree-icon-cover-bg) no-repeat;
-        background-size: contain;
         position: relative;
-        left: 10px;
         top: -15px;
+        left: 10px;
         padding: 5px;
+        background: var(--image-tree-icon-cover-bg) no-repeat;
+        background-size: contain;
 
         &:hover {
           background: var(--image-tree-icon-cover-hover-bg) no-repeat;
@@ -353,46 +353,46 @@
     }
 
     .location-container {
-      width: 200px;
-      height: 390px;
       position: absolute;
-      display: flex;
-      flex-direction: column;
       top: 80px;
       left: 18px;
+      display: flex;
+      flex-direction: column;
+      width: 200px;
+      height: 390px;
       overflow-y: auto;
 
       .location-item {
-        color: #fff;
-        line-height: 30px;
         display: flex;
         justify-content: space-between;
-        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
         margin: 3px 0;
+        color: #fff;
+        line-height: 30px;
+        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
 
         .item-title {
           width: 80px;
-          text-align: right;
           color: #87f1ff;
+          text-align: right;
         }
       }
 
       .location-bottom-btn {
-        width: 100%;
-        color: #fff;
         display: flex;
         justify-content: flex-end;
+        width: 100%;
+        color: #fff;
         margin-top: 20px;
 
         span {
           display: inline-block;
           width: 100%;
+          padding: 2px 0;
+          border: 1px solid rgb(174 243 255 / 30%);
           background: #00709955;
-          border-radius: 3px;
-          border: 1px solid rgba(174, 243, 255, 0.3);
           text-align: center;
-          padding: 2px 0;
           cursor: pointer;
+          border-radius: 3px;
 
           &:hover {
             background: #00557422;
@@ -419,7 +419,7 @@
   }
 
   .location-btn-show {
-    right: -0px;
+    right: -0;
     animation-name: locationBtnShow;
     /* 持续时间 */
     animation-duration: 1s;
@@ -438,20 +438,20 @@
     position: relative;
 
     .to-small {
+      position: absolute;
+      top: -65px;
+      right: 36px;
       width: 60px;
       height: 60px;
+      padding: 8px;
       background: var(--image-tosmall) no-repeat center;
       background-size: auto;
-      position: absolute;
-      top: -65px;
-      right: 36px;
       border-radius: 10px;
-      padding: 8px;
       backdrop-filter: blur(10px);
-      background-color: rgba(45, 86, 137, 0.418);
+      background-color: rgb(45 86 137 / 41.8%);
 
       &:hover {
-        background-color: rgba(79, 104, 134, 0.418);
+        background-color: rgb(79 104 134 / 41.8%);
       }
     }
 
@@ -462,16 +462,16 @@
       width: 100%;
 
       .device-button {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         height: 26px;
         padding: 0 20px;
         background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-        display: flex;
-        justify-content: center;
-        align-items: center;
         color: #fff;
-        position: relative;
         cursor: pointer;
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
 
         &:nth-child(1) {
           left: calc(-6px * 1);
@@ -549,41 +549,36 @@
     }
 
     .enter-detail {
-      color: #fff;
-      cursor: pointer;
       position: absolute;
-      right: 120px;
       top: -6px;
-      padding: 5px;
-      border-radius: 5px;
-      margin-left: 8px;
-      margin-right: 8px;
-      width: auto;
-      height: 33px !important;
+      right: 120px;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: auto;
+      height: 33px !important;
+      padding: 5px;
+      padding: 5px 15px;
       color: #fff;
-      padding: 5px 15px 5px 15px;
       cursor: pointer;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
 
       &:hover {
         background: linear-gradient(#2cd1ff55, #1eb0ff55);
       }
 
       &::before {
+        position: absolute;
+        inset: 3px 0 0 3px;
+        z-index: -1;
         width: calc(100% - 6px);
         height: 27px;
+        /* important */
+        background: linear-gradient(#1fa6cb, #127cb5);
         content: '';
-        position: absolute;
-        top: 3px;
-        right: 0;
-        left: 3px;
-        bottom: 0;
-        z-index: -1;
         border-radius: inherit;
-        /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
@@ -614,7 +609,7 @@
 
   @keyframes locationShow {
     0% {
-      right: 0px;
+      right: 0;
       opacity: 0;
     }
 
@@ -666,6 +661,6 @@
 
   :deep(.zxm-select-dropdown) {
     left: 0 !important;
-    color: #000000 !important;
+    color: #000 !important;
   }
 </style>

src/views/ventAI/dataPicker/useDataPicker.ts

@@ -4,9 +4,11 @@ import { fetchTunnelInterpretation, fetchDeviceInterpretation } from './api';
 import type { TodoItem, ToolCallRecord, SSERawEvent } from './types';
 import DataPickerModal from './components/DataPickerModal.vue';
 import aiIcon from '@/assets/images/ventAI/dataPicker/AI-icon.svg';
+import { getActions } from '/@/qiankun/state';
 
 // ─── 全局开关：控制悬停模式浮动按钮是否启用 ─────────────────────────────────
 const STORAGE_KEY = 'dataPickerHoverEnabled';
+const actions = getActions();
 
 export const dataPickerHoverEnabled = ref(localStorage.getItem(STORAGE_KEY) !== 'false');
 
@@ -31,6 +33,7 @@ export function setDataPickerHoverEnabled(val: boolean) {
       inst.attachMove();
     });
   }
+  actions.setGlobalState({ dataPickerHoverEnabled: val });
 }
 
 // ─── 按钮 DOM 构建（悬停模式专用）──────────────────────────────────────────