chat-navigation-utils

聊天应用导航工具包，提供全屏图表、表格和SQL视图的导航处理功能。

安装

npm install chat-navigation-utils

功能特性

• 全屏图表导航: 支持chart1和chart2类型的全屏显示
• 表格视图导航: 处理表格内容的保存和导航
• SQL视图导航: 处理SQL查询内容的保存和导航
• 状态管理: 自动保存和恢复对话状态
• Vue Router集成: 与Vue Router无缝集成

依赖

• vue ^3.0.0
• vue-router ^4.0.0
• chat-common-utils ^1.0.0

API参考

handleFullScreenChart(chartData, chartType, index, messages, messagesContainer, conversationId, router)

处理全屏图表导航。

参数:

• chartData: 图表数据
• chartType: 图表类型 ('chart1' | 'chart2')
• index: 图表索引
• messages: 消息数组
• messagesContainer: 消息容器元素
• conversationId: 会话ID
• router: Vue Router实例

openTableView(tableHTML, messages, messagesContainer, conversationId, router)

打开表格视图。

参数:

• tableHTML: 表格HTML内容
• messages: 消息数组
• messagesContainer: 消息容器元素
• conversationId: 会话ID
• router: Vue Router实例

handleFullSql(sql, messages, messagesContainer, conversationId, router)

处理全屏SQL视图导航。

参数:

• sql: SQL查询内容
• messages: 消息数组
• messagesContainer: 消息容器元素
• conversationId: 会话ID
• router: Vue Router实例

restoreDialogState()

恢复对话状态。

返回: 恢复的对话状态对象

clearDialogState()

清除所有对话状态。

getTableContent()

获取表格内容。

返回: 表格HTML内容

getSqlContent()

获取SQL内容。

返回: SQL查询内容

使用示例

import {
  handleFullScreenChart,
  openTableView,
  handleFullSql,
  restoreDialogState,
  clearDialogState
} from 'chat-navigation-utils';

// 在Vue组件中使用
const router = useRouter();

// 打开全屏图表
handleFullScreenChart(
  chartData,
  'chart1',
  0,
  messages,
  messagesContainer,
  conversationId,
  router
);

// 打开表格视图
openTableView(
  tableHTML,
  messages,
  messagesContainer,
  conversationId,
  router
);

// 打开SQL视图
handleFullSql(
  sqlContent,
  messages,
  messagesContainer,
  conversationId,
  router
);

// 恢复对话状态
const restoredState = restoreDialogState();

// 清除状态
clearDialogState();

路由配置

确保您的Vue Router配置中包含以下路由：

const routes = [
  { path: '/full-chart-1', component: FullChart1 },
  { path: '/full-chart-2', component: FullChart2 },
  { path: '/table-view', component: TableView },
  { path: '/sql-view', component: SqlView }
];

状态管理

工具包使用localStorage自动管理以下状态：

• chartDialogState: 对话状态（消息、滚动位置、会话ID）
• tableContent: 表格HTML内容
• sqlContent: SQL查询内容（自动添加换行符以便于显示）

错误处理

函数会静默处理错误，确保不会中断应用流程。

浏览器支持

支持所有现代浏览器，包括：

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

许可证

MIT License