HarmonyOS 6（API 23）实战：基于悬浮导航、沉浸光感与HMAF的“数智视界“——PC端AI智能体沉浸式数据可视化分析工作台

想你依然心痛2026-05-23 6:06

文章目录

    • 每日一句正能量
    • 前言
    • 一、前言：AI数据分析3.0时代的智能体革命
    • 二、核心特性解析与技术选型
      • [2.1 HMAF在数据分析场景中的价值](#2.1 HMAF在数据分析场景中的价值)
      • [2.2 沉浸光感在数据分析中的创新应用](#2.2 沉浸光感在数据分析中的创新应用)
      • [2.3 悬浮导航的分析适配](#2.3 悬浮导航的分析适配)
    • 三、项目实战："数智视界"架构设计
      • [3.1 应用场景与功能规划](#3.1 应用场景与功能规划)
      • [3.2 技术架构图](#3.2 技术架构图)
    • 四、环境配置与模块依赖
      • [4.1 模块依赖配置](#4.1 模块依赖配置)
      • [4.2 权限声明（module.json5）](#4.2 权限声明（module.json5）)
    • 五、核心组件实战
      • [5.1 窗口沉浸配置（EntryAbility.ets）](#5.1 窗口沉浸配置（EntryAbility.ets）)
      • [5.2 数据密度光效系统（DataDensityLightEffect.ets）](#5.2 数据密度光效系统（DataDensityLightEffect.ets）)
      • [5.3 HMAF四层智能体调度器（DataAgentScheduler.ets）](#5.3 HMAF四层智能体调度器（DataAgentScheduler.ets）)
      • [5.4 悬浮分析导航（DataFloatNavigation.ets）](#5.4 悬浮分析导航（DataFloatNavigation.ets）)
      • [5.5 数据画布（DataCanvas.ets）](#5.5 数据画布（DataCanvas.ets）)
      • [5.6 浮动图表窗口（ChartWindow.ets）](#5.6 浮动图表窗口（ChartWindow.ets）)
      • [5.7 浮动洞察推荐器（InsightRecommender.ets）](#5.7 浮动洞察推荐器（InsightRecommender.ets）)
      • [5.8 多窗口光效同步管理器（WindowLightSync.ets）](#5.8 多窗口光效同步管理器（WindowLightSync.ets）)
      • [5.9 主页面集成（DataVisionPage.ets）](#5.9 主页面集成（DataVisionPage.ets）)
    • 六、关键技术总结
      • [6.1 HMAF数据分析智能体开发清单](#6.1 HMAF数据分析智能体开发清单)
      • [6.2 沉浸光感实现清单](#6.2 沉浸光感实现清单)
      • [6.3 数据密度阶段光效映射](#6.3 数据密度阶段光效映射)
      • [6.4 智能体状态徽章动画](#6.4 智能体状态徽章动画)
      • [6.5 性能优化建议](#6.5 性能优化建议)
    • 七、总结与展望

每日一句正能量

内心承载使命之人，可在平凡中孕育伟大，也能在逆旅中成就不凡。

有使命的人，日常的平凡工作也有了意义感（孕育伟大）；遭遇逆境也能转化为养分（逆旅中成就不凡）。沉淀自己不是为了独善其身，而是为了承载更大的东西。

前言

摘要：2026年，数据可视化分析进入"智能体驱动洞察"时代。HarmonyOS 6（API 23）引入的鸿蒙智能体框架（HMAF）将AI能力下沉至系统层，配合悬浮导航与沉浸光感特性，为PC端数据分析带来了"数据即光效、洞察即导航"的全新交互范式。本文将实战开发一款面向HarmonyOS PC的"数智视界"应用，展示如何利用HMAF构建"数据清洗-智能分析-可视化渲染-洞察推荐"四层智能体协作架构，通过悬浮导航实现分析状态实时追踪，基于沉浸光感打造"数据密度即氛围"的沉浸体验，以及基于多窗口架构构建浮动数据面板、实时图表窗口和洞察推荐器的协作分析体验。

一、前言：AI数据分析3.0时代的智能体革命

2026年，中国数字经济规模突破80万亿元，企业数据量年均增长超过40%，但传统数据分析平台面临三大痛点：

  1. 分析门槛高：业务人员难以掌握SQL、Python等分析工具，一个简单报表的平均制作周期需要2-3天
  2. 洞察滞后：数据分析师需要手动编写查询、制作图表、撰写报告，从数据到洞察的转化效率低下
  3. 可视化割裂：数据清洗、分析建模、图表制作、报告撰写分散在不同工具，协作流程繁琐

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

  • 智能体自动分析：HMAF构建的"分析智能体"可自动识别数据特征、推荐分析维度、生成可视化方案，响应延迟降至1.5秒
  • 数据密度光效感知：根据当前数据集规模、分析复杂度、异常值密度动态切换环境光色，让分析师"看见"数据的特征
  • 悬浮分析导航：底部悬浮导航实时显示四大智能体运行状态与分析进度徽章，分析师无需切换页面即可掌握全局
  • PC多窗口协作：主数据画布 + 浮动数据面板窗口 + 浮动图表窗口 + 浮动洞察推荐器的四层架构，通过光效联动实现"一眼全局"

本文核心亮点：

  • 四层智能体架构：清洗智能体（数据预处理）、分析智能体（智能建模）、可视化智能体（图表渲染）、洞察智能体（洞察推荐）协同工作
  • 数据密度光效：根据数据集规模（稀疏蓝→适中绿→密集橙→海量红）动态渲染全屏氛围光
  • 异常值警示光效：基于统计异常检测，触发不同光效警示（轻微黄→中度橙→严重红）
  • 悬浮分析导航：底部悬浮页签承载"数据/分析/图表/洞察"四大模块，实时显示智能体状态徽章与数据密度脉冲
  • 多窗口光效同步 ：主窗口与三个浮动子窗口通过WindowLightSync实现跨窗口光效联动，焦点感知自动调节

二、核心特性解析与技术选型

2.1 HMAF在数据分析场景中的价值

HMAF（Harmony Intelligent Agent Framework）提供四种编排模式，在数据分析场景中各有妙用：

编排模式 数据分析应用场景 技术实现
LLM模式 分析智能体自动生成数据洞察报告 基于数据特征自动调用LLM生成分析结论
工作流模式 清洗智能体按预设流程处理数据质量问题 缺失值检测→异常值处理→格式标准化→数据验证
A2A模式 四大智能体间实时协作与任务分发 分析智能体发现异常模式时，洞察智能体同步生成预警建议
OpenClaw模式 分析师通过自然语言直接指挥智能体 "帮我分析一下这份销售数据的季节性趋势"

2.2 沉浸光感在数据分析中的创新应用

传统数据分析软件采用固定UI，分析师难以感知数据的特征变化。HarmonyOS 6的沉浸光感特性带来三种创新：

数据密度光效：根据数据集规模动态调整背景光色与脉冲频率

  • 稀疏期（<1000条）：深海蓝，缓慢呼吸（4秒/周期）
  • 适中期（1000-10000条）：薄荷绿，平稳律动（2秒/周期）
  • 密集期（10000-100000条）：活力橙，快速脉冲（1秒/周期）
  • 海量期（>100000条）：炽烈红，高频闪烁（0.5秒/周期）

异常值警示光效：基于统计异常检测实时驱动光效

  • 轻微异常（<5%）：暖黄色光晕从底部升起
  • 中度异常（5-15%）：橙色警示光从边缘收缩
  • 严重异常（>15%）：红色闪烁光全屏覆盖

分析进度光效：根据分析任务完成度渲染光效强度

  • 进度<30%：光效强度30%，提示分析师等待
  • 进度30-70%：光效强度60%，柔和过渡
  • 进度>70%：光效强度100%，配合金色粒子效果

2.3 悬浮导航的分析适配

传统数据分析软件采用顶部固定工具栏，占用宝贵竖屏空间。HarmonyOS 6的悬浮导航特性带来：

  • 底部悬浮页签：不遮挡数据画布，支持透明度三档调节（55%/70%/85%）
  • 智能体状态徽章：每个页签实时显示对应智能体运行状态（空闲/思考/执行/完成/异常）
  • 数据密度实时徽章：导航栏中央显示当前数据量与分析进度，点击展开详细数据
  • 快捷操作入口：长按导航栏唤起快捷菜单，一键切换分析模式/紧急导出/智能体开关

三、项目实战："数智视界"架构设计

3.1 应用场景与功能规划

面向HarmonyOS PC的数据分析场景，核心功能包括：

功能模块 技术实现 沉浸光感/HMAF应用
主数据画布 Canvas + DataGrid 数据密度光效背景
悬浮分析导航 HdsTabs + systemMaterialEffect 玻璃拟态页签，智能体状态徽章
清洗智能体 HMAF Agent Framework Kit 数据清洗状态光效反馈
分析智能体 HMAF + 统计分析引擎 分析进度光效驱动
可视化智能体 HMAF + 图表渲染引擎 图表类型色光效反馈
洞察智能体 HMAF + 洞察推荐引擎 洞察等级光效
浮动数据面板 子窗口 + List 数据质量色光效同步
浮动图表窗口 子窗口 + Canvas 图表主题色光效同步
浮动洞察推荐器 子窗口 + List 洞察优先级色光效

3.2 技术架构图

复制代码 
┌─────────────────────────────────────────────────────────────┐
│                    HarmonyOS 6 PC 主窗口                      │
│  ┌───────────────────────────────────────────────────────┐  │
│  │              沉浸光感层 (AmbientLightLayer)              │  │
│  │         数据密度光效 + 异常值警示光效 + 分析进度光效        │  │
│  └───────────────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────────────┐  │
│  │           主数据画布 (Canvas + DataGrid)                │  │
│  │              数据表格 + 统计图表 + 交互筛选                │  │
│  └───────────────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────────────┐  │
│  │              悬浮分析导航 (FloatNavigation)              │  │
│  │    数据/分析/图表/洞察 页签 + 智能体状态徽章 + 密度徽章    │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
        ┌─────────────────────┼─────────────────────┐
        ▼                     ▼                     ▼
┌───────────────┐   ┌───────────────┐   ┌───────────────┐
│  浮动数据面板   │   │  浮动图表窗口  │   │  浮动洞察推荐器 │
│  (数据+质量色)  │   │  (图表+主题色) │   │  (洞察+优先级色)│
└───────────────┘   └───────────────┘   └───────────────┘
                              │
        ┌─────────────────────┼─────────────────────┐
        ▼                     ▼                     ▼
┌───────────────┐   ┌───────────────┐   ┌───────────────┐
│   清洗智能体    │   │   分析智能体    │   │   可视化智能体  │
│  (数据预处理)   │   │ (统计建模分析)  │   │ (图表渲染生成) │
└───────────────┘   └───────────────┘   └───────────────┘
                              │
                              ▼
                    ┌───────────────┐
                    │    洞察智能体   │
                    │ (洞察推荐生成) │
                    └───────────────┘

四、环境配置与模块依赖

4.1 模块依赖配置

在entry/oh-package.json5中添加以下依赖：

json 复制代码 
{
  "dependencies": {
    "@kit.ArkUI": "1.0.0",
    "@kit.WindowManagerKit": "1.0.0",
    "@kit.SensorServiceKit": "1.0.0",
    "@kit.UIDesignKit": "1.0.0",
    "@kit.AgentFrameworkKit": "1.0.0",
    "@kit.IntentsKit": "1.0.0",
    "@kit.DataAnalysisKit": "1.0.0",
    "@kit.ChartKit": "1.0.0",
    "@kit.NNKit": "1.0.0"
  }
}

4.2 权限声明（module.json5）

json 复制代码 
{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:internet_permission_reason"
      },
      {
        "name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
        "reason": "$string:float_window_permission_reason"
      },
      {
        "name": "ohos.permission.READ_USER_STORAGE",
        "reason": "$string:storage_permission_reason"
      },
      {
        "name": "ohos.permission.WRITE_USER_STORAGE",
        "reason": "$string:storage_permission_reason"
      }
    ]
  }
}

五、核心组件实战

5.1 窗口沉浸配置（EntryAbility.ets）

typescript 复制代码 
// entry/src/main/ets/entryability/EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.WindowManagerKit';

export default class EntryAbility extends UIAbility {
  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    const mainWindow = await windowStage.createSubWindow('data_main');
    
    // 启用全屏沉浸模式，隐藏系统标题栏
    await mainWindow.setWindowLayoutFullScreen(true);
    
    // 设置窗口背景为透明，允许沉浸光效层透传
    await mainWindow.setWindowBackgroundColor('#00000000');
    
    // 加载主页面
    windowStage.loadContent('pages/DataVisionPage', (err) => {
      if (err) {
        console.error('Failed to load DataVisionPage:', err.message);
      }
    });

    // 初始化窗口焦点监听，用于光效联动
    mainWindow.on('windowFocusChange', (isFocused: boolean) => {
      AppStorage.setOrCreate('window_focused', isFocused);
    });
  }

  onWindowStageDestroy(): void {
    // 清理数据资源
  }
}

5.2 数据密度光效系统（DataDensityLightEffect.ets）

typescript 复制代码 
// entry/src/main/ets/components/DataDensityLightEffect.ets
import { HdsNavigation, SystemMaterialEffect } from '@kit.UIDesignKit';

// 数据密度阶段枚举
export enum DataDensityPhase {
  SPARSE = 'sparse',          // 稀疏 <1000条
  MODERATE = 'moderate',       // 适中 1000-10000条
  DENSE = 'dense',             // 密集 10000-100000条
  MASSIVE = 'massive'          // 海量 >100000条
}

// 异常值严重程度枚举
export enum AnomalySeverity {
  MINOR = 'minor',             // 轻微 <5%
  MODERATE = 'moderate',       // 中度 5-15%
  SEVERE = 'severe'            // 严重 >15%
}

// 智能体状态枚举
export enum AgentState {
  IDLE = 'idle',
  THINKING = 'thinking',
  EXECUTING = 'executing',
  COMPLETED = 'completed',
  ERROR = 'error'
}

@Component
export struct DataDensityLightEffect {
  @Prop dataCount: number = 0;
  @Prop anomalyRate: number = 0;       // 异常值比例
  @Prop analysisProgress: number = 0;   // 分析进度
  @State lightIntensity: number = 0.6;
  @State pulsePhase: number = 0;

  // 数据密度主题色映射
  private densityColors: Map<DataDensityPhase, string> = new Map([
    [DataDensityPhase.SPARSE, '#1E3A8A'],    // 深海蓝
    [DataDensityPhase.MODERATE, '#10B981'],   // 薄荷绿
    [DataDensityPhase.DENSE, '#F59E0B'],      // 活力橙
    [DataDensityPhase.MASSIVE, '#EF4444']     // 炽烈红
  ]);

  // 异常值严重色映射
  private anomalyColors: Map<AnomalySeverity, string> = new Map([
    [AnomalySeverity.MINOR, '#FCD34D'],      // 暖黄色
    [AnomalySeverity.MODERATE, '#F97316'],    // 橙色
    [AnomalySeverity.SEVERE, '#EF4444']       // 红色
  ]);

  // 脉冲周期映射（毫秒）
  private pulseDurations: Map<DataDensityPhase, number> = new Map([
    [DataDensityPhase.SPARSE, 4000],
    [DataDensityPhase.MODERATE, 2000],
    [DataDensityPhase.DENSE, 1000],
    [DataDensityPhase.MASSIVE, 500]
  ]);

  private getCurrentPhase(): DataDensityPhase {
    if (this.dataCount < 1000) return DataDensityPhase.SPARSE;
    if (this.dataCount < 10000) return DataDensityPhase.MODERATE;
    if (this.dataCount < 100000) return DataDensityPhase.DENSE;
    return DataDensityPhase.MASSIVE;
  }

  private getThemeColor(): string {
    // 异常值优先于数据密度
    if (this.anomalyRate > 0.15) return this.anomalyColors.get(AnomalySeverity.SEVERE) || '#EF4444';
    if (this.anomalyRate > 0.05) return this.anomalyColors.get(AnomalySeverity.MODERATE) || '#F97316';
    if (this.anomalyRate > 0) return this.anomalyColors.get(AnomalySeverity.MINOR) || '#FCD34D';
    return this.densityColors.get(this.getCurrentPhase()) || '#1E3A8A';
  }

  private getPulseDuration(): number {
    return this.pulseDurations.get(this.getCurrentPhase()) || 4000;
  }

  // 分析进度影响光效强度
  private getIntensityByProgress(): number {
    if (this.analysisProgress > 70) return 1.0;
    if (this.analysisProgress > 30) return 0.6;
    return 0.3;
  }

  aboutToAppear(): void {
    // 启动光效脉冲动画
    this.startPulseAnimation();
  }

  private startPulseAnimation(): void {
    setInterval(() => {
      this.pulsePhase = this.pulsePhase === 0 ? 1 : 0;
    }, this.getPulseDuration() / 2);
  }

  build() {
    Stack() {
      // 底层：数据密度光效（大面积模糊光晕）
      Column()
        .width(800)
        .height(800)
        .backgroundColor(this.getThemeColor())
        .blur(200)
        .opacity(this.getIntensityByProgress() * 0.25)
        .position({ x: '50%', y: '30%' })
        .anchor('50%')
        .scale({
          x: this.pulsePhase === 0 ? 1.0 : 1.3,
          y: this.pulsePhase === 0 ? 1.0 : 1.3
        })
        .animation({
          duration: this.getPulseDuration(),
          curve: Curve.EaseInOut,
          iterations: -1,
          playMode: PlayMode.Alternate
        })

      // 中层：异常值警示光效（边缘收缩）
      if (this.anomalyRate > 0) {
        Column()
          .width('100%')
          .height('100%')
          .backgroundColor('transparent')
          .border({
            width: this.anomalyRate > 0.15 ? 6 : this.anomalyRate > 0.05 ? 4 : 2,
            color: this.getThemeColor()
          })
          .opacity(0.3)
          .animation({
            duration: 1000,
            curve: Curve.EaseInOut,
            iterations: -1,
            playMode: PlayMode.Alternate
          })
      }

      // 顶层：分析进度粒子效果（仅在进度>70%显示）
      if (this.analysisProgress > 70) {
        this.buildProgressParticles()
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#050508')
  }

  @Builder
  buildProgressParticles(): void {
    ForEach([0, 1, 2, 3, 4], (index: number) => {
      Column()
        .width(4)
        .height(4)
        .backgroundColor('#FCD34D')
        .borderRadius(2)
        .opacity(0.6)
        .position({
          x: `${20 + index * 15}%`,
          y: `${30 + index * 10}%`
        })
        .animation({
          duration: 1500 + index * 300,
          curve: Curve.Linear,
          iterations: -1,
          playMode: PlayMode.Alternate
        })
        .translate({
          y: this.pulsePhase === 0 ? -20 : -100
        })
    })
  }
}

5.3 HMAF四层智能体调度器（DataAgentScheduler.ets）

typescript 复制代码 
// entry/src/main/ets/agents/DataAgentScheduler.ets
import { hmaf } from '@kit.AgentFrameworkKit';
import { intents } from '@kit.IntentsKit';

// 智能体类型枚举
export enum AgentType {
  CLEANER = 'cleaner',          // 清洗智能体
  ANALYZER = 'analyzer',        // 分析智能体
  VISUALIZER = 'visualizer',    // 可视化智能体
  INSIGHT = 'insight'           // 洞察智能体
}

// 智能体人格色彩映射
export enum AgentPersonality {
  CLEANER = '#06B6D4',         // 清洗青
  ANALYZER = '#8B5CF6',        // 分析紫
  VISUALIZER = '#F59E0B',      // 可视化橙
  INSIGHT = '#10B981'          // 洞察绿
}

export class DataAgentScheduler {
  private static instance: DataAgentScheduler;
  private hmafSession: hmaf.AgentSession | null = null;
  private intentEngine: intents.IntentEngine | null = null;
  
  // 智能体状态管理
  private agentStates: Map<string, AgentState> = new Map([
    ['cleaner-1', AgentState.IDLE],
    ['analyzer-1', AgentState.IDLE],
    ['visualizer-1', AgentState.IDLE],
    ['insight-1', AgentState.IDLE]
  ]);

  private constructor() {}

  static getInstance(): DataAgentScheduler {
    if (!DataAgentScheduler.instance) {
      DataAgentScheduler.instance = new DataAgentScheduler();
    }
    return DataAgentScheduler.instance;
  }

  async initialize(): Promise<void> {
    // 初始化HMAF多智能体会话
    this.hmafSession = await hmaf.createAgentSession({
      mode: hmaf.AgentMode.MULTI_AGENT,
      enableDistributed: true,
      maxConcurrentAgents: 4
    });

    // 初始化意图引擎
    this.intentEngine = await intents.createIntentEngine({
      supportedDomains: ['data_cleaning', 'statistical_analysis', 'visualization', 'insight_generation']
    });

    // 注册四大智能体
    await this.registerAgents();

    // 启动状态监听
    this.startStateMonitoring();
  }

  private async registerAgents(): Promise<void> {
    // 1. 清洗智能体：数据预处理与质量检测
    await this.hmafSession?.registerAgent({
      agentId: 'cleaner-1',
      agentType: AgentType.CLEANER,
      capabilities: ['missing_value_detection', 'outlier_detection', 'format_standardization', 'data_validation', 'duplicate_removal'],
      modelConfig: {
        modelType: 'llm',
        temperature: 0.3,
        maxTokens: 512
      }
    });

    // 2. 分析智能体：统计建模与趋势分析
    await this.hmafSession?.registerAgent({
      agentId: 'analyzer-1',
      agentType: AgentType.ANALYZER,
      capabilities: ['descriptive_statistics', 'correlation_analysis', 'trend_forecasting', 'segmentation', 'anomaly_detection'],
      modelConfig: {
        modelType: 'llm',
        temperature: 0.4,
        maxTokens: 1024
      }
    });

    // 3. 可视化智能体：图表渲染与交互设计
    await this.hmafSession?.registerAgent({
      agentId: 'visualizer-1',
      agentType: AgentType.VISUALIZER,
      capabilities: ['chart_recommendation', 'color_scheme_design', 'interactive_design', 'responsive_layout', 'animation_design'],
      modelConfig: {
        modelType: 'llm',
        temperature: 0.6,
        maxTokens: 512
      }
    });

    // 4. 洞察智能体：洞察推荐与报告生成
    await this.hmafSession?.registerAgent({
      agentId: 'insight-1',
      agentType: AgentType.INSIGHT,
      capabilities: ['pattern_recognition', 'insight_extraction', 'recommendation_generation', 'report_drafting', 'action_suggestion'],
      modelConfig: {
        modelType: 'llm',
        temperature: 0.5,
        maxTokens: 1024
      }
    });
  }

  // 数据清洗
  async cleanData(rawData: object[], dataType: string): Promise<{ cleanedData: object[]; qualityReport: DataQualityReport; anomalies: Anomaly[] }> {
    this.updateAgentState('cleaner-1', AgentState.EXECUTING);
    
    const result = await this.hmafSession?.sendTask({
      targetAgent: 'cleaner-1',
      taskType: 'clean_data',
      payload: {
        data: rawData,
        dataType: dataType,  // 'sales', 'user', 'finance', etc.
        rules: ['remove_duplicates', 'fill_missing', 'detect_outliers', 'standardize_format']
      }
    });

    this.updateAgentState('cleaner-1', AgentState.COMPLETED);
    
    return {
      cleanedData: result?.cleanedData || [],
      qualityReport: result?.qualityReport || {},
      anomalies: result?.anomalies || []
    };
  }

  // 智能分析
  async analyzeData(data: object[], analysisType: string): Promise<{ statistics: Statistics; correlations: Correlation[]; trends: Trend[]; segments: Segment[] }> {
    this.updateAgentState('analyzer-1', AgentState.THINKING);
    
    const result = await this.hmafSession?.sendTask({
      targetAgent: 'analyzer-1',
      taskType: 'analyze_data',
      payload: {
        data: data,
        analysisType: analysisType,  // 'descriptive', 'diagnostic', 'predictive', 'prescriptive'
        dimensions: ['time', 'category', 'region', 'channel'],
        metrics: ['revenue', 'quantity', 'conversion_rate', 'retention_rate']
      }
    });

    this.updateAgentState('analyzer-1', AgentState.COMPLETED);
    
    return {
      statistics: result?.statistics || {},
      correlations: result?.correlations || [],
      trends: result?.trends || [],
      segments: result?.segments || []
    };
  }

  // 生成可视化
  async generateVisualization(data: object[], chartType: string): Promise<{ chartConfig: ChartConfig; colorScheme: string[]; interactions: string[] }> {
    this.updateAgentState('visualizer-1', AgentState.EXECUTING);
    
    const result = await this.hmafSession?.sendTask({
      targetAgent: 'visualizer-1',
      taskType: 'generate_visualization',
      payload: {
        data: data,
        chartType: chartType,  // 'auto', 'line', 'bar', 'pie', 'scatter', 'heatmap', 'treemap'
        theme: 'dark',
        responsive: true,
        animated: true
      }
    });

    this.updateAgentState('visualizer-1', AgentState.COMPLETED);
    
    return {
      chartConfig: result?.chartConfig || {},
      colorScheme: result?.colorScheme || [],
      interactions: result?.interactions || []
    };
  }

  // 生成洞察
  async generateInsights(analysisResult: object, priority: string): Promise<{ insights: Insight[]; recommendations: Recommendation[]; report: string }> {
    this.updateAgentState('insight-1', AgentState.THINKING);
    
    const result = await this.hmafSession?.sendTask({
      targetAgent: 'insight-1',
      taskType: 'generate_insights',
      payload: {
        analysisResult: analysisResult,
        priority: priority,  // 'high', 'medium', 'low'
        maxInsights: 5,
        includeActions: true
      }
    });

    this.updateAgentState('insight-1', AgentState.COMPLETED);
    
    return {
      insights: result?.insights || [],
      recommendations: result?.recommendations || [],
      report: result?.report || ''
    };
  }

  private updateAgentState(agentId: string, state: AgentState): void {
    this.agentStates.set(agentId, state);
    AppStorage.setOrCreate('agent_state_update', { agentId, state });
  }

  getAgentState(agentId: string): AgentState {
    return this.agentStates.get(agentId) || AgentState.IDLE;
  }

  private startStateMonitoring(): void {
    // 监听智能体状态变化，同步到UI
    this.hmafSession?.on('agentStateChange', (event: { agentId: string; state: string }) => {
      this.updateAgentState(event.agentId, event.state as AgentState);
    });
  }
}

// 数据质量报告
export interface DataQualityReport {
  totalRows: number;
  validRows: number;
  missingRate: number;
  duplicateRate: number;
  outlierRate: number;
  completeness: number;
  consistency: number;
  accuracy: number;
}

// 异常值
export interface Anomaly {
  rowIndex: number;
  column: string;
  expectedValue: string | number;
  actualValue: string | number;
  severity: 'low' | 'medium' | 'high';
  suggestion: string;
}

// 统计结果
export interface Statistics {
  count: number;
  mean: number;
  median: number;
  stdDev: number;
  min: number;
  max: number;
  quartiles: number[];
}

// 相关性
export interface Correlation {
  column1: string;
  column2: string;
  coefficient: number;
  significance: number;
}

// 趋势
export interface Trend {
  dimension: string;
  metric: string;
  direction: 'up' | 'down' | 'stable';
  slope: number;
  forecast: number[];
}

// 细分
export interface Segment {
  name: string;
  size: number;
  percentage: number;
  characteristics: string[];
}

// 图表配置
export interface ChartConfig {
  type: string;
  xAxis: AxisConfig;
  yAxis: AxisConfig;
  series: SeriesConfig[];
  legend: LegendConfig;
  tooltip: TooltipConfig;
}

export interface AxisConfig {
  field: string;
  title: string;
  type: 'category' | 'value' | 'time';
}

export interface SeriesConfig {
  field: string;
  type: string;
  color: string;
  label: boolean;
}

export interface LegendConfig {
  position: string;
  orient: string;
}

export interface TooltipConfig {
  trigger: string;
  formatter: string;
}

// 洞察
export interface Insight {
  id: string;
  title: string;
  description: string;
  confidence: number;
  priority: 'high' | 'medium' | 'low';
  category: string;
}

// 推荐
export interface Recommendation {
  id: string;
  title: string;
  description: string;
  expectedImpact: string;
  difficulty: 'easy' | 'medium' | 'hard';
  timeframe: string;
}

5.4 悬浮分析导航（DataFloatNavigation.ets）

typescript 复制代码 
// entry/src/main/ets/components/DataFloatNavigation.ets
import { window } from '@kit.ArkUI';
import { AgentState, AgentType, AgentPersonality } from '../agents/DataAgentScheduler';
import { DataDensityPhase } from './DataDensityLightEffect';

interface NavItem {
  id: string;
  icon: Resource;
  label: string;
  page: string;
  agentType?: AgentType;
}

@Component
export struct DataFloatNavigation {
  @State currentIndex: number = 0;
  @State navTransparency: number = 0.70;
  @State isExpanded: boolean = false;
  @State bottomAvoidHeight: number = 0;
  @State dataCount: number = 0;
  @State analysisProgress: number = 0;
  @State currentPhase: DataDensityPhase = DataDensityPhase.SPARSE;
  @State agentStates: Map<string, AgentState> = new Map([
    ['cleaner-1', AgentState.IDLE],
    ['analyzer-1', AgentState.IDLE],
    ['visualizer-1', AgentState.IDLE],
    ['insight-1', AgentState.IDLE]
  ]);

  private navItems: NavItem[] = [
    { id: 'data', icon: $r('app.media.ic_database'), label: '数据', page: 'DataPage' },
    { id: 'analysis', icon: $r('app.media.ic_analytics'), label: '分析', page: 'AnalysisPage', agentType: AgentType.ANALYZER },
    { id: 'chart', icon: $r('app.media.ic_chart'), label: '图表', page: 'ChartPage', agentType: AgentType.VISUALIZER },
    { id: 'insight', icon: $r('app.media.ic_lightbulb'), label: '洞察', page: 'InsightPage', agentType: AgentType.INSIGHT },
    { id: 'settings', icon: $r('app.media.ic_settings'), label: '设置', page: 'SettingsPage' }
  ];

  aboutToAppear(): void {
    this.getBottomAvoidArea();

    // 监听智能体状态更新
    AppStorage.watch('agent_state_update', (update: { agentId: string; state: string }) => {
      this.agentStates.set(update.agentId, update.state as AgentState);
    });

    // 监听数据指标
    AppStorage.watch('data_metrics', (metrics: { dataCount: number; analysisProgress: number }) => {
      this.dataCount = metrics.dataCount;
      this.analysisProgress = metrics.analysisProgress;
      this.updateDataPhase();
    });
  }

  private updateDataPhase(): void {
    if (this.dataCount < 1000) this.currentPhase = DataDensityPhase.SPARSE;
    else if (this.dataCount < 10000) this.currentPhase = DataDensityPhase.MODERATE;
    else if (this.dataCount < 100000) this.currentPhase = DataDensityPhase.DENSE;
    else this.currentPhase = DataDensityPhase.MASSIVE;
  }

  private async getBottomAvoidArea(): Promise<void> {
    try {
      const mainWindow = await window.getLastWindow();
      const avoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
      this.bottomAvoidHeight = avoidArea.bottomRect.height;
    } catch (error) {
      console.error('Failed to get avoid area:', error);
    }
  }

  private getAgentStateForNavItem(item: NavItem): AgentState {
    if (!item.agentType) return AgentState.IDLE;
    
    const agentIdMap: Record<string, string> = {
      [AgentType.CLEANER]: 'cleaner-1',
      [AgentType.ANALYZER]: 'analyzer-1',
      [AgentType.VISUALIZER]: 'visualizer-1',
      [AgentType.INSIGHT]: 'insight-1'
    };
    
    return this.agentStates.get(agentIdMap[item.agentType]) || AgentState.IDLE;
  }

  private getPhaseColor(): string {
    const colors: Record<DataDensityPhase, string> = {
      [DataDensityPhase.SPARSE]: '#1E3A8A',
      [DataDensityPhase.MODERATE]: '#10B981',
      [DataDensityPhase.DENSE]: '#F59E0B',
      [DataDensityPhase.MASSIVE]: '#EF4444'
    };
    return colors[this.currentPhase];
  }

  private getStateBadgeColor(state: AgentState): string {
    const colors: Record<AgentState, string> = {
      [AgentState.IDLE]: '#888888',
      [AgentState.THINKING]: '#8B5CF6',
      [AgentState.EXECUTING]: '#F97316',
      [AgentState.COMPLETED]: '#10B981',
      [AgentState.ERROR]: '#EF4444'
    };
    return colors[state] || '#888888';
  }

  private getStateBadgeAnimation(state: AgentState): object {
    switch (state) {
      case AgentState.THINKING:
        return {
          duration: 1500,
          curve: Curve.EaseInOut,
          iterations: -1,
          playMode: PlayMode.Alternate
        };
      case AgentState.EXECUTING:
        return {
          duration: 800,
          curve: Curve.Linear,
          iterations: -1
        };
      case AgentState.ERROR:
        return {
          duration: 400,
          curve: Curve.EaseInOut,
          iterations: -1,
          playMode: PlayMode.Alternate
        };
      default:
        return { duration: 0 };
    }
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        this.contentBuilder()
      }
      .padding({ bottom: this.bottomAvoidHeight + 90 })

      // 悬浮导航容器
      Column() {
        Stack() {
          // 玻璃拟态背景层
          Column()
            .width('100%')
            .height('100%')
            .backgroundBlurStyle(BlurStyle.REGULAR)
            .opacity(this.navTransparency)
            .backdropFilter($r('sys.blur.20'))

          // 渐变叠加层
          Column()
            .width('100%')
            .height('100%')
            .linearGradient({
              direction: GradientDirection.Top,
              colors: [
                ['rgba(255,255,255,0.15)', 0.0],
                ['rgba(255,255,255,0.05)', 1.0]
              ]
            })
        }
        .width('100%')
        .height('100%')
        .borderRadius(28)
        .shadow({
          radius: 24,
          color: 'rgba(0,0,0,0.25)',
          offsetX: 0,
          offsetY: -6
        })

        Column() {
          // 数据信息栏（展开时显示）
          if (this.isExpanded) {
            Row() {
              Column() {
                Text(`${this.dataCount.toLocaleString()}条`)
                  .fontSize(13)
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Bold)
                
                Text('数据量')
                  .fontSize(10)
                  .fontColor('rgba(255,255,255,0.6)')
              }
              .layoutWeight(1)

              Column() {
                Text(`${this.analysisProgress}%`)
                  .fontSize(13)
                  .fontColor(this.getProgressColor())
                  .fontWeight(FontWeight.Bold)
                
                Text('分析进度')
                  .fontSize(10)
                  .fontColor('rgba(255,255,255,0.6)')
              }
              .layoutWeight(1)

              Column() {
                Text(this.getPhaseLabel())
                  .fontSize(13)
                  .fontColor(this.getPhaseColor())
                  .fontWeight(FontWeight.Bold)
                
                Text('数据密度')
                  .fontSize(10)
                  .fontColor('rgba(255,255,255,0.6)')
              }
              .layoutWeight(1)
            }
            .width('100%')
            .height(50)
            .padding({ left: 16, right: 16 })
            .backgroundColor('rgba(0,0,0,0.2)')
            .borderRadius({ topLeft: 28, topRight: 28 })
          }

          // 导航页签
          Row() {
            ForEach(this.navItems, (item: NavItem, index: number) => {
              Column() {
                Stack() {
                  Image(item.icon)
                    .width(26)
                    .height(26)
                    .fillColor(this.currentIndex === index ? this.getPhaseColor() : '#AAAAAA')

                  // 智能体状态徽章
                  if (item.agentType && this.getAgentStateForNavItem(item) !== AgentState.IDLE) {
                    Column()
                      .width(10)
                      .height(10)
                      .backgroundColor(this.getStateBadgeColor(this.getAgentStateForNavItem(item)))
                      .borderRadius(5)
                      .position({ x: 20, y: -4 })
                      .shadow({
                        radius: 8,
                        color: this.getStateBadgeColor(this.getAgentStateForNavItem(item)),
                        offsetX: 0,
                        offsetY: 0
                      })
                      .animation(this.getStateBadgeAnimation(this.getAgentStateForNavItem(item)))
                  }
                }
                .width(44)
                .height(44)

                Text(item.label)
                  .fontSize(11)
                  .fontColor(this.currentIndex === index ? this.getPhaseColor() : '#BBBBBB')
                  .margin({ top: 4 })
              }
              .layoutWeight(1)
              .onClick(() => {
                this.currentIndex = index;
                this.triggerHapticFeedback();
                AppStorage.setOrCreate('nav_page_change', item.page);
              })
            })
          }
          .width('100%')
          .height(this.isExpanded ? 70 : 80)
          .padding({ left: 16, right: 16 })
          .justifyContent(FlexAlign.SpaceAround)

          // 透明度调节（展开时显示）
          if (this.isExpanded) {
            Row() {
              Text('透明度')
                .fontSize(12)
                .fontColor('rgba(255,255,255,0.7)')
                .margin({ right: 8 })

              Slider({
                value: this.navTransparency * 100,
                min: 55,
                max: 85,
                step: 15,
                style: SliderStyle.InSet
              })
                .width(120)
                .onChange((value: number) => {
                  this.navTransparency = value / 100;
                })

              Text(`${Math.round(this.navTransparency * 100)}%`)
                .fontSize(12)
                .fontColor('rgba(255,255,255,0.7)')
                .margin({ left: 8 })
            }
            .width('100%')
            .height(40)
            .justifyContent(FlexAlign.Center)
          }
        }
        .width('100%')
        .height('100%')
      }
      .width('92%')
      .height(this.isExpanded ? 160 : 80)
      .margin({ bottom: this.bottomAvoidHeight + 12, left: '4%', right: '4%' })
      .animation({
        duration: 350,
        curve: Curve.Spring,
        iterations: 1
      })
      .gesture(
        LongPressGesture({ duration: 600 })
          .onAction(() => {
            this.isExpanded = !this.isExpanded;
          })
      )
    }
    .width('100%')
    .height('100%')
  }

  private getPhaseLabel(): string {
    const labels: Record<DataDensityPhase, string> = {
      [DataDensityPhase.SPARSE]: '稀疏',
      [DataDensityPhase.MODERATE]: '适中',
      [DataDensityPhase.DENSE]: '密集',
      [DataDensityPhase.MASSIVE]: '海量'
    };
    return labels[this.currentPhase];
  }

  private getProgressColor(): string {
    if (this.analysisProgress >= 90) return '#10B981';
    if (this.analysisProgress >= 50) return '#F59E0B';
    return '#EF4444';
  }

  @BuilderParam contentBuilder: () => void = this.defaultContentBuilder;

  @Builder
  defaultContentBuilder(): void {
    Column() {
      Text('数据分析区域')
        .fontSize(16)
        .fontColor('#999999')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  private triggerHapticFeedback(): void {
    try {
      import('@kit.SensorServiceKit').then(sensor => {
        sensor.vibrator.startVibration({
          type: 'time',
          duration: 40
        }, { id: 0 });
      });
    } catch (error) {
      console.error('Haptic feedback failed:', error);
    }
  }
}

5.5 数据画布（DataCanvas.ets）

typescript 复制代码 
// entry/src/main/ets/components/DataCanvas.ets
import { DataAgentScheduler, DataQualityReport, Anomaly } from '../agents/DataAgentScheduler';

interface DataRow {
  id: number;
  date: string;
  region: string;
  product: string;
  sales: number;
  quantity: number;
  customerId: string;
}

@Component
export struct DataCanvas {
  @State dataRows: DataRow[] = [];
  @State selectedRows: Set<number> = new Set();
  @State sortColumn: string = '';
  @State sortDirection: 'asc' | 'desc' = 'asc';
  @State qualityReport: DataQualityReport | null = null;
  @State anomalies: Anomaly[] = [];
  private scheduler: DataAgentScheduler = DataAgentScheduler.getInstance();

  aboutToAppear(): void {
    // 模拟加载数据
    this.loadMockData();
  }

  private loadMockData(): void {
    const regions = ['华北', '华东', '华南', '西南', '西北'];
    const products = ['产品A', '产品B', '产品C', '产品D', '产品E'];
    
    this.dataRows = Array.from({ length: 1000 }, (_, i) => ({
      id: i + 1,
      date: `2026-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
      region: regions[Math.floor(Math.random() * regions.length)],
      product: products[Math.floor(Math.random() * products.length)],
      sales: Math.floor(Math.random() * 100000) + 1000,
      quantity: Math.floor(Math.random() * 1000) + 10,
      customerId: `C${String(Math.floor(Math.random() * 10000)).padStart(5, '0')}`
    }));

    // 同步数据量到全局
    AppStorage.setOrCreate('data_metrics', {
      dataCount: this.dataRows.length,
      analysisProgress: 0
    });
  }

  private async runDataCleaning(): Promise<void> {
    const result = await this.scheduler.cleanData(this.dataRows, 'sales');
    
    this.qualityReport = result.qualityReport;
    this.anomalies = result.anomalies;
    
    // 同步异常率到光效系统
    const anomalyRate = this.anomalies.length / this.dataRows.length;
    AppStorage.setOrCreate('anomaly_rate', anomalyRate);
  }

  private getColumnWidth(column: string): number {
    const widths: Record<string, number> = {
      'id': 60,
      'date': 120,
      'region': 80,
      'product': 100,
      'sales': 100,
      'quantity': 80,
      'customerId': 120
    };
    return widths[column] || 100;
  }

  private formatValue(value: string | number, column: string): string {
    if (column === 'sales') return `¥${Number(value).toLocaleString()}`;
    return String(value);
  }

  private getCellColor(row: DataRow, column: string): string {
    // 标记异常值
    const anomaly = this.anomalies.find(a => a.rowIndex === row.id - 1 && a.column === column);
    if (anomaly) {
      if (anomaly.severity === 'high') return 'rgba(239, 68, 68, 0.2)';
      if (anomaly.severity === 'medium') return 'rgba(249, 115, 22, 0.2)';
      return 'rgba(252, 211, 77, 0.2)';
    }
    return 'transparent';
  }

  build() {
    Column() {
      // 工具栏
      Row({ space: 12 }) {
        Button('🔍 数据清洗')
          .fontSize(12)
          .fontColor('#FFFFFF')
          .backgroundColor('#06B6D4')
          .padding({ left: 16, right: 16, top: 8, bottom: 8 })
          .borderRadius(16)
          .onClick(() => {
            this.runDataCleaning();
          })

        Button('📊 智能分析')
          .fontSize(12)
          .fontColor('#FFFFFF')
          .backgroundColor('#8B5CF6')
          .padding({ left: 16, right: 16, top: 8, bottom: 8 })
          .borderRadius(16)
          .onClick(() => {
            // 触发分析智能体
          })

        Button('📈 生成图表')
          .fontSize(12)
          .fontColor('#FFFFFF')
          .backgroundColor('#F59E0B')
          .padding({ left: 16, right: 16, top: 8, bottom: 8 })
          .borderRadius(16)
          .onClick(() => {
            // 触发可视化智能体
          })

        if (this.qualityReport) {
          Text(`质量: ${(this.qualityReport.completeness * 100).toFixed(0)}%`)
            .fontSize(11)
            .fontColor('#10B981')
            .backgroundColor('rgba(16, 185, 129, 0.2)')
            .padding({ left: 10, right: 10, top: 4, bottom: 4 })
            .borderRadius(10)
        }
      }
      .width('100%')
      .height(50)
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.Start)

      // 数据表格
      Scroll() {
        Column() {
          // 表头
          Row() {
            ForEach(['id', 'date', 'region', 'product', 'sales', 'quantity', 'customerId'], (column: string) => {
              Row() {
                Text(column.toUpperCase())
                  .fontSize(11)
                  .fontColor('rgba(255,255,255,0.7)')
                  .fontWeight(FontWeight.Medium)

                if (this.sortColumn === column) {
                  Text(this.sortDirection === 'asc' ? '▲' : '▼')
                    .fontSize(10)
                    .fontColor('#F59E0B')
                    .margin({ left: 4 })
                }
              }
              .width(this.getColumnWidth(column))
              .height(40)
              .padding({ left: 8, right: 8 })
              .backgroundColor('rgba(255,255,255,0.05)')
              .onClick(() => {
                if (this.sortColumn === column) {
                  this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                } else {
                  this.sortColumn = column;
                  this.sortDirection = 'asc';
                }
              })
            })
          }
          .width('100%')

          // 数据行
          List() {
            ForEach(this.getSortedData(), (row: DataRow) => {
              ListItem() {
                Row() {
                  ForEach(['id', 'date', 'region', 'product', 'sales', 'quantity', 'customerId'], (column: string) => {
                    Text(this.formatValue(row[column as keyof DataRow], column))
                      .fontSize(12)
                      .fontColor('#FFFFFF')
                      .width(this.getColumnWidth(column))
                      .height(36)
                      .padding({ left: 8, right: 8 })
                      .backgroundColor(this.getCellColor(row, column))
                      .textOverflow({ overflow: TextOverflow.Ellipsis })
                      .maxLines(1)
                  })
                }
                .width('100%')
                .backgroundColor(this.selectedRows.has(row.id) ? 'rgba(139, 92, 246, 0.2)' : 'transparent')
                .onClick(() => {
                  if (this.selectedRows.has(row.id)) {
                    this.selectedRows.delete(row.id);
                  } else {
                    this.selectedRows.add(row.id);
                  }
                  // 强制刷新
                  this.selectedRows = new Set(this.selectedRows);
                })
              }
            })
          }
          .width('100%')
          .height(400)
          .edgeEffect(EdgeEffect.Spring)
        }
        .width('100%')
      }
      .width('100%')
      .layoutWeight(1)
      .scrollable(ScrollDirection.Horizontal)

      // 分页控制
      Row({ space: 12 }) {
        Text(`共 ${this.dataRows.length.toLocaleString()} 条数据`)
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.6)')

        Text(`选中 ${this.selectedRows.size} 条`)
          .fontSize(12)
          .fontColor('#8B5CF6')

        if (this.anomalies.length > 0) {
          Text(`发现 ${this.anomalies.length} 个异常`)
            .fontSize(12)
            .fontColor('#EF4444')
        }
      }
      .width('100%')
      .height(40)
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(10, 10, 15, 0.95)')
    .borderRadius(16)
  }

  private getSortedData(): DataRow[] {
    if (!this.sortColumn) return this.dataRows;
    
    return [...this.dataRows].sort((a, b) => {
      const aVal = a[this.sortColumn as keyof DataRow];
      const bVal = b[this.sortColumn as keyof DataRow];
      
      if (typeof aVal === 'number' && typeof bVal === 'number') {
        return this.sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
      }
      
      return this.sortDirection === 'asc' 
        ? String(aVal).localeCompare(String(bVal))
        : String(bVal).localeCompare(String(aVal));
    });
  }
}

5.6 浮动图表窗口（ChartWindow.ets）

typescript 复制代码 
// entry/src/main/ets/windows/ChartWindow.ets
import { DataAgentScheduler, ChartConfig } from '../agents/DataAgentScheduler';

@Component
export struct ChartWindow {
  @State chartType: string = 'line';
  @State chartData: object[] = [];
  @State chartConfig: ChartConfig | null = null;
  private scheduler: DataAgentScheduler = DataAgentScheduler.getInstance();

  aboutToAppear(): void {
    // 监听图表生成请求
    AppStorage.watch('generate_chart', async (request: { type: string; data: object[] }) => {
      if (request) {
        await this.generateChart(request.type, request.data);
      }
    });
  }

  private async generateChart(type: string, data: object[]): Promise<void> {
    const result = await this.scheduler.generateVisualization(data, type);
    this.chartType = type;
    this.chartData = data;
    this.chartConfig = result.chartConfig;
  }

  private getChartColor(index: number): string {
    const colors = ['#8B5CF6', '#06B6D4', '#F59E0B', '#EF4444', '#10B981', '#F472B6'];
    return colors[index % colors.length];
  }

  build() {
    Column() {
      // 标题栏
      Row() {
        Text('📈 智能图表')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
        
        Row({ space: 8 }) {
          ForEach(['line', 'bar', 'pie', 'scatter'], (type: string) => {
            Text(type.toUpperCase())
              .fontSize(10)
              .fontColor(this.chartType === type ? '#FFFFFF' : 'rgba(255,255,255,0.5)')
              .backgroundColor(this.chartType === type ? '#8B5CF6' : 'rgba(255,255,255,0.1)')
              .padding({ left: 10, right: 10, top: 4, bottom: 4 })
              .borderRadius(8)
              .onClick(() => {
                this.chartType = type;
              })
          })
        }
      }
      .width('100%')
      .height(50)
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.SpaceBetween)

      // 图表区域
      Stack() {
        if (this.chartType === 'line') {
          this.buildLineChart()
        } else if (this.chartType === 'bar') {
          this.buildBarChart()
        } else if (this.chartType === 'pie') {
          this.buildPieChart()
        } else {
          this.buildScatterChart()
        }
      }
      .width('100%')
      .layoutWeight(1)
      .padding(16)

      // 图表信息
      if (this.chartConfig) {
        Column() {
          Text(`X轴: ${this.chartConfig.xAxis?.title || '未设置'}`)
            .fontSize(11)
            .fontColor('rgba(255,255,255,0.6)')

          Text(`Y轴: ${this.chartConfig.yAxis?.title || '未设置'}`)
            .fontSize(11)
            .fontColor('rgba(255,255,255,0.6)')
            .margin({ top: 4 })
        }
        .width('100%')
        .padding(12)
        .backgroundColor('rgba(255,255,255,0.03)')
        .borderRadius(8)
        .margin({ left: 16, right: 16, bottom: 12 })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(10, 10, 15, 0.95)')
    .borderRadius(16)
  }

  @Builder
  buildLineChart(): void {
    // 简化的折线图实现
    Column() {
      // Y轴
      Row() {
        Column() {
          ForEach([100, 75, 50, 25, 0], (val: number) => {
            Text(`${val}k`)
              .fontSize(10)
              .fontColor('rgba(255,255,255,0.5)')
              .height('20%')
          })
        }
        .width(40)
        .height('100%')

        // 图表区域
        Stack() {
          // 网格线
          Column() {
            ForEach([0, 1, 2, 3, 4], () => {
              Row()
                .width('100%')
                .height('20%')
                .border({ width: { bottom: 1 }, color: 'rgba(255,255,255,0.05)' })
            })
          }
          .width('100%')
          .height('100%')

          // 折线
          Canvas(this.getUIContext())
            .width('100%')
            .height('100%')
            .onReady((context) => {
              const ctx = context.renderingContext;
              const width = context.width;
              const height = context.height;
              
              ctx.strokeStyle = '#8B5CF6';
              ctx.lineWidth = 2;
              ctx.beginPath();
              
              const points = [0.2, 0.4, 0.3, 0.7, 0.5, 0.8, 0.6];
              points.forEach((point, index) => {
                const x = (index / (points.length - 1)) * width;
                const y = height - (point * height);
                if (index === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
              });
              
              ctx.stroke();
              
              // 数据点
              points.forEach((point, index) => {
                const x = (index / (points.length - 1)) * width;
                const y = height - (point * height);
                ctx.fillStyle = '#8B5CF6';
                ctx.beginPath();
                ctx.arc(x, y, 4, 0, Math.PI * 2);
                ctx.fill();
              });
            })
        }
        .width('100%')
        .height('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')

      // X轴
      Row() {
        ForEach(['1月', '2月', '3月', '4月', '5月', '6月', '7月'], (label: string) => {
          Text(label)
            .fontSize(10)
            .fontColor('rgba(255,255,255,0.5)')
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
        })
      }
      .width('100%')
      .height(30)
      .padding({ left: 40 })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildBarChart(): void {
    Row({ space: 8 }) {
      ForEach([65, 45, 80, 55, 70, 90, 60], (value: number, index: number) => {
        Column() {
          Text(`${value}`)
            .fontSize(10)
            .fontColor('#FFFFFF')
            .margin({ bottom: 4 })

          Column()
            .width(30)
            .height(`${value}%`)
            .backgroundColor(this.getChartColor(index))
            .borderRadius({ topLeft: 4, topRight: 4 })
            .animation({
              duration: 1000,
              curve: Curve.EaseOut
            })
        }
        .layoutWeight(1)
        .height('100%')
        .justifyContent(FlexAlign.End)
      })
    }
    .width('100%')
    .height('100%')
    .padding({ bottom: 30 })
  }

  @Builder
  buildPieChart(): void {
    Stack() {
      Canvas(this.getUIContext())
        .width(200)
        .height(200)
        .onReady((context) => {
          const ctx = context.renderingContext;
          const centerX = context.width / 2;
          const centerY = context.height / 2;
          const radius = Math.min(centerX, centerY) - 10;
          
          const data = [30, 25, 20, 15, 10];
          let startAngle = 0;
          
          data.forEach((value, index) => {
            const angle = (value / 100) * Math.PI * 2;
            
            ctx.fillStyle = this.getChartColor(index);
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, radius, startAngle, startAngle + angle);
            ctx.closePath();
            ctx.fill();
            
            startAngle += angle;
          });
        })

      // 图例
      Column() {
        ForEach(['产品A', '产品B', '产品C', '产品D', '产品E'], (label: string, index: number) => {
          Row({ space: 8 }) {
            Circle()
              .width(10)
              .height(10)
              .fill(this.getChartColor(index))

            Text(label)
              .fontSize(11)
              .fontColor('#FFFFFF')
          }
          .margin({ bottom: 6 })
        })
      }
      .position({ x: '70%', y: '30%' })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildScatterChart(): void {
    Stack() {
      Canvas(this.getUIContext())
        .width('100%')
        .height('100%')
        .onReady((context) => {
          const ctx = context.renderingContext;
          const width = context.width;
          const height = context.height;
          
          // 绘制散点
          for (let i = 0; i < 50; i++) {
            const x = Math.random() * width;
            const y = Math.random() * height;
            const size = Math.random() * 8 + 4;
            
            ctx.fillStyle = this.getChartColor(Math.floor(Math.random() * 6));
            ctx.globalAlpha = 0.6;
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fill();
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}

5.7 浮动洞察推荐器（InsightRecommender.ets）

typescript 复制代码 
// entry/src/main/ets/components/InsightRecommender.ets
import { DataAgentScheduler, Insight, Recommendation } from '../agents/DataAgentScheduler';

@Component
export struct InsightRecommender {
  @State insights: Insight[] = [];
  @State recommendations: Recommendation[] = [];
  @State selectedInsight: string = '';
  private scheduler: DataAgentScheduler = DataAgentScheduler.getInstance();

  aboutToAppear(): void {
    // 监听洞察生成请求
    AppStorage.watch('generate_insights', async (analysisResult: object) => {
      if (analysisResult) {
        await this.generateInsights(analysisResult);
      }
    });
  }

  private async generateInsights(analysisResult: object): Promise<void> {
    const result = await this.scheduler.generateInsights(analysisResult, 'high');
    
    this.insights = result.insights;
    this.recommendations = result.recommendations;
  }

  private getPriorityColor(priority: string): string {
    const colors: Record<string, string> = {
      'high': '#EF4444',
      'medium': '#F59E0B',
      'low': '#10B981'
    };
    return colors[priority] || '#888888';
  }

  private getDifficultyColor(difficulty: string): string {
    const colors: Record<string, string> = {
      'easy': '#10B981',
      'medium': '#F59E0B',
      'hard': '#EF4444'
    };
    return colors[difficulty] || '#888888';
  }

  build() {
    Column() {
      // 标题栏
      Row() {
        Text('💡 智能洞察')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
        
        Text(`${this.insights.length} 条`)
          .fontSize(12)
          .fontColor('#10B981')
          .backgroundColor('rgba(16, 185, 129, 0.2)')
          .padding({ left: 10, right: 10, top: 4, bottom: 4 })
          .borderRadius(12)
      }
      .width('100%')
      .height(50)
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.SpaceBetween)

      // 洞察列表
      List() {
        ForEach(this.insights, (insight: Insight) => {
          ListItem() {
            Column() {
              Row() {
                Text(insight.title)
                  .fontSize(13)
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Medium)
                  .layoutWeight(1)

                Text(`${(insight.confidence * 100).toFixed(0)}%`)
                  .fontSize(11)
                  .fontColor(this.getPriorityColor(insight.priority))
                  .backgroundColor(`${this.getPriorityColor(insight.priority)}20`)
                  .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                  .borderRadius(8)
              }
              .width('100%')

              Text(insight.description)
                .fontSize(12)
                .fontColor('rgba(255,255,255,0.7)')
                .margin({ top: 6, bottom: 6 })
                .maxLines(3)
                .textOverflow({ overflow: TextOverflow.Ellipsis })

              Row({ space: 8 }) {
                Text(insight.category)
                  .fontSize(10)
                  .fontColor('rgba(255,255,255,0.5)')
                  .backgroundColor('rgba(255,255,255,0.1)')
                  .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                  .borderRadius(6)

                Text(`优先级: ${insight.priority}`)
                  .fontSize(10)
                  .fontColor(this.getPriorityColor(insight.priority))
              }
            }
            .width('100%')
            .padding(12)
            .backgroundColor(this.selectedInsight === insight.id ? 'rgba(139, 92, 246, 0.2)' : 'rgba(255,255,255,0.05)')
            .borderRadius(12)
            .border({
              width: this.selectedInsight === insight.id ? 1 : 0,
              color: 'rgba(139, 92, 246, 0.5)'
            })
            .onClick(() => {
              this.selectedInsight = insight.id;
            })
          }
          .margin({ bottom: 8 })
        })
      }
      .width('100%')
      .layoutWeight(1)
      .padding({ left: 12, right: 12 })
      .edgeEffect(EdgeEffect.Spring)

      // 推荐行动
      if (this.recommendations.length > 0) {
        Column() {
          Text('🎯 推荐行动')
            .fontSize(14)
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Medium)
            .margin({ bottom: 12 })

          List() {
            ForEach(this.recommendations.slice(0, 3), (rec: Recommendation) => {
              ListItem() {
                Row() {
                  Column() {
                    Text(rec.title)
                      .fontSize(12)
                      .fontColor('#FFFFFF')
                      .maxLines(1)
                      .textOverflow({ overflow: TextOverflow.Ellipsis })

                    Text(rec.description)
                      .fontSize(11)
                      .fontColor('rgba(255,255,255,0.5)')
                      .margin({ top: 4 })
                      .maxLines(2)
                      .textOverflow({ overflow: TextOverflow.Ellipsis })
                  }
                  .layoutWeight(1)

                  Column() {
                    Text(rec.difficulty)
                      .fontSize(10)
                      .fontColor(this.getDifficultyColor(rec.difficulty))
                      .backgroundColor(`${this.getDifficultyColor(rec.difficulty)}20`)
                      .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                      .borderRadius(6)

                    Text(rec.timeframe)
                      .fontSize(10)
                      .fontColor('rgba(255,255,255,0.5)')
                      .margin({ top: 4 })
                  }
                }
                .width('100%')
                .padding(10)
                .backgroundColor('rgba(255,255,255,0.03)')
                .borderRadius(8)
              }
              .margin({ bottom: 6 })
            })
          }
          .width('100%')
          .height(180)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('rgba(255,255,255,0.05)')
        .borderRadius(12)
        .margin({ left: 12, right: 12, top: 12 })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(10, 10, 15, 0.95)')
    .borderRadius(16)
  }
}

5.8 多窗口光效同步管理器（WindowLightSync.ets）

typescript 复制代码 
// entry/src/main/ets/utils/WindowLightSync.ets
import { window } from '@kit.WindowManagerKit';

export class WindowLightSync {
  private static instance: WindowLightSync;
  private subWindows: Map<string, window.Window> = new Map();
  private currentTheme: string = '#1E3A8A';
  private currentIntensity: number = 0.6;

  private constructor() {}

  static getInstance(): WindowLightSync {
    if (!WindowLightSync.instance) {
      WindowLightSync.instance = new WindowLightSync();
    }
    return WindowLightSync.instance;
  }

  async registerSubWindow(name: string, win: window.Window): Promise<void> {
    this.subWindows.set(name, win);
    await this.syncLightToWindow(win);
  }

  async syncGlobalLightEffect(themeColor: string, intensity?: number): Promise<void> {
    this.currentTheme = themeColor;
    if (intensity !== undefined) {
      this.currentIntensity = intensity;
    }

    for (const [name, win] of this.subWindows) {
      await this.syncLightToWindow(win);
    }

    AppStorage.setOrCreate('global_theme_color', this.currentTheme);
    AppStorage.setOrCreate('global_light_intensity', this.currentIntensity);
  }

  private async syncLightToWindow(win: window.Window): Promise<void> {
    try {
      await win.setWindowBackgroundColor(`${this.currentTheme}20`);
      await win.setWindowShadow({
        radius: 20,
        color: `${this.currentTheme}40`,
        offsetX: 0,
        offsetY: 4
      });
    } catch (error) {
      console.error(`Failed to sync light to window:`, error);
    }
  }

  async handleFocusChange(focusedWindowName: string): Promise<void> {
    for (const [name, win] of this.subWindows) {
      const isFocused = name === focusedWindowName;
      const intensity = isFocused ? this.currentIntensity : this.currentIntensity * 0.4;
      
      try {
        await win.setWindowBackgroundColor(`${this.currentTheme}${Math.floor(intensity * 255).toString(16).padStart(2, '0')}`);
      } catch (error) {
        console.error(`Failed to handle focus change:`, error);
      }
    }
  }

  async createDataPanelWindow(): Promise<window.Window> {
    const dataPanelWindow = await window.createWindow({
      name: 'data_panel_float',
      windowType: window.WindowType.TYPE_FLOAT,
      ctx: getContext()
    });

    await dataPanelWindow.moveWindowTo(1200, 100);
    await dataPanelWindow.resize(320, 500);
    await dataPanelWindow.setWindowLayoutFullScreen(true);
    await dataPanelWindow.setWindowBackgroundColor('#00000000');

    this.registerSubWindow('data_panel', dataPanelWindow);
    return dataPanelWindow;
  }

  async createChartWindow(): Promise<window.Window> {
    const chartWindow = await window.createWindow({
      name: 'chart_float',
      windowType: window.WindowType.TYPE_FLOAT,
      ctx: getContext()
    });

    await chartWindow.moveWindowTo(50, 100);
    await chartWindow.resize(300, 320);
    await chartWindow.setWindowLayoutFullScreen(true);
    await chartWindow.setWindowBackgroundColor('#00000000');

    this.registerSubWindow('chart , chartWindow);
    return chartWindow;
  }

  async createInsightWindow(): Promise<window.Window> {
    const insightWindow = await window.createWindow({
      name: 'insight_float',
      windowType: window.WindowType.TYPE_FLOAT,
      ctx: getContext()
    });

    await insightWindow.moveWindowTo(50, 450);
    await insightWindow.resize(300, 350);
    await insightWindow.setWindowLayoutFullScreen(true);
    await insightWindow.setWindowBackgroundColor('#00000000');

    this.registerSubWindow('insight', insightWindow);
    return insightWindow;
  }
}

5.9 主页面集成（DataVisionPage.ets）

typescript 复制代码 
// entry/src/main/ets/pages/DataVisionPage.ets
import { DataDensityLightEffect, DataDensityPhase, AnomalySeverity } from '../components/DataDensityLightEffect';
import { DataFloatNavigation } from '../components/DataFloatNavigation';
import { DataCanvas } from '../components/DataCanvas';
import { ChartWindow } from '../windows/ChartWindow';
import { InsightRecommender } from '../components/InsightRecommender';
import { WindowLightSync } from '../utils/WindowLightSync';
import { DataAgentScheduler } from '../agents/DataAgentScheduler';

@Entry
@Component
struct DataVisionPage {
  @State currentPage: string = 'DataPage';
  @State dataCount: number = 0;
  @State analysisProgress: number = 0;
  @State anomalyRate: number = 0;
  @State isAnalysisRunning: boolean = false;
  private windowSync: WindowLightSync = WindowLightSync.getInstance();
  private scheduler: DataAgentScheduler = DataAgentScheduler.getInstance();

  aboutToAppear(): async () => {
    await this.scheduler.initialize();
    await this.initializeWindows();
    this.startMetricsSimulation();

    AppStorage.watch('nav_page_change', (page: string) => {
      this.currentPage = page;
    });
  }

  private async initializeWindows(): Promise<void> {
    await this.windowSync.createDataPanelWindow();
    await this.windowSync.createChartWindow();
    await this.windowSync.createInsightWindow();
  }

  private startMetricsSimulation(): void {
    setInterval(() => {
      // 模拟数据量变化
      const fluctuation = Math.floor(Math.random() * 1000) - 200;
      this.dataCount = Math.max(500, this.dataCount + fluctuation);
      this.analysisProgress = Math.min(100, this.analysisProgress + Math.floor(Math.random() * 5));

      // 同步到全局状态
      AppStorage.setOrCreate('data_metrics', {
        dataCount: this.dataCount,
        analysisProgress: this.analysisProgress
      });

      // 同步光效
      const phase = this.getCurrentPhase();
      const themeColor = this.getPhaseColor(phase);
      this.windowSync.syncGlobalLightEffect(themeColor, this.getIntensityByProgress());
    }, 5000);
  }

  private getCurrentPhase(): DataDensityPhase {
    if (this.dataCount < 1000) return DataDensityPhase.SPARSE;
    if (this.dataCount < 10000) return DataDensityPhase.MODERATE;
    if (this.dataCount < 100000) return DataDensityPhase.DENSE;
    return DataDensityPhase.MASSIVE;
  }

  private getPhaseColor(phase: DataDensityPhase): string {
    const colors: Record<DataDensityPhase, string> = {
      [DataDensityPhase.SPARSE]: '#1E3A8A',
      [DataDensityPhase.MODERATE]: '#10B981',
      [DataDensityPhase.DENSE]: '#F59E0B',
      [DataDensityPhase.MASSIVE]: '#EF4444'
    };
    return colors[phase];
  }

  private getIntensityByProgress(): number {
    if (this.analysisProgress > 70) return 1.0;
    if (this.analysisProgress > 30) return 0.6;
    return 0.3;
  }

  build() {
    Stack() {
      // 底层：沉浸光效层
      DataDensityLightEffect({
        dataCount: this.dataCount,
        anomalyRate: this.anomalyRate,
        analysisProgress: this.analysisProgress
      })

      // 中层：主内容区域
      Column() {
        this.buildHeader()
        
        Stack() {
          if (this.currentPage === 'DataPage') {
            DataCanvas()
          } else if (this.currentPage === 'AnalysisPage') {
            this.buildAnalysisPage()
          } else if (this.currentPage === 'ChartPage') {
            ChartWindow()
          } else if (this.currentPage === 'InsightPage') {
            InsightRecommender()
          }
        }
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')

      // 顶层：悬浮导航
      DataFloatNavigation({
        contentBuilder: () => {}
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#050508')
    .expandSafeArea(
      [SafeAreaType.SYSTEM],
      [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]
    )
  }

  @Builder
  buildHeader(): void {
    Row() {
      Column() {
        Text('📊 数智视界')
          .fontSize(20)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
        
        Text(`数据量: ${this.dataCount.toLocaleString()}条 | 分析进度: ${this.analysisProgress}%`)
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.6)')
          .margin({ top: 4 })
      }
      .alignItems(HorizontalAlign.Start)

      Row({ space: 12 }) {
        Button(this.isAnalysisRunning ? '⏸️ 暂停' : '▶️ 开始分析')
          .fontSize(13)
          .fontColor('#FFFFFF')
          .backgroundColor(this.isAnalysisRunning ? '#F59E0B' : '#10B981')
          .padding({ left: 20, right: 20, top: 8, bottom: 8 })
          .borderRadius(20)
          .onClick(() => {
            this.isAnalysisRunning = !this.isAnalysisRunning;
          })

        Button('🤖 智能体面板')
          .fontSize(13)
          .fontColor('#FFFFFF')
          .backgroundColor('rgba(255,255,255,0.1)')
          .padding({ left: 16, right: 16, top: 8, bottom: 8 })
          .borderRadius(20)
          .onClick(() => {
            AppStorage.setOrCreate('show_agent_panel', true);
          })
      }
    }
    .width('100%')
    .height(70)
    .padding({ left: 24, right: 24 })
    .backgroundBlurStyle(BlurStyle.REGULAR)
    .backdropFilter($r('sys.blur.20'))
    .border({
      width: { bottom: 1 },
      color: 'rgba(255,255,255,0.1)'
    })
    .justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder
  buildAnalysisPage(): void {
    Column() {
      Text('🔬 智能分析')
        .fontSize(18)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      // 分析类型选择
      Grid() {
        GridItem() {
          this.buildAnalysisCard('描述性分析', '统计概览', '#06B6D4', '📈')
        }
        
        GridItem() {
          this.buildAnalysisCard('诊断性分析', '根因挖掘', '#8B5CF6', '🔍')
        }
        
        GridItem() {
          this.buildAnalysisCard('预测性分析', '趋势预测', '#F59E0B', '🔮')
        }
        
        GridItem() {
          this.buildAnalysisCard('规范性分析', '决策建议', '#10B981', '💡')
        }
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('90%')
      .height(280)
      .gap(16)

      // 分析进度
      if (this.isAnalysisRunning) {
        Column() {
          Text('分析进行中...')
            .fontSize(14)
            .fontColor('#FFFFFF')
            .margin({ bottom: 12 })

          Progress({ value: this.analysisProgress, total: 100, type: ProgressType.Linear })
            .width('80%')
            .color('#8B5CF6')
            .backgroundColor('rgba(255,255,255,0.1)')

          Text(`${this.analysisProgress}%`)
            .fontSize(12)
            .fontColor('rgba(255,255,255,0.6)')
            .margin({ top: 8 })
        }
        .width('90%')
        .padding(20)
        .backgroundColor('rgba(255,255,255,0.05)')
        .borderRadius(12)
        .margin({ top: 20 })
      }

      // 分析结果预览
      Column() {
        Text('📋 分析结果预览')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Medium)
          .margin({ bottom: 12 })

        Row({ space: 16 }) {
          this.buildStatCard('平均值', '¥45,230', '#06B6D4')
          this.buildStatCard('中位数', '¥38,500', '#8B5CF6')
          this.buildStatCard('标准差', '¥12,800', '#F59E0B')
          this.buildStatCard('最大值', '¥128,000', '#EF4444')
        }
      }
      .width('90%')
      .padding(16)
      .backgroundColor('rgba(255,255,255,0.05)')
      .borderRadius(12)
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildAnalysisCard(title: string, desc: string, color: string, icon: string): void {
    Column() {
      Text(icon)
        .fontSize(32)
        .margin({ bottom: 8 })

      Text(title)
        .fontSize(14)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Medium)

      Text(desc)
        .fontSize(11)
        .fontColor('rgba(255,255,255,0.5)')
        .margin({ top: 4 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(`${color}15`)
    .borderRadius(12)
    .border({ width: 2, color: `${color}30` })
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 触发对应分析
    })
  }

  @Builder
  buildStatCard(label: string, value: string, color: string): void {
    Column() {
      Text(value)
        .fontSize(16)
        .fontColor(color)
        .fontWeight(FontWeight.Bold)

      Text(label)
        .fontSize(10)
        .fontColor('rgba(255,255,255,0.5)')
        .margin({ top: 4 })
    }
    .width('100%')
    .height(70)
    .backgroundColor('rgba(255,255,255,0.03)')
    .borderRadius(8)
    .justifyContent(FlexAlign.Center)
  }
}

六、关键技术总结

6.1 HMAF数据分析智能体开发清单

技术点 API/方法 应用场景
智能体会话创建 hmaf.createAgentSession({ mode: MULTI_AGENT }) 四层智能体协同分析
意图解析 intents.createIntentEngine({ supportedDomains }) 分析师指令意图识别
任务分发 hmafSession.sendTask({ targetAgent, taskType }) 智能体间分析任务调度
状态监听 AppStorage 全局状态回调 跨组件分析状态同步
分布式协同 enableDistributed: true 多设备协作分析
LLM数据清洗 modelType: 'llm' 清洗智能体预处理数据
统计分析 modelType: 'llm' 分析智能体建模分析
洞察生成 modelType: 'llm' 洞察智能体生成报告

6.2 沉浸光感实现清单

技术点 API/方法 应用场景
系统材质效果 systemMaterialEffect: SystemMaterialEffect.IMMERSIVE 标题栏沉浸效果
背景模糊 backgroundBlurStyle(BlurStyle.REGULAR) 悬浮导航玻璃拟态
背景滤镜 backdropFilter($r('sys.blur.20')) 精细模糊控制
安全区扩展 expandSafeArea([SafeAreaType.SYSTEM], [...]) 全屏沉浸布局
窗口沉浸 setWindowLayoutFullScreen(true) 无边框模式
光效动画 animation({ duration, iterations: -1 }) 数据密度脉搏呼吸灯
动态透明度 backgroundOpacity 焦点感知降级
窗口阴影 setWindowShadow({ radius, color }) 跨窗口光效联动

6.3 数据密度阶段光效映射

数据密度阶段 数据量范围 主题色 脉冲周期 光效强度
稀疏 <1000条 深海蓝 #1E3A8A 4秒 30%
适中 1000-10000条 薄荷绿 #10B981 2秒 60%
密集 10000-100000条 活力橙 #F59E0B 1秒 80%
海量 >100000条 炽烈红 #EF4444 0.5秒 100%

6.4 智能体状态徽章动画

智能体状态 徽章颜色 动画效果 分析含义
空闲 #888888 静态 智能体待命
思考中 #8B5CF6 呼吸脉冲 LLM分析数据中
执行中 #F97316 旋转进度 清洗/可视化处理中
已完成 #10B981 静态 任务执行成功
异常 #EF4444 快速闪烁 数据质量异常

6.5 性能优化建议

  1. 光效渲染优化 ：使用willChange: true标记频繁变化的动画层，避免全量重绘
  2. 智能体并发控制 ：通过maxConcurrentAgents: 4限制并发，防止资源争抢
  3. 数据虚拟化：当数据超过10000条时，使用虚拟滚动
  4. 窗口管理 ：子窗口使用TYPE_FLOAT类型，避免创建过多独立进程
  5. 分析节流：数据分析频率控制在5秒/次，避免频繁计算

七、总结与展望

本文基于HarmonyOS 6（API 23）的HMAF智能体框架、悬浮导航与沉浸光感特性，构建了一套面向PC端数据分析的"数智视界"系统。核心创新点包括：

  1. 四层智能体协作架构：清洗、分析、可视化、洞察四大智能体通过HMAF的A2A模式实时协作，将分析师从重复性数据处理中解放出来
  2. 数据密度光效系统：基于实时数据量与异常值的动态光效渲染，让分析师"看见"数据的特征
  3. 悬浮分析导航：底部玻璃拟态导航承载四大模块，智能体状态徽章实时反馈，数据信息一键展开
  4. 多窗口光效联动 ：主窗口与三个浮动子窗口通过WindowLightSync实现跨窗口光效同步，焦点感知自动调节
  5. 异常值警示光效：基于统计异常检测，触发不同光效警示，帮助分析师快速定位数据质量问题

随着HarmonyOS生态的持续发展，数据分析智能体将向着"数字人分析师""多模态交互""跨设备协作分析"等方向演进。HMAF框架的分布式能力与HarmonyOS的跨端协同特性，将为数据分析带来"一机控全局、多屏协同析"的全新体验。

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

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

相关推荐
前端不太难10 小时前
从单页面到系统化：鸿蒙 App 演进路径
华为·状态模式·harmonyos
想你依然心痛11 小时前
HarmonyOS 6（API 23）实战：基于悬浮导航、沉浸光感与HMAF的“文思智脑“——PC端AI智能体沉浸式智能写作工作台
人工智能·ar·harmonyos·ai写作
小雨青年11 小时前
鸿蒙 HarmonyOS 6 | Pura X Max 鸿蒙原生适配 09：展开态列表增加字段但不变复杂
华为·harmonyos
richard_yuu11 小时前
鸿蒙治愈游戏模块实战｜四大轻量解压游戏、ArkTS动画交互与低功耗落地
游戏·交互·harmonyos
SZLSDH15 小时前
场景适配论 | 数字孪生IOC建设中渲染技术与智能体能力的协同逻辑
前端·数据库·ai·数字孪生·数据可视化·智能体
阿钱真强道16 小时前
24 鸿蒙LiteOS GPIO中断实战：从原理到上升沿/下降沿详解
harmonyos·中断·rk·liteos·开源鸿蒙·瑞芯微·rk2206
小崽崽116 小时前
华为云云主机 + DeepSeek｜快速实现华为云DeepSeek大模型搭建“腾讯云代码助手”客户端集成DeepSeek模型
华为·华为云·腾讯云
cd_9492172118 小时前
鸿蒙系统下抖音存储空间不足怎么办？缓存清理教程
缓存·华为·harmonyos
忆~遂愿20 小时前
从文字应答到具象共情：Agent 交互的底层革新
人工智能·深度学习·目标检测·microsoft·机器学习·ar·交互
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07几个好用的ip纯净度检测网站08【AI】2026 年具身智能模型和世界模型总结09用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比10codex app每次打开重连5次Reconnecting问题解决