简介基于 Electron Vue 构建的电力缺陷问答系统前端项目面向计算机科学与技术、软件工程、数据科学、人工智能等专业的学生和开发者可直接用于课程设计、期末大作业、毕业设计初期立项演示等场景。项目采用知识图谱技术展示电力缺陷信息前端包含问答交互、知识图谱可视化界面与若干业务组件同时配合 Flask 后端 api.py 构成前后端分离架构读者可以借此理解桌面端 Vue 应用开发、跨域联调与知识图谱问答的整体流程。压缩包共 26 个文件大小 258KB核心文件以 JavaScript、Vue 单文件组件和 CSS 样式为主另含 Markdown 项目说明、应用图标、Electron 打包配置及锁文件等目录结构清晰便于按模块查阅。项目还附有 yarn 依赖安装和 electron:serve 热更新启动说明以及前端构建时自动拷贝 pyflask 目录的配置逻辑可帮助使用者快速搭建开发环境、验证前端打包产物完成从源码到可运行 Electron 应用的闭环。目前已有 140 人学习/下载资源兼顾入门引导与二次开发需求。1. 从一张缺陷工单说起的桌面端图谱问答电力运维班组每天处理的缺陷工单高度重复2号主变高压侧套管渗油某 10kV 开关柜局部放电超标。新员工翻规程查台账需要半小时老师傅凭经验两分钟就能判断差别就在知识沉淀。基于 electron vue 实现电力缺陷问答系统前端部分是整套工具里最直接的一层Electron 承载桌面壳与本地能力Vue 负责页面与状态知识图谱在前端不是花架子——它让渗油—套管密封圈老化—更换密封圈这类推理路径可渲染、可溯源、可点选。这篇面对的读者是准备用 electron vue 做工程类桌面工具、又绕不开知识图谱可视化与问答交互的前端工程师。下面按一线开发顺序把进程模型、图谱渲染、问答链路、打包排错和导出技巧一次说清。2. 拆解技术选型Electron 进程边界与 Vue 状态怎么交给图谱渲染知识图谱问答系统的前端难点不在页面多而在两类状态并存一类是普通的查询表单、工单表格走常规 Vue 状态管理另一类是图谱数据它是命令式渲染的ECharts 实例持有自己的一套状态。这两类状态处理方式完全不同先把这个边界搞清楚后面的开发几乎不会跑偏。2.1 进程模型与安全边界主进程只做壳渲染进程只做界面Electron 应用天然分成主进程、渲染进程和 preload 脚本。主进程负责创建窗口、托盘、菜单和调用系统能力渲染进程跑的是 Vue 应用。电力缺陷问答系统的业务数据主要来自 Spring Boot 后端但文件对话框、本地缓存目录、串口设备这类能力必须在主进程不能直接在渲染进程里 require(fs) 或 require(serialport)。常见做法是把 preload 作为桥用 contextBridge 暴露一个最小 API 集合const { contextBridge, ipcRenderer } require(electron) contextBridge.exposeInMainWorld(nativeBridge, { selectFile: () ipcRenderer.invoke(dialog:selectFile), readXlsx: (p) ipcRenderer.invoke(file:readXlsx, p), saveFile: (name) ipcRenderer.invoke(dialog:saveFile, name), writeFile: (p, buf) ipcRenderer.invoke(file:writeFile, p, buf) })invoke/handle 是当前 Electron 推荐的双向通信模式。invoke 返回 Promise渲染进程可以用 async/await 拿到结果错误也能顺着 reject 传到渲染层比老式的 send/sync 事件好跟踪。业务数据不要一股脑走 IPC一次查询返回几千条图谱节点时IPC 序列化开销明显会让窗口卡顿甚至无响应正确姿势是让渲染进程直接请求后端 HTTPIPC 只留给必须经过主进程的操作。这个原则在项目初期就要定死否则后期到处都是 ipcRenderer.send。2.1.1 关闭 nodeIntegration 后桥接层怎么设计很多 electron vue 项目打包后报 require is not defined根因是渲染进程压根没有 Node 环境。早年的 electron 模板会开 nodeIntegration现在再这么干等于把整台电脑暴露给网页代码真实项目里都应该关上。electron-vite 模板默认关掉 nodeIntegration 和 enableRemoteModuleNode 能力全部从 preload 进入 window。这里有个容易忽略的细节preload 里不要直接暴露 ipcRenderer 本身只暴露语义化方法。如果直接把ipcRenderer.invoke挂到 window 上渲染进程拿到的是全量 IPC 通行证主进程监听的事件种类会无限膨胀安全边界形同虚设。上面代码里 selectFile、readXlsx 已经是语义化收口新增能力时就改 preload 和主进程两个文件渲染组件里永远只调 window.nativeBridge 上的方法。2.2 Vue 的组合式状态管理图谱数据流怎么设计不踩响应式坑Vue 3 下建议直接上组合式组件按功能聚合而不是按选项拆分。这套电力缺陷问答系统的前端源码里核心状态无非是当前问题、候选节点、图谱数据、选中节点、高亮路径。用 Pinia 集中管理组件只派发动作不直接改 store 的深层结构import { defineStore } from pinia export const useGraphStore defineStore(graph, { state: () ({ nodes: [], edges: [], queryText: , selectedNodeId: , highlightPaths: [], loading: false }), actions: { setGraph({ nodes, edges }) { this.nodes nodes this.edges edges }, selectNode(id) { this.selectedNodeId id }, setHighlight(paths) { this.highlightPaths paths } } })组件里用 shallowRef 持有 ECharts 实例监听 store 里 nodes 和 edges 的变化后手动 setOption而不是把 chart 数据直接包进 reactive。图谱渲染本质是命令式的Vue 的响应式系统管不到 canvas 内部强行让它们耦合只会带来双重状态源。新手常在这里翻车把后端返回的整个图谱对象一次性赋给 store 里的某个 reactive 字段结果页面纹丝不动。这是 Vue 3 响应式代理的特性整体替换一个被代理对象时引用变了但视图依赖的还是旧引用。要么逐字段赋值要么用 $patch 显式更新多个字段。2.2.1 用组合式封装一个 useGraphChart把图表生命周期收敛到一个组合式函数里比直接在组件里写 onMounted 更干净export function useGraphChart(elRef) { const chart shallowRef() onMounted(() { chart.value echarts.init(elRef.value) const resize () chart.value chart.value.resize() window.addEventListener(resize, resize) onBeforeUnmount(() { window.removeEventListener(resize, resize) chart.value chart.value.dispose() }) }) return chart }窗口 resize 和 dispose 是桌面端最容易漏的。Electron 窗口从最大化还原、从最小化恢复时图表不会自动重排不在卸载时 dispose还会导致内存泄漏。把这两件事放进组合式函数所有用图的页面自动获得一致性。2.3 知识图谱在前端的数据模型节点、边、路径缺一不可后端返回的图谱 JSON 需要结构清晰最好是三层分离{ nodes: [ { id: dev-001, name: 2号主变, type: device, props: { voltage: 110kV } } ], edges: [ { source: dev-001, target: def-023, relation: 存在缺陷 } ], paths: [ { nodeIds: [dev-001, def-023, cause-011], answer: 套管密封圈老化导致渗油, sources: [DL/T 573-2021] } ] }nodes 和 edges 用于图谱渲染paths 用于问答溯源。前端不承担推理职责只负责把三元组画出来。type 字段要规划成枚举device、defect、cause、measure 四类分别映射蓝色、红色、橙色、绿色。这套颜色体系在电力行业语义里非常自然缺陷是红色告警措施是绿色可执行项。props 是自由对象放电压等级、油位、微水值等上下文字段tooltip 和详情面板直接从 props 里读不要给每个字段单独建表。3. 问答和图谱串起来核心页面实现与参数调优页面结构一般是左列表、右图谱、底部或侧边问答栏。图谱是视觉重心但让整个系统可用的关键是问答链路的闭环。这一章给最小可运行实现参数都按桌面端场景标好。3.1 图谱可视化的最小实现force 布局下节点与标签的参数先上一个 Vue 组件骨架直接能跑template div refgraphDom classgraph-canvas/div /template script setup import * as echarts from echarts import { ref, shallowRef, onMounted, watch } from vue import { useGraphStore } from /stores/graph const graphDom ref(null) const chart shallowRef(null) const store useGraphStore() function buildOption(nodes, edges) { return { tooltip: { trigger: item, formatter: tooltipFormatter }, series: [{ type: graph, layout: force, roam: true, draggable: true, data: nodes.map(n ({ id: n.id, name: n.name, itemStyle: { color: colorByType(n.type) }, symbolSize: symbolSizeByType(n.type), nodeType: n.type, props: n.props })), links: edges, force: { repulsion: 300, edgeLength: 120, gravity: 0.1 }, label: { show: true, position: right, formatter: {b} } }] } } onMounted(() { chart.value echarts.init(graphDom.value) }) watch([() store.nodes, () store.edges], ([nodes, edges]) { if (chart.value) chart.value.setOption(buildOption(nodes, edges), true) }, { deep: true }) /script几个参数直接影响观感。repulsion 是节点间的斥力节点超过 300 或名称较长时从 300 往上加否则节点会挤成一团edgeLength 控制期望边长值太小标签互相压住建议 100~150 起步。gravity 是向中心聚拢的力太重会导致布局塌缩成圆球。桌面端鼠标滚轮缩放是刚需roam: true 一定要开draggable 让用户能手动拉开节点看路径这个交互在缺陷溯源时比自动布局更顺手。setOption 第二个参数传 true 表示 notMerge问答跳转后旧路径高亮状态会被清掉避免残留橙色线条干扰判断。要加图例时用 series 的 categories 配合 data 里的 category 字段不要直接塞 legend。3.1.1 知识图谱只显示 25 个标签的真相与 label 配置在 ECharts graph 场景里只显示 25 个标签是个被反复问的问题网上能搜到大量提问。ECharts 并不会硬性限制标签数量真相是标签重叠后被布局策略隐藏了。graph 系列默认 label.layout.hideOverlap 会隐藏重叠标签节点一多看起来就像只能显示二三十个。label: { show: true, overflow: truncate, width: 90, layout: { type: overlap, hideOverlap: false } }想全部显示就把 hideOverlap 关掉同时给 label 加宽度截断防止超长设备名顶破画布想界面清爽就保留 hideOverlap把完整的设备名放 tooltip。判断依据很简单这图谱是给人看板用还是给人点选分析。班组看板要全个人分析要清爽两者用同一套接口只是 label 配置不同。3.2 问答输入与答案回显从提问到路径高亮的完整链路问答交互的基本流程是用户输入自然语言问题前端做一次轻量预处理去空格、简繁归一然后推到后端做意图识别和结构化查询最后把 answer 和 paths 一起拿回来。后端是 Spring Boot 时接口一般长这样export async function askQuestion(text, scope all) { const { data } await http.post(/qa/ask, { question: text, deviceScope: scope }) return data }拿到结果后做三件事答案气泡上屏、图谱重绘、路径高亮。高亮路径不能重新请求全图直接在当前 store 数据上用 link 样式覆盖function applyHighlight(paths) { const hit new Set() paths.forEach(p { for (let i 0; i p.nodeIds.length - 1; i) { hit.add(${p.nodeIds[i]}|${p.nodeIds[i 1]}) } }) chart.value.setOption({ series: [{ type: graph, links: store.edges.map(e ({ ...e, lineStyle: hit.has(${e.source}|${e.target}) ? { width: 4, color: #ff9900 } : { width: 1, color: #cccccc } })) }] }, true) }注意这个函数不能把 store.edges 之外的边画出来所以答案路径上如果有关联节点不在当前图里需要先触发一次图谱范围扩展请求。常见策略是先展示已加载子图里的路径再在后台拉取关联节点完成后合并进 store重新 setOption。问答文本输入最好加 300ms 防抖避免用户还在打字就连续请求后端把内网带宽打满。3.3 缺陷工单列表与筛选springboot vue 前后端分离的字段约定问答入口是图谱台账出口是列表。左侧列表页一般按设备类型、电压等级、缺陷等级、状态筛选同时把筛选条件写进 vue 路由参数这样刷新不丢、链接可分享。vue 路由参数的用法在这里比在普通 Web 项目里更重要因为桌面端用户往往开着好几个窗口分享一个带 query 的链接就能把别人带到同一个筛选视图。字段含义示例devName设备名称2号主变devType设备类型变压器 / 断路器 / 隔离开关defectLevel缺陷等级一般 / 严重 / 危急findDate发现日期2025-04-12status处理状态待处理 / 处理中 / 已消除router.replace({ query: { level: 严重, type: 断路器, status: 待处理 } })springboot vue 前后端分离联调时避不开几个老问题时间格式不统一、分页命名不一致、跨域没配好。时间统一用字符串化本地时间写进 JSON后面不要带 Z前端就不再换算时区分页参数定死 current/pageSize跨域在 Spring Boot 里配 CORS而不是前端关掉浏览器的安全检查。双方在接口文档里把这三个约定写死列表页的问题至少少一半。4. 工程化落地项目结构、菜单、打包和常见坑4.1 前端源码的目录规划electron-vite 下三层解耦electron vue 项目的搭建现在最顺手的是 electron-vite。它把主进程、preload、渲染进程三者统一进 Vite 构建开发时热更新只作用在渲染进程主进程改动自动重启体验比 vue-cli-plugin-electron-builder 平滑。这套前端源码按 electron-vite 的习惯组织目录上坚持一个原则electron 目录不放业务代码src 目录不直接 import electron。具体规划如下project/ ├── electron/ │ ├── main/ # 窗口管理、菜单、文件对话框、日志 │ ├── preload/ # contextBridge 桥接脚本 │ └── main.js ├── src/ │ ├── api/ # HTTP 与桥接 API 的统一出口 │ ├── components/ # 图谱、工单表格、问答气泡 │ ├── stores/ # Pinia 状态 │ ├── router/ # 路由与参数处理 │ └── views/ # 页面级组件 ├── resources/ # 图标、默认配置文件 └── electron-builder.yml另一半关键在 electron-builder.yml至少要锁定 appId、productName、files 的白名单和 extraResources。files 用白名单可以显著减小安装包体积——把 node_modules 里 devDependencies 全部排除资源文件明说放哪。4.1.1 IPC 接口与 API 层分离避免组件里到处裸调业务组件里直接出现 ipcRenderer 或 axios.get 都是坏味道换后端、换壳、加日志都无从下手。统一收口到 src/api 下export const bridgeApi { importExcel() { return window.nativeBridge.selectFile(xlsx) .then(path window.nativeBridge.readXlsx(path)) }, exportFile(name, buf) { return window.nativeBridge.saveFile(name) .then(path window.nativeBridge.writeFile(path, buf)) } } export const qaApi { ask(text) { return http.post(/qa/ask, { question: text }) } }组件只 import 这两个对象。以后把 Electron 换 Tauri 或纯 Web改这一个文件即可。内网项目生命周期往往超过五年这个习惯能省很多事。4.2 electron 菜单与系统集成快捷键、资源目录、串口预留桌面端的价值一部分在菜单和快捷键。在 electron/main/menu.js 里注册应用菜单import { Menu, app, BrowserWindow } from electron export function setupMenu() { const template [ { label: 文件, submenu: [ { label: 导入缺陷台账, accelerator: CmdOrCtrlI, click: () { const win BrowserWindow.getFocusedWindow() if (win) win.webContents.send(menu:import) } }, { type: separator }, { label: 退出, role: quit } ] } ] Menu.setApplicationMenu(Menu.buildFromTemplate(template)) }菜单点击发消息时要先取聚焦窗口不能直接 send 到一个固定的 mainWindow否则副窗口聚焦时功能会失灵。render 侧注册同名监听注意在组件卸载时 removeListener。串口设备在电力缺陷采集场景经常需要预留。主进程维护 serialport 设备列表preload 暴露 getPorts 和订阅数据的方法渲染进程在实时数据页调用。初始版本可以不实现完整串口逻辑但接口位置要留好否则后期加会污染菜单、IPC、页面三处代码。4.3 打包成 exe 后的路径问题与更新策略很多人会想把 HTML 网页转成 exeElectron 打包确实是这个操作专业项目用的是 electron-builder 而不是简单的封装工具。打包后第一个坑是资源路径开发时相对路径读到的文件打包后跑到 app.asar 里只读且路径带 asar 前缀。配置文件、导入的台账、导出的 Excel 应该放在 userData 目录const resourceBase path.join(app.getPath(userData), resources) if (!fs.existsSync(resourceBase)) fs.mkdirSync(resourceBase, { recursive: true })安装目录在 Windows 的 Program Files 下默认只读直接写入会静默失败这是常见反馈功能没坏但就是存不住的根源。资源数据统一落 userData 之后后续做自动更新也容易因为更新只替换安装目录用户数据天然隔离不冲突。4.4 联调与排错白屏、端口、代理、响应式失效白屏是 electron 应用最高频的问题排查顺序固定先看 DevTools Console如果报 ERR_CONNECTION_REFUSED说明后端没起或者 vite 代理没匹配如果空白且 Console 无任何输出多半是渲染进程崩溃在主进程监听 render-process-gone 并落日志如果报 require is not defined回查 preload 暴露方式多半是关 nodeIntegration 之后直接调用了 Node API。提示生产环境别让用户描述页面长什么样。主进程统一监听 render-process-gone 和 child-process-gone把崩溃堆栈写到 userData/logs 下远程要日志比现场复现快得多。开发环境联调后端用 Vite proxyexport default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })生产环境用 VITE_API_BASE 注入后端地址避免把 localhost 打进安装包。至于vue 对象赋值页面不变十次里有八次是整体替换了 reactive 对象走 $patch 单独改字段即刻恢复。图谱场景里还会遇到 chart 实例不刷新记得 setOption 而不是重新 init。5. 进阶问答结果导出 Excel 与知识图谱路径的二次验证5.1 vue 多个表格导出一个 excel 的落地写法电力缺陷台账和问答溯源结果经常要一起发给检修班组。常见做法是用 exceljs 在渲染进程生成 workbook主进程负责选保存路径。先装 exceljs然后import ExcelJS from exceljs export async function exportMultiSheet(sheets, fileName) { const wb new ExcelJS.Workbook() for (const sheet of sheets) { const ws wb.addWorksheet(sheet.name) ws.columns sheet.columns.map(c ({ header: c.title, key: c.key, width: c.width })) sheet.rows.forEach(row ws.addRow(row)) ws.getRow(1).font { bold: true } } const buf await wb.xlsx.writeBuffer() const path await window.nativeBridge.saveFile(fileName) await window.nativeBridge.writeFile(path, Buffer.from(buf)) }columns 要先定义好header 是表头key 对应 row 对象的字段width 控制列宽。导出后强制校验一遍用 exceljs 读回前 5 行console.table 看字段名和值防止数字被序列化成长浮点。这个习惯看着繁琐实际能挡住八成导出来没问题打开全是乱码的抱怨。5.2 用图谱路径做答案溯源可折叠面包屑与抽检验证问答系统最容易被老师傅挑战的是凭什么这么答。把 paths 渲染成可折叠面包屑能显著提升信任度const steps path.nodeIds.map(id { const n nodeMap.get(id) return { label: n.name, type: n.type, props: n.props } })每个节点悬停显示 props路径末尾附上来源规程编号比如套管渗油 → 密封圈老化 → 更换密封圈DL/T 573-2021 第 6.2 节。这样班组复核时可以直接翻规程对照。验证方法不复杂从台账里随机抽 20 条缺陷逐个看答案路径与规程是否一致统计命中率。命中率 85% 以上再谈推广低于这个数优先去查知识图谱构建时的关系抽取质量而不是前端展示。最后补一个桌面端兜底在主进程挂 before-quit 判断如果还有未导出的问答记录就弹确认框用户确认后再放行这个逻辑在 window-all-closed 之前实现即可代码量不大但内网环境下每天都能用上。本文还有配套的精品资源点击获取
