---
name: share-components
description: >
  Duooomi 应用核心 UI 组件库 (@share/components) 使用指南。当需要使用 Block、Text、Input、Img、VideoBox、Toast、Modal、ConfirmModal、SpinningLoader、ListEmpty、Overlay 等基础组件时触发。适用于：(1) 编写页面 UI 布局 (2) 使用 Toast 提示/Loading/弹窗/ActionSheet (3) 展示图片或视频 (4) 表单输入 (5) 空状态和加载状态展示。导入路径为 `@/@share/components` 或 `@share/components`。
---

# @share/components 组件库

## 导入方式

```tsx
import { Block, Text, Input, Img, VideoBox, Toast, Modal, ConfirmModal, SpinningLoader, ListEmpty } from '@/@share/components'
```

## 核心组件

### Block - 万能容器

替代 `View`/`Pressable`/`TouchableOpacity`/`Animated.View`，根据 props 自动切换底层实现。

```tsx
<Block className="flex-1 items-center">...</Block>
<Block onClick={() => handlePress()}>...</Block>
<Block onClick={handlePress} opacity={0.85}>...</Block>
<Block onLongPress={handleLongPress}>...</Block>
<Block animated>...</Block>
```

Props: `onClick`, `onLongPress`, `animated`, `opacity`, `className`, `style`, `touchProps`

### Text - 文本

```tsx
<Text className="text-[14px] text-white">内容</Text>
<Text onClick={handlePress}>可点击文本</Text>
<Text animated>动画文本</Text>
```

### Input - 输入框

```tsx
<Input
  className="w-full rounded-lg border-2 border-black px-[12px] py-[10px]"
  placeholder="请输入"
  value={value}
  onChangeText={setValue}
  secureTextEntry={isPassword}
/>
```

### Img - 图片

基于 `expo-image`，内置 CDN 压缩、占位图、磁盘缓存。

```tsx
<Img src="https://cdn.roasmax.cn/xxx.webp" className="size-[100px]" />
<Img src={url} isCompression width={256} />
<Img src={url} placeholderSrc={thumbnailUrl} />
<Img src={require('@/assets/images/icon.png')} />
```

Props: `src`, `width`(压缩宽度), `isCompression`, `isWebP`, `placeholderSrc`, `cacheKey`, `errorSource`

### VideoBox - 视频/动图

自动将 MP4 URL 转为 WebP 动图展示，内置缓存。本地文件用 `react-native-video` 播放。

```tsx
<VideoBox url="https://cdn.roasmax.cn/material/xxx.mp4" width={256} style={{ width: 180, height: 180 }} />
<VideoBox url={videoUrl} placeholderUrl={thumbnailUrl} width={360} />
<VideoBox url={url} autoplay={false} />
```

### Toast - 全局提示系统

单例模式，直接调用静态方法。

```tsx
Toast.show({ title: '操作成功' })
Toast.show({ title: '保存中...', duration: 3000 })
Toast.show({ renderContent: () => <CustomView /> })
Toast.hide()

Toast.showLoading({ title: '加载中...' })
Toast.showLoading({ duration: 0 })  // 不自动消失
Toast.hideLoading()

Toast.showModal(<ConfirmModal title="确认?" onConfirm={fn} onCancel={Toast.hideModal} />)
Toast.hideModal()

const index = await Toast.showActionSheet({ itemList: ['选项1', '选项2'] })
```

### Modal - 确认弹窗（简版）

红绿双按钮弹窗，通过 `Toast.showModal` 展示。

```tsx
Toast.showModal(
  <Modal title="确定删除?" subTitle="删除后不可恢复" okText="删除" cancelText="取消"
    onOk={() => { handleDelete(); Toast.hideModal() }}
    onCancel={Toast.hideModal}
  />
)
```

### ConfirmModal - 确认弹窗（完整版）

Brutalist 风格弹窗，支持自定义内容、加载状态。

```tsx
Toast.showModal(
  <ConfirmModal title="确认支付?" badge="PAYMENT" content="将扣除 100 积分"
    confirmText="确认" cancelText="取消" onConfirm={handlePay} onCancel={Toast.hideModal}
  />
)

// 自定义内容
<ConfirmModal title="修改密码" badge="password"
  content={<Block>...表单...</Block>} confirmLoading={loading}
  onConfirm={handleSubmit} onCancel={handleCancel}
/>
```

### ListEmpty - 空状态

```tsx
<ListEmpty />
<ListEmpty hasError handleRetry={refetch} />
```

### SpinningLoader - 旋转加载图标

```tsx
<SpinningLoader />
```

## 设计规范

- 主题色: `#FFE500` (accent/primary)
- 背景色: `#1C1E22` / `#16181B`
- 文字色: `#FFFFFF`
- 风格: Brutalist (倾斜、粗边框、阴影)
- 样式: NativeWind className 优先