 |
摘要 | AI 机器人对话页面的拖放上传与文件预览功能 |
 |
仓库 | GitHub - VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page: Drag & Drop Upload + File Previews for AI Bot Conversations page · GitHub |
 |
觉得有用吗？ | > ./support --coffee |
 |
安装指南 | 如何安装主题或主题组件 |
 |
Discourse 主题新手？ | Discourse 主题使用入门指南 |
安装此主题组件
大家好 
目前在 AI 机器人对话页面 中上传文件时，只能通过上传按钮进行操作。而且一旦文件被附加，您只能看到一行纯文本形式的文件名，没有预览，也没有任何视觉提示来表明您实际附加的是什么文件。
该组件新增的功能
- 在对话面板的任意位置拖放 —— 不仅限于文本区域，整个面板都是一个拖放区域，并且在拖拽过程中会显示高亮状态。
- 真实的图片缩略图 —— 针对图片上传，在客户端生成缩略图，并连同文件名一起显示，而不仅仅是文本。
- 基于扩展名的彩色徽章 —— 用于非图片文件（如 PDF、DOCX、XLSX、ZIP、MP3、代码文件等），即使这些文件类型无法提供真实预览，也能让上传列表在视觉上易于浏览。
- 可通过主题设置进行配置 —— 包括一个
default_badge_color回退颜色，以及一个extension_colors对象模式设置，允许管理员直接在主题设置界面中按扩展名添加或覆盖颜色，无需编辑代码。
设置
| 设置项 | 描述 |
|---|---|
default_badge_color |
未明确设置颜色的扩展名的回退十六进制颜色 |
extension_colors |
{ extension, color } 行的对象模式列表，用于覆盖或扩展内置的分类颜色 |
内置分类已经涵盖了大多数常见的文件类型（文档、电子表格、演示文稿、归档、音频、视频、代码、字体、电子书），因此大多数人可能完全不需要修改 extension_colors。