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

本文对应模块：pages.js 中“记支出”页面的 HTML 模板与 UI 结构，重点是如何在 PC 布局下为支出录入提供清晰、易用的界面，并为后续预算与分类统计打基础。

---

1. 模块定位：支出录入是使用频率最高的页面之一

对大多数个人理财用户来说，“记支出”的使用频率往往高于“记收入”。项目在设计支出页面 UI 时，延续了记收入页面的整体布局和组件体系，但在文案、提示以及与预算相关的扩展空间上做了区分。

在当前实现中，支出页面主要负责：

• 输入一笔支出的金额；
• 选择资金来源账户；
• 选择支出分类（餐饮、交通、娱乐等）；
• 选择日期与填写备注；
• 为后续预算统计和分类统计提供准确数据来源。

---

2. 页面整体结构：与记收入保持同构

在 pages.js 里，“记支出”页面的模板大致如下（节选与简化）：

// ==================== 记支出页面 ====================
'add-expense': () => `
  <div class="pc-page-container">
    <div class="pc-page-header">
      <h2>📉 记录支出</h2>
      <p>记录一笔新的支出</p>
    </div>
    <div class="pc-form-layout">
      <div class="pc-form-main">
        <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">金额 <span class="required">*</span></label>
                <div class="pc-amount-input">
                  <span class="currency">¥</span>
                  <input
                    type="number"
                    id="trans-amount"
                    class="pc-input pc-input-lg"
                    placeholder="0.00"
                    step="0.01"
                    min="0"
                  >
                </div>
              </div>
            </div>
            <!-- 这里会有账户选择、支出分类、日期、备注等表单项 -->
          </div>
        </div>
      </div>
      <div class="pc-form-side">
        <!-- 侧边区域：可以放预算提示、当月支出概览、常用分类快捷入口等 -->
      </div>
    </div>
  </div>
`,

2.1 与记收入页面的相同点

• 使用同样的 pc-page-container 和 pc-page-header 结构，保证所有页面的视觉骨架一致；
• 使用同样的 pc-form-layout、pc-form-main、pc-form-side，维持左右两列布局的习惯；
• 金额输入区域继续使用 pc-amount-input + pc-input-lg 的组合，让金额字段在视觉上占据主导地位；
• 其他字段（账户、分类、日期、备注）也遵循相同的表单组件规范（pc-form-row、pc-form-group、pc-label 等）。

这种“同构”设计让用户从“记收入”切换到“记支出”时几乎不需要重新学习，仅通过标题和文案就能立刻理解当前页面的用途。

2.2 与记收入页面的不同点

• 标题与图标由“📈 记录收入”改为“📉 记录支出”，用简单直观的视觉元素区分正向与负向资金流动；
• 卡片标题从“收入信息”变为“支出信息”，文案更贴合场景；
• 右侧 pc-form-side 区域在后续可以重点用作“预算提醒”和“本月支出概览”等，与收入场景有所区分。

---

3. 金额与分类：支出场景下的 UI 重点

在支出场景下，金额和分类 通常是后续分析时最关键的两个维度，因此在 UI 上也需要给予足够关注。

3.1 金额输入区域（与记收入一致的部分）

支出页面复用了与记收入相同的金额输入组件：

<div class="pc-form-row">
  <div class="pc-form-group">
    <label class="pc-label">金额 <span class="required">*</span></label>
    <div class="pc-amount-input">
      <span class="currency">¥</span>
      <input
        type="number"
        id="trans-amount"
        class="pc-input pc-input-lg"
        placeholder="0.00"
        step="0.01"
        min="0"
      >
    </div>
  </div>
</div>

设计理念与“记收入”完全一致：

• 通过 pc-input-lg 突出金额的重要性；
• 通过 required 小红星和错误提示（在逻辑层）保证输入有效性；
• 使用 step="0.01"、min="0" 限制非法输入，减少后端校验的压力。

3.2 支出分类选择的 UI 预期

虽然在模板节选中没有完整展示分类部分，但从项目结构可以推断支出分类大致会采用如下模式：

• 通过一个下拉框或分类列表（例如一组 pc-category-item）展示所有支出分类；
• 当前选中的分类项会带有高亮样式（比如添加 selected 类）；
• pages.js 中会有类似 selectCategory(element) 的方法，用于处理分类点击事件并在内部记录用户选择的分类 ID；
• 在保存逻辑中（例如 saveTransaction('expense')），会从内部状态中读取当前分类并写入 transaction.category 字段。

从 UI 角度看，分类区域的设计关键点是：

• 将常用分类排在前面（餐饮、交通、住房等），减少点击次数；
• 使用清晰的图标和文字标签来区分不同类型支出；
• 通过统一的 pc-category-item 样式，保持页面整洁，避免视觉噪音。

---

4. 与预算相关的 UI 预留

支出和预算是天然绑定的：

• 用户关心的往往不是单纯“花了多少钱”，而是“相对于预算，还能花多少”；
• 因此在支出页面预留与预算相关的 UI 区域，是一个非常自然的设计选择。

虽然当前实现中预算计算主要出现在预算页面和报表页面，但从 UI 结构上看：

• pc-form-side 区域非常适合作为“预算提醒”容器；
• 可以在这里展示“本月该分类已支出多少，预算是多少，还能花多少”；
• 也可以放置一个简单的进度条组件（例如 pc-budget-progress），用可视化方式提示用户当前支出是否接近红线。

这种在 UI 结构层面提前预留的做法，让后续功能扩展变得非常轻松：

• 当你决定实现“预算提醒”功能时，不需要重新调整整个页面布局；
• 只需要在 pc-form-side 中填充一段预算相关的 HTML 和逻辑即可。

---

5. ArkTS / Cordova 层与支出 UI 的关系

在“记支出”这个具体页面上，ArkTS 层的参与度和“记收入”类似，主要体现在两个方面：

1. 托管 Web 容器：

   • 通过 Index.ets 中的 MainPage 组件，ArkTS 确保 index.html 能正常加载并保持运行；
   • 支出页面的所有 UI 结构和交互，都是在这个 Web 容器内部完成的。

2. 提供扩展能力（间接）：

   • 当前支出录入主要是本地数据库写入，不直接依赖原生能力；
   • 但在导出报表、数据备份、甚至未来可能的“智能提醒通知”等场景中，会通过 Cordova 插件访问 ArkTS 能力。

可以简化理解为：

• 记支出 UI 模块专注于“如何让用户顺畅地录入一笔支出”；
• ArkTS + Cordova 则负责“如何把所有支出数据长期、安全地保存，以及在需要时导出/导入或与系统能力交互”。

---

6. 小结：记支出页面 UI 的设计特点

综合来看，“记支出”页面在 UI 设计上延续了“记收入”页面的成熟经验，又在文案和扩展性上为支出场景做了针对性优化，主要体现在：

1. 布局结构统一：

   • 使用 pc-page-container、pc-page-header、pc-form-layout 等通用组件，与其他页面保持一致；

2. 金额输入体验一致：

   • 继续使用 pc-amount-input 和 pc-input-lg，减少用户在不同页面之间的认知切换成本；

3. 强调分类的重要性：

   • 为支出分类留出了清晰的 UI 区块，方便后续做分类统计和预算分析；

4. 为预算提醒预留空间：

   • 利用 pc-form-side 区域，未来可以很自然地加入与预算相关的各种提示和工具；

5. 与 ArkTS 容器自然解耦：

   • UI 层专注表单与交互体验，ArkTS 层负责容器与系统能力，两者通过 Cordova 桥连接，职责清晰。

在接下来的模块中，我们会继续看“记支出业务逻辑与预算联动”（模块09），那里会把本篇 UI 中预留的预算相关空间，与实际预算计算和提示逻辑真正结合起来。

---

ArkTS 侧如何配合记支出页面 UI

记支出页面 UI 同样是跑在 ArkTS 提供的 Web 容器里，承载方式与记收入页面完全一致。下面是 Index.ets 的精简示例，展示 ArkTS 如何托管 Web 页面并注册插件：

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() {
    // ArkTS 在这里创建 MainPage，内部挂载 ArkWeb 并加载 rawfile/www/index.html
    // index.html 再加载 js/pages.js，PageManager 会在其中渲染“记支出”页面等所有 Web 界面
    MainPage({
      cordovaPlugs: this.cordovaPlugs
    });
  }
}

这段 ArkTS 代码与本模块的关系在于：

• 它为记支出页面提供了运行所需的 Web 容器；
• 通过 cordovaPlugs 把 FileManagerPlugin 暴露给前端，为后续的数据导出/导入等操作打下基础；
• UI 逻辑和样式完全在 Web 层实现，ArkTS 只负责“托管”和“提供系统能力”，两侧边界清晰。