shanxia/crm/web/debug-select-border.js

/**
 * 下拉框边框调试脚本
 *
 * 使用方法：
 * 1. 打开浏览器开发者工具（F12）
 * 2. 进入 Console 控制台
 * 3. 复制并粘贴这整个脚本
 * 4. 按 Enter 执行
 * 5. 查看控制台输出的诊断信息
 */

console.log('%c========== 下拉框边框诊断开始 ==========', 'color: #1ca851; font-size: 16px; font-weight: bold;');

// 1. 查找所有下拉框
const selects = document.querySelectorAll('.el-select, .el-select-v2');
console.log(`%c找到 ${selects.length} 个下拉框`, 'color: #409eff; font-weight: bold;');

if (selects.length === 0) {
  console.warn('⚠️ 没有找到任何下拉框！请确保页面已经加载完成。');
} else {
  // 2. 检查每个下拉框的样式
  selects.forEach((select, index) => {
    console.group(`%c下拉框 #${index + 1}`, 'color: #67c23a; font-weight: bold;');

    // 查找 input wrapper
    const wrapper = select.querySelector('.el-input__wrapper');
    if (!wrapper) {
      console.error('❌ 没有找到 .el-input__wrapper 元素');
      console.groupEnd();
      return;
    }

    // 获取计算后的样式
    const styles = window.getComputedStyle(wrapper);

    // 检查边框相关样式
    console.log('📊 边框样式信息：');
    console.table({
      'border': styles.border,
      'border-width': styles.borderWidth,
      'border-style': styles.borderStyle,
      'border-color': styles.borderColor,
      'box-shadow': styles.boxShadow,
      'outline': styles.outline,
      'background-color': styles.backgroundColor
    });

    // 检查是否有边框
    const hasBorder = styles.borderWidth !== '0px' && styles.borderStyle !== 'none';
    if (hasBorder) {
      console.log('%c✅ 有边框', 'color: green; font-weight: bold;');
    } else {
      console.log('%c❌ 没有边框', 'color: red; font-weight: bold;');
    }

    // 检查是否有 box-shadow
    if (styles.boxShadow !== 'none') {
      console.log(`%c⚠️ 有 box-shadow: ${styles.boxShadow}`, 'color: orange;');
    }

    // 显示元素的类名
    console.log('🏷️ 元素类名:', select.className);

    // 显示元素的 HTML 结构
    console.log('🔍 HTML 结构:');
    console.log(select.outerHTML.substring(0, 200) + '...');

    console.groupEnd();
  });
}

// 3. 检查相关的 CSS 变量
console.group('%c📐 CSS 变量检查', 'color: #e6a23c; font-weight: bold;');
const rootStyles = getComputedStyle(document.documentElement);
const cssVars = ['--art-border-color', '--el-border-color', '--el-border-color-light', '--main-color', '--art-main-bg-color'];

const varValues = {};
cssVars.forEach((varName) => {
  const value = rootStyles.getPropertyValue(varName).trim();
  varValues[varName] = value || '(未定义)';
});
console.table(varValues);
console.groupEnd();

// 4. 动态添加修复样式
console.group('%c🔧 尝试动态修复', 'color: #f56c6c; font-weight: bold;');
const fixStyle = document.createElement('style');
fixStyle.id = 'fix-select-border-dynamic';
fixStyle.innerHTML = `
  /* 动态修复样式 */
  .el-select .el-input__wrapper,
  .el-select-v2 .el-input__wrapper {
    border: 2px solid #ff0000 !important;  /* 红色边框，方便识别 */
    box-shadow: none !important;
  }
  
  .el-select .el-input__wrapper:hover,
  .el-select-v2 .el-input__wrapper:hover {
    border-color: #1ca851 !important;
  }
  
  .el-select .el-input__wrapper.is-focus,
  .el-select .el-input__wrapper.is-focused,
  .el-select-v2 .el-input__wrapper.is-focus,
  .el-select-v2 .el-input__wrapper.is-focused {
    border-color: #1ca851 !important;
  }
`;

// 检查是否已经添加过
const existingFix = document.getElementById('fix-select-border-dynamic');
if (existingFix) {
  console.log('⚠️ 已经添加过修复样式，先移除旧的');
  existingFix.remove();
}

document.head.appendChild(fixStyle);
console.log('%c✅ 已添加动态修复样式（红色边框）', 'color: green; font-weight: bold;');
console.log('如果现在看到红色边框，说明 CSS 选择器是正确的，问题在于样式优先级或加载顺序');
console.log('如果还是没有边框，说明 DOM 结构可能不同，需要检查实际的 HTML 结构');
console.groupEnd();

// 5. 提供手动修复函数
window.fixSelectBorder = function (color = '#dcdfe6') {
  const style = document.createElement('style');
  style.id = 'manual-fix-select-border';
  style.innerHTML = `
    .el-select .el-input__wrapper,
    .el-select-v2 .el-input__wrapper {
      border: 1px solid ${color} !important;
      box-shadow: none !important;
    }
  `;

  const existing = document.getElementById('manual-fix-select-border');
  if (existing) existing.remove();

  document.head.appendChild(style);
  console.log(`%c✅ 已应用边框颜色: ${color}`, 'color: green; font-weight: bold;');
};

console.log('%c========== 诊断完成 ==========', 'color: #1ca851; font-size: 16px; font-weight: bold;');
console.log('%c💡 提示：', 'color: #409eff; font-weight: bold;');
console.log('1. 检查上面的诊断信息，看看是否有边框');
console.log('2. 如果看到红色边框，说明动态修复成功');
console.log('3. 可以调用 fixSelectBorder("#dcdfe6") 来应用正常的边框颜色');
console.log('4. 可以调用 fixSelectBorder("#1ca851") 来应用绿色边框');
console.log('');
console.log('%c📝 下一步建议：', 'color: #e6a23c; font-weight: bold;');
console.log('1. 如果动态修复有效，说明问题在于 CSS 加载顺序或优先级');
console.log('2. 如果动态修复无效，说明 DOM 结构可能不同，需要检查实际的 HTML');
console.log('3. 使用开发者工具的 Elements 面板，选中一个下拉框，查看 Styles 面板');
console.log('4. 查看是否有 border 样式被其他规则覆盖（会显示删除线）');