wot-ui-plus

SKILL.md

---
name: wot-ui-plus
description: wot-ui-plus 组件使用指南。当用户询问 wot-ui-plus 组件、组合式 API、全局配置、主题定制、示例写法或 API 参考时使用此技能。优先基于 `references/` 目录中的组件文档回答问题。
---

# wot-ui-plus

此技能提供 `wot-ui-plus` 组件库的使用指导，重点是帮助快速定位组件文档、提取正确 API，并给出可直接复用的示例。

## 何时使用

当用户需要以下帮助时使用此技能：

- 查询某个组件怎么用，例如 Button、Popup、Upload、Calendar
- 查询 props、events、slots、methods 或 `v-model` 用法
- 查询组合式 API，例如 `use-toast`、`use-message`、`use-upload`
- 查询全局配置、主题配置、Provider 相关能力
- 基于组件文档给出示例、接入方式或常见注意点

## 组件参考

`references/` 目录已经包含组件与 API 文档。回答具体问题时，先定位对应的 markdown 文件，再基于文档组织答案。

### 基础

- `button.md`
- `cell.md`
- `configProvider.md`
- `icon.md`
- `img.md`
- `layout.md`
- `popup.md`
- `resize.md`
- `transition.md`
- `gap.md`
- `rootPortal.md`

### 表单

- `calendar.md`
- `calendarView.md`
- `checkbox.md`
- `colPicker.md`
- `datetimePicker.md`
- `datetimePickerView.md`
- `form.md`
- `input.md`
- `inputNumber.md`
- `passwordInput.md`
- `textarea.md`
- `keyboard.md`
- `picker.md`
- `pickerView.md`
- `radio.md`
- `rate.md`
- `search.md`
- `selectPicker.md`
- `signature.md`
- `slider.md`
- `switch.md`
- `upload.md`
- `imgCropper.md`
- `code.md`
- `codeInput.md`

### 反馈与交互

- `actionSheet.md`
- `curtain.md`
- `dropMenu.md`
- `overlay.md`
- `popover.md`
- `swipeAction.md`
- `messageBox.md`
- `notify.md`
- `toast.md`
- `loading.md`
- `loadingPage.md`
- `tooltip.md`
- `fab.md`
- `floatingPanel.md`
- `sliderButton.md`

### 展示

- `avatar.md`
- `badge.md`
- `tag.md`
- `card.md`
- `circle.md`
- `divider.md`
- `collapse.md`
- `countDown.md`
- `countTo.md`
- `grid.md`
- `table.md`
- `noticeBar.md`
- `statusTip.md`
- `progress.md`
- `steps.md`
- `segmented.md`
- `skeleton.md`
- `sortButton.md`
- `swiper.md`
- `text.md`
- `tour.md`
- `watermark.md`
- `waterfall.md`
- `sticky.md`
- `videoPreview.md`

### 导航与布局

- `backtop.md`
- `indexBar.md`
- `navbar.md`
- `pagination.md`
- `sidebar.md`
- `tabbar.md`
- `tabs.md`
- `row.md`

### 组合式 API

- `use-count-down.md`
- `use-message.md`
- `use-notify.md`
- `use-toast.md`
- `use-upload.md`

### 其他常用能力

- `dateStrip.md`
- `lazyLoad.md`
- `loadMore.md`
- `numberKeyboard.md`
- `table.md`
- `tree.md`

## 使用模式

1. 识别目标：先确定用户问的是组件、组合式 API、主题配置，还是具体示例。
2. 查阅文档：优先读取 `references/` 中对应的 markdown 文件。
3. 提炼答案：优先输出直接可用的示例、关键 API、注意事项。
4. 保持收敛：围绕用户提问的组件回答，不把答案扩展成整套组件库综述。

## 工作规则

- 默认把 wot-ui-plus 视为 `uni-app + Vue 3 + TypeScript` 组件库。
- 写页面时优先输出 `script setup` 风格。
- 反馈类能力如 `useToast`、`useDialog`、`useNotify`、`useImagePreview`、`useVideoPreview`，除了 hook 调用外，通常还需要页面内显式声明对应组件实例。
- 生成代码时尽量沿用组件库文档里的命名和交互模式，例如 `v-model:visible`、`before-confirm`、`confirm`、`change`、`custom-class`、`custom-style`。


## 最佳实践

- 示例优先：优先给出可以直接复制的最小示例，再补充 API 说明。
- API 对齐：严格以文档中的 props、events、slots、methods 名称作答，不自行发明字段。
- 绑定意识：遇到表单类组件时，优先检查是否涉及 `v-model`、受控值和事件联动。
- 服务式能力：遇到 `toast`、`notify`、`message` 等场景时，优先检查是否应使用对应 `use-*` API。
- 配置类问题：涉及全局配置与主题时，优先查看 `configProvider.md` 及相关文档，而不是分散回答。

## 约束

- 默认使用中文回答。
- 优先基于 `references/` 中已有文档作答。
- 若文档足以回答问题，不额外扩展到实现分析。