前言工业现场 App 的列表项很容易写成一团设备编号、异常标题、处理说明、优先级、状态、时间全部堆在一个卡片里。刚开始看似信息完整实际使用时却会变得难扫读。注塑工程师助手首页的WorkItem很小但它正好展示了一个基础原则一条现场待办只突出三个层级。第一层是标题让工程师立刻知道是哪台设备或哪项事务。第二层是说明补充当前为什么需要处理。第三层是状态标签告诉用户这件事的优先级或处理阶段。这三个层级组织清楚之后首页就能快速扫描而不是变成一张拥挤的任务表。本篇会先说明WorkItem在首页中的位置再拆解它的横向布局、文字层级、溢出保护和语义标签让读者能把同样的方法迁移到机台、异常或报工列表。一、项目结构与文件概览本篇主要读取entry/src/main/ets/features/home/HomeDashboard.ets。这个文件同时包含首页主体、指标卡组件和现场待办行组件适合作为 ArkUI 小组件封装的入门样例。WorkItem不是独立页面而是首页中的重复行组件。它被用于表达“短射复核”“首件确认”“夜班交接”等现场待办事项。阅读时可以先看组件参数再看它在首页中如何被调用最后回到布局代码检查每个参数如何影响 UI。二、WorkItem 的完整结构HomeDashboard.ets中的WorkItem组件如下Componentstruct WorkItem{title:string;detail:string;badge:string;badgeColor:stringThemeTokens.accent;badgeBackground:stringThemeTokens.accentSoft;build(){Row({space:12}){Column({space:5}){Text(this.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(ThemeTokens.textPrimary).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Text(this.detail).fontSize(12).fontColor(ThemeTokens.textSecondary).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})}.layoutWeight(1).alignItems(HorizontalAlign.Start)Text(this.badge).fontSize(11).fontWeight(FontWeight.Medium).fontColor(this.badgeColor).padding({left:8,right:8,top:5,bottom:5}).backgroundColor(this.badgeBackground).borderRadius(6)}.width(100%).padding({top:13,bottom:13}).border({width:{bottom:1},color:ThemeTokens.border})}}它没有复杂的业务判断重点都在布局关系上外层Row横向排列左侧Column放文字右侧Text做状态标签。三、为什么外层用 Row一条待办需要同时放文字和标签。文字区域通常较长标签通常较短。如果全部放在Column里状态标签会被挤到下一行扫读效率变低。Row({ space: 12 })让文字组和标签横向排列中间保留 12vp 间距。这样用户从左到右读时能先看到任务内容再看到状态判断。在工业界面里这种横向信息结构很常见。例如“机台名称 状态”“批次编号 交接状态”“异常标题 优先级”都可以用类似方式组织。四、左侧文字为什么要包一层 Column左侧不是一个文字而是标题和说明两行Column({space:5}){Text(this.title)Text(this.detail)}.layoutWeight(1).alignItems(HorizontalAlign.Start)Column({ space: 5 })负责建立标题与说明之间的纵向距离。这个距离不宜过大因为两行内容属于同一条待办也不宜为 0否则标题和说明会贴在一起。.alignItems(HorizontalAlign.Start)保证两行文字左对齐。对于中文工业信息来说左对齐比居中更适合扫读尤其是编号、设备名、批次号混合出现时。五、layoutWeight 保护右侧标签左侧文字列使用.layoutWeight(1)这表示左侧区域占据剩余空间。右侧标签则根据自己的内容宽度显示。为什么不能让文字无限撑开因为标题可能包含设备编号、模具编号或异常描述。如果左侧文字不受约束右侧标签会被挤出屏幕用户反而看不到最重要的状态。layoutWeight(1)配合标题和说明的省略规则可以让文字尽量显示同时为标签留出稳定位置。六、标题和说明的层级差异标题使用 14 号字体、中等字重和主文本颜色Text(this.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(ThemeTokens.textPrimary)说明使用 12 号字体和次级文本颜色Text(this.detail).fontSize(12).fontColor(ThemeTokens.textSecondary)这不是随意缩小字体而是在告诉用户标题是判断对象说明是补充原因。现场用户扫一眼标题就能知道事情归属需要进一步判断时再读说明。好的工业界面不一定需要很多颜色文字层级本身就能承担一部分信息组织。七、为什么要限制行数两段文字都设置了溢出策略.maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})说明文字则允许两行.maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})标题只给一行是为了让列表项高度稳定。说明给两行是因为现场问题通常需要一句原因比如“调整料温与背压后等待连续试模观察”。如果不限制行数一条特别长的异常说明可能占满半屏其他待办被整体推下去。首页不是详情页它的目标是快速提示而不是承载完整处置记录。八、状态标签如何表达语义右侧状态标签是一个TextText(this.badge).fontSize(11).fontWeight(FontWeight.Medium).fontColor(this.badgeColor).padding({left:8,right:8,top:5,bottom:5}).backgroundColor(this.badgeBackground).borderRadius(6)它有前景色和背景色两个参数。比如“高优”可以使用危险色“复核”可以使用警告色“待报工”可以使用默认强调色。这里不要把颜色写死在组件内部。因为 WorkItem 是通用组件不同待办的状态语义不同。把badgeColor和badgeBackground作为参数传入组件就可以复用。九、真实首页中的三条待办首页当前传入三条脱敏演示待办WorkItem({title:IM-120T-11 · 短射复核,detail:调整料温与背压后等待连续试模观察。,badge:高优,badgeColor:ThemeTokens.danger,badgeBackground:ThemeTokens.dangerSoft})这条记录同时包含机台编号、异常类型和处理状态。标题里的IM-120T-11让用户知道对象短射复核说明问题类型右侧高优提醒优先级。再看另一条WorkItem({title:夜班交接 · 批次 N02,detail:完工数量与不良结构尚未补录。,badge:待报工})它不是异常而是交接和报工事项。因为 WorkItem 只关心标题、说明和标签所以同一个组件可以表达不同业务。十、放回首页看 WorkItem 的价值写组件教程时最好把组件放回完整页面里讲因为读者不仅要知道代码怎么写还要知道它为什么出现在这里。WorkItem在首页里不是普通列表项而是现场待办的摘要入口。它承担的任务是把“发生了什么、为什么要处理、优先级如何”压缩到一行里让工程师打开应用后先扫到最重要的事情。这类组件最怕信息过载。如果把异常编号、机台位置、责任人、处理时间、所有备注都塞进首页待办首页就会变成详情页。WorkItem的做法是保留标题、说明和标签三类信息标题定位对象说明交代原因标签表达状态。其他详细内容应该进入详情页而不是挤在首页。这种设计也适合后续扩展。调机复核、批次交接、异常关闭、模板确认都可以使用同一行结构只要传入不同的标题、说明和标签颜色即可。组件复用不是为了少写几行代码而是为了让同类信息在页面上保持同一种阅读方式。十一、代码改动会影响哪些体验如果调整Row({ space: 12 })的间距受影响的是文字区和标签区之间的呼吸感。间距太小标签会贴近说明文字间距太大左侧文字区域会变窄长标题更容易出现省略号。工业现场页面通常要优先保证信息可扫读所以间距要服务于层级而不是单纯追求紧凑。如果去掉左侧Column的layoutWeight(1)右侧标签可能被长文本挤出屏幕。这个问题在短样例里不明显一旦真实异常标题变长就会暴露出来。复核时应该主动检查长标题和长说明不要只看默认三条演示数据。如果去掉maxLines和textOverflow列表高度会被不可控文本撑开。首页待办的职责是提醒不是展示完整处置记录。完整内容可以放到异常详情或调机详情首页只保留足够判断优先级的信息。十二、常见错误与排查方式第一个常见错误是颜色只追求醒目没有语义。高优使用危险色复核使用警告色默认待处理使用强调色这些颜色应该和业务状态对应。如果只是随机换色用户就需要重新学习每个标签的含义。第二个常见错误是标题没有对象。比如只写“短射复核”读者无法知道是哪台机台写成IM-120T-11 · 短射复核后对象和问题类型同时出现现场人员更容易定位。第三个常见错误是说明文字变成空泛提醒。请及时处理没有提供判断依据调整料温与背压后等待连续试模观察才能说明为什么这条待办还没有关闭。复核时要检查说明文字是否真的提供了业务信息。十三、如何判断这篇文章够不够完整内容复核可以看三点。第一文章是否解释了WorkItem的使用场景而不是只贴组件代码。第二是否说明了Row、Column、layoutWeight、maxLines对阅读体验的影响。第三是否给出了长文本、标签语义和颜色语义的边界。运行观察建议使用首页待办区域截图并补一张长文本保护截图。前者用于证明组件在真实页面中的层级后者用于证明省略号和固定行高确实保护了布局。图片说明要告诉读者观察什么比如“右侧标签没有被长标题挤出屏幕”。十四、从信息架构角度重新看一行待办一条待办看似只有两行文字和一个标签实际上包含了非常明确的信息架构。标题回答“对象是谁、问题是什么”说明回答“为什么现在要处理”标签回答“应该以什么优先级看待它”。这三个问题的顺序不能乱因为用户打开首页时通常先扫对象再判断原因最后决定是否立即进入详情。如果标题只写问题类型比如“短射复核”用户还要继续读说明才能知道是哪台设备如果标题只写设备编号比如IM-120T-11用户又不知道这台设备发生了什么。把对象和问题组合到标题里能减少一次认知跳转。说明文字则不需要重复标题而要补充原因或当前状态例如“调整料温与背压后等待连续试模观察”。右侧标签不应该承担太多信息。它适合放“高优”“复核”“待报工”这种短词而不适合放完整结论。完整结论放在标签里会导致标签变宽破坏左侧文字区更重要的是标签失去了快速识别的作用。列表项的设计核心就是让每个区域只做一件事。十五、为什么工业首页要克制工业现场用户打开首页往往不是来欣赏界面而是要迅速确认今天有什么风险、哪台机台需要处理、哪个批次还没闭环。首页待办过度复杂会让用户在移动端屏幕上频繁停顿。WorkItem的克制设计正是为了减少停顿固定高度、固定层级、固定标签位置。克制并不等于信息少。真正需要的信息仍然存在只是被放到了正确层级。首页保留摘要详情页承载完整记录首页用标签提示优先级详情页再展示处理人、时间线、工艺参数和备注。这样用户可以先决定“要不要点进去”而不是被迫在首页读完所有内容。这也是组件化的价值之一。组件不是为了把页面拆碎而是把同一类信息沉淀成稳定样式。以后异常列表、调机模板列表、交接记录列表都可以借用这种“标题 说明 标签”的结构只是字段来源不同。十六、怎样处理真实业务里的长标题真实业务中的标题经常比演示数据长。例如机台编号、模具编号、产品名称和异常类型如果全部拼在一起很容易超过一行。此时不能简单放开高度因为首页列表会被撑乱也不能粗暴截掉关键信息因为用户会看不懂对象。比较稳的做法是提前确定标题拼接规则。第一优先保留业务对象例如机台或批次第二优先保留问题类型例如短射、飞边、首件确认其他补充信息放到说明或详情页。这样即使标题被省略前半部分也尽量包含最高价值的信息。maxLines(1)和TextOverflow.Ellipsis解决的是布局保护问题不解决信息选择问题。信息选择仍然要靠产品规则。文章把这一点讲清楚读者就不会以为加省略号等于完成了列表设计。十七、从样式参数看可维护性WorkItem使用ThemeTokens.textPrimary、ThemeTokens.textSecondary、ThemeTokens.border这类主题变量而不是直接写颜色值。这样做的好处是主题调整时组件不用逐个改。对工业 App 来说颜色不仅影响美观还影响状态识别和长时间使用的阅读舒适度。标签颜色通过参数传入也体现了组件边界。WorkItem不判断某条待办是否高优它只接收外部给定的badgeColor和badgeBackground。业务层决定状态语义组件层负责稳定展示。这个分工可以避免组件越来越“懂业务”最终变得无法复用。如果后续要加入暗色模式、班组主题或告警等级色板这种写法更容易迁移。统一改主题变量和状态颜色映射即可不需要在每个列表项里查找硬编码颜色。进一步拆解WorkItem 的信息压缩方式WorkItem看起来只是一个待办列表项但它实际上承担了工业首页的信息压缩任务。标题告诉用户对象和问题例如机台编号加异常类型说明补充下一步动作状态标签提醒优先级或处理阶段。三类信息如果写在同一行扫读会变慢如果拆得太散又会占用首页空间。本项目用左侧文字列承载标题和说明右侧标签承载状态这是比较稳的移动端结构。左侧.layoutWeight(1)让文字区域吃掉剩余空间右侧标签保持紧凑标题使用一行省略说明使用两行省略既避免超长文本撑破布局也保留足够上下文。这个设计比简单地把所有字段堆进Column更适合现场查看。后续如果待办数据改成真实接口返回建议仍然保留这个三段结构。接口可以增加更多字段但首页不要把所有字段都展示出来。首页只回答“哪个对象、什么问题、现在该怎么处理”详细参数应放到详情页。这样页面复杂度不会随着业务字段增长而失控。十九、小结WorkItem的重点不是代码多复杂而是它把现场待办拆成了稳定的三层信息标题、说明、状态。外层Row保证标签在右侧左侧Column组织文字层级layoutWeight和省略号保护布局不被长文本撑坏。这类组件很适合工业 App 的首页、列表摘要和提醒中心。写组件时先想清楚“用户扫读时先看什么、再看什么”比一开始堆很多字段更重要。
