# ProductDetail 组件库

商品详情页面的组件库，包含通知轮播和自定义提示框组件。

## NotificationCarousel 组件

通知轮播组件，用于在页面顶部显示滚动的通知消息。

### 功能特性

- 自动轮播通知消息
- 平滑的动画过渡效果
- 可自定义轮播间隔时间
- 可自定义位置
- 支持动态数据更新
- 自动管理生命周期

### 使用方法

#### 基础用法

```vue
<template>
  <NotificationCarousel :notifications="notifications" />
</template>

<script setup>
import NotificationCarousel from './components/NotificationCarousel.vue'

const notifications = ref([
  { id: 1, name: 'Aamir Khan', time: '10s' },
  { id: 2, name: 'John Smith', time: '30s' },
  { id: 3, name: 'Maria Garcia', time: '1m' },
])
</script>
```

#### 自定义配置

```vue
<template>
  <NotificationCarousel
    :notifications="notifications"
    :interval="5000"
    :top="`${safeAreaInsets?.top + 52}px`"
  />
</template>
```

### Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| notifications | Array | 默认数据 | 通知数据数组 |
| interval | Number | 3000 | 轮播间隔时间（毫秒） |
| top | String | '0px' | 组件距离顶部的距离 |

#### notifications 数据格式

```typescript
interface Notification {
  id: number        // 唯一标识
  name: string      // 用户名
  time: string      // 时间描述
}
```

### 方法

组件暴露了以下方法，可通过 ref 调用：

- `start()` - 开始轮播
- `stop()` - 停止轮播
- `restart()` - 重新开始轮播

#### 使用示例

```vue
<template>
  <NotificationCarousel ref="carouselRef" :notifications="notifications" />
  <button @click="handleStop">停止轮播</button>
  <button @click="handleStart">开始轮播</button>
</template>

<script setup>
const carouselRef = ref()

const handleStop = () => {
  carouselRef.value?.stop()
}

const handleStart = () => {
  carouselRef.value?.start()
}
</script>
```

### 注意事项

1. 当 notifications 数组长度为 0 或 1 时，组件不会启动轮播
2. 组件会自动监听 props 变化并重新启动轮播
3. 组件会在卸载时自动清理定时器
4. 使用了 UnoCSS 原子类进行样式设置

---

## CustomTooltip 组件

自定义提示框组件，用于显示带箭头的气泡提示信息。

### 功能特性

- 支持自动显示/隐藏
- 可自定义显示时长
- 支持高亮文本
- 可自定义图标和样式
- 支持手动控制显示状态
- 自动管理定时器

### 使用方法

#### 基础用法

```vue
<template>
  <view class="relative">
    <button>触发按钮</button>
    <CustomTooltip v-model:visible="showTooltip" />
  </view>
</template>

<script setup>
import CustomTooltip from './components/CustomTooltip.vue'

const showTooltip = ref(false)
</script>
```

#### 自定义配置

```vue
<template>
  <CustomTooltip
    v-model:visible="showTooltip"
    :auto-hide="true"
    :auto-hide-delay="5000"
    icon="shop"
    icon-size="32rpx"
    highlight-text1="$99.99"
    highlight-text2="$1.8"
    width="500rpx"
    @hide="handleHide"
  />
</template>
```

### Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| visible | Boolean | false | 是否显示提示框（支持 v-model） |
| autoHide | Boolean | true | 是否自动隐藏 |
| autoHideDelay | Number | 10000 | 自动隐藏延迟时间（毫秒） |
| icon | String | 'shop' | 图标名称 |
| iconSize | String | '32rpx' | 图标大小 |
| message | String | 默认消息 | 提示消息内容 |
| highlightText1 | String | '$99.99' | 第一个高亮文本 |
| highlightText2 | String | '$1.8' | 第二个高亮文本 |
| width | String | '600rpx' | 提示框宽度 |

### 事件

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:visible | 显示状态变化时触发 | (value: boolean) |
| hide | 提示框隐藏时触发 | - |

### 方法

组件暴露了以下方法，可通过 ref 调用：

- `show()` - 显示提示框
- `hide()` - 隐藏提示框
- `toggle()` - 切换显示状态

#### 使用示例

```vue
<template>
  <view class="relative">
    <button @click="handleShow">显示提示</button>
    <CustomTooltip ref="tooltipRef" />
  </view>
</template>

<script setup>
const tooltipRef = ref()

const handleShow = () => {
  tooltipRef.value?.show()
}
</script>
```

### 注意事项

1. 组件使用绝对定位，需要在相对定位的容器中使用
2. 组件会自动管理定时器，无需手动清理
3. 支持双向绑定 visible 属性
4. 使用了 UnoCSS 原子类进行样式设置
