@chantezy/mcp-product-design 0.1.0 → 0.1.2
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/dist/index.js +9 -3
- package/dist/index.js.map +1 -1
- package/dist/skill-loader.d.ts +1 -0
- package/dist/skill-loader.js +13 -0
- package/dist/skill-loader.js.map +1 -1
- package/package.json +5 -1
- package/skills/b-design-diverge/README.md +92 -0
- package/skills/b-design-diverge/SKILL.md +130 -0
- package/skills/b-design-diverge/references/b-design-patterns.md +78 -0
- package/skills/b-design-diverge/references/component-libraries.md +66 -0
- package/skills/b-design-diverge/references/output-example.md +167 -0
- package/skills/b-design-diverge/references/wireframe-symbols.md +114 -0
- package/skills/interaction-design-eval/README.md +55 -0
- package/skills/interaction-design-eval/SKILL.md +157 -0
- package/skills/interaction-design-eval/references/job_level_standards.md +134 -0
- package/skills/interaction-design-eval/references/scoring_criteria.md +210 -0
- package/skills/interaction-spec/README.md +55 -0
- package/skills/interaction-spec/SKILL.md +254 -0
- package/skills/interaction-spec/references/complete-examples.md +97 -0
- package/skills/interaction-spec/references/interactive-checklist.md +367 -0
- package/skills/prd-generator/README.md +54 -0
- package/skills/prd-generator/SKILL.md +121 -0
- package/skills/prd-generator/references/prd-template.md +99 -0
- package/skills/requirements-content-analysis/README.md +103 -0
- package/skills/requirements-content-analysis/SKILL.md +792 -0
- package/skills/requirements-content-analysis/references/Cognitive Psychology.md +207 -0
- package/skills/requirements-content-analysis/references/Interaction-design-principles.md +264 -0
- package/skills/requirements-content-analysis/references/Multi-Platform Design Principles.md +340 -0
- package/skills/test-skill/SKILL.md +0 -23
- package/skills/test-skill/references/test-ref.md +0 -3
package/dist/index.js
CHANGED
|
@@ -3,11 +3,16 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
|
3
3
|
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
4
4
|
import { z } from "zod";
|
|
5
5
|
import { listSkills, getSkill, getReference } from "./skill-loader.js";
|
|
6
|
+
import { readFileSync } from "fs";
|
|
7
|
+
import { fileURLToPath } from "url";
|
|
8
|
+
import { dirname, join } from "path";
|
|
9
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
10
|
+
const pkg = JSON.parse(readFileSync(join(__dirname, "../package.json"), "utf-8"));
|
|
6
11
|
const server = new McpServer({
|
|
7
12
|
name: "mcp-product-design",
|
|
8
|
-
version:
|
|
13
|
+
version: pkg.version,
|
|
9
14
|
});
|
|
10
|
-
server.tool("list_skills", "
|
|
15
|
+
server.tool("list_skills", "列出所有可用的产品设计技能及其触发条件。使用策略:1. 当用户明确指定技能时,直接调用 get_skill。2. 当用户意图模糊或无法准确匹配时,先调用 list_skills 列出所有技能标题和触发条件,请用户确认选择。3. 当用户只说'帮我设计'、'分析需求'、'写文档'等模糊表述时,必须调用 list_skills 让用户明确选择。", {}, async () => {
|
|
11
16
|
const skills = listSkills();
|
|
12
17
|
if (skills.length === 0) {
|
|
13
18
|
return {
|
|
@@ -19,8 +24,9 @@ server.tool("list_skills", "列出所有可用的产品设计技能及其触发
|
|
|
19
24
|
],
|
|
20
25
|
};
|
|
21
26
|
}
|
|
22
|
-
const lines = skills.map((s) => `- **${s.name}**
|
|
27
|
+
const lines = skills.map((s) => `- **${s.name}** — ${s.trigger || "查看描述了解适用场景"}`);
|
|
23
28
|
const text = `# 可用产品设计技能 (${skills.length})\n\n` +
|
|
29
|
+
`请根据用户意图,选择最匹配的 skill 调用 \`get_skill\`:\n\n` +
|
|
24
30
|
lines.join("\n") +
|
|
25
31
|
`\n\n---\n使用 \`get_skill\` 工具并提供技能名称来获取完整的工作流程指令。`;
|
|
26
32
|
return {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/skill-loader.d.ts
CHANGED
package/dist/skill-loader.js
CHANGED
|
@@ -17,10 +17,13 @@ function parseFrontmatter(content) {
|
|
|
17
17
|
// Fallback: simple regex parsing if yaml.load fails
|
|
18
18
|
const nameMatch = match[1].match(/^name:\s*(.+)$/m);
|
|
19
19
|
const descMatch = match[1].match(/^description:\s*(.+)$/m);
|
|
20
|
+
const triggerMatch = match[1].match(/^trigger:\s*(.+)$/m);
|
|
20
21
|
if (nameMatch)
|
|
21
22
|
fm.name = nameMatch[1].trim().replace(/^["']|["']$/g, "");
|
|
22
23
|
if (descMatch)
|
|
23
24
|
fm.description = descMatch[1].trim().replace(/^["']|["']$/g, "");
|
|
25
|
+
if (triggerMatch)
|
|
26
|
+
fm.trigger = triggerMatch[1].trim().replace(/^["']|["']$/g, "");
|
|
24
27
|
}
|
|
25
28
|
return { fm, body: match[2] || "" };
|
|
26
29
|
}
|
|
@@ -39,9 +42,18 @@ export function listSkills() {
|
|
|
39
42
|
if (fs.statSync(entryPath).isDirectory() && fs.existsSync(skillMdPath)) {
|
|
40
43
|
const content = fs.readFileSync(skillMdPath, "utf-8");
|
|
41
44
|
const { fm } = parseFrontmatter(content);
|
|
45
|
+
let trigger = fm.trigger || "";
|
|
46
|
+
// Auto-extract trigger from description if not explicitly set
|
|
47
|
+
if (!trigger && fm.description) {
|
|
48
|
+
const triggerMatch = fm.description.match(/当[^(时|触发)]*?(?:时|触发)/);
|
|
49
|
+
if (triggerMatch) {
|
|
50
|
+
trigger = triggerMatch[0];
|
|
51
|
+
}
|
|
52
|
+
}
|
|
42
53
|
skills.push({
|
|
43
54
|
name: fm.name || normalizeSkillDir(entry),
|
|
44
55
|
description: fm.description || "",
|
|
56
|
+
trigger,
|
|
45
57
|
directory: entry,
|
|
46
58
|
});
|
|
47
59
|
}
|
|
@@ -73,6 +85,7 @@ export function getSkill(name) {
|
|
|
73
85
|
return {
|
|
74
86
|
name: fm.name || skill.name,
|
|
75
87
|
description: fm.description || skill.description,
|
|
88
|
+
trigger: fm.trigger || skill.trigger || "",
|
|
76
89
|
directory: skill.directory,
|
|
77
90
|
content,
|
|
78
91
|
body,
|
package/dist/skill-loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skill-loader.js","sourceRoot":"","sources":["../src/skill-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,IAAI,MAAM,SAAS,CAAC;AAEhC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"skill-loader.js","sourceRoot":"","sources":["../src/skill-loader.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chantezy/mcp-product-design",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Product design skills MCP server - structured design workflow tools for AI agents",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
],
|
|
27
27
|
"author": "chantezy",
|
|
28
28
|
"license": "MIT",
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "https://github.com/chantezy/skills"
|
|
32
|
+
},
|
|
29
33
|
"dependencies": {
|
|
30
34
|
"@modelcontextprotocol/sdk": "^1.22.0",
|
|
31
35
|
"js-yaml": "^4.1.0",
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# b-design-diverge
|
|
2
|
+
|
|
3
|
+
> B端产品设计方案发散与探索 Skill
|
|
4
|
+
|
|
5
|
+
帮助设计师与 AI 展开设计对话,快速发散 B 端组件/页面的设计方向,输出带示意图和组件库参考的多方案分析,辅助决策落地。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 目录结构
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
b-design-diverge/
|
|
13
|
+
├── SKILL.md # 核心指令文件(触发入口)
|
|
14
|
+
└── references/
|
|
15
|
+
├── b-design-patterns.md # B端常见场景 → 组件映射速查
|
|
16
|
+
├── component-libraries.md # 主流组件库地址与常用组件直达链接
|
|
17
|
+
├── output-example.md # 完整对话输出示例
|
|
18
|
+
└── wireframe-symbols.md # ASCII/Unicode 示意图符号规范与模板
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 文件说明
|
|
24
|
+
|
|
25
|
+
### `SKILL.md`
|
|
26
|
+
核心指令,AI 触发后首先加载。包含完整工作流(需求理解 → 方案发散 → 对比决策)、B 端设计原则、对话风格要求,以及 references/ 文件的按需读取索引。
|
|
27
|
+
|
|
28
|
+
### `references/b-design-patterns.md`
|
|
29
|
+
B 端高频场景到组件的映射速查表,覆盖数据录入、数据展示、导航结构、操作反馈、权限管控五大类。当用户描述使用场景但不确定应该用什么组件时加载。
|
|
30
|
+
|
|
31
|
+
### `references/component-libraries.md`
|
|
32
|
+
收录六大主流 B 端组件库(Ant Design、Arco Design、Element Plus、TDesign、Semi Design、Naive UI)的文档首页地址,以及输入、展示、导航、反馈四类常用组件的三库直达链接对照表。推荐组件库参考时加载。
|
|
33
|
+
|
|
34
|
+
### `references/wireframe-symbols.md`
|
|
35
|
+
完整的 ASCII/Unicode 符号速查表(单选、复选、输入框、下拉、表格、树节点、步骤条等),附筛选器、列表页、表单、穿梭框、步骤表单、抽屉六种常用布局模板。需要输出示意图时加载。
|
|
36
|
+
|
|
37
|
+
### `references/output-example.md`
|
|
38
|
+
快速出图模式示例,包含两个场景:1)「订阅组成员选择器」2)「数据看板配置页面」。每个场景直接输出ASCII示意图 + 简化对比表,无冗余文字。
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 触发方式
|
|
43
|
+
|
|
44
|
+
当用户探索设计方案、对比设计思路、生成设计示意图时,AI 会自动加载本 Skill。
|
|
45
|
+
|
|
46
|
+
在对话中提到以下关键词时触发:
|
|
47
|
+
|
|
48
|
+
`设计方案` `设计思路` `方案发散` `组件设计` `B端设计` `设计方向` `交互方案` `UI方案` `设计探讨`
|
|
49
|
+
|
|
50
|
+
也可以直接描述需求,例如:
|
|
51
|
+
- "帮我想想这个筛选器怎么设计"
|
|
52
|
+
- "这个成员选择组件有几种做法"
|
|
53
|
+
- "我要做一个权限配置页面"
|
|
54
|
+
- "这个功能有几种设计方案"
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 典型对话流程
|
|
59
|
+
|
|
60
|
+
**设计类需求(出图)**:
|
|
61
|
+
```
|
|
62
|
+
用户:帮我设计一个权限管理页面
|
|
63
|
+
|
|
64
|
+
AI:(出图模式)
|
|
65
|
+
1. 输出 2~4 个方案的 ASCII 示意图
|
|
66
|
+
2. 每个方案含优势/劣势
|
|
67
|
+
3. 输出简化对比表
|
|
68
|
+
4. 询问深入方向
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**咨询类需求(不出图)**:
|
|
72
|
+
```
|
|
73
|
+
用户:权限管理应该怎么设计
|
|
74
|
+
|
|
75
|
+
AI:(文字分析模式)
|
|
76
|
+
1. 分析权限管理的核心要素
|
|
77
|
+
2. 给出设计建议和注意事项
|
|
78
|
+
3. 询问是否需要出图看具体方案
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## 覆盖的组件库
|
|
84
|
+
|
|
85
|
+
| 组件库 | 文档地址 |
|
|
86
|
+
|------|---------|
|
|
87
|
+
| Ant Design | https://ant-design.antgroup.com/components/overview-cn |
|
|
88
|
+
| Arco Design (Vue) | https://arco.design/vue/docs/start |
|
|
89
|
+
| Element Plus | https://element.eleme.cn/#/zh-CN/component/installation |
|
|
90
|
+
| TDesign (Vue Next) | https://tdesign.tencent.com/vue-next/overview |
|
|
91
|
+
| Semi Design | https://semi.design/zh-CN |
|
|
92
|
+
| Naive UI | https://www.naiveui.com/zh-CN/os-theme |
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: b-design-diverge
|
|
3
|
+
description: B端设计方案快速发散与对比工具。通过ASCII示意图构建多方案对比,帮助设计师快速锁定最优方案。当用户探索设计方案、对比设计思路、生成设计示意图时触发。
|
|
4
|
+
trigger: 当用户需要发散 B 端设计方案、对比多个设计思路、生成设计示意图时使用
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# B端设计方案发散 Skill
|
|
8
|
+
|
|
9
|
+
辅助 B 端产品设计师进行设计方案发散与探索,结合 B 端产品特点与主流组件规范,输出多方向设计分析与可视化示意,帮助快速锁定可落地方案。
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 工作流程
|
|
14
|
+
|
|
15
|
+
### Step 0 · 意图判断(关键)
|
|
16
|
+
|
|
17
|
+
收到需求后,先判断用户意图类型:
|
|
18
|
+
|
|
19
|
+
**需要出图(功能设计类)**:
|
|
20
|
+
- "帮我设计一个XX页面"
|
|
21
|
+
- "XX功能有几种做法"
|
|
22
|
+
- "这个组件怎么设计"
|
|
23
|
+
- 用户需要看到具体的界面布局
|
|
24
|
+
|
|
25
|
+
**不需要出图(功能咨询类)**:
|
|
26
|
+
- "XX功能应该怎么设计"
|
|
27
|
+
- "XX的实现方式有哪些"
|
|
28
|
+
- "XX功能合不合理"
|
|
29
|
+
- 用户在讨论思路、方案合理性、技术实现
|
|
30
|
+
|
|
31
|
+
> 咨询类需求 → 直接文字分析,不出示意图
|
|
32
|
+
> 设计类需求 → 进入下面的出图流程
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
### Step 1 · 理解需求
|
|
37
|
+
|
|
38
|
+
针对未明确的部分主动追问(已知则跳过):
|
|
39
|
+
|
|
40
|
+
- **功能目标**:要解决什么核心问题?
|
|
41
|
+
- **用户角色**:管理员 / 运营 / 普通员工 / 外部用户?
|
|
42
|
+
- **使用频率**:高频操作 or 低频配置?
|
|
43
|
+
- **数据规模**:大量数据展示 or 少量配置项?
|
|
44
|
+
|
|
45
|
+
### Step 2 · 方案发散(快速出图模式)
|
|
46
|
+
|
|
47
|
+
**核心原则:图 > 文,快速出图,减少冗余文案**
|
|
48
|
+
|
|
49
|
+
每次输出 **2~4 个方向**,每个方向:
|
|
50
|
+
|
|
51
|
+
1. **方案名**(简短,如"表单式"、"步骤式"、"列表+抽屉")
|
|
52
|
+
2. **ASCII 示意图**(必须,占主要篇幅)
|
|
53
|
+
3. **一句话适用场景**
|
|
54
|
+
4. **优势 / 劣势**(各1-2句,精简)
|
|
55
|
+
|
|
56
|
+
**输出格式要求**:
|
|
57
|
+
- 示意图为主体,文字为辅助
|
|
58
|
+
- 组件参考链接仅在用户明确要求时提供
|
|
59
|
+
- 对比表简化为关键维度
|
|
60
|
+
|
|
61
|
+
B端设计核心原则:**效率优先 · 信息密度 · 容错设计 · 权限感知 · 反馈及时**
|
|
62
|
+
|
|
63
|
+
> 需要场景速查表(录入/展示/导航/反馈类组件映射),读取 `references/b-design-patterns.md`
|
|
64
|
+
|
|
65
|
+
### Step 3 · 方案对比
|
|
66
|
+
|
|
67
|
+
发散完成后输出简化对比表:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
方案A 方案B 方案C
|
|
71
|
+
适用量级 < 100 任意 > 100
|
|
72
|
+
操作步骤 1步 3步 2步
|
|
73
|
+
推荐指数 ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
每轮结束主动询问:"想深入哪个方向?"
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 移动端B端设计特殊考虑
|
|
81
|
+
|
|
82
|
+
当用户需求涉及移动端B端设计时,需要特别关注以下方面:
|
|
83
|
+
|
|
84
|
+
### 1. 屏幕尺寸与交互方式
|
|
85
|
+
- **触屏优先**:所有交互元素需考虑手指操作,按钮最小点击区域44×44px
|
|
86
|
+
- **单手操作**:重要操作放在屏幕下半部分,方便单手握持
|
|
87
|
+
- **手势支持**:考虑滑动、长按、双击等移动端特有手势
|
|
88
|
+
|
|
89
|
+
### 2. 信息密度与布局
|
|
90
|
+
- **垂直布局**:移动端优先使用单列布局,避免横向滚动
|
|
91
|
+
- **折叠收纳**:使用折叠面板、抽屉等方式管理复杂信息
|
|
92
|
+
- **分步展示**:复杂表单采用分步引导,减少单页信息量
|
|
93
|
+
|
|
94
|
+
### 3. 组件适配
|
|
95
|
+
- **下拉选择**:使用底部弹出选择器,而非桌面端下拉框
|
|
96
|
+
- **日期选择**:使用移动端专用日期选择器组件
|
|
97
|
+
- **表格处理**:横向滚动、固定列、卡片式转换等方案
|
|
98
|
+
- **表单输入**:考虑虚拟键盘弹出时的页面适配
|
|
99
|
+
|
|
100
|
+
### 4. 性能与体验
|
|
101
|
+
- **加载优化**:骨架屏、懒加载、分页加载
|
|
102
|
+
- **离线支持**:考虑网络不稳定场景
|
|
103
|
+
- **手势反馈**:提供适当的震动、动画反馈
|
|
104
|
+
|
|
105
|
+
### 5. 移动端特有组件
|
|
106
|
+
- **底部导航栏**:移动端主要导航方式
|
|
107
|
+
- **下拉刷新/上拉加载**:移动端标准交互模式
|
|
108
|
+
- **抽屉菜单**:节省屏幕空间的导航方案
|
|
109
|
+
- **底部弹窗**:替代桌面端模态对话框
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 对话风格
|
|
114
|
+
|
|
115
|
+
- **图优先**:ASCII示意图为主体,文字为辅助
|
|
116
|
+
- **快速出图**:直接输出方案,减少需求确认环节
|
|
117
|
+
- **精简文案**:优势/劣势各1-2句,不啰嗦
|
|
118
|
+
- **有态度**:给出明确推荐,不做"都可以"式模糊回答
|
|
119
|
+
- **迭代深化**:持续推进,每轮结尾留下下一步问题
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## 参考文件索引
|
|
124
|
+
|
|
125
|
+
| 文件 | 内容 | 何时读取 |
|
|
126
|
+
|------|------|---------|
|
|
127
|
+
| `references/wireframe-symbols.md` | ASCII/Unicode 示意图符号规范 + 模板 | 需要画示意图时 |
|
|
128
|
+
| `references/component-libraries.md` | 主流B端组件库地址与适用场景 | 推荐组件库参考时 |
|
|
129
|
+
| `references/b-design-patterns.md` | 常见B端场景→组件映射速查 | 用户描述场景但不确定用什么组件时 |
|
|
130
|
+
| `references/output-example.md` | 完整输出示例(订阅组成员选择器 + 数据看板配置页面) | 不确定输出格式时参考 |
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# B端常见场景 → 组件映射速查
|
|
2
|
+
|
|
3
|
+
## 数据录入类
|
|
4
|
+
|
|
5
|
+
| 场景描述 | 推荐组件 | 备注 |
|
|
6
|
+
|--------|---------|------|
|
|
7
|
+
| 单字段文本输入 | Input 输入框 | 可加前后缀图标 |
|
|
8
|
+
| 单字段数值输入 | InputNumber 数字输入框 | 支持步进/范围限制 |
|
|
9
|
+
| 从有限选项中选一 | Select / Radio | 选项<5用Radio,多用Select |
|
|
10
|
+
| 从有限选项中选多 | Checkbox / Select(multiple) | 选项<8用Checkbox |
|
|
11
|
+
| 有层级的选一/多 | TreeSelect / Cascader | 层级≤3用Cascader,更深用TreeSelect |
|
|
12
|
+
| 从大量数据中选 | Select(搜索) / Transfer 穿梭框 | 需要预览已选时用Transfer |
|
|
13
|
+
| 日期/时间选择 | DatePicker / TimePicker | 范围选择用RangePicker |
|
|
14
|
+
| 颜色选择 | ColorPicker | - |
|
|
15
|
+
| 富文本内容 | RichTextEditor(第三方) | 推荐Quill/TipTap |
|
|
16
|
+
| 多字段简单表单 | Form(单列/双列) | 字段<6单列,多用双列 |
|
|
17
|
+
| 复杂分步配置 | Steps + Form(步骤表单) | 流程超过3步考虑步骤表单 |
|
|
18
|
+
| 批量录入/编辑 | EditableTable 可编辑表格 | - |
|
|
19
|
+
| 开关型配置 | Switch 开关 | 即时生效无需确认 |
|
|
20
|
+
| 滑动范围选择 | Slider 滑块 | 适合不精确的范围输入 |
|
|
21
|
+
| 文件上传 | Upload 上传 | 注意文件类型/大小校验 |
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 数据展示类
|
|
26
|
+
|
|
27
|
+
| 场景描述 | 推荐组件 | 备注 |
|
|
28
|
+
|--------|---------|------|
|
|
29
|
+
| 列表数据展示 | Table 表格 | 默认首选,列多时考虑固定列 |
|
|
30
|
+
| 大数据量列表 | Table(虚拟滚动) | 超过500行建议虚拟滚动 |
|
|
31
|
+
| 有层级的数据 | Tree / Table(树形) | 纯展示用Tree,有操作用TreeTable |
|
|
32
|
+
| 卡片式布局 | Card + Grid | 适合非结构化、图文混排 |
|
|
33
|
+
| 详情信息展示 | Descriptions 描述列表 | label-value对形式 |
|
|
34
|
+
| 数据统计指标 | Statistic 统计数值 | 配合趋势图效果更佳 |
|
|
35
|
+
| 时间线/历史记录 | Timeline 时间线 | - |
|
|
36
|
+
| 状态/进度 | Badge / Tag / Progress | 根据精确度选择 |
|
|
37
|
+
| 图表数据 | Chart(ECharts/AntV) | 折线/柱状/饼图场景各异 |
|
|
38
|
+
| 空状态 | Empty 空状态 | 搜索无结果/列表为空 |
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 导航结构类
|
|
43
|
+
|
|
44
|
+
| 场景描述 | 推荐组件 | 备注 |
|
|
45
|
+
|--------|---------|------|
|
|
46
|
+
| 顶级功能导航 | TopBar + Menu(横向) | 功能模块<8 |
|
|
47
|
+
| 多级功能导航 | SideNav + Menu(纵向) | 主流B端中后台方案 |
|
|
48
|
+
| 当前位置指引 | Breadcrumb 面包屑 | 层级>2时必须有 |
|
|
49
|
+
| 同级内容切换 | Tabs 标签页 | 内容差异大用Tab,小用Segmented |
|
|
50
|
+
| 页内章节锚点 | Anchor 锚点 | 长页面内导航 |
|
|
51
|
+
| 操作/功能分组 | Collapse 折叠面板 | 内容较多可收起 |
|
|
52
|
+
| 弹出式菜单 | Dropdown 下拉菜单 | 次级操作收纳 |
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## 操作反馈类
|
|
57
|
+
|
|
58
|
+
| 场景描述 | 推荐组件 | 备注 |
|
|
59
|
+
|--------|---------|------|
|
|
60
|
+
| 操作成功/失败提示 | Message / Toast | 轻量,自动消失 |
|
|
61
|
+
| 重要状态通知 | Alert / Banner | 持续展示,需手动关闭 |
|
|
62
|
+
| 危险操作二次确认 | Popconfirm(轻量)/ Modal(重要) | 删除用Popconfirm,批量操作用Modal |
|
|
63
|
+
| 复杂信息展示/编辑 | Modal 对话框 | 不离开当前页的操作 |
|
|
64
|
+
| 侧边详情/编辑 | Drawer 抽屉 | 内容多、需要对比上下文时 |
|
|
65
|
+
| 系统级全局通知 | Notification 通知提醒 | 异步任务完成、消息推送 |
|
|
66
|
+
| 加载状态 | Spin / Skeleton / Progress | 区分加载中/骨架屏/进度 |
|
|
67
|
+
| 表单字段校验 | Form.Item 内联错误 | 错误提示紧跟字段,不用弹窗 |
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 权限与角色相关
|
|
72
|
+
|
|
73
|
+
| 场景描述 | 推荐方案 |
|
|
74
|
+
|--------|---------|
|
|
75
|
+
| 无权限操作按钮 | 禁用(disabled)优于隐藏,鼠标悬停提示原因 |
|
|
76
|
+
| 无权限页面 | 403空状态页,提示联系管理员 |
|
|
77
|
+
| 角色切换 | TopBar用户信息区切换,需刷新菜单 |
|
|
78
|
+
| 数据行权限 | 表格操作列按行权限动态显隐 |
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# 主流 B 端组件库参考
|
|
2
|
+
|
|
3
|
+
## 组件库总览
|
|
4
|
+
|
|
5
|
+
| 组件库 | 出品方 | 技术栈 | 适用场景 | 文档首页 |
|
|
6
|
+
|------|------|------|---------|---------|
|
|
7
|
+
| **Ant Design** | 阿里蚂蚁 | React | 企业级中后台,生态最完善,设计规范成熟 | https://ant-design.antgroup.com/components/overview-cn |
|
|
8
|
+
| **Arco Design** | 字节跳动 | Vue / React | 现代感强,组件丰富,适合内部工具和SaaS | https://arco.design/vue/docs/start |
|
|
9
|
+
| **Element Plus** | 饿了么 | Vue 3 | Vue生态主流,上手成本低,社区庞大 | https://element.eleme.cn/#/zh-CN/component/installation |
|
|
10
|
+
| **TDesign** | 腾讯 | Vue Next / React | 企业级规范完善,多端一致性好 | https://tdesign.tencent.com/vue-next/overview |
|
|
11
|
+
| **Semi Design** | 字节抖音 | React | 设计系统完备,暗色模式支持好 | https://semi.design/zh-CN |
|
|
12
|
+
| **Naive UI** | 社区 | Vue 3 | 轻量灵活,TypeScript友好 | https://www.naiveui.com/zh-CN/os-theme |
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 常用组件直达链接
|
|
17
|
+
|
|
18
|
+
### 数据录入
|
|
19
|
+
| 组件 | Ant Design | TDesign | Arco Design |
|
|
20
|
+
|------|-----------|---------|------------|
|
|
21
|
+
| 输入框 Input | [链接](https://ant-design.antgroup.com/components/input-cn) | [链接](https://tdesign.tencent.com/vue-next/components/input) | [链接](https://arco.design/vue/component/input) |
|
|
22
|
+
| 选择器 Select | [链接](https://ant-design.antgroup.com/components/select-cn) | [链接](https://tdesign.tencent.com/vue-next/components/select) | [链接](https://arco.design/vue/component/select) |
|
|
23
|
+
| 树选择 TreeSelect | [链接](https://ant-design.antgroup.com/components/tree-select-cn) | [链接](https://tdesign.tencent.com/vue-next/components/tree-select) | [链接](https://arco.design/vue/component/tree-select) |
|
|
24
|
+
| 复选框 Checkbox | [链接](https://ant-design.antgroup.com/components/checkbox-cn) | [链接](https://tdesign.tencent.com/vue-next/components/checkbox) | [链接](https://arco.design/vue/component/checkbox) |
|
|
25
|
+
| 穿梭框 Transfer | [链接](https://ant-design.antgroup.com/components/transfer-cn) | [链接](https://tdesign.tencent.com/vue-next/components/transfer) | [链接](https://arco.design/vue/component/transfer) |
|
|
26
|
+
| 日期选择 DatePicker | [链接](https://ant-design.antgroup.com/components/date-picker-cn) | [链接](https://tdesign.tencent.com/vue-next/components/datepicker) | [链接](https://arco.design/vue/component/date-picker) |
|
|
27
|
+
| 表单 Form | [链接](https://ant-design.antgroup.com/components/form-cn) | [链接](https://tdesign.tencent.com/vue-next/components/form) | [链接](https://arco.design/vue/component/form) |
|
|
28
|
+
| 开关 Switch | [链接](https://ant-design.antgroup.com/components/switch-cn) | [链接](https://tdesign.tencent.com/vue-next/components/switch) | [链接](https://arco.design/vue/component/switch) |
|
|
29
|
+
|
|
30
|
+
### 数据展示
|
|
31
|
+
| 组件 | Ant Design | TDesign | Arco Design |
|
|
32
|
+
|------|-----------|---------|------------|
|
|
33
|
+
| 表格 Table | [链接](https://ant-design.antgroup.com/components/table-cn) | [链接](https://tdesign.tencent.com/vue-next/components/table) | [链接](https://arco.design/vue/component/table) |
|
|
34
|
+
| 树形 Tree | [链接](https://ant-design.antgroup.com/components/tree-cn) | [链接](https://tdesign.tencent.com/vue-next/components/tree) | [链接](https://arco.design/vue/component/tree) |
|
|
35
|
+
| 描述列表 Descriptions | [链接](https://ant-design.antgroup.com/components/descriptions-cn) | [链接](https://tdesign.tencent.com/vue-next/components/descriptions) | [链接](https://arco.design/vue/component/descriptions) |
|
|
36
|
+
| 标签 Tag | [链接](https://ant-design.antgroup.com/components/tag-cn) | [链接](https://tdesign.tencent.com/vue-next/components/tag) | [链接](https://arco.design/vue/component/tag) |
|
|
37
|
+
| 徽标 Badge | [链接](https://ant-design.antgroup.com/components/badge-cn) | [链接](https://tdesign.tencent.com/vue-next/components/badge) | [链接](https://arco.design/vue/component/badge) |
|
|
38
|
+
|
|
39
|
+
### 导航
|
|
40
|
+
| 组件 | Ant Design | TDesign | Arco Design |
|
|
41
|
+
|------|-----------|---------|------------|
|
|
42
|
+
| 菜单 Menu | [链接](https://ant-design.antgroup.com/components/menu-cn) | [链接](https://tdesign.tencent.com/vue-next/components/menu) | [链接](https://arco.design/vue/component/menu) |
|
|
43
|
+
| 标签页 Tabs | [链接](https://ant-design.antgroup.com/components/tabs-cn) | [链接](https://tdesign.tencent.com/vue-next/components/tabs) | [链接](https://arco.design/vue/component/tabs) |
|
|
44
|
+
| 面包屑 Breadcrumb | [链接](https://ant-design.antgroup.com/components/breadcrumb-cn) | [链接](https://tdesign.tencent.com/vue-next/components/breadcrumb) | [链接](https://arco.design/vue/component/breadcrumb) |
|
|
45
|
+
| 步骤条 Steps | [链接](https://ant-design.antgroup.com/components/steps-cn) | [链接](https://tdesign.tencent.com/vue-next/components/steps) | [链接](https://arco.design/vue/component/steps) |
|
|
46
|
+
|
|
47
|
+
### 反馈
|
|
48
|
+
| 组件 | Ant Design | TDesign | Arco Design |
|
|
49
|
+
|------|-----------|---------|------------|
|
|
50
|
+
| 对话框 Modal | [链接](https://ant-design.antgroup.com/components/modal-cn) | [链接](https://tdesign.tencent.com/vue-next/components/dialog) | [链接](https://arco.design/vue/component/modal) |
|
|
51
|
+
| 抽屉 Drawer | [链接](https://ant-design.antgroup.com/components/drawer-cn) | [链接](https://tdesign.tencent.com/vue-next/components/drawer) | [链接](https://arco.design/vue/component/drawer) |
|
|
52
|
+
| 消息 Message | [链接](https://ant-design.antgroup.com/components/message-cn) | [链接](https://tdesign.tencent.com/vue-next/components/message) | [链接](https://arco.design/vue/component/message) |
|
|
53
|
+
| 警告 Alert | [链接](https://ant-design.antgroup.com/components/alert-cn) | [链接](https://tdesign.tencent.com/vue-next/components/alert) | [链接](https://arco.design/vue/component/alert) |
|
|
54
|
+
| 气泡确认 Popconfirm | [链接](https://ant-design.antgroup.com/components/popconfirm-cn) | [链接](https://tdesign.tencent.com/vue-next/components/popup) | [链接](https://arco.design/vue/component/popconfirm) |
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 引用格式规范
|
|
59
|
+
|
|
60
|
+
在输出方案时,按如下格式附上参考链接:
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
📦 组件库参考:
|
|
64
|
+
- Ant Design · Select 选择器 → https://ant-design.antgroup.com/components/select-cn
|
|
65
|
+
- TDesign · TreeSelect 树形选择 → https://tdesign.tencent.com/vue-next/components/tree-select
|
|
66
|
+
```
|