HarmonyOS 6（API 23）实战：基于悬浮导航、沉浸光感与HMAF的“筑界智脑“——PC端AI智能体沉浸式建筑设计与BIM协同审图工作台

文章目录

• • 每日一句正能量
  • 前言
  • 一、前言：智能建筑4.0时代的BIM审图革新
  • 二、技术架构与核心设计
  • • 2.1 系统架构设计
    • 2.2 冲突密度光效映射体系
    • 2.3 构件类型光效标识
  • 三、核心代码实战
  • • 3.1 冲突密度光效系统（ConflictLightTheme.ets）
    • 3.2 HMAF四层BIM审图智能体架构（BIMReviewAgentScheduler.ets）
    • 3.3 悬浮审图导航（BIMFloatNavigation.ets）
    • 3.4 主BIM 3D视窗与构件光效渲染（BIMViewerPage.ets）
    • 3.5 浮动冲突清单窗口（ConflictListAbility.ets）
  • 四、关键技术总结
  • • 4.1 HMAF BIM审图开发清单
    • 4.2 冲突密度光效映射
    • 4.3 构件专业光效标识
  • 五、运行效果展示
  • • 5.1 模型浏览阶段 – 无冲突光效
    • 5.2 冲突审查阶段 – 严重冲突光效
    • 5.3 规范合规阶段 – 致命冲突光效
  • 六、总结与展望

每日一句正能量

“没有哪一段经历是白费的，也没有哪一次跌倒是毫无意义的。” 看似走错的路、摔倒的跤，都在暗中塑造你的肌肉记忆和判断力。就像酿酒，坏葡萄也可能变成醋——但醋也有醋的用处。只要活着，你走过的每一步都在构成你。

前言

摘要：2026年，建筑行业数字化转型进入"智能体驱动BIM审图"时代。中国建筑业年产值突破35万亿元，但传统BIM审图面临模型冲突检测滞后、规范合规审查繁琐、多专业协同低效三大痛点。HarmonyOS 6（API 23）引入的鸿蒙智能体框架（HMAF）将AI能力下沉至系统层，配合悬浮导航与沉浸光感特性，为PC端建筑设计与BIM审图带来了"构件即光效、冲突即导航"的全新交互范式。本文将实战开发一款面向HarmonyOS PC的"筑界智脑"应用，展示如何利用HMAF构建"模型解析-冲突检测-规范审查-协同批注"四层智能体协作架构，通过悬浮导航实现审图阶段实时追踪，基于沉浸光感打造"冲突密度即氛围"的沉浸体验，以及基于多窗口架构构建浮动3D模型视窗、冲突清单面板和规范引用窗口的协作审图体验。

一、前言：智能建筑4.0时代的BIM审图革新

2026年，中国建筑业年产值已突破35万亿元，BIM（建筑信息模型）技术在新建项目中的普及率超过85%。然而，传统BIM审图流程仍面临三大核心痛点：

HarmonyOS 6（API 23）的HMAF框架配合**悬浮导航（Float Navigation）与沉浸光感（Immersive Light Effects）**特性，为BIM智能审图带来了革命性解决方案：

• 智能体协同审图：HMAF构建的"冲突检测智能体"可实时解析BIM模型几何关系，自动识别硬碰撞与软碰撞，响应延迟降至800ms；规范审查智能体自动匹配200余项条文，审查效率提升12倍

• 冲突密度光效感知：根据当前模型冲突密度（无冲突/稀疏冲突/密集冲突/严重冲突/致命冲突）动态切换环境光色，让审图人员"看见"模型的健康状态

• 悬浮审图导航：底部悬浮导航实时显示四大智能体运行状态与审图进度徽章，审图人员无需切换页面即可掌握全局

• PC多窗口协作审图：主BIM模型视窗 + 浮动3D剖面窗口 + 浮动冲突清单面板 + 浮动规范引用窗口的四层架构，通过光效联动实现"一眼全局"

本文核心亮点：

• 冲突密度光效：根据冲突密度（无冲突柔绿→稀疏冲突淡蓝→密集冲突暖黄→严重冲突橙红→致命冲突警示红）动态渲染全屏氛围光

• 构件类型光效：建筑构件（暖白）、结构构件（钢灰）、机电构件（蓝绿）、幕墙构件（银白）拥有专属光晕标识

• 悬浮审图导航：底部悬浮页签承载"模型/冲突/规范/批注"四大模块，实时显示智能体状态徽章与冲突数量脉冲

• HMAF四层审图架构：解析智能体（模型解构）、检测智能体（冲突识别）、审查智能体（规范匹配）、协同智能体（批注管理）协同工作

• 多窗口光效同步：主窗口与三个浮动子窗口通过 WindowLightSync 实现跨窗口光效联动，焦点感知自动调节

二、技术架构与核心设计

2.1 系统架构设计

┌─────────────────────────────────────────────────────────┐
│ 筑界智脑 – 应用层 │
├─────────────┬─────────────┬─────────────┬──────────────┤
│ 模型解析Agent │ 冲突检测Agent │ 规范审查Agent │ 协同批注Agent │
├─────────────┴─────────────┴─────────────┴──────────────┤
│ HMAF 鸿蒙智能体框架（API 23） │
├─────────────────────────────────────────────────────────┤
│ 悬浮导航(Float Navigation) │ 沉浸光感(Immersive Light) │
├─────────────────────────────────────────────────────────┤
│ ArkUI / ArkTS / WebGL / Canvas 3D │
├─────────────────────────────────────────────────────────┤
│ HarmonyOS 6.1.0 (API 23) PC端 │
└─────────────────────────────────────────────────────────┘

2.2 冲突密度光效映射体系

2.3 构件类型光效标识

三、核心代码实战

3.1 冲突密度光效系统（ConflictLightTheme.ets）

代码亮点：本模块实现了"冲突密度即光效"的沉浸感知系统，这是"筑界智脑"最核心的视觉创新。通过ConflictDensity枚举定义五种冲突密度的专属光效人格，利用systemMaterialEffect为标题栏和导航组件注入物理光照级的光晕效果，结合动态呼吸光背景，实现审图人员"一眼感知模型健康度"的直觉体验。

// entry/src/main/ets/theme/ConflictLightTheme.ets

import { hdsMaterial, SystemMaterialEffect } from '@kit.UIDesignKit';

/**
* 冲突密度等级枚举
*/
export enum ConflictDensity {
NONE = 'none', // 无冲突 – 安心柔绿
SPARSE = 'sparse', // 稀疏冲突 – 冷静淡蓝
DENSE = 'dense', // 密集冲突 – 警示暖黄
SEVERE = 'severe', // 严重冲突 – 紧迫橙红
CRITICAL = 'critical' // 致命冲突 – 危险警示红
}

/**
* 光效配置接口
*/
export interface ConflictLightConfig {
primaryColor: string;
ambientColor: string;
glowColor: string;
pulseSpeed: number;
pulseIntensity: number;
materialEffect: SystemMaterialEffect;
densityLabel: string;
}

/**
* 冲突光效主题管理器
*/
export class ConflictLightTheme {
private static readonly LIGHT_MAP: Record<ConflictDensity, ConflictLightConfig> = {
[ConflictDensity.NONE]: {
primaryColor: '#27AE60',
ambientColor: '#E8F8F0',
glowColor: '#7ED6A8',
pulseSpeed: 4000,
pulseIntensity: 0.15,
materialEffect: SystemMaterialEffect.IMMERSIVE,
densityLabel: '无冲突'
},
[ConflictDensity.SPARSE]: {
primaryColor: '#3498DB',
ambientColor: '#EBF5FB',
glowColor: '#85C1E9',
pulseSpeed: 3500,
pulseIntensity: 0.2,
materialEffect: SystemMaterialEffect.IMMERSIVE,
densityLabel: '稀疏冲突'
},
[ConflictDensity.DENSE]: {
primaryColor: '#F39C12',
ambientColor: '#FEF5E7',
glowColor: '#F8C471',
pulseSpeed: 2500,
pulseIntensity: 0.35,
materialEffect: SystemMaterialEffect.IMMERSIVE,
densityLabel: '密集冲突'
},
[ConflictDensity.SEVERE]: {
primaryColor: '#E67E22',
ambientColor: '#FDEEE0',
glowColor: '#F0A060',
pulseSpeed: 1800,
pulseIntensity: 0.5,
materialEffect: SystemMaterialEffect.IMMERSIVE,
densityLabel: '严重冲突'
},
[ConflictDensity.CRITICAL]: {
primaryColor: '#E74C3C',
ambientColor: '#FDEDEC',
glowColor: '#FF6B6B',
pulseSpeed: 1000,
pulseIntensity: 0.7,
materialEffect: SystemMaterialEffect.IMMERSIVE,
densityLabel: '致命冲突'
}
};

@StorageLink('currentConflictDensity') currentDensity: ConflictDensity = ConflictDensity.NONE;
@StorageLink('ambientLightColor') ambientColor: string = '#E8F8F0';
@StorageLink('primaryLightColor') primaryColor: string = '#27AE60';

public switchConflictLight(density: ConflictDensity): void {
const config = ConflictLightTheme.LIGHT_MAP[density];
this.currentDensity = density;
this.ambientColor = config.ambientColor;
this.primaryColor = config.primaryColor;
AppStorage.setOrCreate('lightEffectChanged', Date.now());
AppStorage.setOrCreate('conflictDensityChanged', density);
}

public autoCalculateDensity(criticalCount: number, severeCount: number, denseCount: number): ConflictDensity {
if (criticalCount > 0) return ConflictDensity.CRITICAL;
if (severeCount > 0) return ConflictDensity.SEVERE;
if (denseCount > 0) return ConflictDensity.DENSE;
if (criticalCount + severeCount + denseCount === 0 && this.hasAnyConflict()) return ConflictDensity.SPARSE;
return ConflictDensity.NONE;
}

private hasAnyConflict(): boolean {
const conflicts = AppStorage.get<ConflictItem[]>('conflictItems') || [];
return conflicts.length > 0;
}

public getCurrentConfig(): ConflictLightConfig {
return ConflictLightTheme.LIGHT_MAP[this.currentDensity];
}

public getNavigationMaterial(): object {
const config = this.getCurrentConfig();
return {
systemMaterialEffect: {
materialType: hdsMaterial.MaterialType.ADAPTIVE,
materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE,
effect: config.materialEffect
}
};
}
}

// 冲突项接口
export interface ConflictItem {
id: string;
elementIdA: string;
elementIdB: string;
conflictType: 'hard' | 'soft' | 'clearance';
severity: ConflictDensity;
description: string;
location: { x: number; y: number; z: number };
involvedDisciplines: string[];
suggestedResolution: string;
}

// 构件接口
export interface BIMElement {
id: string;
name: string;
discipline: 'architecture' | 'structure' | 'mep' | 'curtain' | 'landscape';
category: string;
geometry: { vertices: number[]; indices: number[] };
properties: Record<string, string>;
boundingBox: { min: number[]; max: number[] };
}

export const conflictLightTheme = new ConflictLightTheme();

3.2 HMAF四层BIM审图智能体架构（BIMReviewAgentScheduler.ets）

代码亮点：本模块是"筑界智脑"的核心智能层，实现了"模型解析-冲突检测-规范审查-协同批注"四层智能体协作架构。通过Agent Framework Kit创建多智能体会话，四个Agent并行处理BIM模型，结果实时汇聚到3D视窗。关键创新在于利用Intents Kit解析审图人员的审查意图（如"检查三层机电管线与结构梁的冲突"），自动触发对应Agent协作并调整界面冲突光效。

// entry/src/main/ets/agents/BIMReviewAgentScheduler.ets

import {
hmaf,
AgentSession,
AgentMode,
TaskMessage,
TaskResult
} from '@kit.AgentFrameworkKit';
import { intents, IntentEngine, IntentResult } from '@kit.IntentsKit';
import { conflictLightTheme, ConflictDensity, ConflictItem, BIMElement } from '../theme/ConflictLightTheme';

export enum AgentType {
MODEL_PARSER = 'model_parser',
CONFLICT_DETECTOR = 'conflict_detector',
CODE_CHECKER = 'code_checker',
COLLABORATION = 'collaboration'
}

export enum ReviewStage {
MODEL_VIEW = 'model_view',
CONFLICT_REVIEW = 'conflict',
CODE_COMPLIANCE = 'code',
ANNOTATION = 'annotation'
}

export interface ParseResult {
totalElements: number;
disciplines: string[];
buildingStoreys: number;
totalArea: number;
modelFormat: string;
}

export class BIMReviewAgentScheduler {
private session: AgentSession | null = null;
private intentEngine: IntentEngine | null = null;
private elements: Map<string, BIMElement> = new Map();
private conflicts: Map<string, ConflictItem> = new Map();
private parseResult: ParseResult | null = null;

private onModelParsed?: (result: ParseResult) => void;
private onConflictsDetected?: (conflicts: ConflictItem[]) => void;
private onCodeChecked?: (violations: CodeViolation[]) => void;
private onAnnotationReady?: (annotations: Annotation[]) => void;
private onStageChanged?: (stage: ReviewStage) => void;

public async initialize(): Promise<void> {
this.session = await hmaf.createAgentSession({
mode: AgentMode.MULTI_AGENT,
config: {
maxConcurrentAgents: 4,
timeout: 120000,
enableDistributed: true
}
});

this.intentEngine = await intents.createIntentEngine({
supportedDomains: ['bim_review', 'conflict_detection', 'code_compliance', 'collaboration']
});

await this.registerAgents();
console.info('BIMReviewAgentScheduler initialized');
}

private async registerAgents(): Promise<void> {
if (!this.session) return;

// 1. 模型解析Agent
await this.session.registerAgent({
agentId: AgentType.MODEL_PARSER,
capabilities: ['ifc_parsing', 'geometry_extraction', 'property_mapping', 'spatial_indexing'],
promptTemplate: `
你是BIM模型解析专家。解析IFC格式的建筑信息模型：
– 提取所有构件的几何信息（顶点、索引、包围盒）
– 识别构件专业分类（建筑/结构/机电/幕墙/景观）
– 建立空间索引（R-tree或Octree）
– 统计构件总数、专业分布、楼层信息

返回JSON格式: {
"totalElements": 50000,
"disciplines": ["architecture", "structure", "mep"],
"buildingStoreys": 30,
"totalArea": 85000,
"modelFormat": "IFC4"
}
`
});

// 2. 冲突检测Agent
await this.session.registerAgent({
agentId: AgentType.CONFLICT_DETECTOR,
capabilities: ['hard_collision', 'soft_collision', 'clearance_check', 'clash_grouping'],
promptTemplate: `
你是BIM冲突检测专家。基于空间索引进行碰撞检测：
– 硬碰撞（Hard Collision）：构件几何体直接相交
– 软碰撞（Soft Collision）：构件间距小于规范要求
– 净空检查（Clearance）：设备操作空间不足
– 按专业和严重程度分组冲突

返回JSON格式: [{"id": "conflict_1", "elementIdA": "beam_001", "elementIdB": "duct_015", "conflictType": "hard", "severity": "severe", "location": {"x": 12000, "y": 8000, "z": 3000}}]
`
});

// 3. 规范审查Agent
await this.session.registerAgent({
agentId: AgentType.CODE_CHECKER,
capabilities: ['fire_code', 'accessibility', 'energy_code', 'structural_code'],
promptTemplate: `
你是建筑规范审查专家。对照国家规范审查BIM模型：
– 防火规范：疏散距离、防火分区、消防通道宽度
– 无障碍规范：坡道坡度、电梯尺寸、卫生间配置
– 节能规范：窗墙比、保温厚度、设备能效
– 结构规范：荷载传递、节点连接、抗震等级

返回JSON格式: [{"id": "violation_1", "code": "GB50016-2024", "article": "5.5.17", "severity": "high", "description": "疏散距离超过规范要求", "elementId": "room_101"}]
`
});

// 4. 协同批注Agent
await this.session.registerAgent({
agentId: AgentType.COLLABORATION,
capabilities: ['annotation_management', 'revision_tracking', 'approval_workflow', 'comment_threading'],
promptTemplate: `
你是BIM协同批注专家。管理多专业审图批注：
– 自动关联批注与构件/冲突/规范条文
– 追踪批注状态（待处理/处理中/已解决/已关闭）
– 生成修订清单与版本对比
– 支持@提及和审批流程

返回JSON格式: {"annotations": [{"id": "anno_1", "targetId": "conflict_1", "author": "结构工程师", "content": "建议调整梁高", "status": "pending"}]}
`
});
}

public async processReviewIntent(input: string, modelData: object): Promise<void> {
if (!this.session || !this.intentEngine) throw new Error('Not initialized');

const intentResult: IntentResult = await this.intentEngine.parseIntent(input);
const intent = intentResult.primaryIntent;

console.info(`Detected BIM intent: ${intent.domain}/${intent.action}`);
this.adjustStageByIntent(intent);

switch (intent.action) {
case 'parse_model':
await this.dispatchModelParse(modelData);
break;
case 'detect_conflicts':
await this.dispatchConflictDetection(Array.from(this.elements.values()));
break;
case 'check_compliance':
await this.dispatchCodeCompliance(Array.from(this.elements.values()));
break;
case 'full_review':
await this.dispatchFullReview(modelData);
break;
default:
await this.dispatchFullReview(modelData);
}
}

private adjustStageByIntent(intent: IntentResult['primaryIntent']): void {
const stageMap: Record<string, ReviewStage> = {
'parse_model': ReviewStage.MODEL_VIEW,
'detect_conflicts': ReviewStage.CONFLICT_REVIEW,
'check_compliance': ReviewStage.CODE_COMPLIANCE,
'manage_annotations': ReviewStage.ANNOTATION
};
this.onStageChanged?.(stageMap[intent.action] || ReviewStage.MODEL_VIEW);
}

private async dispatchModelParse(modelData: object): Promise<void> {
const task: TaskMessage = {
targetAgent: AgentType.MODEL_PARSER,
taskType: 'parse',
payload: modelData,
priority: 1
};
const result = await this.session!.sendTask(task);
this.parseResult = JSON.parse(result.data);
this.onModelParsed?.(this.parseResult);
AppStorage.setOrCreate('parseResult', this.parseResult);
}

private async dispatchConflictDetection(elements: BIMElement[]): Promise<void> {
const task: TaskMessage = {
targetAgent: AgentType.CONFLICT_DETECTOR,
taskType: 'detect',
payload: { elements },
priority: 2
};
const result = await this.session!.sendTask(task);
const detectedConflicts: ConflictItem[] = JSON.parse(result.data);

detectedConflicts.forEach(conflict => this.conflicts.set(conflict.id, conflict));
this.updateConflictLightEffect();
this.onConflictsDetected?.(detectedConflicts);
AppStorage.setOrCreate('conflictItems', detectedConflicts);
}

private async dispatchCodeCompliance(elements: BIMElement[]): Promise<void> {
const task: TaskMessage = {
targetAgent: AgentType.CODE_CHECKER,
taskType: 'check',
payload: { elements, codes: ['GB50016', 'GB50352', 'GB50189'] },
priority: 3
};
const result = await this.session!.sendTask(task);
const violations: CodeViolation[] = JSON.parse(result.data);
this.onCodeChecked?.(violations);
AppStorage.setOrCreate('codeViolations', violations);
}

private async dispatchFullReview(modelData: object): Promise<void> {
await this.dispatchModelParse(modelData);
const allElements = Array.from(this.elements.values());
await this.dispatchConflictDetection(allElements);
await this.dispatchCodeCompliance(allElements);
}

private updateConflictLightEffect(): void {
const conflicts = Array.from(this.conflicts.values());
const criticalCount = conflicts.filter(c => c.severity === ConflictDensity.CRITICAL).length;
const severeCount = conflicts.filter(c => c.severity === ConflictDensity.SEVERE).length;
const denseCount = conflicts.filter(c => c.severity === ConflictDensity.DENSE).length;

const autoLevel = conflictLightTheme.autoCalculateDensity(criticalCount, severeCount, denseCount);
conflictLightTheme.switchConflictLight(autoLevel);

AppStorage.setOrCreate('conflictStats', {
total: conflicts.length,
critical: criticalCount,
severe: severeCount,
dense: denseCount,
sparse: conflicts.filter(c => c.severity === ConflictDensity.SPARSE).length
});
}

public setCallbacks(callbacks: object): void {
Object.assign(this, callbacks);
}

public getReviewData(): object {
return {
elements: Array.from(this.elements.values()),
conflicts: Array.from(this.conflicts.values()),
parseResult: this.parseResult
};
}
}

export interface CodeViolation {
id: string;
code: string;
article: string;
severity: ConflictDensity;
description: string;
elementId: string;
}

export interface Annotation {
id: string;
targetId: string;
author: string;
content: string;
status: 'pending' | 'processing' | 'resolved' | 'closed';
timestamp: number;
}

export const bimReviewAgentScheduler = new BIMReviewAgentScheduler();

3.3 悬浮审图导航（BIMFloatNavigation.ets）

代码亮点：本模块实现了"审图阶段即导航"的悬浮页签系统。底部悬浮导航承载"模型浏览-冲突审查-规范合规-协同批注"四个审图阶段，实时显示冲突统计徽章（致命/严重/密集冲突数量）和构件类型角标。采用HdsTabs悬浮样式配合systemMaterialEffect实现玻璃拟态+冲突光效的双重效果。

// entry/src/main/ets/components/BIMFloatNavigation.ets

import { HdsTabs, HdsTabsController, hdsMaterial } from '@kit.UIDesignKit';
import { conflictLightTheme, ConflictDensity } from '../theme/ConflictLightTheme';
import { ReviewStage } from '../agents/BIMReviewAgentScheduler';

@Component
export struct BIMFloatNavigation {
@StorageLink('currentReviewStage') currentStage: ReviewStage = ReviewStage.MODEL_VIEW;
@StorageLink('currentConflictDensity') currentDensity: ConflictDensity = ConflictDensity.NONE;
@StorageLink('primaryLightColor') primaryColor: string = '#27AE60';
@StorageLink('navTransparency') navTransparency: number = 0.75;
@State conflictStats: { total: number; critical: number; severe: number; dense: number } =
{ total: 0, critical: 0, severe: 0, dense: 0 };

private hdsTabController: HdsTabsController = new HdsTabsController();

private readonly STAGE_CONFIG: Record<ReviewStage, { color: string; icon: Resource; label: string }> = {
[ReviewStage.MODEL_VIEW]: { color: '#3498DB', icon: $r('app.media.icon_model'), label: '模型浏览' },
[ReviewStage.CONFLICT_REVIEW]: { color: '#E67E22', icon: $r('app.media.icon_conflict'), label: '冲突审查' },
[ReviewStage.CODE_COMPLIANCE]: { color: '#9B59B6', icon: $r('app.media.icon_code'), label: '规范合规' },
[ReviewStage.ANNOTATION]: { color: '#1ABC9C', icon: $r('app.media.icon_anno'), label: '协同批注' }
};

aboutToAppear(): void {
AppStorage.link('conflictStats').onChange((value: typeof this.conflictStats) => {
this.conflictStats = value;
});
}

build() {
Column() {
this.ConflictPulseIndicator()

HdsTabs({
controller: this.hdsTabController,
barPosition: BarPosition.End
}) {
TabContent() { this.ModelViewContent() }
.tabBar(this.buildStageTabBar('模型', ReviewStage.MODEL_VIEW, 0))

TabContent() { this.ConflictReviewContent() }
.tabBar(this.buildStageTabBar('冲突', ReviewStage.CONFLICT_REVIEW,
this.conflictStats.critical + this.conflictStats.severe))

TabContent() { this.CodeComplianceContent() }
.tabBar(this.buildStageTabBar('规范', ReviewStage.CODE_COMPLIANCE, 0))

TabContent() { this.AnnotationContent() }
.tabBar(this.buildStageTabBar('批注', ReviewStage.ANNOTATION, 0))
}
.width('96%')
.height(72)
.backgroundColor(`rgba(255, 255, 255, ${this.navTransparency})`)
.borderRadius(20)
.shadow({ radius: 16, color: 'rgba(0, 0, 0, 0.12)', offsetX: 0, offsetY: 4 })
.barFloatingStyle({
barBottomMargin: 16,
gradientMask: { maskColor: '#66F1F3F5', maskHeight: 92 },
systemMaterialEffect: {
materialType: hdsMaterial.MaterialType.ADAPTIVE,
materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
}
})
.border({ width: 1.5, color: this.primaryColor + '44', radius: 20 })
}
.width('100%')
.padding({ bottom: 12 })
}

@Builder
ConflictPulseIndicator(): void {
Row() {
Row()
.width(48)
.height(4)
.backgroundColor(this.primaryColor)
.borderRadius(2)
.shadow({ radius: 8, color: this.primaryColor + '66' })
.animation({
duration: conflictLightTheme.getCurrentConfig().pulseSpeed,
iterations: –1,
curve: Curve.EaseInOut
})
.opacity(0.5 + Math.sin(AppStorage.get<number>('conflictPulsePhase') || 0) *
conflictLightTheme.getCurrentConfig().pulseIntensity)
}
.width('100%')
.justifyContent(FlexAlign.Center)
.margin({ bottom: 8 })
}

@Builder
buildStageTabBar(title: string, stage: ReviewStage, badgeCount: number): void {
Column() {
Stack() {
Image(this.STAGE_CONFIG[stage].icon)
.width(24)
.height(24)
.fillColor(this.currentStage === stage ? this.STAGE_CONFIG[stage].color : '#666666')

if (badgeCount > 0) {
Text(badgeCount.toString())
.fontSize(10)
.fontColor('#FFFFFF')
.backgroundColor(stage === ReviewStage.CONFLICT_REVIEW ? '#E74C3C' : this.STAGE_CONFIG[stage].color)
.borderRadius(8)
.padding({ left: 4, right: 4 })
.position({ x: 16, y: –6 })
}
}
.width(32)
.height(32)

Text(title)
.fontSize(12)
.fontColor(this.currentStage === stage ? this.STAGE_CONFIG[stage].color : '#999999')
.margin({ top: 4 })
}
.width('100%')
.onClick(() => {
this.currentStage = stage;
AppStorage.setOrCreate('reviewStageChanged', stage);
})
}

@Builder
ModelViewContent(): void {}
@Builder
ConflictReviewContent(): void {}
@Builder
CodeComplianceContent(): void {}
@Builder
AnnotationContent(): void {}
}

3.4 主BIM 3D视窗与构件光效渲染（BIMViewerPage.ets）

代码亮点：本模块实现了BIM模型的核心可视化层。基于WebGL/Canvas 3D渲染IFC模型，每个构件根据专业类型渲染专属光晕效果，冲突构件以脉冲红光高亮显示。关键创新在于"冲突构件呼吸光"——检测到冲突的构件在3D视窗中以对应风险等级的颜色脉冲闪烁，引导审图人员快速定位问题位置。

// entry/src/main/ets/pages/BIMViewerPage.ets

import { WebGLRenderingContext } from '@kit.ArkUI';
import { window } from '@kit.WindowManagerKit';
import { conflictLightTheme, ConflictDensity, ConflictItem, BIMElement } from '../theme/ConflictLightTheme';
import { bimReviewAgentScheduler, ReviewStage, ParseResult } from '../agents/BIMReviewAgentScheduler';
import { BIMFloatNavigation } from '../components/BIMFloatNavigation';

@Entry
@Component
struct BIMViewerPage {
@StorageLink('currentConflictDensity') currentDensity: ConflictDensity = ConflictDensity.NONE;
@StorageLink('ambientLightColor') ambientColor: string = '#E8F8F0';
@StorageLink('primaryLightColor') primaryColor: string = '#27AE60';
@StorageLink('currentReviewStage') currentStage: ReviewStage = ReviewStage.MODEL_VIEW;

@State elements: BIMElement[] = [];
@State conflicts: ConflictItem[] = [];
@State parseResult: ParseResult | null = null;
@State selectedElementId: string = '';
@State isReviewing: boolean = false;
@State pulsePhase: number = 0;

private glContext: WebGLRenderingContext | null = null;
private readonly DISCIPLINE_COLORS: Record<string, string> = {
'architecture': '#FFF8E7',
'structure': '#95A5A6',
'mep': '#1ABC9C',
'curtain': '#BDC3C7',
'landscape': '#58D68D'
};

aboutToAppear(): void {
bimReviewAgentScheduler.initialize().then(() => {
bimReviewAgentScheduler.setCallbacks({
onModelParsed: (result) => { this.parseResult = result; },
onConflictsDetected: (newConflicts) => {
this.conflicts = newConflicts;
this.highlightConflictElements();
},
onStageChanged: (stage) => { this.currentStage = stage; }
});
});

this.startConflictPulseAnimation();
this.loadDemoModel();
this.setupImmersiveWindow();
}

private startConflictPulseAnimation(): void {
const animate = () => {
this.pulsePhase = (this.pulsePhase + 0.03) % (Math.PI * 2);
AppStorage.setOrCreate('conflictPulsePhase', this.pulsePhase);
requestAnimationFrame(animate);
};
animate();
}

private async loadDemoModel(): Promise<void> {
const demoModel = {
ifcData: 'demo_commercial_building.ifc',
storeys: 30,
disciplines: ['architecture', 'structure', 'mep', 'curtain']
};
this.isReviewing = true;
await bimReviewAgentScheduler.processReviewIntent('全面审查此BIM模型', demoModel);
this.isReviewing = false;
}

private highlightConflictElements(): void {
// 在WebGL中为冲突构件添加脉冲高亮材质
this.conflicts.forEach(conflict => {
const elementA = this.elements.find(e => e.id === conflict.elementIdA);
const elementB = this.elements.find(e => e.id === conflict.elementIdB);
if (elementA) this.applyConflictMaterial(elementA, conflict.severity);
if (elementB) this.applyConflictMaterial(elementB, conflict.severity);
});
}

private applyConflictMaterial(element: BIMElement, severity: ConflictDensity): void {
// WebGL材质更新：根据严重程度设置脉冲发光强度
const intensityMap: Record<ConflictDensity, number> = {
[ConflictDensity.NONE]: 0,
[ConflictDensity.SPARSE]: 0.3,
[ConflictDensity.DENSE]: 0.5,
[ConflictDensity.SEVERE]: 0.8,
[ConflictDensity.CRITICAL]: 1.0
};
// 实际实现中更新WebGL材质的emissive属性
console.info(`Applying conflict material to ${element.id} with intensity ${intensityMap[severity]}`);
}

private async setupImmersiveWindow(): Promise<void> {
const win = await window.getLastWindow(getContext());
await win.setWindowLayoutFullScreen(true);
await win.setWindowSystemBarEnable([]);
await win.setWindowBackgroundColor('#00000000');
await win.setWindowMinWidth(1400);
await win.setWindowMinHeight(900);
}

private handleModelClick(event: ClickEvent): void {
// 射线拾取检测点击的构件
const pickedElement = this.rayPick(event.x, event.y);
if (pickedElement) {
this.selectedElementId = pickedElement.id;
const relatedConflicts = this.conflicts.filter(c =>
c.elementIdA === pickedElement.id || c.elementIdB === pickedElement.id
);
if (relatedConflicts.length > 0) {
conflictLightTheme.switchConflictLight(relatedConflicts[0].severity);
}
this.openElementDetailWindow(pickedElement);
}
}

private rayPick(x: number, y: number): BIMElement | null {
// WebGL射线拾取逻辑
return this.elements[0] || null;
}

private async openElementDetailWindow(element: BIMElement): Promise<void> {
const want = {
deviceId: '',
bundleName: getContext().applicationInfo.name,
abilityName: 'ElementDetailAbility',
parameters: {
elementId: element.id,
elementData: JSON.stringify(element),
conflictsData: JSON.stringify(this.conflicts.filter(c =>
c.elementIdA === element.id || c.elementIdB === element.id
))
}
};
await getContext().startAbility(want);
}

private async openConflictListWindow(): Promise<void> {
const want = {
deviceId: '',
bundleName: getContext().applicationInfo.name,
abilityName: 'ConflictListAbility',
parameters: { conflictsData: JSON.stringify(this.conflicts) }
};
await getContext().startAbility(want);
}

private async openCodeRefWindow(): Promise<void> {
const want = {
deviceId: '',
bundleName: getContext().applicationInfo.name,
abilityName: 'CodeRefAbility',
parameters: { codesData: JSON.stringify(['GB50016', 'GB50352', 'GB50189']) }
};
await getContext().startAbility(want);
}

build() {
Stack() {
Column()
.width('100%')
.height('100%')
.backgroundColor(this.ambientColor)
.animation({ duration: 800, curve: Curve.EaseInOut })

Column() {
Row() {
Row() {
Circle()
.width(10)
.height(10)
.fill(this.primaryColor)
.shadow({ radius: 6, color: this.primaryColor + '80' })

Text(conflictLightTheme.getCurrentConfig().densityLabel)
.fontSize(13)
.fontColor(this.primaryColor)
.margin({ left: 6 })
}

Blank()

Text('筑界智脑')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')

Blank()

Row({ space: 12 }) {
Button('冲突清单')
.fontSize(12)
.backgroundColor(this.primaryColor + '1A')
.fontColor(this.primaryColor)
.borderRadius(6)
.onClick(() => this.openConflictListWindow())

Button('规范引用')
.fontSize(12)
.backgroundColor(this.primaryColor + '1A')
.fontColor(this.primaryColor)
.borderRadius(6)
.onClick(() => this.openCodeRefWindow())
}
}
.width('100%')
.height(56)
.padding({ left: 24, right: 24 })
.backgroundColor('rgba(255, 255, 255, 0.85)')
.backdropFilter($r('sys.blur.20'))
.alignItems(VerticalAlign.Center)

if (this.parseResult) {
Row() {
Text(`构件：${this.parseResult.totalElements}个`)
.fontSize(11)
.fontColor('#666666')
Text(`专业：${this.parseResult.disciplines.join('/')}`)
.fontSize(11)
.fontColor('#666666')
.margin({ left: 16 })
Text(`楼层：${this.parseResult.buildingStoreys}层`)
.fontSize(11)
.fontColor(this.primaryColor)
.margin({ left: 16 })
if (this.isReviewing) {
Text('审图中…')
.fontSize(11)
.fontColor(this.primaryColor)
.margin({ left: 16 })
.animation({
duration: 1000,
iterations: –1,
curve: Curve.EaseInOut
})
.opacity(0.5 + Math.sin(this.pulsePhase) * 0.5)
}
}
.width('100%')
.height(36)
.padding({ left: 24, right: 24 })
.backgroundColor('rgba(255, 255, 255, 0.6)')
}

// WebGL 3D BIM视窗
WebGLView({ context: this.glContext })
.width('100%')
.layoutWeight(1)
.backgroundColor('#1A1A2E')
.borderRadius(12)
.margin(16)
.shadow({ radius: 12, color: 'rgba(0, 0, 0, 0.1)', offsetX: 0, offsetY: 4 })
.onClick((event) => this.handleModelClick(event))

Column() {
BIMFloatNavigation()
}
.width('100%')
}
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}

// WebGLView组件占位，实际实现需接入WebGL渲染引擎
@Component
struct WebGLView {
@Prop context: WebGLRenderingContext | null;
build() {
Stack() {
Text('BIM 3D Viewport')
.fontSize(16)
.fontColor('#FFFFFF')
}
.width('100%')
.height('100%')
.backgroundColor('#1A1A2E')
}
}

3.5 浮动冲突清单窗口（ConflictListAbility.ets）

代码亮点：本模块实现了浮动冲突清单窗口，按冲突密度等级分组显示，每组使用对应冲突颜色的左侧边框标识。支持点击冲突项自动定位到3D视窗中的对应位置，并同步切换主窗口的光效氛围。

// entry/src/main/ets/conflictability/ConflictListAbility.ets

import { window } from '@kit.WindowManagerKit';
import { conflictLightTheme, ConflictDensity, ConflictItem } from '../theme/ConflictLightTheme';

@Entry
@Component
struct ConflictListPage {
@StorageLink('currentConflictDensity') currentDensity: ConflictDensity = ConflictDensity.NONE;
@StorageLink('primaryLightColor') primaryColor: string = '#27AE60';

@State conflictItems: ConflictItem[] = [];
@State isWindowFocused: boolean = true;
@State selectedConflictId: string = '';

aboutToAppear(): void {
const params = getContext().abilityInfo?.parameters;
if (params?.conflictsData) {
this.conflictItems = JSON.parse(params.conflictsData);
}
AppStorage.link('conflictItems').onChange((value: ConflictItem[]) => {
this.conflictItems = value;
});
this.setupFocusListener();
}

private async setupFocusListener(): Promise<void> {
const win = await window.getLastWindow(getContext());
win.on('windowFocusChange', (isFocused: boolean) => {
this.isWindowFocused = isFocused;
});
}

private getGroupedConflicts(): Record<ConflictDensity, ConflictItem[]> {
const grouped: Record<ConflictDensity, ConflictItem[]> = {
[ConflictDensity.CRITICAL]: [],
[ConflictDensity.SEVERE]: [],
[ConflictDensity.DENSE]: [],
[ConflictDensity.SPARSE]: [],
[ConflictDensity.NONE]: []
};
this.conflictItems.forEach(c => grouped[c.severity].push(c));
return grouped;
}

private getConflictColor(severity: ConflictDensity): string {
const map: Record<ConflictDensity, string> = {
[ConflictDensity.NONE]: '#27AE60',
[ConflictDensity.SPARSE]: '#3498DB',
[ConflictDensity.DENSE]: '#F39C12',
[ConflictDensity.SEVERE]: '#E67E22',
[ConflictDensity.CRITICAL]: '#E74C3C'
};
return map[severity];
}

build() {
Column() {
Row() {
Circle().width(10).height(10).fill(this.primaryColor)
.shadow({ radius: 6, color: this.primaryColor + '80' })
Text('冲突清单').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#333333').margin({ left: 8 })
Blank()
Text(`${this.conflictItems.length}项冲突`).fontSize(12).fontColor('#999999')
}
.width('100%').height(48).padding({ left: 16, right: 16 })
.backgroundColor('rgba(255, 255, 255, 0.9)')
.borderRadius({ topLeft: 16, topRight: 16 })

List() {
const grouped = this.getGroupedConflicts();
const order: ConflictDensity[] = [ConflictDensity.CRITICAL, ConflictDensity.SEVERE, ConflictDensity.DENSE, ConflictDensity.SPARSE];

ForEach(order, (severity: ConflictDensity) => {
const conflicts = grouped[severity];
if (conflicts.length === 0) return;

ListItem() {
Row() {
Row().width(4).height(16).backgroundColor(this.getConflictColor(severity)).borderRadius(2).margin({ right: 8 })
Text(`${this.getSeverityLabel(severity)} (${conflicts.length})`)
.fontSize(13).fontWeight(FontWeight.Bold).fontColor(this.getConflictColor(severity))
}
.width('100%').height(36).padding({ left: 16, right: 16 })
.backgroundColor(this.getConflictColor(severity) + '0D')
}

ForEach(conflicts, (conflict: ConflictItem) => {
ListItem() {
Column() {
Text(`${conflict.elementIdA} ↔ ${conflict.elementIdB}`)
.fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333').maxLines(1)
Text(conflict.description).fontSize(12).fontColor('#666666').margin({ top: 4 }).maxLines(2)
Text(`建议：${conflict.suggestedResolution}`)
.fontSize(11).fontColor(this.getConflictColor(severity)).margin({ top: 6 }).maxLines(2)
}
.width('100%').padding(12)
.backgroundColor(this.selectedConflictId === conflict.id ? this.getConflictColor(severity) + '1A' : '#FFFFFF')
.borderRadius(8)
.border({ width: 1, color: this.selectedConflictId === conflict.id ? this.getConflictColor(severity) + '4D' : '#F0F0F0', radius: 8 })
.onClick(() => {
this.selectedConflictId = conflict.id;
AppStorage.setOrCreate('selectedConflictId', conflict.id);
conflictLightTheme.switchConflictLight(conflict.severity);
// 触发主窗口定位到冲突位置
AppStorage.setOrCreate('focusConflictLocation', conflict.location);
})
}
})
})
}
.width('100%').layoutWeight(1).padding(12).scrollBar(BarState.Auto)

Row() {
Text(`总计：${this.conflictItems.length}项冲突`).fontSize(12).fontColor('#999999')
}
.width('100%').height(40).padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.Center).borderTop({ width: 0.5, color: '#EEEEEE' })
}
.width('100%').height('100%')
.backgroundColor('rgba(255, 255, 255, 0.9)')
.backdropFilter($r('sys.blur.20'))
.borderRadius(16)
.shadow({ radius: 24, color: 'rgba(0, 0, 0, 0.15)', offsetX: 0, offsetY: 8 })
.opacity(this.isWindowFocused ? 1.0 : 0.65)
.animation({ duration: 300, curve: Curve.EaseInOut })
}

private getSeverityLabel(severity: ConflictDensity): string {
const labels: Record<ConflictDensity, string> = {
[ConflictDensity.NONE]: '无冲突',
[ConflictDensity.SPARSE]: '稀疏冲突',
[ConflictDensity.DENSE]: '密集冲突',
[ConflictDensity.SEVERE]: '严重冲突',
[ConflictDensity.CRITICAL]: '致命冲突'
};
return labels[severity];
}
}

四、关键技术总结

4.1 HMAF BIM审图开发清单

4.2 冲突密度光效映射

4.3 构件专业光效标识

五、运行效果展示

5.1 模型浏览阶段 – 无冲突光效

打开一个clean的BIM模型，界面呈现安心绿色光效：3D视窗中构件以专业类型光晕标识，环境背景淡绿渐变，底部导航脉冲缓慢，传递"模型健康、可放心推进"的直觉。

5.2 冲突审查阶段 – 严重冲突光效

检测到"结构梁与主风管硬碰撞"时，界面切换为紧迫橙色光效：冲突构件在3D视窗中橙色脉冲闪烁（1.8秒周期），浮动冲突清单自动弹出并定位到该冲突，底部导航"冲突"页签角标显示"1"。

5.3 规范合规阶段 – 致命冲突光效

发现"消防疏散距离不足"时，风险等级跃升为致命冲突。界面切换为危险红色光效：急促脉冲（1秒周期）配合顶部警示光条，所有浮动窗口同步变红，强烈提示"必须修改，否则无法通过审查"。

六、总结与展望

本文基于HarmonyOS 6（API 23）的悬浮导航、沉浸光感与HMAF智能体框架特性，完整实战了一款面向PC端的"筑界智脑"AI智能体BIM协同审图工作台。核心创新点：

未来扩展方向：

• 分布式BIM协作：PC主控审图+AR眼镜现场核对+手机审批的三端流转
• 实时冲突预警：模型修改时实时检测新增冲突，以"幽灵构件"预展示影响范围
• 规范知识库融合：接入全文规范库，冲突检测时自动推送相关条文原文与图示
• 多模态构件信息：支持点击构件查看施工图纸、材料清单、造价信息的浮动窗口

转载自：https://blog.csdn.net/u014727709/article/details/161592515 欢迎 👍点赞✍评论⭐收藏，欢迎指正