Skip to content

NotNullTeam/frontend-ui-vue

Repository files navigation

frontend-ui-vue

本界面基于 ui-sample 初步使用 vite 7 + vue 3 移植,当前为半成品状态。

本地开发

兼容性注意: Vite 需要 Node.js 版本 20.19+, 22.12+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

  1. clone 本仓库
  2. 在仓库根目录执行
    npm i
    安装环境
  3. 执行
    npm run dev
    打开本地服务器,浏览器访问 http://localhost:5173/ 即可

登录账号密码乱输就行


UI / UX设计蓝图

本文档旨在提供一个蓝图,为前端提供开发方向。

一、 设计总览

  • 核心理念: 构建一个集宏观监控(数据看板)、案例复盘(诊断历史)、微观诊断(可视化路径图) 于一体的智能化、专业化网络运维工作平台。
  • 布局架构: 采用功能分区明确的三栏式布局
  • 交互原则: 行动导向、上下文保留、即时反馈、流程闭环。
  • 主题支持: 支持浅色、深色及跟随系统三种外观模式。

二、 界面布局

1. 左侧:导航与诊断历史面板

  • 顶部: 用户信息 (Avatar)、发起新诊断 (Button)、过滤条件 (Button → 打开 Modal)、搜索诊断历史 (Input.Search)。
  • 中部: 诊断历史列表 (List);筛选通过顶部过滤按钮触发的 过滤条件 Modal(设备品牌 / 问题类型 / 附件类型)。每个条目包含状态 (Tag)、标题和时间,并在折叠侧边栏时以彩色图标形式展示。
  • 底部: 全局功能菜单 (Menu),包含“数据看板”、“知识库”、“系统设置”(点击后进入独立页面)、侧边栏折叠/展开控制。
  • 折叠交互: 侧边栏支持宽 / 窄两种状态,窄状态仅保留彩色图标,点击任意图标后自动展开。

2. 中心:主画布区域

  • 默认态 (数据看板): 全局统计图表(故障分类饼图、解决率趋势折线图、知识覆盖度热力图)。
  • 激活态 (诊断路径图): 针对单个诊断会话的可视化分析流程。

3. 右侧:上下文详情面板

  • Tab 结构 (Tabs): 节点详情 / 知识溯源 / 可复制命令
    • 节点详情: 展示日志高亮、补充信息输入框,以及 附件预览折叠面板(支持图片放大)。
    • 知识溯源: 高亮命中文本,显示 相似度 / 关键词分数 条,并提供“跳转原文”外链;顶部提供相关性权重三段式按钮。
      • 权重控制: 使用“三段式按钮”(关键词优先 / 平衡 / 语义优先)。
    • 可复制命令: 按厂商划分的 Tabs(华为/思科/Juniper…),默认根据设备品牌自动选中。

三、 登录与设置

1. 登录流程

  • 初始状态: 应用加载后,若用户未登录,则显示全屏 登录 Modal
  • 输入: 用户名 (Input) 和密码 (Input)。
  • 验证: 成功后 Modal 消失,应用主界面加载;失败则显示错误提示。
  • 登出: 用户可在“账号设置”页面中主动登出,返回登录界面。

2. 设置页面

  • 入口: 点击左侧边栏底部的“系统设置”图标,或点击顶部用户信息区,可分别进入“系统设置”和“账号设置”页面。
  • 系统设置:
    • 外观: 提供下拉菜单 (Select) 切换浅色 / 深色 / 跟随系统主题。
    • 通知: 提供复选框 (Checkbox) 管理不同类型的应用内通知。
    • API密钥: 管理第三方服务集成的密钥。
  • 账号设置:
    • 个人资料: 显示用户头像、姓名、部门等不可编辑信息。
    • 安全: 提供修改密码的功能。
    • 登出: 提供退出登录按钮。

四、 核心操作逻辑流程

1. 旅程一:创建一次全新的诊断会话

  1. 用户操作: 点击左上角 “发起新诊断” 按钮。
  2. 系统响应: 弹出 Modal 对话框,要求用户输入问题标题、详细描述,并通过 Upload.Dragger 上传图片 / 拓扑 / 日志压缩包。
  3. 用户操作: 填写完毕,点击“开始诊断”。
  4. 系统响应:
    • Modal 关闭。
    • 左侧 “诊断历史” 列表顶部新增一个条目,状态为“诊断中”。
    • 中心画布切换至“诊断路径图”视图,并出现代表用户问题的起始节点,呈现分析中状态。
    • 右侧详情面板的 “节点详情” Tab 自动展开“附件预览”折叠面板,显示缩略图。

2. 旅程二:处理一次进行中的诊断会话

  1. 用户操作: 在左侧 “诊断历史” 列表中,点击一个进行中的诊断会话。
  2. 系统响应: 中心画布加载并展示该会话的可视化诊断路径图。
  3. 用户操作(可选): 在右侧 “知识溯源” Tab 中调整 相关性权重,或通过左侧过滤按钮打开 Modal 选择筛选条件,实时重排右侧“知识溯源”片段。
  4. 用户操作: 点击图中一个需要用户输入的“Agent追问”节点。
  5. 系统响应:
    • 该节点在画布上高亮。
    • 右侧详情面板更新,显示Agent的问题,并提供输入框和上传控件。
  6. 用户操作: 在右侧面板提交补充信息。
  7. 系统响应: 画布上从“Agent追问”节点引出新边,连接到“用户补充信息”新节点,系统继续进行分析。

3. 旅程三:结束一次诊断会话并提供反馈

  1. 系统响应: 画布上出现最终的“解决方案”节点。
  2. 用户操作: 点击该节点。
  3. 系统响应: 右侧详情面板展示详细步骤和可复制命令,并在显著位置提供 “👍 已解决”“👎 未解决” 两个反馈按钮。
  4. 用户操作: 点击 “👍 已解决”“👎 未解决”
  5. 系统响应:
    • 点击 “👍 已解决”: 系统记录反馈,并可选择性地让用户为该解决方案添加标签,以便归类。
    • 点击 “👎 未解决”: 弹出一个 Modal 表单,鼓励用户提供更正后的解决方案(步骤、说明)或失败原因。提交后,该反馈将进入后台审核队列。
    • 无论操作如何,反馈提交后,系统均会给出全局提示,并更新画布节点及左侧列表条目的最终状态(如“已解决”、“已归档”)。

五、 画布式交互详解

本章节详细阐述中心“主画布区域”的“诊断路径图”的设计,它是整个系统智能化的核心可视化载体。

1. 核心概念:动态诊断状态图

画布并非静态图表,而是后端 langgraph Agent 工作流程的实时、可视化映射。

  • 节点 (Node): 代表诊断流程中的一个状态事件。每个节点都与 API 返回的 Node 对象一一对应。
  • 边 (Edge): 代表从一个状态到另一个状态的转移,由后端 API 增量推送。
  • 动态性: 画布上的节点和边是动态“生长”出来的,而不是一次性加载完成,这为用户提供了流程正在进行的直观感受。

2. 视觉设计

节点 (Node)

为了让用户能快速区分不同节点的功能和状态,我们采用“图标+颜色+文字”的视觉体系。

节点 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 正在分析,尚未返回新节点时,前一个节点应引出一个带有加载动画(如蚂蚁线)的虚线边,给用户明确的等待预期。

边 (Edge)

  • 样式: 使用带有方向的箭头(sourcetarget),清晰指示流程方向。
  • 动态效果: 新生成的边和节点应带有平滑的“淡入”和“生长”动画,而非瞬间出现。

3. 布局与导航

  • 布局算法: 推荐采用力导向图 (Force-Directed Graph) 布局。它可以自动处理节点间的斥力和边的引力,使得布局自然、美观,并有效避免节点重叠。G6、d3.js 等库原生支持。
  • 画布导航:
    • 平移 (Pan): 用户可通过鼠标拖拽画布的空白区域来移动整个视图。
    • 缩放 (Zoom): 用户可通过鼠标滚轮或触摸板手势进行视图的放大和缩小。

4. 交互逻辑

点击节点

  1. 用户操作: 在画布上单击任意一个节点。
  2. 系统响应:
    • 该节点在画布上高亮。
    • 右侧“上下文详情面板”立即更新,显示该节点的详细信息。这是通过调用 GET /cases/{caseId}/nodes/{nodeId} API 实现的。
    • 如果该节点是 SOLUTION 类型,右侧面板自动切换到“可复制命令”或“方案详情”Tab。
    • 如果该节点是 AI_CLARIFICATION (等待用户输入),右侧面板将渲染出一个包含提问和输入框的表单。

驱动诊断流程

  1. 场景: 当前流程暂停在一个 AI_CLARIFICATION 节点上,等待用户输入。
  2. 用户操作: 在右侧详情面板的表单中填写补充信息(如文本、上传附件),然后点击“提交”按钮。
  3. 系统响应:
    • 前端调用 POST /cases/{caseId}/interactions 接口,将用户输入和父节点ID传给后端。
    • 后端 Agent 开始处理,前端在画布上显示加载状态(见2.1)。
    • 后端处理完毕,API 返回 newNodesnewEdges
    • 前端画布上“生长”出新的节点和边,并自动更新布局。整个流程继续向前推进。

六、 知识库管理视图

新增“知识库”入口后,在中心主画布区域切换到专用的文档管理页面。

1. 入口与切换

  • 左侧 Menu 新增 “知识库” (Icon: BookOutlined)。
  • 点击后,中心区域渲染 知识库管理视图,右侧详情面板保持复用。

2. 视图结构

  1. 顶部工具栏

    • Button 上传文档 (UploadOutlined) → 弹出上传 Modal(见 3)。
    • 状态筛选 Select全部 / UPLOADING / PARSING / INDEXED / FAILED
    • Vendor 筛选 Select(多选 Tag):Huawei / Cisco / Juniper / Other
  2. 列表/卡片区

    • 使用 TableCard 列表展示文档:文件名、Vendor、标签、上传时间、状态。
    • 解析中展示 Progress;状态 Tag 颜色区分:PARSING(processing蓝) INDEXED(success绿) FAILED(error红)。
    • 操作列:查看详情删除(上传者或管理员可见)。
    • 空态 (Empty):上传引导插画 + “立即上传”按钮。
  3. 上传文档 Modal

    • 组件:Upload.Dragger 支持拖拽多个文件。
    • 表单字段:
      • Vendor (Select)、Tags (Select 多选)。
    • 点击“开始上传”后调用 POST /knowledge/documents,显示实时进度。
  4. 右侧详情面板(复用)

    • 新增 Tabs -> 文档详情
    • 展示元数据、解析进度条、日志信息。
    • 失败状态下提供“重新解析”按钮。
  5. 权限与交互

    • 仅文档上传者或管理员可以删除 / 重新解析。
    • 删除前 Modal.confirm,提示将同时删除向量索引。
  6. 响应式设计

    • 中小屏:列表自动切换 Card 瀑布流,上传按钮固定在底部 Affix

About

使用 vite + vue 对 ui-sample 移植的草案

Resources

Stars

Watchers

Forks