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

📌 概述

标签管理模块允许用户为Bug添加和管理标签。在Cordova与OpenHarmony混合开发框架下，这个模块提供了完整的标签管理界面，用户可以创建、编辑、删除标签，以及为Bug添加标签。标签管理功能的设计目标是让用户能够灵活地组织和分类Bug，提高工作效率。

标签管理模块采用了标签云和标签列表的设计，用户可以快速查看和管理所有标签。

🔗 完整流程

第一步：标签数据加载

当用户打开标签管理页面时，系统首先从IndexedDB数据库中加载所有标签数据。系统会查询tags表，获取所有标签记录，然后计算每个标签被使用的次数。

标签数据加载包括标签ID、标签名称、标签描述、使用次数等信息。

第二步：标签显示与操作

系统会将加载的标签数据渲染到标签列表中。用户可以在列表中看到所有标签，并通过操作按钮进行编辑或删除操作。

标签还支持搜索功能，用户可以快速找到需要的标签。

第三步：标签编辑与保存

当用户点击编辑按钮时，系统会打开一个模态框，显示标签的详细信息。用户可以在模态框中修改标签的名称和描述，然后点击保存按钮保存修改。

🔧 Web代码实现

HTML结构

标签管理页面的HTML结构包含页面头部、标签云容器和标签列表三个主要部分。页面头部包含搜索框和新增标签按钮，用户可以通过搜索框快速查找标签。标签云容器以可视化的方式展示所有标签，标签的大小根据使用频率动态调整，使用频率越高的标签显示越大。标签列表以表格的形式展示所有标签的详细信息，包括标签ID、名称、描述和使用次数。

<div id="tag-page" class="page">
  <div class="page-header">
    <h1 class="page-title">标签管理</h1>
    <div class="header-actions">
      <input type="text" id="tag-search" class="search-input" placeholder="搜索标签..." />
      <button class="btn btn-primary" onclick="tagModule.openAddModal()">新增标签</button>
    </div>
  </div>
  <div class="page-content">
    <div class="tag-cloud">
      <h2>标签云</h2>
      <div id="tag-cloud-container" class="cloud-container"></div>
    </div>
    <div class="tags-table">
      <h2>标签列表</h2>
      <div class="table-header">
        <div class="table-cell col-id">ID</div>
        <div class="table-cell col-name">标签名称</div>
        <div class="table-cell col-description">描述</div>
        <div class="table-cell col-count">使用次数</div>
        <div class="table-cell col-actions">操作</div>
      </div>
      <div id="tags-list" class="table-body"></div>
    </div>
  </div>
</div>

标签编辑模态框用于添加和编辑标签。当用户点击新增或编辑按钮时，模态框会显示，用户可以在其中输入标签名称和描述。模态框包含表单验证功能，确保标签名称不为空。

<div id="tag-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="modal-title">新增标签</h2>
      <button class="modal-close" onclick="tagModule.closeModal()">×</button>
    </div>
    <div class="modal-body">
      <form id="tag-form">
        <div class="form-group">
          <label for="tag-name" class="form-label">标签名称 <span class="required">*</span></label>
          <input type="text" id="tag-name" class="form-input" placeholder="请输入标签名称" maxlength="30" required />
          <div class="form-error" id="name-error"></div>
        </div>
        <div class="form-group">
          <label for="tag-description" class="form-label">描述</label>
          <textarea id="tag-description" class="form-textarea" placeholder="请输入标签描述" rows="3"></textarea>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" onclick="tagModule.closeModal()">取消</button>
      <button class="btn btn-primary" onclick="tagModule.saveTag()">保存</button>
    </div>
  </div>
</div>

JavaScript逻辑

标签管理模块的核心是TagModule类，它负责管理标签的生命周期。在初始化时，模块会从数据库加载所有标签，并计算每个标签的使用次数。使用次数是通过查询数据库中有多少个Bug使用了该标签来确定的。

class TagModule {
  constructor() {
    this.tags = [];
    this.currentEditingId = null;
    this.init();
  }

  async init() {
    await this.loadTags();
    this.bindEvents();
  }

  async loadTags() {
    try {
      this.tags = await db.getAllTags();
      for (let tag of this.tags) {
        const count = await db.getBugCountByTag(tag.id);
        tag.count = count;
      }
      this.renderTagCloud();
      this.renderTagList();
    } catch (error) {
      console.error('加载标签失败:', error);
      utils.showError('加载标签失败');
    }
  }
}

loadTags方法首先从数据库获取所有标签，然后对每个标签进行计数。这个计数过程很重要，因为它决定了标签云中标签的显示大小。使用次数越多的标签会显示得越大，这样用户可以一目了然地看到最常用的标签。

标签云的渲染是通过calculateSize方法实现的，它根据标签的使用次数计算一个1到5之间的大小值。这个大小值对应不同的CSS类，从而改变标签的字体大小。

  renderTagCloud() {
    const maxCount = Math.max(...this.tags.map(t => t.count || 0), 1);
    const html = this.tags.map(tag => {
      const size = Math.ceil((tag.count || 0) / maxCount * 5) + 1;
      return `<span class="cloud-tag size-${size}" onclick="tagModule.openEditModal(${tag.id})">${utils.escapeHtml(tag.name)}</span>`;
    }).join('');
    document.getElementById('tag-cloud-container').innerHTML = html || '<p>暂无标签</p>';
  }

标签列表的渲染通过renderTagList方法完成。这个方法生成一个HTML表格，显示所有标签的详细信息。每个标签行都包含编辑和删除按钮，用户可以通过这些按钮对标签进行操作。

  renderTagList(filtered = null) {
    const data = filtered || this.tags;
    const html = data.map(tag => `
      <div class="table-row">
        <div class="table-cell col-id">${tag.id}</div>
        <div class="table-cell col-name">${utils.escapeHtml(tag.name)}</div>
        <div class="table-cell col-description">${utils.escapeHtml(tag.description || '')}</div>
        <div class="table-cell col-count">${tag.count || 0}</div>
        <div class="table-cell col-actions">
          <button class="action-btn" onclick="tagModule.openEditModal(${tag.id})">编辑</button>
          <button class="action-btn" onclick="tagModule.deleteTag(${tag.id})">删除</button>
        </div>
      </div>
    `).join('');
    document.getElementById('tags-list').innerHTML = html || '<p>暂无标签</p>';
  }

搜索功能通过bindEvents方法实现。当用户在搜索框中输入内容时，系统会实时过滤标签列表，只显示匹配的标签。搜索使用了防抖技术，避免频繁的DOM更新，提高性能。

  bindEvents() {
    const searchInput = document.getElementById('tag-search');
    searchInput.addEventListener('input', utils.debounce(() => {
      const keyword = searchInput.value.toLowerCase();
      const filtered = this.tags.filter(tag => 
        tag.name.toLowerCase().includes(keyword) ||
        (tag.description && tag.description.toLowerCase().includes(keyword))
      );
      this.renderTagList(filtered);
    }, 300));
  }

添加和编辑标签的功能通过openAddModal和openEditModal方法实现。这两个方法都会打开模态框，让用户输入标签信息。openAddModal用于创建新标签，而openEditModal用于编辑现有标签。

  openAddModal() {
    this.currentEditingId = null;
    document.getElementById('modal-title').textContent = '新增标签';
    document.getElementById('tag-name').value = '';
    document.getElementById('tag-description').value = '';
    document.getElementById('tag-modal').style.display = 'flex';
  }

  async openEditModal(tagId) {
    const tag = this.tags.find(t => t.id === tagId);
    if (!tag) return;
    this.currentEditingId = tagId;
    document.getElementById('modal-title').textContent = '编辑标签';
    document.getElementById('tag-name').value = tag.name;
    document.getElementById('tag-description').value = tag.description || '';
    document.getElementById('tag-modal').style.display = 'flex';
  }

保存标签的功能通过saveTag方法实现。这个方法首先验证标签名称不为空，然后根据currentEditingId判断是添加新标签还是更新现有标签。保存成功后，模态框会关闭，标签列表会重新加载以显示最新的数据。

  async saveTag() {
    const name = document.getElementById('tag-name').value.trim();
    const description = document.getElementById('tag-description').value.trim();
    
    if (!name) {
      document.getElementById('name-error').textContent = '标签名称不能为空';
      return;
    }
    
    try {
      if (this.currentEditingId) {
        await db.updateTag(this.currentEditingId, { name, description });
        utils.showSuccess('标签已更新');
      } else {
        await db.addTag({ name, description });
        utils.showSuccess('标签已添加');
      }
      this.closeModal();
      await this.loadTags();
    } catch (error) {
      console.error('保存标签失败:', error);
      utils.showError('保存标签失败');
    }
  }

删除标签的功能通过deleteTag方法实现。在删除前，系统会检查该标签是否被使用。如果标签已被使用，系统会显示警告信息，防止用户误删重要标签。只有未被使用的标签才能被删除。

  async deleteTag(tagId) {
    const tag = this.tags.find(t => t.id === tagId);
    if (!tag) return;
    
    if (tag.count > 0) {
      utils.showWarning('该标签已被使用，无法删除');
      return;
    }
    
    if (confirm(`确定要删除标签"${tag.name}"吗？`)) {
      try {
        await db.deleteTag(tagId);
        utils.showSuccess('标签已删除');
        await this.loadTags();
      } catch (error) {
        console.error('删除标签失败:', error);
        utils.showError('删除标签失败');
      }
    }
  }
}

const tagModule = new TagModule();

CSS样式

标签云的样式通过CSS类来控制。标签云容器使用Flexbox布局，使标签能够自动换行。每个标签都有不同的大小类（size-1到size-5），对应不同的字体大小。标签在鼠标悬停时会有缩放动画效果，提高用户体验。

.tag-cloud {
  padding: 20px;
  background: white;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cloud-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cloud-tag {
  padding: 8px 12px;
  background: #409EFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cloud-tag:hover {
  background: #66b1ff;
  transform: scale(1.1);
}

.cloud-tag.size-1 { font-size: 12px; }
.cloud-tag.size-2 { font-size: 14px; }
.cloud-tag.size-3 { font-size: 16px; }
.cloud-tag.size-4 { font-size: 18px; }
.cloud-tag.size-5 { font-size: 20px; }

🔌 OpenHarmony原生代码

OpenHarmony原生代码通过TagPlugin类实现标签相关的原生功能。getTags方法返回一个标签列表，这个列表可以来自原生数据库或其他数据源。通过hilog记录日志，开发者可以追踪标签操作的执行过程。

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

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

export class TagPlugin {
  static async getTags(success: Function, error: Function): Promise<void> {
    try {
      const tags = [
        { id: 1, name: '紧急', description: '紧急问题' },
        { id: 2, name: '功能', description: '功能相关' },
        { id: 3, name: '性能', description: '性能相关' }
      ];
      
      hilog.info(DOMAIN, TAG, `获取标签成功: ${tags.length}个`);
      success(tags);
    } catch (err) {
      hilog.error(DOMAIN, TAG, `获取标签失败: ${err}`);
      error('获取标签失败');
    }
  }
}

Web-Native通信

Web层通过TagBridge类与原生代码进行通信。getTags方法使用Cordova的exec方法调用原生的TagPlugin，获取标签列表。这个通信过程是异步的，使用Promise来处理成功和失败的回调。

class TagBridge {
  static getTags() {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (tags) => {
            console.log('获取标签:', tags);
            resolve(tags);
          },
          (error) => {
            console.error('获取标签失败:', error);
            reject(error);
          },
          'TagPlugin',
          'getTags',
          []
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

标签管理模块是BugTracker Pro应用中用于组织Bug的重要功能。在Cordova与OpenHarmony混合开发框架下，它提供了完整的标签管理界面和功能。通过标签云和标签列表的结合，用户可以快速查看和管理所有标签，这大大提高了工作效率。

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