hms/.claude/skills/design-handoff/defaults/components.yml

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<string, TagColor>), 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，用于日期/时间/选项选择"