基于Dify的旅游攻略&王者荣耀攻略智能助手项目
总页面展示
项目概述
本文介绍了一个基于Dify平台构建的双功能智能助手项目，集成旅游攻略与王者荣耀英雄攻略两大核心服务。项目通过Dify工作流编排、智能体嵌入及前端展示，实现了专业化、场景化的AI对话服务。
技术栈： Dify平台 · 工作流编排 · 智能体嵌入 · HTML/CSS/JavaScript · 响应式前端
一、Dify本地部署过程
1.1 环境准备
Dify是一个开源的LLM应用开发平台，支持本地化部署，便于数据安全与定制化开发。
系统要求：
- Docker 20.10.0+
- Docker Compose 2.0.0+
- 4GB+ RAM（推荐8GB）
- 50GB+ 可用磁盘空间
1.2 部署步骤
第一步：克隆Dify仓库
bash
git clone https://github.com/langgenius/dify.git
cd dify/docker第二步：配置环境变量
复制环境变量模板并进行必要配置：
bash
cp .env.example .env关键配置项说明：
| 变量名 | 说明 | 推荐值 |
|---|---|---|
MODE |
部署模式 | api |
SECRET_KEY |
加密密钥 | 随机生成32位以上字符串 |
INIT_PASSWORD |
管理员初始密码 | 自定义强密码 |
CONSOLE_API_URL |
控制台API地址 | http://localhost:5001 |
APP_API_URL |
应用API地址 | http://localhost:5001 |
第三步：启动服务
这里作者已经部署过，用的是start
bash
docker-compose up -d等待镜像拉取与容器启动，约需3-5分钟。
第四步：验证部署
访问 http://localhost:5001 进入Dify控制台，使用初始化密码登录，确认服务正常运行。
部署架构示意：
┌─────────────────────────────────────────────────┐
│ Dify 容器集群 │
├───────────┬───────────┬───────────┬────────────┤
│ Web App │ API │ Worker │ PostgreSQL│
│ (5001) │ (5001) │ │ (5432) │
├───────────┴───────────┴───────────┴────────────┤
│ Redis (6379) / Weaviate │
└─────────────────────────────────────────────────┘二、工作流生产过程
2.1 工作流设计思路
本项目设计了两个独立的工作流，分别对应旅游攻略与王者荣耀英雄攻略两大场景。工作流采用"意图识别 → 知识检索/信息获取 → 内容生成 → 格式化输出"的标准LLM应用架构，每个工作流均通过多个LLM节点分工协作，从不同维度对用户需求进行深度解析，生成结构完整、专业性强的攻略内容。
工作流架构总览：
用户输入 → 意图分类 → 路由分发
├─→ 旅游工作流（含天气API集成）
└─→ 王者荣耀工作流（多维度并行生成）2.2 工作流一：旅游攻略
2.2.1 工作流概述
设计目标： 为用户提供目的地推荐、行程规划、实时天气查询与旅行建议等一站式旅游解决方案。本工作流创新性地集成了OpenWeatherMap API，在生成攻略的同时提供目的地的实时天气信息，使旅行建议更具时效性与实用性。
工作流节点总览：
START（用户输入）
↓
LLM: GIVEN（意图识别与目的地提取）
↓
LLM: CITY（城市名称标准化）
↓
HTTP请求（OpenWeatherMap API）
↓
LLM: SUMMARY（攻略生成）
↓
LAST（输出结果）2.2.2 节点详细设计
节点一：START（输入节点）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | Start | 工作流入口 |
| 输入参数 | {x} |
用户原始输入文本 |
| 参数要求 | 必填项 | 来自用户对话的输入内容 |
| 输出格式 | String | 传递给下游节点的文本内容 |
功能说明： 接收用户输入的旅游相关问题，作为整个工作流的触发入口。
节点二：LLM: GIVEN（意图识别与目的地提取）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.5-plus | 阿里云通义千问3.5增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {x} |
来自START节点的用户输入 |
系统提示词（System Prompt）：
你是一个专业的旅游规划助手。请分析用户的输入，从中提取出以下信息：
1. 目的地城市名称（如果用户提到了多个城市，请选择最主要的一个）
2. 旅游天数（如果用户提到）
3. 旅游偏好（如：自然风光/历史文化/美食/购物/休闲等）
请以JSON格式输出，格式如下：
{
"city": "城市名称",
"days": "天数或null",
"preference": "偏好或null",
"raw_query": "用户的原始需求"
}功能说明： 从用户输入中智能提取旅游目的地城市名称及其他关键信息，为后续天气查询和攻略生成提供结构化数据。
节点三：LLM: CITY（城市名称标准化）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.5-plus | 阿里云通义千问3.5增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | LLM: GIVEN 输出的 city 字段 |
从用户输入中提取的城市名称 |
系统提示词（System Prompt）：
你的任务是将用户提到的城市名称标准化为OpenWeatherMap API可识别的英文城市名。
规则：
1. 将中文城市名转换为英文（如：成都 → Chengdu）
2. 如果用户输入的是英文，保持原样
3. 如果是知名城市，使用标准英文名称
4. 只输出城市英文名，不要输出其他内容
示例：
输入：成都 → 输出：Chengdu
输入：北京 → 输出：Beijing
输入：西安 → 输出：Xi'an
输入：Shanghai → 输出：Shanghai输出示例：
Chengdu功能说明： 将中文城市名称标准化为OpenWeatherMap API能够识别的英文城市名，确保API调用的成功率。
节点四：HTTP请求（OpenWeatherMap天气API）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | HTTP Request | HTTP请求节点 |
| 请求方法 | GET | 标准GET请求 |
| API地址 | https://api.openweathermap.org/data/2.5/weather |
OpenWeatherMap 当前天气API |
| 参数 | q={city_name}&appid=6f16d274&units=metric |
城市名 + API密钥 + 公制单位 |
| 重试策略 | 失败时重试3次 | 提高接口调用成功率 |
请求URL构造：
https://api.openweathermap.org/data/2.5/weather?q=Chengdu&appid=6f16d274&units=metric请求参数说明：
| 参数名 | 值来源 | 说明 |
|---|---|---|
q |
LLM: CITY 节点的输出 | 标准化后的城市英文名 |
appid |
固定值（6f16d274*） |
OpenWeatherMap API密钥（示例已脱敏） |
units |
metric |
使用公制单位（摄氏度） |
响应数据结构（部分关键字段）：
json
{
"name": "Chengdu",
"main": {
"temp": 25.3,
"feels_like": 24.8,
"humidity": 65,
"pressure": 1012
},
"weather": [
{
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"wind": {
"speed": 3.5
}
}提取的关键数据：
| 字段路径 | 含义 | 用途 |
|---|---|---|
main.temp |
当前温度（℃） | 行程穿衣建议 |
weather[0].description |
天气描述 | 户外活动建议 |
main.humidity |
湿度（%） | 舒适度参考 |
wind.speed |
风速（m/s） | 出行提醒 |
main.pressure |
气压（hPa） | 高原地区参考 |
错误处理： 当API调用失败（如城市名不存在或网络问题），工作流将跳过天气信息，继续执行攻略生成流程，确保用户至少能获得文本攻略。
节点五：LLM: SUMMARY（旅游攻略生成）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.5-plus | 阿里云通义千问3.5增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {x} 组合输入 |
用户原始问题 + 天气数据 |
组合输入内容：
json
{
"user_query": "来自START节点的原始用户输入",
"city": "从LLM: GIVEN提取的城市名",
"weather": "从HTTP请求获取的天气数据",
"preference": "从LLM: GIVEN提取的用户偏好"
}系统提示词（System Prompt）：
你是一位资深的旅游规划师，请根据用户需求生成一份详细的旅游攻略。
用户需求：{{user_query}}
目标城市：{{city}}
当前天气：{{weather}}
用户偏好：{{preference}}
请按以下结构生成攻略（使用Markdown格式）：
# {{city}}旅游攻略
## 📍 城市概览
[简要介绍城市特色]
## 🌤️ 实时天气与出行建议
- 当前温度：{{weather.temp}}℃
- 天气状况：{{weather.description}}
- 出行建议：[基于天气的穿衣和活动建议]
## 🗓️ 推荐行程安排
### 第1天：[主题]
- 上午：[景点/活动]
- 下午：[景点/活动]
- 晚上：[景点/活动]
### 第2天：[主题]
...
## 🍜 必尝美食
[推荐当地特色美食]
## 🚗 交通指南
[到达与市内交通建议]
## 🏨 住宿推荐
[不同预算的酒店/民宿推荐]
## 💡 实用Tips
- [旅行小贴士]
- [避坑指南]
- [语言/货币/签证注意事项]
## ⭐ 总结
[整体评价与推荐指数]输出示例：
markdown
# 成都旅游攻略
## 📍 城市概览
成都，四川省省会，素有"天府之国"美誉，以悠闲的生活节奏、丰富的文化遗产和麻辣美食闻名。
## 🌤️ 实时天气与出行建议
- 当前温度：25℃
- 天气状况：多云
- 出行建议：天气舒适，适合户外活动，建议穿轻薄衣物。
## 🗓️ 推荐行程安排
### 第1天：市区经典游
- 上午：春熙路 → 太古里（时尚购物与城市地标）
- 下午：武侯祠 → 锦里（三国文化与古街体验）
- 晚上：九眼桥（酒吧街与夜景）
...
节点六：LAST（输出节点）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | End | 工作流输出节点 |
| 输出内容 | LLM: SUMMARY 生成的攻略文本 | 完整的Markdown格式攻略 |
| 输出类型 | String | 文本字符串 |
功能说明： 将LLM: SUMMARY节点生成的完整旅游攻略作为工作流最终输出，返回给前端用户界面展示。
2.2.3 工作流数据流图
┌─────────────────────────────────────────────────────────────────┐
│ 旅游工作流数据流 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ START │───▶│LLM:GIVEN │───▶│LLM:CITY │───▶│ HTTP GET │ │
│ │ {x}输入 │ │意图+城市 │ │标准化城市│ │天气API │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │ │ │ │ │
│ │ │ │ ▼ │
│ │ │ │ ┌──────────┐ │
│ │ │ └────────▶│ 天气数据 │ │
│ │ │ └──────────┘ │
│ │ │ │ │
│ │ ▼ ▼ │
│ │ ┌──────────────────────────────────────────┐ │
│ └────────▶│ LLM: SUMMARY │ │
│ │ 用户输入 + 城市 + 天气 + 偏好 │ │
│ └──────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────┐ │
│ │ LAST │ │
│ │ 输出攻略文本 │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────────────────┘2.2.4 工作流配置汇总
| 节点名称 | 类型 | 模型/服务 | 核心功能 |
|---|---|---|---|
| START | 输入节点 | - | 接收用户输入 |
| LLM: GIVEN | LLM | qwen3.5-plus | 意图识别 + 目的地提取 |
| LLM: CITY | LLM | qwen3.5-plus | 城市名称标准化（中→英） |
| HTTP请求 | HTTP | OpenWeatherMap API | 获取实时天气数据 |
| LLM: SUMMARY | LLM | qwen3.5-plus | 生成完整旅游攻略 |
| LAST | 输出节点 | - | 返回结果 |
2.3 工作流二：王者荣耀英雄攻略
2.3.1 工作流概述
设计目标： 为用户提供王者荣耀英雄的深度攻略服务，包括英雄定位、出装铭文、连招技巧、对线思路、团战策略以及BP（Ban & Pick）建议等全方位内容。本工作流通过多个LLM节点分工协作，从不同维度对英雄进行深度解析，生成结构完整、专业性强的英雄攻略。
工作流节点总览：
START（用户输入）
↓
LLM: HERO_NAME（英雄识别与标准化）
↓
├─→ LLM: GAMEPLAN（对线思路与节奏）
├─→ LLM: BAN&PICK（禁选策略）
├─→ LLM: TEAM（团战策略）
↓
LLM: SUMMARY（攻略整合与总结）
↓
LAST（输出结果）2.3.2 节点详细设计
节点一：START（输入节点）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | Start | 工作流入口 |
| 输入参数 | {x} |
用户原始输入文本 |
| 参数要求 | 必填项 | 来自用户对话的输入内容 |
| 输出格式 | String | 传递给下游节点的文本内容 |
功能说明： 接收用户关于王者荣耀英雄的提问，如"李白怎么玩？""后羿出装推荐""对抗路什么英雄强势"等，作为整个工作流的触发入口。
节点二：LLM: HERO_NAME（英雄识别与标准化）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.6-plus | 通义千问3.6增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {x} |
来自START节点的用户输入 |
系统提示词（System Prompt）：
你是一个王者荣耀英雄识别专家。请从用户输入中识别出英雄名称，并输出标准化的英雄全名。
规则：
1. 识别用户提到的英雄名称（包括昵称、简称、外号）
2. 输出标准英雄全名
3. 如果用户提到多个英雄，输出主要询问的那个
4. 如果无法识别，输出"未识别"
常见昵称对照：
- 卤蛋/小短腿 → 鲁班七号
- 吉吉国王 → 孙悟空
- 瑶妹 → 瑶
- 小明 → 明世隐
- 鱼 → 庄周
- 婉儿 → 上官婉儿
- 诸葛 → 诸葛亮
示例：
输入：李白怎么玩 → 输出：李白
输入：卤蛋出装推荐 → 输出：鲁班七号
输入：对抗路推荐 → 输出：未识别功能说明： 从用户输入中精准识别并标准化英雄名称，为后续攻略节点提供统一的英雄标识。
节点三：LLM: GAMEPLAN（对线思路与节奏）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.6-plus | 通义千问3.6增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {hero_name} + {user_query} |
标准化英雄名 + 用户原始问题 |
系统提示词（System Prompt）：
你是王者荣耀职业级对线专家。请为英雄「{{hero_name}}」生成详细的对线思路与节奏规划。
请按以下维度展开（使用Markdown格式）：
## 🎯 对线思路
### 前期（1-4级）
[具体的对线策略，包括抢线技巧、换血时机、视野控制]
### 中期（5-10级）
[游走节奏、资源控制、抱团时机]
### 后期（11-15级）
[带线策略、团战定位、终结比赛的方式]
## 🔥 核心技巧
[该英雄独有的操作细节、卡位技巧、技能释放时机]
## ⚠️ 常见误区
[新手容易犯的错误及改进建议]
## 📊 强势期分析
[英雄在各个时间段的强度曲线]功能说明： 专注于英雄的对线细节与节奏把控，为用户提供实战层面的操作指导。
输出示例（部分）：
markdown
## 🎯 对线思路
### 前期（1-4级）
- 优先利用二技能消耗兵线，快速抢2级
- 2级后利用一技能+普攻的连招进行换血
- 注意河道视野，防止敌方打野gank
- 4级后可以尝试单杀，但需确保对面打野不在附近
### 中期（5-10级）
- 清完线后积极游走，帮助队友建立优势
- 优先拿龙，利用视野优势压制对手
...节点四：LLM: BAN&PICK（禁选策略）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.6-plus | 通义千问3.6增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {hero_name} + {user_query} |
标准化英雄名 + 用户原始问题 |
系统提示词（System Prompt）：
你是王者荣耀BP（Ban & Pick）策略专家。请为英雄「{{hero_name}}」生成完整的禁选策略。
请按以下结构输出（使用Markdown格式）：
## 🚫 Ban位建议
### 必Ban英雄
[最克制该英雄的英雄，建议优先禁用]
### 可选Ban英雄
[其他对该英雄威胁较大的英雄]
## ✅ Pick建议
### 最佳搭配阵容
[与该英雄配合最佳的英雄组合]
### 阵容适应性
[适合什么样的阵容体系，不适合什么样的阵容]
## 📈 当前版本强度
[该英雄在当前版本的T度评级与表现分析]功能说明： 为排位赛/征召模式的禁选环节提供专业建议，帮助用户在BP阶段建立优势。
节点五：LLM: TEAM（团战策略）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.6-plus | 通义千问3.6增强版 |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {hero_name} + {user_query} |
标准化英雄名 + 用户原始问题 |
系统提示词（System Prompt）：
你是王者荣耀职业级团战指挥专家。请为英雄「{{hero_name}}」生成详细的团战策略。
请按以下结构输出（使用Markdown格式）：
## 🏠 团战定位
[该英雄在团战中的角色定位：前排/输出/刺客/辅助/控制]
## 📍 站位策略
### 开团前
[团战前的站位与视野布置]
### 开团时
[开团时的行动策略与目标选择]
### 拉扯时
[团战拉扯阶段的应对策略]
## 🎯 目标选择
[优先击杀目标顺序与原因]
## ⏱️ 技能释放时机
[关键技能的释放时机与连招顺序]
## 💀 劣势局应对
[逆风时如何止损与翻盘]功能说明： 专注于团战层面的策略指导，覆盖站位、目标选择与技能释放等关键环节。
节点六：LLM: SUMMARY（攻略整合与总结）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | LLM | 大语言模型推理节点 |
| 模型选择 | qwen3.7-plus | 通义千问3.7增强版（较其他节点升级） |
| 模型类型 | CHAT | 对话式文本生成 |
| 输入 | {hero_name} + {user_query} + {gameplan} + {banpick} + {team} |
英雄名 + 用户问题 + 三个子节点输出 |
系统提示词（System Prompt）：
你是一位王者荣耀全英雄攻略主编。请将以下内容整合成一份完整、专业的英雄攻略。
英雄：{{hero_name}}
用户关注：{{user_query}}
对线思路：{{gameplan}}
BP策略：{{banpick}}
团战策略：{{team}}
请按以下结构整合输出（使用Markdown格式）：
# ⚔️ {{hero_name}} 完整攻略
## 🏷️ 英雄概览
[英雄定位、难度系数、上手推荐度]
## 🔥 核心玩法
[该英雄的核心机制与玩法精髓]
--- 以下为详细内容 ---
{{gameplan}}
---
{{banpick}}
---
{{team}}
## ⭐ 总结
[整体评价与上分建议]
## 🎯 一句话总结
[最精华的实战口诀]功能说明： 作为工作流的整合节点，将GAMEPLAN、BAN&PICK、TEAM三个子节点的输出汇总为一篇完整的攻略，并进行统一润色与排版。
节点七：LAST（输出节点）
| 属性 | 值 | 说明 |
|---|---|---|
| 节点类型 | End | 工作流输出节点 |
| 输出内容 | LLM: SUMMARY 生成的完整攻略 | 整合后的Markdown格式攻略 |
| 输出类型 | String | 文本字符串 |
功能说明： 将LLM: SUMMARY节点生成的完整英雄攻略作为工作流最终输出，返回给前端用户界面展示。
2.3.3 工作流数据流图
┌─────────────────────────────────────────────────────────────────────────┐
│ 王者荣耀工作流数据流图 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌────────────────┐ │
│ │ START │────▶│ LLM:HERO_NAME │ │
│ │ {x}输入 │ │ 英雄识别标准化 │ │
│ └──────────┘ └────────┬───────┘ │
│ │ │
│ │ 英雄名称 │
│ ▼ │
│ ┌──────────────────────────────────────┐ │
│ │ 并行分支 │ │
│ ├──────────┬──────────────┬───────────┤ │
│ ▼ ▼ ▼ │ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ LLM: │ │ LLM: │ │ LLM: │ │ │
│ │GAMEPLAN │ │BAN&PICK │ │ TEAM │ │ │
│ │对线思路 │ │禁选策略 │ │团战策略 │ │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ │
│ │ │ │ │ │
│ └────────────┼────────────┘ │ │
│ ▼ │ │
│ ┌─────────────┐ │ │
│ │ LLM: │ │ │
│ │ SUMMARY │ │ │
│ │ 整合生成 │ │ │
│ └──────┬──────┘ │ │
│ ▼ │ │
│ ┌─────────────┐ │ │
│ │ LAST │ │ │
│ │ 输出结果 │ │ │
│ └─────────────┘ │ │
└─────────────────────────────────────────────────────────────────────────┘2.3.4 工作流配置汇总
| 节点名称 | 类型 | 模型 | 核心功能 |
|---|---|---|---|
| START | 输入节点 | - | 接收用户输入 |
| LLM: HERO_NAME | LLM | qwen3.6-plus | 英雄名称识别与标准化 |
| LLM: GAMEPLAN | LLM | qwen3.6-plus | 对线思路与节奏规划 |
| LLM: BAN&PICK | LLM | qwen3.6-plus | 禁选策略与阵容搭配 |
| LLM: TEAM | LLM | qwen3.6-plus | 团战策略与站位指导 |
| LLM: SUMMARY | LLM | qwen3.7-plus | 攻略整合与总结 |
| LAST | 输出节点 | - | 返回完整攻略 |
2.3.5 节点设计逻辑说明
并行分支设计理念：
本工作流采用并行分支结构，将英雄攻略拆解为三个独立的专业维度------GAMEPLAN（对线）、BAN&PICK（禁选）和TEAM（团战），每个维度由独立的LLM节点负责生成。这种设计的优势在于：
- 专业性更强：每个节点专注于单一维度，提示词可以更精准、更具深度
- 可维护性高：各维度独立，修改一个维度不影响其他维度
- 扩展性好：未来可轻松增加新维度（如出装专题、铭文专题等）
- 容错性强：单一节点出问题不影响其他节点的产出
- 模型差异化：SUMMARY节点使用了更高版本的qwen3.7-plus，体现了"专业整合用更强模型"的设计思路
2.4 工作流对比总结
| 对比维度 | 旅游工作流 | 王者荣耀工作流 |
|---|---|---|
| 节点数量 | 6个 | 7个 |
| 并行设计 | 链式（顺序执行） | 并行（3个子分支同时执行） |
| 关键处理 | 城市识别 + 天气API集成 | 英雄识别 + 多维度攻略生成 |
| 外部依赖 | OpenWeatherMap API | 无（纯LLM生成） |
| 输出结构 | 按天行程 + 实时天气 | 对线 + BP + 团战三大维度 |
| 模型选择 | qwen3.5-plus（统一） | qwen3.6-plus + qwen3.7-plus |
| 复杂度 | 中等 | 较高 |
| 实时性 | 需实时调用天气API | 即时响应 |
三、智能体嵌入工作流过程
3.1 智能体（Agent）设计
在Dify中，智能体作为工作流的"大脑"，负责理解用户意图并调用相应工作流。
智能体配置：
| 配置项 | 值 | 说明 |
|---|---|---|
| 名称 | 双料攻略助手 | 用户可见的智能体名称 |
| 模型 | gpt-4 / claude-3 | 主推理模型 |
| 温度 | 0.3-0.7 | 控制回答创造性 |
| 上下文窗口 | 8K tokens | 支持长对话 |
3.2 意图路由设计
智能体首先进行意图分类，将用户请求路由至对应工作流：
用户输入: "我想去大理玩三天"
↓
意图分类: 旅游
↓
路由至: 旅游攻略工作流
↓
返回: 大理三日游攻略
用户输入: "李白怎么玩？"
↓
意图分类: 王者荣耀英雄攻略
↓
路由至: 王者荣耀攻略工作流
↓
返回: 李白深度攻略意图分类Prompt：
分析用户输入，判断其属于以下哪个类别：
- travel: 旅游相关（目的地、行程、景点、美食、住宿）
- game: 王者荣耀英雄攻略相关（英雄、出装、铭文、连招、对线）
用户输入：{{user_input}}
仅输出类别标签：travel 或 game3.3 智能体与工作流关联配置
在Dify控制台中完成以下配置：
步骤一：创建应用
控制台 → 工作室 → 创建应用 → 选择"聊天助手"步骤二：关联工作流
应用设置 → 工作流 → 选择已发布的工作流步骤三：配置上下文变量
json
{
"user_id": "{{user_id}}",
"conversation_id": "{{conversation_id}}",
"system_variables": {
"current_version": "v2.1"
}
}步骤四：发布应用
应用发布 → 获取嵌入代码 → 记录API密钥
四、Web前端开发过程
4.1 前端设计思路
前端采用单页应用设计，风格定位为"专业、科技、游戏化"，配合双核工作流的品牌调性。
设计语言：
- 深色渐变背景 + 毛玻璃效果
- 金色渐变主色调（#f6d365 → #fda085）
- 卡片式布局 + 微交互动画
- 响应式设计（适配PC/平板/手机）
4.2 前端技术实现
技术选型：
- 原生HTML5 + CSS3 + JavaScript
- Font Awesome 6 图标库
- Google Font / 系统字体栈
- Dify Embed SDK
项目结构：
index.html # 主页面
├── <head> # 元数据、样式表、字体
├── <header> # 导航栏 (logo + 导航链接 + 对话按钮)
├── <section.hero> # 英雄区 (标语 + CTA按钮)
├── <section.features> # 四大服务卡片
├── <footer> # 页脚信息
└── <script> # Dify配置与嵌入4.3 Dify聊天控件嵌入
嵌入配置代码：
注意：此html已经脱敏，实际运行需要你的token和openai的天气调用API
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双料攻略官 · 旅游攻略 & 王者荣耀英雄攻略</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ========== 全局重置 & 变量 ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'PingFang SC', Roboto, system-ui, sans-serif;
}
:root {
--primary: #0f172a;
--secondary: #1e293b;
--gold: #f6d365;
--light: #f8fafc;
--dark: #0b1120;
--gray: #94a3b8;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #0b1120;
color: #f1f5f9;
line-height: 1.6;
min-height: 100vh;
background-image: url('1.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: rgba(11, 17, 32, 0.55);
backdrop-filter: blur(2px);
z-index: 0;
}
/* ========== 头部导航 ========== */
header {
position: relative;
z-index: 20;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0.8rem 2rem;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo i {
font-size: 1.8rem;
color: var(--gold);
filter: drop-shadow(0 0 12px rgba(246, 211, 101, 0.3));
}
.logo h1 {
font-size: 1.6rem;
font-weight: 700;
background: linear-gradient(135deg, #f6d365, #fda085);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 1px;
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: #e2e8f0;
font-weight: 500;
transition: color 0.3s, text-shadow 0.3s;
font-size: 0.9rem;
letter-spacing: 0.3px;
}
.nav-links a:hover {
color: var(--gold);
text-shadow: 0 0 12px rgba(246, 211, 101, 0.2);
}
.contact-btn {
background: linear-gradient(135deg, #f6d365, #fda085);
color: #0f172a;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 40px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 0 20px rgba(246, 211, 101, 0.2);
font-size: 0.85rem;
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 35px rgba(246, 211, 101, 0.4);
}
/* ========== 英雄区域 ========== */
.hero {
position: relative;
z-index: 10;
padding: 4rem 2rem 3rem;
text-align: center;
background: transparent;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero-content .badge {
display: inline-block;
background: rgba(246, 211, 101, 0.12);
border: 1px solid rgba(246, 211, 101, 0.2);
padding: 0.25rem 1.2rem;
border-radius: 40px;
font-size: 0.75rem;
letter-spacing: 2px;
color: var(--gold);
margin-bottom: 1rem;
backdrop-filter: blur(4px);
}
.hero h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.hero p {
font-size: 1.05rem;
margin-bottom: 2rem;
color: #cbd5e1;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-weight: 300;
letter-spacing: 0.5px;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.primary-btn {
background: linear-gradient(135deg, #f6d365, #fda085);
color: #0f172a;
padding: 0.8rem 2.2rem;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
box-shadow: 0 0 30px rgba(246, 211, 101, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
border: none;
cursor: pointer;
}
.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(246, 211, 101, 0.35);
}
.secondary-btn {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
color: #f1f5f9;
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 0.8rem 2.2rem;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
cursor: pointer;
background: none;
}
.secondary-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--gold);
transform: translateY(-3px);
}
/* ========== 双核工作流卡片 ========== */
.features {
position: relative;
z-index: 10;
padding: 3rem 2rem 4rem;
background: transparent;
}
.section-title {
text-align: center;
margin-bottom: 2.5rem;
}
.section-title h2 {
font-size: 2rem;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 0.5rem;
letter-spacing: 1px;
}
.section-title h2 span {
background: linear-gradient(135deg, #f6d365, #fda085);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-title p {
color: var(--gray);
max-width: 500px;
margin: 0 auto;
font-weight: 300;
letter-spacing: 1px;
font-size: 0.95rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.feature-card {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 1.8rem 1.2rem;
text-align: center;
transition: all 0.35s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.feature-card:hover {
transform: translateY(-6px);
border-color: rgba(246, 211, 101, 0.25);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(246, 211, 101, 0.05);
background: rgba(30, 41, 59, 0.7);
}
.feature-icon {
font-size: 2.4rem;
color: var(--gold);
margin-bottom: 1rem;
display: inline-block;
filter: drop-shadow(0 0 12px rgba(246, 211, 101, 0.15));
}
.feature-card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #f1f5f9;
font-weight: 600;
}
.feature-card p {
color: #94a3b8;
font-size: 0.85rem;
font-weight: 300;
line-height: 1.6;
}
.feature-tag {
display: inline-block;
margin-top: 0.6rem;
padding: 0.15rem 0.8rem;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.5px;
background: rgba(246, 211, 101, 0.12);
color: var(--gold);
border: 1px solid rgba(246, 211, 101, 0.15);
}
/* ========== Dify 聊天控件 ========== */
#dify-chatbot-bubble-button {
background: linear-gradient(135deg, #f6d365, #fda085) !important;
box-shadow: 0 0 30px rgba(246, 211, 101, 0.3) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
width: 60px !important;
height: 60px !important;
bottom: 28px !important;
right: 28px !important;
z-index: 9999 !important;
}
#dify-chatbot-bubble-button:hover {
transform: scale(1.08) !important;
box-shadow: 0 0 50px rgba(246, 211, 101, 0.45) !important;
}
#dify-chatbot-bubble-window {
width: 380px !important;
height: 520px !important;
max-height: 80vh !important;
border-radius: 20px !important;
background: rgba(15, 23, 42, 0.92) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
overflow: hidden !important;
position: fixed !important;
bottom: 100px !important;
right: 28px !important;
z-index: 9998 !important;
}
/* ========== 页脚 ========== */
footer {
position: relative;
z-index: 10;
background: rgba(11, 17, 32, 0.7);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.04);
padding: 2.5rem 2rem 1.2rem;
margin-top: 0.5rem;
}
.footer-content {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
}
.footer-column h3 {
font-size: 1rem;
margin-bottom: 1rem;
color: #f1f5f9;
font-weight: 600;
position: relative;
display: inline-block;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 28px;
height: 2px;
background: var(--gold);
border-radius: 4px;
}
.footer-column p,
.footer-column a {
color: #94a3b8;
margin-bottom: 0.5rem;
display: block;
text-decoration: none;
font-weight: 300;
font-size: 0.88rem;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--gold);
}
.social-links {
display: flex;
gap: 0.6rem;
margin-top: 0.8rem;
}
.social-links a {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
color: #cbd5e1;
font-size: 0.9rem;
}
.social-links a:hover {
background: linear-gradient(135deg, #f6d365, #fda085);
color: #0f172a;
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 1.5rem;
margin-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: #64748b;
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 1px;
}
/* ========== 响应式 ========== */
@media (max-width: 992px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
}
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 0.6rem;
padding: 0.6rem 1rem;
}
.nav-links {
gap: 0.8rem;
flex-wrap: wrap;
justify-content: center;
}
.nav-links a {
font-size: 0.8rem;
}
.hero {
padding: 2.5rem 1.2rem 2rem;
}
.hero h2 {
font-size: 2rem;
}
.hero p {
font-size: 0.95rem;
padding: 0 0.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.primary-btn,
.secondary-btn {
width: 80%;
justify-content: center;
padding: 0.7rem 1.5rem;
font-size: 0.9rem;
}
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 0 0.5rem;
}
.feature-card {
padding: 1.2rem 0.8rem;
}
.feature-card h3 {
font-size: 1rem;
}
.feature-card p {
font-size: 0.8rem;
}
#dify-chatbot-bubble-window {
width: calc(100% - 32px) !important;
max-width: 380px !important;
height: 60vh !important;
bottom: 85px !important;
right: 16px !important;
left: auto !important;
border-radius: 16px !important;
}
#dify-chatbot-bubble-button {
width: 54px !important;
height: 54px !important;
bottom: 20px !important;
right: 20px !important;
}
}
@media (max-width: 480px) {
.logo h1 {
font-size: 1.2rem;
}
.hero h2 {
font-size: 1.6rem;
}
.section-title h2 {
font-size: 1.4rem;
}
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.feature-icon {
font-size: 1.8rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
}
}
</style>
</head>
<body>
<!-- ========== 头部导航 ========== -->
<header>
<div class="navbar">
<div class="logo">
<i class="fas fa-chess-queen"></i>
<h1>双料攻略官</h1>
</div>
<div class="nav-links">
<a href="#home">首页</a>
<a href="#features">攻略领域</a>
<a href="#contact">关于我们</a>
</div>
<button class="contact-btn" onclick="document.querySelector('#dify-chatbot-bubble-button')?.click()">
<i class="fas fa-message" style="margin-right: 6px;"></i> 开始对话
</button>
</div>
</header>
<!-- ========== 英雄区域 ========== -->
<section class="hero" id="home">
<div class="hero-content">
<div class="badge"><i class="fas fa-route" style="margin-right: 6px;"></i> 双核驱动 · 专业攻略</div>
<h2>🏔️ 旅游攻略 · 王者峡谷 ⚔️</h2>
<p>
无论你想规划一场说走就走的旅行，还是想精通王者荣耀的每一位英雄 ---
两个独立工作流，为你提供专业、深度的攻略服务。
</p>
<div class="cta-buttons">
<a href="#features" class="primary-btn"><i class="fas fa-rocket"></i> 探索攻略</a>
<button class="secondary-btn" onclick="document.querySelector('#dify-chatbot-bubble-button')?.click()">
<i class="fas fa-comment-dots"></i> 立即咨询
</button>
</div>
</div>
</section>
<!-- ========== 双核工作流 --- 4个卡片 ========== -->
<section class="features" id="features">
<div class="section-title">
<h2>两大 <span>工作流 · 四大维度</span></h2>
<p>旅游规划 & 王者荣耀英雄攻略，覆盖你的全部需求</p>
</div>
<div class="features-grid">
<!-- 卡片 1：旅游攻略 -->
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-map-location-dot"></i></div>
<h3>旅游攻略</h3>
<p>目的地推荐、行程规划、美食探店、交通住宿，一站式旅行解决方案。</p>
<span class="feature-tag"><i class="fas fa-plane"></i> 工作流 #1</span>
</div>
<!-- 卡片 2：王者荣耀 · 英雄攻略 -->
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-chess-knight"></i></div>
<h3>王者荣耀 · 英雄攻略</h3>
<p>出装铭文、连招技巧、对线思路、团战站位，助你制霸王者峡谷。</p>
<span class="feature-tag"><i class="fas fa-gamepad"></i> 工作流 #2</span>
</div>
<!-- 卡片 3：旅游 · 深度定制 -->
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-umbrella-beach"></i></div>
<h3>旅游 · 深度定制</h3>
<p>小众路线、预算优化、季节建议、摄影机位，让你的旅行独一无二。</p>
<span class="feature-tag"><i class="fas fa-compass"></i> 专属规划</span>
</div>
<!-- 卡片 4：王者 · 全英雄库 -->
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-helmet-safety"></i></div>
<h3>王者 · 全英雄库</h3>
<p>从法师到刺客，从射手到坦克，全英雄深度解析与版本强势推荐。</p>
<span class="feature-tag"><i class="fas fa-crown"></i> 峡谷之巅</span>
</div>
</div>
</section>
<!-- ========== 页脚 ========== -->
<footer id="contact">
<div class="footer-content">
<div class="footer-column">
<h3>双料攻略官</h3>
<p>旅游攻略 · 王者荣耀英雄攻略 --- 双核驱动，专业陪伴。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-discord"></i></a>
</div>
</div>
<div class="footer-column">
<h3>联系方式</h3>
<p><i class="fas fa-map-pin"></i> 中国 · 成都 · 攻略者基地</p>
<p><i class="fas fa-phone"></i> +86 400 888 6699</p>
<p><i class="fas fa-envelope"></i> guide@dualguide.com</p>
</div>
<div class="footer-column">
<h3>快速链接</h3>
<a href="#home">首页</a>
<a href="#features">攻略领域</a>
<a href="#contact">关于我们</a>
</div>
<div class="footer-column">
<h3>服务时间</h3>
<p>周一至周日: 8:00 - 22:00</p>
<p>紧急咨询: 24h 在线</p>
<p style="color: var(--gold); margin-top: 6px; font-weight: 500;">
<i class="fas fa-bolt"></i> 即刻出发
</p>
</div>
</div>
<div class="copyright">
<p>© 2026 双料攻略官 · 旅游攻略 · 王者峡谷之巅</p>
</div>
</footer>
<!-- ============================================================ -->
<!-- ========== Dify 聊天机器人配置（已脱敏） ========== -->
<!-- 说明：请将以下 TOKEN 和 BASE_URL 替换为您的实际值 -->
<!-- ============================================================ -->
<script>
window.difyChatbotConfig = {
// 【重要】请替换为您的 Dify 应用 API 密钥
token: 'YOUR_DIFY_APP_TOKEN_HERE',
// 【重要】请替换为您的 Dify 服务地址
baseUrl: 'http://your-dify-server-address',
dynamicScript: true,
systemVariables: {
// 可选：自定义用户ID
// user_id: 'YOUR_USER_ID',
// 可选：自定义会话ID（需为有效UUID格式）
// conversation_id: 'YOUR_CONVERSATION_ID',
},
};
</script>
<!-- 嵌入脚本：请将 YOUR_APP_ID 替换为您的应用ID -->
<script src="http://your-dify-server-address/embed.min.js" id="YOUR_APP_ID" defer>
</script>
</body>
</html>4.4 响应式适配
断点设计：
| 断点 | 设备类型 | 布局调整 |
|---|---|---|
| 992px+ | 桌面端 | 四列卡片，完整导航 |
| 768-991px | 平板 | 两列卡片，折叠导航 |
| 480-767px | 大屏手机 | 两列卡片，紧凑排版 |
| <480px | 小屏手机 | 两列卡片，最小字号 |
五、项目展示与效果
5.1 功能展示
项目首页采用沉浸式深色背景，配合金色渐变品牌标识与毛玻璃效果，清晰展示两大工作流入口。用户通过英雄区CTA按钮或右下角悬浮聊天按钮，均可快速启动对话，获得即时攻略服务。
首页布局：
页面顶部为固定导航栏，包含品牌Logo、导航菜单与「开始对话」按钮。英雄区以"🏔️ 旅游攻略 · 王者峡谷 ⚔️"为主视觉标语，配合"双核驱动·专业攻略"的副标题，向用户清晰传达项目的两大核心服务。下方为四大服务卡片，分别对应「旅游攻略」「王者荣耀·英雄攻略」「旅游·深度定制」「王者·全英雄库」，每个卡片均带有工作流标签，便于用户理解服务分类。
核心交互流程：
用户访问首页 → 点击「开始对话」或右下角聊天按钮 →
输入具体问题 → AI智能体识别意图 →
路由至对应工作流 → 返回结构化攻略 →
用户可继续追问细节5.1.1 王者荣耀英雄攻略展示
场景描述： 用户希望获取王者荣耀英雄"杨玉环"的深度攻略。
用户输入：
杨玉环怎么玩？系统响应（AI生成攻略）：
markdown
# 王者荣耀 · 杨玉环完全攻略：琵琶语中的致命旋律
杨玉环作为一名兼具高频消耗、强力续航和团队增益的法术核心，
集消耗、回复、控制、爆发和不可选中于一体，是典型的"节奏发动机"。
## 第一部分：出装铭文
### 半肉CD续航流（版本最优解）
**推荐铭文搭配：**
| 铭文类型 | 推荐配置 |
|----------|----------|
| 红色 | 10x 梦魇 |
| 绿色 | 10x 心眼 |
| 蓝色 | 10x 调和 |
**推荐出装顺序：**
1. 冷静之靴 → 2. 圣杯 → 3. 痛苦面具 →
4. 极寒风暴 → 5. 魔女斗篷 → 6. 虚无法杖交互特点：
- AI自动识别英雄名称"杨玉环"，无需用户精确输入
- 攻略内容结构化输出，包含出装铭文、对线思路、团战策略等完整维度
- 采用Markdown格式，表格、标题层级清晰，便于阅读
5.1.2 旅游攻略展示
场景描述： 用户希望规划一次杭州情侣旅行，有明确的预算、天数和偏好要求。
用户输入：
我想带女朋友去杭州玩3天，两个人，预算4000元，
喜欢拍照、美食和逛古镇，希望行程不要太累。系统响应（AI生成旅游攻略）：
markdown
# 杭州3日情侣慢游攻略（两人 · 预算4000元）
## 第一天：西湖经典漫步与古镇初探
上午：抵达杭州后，前往【西湖】景区。
从【断桥残雪】出发，沿白堤慢走至【孤山】，
绿树成荫，非常适合情侣牵手散步和拍摄清新风格的照片。
中午：在【楼外楼】或周边餐厅品尝杭帮菜，
推荐东坡肉、龙井虾仁。
下午：乘船游西湖，登【三潭印月】，
感受"湖中有岛，岛中有湖"的意境。
傍晚：前往【河坊街】或【南宋御街】，
逛古街、吃小吃、拍夜景。
晚上：入住西湖附近的特色民宿（预算约300-400元/晚）。交互特点：
- AI自动提取关键信息：目的地（杭州）、天数（3天）、人数（2人）、预算（4000元）、偏好（拍照、美食、古镇、轻松）
- 攻略按天规划行程，包含具体景点、用餐建议、住宿推荐
- 风格亲切自然，符合情侣出游的浪漫氛围
- 兼顾预算约束，推荐性价比高的住宿和餐饮
5.1.3 智能意图识别能力
项目核心能力在于AI智能体对用户意图的自动识别与路由分发，以下为典型场景示例：
场景一：旅游意图识别
| 用户输入 | 识别结果 | 路由工作流 |
|---|---|---|
| "我想带女朋友去杭州玩3天" | 旅游规划 | 旅游工作流 |
| "成都必去景点有哪些" | 旅游咨询 | 旅游工作流 |
| "推荐一个适合冬天去的城市" | 旅游推荐 | 旅游工作流 |
场景二：王者荣耀意图识别
| 用户输入 | 识别结果 | 路由工作流 |
|---|---|---|
| "杨玉环怎么玩" | 英雄攻略 | 王者荣耀工作流 |
| "李白出装推荐" | 英雄攻略 | 王者荣耀工作流 |
| "对抗路什么英雄强势" | 英雄推荐 | 王者荣耀工作流 |
场景三：模糊意图处理
| 用户输入 | 识别结果 | 处理方式 |
|---|---|---|
| "我想出去玩" | 意图不明确 | 反问用户：旅游还是打游戏？ |
| "推荐个厉害的" | 意图不明确 | 反问用户：推荐旅游目的地还是王者英雄？ |
5.1.4 对话交互特点
多轮对话支持： 用户可在同一会话中持续追问，AI基于上下文进行补充回答。
示例：
用户：杭州有什么好吃的？
AI：杭州特色美食推荐：东坡肉、龙井虾仁、叫花鸡、片儿川面...
用户：这些大概多少钱？
AI：东坡肉约58-88元/份，龙井虾仁约98-158元/份...结构化输出： 所有攻略内容均以Markdown格式输出，标题层级清晰，表格、列表等元素丰富，便于用户阅读和收藏。
5.2 部署效果
访问地址：
- Dify控制台：
http://localhost:5001 - 前端页面：
http://localhost:8080（静态页面服务）
性能指标：
| 指标 | 数值 | 说明 |
|---|---|---|
| 首屏加载时间 | < 1.5s | 静态资源优化 |
| 首次对话响应 | 2-5s | 取决于LLM推理速度与API调用 |
| 并发支持 | 10-50用户 | 取决于服务器配置 |
| 知识库检索 | < 500ms | 向量检索效率 |
5.3 项目亮点
-
双核工作流设计：独立管理旅游与王者荣耀两个场景，互不干扰，便于维护与迭代。
-
智能意图路由：通过LLM自动识别用户意图，无需用户手动选择工作流，交互更自然。
-
实时数据集成：旅游工作流集成OpenWeatherMap API，提供目的地实时天气信息，提升攻略实用性。
-
多维度攻略生成：王者荣耀工作流采用并行分支设计，从对线、BP、团战三个维度同时生成内容，攻略深度与专业性更强。
-
沉浸式UI设计：深色毛玻璃风格与游戏化视觉元素，配合金色渐变品牌色，贴合目标用户群体的审美偏好。
-
开箱即用的部署：基于Docker的Dify本地部署方案，降低部署门槛，保障数据安全。
六、总结与展望
6.1 项目总结
本项目基于Dify平台成功构建了一个集成旅游攻略与王者荣耀英雄攻略的智能助手。通过工作流编排、智能体嵌入与前端展示的全链路开发，验证了Dify在垂直领域场景化应用中的强大能力。
6.2 未来展望
- 知识库扩展：持续扩充旅游目的地与王者荣耀英雄数据的覆盖面与更新频率
- 多模态支持：接入图像识别能力，支持景点图片识别与游戏截图分析
- 个性化推荐：基于用户历史对话数据，实现个性化攻略推荐
- 社区化运营：用户可分享自己的攻略，形成UGC生态