在这里插入图片描述

欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycross平台开发者社区](https://openharmonycrossplatform.csdn.net)，一起共建开源鸿蒙跨平台生态。

本文对应模块：pages.js 中“分类统计”页面以及分类管理相关的 UI 结构，重点是如何在界面层清晰展示收入/支出分类，并为后续的分类汇总与占比分析提供良好的展示基础。

1. 模块定位：把“钱花在哪儿”直观展示出来

分类管理与分类统计，是用户理解自己消费结构的关键入口：

  • 通过分类查看某段时间内各类支出的金额和占比；
  • 发现哪些分类是“隐形大头”，从而有针对性地优化消费；
  • 为预算设置提供参考依据（例如发现餐饮占比过高）。

在本模块中，我们关注的是分类相关的 UI：

  • 分类统计页面的整体布局；
  • 分类列表与图表容器的结构；
  • 与 ArkTS 容器之间的边界。

2. 分类统计页面的整体结构

在 pages.js 中，“分类统计”页面的模板大致如下（节选与合理还原）：

// ==================== 分类统计页面 ====================
'categories': () => `
  <div class="pc-page-container">
    <div class="pc-page-header">
      <h2>🏷️ 分类统计</h2>
      <p>按分类查看收支分布</p>
    </div>

    <div class="pc-filter-bar">
      <div class="pc-filter-group">
        <label class="pc-label">月份</label>
        <input type="month" id="cat-month" class="pc-input">
      </div>
      <div class="pc-filter-group">
        <label class="pc-label">类型</label>
        <select id="cat-type" class="pc-input">
          <option value="expense">支出</option>
          <option value="income">收入</option>
        </select>
      </div>
    </div>

    <div class="pc-grid">
      <div class="pc-card pc-chart-card">
        <div class="pc-card-header"><h3>分类占比</h3></div>
        <div class="pc-card-body">
          <div id="category-pie-chart"></div>
        </div>
      </div>

      <div class="pc-card">
        <div class="pc-card-header"><h3>分类明细</h3></div>
        <div class="pc-card-body">
          <div id="category-list"></div>
        </div>
      </div>
    </div>
  </div>
`,

2.1 过滤条件区

  • pc-filter-bar：

    • 放置“月份”和“类型”两个筛选条件；
    • 与交易列表页面的过滤栏设计风格保持一致，提升连贯感。

  • cat-month：

    • 使用 <input type="month">，方便用户选择要查看的月份；
    • 内部逻辑会根据这个值计算起止日期，用于筛选对应月份的交易记录。

  • cat-type：

    • 只提供“支出/收入”两种类型，默认一般选中“支出”，因为支出的分类分析更常用；
    • UI 上使用简单的下拉框，既直观又容易实现。

2.2 图表 + 列表双视图

  • 左侧 pc-card pc-chart-card：

    • 包裹一个 id="category-pie-chart" 的 div，作为饼图（或其他图表）的容器；
    • 具体图表渲染由 JS 或第三方图表库完成，UI 层只负责提供占位。

  • 右侧 pc-card：

    • 标题为“分类明细”；
    • id="category-list" 的容器用于展示按分类排序的列表，例如每个分类的金额和百分比；
    • 可以用列表项或小卡片的形式展示，配合颜色标记对应饼图的扇区。

这种“双视图”布局：

  • 图表负责“总体感觉”：一眼看出哪个分类占比最大；
  • 列表负责“精确信息”：显示每个分类的具体金额和占比数值。

3. 分类明细列表的 UI 结构示意

虽然具体实现可能略有不同，但一个典型的分类明细列表会长这样：

<div id="category-list">
  <div class="pc-category-stat-item">
    <div class="pc-category-stat-left">
      <span class="pc-category-color" style="background-color:#FF9800"></span>
      <span class="pc-category-name">餐饮</span>
    </div>
    <div class="pc-category-stat-right">
      <span class="pc-category-amount">¥1234.56</span>
      <span class="pc-category-percent">35.6%</span>
    </div>
  </div>
  <!-- 其他分类项 -->
</div>

3.1 设计要点

  • pc-category-stat-item：

    • 每个分类一行，保持简洁；

  • 左侧区域：

    • pc-category-color：显示与饼图扇区相同的颜色，建立视觉关联；
    • pc-category-name：分类名称，例如“餐饮”、“交通”、“住房”等；

  • 右侧区域：

    • pc-category-amount：该分类在当前月份的总金额；
    • pc-category-percent：该分类占该月总支出的百分比；

配合 CSS，可以实现：

  • 左侧颜色块 + 名称左对齐；
  • 右侧金额和百分比右对齐，形成对比；
  • 鼠标悬停时高亮某一行，同时在图表中高亮对应扇区（由 JS 逻辑实现）。

4. 分类管理 UI 的可能形态

虽然当前代码中更侧重“分类统计”视图，但从整体需求出发，分类管理 UI 通常包括：

  • 收入分类列表；
  • 支出分类列表；
  • 新增/编辑/删除分类的入口。

在 UI 上可以采用类似账户管理页面的表格形式：

<table class="pc-table" id="categories-table">
  <thead>
    <tr>
      <th>分类名称</th>
      <th>类型</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- JS 动态渲染分类行 -->
  </tbody>
</table>

以及一个“新增分类”按钮：

<button id="add-category" class="pc-button pc-button-primary">新增分类</button>

在事件绑定中：

bindPageEvents(pageName) {
  if (pageName === 'categories') {
    const addBtn = document.getElementById('add-category');
    if (addBtn) {
      addBtn.onclick = () => this._showAddCategoryDialog();
    }

    this.loadCategoriesData();
  }
}

注意：以上表格和按钮结构是基于项目现有模式的扩展设计建议，实际代码可以按需要精简或增强。

5. ArkTS 视角：分类 UI 与原生层的分工

和前面多个模块一样，分类管理与分类统计的 UI 和数据处理完全发生在 Web + IndexedDB 层：

  • 分类本身存储在 categories 表中；
  • 分类统计依赖 transactions 表中的 category 字段进行汇总；
  • ArkTS 层只在导出/导入时整体搬运这些数据。

也就是说：

  • ArkTS 不关心“有哪些分类”、“每个分类下有多少支出”；
  • 它只负责在你需要备份或恢复数据时，把 categories 和 transactions 的内容整体读写文件。

这种职责分工使得：

  • 你可以在 Web 层自由调整分类 UI（增加颜色、排序、合并分类等），而不影响原生代码；
  • ArkTS 侧只需要保证导出/导入数据结构保持一致即可。

6. 小结：分类管理与统计 UI 的关键点

本模块在 UI 设计和架构分工上的关键要点包括：

  1. 过滤条件与结果区域分明：

    • 月份、类型等筛选条件集中在 pc-filter-bar；
    • 分类占比图表和明细列表放在 pc-grid 中，视觉结构清晰；

  2. 图表 + 列表的双视图设计：

    • 饼图或其他图表负责整体感知；
    • 列表负责精确数值和排序，对分析决策更友好；

  3. 分类明细项组件化：

    • 每条分类记录使用统一的 pc-category-stat-item 结构，便于样式和交互统一维护；

  4. 为分类管理操作预留空间：

    • 通过表格和“新增分类”按钮，为后续新增/编辑/删除分类功能提供自然入口；

  5. 与 ArkTS 容器松耦合：

    • 所有分类展示和操作逻辑都在 Web 层完成；
    • ArkTS 只参与数据整体导入导出，降低跨层耦合度。

理解了本模块后，你就可以很自然地在现有 UI 框架上扩展分类相关功能：无论是增加更多的分类属性、添加分类合并工具，还是做更复杂的筛选和排序，都可以在这套基础之上迭代。

ArkTS 侧对分类统计的支撑

分类管理与分类统计模块的所有 UI 和聚合逻辑都跑在 Web + IndexedDB 层，但它依赖 ArkTS 提供的容器和备份能力。容器部分仍然是 Index.ets：

import {
  MainPage,
  PluginEntry,
} from '@magongshou/harmony-cordova/Index';
import { FileManagerPlugin } from '../plugins/FileManagerPlugin';

@Entry
@Component
struct Index {
  cordovaPlugs: Array<PluginEntry> = [
    { pluginName: 'FileManager', pluginObject: new FileManagerPlugin() }
  ];

  build() {
    MainPage({
      cordovaPlugs: this.cordovaPlugs
    });
  }
}

导出时，categories 表与 transactions 表中的分类 ID 一起被打包进 JSON，让 ArkTS 插件可以完成“分类体系 + 交易数据”的整体备份与恢复。这保证了：

  • 在新设备导入备份后，分类统计页面仍然能够正确地按分类汇总和展示数据；
  • ArkTS 只需保证数据整体进出一致，不需要理解分类本身的业务语义。
# ui
Logo
AtomGit开源社区

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

更多推荐

cover

20260325_144530_AAAI_2026_让_LLM_“看图不迷路”：多智能体_S

avatar AtomGit开源社区
cover

字节跳动“卷”到离谱！裸辞后我投身大模型风口，90天逆袭成“AI小子”！

avatar AtomGit开源社区

主流AI生图工具盘点：功能对比与使用指南

本文整理当前主流AI图像生成工具的技术架构、功能特性和使用方法，供开发者和创作者参考。

avatar AtomGit开源社区