DF AI 对话附件与产物统一预览需求

优先级：P1
目标：用户可在对话中直接查看上传附件及生成产物，通过统一的右侧预览栏查看内容，减少下载后打开文件的操作。

需求背景与痛点

用户在 DF AI 中既会上传附件作为分析材料，也会在对话中获得查询结果、文档、数据表和 HTML 可视化产物。需要在对话过程中核对原始材料、查看结果并继续追问，因此应提供附件与产物统一的右侧预览能力，减少下载文件和切换窗口的操作。

痛点1：查询产物查看不够便捷。顶部“产物”预览以文本形式展示结果，用户查看完整表格通常需要下载文件。期望通过侧边栏内嵌 Excel 组件，一边查看数据，一边进行 AI 对话。
痛点2：上传附件无法直接核对。用户上传附件后，有时需要查看内容以确认是否上传正确，但当前缺少对话内预览入口。期望支持发送前及发送后查看同一附件。
痛点3：文件与产物查看路径分散。上传材料与生成结果缺少统一查看方式，多份文件之间切换不便。期望在同一个预览工作区中切换文件，保留对话上下文及原有下载、导出能力。

一、核心功能

1. 统一预览入口

以下内容均接入同一个预览栏：

场景1：发送前的附件

输入框中已上传、尚未发送的附件。

场景1：发送前的附件 — 当前原型实拍：点击输入框中的附件名称即可预览，无需先发送消息；右侧读取实际Excel文件，底部显示**真实工作表**。

场景2：已发送消息中的附件

已发送消息中的附件。

操作前：消息中的附件 — 用户提供的确认图：已发送消息上方展示附件名称及“预览”入口，点击后打开右侧预览栏。

场景3：查询结果与生成产物

查询结果、生成文档、数据表及 HTML 可视化产物。

操作后：侧栏展示查询结果 — 关闭产物列表后，同一份查询数据进入Excel组件，底部为查询结果Sheet。

点击附件卡片、产物标题或“预览”按钮，均打开对应内容。预览查询结果时使用原查询数据，不重新查询。

2. 产物列表

保留现有查询产物的展示方式，包括日期分组、名称、行列数、生成时间，以及预览、SQL、CSV、Excel 操作。

点击顶部“产物”图标打开列表，图标高亮。
点击文件标题或“预览”，关闭产物列表，切换至右侧内容预览。
列表与内容预览不同时占用两个右侧区域。

当前原型：产物列表 — 2026-10-13 当前分支实拍，产物打开状态、文件标题及预览操作。

3. 右侧预览栏

打开时与对话左右并排，左侧对话区收窄，右侧预览区占满可用高度。
中间边界支持拖动调宽，并记住本机宽度设置。
顶部标签区展示不同文件；Excel 的工作表标签在预览内容底部展示。
支持打开多个文件、切换标签、关闭单个标签及新增标签页。
重复打开同一文件时切换至已有标签，避免重复创建。
预览默认只读，支持下载原文件；生成产物保留原有导出能力。

当前原型：Excel 内嵌预览 — 2026-10-13 当前分支实拍，查询结果通过真实表格组件展示；底部为查询结果 Sheet，数据为原型演示数据。

多个文件与新标签页 — 顶部文件标签与新增窗口共存，文件Sheet在内容底部展示。

4. 全屏、收起与关闭

全屏、收起等操作采用图标，悬停显示功能名称。

全屏：扩大当前预览工作区；退出后恢复左右布局。
收起：完全隐藏预览栏，对话恢复默认宽度，不保留右侧窄栏、文件数量等内容；已打开标签保留。
重新打开：恢复收起前的标签和当前预览内容。
关闭预览栏：关闭全部预览标签，恢复默认页面。
入口联动：预览展开时隐藏“打开右侧栏”，只保留预览栏中的“收起预览”；收起或关闭后恢复打开入口。

当前原型：收起预览 — 2026-10-13 当前分支实拍，恢复默认对话布局，无右侧窄栏或数量残留。

5. 新标签页与网页预览

新标签页正文只显示居中的“打开浏览器”。
点击后显示网址输入框，支持输入 HTTP/HTTPS 地址。
地址框右侧提供刷新图标，重新加载当前网页。
网页提供“浏览器打开”操作；无法内嵌的网站可在新页面访问。
产物通过顶部“产物”入口选择并打开。

当前原型：新标签页 — 2026-10-13 当前分支实拍，支持多标签，新增标签正文仅展示打开浏览器。

点击后：浏览器地址栏 — 点击打开浏览器后显示地址输入和刷新图标，保留其他文件标签。

二、可预览格式与组件

以下组件为当前原型方案或开发建议，正式开发需确认兼容性、许可证及内部部署方式。Demo列为当前原型读取实际样例文件的结果，每类仅选一个代表格式，不代表该类型全部扩展名均完成回归。已更新为修复后的实际截图，可下载样例复现。

类型	格式	核心展示要求	组件方案与当前情况	实际预览 Demo（点击放大）
Excel	`.xlsx、.xls`	真实读取文件；展示单元格、行列标题、原工作表名称，支持底部 Sheet 切换及双向滚动	原型使用 SheetJS 解析，x-data-spreadsheet 内嵌只读展示。复杂样式、图表及公式显示兼容性需专项确认	实际XLSX · 真实Sheet 下载回归样例 ↧
数据表	`.csv、.tsv`	表格展示字段与数据，正确处理分隔符及中文编码	复用 SheetJS 和表格预览组件；原型已支持	实际CSV · 首次打开正常表格渲染下载回归样例 ↧
Word	`.docx`	展示正文、标题、表格、图片及分页内容	原型使用 docx-preview + JSZip；复杂排版需确认兼容性	实际DOCX · 文档组件下载回归样例 ↧
Markdown	`.md`	渲染标题、段落、列表、表格、代码块及链接，支持查看原文	原型使用 Marked + DOMPurify 渲染Markdown并清理危险内容，支持表格语法及原文查看	实际MD · 标题、表格、列表及代码块渲染下载回归样例 ↧
HTML	`.html、.htm`	展示网页或可视化看板，支持查看源码；生成看板保留原有导出操作	使用隔离的 iframe；原型已支持 .html 与 .htm，通过 srcDoc 沙箱加载内容	实际HTML · 隔离渲染看板及折线图下载回归样例 ↧
PDF	`.pdf`	分页阅读、缩放、搜索及下载	原型使用 PDF.js 4.10.38 内嵌渲染真实PDF，支持分页和缩放，保留原文件下载；全文搜索需正式开发补齐。	实际PDF · PDF.js分页渲染及缩放下载回归样例 ↧
图片	`.png、.jpg、.jpeg、.webp、.gif`	完整展示图片，支持缩放及适应窗口	原型使用浏览器图片组件；缩放交互需补充	实际PNG · 图片展示下载回归样例 ↧
纯文本	`.txt、.log`	保留换行，长内容可滚动，超出预览范围时明确提示	原型已支持文本预览	实际TXT · 中文与换行下载回归样例 ↧
结构化文本	`.json、.jsonl、.xml、.yaml、.yml`	以文本或代码形式展示；JSON 支持格式化，建议增加语法高亮	原型已支持文本展示及有效 JSON 格式化	实际JSON · 格式化显示下载回归样例 ↧