refactor: 移除导出对话功能，如有需要建议调用接口自行渲染
This commit is contained in:
Wenjie Zhang
parent
00a4a0cdab
commit
48d4a6b36f
@ -1,435 +0,0 @@
|
||||
import { escapeHtml } from '@/utils/html'
|
||||
import { renderMarkdown as renderMarkdownPreview } from '@/utils/markdown_preview'
|
||||
import dayjs, { parseToShanghai } from '@/utils/time'
|
||||
import chatExportTemplate from './templates/chat-export-template.html?raw'
|
||||
|
||||
export class ChatExporter {
|
||||
/**
|
||||
* 导出聊天对话为 HTML 文件
|
||||
* @param {Object} options 导出选项
|
||||
*/
|
||||
static async exportToHTML(options = {}) {
|
||||
const {
|
||||
chatTitle = '新对话',
|
||||
agentName = '智能助手',
|
||||
agentDescription = '',
|
||||
messages = []
|
||||
} = options || {}
|
||||
|
||||
try {
|
||||
const htmlContent = await this.generateHTML({
|
||||
chatTitle,
|
||||
agentName,
|
||||
agentDescription,
|
||||
messages
|
||||
})
|
||||
|
||||
const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
const timestamp = dayjs().tz('Asia/Shanghai').format('YYYYMMDD-HHmmss')
|
||||
const safeTitle = chatTitle.replace(/[\\/:*?"<>|]/g, '_')
|
||||
const filename = `${safeTitle}-${timestamp}.html`
|
||||
|
||||
link.href = url
|
||||
link.download = filename
|
||||
link.style.display = 'none'
|
||||
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
URL.revokeObjectURL(url)
|
||||
|
||||
return { success: true, filename }
|
||||
} catch (error) {
|
||||
console.error('导出对话失败:', error)
|
||||
throw new Error(`导出失败: ${error.message}`, { cause: error })
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成完整 HTML 内容
|
||||
*/
|
||||
static async generateHTML(options) {
|
||||
const { chatTitle, agentName, agentDescription, messages } = options
|
||||
|
||||
const flattenedMessages = this.flattenMessages(messages)
|
||||
if (flattenedMessages.length === 0) {
|
||||
throw new Error('没有可导出的对话内容')
|
||||
}
|
||||
|
||||
const messagesHTML = await this.generateMessagesHTML(flattenedMessages, agentName)
|
||||
|
||||
return this.generateHTMLTemplate({
|
||||
chatTitle,
|
||||
agentName,
|
||||
agentDescription,
|
||||
exportTime: dayjs().tz('Asia/Shanghai').format('YYYY年MM月DD日 HH:mm:ss'),
|
||||
messagesHTML
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 扁平化消息列表
|
||||
*/
|
||||
static flattenMessages(messages = []) {
|
||||
const result = []
|
||||
|
||||
console.log('[ChatExporter] flattenMessages input:', {
|
||||
messagesLength: messages?.length || 0,
|
||||
messagesType: Array.isArray(messages) ? 'array' : typeof messages,
|
||||
firstMessage: messages?.[0]
|
||||
? {
|
||||
hasMessages: Array.isArray(messages[0].messages),
|
||||
hasType: !!messages[0].type,
|
||||
hasRole: !!messages[0].role,
|
||||
hasContent: !!messages[0].content,
|
||||
keys: Object.keys(messages[0])
|
||||
}
|
||||
: null
|
||||
})
|
||||
;(messages || []).forEach((item) => {
|
||||
if (!item) return
|
||||
|
||||
if (Array.isArray(item.messages)) {
|
||||
item.messages.forEach((msg) => {
|
||||
if (msg) result.push(msg)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 支持直接传入消息扁平数组
|
||||
if (item.type || item.role || item.content) {
|
||||
result.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成对话消息的 HTML 片段
|
||||
*/
|
||||
static async generateMessagesHTML(messages, agentName) {
|
||||
const messageSegments = await Promise.all(
|
||||
messages.map(async (msg) => {
|
||||
const isUserMessage = ['human', 'user'].includes(msg?.type) || msg?.role === 'user'
|
||||
const avatar = isUserMessage ? '👤' : '🤖'
|
||||
const senderLabel = isUserMessage ? '用户' : agentName || '智能助手'
|
||||
const messageClass = isUserMessage ? 'user-message' : 'ai-message'
|
||||
const timestampRaw = this.getMessageTimestamp(msg)
|
||||
const timestamp = this.escapeHtml(this.formatTimestamp(timestampRaw))
|
||||
|
||||
const { content, reasoning } = this.extractMessageContent(msg)
|
||||
const [contentHTML, reasoningHTML] = await Promise.all([
|
||||
content ? this.renderMarkdown(content) : '',
|
||||
!isUserMessage ? this.generateReasoningHTML(reasoning) : ''
|
||||
])
|
||||
const toolCallsHTML = !isUserMessage ? this.generateToolCallsHTML(msg) : ''
|
||||
|
||||
const bodySegments = [
|
||||
reasoningHTML,
|
||||
contentHTML ? `<div class="markdown-body">${contentHTML}</div>` : '',
|
||||
toolCallsHTML
|
||||
].filter(Boolean)
|
||||
|
||||
return `
|
||||
<div class="message ${messageClass}">
|
||||
<div class="message-header">
|
||||
<span class="avatar">${avatar}</span>
|
||||
<span class="sender">${this.escapeHtml(senderLabel)}</span>
|
||||
<span class="time">${timestamp}</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
${bodySegments.length > 0 ? bodySegments.join('') : '<div class="empty-message">（此消息暂无可展示内容）</div>'}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
)
|
||||
|
||||
return messageSegments.join('')
|
||||
}
|
||||
|
||||
/**
|
||||
* 拆分消息内容与推理文本
|
||||
*/
|
||||
static extractMessageContent(msg = {}) {
|
||||
const content = this.normalizeContent(msg?.content)
|
||||
let reasoning = msg?.additional_kwargs?.reasoning_content || msg?.reasoning_content || ''
|
||||
let visibleContent = content
|
||||
|
||||
if (!reasoning && content.includes('<think')) {
|
||||
const thinkRegex = /<think>([\s\S]*?)<\/think>|<think>([\s\S]*)$/i
|
||||
const match = content.match(thinkRegex)
|
||||
if (match) {
|
||||
reasoning = (match[1] || match[2] || '').trim()
|
||||
visibleContent = content.replace(match[0], '').trim()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
content: visibleContent,
|
||||
reasoning
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 标准化消息内容
|
||||
*/
|
||||
static normalizeContent(raw) {
|
||||
if (raw == null) return ''
|
||||
if (typeof raw === 'string') return raw
|
||||
|
||||
if (Array.isArray(raw)) {
|
||||
return raw
|
||||
.map((item) => {
|
||||
if (!item) return ''
|
||||
if (typeof item === 'string') return item
|
||||
if (typeof item === 'object') {
|
||||
return item.text || item.content || item.value || ''
|
||||
}
|
||||
return String(item)
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join('\n')
|
||||
.trim()
|
||||
}
|
||||
|
||||
if (typeof raw === 'object') {
|
||||
if (typeof raw.text === 'string') return raw.text
|
||||
if (typeof raw.content === 'string') return raw.content
|
||||
if (Array.isArray(raw.content)) return this.normalizeContent(raw.content)
|
||||
try {
|
||||
return JSON.stringify(raw, null, 2)
|
||||
} catch {
|
||||
return String(raw)
|
||||
}
|
||||
}
|
||||
|
||||
return String(raw)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成推理过程 HTML
|
||||
*/
|
||||
static async generateReasoningHTML(reasoning) {
|
||||
if (!reasoning) return ''
|
||||
|
||||
const reasoningHTML = await this.renderMarkdown(reasoning)
|
||||
if (!reasoningHTML) return ''
|
||||
|
||||
return `
|
||||
<details class="reasoning-section">
|
||||
<summary class="reasoning-summary">💭 思考过程</summary>
|
||||
<div class="reasoning-content markdown-body">
|
||||
${reasoningHTML}
|
||||
</div>
|
||||
</details>
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成工具调用 HTML
|
||||
*/
|
||||
static generateToolCallsHTML(msg = {}) {
|
||||
const toolCalls = this.normalizeToolCalls(msg)
|
||||
if (toolCalls.length === 0) return ''
|
||||
|
||||
const sections = toolCalls
|
||||
.map((toolCall) => {
|
||||
const toolName = this.escapeHtml(toolCall?.function?.name || toolCall?.name || '工具调用')
|
||||
const argsSource = toolCall?.args ?? toolCall?.function?.arguments
|
||||
const args = this.stringifyToolArgs(argsSource)
|
||||
const result = this.normalizeToolResult(toolCall?.tool_call_result?.content)
|
||||
const isFinished = toolCall?.status === 'success'
|
||||
const stateClass = isFinished ? 'done' : 'pending'
|
||||
const stateLabel = isFinished ? '已完成' : '执行中'
|
||||
|
||||
return `
|
||||
<details class="tool-call" ${isFinished ? '' : 'open'}>
|
||||
<summary>
|
||||
<span class="tool-call-title">🔧 ${toolName}</span>
|
||||
<span class="tool-call-state ${stateClass}">${stateLabel}</span>
|
||||
</summary>
|
||||
<div class="tool-call-body">
|
||||
${
|
||||
args
|
||||
? `
|
||||
<div class="tool-call-args">
|
||||
<strong>参数</strong>
|
||||
<pre>${this.escapeHtml(args)}</pre>
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${
|
||||
isFinished && result
|
||||
? `
|
||||
<div class="tool-call-result">
|
||||
<strong>结果</strong>
|
||||
<pre>${this.escapeHtml(result)}</pre>
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</details>
|
||||
`
|
||||
})
|
||||
.join('')
|
||||
|
||||
return `<div class="tool-calls">${sections}</div>`
|
||||
}
|
||||
|
||||
static normalizeToolCalls(msg = {}) {
|
||||
const rawCalls = msg.tool_calls || msg.additional_kwargs?.tool_calls
|
||||
if (!rawCalls) return []
|
||||
if (Array.isArray(rawCalls)) return rawCalls.filter(Boolean)
|
||||
if (typeof rawCalls === 'object') {
|
||||
return Object.values(rawCalls).filter(Boolean)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
static stringifyToolArgs(rawArgs) {
|
||||
if (rawArgs == null || rawArgs === '') return ''
|
||||
|
||||
if (typeof rawArgs === 'string') {
|
||||
const trimmed = rawArgs.trim()
|
||||
if (!trimmed) return ''
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(trimmed), null, 2)
|
||||
} catch {
|
||||
return trimmed
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof rawArgs === 'object') {
|
||||
try {
|
||||
return JSON.stringify(rawArgs, null, 2)
|
||||
} catch {
|
||||
return String(rawArgs)
|
||||
}
|
||||
}
|
||||
|
||||
return String(rawArgs)
|
||||
}
|
||||
|
||||
static normalizeToolResult(result) {
|
||||
if (!result) return ''
|
||||
if (typeof result === 'string') return result.trim()
|
||||
|
||||
if (Array.isArray(result)) {
|
||||
return result
|
||||
.map((item) => {
|
||||
if (!item) return ''
|
||||
if (typeof item === 'string') return item
|
||||
if (typeof item === 'object') {
|
||||
return item.text || item.content || JSON.stringify(item, null, 2)
|
||||
}
|
||||
return String(item)
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join('\n\n')
|
||||
.trim()
|
||||
}
|
||||
|
||||
if (typeof result === 'object') {
|
||||
if (typeof result.content !== 'undefined') {
|
||||
return this.normalizeToolResult(result.content)
|
||||
}
|
||||
try {
|
||||
return JSON.stringify(result, null, 2)
|
||||
} catch {
|
||||
return String(result)
|
||||
}
|
||||
}
|
||||
|
||||
return String(result)
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一的 Markdown 渲染，失败时回退到简单换行
|
||||
*/
|
||||
static async renderMarkdown(content) {
|
||||
if (!content) return ''
|
||||
try {
|
||||
return (await renderMarkdownPreview(content)).trim()
|
||||
} catch (error) {
|
||||
console.warn('Markdown 渲染失败，回退为纯文本:', error)
|
||||
return this.escapeHtml(content).replace(/\n/g, '<br>')
|
||||
}
|
||||
}
|
||||
|
||||
static escapeHtml(value) {
|
||||
return escapeHtml(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 提取消息时间戳
|
||||
*/
|
||||
static getMessageTimestamp(msg = {}) {
|
||||
const candidates = [
|
||||
msg.timestamp,
|
||||
msg.created_at,
|
||||
msg.createdAt,
|
||||
msg.createdTime,
|
||||
msg.time,
|
||||
msg.datetime,
|
||||
msg.date,
|
||||
msg.additional_kwargs?.timestamp,
|
||||
msg.additional_kwargs?.created_at
|
||||
]
|
||||
|
||||
return candidates.find((value) => value !== undefined && value !== null)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间戳
|
||||
*/
|
||||
static formatTimestamp(raw) {
|
||||
const fallback = dayjs().tz('Asia/Shanghai')
|
||||
|
||||
if (raw instanceof Date) {
|
||||
return dayjs(raw).tz('Asia/Shanghai').format('YYYY年MM月DD日 HH:mm:ss')
|
||||
}
|
||||
|
||||
if (raw || raw === 0) {
|
||||
if (typeof raw === 'number') {
|
||||
const value = raw < 1e12 ? raw * 1000 : raw
|
||||
return dayjs(value).tz('Asia/Shanghai').format('YYYY年MM月DD日 HH:mm:ss')
|
||||
}
|
||||
|
||||
const parsed = parseToShanghai(raw)
|
||||
if (parsed) {
|
||||
return parsed.format('YYYY年MM月DD日 HH:mm:ss')
|
||||
}
|
||||
}
|
||||
|
||||
return fallback.format('YYYY年MM月DD日 HH:mm:ss')
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成完整 HTML 文档骨架
|
||||
*/
|
||||
static generateHTMLTemplate(options) {
|
||||
const { chatTitle, agentName, agentDescription, exportTime, messagesHTML } = options
|
||||
|
||||
const safeTitle = this.escapeHtml(chatTitle)
|
||||
const safeAgentName = this.escapeHtml(agentName)
|
||||
const safeDescription = this.escapeHtml(agentDescription).replace(/\n/g, '<br>')
|
||||
const safeExportTime = this.escapeHtml(exportTime)
|
||||
|
||||
const descriptionBlock = agentDescription ? `<br><strong>描述:</strong> ${safeDescription}` : ''
|
||||
|
||||
return chatExportTemplate
|
||||
.replace(/{{TITLE}}/g, safeTitle)
|
||||
.replace('{{AGENT_NAME}}', safeAgentName)
|
||||
.replace('{{DESCRIPTION_BLOCK}}', descriptionBlock)
|
||||
.replace('{{EXPORT_TIME}}', safeExportTime)
|
||||
.replace('{{MESSAGES}}', messagesHTML)
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatExporter
|
||||
@ -1,318 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{TITLE}} - 对话导出</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #212529;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 40px auto;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #f8fafc, #eef2ff);
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 32px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
color: #1e293b;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header .agent-info {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.header .export-info {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #cbd5f5;
|
||||
}
|
||||
|
||||
.messages {
|
||||
padding: 32px 40px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sender {
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding: 18px 22px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.message-content > *:not(:last-child) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%);
|
||||
border: 1px solid #bae6fd;
|
||||
}
|
||||
|
||||
.user-message .sender {
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.markdown-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 24px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
overflow-x: auto;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.reasoning-section {
|
||||
border: 1px solid #cbd5f5;
|
||||
border-radius: 10px;
|
||||
background: rgba(79, 70, 229, 0.04);
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.reasoning-summary {
|
||||
font-weight: 600;
|
||||
color: #4338ca;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.reasoning-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reasoning-summary::after {
|
||||
content: '▼';
|
||||
font-size: 0.8em;
|
||||
margin-left: 6px;
|
||||
transition: transform 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reasoning-section[open] .reasoning-summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.reasoning-content {
|
||||
margin-top: 14px;
|
||||
border-top: 1px dashed rgba(79, 70, 229, 0.2);
|
||||
padding-top: 14px;
|
||||
color: #312e81;
|
||||
}
|
||||
|
||||
.tool-calls {
|
||||
border: 1px solid #cbd5f5;
|
||||
border-radius: 10px;
|
||||
background: rgba(59, 130, 246, 0.04);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tool-call {
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.tool-call > summary {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.tool-call > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tool-call > summary::after {
|
||||
content: '▼';
|
||||
font-size: 0.8em;
|
||||
margin-left: 8px;
|
||||
transition: transform 0.2s ease;
|
||||
color: rgba(29, 78, 216, 0.6);
|
||||
}
|
||||
|
||||
.tool-call[open] > summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tool-call-body {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tool-call-state {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.tool-call-state.done {
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.tool-call-state.pending {
|
||||
border-color: rgba(251, 191, 36, 0.3);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.tool-call pre {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
color: rgba(248, 250, 252, 0.9);
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
font-style: italic;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 18px 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.footer .brand {
|
||||
font-weight: 600;
|
||||
color: #4338ca;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>{{TITLE}}</h1>
|
||||
<div class="agent-info"><strong>智能体:</strong> {{AGENT_NAME}} {{DESCRIPTION_BLOCK}}</div>
|
||||
<div class="export-info">导出时间: {{EXPORT_TIME}}</div>
|
||||
</div>
|
||||
<div class="messages">{{MESSAGES}}</div>
|
||||
<div class="footer">
|
||||
<p>此对话由 <span class="brand">智能助手平台</span> 导出</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -87,79 +87,30 @@
|
||||
<FolderKanban size="18" class="nav-btn-icon" />
|
||||
<span class="hide-text">文件</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="userStore.isAdmin && selectedAgentId"
|
||||
ref="moreButtonRef"
|
||||
type="button"
|
||||
class="agent-nav-btn"
|
||||
@click.stop="toggleMoreMenu"
|
||||
>
|
||||
<Ellipsis size="18" class="nav-btn-icon" />
|
||||
</button>
|
||||
</template>
|
||||
</AgentChatComponent>
|
||||
</div>
|
||||
|
||||
<!-- 反馈模态框 -->
|
||||
<FeedbackModalComponent
|
||||
v-if="userStore.isAdmin"
|
||||
ref="feedbackModal"
|
||||
:agent-id="selectedAgentId"
|
||||
/>
|
||||
|
||||
<!-- 自定义更多菜单 -->
|
||||
<Teleport to="body">
|
||||
<Transition name="menu-fade">
|
||||
<div
|
||||
v-if="userStore.isAdmin && chatUIStore.moreMenuOpen"
|
||||
ref="moreMenuRef"
|
||||
class="more-popup-menu"
|
||||
:style="{
|
||||
left: chatUIStore.moreMenuPosition.x + 'px',
|
||||
top: chatUIStore.moreMenuPosition.y + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="menu-item" @click="handleShareChat">
|
||||
<ShareAltOutlined class="menu-icon" />
|
||||
<span class="menu-text">分享对话</span>
|
||||
</div>
|
||||
<div class="menu-item" @click="handleFeedback">
|
||||
<MessageOutlined class="menu-icon" />
|
||||
<span class="menu-text">查看反馈</span>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { MessageOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { Settings2, Ellipsis, ChevronDown, Check, FolderKanban } from 'lucide-vue-next'
|
||||
import { Settings2, ChevronDown, Check, FolderKanban } from 'lucide-vue-next'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import AgentChatComponent from '@/components/AgentChatComponent.vue'
|
||||
import FeedbackModalComponent from '@/components/dashboard/FeedbackModalComponent.vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { isBuiltinAgent, useAgentStore } from '@/stores/agent'
|
||||
import { useChatUIStore } from '@/stores/chatUI'
|
||||
import { ChatExporter } from '@/utils/chatExporter'
|
||||
import { handleChatError } from '@/utils/errorHandler'
|
||||
import { generatePixelAvatar } from '@/utils/pixelAvatar'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 组件引用
|
||||
const feedbackModal = ref(null)
|
||||
const chatComponentRef = ref(null)
|
||||
|
||||
// Stores
|
||||
const userStore = useUserStore()
|
||||
const agentStore = useAgentStore()
|
||||
const chatUIStore = useChatUIStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
@ -264,80 +215,6 @@ const openAgentManagement = () => {
|
||||
router.push({ name: 'ModelManageComp', query: { tab: 'agents' } })
|
||||
}
|
||||
|
||||
// 更多菜单相关
|
||||
const moreMenuRef = ref(null)
|
||||
const moreButtonRef = ref(null)
|
||||
|
||||
const toggleMoreMenu = (event) => {
|
||||
event.stopPropagation()
|
||||
// 切换状态，而不是只打开
|
||||
chatUIStore.moreMenuOpen = !chatUIStore.moreMenuOpen
|
||||
|
||||
if (chatUIStore.moreMenuOpen) {
|
||||
// 只在打开时计算位置
|
||||
const rect = event.currentTarget.getBoundingClientRect()
|
||||
chatUIStore.openMoreMenu(rect.right - 110, rect.bottom + 8)
|
||||
}
|
||||
}
|
||||
|
||||
const closeMoreMenu = () => {
|
||||
chatUIStore.closeMoreMenu()
|
||||
}
|
||||
|
||||
// 使用 VueUse 的 onClickOutside
|
||||
onClickOutside(
|
||||
moreMenuRef,
|
||||
() => {
|
||||
if (chatUIStore.moreMenuOpen) {
|
||||
closeMoreMenu()
|
||||
}
|
||||
},
|
||||
{ ignore: [moreButtonRef] }
|
||||
)
|
||||
|
||||
const handleShareChat = async () => {
|
||||
closeMoreMenu()
|
||||
|
||||
try {
|
||||
// 从聊天组件获取导出数据
|
||||
const exportData = chatComponentRef.value?.getExportPayload?.()
|
||||
|
||||
console.log('[AgentView] Export data:', exportData)
|
||||
|
||||
if (!exportData) {
|
||||
message.warning('当前没有可导出的对话内容')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否有实际的消息内容
|
||||
const hasMessages = exportData.messages && exportData.messages.length > 0
|
||||
const hasOngoingMessages = exportData.onGoingMessages && exportData.onGoingMessages.length > 0
|
||||
|
||||
if (!hasMessages && !hasOngoingMessages) {
|
||||
console.warn('[AgentView] Export data has no messages:', {
|
||||
messages: exportData.messages,
|
||||
onGoingMessages: exportData.onGoingMessages
|
||||
})
|
||||
message.warning('当前对话暂无内容可导出，请先进行对话')
|
||||
return
|
||||
}
|
||||
|
||||
const result = await ChatExporter.exportToHTML(exportData)
|
||||
message.success(`对话已导出为HTML文件: ${result.filename}`)
|
||||
} catch (error) {
|
||||
console.error('[AgentView] Export error:', error)
|
||||
if (error?.message?.includes('没有可导出的对话内容')) {
|
||||
message.warning('当前对话暂无内容可导出，请先进行对话')
|
||||
return
|
||||
}
|
||||
handleChatError(error, 'export')
|
||||
}
|
||||
}
|
||||
|
||||
const handleFeedback = () => {
|
||||
closeMoreMenu()
|
||||
feedbackModal.value?.show()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -397,107 +274,11 @@ const handleFeedback = () => {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
// 自定义更多菜单样式
|
||||
.more-popup-menu {
|
||||
position: fixed;
|
||||
min-width: 100px;
|
||||
background: var(--gray-0);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.08),
|
||||
0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid var(--gray-100);
|
||||
padding: 4px;
|
||||
z-index: 9999;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 14px;
|
||||
color: var(--gray-900);
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 16px;
|
||||
color: var(--gray-600);
|
||||
transition: color 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--gray-50);
|
||||
// color: var(--main-700);
|
||||
|
||||
// .menu-icon {
|
||||
// color: var(--main-600);
|
||||
// }
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background: var(--gray-100);
|
||||
margin: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单淡入淡出动画
|
||||
.menu-fade-enter-active {
|
||||
animation: menuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.menu-fade-leave-active {
|
||||
animation: menuSlideOut 0.15s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
@keyframes menuSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menuSlideOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式优化
|
||||
@media (max-width: 520px) {
|
||||
.config-dropdown-trigger {
|
||||
max-width: calc(100vw - 112px);
|
||||
}
|
||||
|
||||
.more-popup-menu {
|
||||
box-shadow:
|
||||
0 12px 32px rgba(0, 0, 0, 0.12),
|
||||
0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user