vue-desktop/src/core/state/impl/ObservableImpl.ts

import type {
  IObservable,
  TNonFunctionProperties,
  TObservableKeyListener,
  TObservableListener,
  TObservableState,
} from '@/core/state/IObservable.ts'

/**
 * 创建一个可观察对象，用于管理状态和事件。
 * @template T - 需要处理的状态类型
 * @example
 * interface AppState {
 *   count: number
 *   user: {
 *     name: string
 *     age: number
 *   }
 *   items: number[]
 * }
 *
 * // 创建 ObservableImpl
 * const obs = new ObservableImpl<AppState>({
 *   count: 0,
 *   user: { name: 'Alice', age: 20 },
 *   items: []
 * })
 *
 * // 1️⃣ 全量订阅
 * const unsubscribeAll = obs.subscribe(state => {
 *   console.log('全量订阅', state)
 * }, { immediate: true })
 *
 * // 2️⃣ 单字段订阅
 * const unsubscribeCount = obs.subscribeKey('count', ({ count }) => {
 *   console.log('count 字段变化:', count)
 * })
 *
 * // 3️⃣ 多字段订阅
 * const unsubscribeUser = obs.subscribeKey(['user', 'count'], ({ user, count }) => {
 *   console.log('user 或 count 变化:', { user, count })
 * })
 *
 * // 4️⃣ 修改属性
 * obs.state.count = 1      // ✅ 会触发 count 和全量订阅
 * obs.state.user.age = 21  // ✅ 深层对象修改触发 user 订阅
 * obs.state.user.name = 'Bob'
 * // 语法糖：解构赋值直接赋值触发通知
 * const { count, user, items } = obs.toRefsProxy()
 * count = 1            // 触发 Proxy set
 * user.age = 18        // 深层对象 Proxy 支持
 * items.push(42)       // 数组方法拦截触发通知
 *
 * // 5️⃣ 数组方法触发
 * obs.state.items.push(10)   // ✅ push 会触发 items 的字段订阅
 * obs.state.items.splice(0, 1)
 *
 * // 6️⃣ 批量修改（同一事件循环只触发一次通知）
 * obs.patch({
 *   count: 2,
 *   user: { name: 'Charlie', age: 30 }
 * })
 *
 * // 7️⃣ 解构赋值访问对象属性仍然触发订阅
 * const { state } = obs
 * state.user.age = 31      // ✅ 会触发 user 订阅
 *
 * // 8️⃣ 取消订阅
 * unsubscribeAll()
 * unsubscribeCount()
 * unsubscribeUser()
 *
 * // 9️⃣ 销毁 ObservableImpl
 * obs.dispose()
 */
export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObservable<T> {
  /** Observable 状态对象，深层 Proxy */
  public readonly state: TObservableState<T>

  /** 全量订阅函数集合 */
  private listeners: Set<TObservableListener<T>> = new Set()

  /** 字段订阅函数集合 */
  private keyListeners: Map<keyof T, Set<Function>> = new Map()

  /** 待通知的字段集合 */
  private pendingKeys: Set<keyof T> = new Set()

  /** 是否已经安排通知 */
  private notifyScheduled = false

  /** 是否已销毁 */
  private disposed = false

  constructor(initialState: TNonFunctionProperties<T>) {
    // 创建深层响应式 Proxy
    this.state = this.makeReactive(initialState) as TObservableState<T>
  }

  /** 创建深层 Proxy，拦截 get/set */
  private makeReactive(obj: TNonFunctionProperties<T>): TObservableState<T> {
    const handler: ProxyHandler<any> = {
      get: (target, prop: string | symbol, receiver) => {
        const key = prop as keyof T
        const value = Reflect.get(target, key, receiver)
        if (Array.isArray(value)) return this.wrapArray(value, key)
        if (typeof value === 'object' && value !== null) return this.makeReactive(value)
        return value
      },
      set: (target, prop: string | symbol, value, receiver) => {
        const key = prop as keyof T
        const oldValue = target[key]
        if (oldValue !== value) {
          target[key] = value
          this.pendingKeys.add(key)
          this.scheduleNotify()
        }
        return true
      }
    }
    return new Proxy(obj, handler) as TObservableState<T>
  }

  /** 包装数组方法，使 push/pop 等触发通知 */
  private wrapArray(arr: any[], parentKey: keyof T): any {
    const self = this
    const arrayMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] as const
    arrayMethods.forEach(method => {
      const original = arr[method]
      Object.defineProperty(arr, method, {
        value: function (...args: any[]) {
          const result = original.apply(this, args)
          self.pendingKeys.add(parentKey)
          self.scheduleNotify()
          return result
        },
        writable: true,
        configurable: true,
      })
    })
    return arr
  }

  /** 安排下一次通知 */
  private scheduleNotify(): void {
    if (!this.notifyScheduled && !this.disposed) {
      this.notifyScheduled = true
      Promise.resolve().then(() => this.flushNotify())
    }
  }

  /** 执行通知 */
  private flushNotify(): void {
    if (this.disposed) return
    const keys = Array.from(this.pendingKeys)
    this.pendingKeys.clear()
    this.notifyScheduled = false

    // 全量订阅
    for (const fn of this.listeners) {
      fn(this.state)
    }

    // 字段订阅
    const fnMap = new Map<Function, (keyof T)[]>()
    for (const key of keys) {
      const set = this.keyListeners.get(key)
      if (!set) continue
      for (const fn of set) {
        if (!fnMap.has(fn)) fnMap.set(fn, [])
        fnMap.get(fn)!.push(key)
      }
    }

    fnMap.forEach((subKeys, fn) => {
      const result = {} as Pick<T, typeof subKeys[number]>
      subKeys.forEach(k => (result[k] = this.state[k]))
      fn(result)
    })
  }

  /** 订阅整个状态变化 */
  public subscribe(fn: TObservableListener<T>, options: { immediate?: boolean } = {}): () => void {
    this.listeners.add(fn)
    if (options.immediate) fn(this.state)
    return () => {
      this.listeners.delete(fn)
    }
  }

  /** 订阅指定字段变化 */
  public subscribeKey<K extends keyof T>(
    keys: K | K[],
    fn: TObservableKeyListener<T, K>,
    options: { immediate?: boolean } = {}
  ): () => void {
    const keyArray = Array.isArray(keys) ? keys : [keys]
    for (const key of keyArray) {
      if (!this.keyListeners.has(key)) this.keyListeners.set(key, new Set())
      this.keyListeners.get(key)!.add(fn)
    }

    if (options.immediate) {
      const result = {} as Pick<T, K>
      keyArray.forEach(k => (result[k] = this.state[k]))
      fn(result)
    }

    return () => {
      for (const key of keyArray) {
        this.keyListeners.get(key)?.delete(fn)
      }
    }
  }

  /** 批量更新状态 */
  public patch(values: Partial<T>): void {
    for (const key in values) {
      if (Object.prototype.hasOwnProperty.call(values, key)) {
        const typedKey = key as keyof T
        this.state[typedKey] = values[typedKey]!
        this.pendingKeys.add(typedKey)
      }
    }
    this.scheduleNotify()
  }

  /** 销毁 Observable 实例 */
  public dispose(): void {
    this.disposed = true
    this.listeners.clear()
    this.keyListeners.clear()
    this.pendingKeys.clear()
  }

  /** 语法糖：返回一个可解构赋值的 Proxy */
  public toRefsProxy(): { [K in keyof T]: T[K] } {
    const self = this
    return new Proxy({} as T, {
      get(_, prop: string | symbol) {
        const key = prop as keyof T
        return self.state[key]
      },
      set(_, prop: string | symbol, value) {
        const key = prop as keyof T
        self.state[key] = value
        return true
      },
      ownKeys() {
        return Reflect.ownKeys(self.state)
      },
      getOwnPropertyDescriptor(_, prop: string | symbol) {
        return { enumerable: true, configurable: true }
      }
    })
  }
}