PC端 UI 组件与样式系统
·
欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。
本文对应项目模块：
rawfile/www/index.html中的整体布局结构，以及pages.js里大量使用的 PC 风格组件（卡片、表单、按钮、图表容器等）。
1. 这个 UI 模块在项目中的定位
从用户视角看，这个财务管家一打开就是一个典型的“PC 仪表板”布局：左侧是导航菜单，中间是主要内容区域，内容区域里又嵌套了各种卡片、表单、统计组件。虽然本项目没有单独拆出 css/ 目录，但在 index.html 和 pages.js 的模板中已经形成了一套比较完整的 UI 组件体系，例如：
pc-page-container：页面级容器；pc-page-header：每个页面顶部标题和说明区域；pc-card、pc-card-header、pc-card-body：通用卡片组件；pc-form-row、pc-form-group、pc-input：表单布局组件；pc-stat-card、pc-chart-card：统计与图表区域。
这一套命名风格统一的类名，配合固定的 HTML 结构，使得后续每增加一个新页面，都可以复用同样的布局骨架，极大降低了开发成本。
2. index.html：整体布局与容器结构
先看 index.html 的整体结构示意（省略部分细节）：
<body>
<div class="pc-layout">
<aside class="pc-sidebar">
<!-- 左侧导航菜单：收支、账户、报表等 -->
</aside>
<main class="pc-main">
<header class="pc-topbar">
<!-- 顶部标题和快捷操作按钮 -->
</header>
<section class="pc-content">
<div class="page-content"><!-- PageManager 在这里渲染页面 --></div>
</section>
</main>
</div>
<script src="cordova.js"></script>
<script src="js/db.js"></script>
<script src="js/pages.js"></script>
<script src="js/plugins/FileManager.js"></script>
<script src="js/app.js"></script>
</body>
2.1 布局的几层含义
pc-layout：最外围的布局容器，通常用 CSS 设置为左右两列结构；pc-sidebar：左侧导航区域，负责展示功能入口（记收入、记支出、账户管理、报表分析等）；pc-main：右侧主内容区域，包含顶部工具栏和内容区；pc-topbar：顶部用于显示当前页面标题、日期选择、搜索框甚至用户信息；pc-content：主要业务内容区域；.page-content：真正的“路由出口”，PageManager会把每个页面的 HTML 模板渲染到这里。
这种划分方式的好处是非常清晰地把“导航框架”和“页面内容”分离：
- 导航框架在整个应用生命周期中几乎不变，只是样式和少量交互；
- 页面内容则由
pages.js动态切换，结构完全依赖PageManager的路由逻辑。
3. PageManager 中的页面骨架组件
以“记收入页面”为例，看一下 pages.js 中的 HTML 结构：
// ==================== 记收入页面 ====================
'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>
`,
3.1 常用 UI 类名的职责
pc-page-container- 页面范围的外层容器，通常控制页面内的最大宽度、边距和背景；
pc-page-header- 页面顶部区域，用于展示标题和一句简短说明（副标题）；
pc-form-layout- 表单布局容器，通常是左右两列：左侧主表单，右侧辅助信息；
pc-form-main- 主表单区域，放核心输入控件；
pc-form-side- 侧边栏区域，可以灵活放提示信息、说明、历史记录等；
pc-card- 通用卡片组件，包含
pc-card-header和pc-card-body两部分；
- 通用卡片组件，包含
pc-form-row/pc-form-group- 用于对齐一行中的多个表单字段，类似栅格系统的行和列；
pc-input/pc-input-lg- 输入框样式，
pc-input-lg用于金额等重点字段，使其更醒目；
- 输入框样式，
pc-amount-input- 金额输入的专用容器，内含货币符号和数值输入框，方便统一样式。
有了这些统一命名的组件，你在写其他页面（例如记支出、转账、设置预算）时，基本可以复制粘贴这套结构，仅替换字段和文案即可，大幅提高开发效率。
4. 报表和统计卡片：stat-card 与图表容器
在报表页面、分类统计页面、趋势分析页面中，项目使用了一些统计卡片组件来展示汇总信息。例如（伪代码示意）：
// ==================== 报表分析页面 ====================
'reports': () => `
<div class="pc-page-container">
<div class="pc-page-header">
<h2>📈 报表分析</h2>
<p>按月份查看收支与趋势情况</p>
</div>
<div class="pc-grid">
<div class="pc-stat-card">
<div class="pc-stat-label">本月收入</div>
<div id="report-income" class="pc-stat-value">¥0.00</div>
</div>
<div class="pc-stat-card">
<div class="pc-stat-label">本月支出</div>
<div id="report-expense" class="pc-stat-value">¥0.00</div>
</div>
<!-- 其他统计卡片 -->
</div>
<div class="pc-card pc-chart-card">
<div class="pc-card-header"><h3>收支对比</h3></div>
<div class="pc-card-body">
<div id="income-expense-chart"></div>
</div>
</div>
</div>
`,
4.1 统计类组件的设计思路
pc-grid- 用于排列多个
pc-stat-card，一般是响应式的网格布局；
- 用于排列多个
pc-stat-card- 小卡片组件，显示一项关键指标（例如本月收入、支出、结余、交易笔数）；
pc-stat-label- 指标名称；
pc-stat-value- 指标数值，通常字体较大、颜色更醒目；
pc-chart-card- 针对图表区域的卡片，里面的
div（如income-expense-chart）会被 JS 渲染成具体图表。
- 针对图表区域的卡片，里面的
这类组件的特点是：
- HTML 结构非常轻量、语义清晰；
- 通过 CSS 控制视觉风格（配色、阴影、圆角等）；
- JS 部分只负责往对应
id写内容或塞入图表，不掺杂样式细节。
5. ArkTS 视角下的 UI：容器与内容的分工
虽然这个模块主要讲前端 UI，但在 HarmonyOS + Cordova 架构下，ArkTS 仍然影响了 UI 的“大容器”层面。例如 Index.ets 中，ArkTS 负责渲染承载 Web 内容的 MainPage：
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
});
}
}
在 UI 视角下可以这样理解：
- ArkTS 层负责绘制一块“画布”（即 WebView），让前端可以在里面随意布置 PC 风格的界面；
- 所有
pc-xxx的样式和布局，都是在这块“画布”内部通过 HTML + CSS 实现的； - 当页面上需要与系统能力交互（例如文件选择、震动、通知）时，通过
cordova.exec调用 ArkTS 插件，而不会反过来让 ArkTS 来操控网页上的 DOM。
这种分工使得 UI 代码和原生代码之间的边界非常清晰：
- UI 的演进（样式、布局、组件拆分）几乎不需要改 ArkTS；
- 原生能力的演进（文件系统、设备能力）也不需要改 CSS / HTML，只要维护好 JS 插件桥即可。
6. 小结：这套 PC UI 组件体系的价值
虽然本项目没有像大型前端工程那样单独拆出一个 ui/ 目录，但在 index.html + pages.js 中已经自然形成了一套可复用的 PC 组件体系，主要体现在：
- 统一的命名规范：所有类名都以
pc-开头，便于在样式和模板中快速识别、搜索和维护； - 固定的页面骨架：
pc-page-container+pc-page-header+ 内容区域的组合，在 10+ 个页面中保持一致； - 通用的卡片与表单组件：
pc-card、pc-form-row、pc-form-group等使得表单页面风格统一，后续加字段几乎只需要复制粘贴； - 统计与图表容器抽象得当：
pc-stat-card、pc-chart-card把“图表外壳”和“数据内容”分离，方便未来替换图表库或调整样式； - 与 ArkTS 容器天然解耦：UI 的所有细节都局限在 Web 层，ArkTS 只关心容器和插件注册，保证了前后端开发边界清晰。
从工程实践角度看，这套 PC UI 组件体系虽然不复杂，但胜在统一、清晰、可扩展。后续你要为项目加更多页面（比如“资产分布”、“年度总结”、“多账户对比”），完全可以沿用这套组件规范，既保证了一致的用户体验，又让代码结构保持干净有序。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
12
0- 0
已为社区贡献4条内容
所有评论(0)