企业官网建设流程全解析

维度

内容

本章主题

HarmonyOS 6.1 新特性如何落到留痕

核心页面

Index.ets、FeatureWatermarkPage.ets、FeatureRecordPage.ets、FeatureVoicePage.ets

本章重点

沉浸光感组件、扫码直达、隐私防窥

阅读目标

看懂新特性怎样改变首页入口、模板唤起和记录回看

先给结论HarmonyOS 6.1 的价值不在于多了几个新名词，而在于把视觉层、入口层和隐私层一起抬高。留痕只要把这三层接住，首页就更像工作台，记录页就更像可信证据链。

新特性

留痕落点

具体收益

沉浸光感组件

首页功能卡、水印预览、记录卡片

让当前状态更突出，减少平铺式白块的生硬感

扫码直达

项目入口、模板入口、记录入口

把“找页面”变成“扫一下就到”

隐私防窥

记录详情、地址、时间、录音备注

在公共场景下减少敏感内容暴露

private switchTab(tab: string): void {
this.currentTab = tab;
this.pressedBottomTab = '';
AppStorage.setOrCreate<string>(AppStorageKeys.MAIN_TAB, tab);
}

private buildQuickEntry(title: string, subtitle: string, active: boolean): void {
Column({ space: 4 }) {
Text(title)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor(active ? '#0F766E' : '#334155');
Text(subtitle)
.fontSize(11)
.fontColor('#64748B');
}
.padding(16)
.borderRadius(16)
.backgroundColor(active ? '#ECFEFF' : '#FFFFFF');
}

落点

视觉处理

用户感知

首页功能入口

激活态高亮、阴影层次、卡片呼吸感

更像工作台，不像拼贴卡片

水印预览

背景层与前景层分离，避免一片平

更容易看出当前模板和可编辑项

记录卡片

封面图、标题、时间、地址分层展示

扫一眼就知道哪条记录更重要

别把沉浸光感做成纯装饰它最有价值的地方不是颜色更花，而是状态更清楚。留痕这种现场留证应用，界面层次越清楚，用户越不容易把重点看错。

private handleScanEntry(rawCode: string): void {
const entry = this.service.resolveScanEntry(rawCode.trim());
if (!entry) {
return;
}

this.currentTab = entry.targetTab;
AppStorage.setOrCreate<string>(AppStorageKeys.MAIN_TAB, entry.targetTab);
this.refreshAllData(true);
}

private resolveScanEntry(code: string): ScanEntry | null {
const record = this.service.findScanEntry(code);
if (!record) {
return null;
}
return {
targetTab: record.targetTab,
label: record.label
};
}

扫码入口

映射目标

用户收益

项目码

项目选择页或项目卡片

现场直接切换项目，不用翻列表

模板码

水印页

快速唤起常用模板

记录码

记录页

回看记录更快

private formatSensitiveField(raw: string, enabled: boolean): string {
if (!enabled || raw.length <= 4) {
return raw;
}
return `${raw.slice(0, 2)}***${raw.slice(-2)}`;
}

private formatLocation(raw: string, enabled: boolean): string {
if (!enabled) {
return raw;
}
return raw.replace(/(.{4}).+(.{2})/, '$1***$2');
}

字段

默认显示

防窥显示

位置

深圳市·南山区·科创路1号

深圳市·南山***

时间

2025-05-28 10:30:45

2025-05-28 10:30:4*

录音备注

现场安全巡检，设备编号 3 号

现场安全***，设备编号 3 号

防窥不是删数据真正的记录仍然要保存在服务层和本地仓库里，防窥只是展示策略。这样既能保护敏感内容，也不会破坏后续统计、回看和导出。

检查项

是否改动数据源

原则

WorkClockService

否

继续做唯一真源

AppStorage

轻量扩展

只放 Tab、模板快照和刷新信号

记录展示层

是

加入防窥和沉浸层样式

扫码入口

是

只影响路由和页面跳转

新特性

落点页面

收益

沉浸光感组件

首页工作台与功能入口

让当前状态和入口层级更清楚

扫码直达

首页快捷入口与记录入口

把常用操作路径缩短到一次触达

隐私防窥

记录页与水印页

让时间、地点和备注更克制地展示

private switchTab(tab: string): void {
this.currentTab = tab;
this.pressedBottomTab = '';
AppStorage.setOrCreate<string>(AppStorageKeys.MAIN_TAB, tab);
}

private buildQuickEntry(title: string, subtitle: string, active: boolean): void {
Column({ space: 4 }) {
Text(title)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor(active ? '#0F766E' : '#334155');
Text(subtitle)
.fontSize(11)
.fontColor('#64748B');
}
.padding(16)
.borderRadius(16)
.backgroundColor(active ? '#ECFEFF' : '#FFFFFF');
}

private formatSensitiveField(raw: string, enabled: boolean): string {
if (!enabled || raw.length <= 4) {
return raw;
}
return `${raw.slice(0, 2)}***${raw.slice(-2)}`;
}

本章收束这一章的重点不是把 HarmonyOS 6.1 的能力全讲完，而是把最适合留痕的能力接到对的位置：沉浸光感接首页，扫码直达接入口，隐私防窥接记录展示。这样文章和产品都不会散。