Skip to content

NotNullTeam/frontend-ui-vue

BranchesTags

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)

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

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 返回 newNodes 和 newEdges。
    • 前端画布上“生长”出新的节点和边，并自动更新布局。整个流程继续向前推进。

六、 知识库管理视图

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

1. 入口与切换

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

2. 视图结构

  1. 顶部工具栏

    • Button 上传文档 (UploadOutlined) → 弹出上传 Modal（见 3）。
    • 状态筛选 Select：全部 / UPLOADING / PARSING / INDEXED / FAILED。
    • Vendor 筛选 Select（多选 Tag）：Huawei / Cisco / Juniper / Other。

  2. 列表/卡片区

    • 使用 Table 或 Card 列表展示文档：文件名、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

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Languages