@xiao-ying/miniapp-ui-pro

面向业务的 UI 组件库，基于 @xiao-ying/miniapp-ui，用于承载更高阶的业务组件与业务场景组件。

注意：本包不再 re-export 基础组件，请直接从 @xiao-ying/miniapp-ui 引入。

安装

pnpm add @xiao-ying/miniapp-ui-pro @xiao-ying/miniapp-ui

使用

基础组件请从 @xiao-ying/miniapp-ui 引入：

import { Card, Button } from '@xiao-ying/miniapp-ui'

业务组件（如有）从 @xiao-ying/miniapp-ui-pro 引入：

// import { BizWidget } from '@xiao-ying/miniapp-ui-pro'

例如悬浮 CTA 横幅：

import { FloatingActionBanner } from '@xiao-ying/miniapp-ui-pro'

<FloatingActionBanner
  title="闲置想快出？进群发布更高效"
  subtitle="群内实时推送，校友秒看，快速成交"
  buttonText="👉 进群发布"
  onButtonPress={() => {
    // open group link
  }}
/>

颜色使用约定

miniapp-ui-pro 与业务代码应统一使用 @xiao-ying/miniapp-ui 提供的颜色 alias，不直接写 CSS 变量。

• 推荐文本类： text-on-surface、text-on-surface-variant、text-primary
• 推荐背景类： bg-surface、bg-surface-container-high、bg-primary-container
• 推荐边框类： border-outline、border-outline-variant
• 禁止写法： text-[var(--xy-m3-on-surface-variant)]、bg-[var(--xy-m3-surface-container-high)]、border-[var(--xy-m3-outline-variant)]

组件清单

• InfiniteScroll / InfiniteMasonry / CachedCoverImage：列表与瀑布流辅助。
• ImagePickerGrid：图片选择网格，支持可选移动端长按排序。
• SchoolGateOverlay / SchoolSelectPage：选校相关页面组件。
• FullScreenLoading / LoadingState / NoMoreMessage：加载与空态提示。
• InfoBanner / FloatingActionBanner / NoticeCallout / FeatureEntryCard / MetricsSummary / SectionHeader / PageHeader：信息展示组件。
• EmptyState / ErrorState / ErrorPage / NotFoundPage：错误与空状态。
• PullToRefresh：下拉刷新交互。
• DraftRestoreBanner / DraftSaveHint / useFormDraft / saveDraft / loadDraft / clearDraft：草稿提示与持久化。

Tailwind 配置

miniapp-ui-pro 的插件目前是占位（暂不输出任何 token/utility），仅作为扩展入口保留。

你仍需加载 @xiao-ying/miniapp-ui 的插件来提供基础的 Material 3 tokens 与工具类，再按需追加 miniapp-ui-pro 插件。

• Tailwind v4（CSS-first）：

  /* e.g. src/index.css */
  @import "tailwindcss";
  @source "./src/**/*.{ts,tsx}", "./node_modules/@xiao-ying/miniapp-ui/**/*.{js,ts,tsx}", "./node_modules/@xiao-ying/miniapp-ui-pro/**/*.{js,ts,tsx}";
  @plugin "@xiao-ying/miniapp-ui/tailwind-plugin";
  @plugin "@xiao-ying/miniapp-ui-pro/tailwind-plugin";

• Tailwind v3+（配置文件）：

  import { xyMaterial3Plugin } from '@xiao-ying/miniapp-ui/tailwind-plugin'
  import { xyUiProPlugin } from '@xiao-ying/miniapp-ui-pro/tailwind-plugin'
  
  export default {
    content: [
      './index.html',
      './src/**/*.{ts,tsx}',
      './node_modules/@xiao-ying/miniapp-ui/**/*.{js,ts,tsx}',
      './node_modules/@xiao-ying/miniapp-ui-pro/**/*.{js,ts,tsx}'
    ],
    plugins: [xyMaterial3Plugin(), xyUiProPlugin()]
  }