Skip to content

FUNCTIONAL_COMPARE_FIX.md

Latest commit

 

History

History
139 lines (110 loc) · 4.86 KB

FUNCTIONAL_COMPARE_FIX.md

File metadata and controls

139 lines (110 loc) · 4.86 KB

功能比较组件修复说明 - 最终版本

修复的问题

1. 跨页面跳转时表格样式加载不完成

根本原因:

  • HTML模板缺少明确的默认状态
  • CSS样式在跨页面跳转时未能及时应用
  • 缺少强制样式应用机制

修复方案:

  1. HTML模板默认状态 - 按照"Tab组件状态初始化规范"：

    • VersionComparison.astro: 公共云Tab内容设置 style="display: block;"
    • FunctionalCompareAstro/index.astro: 公有云表格设置 style="display: block;"
    • Tableplugin.astro: 公有云表格头设置 style="display: table;"

  2. 样式强制应用机制 - 按照"前端组件状态与样式规范"：

    // 立即应用关键样式
functionalWrapper.style.paddingLeft = '1rem';
functionalWrapper.style.paddingRight = '1rem';

// 应用表格样式
table.style.marginBottom = '1.5rem';
table.style.borderRadius = '1rem';
cell.style.padding = '0.5rem'; // td
cell.style.padding = '1rem';   // th

  3. 跨页面样式重新应用：

    • 监听 visibilitychange 事件
    • 监听 focus 事件
    • 检测样式缺失时自动重新应用

2. 公有云/专有云Tab切换时表格内容不切换

根本原因:

  • Tab切换事件处理逻辑不够可靠
  • 缺少强制性的状态重置机制
  • 元素显示/隐藏状态控制不够明确

修复方案:

  1. 强制切换函数 - 参照VersionComparison的可靠机制：

    function switchTableContent(activeTabId) {
  // 1. 强制隐藏所有表格内容
  [publicTables, privateTables].forEach(element => {
    if (element) {
      element.style.display = 'none';
      element.style.visibility = 'hidden';
    }
  });
  
  // 2. 强制显示对应Tab内容
  if (activeTabId === 'Public') {
    publicTables.style.display = 'block';
    publicTables.style.visibility = 'visible';
    // 切换表格头...
  }
}

  2. 双重控制机制：

    • 使用 display 控制元素是否占用空间
    • 使用 visibility 控制元素是否可见
    • 确保切换的彻底性和可靠性

代码优化

按照"代码提交与清理规范"

  • 清理所有 console.log 调试信息
  • 移除不必要的延时和重排操作
  • 简化初始化逻辑，直接应用样式而不是通过setTimeout

按照"Astro组件初始化策略"

  • HTML模板优化：确保服务端渲染时就有正确的初始状态
  • 多重初始化保障：DOMContentLoaded + 页面可见性 + 焦点事件
  • 不依赖JavaScript的默认状态显示

核心修改文件

1. /src/components/common/VersionComparison.astro

  • Tab内容区域添加明确的默认显示状态
  • 公共云Tab: style="display: block;"
  • 专有云Tab: style="display: none;"

2. /src/components/cloud/FunctionalCompareAstro/index.astro

  • 公有云表格添加默认显示状态: style="display: block;"
  • 优化 switchTableContent() 函数，使用双重控制机制
  • 清理调试信息，优化初始化逻辑
  • 添加立即样式应用机制

3. /src/components/cloud/FunctionalCompareAstro/Tableplugin.astro

  • 公有云表格头添加默认显示状态: style="display: table;"
  • 确保HTML模板中的默认状态正确

技术要点

关键原则

  1. HTML优先：在HTML模板中就设置正确的默认状态
  2. 强制切换：使用 display + visibility 双重控制
  3. 立即应用：样式不依赖setTimeout，直接应用
  4. 多重保障：页面可见性 + 焦点事件 + 初始化检查

数据源映射

  • 公有云模式: versionDataSource (3列：社区版 + 云原生API网关 + AI网关)
  • 专有云模式: PrivateDataSource (2列：社区版 + 飞天专属版)
  • 版本映射: versionContain 对象确保正确的字段映射

验证要点

测试场景1：跨页面跳转

  • 从 /plugin/ 页面跳转到 /cloud/ 页面
  • 检查表格是否有正确的padding值 (1rem)
  • 检查表格是否默认显示公有云模式
  • 验证表格样式立即生效

测试场景2：Tab切换功能

  • 点击"专有云"Tab → 验证表格切换为2列布局和PrivateDataSource数据
  • 点击"公共云"Tab → 验证表格切换为3列布局和versionDataSource数据
  • 验证表格头正确切换
  • 验证移动端也能正确切换

测试场景3：样式持久性

  • 多次页面跳转验证样式保持
  • 浏览器标签页切换验证
  • 窗口最小化/恢复验证

最终效果

修复后的组件现在具有：

  1. 可靠的默认状态：HTML模板就有正确显示
  2. 强制样式应用：不依赖CSS加载时机
  3. 强制Tab切换：参照VersionComparison的成熟机制
  4. 跨页面兼容：任何情况下都能正确工作
  5. 代码清洁：移除调试信息，符合生产环境标准

组件现在能够在任何页面跳转情况下正确显示，Tab切换功能与卡片切换同样可靠。