@wot-ui/cli 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +356 -124
- package/dist/index.mjs +1903 -9
- package/dist/{server-Cbs8eIrc.mjs → server-DDRLv2Z2.mjs} +6 -3
- package/dist/{update-check-DlG1c3ZB.mjs → update-check-BacAuhBM.mjs} +34 -3
- package/package.json +10 -2
- package/skills/wot-ui-cli/SKILL.md +108 -0
- package/skills/wot-ui-cli/references/overview.md +164 -0
- package/skills/wot-ui-v2/SKILL.md +46 -0
- package/skills/wot-ui-v2/references/overview.md +85 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as version, c as toComponentSummary, g as name, h as loadMetadataFile, i as lintProject, l as toDemoSummary, m as resolveVersion, n as getCliUpdateStatus, o as findComponent, s as listComponents } from "./update-check-BacAuhBM.mjs";
|
|
2
2
|
import process from "node:process";
|
|
3
3
|
import { McpServer, StdioServerTransport } from "@modelcontextprotocol/server";
|
|
4
4
|
import * as z from "zod/v4";
|
|
@@ -22,6 +22,9 @@ const WOT_PAGE_GENERATOR_PROMPT = [
|
|
|
22
22
|
function jsonText(value) {
|
|
23
23
|
return JSON.stringify(value, null, 2);
|
|
24
24
|
}
|
|
25
|
+
function compactJsonText(value) {
|
|
26
|
+
return JSON.stringify(value);
|
|
27
|
+
}
|
|
25
28
|
function registerMcpTools(server, options = {}) {
|
|
26
29
|
server.registerTool("wot_status", {
|
|
27
30
|
description: "Get wot-ui MCP server and CLI update status.",
|
|
@@ -61,7 +64,7 @@ function registerMcpTools(server, options = {}) {
|
|
|
61
64
|
}, async ({ version: version$1 }) => {
|
|
62
65
|
return { content: [{
|
|
63
66
|
type: "text",
|
|
64
|
-
text:
|
|
67
|
+
text: compactJsonText({ components: listComponents(version$1).map(toComponentSummary) })
|
|
65
68
|
}] };
|
|
66
69
|
});
|
|
67
70
|
server.registerTool("wot_info", {
|
|
@@ -140,7 +143,7 @@ function registerMcpTools(server, options = {}) {
|
|
|
140
143
|
};
|
|
141
144
|
if (!demo) return { content: [{
|
|
142
145
|
type: "text",
|
|
143
|
-
text: jsonText({ demos: result.demos ?? [] })
|
|
146
|
+
text: jsonText({ demos: (result.demos ?? []).map(toDemoSummary) })
|
|
144
147
|
}] };
|
|
145
148
|
const matched = result.demos?.find((item) => item.name.toLowerCase() === demo.toLowerCase());
|
|
146
149
|
if (!matched) return {
|
|
@@ -2,13 +2,13 @@ import process from "node:process";
|
|
|
2
2
|
import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
|
|
3
3
|
import { dirname, join, relative, resolve } from "node:path";
|
|
4
4
|
import { fileURLToPath } from "node:url";
|
|
5
|
+
import { homedir } from "node:os";
|
|
5
6
|
import { gunzipSync } from "node:zlib";
|
|
6
7
|
import { parse } from "@vue/compiler-sfc";
|
|
7
|
-
import { homedir } from "node:os";
|
|
8
8
|
|
|
9
9
|
//#region package.json
|
|
10
10
|
var name = "@wot-ui/cli";
|
|
11
|
-
var version = "1.0.
|
|
11
|
+
var version = "1.0.5";
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/data/loader.ts
|
|
@@ -201,6 +201,37 @@ function loadResolvedMetadata(version$1) {
|
|
|
201
201
|
function listComponents(version$1) {
|
|
202
202
|
return loadResolvedMetadata(version$1).components;
|
|
203
203
|
}
|
|
204
|
+
function filterComponents(components, keyword) {
|
|
205
|
+
const normalized = keyword?.trim().toLowerCase();
|
|
206
|
+
if (!normalized) return components;
|
|
207
|
+
return components.filter((component) => {
|
|
208
|
+
return [
|
|
209
|
+
component.name,
|
|
210
|
+
component.nameZh,
|
|
211
|
+
component.tag,
|
|
212
|
+
component.category,
|
|
213
|
+
component.description,
|
|
214
|
+
component.descriptionZh
|
|
215
|
+
].some((value) => value.toLowerCase().includes(normalized));
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
function toComponentSummary(component) {
|
|
219
|
+
return {
|
|
220
|
+
name: component.name,
|
|
221
|
+
nameZh: component.nameZh,
|
|
222
|
+
tag: component.tag,
|
|
223
|
+
category: component.category,
|
|
224
|
+
description: component.descriptionZh || component.description,
|
|
225
|
+
since: component.since
|
|
226
|
+
};
|
|
227
|
+
}
|
|
228
|
+
function toDemoSummary(demo) {
|
|
229
|
+
return {
|
|
230
|
+
name: demo.name,
|
|
231
|
+
title: demo.title,
|
|
232
|
+
description: demo.description
|
|
233
|
+
};
|
|
234
|
+
}
|
|
204
235
|
function findComponent(name$1, version$1) {
|
|
205
236
|
const normalized = name$1.trim().toLowerCase();
|
|
206
237
|
return listComponents(version$1).find((component) => component.name.toLowerCase() === normalized || component.tag.toLowerCase() === normalized);
|
|
@@ -544,4 +575,4 @@ function writeCache(cacheFile, cache) {
|
|
|
544
575
|
}
|
|
545
576
|
|
|
546
577
|
//#endregion
|
|
547
|
-
export {
|
|
578
|
+
export { version as _, filterComponents as a, toComponentSummary as c, formatStatusLabel as d, writeStderrLine as f, name as g, loadMetadataFile as h, lintProject as i, toDemoSummary as l, resolveVersion as m, getCliUpdateStatus as n, findComponent as o, detectVersion as p, analyzeUsage as r, listComponents as s, checkForCliUpdate as t, formatLogMessage as u };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wot-ui/cli",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.5",
|
|
5
5
|
"description": "面向 wot-ui 的 CLI、MCP 与数据提取工具集",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"funding": "https://github.com/sponsors/antfu",
|
|
@@ -25,7 +25,9 @@
|
|
|
25
25
|
},
|
|
26
26
|
"files": [
|
|
27
27
|
"data",
|
|
28
|
-
"dist"
|
|
28
|
+
"dist",
|
|
29
|
+
"skills/wot-ui-cli",
|
|
30
|
+
"skills/wot-ui-v2"
|
|
29
31
|
],
|
|
30
32
|
"engines": {
|
|
31
33
|
"node": ">=20.0.0"
|
|
@@ -35,6 +37,8 @@
|
|
|
35
37
|
"@modelcontextprotocol/server": "2.0.0-alpha.2",
|
|
36
38
|
"@vue/compiler-sfc": "^3.5.13",
|
|
37
39
|
"commander": "^14.0.0",
|
|
40
|
+
"jsonc-parser": "^3.3.1",
|
|
41
|
+
"smol-toml": "^1.7.0",
|
|
38
42
|
"zod": "^4.1.12"
|
|
39
43
|
},
|
|
40
44
|
"devDependencies": {
|
|
@@ -66,6 +70,10 @@
|
|
|
66
70
|
"scripts": {
|
|
67
71
|
"build": "tsdown",
|
|
68
72
|
"dev": "tsdown --watch",
|
|
73
|
+
"site:dev": "pnpm --filter @open-wot/website dev",
|
|
74
|
+
"site:build": "pnpm --filter @open-wot/website build",
|
|
75
|
+
"site:build:next": "pnpm --filter @open-wot/website build:next",
|
|
76
|
+
"site:lint": "pnpm --filter @open-wot/website lint",
|
|
69
77
|
"extract": "tsx scripts/extract.ts",
|
|
70
78
|
"extract:clone": "rm -rf /tmp/open-wot-wot-ui && git clone --depth 1 https://github.com/wot-ui/wot-ui.git /tmp/open-wot-wot-ui && pnpm extract --wot-dir /tmp/open-wot-wot-ui --output data/v2.json",
|
|
71
79
|
"sync": "tsx scripts/sync.ts",
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: wot-ui-cli
|
|
3
|
+
description: 使用、调试或维护 @wot-ui/cli 与 open-wot 仓库。适用于 wot CLI 命令、Agent/MCP 接入、doctor/usage/lint、组件知识查询、客户端 adapter、离线数据提取、构建测试、发布包检查和仓库开发;如果任务是直接编写 wd-* 组件页面或解释组件 API,应改用 wot-ui-v2 skill。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Wot UI CLI
|
|
7
|
+
|
|
8
|
+
处理 `@wot-ui/cli`、MCP、Agent 接入和 open-wot 仓库维护任务时,基于当前源码、`package.json` 和 README 行事,不根据旧文档猜测命令。
|
|
9
|
+
|
|
10
|
+
## 路由
|
|
11
|
+
|
|
12
|
+
- CLI、MCP、Agent、数据提取或仓库开发:使用本 Skill。
|
|
13
|
+
- 组件选型、页面代码、props、主题和组件问题:使用 `wot-ui-v2` Skill。
|
|
14
|
+
- 通过 CLI 查询组件知识时,保留 CLI 使用语境;需要生成组件代码时再切换到 `wot-ui-v2`。
|
|
15
|
+
|
|
16
|
+
## 工作流
|
|
17
|
+
|
|
18
|
+
1. 先查看 `README.md`、`package.json#scripts` 和相关源码。
|
|
19
|
+
2. 修改 CLI、MCP、prompt、数据结构或 Skill 后,同步测试与 README。
|
|
20
|
+
3. 写配置前先运行 `--dry-run`,使用隔离 `--cwd`,不要修改真实用户配置。
|
|
21
|
+
4. 修改命令输出后,至少运行一个真实源码或构建产物命令。
|
|
22
|
+
5. 提交前运行 `pnpm lint && pnpm typecheck && pnpm test && pnpm build`。
|
|
23
|
+
|
|
24
|
+
## 命令分组
|
|
25
|
+
|
|
26
|
+
组件知识:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
wot list [keyword]
|
|
30
|
+
wot info <component>
|
|
31
|
+
wot doc <component>
|
|
32
|
+
wot demo <component> [name]
|
|
33
|
+
wot token [component]
|
|
34
|
+
wot changelog [versionOrComponent] [component]
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
项目分析:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
wot doctor [dir]
|
|
41
|
+
wot usage [dir]
|
|
42
|
+
wot lint [dir]
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Agent 接入:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
wot agent list
|
|
49
|
+
wot agent init --client cursor
|
|
50
|
+
wot agent status --client cursor
|
|
51
|
+
wot agent doctor --client cursor
|
|
52
|
+
wot agent remove --client cursor
|
|
53
|
+
wot agent init --client all
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
MCP 管理:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
wot mcp
|
|
60
|
+
wot mcp serve
|
|
61
|
+
wot mcp list
|
|
62
|
+
wot mcp init --client cursor
|
|
63
|
+
wot mcp status --client cursor
|
|
64
|
+
wot mcp doctor --client cursor
|
|
65
|
+
wot mcp remove --client cursor
|
|
66
|
+
wot mcp print --client cursor
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
查询命令支持 `--version` 和 `--format text|json|markdown`。Agent/MCP 管理命令支持的具体选项以 `--help` 和源码为准;写操作优先使用 `--dry-run`。
|
|
70
|
+
|
|
71
|
+
## 仓库开发
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
pnpm install
|
|
75
|
+
pnpm dev
|
|
76
|
+
pnpm exec tsx src/index.ts list
|
|
77
|
+
pnpm build
|
|
78
|
+
node dist/index.mjs list
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
更新离线数据:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
pnpm sync:clone
|
|
85
|
+
pnpm extract:clone
|
|
86
|
+
pnpm sync --wot-dir ../wot-ui
|
|
87
|
+
pnpm extract --wot-dir ../wot-ui --output data/v2.0.4.json
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
发布包检查:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm build
|
|
94
|
+
pnpm compress
|
|
95
|
+
pnpm exec publint
|
|
96
|
+
npm pack --dry-run --json
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## MCP 注意事项
|
|
100
|
+
|
|
101
|
+
- `wot mcp` 使用 stdio,终端无普通输出通常正常。
|
|
102
|
+
- `doctor` 验证配置和真实 handshake;部分客户端还会检查注册状态。
|
|
103
|
+
- `--client all` 在 project scope 处理四个支持客户端。
|
|
104
|
+
- 保留已有 Server、JSONC 注释、非托管 TOML 和用户 Instructions。
|
|
105
|
+
|
|
106
|
+
## 参考
|
|
107
|
+
|
|
108
|
+
需要完整命令矩阵、目录职责、验证要求、数据与发布流程时,读取 [references/overview.md](./references/overview.md)。
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# Wot UI CLI Overview
|
|
2
|
+
|
|
3
|
+
## 目录
|
|
4
|
+
|
|
5
|
+
- [定位](#定位)
|
|
6
|
+
- [命令矩阵](#命令矩阵)
|
|
7
|
+
- [Agent 与 MCP](#agent-与-mcp)
|
|
8
|
+
- [仓库目录](#仓库目录)
|
|
9
|
+
- [开发与验证](#开发与验证)
|
|
10
|
+
- [数据更新](#数据更新)
|
|
11
|
+
- [发布包与发布](#发布包与发布)
|
|
12
|
+
|
|
13
|
+
## 定位
|
|
14
|
+
|
|
15
|
+
- npm 包:`@wot-ui/cli`
|
|
16
|
+
- 可执行命令:`wot`
|
|
17
|
+
- Node.js:`>= 20`
|
|
18
|
+
- 包管理器:pnpm `10.25.x`
|
|
19
|
+
- 数据范围:wot-ui v2
|
|
20
|
+
- 核心能力:CLI 查询、项目分析、MCP Server、Agent 接入、多版本离线知识和数据提取
|
|
21
|
+
|
|
22
|
+
## 命令矩阵
|
|
23
|
+
|
|
24
|
+
### 组件知识与项目分析
|
|
25
|
+
|
|
26
|
+
| 命令 | 用途 |
|
|
27
|
+
| --- | --- |
|
|
28
|
+
| `wot list [keyword]` | 按名称、中文名、标签、分类或描述查找组件 |
|
|
29
|
+
| `wot info <component>` | props、events、slots、CSS 变量 |
|
|
30
|
+
| `wot doc <component>` | 完整 Markdown 文档 |
|
|
31
|
+
| `wot demo <component> [name]` | demo 列表或指定源码 |
|
|
32
|
+
| `wot token [component]` | 组件 CSS 变量 |
|
|
33
|
+
| `wot changelog [versionOrComponent] [component]` | 版本或组件更新记录 |
|
|
34
|
+
| `wot doctor [dir]` | 项目环境与依赖诊断 |
|
|
35
|
+
| `wot usage [dir]` | `.vue` 文件中的组件使用统计 |
|
|
36
|
+
| `wot lint [dir]` | 未知组件、空按钮等规则 |
|
|
37
|
+
|
|
38
|
+
查询命令支持 `--version <version>` 和 `--format text|json|markdown`。
|
|
39
|
+
|
|
40
|
+
### Agent
|
|
41
|
+
|
|
42
|
+
| 子命令 | 用途 |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| `list` | 列出支持和检测到的客户端 |
|
|
45
|
+
| `init` | 初始化 MCP、Skill 和 Instructions |
|
|
46
|
+
| `status` | 检查三类能力 |
|
|
47
|
+
| `doctor` | 检查文件和真实 MCP handshake |
|
|
48
|
+
| `remove` | 删除 open-wot 托管内容 |
|
|
49
|
+
|
|
50
|
+
`init/status/doctor/remove` 支持 `--client auto|all|claude|cursor|vscode|codex`、`--scope`、`--with`、`--cwd`、`--format` 和 `--pin`。`init/remove` 支持 `--dry-run`、`--yes`;`doctor` 支持 `--timeout`。
|
|
51
|
+
|
|
52
|
+
### MCP
|
|
53
|
+
|
|
54
|
+
| 子命令 | 用途 |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `wot mcp` / `wot mcp serve` | 启动 stdio Server |
|
|
57
|
+
| `list` | 客户端检测 |
|
|
58
|
+
| `init` | 写入 MCP 配置 |
|
|
59
|
+
| `status` | 检查配置 |
|
|
60
|
+
| `doctor` | 配置、handshake 和客户端状态检查 |
|
|
61
|
+
| `remove` | 删除托管配置 |
|
|
62
|
+
| `print` | 输出单客户端配置片段 |
|
|
63
|
+
|
|
64
|
+
## Agent 与 MCP
|
|
65
|
+
|
|
66
|
+
支持的 project scope 配置:
|
|
67
|
+
|
|
68
|
+
| Client | 文件 |
|
|
69
|
+
| --- | --- |
|
|
70
|
+
| Claude Code | `.mcp.json` |
|
|
71
|
+
| Cursor | `.cursor/mcp.json` |
|
|
72
|
+
| VS Code | `.vscode/mcp.json` |
|
|
73
|
+
| Codex | `.codex/config.toml` |
|
|
74
|
+
|
|
75
|
+
一次接入所有客户端:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
wot agent init --client all
|
|
79
|
+
wot agent doctor --client all --timeout 30000
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
默认 Agent 接入安装 MCP、`wot-ui-v2` Skill 和托管 Instructions。`wot-ui-cli` Skill 随 npm 包发布,但不默认安装到组件使用项目。
|
|
83
|
+
|
|
84
|
+
MCP 提供 8 个 tools:
|
|
85
|
+
|
|
86
|
+
```text
|
|
87
|
+
wot_status
|
|
88
|
+
wot_list
|
|
89
|
+
wot_info
|
|
90
|
+
wot_doc
|
|
91
|
+
wot_demo
|
|
92
|
+
wot_token
|
|
93
|
+
wot_changelog
|
|
94
|
+
wot_lint
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## 仓库目录
|
|
98
|
+
|
|
99
|
+
```text
|
|
100
|
+
src/commands CLI 子命令
|
|
101
|
+
src/application MCP/Agent 编排和 ChangePlan
|
|
102
|
+
src/mcp Server、tools、prompts、adapters
|
|
103
|
+
src/data loader 和版本解析
|
|
104
|
+
src/utils 文件、终端、项目扫描等公共能力
|
|
105
|
+
scripts extract、sync、compress
|
|
106
|
+
data 多版本离线数据
|
|
107
|
+
skills Agent Skills
|
|
108
|
+
test 测试
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 开发与验证
|
|
112
|
+
|
|
113
|
+
安装和调试:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
pnpm install
|
|
117
|
+
pnpm dev
|
|
118
|
+
pnpm exec tsx src/index.ts info Button
|
|
119
|
+
pnpm build
|
|
120
|
+
node dist/index.mjs info Button
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
提交前:
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
pnpm lint
|
|
127
|
+
pnpm typecheck
|
|
128
|
+
pnpm test
|
|
129
|
+
pnpm build
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
定向要求:
|
|
133
|
+
|
|
134
|
+
- CLI 输出变化:运行真实命令,同步 README 和命令测试。
|
|
135
|
+
- MCP/Agent:使用隔离目录验证 dry-run、幂等、doctor 和 remove。
|
|
136
|
+
- 数据结构:验证历史快照兼容 commands 与 MCP。
|
|
137
|
+
- Skills:验证 `agent init --dry-run` 和 npm 包文件列表。
|
|
138
|
+
- package exports/files:运行 publint 和 npm pack。
|
|
139
|
+
|
|
140
|
+
## 数据更新
|
|
141
|
+
|
|
142
|
+
离线数据来自上游 wot-ui 的组件 Markdown、changelog 和 SCSS。
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
pnpm sync:clone
|
|
146
|
+
pnpm extract:clone
|
|
147
|
+
pnpm sync --wot-dir ../wot-ui
|
|
148
|
+
pnpm extract --wot-dir ../wot-ui --output data/v2.0.4.json
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
提取后运行 `pnpm test && pnpm build`,并检查 `data/versions.json`、目标快照和 `data/v2.json`。
|
|
152
|
+
|
|
153
|
+
## 发布包与发布
|
|
154
|
+
|
|
155
|
+
```bash
|
|
156
|
+
pnpm build
|
|
157
|
+
pnpm compress
|
|
158
|
+
pnpm exec publint
|
|
159
|
+
npm pack --dry-run --json
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
发布包应包含 `dist/`、压缩数据、`data/versions.json`、`skills/wot-ui-v2` 和 `skills/wot-ui-cli`。
|
|
163
|
+
|
|
164
|
+
维护者使用 `pnpm release`。bumpp 默认更新版本、提交、创建 tag 并推送;`v*` tag 触发 GitHub Actions 发布。发布后检查 npm 版本、文件和 dist-tags,预发布版本不要占用 `latest`。
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: wot-ui-v2
|
|
3
|
+
description: '回答、生成、重构、排查 wot-ui v2 相关代码时使用。关键词:wot-ui、uni-app、Vue3、wd-、ConfigProvider、useToast、useDialog、Form、Popup、theme、llms-full。适用于组件选型、API 查询、示例页面生成、主题定制、常见坑排查。'
|
|
4
|
+
argument-hint: '组件名、页面场景、问题描述或主题定制需求'
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Wot UI V2 Skill
|
|
8
|
+
|
|
9
|
+
这个 skill 用于让 Agent 在处理 wot-ui v2 相关任务时,优先采用组件库既有能力、遵守 uni-app 场景限制,并结合本仓库提供的 `wot` CLI 查询离线知识。
|
|
10
|
+
|
|
11
|
+
## 适用场景
|
|
12
|
+
|
|
13
|
+
- 用户询问某个 `wd-*` 组件的基础用法、属性、事件、插槽或样式变量。
|
|
14
|
+
- 需要生成或重构 `uni-app + Vue 3 + TypeScript` 的 wot-ui 页面或组件代码。
|
|
15
|
+
- 需要在 `ConfigProvider`、主题变量、暗黑模式、国际化、反馈类 hooks、表单等场景下给出正确做法。
|
|
16
|
+
- 需要排查文档中常见的 `Toast`、`Dialog`、`Popup`、`Tabs`、`Slider`、样式覆盖问题。
|
|
17
|
+
- 用户只是泛化地提到主题定制,但还没有明确要求按“单文件主题 SCSS + App.vue 只 `@use`”的结构生成时。
|
|
18
|
+
|
|
19
|
+
## 推荐流程
|
|
20
|
+
|
|
21
|
+
1. 先用本仓库 CLI 或 MCP 工具查组件知识。
|
|
22
|
+
2. 再根据项目实际安装方式决定导入路径与集成方式。
|
|
23
|
+
3. 优先复用现成的 `wd-*` 组件、hooks、主题变量与组合模式,不要退化成原生标签堆砌。
|
|
24
|
+
4. 如果问题涉及约束或坑位,再查阅 [参考知识](./references/overview.md)。
|
|
25
|
+
5. 如果用户明确要求生成 `src/themes/styles/{主题名}.scss` 单文件主题,并把挂载逻辑收进主题文件,优先切换到 `create-wot-ui-theme` skill。
|
|
26
|
+
|
|
27
|
+
## 查询顺序
|
|
28
|
+
|
|
29
|
+
1. `wot list` 找组件名。
|
|
30
|
+
2. `wot info <Component>` 看 props、events、slots、CSS 变量。
|
|
31
|
+
3. `wot demo <Component>` 看 demo 名称或具体 demo 代码。
|
|
32
|
+
4. `wot doc <Component>` 看完整 markdown 文档。
|
|
33
|
+
5. `wot token <Component>` 看主题变量。
|
|
34
|
+
|
|
35
|
+
## 工作规则
|
|
36
|
+
|
|
37
|
+
- 默认把 wot-ui 视为 `uni-app + Vue 3 + TypeScript` 组件库。
|
|
38
|
+
- 写页面时优先输出 `script setup` 风格。
|
|
39
|
+
- 反馈类能力如 `useToast`、`useDialog`、`useNotify`、`useImagePreview`、`useVideoPreview`,除了 hook 调用外,通常还需要页面内显式声明对应组件实例。
|
|
40
|
+
- 文档里经常出现 `@/uni_modules/wot-ui` 导入路径;如果用户项目采用 npm 安装,应切换成 `@wot-ui/ui`。
|
|
41
|
+
- 主题定制优先走 `ConfigProvider` 和 CSS 变量,不优先建议深度覆盖内部类名。
|
|
42
|
+
- 生成代码时尽量沿用组件库文档里的命名和交互模式,例如 `v-model:visible`、`before-confirm`、`confirm`、`change`、`custom-class`、`custom-style`。
|
|
43
|
+
|
|
44
|
+
## 参考资料
|
|
45
|
+
|
|
46
|
+
- [Wot UI V2 概览](./references/overview.md)
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# Wot UI V2 Overview
|
|
2
|
+
|
|
3
|
+
本文件根据 wot-ui v2 的 `llms-full.txt` 与本仓库现有 CLI 工作流提炼,目标是帮助 Agent 快速掌握适合生成代码与回答问题的高价值知识,而不是逐字复制官方文档。
|
|
4
|
+
|
|
5
|
+
## Product Positioning
|
|
6
|
+
|
|
7
|
+
- Wot UI v2 是面向 `uni-app` 的 `Vue 3 + TypeScript` 组件库。
|
|
8
|
+
- 覆盖微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台。
|
|
9
|
+
- 组件命名统一为 `wd-*`。
|
|
10
|
+
- 组件库强调 AI 友好、主题定制、暗黑模式、国际化与跨端一致性。
|
|
11
|
+
|
|
12
|
+
## Installation And Integration
|
|
13
|
+
|
|
14
|
+
- npm 安装:`pnpm add @wot-ui/ui`
|
|
15
|
+
- 使用前需要安装 `sass`。
|
|
16
|
+
- `uni_modules` 安装模式天然支持 easycom 自动引入。
|
|
17
|
+
- npm 安装模式通常需要配置 vite resolver 或 easycom。
|
|
18
|
+
- CLI 项目在 npm 模式下可在 `tsconfig.json` 中加入 `@wot-ui/ui/global` 以增强全局组件类型提示。
|
|
19
|
+
|
|
20
|
+
## Import Rules
|
|
21
|
+
|
|
22
|
+
- npm 安装项目:组合式函数、类型和工具优先从 `@wot-ui/ui` 导入。
|
|
23
|
+
- `uni_modules` 安装项目:文档中的 `@/uni_modules/wot-ui` 路径通常可直接使用。
|
|
24
|
+
- 官方文档示例很多基于 `uni_modules` 路径,回答时要按用户项目实际安装方式转换。
|
|
25
|
+
|
|
26
|
+
## High Value Conventions
|
|
27
|
+
|
|
28
|
+
- 反馈类组件不能依赖全局挂载。页面内通常需要显式写出 `wd-toast`、`wd-dialog`、`wd-notify`、`wd-image-preview`、`wd-video-preview` 等实例。
|
|
29
|
+
- `useToast`、`useDialog`、`useNotify`、`useQueue` 等 hooks 基于 `provide/inject`,应在 `setup` 中调用。
|
|
30
|
+
- 页面内如果存在多个 `wd-dialog` 或 `wd-toast`,需要通过 `selector` 区分,否则可能出现实例冲突或重复弹出。
|
|
31
|
+
- 自定义组件中如果要覆盖 wot-ui 内部样式,小程序环境通常需要把组件配置为 `styleIsolation: 'shared'`。
|
|
32
|
+
- 在 `Popup`、`ActionSheet`、`DropDownItem` 等延迟渲染弹层里使用 `Slider`、`Tabs` 等依赖尺寸计算的组件时,打开后应调用实例方法重新初始化,例如 `initSlider()` 或 `updateLineStyle()`。
|
|
33
|
+
|
|
34
|
+
## Theme And Styling
|
|
35
|
+
|
|
36
|
+
- 主题定制优先走 CSS 变量。
|
|
37
|
+
- Design Token 分三层:基础变量、语义变量、组件变量。
|
|
38
|
+
- 局部或全局主题可通过 `wd-config-provider` 的 `theme` 和 `theme-vars` 控制。
|
|
39
|
+
- 深色模式通过 `wd-config-provider theme="dark"` 开启。
|
|
40
|
+
- 更推荐覆盖语义变量或组件变量,不推荐优先依赖深层 class 选择器覆盖。
|
|
41
|
+
|
|
42
|
+
## Common UI Patterns
|
|
43
|
+
|
|
44
|
+
- 表单场景优先组合 `wd-form`、`wd-form-item`、`wd-input`、`wd-textarea`、`wd-picker`、`wd-calendar`、`wd-select-picker`。
|
|
45
|
+
- 弹层类场景优先使用 `wd-popup`、`wd-dialog`、`wd-action-sheet`、`wd-tooltip`、`wd-popover`。
|
|
46
|
+
- 反馈类场景优先使用 `useToast`、`useDialog`、`useNotify`,不要直接手写临时弹层。
|
|
47
|
+
- 列表和展示类场景优先考虑 `wd-cell`、`wd-card`、`wd-tag`、`wd-badge`、`wd-empty`、`wd-loadmore`、`wd-skeleton`。
|
|
48
|
+
- 导航与布局类场景优先考虑 `wd-navbar`、`wd-tabs`、`wd-tabbar`、`wd-sidebar`、`wd-row`、`wd-col`、`wd-gap`。
|
|
49
|
+
|
|
50
|
+
## Interaction Patterns
|
|
51
|
+
|
|
52
|
+
- 大量组件采用 `v-model` 或 `v-model:visible` 控制状态。
|
|
53
|
+
- 表单和选择类组件普遍提供 `confirm`、`change`、`close` 等事件。
|
|
54
|
+
- 反馈组件常通过 hook 返回方法对象,例如 `toast.success()`、`dialog.confirm()`。
|
|
55
|
+
- `Popover`、`Tooltip`、`SwipeAction` 等场景常与 `useQueue().closeOutside()` 配合,实现点击外部关闭。
|
|
56
|
+
|
|
57
|
+
## Component Selection Hints
|
|
58
|
+
|
|
59
|
+
- 需要主操作按钮时用 `wd-button`,不要先写原生 `button`。
|
|
60
|
+
- 需要列表入口、设置页、表单容器时优先用 `wd-cell` 和 `wd-cell-group`。
|
|
61
|
+
- 需要轻量提示时优先用 `useToast`;需要确认交互时优先用 `useDialog`。
|
|
62
|
+
- 需要单选或多选弹层时优先用 `wd-select-picker`、`wd-picker`、`wd-cascader`。
|
|
63
|
+
- 需要统一主题或暗黑模式时优先用 `wd-config-provider`。
|
|
64
|
+
|
|
65
|
+
## Common Pitfalls
|
|
66
|
+
|
|
67
|
+
- `Toast`、`Dialog` 等函数式调用没有效果,先检查页面里是否声明了对应组件实例。
|
|
68
|
+
- 同一个页面里多个无 `selector` 的反馈组件可能相互干扰。
|
|
69
|
+
- npm 模式使用国际化时,开发态可能需要在 Vite 的 `optimizeDeps.exclude` 中排除 `@wot-ui/ui`。
|
|
70
|
+
- 文档里的导入路径和项目实际安装方式不一致时,回答要主动修正。
|
|
71
|
+
- 在弹层中直接渲染依赖尺寸测量的组件时,初始化时机往往比 API 本身更关键。
|
|
72
|
+
|
|
73
|
+
## AI Response Heuristics
|
|
74
|
+
|
|
75
|
+
- 回答基础用法时,优先给最小可运行模板,再补充常用 props。
|
|
76
|
+
- 生成页面时,优先给完整的 `template + script setup + style` 结构。
|
|
77
|
+
- 如果项目已使用 wot-ui,不要建议换用其他 UI 库。
|
|
78
|
+
- 如果 wot-ui 已有现成组件,就不要用原生结构重复造轮子。
|
|
79
|
+
- 如果用户只问某个组件,优先给该组件最常见 3 到 5 个用法,不要把整份文档全部展开。
|
|
80
|
+
|
|
81
|
+
## Repo-Specific Workflow
|
|
82
|
+
|
|
83
|
+
- 在本仓库中,优先使用 `wot list`、`wot info`、`wot doc`、`wot demo`、`wot token` 获取组件知识。
|
|
84
|
+
- 当仓库数据与线上文档不一致时,以用户目标为准,并明确指出仓库离线数据可能需要重新提取。
|
|
85
|
+
- 若要补数据或修提取逻辑,关注 `scripts/extract.ts`、`data/v2.json`、`src/data/*` 与相应命令实现。
|