网站模板如何编辑软件python培训课程

网站模板如何编辑软件,python培训课程,鲜花网站模板下载,10个零网站建设欢迎大家加入开源鸿蒙跨平台开发者社区#xff0c;一起共建开源鸿蒙跨平台生态。 本文对应模块#xff1a;pages.js 中“交易列表”页面的 HTML 模板与筛选控件#xff0c;重点是如何在 PC 布局下清晰展示大量交易#xff0c;并提供按时间、类型等维度的过滤能力。 1. 模块…欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。本文对应模块pages.js中“交易列表”页面的 HTML 模板与筛选控件重点是如何在 PC 布局下清晰展示大量交易并提供按时间、类型等维度的过滤能力。1. 模块目的给用户一份“可翻、可筛”的流水账记收入、记支出、转账都是“写入数据”的动作。而交易列表页面则是“翻账本”的地方用户希望快速浏览最近一段时间的所有收支记录需要按月份、类型、账户等条件进行筛选必要时还能查看某一笔交易的详情或进行编辑、删除。在这个模块中我们关注的是交易列表的 UI 结构和过滤输入控件的设计不深入业务逻辑那会在后续模块中展开。2. 页面整体结构列表页的标准骨架在pages.js中“交易列表”页面的模板大致如下节选与合理还原// 交易列表页面 transactions:()div classpc-page-container div classpc-page-header h2 交易记录/h2 p查看和管理你的历史收支流水/p /div div classpc-filter-bar div classpc-filter-group label classpc-label月份/label input typemonth idfilter-month classpc-input /div div classpc-filter-group label classpc-label类型/label select idfilter-type classpc-input option valueall全部/option option valueincome收入/option option valueexpense支出/option /select /div !-- 可以继续扩展账户、分类等过滤条件 -- button idfilter-apply classpc-button pc-button-primary应用筛选/button /div div classpc-card div classpc-card-headerh3交易列表/h3/div div classpc-card-body table classpc-table idtransactions-table thead tr th日期/th th类型/th th账户/th th分类/th th金额/th th备注/th /tr /thead tbody !-- JS 动态渲染交易行 -- /tbody /table /div /div /div,2.1 上方过滤栏 下方表格的经典布局pc-filter-bar放置所有筛选控件月份、类型、账户、分类等与下面的表格通过视觉分隔使用户一眼看出“先选条件再看列表”。pc-cardpc-card-headerpc-card-body用卡片组件包裹完整的表格让内容区域更聚焦pc-table标准表格组件用于按行列展示每一笔交易表头固定列日期、类型、账户、分类、金额、备注。这种设计在财务类应用中非常常见既符合用户预期也便于后续按列排序、增加更多字段。3. 筛选控件的 UI 设计3.1 月份筛选input type“month”divclasspc-filter-grouplabelclasspc-label月份/labelinputtypemonthidfilter-monthclasspc-input/div直接使用原生input typemonth控件提供友好的年月选择器值通常为YYYY-MM格式便于和数据库中按月统计的逻辑对接idfilter-month是后续 JS 逻辑读取条件的锚点例如在加载列表时constmonthInputdocument.getElementById(filter-month);if(monthInput){constmonthValuemonthInput.value;// 例如 2025-03// 根据 monthValue 计算起止日期再从数据库筛选}3.2 类型筛选收入 / 支出 / 全部divclasspc-filter-grouplabelclasspc-label类型/labelselectidfilter-typeclasspc-inputoptionvalueall全部/optionoptionvalueincome收入/optionoptionvalueexpense支出/option/select/div三个选项覆盖最常见的需求只看收入、只看支出、看全部内部可以与transactions表中的type字段一一对应当用户点击“应用筛选”按钮时JS 会读取这个值并在内存中的交易数组上做一次过滤或在数据库查询时带上条件。3.3 “应用筛选”按钮buttonidfilter-applyclasspc-button pc-button-primary应用筛选/button避免在每次选择筛选条件时立刻刷新列表给用户一个“调整好再一次性应用”的缓冲JS 端会在PageManager的事件绑定中为这个按钮注册点击事件触发列表刷新逻辑。4. 表格结构交易数据的承载容器表格部分的结构比较标准tableclasspc-tableidtransactions-tabletheadtrth日期/thth类型/thth账户/thth分类/thth金额/thth备注/th/tr/theadtbody!-- JS 动态渲染交易行 --/tbody/table未来在loadTransactionsPage或类似方法中会大致做这样的事情asyncloadTransactionsPage(){constmonthInputdocument.getElementById(filter-month);consttypeSelectdocument.getElementById(filter-type);constallTransactionsawaitwindow.financeDB.getAllTransactions();letfilteredallTransactions;// 按月份过滤示意if(monthInputmonthInput.value){const[year,month]monthInput.value.split(-).map(vparseInt(v));constmonthStartnewDate(year,month-1,1);constmonthEndnewDate(year,month,1);filteredfiltered.filter(t{constdnewDate(t.date);returndmonthStartdmonthEnd;});}// 按类型过滤if(typeSelecttypeSelect.value!all){filteredfiltered.filter(tt.typetypeSelect.value);}// 把 filtered 渲染到表格 tbody 中}上面代码是结合实际结构的合理推断重点在于展示“过滤条件 → 内存数组过滤 → 渲染表格”的思路。从 UI 的角度这里有两点值得注意通过固定列顺序日期、类型、账户、分类、金额、备注让用户形成稳定的阅读习惯配合 CSS 的pc-table样式可以实现斑马纹行、高亮悬停、紧凑布局等视觉效果提升可读性。5. 与 ArkTS 的关系完全由 Web 负责的展示层交易列表页面的展示与过滤逻辑完全运行在 Web 层和 IndexedDB 层ArkTS 只负责提供 WebView 容器和底层插件交易数据从 IndexedDB 的transactions表里读取所有过滤和渲染都在 JS 中完成。只有在以下场景ArkTS 才会间接影响列表页面数据导入ArkTS 插件从文件中读出历史交易 JSON 并交给 JSJS 调用financeDB.importData()将记录写入transactions表交易列表页面刷新后即可看到新增的历史记录。数据导出列表只是用来预览要导出的内容导出动作本身由 FileManager 插件完成。因此这个模块在架构中的位置可以理解为它是“纯展示 轻逻辑”的前端模块不直接操作 ArkTS只依赖 IndexedDB 提供的数据快照。6. 小结交易列表页面与过滤 UI 的设计要点最后总结本模块在 UI 设计和数据流上的几个关键点过滤栏与列表的清晰分区顶部pc-filter-bar专门负责条件选择下方pc-card 表格负责展示结果用户心智模型清晰。使用原生控件简化交互input typemonth和select组件易于使用和实现与后端数据结构YYYY-MM字符串、type字段天然对齐。表格列设计贴合财务语义日期、类型、账户、分类、金额、备注是最常用的几个维度这为后续扩展排序、导出选中行等功能打下基础。过滤逻辑与 UI 解耦UI 层只负责提供idfilter-month、idfilter-type等输入点具体过滤逻辑集中在loadTransactionsPage或类似方法中便于统一修改。与 ArkTS 松耦合列表展示完全在 Web 层完成ArkTS 只在数据导入/导出场景出现这让前端可以自由优化 UI而不必频繁涉及原生代码修改。掌握了这个模块后你就可以很自然地为系统增加更多过滤条件例如账户、分类、多选时间范围并在同一套 UI 框架下快速迭代交易列表的展示能力。ArkTS 侧在交易列表中的角色交易列表页面本身完全由 Web 层驱动但它展示的数据会参与到 ArkTS 导入导出的“整体快照”中。容器和插件的注册同样发生在Index.ets中示例如下import{MainPage,PluginEntry,}frommagongshou/harmony-cordova/Index;import{FileManagerPlugin}from../plugins/FileManagerPlugin;EntryComponentstruct Index{cordovaPlugs:ArrayPluginEntry[{pluginName:FileManager,pluginObject:newFileManagerPlugin()}];build(){// MainPage 会加载 index.html进而加载 db.js 和 pages.js// 交易列表 UI、过滤逻辑和渲染都在 pages.js 中完成MainPage({cordovaPlugs:this.cordovaPlugs});}}配合 FileManager 插件的导出/导入能力交易列表中的每一行数据对应transactions表中的一条记录都会在导出时随其他表一起被打包进 JSON由 ArkTS 写入备份文件在导入时从备份中恢复回来再次通过loadTransactionsPage渲染到列表中。因此ArkTS 虽然不直接参与交易列表的 UI 渲染却通过“托管容器 数据搬运”保证了列表数据的长期可用性和可迁移性。