HarmonyOS 6 悬浮导航 + 沉浸光感:打造鸿蒙智能体驱动的沉浸式代码评审助手

文章目录

    • 每日一句正能量
    • 一、前言:当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 典型使用流程

  1. 开发者正在DevEco Studio中编写代码,选中一段代码复制(Ctrl+C)
  2. 智能体自动检测到剪贴板中的代码片段,悬浮窗胶囊变为蓝色呼吸灯(分析中)
  3. 端侧模型在200ms内完成初筛,若发现简单问题直接显示;若遇到复杂逻辑,自动调用云端大模型
  4. 分析完成:悬浮窗胶囊变为对应颜色(绿/黄/红),设备边框同步亮起对应光效
  5. 开发者余光看到红色光效,点击胶囊展开详细面板,查看问题列表与修复建议
  6. 点击"复制修复建议",直接粘贴到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与云端大模型的协同,实现了低延迟、高质量的代码分析;通过悬浮窗与光效反馈,实现了"零打扰"的辅助开发体验。

未来可扩展方向:

  1. 多智能体协作:引入测试智能体、文档智能体,形成开发全流程AI助手群
  2. AR眼镜适配:将光效反馈扩展至鸿蒙AR眼镜,实现更私密的提醒
  3. 团队协同:分析结果可一键分享至团队群聊,促进代码规范共建
  4. 个性化学习:根据开发者历史数据,智能推荐针对性的鸿蒙开发课程

HarmonyOS 6的智能体框架为开发者提供了前所未有的端侧AI能力,结合系统级的交互创新,正在重新定义"人机协同开发"的未来。


转载自:https://blog.csdn.net/u014727709/article/details/161323193

欢迎 👍点赞✍评论⭐收藏,欢迎指正

相关推荐
TechPioneer_lp4 小时前
就业指导|中九非科班毕业,华为 OD 做 Java 后端想转 C++,能找到深度学习挂钩的岗工作吗?
java·c++·华为od·华为·就业指导·校招指导
ar01234 小时前
深度解析AR远程专家协助系统在工业4.0时代的变革力量
人工智能·ar
想你依然心痛4 小时前
HarmonyOS 6 悬浮导航 + 沉浸光感:打造鸿蒙智能体驱动的沉浸式编程学习伴侣
学习·华为·ar·harmonyos·智能体
前端不太难4 小时前
鸿蒙 PC 正在重新定义“软件”
状态模式·harmonyos
枫叶丹44 小时前
【HarmonyOS 6.0】Graphics Accelerate Kit:基于Vulkan的顶点标记技术
华为·harmonyos
想你依然心痛6 小时前
HarmonyOS 6(API 23)实战:基于悬浮导航、沉浸光感与HMAF的“数智视界“——PC端AI智能体沉浸式数据可视化分析工作台
华为·ar·harmonyos·智能体
前端不太难14 小时前
从单页面到系统化:鸿蒙 App 演进路径
华为·状态模式·harmonyos
想你依然心痛16 小时前
HarmonyOS 6(API 23)实战:基于悬浮导航、沉浸光感与HMAF的“文思智脑“——PC端AI智能体沉浸式智能写作工作台
人工智能·ar·harmonyos·ai写作
小雨青年16 小时前
鸿蒙 HarmonyOS 6 | Pura X Max 鸿蒙原生适配 09:展开态列表增加字段但不变复杂
华为·harmonyos