前言欢迎加入鸿蒙PC开发者社区共同打造开发者工具生态鸿蒙PC开发者社区 https://harmonypc.csdn.net/项目开源地址https://AtomGit.com/lqjmac/ele-keyeban我做 课业板 时最先确认的不是颜色和布局而是它到底帮谁省了哪一步。课程作业的麻烦不只是任务多而是课程、老师、截止时间、提交物、进度和风险同时压过来。它面向的是同时处理多门课程作业、实验报告和小组任务的学生。课业板这一篇更像是给学期任务做一个桌面看板。我关心的不是把作业记下来就结束而是让“哪门课、什么时候交、还差什么、风险在哪”同时可见。一、先确认作业管理的压力点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作业标识状态层course课程名称列表/编辑区teacher任课老师或助教编辑区dueDate截止时间列表/侧栏deliverables需要提交的材料编辑区progress当前完成度编辑区/侧栏risk可能卡住的地方侧栏/导出4.2 TypeScript 类型exportinterfaceAppItem{id:string;course:string;teacher:string;dueDate:number|string;deliverables:string;progress:string;risk:number|string;}exporttypeAppFilterall|active|archived;这段类型的重点是把“提交要求”和“风险”分开。前者回答要交什么后者回答为什么可能交不上。五、默认作业要像真实学期5.1 为什么要写种子数据默认作业要像一个真实学期里的任务。否则风险侧栏、截止时间和提交物字段都测不出效果。我给种子作业定了三个条件课程和老师要具体截止时间要形成压力风险要能提醒下一步5.2 示例数据exportconstseedAppItems:AppItem[][{id:keye_ban-001,course:软件工程实践,teacher:周老师,dueDate:2026-05-30 18:00,deliverables:需求说明书、演示录屏、源码压缩包,progress:需求说明完成 70%演示录屏未开始,risk:小组接口还没有最终确认可能影响录屏。,},];这类数据能帮助检查日期展示、长提交物换行和风险提示样式。六、状态层处理进度和风险6.1 composable 的职责useNotes.ts这层我更愿意把它理解成“当前工具的数据服务”。页面不应该直接处理太多 localStorage、排序和导出拼接。constSTORAGE_KEYkeye-ban;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 我会明确写成keye-ban。这样做可以避免不同工具之间互相读到旧数据。本地数据一旦串了页面看起来像小问题实际会让调试和截图都变得很难判断。七、筛选排序突出临近截止项7.1 computed 更适合承接派生视图筛选、搜索、排序这些逻辑如果直接写在模板里很快会让页面变得难读。我更倾向于让状态层先准备好可展示列表。constkeywordref();constfilterrefall|course(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 classkeye_ban-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.course / textarea v-modelitem.deliverables / /form /template9.2 表单不是越多越好我会优先放能影响用户判断的字段。辅助字段可以放到右侧信息区或者只在导出时使用。十、工具栏围绕复制和导出10.1 工具栏放哪些按钮工具栏最容易变成按钮仓库。课业板里我只保留和主流程强相关的动作。新增作业拆解清单更新进度记录风险复制提交摘要导出作业计划10.2 复制摘要functionbuildAppSummary(item:AppItem){return[# 课业板摘要,- course: item.course,- teacher: item.teacher,- dueDate: item.dueDate,- deliverables: item.deliverables,].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[# 课业板,, 由 课业板 导出。,## course,String(item.course??),## teacher,String(item.teacher??),## dueDate,String(item.dueDate??),## deliverables,String(item.deliverables??),## progress,String(item.progress??),## risk,String(item.risk??),].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 视觉气质服务使用场景课业板的视觉方向是清晰、学习桌面、任务台感。这个判断会影响间距、字号、卡片密度和按钮重量。.keye_ban-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-16/ohos_hap/web_engine/src/main/resources/resfile/resources/app/vue-appnpminstallnpmrun build15.2 再确认关键文件没有串主题rgkeye-ban|/coursework|课业板src package.json rgTODO|旧标题|测试数据src构建通过不代表体验完美但至少说明当前页面和依赖关系是站得住的。十六、这版作业工具的经验16.1 先换问题再换界面课业板最重要的不是页面长什么样而是它先回答了一个明确问题课程作业的麻烦不只是任务多而是课程、老师、截止时间、提交物、进度和风险同时压过来。问题清楚以后字段、布局和按钮才知道往哪里收。16.2 哪些东西可以复用清晰的页面、状态层、桥接层分工状态层和本地存储节奏复制、导出、通知这组桌面动作开发环境与生产环境分开的加载逻辑16.3 哪些东西不要硬套旧的数据字段旧的默认文案旧的视觉重心旧的排序规则十七、后续可以补的学习能力课业板目前已经能把课程任务从零散待办整理成可追踪清单。真要继续加功能我会优先从这些方向补增加按截止时间自动排序对高风险任务做醒目标记支持提交物清单逐项勾选增加课程维度的本周任务视图导出给小组成员看的任务摘要课业板后续要继续围绕“别漏、别拖、别交错材料”来补。十八、发布前做一次作业检查发布前我会按下面这张表再扫一遍尤其确认主题一致性和可发布性。检查项结果说明标题和主题一致通过课业板实战课程、截止时间、提交物和风险都放到桌面上图片存在通过保留项目结构图或运行效果图代码块数量通过覆盖类型、状态、组件、桥接、导出、构建资源链接通过保留社区和官方文档入口总结课业板这一版把“快到期”“还差什么”“风险在哪里”放到了台面上。多门课程一起压过来时结构化任务台比单纯记忆可靠得多。课业板的重点是把压力拆开。课程、截止时间、提交物和风险分开以后用户才知道今天应该先补材料、先找队友还是先完成最终提交。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源鸿蒙PC开发者社区https://harmonypc.csdn.net/OpenHarmony 官网https://www.openharmony.cn/
