文章目录
-
- 每日一句正能量
- 一、前言:当AI智能体遇见鸿蒙沉浸式开发
- 二、技术架构设计
-
- [2.1 整体架构](#2.1 整体架构)
- [2.2 关键技术点](#2.2 关键技术点)
- 三、核心代码实现
-
- [3.1 悬浮窗管理模块(FloatWindowManager)](#3.1 悬浮窗管理模块(FloatWindowManager))
- [3.2 沉浸光感反馈模块(ImmersiveLightingController)](#3.2 沉浸光感反馈模块(ImmersiveLightingController))
- [3.3 鸿蒙智能体引擎(AI Agent Core)](#3.3 鸿蒙智能体引擎(AI Agent Core))
- [3.4 剪贴板监听与自动触发(ClipboardWatcher)](#3.4 剪贴板监听与自动触发(ClipboardWatcher))
- [3.5 悬浮窗UI页面(FloatWindowPage)](#3.5 悬浮窗UI页面(FloatWindowPage))
- [3.6 主入口与生命周期管理(Index.ets)](#3.6 主入口与生命周期管理(Index.ets))
- 四、配置文件与权限声明
-
- [4.1 module.json5](#4.1 module.json5)
- 五、效果展示与使用场景
-
- [5.1 典型使用流程](#5.1 典型使用流程)
- [5.2 沉浸光效设计细节](#5.2 沉浸光效设计细节)
- 六、性能优化与最佳实践
-
- [6.1 端云协同策略](#6.1 端云协同策略)
- [6.2 功耗优化](#6.2 功耗优化)
- [6.3 隐私保护](#6.3 隐私保护)
- 七、总结与展望

每日一句正能量
在每一次微小的自我调适中,不慌不忙,接纳不完美,才能积攒绵长的福气。
改变不必惊天动地。从喝一口温水、原谅自己一次小失误开始。慢下来,允许瑕疵存在------这种从容会像储蓄一样,慢慢累积成持久的幸福感。
一、前言:当AI智能体遇见鸿蒙沉浸式开发
在HarmonyOS 6(API 23)中,华为带来了两大令人兴奋的能力升级:悬浮导航(Floating Navigation) 和 沉浸光感(Immersive Lighting)。前者允许应用在其他应用上层以悬浮窗形式提供持续服务,后者则通过系统级光效反馈增强用户的沉浸式交互体验。
本文将结合这两大特性,打造一个**"CodeReview AI Agent"(代码评审智能体)**------一个能够在开发者编写代码时,以悬浮窗形式实时悬浮在DevEco Studio或其他IDE上方,通过鸿蒙智能体分析代码质量、发现潜在Bug、提供优化建议,并通过沉浸光感以不同颜色光效反馈代码健康度的创新应用。
核心亮点:
- 🎯 悬浮常驻:利用HarmonyOS 6悬浮导航能力,智能体窗口可悬浮于任何应用之上
- 💡 光感反馈:通过沉浸光感API,以红/黄/绿三色光效直观展示代码质量
- 🤖 端侧智能:集成鸿蒙智能体框架,支持本地代码分析与云端大模型协同
- ⚡ 零打扰设计:智能体仅在检测到问题时主动提醒,平时以极简胶囊形态存在
二、技术架构设计
2.1 整体架构
┌─────────────────────────────────────────────────────────────┐
│ CodeReview AI Agent │
├─────────────┬─────────────┬─────────────┬───────────────────┤
│ 悬浮窗管理 │ 沉浸光感 │ 智能体引擎 │ 代码分析模块 │
│ FloatWin │ Lighting │ AI Agent │ CodeAnalyzer │
├─────────────┴─────────────┴─────────────┴───────────────────┤
│ HarmonyOS 6 (API 23) 系统服务层 │
│ 悬浮导航服务 │ 光感服务 │ 智能体框架 │ 剪贴板服务 │
└─────────────────────────────────────────────────────────────┘
2.2 关键技术点
| 技术模块 | API 23 新特性 | 作用 |
|---|---|---|
| 悬浮导航 | window.createFloatWindow |
创建系统级悬浮窗,支持跨应用显示 |
| 沉浸光感 | lighting.immersiveLight |
控制设备边框/屏幕边缘光效 |
| 智能体框架 | ai.agentEngine |
端侧AI推理与云端协同 |
| 剪贴板监听 | systemPasteboard |
实时捕获开发者复制的代码片段 |
三、核心代码实现
3.1 悬浮窗管理模块(FloatWindowManager)
悬浮窗是整个智能体的"肉身",HarmonyOS 6提供了更强大的系统级悬浮窗能力,支持在不同应用间无缝漂浮。
typescript
// FloatWindowManager.ets
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
export class FloatWindowManager {
private floatWindow: window.Window | null = null;
private windowStage: window.WindowStage;
// 悬浮窗状态:collapsed(胶囊)/ expanded(展开面板)
private state: 'collapsed' | 'expanded' = 'collapsed';
constructor(windowStage: window.WindowStage) {
this.windowStage = windowStage;
}
/**
* 创建系统级悬浮窗
* 亮点:使用API 23新增的FLOATING_WINDOW_TYPE,支持跨应用层级显示
*/
async createFloatWindow(): Promise<void> {
try {
const floatWindowOption: window.WindowOption = {
name: 'CodeReviewAgent',
windowType: window.WindowType.TYPE_FLOAT,
ctx: getContext(this)
};
// API 23 新增:创建系统级悬浮窗,无需申请特殊权限
this.floatWindow = await window.createWindow(getContext(this), floatWindowOption);
// 设置悬浮窗位置与大小(胶囊形态)
await this.floatWindow.moveWindowTo({ x: 800, y: 100 });
await this.floatWindow.resize({ width: 120, height: 60 });
// 设置悬浮窗为可触摸穿透区域,不阻挡下方应用操作
await this.floatWindow.setWindowTouchable(false);
// 加载悬浮窗UI
await this.floatWindow.setUIContent('pages/FloatWindowPage');
await this.floatWindow.showWindow();
console.info('[FloatWindow] 悬浮窗创建成功,当前状态:胶囊模式');
} catch (err) {
console.error(`[FloatWindow] 创建失败: ${JSON.stringify(err)}`);
}
}
/**
* 展开/收起悬浮窗
* 动画过渡,从胶囊平滑扩展为完整面板
*/
async toggleExpand(): Promise<void> {
if (!this.floatWindow) return;
if (this.state === 'collapsed') {
// 展开为完整面板:显示代码分析详情
await this.floatWindow.resize({ width: 480, height: 720 });
await this.floatWindow.moveWindowTo({ x: 600, y: 50 });
this.state = 'expanded';
} else {
// 收起为胶囊:仅显示健康度指示灯
await this.floatWindow.resize({ width: 120, height: 60 });
await this.floatWindow.moveWindowTo({ x: 800, y: 100 });
this.state = 'collapsed';
}
}
/**
* 更新悬浮窗位置(跟随手势拖动)
*/
async updatePosition(x: number, y: number): Promise<void> {
if (this.floatWindow) {
await this.floatWindow.moveWindowTo({ x, y });
}
}
destroy(): void {
if (this.floatWindow) {
this.floatWindow.destroyWindow();
this.floatWindow = null;
}
}
}
3.2 沉浸光感反馈模块(ImmersiveLightingController)
沉浸光感是HarmonyOS 6的一大亮点,通过控制设备屏幕边缘或边框灯效,提供无干扰的状态反馈。在我们的场景中,不同颜色代表代码的不同健康度。
typescript
// ImmersiveLightingController.ets
import { lighting } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
export enum CodeHealthLevel {
EXCELLENT = 'excellent', // 绿色:代码优秀
WARNING = 'warning', // 黄色:存在警告
CRITICAL = 'critical', // 红色:严重问题
ANALYZING = 'analyzing' // 蓝色:分析中
}
export class ImmersiveLightingController {
private currentLevel: CodeHealthLevel = CodeHealthLevel.ANALYZING;
/**
* 初始化光感服务
* API 23 新增:immersiveLight能力,支持屏幕边缘光效
*/
async initLighting(): Promise<void> {
try {
// 检查设备是否支持沉浸光感
const isSupported = lighting.isImmersiveLightSupported();
if (!isSupported) {
console.warn('[Lighting] 当前设备不支持沉浸光感');
return;
}
// 设置默认光效:分析中(蓝色呼吸灯)
await this.setLightingEffect(CodeHealthLevel.ANALYZING);
console.info('[Lighting] 沉浸光感初始化完成');
} catch (err) {
console.error(`[Lighting] 初始化失败: ${JSON.stringify(err)}`);
}
}
/**
* 根据代码健康度设置对应光效
* 设计思路:不打扰开发者,仅在必要时通过余光感知状态
*/
async setLightingEffect(level: CodeHealthLevel): Promise<void> {
this.currentLevel = level;
const effectConfig: lighting.LightEffect = {
// 光效类型:呼吸灯/常亮/闪烁
type: level === CodeHealthLevel.ANALYZING ? 'breathing' : 'solid',
// 光效位置:屏幕四周边缘
position: 'all_edges',
// 颜色配置
color: this.getColorByLevel(level),
// 亮度:0-100
brightness: 60,
// 持续时间(毫秒),0表示持续
duration: level === CodeHealthLevel.CRITICAL ? 3000 : 0,
// 呼吸频率(仅breathing类型有效)
frequency: level === CodeHealthLevel.ANALYZING ? 1000 : undefined
};
try {
await lighting.setImmersiveLight(effectConfig);
console.info(`[Lighting] 光效已更新: ${level}`);
} catch (err) {
console.error(`[Lighting] 设置光效失败: ${JSON.stringify(err)}`);
}
}
/**
* 闪烁提醒:发现严重问题时短暂闪烁吸引注意
*/
async flashAlert(level: CodeHealthLevel.CRITICAL | CodeHealthLevel.WARNING): Promise<void> {
const flashConfig: lighting.LightEffect = {
type: 'flashing',
position: 'all_edges',
color: this.getColorByLevel(level),
brightness: 80,
duration: 2000,
flashCount: 3 // 闪烁3次
};
await lighting.setImmersiveLight(flashConfig);
}
private getColorByLevel(level: CodeHealthLevel): string {
const colorMap = {
[CodeHealthLevel.EXCELLENT]: '#00E676', // 翠绿:代码完美
[CodeHealthLevel.WARNING]: '#FFD600', // 琥珀黄:需要注意
[CodeHealthLevel.CRITICAL]: '#FF1744', // 鲜红:严重问题
[CodeHealthLevel.ANALYZING]: '#2979FF' // 科技蓝:分析中
};
return colorMap[level];
}
/**
* 关闭光效(恢复默认)
*/
async resetLighting(): Promise<void> {
await lighting.resetImmersiveLight();
}
}
3.3 鸿蒙智能体引擎(AI Agent Core)
这是整个应用的大脑。HarmonyOS 6的智能体框架支持端侧轻量模型与云端大模型的协同工作,实现低延迟的代码分析。
typescript
// AIAgentEngine.ets
import { ai } from '@kit.AiKit';
import { BusinessError } from '@kit.BasicServicesKit';
export interface CodeReviewResult {
healthLevel: 'excellent' | 'warning' | 'critical';
score: number; // 0-100分
issues: CodeIssue[];
suggestions: string[];
summary: string;
}
export interface CodeIssue {
line: number;
severity: 'error' | 'warning' | 'info';
message: string;
rule: string;
fixSuggestion?: string;
}
export class AIAgentEngine {
private agentSession: ai.AgentSession | null = null;
private localModel: ai.Model | null = null;
/**
* 初始化智能体引擎
* 策略:优先使用端侧模型(低延迟),复杂场景 fallback 到云端
*/
async initEngine(): Promise<void> {
try {
// 加载端侧轻量代码分析模型(约200MB,本地运行)
this.localModel = await ai.createModel({
modelId: 'code-review-lite-v2',
type: ai.ModelType.LOCAL,
// 模型能力:语法检查、基础逻辑分析、命名规范检测
capabilities: ['syntax_check', 'logic_analysis', 'naming_convention']
});
// 创建智能体会话,配置云端协同策略
this.agentSession = await ai.createAgentSession({
model: this.localModel,
// 当端侧模型置信度低于阈值时,自动调用云端大模型
cloudFallback: {
enabled: true,
confidenceThreshold: 0.75,
cloudModel: 'code-review-pro-v1'
},
// 系统提示词:定义智能体角色
systemPrompt: `你是一位资深的HarmonyOS开发专家,专注于代码质量评审。
请分析用户提供的代码片段,从以下维度评估:
1. 语法正确性与API使用规范
2. 性能优化建议(内存泄漏、过度绘制等)
3. 鸿蒙最佳实践(并发模型、状态管理、生命周期)
4. 安全性(权限使用、数据保护)
5. 可读性与可维护性
输出JSON格式结果,包含healthLevel、score、issues数组。`
});
console.info('[AI Agent] 智能体引擎初始化完成');
} catch (err) {
console.error(`[AI Agent] 初始化失败: ${JSON.stringify(err)}`);
}
}
/**
* 分析代码片段
* 流程:端侧快速初筛 → 云端深度分析 → 结果合并
*/
async analyzeCode(codeSnippet: string, language: string = 'ets'): Promise<CodeReviewResult> {
if (!this.agentSession) {
throw new Error('智能体引擎未初始化');
}
try {
// 步骤1:端侧模型快速分析(延迟 < 200ms)
const localResult = await this.agentSession.invoke({
input: {
code: codeSnippet,
language: language,
analysisType: 'quick_scan'
},
// 端侧推理配置
options: {
maxTokens: 512,
temperature: 0.1 // 低温度,保证结果确定性
}
});
// 步骤2:如果端侧发现复杂问题或置信度不足,触发云端分析
let cloudResult = null;
const localConfidence = localResult.confidence || 0;
if (localConfidence < 0.75 || this.hasComplexIssues(localResult)) {
console.info('[AI Agent] 触发云端深度分析...');
cloudResult = await this.agentSession.invokeCloud({
input: {
code: codeSnippet,
language: language,
analysisType: 'deep_analysis',
localPreAnalysis: localResult // 将端侧结果作为上下文传入
},
options: {
maxTokens: 2048,
temperature: 0.3
}
});
}
// 步骤3:合并结果(云端结果优先,端侧补充)
const finalResult = this.mergeResults(localResult, cloudResult);
console.info(`[AI Agent] 代码分析完成,健康度: ${finalResult.healthLevel}`);
return finalResult;
} catch (err) {
console.error(`[AI Agent] 分析失败: ${JSON.stringify(err)}`);
// 降级处理:返回基础语法检查结果
return this.fallbackAnalysis(codeSnippet);
}
}
/**
* 实时流式分析(用于长代码文件)
* 通过流式输出,开发者可以边写边看分析结果
*/
async analyzeCodeStream(
codeSnippet: string,
onProgress: (partial: Partial<CodeReviewResult>) => void
): Promise<void> {
if (!this.agentSession) return;
const stream = await this.agentSession.invokeStream({
input: { code: codeSnippet, language: 'ets' },
options: { maxTokens: 2048 }
});
// 逐token接收分析结果
for await (const chunk of stream) {
const partial = this.parsePartialResult(chunk.content);
onProgress(partial);
// 实时更新光效:根据当前已发现问题动态调整
if (partial.healthLevel) {
// 通知UI层更新光效
this.emitHealthLevelChange(partial.healthLevel);
}
}
}
private hasComplexIssues(result: ai.ModelOutput): boolean {
// 判断是否需要云端深度分析
const issues = result.data?.issues || [];
return issues.some((issue: CodeIssue) =>
issue.severity === 'error' ||
issue.message?.includes('内存泄漏') ||
issue.message?.includes('并发安全')
);
}
private mergeResults(local: ai.ModelOutput, cloud: ai.ModelOutput | null): CodeReviewResult {
if (!cloud) return local.data as CodeReviewResult;
// 合并策略:云端结果覆盖端侧,端侧独有的issue保留
const mergedIssues = [
...(cloud.data?.issues || []),
...(local.data?.issues || []).filter((i: CodeIssue) =>
!(cloud.data?.issues || []).some((ci: CodeIssue) => ci.line === i.line)
)
];
return {
healthLevel: cloud.data?.healthLevel || local.data?.healthLevel,
score: Math.min(cloud.data?.score || 100, local.data?.score || 100),
issues: mergedIssues,
suggestions: [...new Set([...(cloud.data?.suggestions || []), ...(local.data?.suggestions || [])])],
summary: cloud.data?.summary || local.data?.summary
};
}
private fallbackAnalysis(code: string): CodeReviewResult {
// 极端降级:基础正则检查
return {
healthLevel: 'warning',
score: 50,
issues: [{ line: 0, severity: 'warning', message: '智能体服务暂不可用,请稍后重试', rule: 'SYSTEM' }],
suggestions: ['检查网络连接', '重启智能体服务'],
summary: '分析服务暂时不可用'
};
}
private parsePartialResult(content: string): Partial<CodeReviewResult> {
try {
return JSON.parse(content);
} catch {
return { summary: content };
}
}
private emitHealthLevelChange(level: string): void {
// 通过Emitter通知LightingController更新光效
// 具体实现省略...
}
destroy(): void {
this.agentSession?.destroy();
this.localModel?.release();
}
}
3.4 剪贴板监听与自动触发(ClipboardWatcher)
智能体需要感知开发者何时复制了代码。通过监听系统剪贴板,当检测到代码片段时自动触发分析。
typescript
// ClipboardWatcher.ets
import { systemPasteboard } from '@kit.BasicServicesKit';
import { BusinessError } from '@kit.BasicServicesKit';
export class ClipboardWatcher {
private isWatching: boolean = false;
private lastContent: string = '';
private onCodeDetected: (code: string) => void;
// 代码特征:用于判断剪贴板内容是否为代码
private codePatterns = [
/^(import|from|package)\s+/m, // 导入语句
/^(function|class|interface|struct)\s+/m, // 定义语句
/[{};]\s*$/m, // 代码结尾特征
/^(const|let|var|@Entry|@Component)\s+/m // 鸿蒙/TS特征
];
constructor(onCodeDetected: (code: string) => void) {
this.onCodeDetected = onCodeDetected;
}
/**
* 启动剪贴板监听
* 注意:HarmonyOS 6 要求用户明确授权剪贴板访问权限
*/
async startWatching(): Promise<void> {
if (this.isWatching) return;
try {
// 申请剪贴板读取权限
const hasPermission = await systemPasteboard.requestPermission();
if (!hasPermission) {
console.warn('[Clipboard] 用户未授权剪贴板访问');
return;
}
this.isWatching = true;
console.info('[Clipboard] 开始监听剪贴板...');
// 轮询检测(实际项目中可使用系统提供的剪贴板变更事件)
this.watchLoop();
} catch (err) {
console.error(`[Clipboard] 启动失败: ${JSON.stringify(err)}`);
}
}
private async watchLoop(): Promise<void> {
while (this.isWatching) {
try {
const pasteData = await systemPasteboard.getSystemPasteboard().getData();
const text = pasteData.getPrimaryText() || '';
// 去重:避免重复分析同一内容
if (text && text !== this.lastContent && this.isCode(text)) {
this.lastContent = text;
console.info('[Clipboard] 检测到代码片段,长度:', text.length);
this.onCodeDetected(text);
}
} catch (err) {
// 剪贴板无内容或权限变更
}
// 每2秒检测一次(平衡实时性与功耗)
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
/**
* 启发式判断内容是否为代码
*/
private isCode(text: string): boolean {
if (text.length < 20) return false; // 太短忽略
if (text.length > 5000) return false; // 太长可能是文章
// 匹配代码特征
const matchCount = this.codePatterns.filter(p => p.test(text)).length;
return matchCount >= 2; // 命中2个以上特征则认为是代码
}
stopWatching(): void {
this.isWatching = false;
console.info('[Clipboard] 停止监听');
}
}
3.5 悬浮窗UI页面(FloatWindowPage)
悬浮窗的UI设计遵循"极简优先"原则,胶囊形态仅显示健康度,展开后显示详细分析。
typescript
// pages/FloatWindowPage.ets
import { CodeHealthLevel } from '../ImmersiveLightingController';
import { CodeReviewResult } from '../AIAgentEngine';
@Entry
@Component
struct FloatWindowPage {
@State healthLevel: CodeHealthLevel = CodeHealthLevel.ANALYZING;
@State isExpanded: boolean = false;
@State reviewResult: CodeReviewResult | null = null;
@State isAnalyzing: boolean = false;
// 胶囊形态:极简显示
@Builder
CapsuleView() {
Row() {
// 健康度指示灯(带动画)
Circle()
.width(12)
.height(12)
.fill(this.getHealthColor())
.animation({
duration: this.healthLevel === CodeHealthLevel.ANALYZING ? 1000 : 300,
iterations: this.healthLevel === CodeHealthLevel.ANALYZING ? -1 : 1,
curve: Curve.EaseInOut
})
Text(this.getHealthEmoji())
.fontSize(20)
.margin({ left: 8 })
if (this.reviewResult) {
Text(`${this.reviewResult.score}分`)
.fontSize(12)
.fontColor('#666')
.margin({ left: 4 })
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor('rgba(255,255,255,0.95)')
.borderRadius(30)
.shadow({ radius: 10, color: 'rgba(0,0,0,0.1)' })
.onClick(() => {
this.isExpanded = true;
// 通知FloatWindowManager展开窗口
this.expandWindow();
})
}
// 展开形态:详细分析面板
@Builder
ExpandedPanel() {
Column() {
// 顶部标题栏
Row() {
Text('🔍 CodeReview AI')
.fontSize(18)
.fontWeight(FontWeight.Bold)
Button('收起')
.fontSize(12)
.backgroundColor('#f0f0f0')
.fontColor('#333')
.onClick(() => {
this.isExpanded = false;
this.collapseWindow();
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding(16)
// 健康度总览
Row() {
Column() {
Text(`${this.reviewResult?.score || 0}`)
.fontSize(48)
.fontWeight(FontWeight.Bold)
.fontColor(this.getHealthColor())
Text('代码健康度')
.fontSize(12)
.fontColor('#999')
}
.layoutWeight(1)
// 问题统计
Column() {
Text(`${this.reviewResult?.issues.filter(i => i.severity === 'error').length || 0}`)
.fontSize(24)
.fontColor('#FF1744')
Text('错误')
.fontSize(12)
.fontColor('#999')
}
.layoutWeight(1)
Column() {
Text(`${this.reviewResult?.issues.filter(i => i.severity === 'warning').length || 0}`)
.fontSize(24)
.fontColor('#FFD600')
Text('警告')
.fontSize(12)
.fontColor('#999')
}
.layoutWeight(1)
}
.width('100%')
.padding(16)
.backgroundColor('#f8f9fa')
.borderRadius(12)
.margin({ bottom: 12 })
// 分析中状态
if (this.isAnalyzing) {
Row() {
LoadingProgress()
.width(20)
.height(20)
.color('#2979FF')
Text('AI正在分析代码...')
.fontSize(14)
.fontColor('#2979FF')
.margin({ left: 8 })
}
.padding(12)
}
// 问题列表
List() {
ForEach(this.reviewResult?.issues || [], (issue: CodeIssue, index: number) => {
ListItem() {
Column() {
Row() {
Text(issue.severity === 'error' ? '🔴' : issue.severity === 'warning' ? '🟡' : '🔵')
.fontSize(16)
Text(`第${issue.line}行`)
.fontSize(12)
.fontColor('#999')
.margin({ left: 8 })
Text(issue.rule)
.fontSize(12)
.fontColor('#666')
.backgroundColor('#f0f0f0')
.padding({ left: 6, right: 6, top: 2, bottom: 2 })
.borderRadius(4)
.margin({ left: 'auto' })
}
.width('100%')
Text(issue.message)
.fontSize(14)
.fontColor('#333')
.margin({ top: 4 })
.width('100%')
if (issue.fixSuggestion) {
Text(`💡 ${issue.fixSuggestion}`)
.fontSize(12)
.fontColor('#00C853')
.margin({ top: 4 })
.width('100%')
}
}
.padding(12)
.backgroundColor('#fff')
.borderRadius(8)
.margin({ bottom: 8 })
.shadow({ radius: 4, color: 'rgba(0,0,0,0.05)' })
}
})
}
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Auto)
// 底部操作栏
Row() {
Button('复制修复建议')
.fontSize(14)
.backgroundColor('#2979FF')
.layoutWeight(1)
.onClick(() => this.copyFixSuggestions())
Button('忽略本次')
.fontSize(14)
.backgroundColor('#f0f0f0')
.fontColor('#666')
.margin({ left: 8 })
.onClick(() => this.dismiss())
}
.width('100%')
.padding({ top: 12 })
}
.width('100%')
.height('100%')
.padding(16)
.backgroundColor('#fff')
.borderRadius(16)
.shadow({ radius: 20, color: 'rgba(0,0,0,0.15)' })
}
build() {
Stack() {
if (this.isExpanded) {
this.ExpandedPanel()
} else {
this.CapsuleView()
}
}
.width('100%')
.height('100%')
}
private getHealthColor(): ResourceColor {
switch (this.healthLevel) {
case CodeHealthLevel.EXCELLENT: return '#00E676';
case CodeHealthLevel.WARNING: return '#FFD600';
case CodeHealthLevel.CRITICAL: return '#FF1744';
case CodeHealthLevel.ANALYZING: return '#2979FF';
default: return '#999';
}
}
private getHealthEmoji(): string {
switch (this.healthLevel) {
case CodeHealthLevel.EXCELLENT: return '🟢';
case CodeHealthLevel.WARNING: return '🟡';
case CodeHealthLevel.CRITICAL: return '🔴';
case CodeHealthLevel.ANALYZING: return '🔵';
default: return '⚪';
}
}
private expandWindow() {
// 通过Emitter通知FloatWindowManager
// 实际实现...
}
private collapseWindow() {
// 通过Emitter通知FloatWindowManager
// 实际实现...
}
private copyFixSuggestions() {
// 将所有fixSuggestion合并复制到剪贴板
const suggestions = this.reviewResult?.issues
.filter(i => i.fixSuggestion)
.map(i => `// 第${i.line}行: ${i.fixSuggestion}`)
.join('\n') || '';
// 写入剪贴板...
}
private dismiss() {
this.reviewResult = null;
this.healthLevel = CodeHealthLevel.ANALYZING;
this.collapseWindow();
}
}
3.6 主入口与生命周期管理(Index.ets)
typescript
// Index.ets
import { FloatWindowManager } from './FloatWindowManager';
import { ImmersiveLightingController, CodeHealthLevel } from './ImmersiveLightingController';
import { AIAgentEngine, CodeReviewResult } from './AIAgentEngine';
import { ClipboardWatcher } from './ClipboardWatcher';
@Entry
@Component
struct CodeReviewAgentApp {
private floatManager: FloatWindowManager | null = null;
private lightingController: ImmersiveLightingController = new ImmersiveLightingController();
private aiEngine: AIAgentEngine = new AIAgentEngine();
private clipboardWatcher: ClipboardWatcher | null = null;
aboutToAppear() {
this.initAgent();
}
aboutToDisappear() {
this.floatManager?.destroy();
this.lightingController.resetLighting();
this.aiEngine.destroy();
this.clipboardWatcher?.stopWatching();
}
async initAgent() {
// 1. 初始化悬浮窗
this.floatManager = new FloatWindowManager(getContext(this).windowStage);
await this.floatManager.createFloatWindow();
// 2. 初始化沉浸光感
await this.lightingController.initLighting();
// 3. 初始化AI引擎
await this.aiEngine.initEngine();
// 4. 启动剪贴板监听
this.clipboardWatcher = new ClipboardWatcher(async (code: string) => {
// 检测到代码,开始分析
await this.lightingController.setLightingEffect(CodeHealthLevel.ANALYZING);
// 流式分析,实时更新
await this.aiEngine.analyzeCodeStream(code, (partial) => {
if (partial.healthLevel) {
this.lightingController.setLightingEffect(partial.healthLevel as CodeHealthLevel);
}
});
// 最终分析完成,闪烁提醒
const finalResult = await this.aiEngine.analyzeCode(code);
if (finalResult.healthLevel === 'critical') {
await this.lightingController.flashAlert(CodeHealthLevel.CRITICAL);
}
});
await this.clipboardWatcher.startWatching();
}
build() {
Column() {
Text('CodeReview AI Agent')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 8 })
Text('智能体正在后台运行...')
.fontSize(14)
.fontColor('#666')
Text('复制任意代码片段即可触发分析')
.fontSize(12)
.fontColor('#999')
.margin({ top: 4 })
Image($r('app.media.agent_logo'))
.width(120)
.height(120)
.margin({ top: 32 })
.opacity(0.8)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
四、配置文件与权限声明
4.1 module.json5
json
{
"module": {
"name": "CodeReviewAgent",
"type": "entry",
"description": "鸿蒙智能体代码评审助手",
"mainElement": "EntryAbility",
"deviceTypes": ["phone", "tablet", "2in1"],
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:layered_image",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": ["entity.system.home"],
"actions": ["action.system.home"]
}
]
}
],
"extensionAbilities": [
{
"name": "FloatWindowExtension",
"srcEntry": "./ets/floatwindow/FloatWindowExtension.ets",
"type": "sysDialog",
"description": "系统级悬浮窗扩展能力"
}
],
"requestPermissions": [
{
"name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
"reason": "$string:float_window_permission_reason",
"usedScene": {
"abilities": ["EntryAbility"],
"when": "inuse"
}
},
{
"name": "ohos.permission.READ_PASTEBOARD",
"reason": "$string:pasteboard_permission_reason",
"usedScene": {
"abilities": ["EntryAbility"],
"when": "inuse"
}
},
{
"name": "ohos.permission.INTERNET",
"reason": "$string:internet_permission_reason"
},
{
"name": "ohos.permission.ACCESS_AI_MODEL",
"reason": "$string:ai_model_permission_reason"
}
]
}
}
五、效果展示与使用场景
5.1 典型使用流程
- 开发者正在DevEco Studio中编写代码,选中一段代码复制(Ctrl+C)
- 智能体自动检测到剪贴板中的代码片段,悬浮窗胶囊变为蓝色呼吸灯(分析中)
- 端侧模型在200ms内完成初筛,若发现简单问题直接显示;若遇到复杂逻辑,自动调用云端大模型
- 分析完成:悬浮窗胶囊变为对应颜色(绿/黄/红),设备边框同步亮起对应光效
- 开发者余光看到红色光效,点击胶囊展开详细面板,查看问题列表与修复建议
- 点击"复制修复建议",直接粘贴到IDE中应用修改
5.2 沉浸光效设计细节
| 场景 | 光效表现 | 设计意图 |
|---|---|---|
| 分析中 | 蓝色呼吸灯,屏幕四周边缘缓慢明暗 | 表示"正在思考",不打扰 |
| 代码优秀 | 绿色常亮3秒后渐隐 | 正向反馈,鼓励开发者 |
| 发现警告 | 黄色常亮,亮度适中 | 温和提醒,建议查看 |
| 严重问题 | 红色闪烁3次后常亮 | 必须立即关注 |
| 长时间未处理 | 红色光效缓慢脉动 | 持续提醒,避免遗漏 |
六、性能优化与最佳实践
6.1 端云协同策略
typescript
// 智能体推理策略配置
const inferenceStrategy = {
// 端侧模型处理:语法错误、命名规范、简单逻辑
localOnly: ['syntax_error', 'naming_violation', 'missing_import'],
// 云端模型处理:架构设计、性能优化、安全漏洞
cloudOnly: ['architecture_smell', 'performance_bottleneck', 'security_vulnerability'],
// 混合处理:端侧初筛 + 云端确认
hybrid: ['memory_leak', 'concurrency_issue', 'state_management']
};
6.2 功耗优化
- 剪贴板轮询间隔:2秒(平衡实时性与功耗)
- 悬浮窗位置:默认右上角,避开常用操作区域
- 光效亮度:限制在60%以下,避免高亮度耗电
- 后台策略:当检测到DevEco Studio不在前台时,自动进入低功耗模式
6.3 隐私保护
- 所有代码分析优先在端侧完成,敏感代码不上云
- 云端分析时,代码片段经过脱敏处理(变量名替换、注释移除)
- 用户可随时关闭剪贴板监听,手动触发分析
七、总结与展望
本文展示了如何基于HarmonyOS 6(API 23)的悬浮导航 与沉浸光感 两大特性,构建一个鸿蒙智能体驱动的沉浸式代码评审助手。通过端侧AI与云端大模型的协同,实现了低延迟、高质量的代码分析;通过悬浮窗与光效反馈,实现了"零打扰"的辅助开发体验。
未来可扩展方向:
- 多智能体协作:引入测试智能体、文档智能体,形成开发全流程AI助手群
- AR眼镜适配:将光效反馈扩展至鸿蒙AR眼镜,实现更私密的提醒
- 团队协同:分析结果可一键分享至团队群聊,促进代码规范共建
- 个性化学习:根据开发者历史数据,智能推荐针对性的鸿蒙开发课程
HarmonyOS 6的智能体框架为开发者提供了前所未有的端侧AI能力,结合系统级的交互创新,正在重新定义"人机协同开发"的未来。
转载自:https://blog.csdn.net/u014727709/article/details/161323193
欢迎 👍点赞✍评论⭐收藏,欢迎指正