本界面基于 ui-sample 初步使用 vite 7 + vue 3 移植,当前为半成品状态。
兼容性注意: Vite 需要 Node.js 版本 20.19+, 22.12+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
- clone 本仓库
- 在仓库根目录执行
安装环境
npm i
- 执行
打开本地服务器,浏览器访问 http://localhost:5173/ 即可
npm run dev
登录账号密码乱输就行
本文档旨在提供一个蓝图,为前端提供开发方向。
- 核心理念: 构建一个集宏观监控(数据看板)、案例复盘(诊断历史)、微观诊断(可视化路径图) 于一体的智能化、专业化网络运维工作平台。
- 布局架构: 采用功能分区明确的三栏式布局。
- 交互原则: 行动导向、上下文保留、即时反馈、流程闭环。
- 主题支持: 支持浅色、深色及跟随系统三种外观模式。
- 顶部: 用户信息 (
Avatar
)、发起新诊断 (Button
)、过滤条件 (Button
→ 打开Modal
)、搜索诊断历史 (Input.Search
)。 - 中部: 诊断历史列表 (
List
);筛选通过顶部过滤按钮触发的 过滤条件Modal
(设备品牌 / 问题类型 / 附件类型)。每个条目包含状态 (Tag
)、标题和时间,并在折叠侧边栏时以彩色图标形式展示。 - 底部: 全局功能菜单 (
Menu
),包含“数据看板”、“知识库”、“系统设置”(点击后进入独立页面)、侧边栏折叠/展开控制。 - 折叠交互: 侧边栏支持宽 / 窄两种状态,窄状态仅保留彩色图标,点击任意图标后自动展开。
- 默认态 (数据看板): 全局统计图表(故障分类饼图、解决率趋势折线图、知识覆盖度热力图)。
- 激活态 (诊断路径图): 针对单个诊断会话的可视化分析流程。
- Tab 结构 (
Tabs
):节点详情
/知识溯源
/可复制命令
。- 节点详情: 展示日志高亮、补充信息输入框,以及 附件预览折叠面板(支持图片放大)。
- 知识溯源: 高亮命中文本,显示 相似度 / 关键词分数 条,并提供“跳转原文”外链;顶部提供相关性权重三段式按钮。
- 权重控制: 使用“三段式按钮”(关键词优先 / 平衡 / 语义优先)。
- 可复制命令: 按厂商划分的
Tabs
(华为/思科/Juniper…),默认根据设备品牌自动选中。
- 初始状态: 应用加载后,若用户未登录,则显示全屏 登录
Modal
。 - 输入: 用户名 (
Input
) 和密码 (Input
)。 - 验证: 成功后
Modal
消失,应用主界面加载;失败则显示错误提示。 - 登出: 用户可在“账号设置”页面中主动登出,返回登录界面。
- 入口: 点击左侧边栏底部的“系统设置”图标,或点击顶部用户信息区,可分别进入“系统设置”和“账号设置”页面。
- 系统设置:
- 外观: 提供下拉菜单 (
Select
) 切换浅色 / 深色 / 跟随系统主题。 - 通知: 提供复选框 (
Checkbox
) 管理不同类型的应用内通知。 - API密钥: 管理第三方服务集成的密钥。
- 外观: 提供下拉菜单 (
- 账号设置:
- 个人资料: 显示用户头像、姓名、部门等不可编辑信息。
- 安全: 提供修改密码的功能。
- 登出: 提供退出登录按钮。
- 用户操作: 点击左上角 “发起新诊断” 按钮。
- 系统响应: 弹出
Modal
对话框,要求用户输入问题标题、详细描述,并通过Upload.Dragger
上传图片 / 拓扑 / 日志压缩包。 - 用户操作: 填写完毕,点击“开始诊断”。
- 系统响应:
Modal
关闭。- 左侧 “诊断历史” 列表顶部新增一个条目,状态为“诊断中”。
- 中心画布切换至“诊断路径图”视图,并出现代表用户问题的起始节点,呈现分析中状态。
- 右侧详情面板的 “节点详情” Tab 自动展开“附件预览”折叠面板,显示缩略图。
- 用户操作: 在左侧 “诊断历史” 列表中,点击一个进行中的诊断会话。
- 系统响应: 中心画布加载并展示该会话的可视化诊断路径图。
- 用户操作(可选): 在右侧 “知识溯源” Tab 中调整 相关性权重,或通过左侧过滤按钮打开
Modal
选择筛选条件,实时重排右侧“知识溯源”片段。 - 用户操作: 点击图中一个需要用户输入的“Agent追问”节点。
- 系统响应:
- 该节点在画布上高亮。
- 右侧详情面板更新,显示Agent的问题,并提供输入框和上传控件。
- 用户操作: 在右侧面板提交补充信息。
- 系统响应: 画布上从“Agent追问”节点引出新边,连接到“用户补充信息”新节点,系统继续进行分析。
- 系统响应: 画布上出现最终的“解决方案”节点。
- 用户操作: 点击该节点。
- 系统响应: 右侧详情面板展示详细步骤和可复制命令,并在显著位置提供 “👍 已解决” 和 “👎 未解决” 两个反馈按钮。
- 用户操作: 点击 “👍 已解决” 或 “👎 未解决”。
- 系统响应:
- 点击 “👍 已解决”: 系统记录反馈,并可选择性地让用户为该解决方案添加标签,以便归类。
- 点击 “👎 未解决”: 弹出一个
Modal
表单,鼓励用户提供更正后的解决方案(步骤、说明)或失败原因。提交后,该反馈将进入后台审核队列。 - 无论操作如何,反馈提交后,系统均会给出全局提示,并更新画布节点及左侧列表条目的最终状态(如“已解决”、“已归档”)。
本章节详细阐述中心“主画布区域”的“诊断路径图”的设计,它是整个系统智能化的核心可视化载体。
画布并非静态图表,而是后端 langgraph
Agent 工作流程的实时、可视化映射。
- 节点 (Node): 代表诊断流程中的一个状态或事件。每个节点都与 API 返回的
Node
对象一一对应。 - 边 (Edge): 代表从一个状态到另一个状态的转移,由后端 API 增量推送。
- 动态性: 画布上的节点和边是动态“生长”出来的,而不是一次性加载完成,这为用户提供了流程正在进行的直观感受。
为了让用户能快速区分不同节点的功能和状态,我们采用“图标+颜色+文字”的视觉体系。
节点 type |
节点 status |
建议图标 (AntD) | 建议颜色 | 节点标题 |
---|---|---|---|---|
USER_QUERY / USER_RESPONSE |
COMPLETED |
UserOutlined |
蓝色 (Primary) | 用户问题 / 用户补充信息 |
AI_ANALYSIS |
COMPLETED |
RobotOutlined |
科技蓝 | AI 分析中... |
AI_CLARIFICATION |
AWAITING_USER_INPUT |
QuestionCircleOutlined |
橙色 (Warning) | 需要您提供更多信息 |
SOLUTION |
COMPLETED |
CheckCircleOutlined |
绿色 (Success) | 解决方案已生成 |
- 状态高亮: 当一个节点被点击选中时,其边框应有明显的高亮效果(如加粗或发光)。
- 加载状态: 当 AI 正在分析,尚未返回新节点时,前一个节点应引出一个带有加载动画(如蚂蚁线)的虚线边,给用户明确的等待预期。
- 样式: 使用带有方向的箭头(
source
→target
),清晰指示流程方向。 - 动态效果: 新生成的边和节点应带有平滑的“淡入”和“生长”动画,而非瞬间出现。
- 布局算法: 推荐采用力导向图 (Force-Directed Graph) 布局。它可以自动处理节点间的斥力和边的引力,使得布局自然、美观,并有效避免节点重叠。G6、d3.js 等库原生支持。
- 画布导航:
- 平移 (Pan): 用户可通过鼠标拖拽画布的空白区域来移动整个视图。
- 缩放 (Zoom): 用户可通过鼠标滚轮或触摸板手势进行视图的放大和缩小。
- 用户操作: 在画布上单击任意一个节点。
- 系统响应:
- 该节点在画布上高亮。
- 右侧“上下文详情面板”立即更新,显示该节点的详细信息。这是通过调用
GET /cases/{caseId}/nodes/{nodeId}
API 实现的。 - 如果该节点是
SOLUTION
类型,右侧面板自动切换到“可复制命令”或“方案详情”Tab。 - 如果该节点是
AI_CLARIFICATION
(等待用户输入),右侧面板将渲染出一个包含提问和输入框的表单。
- 场景: 当前流程暂停在一个
AI_CLARIFICATION
节点上,等待用户输入。 - 用户操作: 在右侧详情面板的表单中填写补充信息(如文本、上传附件),然后点击“提交”按钮。
- 系统响应:
- 前端调用
POST /cases/{caseId}/interactions
接口,将用户输入和父节点ID传给后端。 - 后端 Agent 开始处理,前端在画布上显示加载状态(见2.1)。
- 后端处理完毕,API 返回
newNodes
和newEdges
。 - 前端画布上“生长”出新的节点和边,并自动更新布局。整个流程继续向前推进。
- 前端调用
新增“知识库”入口后,在中心主画布区域切换到专用的文档管理页面。
- 左侧
Menu
新增 “知识库” (Icon:BookOutlined
)。 - 点击后,中心区域渲染 知识库管理视图,右侧详情面板保持复用。
-
顶部工具栏
Button
上传文档 (UploadOutlined
) → 弹出上传Modal
(见 3)。- 状态筛选
Select
:全部 / UPLOADING / PARSING / INDEXED / FAILED
。 - Vendor 筛选
Select
(多选 Tag):Huawei / Cisco / Juniper / Other
。
-
列表/卡片区
- 使用
Table
或Card
列表展示文档:文件名、Vendor、标签、上传时间、状态。 - 解析中展示
Progress
;状态 Tag 颜色区分:PARSING
(processing蓝)INDEXED
(success绿)FAILED
(error红)。 - 操作列:
查看详情
、删除
(上传者或管理员可见)。 - 空态 (
Empty
):上传引导插画 + “立即上传”按钮。
- 使用
-
上传文档 Modal
- 组件:
Upload.Dragger
支持拖拽多个文件。 - 表单字段:
- Vendor (
Select
)、Tags (Select
多选)。
- Vendor (
- 点击“开始上传”后调用
POST /knowledge/documents
,显示实时进度。
- 组件:
-
右侧详情面板(复用)
- 新增
Tabs
->文档详情
。 - 展示元数据、解析进度条、日志信息。
- 失败状态下提供“重新解析”按钮。
- 新增
-
权限与交互
- 仅文档上传者或管理员可以删除 / 重新解析。
- 删除前
Modal.confirm
,提示将同时删除向量索引。
-
响应式设计
- 中小屏:列表自动切换
Card
瀑布流,上传按钮固定在底部Affix
。
- 中小屏:列表自动切换