鸿蒙electron跨端框架PC导出管家实战：把交付前的检查、复制和导出做成一个工坊

前言欢迎加入鸿蒙PC开发者社区共同打造开发者工具生态鸿蒙PC开发者社区 https://harmonypc.csdn.net/项目开源地址https://AtomGit.com/lqjmac/ele-daochuguanjia我做 导出管家 时最先确认的不是颜色和布局而是它到底帮谁省了哪一步。文档写完以后还要确认标题、摘要、格式、文件名和导出内容这一步值得单独做清楚。它面向的是经常需要把文稿整理成 Markdown、说明文或交付摘要的人。这一篇我不按“又做一个编辑器”的思路写。导出管家更像交付前的最后一张检查台内容有没有漏、格式是不是对、文件名能不能直接发出去。一、先确认导出前要检查什么1.1 导出管家真正要解决什么文档写完以后还要确认标题、摘要、格式、文件名和导出内容这一步值得单独做清楚。这类工作如果混在正文编辑器里用户常常会到最后一刻才发现摘要没补、格式没定、文件名还叫临时稿。所以第一版只盯住交付前的三个检查点源文档要能快速定位导出格式和文件名要在同一个视野里确认最后一步必须能复制或导出不让用户再手工拼内容1.2 为什么不做成大而全导出工具很容易继续长出模板市场、批量转换、云端同步。这些都能做但第一版先不碰因为我想让它更像一个可靠的交付面板。交付环节第一版做法原因标题和摘要明确留字段交付文档最怕上下文丢失格式选择放在编辑区显眼位置导出前必须确认预览确认保留摘要和正文回看避免发出半成品批量任务暂时不做会稀释单篇交付体验把范围收在“检查、确认、交付”之后页面结构自然会比综合文档工具轻很多。二、文件分工对应交付链路2.1 主要文件职责文件职责这篇关注点Home.vue串起交付流程让源文档、导出参数和预览区在同一条线上NoteSidebar.vue管待导出文档承担筛选和选择别把编辑逻辑塞进去NoteEditor.vue补交付信息格式、文件名、摘要这些字段在这里确认NoteToolbar.vue收口最后动作复制、导出、删除都从这里触发useNotes.ts保存导出任务本地状态、筛选、当前选择都交给它useNativeBridge.ts对接系统能力剪贴板和通知作为交付动作的补位文件名保持统一没问题文章里要讲清楚它们在导出链路里分别站在哪里。这样读者才不会觉得这只是换了标题的一套组件。三、整体结构围绕待导出文档3.1 页面结构图导出管家结构图展示了源文档、导出参数和预览确认之间的关系。3.2 布局为什么这样分导出管家采用的是源文档区 导出参数区 预览确认区。这三个区域对应交付前的真实顺序先选材料再补参数最后确认能不能发。区域承担的任务设计注意点源文档区找到要交付的内容标题、状态、格式足够不要变成全文预览参数区填文件名、格式、摘要字段要短避免比正文还累预览区最后确认内容让用户在复制前能扫一眼工具栏执行交付动作复制和导出要放得明确导出类工具的重点不是沉浸而是减少漏项。所以信息密度可以比写作工具高一点但每个区块都要有明确用途。四、字段设计要覆盖格式和状态4.1 导出管家的核心字段字段设计直接决定它是不是一个“交付工具”。如果只保存正文那它和普通笔记没有区别。字段含义页面位置id标识一条导出任务状态层sourceTitle原始文档标题列表/预览区format目标格式比如 Markdown 或说明文编辑区fileName准备输出的文件名编辑区summary给接收方看的交付摘要编辑区content真正要流转出去的正文预览/导出4.2 TypeScript 类型exportinterfaceAppItem{id:string;sourceTitle:string;format:string;fileName:number|string;summary:string;content:string;}exporttypeAppFilterall|active|archived;这套类型很薄但它把“源文档”和“导出结果”分开了。这点对交付工具很关键。五、默认文档要像真实交付物5.1 为什么要写种子数据导出工具的默认数据要让人一眼看懂它的工作方式。如果还是“测试标题、测试内容”就看不出格式和文件名存在的意义。我会让默认文档带上真实交付语境标题像一份准备发出的材料文件名能直接用于保存摘要能解释为什么导出5.2 示例数据exportconstseedAppItems:AppItem[][{id:daochu_guanjia-001,sourceTitle:鸿蒙 PC 适配周报,format:Markdown,fileName:harmony-pc-weekly.md,summary:交付给项目组的本周适配进展。,content:包含构建状态、问题清单和下一步安排。,},];这种数据能顺便检查列表、预览和导出文件名是否都能撑住真实文本。六、状态层处理选择和导出6.1 composable 的职责useNotes.ts这层我更愿意把它理解成“当前工具的数据服务”。页面不应该直接处理太多 localStorage、排序和导出拼接。constSTORAGE_KEYdaochu-guanjia;constitemsrefAppItem[](loadItems());constactiveIdref(items.value[0]?.id??);functionpersist(){localStorage.setItem(STORAGE_KEY,JSON.stringify(items.value));}functionloadItems(){constrawlocalStorage.getItem(STORAGE_KEY);returnraw?JSON.parse(raw):seedAppItems;}6.2 本地存储 key 一定要独立这里的 key 我会明确写成daochu-guanjia。这样做可以避免不同工具之间互相读到旧数据。本地数据一旦串了页面看起来像小问题实际会让调试和截图都变得很难判断。七、筛选排序突出待处理内容7.1 computed 更适合承接派生视图筛选、搜索、排序这些逻辑如果直接写在模板里很快会让页面变得难读。我更倾向于让状态层先准备好可展示列表。constkeywordref();constfilterrefall|sourceTitle(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 排序服务于场景文档导出工具里排序不是“哪个字段容易写就按哪个排”。它应该服务用户打开应用时最想看到的那批内容。未处理内容优先出现置顶或高优先级内容靠前最近更新内容不要沉底八、Vue 页面承接交付流程8.1 Home.vue 只做编排我不希望Home.vue变成所有逻辑的大杂烩。它更适合负责页面骨架和组件之间的数据传递。template main classdaochu_guanjia-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: AppItem | null }(); const emit defineEmits{ update: [item: AppItem] }(); /script template form v-ifitem classeditor-form input v-modelitem.sourceTitle / textarea v-modelitem.summary / /form /template9.2 表单不是越多越好我会优先放能影响用户判断的字段。辅助字段可以放到右侧信息区或者只在导出时使用。十、工具栏围绕预览、复制和导出10.1 工具栏放哪些按钮工具栏最容易变成按钮仓库。导出管家里我只保留和主流程强相关的动作。选择源文档设置格式预览导出复制摘要导出 Markdown记录导出结果10.2 复制摘要functionbuildAppSummary(item:AppItem){return[# 导出管家摘要,- sourceTitle: item.sourceTitle,- format: item.format,- fileName: item.fileName,- summary: item.summary,].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 不能只是把字段拼起来。它最好离开应用以后也能被看懂。functionexportAppMarkdown(item:AppItem){return[# 导出管家,, 由 导出管家 导出。,## sourceTitle,String(item.sourceTitle??),## format,String(item.format??),## fileName,String(item.fileName??),## summary,String(item.summary??),## content,String(item.content??),].join(\n);}12.2 导出动作和通知联动asyncfunctionexportCurrent(){if(!currentItem.value)return;constmarkdownexportAppMarkdown(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 视觉气质服务使用场景导出管家的视觉方向是清晰、偏交付、减少干扰。这个判断会影响间距、字号、卡片密度和按钮重量。.daochu_guanjia-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../../electron_for_harmony/electron-openharmony-vue3-12/ohos_hap/web_engine/src/main/resources/resfile/resources/app/vue-appnpminstallnpmrun build15.2 再确认关键文件没有串主题rgdaochu-guanjia|/export|导出管家src package.json rgTODO|旧标题|测试数据src构建通过不代表体验完美但至少说明当前页面和依赖关系是站得住的。十六、这版导出工具的经验16.1 先换问题再换界面导出管家最重要的不是页面长什么样而是它先回答了一个明确问题文档写完以后还要确认标题、摘要、格式、文件名和导出内容这一步值得单独做清楚。问题清楚以后字段、布局和按钮才知道往哪里收。16.2 哪些东西可以复用清晰的页面、状态层、桥接层分工状态层和本地存储节奏复制、导出、通知这组桌面动作开发环境与生产环境分开的加载逻辑16.3 哪些东西不要硬套旧的数据字段旧的默认文案旧的视觉重心旧的排序规则十七、后续可以补的格式能力导出管家这一版已经把交付前检查串成了一条线。真要继续加功能我会优先从这些方向补增加文件名规则校验支持导出前的缺项提示增加多格式模板比如周报、说明书、发布记录支持一键复制交付摘要对导出历史做简单回看这些增强都服务交付前检查而不是把它扩成另一个写作器。十八、发布前做一次交付检查发布前我会按下面这张表再扫一遍尤其确认主题一致性和可发布性。检查项结果说明标题和主题一致通过导出管家实战把交付前的检查、复制和导出做成一个工坊图片存在通过保留项目结构图或运行效果图代码块数量通过覆盖类型、状态、组件、桥接、导出、构建资源链接通过保留社区和官方文档入口总结导出管家的重点不是再造一个编辑器而是把交付前的检查动作收拢。格式、状态、说明和导出内容都清楚以后文档交付就不会靠临时记忆硬撑。导出管家更适合做交付前的最后一站。它不需要把编辑能力抢回来只要把标题、格式、文件名、摘要和最终内容检查清楚就已经能帮用户少犯很多低级错。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源鸿蒙PC开发者社区https://harmonypc.csdn.net/OpenHarmony 官网https://www.openharmony.cn/