// 在浏览器控制台执行此脚本来诊断问题

console.log('=== 开始诊断 ===')

// 1. 检查编辑按钮是否存在
const editButtons = document.querySelectorAll('button')
let editButton = null
editButtons.forEach(btn => {
  if (btn.textContent.includes('编辑')) {
    editButton = btn
  }
})
console.log('1️⃣ 编辑按钮:', editButton ? '✅ 找到' : '❌ 未找到')

// 2. 检查 Vue 应用实例
const app = document.querySelector('#app')
if (app && app.__vueParentComponent) {
  console.log('2️⃣ Vue 应用:', '✅ 存在')
  
  // 尝试访问 setup 状态
  const instance = app.__vueParentComponent
  if (instance.setupState) {
    console.log('3️⃣ showServerDetail:', instance.setupState.showServerDetail)
    console.log('3️⃣ editingServer:', instance.setupState.editingServer)
  }
} else {
  console.log('2️⃣ Vue 应用:', '❌ 未找到')
}

// 3. 检查 Modal 元素
const modals = document.querySelectorAll('.n-modal')
console.log('4️⃣ Modal 元素数量:', modals.length)
if (modals.length > 0) {
  modals.forEach((modal, i) => {
    const styles = window.getComputedStyle(modal)
    console.log(`  Modal ${i}:`, {
      display: styles.display,
      opacity: styles.opacity,
      visibility: styles.visibility
    })
  })
}

// 4. 手动触发点击（如果找到按钮）
if (editButton) {
  console.log('5️⃣ 尝试手动点击编辑按钮...')
  editButton.click()
  setTimeout(() => {
    const modalsAfter = document.querySelectorAll('.n-modal')
    console.log('6️⃣ 点击后 Modal 数量:', modalsAfter.length)
  }, 500)
}

console.log('=== 诊断结束 ===')