【鸿蒙开发】鸿蒙 ArkTS 语言从零到一完整指南

// ArkTS 组件示例
@Entry
@Component
struct HelloWorld {
  @State message: string = 'Hello, ArkTS!'
  @State counter: number = 0

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })
      
      Button(`点击次数: ${this.counter}`)
        .onClick(() => {
          this.counter++
          this.message = `你已经点击了 ${this.counter} 次`
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

# 1. 下载并安装 DevEco Studio
# 访问华为开发者官网下载最新版本

# 2. 配置 SDK 和工具链
# 在 DevEco Studio 中配置 HarmonyOS SDK

# 3. 创建新项目
# 选择 ArkTS 模板创建项目

# 4. 项目结构示例
src/
├── main/
│   ├── ets/           # ArkTS 源码目录
│   │   ├── entryability/
│   │   ├── pages/     # 页面文件
│   │   └── common/    # 公共模块
│   ├── resources/     # 资源文件
│   └── module.json5   # 模块配置

// 基本变量声明
let userName: string = "张三"
const userAge: number = 25
var isActive: boolean = true

// 类型推断
let autoString = "自动推断为 string 类型"
let autoNumber = 42  // 自动推断为 number 类型

// 可选类型
let optionalValue: string | undefined = undefined

// 联合类型
let mixedValue: string | number = "可以是字符串"
mixedValue = 123  // 也可以是数字

// 数值类型 - 支持整数和浮点数
let integer: number = 42
let float: number = 3.14159
let hexNumber: number = 0xFF  // 十六进制
let binaryNumber: number = 0b1010  // 二进制

// 字符串类型 - 支持模板字符串
let singleQuote: string = '单引号字符串'
let doubleQuote: string = "双引号字符串"
let templateString: string = `模板字符串，当前时间：${new Date()}`

// 布尔类型
let isReady: boolean = true
let isCompleted: boolean = false

// 空值类型
let nullValue: null = null
let undefinedValue: undefined = undefined

// Symbol 类型（用于创建唯一标识符）
let uniqueId: symbol = Symbol('id')

class StringUtils {
  // 字符串格式化
  static format(template: string, ...args: any[]): string {
    return template.replace(/{(\d+)}/g, (match, index) => {
      return args[index] !== undefined ? args[index] : match
    })
  }

  // 字符串验证
  static isEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }
}

// 使用示例
let message = StringUtils.format("用户 {0} 的年龄是 {1} 岁", "李四", 30)
console.log(message)  // 输出：用户 李四 的年龄是 30 岁

// 数组类型定义
let numbers: number[] = [1, 2, 3, 4, 5]
let strings: Array<string> = ["apple", "banana", "orange"]

// 元组类型（固定长度和类型的数组）
let coordinate: [number, number] = [10, 20]
let userInfo: [string, number, boolean] = ["张三", 25, true]

// 对象类型
interface User {
  id: number
  name: string
  email?: string  // 可选属性
  readonly createTime: Date  // 只读属性
}

let user: User = {
  id: 1,
  name: "王五",
  createTime: new Date()
}

// 泛型集合操作
class DataProcessor<T> {
  private data: T[] = []

  add(item: T): void {
    this.data.push(item)
  }

  filter(predicate: (item: T) => boolean): T[] {
    return this.data.filter(predicate)
  }

  map<U>(transform: (item: T) => U): U[] {
    return this.data.map(transform)
  }
}

// 使用示例
let processor = new DataProcessor<User>()
processor.add(user)
let activeUsers = processor.filter(u => u.email !== undefined)

// 基本函数定义
function calculateArea(width: number, height: number): number {
  return width * height
}

// 箭头函数
const multiply = (a: number, b: number): number => a * b

// 可选参数和默认参数
function greet(name: string, title?: string, greeting: string = "你好"): string {
  const fullName = title ? `${title} ${name}` : name
  return `${greeting}, ${fullName}!`
}

// 剩余参数
function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0)
}

// 函数重载
function process(value: string): string
function process(value: number): number
function process(value: string | number): string | number {
  if (typeof value === 'string') {
    return value.toUpperCase()
  }
  return value * 2
}

// 高阶函数示例
function createValidator<T>(
  validationFn: (value: T) => boolean,
  errorMessage: string
) {
  return (value: T): { isValid: boolean; message?: string } => {
    const isValid = validationFn(value)
    return {
      isValid,
      message: isValid ? undefined : errorMessage
    }
  }
}

// 使用示例
const emailValidator = createValidator<string>(
  (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
  "请输入有效的邮箱地址"
)

console.log(emailValidator("test@example.com"))  // { isValid: true }
console.log(emailValidator("invalid-email"))     // { isValid: false, message: "请输入有效的邮箱地址" }

// 抽象基类
abstract class Shape {
  protected color: string

  constructor(color: string) {
    this.color = color
  }

  abstract calculateArea(): number
  
  getColor(): string {
    return this.color
  }

  // 模板方法模式
  display(): string {
    return `这是一个${this.color}的图形，面积为${this.calculateArea()}`
  }
}

// 具体实现类
class Rectangle extends Shape {
  private width: number
  private height: number

  constructor(color: string, width: number, height: number) {
    super(color)
    this.width = width
    this.height = height
  }

  calculateArea(): number {
    return this.width * this.height
  }
}

class Circle extends Shape {
  private radius: number

  constructor(color: string, radius: number) {
    super(color)
    this.radius = radius
  }

  calculateArea(): number {
    return Math.PI * this.radius * this.radius
  }
}

// 工厂模式
class ShapeFactory {
  static createShape(type: 'rectangle' | 'circle', ...args: any[]): Shape {
    switch (type) {
      case 'rectangle':
        return new Rectangle(args[0], args[1], args[2])
      case 'circle':
        return new Circle(args[0], args[1])
      default:
        throw new Error(`不支持的图形类型: ${type}`)
    }
  }
}

// 接口定义
interface Drawable {
  draw(): void
}

interface Movable {
  move(x: number, y: number): void
}

// 多接口实现
class GameSprite implements Drawable, Movable {
  private x: number = 0
  private y: number = 0
  private image: string

  constructor(image: string) {
    this.image = image
  }

  draw(): void {
    console.log(`在位置 (${this.x}, ${this.y}) 绘制 ${this.image}`)
  }

  move(x: number, y: number): void {
    this.x = x
    this.y = y
    console.log(`移动到位置 (${this.x}, ${this.y})`)
  }
}

// 多态应用示例
class GameEngine {
  private sprites: Drawable[] = []

  addSprite(sprite: Drawable): void {
    this.sprites.push(sprite)
  }

  render(): void {
    this.sprites.forEach(sprite => sprite.draw())
  }
}

// 基础组件定义
@Component
struct CustomButton {
  @Prop text: string = ''
  @Prop backgroundColor: Color = Color.Blue
  @Prop onClick?: () => void

  build() {
    Button(this.text)
      .backgroundColor(this.backgroundColor)
      .borderRadius(8)
      .padding({ left: 16, right: 16, top: 8, bottom: 8 })
      .onClick(() => {
        if (this.onClick) {
          this.onClick()
        }
      })
  }
}

// 复合组件
@Component
struct UserCard {
  @Prop user: User
  @State isExpanded: boolean = false

  build() {
    Column() {
      Row() {
        Image(this.user.avatar || '')
          .width(50)
          .height(50)
          .borderRadius(25)
        
        Column() {
          Text(this.user.name)
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Text(this.user.email || '')
            .fontSize(14)
            .fontColor(Color.Gray)
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 12 })
        
        Blank()
        
        CustomButton({
          text: this.isExpanded ? '收起' : '展开',
          backgroundColor: Color.Orange,
          onClick: () => {
            this.isExpanded = !this.isExpanded
          }
        })
      }
      .width('100%')
      .padding(16)
      
      if (this.isExpanded) {
        Column() {
          Text(`用户ID: ${this.user.id}`)
          Text(`注册时间: ${this.user.createTime.toLocaleDateString()}`)
        }
        .width('100%')
        .padding({ left: 16, right: 16, bottom: 16 })
        .alignItems(HorizontalAlign.Start)
      }
    }
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: Color.Gray, offsetY: 2 })
  }
}

// 自定义装饰器
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value
  
  descriptor.value = function (...args: any[]) {
    console.log(`调用方法 ${propertyKey}，参数:`, args)
    const result = originalMethod.apply(this, args)
    console.log(`方法 ${propertyKey} 返回:`, result)
    return result
  }
}

// 性能监控装饰器
function Performance(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value
  
  descriptor.value = function (...args: any[]) {
    const startTime = Date.now()
    const result = originalMethod.apply(this, args)
    const endTime = Date.now()
    console.log(`方法 ${propertyKey} 执行时间: ${endTime - startTime}ms`)
    return result
  }
}

// 使用装饰器的服务类
class DataService {
  @Log
  @Performance
  async fetchUserData(userId: number): Promise<User> {
    // 模拟异步数据获取
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          id: userId,
          name: `用户${userId}`,
          createTime: new Date()
        })
      }, 100)
    })
  }
}

// 状态管理的基础模式
interface AppState {
  user: User | null
  theme: 'light' | 'dark'
  language: string
  notifications: Notification[]
}

class StateManager {
  private static instance: StateManager
  private state: AppState = {
    user: null,
    theme: 'light',
    language: 'zh-CN',
    notifications: []
  }
  private listeners: Map<string, Function[]> = new Map()

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

  getState(): AppState {
    return { ...this.state }
  }

  setState(newState: Partial<AppState>): void {
    const oldState = { ...this.state }
    this.state = { ...this.state, ...newState }
    this.notifyListeners(oldState, this.state)
  }

  subscribe(key: string, listener: Function): void {
    if (!this.listeners.has(key)) {
      this.listeners.set(key, [])
    }
    this.listeners.get(key)!.push(listener)
  }

  private notifyListeners(oldState: AppState, newState: AppState): void {
    this.listeners.forEach((listeners, key) => {
      listeners.forEach(listener => listener(oldState, newState))
    })
  }
}

// 响应式数据模型
@Observed
class TodoItem {
  id: number
  title: string
  completed: boolean
  createTime: Date

  constructor(id: number, title: string) {
    this.id = id
    this.title = title
    this.completed = false
    this.createTime = new Date()
  }

  toggle(): void {
    this.completed = !this.completed
  }
}

@Observed
class TodoList {
  items: TodoItem[] = []
  filter: 'all' | 'active' | 'completed' = 'all'

  addItem(title: string): void {
    const newItem = new TodoItem(Date.now(), title)
    this.items.push(newItem)
  }

  removeItem(id: number): void {
    const index = this.items.findIndex(item => item.id === id)
    if (index > -1) {
      this.items.splice(index, 1)
    }
  }

  getFilteredItems(): TodoItem[] {
    switch (this.filter) {
      case 'active':
        return this.items.filter(item => !item.completed)
      case 'completed':
        return this.items.filter(item => item.completed)
      default:
        return this.items
    }
  }

  getStatistics(): { total: number; active: number; completed: number } {
    return {
      total: this.items.length,
      active: this.items.filter(item => !item.completed).length,
      completed: this.items.filter(item => item.completed).length
    }
  }
}

// 响应式组件
@Component
struct TodoApp {
  @State todoList: TodoList = new TodoList()
  @State newItemTitle: string = ''

  build() {
    Column() {
      // 输入区域
      Row() {
        TextInput({ placeholder: '添加新任务...' })
          .layoutWeight(1)
          .onChange((value: string) => {
            this.newItemTitle = value
          })
        
        Button('添加')
          .onClick(() => {
            if (this.newItemTitle.trim()) {
              this.todoList.addItem(this.newItemTitle.trim())
              this.newItemTitle = ''
            }
          })
      }
      .width('100%')
      .padding(16)

      // 过滤器
      Row() {
        ['all', 'active', 'completed'].forEach(filter => {
          Button(filter)
            .backgroundColor(this.todoList.filter === filter ? Color.Blue : Color.Gray)
            .onClick(() => {
              this.todoList.filter = filter as any
            })
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

      // 任务列表
      List() {
        ForEach(this.todoList.getFilteredItems(), (item: TodoItem) => {
          ListItem() {
            TodoItemComponent({ item: item, onRemove: (id) => this.todoList.removeItem(id) })
          }
        })
      }
      .layoutWeight(1)

      // 统计信息
      Row() {
        const stats = this.todoList.getStatistics()
        Text(`总计: ${stats.total} | 进行中: ${stats.active} | 已完成: ${stats.completed}`)
      }
      .width('100%')
      .padding(16)
    }
  }
}

@Component
struct TodoItemComponent {
  @ObjectLink item: TodoItem
  onRemove?: (id: number) => void

  build() {
    Row() {
      Checkbox({ name: `todo-${this.item.id}`, group: 'todoGroup' })
        .select(this.item.completed)
        .onChange((isChecked: boolean) => {
          this.item.toggle()
        })

      Text(this.item.title)
        .layoutWeight(1)
        .decoration({ type: this.item.completed ? TextDecorationType.LineThrough : TextDecorationType.None })
        .fontColor(this.item.completed ? Color.Gray : Color.Black)

      Button('删除')
        .backgroundColor(Color.Red)
        .onClick(() => {
          if (this.onRemove) {
            this.onRemove(this.item.id)
          }
        })
    }
    .width('100%')
    .padding(8)
  }
}

// 事件总线模式
class EventBus {
  private static instance: EventBus
  private events: Map<string, Function[]> = new Map()

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

  on(event: string, callback: Function): void {
    if (!this.events.has(event)) {
      this.events.set(event, [])
    }
    this.events.get(event)!.push(callback)
  }

  off(event: string, callback: Function): void {
    const callbacks = this.events.get(event)
    if (callbacks) {
      const index = callbacks.indexOf(callback)
      if (index > -1) {
        callbacks.splice(index, 1)
      }
    }
  }

  emit(event: string, ...args: any[]): void {
    const callbacks = this.events.get(event)
    if (callbacks) {
      callbacks.forEach(callback => callback(...args))
    }
  }
}

// 父子组件通信
@Component
struct ParentComponent {
  @State parentMessage: string = '来自父组件的消息'
  @State childMessage: string = ''

  handleChildMessage = (message: string) => {
    this.childMessage = message
    console.log('收到子组件消息:', message)
  }

  build() {
    Column() {
      Text(`父组件状态: ${this.parentMessage}`)
      Text(`子组件反馈: ${this.childMessage}`)
      
      ChildComponent({
        messageFromParent: this.parentMessage,
        onMessageToParent: this.handleChildMessage
      })
    }
  }
}

@Component
struct ChildComponent {
  @Prop messageFromParent: string = ''
  onMessageToParent?: (message: string) => void
  @State internalState: string = '子组件内部状态'

  build() {
    Column() {
      Text(`接收到: ${this.messageFromParent}`)
      Text(`内部状态: ${this.internalState}`)
      
      Button('向父组件发送消息')
        .onClick(() => {
          if (this.onMessageToParent) {
            this.onMessageToParent(`子组件在 ${new Date().toLocaleTimeString()} 发送的消息`)
          }
        })
    }
  }
}

// 全局状态管理器
interface GlobalState {
  user: User | null
  settings: AppSettings
  cache: Map<string, any>
}

interface AppSettings {
  theme: 'light' | 'dark'
  language: string
  notifications: boolean
}

class GlobalStateManager {
  private static instance: GlobalStateManager
  @State private state: GlobalState = {
    user: null,
    settings: {
      theme: 'light',
      language: 'zh-CN',
      notifications: true
    },
    cache: new Map()
  }

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

  // 用户相关操作
  setUser(user: User | null): void {
    this.state.user = user
  }

  getUser(): User | null {
    return this.state.user
  }

  // 设置相关操作
  updateSettings(settings: Partial<AppSettings>): void {
    this.state.settings = { ...this.state.settings, ...settings }
  }

  getSettings(): AppSettings {
    return { ...this.state.settings }
  }

  // 缓存操作
  setCache(key: string, value: any): void {
    this.state.cache.set(key, value)
  }

  getCache(key: string): any {
    return this.state.cache.get(key)
  }

  clearCache(): void {
    this.state.cache.clear()
  }
}

// 使用全局状态的组件
@Component
struct GlobalStateExample {
  private stateManager = GlobalStateManager.getInstance()
  @State private currentUser: User | null = null
  @State private currentSettings: AppSettings = this.stateManager.getSettings()

  aboutToAppear() {
    this.currentUser = this.stateManager.getUser()
    this.currentSettings = this.stateManager.getSettings()
  }

  build() {
    Column() {
      if (this.currentUser) {
        Text(`当前用户: ${this.currentUser.name}`)
        Text(`主题: ${this.currentSettings.theme}`)
        Text(`语言: ${this.currentSettings.language}`)
      } else {
        Text('未登录')
      }

      Button('切换主题')
        .onClick(() => {
          const newTheme = this.currentSettings.theme === 'light' ? 'dark' : 'light'
          this.stateManager.updateSettings({ theme: newTheme })
          this.currentSettings = this.stateManager.getSettings()
        })
    }
  }
}

// 1. 避免不必要的重新渲染
@Component
struct OptimizedList {
  @State items: ListItem[] = []
  @State filter: string = ''

  // 使用计算属性缓存过滤结果
  get filteredItems(): ListItem[] {
    if (!this.filter) return this.items
    return this.items.filter(item => 
      item.title.toLowerCase().includes(this.filter.toLowerCase())
    )
  }

  build() {
    Column() {
      TextInput({ placeholder: '搜索...' })
        .onChange((value: string) => {
          // 防抖处理
          this.debounceFilter(value)
        })

      List() {
        ForEach(this.filteredItems, (item: ListItem, index: number) => {
          ListItem() {
            OptimizedListItem({ item: item })
          }
        }, (item: ListItem) => item.id.toString()) // 使用稳定的 key
      }
      .cachedCount(10) // 设置缓存数量
    }
  }

  private debounceTimer: number = 0
  private debounceFilter(value: string): void {
    clearTimeout(this.debounceTimer)
    this.debounceTimer = setTimeout(() => {
      this.filter = value
    }, 300)
  }
}

// 2. 组件懒加载
@Component
struct LazyLoadComponent {
  @State isVisible: boolean = false
  @State content: string = ''

  build() {
    Column() {
      if (this.isVisible) {
        // 只有在可见时才渲染复杂内容
        ExpensiveComponent({ data: this.content })
      } else {
        // 显示占位符
        Text('加载中...')
          .onAppear(() => {
            // 延迟加载
            setTimeout(() => {
              this.loadContent()
            }, 100)
          })
      }
    }
  }

  private async loadContent(): Promise<void> {
    // 模拟异步加载
    this.content = await this.fetchData()
    this.isVisible = true
  }

  private async fetchData(): Promise<string> {
    return new Promise(resolve => {
      setTimeout(() => resolve('加载的内容'), 1000)
    })
  }
}

// 3. 内存优化
class MemoryOptimizer {
  private static cache = new Map<string, any>()
  private static readonly MAX_CACHE_SIZE = 100

  static memoize<T extends (...args: any[]) => any>(fn: T): T {
    return ((...args: any[]) => {
      const key = JSON.stringify(args)
      
      if (this.cache.has(key)) {
        return this.cache.get(key)
      }

      const result = fn(...args)
      
      // 限制缓存大小
      if (this.cache.size >= this.MAX_CACHE_SIZE) {
        const firstKey = this.cache.keys().next().value
        this.cache.delete(firstKey)
      }
      
      this.cache.set(key, result)
      return result
    }) as T
  }

  static clearCache(): void {
    this.cache.clear()
  }
}

// 使用示例
const expensiveCalculation = MemoryOptimizer.memoize((a: number, b: number): number => {
  console.log('执行复杂计算...')
  return Math.pow(a, b)
})

// 内存泄漏预防
class ResourceManager {
  private timers: Set<number> = new Set()
  private listeners: Map<string, Function> = new Map()
  private subscriptions: Set<any> = new Set()

  // 定时器管理
  setTimeout(callback: Function, delay: number): number {
    const timerId = setTimeout(() => {
      callback()
      this.timers.delete(timerId)
    }, delay)
    this.timers.add(timerId)
    return timerId
  }

  setInterval(callback: Function, interval: number): number {
    const timerId = setInterval(callback, interval)
    this.timers.add(timerId)
    return timerId
  }

  // 事件监听器管理
  addEventListener(event: string, listener: Function): void {
    this.listeners.set(event, listener)
    // 实际的事件绑定逻辑
  }

  // 清理所有资源
  cleanup(): void {
    // 清理定时器
    this.timers.forEach(timerId => {
      clearTimeout(timerId)
      clearInterval(timerId)
    })
    this.timers.clear()

    // 清理事件监听器
    this.listeners.forEach((listener, event) => {
      // 移除事件监听器的逻辑
    })
    this.listeners.clear()

    // 清理订阅
    this.subscriptions.forEach(subscription => {
      if (subscription && typeof subscription.unsubscribe === 'function') {
        subscription.unsubscribe()
      }
    })
    this.subscriptions.clear()
  }
}

// 组件中的资源管理
@Component
struct ResourceAwareComponent {
  private resourceManager = new ResourceManager()
  @State data: any[] = []

  aboutToAppear() {
    // 组件出现时初始化资源
    this.initializeResources()
  }

  aboutToDisappear() {
    // 组件销毁时清理资源
    this.resourceManager.cleanup()
  }

  private initializeResources(): void {
    // 设置定时器
    this.resourceManager.setInterval(() => {
      this.updateData()
    }, 5000)

    // 添加事件监听器
    this.resourceManager.addEventListener('dataUpdate', this.handleDataUpdate)
  }

  private updateData(): void {
    // 更新数据逻辑
  }

  private handleDataUpdate = (newData: any): void => {
    this.data = newData
  }

  build() {
    // 组件 UI 构建
    Column() {
      ForEach(this.data, (item: any) => {
        Text(item.toString())
      })
    }
  }
}

// 异步操作管理器
class AsyncOperationManager {
  private pendingOperations = new Map<string, Promise<any>>()

  // 防止重复请求
  async executeOnce<T>(key: string, operation: () => Promise<T>): Promise<T> {
    if (this.pendingOperations.has(key)) {
      return this.pendingOperations.get(key) as Promise<T>
    }

    const promise = operation().finally(() => {
      this.pendingOperations.delete(key)
    })

    this.pendingOperations.set(key, promise)
    return promise
  }

  // 并发控制
  async executeConcurrently<T>(
    operations: (() => Promise<T>)[],
    maxConcurrency: number = 3
  ): Promise<T[]> {
    const results: T[] = []
    const executing: Promise<any>[] = []

    for (const operation of operations) {
      const promise = operation().then(result => {
        results.push(result)
        executing.splice(executing.indexOf(promise), 1)
        return result
      })

      executing.push(promise)

      if (executing.length >= maxConcurrency) {
        await Promise.race(executing)
      }
    }

    await Promise.all(executing)
    return results
  }

  // 超时控制
  async withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
    const timeoutPromise = new Promise<never>((_, reject) => {
      setTimeout(() => reject(new Error('操作超时')), timeoutMs)
    })

    return Promise.race([promise, timeoutPromise])
  }
}

// 数据加载组件
@Component
struct AsyncDataLoader {
  @State loading: boolean = false
  @State data: any[] = []
  @State error: string = ''
  
  private asyncManager = new AsyncOperationManager()

  build() {
    Column() {
      if (this.loading) {
        LoadingIndicator()
      } else if (this.error) {
        ErrorDisplay({ message: this.error, onRetry: () => this.loadData() })
      } else {
        DataList({ data: this.data })
      }

      Button('刷新数据')
        .onClick(() => this.loadData())
    }
  }

  private async loadData(): Promise<void> {
    this.loading = true
    this.error = ''

    try {
      // 使用防重复请求
      this.data = await this.asyncManager.executeOnce('loadUserData', async () => {
        // 并发加载多个数据源
        const operations = [
          () => this.fetchUsers(),
          () => this.fetchSettings(),
          () => this.fetchNotifications()
        ]

        const [users, settings, notifications] = await this.asyncManager.executeConcurrently(operations)
        
        return this.combineData(users, settings, notifications)
      })
    } catch (error) {
      this.error = error.message || '加载失败'
    } finally {
      this.loading = false
    }
  }

  private async fetchUsers(): Promise<User[]> {
    return this.asyncManager.withTimeout(
      fetch('/api/users').then(res => res.json()),
      5000
    )
  }

  private async fetchSettings(): Promise<any> {
    return this.asyncManager.withTimeout(
      fetch('/api/settings').then(res => res.json()),
      3000
    )
  }

  private async fetchNotifications(): Promise<any[]> {
    return this.asyncManager.withTimeout(
      fetch('/api/notifications').then(res => res.json()),
      3000
    )
  }

  private combineData(users: User[], settings: any, notifications: any[]): any[] {
    // 合并数据逻辑
    return users.map(user => ({
      ...user,
      settings,
      unreadNotifications: notifications.filter(n => n.userId === user.id && !n.read).length
    }))
  }
}

// 性能监控工具
class PerformanceMonitor {
  private static metrics = new Map<string, number[]>()
  private static observers = new Map<string, PerformanceObserver>()

  // 方法执行时间监控
  static measureMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value

    descriptor.value = function (...args: any[]) {
      const startTime = performance.now()
      const result = originalMethod.apply(this, args)
      const endTime = performance.now()
      
      PerformanceMonitor.recordMetric(`${target.constructor.name}.${propertyKey}`, endTime - startTime)
      
      return result
    }
  }

  // 记录性能指标
  static recordMetric(name: string, value: number): void {
    if (!this.metrics.has(name)) {
      this.metrics.set(name, [])
    }
    
    const values = this.metrics.get(name)!
    values.push(value)
    
    // 保持最近100个记录
    if (values.length > 100) {
      values.shift()
    }
  }

  // 获取性能统计
  static getMetricStats(name: string): { avg: number; min: number; max: number; count: number } | null {
    const values = this.metrics.get(name)
    if (!values || values.length === 0) return null

    return {
      avg: values.reduce((sum, val) => sum + val, 0) / values.length,
      min: Math.min(...values),
      max: Math.max(...values),
      count: values.length
    }
  }

  // 内存使用监控
  static getMemoryUsage(): any {
    // 在实际环境中，这里会调用系统 API 获取内存信息
    return {
      used: 0, // 已使用内存
      total: 0, // 总内存
      percentage: 0 // 使用百分比
    }
  }

  // 生成性能报告
  static generateReport(): string {
    let report = '=== 性能监控报告 ===\n'
    
    this.metrics.forEach((values, name) => {
      const stats = this.getMetricStats(name)
      if (stats) {
        report += `${name}:\n`
        report += `  平均耗时: ${stats.avg.toFixed(2)}ms\n`
        report += `  最小耗时: ${stats.min.toFixed(2)}ms\n`
        report += `  最大耗时: ${stats.max.toFixed(2)}ms\n`
        report += `  调用次数: ${stats.count}\n\n`
      }
    })

    const memory = this.getMemoryUsage()
    report += `内存使用: ${memory.used}MB / ${memory.total}MB (${memory.percentage}%)\n`
    
    return report
  }
}

// 调试工具类
class DebugUtils {
  private static isDebugMode = false

  static enableDebug(): void {
    this.isDebugMode = true
  }

  static log(message: string, ...args: any[]): void {
    if (this.isDebugMode) {
      console.log(`[DEBUG] ${new Date().toISOString()}: ${message}`, ...args)
    }
  }

  static error(message: string, error?: Error): void {
    console.error(`[ERROR] ${new Date().toISOString()}: ${message}`, error)
  }

  static warn(message: string, ...args: any[]): void {
    if (this.isDebugMode) {
      console.warn(`[WARN] ${new Date().toISOString()}: ${message}`, ...args)
    }
  }

  // 组件渲染追踪
  static trackRender(componentName: string): void {
    if (this.isDebugMode) {
      console.log(`[RENDER] ${componentName} 组件重新渲染于 ${new Date().toISOString()}`)
    }
  }

  // 状态变化追踪
  static trackStateChange(componentName: string, stateName: string, oldValue: any, newValue: any): void {
    if (this.isDebugMode) {
      console.log(`[STATE] ${componentName}.${stateName} 从`, oldValue, '变更为', newValue)
    }
  }
}

// 使用示例
@Component
struct DebugEnabledComponent {
  @State counter: number = 0
  @State message: string = 'Hello'

  aboutToAppear() {
    DebugUtils.enableDebug()
    DebugUtils.log('组件初始化')
  }

  build() {
    DebugUtils.trackRender('DebugEnabledComponent')
    
    Column() {
      Text(`计数器: ${this.counter}`)
      Text(`消息: ${this.message}`)
      
      Button('增加计数')
        .onClick(() => {
          const oldValue = this.counter
          this.counter++
          DebugUtils.trackStateChange('DebugEnabledComponent', 'counter', oldValue, this.counter)
        })

      Button('生成性能报告')
        .onClick(() => {
          const report = PerformanceMonitor.generateReport()
          DebugUtils.log('性能报告', report)
        })
    }
  }

  @PerformanceMonitor.measureMethod
  private expensiveOperation(): void {
    // 模拟耗时操作
    for (let i = 0; i < 1000000; i++) {
      Math.random()
    }
  }
}