一、功能特性
1. 智能文件管理
·完整的文件上传、下载、删除、移动功能。
·支持创建文件夹，管理目录结构。
·在线预览图片、PDF、文本等常见格式文件。
·核心特色：可直接点击云盘中的文件，与 AI 就该文件内容进行对话（如“分析这张图片”）。
2. AI 对话系统
·基于 Dify 前端模板，提供流畅的智能对话体验。
·支持多轮对话，保持完整的上下文逻辑。
·可轻松配置并调用你在 Dify 上创建的复杂工作流（Workflow）。
3. 用户体系和交互
·一套用户体系打通 Dify、网盘和业务账号，轻松配置即可直接使用。
·完整的鉴权和权限管理。
·完整的交互: 登录个人网盘和 AI 对话。
·集成的对话交互面板。
二、前提条件
在开始之前，请确保你已准备好以下资源：
1. 腾讯云账号：已 注册腾讯云账号 并完成 实名认证。
2. SMH 媒体库：登录 智能媒资托管控制台，开通服务并 创建媒体库。单击查看密钥，记录媒体库访问域名、媒体库 ID 和媒体库密钥。
注意：说明：
注意：由于本实践为多用户管理，新建媒体库时请务必选择多租户模式。
3. Dify 应用：拥有一个 Dify 上的应用（可使用云端版或自托管版）。你需要其 APP ID 和 API Key。
4. 开发环境：本地计算机需安装 Node.js (14.x 或更高版本) npm 和 Git 版本控制工具。
三、1.1 下载项目源码
你可以从 CNB 代码仓库 克隆或下载项目模板。
git clone https://cnb.cool/tencent/cloud/cos/conversation-web-app-templatecd conversation-web-app-template
四、1.2 安装项目依赖
使用 npm 安装运行所需的所有第三方包。
npm install# 或使用 yarnyarn install
五、2. 配置关键信息
执行以下命令或手动复制根目录下的 .env.example 文件并重命名为 .env。
// 复制命令cp .env.example .env
接下来按照如下配置编辑 .env文件：
注意：说明：
# Dify 相关配置# 1. 登录你的 Dify 控制台，进入目标“应用配置”或“API 访问”页面# 2. 找到你的应用，即可获取 APP ID 和 API KeyNEXT_PUBLIC_APP_ID=your_dify_app_id_hereNEXT_PUBLIC_APP_KEY=your_dify_api_key_here# 3. 如果你使用 Dify 云端版，通常为 https://api.dify.ai# 如果你是自托管，请填写你的 Dify 服务地址，如 http://your-server-ip:3001/v1NEXT_PUBLIC_API_URL=https://api.dify.ai/v1# SMH 相关配置# 1. 登录腾讯云 SMH 控制台，进入“媒体库管理”# 2. 点击你要使用的媒体库，进入“概览”或“密钥管理”# 3. 复制“访问域名” “媒体库 ID”和“访问密钥”# 4. 访问域名前务必加上 https：// 前缀，如 https://xxxxxxx.api.tencentsmh.cnNEXT_PUBLIC_LIBRARY_ID=your_smh_library_id_hereNEXT_PUBLIC_LIBRARY_SECRET=your_smh_library_secret_hereNEXT_PUBLIC_SMH_HOST=your_smh_library_secret_host_here# 应用安全配置# 用于加密会话的密钥，请使用一个长且复杂的随机字符串JWT_SECRET=your_super_strong_random_secret_string_here
注意：Dify 云端版获取 NEXT_PUBLIC_APP_ID、NEXT_PUBLIC_APP_KEY 可通过登录 Dify，进入应用编排，参照下图获取信息。
注意：
六、3.1 本地开发模式（推荐用于测试）
执行以下命令启动本地开发服务器：
npm run dev
执行后显示本地访问域名即启动成功，在浏览器中访问 http://localhost:3000。你将看到登录页面如下所示：
测试用户名密码请前往源码内的 app/api/utils/users.ts 文件内获取或配置
登录成功后即可看到交互界面，左侧是你的个人 SMH 网盘和 AI 会话列表，右侧是 AI 对话框。你可以尝试上传文件并进行对话。
七、3.2 生产环境构建与部署
3.2.1 构建优化版本
执行以下构建命令，生成用于生产环境的静态文件。构建产物将位于 .next 目录中。
npm run build
3.2.2 启动生产服务器
注意：说明：
注意：生产环境务必通过 HTTPS 提供服务。
执行以下命令后，应用将在生产模式下运行，通常位于 http://localhost:3000。
npm start
3.2.3 部署到云服务器
1. 将构建的产物移动到你的服务器上。
2. 使用 PM2 等进程管理工具来启动并守护应用，确保其持续运行。
八、4. 后续功能扩展
你可以基于此项目进行二次开发, 可以添加更多适合业务的功能, 如:
·批量操作：在文件列表中添加批量选择、移动、删除功能。
·文件分享：利用 SMH 的分享接口，为文件生成临时分享链接。
·更多 AI 能力：在 Dify 工作流中集成更多工具，如让 AI 根据图片内容写描述、自动为文档分类、从表格中提取数据等。
九、为什么页面打开空白或提示“Internal Server Error”?
1. 对照 .env.example 检查 .env 文件是否配置正确。
2. 通过本地调试控制台检查是否有报错信息。
3. 检查本地网络是否正常。
4. 检查本地是否开启了代理。
十、为什么文件上传失败？
1. 检查 NEXT_PUBLIC_LIBRARY_ID 和 NEXT_PUBLIC_LIBRARY_SECRET 是否正确。
2. 确认 SMH 媒体库状态正常，且有可用存储空间和带宽。
3. 检查网络连接，或查看浏览器开发者工具（F12）中“网络(Network)”标签页的具体错误信息。
4. 如果文件过大, 可以考虑在前端实现文件分片上传，提升大文件上传的成功率和体验。
十一、为什么 AI 对话不回应，或提示 API 错误？
1. 核对 NEXT_PUBLIC_APP_ID, NEXT_PUBLIC_APP_KEY, NEXT_PUBLIC_API_URL 三项是否正确。
2. 登录 Dify 控制台，检查你的应用是否已发布，API Key 是否有权限。
3. 如果使用自托管 Dify，确认其服务地址可从你的应用服务器访问。
十二、为什么无法点击文件与 AI 对话？
此功能依赖于你在 Dify 中配置的、能够处理文件查询的工作流。请确认你已创建了相应的工作流，并且工作流能够正确接收并处理文件标识参数。
十三、获取帮助
如果在实践过程中遇到问题，你可以：
·查阅产品文档：Dify 产品文档。
·检查项目源码：仔细阅读项目中的 README.md 文件，通常包含最新指引。
·社区支持：可在项目的 CNB 仓库的“Issues”板块搜索或提交问题。