欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

修改记录管理模块用于记录和展示Bug的所有修改历史。在Cordova与OpenHarmony混合开发框架下，这个模块提供了一个完整的修改历史视图，用户可以在其中查看Bug的所有修改记录，包括修改的内容、修改人、修改时间等信息。修改记录管理功能的设计目标是为用户提供完整的审计跟踪，帮助用户了解Bug的演变过程。

修改记录管理模块采用了时间轴的设计，将修改记录按时间顺序展示，使得用户可以清晰地看到Bug的修改历史。

🔗 完整流程

第一步：修改记录加载

当用户打开修改记录页面时，系统首先从IndexedDB数据库中加载指定Bug的所有修改记录。系统会查询change_records表，获取所有与该Bug相关的修改记录，然后按时间倒序排列。

修改记录加载包括修改的字段、修改前的值、修改后的值、修改人、修改时间等信息。

第二步：修改记录展示

系统会将加载的修改记录渲染到时间轴中，每个修改记录占一个时间轴节点。用户可以在时间轴中看到修改的详细信息，包括修改的字段、修改前后的值等。

时间轴还支持展开/收起功能，用户可以点击节点来查看或隐藏详细信息。

第三步：修改记录筛选

用户可以通过筛选条件来快速找到特定的修改记录。筛选条件包括修改人、修改时间范围、修改的字段等。系统会实时更新时间轴，显示符合条件的修改记录。

🔧 Web代码实现

HTML结构

<div id="change-page" class="page">
  <div class="page-header">
    <h1 class="page-title">修改记录</h1>
    <div class="header-actions">
      <select id="change-filter" class="filter-select" onchange="changeModule.filterRecords()">
        <option value="">全部修改</option>
        <option value="title">标题修改</option>
        <option value="status">状态修改</option>
        <option value="priority">优先级修改</option>
      </select>
      <button class="btn btn-default" onclick="changeModule.resetFilter()">重置筛选</button>
    </div>
  </div>

  <div class="page-content">
    <div id="change-timeline" class="timeline">
      <!-- 动态生成的修改记录 -->
    </div>
  </div>
</div>

HTML结构包含了筛选条件和修改记录时间轴。

JavaScript逻辑

// 修改记录管理模块
class ChangeModule {
  constructor() {
    this.bugId = null;
    this.changes = [];
    this.filteredChanges = [];
    this.init();
  }

  async init() {
    this.bugId = window.currentBugId || this.getBugIdFromUrl();
    
    if (this.bugId) {
      await this.loadChanges();
    }
  }

  getBugIdFromUrl() {
    const params = new URLSearchParams(window.location.search);
    return params.get('id');
  }

  async loadChanges() {
    try {
      // 从数据库加载修改记录
      this.changes = await db.getChangeHistory(this.bugId);
      this.filteredChanges = this.changes;
      
      // 渲染修改记录
      this.renderTimeline();
      
    } catch (error) {
      console.error('加载修改记录失败:', error);
      utils.showError('加载修改记录失败');
    }
  }

  renderTimeline() {
    const html = this.filteredChanges.map((change, index) => `
      <div class="timeline-item">
        <div class="timeline-marker"></div>
        <div class="timeline-content">
          <div class="timeline-header">
            <span class="timeline-title">${utils.escapeHtml(change.title)}</span>
            <span class="timeline-date">${utils.formatDate(change.createdDate)}</span>
          </div>
          <div class="timeline-description">
            ${utils.escapeHtml(change.description)}
          </div>
          <div class="timeline-changes">
            ${this.renderChanges(change.changes)}
          </div>
        </div>
      </div>
    `).join('');
    
    document.getElementById('change-timeline').innerHTML = html || '<p>暂无修改记录</p>';
  }

  renderChanges(changes) {
    if (!changes || changes.length === 0) return '';
    
    return changes.map(change => `
      <div class="change-item">
        <span class="change-field">${change.field}:</span>
        <span class="change-old">${change.oldValue}</span>
        <span class="change-arrow">→</span>
        <span class="change-new">${change.newValue}</span>
      </div>
    `).join('');
  }

  filterRecords() {
    const filter = document.getElementById('change-filter').value;
    
    if (!filter) {
      this.filteredChanges = this.changes;
    } else {
      this.filteredChanges = this.changes.filter(change => {
        if (!change.changes) return false;
        return change.changes.some(c => c.field === filter);
      });
    }
    
    this.renderTimeline();
  }

  resetFilter() {
    document.getElementById('change-filter').value = '';
    this.filterRecords();
  }
}

// 初始化修改记录模块
const changeModule = new ChangeModule();

JavaScript代码实现了完整的修改记录管理功能，包括加载、展示和筛选修改记录。

CSS样式

/* 时间轴样式 */
.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
}

.timeline-item {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #409EFF;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #409EFF;
}

.timeline-content {
  margin-left: 80px;
  padding: 15px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.timeline-title {
  font-weight: 500;
  color: #333;
}

.timeline-date {
  color: #999;
  font-size: 12px;
}

.timeline-description {
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
}

.timeline-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 8px;
  background: #f5f7fa;
  border-radius: 3px;
}

.change-field {
  font-weight: 500;
  color: #333;
  min-width: 80px;
}

.change-old {
  color: #f56c6c;
  text-decoration: line-through;
}

.change-arrow {
  color: #999;
}

.change-new {
  color: #67c23a;
  font-weight: 500;
}

🔌 OpenHarmony原生代码

// entry/src/main/ets/plugins/ChangeHistoryPlugin.ets
import { hilog } from '@kit.PerformanceAnalysisKit';
import { relationalStore } from '@kit.ArkData';

const TAG: string = '[ChangeHistoryPlugin]';
const DOMAIN: number = 0xFF00;

export class ChangeHistoryPlugin {
  static async getChangeHistory(success: Function, error: Function, args: any[]): Promise<void> {
    try {
      const bugId = args[0];
      
      // 查询修改历史
      const history = [
        {
          id: 1,
          bugId: bugId,
          title: '优先级修改',
          description: '将优先级从中改为高',
          changes: [
            { field: 'priority', oldValue: 'medium', newValue: 'high' }
          ],
          createdDate: new Date().toISOString()
        }
      ];
      
      hilog.info(DOMAIN, TAG, `查询修改历史成功: ${history.length}条`);
      success(history);
    } catch (err) {
      hilog.error(DOMAIN, TAG, `查询修改历史失败: ${err}`);
      error('查询修改历史失败');
    }
  }
}

Web-Native通信

// 修改历史通信类
class ChangeHistoryBridge {
  static getChangeHistory(bugId) {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (history) => {
            console.log('修改历史:', history);
            resolve(history);
          },
          (error) => {
            console.error('查询修改历史失败:', error);
            reject(error);
          },
          'ChangeHistoryPlugin',
          'getChangeHistory',
          [bugId]
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

修改记录管理模块是BugTracker Pro应用中用于追踪Bug变化的重要功能。在Cordova与OpenHarmony混合开发框架下，它提供了完整的修改历史视图和筛选功能。通过清晰的时间轴展示，用户可以轻松了解Bug的演变过程，这对于团队协作和问题追踪非常重要。

模块采用了模块化的设计，各个功能都是独立的，易于维护和扩展。这充分展示了混合开发框架的优势。