Wot Ui V2

Wot UI V2 Skill

这个 skill 用于让 Agent 在处理 wot-ui v2 相关任务时，优先采用组件库既有能力、遵守 uni-app 场景限制，并结合本仓库提供的 wot CLI 查询离线知识。

适用场景

• 用户询问某个 wd-* 组件的基础用法、属性、事件、插槽或样式变量。
• 需要生成或重构 uni-app + Vue 3 + TypeScript 的 wot-ui 页面或组件代码。
• 需要在 ConfigProvider、主题变量、暗黑模式、国际化、反馈类 hooks、表单等场景下给出正确做法。
• 需要排查文档中常见的 Toast、Dialog、Popup、Tabs、Slider、样式覆盖问题。
• 用户只是泛化地提到主题定制，但还没有明确要求按“单文件主题 SCSS + App.vue 只 @use”的结构生成时。

推荐流程

1. 先用本仓库 CLI 或 MCP 工具查组件知识。 2. 再根据项目实际安装方式决定导入路径与集成方式。 3. 优先复用现成的 wd-* 组件、hooks、主题变量与组合模式，不要退化成原生标签堆砌。 4. 如果问题涉及约束或坑位，再查阅 参考知识。 5. 如果用户明确要求生成 src/themes/styles/{主题名}.scss 单文件主题，并把挂载逻辑收进主题文件，优先切换到 create-wot-ui-theme skill。

查询顺序

1. wot list 找组件名。 2. wot info <Component> 看 props、events、slots、CSS 变量。 3. wot demo <Component> 看 demo 名称或具体 demo 代码。 4. wot doc <Component> 看完整 markdown 文档。 5. wot token <Component> 看主题变量。

工作规则

• 默认把 wot-ui 视为 uni-app + Vue 3 + TypeScript 组件库。
• 写页面时优先输出 script setup 风格。
• 反馈类能力如 useToast、useDialog、useNotify、useImagePreview、useVideoPreview，除了 hook 调用外，通常还需要页面内显式声明对应组件实例。
• 文档里经常出现 @/uni_modules/wot-ui 导入路径；如果用户项目采用 npm 安装，应切换成 @wot-ui/ui。
• 主题定制优先走 ConfigProvider 和 CSS 变量，不优先建议深度覆盖内部类名。
• 生成代码时尽量沿用组件库文档里的命名和交互模式，例如 v-model:visible、before-confirm、confirm、change、custom-class、custom-style。

参考资料

• Wot UI V2 概览

Wot UI V2 Overview

本文件根据 wot-ui v2 的 llms-full.txt 与本仓库现有 CLI 工作流提炼，目标是帮助 Agent 快速掌握适合生成代码与回答问题的高价值知识，而不是逐字复制官方文档。

Product Positioning

• Wot UI v2 是面向 uni-app 的 Vue 3 + TypeScript 组件库。
• 覆盖微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台。
• 组件命名统一为 wd-*。
• 组件库强调 AI 友好、主题定制、暗黑模式、国际化与跨端一致性。

Installation And Integration

• npm 安装：pnpm add @wot-ui/ui
• 使用前需要安装 sass。
• uni_modules 安装模式天然支持 easycom 自动引入。
• npm 安装模式通常需要配置 vite resolver 或 easycom。
• CLI 项目在 npm 模式下可在 tsconfig.json 中加入 @wot-ui/ui/global 以增强全局组件类型提示。

Import Rules

• npm 安装项目：组合式函数、类型和工具优先从 @wot-ui/ui 导入。
• uni_modules 安装项目：文档中的 @/uni_modules/wot-ui 路径通常可直接使用。
• 官方文档示例很多基于 uni_modules 路径，回答时要按用户项目实际安装方式转换。

High Value Conventions

• 反馈类组件不能依赖全局挂载。页面内通常需要显式写出 wd-toast、wd-dialog、wd-notify、wd-image-preview、wd-video-preview 等实例。
• useToast、useDialog、useNotify、useQueue 等 hooks 基于 provide/inject，应在 setup 中调用。
• 页面内如果存在多个 wd-dialog 或 wd-toast，需要通过 selector 区分，否则可能出现实例冲突或重复弹出。
• 自定义组件中如果要覆盖 wot-ui 内部样式，小程序环境通常需要把组件配置为 styleIsolation: 'shared'。
• 在 Popup、ActionSheet、DropDownItem 等延迟渲染弹层里使用 Slider、Tabs 等依赖尺寸计算的组件时，打开后应调用实例方法重新初始化，例如 initSlider() 或 updateLineStyle()。

Theme And Styling

• 主题定制优先走 CSS 变量。
• Design Token 分三层：基础变量、语义变量、组件变量。
• 局部或全局主题可通过 wd-config-provider 的 theme 和 theme-vars 控制。
• 深色模式通过 wd-config-provider theme="dark" 开启。
• 更推荐覆盖语义变量或组件变量，不推荐优先依赖深层 class 选择器覆盖。

Common UI Patterns

• 表单场景优先组合 wd-form、wd-form-item、wd-input、wd-textarea、wd-picker、wd-calendar、wd-select-picker。
• 弹层类场景优先使用 wd-popup、wd-dialog、wd-action-sheet、wd-tooltip、wd-popover。
• 反馈类场景优先使用 useToast、useDialog、useNotify，不要直接手写临时弹层。
• 列表和展示类场景优先考虑 wd-cell、wd-card、wd-tag、wd-badge、wd-empty、wd-loadmore、wd-skeleton。
• 导航与布局类场景优先考虑 wd-navbar、wd-tabs、wd-tabbar、wd-sidebar、wd-row、wd-col、wd-gap。

Interaction Patterns

• 大量组件采用 v-model 或 v-model:visible 控制状态。
• 表单和选择类组件普遍提供 confirm、change、close 等事件。
• 反馈组件常通过 hook 返回方法对象，例如 toast.success()、dialog.confirm()。
• Popover、Tooltip、SwipeAction 等场景常与 useQueue().closeOutside() 配合，实现点击外部关闭。

Component Selection Hints

• 需要主操作按钮时用 wd-button，不要先写原生 button。
• 需要列表入口、设置页、表单容器时优先用 wd-cell 和 wd-cell-group。
• 需要轻量提示时优先用 useToast；需要确认交互时优先用 useDialog。
• 需要单选或多选弹层时优先用 wd-select-picker、wd-picker、wd-cascader。
• 需要统一主题或暗黑模式时优先用 wd-config-provider。

Common Pitfalls

• Toast、Dialog 等函数式调用没有效果，先检查页面里是否声明了对应组件实例。
• 同一个页面里多个无 selector 的反馈组件可能相互干扰。
• npm 模式使用国际化时，开发态可能需要在 Vite 的 optimizeDeps.exclude 中排除 @wot-ui/ui。
• 文档里的导入路径和项目实际安装方式不一致时，回答要主动修正。
• 在弹层中直接渲染依赖尺寸测量的组件时，初始化时机往往比 API 本身更关键。

AI Response Heuristics

• 回答基础用法时，优先给最小可运行模板，再补充常用 props。
• 生成页面时，优先给完整的 template + script setup + style 结构。
• 如果项目已使用 wot-ui，不要建议换用其他 UI 库。
• 如果 wot-ui 已有现成组件，就不要用原生结构重复造轮子。
• 如果用户只问某个组件，优先给该组件最常见 3 到 5 个用法，不要把整份文档全部展开。

Repo-Specific Workflow

• 在本仓库中，优先使用 wot list、wot info、wot doc、wot demo、wot token 获取组件知识。
• 当仓库数据与线上文档不一致时，以用户目标为准，并明确指出仓库离线数据可能需要重新提取。
• 若要补数据或修提取逻辑，关注 scripts/extract.ts、data/v2.json、src/data/* 与相应命令实现。