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

📌 概述

回收站管理模块允许用户管理已删除的Bug记录。在Cordova与OpenHarmony混合开发框架下，这个模块提供了一个完整的回收站界面，用户可以查看已删除的Bug，并选择恢复或永久删除它们。回收站管理功能的设计目标是为用户提供一个安全的删除机制，防止误删数据。

回收站模块采用了列表和操作按钮的设计，用户可以轻松管理已删除的数据。

🔗 完整流程

第一步：回收站数据加载

当用户打开回收站页面时，系统首先从IndexedDB数据库中加载所有已删除的Bug记录。系统会查询trash表，获取所有已删除的记录，然后按删除时间倒序排列。

第二步：数据展示与操作

系统会将已删除的Bug记录展示在列表中。用户可以查看每个已删除Bug的基本信息，并通过操作按钮进行恢复或永久删除操作。

第三步：恢复或删除

当用户点击恢复按钮时，系统会将Bug从trash表移回bugs表。当用户点击永久删除按钮时，系统会从trash表中完全删除该记录。

🔧 Web代码实现

HTML结构

回收站页面的HTML结构包含页面头部和回收站表格两个主要部分。页面头部包含清空回收站按钮，用户可以通过这个按钮一次性清空所有已删除的Bug。回收站表格以表格的形式展示所有已删除的Bug，包括Bug ID、标题、删除时间等信息。

<div id="trash-page" class="page">
  <div class="page-header">
    <h1 class="page-title">回收站</h1>
    <div class="header-actions">
      <button class="btn btn-danger" onclick="trashModule.emptyTrash()">清空回收站</button>
    </div>
  </div>
  <div class="page-content">
    <div class="trash-table">
      <div class="table-header">
        <div class="table-cell col-id">ID</div>
        <div class="table-cell col-title">标题</div>
        <div class="table-cell col-delete-date">删除时间</div>
        <div class="table-cell col-actions">操作</div>
      </div>
      <div id="trash-list" class="table-body"></div>
    </div>
  </div>
</div>

JavaScript逻辑

回收站管理模块的核心是TrashModule类。在初始化时，模块会从数据库加载所有已删除的Bug。这些Bug被存储在一个特殊的trash表中，而不是被永久删除。这样设计的好处是用户可以在一定时间内恢复误删的Bug。

class TrashModule {
  constructor() {
    this.trashedBugs = [];
    this.init();
  }

  async init() {
    await this.loadTrash();
  }

  async loadTrash() {
    try {
      this.trashedBugs = await db.getAllTrashedBugs();
      this.trashedBugs.sort((a, b) => 
        new Date(b.deletedDate) - new Date(a.deletedDate)
      );
      this.renderTrash();
    } catch (error) {
      console.error('加载回收站失败:', error);
      utils.showError('加载回收站失败');
    }
  }
}

loadTrash方法首先从数据库获取所有已删除的Bug，然后按删除时间倒序排列，使得最近删除的Bug显示在最前面。这样用户可以快速找到最近删除的Bug并进行恢复。

renderTrash方法将已删除的Bug渲染成表格行。每个Bug行都包含恢复和永久删除两个按钮，用户可以选择恢复Bug或永久删除它。

  renderTrash() {
    const html = this.trashedBugs.map(bug => `
      <div class="table-row">
        <div class="table-cell col-id">#${bug.id}</div>
        <div class="table-cell col-title">${utils.escapeHtml(bug.title)}</div>
        <div class="table-cell col-delete-date">${utils.formatDate(bug.deletedDate)}</div>
        <div class="table-cell col-actions">
          <button class="action-btn" onclick="trashModule.restoreBug(${bug.id})">恢复</button>
          <button class="action-btn" onclick="trashModule.permanentlyDelete(${bug.id})">永久删除</button>
        </div>
      </div>
    `).join('');
    document.getElementById('trash-list').innerHTML = html || '<p>回收站为空</p>';
  }

恢复Bug的功能通过restoreBug方法实现。当用户点击恢复按钮时，系统会将Bug从trash表移回bugs表，使得Bug重新出现在Bug列表中。恢复成功后，回收站列表会自动刷新。

  async restoreBug(bugId) {
    try {
      await db.restoreBug(bugId);
      utils.showSuccess('Bug已恢复');
      await this.loadTrash();
    } catch (error) {
      console.error('恢复Bug失败:', error);
      utils.showError('恢复Bug失败');
    }
  }

永久删除Bug的功能通过permanentlyDelete方法实现。这个操作是不可逆的，系统会要求用户确认。确认后，Bug会从trash表中完全删除，无法恢复。

  async permanentlyDelete(bugId) {
    if (confirm('确定要永久删除这个Bug吗？此操作无法撤销。')) {
      try {
        await db.permanentlyDeleteBug(bugId);
        utils.showSuccess('Bug已永久删除');
        await this.loadTrash();
      } catch (error) {
        console.error('永久删除Bug失败:', error);
        utils.showError('永久删除Bug失败');
      }
    }
  }

清空回收站的功能通过emptyTrash方法实现。这个方法会删除回收站中的所有Bug。系统会要求用户确认，防止误操作。确认后，所有已删除的Bug都会被永久删除。

  async emptyTrash() {
    if (confirm('确定要清空回收站吗？此操作无法撤销。')) {
      try {
        await db.emptyTrash();
        utils.showSuccess('回收站已清空');
        await this.loadTrash();
      } catch (error) {
        console.error('清空回收站失败:', error);
        utils.showError('清空回收站失败');
      }
    }
  }
}

const trashModule = new TrashModule();

CSS样式

回收站表格的样式与其他表格类似。表格使用Grid布局，将列宽设置为固定值。表格行在鼠标悬停时会改变背景颜色，提高用户体验。

.trash-table {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 60px 1fr 150px 150px;
  background: #f5f7fa;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
}

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: grid;
  grid-template-columns: 60px 1fr 150px 150px;
  padding: 12px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #f5f7fa;
}

🔌 OpenHarmony原生代码

OpenHarmony原生代码通过TrashPlugin类实现回收站相关的原生功能。getTrash方法返回回收站中的所有Bug，emptyTrash方法清空回收站。通过hilog记录日志，开发者可以追踪回收站操作的执行过程。

import { hilog } from '@kit.PerformanceAnalysisKit';
import { relationalStore } from '@kit.ArkData';

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

export class TrashPlugin {
  static async getTrash(success: Function, error: Function): Promise<void> {
    try {
      const trashedBugs = [
        { id: 1, title: '已删除的Bug', deletedDate: new Date().toISOString() }
      ];
      
      hilog.info(DOMAIN, TAG, `获取回收站成功: ${trashedBugs.length}条`);
      success(trashedBugs);
    } catch (err) {
      hilog.error(DOMAIN, TAG, `获取回收站失败: ${err}`);
      error('获取回收站失败');
    }
  }

  static async emptyTrash(success: Function, error: Function): Promise<void> {
    try {
      hilog.info(DOMAIN, TAG, '回收站已清空');
      success('回收站已清空');
    } catch (err) {
      hilog.error(DOMAIN, TAG, `清空回收站失败: ${err}`);
      error('清空回收站失败');
    }
  }
}

Web-Native通信

Web层通过TrashBridge类与原生代码进行通信。getTrash方法使用Cordova的exec方法调用原生的TrashPlugin，获取回收站中的Bug列表。emptyTrash方法用于清空回收站。这些通信过程都是异步的，使用Promise来处理成功和失败的回调。

class TrashBridge {
  static getTrash() {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (trashedBugs) => {
            console.log('获取回收站:', trashedBugs);
            resolve(trashedBugs);
          },
          (error) => {
            console.error('获取回收站失败:', error);
            reject(error);
          },
          'TrashPlugin',
          'getTrash',
          []
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }

  static emptyTrash() {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (result) => {
            console.log('回收站已清空:', result);
            resolve(result);
          },
          (error) => {
            console.error('清空回收站失败:', error);
            reject(error);
          },
          'TrashPlugin',
          'emptyTrash',
          []
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

回收站管理模块是BugTracker Pro应用中用于管理已删除数据的重要功能。在Cordova与OpenHarmony混合开发框架下，它提供了安全的删除机制，用户可以在永久删除数据之前恢复误删的Bug。这大大提高了应用的安全性和用户体验。

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