山东大学软件学院项目实训--个人报告2

前言

项目名称：大模型自动管理的AI笔记软件

本周，小组对于前端项目进行了系统性的设计，画出初版的实物项目图，后续将会进行优化升级。基于Electron技术栈完成了智能笔记系统的核心框架搭建，初步实现了搜索功能、历史记录管理、弹窗交互等基础模块。本文将详细介绍开发过程中的技术选型、关键实现、遇到的问题及解决方案。

技术栈选择：
Electron 28 + Node.js 18
原生HTML/CSS实现界面
IPC通信实现进程间交互

---

 

开发过程与问题解决

Electron进程管理

问题：初次配置时渲染进程无法调用Node API
解决方案：通过预加载脚本实现安全通信

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  createNote: () => ipcRenderer.invoke('create-note')
})

---

 

弹窗无法关闭

问题：点击关闭按钮后弹窗仍然存在
解决方案：未绑定关闭事件监听，添加以下代码后，点击更多按钮出现的右侧弹框可以被正常关闭

// 在DOMContentLoaded事件中添加
document.getElementById('close-dialog').addEventListener('click', () => {
  sideDialog.classList.remove('visible')
})

---

 

搜索体验不佳 

问题：必须点击搜索按钮才能触发
解决方案：增强输入框交互 

// 修改输入框事件监听
searchInput.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') handleSearch()
})

---

 

总结 

 状态管理逻辑

// 历史记录管理流程图
开始 --> 输入查询
输入查询 --> 检查重复
检查重复 -- 新查询 --> 创建新条目
检查重复 -- 已存在 --> 移动条目
结束

---

当前设计页面 

 

 

感想 

通过本周的开发实践，我掌握了Electron主进程与渲染进程的通信机制，理解了IPC（进程间通信）的实现原理，并熟练运用Flexbox完成响应式布局设计；同时，在解决搜索体验不佳、弹窗状态控制等问题的过程中，提升了前端交互逻辑的调试能力。未来三周将重点优化界面视觉层级，集成富文本编辑器实现笔记内容格式化存储，并构建基于标签的智能推荐系统。