鸿蒙electron跨端框架PC青简笔记实战：从笔记列表、编辑器到桌面导出，一次做完整

前言欢迎加入鸿蒙PC开发者社区共同打造开发者工具生态鸿蒙PC开发者社区 https://harmonypc.csdn.net/项目开源地址https://AtomGit.com/lqjmac/ele-qingjianbiji青简笔记这一篇我更想按一次真实改项目的节奏来写。桌面端适配不能只停在空窗口和按钮演示必须能完成新建、编辑、搜索、置顶、复制和导出这些真实操作。它面向的是经常在桌面上整理想法、会议记录、片段资料的人。所以这里不是简单套模板而是围绕笔记应用重新检查字段、页面和桌面端动作。下面会把取舍原因、关键代码和构建检查都放出来方便你照着项目目录回看。一、先把笔记这件事拆开1.1 青简笔记真正要解决什么桌面端适配不能只停在空窗口和按钮演示必须能完成新建、编辑、搜索、置顶、复制和导出这些真实操作。这一步如果含糊后面很容易堆很多按钮最后却没人知道打开后该先做什么。我先给第一版定了三条边界入口要直接打开后就能进入主任务核心字段要解释真实动作而不是为了显得完整桌面能力只在复制、导出、提醒这类关键点出现1.2 为什么不做成大而全笔记应用第一版最怕什么都想做结果主任务反而变得不清楚。所以我先把能闭环的一条路做顺再把扩展能力往后放。取舍点保留原因主任务保留决定应用是否成立复杂协作暂不做会拉高第一版成本本地保存保留桌面工具必须可回看复制和导出保留方便内容流出应用这张表就是我给第一版画的边界。边界定住以后组件、字段和按钮才不会一路发散。二、先看项目目录怎样分工2.1 主要文件职责文件职责这篇关注点Home.vue页面编排组织整体布局和反馈信息NoteSidebar.vue左侧区域筛选、列表、统计入口NoteEditor.vue编辑区域承接当前条目的核心字段NoteToolbar.vue工具栏新建、复制、导出、删除useNotes.ts状态层数据模型、本地存储、筛选排序useNativeBridge.ts桥接层剪贴板、文件、通知能力兜底我没有强行把所有组件名都改成业务名。在这种批量桌面工具实践里稳定结构比“每个名字都完美”更重要。三、主界面为什么采用列表加编辑器3.1 页面结构图这张图对应青简笔记的核心结构列表负责回找编辑器负责输入桥接层负责把桌面能力收住。3.2 布局为什么这样分青简笔记采用的是左侧笔记列表 中间编辑区 顶部工具栏。这个布局不是为了凑三栏而是让用户的视线从“找内容”自然走到“处理内容”。区域承担的任务设计注意点左侧定位内容不要堆太多字段中间处理主任务保持当前对象足够突出右侧补充上下文只放有决策价值的信息顶部放全局动作避免把工具按钮塞进正文这种结构在桌面端比较稳定。窗口变宽时可以容纳更多信息窗口变窄时也能通过滚动保持可用。四、字段设计别只停在 title 和 content4.1 青简笔记的核心字段我先把字段列出来而不是直接写页面。原因很简单字段决定了这个工具到底在乎什么。字段含义页面位置id承载笔记应用的第 1 个关键信息列表/卡片title承载笔记应用的第 2 个关键信息列表/卡片content承载笔记应用的第 3 个关键信息编辑区category承载笔记应用的第 4 个关键信息编辑区pinned承载笔记应用的第 5 个关键信息编辑区updatedAt承载笔记应用的第 6 个关键信息侧栏/导出4.2 TypeScript 类型exportinterface青简笔记Item{id:string;title:string;content:string;category:number|string;pinned:string;updatedAt:string;}exporttype青简笔记Filterall|active|archived;这段类型不复杂但它能逼着页面和状态层都围绕同一套语义工作。五、默认笔记要像真实资料5.1 为什么要写种子数据空白页面对开发者很友好对用户不一定友好。尤其是桌面工具第一次打开时最好能看出它应该怎么被使用。默认数据我遵循三条原则不要写“测试1 / 测试2”这种占位内容每条数据都要能体现一个真实使用动作字段之间要互相呼应不能只是凑满对象5.2 示例数据exportconstseed青简笔记Items:青简笔记Item[][{id:qingjian_notes-001,title:title 示例内容,content:content 示例内容,category:工程落地复盘,pinned:pinned 示例内容,updatedAt:updatedAt 示例内容,},];这类种子数据不只是给截图用。它还会帮助开发者在调样式、调滚动和调导出时更快发现问题。六、状态层先把读写收稳6.1 composable 的职责useNotes.ts这层我更愿意把它理解成“当前工具的数据服务”。页面不应该直接处理太多 localStorage、排序和导出拼接。constSTORAGE_KEYqingjian-notes;constitemsref青简笔记Item[](loadItems());constactiveIdref(items.value[0]?.id??);functionpersist(){localStorage.setItem(STORAGE_KEY,JSON.stringify(items.value));}functionloadItems(){constrawlocalStorage.getItem(STORAGE_KEY);returnraw?JSON.parse(raw):seed青简笔记Items;}6.2 本地存储 key 一定要独立这里的 key 我会明确写成qingjian-notes。这样做可以避免不同工具之间互相读到旧数据。本地数据一旦串了页面看起来像小问题实际会让调试和截图都变得很难判断。七、搜索、置顶和排序放在计算层7.1 computed 更适合承接派生视图筛选、搜索、排序这些逻辑如果直接写在模板里很快会让页面变得难读。我更倾向于让状态层先准备好可展示列表。constkeywordref();constfilterrefall|title(all);constvisibleItemscomputed((){consttextkeyword.value.trim().toLowerCase();returnitems.value.filter(itemJSON.stringify(item).toLowerCase().includes(text)).sort((a,b)String(b.id).localeCompare(String(a.id)));});7.2 排序服务于场景笔记应用里排序不是“哪个字段容易写就按哪个排”。它应该服务用户打开应用时最想看到的那批内容。未处理内容优先出现置顶或高优先级内容靠前最近更新内容不要沉底八、Home.vue 只负责把页面拼起来8.1 Home.vue 只做编排我不希望Home.vue变成所有逻辑的大杂烩。它更适合负责页面骨架和组件之间的数据传递。template main classqingjian_notes-page NoteToolbar createcreateItem copycopyCurrent exportexportCurrent / section classworkspace NoteSidebar :itemsvisibleItems selectselectItem / NoteEditor :itemcurrentItem updateupdateItem / /section /main /template8.2 组件之间的边界组件应该知道什么不应该知道什么NoteToolbar当前能触发哪些动作具体字段如何存储NoteSidebar列表、筛选、选中项导出 Markdown 细节NoteEditor当前对象字段全局搜索逻辑边界清楚以后后续改样式和改字段都会轻很多。九、编辑器要照顾长文本输入9.1 不要只留下标题和正文青简笔记如果只保留标题和正文就会退回普通记事本。所以编辑器必须把核心字段摆出来。script setup langts defineProps{ item: 青简笔记Item | null }(); const emit defineEmits{ update: [item: 青简笔记Item] }(); /script template form v-ifitem classeditor-form input v-modelitem.title / textarea v-modelitem.pinned / /form /template9.2 表单不是越多越好我会优先放能影响用户判断的字段。辅助字段可以放到右侧信息区或者只在导出时使用。十、工具栏只留下高频动作10.1 工具栏放哪些按钮工具栏最容易变成按钮仓库。青简笔记里我只保留和主流程强相关的动作。新建笔记搜索笔记置顶内容复制摘要导出 Markdown触发通知10.2 复制摘要functionbuild青简笔记Summary(item:青简笔记Item){return[# 青简笔记摘要,- title: item.title,- content: item.content,- category: item.category,- pinned: item.pinned,].join(\n);}复制摘要的好处是很实际的。用户不一定每次都要导出文件有时只是想把当前内容发到聊天窗口或文档里。十一、桌面桥接能力放在边界层11.1 桥接层只暴露稳定动作页面不应该知道底层是 Electron clipboard还是 OpenHarmony 侧的能力。它只需要知道“复制”“导出”“通知”这些动作。exportfunctionuseNativeBridge(){constapiwindow.ohosBridge??window.electronAPI;asyncfunctioncopyText(text:string){if(api?.copyText)returnapi.copyText(text);returnnavigator.clipboard.writeText(text);}asyncfunctionnotify(message:string){if(api?.notify)returnapi.notify(message);}return{copyText,notify};}11.2 为什么要有浏览器兜底开发阶段经常会直接跑 Vite。如果没有浏览器兜底页面调试会被原生环境绑得太死。十二、导出的 Markdown 要能离开应用12.1 导出内容要能独立阅读导出的 Markdown 不能只是把字段拼起来。它最好离开应用以后也能被看懂。functionexport青简笔记Markdown(item:青简笔记Item){return[# 青简笔记,, 由 青简笔记 导出。,## title,String(item.title??),## content,String(item.content??),## category,String(item.category??),## pinned,String(item.pinned??),## updatedAt,String(item.updatedAt??),].join(\n);}12.2 导出动作和通知联动asyncfunctionexportCurrent(){if(!currentItem.value)return;constmarkdownexport青简笔记Markdown(currentItem.value);awaitbridge.copyText(markdown);awaitbridge.notify(青简笔记内容已复制为 Markdown);}这样用户完成导出以后能马上得到反馈。十三、主进程加载别写死13.1 开发环境和生产环境分开桌面应用最常见的白屏问题之一是生产环境还在访问开发服务器。所以主进程里一定要把加载逻辑分清楚。constpathrequire(path);functionresolveRendererUrl(){if(process.env.VITE_DEV_SERVER_URL){returnprocess.env.VITE_DEV_SERVER_URL;}returnfile://${path.join(__dirname,../dist/index.html)};}mainWindow.loadURL(resolveRendererUrl());13.2 preload 只注入必要接口const{contextBridge,ipcRenderer}require(electron);contextBridge.exposeInMainWorld(electronAPI,{copyText:textipcRenderer.invoke(copy-text,text),notify:messageipcRenderer.invoke(notify,message),});接口少一点维护起来更安心。十四、笔记工具的样式要安静14.1 视觉气质服务使用场景青简笔记的视觉方向是干净、克制、偏文档感。这个判断会影响间距、字号、卡片密度和按钮重量。.qingjian_notes-page{min-height:100vh;display:flex;flex-direction:column;background:#f7f8fb;color:#1f2937;}.workspace{display:grid;grid-template-columns:280pxminmax(0,1fr);gap:16px;min-height:0;}14.2 滚动区要提前处理桌面应用窗口经常被用户缩小。如果滚动区没有处理好内容一多就会挤成一团。左侧列表要能独立滚动编辑区不能把工具栏挤出屏幕右侧信息区要允许内容截断和换行十五、构建检查和主题核对15.1 先确认前端产物能生成写文章之前我会先跑一次构建。这一步很朴素但能挡住不少低级问题。cd../../XM/electron-openharmony-vue3-1/ohos_hap/web_engine/src/main/resources/resfile/resources/app/vue-appnpminstallnpmrun build15.2 再确认关键文件没有串主题rgqingjian-notes|/notes|青简笔记src package.json rgTODO|旧标题|测试数据src构建通过不代表体验完美但至少说明当前页面和依赖关系是站得住的。十六、这次笔记工具留下的经验16.1 先换问题再换界面青简笔记最重要的不是页面长什么样而是它先回答了一个明确问题桌面端适配不能只停在空窗口和按钮演示必须能完成新建、编辑、搜索、置顶、复制和导出这些真实操作。问题清楚以后字段、布局和按钮才知道往哪里收。16.2 哪些东西可以复用稳定的项目目录结构状态层和本地存储节奏复制、导出、通知这组桌面动作开发环境与生产环境分开的加载逻辑16.3 哪些东西不要硬套旧的数据字段旧的默认文案旧的视觉重心旧的排序规则十七、后面可以补的能力青简笔记这一版先把最小闭环跑通。真要继续加功能我会优先从这些方向补增加更细的筛选条件补充快捷键操作支持批量导入和导出增加多窗口或置顶窗口模式把常用动作接到系统菜单里这些能力都值得做但不应该抢在主流程前面。主流程没顺之前扩展越多后面越容易返工。十八、发布前再过一遍发布前我会按下面这张表再扫一遍尤其确认主题一致性和可发布性。检查项结果说明标题和主题一致通过青简笔记实战从笔记列表、编辑器到桌面导出一次做完整图片存在通过保留项目结构图或运行效果图代码块数量通过覆盖类型、状态、组件、桥接、导出、构建资源链接通过保留官方文档和项目路径总结和投票引导通过符合 CSDN 高分规则写这种项目文章时我更愿意让检查表把内容拉回文件、字段、命令和真实操作。总结青简笔记这一版我最看重的是“重新打开还能继续写”。所以文章没有把它写成泛泛的记事本而是围绕列表、编辑器、复制和导出把一条真实使用链路串起来。它的重点不是功能堆得多而是围绕“工程落地复盘”把数据模型、页面结构和桥接能力放到同一条线上。后面要继续增强我还是会先看真实使用动作再决定字段、按钮和窗口要不要增加。这样工具才不会越做越沉也不会只剩下一层好看的界面。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源鸿蒙PC开发者社区https://harmonypc.csdn.net/OpenHarmony 官网https://www.openharmony.cn/