version: 1 updated: "2026-05-17" # ============================================================================ # 小程序 UI 组件映射注册表 # 数据源: apps/miniprogram/src/components/ui/ # 每个组件记录 import 路径和实际 props(从源码接口定义提取) # ============================================================================ components: # --- 数据展示 --- ContentCard: miniprogram: import: "@components/ui/ContentCard" props: "variant('default'|'outlined'|'elevated'), padding('none'|'sm'|'md'|'lg'), margin('none'|'md'), activeFeedback('bg'|'opacity'|'scale'|'none'), onPress, className, style, children" notes: "通用卡片容器,padding 映射到 --tk-card-padding-* token" AlertCard: miniprogram: import: "@components/ui/AlertCard" props: "variant('gradient'|'left-border'|'bordered'), title, subtitle, children, className" notes: "告警/提示卡片,默认 left-border 变体" VitalCard: miniprogram: import: "@components/ui/VitalCard" props: "label, value, unit, status, onPress, className" notes: "体征数据卡片,内嵌 StatusTag 显示状态" ListItem: miniprogram: import: "@components/ui/ListItem" props: "title, subtitle, extra(ReactNode), leftIcon(ReactNode), onPress, showArrow, unread, className" notes: "列表行组件,支持图标/箭头/未读标记" InfoRow: miniprogram: import: "@components/ui/InfoRow" props: "label, value, valueNode(ReactNode), last, className" notes: "键值对信息行,last 控制底部分隔线" ChatBubble: miniprogram: import: "@components/ui/ChatBubble" props: "content, isMine, time, className" notes: "聊天气泡,isMine 控制左右侧和配色" # --- 导航与标题 --- SectionTitle: miniprogram: import: "@components/ui/SectionTitle" props: "title, subtitle, action({text, onPress}), icon(ReactNode)" notes: "区块标题,左侧竖线装饰 + 可选右侧操作链接" TabFilter: miniprogram: import: "@components/ui/TabFilter" props: "tabs(string[]), activeIndex, onChange(index), variant('fill'|'pill'|'segment'), className" notes: "标签页筛选器,三种视觉变体" GradientHeader: miniprogram: import: "@components/ui/GradientHeader" props: "children, className" notes: "渐变头部容器,承载页面顶部标题区域" # --- 输入控件 --- FormInput: miniprogram: import: "@components/ui/FormInput" props: "label, placeholder, value, onInput(value), type('text'|'number'|'idcard'|'digit'), maxLength, disabled, error, className" notes: "表单输入框,支持错误提示和多种输入类型" # --- 按钮 --- PrimaryButton: miniprogram: import: "@components/ui/PrimaryButton" props: "children, onClick, disabled, loading, size('default'|'large'), className" notes: "主色按钮,高度映射 --tk-btn-primary-h" SecondaryButton: miniprogram: import: "@components/ui/SecondaryButton" props: "children, onClick, disabled, className" notes: "次要/描边按钮,与 PrimaryButton 配套使用" # --- 状态指示 --- StatusTag: miniprogram: import: "@components/ui/StatusTag" props: "status, colorMap(Record), size('sm'|'md'), className, children" notes: "状态标签,内置 status→color 映射(success/warning/error/info/default)" ProgressRing: miniprogram: import: "@components/ui/ProgressRing" props: "progress(0-1), size('sm'|'lg'), label, className" notes: "环形进度条,使用 conic-gradient + --tk-pri 色" LoadingCard: miniprogram: import: "@components/ui/LoadingCard" props: "count, layout('card'|'list'|'detail')" notes: "骨架屏加载占位,三种布局形态" PageShell: miniprogram: import: "@components/ui/PageShell" props: "padding('none'|'sm'|'md'|'lg'), safeBottom, scroll, className, children" notes: "页面外壳,统一页面内边距和底部安全区,scroll 控制是否 ScrollView 包裹" # ============================================================================ # 框架/平台组件(非自研,Taro/微信原生) # ============================================================================ framework_components: Swiper: import: "@tarojs/components" props: "autoplay, interval, duration, circular, indicatorDots, indicatorColor, indicatorActiveColor, onChange, children" notes: "Taro Swiper 组件,用于轮播图场景" TabBar: import: "framework-config" props: "N/A(app.config.ts 中声明 tabBar 配置)" notes: "微信小程序原生 TabBar,在 app.config.ts 的 tabBar 字段配置" ScrollView: import: "@tarojs/components" props: "scrollY, scrollX, scrollTop, onScroll, onScrollToLower, onScrollToUpper, children" notes: "Taro ScrollView,PageShell 内部使用" Input: import: "@tarojs/components" props: "value, placeholder, type, maxlength, disabled, onInput, onFocus, onBlur" notes: "Taro Input,FormInput 内部使用" Picker: import: "@tarojs/components" props: "mode('date'|'time'|'selector'), value, range, onChange, children" notes: "Taro Picker,用于日期/时间/选项选择"