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

本文对应模块：pages.js 中“预算”页面的 HTML 模板与 UI 结构，重点是如何在 PC 布局下让用户直观地设置和查看预算信息。

---

1. 模块定位：把“我打算花多少钱”变成界面上的一行数据

预算模块的核心目标是：

• 为某个月份设置一个整体预算或按分类设置预算；
• 在首页和报表中对比“实际支出 vs. 预算”；
• 在用户接近或超过预算时给出提示。

本模块只关注预算页面的 UI 和基本数据输入方式，不深挖预算执行逻辑（那会在后续模块中展开）。

---

2. 预算页面整体结构

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

// ==================== 预算设置页面 ====================
'budget': () => `
  <div class="pc-page-container">
    <div class="pc-page-header">
      <h2>💳 预算管理</h2>
      <p>为本月设置整体预算，帮助你控制支出</p>
    </div>

    <div class="pc-card">
      <div class="pc-card-header"><h3>本月预算设置</h3></div>
      <div class="pc-card-body">
        <div class="pc-form-row">
          <div class="pc-form-group">
            <label class="pc-label">月份</label>
            <input type="month" id="budget-month" class="pc-input">
          </div>
          <div class="pc-form-group">
            <label class="pc-label">预算金额</label>
            <div class="pc-amount-input">
              <span class="currency">¥</span>
              <input
                type="number"
                id="budget-amount"
                class="pc-input pc-input-lg"
                placeholder="0.00"
                step="0.01"
                min="0"
              >
            </div>
          </div>
          <div class="pc-form-group">
            <button id="save-budget" class="pc-button pc-button-primary">保存预算</button>
          </div>
        </div>
      </div>
    </div>

    <div class="pc-card">
      <div class="pc-card-header"><h3>本月预算概览</h3></div>
      <div class="pc-card-body">
        <div id="budget-summary"></div>
      </div>
    </div>
  </div>
`,

2.1 表单部分：选择月份 + 输入金额

• budget-month：

  • 使用 <input type="month">，方便选择预算适用的月份；
  • 通常默认值会设为当前月份（可以在 JS 初始化时填充）。

• budget-amount：

  • 使用与记账页面相同的金额输入组件（pc-amount-input + pc-input-lg）；
  • 强调预算金额的重要性，让用户在视觉上更关注这一项；

• save-budget 按钮：

  • 用于提交当前月份的预算设置；
  • 在业务逻辑中，会调用 window.financeDB.addBudget 或类似方法把数据写入 budgets 表。

2.2 概览部分：预算进度与提示

• budget-summary 容器：
  • 用于展示该月预算与实际支出对比的结果；
  • 可以是一个进度条、一组数字卡片，或简单的文字提示；

示意结构可能类似：

<div id="budget-summary">
  <div class="pc-budget-stat">
    <div class="pc-budget-label">本月预算</div>
    <div class="pc-budget-value">¥3000.00</div>
  </div>
  <div class="pc-budget-stat">
    <div class="pc-budget-label">已支出</div>
    <div class="pc-budget-value">¥2100.00</div>
  </div>
  <div class="pc-budget-progress">
    <div class="pc-budget-progress-bar" style="width:70%"></div>
  </div>
  <div class="pc-budget-tip">本月支出已使用 70%，注意控制节奏～</div>
</div>

其中具体数字和进度条宽度由 JS 根据数据库中的预算和交易数据计算后填充。

---

3. ArkTS 视角：预算 UI 完全在 Web 层完成

预算页面的 UI 和基础输入逻辑全部运行在 Web + IndexedDB 层：

• ArkTS 层不直接参与预算计算和展示；
• 预算数据存储在 budgets 表中，通过 db.js 提供的 API 进行读写；
• 当用户导出/导入数据时，ArkTS FileManager 插件才会整体搬运 budgets 表与其他表的数据。

这种分工有几个好处：

• 前端可以自由调整预算页面的 UI 和交互，而不必修改 ArkTS 代码；
• ArkTS 只需保证导出/导入时把预算表包含在内即可，逻辑简单清晰。

---

4. 小结：预算设置与预算页面 UI 的特点

本模块在 UI 层面的几个关键点可以概括为：

1. 使用统一的 PC 布局和金额输入组件：

   • 预算金额输入与记账页面的金额输入保持一致，减少用户认知负担；

2. 通过月份选择器明确预算适用周期：

   • 使用 input type="month" 清晰表达“这是某一整月的预算”；

3. 为预算概览预留独立区域：

   • budget-summary 容器可以根据实际需要展示进度条、数值卡片和文字提示；

4. 与 ArkTS 容器解耦：

   • UI 和预算逻辑集中在 Web + IndexedDB 层，ArkTS 只在导入导出时整体处理数据。

理解了这个模块后，你可以继续在此基础上扩展：

• 为不同分类设置独立预算；
• 增加预算预警阈值和多级提示；
• 在首页或报表中嵌入预算小组件，让用户随时看到本月预算执行情况。

---

ArkTS 侧与预算数据的备份与恢复

预算页面 UI 只负责让用户输入和查看预算值，真正的持久化和跨设备迁移依赖于 ArkTS 侧的 FileManager 插件：

export class FileManagerPlugin extends CordovaPlugin {
  async exportData(callbackContext: CallbackContext, args: string[]): Promise<void> {
    try {
      // json 中包含 budgets 表以及其他所有业务表的数据
      const json = args[0];
      // 使用 fileIo 写入文件，详见前文模块中的完整示例
    } catch (error) {
      // 错误处理略
    }
  }
}

这样一来：

• Web 层在设置或修改预算后，只需保证 budgets 表中的数据是最新的；
• 当用户通过“导出数据”备份时，预算信息会与交易、账户、分类等数据一起被打包；
• 在新设备导入备份后，预算页面 UI 只要重新从 budgets 表读取并渲染即可，无需关心 ArkTS 层的具体实现细节。