项目介绍

TGJ Components 是专为后台业务系统开发的小程序组件库。

开发背景

本项目旨在统一业务组件的 UI 表现与业务逻辑，减少重复封装的工作量，提升开发效率和视觉一致性。

核心特性

高度业务封装：集成了日期选择、分类选择、多媒体展示、图表展示等业务常见场景。
UI 标准化：所有组件均遵循唐管家 UI 规范，确保产品视觉的一致性。
深度扩展 Vant：基于 Vant Weapp 进行深度扩展，同时弥补 Vant 在特定业务场景（如跨时段日期选取、复杂选择器）下的不足。
TypeScript & Less：代码均使用 TypeScript 编写，提供完善的类型校验；样式采用 Less 编写，方便维护。

使用说明

导入组件

在项目的 app.json 或具体页面的 .json 文件中进行引入即可。

注意事项：分包异步引入

由于小程序的分包机制，当您在分包中引入主包或其它分包的组件时，为了提升加载体验，强烈建议在页面的 JSON 配置文件中增加 componentPlaceholder 配置。

json

{
  "usingComponents": {
      "modalName": "components/tgj/customModal/index"
  },
  "componentPlaceholder": {
      "modalName": "view"
  }
}

注：modalName 应为您在 usingComponents 中定义的名字，这样当组件尚未加载完成时，会先使用占位组件（如 view）进行渲染，避免页面白屏或报错。

主要组件一览

分类	组件名称	功能说明
通用交互	`customModal`	通用弹窗，支持内容对齐、不再提醒勾选等
	`emptyBox`	缺省页组件
	`globalLoading`	全局 Loading 指示器
表单选择器	`datePicker`	日期选择器（支持多种维度）
	`detailDatePicker`	详细日期时间选择器
	`timeDurationPicker`	时段选择器
	`pickerModal`	底部弹窗选择器封装
	`pickerBox`	包裹容器型的选择器，用于多层级选择
	`simpleSelectModal`	简单的单选/多选弹窗
	`switchOptionsModal`	可切换选项的弹窗选择
多媒体与可视化	`eChart`	集成 ECharts 的图表组件
	`myVideo` & `videoModal`	原生增强视频播放及弹窗展示
特殊编辑	`editSwitchName`	带快捷切换的编辑组件
	`scaleSlider`	刻度尺滑块