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

本文对应模块：pages.js 中的 “记收入” 页面模板与相关 UI 结构，重点关注表单布局、金额输入体验以及和整体 PC 布局的协调。

---

1. 模块定位：从业务表单到页面体验

“记收入”是整个财务管家项目中最基础、也最常用的功能之一。用户打开应用后，如果不能快速、顺畅地记录一笔收入，那么其他高级功能（预算、报表、趋势分析）再强大也很难发挥价值。

在这个模块里，我们不谈数据库、不谈导出导入，只专注一件事：如何在 PC 布局下用 HTML 组件和样式，做出一个既清晰又好用的收入录入页面。

这个页面的 UI 主要包含几块：

• 页面标题和简短说明；
• 收入信息表单（金额、账户、分类、日期、备注等）；
• 可能的侧边提示或快捷入口（比如常用金额、常用分类等，当前项目中预留了结构）。

---

2. 页面整体结构：pc-page-container + pc-form-layout

先看 pages.js 中“记收入页面”的核心模板（已简化）：

// ==================== 记收入页面 ====================
'add-income': () => `
  <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 分块理解这段 HTML

• pc-page-container

  • 每个功能页的最外层容器，负责控制页面内的最大宽度、整体内边距以及背景色；
  • 所有页面（记支出、转账、报表等）都复用这层容器，保证视觉统一。

• pc-page-header

  • 放页面标题和一句话说明：
    • 标题使用 emoji + 文本（例如 📈 记录收入），既直观又有一点情绪化设计；
    • 简短说明引导用户理解当前页面是做什么的。

• pc-form-layout

  • 表单整体布局容器，一般是“双列布局”：左侧主表单、右侧辅助区域；
  • 在记收入场景中，大部分操作都发生在左侧主表单区域。

• pc-form-main

  • 主表单区域，承载真正的录入控件；
  • 内部再用 pc-card 做分组，使视图不会显得杂乱。

• pc-form-side

  • 右侧预留区域，用于放置提醒、提示卡片、快捷操作，当前项目中逻辑较少，但结构已经留好，后续可以按需扩展。

这种布局在桌面端非常常见，用户一眼就能看出“主战场”在左侧，而右侧则是辅助信息，不会造成视觉干扰。

---

3. 金额输入区域：pc-amount-input 的设计

在“记收入”页面里，金额是最关键的字段，因此 UI 上也给予了更高的权重。对应的 HTML 如下：

<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>

3.1 细节拆解

• pc-form-row / pc-form-group

  • 控制一行里表单元素的对齐和间距，使页面多个输入项排起来时不会显得拥挤或错位；

• pc-label + required

  • 使用 <label> 明确标注字段含义；
  • required 小红星提示该字段为必填项，提升表单可用性；

• pc-amount-input

  • 专门为金额设计的容器：左边是货币符号，右边是数值输入框；
  • 这一层容器通常在 CSS 里会设置为水平对齐、边框统一，呈现为一个整体输入控件；

• currency 文本

  • 对中国地区用户来说，¥ 是非常熟悉的视觉符号，可一眼识别这是金额；

• <input type="number">

  • 指明只允许数字输入，并通过 step="0.01" 控制精度；
  • min="0" 防止输入负数，避免录入错误；
  • placeholder="0.00" 提示用户输入的是金额且保留两位小数；

• pc-input pc-input-lg

  • pc-input 控制基础样式（边框、内边距、字体）；
  • pc-input-lg 让金额字段更大、更醒目，符合其在页面中的“主角地位”。

这样的设计，使得用户的视线可以非常自然地集中在金额输入框上，减少误操作概率。对于一个记账类应用来说，这是非常重要的体验细节。

---

4. 其他表单字段的 UI 一致性

虽然在节选代码里只展示了金额一项，但在完整项目中，“记收入”页面还会包含：

• 账户选择（从 accounts 表加载）；
• 分类选择（从 categories 表加载，类型为 income）；
• 日期选择（默认今天，可修改）；
• 备注文本区域等。

这些字段在 UI 上会遵循和金额类似的结构：

• 每个字段一个 pc-form-group；
• 文本说明使用 pc-label；
• 输入控件统一使用 pc-input / 下拉组件 / 日期组件；
• 不同字段之间通过 pc-form-row 控制行间距和对齐。

这种统一的表单风格在多个页面之间复用（例如记支出、转账），可以显著降低用户的学习成本，也方便未来通过 CSS 统一调整风格。

---

5. 与 ArkTS 的联系：UI 与数据流的边界

从 ArkTS 侧看，“记收入页面 UI” 完全运行在 Web 容器内部，ArkTS 不直接干预具体布局。但它通过两个方面影响了整体体验：

1. 提供稳定的容器：
   • Index.ets 中的 MainPage 组件负责把 index.html 加载到 ArkWeb；
   • 只要 ArkTS 保证容器稳定，前端 UI 就可以放心使用复杂的 PC 布局和组件。

下面是精简后的 ArkTS 代码示例，展示 Index.ets 如何承载 Web 页面（其中就包含了记收入页面对应的 HTML/JS）：

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

@Entry
@Component
struct Index {
  // 在 ArkTS 侧注册需要暴露给 Web 的 Cordova 插件
  cordovaPlugs: Array<PluginEntry> = [
    { pluginName: 'FileManager', pluginObject: new FileManagerPlugin() }
  ];

  build() {
    // MainPage 内部会创建 ArkWeb 容器并加载 rawfile/www/index.html
    // index.html 再去加载 js/pages.js，进而渲染记收入页面 UI
    MainPage({
      cordovaPlugs: this.cordovaPlugs
    });
  }
}

这段 ArkTS 代码的含义是：

• ArkTS 负责创建一个 MainPage，内部挂载 ArkWeb 内核；
• ArkWeb 加载 index.html，由 PageManager 渲染“记收入页面 UI”；
• cordovaPlugs 把 FileManagerPlugin 暴露给 Web，供后续导出/导入数据时使用。

2. 提供底层能力（通过 Cordova 插件）：
   • 虽然“记收入”主要是本地数据库写入，但在导出数据、备份时会依赖 ArkTS 插件；
   • 用户在“设置 -> 导出数据”时，UI 会调用 cordova.exec 与 FileManagerPlugin 协作，这部分在前面模块中已有详细说明。

可以把关系概括为：

• ArkTS：像是一层“操作系统 + 浏览器内核”；
• Web UI（记收入页面）：则是跑在这层之上的一个业务 Web 应用；
• 两者通过 Cordova 桥连接，但在 UI 具体实现上，ArkTS 只提供舞台，不参与舞蹈动作的设计。

---

6. 小结：记收入页面 UI 的设计亮点

总结一下这个模块在 UI 层面的几个关键点：

1. 复用 PC 布局骨架：

   • 使用 pc-page-container、pc-page-header、pc-form-layout 等统一的结构，使记收入页面在视觉上与其他页面保持一致；

2. 突出金额输入体验：

   • 通过 pc-amount-input 和 pc-input-lg 把金额字段做得更醒目和易用，减少用户误操作；

3. 保持表单布局的一致性：

   • 所有字段都基于 pc-form-row、pc-form-group 和 pc-label 进行布局，未来新增字段也能无缝接入；

4. 为扩展留足空间：

   • pc-form-side 预留了侧边区域，可以在后续版本中放常用金额模板、自动补全建议等高级功能，而无需推倒重写布局；

5. 与 ArkTS 容器解耦良好：

   • UI 层只依赖 Web 标准技术（HTML/CSS/JS），ArkTS 只做承载和能力暴露，两边各自进化互不拖累。

在后续的模块中，我们会看到“记支出页面 UI”、“转账页面 UI”等，它们基本上沿用了本模块的设计思路，只是在字段和文案上有所差异。这种做法既保证了用户体验的一致性，又让项目在快速迭代时更容易维护。