前言欢迎加入鸿蒙PC开发者社区共同打造开发者工具生态鸿蒙PC开发者社区 https://harmonypc.csdn.net/项目开源地址https://AtomGit.com/lqjmac/ele-xiangfakapian写 想法卡片 时我没有把它当成简单换皮而是先回到用户动作本身。很多想法还没到完整文章或完整需求的程度先用卡片收住后续再判断是否值得展开。它面向的是经常积累标题、观察、金句、选题和内容线索的人。想法卡片不适合写得像任务管理工具。它更像一张暂存台先把一句话、一个标题、一个观察放住等它有价值时再继续展开。一、先接受灵感是不完整的1.1 想法卡片真正要解决什么很多想法还没到完整文章或完整需求的程度先用卡片收住后续再判断是否值得展开。灵感最麻烦的地方在于它不完整如果界面一上来就要求标题、分类、截止时间反而会让用户懒得记录。所以第一版我让它保持轻一点卡片能先记下钩子不要求马上写成长文用情绪、板块、下一步动作帮助二次判断复制和导出只是辅助不打断收集节奏1.2 为什么不做成大而全灵感类工具特别容易做成“内容中台”标签、看板、AI 改写、日历提醒全都想加。但这个项目先不做重流程因为灵感真正需要的是低阻力入口。设计取舍当前处理原因卡片钩子保留为第一字段一句话就能建立记忆点完整正文不强制填写很多想法一开始没有正文下一步单独留字段方便后面判断是否展开复杂看板暂时克制第一版避免变成项目管理这样它更像创意收集器而不是另一套任务系统。二、文件分工围绕卡片流2.1 主要文件职责文件职责这篇关注点Home.vue安排卡片工作台控制卡堆、编辑区和洞察栏的关系NoteSidebar.vue管卡片入口快速筛选不同板块的灵感NoteEditor.vue写钩子和补充说明让未成形的想法也能被保存NoteToolbar.vue处理卡片动作新建、复制、导出、归档useNotes.ts维护卡片集合本地保存、筛选、当前选中项useNativeBridge.ts衔接剪贴板把卡片快速带到文章或聊天窗口这里的组件边界要轻卡片工具不适合让用户感觉自己在填复杂表单。三、整体结构服务再次看见3.1 页面结构图想法卡片结构图展示了灵感卡堆、卡片流和右侧洞察信息。3.2 布局为什么这样分想法卡片采用的是灵感卡堆 卡片流 洞察侧栏。左边像抽屉中间像桌面右边像提醒自己“这张卡下一步能做什么”。区域承担的任务设计注意点灵感卡堆按板块找回卡片标题要短状态要轻卡片流浏览和编辑当前想法留出卡片之间的呼吸感洞察侧栏放来源、情绪、下一步只提醒不催促顶部动作新建、复制、导出动作少一点保持随手记录感它不追求密度而是让零散想法重新被看见。四、字段设计要包含来源和阶段4.1 想法卡片的核心字段字段越重灵感越难留下来。所以这里的字段都围绕“先收住再判断”。字段含义页面位置id卡片标识状态层hook最先抓住人的那句话列表/卡片mood记录当时的感受或语气编辑区board属于哪个创作板块筛选/编辑区note补充背景和线索编辑区nextAction下一步怎么处理这张卡侧栏/导出4.2 TypeScript 类型exportinterfaceAppItem{id:string;hook:string;mood:string;board:number|string;note:string;nextAction:string;}exporttypeAppFilterall|active|archived;类型保持简单是为了给卡片留出模糊空间。灵感不完整数据结构也不要装得太满。五、默认卡片要像真实选题5.1 为什么要写种子数据默认卡片要像真的选题线索。如果默认内容只写字段名用户就看不出 hook、mood、nextAction 之间的关系。我更愿意让种子卡片满足这三点hook 有画面note 能解释来源nextAction 能指向下一步创作5.2 示例数据exportconstseedAppItems:AppItem[][{id:xiangfa_kapian-001,hook:把白屏排查写成一次工程复盘,mood:清醒,board:内容线索整理,note:从日志里的 so 加载错误切入讲清楚前端白屏和 native 库问题的区别。,nextAction:整理成技术文章开头,},];一张真实卡片能同时测试卡片高度、换行、侧栏提示和导出效果。六、状态层处理收集和推进6.1 composable 的职责useNotes.ts这层我更愿意把它理解成“当前工具的数据服务”。页面不应该直接处理太多 localStorage、排序和导出拼接。constSTORAGE_KEYxiangfa-kapian;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 我会明确写成xiangfa-kapian。这样做可以避免不同工具之间互相读到旧数据。本地数据一旦串了页面看起来像小问题实际会让调试和截图都变得很难判断。七、筛选排序让可展开内容浮上来7.1 computed 更适合承接派生视图筛选、搜索、排序这些逻辑如果直接写在模板里很快会让页面变得难读。我更倾向于让状态层先准备好可展示列表。constkeywordref();constfilterrefall|hook(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 classxiangfa_kapian-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.hook / textarea v-modelitem.note / /form /template9.2 表单不是越多越好我会优先放能影响用户判断的字段。辅助字段可以放到右侧信息区或者只在导出时使用。十、工具栏围绕复制和整理10.1 工具栏放哪些按钮工具栏最容易变成按钮仓库。想法卡片里我只保留和主流程强相关的动作。新建卡片标记气质归入板块补充观察复制核心句导出卡片10.2 复制摘要functionbuildAppSummary(item:AppItem){return[# 想法卡片摘要,- hook: item.hook,- mood: item.mood,- board: item.board,- note: item.note,].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[# 想法卡片,, 由 想法卡片 导出。,## hook,String(item.hook??),## mood,String(item.mood??),## board,String(item.board??),## note,String(item.note??),## nextAction,String(item.nextAction??),].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 视觉气质服务使用场景想法卡片的视觉方向是暖纸面、轻卡片、保留一点未完成感。这个判断会影响间距、字号、卡片密度和按钮重量。.xiangfa_kapian-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-14/ohos_hap/web_engine/src/main/resources/resfile/resources/app/vue-appnpminstallnpmrun build15.2 再确认关键文件没有串主题rgxiangfa-kapian|/idea-cards|想法卡片src package.json rgTODO|旧标题|测试数据src构建通过不代表体验完美但至少说明当前页面和依赖关系是站得住的。十六、这版灵卡工具的经验16.1 先换问题再换界面想法卡片最重要的不是页面长什么样而是它先回答了一个明确问题很多想法还没到完整文章或完整需求的程度先用卡片收住后续再判断是否值得展开。问题清楚以后字段、布局和按钮才知道往哪里收。16.2 哪些东西可以复用清晰的页面、状态层、桥接层分工状态层和本地存储节奏复制、导出、通知这组桌面动作开发环境与生产环境分开的加载逻辑16.3 哪些东西不要硬套旧的数据字段旧的默认文案旧的视觉重心旧的排序规则十七、后续可以补的创作能力想法卡片目前已经能承担随手收集和再次展开的基本动作。真要继续加功能我会优先从这些方向补增加灵感来源字段区分阅读、项目、聊天、观察支持卡片合并把几个线索拼成选题增加“本周再看”提醒支持把卡片一键转成文章提纲给板块增加颜色和轻量排序这些扩展应该继续保持轻别把灵感收集变成负担。十八、发布前做一次卡片检查发布前我会按下面这张表再扫一遍尤其确认主题一致性和可发布性。检查项结果说明标题和主题一致通过想法卡片实战把零散灵感做成能继续展开的卡片流图片存在通过保留项目结构图或运行效果图代码块数量通过覆盖类型、状态、组件、桥接、导出、构建资源链接通过保留社区和官方文档入口总结想法卡片这一版不要求每个想法一开始就成熟。它先把线索放到可回看的卡片里再让用户判断是否继续展开这种松弛感很适合选题和创意积累。这篇我最想保留的是轻盈感。想法还不成熟时工具不应该急着把它变成任务先让它被看见被保存再决定是否展开。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源鸿蒙PC开发者社区https://harmonypc.csdn.net/OpenHarmony 官网https://www.openharmony.cn/
