---
name: win-design-next-vue
version: 1.1.0
description: >
  Generates Vue 3 pages using WinDesign Next ONLY (win-design-next).
  Follow SPO: Scope constraints, Process chains, Output checklist.
  NEVER use element-plus or invent APIs. Read components/by-name/{component}.md first.
  Use for B-end pages, list/form/modal layouts, WiNEX Vue 3 UI.
---

# WinDesign Next Vue 页面开发 Skill

> **Skill V1.1.0** | 适配 win-design-next | Vue 3.3+ | 组件前缀 `w-` | 包名 `win-design-next`

按 **SPO（Scope → Process → Output）** 工作；集团研发请先读 [usage-guide.md](references/usage-guide.md)。

---

## S — Scope

| 项           | 说明                                                 |
| ------------ | ---------------------------------------------------- |
| 目标版本     | `win-design-next`（见 `version.json`）               |
| Vue          | 3.3+，推荐 `<script setup lang="ts">`                |
| 前缀         | 标签 `w-`，包名 `win-design-next`                    |
| 样式命名空间 | 默认 **`w3`**（class `.w3-*`，变量 `--w3-*`）        |
| 禁止         | element-plus、ant-design-vue、win-design Vue2 旧 API |

### 硬约束

| 规则             | 正确                                         | 错误                                                  |
| ---------------- | -------------------------------------------- | ----------------------------------------------------- |
| 组件库           | win-design-next                              | element-plus                                          |
| 显隐             | `v-model` on dialog/drawer                   | `.sync`                                               |
| 消息             | `import { WMessage } from 'win-design-next'` | 全局 `$message`                                       |
| 默认尺寸         | `default`                                    | 臆造 medium                                           |
| 颜色             | `var(--w3-color-primary)` 等 CSS 变量        | 硬编码 `#2D5AFA`                                      |
| 自定义样式选择器 | `.w3-button` 等                              | `.w-button`（Vue 2 旧 class）                         |
| 表格大数据       | `w-table-v2`                                 | `w-table-pro`（不存在）                               |
| 日期 / 时间      | `w-date-picker-pro`、`w-time-picker-pro`     | `w-date-picker`、`w-datetime-picker`、`w-time-picker` |

日期时间完整对照见 [date-time-advanced.md](references/date-time-advanced.md)。

完整见 [forbidden.md](references/forbidden.md)。

### 复杂场景触发

| 触发            | Reference                                                                                                                                                               |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 列表页          | [scenes/list-page.md](references/scenes/list-page.md) + [design-patterns/form.md](references/design-patterns/form.md) + [table.md](references/design-patterns/table.md) |
| 表单页          | [scenes/form-page.md](references/scenes/form-page.md) + [form.md](references/design-patterns/form.md)                                                                   |
| 弹窗/抽屉       | [scenes/modal-drawer.md](references/scenes/modal-drawer.md)                                                                                                             |
| 消息/Loading    | [scenes/message-feedback.md](references/scenes/message-feedback.md)                                                                                                     |
| 应用壳          | [scenes/layout-shell.md](references/scenes/layout-shell.md) + [shell.md](references/design-patterns/shell.md)                                                           |
| Design Token    | [design-patterns/tokens.md](references/design-patterns/tokens.md)                                                                                                       |
| 命名空间 w3     | [namespace.md](references/namespace.md)                                                                                                                                 |
| 日期 / 时间选型 | [date-time-advanced.md](references/date-time-advanced.md)                                                                                                               |
| 安装            | [setup.md](references/setup.md)                                                                                                                                         |

---

## P — Process

1. **认场景** → `references/scenes/`
2. **认组件** → [component-index.md](references/component-index.md)
3. **查 API** → `references/components/by-name/{组件名}.md`
4. **对规范** → [design-patterns/tokens.md](references/design-patterns/tokens.md)
5. **输出前** → 下方 O 清单

---

## O — Output 回归清单

- [ ] 仅 `w-*` 标签，import 自 `win-design-next`
- [ ] 每个用到的组件 props/事件均来自 by-name 文档
- [ ] Vue 3 语法（`v-model`、`#slot`）
- [ ] 颜色用 `--w3-*` CSS 变量，勿硬编码（见 [tokens.md](references/design-patterns/tokens.md)）
- [ ] 自定义样式选择器用 `.w3-*`（见 [namespace.md](references/namespace.md)）
- [ ] 完整可运行代码，无 `...` 省略关键逻辑
- [ ] 日期 / 时间字段使用 Pro 组件（见 [date-time-advanced.md](references/date-time-advanced.md)）
- [ ] 对照 [forbidden.md](references/forbidden.md)

---

## 文档索引

| 文档                                                  | 用途                   |
| ----------------------------------------------------- | ---------------------- |
| [component-index.md](references/component-index.md)   | 组件速查               |
| [components/by-name/](references/components/by-name/) | **唯一可信 API 源**    |
| [scenes/](references/scenes/)                         | 页面骨架               |
| [design-patterns/](references/design-patterns/)       | Token + 视觉规则       |
| [usage-guide.md](references/usage-guide.md)           | Prompt、防胡编         |
| [setup.md](references/setup.md)                       | 安装注册               |
| [namespace.md](references/namespace.md)               | w3 命名空间与 CSS 变量 |
