655 lines
20 KiB
Vue
655 lines
20 KiB
Vue
<template>
|
||
<slot></slot>
|
||
<!-- 全局右下角悬浮按钮（参考 AIRBT.html 样式）；登录页不展示 -->
|
||
<div
|
||
v-if="showAssistantFab"
|
||
ref="fabRef"
|
||
class="ai-assistant-fab"
|
||
:class="{ 'is-loading': pageLoading, 'is-hidden': dialogVisible, 'is-dragging': fabDragging }"
|
||
:style="fabPositionStyle"
|
||
@pointerdown="onFabPointerDown"
|
||
>
|
||
<div class="fab-icon-wrap">
|
||
<Icon v-if="!pageLoading" icon="ep:chat-dot-round" class="fab-icon" />
|
||
<Icon v-else icon="ep:loading" class="fab-icon fab-loading" />
|
||
</div>
|
||
<span class="fab-text">AI 决策助手</span>
|
||
</div>
|
||
|
||
<AiImageChatDialog
|
||
v-model="dialogVisible"
|
||
:initial-payload="initialPayload"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import html2canvas from 'html2canvas'
|
||
import { Icon } from '@/components/Icon'
|
||
import AiImageChatDialog from './AiImageChatDialog.vue'
|
||
import {
|
||
AI_ASSISTANT_KEY,
|
||
AI_CHAT_MESSAGES_KEY,
|
||
AI_ASSISTANT_REPORT_CONTEXT_KEY,
|
||
type AiAssistantReportContext
|
||
} from './useAiAssistant'
|
||
import { ElMessage } from 'element-plus'
|
||
import { useRoute } from 'vue-router'
|
||
|
||
defineOptions({ name: 'AiAssistantProvider' })
|
||
|
||
/**
|
||
* html2canvas@1.x 无法解析 CSS Color 4/5 的 color()、lab()、oklch() 等，会在解析阶段抛错。
|
||
* 在克隆 DOM 上用安全色覆盖（仅影响克隆树，不影响真实页面）。
|
||
* 需处理截图根节点及其子树，以及 html/body 祖先链（CSS 变量常挂在根上）。
|
||
*/
|
||
function sanitizeClonedDomForHtml2Canvas(clonedDoc: Document, clonedRoot: HTMLElement) {
|
||
const win = clonedDoc.defaultView
|
||
if (!win) return
|
||
|
||
const unsafe = (v: string) =>
|
||
typeof v === 'string' && /\b(color|lab|lch|oklch|oklab|hwb)\(/i.test(v)
|
||
|
||
const patchOne = (el: Element) => {
|
||
try {
|
||
if (el instanceof HTMLElement) {
|
||
const cs = win.getComputedStyle(el)
|
||
const keys = [
|
||
'color',
|
||
'background-color',
|
||
'border-top-color',
|
||
'border-right-color',
|
||
'border-bottom-color',
|
||
'border-left-color',
|
||
'outline-color',
|
||
'column-rule-color',
|
||
'caret-color'
|
||
] as const
|
||
for (const key of keys) {
|
||
const val = cs.getPropertyValue(key)
|
||
if (val && unsafe(val)) {
|
||
el.style.setProperty(key, key === 'color' ? '#303133' : '#ebeef5', 'important')
|
||
}
|
||
}
|
||
const bg = cs.getPropertyValue('background')
|
||
if (bg && unsafe(bg)) {
|
||
el.style.setProperty('background', 'none', 'important')
|
||
el.style.setProperty('background-color', '#ffffff', 'important')
|
||
}
|
||
const bgImg = cs.getPropertyValue('background-image')
|
||
if (bgImg && unsafe(bgImg)) {
|
||
el.style.setProperty('background-image', 'none', 'important')
|
||
const bgc = cs.getPropertyValue('background-color')
|
||
if (!bgc || unsafe(bgc)) {
|
||
el.style.setProperty('background-color', '#fafafa', 'important')
|
||
}
|
||
}
|
||
const bs = cs.getPropertyValue('box-shadow')
|
||
if (bs && unsafe(bs)) {
|
||
el.style.setProperty('box-shadow', 'none', 'important')
|
||
}
|
||
const ts = cs.getPropertyValue('text-shadow')
|
||
if (ts && unsafe(ts)) {
|
||
el.style.setProperty('text-shadow', 'none', 'important')
|
||
}
|
||
const flt = cs.getPropertyValue('filter')
|
||
if (flt && unsafe(flt)) {
|
||
el.style.setProperty('filter', 'none', 'important')
|
||
}
|
||
// 内联 style 里含 color()/lab() 等时尝试替换，仍无法解析则去掉内联避免拖垮 html2canvas
|
||
const inline = el.getAttribute('style')
|
||
if (inline && unsafe(inline)) {
|
||
let s = inline
|
||
.replace(/\bcolor\([^)]*\)/gi, 'rgb(48,49,51)')
|
||
.replace(/\b(?:lab|lch|oklch|oklab|hwb)\([^)]*\)/gi, 'rgb(200,200,200)')
|
||
if (unsafe(s)) {
|
||
el.removeAttribute('style')
|
||
} else {
|
||
el.setAttribute('style', s)
|
||
}
|
||
}
|
||
} else if (el instanceof SVGElement) {
|
||
const cs = win.getComputedStyle(el)
|
||
;['fill', 'stroke'].forEach((attr) => {
|
||
const val = cs.getPropertyValue(attr) || el.getAttribute(attr) || ''
|
||
if (unsafe(val)) {
|
||
el.setAttribute(attr, attr === 'fill' ? '#409eff' : '#303133')
|
||
}
|
||
})
|
||
}
|
||
} catch {
|
||
/* 单节点忽略 */
|
||
}
|
||
}
|
||
|
||
let ancestor: HTMLElement | null = clonedRoot
|
||
while (ancestor) {
|
||
patchOne(ancestor)
|
||
ancestor = ancestor.parentElement
|
||
}
|
||
|
||
const walk = (el: Element) => {
|
||
patchOne(el)
|
||
for (const child of Array.from(el.children)) {
|
||
walk(child)
|
||
}
|
||
}
|
||
walk(clonedRoot)
|
||
|
||
// 覆盖 :root 上可能含 color() 的主题变量（html2canvas 会解析到并报错）
|
||
if (clonedDoc.head && !clonedDoc.getElementById('html2canvas-el-vars-override')) {
|
||
const inj = clonedDoc.createElement('style')
|
||
inj.id = 'html2canvas-el-vars-override'
|
||
inj.textContent = `
|
||
:root, html, body {
|
||
--el-color-primary: #409eff !important;
|
||
--el-color-primary-light-3: #79bbff !important;
|
||
--el-color-primary-light-5: #a0cfff !important;
|
||
--el-color-primary-light-7: #c6e2ff !important;
|
||
--el-color-primary-light-8: #d9ecff !important;
|
||
--el-color-primary-light-9: #ecf5ff !important;
|
||
--el-color-primary-dark-2: #337ecc !important;
|
||
--el-color-success: #67c23a !important;
|
||
--el-color-warning: #e6a23c !important;
|
||
--el-color-danger: #f56c6c !important;
|
||
--el-color-info: #909399 !important;
|
||
--el-text-color-primary: #303133 !important;
|
||
--el-text-color-regular: #606266 !important;
|
||
--el-text-color-secondary: #909399 !important;
|
||
--el-text-color-placeholder: #a8abb2 !important;
|
||
--el-text-color-disabled: #c0c4cc !important;
|
||
--el-border-color: #dcdfe6 !important;
|
||
--el-border-color-light: #e4e7ed !important;
|
||
--el-border-color-lighter: #ebeef5 !important;
|
||
--el-border-color-extra-light: #f2f6fc !important;
|
||
--el-fill-color: #f0f2f5 !important;
|
||
--el-fill-color-light: #f5f7fa !important;
|
||
--el-fill-color-lighter: #fafafa !important;
|
||
--el-fill-color-blank: #ffffff !important;
|
||
--el-bg-color: #ffffff !important;
|
||
--el-bg-color-page: #f2f3f5 !important;
|
||
}
|
||
`
|
||
clonedDoc.head.appendChild(inj)
|
||
}
|
||
}
|
||
|
||
function runHtml2CanvasOnClone(clonedDoc: Document, clonedNode: HTMLElement, transparentPixel: string) {
|
||
sanitizeClonedDomForHtml2Canvas(clonedDoc, clonedNode)
|
||
const imgs = clonedNode.querySelectorAll('img')
|
||
imgs.forEach((img) => {
|
||
const src = img.src || img.getAttribute('src')
|
||
if (!src || src.startsWith('data:') || src.startsWith('blob:')) return
|
||
try {
|
||
if (new URL(src, window.location.href).origin !== window.location.origin) {
|
||
const w = img.width || img.offsetWidth || (img as HTMLImageElement).naturalWidth
|
||
const h = img.height || img.offsetHeight || (img as HTMLImageElement).naturalHeight
|
||
img.src = transparentPixel
|
||
img.removeAttribute('crossorigin')
|
||
if (w && h) {
|
||
img.setAttribute('width', String(w))
|
||
img.setAttribute('height', String(h))
|
||
}
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
})
|
||
}
|
||
|
||
/** 登录 / SSO / 社交登录页不显示 AI 悬浮入口（兼容子路径） */
|
||
function isHideAssistantFabPath(path: string): boolean {
|
||
const p = path || ''
|
||
if (p === '/login' || p === '/sso' || p === '/social-login') return true
|
||
if (p.startsWith('/login/') || p.startsWith('/sso/')) return true
|
||
if (p.startsWith('/social-login')) return true
|
||
return false
|
||
}
|
||
|
||
/** 仅由业务页通过 setAiAssistantFabEnabled(true) 开启；默认关闭，避免全站都出现悬浮入口 */
|
||
const fabEnabled = ref(false)
|
||
function setAiAssistantFabEnabled(enabled: boolean) {
|
||
fabEnabled.value = enabled
|
||
}
|
||
|
||
const route = useRoute()
|
||
const showAssistantFab = computed(
|
||
() => !isHideAssistantFabPath(route.path) && fabEnabled.value
|
||
)
|
||
|
||
/** 悬浮按钮位置（可拖拽），持久化到 localStorage */
|
||
const FAB_POS_STORAGE = 'ai-assistant-fab-position'
|
||
const fabRef = ref<HTMLElement | null>(null)
|
||
const fabPos = ref<{ left: number; top: number } | null>(null)
|
||
const fabDragging = ref(false)
|
||
let fabDragSession: {
|
||
startX: number
|
||
startY: number
|
||
origLeft: number
|
||
origTop: number
|
||
moved: boolean
|
||
} | null = null
|
||
|
||
const fabPositionStyle = computed(() => {
|
||
if (!fabPos.value) return {}
|
||
return {
|
||
left: `${fabPos.value.left}px`,
|
||
top: `${fabPos.value.top}px`,
|
||
right: 'auto',
|
||
bottom: 'auto'
|
||
}
|
||
})
|
||
|
||
function clampFabToViewport() {
|
||
const el = fabRef.value
|
||
if (!el) return
|
||
const pad = 8
|
||
const w = el.offsetWidth || 200
|
||
const h = el.offsetHeight || 48
|
||
const vw = window.innerWidth
|
||
const vh = window.innerHeight
|
||
if (!fabPos.value) return
|
||
let { left, top } = fabPos.value
|
||
// 持久化坐标在视窗外（换屏、缩放、误拖）时恢复默认右下角
|
||
if (left + w < pad || top + h < pad || left > vw - pad || top > vh - pad) {
|
||
fabPos.value = null
|
||
try {
|
||
localStorage.removeItem(FAB_POS_STORAGE)
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
return
|
||
}
|
||
const nl = Math.max(pad, Math.min(left, vw - w - pad))
|
||
const nt = Math.max(pad, Math.min(top, vh - h - pad))
|
||
if (nl !== left || nt !== top) {
|
||
fabPos.value = { left: nl, top: nt }
|
||
try {
|
||
localStorage.setItem(FAB_POS_STORAGE, JSON.stringify(fabPos.value))
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
}
|
||
|
||
function onFabResizeClamp() {
|
||
clampFabToViewport()
|
||
}
|
||
|
||
onMounted(() => {
|
||
try {
|
||
const raw = localStorage.getItem(FAB_POS_STORAGE)
|
||
if (raw) {
|
||
const p = JSON.parse(raw) as { left: number; top: number }
|
||
if (typeof p.left === 'number' && typeof p.top === 'number' && Number.isFinite(p.left) && Number.isFinite(p.top)) {
|
||
fabPos.value = p
|
||
}
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
nextTick(() => {
|
||
clampFabToViewport()
|
||
})
|
||
window.addEventListener('resize', onFabResizeClamp)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', onFabResizeClamp)
|
||
})
|
||
|
||
function onFabPointerMove(e: PointerEvent) {
|
||
if (!fabDragSession) return
|
||
const dx = e.clientX - fabDragSession.startX
|
||
const dy = e.clientY - fabDragSession.startY
|
||
if (Math.abs(dx) > 4 || Math.abs(dy) > 4) fabDragSession.moved = true
|
||
const el = fabRef.value
|
||
if (!el) return
|
||
let nl = fabDragSession.origLeft + dx
|
||
let nt = fabDragSession.origTop + dy
|
||
const pad = 8
|
||
const w = el.offsetWidth
|
||
const h = el.offsetHeight
|
||
nl = Math.max(pad, Math.min(nl, window.innerWidth - w - pad))
|
||
nt = Math.max(pad, Math.min(nt, window.innerHeight - h - pad))
|
||
fabPos.value = { left: nl, top: nt }
|
||
}
|
||
|
||
function onFabPointerUp(e: PointerEvent) {
|
||
if (!fabDragSession) return
|
||
const moved = fabDragSession.moved
|
||
fabDragSession = null
|
||
fabDragging.value = false
|
||
const el = fabRef.value
|
||
if (el) {
|
||
try {
|
||
el.releasePointerCapture(e.pointerId)
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
window.removeEventListener('pointermove', onFabPointerMove)
|
||
window.removeEventListener('pointerup', onFabPointerUp)
|
||
if (fabPos.value) {
|
||
try {
|
||
localStorage.setItem(FAB_POS_STORAGE, JSON.stringify(fabPos.value))
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
if (!moved) {
|
||
void onFabClick()
|
||
}
|
||
}
|
||
|
||
function onFabPointerDown(e: PointerEvent) {
|
||
if (e.button !== 0) return
|
||
if (pageLoading.value) return
|
||
const el = fabRef.value
|
||
if (!el) return
|
||
const r = el.getBoundingClientRect()
|
||
fabDragSession = {
|
||
startX: e.clientX,
|
||
startY: e.clientY,
|
||
origLeft: r.left,
|
||
origTop: r.top,
|
||
moved: false
|
||
}
|
||
fabDragging.value = true
|
||
el.setPointerCapture(e.pointerId)
|
||
window.addEventListener('pointermove', onFabPointerMove)
|
||
window.addEventListener('pointerup', onFabPointerUp)
|
||
}
|
||
|
||
const dialogVisible = ref(false)
|
||
const initialPayload = ref<{
|
||
file?: File | null
|
||
query?: string
|
||
autoSend?: boolean
|
||
prompt?: string
|
||
moduleName?: string
|
||
moduleCode?: string
|
||
pendingUserText?: string
|
||
} | null>(null)
|
||
const chatMessages = ref<import('./useAiAssistant').ChatMessage[]>([])
|
||
provide(AI_CHAT_MESSAGES_KEY, chatMessages)
|
||
|
||
/** 报告单据上下文：模块名、模块编码、截图文件、截图目标 */
|
||
const reportModuleName = ref<string | null>(null)
|
||
const reportModuleCode = ref<string | null>(null)
|
||
const reportScreenshotFile = ref<File | null>(null)
|
||
const reportScreenshotTarget = ref<string | HTMLElement | null>(null)
|
||
|
||
/** 保存时自动截取当前组件页面（Y 轴全部内容），供报告单据使用 */
|
||
async function captureScreenshotForReport(): Promise<File | null> {
|
||
const targetRef = reportScreenshotTarget.value
|
||
if (!targetRef) return null
|
||
const target = typeof targetRef === 'string' ? document.querySelector(targetRef) : targetRef
|
||
if (!target || !(target instanceof HTMLElement)) return null
|
||
|
||
const TRANSPARENT_PIXEL =
|
||
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||
const opts = {
|
||
useCORS: true,
|
||
allowTaint: true,
|
||
logging: false,
|
||
ignoreElements: (node: Node) => {
|
||
const n = node as HTMLElement
|
||
return n.classList?.contains('ai-assistant-fab') === true
|
||
},
|
||
onclone: (clonedDoc: Document, clonedNode: HTMLElement) => {
|
||
runHtml2CanvasOnClone(clonedDoc, clonedNode, TRANSPARENT_PIXEL)
|
||
}
|
||
}
|
||
|
||
try {
|
||
const w = target.scrollWidth || target.offsetWidth
|
||
const h = target.scrollHeight || target.offsetHeight
|
||
const maxDim = Math.max(w, h)
|
||
const scale = maxDim > 8192 ? 1 : Math.min(2, window.devicePixelRatio || 2)
|
||
const canvas = await html2canvas(target, { ...opts, scale })
|
||
return new Promise((resolve) => {
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
if (!blob) {
|
||
resolve(null)
|
||
return
|
||
}
|
||
resolve(new File([blob], 'screenshot.png', { type: 'image/png' }))
|
||
},
|
||
'image/png',
|
||
0.9
|
||
)
|
||
})
|
||
} catch (e) {
|
||
console.error('报告截图失败:', e)
|
||
return null
|
||
}
|
||
}
|
||
|
||
provide<AiAssistantReportContext>(AI_ASSISTANT_REPORT_CONTEXT_KEY, {
|
||
moduleName: reportModuleName,
|
||
moduleCode: reportModuleCode,
|
||
screenshotFile: reportScreenshotFile,
|
||
captureScreenshot: captureScreenshotForReport
|
||
})
|
||
|
||
const pageLoading = ref(false)
|
||
function setPageLoading(v: boolean) {
|
||
pageLoading.value = v
|
||
}
|
||
|
||
/** 当前页面的 AI 任务提示词，由页面通过 setPagePrompt 设置 */
|
||
const pagePromptRef = ref<string | null>(null)
|
||
function setPagePrompt(p: string | null) {
|
||
pagePromptRef.value = p
|
||
}
|
||
|
||
/** 当前页面的模块名称，由页面通过 setPageModuleName 设置，用于报告单据 */
|
||
function setPageModuleName(name: string | null) {
|
||
reportModuleName.value = name
|
||
}
|
||
|
||
/** 当前页面的模块编码，由页面通过 setPageModuleCode 设置，用于报告单据 */
|
||
function setPageModuleCode(code: string | null) {
|
||
reportModuleCode.value = code
|
||
}
|
||
|
||
/** 当前页面截图目标（选择器或元素），保存报告时自动截取该区域 Y 轴全部内容 */
|
||
function setScreenshotTarget(target: string | HTMLElement | null) {
|
||
reportScreenshotTarget.value = target
|
||
}
|
||
|
||
/** 截图并打开对话框（供 AiAssistantMark 等调用） */
|
||
async function openWithScreenshot(
|
||
target: string | HTMLElement,
|
||
options?: { moduleName?: string; moduleCode?: string; prompt?: string; pendingUserText?: string }
|
||
) {
|
||
if (pageLoading.value) return
|
||
await doScreenshot(
|
||
target,
|
||
options?.prompt,
|
||
options?.moduleName,
|
||
options?.moduleCode,
|
||
options?.pendingUserText
|
||
)
|
||
}
|
||
|
||
/** 点击悬浮框：只打开对话框，不截图（仅 AI 分析入口需要截图） */
|
||
async function onFabClick() {
|
||
if (pageLoading.value) return
|
||
const prompt = pagePromptRef.value || undefined
|
||
const moduleName = reportModuleName.value || undefined
|
||
const moduleCode = reportModuleCode.value || undefined
|
||
initialPayload.value = { prompt, autoSend: false, moduleName, moduleCode }
|
||
reportScreenshotFile.value = null
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
async function doScreenshot(
|
||
el: string | HTMLElement,
|
||
prompt?: string,
|
||
moduleName?: string,
|
||
moduleCode?: string,
|
||
pendingUserText?: string
|
||
) {
|
||
const target = typeof el === 'string' ? document.querySelector(el) : el
|
||
if (!target || !(target instanceof HTMLElement)) {
|
||
ElMessage.warning('未找到截图区域')
|
||
dialogVisible.value = true
|
||
return
|
||
}
|
||
const payloadPrompt = prompt
|
||
const payloadModuleName = moduleName
|
||
const payloadModuleCode = moduleCode
|
||
const payloadPendingUserText = pendingUserText
|
||
|
||
const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||
|
||
const opts = {
|
||
useCORS: true,
|
||
allowTaint: true,
|
||
logging: false,
|
||
ignoreElements: (node: Node) => {
|
||
const n = node as HTMLElement
|
||
return n.classList?.contains('ai-assistant-fab') === true
|
||
},
|
||
onclone: (clonedDoc: Document, clonedNode: HTMLElement) => {
|
||
runHtml2CanvasOnClone(clonedDoc, clonedNode, TRANSPARENT_PIXEL)
|
||
}
|
||
}
|
||
|
||
const tryCapture = async (scale: number = 1): Promise<void> => {
|
||
const canvas = await html2canvas(target, { ...opts, scale })
|
||
return new Promise((resolve, reject) => {
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
if (!blob) {
|
||
reject(new Error('toBlob失败'))
|
||
return
|
||
}
|
||
const file = new File([blob], 'screenshot.png', { type: 'image/png' })
|
||
initialPayload.value = {
|
||
file,
|
||
autoSend: false,
|
||
prompt: payloadPrompt,
|
||
moduleName: payloadModuleName,
|
||
moduleCode: payloadModuleCode,
|
||
pendingUserText: payloadPendingUserText
|
||
}
|
||
reportScreenshotFile.value = file
|
||
if (payloadModuleCode) reportModuleCode.value = payloadModuleCode
|
||
dialogVisible.value = true
|
||
resolve()
|
||
},
|
||
'image/png',
|
||
0.9
|
||
)
|
||
})
|
||
}
|
||
|
||
try {
|
||
// html2canvas 会截取完整可滚动内容，用 scroll 尺寸判断
|
||
const w = target.scrollWidth || target.offsetWidth
|
||
const h = target.scrollHeight || target.offsetHeight
|
||
const maxDim = Math.max(w, h)
|
||
// 浏览器 canvas 单边约 16384px，scale 2 时需 maxDim <= 8192
|
||
const scale = maxDim > 8192 ? 1 : Math.min(2, window.devicePixelRatio || 2)
|
||
await tryCapture(scale)
|
||
} catch (e) {
|
||
try {
|
||
await tryCapture(1)
|
||
} catch (e2) {
|
||
console.error('截图失败:', e2)
|
||
ElMessage.error('截图失败，已打开对话框')
|
||
initialPayload.value = null
|
||
dialogVisible.value = true
|
||
}
|
||
}
|
||
}
|
||
|
||
watch(dialogVisible, (v) => {
|
||
if (!v) {
|
||
initialPayload.value = null
|
||
reportScreenshotFile.value = null
|
||
}
|
||
})
|
||
|
||
provide(AI_ASSISTANT_KEY, {
|
||
openWithScreenshot,
|
||
setPageLoading,
|
||
setPagePrompt,
|
||
setPageModuleName,
|
||
setPageModuleCode,
|
||
setScreenshotTarget,
|
||
setAiAssistantFabEnabled
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 参考 AIRBT.html：白底、蓝边、圆角药丸、图标蓝圈、hover 放大 */
|
||
.ai-assistant-fab {
|
||
position: fixed;
|
||
right: 24px;
|
||
bottom: 85px;
|
||
z-index: 10050;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 20px;
|
||
background: #fff;
|
||
border: 1px solid #bfdbfe;
|
||
border-radius: 9999px;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
cursor: grab;
|
||
touch-action: none;
|
||
user-select: none;
|
||
transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
|
||
}
|
||
.ai-assistant-fab.is-dragging {
|
||
cursor: grabbing;
|
||
transform: none;
|
||
transition: box-shadow 0.2s, opacity 0.2s;
|
||
}
|
||
.ai-assistant-fab:hover:not(.is-loading):not(.is-hidden):not(.is-dragging) {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
/* 抽屉已打开时隐藏悬浮按钮，避免与侧栏内容重叠、重复入口 */
|
||
.ai-assistant-fab.is-hidden {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
visibility: hidden;
|
||
}
|
||
.ai-assistant-fab.is-loading {
|
||
cursor: not-allowed;
|
||
pointer-events: auto;
|
||
}
|
||
.fab-icon-wrap {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: #2563eb;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
|
||
}
|
||
.fab-icon {
|
||
font-size: 16px;
|
||
}
|
||
.fab-loading {
|
||
animation: fab-spin 0.8s linear infinite;
|
||
}
|
||
@keyframes fab-spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.fab-text {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #2563eb;
|
||
letter-spacing: 0.025em;
|
||
}
|
||
</style>
|