// 假设我们有一个非常简单的状态管理函数
const createStore = (initialState) => {
  let state = initialState;
  const subscribers = new Set();

  const getState = () => state;

  const setState = (updater) => {
    const prevState = state;
    // --- 调试器注入点：状态变更前 ---
    if (window.__DEBUG_TOOL__) {
      window.__DEBUG_TOOL__.captureEvent('STATE_CHANGE_START', {
        prevState: JSON.parse(JSON.stringify(prevState)),
        updater: updater.toString(),
      });
    }
    // ---------------------------------
    
    state = typeof updater === 'function' ? updater(prevState) : updater;
    
    // --- 调试器注入点：状态变更后 ---
    if (window.__DEBUG_TOOL__) {
      window.__DEBUG_TOOL__.captureEvent('STATE_CHANGE_END', {
        nextState: JSON.parse(JSON.stringify(state)),
        changedKeys: diff(prevState, state), // 假设diff是一个比较对象差异的函数
      });
    }
    // ---------------------------------
    
    subscribers.forEach(fn => fn(state));
  };

  const subscribe = (fn) => {
    subscribers.add(fn);
    return () => subscribers.delete(fn);
  };

  return { getState, setState, subscribe };
};

// 在调试工具端，捕获事件并关联
window.__DEBUG_TOOL__ = {
  events: [],
  captureEvent(type, payload) {
    const event = {
      id: generateUniqueId(),
      type,
      payload,
      timestamp: performance.now(),
      stackTrace: new Error().stack, // 获取调用栈
    };
    this.events.push(event);
    // 通过通信桥接发送到可视化面板
    this.sendToPanel('event', event);
  },
  sendToPanel() { /* ... */ }
};

<!-- 一个简单的Vue 3自定义调试面板组件 -->
<template>
  <div class="debug-panel" v-if="isOpen">
    <div class="panel-header">
      <h3>状态调试器</h3>
      <button @click="clearLogs">清空</button>
    </div>
    <div class="event-list">
      <div v-for="event in events" :key="event.id" class="event-item" :class="event.type">
        <span class="timestamp">{{ event.timestamp.toFixed(2) }}ms</span>
        <strong class="type">[{{ event.type }}]</strong>
        <span class="details">{{ event.details }}</span>
        <button @click="inspect(event)">查看</button>
      </div>
    </div>
    <div class="state-inspector" v-if="selectedEvent">
      <h4>事件详情</h4>
      <pre>{{ JSON.stringify(selectedEvent.payload, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isOpen = ref(true);
const events = ref([]);
const selectedEvent = ref(null);

// 定义或导入一个全局的事件总线
const debugBus = window.__debugBus;

const logEvent = (eventData) => {
  events.value.push({
    id: Date.now() + Math.random(),
    timestamp: performance.now() - startTime,
    ...eventData
  });
};

const clearLogs = () => { events.value = []; };
const inspect = (event) => { selectedEvent.value = event; };

let startTime;
onMounted(() => {
  startTime = performance.now();
  if (debugBus) {
    debugBus.subscribe(logEvent);
  }
  // 示例：手动触发一些测试事件
  debugBus?.publish({ type: 'ACTION', details: 'fetchProducts', payload: {} });
  debugBus?.publish({ type: 'MUTATION', details: 'SET_PRODUCTS', payload: { products: [...] } });
  debugBus?.publish({ type: 'STATE_CHANGE', details: 'products', payload: { newValue: [...] } });
});

onUnmounted(() => {
  if (debugBus) {
    debugBus.unsubscribe(logEvent);
  }
});
</script>

<style scoped>
.debug-panel { /* 样式 */ }
.event-item.ACTION { border-left: 4px solid #3498db; }
.event-item.MUTATION { border-left: 4px solid #2ecc71; }
.event-item.STATE_CHANGE { border-left: 4px solid #e74c3c; }
</style>

// 在你的store或action/mutation中
import { debugBus } from './debug-bus';

const actions = {
  async fetchProducts({ commit }) {
    debugBus.publish({ type: 'ACTION_START', details: 'fetchProducts' });
    try {
      const data = await api.getProducts();
      commit('SET_PRODUCTS', data);
      debugBus.publish({ type: 'ACTION_END', details: 'fetchProducts', payload: { success: true } });
    } catch (error) {
      debugBus.publish({ type: 'ACTION_END', details: 'fetchProducts', payload: { success: false, error } });
    }
  }
};

const mutations = {
  SET_PRODUCTS(state, payload) {
    debugBus.publish({ type: 'MUTATION', details: 'SET_PRODUCTS', payload: { old: state.products, new: payload } });
    state.products = payload;
  }
};