在这里插入图片描述

📌 模块概述

版本控制功能记录笔记的编辑历史,用户可以查看笔记的所有版本,并恢复到任何历史版本。版本控制提供了编辑的可追溯性和数据恢复的能力。

🔗 完整流程

第一步:记录版本

每当用户保存笔记时,系统自动记录当前版本。

第二步:查看历史

用户可以查看笔记的所有版本,包括编辑时间和编辑者。

第三步:恢复版本

用户可以选择任何历史版本来恢复笔记。

🔧 Web代码实现

// 版本控制页面
async renderVersionControl(noteId) {
  const versions = await noteDB.getVersions(noteId);

  return `
    <div class="page active">
      <div class="page-header">
        <h1 class="page-title">📜 版本控制</h1>
      </div>
      <div class="versions-list">
        ${versions.map((version, index) => `
          <div class="version-item">
            <div class="version-info">
              <span class="version-number">版本 ${versions.length - index}</span>
              <span class="version-time">${Utils.formatDate(version.createdAt)}</span>
            </div>
            <div class="version-actions">
              <button class="btn btn-sm btn-info" onclick="app.viewVersion(${version.id})">查看</button>
              <button class="btn btn-sm btn-success" onclick="app.restoreVersion(${version.id})">恢复</button>
            </div>
          </div>
        `).join('')}
      </div>
    </div>
  `;
}

// 保存版本
async saveVersion(noteId, content) {
  try {
    const version = {
      id: Date.now(),
      noteId: noteId,
      content: content,
      createdAt: new Date().toISOString()
    };

    await noteDB.addVersion(version);
  } catch (error) {
    console.error('保存版本失败:', error);
  }
}

// 恢复版本
async restoreVersion(versionId) {
  try {
    const version = await noteDB.getVersion(versionId);
    if (!version) {
      Utils.showToast('版本不存在', 'error');
      return;
    }

    const note = await noteDB.getNote(version.noteId);
    note.content = version.content;
    note.updatedAt = new Date().toISOString();
    await noteDB.updateNote(note);

    Utils.showToast('版本已恢复', 'success');
  } catch (error) {
    console.error('恢复版本失败:', error);
    Utils.showToast('操作失败,请重试', 'error');
  }
}

🔌 OpenHarmony 原生代码

// VersionControlPlugin.ets - 版本控制插件
import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';

@NativeComponent
export class VersionControlPlugin {
  private context: common.UIAbilityContext;

  constructor(context: common.UIAbilityContext) {
    this.context = context;
  }

  // 初始化插件
  public init(webviewController: webview.WebviewController): void {
    webviewController.registerJavaScriptProxy(
      new VersionControlJSProxy(this),
      'versionControlPlugin',
      ['saveVersion', 'getVersions', 'restoreVersion']
    );
  }

  // 保存版本
  public saveVersion(noteId: number, content: string): Promise<boolean> {
    return new Promise((resolve) => {
      try {
        const versionsPath = this.context.cacheDir + '/versions.json';
        let versions: Array<any> = [];
        
        try {
          const fileContent = fileIo.readTextSync(versionsPath);
          versions = JSON.parse(fileContent);
        } catch {
          versions = [];
        }

        versions.push({
          id: Date.now(),
          noteId: noteId,
          content: content,
          createdAt: new Date().toISOString()
        });

        fileIo.writeTextSync(versionsPath, JSON.stringify(versions, null, 2));
        resolve(true);
      } catch (error) {
        console.error('Failed to save version:', error);
        resolve(false);
      }
    });
  }

  // 获取版本列表
  public getVersions(noteId: number): Promise<Array<any>> {
    return new Promise((resolve) => {
      try {
        const versionsPath = this.context.cacheDir + '/versions.json';
        const content = fileIo.readTextSync(versionsPath);
        const versions = JSON.parse(content);
        const noteVersions = versions.filter((v: any) => v.noteId === noteId);
        resolve(noteVersions);
      } catch (error) {
        console.error('Failed to get versions:', error);
        resolve([]);
      }
    });
  }

  // 恢复版本
  public restoreVersion(versionId: number): Promise<string> {
    return new Promise((resolve) => {
      try {
        const versionsPath = this.context.cacheDir + '/versions.json';
        const content = fileIo.readTextSync(versionsPath);
        const versions = JSON.parse(content);
        const version = versions.find((v: any) => v.id === versionId);
        resolve(version ? version.content : '');
      } catch (error) {
        console.error('Failed to restore version:', error);
        resolve('');
      }
    });
  }
}

// VersionControlJSProxy.ets - JavaScript代理类
class VersionControlJSProxy {
  private plugin: VersionControlPlugin;

  constructor(plugin: VersionControlPlugin) {
    this.plugin = plugin;
  }

  saveVersion(noteId: number, content: string): void {
    this.plugin.saveVersion(noteId, content).then(success => {
      console.log('Version saved:', success);
    });
  }

  getVersions(noteId: number): void {
    this.plugin.getVersions(noteId).then(versions => {
      console.log('Versions:', versions.length);
    });
  }

  restoreVersion(versionId: number): void {
    this.plugin.restoreVersion(versionId).then(content => {
      console.log('Version restored');
    });
  }
}

📝 总结

版本控制功能展示了如何在Cordova与OpenHarmony混合开发中实现编辑历史管理。通过版本控制,用户可以安心地编辑笔记,知道可以随时恢复到任何历史版本。

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐