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>
|