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

📌 概述

版本历史功能允许用户查看旅行记录的修改历史。用户可以查看每个版本的内容，也可以恢复到之前的版本。版本历史提供了数据的可追溯性和恢复能力。在 Cordova 与 OpenHarmony 的混合开发框架中，版本历史需要实现版本管理和数据恢复。

🔗 完整流程

第一步：版本记录与存储

每次编辑旅行时，需要保存一个版本记录。版本记录包括编辑前后的数据、编辑人、编辑时间等信息。版本记录需要与旅行关联。

第二步：版本列表展示与比较

版本历史页面需要展示所有版本的列表。用户可以查看版本的详细信息，也可以比较两个版本的差异。

第三步：原生层版本管理与存储优化

OpenHarmony 原生层可以实现版本的压缩存储，节省存储空间。原生层还可以实现版本的快速查询和恢复。

🔧 Web 代码实现

版本历史页面 HTML 结构

<div id="version-history-page" class="page">
    <div class="page-header">
        <h1>版本历史</h1>
    </div>
    
    <div class="version-history-container">
        <div class="version-list" id="versionList">
            <!-- 版本列表动态加载 -->
        </div>
        
        <div class="version-detail" id="versionDetail">
            <!-- 版本详情动态加载 -->
        </div>
    </div>
</div>

HTML 结构包含版本列表和版本详情。

加载版本历史函数

async function loadVersionHistory(tripId) {
    try {
        // 获取所有版本
        const versions = await db.getVersions(tripId);
        
        // 按时间倒序排序
        versions.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
        
        // 渲染版本列表
        renderVersionList(versions);
    } catch (error) {
        console.error('Error loading version history:', error);
        showToast('加载版本历史失败');
    }
}

加载版本历史函数从数据库获取所有版本。

版本列表渲染函数

function renderVersionList(versions) {
    const container = document.getElementById('versionList');
    container.innerHTML = '';
    
    versions.forEach((version, index) => {
        const versionElement = document.createElement('div');
        versionElement.className = 'version-item';
        versionElement.id = `version-${version.id}`;
        versionElement.innerHTML = `
            <div class="version-header">
                <h4>版本 ${versions.length - index}</h4>
                <span class="version-time">${formatDate(version.timestamp)}</span>
            </div>
            <div class="version-body">
                <p>编辑者: ${version.editor || '未知'}</p>
                <p>修改: ${version.changes ? version.changes.length : 0} 项</p>
            </div>
            <div class="version-actions">
                <button class="btn-small" onclick="viewVersion(${version.id})">
                    查看
                </button>
                <button class="btn-small" onclick="restoreVersion(${version.id})">
                    恢复
                </button>
            </div>
        `;
        container.appendChild(versionElement);
    });
}

版本列表渲染函数展示所有版本。

查看版本函数

async function viewVersion(versionId) {
    try {
        // 获取版本数据
        const version = await db.getVersion(versionId);
        
        if (version) {
            // 显示版本详情
            const detailContainer = document.getElementById('versionDetail');
            detailContainer.innerHTML = `
                <div class="version-detail-content">
                    <h3>版本详情</h3>
                    <div class="detail-item">
                        <span>编辑时间:</span>
                        <span>${formatDate(version.timestamp)}</span>
                    </div>
                    <div class="detail-item">
                        <span>编辑者:</span>
                        <span>${version.editor || '未知'}</span>
                    </div>
                    <div class="detail-item">
                        <span>修改内容:</span>
                        <ul>
                            ${version.changes ? version.changes.map(change => 
                                `<li>${change}</li>`
                            ).join('') : '<li>无修改</li>'}
                        </ul>
                    </div>
                    <div class="detail-item">
                        <span>数据:</span>
                        <pre>${JSON.stringify(version.data, null, 2)}</pre>
                    </div>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error viewing version:', error);
        showToast('查看版本失败');
    }
}

查看版本函数显示版本的详细信息。

恢复版本函数

async function restoreVersion(versionId) {
    if (!confirm('确定要恢复到这个版本吗？')) {
        return;
    }
    
    try {
        // 获取版本数据
        const version = await db.getVersion(versionId);
        
        if (version) {
            // 获取当前旅行
            const trip = await db.getTrip(version.tripId);
            
            // 恢复数据
            trip.destination = version.data.destination;
            trip.description = version.data.description;
            trip.startDate = version.data.startDate;
            trip.endDate = version.data.endDate;
            trip.expense = version.data.expense;
            trip.updatedAt = new Date().toISOString();
            
            // 保存到数据库
            await db.updateTrip(trip);
            
            showToast('版本已恢复');
            
            // 重新加载版本历史
            loadVersionHistory(trip.id);
        }
    } catch (error) {
        console.error('Error restoring version:', error);
        showToast('恢复版本失败');
    }
}

恢复版本函数将旅行恢复到指定版本。

🔌 OpenHarmony 原生代码实现

版本历史插件

// VersionPlugin.ets
import { BusinessError } from '@ohos.base';

export class VersionPlugin {
    // 处理版本保存事件
    onVersionSaved(args: any, callback: Function): void {
        try {
            const versionId = args[0].versionId;
            const tripId = args[0].tripId;
            
            console.log(`[Version] Saved: ${versionId} for trip ${tripId}`);
            
            callback({ success: true, message: '版本已保存' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
    
    // 处理版本恢复事件
    onVersionRestored(args: any, callback: Function): void {
        try {
            const versionId = args[0].versionId;
            
            console.log(`[Version] Restored: ${versionId}`);
            
            callback({ success: true, message: '版本已恢复' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

版本历史插件处理版本保存和恢复。

📝 总结

版本历史功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个版本管理系统。Web 层负责版本 UI 和数据恢复，原生层负责版本存储。通过版本历史，用户可以追踪和恢复旅行数据的修改。