|
@@ -3,7 +3,8 @@ import Antd from 'ant-design-vue';
|
|
|
import { fetchTunnelInterpretation, fetchDeviceInterpretation } from './api';
|
|
import { fetchTunnelInterpretation, fetchDeviceInterpretation } from './api';
|
|
|
import type { TodoItem, ToolCallRecord, SSERawEvent } from './types';
|
|
import type { TodoItem, ToolCallRecord, SSERawEvent } from './types';
|
|
|
import DataPickerModal from './components/DataPickerModal.vue';
|
|
import DataPickerModal from './components/DataPickerModal.vue';
|
|
|
-import aiIcon from '@/assets/images/ventAI/dataPicker/AI-icon.svg';
|
|
|
|
|
|
|
+import aiCloseIcon from '@/assets/images/ventAI/dataPicker/AI-close.svg';
|
|
|
|
|
+import aiOpenIcon from '@/assets/images/ventAI/dataPicker/AI-open.svg';
|
|
|
import { getActions } from '/@/qiankun/state';
|
|
import { getActions } from '/@/qiankun/state';
|
|
|
|
|
|
|
|
// ─── 全局开关:控制悬停模式浮动按钮是否启用 ─────────────────────────────────
|
|
// ─── 全局开关:控制悬停模式浮动按钮是否启用 ─────────────────────────────────
|
|
@@ -43,20 +44,26 @@ function createButtonEl(): HTMLElement {
|
|
|
const btn = document.createElement('div');
|
|
const btn = document.createElement('div');
|
|
|
btn.className = BUTTON_CLASS;
|
|
btn.className = BUTTON_CLASS;
|
|
|
btn.title = '数据解读';
|
|
btn.title = '数据解读';
|
|
|
- btn.innerHTML = `<img src="${aiIcon}" width="24" height="24" alt="数据解读" />`;
|
|
|
|
|
|
|
+ const img = document.createElement('img');
|
|
|
|
|
+ img.src = aiCloseIcon;
|
|
|
|
|
+ img.width = 24;
|
|
|
|
|
+ img.height = 24;
|
|
|
|
|
+ img.alt = '数据解读';
|
|
|
|
|
+ btn.appendChild(img);
|
|
|
Object.assign(btn.style, {
|
|
Object.assign(btn.style, {
|
|
|
position: 'fixed',
|
|
position: 'fixed',
|
|
|
zIndex: '99999',
|
|
zIndex: '99999',
|
|
|
- padding: '8px',
|
|
|
|
|
- background: 'linear-gradient(135deg, #1e90ff, #4da6ff)',
|
|
|
|
|
- borderRadius: '50%',
|
|
|
|
|
|
|
+ padding: '4px 6px 8px 6px',
|
|
|
|
|
+ background: '#0E4F8D',
|
|
|
|
|
+ borderRadius: '8px',
|
|
|
cursor: 'pointer',
|
|
cursor: 'pointer',
|
|
|
display: 'none',
|
|
display: 'none',
|
|
|
pointerEvents: 'auto',
|
|
pointerEvents: 'auto',
|
|
|
- transition: 'transform 0.15s ease-out, opacity 0.15s ease-out',
|
|
|
|
|
|
|
+ transition: 'transform 0.15s ease-out, opacity 0.15s ease-out, border 0.15s ease-out',
|
|
|
transform: 'scale(0.9)',
|
|
transform: 'scale(0.9)',
|
|
|
opacity: '0',
|
|
opacity: '0',
|
|
|
- boxShadow: '0 0 10px rgba(30,144,255,0.4)',
|
|
|
|
|
|
|
+ border: '2px solid transparent',
|
|
|
|
|
+ boxSizing: 'border-box',
|
|
|
});
|
|
});
|
|
|
btn.addEventListener('mouseenter', () => {
|
|
btn.addEventListener('mouseenter', () => {
|
|
|
const owner = (btn as any).__di_owner;
|
|
const owner = (btn as any).__di_owner;
|
|
@@ -64,10 +71,22 @@ function createButtonEl(): HTMLElement {
|
|
|
owner.cancelLeave();
|
|
owner.cancelLeave();
|
|
|
owner.clearHideTimer();
|
|
owner.clearHideTimer();
|
|
|
}
|
|
}
|
|
|
|
|
+ img.src = aiOpenIcon;
|
|
|
|
|
+ btn.style.border = '2px solid #1e90ff';
|
|
|
});
|
|
});
|
|
|
btn.addEventListener('mouseleave', () => {
|
|
btn.addEventListener('mouseleave', () => {
|
|
|
const owner = (btn as any).__di_owner;
|
|
const owner = (btn as any).__di_owner;
|
|
|
if (owner) owner.startHideTimer();
|
|
if (owner) owner.startHideTimer();
|
|
|
|
|
+ img.src = aiCloseIcon;
|
|
|
|
|
+ btn.style.border = '2px solid transparent';
|
|
|
|
|
+ });
|
|
|
|
|
+ btn.addEventListener('mousedown', () => {
|
|
|
|
|
+ img.src = aiOpenIcon;
|
|
|
|
|
+ btn.style.border = '2px solid #1e90ff';
|
|
|
|
|
+ });
|
|
|
|
|
+ btn.addEventListener('mouseup', () => {
|
|
|
|
|
+ img.src = aiOpenIcon;
|
|
|
|
|
+ btn.style.border = '2px solid #1e90ff';
|
|
|
});
|
|
});
|
|
|
return btn;
|
|
return btn;
|
|
|
}
|
|
}
|