移动端基础 UI 组件

简介

移动端基础 UI 组件，属于 GZMJS 项目的移动端组件。

版本

当前版本：0.1.0

包名

@gzmjs/mobile-ui

功能特性

• 提供移动端基础 UI 组件相关功能
• 与 GZMJS 生态系统无缝集成
• 支持模块化开发

安装

pnpm add @gzmjs/mobile-ui

使用方法

核心导出

本包提供以下模块：

page (ui/page)

portrait (ui/portrait)

dataAnnotation (ui/dataAnnotation)

texts (ui/texts)

tenantPicker (ui/tenantPicker)

appModules (ui/appModules)

使用示例

import { } from '@gzmjs/mobile-ui';

// TODO: 添加使用示例

核心功能模块

1. 页面管理 (ui/page)

提供移动端页面导航功能：

• PageOptions - 页面选项类型
• openPage() - 打开页面
• closePage() - 关闭页面
• onPageOpen() - 监听页面打开事件
• offPageOpen() - 移除页面打开事件监听
• onPageClose() - 监听页面关闭事件
• offPageClose() - 移除页面关闭事件监听

示例：

import { openPage, onPageClose } from '@gzmjs/mobile-ui';

// 打开页面
openPage({ title: '详情页', url: '/detail' });

// 监听页面关闭
const unsubscribe = onPageClose((page) => {
  console.log('页面关闭:', page);
});

2. 人像样式 (ui/portrait)

• portraitHostStyleSheet - 人像宿主样式表

3. 数据标注表单 (ui/dataAnnotation)

• createDataAnnotationForm() - 创建数据标注表单
• DataAnnotation - 数据标注类型
• FormListOptions - 表单列表选项类型

4. 租户选择器 (ui/tenantPicker)

• <GZM-MOBILE-TENANT-PICKER> - 租户选择器组件
• TenantPickerOptions - 租户选择器选项接口

5. 文本资源 (ui/texts)

• texts - 移动端 UI 文本资源对象

6. 应用模块视图 (ui/appModules)

• <GZM-MOBILE-APP-MODULE> - 应用模块视图组件
• AppModuleViewOptions - 应用模块视图选项接口
• queries - 预定义查询对象

依赖关系

本包依赖以下模块：

• @gzmjs/ui-basic (workspace:*)
• @gzmjs/mvvm (workspace:*)
• @gzmjs/console-types (workspace:*)
• @gzmjs/console-remote (workspace:*)
• @gzmjs/mobile-list (workspace:*)
• @gzmjs/mobile-form (workspace:*)

构建

pnpm run build

许可证

本项目采用 ISC 许可证。